#im {
     transition: all .2s ease-in-out;
 }

 .cover {
     width: 100%;
     height: 300px;
     object-fit: cover;
 }

 .cover:hover {
     transform: scale(1.0);
     /* rotate(2.1deg) */
     opacity: 0.7;
     filter: alpha(opacity=70);
     transition: all .7s;
     cursor: pointer;
 }


 #im_news {
     transition: all .2s ease-in-out;
     height: 250px;
 }

 .cover_news {
     width: 100%;
     object-fit: cover;
 }

 .cover_news:hover {
     transform: scale(1.0);
     /* rotate(2.1deg) */
     opacity: 0.7;
     filter: alpha(opacity=70);
     transition: all .7s;
     cursor: pointer;
 }

 .overlay-section {
     position: relative;
     height: 300px;
     /* Adjust height as needed */
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: white;
     padding: 20px;
     margin-top: 30px;
     margin-bottom: 30px;
     border-radius: 10px;
     overflow: hidden;
     background: rgba(0, 0, 0, 0.5);
     /* Overlay effect */
 }

 .overlay-section .fixed-background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url("{{ asset('uploads/book1.webp') }}") no-repeat center center;
     background-size: cover;
     background-attachment: fixed;
     /* Fixes the background within this section */
     z-index: -1;
     /* Ensure it stays behind the content */
 }

 @media (max-width: 768px) {
     .fixed-background {
         background-attachment: scroll !important;
         /* Disable fixed background on mobile */
         background-size: auto !important;
         /* Adjust background size on mobile */
     }
 }


 .overlay-content {
     position: relative;
     z-index: 1;
 }

 .overlay-content h2,
 .overlay-content p,
 .overlay-content a {
     color: white;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
 }

 .chosen-select {
     height: 40px !important;
     /* Match the height of other inputs */
     font-size: 16px !important;
     color: rgb(65, 62, 62) !important;
     width: 100% !important;
     /* Make the Chosen select take up full width */


 }

 .form-select {
     flex-grow: 1;
     height: 50px;
 }


 .cookie-bar {
     position: fixed;
     bottom: 0;
     width: 100%;
     background-color: #f8f9fa;
     border-top: 1px solid #ccc;
     z-index: 9999;
     font-size: 14px;
 }

 .genre-badge:hover {
     background-color: #dff0ff !important;
     /* change to any color */
     color: #000 !important;
     /* make sure text stays readable */
     border-color: #007bff !important;
     transition: all 0.3s ease;
     cursor: pointer;
 }

body.dark-mode .genre-badge{
    background-color: #2c2c2c !important;
    color:#e0e0e0 !important; 

}

.fixed-col {
    flex: 0 0 25%;
    max-width: 25%;
}

.partners {
    border: 1px solid transparent !important;
    transition: all 0.3s ease;
    max-height: 60px;
    
}

.partners:hover {
    border: 1px solid black !important;
    transition: all 0.3s ease;
    max-height: 60px; 
}

