html {
         overflow-x: hidden;
       }

       @media (max-width: 767px) {
         .col-xl-4.col-lg-6.col-md-6 p {
           margin-bottom: 15% !important;
         }
       }

       .main-container {
         width: 100%;
         max-width: 800px;
         margin: 20px auto;
         background-color: #fff;
         border-radius: 10px;
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
         padding: 15px;
       }

       .main-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         cursor: pointer;
         padding: 10px;
         background-color: #165567;
         color: #fff;
         border-radius: 8px;
       }

       .main-header h2 {
         font-size: 20px;
         margin: 0;
         display: flex;
         align-items: center;
       }

       .main-header h2 i {
         margin-right: 10px;
       }

       .main-content {
         margin-top: 10px;
         display: none;
       }

       .offer-card {
         border: 1px solid #ddd;
         border-radius: 8px;
         margin-bottom: 15px;
         background-color: #f7f7f7;
         padding: 10px 15px;
         transition: transform 0.3s, box-shadow 0.3s;
       }

       .offer-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
       }

       .offer-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         cursor: pointer;
       }

       .offer-header h3 {
         margin: 0;
         font-size: 18px;
         color: #555;
         display: flex;
         align-items: center;
       }

       .offer-header h3 i {
         font-size: 18px;
         color: #007BFF;
         margin-right: 10px;
       }

       .offer-details {
         margin-top: 10px;
         color: #777;
         font-size: 14px;
         display: none;
       }

       .offer-details p {
         margin: 0;
       }

       .delivery-container {
         font-family: Arial, sans-serif;
         border: 1px solid #ddd;
         padding: 15px;
         /* width: 350px; */
         margin: 20px auto;
         border-radius: 5px;
         background-color: #fff;
       }

       .delivery-header {
         display: flex;
         align-items: center;
         justify-content: space-between;
         margin-bottom: 10px;
       }

       .delivery-input {
         flex: 1;
         margin-left: 10px;
         padding: 5px;
         border: 1px solid #ccc;
         border-radius: 3px;
       }

       .delivery-check-btn {
         margin-left: 10px;
         padding: 5px 10px;
         background-color: #007bff;
         color: white;
         border: none;
         border-radius: 3px;
         cursor: pointer;
       }

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

       .delivery-details {
         margin-top: 10px;
         line-height: 1.5;
         font-size: 14px;
       }

       .delivery-view-details {
         text-decoration: none;
         color: #007bff;
       }

       .delivery-view-details:hover {
         text-decoration: underline;
       }

       #deliveryDate,
       #deliveryFee,
       #cutoffTime {
         margin: 5px 0;
       }


       .status-message {
         display: none;
         /* margin-top: 10px; */
         padding: 7px;
         font-size: 9px;
         border-radius: 5px;
         width: 100%;
         text-align: center;
       }

       .status-message.available {
         color: #155724;
         background-color: #d4edda;
         border: 1px solid #c3e6cb;
       }

       .status-message.out-of-stock {
         color: #721c24;
         background-color: #f8d7da;
         border: 1px solid #f5c6cb;
       }

       .size-selection {
         display: flex;
         align-items: center;
         gap: 10px;
         /* Space between boxes */
       }

       .size-label {
         /* font-weight: bold; */
         /* margin-right: 10px; */
       }

       .size-box {
         border: 2px solid #ccc;
         padding: 10px 20px;
         text-align: center;
         border-radius: 5px;
         cursor: pointer;
         transition: border-color 0.3s ease, box-shadow 0.3s ease;
       }

       .size-box:hover {
         border-color: #007BFF;
         box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
       }

       .size-box.selected {
         border-color: #007BFF;
         box-shadow: 0 0 8px rgba(0, 123, 255, 0.8);
       }

       .product-selection {
         display: flex;
         flex-direction: column;
         gap: 20px;
       }

       .size-selection,
       .color-selection {
         /* border: 2px solid #004c85; Add a border */
         padding: 2px;
         /* Add some padding */
         border-radius: 8px;
         /* Optional: Rounded corners */
         width: fit-content;
       }

       .color-options {
         display: flex;
         gap: 10px;
         /* Space between color options */
         margin-top: 10px;
       }

       .color-option {
         width: 40px;
         height: 40px;
         border: 2px solid transparent;
         /* Default border */
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
         border-radius: 5px;
         /* Optional: Rounded corners for color options */
       }

       .color-option img {
         max-width: 100%;
         max-height: 100%;
         border-radius: 3px;
       }

       .color-option.selected {
         border: 2px solid #007BFF;
         /* Highlight the selected option */
       }

       .color-option:hover {
         border-color: #007BFF;
         box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
       }

       .color-option {
         border: 2px solid #ccc;


         border-radius: 5px;
         cursor: pointer;
         transition: border-color 0.3s ease, box-shadow 0.3s ease;
       }

       .dropdown-details {
         position: relative;
         width: 300px;
       }

       .details-toggle {
         background: #165567;
         color: white;
         padding: 10px 20px;
         border: none;
         font-size: 16px;
         cursor: pointer;
         display: flex;
         align-items: center;
         border-radius: 4px;
       }

       /* .icon-details {
  margin-left: 10px;
} */

       .details-content {
         display: none;
         background: #f9f9f9;
         box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
         padding: 15px;
         margin-top: 10px;
         border-radius: 4px;
       }

       .details-content ul {
         list-style: none;
         padding: 0;
       }

       .details-content li {
         margin-bottom: 10px;
       }

       .details-content li:last-child {
         margin-bottom: 0;
       }

       .details-content span {
         font-weight: bold;
       }

       .details-content a {
         color: #007bff;
         text-decoration: none;
       }

       .details-content a:hover {
         text-decoration: underline;
       }

       .product-container {
         max-width: 600px;
         margin: 0 auto;
         text-align: center;
       }

       .color-options {
         display: flex;
         gap: 10px;
         justify-content: center;
         margin: 20px 0;
       }

       .color-option {
         width: 40px;
         height: 40px;
         border-radius: 50%;
         cursor: pointer;
         border: 2px solid transparent;
         transition: transform 0.2s;
       }

       .color-option.selected {
         border-color: #000;
         transform: scale(1.1);
       }

       .product-details img {
         max-width: 100%;
         height: auto;
         margin: 20px 0;
       }

       .out-of-stock {
         color: red;
         font-size: 18px;
         font-weight: bold;
       }

       body {
         overflow: hidden !important;
       }

       .product-details {
         /* padding: 20px; */
         background-color: #fff;
         max-width: 600px;
         margin: auto;
       }

       .price-section #product-price {
         font-size: 20px;
         font-weight: bold;
         color: #333;
       }

       .price-section .old-price {
         text-decoration: line-through;
         margin-left: 10px;
         color: #888;
         font-size: 15px;
       }

       .price-section .discount {
         color: green;
         font-weight: bold;
         margin-left: 10px;
         font-size: 17px;
       }

       .size-selection,
       .color-selection {
         margin-top: 15px;
       }

       .size-box {
         border: 1px solid #ddd;
         padding: 5px 10px;
         margin-right: 10px;
         cursor: pointer;
         display: inline-block;
       }

       .color-option {
         width: 30px;
         height: 30px;
         border: 1px solid #ddd;
         display: inline-block;
         margin-right: 10px;
         cursor: pointer;
       }

       .quantity-selector {
         display: flex;
         align-items: center;
         margin-right: 10px;
         height: 51px;
         border-radius: 39px;
         border: 1px solid silver;
       }

       .quantity-btn {
         width: 60px;
         height: 30px;
         margin-top: -9px;
         color: red;
         font-size: 20px;
         border: none;
         text-align: center;
         background: none;
         cursor: pointer;
       }

       #quantity {
         width: 50px;
         text-align: center;
         margin: 0 5px;
         border: none;
       }

       .button-add-to-cart {
         background-color: #002e8a;
         color: #fff;
         border: none;
         padding: 10px 20px;
         font-size: 16px;
         cursor: pointer;
         border-radius: 5px;
       }

       .button-add-to-cart:hover {
         background-color: #0056b3;
       }

       .product-container {
         margin: auto;
         background: #fff;
         /* padding: 20px; */
         border-radius: 8px;
       }

       .accordion {
         border: none;
         width: 100%;
         border-bottom: 1px solid #e0e0e0;
         padding: 15px 10px;
         display: flex;
         align-items: center;
         justify-content: space-between;
         cursor: pointer;
         font-size: 16px;
         background: none;
         outline: none;
         transition: background-color 0.3s ease;
       }

       .accordion:hover {
         background-color: #f5f5f5;
       }

       .accordion:after {
         content: "▼";
         font-size: 12px;
         color: #333;
       }

       .accordion.active:after {
         content: "▲";
       }

       .panel {
         display: none;
         padding: 10px 15px;
         border-bottom: 1px solid #e0e0e0;
         font-size: 14px;
         color: #555;
       }

       .icons {
         display: flex;
         justify-content: center;
         gap: 30px;
         margin-top: 20px;
       }

       .icon {
         text-align: center;
         font-size: 14px;
         color: #333;
       }

       .icon img {
         display: block;
         margin: auto;
         width: 40px;
         height: 40px;
         border-radius: 50%;
         background-color: #f0f0f0;
         padding: 8px;
       }

       .product-extra-link2 .button.button-add-to-cart {
         border: 0;
         border-radius: 47px;
         font-size: 16px;
         font-weight: 700;
         height: 50px;
         line-height: 50px;
         padding: 0 40px;
         position: relative;
       }

       h2 {
         margin: 20px 0;
         font-size: 24px;
         color: #333;
       }

       /* Slider Container */
       .product-slider {
         width: 90%;
         margin: 0 auto;
       }

       /* Individual Product Card */
       .product-card {
         border: 1px solid #e0e0e0;
         border-radius: 8px;
         padding: 16px;
         background: #fff;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         text-align: center;
       }

       .product-card img {
         width: 100%;
         height: auto;
         border-radius: 8px;
       }

       .product-title {
         font-size: 16px;
         margin: 10px 0;
         font-weight: bold;
         color: #333;
       }

       .product-seller {
         font-size: 14px;
         color: #555;
         margin-bottom: 5px;
       }

       .product-price {
         font-size: 18px;
         font-weight: bold;
         color: #007bff;
       }

       .product-discount {
         font-size: 14px;
         color: #28a745;
         margin-bottom: 10px;
       }

       .add-to-cart {
         display: inline-block;
         margin-top: 10px;
         padding: 10px 20px;
         background-color: #0046be;
         color: #fff;
         border: none;
         border-radius: 5px;
         text-decoration: none;
         font-size: 14px;
         cursor: pointer;
       }

       .add-to-cart:hover {
         background-color: #003399;
       }

       .slick-initialized .slick-slide {
         display: block;
         margin-right: 8px;
       }

       .image-gallery {
         display: flex;
         flex-direction: row;
         /* By default, thumbnails on the right */
         align-items: center;
         justify-content: center;
       }

       .thumbnails {
         display: flex;
         flex-direction: column;
         /* Thumbnails will be arranged vertically on desktop/tablets */
         gap: 10px;
         margin-left: 20px;
         /* Space between main image and thumbnails */
       }

       .thumbnails img {
         width: 60px;
         height: 60px;
         cursor: pointer;
         border: 3px solid #ddd;
         /* Border for each thumbnail */
         border-radius: 10px;
         /* Rounded corners for the thumbnails */
         transition: border 0.3s ease;
         /* Smooth transition effect */
       }

       .thumbnails img:hover {
         border-color: #007bff;
         /* Change border color on hover */
       }

       .main-image img {
         width: 300px;
         height: auto;
       }

       .product-image .image-gallery .main-image img {
         width: 450px;
         height: 450px;
         object-fit: contain;
         margin-top: 50px;
       }

       h1 {
         font-size: 30px;
         font-weight: 600;
         margin-top: 10px
       }
       .product-card-bottom {
        display: flex;
        justify-content: space-between;
        align-items: flex-end; /* Aligns price & button at the bottom */
    }
    
    .product-price-wrapper {
        flex: 1;
    }
    
    .product-price {
        display: flex;
        flex-direction: column;
        gap: 2px; /* Space between price elements */
    }
    
    .old-price {
        font-size: 14px;
        color: #999;
        text-decoration: line-through;
    }
    
    .discount-badge {
        font-size: 12px;
        color: red;
        font-weight: bold;
    }
    
    .final-price {
        font-size: 16px;
        font-weight: bold;
        color: #333;
    }
    
    .add-cart {
        align-self: flex-end;
    }
    .product-content-wrap {
      display: flex;
      flex-direction: column;
      justify-content: flex-end; /* Moves content upwards */
      height: 135px; /* Ensures full height usage */
      padding: 10px; /* Adjust padding */
      position: relative;
  }
          .product-card-bottom {
      margin-top: auto; /* Pushes other content up */
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  
  .product-price-wrapper {
      flex: 1;
  }
  
  .add-cart {
      align-self: flex-end; /* Moves "Add to Cart" button upwards */
  }
  
  /* Adjusting spacing */
  .text-truncate, .product-unit {
      margin-bottom: 5px; /* Reducing bottom margin */
  }
  
  /* Ensures no extra space below */
  .product-content-wrap:last-child {
      margin-bottom: 0 !important;
  }
  .product-cart-wrap .product-content-wrap .product-price span.old-price {
      color: var(--color-grey-4);
      font-size: 12px;
      margin-inline-end: 0;
      text-decoration: line-through;
  }
  .product-cart-wrap .product-content-wrap .product-price span {
      color:rgb(97, 189, 89);
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      margin-inline-end: 7px;
  }
  .product-cart-wrap .product-content-wrap .product-price span.final-price{
      color: #0a5e89;
      display: inline-block;
      font-size: 16px;
      font-weight: 700;
      margin-inline-end: 7px;
  }
    /* Mobile-specific styles */
    @media (max-width: 768px) {
        .product-card-bottom {
            flex-direction: row;
            align-items: center;
        }
    
        
    }
       /* Mobile view - Move thumbnails to the bottom */
       @media (max-width: 768px) {
         .image-gallery {
           flex-direction: column;
           /* Stack main image and thumbnails vertically on mobile */
           align-items: center;
         }

         .product-image .image-gallery .main-image img {
           width: 100%;
           height: 265px;
           object-fit: contain;
           margin-top: 17px;
         }

         .thumbnails {
           flex-direction: row;
           /* Thumbnails will be displayed horizontally */
           margin-left: 0;
           /* Remove left margin on mobile */
           margin-top: 20px;
           /* Add margin to the top to separate from the main image */
           overflow-x: auto;
           /* Allow horizontal scrolling if necessary */
         }

         .thumbnails img {
           width: 80px;
           /* Increase thumbnail size in mobile */
           height: 80px;
           margin: 5px;
           /* Small margin between the thumbnails */
         }

         .main-image img {
           width: 90%;
           /* Resize the main image to fit mobile view */
         }

         h1 {
           font-size: 18px;
         }

         .product-slider {
           width: 100%;
           margin: 0 auto;
         }

         .product-cart-wrap .product-img-action-wrap .product-img {
           border-radius: 15px;
           overflow: hidden;
           height: 189px;
           position: relative;
         }

         .product-cart-wrap .product-badges span {
           border-radius: 15px 0 20px 0;
           color: #fff;
           display: inline-block;
           font-size: 9px;
           line-height: 1;
           padding: 5px 9px 4px;
         }

         .product-cart-wrap .product-content-wrap {
           padding: 0px 10px 10px;
         }

         .product-cart-wrap .product-content-wrap .product-category a {
           color: var(--color-grey-4);
           font-size: 11px;
         }

         .product-cart-wrap .product-content-wrap .product-category {
           /* margin-bottom: 5px; */
         }

         .product-cart-wrap .product-content-wrap h2 {
           line-height: 16px;
         }

         .product-cart-wrap .product-content-wrap h2 {
           font-size: 15px;
           font-weight: 700;
           margin-bottom: 2px;
         }

         .product-rate-cover {
           margin-bottom: 2px;
         }

         .product-cart-wrap .product-card-bottom {
           align-items: center;
           display: flex;
           gap: 10px;
           justify-content: space-between;
           line-height: 20px;
           margin-top: 4px;
         }

         .product-cart-wrap .product-content-wrap .product-price span {
           color: #0a5e89;
           display: inline-block;
           font-size: 11px;
           font-weight: 700;
           margin-inline-end: 7px;
         }

         .product-cart-wrap .product-content-wrap .product-price span.old-price {
           color: var(--color-grey-4);
           font-size: 11px;
           margin-inline-end: 0;
           text-decoration: line-through;
         }

         .product-price {
           font-size: 13px;
           font-weight: 300;
         }

         .product-cart-wrap .product-card-bottom .add-cart .add {
           background-color: #155668;
           color: white;
           border-radius: 4px;
           display: inline-block;
           font-size: 14px;
           font-weight: 500;
           padding: 5px 19px;
           position: relative;
         }
         .product-content-wrap {
          display: flex;
          flex-direction: column;
          justify-content: flex-end; /* Moves content upwards */
          height: 135px; /* Ensures full height usage */
          padding: 10px; /* Adjust padding */
          position: relative;
      }
      
      .product-card-bottom {
          margin-top: auto; /* Pushes other content up */
          display: flex;
          justify-content: space-between;
          align-items: center;
      }
      
      .product-price-wrapper {
          flex: 1;
      }
      
      .add-cart {
          align-self: flex-end; /* Moves "Add to Cart" button upwards */
      }
      
      /* Adjusting spacing */
      .text-truncate, .product-unit {
          margin-bottom: 5px; /* Reducing bottom margin */
      }
      
      /* Ensures no extra space below */
      .product-content-wrap:last-child {
          margin-bottom: 0 !important;
      }
      .product-cart-wrap .product-card-bottom .product-price {
          padding-top: 0;
          width: 100px;
      }
      .product-card-bottom {
              flex-direction: row;
              align-items: center;
          }
      
          .add-cart {
              margin-left: -38px; /* Space between price & button */
          }
         
         .mb-sm-5 {
           margin-bottom: 0 !important;
         }
       }