body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  /* background-image: url('../assets/images/eco.jpeg'); */
  background-size: 900%;
  background-position: center;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-color: rgb(238, 241, 237);
}

.custom-link {
  font-size: 18px;
  color: #fafafa;
}

#buy-now{
  width:150px;
  height:70px
}

.custom-link:hover {
  color: #ccc;
}

.background-images {
  position: fixed;
  top: 45%;
  left: 40%;
  right:40%;
  transform: translate(-50%, -50%);
  width: 80%;
  z-index: -1;
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  justify-content: center;
}

.image {
  width: 200px;
  height: 200px;
  margin: 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  filter: blur(2px);
  transition: filter 0.3s;
}

.image:hover {
  filter: blur(0px);
}

.image:nth-child(1) {
  background-image: url('../assets/images/banner-1.jpg');
}

.image:nth-child(2) {
  background-image: url('../assets/images/banner-2.jpg');
}

.image:nth-child(3) {
  background-image: url('../assets/images/banner-3.jpeg');
}

.image:nth-child(4) {
  background-image: url('../assets/images/banner-4.jpg');
}

.image:nth-child(5) {
  background-image: url('../assets/images/banner-5.jpg');
}

.image:nth-child(6) {
  background-image: url('../assets/images/banner-6.jpg');
}

.background-images::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: inherit;
  background-position: inherit;
  background-size: inherit;
  background-repeat: inherit;
  filter: blur(5px);
  display: none; /* Remove the blur effect or adjust as needed */
}

.navbar {
  padding: 0.9rem;
  border-bottom: 1px solid #f7f6f6;
} 

.navbar-brand {
  font-size: 24px;
  font-weight: bold;
  color: #7fe710;
}

#product-grid .card {
  /* --- New Styles --- */
    background-color: #ffffff;       /* Sets a clean white background */
    border: 1px solid #e0e0e0;       /* Adds a light gray border */
    border-radius: 12px;             /* Creates nicely rounded corners */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Adds a subtle initial shadow */
    overflow: hidden;                /* Ensures content stays within the rounded corners */
    transition: transform 0.2s ease-in-out;
    color:#040404;
}

#product-grid .card:hover {
  /* --- New Styles --- */
    /* Makes the shadow larger and darker on hover to lift the card */
    box-shadow: 0 8px 15px rgba(0,0,0,0.1); 
    cursor: pointer;                 /* Changes the cursor to a hand to show it's clickable */
    transform: translateY(-5px);
}

/* Styling for the new section heading */
.section-heading {
    font-weight: 700; /* Makes the font bold */
    margin-bottom: 2rem; /* Adds space below the heading */
    color: #2c3e50; /* A modern, dark gray color */
}

.add-to-cart-fly {
    position: absolute;
    width: 50px;
    transition: all 1s ease-in-out !important;
    z-index: 1000;
}

.step-content {
    display: none;
}

.step-content.active {
  display: block;
}

.product-image {
    max-width: 300px;
    width: 20%;
    height:20%;
    object-fit: contain;
    border-radius: 8px;
    margin: auto;
    display: block;
}

.review-container {
  text-align: left;
  padding: 5px;
  border: 1px solid #11c778;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(43, 7, 225, 0.1);
}

.review-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}

.user-image {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.user-name {
  font-weight: bold;
  font-size: 18px;
  text-transform: normal;
  color:#87f608;
}

.review-date {
  font-size: 18px;
  color: #eb0707;
  margin-bottom: 5px;
}

.product-color {
  font-size: 18px;
  color: #ee0b93;
}

.review-description {
  font-size: 16px;
  margin-top: 10px;
  color:rgb(179, 39, 130);
}

.product-image {
  width: 100%;
  height: auto;
  margin: 10px 0;
}

.filter-container {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: #f9f9f9;
}

.category-filter, .subcategory-filter {
  margin-bottom: 20px;
}

#price-slider {
  width: 100%;
  height: 5px;
  border-radius: 5px;
  background-color: #ccc;
}

#category-checkboxes {
  max-width: 300px;
  color: #063ae4;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
}