.suggest-box{
    position:absolute; top:calc(100% + 2px); left:0; right:0; width:100%;
    background:#fff; border:1px solid #e5e7eb; border-top:0;
    z-index:5000; max-height:320px; overflow:auto;
  }
  .suggest-item{
    display:flex; align-items:center; gap:10px;
    padding:8px 10px; cursor:pointer;
  }
  .suggest-item:hover{ background:#f8f9fa; }

  /* Fixed-size cover using background image (immune to global img rules) */
  .suggest-item .thumb-bg{
    width:40px; height:56px; flex:0 0 40px;
    border-radius:4px;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    display:block;
  }

  .suggest-text{ line-height:1.2; min-width:0; }
  .suggest-title{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .suggest-author{ font-size:12px; color:#6b7280; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  @media (max-width:576px){
    .suggest-item .thumb-bg{ width:34px; height:48px; flex-basis:34px; }
  }



 
  .image-zoom-wrap{ position:relative; }
  .image-zoom-lens{
    position:absolute; width:140px; height:140px;
    border:1px solid rgba(0,0,0,.25);
    background: rgba(255,255,255,.15);
    display:none; pointer-events:none; border-radius:4px;
  }
  .image-zoom-result{
    position:absolute; top:0; left:calc(100% + 16px);
    width:420px; height:420px; border:1px solid #eee; background:#fff no-repeat;
    box-shadow:0 8px 24px rgba(0,0,0,.08); display:none; z-index:20;
    pointer-events: none;   /* don't trap the cursor */

  }
  @media (max-width: 991.98px){
    .image-zoom-lens, .image-zoom-result{ display:none !important; }
  }
 




@media (max-width: 768px) {
    .book-detail-page .toggle-cart-btn {
        font-size: 18px !important;
        padding: 14px 20px !important;
        width: 100% !important;
        display: block;
        text-align: center;
        border-radius: 10px;
    }


    .book-detail-page .direct-play-btn {
        font-size: 18px !important;
        padding: 14px 20px !important;
        width: 100% !important;
        display: block;
        text-align: center;
        border-radius: 10px;
    }
    .book-detail-page .toggle-cart-btn i {
        font-size: 22px !important;
        margin-right: 8px;
    }

    .book-detail-page .quantity-input,
    .book-detail-page .input-group .btn {
        font-size: 14px !important;
        padding: 4px 8px !important;
    }

    .book-detail-page .input-group {
        max-width: 100px;
    }

    .book-detail-page .cart-control-mobile {
        display: flex;
        gap: 10px;
        align-items: center;
    }
}
 .genre-scroll.dropdown-menu {
     z-index: 1050 !important;
     position: absolute !important;
     top: 100% !important;
     left: 0 !important; 
 }
 @media (max-width: 768px) {
    .dropdown-menu.genre-scroll {
        position: fixed !important;
        top: 45px !important; /* Adjust as needed depending on your navbar height */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: 100vh !important;
        height: auto !important;
        overflow-y: auto !important;
        border-radius: 0 !important;
        background-color: #fff !important; /* Or dark if in dark mode */
        z-index: 9999 !important;
    }
    body.dark-mode .dropdown-menu.genre-scroll {
        background-color: #464343 !important;
    }
}

 .nowrap {
     white-space: nowrap;
 }

 @media (min-width: 992px) {
    .container {
        padding: 0px !important;
    }
}

 /* Flip the dropdown arrow when open */
 .nav-link.dropdown-toggle::after {
     transition: transform 0.3s ease;
 }

 .nav-link.dropdown-toggle.show::after {
     transform: rotate(180deg);
 }

 /* Adjust the dropdown button height */
 .chosen-container-single .chosen-single {
     height: 40px !important;
     /* Match the height of other inputs */
     line-height: 40px;
     /* Ensure the text aligns well */
     font-size: 16px !important;
     color: rgb(65, 62, 62) !important;

 }

 .hero-section {
     background: url("{{ asset('uploads/book9.webp') }}") no-repeat center center;
     /* Replace with your image path */
     background-size: cover;
     background-attachment: fixed;
     /* Keeps the background image fixed */
     height: 250px;
     /* Adjust height as needed */
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: white;
     position: relative;
     overflow: hidden;
     border-radius: 10px;

 }


 @media (max-width: 768px) {
     .hero-section {
         background-attachment: scroll !important;
         /* Disable fixed background on mobile */
         background-size: auto !important;
         /* Adjust background size on mobile */
     }
 }
 


 .hero-section::before {
     content: '';
     position: absolute;

     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.5);
     /* Adjust overlay color/opacity */
     z-index: 1;
 }

 .hero-content {
     position: relative;
     z-index: 2;
     top: 12px;
     color: white;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
 }


 .section-title {
     font-size: 24px;
     /* Increase font size for better visibility */
     color: #2c3e50;
     /* Darker color for better contrast */
     padding-bottom: 20px;
     display: flex;
     align-items: left;
     justify-content: center;
     /* Center the title */
      position: relative;
      padding-top: 20px;
     text-transform: uppercase;
     /* Make the text uppercase for emphasis */
     letter-spacing: 1px;
     /* Add a bit of letter spacing */
 }

 /* Add a fancy icon before the text */
 .section-title i {
     font-size: 28px;
     /* Increase icon size */
     color: #d7dae2;
     /* Make the icon stand out */
     margin-right: 10px;
     /* Add some space between icon and text */
 }

 /* Add a subtle background effect */
 .section-title::before {
     content: '';
     position: absolute;
     width: 100%;
     height: 25px;
     background: linear-gradient(to right, #f0f1f5, #bfc2c2);
     bottom: 0;
     top: 0px;
     left: 0;
     z-index: -1;
     /* Send the background effect behind the text */
     transform: scaleX(0);
     transform-origin: bottom right;
     transition: transform 0.5s ease;
 }

 .section-title:hover::before {
     transform: scaleX(1);
     transform-origin: bottom left;
 }







 /* Bouncing animation for the icon */
 @keyframes bounce {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-5px);
     }
 }





 .animated-title {
     font-size: 28px;
     color: #fff;
     padding: 15px 30px;
     display: inline-block;
     background-color: #3498db;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     position: relative;
     overflow: hidden;
     border-radius: 12px;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
     animation: slide-in 1.5s ease-out forwards, color-pulse 3s infinite;
     transition: transform 0.3s, background-color 0.5s;
 }

 /* Hover effect */
 .animated-title:hover {
     background-color: #e74c3c;
     transform: scale(1.05);
 }

 /* Sliding animation */
 @keyframes slide-in {
     0% {
         transform: translateX(-100%);
         opacity: 0;
     }

     100% {
         transform: translateX(0);
         opacity: 1;
     }
 }

 /* Color pulsing effect */
 @keyframes color-pulse {

     0%,
     100% {
         box-shadow: 0 0 10px #3498db, 0 0 30px #3498db;
     }

     50% {
         box-shadow: 0 0 20px #e74c3c, 0 0 40px #e74c3c;
     }
 }

 .popular-book-item {
     font-size: 16px;
     padding: 5px 0;
 }

 .book-number {
     font-weight: bold;
 }

 .book-title {
     font-weight: bold;
 }

 .book-author {
     color: #555;
     /* Dark gray for the author name */
     font-style: italic;
 }

 .book-details {
     font-size: 14px;
     color: #777;
     /* Lighter gray for additional details */
 }

 /* Optional: Customize the card appearance */
 .card.mb-3 {
     background-color: #f9f9f9;
     /* Light background color */
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     /* Subtle shadow */
 }

 .card h5 {
     margin-bottom: 15px;
     font-size: 18px;
     font-weight: bold;
 }

 .read-more-link {
     color: #3498db;
     font-weight: bold;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     transition: color 0.3s;
     float: right;
 }

 .read-more-link i {
     margin-left: 5px;
     /* Add space between text and icon */
     font-size: 16px;
     /* Adjust icon size */
     transition: transform 0.3s;
 }

 .read-more-link:hover {
     color: #2c3e50;
     /* Darker color on hover */
 }

 .read-more-link:hover i {
     transform: translateX(5px);
     /* Slide icon to the right on hover */
 }

 .down {
     position: relative;
     top: 2px !important;
 }


 .navbar {
     transition: background-color 0.3s ease, top 0.3s ease;
     position: sticky;
     width: 100%;
     top: 0;
     left: 0;
     z-index: 900 !important;
     /* Above modal backdrop */
     background-color: #F3F4F6 !important;
     padding-bottom: 26px;
 }

 .modal-backdrop {
     z-index: 1040 !important;
     /* Below modal and navbar */
 }

 .modal {
     z-index: 1050 !important;
     /* Between backdrop and navbar */
 }

 .navbar.scrolled {
     background-color: #2b4a8d !important;
     /* Ensure the new background is applied */
     box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.1);
     /* Add a subtle shadow for emphasis */

 }

 .navbar.scrolled ul li a {

     color: #523a3a !important;
 }
