.books-filter-section {
   padding: 10px;
   margin-top: 20px;
   /* background-color: black; */
   text-align: center;
}


.filter-container-semister {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 10px;
   margin-bottom: 20px;
}



.filter-container-semister .filter-btn {
   background-color: #000000;
   color: white;
   border: none;
   padding: 10px 20px;
   font-size: 1rem;
   border-radius: 5px;
   text-transform: uppercase;
   cursor: pointer;
}

.filter-btn {
   background-color: #ff5722;
   color: white;
   text-decoration: none;
   border: none;
   margin-top: 5px;
   padding: 10px 20px;
   font-size: 1rem;
   border-radius: 5px;
   cursor: pointer;
}

.filter-container-semister .filter-btn:hover {
   background-color: #003975;
}

.filter-btn:hover {
   background-color: #831f01;
}

/* new coode  */
.filter-container-semister {
   display: flex;
   gap: 10px;
   margin-bottom: 20px;
}

.filter-container-semister .filter-btn {
   padding: 10px 20px;
   background-color: #007bff;
   color: white;
   text-decoration: none;
   border-radius: 5px;
   cursor: pointer;
   transition: background-color 0.3s;
}

.filter-container-semister .filter-btn.active {
   background-color: #003975;
}

.filter-container {
   display: none;
   padding: 20px;
   font-size: 15px;
   border-radius: 5px;
   margin-top: 20px;
}

.filter-container.active {
   /* display: block; */
   display: flex;
   flex-wrap: wrap;
   /* Allows wrapping to the next line */
   justify-content: center;
   gap: 30px;
   /* background-color: red; */
   align-items: center;
}

/* Custom background color for active links in filter containers */
.filter-container.active .filter-btn.active {

   background-color: #831f01;
}


.books-grid-page {
   display: flex;
   flex-wrap: wrap;
   gap: 25px;
   margin-bottom: 20px;
   justify-content: center;
   padding: 0px;
}

.books-grid-page .book-item {
   flex: 1 1 calc(30% - 30px);
   /* Adjust the percentage as needed */
   max-width: calc(25% - 30px);
   background-color: #f8f9fa;
   border-radius: 8px;
   /* overflow: hidden; */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   text-align: center;
   padding: 5px;
}

.books-grid-page .book-item img {
   width: 80%;
   height: auto;
   border-bottom: 1px solid #ddd;
}

.books-grid-page .book-item h3 {
   margin: 10px 0;
   font-size: 1.2rem;
}

.books-grid-page .book-item p {
   font-size: 0.9rem;
}

.books-grid-page .book-item a {
   text-decoration: none;
   color: #007bff;
   font-weight: bold;
}


/* Responsive Adjustments */
@media (max-width: 768px) {
   .filter-container-semister {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
   }

   .filter-container {
      padding: 5px;
   }

   .books-grid-page .book-item {
      flex: 1 1 calc(50% - 20px);
      /* Adjust the percentage as needed */
      max-width: calc(80% - 30px);
      /* 2 items per row on medium screens */
   }
}

@media (max-width: 480px) {
   .books-grid-page .book-item {
      flex: 1 1 100%;
      /* 1 item per row on small screens */
   }
}



/* create form design */
/* General Styles */
/* Container Styles */
.add-book-container {
   max-width: 700px;
   margin: 0 auto;
   padding: 30px;
   background-color: #f8f9fa;
   /* border-radius: 10px; */
   /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
}

.add-book-header-section {
   text-align: center;
   margin-bottom: 30px;
}

.add-book-page-title {
   font-size: 2.2em;
   color: #343a40;
   font-weight: 500;
   margin-bottom: 10px;
}

.add-book-page-description {
   font-size: 1.1em;
   color: #6c757d;
}

/* Form Styles */
.add-book-form-container form {
   display: flex;
   flex-direction: column;
}

.add-book-form-group {
   margin-bottom: 20px;
}

.add-book-form-group label {
   display: block;
   font-size: 1.1em;
   color: #343a40;
   margin-bottom: 5px;
}

.add-book-form-group input[type="text"],
.add-book-form-group input[type="file"],
.add-book-form-group select {
   width: 100%;
   padding: 10px;
   font-size: 1em;
   border: 1px solid #ced4da;
   border-radius: 5px;
   box-sizing: border-box;
   transition: border-color 0.3s ease;
}

.add-book-form-group input[type="text"]:focus,
.add-book-form-group input[type="file"]:focus,
.add-book-form-group select:focus {
   border-color: #007bff;
}

.add-book-form-group button[type="submit"] {
   padding: 12px;
   font-size: 1.2em;
   color: #fff;
   background-color: #007bff;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   transition: background-color 0.3s ease;
}

.add-book-form-group button[type="submit"]:hover {
   background-color: #0056b3;
}

/* Responsive Design */
@media (max-width: 768px) {
   .add-book-container {
      padding: 20px;
   }

   .add-book-page-title {
      font-size: 1.8em;
   }

   .add-book-page-description {
      font-size: 1em;
   }

   .add-book-form-group input[type="text"],
   .add-book-form-group input[type="file"],
   .add-book-form-group select {
      font-size: 0.9em;
   }

   .add-book-form-group button[type="submit"] {
      font-size: 1.1em;
   }
}

@media (max-width: 480px) {
   .add-book-container {
      padding: 15px;
   }

   .add-book-page-title {
      font-size: 1.5em;
   }

   .add-book-form-group input[type="text"],
   .add-book-form-group input[type="file"],
   .add-book-form-group select {
      padding: 8px;
   }

   .add-book-form-group button[type="submit"] {
      font-size: 1em;
   }
}



/* drop down button */

/* Dropdown Button */
.dropdown {
   position: relative;
   display: inline-block;
}

.dropdown-btn {
   background-color: #ff5722;
   color: white;
   padding: 10px 15px;
   font-size: 1rem;
   border: none;
   border-radius: 4px;
   cursor: pointer;
}

.dropdown-btn:hover {
   background-color: #0056b3;
}

/* Dropdown Content */
/* Dropdown Container */
.dropdown {
   position: relative;
   display: inline-block;
}

.dropdown-btn {
   background-color: #007bff;
   color: white;
   padding: 10px 15px;
   font-size: 1rem;
   border: none;
   border-radius: 4px;
   cursor: pointer;
}

.dropdown-btn:hover {
   background-color: #0056b3;
}

/* Dropdown Content */
/* Container for custom select */
/* .select-container {

} */

/* Style the select element */
.custom-select {
   width: 100%;
   padding: 10px;
   font-size: 1rem;
   border: 1px solid #ddd;
   border-radius: 4px;
   background-color: #ff5722;
   color: white;
   cursor: pointer;
   appearance: none;
   /* Remove default styling */
}

/* Add a custom arrow */
.custom-select::after {
   content: '▼';
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;
   color: #333;
}

/* Style the select when focused */
.custom-select:focus {
   border-color: #007bff;
   outline: none;
}

/* Hide options when not focused */
.default-option {
   display: none;
}

/* Show options when dropdown is focused */
.custom-select:focus .hidden-option {
   display: block;
}