#category-checkboxes .form-check {
  margin-bottom: 0.5rem;
  padding-left: 2rem;
}

#category-checkboxes .form-check-input {
  margin-top: 0.3rem;
  margin-left: -2rem;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  cursor: pointer;
}

#category-checkboxes .form-check-input:checked {
  background-color: #063ae4;
  border-color: #063ae4;
}

#category-checkboxes .form-check-label {
  font-size: 1rem;
  cursor: pointer;
}

#category-checkboxes .form-check-label:hover {
  color: #063ae4;
}


#search-input {
  border-left: none;
  color:rgb(6, 0, 0);
}

#search-button {
  border-left: none;
  color:#39f305
}

#category-filter {
  padding: 9px;
  border-radius: 100px;
  border: 1px solid #87f608;
}

.notification {
    position: fixed;
    top: 20px;
    right: -300px;
    background-color: #010c04;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    transition: right 0.5s ease-in-out;
    z-index: 1000;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}

.add-to-cart-fly {
    position: absolute;
    transition: all 1s ease-in-out;
    z-index: 1000;
}

/* .carousel-caption {
  bottom: 5%; /* adjust this value to your liking */
  /* margin-top: 20px; /* adjust this value to your liking */

/* } */ */ */

/*.carousel-item img {
  margin-bottom: 20px; /* adjust this value to your liking */




  .payment-option .form-check-input {
    display: none; /* Hide the default radio button */
}

.payment-option .form-check-label {
    display: block;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem; /* Bootstrap's default border-radius */
    padding: 1rem;
    cursor: pointer;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.payment-option .form-check-label:hover {
    border-color: #0d6efd; /* Bootstrap primary color */
}

/* Style for the selected option */
.payment-option .form-check-input:checked + .form-check-label {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    background-color: #f0f6ff;
}

.card-logos img {
    height: 25px;
    margin-left: 8px;
}

#save-comment-btn {
  background-color: #4CAF50;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

#save-comment-btn:hover {
  background-color: #3e8e41;
}

#comment-saved-msg {
  font-size: 16px;
  font-weight: bold;
}

#comment-textarea{
  background-color: #dff551;
  border: none;
  padding: 10px 20px;
  text-align:center;
  font-size:22px;
  width:800px;
}


/* 1. Flexbox Wrapper for Layout */
.confirmation-wrapper {
    display: flex;
    align-items: center; /* Vertically aligns the text and the tick */
    gap: 15px; /* Adds a nice space between the text and the tick */
    justify-content: center; /* Optional: centers the whole block */
    padding: 20px;
    background-color: none;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* 2. Resized Animation Styles */
.checkmark {
    width: 50px;  /* <-- REDUCED from 100px */
    height: 50px; /* <-- REDUCED from 100px */
    border-radius: 50%;
    display: block;
    stroke-width: 3; /* <-- REDUCED from 4 */
    stroke: #fff;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #4CAF50;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 3; /* <-- REDUCED from 4 */
    stroke-miterlimit: 10;
    stroke: #4CAF50;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

/* Keyframes (These do not need to be changed) */
@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        /* The final value should be half the new width/height */
        box-shadow: inset 0px 0px 0px 25px #4CAF50; /* <-- REDUCED from 50px */
    }
}

.disabled-button {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #ccc;
  color: #666;
}

.payment-icons img {
  width: 70px; /* adjust the width */
  height: 50px; /* adjust the height */
  margin: 10px; /* optional: add some spacing */
}

/*Footer styling*/

.site-footer {
    background-color: #212529; /* A standard dark background */
    color: #edeeee; /* A light gray for readable text */
    font-size: 15px;
  }

.site-footer h6 {
    color: #6c757d; /* A muted gray for headings */
    text-transform: uppercase;
    margin-top: 0.5rem;
    letter-spacing: 1px;
    font-weight: 600;
  }

.footer-links {
    list-style: none;
    padding-left: 0;
  }

.footer-links li {
    margin-bottom: 10px;
  }

.footer-links a {
    color: #f2f4f6;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
  }