.fasi{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !;

}
 .btn-primary {
     background-color: #d7dae2 !important;
     border-color: #ccc;
     color: #523a3a;
 }

 .btn-primary:hover {
     background-color: #ccc !important;
     border-color: #ccc;
     color: #000000 !important;
 }

 @font-face {
     font-family: 'liFont';
     src: url('../fonts/bpg_boxo-boxo.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;

 }

 li,
 input,
 button,
 select,
 span {
     font-family: 'liFont', sans-serif !important;
 }

 .styled-input::placeholder {
     line-height: 1.5;
     /* Adjust the line height to move the placeholder */
     transform: translateY(2px);
     /* Move the placeholder text down */

 }

 .card {
     transition: transform 0.2s, box-shadow 0.2s;
 }

 .card:hover {
     transform: translateY(-5px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     /* Hover shadow effect */
 }

 .image-container {
     overflow: hidden;
     border-top-left-radius: 0.5rem;
     border-top-right-radius: 0.5rem;
 }

 .card-img-top {
     height: 200px;
     object-fit: cover;
     /* Makes sure the image covers the container */
     transition: transform 0.3s ease;
 }

 .card-img-top:hover {
     transform: scale(1.05);
     /* Slight zoom on hover */
 }

 .card-title {
     font-weight: bold;
     margin-top: 10px;
 }

 .categoria {
     background-color: #ffffff;
     /* Change to the color you want */
     color: #757373;
     /* Text color */
     border: 1px solid #ced4da;
     /* Border color to match input fields */
     border-radius: 0.25rem;
     /* Rounded corners, same as inputs */
     padding: 0.375rem 0.75rem;
     /* Padding to align text nicely */
     font-size: 1rem;
     /* Match font size with other fields */
     transition: border-color 0.2s ease-in-out;
 }

 .categoria:focus {
     outline: 0;
 }

 .submit-search {
     background: rgb(77, 76, 76);
     color: white;
     border: 0px !important;
 }

 .submit-search:hover {
     background: #1b4661;
     color: #c6c8c9
 }



 @font-face {
     font-family: 'h1Font';
     src: url('../fonts/alk-tommaso-webfont.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }

 h1,
 h5,
 h2 {
     font-family: 'h1Font', sans-serif !important;
 }

 @font-face {
     font-family: 'h4Font';
     src: url('../fonts/bpg-glaho-web-caps-webfont.ttf') format('truetype');
     font-weight: bolder;
     font-style: normal;
 }

 h4 {
     font-family: 'h4Font', sans-serif !important;
     font-size: 1.125rem;
     /* 1 rem = the root font size (usually 16px, so 1.125rem = 18px) */

 }


 .fb-icon {
     color: white;
     margin-right: 10px;
     transition: color 0.3s ease, transform 0.3s ease;
     /* Smooth transition for hover effect */
 }

 .fb-icon:hover {
     color: blue;
     /* Change to your desired hover color */
     transform: scale(1.2);
     /* Slightly increase the size on hover */
 }

 body.dark-mode .fb-icon:hover {
    color: blue !important;
    /* Change to your desired hover color */
    transform: scale(1.2);
    /* Slightly increase the size on hover */
}


 .fb-icon-top {
     color: #504646;
     margin-right: 10px;
     transition: color 0.3s ease, transform 0.3s ease;
     /* Smooth transition for hover effect */
 }

 .fb-icon-top:hover {
     color: blue;
     /* Change to your desired hover color */
     transform: scale(1.2);
     /* Slightly increase the size on hover */
 }


 body.dark-mode .fb-icon-top {
    color: #504646;
    margin-right: 10px;
    transition: color 0.3s ease, transform 0.3s ease;
    /* Smooth transition for hover effect */
}

body.dark-mode .fb-icon-top:hover {
    color: blue !important;
    /* Change to your desired hover color */
    transform: scale(1.2) !important;
    /* Slightly increase the size on hover */
}

 .insta-icon-top {
     color: #504646;
     margin-right: 10px;
     transition: color 0.3s ease, transform 0.3s ease;
     /* Smooth transition for hover effect */
 }

 .insta-icon-top:hover {
     background: #833ab4;
     background: linear-gradient(to right,
             #833ab4, #fd1d1d, #fcb045);
     transform: scale(1.2);
     /* Slightly increase the size on hover */
 }

 @media (max-width: 991.98px) {

     /* Show mobile dropdown menu above hero */
     .navbar-collapse {
         position: relative;
         margin-top: 10px;
         /* 👈 Prevents upward shift */
         padding: 10px 10px 15px 10px;
         background-color: #F3F4F6;
     }


 }


 .facebook-btn {
    background-color: #3b5998;
    border: none;

}

.facebook-btn:hover {
    background-color: #2d4373;
}


 .youtube-icon-top {
     color: #504646;
     margin-right: 10px;
     transition: color 0.3s ease, transform 0.3s ease;
     /* Smooth transition for hover effect */
 }

 .youtube-icon-top:hover {
     color: #FF0000;
     /* Change to your desired hover color */
     transform: scale(1.2);
     /* Slightly increase the size on hover */
 }
 


 .insta-icon {
     color: white;
     margin-right: 10px;
     transition: color 0.3s ease, transform 0.3s ease;
     /* Smooth transition for hover effect */
 }

 .insta-icon:hover {
     background: #833ab4;
     background: linear-gradient(to right,
             #833ab4, #fd1d1d, #fcb045);
     transform: scale(1.2);
     /* Slightly increase the size on hover */
 }

 .youtube-icon {
     color: white;
     margin-right: 10px;
     top: 3px;
     position: relative;
     transition: color 0.3s ease, transform 0.3s ease;
     /* Smooth transition for hover effect */
 }

 .youtube-icon:hover {
     color: #FF0000;
     /* Change to your desired hover color */
     transform: scale(1.2);
     /* Slightly increase the size on hover */
 }
 body.dark-mode .youtube-icon:hover {
    color: #FF0000 !important;
    /* Change to your desired hover color */
    transform: scale(1.2) !important;
    /* Slightly increase the size on hover */
}


 .tiktok-icon {
     color: white !important;
     margin-right: 22px !important;
     position: relative;
     transition: color 0.3s ease, transform 0.3s ease;
     /* Smooth transition for hover effect */
 }

 .tiktok-icon:hover {
     color: #111111;

     filter: drop-shadow(2px 0px 0px #FD3E3E) drop-shadow(-2px -2px 0px #4DE8F4);
     /* Change to your desired hover color */
     transform: scale(1.2);
     /* Slightly increase the size on hover */
 }

 .kalata {
     padding: 0 10px 0 10px;
     border-bottom-left-radius: 10px;
     border-top-right-radius: 10px;
     
 }

 .kalata:hover {
     background-color: #ffffff;
     padding: 0 10px 0 10px;
     border-bottom-left-radius: 10px;
     border-top-right-radius: 10px;
 }


 .kalata2 {
    padding: 0 5px 0 5px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #4d4c4c;
    margin-left:10px;
    color:#cacaca !important;
}

.kalata2:hover {
    padding: 0 5px 0 5px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #4d4c4c;
    margin-left:10px;
    color:#cacaca !important;
    background-color: #383737;

}

.kalata3 {
    padding: 0 10px 0 10px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    
}

 




 .circle {
     display: inline-block;
     width: 17px;
     height: 17px;
     font-size: 12px;
     background-color: #be0a0a;
     color: white;
     text-align: center;
     line-height: 20px;
     border-radius: 50%;
     position: absolute;
     /* Allows positioning based on parent */
     top: -4px;
     /* Move down by 50px */
     margin-left: -5px;
 }

 /* Adjust for mobile screens */
 @media (max-width: 768px) {
     .circle {
         display: none;
     }
 }

 .custom-bubble {
     position: absolute;
     top: -4px;
     /* Move it upwards */
     left: 0px;
     /* Move it to the right */
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background-color: transparent;
     /* Background color of the bubble */
     color: #d80303;
     /* Text color */
     border-radius: 0px 4px;
     /* Rounded corners */
     padding: 0px 0px 0px 0px;
     /* Adjust padding as needed */
     font-size: 9px;
     /* Font size */
     font-weight: bold;
     border: 1px solid #5e5b5b;
     min-width: 15px;
     max-height: 13px;
     text-align: center;
 }

 /* Add the small triangle notch at the bottom center */
 .custom-bubble::after {
     content: "";
     position: absolute;
     bottom: -5px;
     /* Position below the bubble */
     left: 55%;
     transform: translateX(-50%);
     width: 0;
     height: 0;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
     border-top: 5px solid #5e5b5b;
     /* Matches bubble color */
 }


 .genre-scroll {
     max-height: 300px;
     overflow-y: auto;
     overflow-x: hidden;
     padding-right: 5px;
 }

 .genre-scroll::-webkit-scrollbar-thumb {
     background-color: #ccc;
     border-radius: 3px;
 }


  .thumb-img {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
    border: 2px solid transparent;
}

.thumb-img:hover {
    border: 2px solid #0d6efd; /* blue */
    transform: scale(1.04);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

       .thumbnail-row {
    display: flex;
    justify-content: space-between;  /* even spacing */
    align-items: center;
    gap: 10px;                       /* spacing between images */
    padding: 10px 5px;
    width: 100%;
    overflow-x: hidden;              /* prevent scrollbars */
    box-sizing: border-box;          /* prevent overflow */
}

.thumb-img {
    flex: 1;                         /* every thumbnail gets equal width */
    max-width: 22%;                  /* 4 images = 4 × 22% = safe */
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
}

/* Small screens */
@media (max-width: 480px) {
    .thumb-img {
        height: 65px;
        max-width: 23%;
    }
}

/* Desktop */
@media (min-width: 768px) {
    .thumb-img {
        height: 90px;
        max-width: 23%;
    }
}

.search-spinner {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 3px solid #ccc;
    border-top-color: #c00505;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    display: none;
    z-index: 20;
}

@keyframes spin {
    to { transform: translateY(-50%) rotate(360deg); }
}



#pageLoader {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
}

.loader {
    width: 35px;
    height: 35px;
    border: 4px solid #ccc;
    border-top-color: #745d08;
    border-radius: 50%;
    animation: spin .6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


 /* Fix dropdown hidden issue */
 .navbar .dropdown-menu {
     z-index: 9999 !important;
     position: absolute !important;
     top: 100%;
     background-color: white !important;

 }

 /* Ensure all parent containers allow visibility */
 .navbar,
 .navbar-nav,
 .container,
 body {
     position: relative !important;
     z-index: auto !important;
 }

 /* Ensure second navbar does not overlap */
 .navbar+.navbar {
     z-index: 1 !important;
     position: relative !important;
 }

 #topStickyNavbar {
     position: fixed !important;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 1055559999 !important;
     background-color: #212529;
     transition: background-color 0.3s ease, box-shadow 0.3s ease;
 }

 #topStickyNavbar.scrolled {
     background-color: #d8dae2 !important;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }


.deliveryFull
{
    position: relative; 
    font-size: 12px !important; 
    
}
 #mainNavbar {
     transition: top 0.3s ease;
     position: fixed !important;
     top: 65px;
     z-index: 1050;
     width: 100%;
 }

 #mainNavbar.hide {
     top: -150px !important;
 }


 @media (max-width: 767.98px) {
     nav .navbar-nav {
         margin-left: auto !important;
         margin-right: auto !important;
         justify-content: center !important;
         width: 100%;
     }

     .navbar-nav .nav-item.kalata {
         margin: 0 10px;
     }
 }

 body {
     padding-top: 40px !important;
 }


 /* Flexbox to center the image and text vertically and align them horizontally */
 .book-item {
     display: flex;
     /* Enables flexbox */
     align-items: center;
     /* Centers the content vertically */
 }

 .book-item img {
     margin-right: 10px;
     /* Space between the image and the text */
 }


 .hr-with-text {
     display: flex;
     align-items: center;
     text-align: center;
     color: #333;
     margin: 20px 0;
 }

 .hr-with-text::before,
 .hr-with-text::after {
     content: '';
     flex: 1;
     border-bottom: 2px solid #333;
     margin-top: -25px;
 }

 .hr-with-text:not(:empty)::before {
     margin-right: 10px;
 }

 .hr-with-text:not(:empty)::after {
     margin-left: 10px;
 }

 /* Animation on hover */
 .hr-with-text:hover::before,
 .hr-with-text:hover::after {
     border-bottom: 2px solid rgb(45, 131, 218);
     /* Change color on hover */
     transition: width 0.4s ease-in-out, border-color 0.4s ease-in-out;
 }

 .hr-with-text:hover::before {
     width: 120%;
 }

 .hr-with-text:hover::after {
     width: 120%;
 }



 .sticky-cart-summary {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 999;
     padding: 10px;
     background-color: #fff;
     box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
 }


 .book-card {
     transition: all 0.3s ease;
     /* Smooth transition for the border */
     border: 1px solid #dbdbdb;
     /* Initial border is transparent */
     box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 }

 /* Hover effect: when hovered, the border color changes */
 .book-card:hover {
     border: 1px solid #3498db;
     /* Change to any color you'd like */
     box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 }


 /* Container for both image and buttons */
 .image-and-share-container {
     max-width: 100%;
     /* Make it responsive */
     text-align: center;
     /* Center the buttons */
     margin-top: 20px;
 }

 /* Make the buttons full width and align */
 .share-buttons {
     display: flex;
     justify-content: space-around;
     /* Spread the buttons evenly */
     max-width: 100%;
     /* Keep it responsive */
     gap: 10px;
     /* Add space between the buttons */
 }

 /* General Styles for All Share Buttons */
 /* Style for individual buttons to take equal width */
 .share-buttons a {
     flex: 1;
     /* Make each button take equal width */
     text-align: center;
     padding: 15px;
     border-radius: 5px;
     color: white;
     transition: background-color 0.3s ease;
     display: inline-block;
     font-size: 20px;
 }

 /* Facebook Button */
 

  



 /* Twitter Button */
 .twitter-btn {
     background-color: #1da1f2;
     border: none;
 }

 .twitter-btn:hover {
     background-color: #1a91da;
 }

 /* WhatsApp Button */
 .whatsapp-btn {
     background-color: #25d366;
     border: none;
 }

 .whatsapp-btn:hover {
     background-color: #20b358;
 }

 .form-check-input[type=radio] {

     border: 1px solid black;
     position: relative;
     top: 1px;
 }

 div .rame {
     background-color: white;

 }





 @media (max-width: 768px) {
     .deletion {
         color: white;
     }

     .deletion:hover {
         color: red;
     }
 }


 #cookie-consent {
     background-color: #f8d7da;
     color: #721c24;
     border: 1px solid #f5c6cb;

     text-align: center;
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 1000;
 }

 #cookie-consent button {
     background-color: #721c24;
     color: white;
     border: none;
     padding: 5px 10px;
     cursor: pointer;
     margin-left: 5px;
 }

 #cookie-consent button:hover {
     background-color: #d9534f;
 }

 .img-thumbnail {
     height: 80px !important;
     min-width: 100px;
 }

 .coverFull {
     width: 100%;
     height: 500px;
     object-fit: cover;
     border-radius: 5px;
     border: 1px solid #ccc;
     padding: 5px;
 }

 .coverFull:hover {
     transform: scale(1.0);
     /* rotate(2.1deg) */
     opacity: 0.7;
     filter: alpha(opacity=70);
     transition: all .7s;
     cursor: pointer;
 }

 .page-item.active .page-link {
     background-color: #8a93b9 !important;
     /* Active button background */
     color: white !important;
     /* Active button text */
     border-color: #f0f1f5 !important;
     /* Active button border */
 }

 .page-item .page-link {
     background-color: #f0f1f5;
     /* Default button background */
     color: #343a40;
     /* Default button text */
     border: 1px solid #dee2e6;
     /* Default button border */
     transition:
         background-color 0.3s ease, color 0.3s ease;
 }

 .page-item .page-link:hover {
     background-color: #8a93b9;
     /* Hover background */
     color: black;
     /* Hover text */
     border-color: #8a93b9;
     /* Hover border */
 }



 .pagination-wrapper {
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
 }

 .pagination-wrapper::-webkit-scrollbar {
     display: none;
 }


 .small-thumbnail:hover {

     border: 2px solid rgb(77, 120, 184);


 }






 @media (max-width: 768px) {
     .dropdown-menu {
         position: absolute !important;
         top: 100% !important;
         left: -100px !important;
         right: auto !important;
         z-index: 9999 !important;
         margin-top: 0.5rem;
         max-height: 300px;
         overflow-y: auto;
         /* Enables scroll */
         background: white;
         border-radius: 6px;
     }

     .navbar,
     #topStickyNavbar,
     nav.navbar {
         overflow: visible !important;
     }

     .nav-item.dropdown {
         position: relative !important;
     }


     #mobileSearchIcon i {
         color: #000;
         transition: transform 0.2s;
     }

     #mobileSearchIcon i:hover {
         transform: scale(1.2);
     }

     #mobileSearchToggle {
         border: 1px solid #dee2e6;
         border-radius: 5px;
         padding: 3px 16px;
         box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
         height: 34px;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     #mobileSearchToggle i {
         font-size: 16px;
         /* Adjust if still bigger */
         line-height: 1;
     }



 }


 /* 🌑 DARK MODE STYLES */
 body.dark-mode {
     background-color: #464343 !important;
     color: #e0e0e0 !important;
 }
 
 body.dark-mode .deliveryFull
{
    position: relative; 
    background-color: #464343 !important;
    font-size: 12px !important; 
    
}

 .bi-sun {
     color: #e0e0e0 !important;

 }
 .bi-moon-fill::before
 {
    color: #e0e0e0 !important;

 }
 body.dark-mode .text-dark
 {
    color:#e0e0e0 !important;
    font-weight: 100 !important;
 }

 body.dark-mode .filter
 {
    background-color: #333 !important; 
 }

 @media (max-width: 991.98px) {

    /* Show mobile dropdown menu above hero */
    body.dark-mode .navbar-collapse {
        position: relative;
        margin-top: 10px;
        /* 👈 Prevents upward shift */
        padding: 10px 10px 15px 10px;
        background-color:#333;
    }


} 