.footer-links a:hover {
    color: #ffffff; /* Brighter white on hover */
    text-decoration: underline;
  }

.footer-address p {
    margin-bottom: 0;
    line-height: 1.6;
  }
  
.social-icons a {
    color: #f5f7f9;
    font-size: 1.2rem;
    margin-right: 15px;
    transition: color 0.2s ease-in-out;
  }
  
.social-icons a:hover {
    color: #f8f3f3;
  }

.footer-bottom-bar {
    border-top: 1px solid #343a40;
    padding: 1rem 0;
    margin-top: 2rem;
  }
  
.bottom-bar-links a {
    color: #d5d8da;
    text-decoration: none;
    margin-right: 20px;
  }
  
.bottom-bar-links a:hover {
    color: #dbd7d7;
    text-decoration: underline;
  }

/*Language Dropdown Styling*/
.language-dropdown {
    /* Sets a clean, modern system font for the entire component */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

/* --- Button Box & Font Styling --- */
.language-dropdown .btn {
    background-color: #fff;
    border: 1px solid #dee2e6 !important;
    font-size: 15px; /* Sets a specific font size for the button text */
    font-weight: 600; /* Makes the text semi-bold and crisp */
    padding: 0.5rem 1rem; /* Balanced padding for a better button shape */
    border-radius: 0.375rem; /* Standard Bootstrap corner rounding */
    transition: all 0.2s ease-in-out;
}

/* --- Button Hover & Focus Effects --- */
.language-dropdown .btn:hover,
.language-dropdown .btn:focus {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #ced4da !important;
  }
  
/* --- Dropdown Arrow --- */
.language-dropdown .dropdown-toggle::after {
    vertical-align: middle;
    margin-left: 0.5em;
  }
  
/* --- Dropdown Menu Box Styling --- */
.language-dropdown .dropdown-menu {
    border: 1px solid #e9ecef; /* A light border instead of none */
    border-radius: 0.5rem;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    margin-top: 0.5rem;
    padding: 0.5rem; /* Adds padding inside the menu box */
    animation: fadeInDown 0.3s ease-in-out;
  }

/* --- Menu Item Styling --- */
.language-dropdown .form-check {
    padding: 10px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  
.language-dropdown .form-check-label {
      font-size: 15px; /* Consistent font size for options */
  }

.language-dropdown .form-check:hover {
    background-color: #f8f9fa;
  }
  
/* --- Animation Keyframes --- */
@keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }


/*Sidebar "All styling"*/  
  .offcanvas-menu-container {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.offcanvas-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: #ffffff;
    transition: transform 0.35s ease-in-out;
    transform: translateX(100%);
}

.offcanvas-panel.active {
    transform: translateX(0);
}

.offcanvas-panel.no-transition {
    transition: none;
}

.dropdown-menu-custom {
  position: absolute;
  top: 100%; /* right below the icon */
  left: 0;
  background: white;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 6px;
  min-width: 200px;
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* categories styling*/

.image-row {
  display: flex;
  justify-content: space-between;
}

.image-item {
  text-align: center;
  margin: 0 10px; /* Adjust spacing between image items */
  color:#f5f9f9;
  font-size:60px;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.image-item img {
  width: 140px; /* Small dimension images */
  height: 100px;
  border-radius: 5px; /* Optional for rounded corners */
  margin-top:20px; /* Sufficient spacing between items */
}

/* This block defines what happens on hover */
.image-item img:hover {
  transform: scale(1.1); /* Zooms the image to 110% of its size */
  cursor: pointer; /* Changes the mouse cursor to a pointer */
}

.image-item p {
  font-size: 12px; /* Small caption text */
  margin-top: 5px;
}

/*Normal box product showing Large-1*/
/* --- Main Banner Container --- */
.banner-container {
    display: flex;
    justify-content: center; /* Center the banners if they don't fill the space */
    gap: 25px; /* This is the modern way to create space between flex items */
    flex-wrap: wrap; /* Allows banners to wrap on smaller screens */
}

/* --- Individual Banner "Card" Styling --- */
.banner {
    flex: 1; /* Allows each banner to grow and shrink equally */
    min-width: 200px; /* Prevents the banners from getting too narrow */
    max-width: 400px; /* Prevents the banners from getting too wide */
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px; /* Softer, rounded corners */
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* A subtle shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effects */
    display: wrap;
    flex-direction: column; /* Stacks the content vertically */
}

/* --- Hover Effect for the Banner Card --- */
.banner:hover {
    transform: translateY(-8px); /* Lifts the card up on hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); /* A more pronounced shadow on hover */
}

/* --- Banner Heading --- */
.banner h3 {
    font-size: 1.2rem; /* Responsive font size */
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
    min-height: 50px; /* Ensures headings are aligned even with different text lengths */
}

/* --- Image Grid --- */
.image-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px; /* Increased gap for better spacing */
    margin-bottom: auto; /* Pushes the 'See all' link to the bottom */
}

.image-container img {
    width: 100%;
    aspect-ratio: 1 / 1; /* Makes all images perfectly square */
    object-fit: cover; /* Ensures images fill the space without distortion */
    border-radius: 8px; /* Rounded corners for the images */
    transition: transform 0.3s ease;
}

.image-container img:hover {
    transform: scale(1.05); /* Slightly enlarges the image on hover */
}

/* --- "See All" Link --- */
.see-all {
    text-align: left; /* Align to the left for a cleaner look */
    margin-top: 20px;
}

.see-all a {
    color: #007bff; /* A more vibrant blue */
    text-decoration: none;
    font-weight: 600; /* Bolder text */
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.see-all a:hover {
    color: #0056b3;
    text-decoration: underline;
}

.product-banner {
    position: relative;
    display: flex;
    align-items: center;
}

.product-images {
    scroll-behavior: smooth;
    padding: 10px;
}

.product-images img {
    width: 200px; /* adjust image width */
    height: 200px;
}



/*Product Carousel-Showcase-1*/
/* Ensure this selector matches the class name in your div */
.product-carousel-section1 h2 {
    /* --- Styles that were previously inline --- */
    font-size: 32px;
    font-family:'Times New Roman', Times, serifs;

    /* --- Your existing animation styles (which are correct!) --- */
    text-align: center;
    margin-bottom: 20px;
    background: linear-gradient(to right, rgb(244, 2, 71) 20%, #ffd700 40%, #ffd700 60%, rgb(3, 125, 105) 80%);
    background-size: 200% auto;
    
    -webkit-background-clip: text;
    background-clip: text;
    
    -webkit-text-fill-color: transparent;
    
    animation: shimmer 2.5s linear infinite;
}

/* Your keyframes are perfect, no changes needed here */
@keyframes shimmer {
    to {
      background-position: -200% center;
    }
}

.product-banner1 {
    position: relative;
    background-color: rgb(252, 250, 250);
    padding: 10px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 4px;
    overflow: hidden;
}

.product-images1 {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 15px;
    gap: 10px;
    margin-left:30px;
}

.product-images1::-webkit-scrollbar {
    height: 13px;
    background-color: #f9f4f4;
    border-radius: 10px;
}

.product-images1::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 30px;
}

.product-images1 img {
    width: 200px;
    height: 250px;
    object-fit: contain;
    padding: 0px;
    flex-shrink: 0;
    transition: transform 0.2s ease-in-out;
}

.product-images1 img:hover {
    transform: scale(1.05);
}

.carousel-control-prev,
.carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: #fff;
    border: none;
    width: 80px;
    height: 100px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.carousel-control-prev {
    left: 10px;
}

.carousel-control-next {
    right: 10px;
}

.carousel-control-prev-icon.custom-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
    width: 50px;
    height: 50px;
}

.carousel-control-next-icon.custom-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    width: 50px;
    height: 50px;
}


/* --- Offer Styling --- */
.offer-line {
    display: flex;
    align-items: center; /* Vertically aligns the badge and text */
    margin-bottom: 6px;
}

/* The red discount badge */
.offer-badge {
    background-color: #cc0c39; /* A common e-commerce red */
    color: white;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: bold;
    border-radius: 4px;
    margin-right: 8px;
}

/* The "Great Indian Festival" text */
.offer-text {
    color: #cc0c39;
    font-size: 13px;
    font-weight: 500;
    font-weight: bold;
    font-family: fantasy;
}

/* --- Price Styling --- */
.price-line {
    display: flex;
    align-items: baseline; /* Aligns the prices along their text baseline */
    margin-bottom: 8px;
}

/* The main, current price */
.price-current {
    font-size: 28px;
    font-weight: 500;
    color: #0F1111;
}

/* The superscript '00' */
.price-current sup {
    font-size: 14px;
    font-weight: normal;
}

/* The strikethrough original price */
.price-original {
    font-size: 14px;
    color: #565959;
    text-decoration: line-through;
    margin-left: 10px;
}

/* --- Title Styling --- */
.product-title {
    font-size: 16px;
    color: #2107b8;
    margin: 0; /* Removes default paragraph margin */
    line-height: 1.4;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-weight: bold;
}



/*Featured Brands*/
.product-item1 {
    /* This is the most important fix! 
       It tells the item NOT to shrink, forcing the container to overflow. */
    flex-shrink: 0;

    /* It's also good practice to define the width on the item itself */
    width: 200px; 
    
    /* You can add margins here for spacing instead of using &nbsp; in the HTML */
    margin-right: 15px;
}

.product-images2 {
  display: flex; /* Ensure display flex is explicitly set */
    overflow-x: auto; /* This is the key change! */
    scroll-behavior: smooth;/* These are good to have for smooth scrolling on touch devices */
    -webkit-overflow-scrolling: touch;
    margin-left:120px;
}

.product-images2 img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    flex-shrink: 0;
    transition: transform 0.2s ease-in-out;
}

/* Your custom scrollbar styling (This part is correct!) */
.product-images2::-webkit-scrollbar {
    height: 13px;
    background-color: #f9f4f4;
    border-radius: 10px;
}

.product-images2::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 30px;
    border: 3px solid #f9f4f4; /* Adds a nice border around the thumb */
}

.product-caption1{
  background-color: #f92a4d; /* A common e-commerce red */
    color: white;
    padding: 4px 8px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 4px;
    margin-right: 8px;
    margin-top:8px;
    font-family:cursive;
    text-align: center;
}



/*Product large-boxes-3*/
/* --- Main Banner Container --- */
.banner-container1 {
    display: flex;
    justify-content: center; /* Center the banners if they don't fill the space */
    gap: 25px; /* This is the modern way to create space between flex items */
    flex-wrap: wrap; /* Allows banners to wrap on smaller screens */
}

/* --- Individual Banner "Card" Styling --- */
.banner1 {
    flex: 1; /* Allows each banner to grow and shrink equally */
    min-width: 300px;
    max-width: 500px; /* Prevents the banners from getting too narrow */
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px; /* Softer, rounded corners */
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* A subtle shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effects */
    display: wrap;
    flex-direction: column; /* Stacks the content vertically */
}

/* --- Hover Effect for the Banner Card --- */
.banner1:hover {
    transform: translateY(-8px); /* Lifts the card up on hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); /* A more pronounced shadow on hover */
}