.nav-item.dropdown.kalata2 .nav-link.dropdown-toggle::after {
    display: none !important; 
}
 
 body.dark-mode .tabhover .nav-link  {
    color: #272626 !important; 
    background-color:inherit !important; 
 }  
 
 body.dark-mode #mobileMenuToggle {
    color: #bebaba !important; 
    border-color:#bebaba !important; 
 }

 body.dark-mode a,
 body.dark-mode p,
 body.dark-mode span,
 body.dark-mode li {
     color: #e0e0e0 !important;
 }

 body.dark-mode .mobileSearch {
    background-color: #464343 !important;
}
 body.dark-mode .navbar-toggler
 {
    color:#bebaba !important;
    border-color: #bebaba !important;
 }

 body.dark-mode .bi-search::before
 {
    color:#bebaba !important;
  }

 

 body.dark-mode .navbar,
 body.dark-mode .navbar.navbar-light,
 body.dark-mode .navbar.navbar-expand-lg {
     background-color: #464343 !important;
 }

 body.dark-mode .navbar .nav-link,
 body.dark-mode .navbar .navbar-brand,
 body.dark-mode .navbar .dropdown-menu a {
     color: #e0e0e0 !important;
 }

 body.dark-mode .dropdown-menu {
     background-color: #464343 !important;
 }

 body.dark-mode .dropdown-item:hover {
     background-color: #3a3a3a !important;
 }

 body.dark-mode .card {
     background-color: #1e1e1e !important;
     color: #e0e0e0 !important;
 }



 body.dark-mode .btn-primary {
     background-color: #333 !important;
     color: #e0e0e0 !important;
     border-color: #555 !important;
 }

 body.dark-mode .btn-primary:hover {
     background-color: #555 !important;
 }

 body.dark-mode .form-control {
     background-color: #2c2c2c !important;
     color: #e0e0e0 !important;
     border-color: #444 !important;
 }

 body.dark-mode input::placeholder {
     color: #999 !important;
 }

 body.dark-mode .page-item .page-link {
     background-color: #2c2c2c !important;
     color: #e0e0e0 !important;
     border-color: #555 !important;
 }

 body.dark-mode .page-item.active .page-link {
     background-color: #555 !important;
     color: #e0e0e0 !important;
     border-color: #555 !important;
 }

 body.dark-mode h1,
 body.dark-mode h2,
 body.dark-mode h3,
 body.dark-mode h5,
 body.dark-mode h6,
 body.dark-mode p,
 body.dark-mode span {
     color: #e0e0e0 !important;
     font-weight: normal !important;
 }

 body.dark-mode .hr-with-text {
     display: flex;
     align-items: center;
     text-align: center;
     color: #e0e0e0 !important;
     margin: 20px 0;
 }

 body.dark-mode .hr-with-text::before,
 body.dark-mode .hr-with-text::after {
     content: '';
     flex: 1;
     border-bottom: 2px solid #e0e0e0;
     margin-top: -25px;
 }

 body.dark-mode .hr-with-text:not(:empty)::before {
     margin-right: 10px;
 }

 body.dark-mode .hr-with-text:not(:empty)::after {
     margin-left: 10px;
 }

 /* Animation on hover */
 body.dark-mode.hr-with-text:hover::before,
 body.dark-mode .hr-with-text:hover::after {
     border-bottom: 2px solid #b9b8b8;
     /* Change color on hover */
     transition: width 0.4s ease-in-out, border-color 0.4s ease-in-out;
 }

 body.dark-mode .hr-with-text:hover::before {
     width: 120%;
 }

 body.dark-mode .hr-with-text:hover::after {
     width: 120%;
 }


 /* Add a fancy icon before the text */
 body.dark-mode .section-title i {
     font-size: 28px;
     /* Increase icon size */
     color: #d7dae2;
     /* Make the icon stand out */
     margin-right: 10px;
     /* Add some space between icon and text */
 }

 /* Add a subtle background effect */
 body.dark-mode .section-title::before {
     content: '';
     position: absolute;
     width: 100%;
     height: 25px;
     background: linear-gradient(to right, #4a4a4d, #bfc2c2);
     bottom: 0;
     top: 0px;
     left: 0;
     z-index: -1;
     /* Send the background effect behind the text */
     transform: scaleX(0);
     transform-origin: bottom right;
     transition: transform 0.5s ease;
 }

 body.dark-mode .section-title:hover::before {
     transform: scaleX(1);
     transform-origin: bottom left;
 }

 body.dark-mode #topStickyNavbar.scrolled {
     background-color: #2c2c2c !important;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }



 body.dark-mode .input-group-text {
     background-color: #333 !important;
     border: #000;
 }

 body.dark-mode label {
     color: #8d8b8b !important;
 }

 body.dark-mode .payment-option {
     background-color: #000 !important;
 }

 /* All chosen container items in dark mode */
 body.dark-mode .chosen-container .chosen-single,
 body.dark-mode .chosen-container .chosen-drop,
 body.dark-mode .chosen-container .chosen-results,
 body.dark-mode .chosen-container .chosen-results li {
     background-color: #333 !important;
     color: #fff !important;
 }

 /* Fix placeholder text in chosen-single span */
 body.dark-mode .chosen-container .chosen-single span {
     color: #aaa !important;
     background-color: #333;
 }

 /* Hover and active list items in results */
 body.dark-mode .chosen-container .chosen-results li.highlighted {
     background-color: #555 !important;
     color: #fff !important;
 }

 /* Chosen search input styling */
 body.dark-mode .chosen-container .chosen-search input {
     background-color: #333 !important;
     color: #fff !important;
 }

 /* In case placeholder in search input */
 body.dark-mode .chosen-container .chosen-search input::placeholder {
     color: #ccc !important;
     opacity: 1 !important;
 }

 body.dark-mode th {
     color: #ccc !important;
 }

 body.dark-mode td {
     color: #ccc !important;
 }

 body.dark-mode ul li:hover {
     background-color: #333 !important;
 }
 body.dark-mode .chosen-container-single .chosen-single
 {
    padding:0px 0px 0px 0px!important;
 }