/* --- Banner Heading --- */
.banner1 h3 {
    font-size: 1.2rem; /* Responsive font size */
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
    min-height: 50px; /* Ensures headings are aligned even with different text lengths */
}

/* --- Image Grid --- */
.image-container1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px; /* Increased gap for better spacing */
    margin-bottom: auto; /* Pushes the 'See all' link to the bottom */
}

.image-container1 img {
    width: 100%;
    aspect-ratio: 1 / 1; /* Makes all images perfectly square */
    object-fit: cover; /* Ensures images fill the space without distortion */
    border-radius: 8px; /* Rounded corners for the images */
    transition: transform 0.3s ease;
}

.image-container1 img:hover {
    transform: scale(1.05); /* Slightly enlarges the image on hover */
}

/* --- "See All" Link --- */
.see-all {
    text-align: left; /* Align to the left for a cleaner look */
    margin-top: 20px;
}

.see-all a {
    color: #007bff; /* A more vibrant blue */
    text-decoration: none;
    font-weight: 600; /* Bolder text */
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.see-all a:hover {
    color: #0056b3;
    text-decoration: underline;
}

.product-banner {
    position: relative;
    display: flex;
    align-items: center;
}

.product-images {
    scroll-behavior: smooth;
    padding: 10px;
}

.product-images img {
    width: 150px; /* adjust image width */
    height: auto;
}



/*Limited Time-Offer-Banner*/
.offer-banner-urgent {
            color: rgb(204, 238, 8);
            border-radius: 1px;
            margin-top:-40px;
            text-align:center;
}
.offer-banner-urgent h2 {
            font-weight: 700;
            font-size: 1.7rem;
}
.offer-banner-urgent .deal-text {
            text-transform: uppercase;
            font-weight: 500;
            font-size: 1.4rem;
            color: #f73a01; /* A vibrant yellow */
            font-family:cursive;
}
.offer-banner-urgent #timer-urgent {
            font-size: 2.25rem;
            font-weight: bold;
            background-color:#08ee8a;
            border-radius: 1px;
            margin-right:170px;
            margin-bottom:20px;
            margin-top:20px;
            display: inline-block;
}

.product-images3 {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 15px;
    gap: 10px;
    margin-left:30px;
}

.product-images3::-webkit-scrollbar {
    height: 13px;
    background-color: #f9f4f4;
    border-radius: 10px;
}

.product-images3::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 30px;
}

.product-images3 img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    padding: 0px;
    flex-shrink: 0;
    transition: transform 0.2s ease-in-out;
}

.product-images3 img:hover {
    transform: scale(1.05);
}



/*User Reviews Styling */
.trust-line {
    display: flex;
    align-items: center; /* Vertically aligns the badge and text */
    margin-bottom: 6px;
}

/* The red discount badge */
.verify {
    background-color: #035611; /* A common e-commerce red */
    color: white;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: bold;
    border-radius: 4px;
    margin-right: 8px;
}

.product-title1 {
    font-size: 16px;
    color: #08070d;
    margin: 0; /* Removes default paragraph margin */
    line-height: 1.4;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}

.product-images4 {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 15px;
    gap: 10px;
    margin-left:30px;
}

.product-images4::-webkit-scrollbar {
    height: 13px;
    background-color: #f9f4f4;
    border-radius: 10px;
}

.product-images4::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 30px;
}

.product-images4 img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    padding: 0px;
    flex-shrink: 0;
    transition: transform 0.2s ease-in-out;
}

.product-images4 img:hover {
    transform: scale(1.05);
}

/* --- Individual Banner "Card" Styling --- */
.banner4 {
    flex: 1; /* Allows each banner to grow and shrink equally */
    min-width: 300px;
    max-width: 500px; /* Prevents the banners from getting too narrow */
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px; /* Softer, rounded corners */
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* A subtle shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effects */
    display: wrap;
    flex-direction: column; /* Stacks the content vertically */
}

/* --- Hover Effect for the Banner Card --- */
.banner4:hover {
    transform: translateY(-8px); /* Lifts the card up on hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); /* A more pronounced shadow on hover */
}

/* --- Image Grid --- */
.image-container4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px; /* Increased gap for better spacing */
    margin-bottom: 50px; /* Pushes the 'See all' link to the bottom */
}





/* ================================================== */
/* Newsletter Component Styles                        */
/* ================================================== */

/* This wrapper provides padding and a background color for the section */
.newsletter-section-wrapper {
    background-color: #0d243c; /* Dark blue background from the image */
    padding: 6rem 1rem; /* Generous padding top and bottom */
    font-family: 'Inter', sans-serif; /* Add a font-family for consistency */
}

/* Main container for the newsletter component */
.newsletter-container {
    position: relative;
    max-width: 42rem; /* max-w-2xl */
    width: 100%;
    margin: 0 auto;
}

/* Envelope Icon Styling */
.envelope-wrapper {
    position: absolute;
    top: -2rem; /* -top-8 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.envelope-icon {
    position: relative;
    background-color: #facc15; /* bg-yellow-400 */
    padding: 1rem;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    width: 80px;
    height: 60px;
    box-sizing: border-box;
    clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 100%, 0 100%);
}

.envelope-line-1 {
    position: absolute;
    top: 1rem; /* top-4 */
    left: 0;
    width: 100%;
    height: 4px; /* h-1 */
    background-color: #ca8a04; /* bg-yellow-500 */
    opacity: 0.5;
}

.envelope-line-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-top: 2px solid #ca8a04;
    border-left: 2px solid #ca8a04;
    border-right: 2px solid #ca8a04;
    border-radius: 0.5rem 0.5rem 0 0; /* rounded-t-lg */
    clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 26%, 50% 1%, 0 26%);
}

/* Card Styling */
.newsletter-card {
    background-color: #ffffff;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
    padding: 2rem;
    padding-top: 4rem; /* pt-16 */
    text-align: center;
    position: relative;
    z-index: 0;
}

.close-button {
    position: absolute;
    top: 1rem; /* top-4 */
    right: 1rem; /* right-4 */
    color: #9ca3af; /* text-gray-400 */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.close-button:hover {
    color: #4b5563; /* hover:text-gray-600 */
}

.close-icon {
    width: 1.5rem; /* w-6 */
    height: 1.5rem; /* h-6 */
}

.newsletter-title {
    font-size: 1.5rem; /* text-2xl */
    line-height: 2rem;
    font-weight: 700; /* font-bold */
    color: #1f2937; /* text-gray-800 */
    letter-spacing: 0.05em; /* tracking-wider */
    text-transform: uppercase;
    margin: 0 0 0.5rem 0; /* mb-2 */
}

.newsletter-description {
    color: #4b5563; /* text-gray-600 */
    margin: 0 0 2rem 0; /* mb-8 */
}

/* Form Styling */
.newsletter-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* gap-2 */
    width: 100%;
    max-width: 28rem; /* max-w-md */
    margin: 0 auto;
}

.email-input {
    width: 100%;
    padding: 0.75rem 1.25rem; /* px-5 py-3 */
    color: #374151; /* text-gray-700 */
    background-color: #f3f4f6; /* bg-gray-100 */
    border: 1px solid #e5e7eb; /* border-gray-200 */
    border-radius: 0.375rem; /* rounded-md */
    transition: box-shadow 0.3s, border-color 0.3s;
    box-sizing: border-box; /* Ensures padding doesn't affect final width */
    font-size: 1rem;
}

.email-input:focus {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 2px #3b82f6; /* focus:ring-2 focus:ring-blue-500 */
}

.subscribe-button {
    width: 100%;
    padding: 0.75rem 2rem; /* px-8 py-3 */
    font-weight: 600; /* font-semibold */
    color: #ffffff;
    background-color: #0d243c;
    border: 1px solid #0d243c;
    border-radius: 0.375rem; /* rounded-md */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    font-size: 1rem;
}

.subscribe-button:hover {
    transform: scale(1.05); /* hover:scale-105 */
    background-color: #1a3b5c;
}

.subscribe-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px white, 0 0 0 4px #0d243c; /* focus:ring-2 focus:ring-offset-2 */
}

/* Accessibility class for screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Responsive Styles */
@media (min-width: 640px) { /* sm breakpoint */
    .envelope-wrapper {
        left: 3rem; /* sm:left-12 */
        transform: translateX(0); /* sm:-translate-x-0 */
    }

    .newsletter-form {
        flex-direction: row;
    }

    .subscribe-button {
        width: auto; /* sm:w-auto */
    }
}

@media (max-width: 768px) {
  #wishlist-dropdown {
    width: 100% !important;
    right: 0 !important;
    left: 0 !important;
  }
}

@media (max-width: 768px) {
  .dropdown-menu {
    font-size: 14px;
    padding: 0.5rem;
  }
}