* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 :root {
   --primary-green: #243f2f;
   --accent-green: #00d783;
   --dark-accent: #00aa63;
   --white: #ffffff;
   --text-color: #243f2f;
   --shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
 }

 /* Hide the top Google Translate frame */
 .goog-te-banner-frame.skiptranslate {
   display: none !important;
 }
.VIpgJd-ZVi9od-ORHb-OEVmcd {
    left: 0;
    top: 0;
    height: 39px;
    width: 100%;
    z-index: 10000001;
    position: fixed;
    border: none;
    border-bottom: 1px solid #6B90DA;
    margin: 0;
    box-shadow: 0 0 8px 1px #999;
    display: none !important;
}
body.VIpgJd-ZVi9od-ORHb {
    display: none !important;
}
 /* Prevent body from being pushed down by the banner */
 /* body {
   top: 0px !important;
 } */

 /* Hide Google Translate toolbar background */
 .goog-te-banner {
   display: none !important;
 }

 /* Optional: remove “Powered by Google” link & extra text */
 /* .goog-logo-link,
 .goog-te-gadget span {
   display: none !important;
 } */
.goog-te-gadget-simple {
  font-size: 1px !important;
}
 /* Keep your language dropdown looking clean */
 #google_translate_element {
   margin: 0;
   padding: 0;
   border: none;
 }

 #google_translate_element select {
   border: 1px solid #ccc;
   padding: 4px;
   border-radius: 4px;
   background: white;
   font-size: 14px;
 }

 body {
   font-family: "Quicksand", sans-serif;
   color: var(--text-color);
   line-height: 1.6;
   background-color: #eff5ee;
 }

 /* Top Bar */
 .top-bar {
   background-color: var(--primary-green);
   color: var(--white);
   padding: 12px 0;
 }

 .top-bar-content {
   max-width: 1160px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 30px;
   padding: 0 50px;
 }

 .top-bar-left {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 13px;
 }

 .delivery-icon {
   color: var(--accent-green);
   margin-right: 5px;
 }

 .top-menu {
   display: flex;
   gap: 30px;
   list-style: none;
   font-size: 13px;
   font-weight: 700;
 }

 .top-menu a {
   color: var(--white);
   text-decoration: none;
   transition: color 0.3s;
 }

 .top-menu a:hover {
   color: var(--accent-green);
 }

 .top-bar-right {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 20px;
 }

 .phone-link {
   color: var(--white);
   text-decoration: none;
   font-size: 20px;
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .phone-icon {
   color: var(--accent-green);
 }

 .social-links {
   display: flex;
   gap: 15px;
 }

 .social-links a {
   color: var(--accent-green);
   font-size: 16px;
   transition: color 0.3s;
 }

 .social-links a:hover {
   color: var(--white);
 }

 /* Main Header */
 .main-header {
   background-color: var(--white);
   box-shadow: var(--shadow);
   position: sticky;
   top: 0;
   z-index: 1000;
 }

 .header-content {
   /* max-width: 1160px; */
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 12px;
   padding: 0 50px;
   min-height: 90px;
 }

 /* Navigation */
 .nav-menu {
   display: flex;
   list-style: none;
   gap: 12px;
   align-items: center;
   height: 100%;
 }

 .nav-item {
   position: relative;
   height: 100%;
   display: flex;
   align-items: center;
 }

 .nav-link {
   color: var(--primary-green);
   text-decoration: none;
   font-weight: 700;
   font-size: 12px;
   padding: 15px;
   display: flex;
   align-items: center;
   gap: 10px;
   transition: color 0.3s;
   height: 100%;
 }

 .nav-link:hover {
   color: var(--accent-green);
 }

 .nav-icon {
   font-size: 1.5rem;
   color: var(--accent-green);
 }

 /* Logo */
 .logo {
   text-align: center;
 }

 .logo img {
   max-width: 250px;
   height: auto;
 }

 /* Right Side Icons */
 .header-actions {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 15px;
   font-size: 21px;
 }

 a.icon-btn {
   background: none;
   border: none;
   color: var(--primary-green);
   cursor: pointer;
   /* padding: 15px 10px; */
   transition: color 0.3s;
   position: relative;
   font-size: 13px;
 }

 .icon-btn {
   background: none;
   border: none;
   color: var(--primary-green);
   cursor: pointer;
   /* padding: 15px 10px; */
   transition: color 0.3s;
   position: relative;
 }

 .icon-btn:hover {
   color: var(--accent-green);
 }

 /* Language Selector */
 .lang-selector {
   position: relative;
 }

 .lang-btn {
   background: #f5f5f5;
   border: none;
   padding: 6px 12px;
   border-radius: 3px;
   font-size: 13px;
   font-weight: 700;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 7px;
 }

 .lang-btn:after {
   content: 'â–¼';
   font-size: 8px;
 }

 .lang-dropdown {
   position: absolute;
   top: calc(100% + 10px);
   left: 0;
   background: var(--white);
   border-radius: 8px;
   box-shadow: var(--shadow);
   min-width: 150px;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s;
 }

 .lang-selector:hover .lang-dropdown {
   opacity: 1;
   visibility: visible;
 }

 .lang-dropdown a {
   display: block;
   padding: 10px 20px;
   color: var(--text-color);
   text-decoration: none;
   transition: color 0.3s;
 }

 .lang-dropdown a:hover {
   color: var(--dark-accent);
 }

 /* Dropdown Menus */
 .dropdown {
   position: absolute;
   top: 100%;
   left: 0;
   background: var(--white);
   border-radius: 8px;
   box-shadow: var(--shadow);
   min-width: 250px;
   padding: 23px 0;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s;
   margin-top: 10px;
 }

 .nav-item:hover .dropdown {
   opacity: 1;
   visibility: visible;
 }

 .dropdown a {
   display: block;
   padding: 10px 30px;
   color: var(--text-color);
   text-decoration: none;
   font-size: 15px;
   font-weight: 500;
   transition: color 0.3s;
 }

 .dropdown a:hover {
   color: var(--dark-accent);
 }

 /* Mobile Menu */
 .mobile-menu-btn {
   display: none;
   background: none;
   border: none;
   font-size: 24px;
   cursor: pointer;
   color: var(--primary-green);
   padding: 15px;
 }

 /* Responsive */
 @media (max-width: 1189px) {

   .top-bar,
   .nav-menu,
   .header-actions .lang-selector {
     display: none;
   }

   .header-content {
     grid-template-columns: auto 1fr auto;
     padding: 0 20px;
     min-height: 60px;
   }

   .mobile-menu-btn {
     display: block;
   }

   .logo img {
     max-width: 150px;
   }

   .header-actions {
     font-size: 18px;
     gap: 10px;
   }

   .icon-btn {
     padding: 10px 5px;
   }
 }

 @media (max-width: 767px) {
   .header-content {
     padding: 0 15px;
   }

   .logo img {
     max-width: 120px;
   }
 }

 /* Badges */
 .badge {
   position: absolute;
   top: 8px;
   right: 8px;
   background: var(--accent-green);
   color: var(--white);
   font-size: 9px;
   font-weight: bold;
   padding: 2px 6px;
   border-radius: 3px;
   text-transform: uppercase;
 }

 .mega-menu {
   width: 800px;
   left: -100px;
 }

 .mega-menu-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px;
   padding: 30px;
 }

 .mega-menu-section h3 {
   font-size: 22px;
   margin-bottom: 15px;
   color: var(--primary-green);
 }

 .mega-menu-links {
   list-style: none;
 }

 .mega-menu-links a {
   padding: 7px 0;
   display: block;
 }



 /* ---------------------Section Hero--------------------- */


 /* Hero Section */
 .hero-section {
   /* background: linear-gradient(135deg, #5a7d4e 0%, #7a9d6b 50%, #9ab88a 100%); */
   position: relative;
   overflow: hidden;
   align-items: center;
   background-size: cover;
   background-position: right center;
   background-repeat: no-repeat;
   background-attachment: scroll;
   min-height: 391px;
   width: 100%;
 }

 .hero-container {
   max-width: 1399px;
   margin: 0 auto;
   padding: 0 50px;
   /* width: 100%; */
   /* display: block; */
   /* grid-template-columns: 1fr 1fr; */
   /* align-items: center; */
   /* gap: 60px; */
   height: 391px;
 }

 /* Left Content */
 .hero-content {
   z-index: 2;
 }

 .hero-title {
   /* font-family: 'Poppins', sans-serif; */
   font-size: 86px;
   font-weight: 700;
   line-height: 93px;
   letter-spacing: -3.999px;
   color: #000;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.24);
   margin-bottom: 40px;
   padding-top: 79px;
 }

 .hero-actions {
   display: flex;
   align-items: center;
   gap: 30px;
 }

 .btn-explore {
   background-color: #2d3e36;
   color: #FFFFFF;
   padding: 18px 38px;
   border-radius: 50px;
   text-decoration: none;
   font-weight: 600;
   font-size: 16px;
   display: inline-flex;
   align-items: center;
   gap: 12px;
   transition: all 0.3s ease;
   border: none;
   cursor: pointer;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }

 .btn-explore:hover {
   background-color: #1f2b26;
   transform: translateY(-2px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
 }

 .btn-explore i {
   font-size: 18px;
 }

 .hero-text {
   color: #FFFFFF;
   font-size: 16px;
   font-weight: 600;
   opacity: 0.95;
 }

 /* Right Image */
 .hero-image {
   position: relative;
   z-index: 1;
   display: flex;
   justify-content: flex-end;
   align-items: center;
 }

 .hero-image img {
   width: 100%;
   max-width: 750px;
   height: auto;
   object-fit: contain;
   filter: drop-shadow(0px 10px 30px rgba(0, 0, 0, 0.15));
 }

 /* Decorative Elements */
 .hero-section::before {
   content: '';
   position: absolute;
   top: -50%;
   right: -10%;
   width: 600px;
   height: 600px;
   background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
   border-radius: 50%;
   pointer-events: none;
 }

 .hero-section::after {
   content: '';
   position: absolute;
   bottom: -30%;
   left: -5%;
   width: 400px;
   height: 400px;
   background: radial-gradient(circle, rgba(0, 0, 0, 0.05) 0%, transparent 70%);
   border-radius: 50%;
   pointer-events: none;
 }

 /* Responsive */
 @media (max-width: 1200px) {
   .hero-section {
     background-size: cover;
     background-position: right center;
     background-repeat: no-repeat;
   }

   .hero-title {
     font-size: 60px;
   }

   .hero-container {
     padding: 0 40px;
     gap: 40px;
   }

   .hero-image img {
     max-width: 600px;
   }
 }

 @media (max-width: 992px) {
   .hero-section {
     background-size: cover;
     background-position: right bottom;
     background-repeat: no-repeat;
     min-height: 350px;
   }

   .hero-container {
     grid-template-columns: 1fr;
     gap: 40px;
     text-align: center;
     height: 350px;
   }

   .hero-title {
     font-size: 52px;
   }

   .hero-actions {
     justify-content: center;
   }

   .hero-image {
     justify-content: center;
   }

   .hero-image img {
     max-width: 500px;
   }
 }

 @media (max-width: 768px) {
   .hero-section {
     background-size: cover;
     background-position: right bottom;
     background-repeat: no-repeat;
     min-height: 300px;
     padding: 50px 0;
   }

   .hero-container {
     padding: 0 25px;
     height: 300px;
   }

   .hero-title {
     font-size: 42px;
     margin-bottom: 30px;
   }

   .hero-actions {
     flex-direction: column;
     gap: 20px;
     align-items: stretch;
   }

   .btn-explore {
     justify-content: center;
     width: 100%;
   }

   .hero-image img {
     max-width: 100%;
   }
 }

 @media (max-width: 480px) {
   .hero-section {
     background-size: cover;
     background-position: right bottom;
     background-repeat: no-repeat;
     min-height: 250px;
   }

   .hero-container {
     height: 250px;
     padding: 0 20px;
   }

   .hero-title {
     font-size: 36px;
     padding-top: 40px;
     line-height: 1.2;
   }

   .btn-explore {
     padding: 16px 32px;
     font-size: 15px;
   }

   .hero-text {
     font-size: 14px;
   }
 }


 /* ---------------------Section Hero--------------------- */




 /* ---------------------CATEGORY--------------------- */


.promo-section {
  width: 100%;
}

.promo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  width: 100%;
  padding: clamp(8px, 1.5vw, 13px);
  /* margin-left: 57px; */
}

.promo-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1rem, 2.5vw, 2rem);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-top: clamp(15px, 3vw, 35px);
  min-height: 200px;
  height: clamp(15rem, 25vw, 19rem);
}

 .promo-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }

.promo-content {
  max-width: 50%;
  z-index: 2;
}

.promo-card h3 {
  font-size: clamp(18px, 2.5vw, 32px);
  font-weight: 700;
  color: #2A3C2D;
  margin-bottom: clamp(0.5rem, 1.5vw, 1rem);
  line-height: 1.2;
}

.promo-btn {
  display: inline-block;
  background: #ffffff;
  color: #1A3C2A;
  font-weight: 600;
  font-size: clamp(12px, 1.2vw, 16px);
  padding: clamp(0.5rem, 1.2vw, 0.75rem) clamp(1rem, 2vw, 1.5rem);
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Mobile responsive adjustments for promo section - keeping grid unchanged */
@media (max-width: 768px) {
  .promo-card {
    padding: clamp(0.75rem, 3vw, 1.5rem);
    min-height: clamp(150px, 30vw, 200px);
    height: clamp(12rem, 35vw, 16rem);
  }

  .promo-content {
    max-width: 55%;
  }

  .promo-card h3 {
    font-size: clamp(16px, 4vw, 24px);
    margin-bottom: clamp(0.5rem, 2vw, 0.75rem);
  }

  .promo-btn {
    font-size: clamp(11px, 2.5vw, 14px);
    padding: clamp(0.4rem, 2vw, 0.6rem) clamp(0.8rem, 3vw, 1.2rem);
  }
}

@media (max-width: 480px) {
  .promo-card {
    padding: clamp(0.5rem, 4vw, 1rem);
    min-height: clamp(120px, 40vw, 180px);
    height: clamp(10rem, 45vw, 14rem);
  }

  .promo-content {
    max-width: 60%;
  }

  .promo-card h3 {
    font-size: clamp(14px, 5vw, 20px);
    margin-bottom: clamp(0.4rem, 2.5vw, 0.6rem);
  }

  .promo-btn {
    font-size: clamp(10px, 3vw, 12px);
    padding: clamp(0.35rem, 2.5vw, 0.5rem) clamp(0.7rem, 3.5vw, 1rem);
  }
}

 .promo-btn:hover {
   background: #1A3C2A;
   color: #fff;
 }

 .promo-card img {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   object-fit: cover;
   z-index: 1;
   pointer-events: none;
 }

 /* ---------------------CATEGORY--------------------- */



 /* ---------------------BEST SELLER--------------------- */
 .bestsellers-section {
   padding: 3rem 0;
   /* background-color: #f9f9f9; */
 }

 section.bestsellers-section {
   margin: 0 17px;
 }

 /* .container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 1rem;
 } */

 .section-header {
   text-align: center;
   margin-bottom: 2.5rem;
 }

 .section-header h2 {
   font-size: 2rem;
   font-weight: 700;
   color: #2A3C2D;
   margin: 0;
 }

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

 .product-card {
   background: white;
   border-radius: 16px;
   overflow: hidden;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   display: flex;
   flex-direction: column;
   height: 100%;
 }

 .product-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
 }

 .product-image {
   height: 200px;
   width: 100%;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: white;
 }

 .product-image img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   transition: transform 0.5s ease;
 }

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

 .product-info {
   padding: 1.5rem;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
 }

.product-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2A3C2D;
  margin: 0 0 0.75rem 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-description {
  color: #666;
  margin: 0 0 1.5rem 0;
  line-height: 1.5;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

 .product-price {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   flex-wrap: wrap;
   min-width: 0;
 }

 .current-price {
   font-size: 1.25rem;
   font-weight: 700;
   color: #2A3C2D;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .original-price {
   font-size: 1rem;
   color: #999;
   text-decoration: line-through;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 /* Responsive adjustments */
@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

   .section-header h2 {
     font-size: 1.75rem;
   }
 }

 @media (max-width: 480px) {
   .products-grid {
     grid-template-columns: repeat(3, 1fr);
   }

   .product-title {
     font-size: 0.875rem;
   }

   .product-description {
     font-size: 0.75rem;
     line-height: 1.4;
   }

   .product-image {
     height: 140px;
     width: 100%;
   }

   .product-image img {
     object-fit: contain;
   }

   .product-price {
     gap: 0.5rem;
   }

   .current-price {
     font-size: 0.75rem;
   }

   .original-price {
     font-size: 0.7rem;
   }

   .bestsellers-section {
     padding: 2rem 0;
   }
 }

 /* ---------------------BEST SELLER--------------------- */


 /* ---------------------BIKE SECTION--------------------- */

 section.delivery-section {
   margin-bottom: 30px;
 }

 .delivery-banner {
   background: radial-gradient(at center left, #51A390 3%, #276153 81%);
   border-radius: 24px;
   padding: 60px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   max-width: 1400px;
   margin: 0 auto;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
   overflow: visible;
   position: relative;
   height: 500px;
 }

 .delivery-image {
   position: absolute;
   left: 40px;
   top: 50%;
   transform: translateY(-50%);
   width: 450px;
 }

 .delivery-img {
   height: 545px;
   width: auto;
   animation: float 3s ease-in-out infinite;
   filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.3));
 }

 @keyframes float {

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

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

 .delivery-content {
   margin-left: auto;
   max-width: 750px;
   z-index: 2;
   padding-left: 80px;
 }

 .delivery-content h1 {
   color: white;
   font-size: 65px;
   font-weight: 700;
   line-height: 1.15;
   margin-bottom: 25px;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
 }

 .delivery-content p {
   color: white;
   font-size: 20px;
   margin-bottom: 35px;
   opacity: 0.95;
   font-weight: 400;
 }

 .cta-button {
   background: white;
   color: #2d5a4a;
   padding: 18px 45px;
   border-radius: 50px;
   border: none;
   font-size: 18px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
   display: inline-block;
 }

 .cta-button:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
   background: #f8f8f8;
 }

 /* Tablet Landscape - Large Tablets */
 @media (max-width: 1200px) {
   .delivery-banner {
     padding: 50px 40px;
     height: 450px;
   }

   .delivery-image {
     width: 400px;
     left: 30px;
   }

   .delivery-img {
     height: 480px;
   }

   .delivery-content {
     padding-left: 50px;
     max-width: 650px;
   }

   .delivery-content h1 {
     font-size: 56px;
   }

   .delivery-content p {
     font-size: 18px;
   }
 }

 /* Tablet Portrait */
 @media (max-width: 1024px) {
   .delivery-banner {
     flex-direction: column;
     text-align: center;
     padding: 40px 30px 50px;
     height: auto;
     min-height: auto;
     overflow: hidden;
   }

   .delivery-image {
     position: relative;
     left: 0;
     top: 0;
     transform: none;
     width: 350px;
     margin: 0 auto 30px;
   }

   .delivery-img {
     height: 380px;
     animation: none;
   }

   .delivery-content {
     margin-left: 0;
     padding-left: 0;
     max-width: 100%;
   }

   .delivery-content h1 {
     font-size: 48px;
   }

   .delivery-content p {
     font-size: 18px;
     margin-bottom: 30px;
   }
 }

 /* Mobile Landscape - Small Tablets */
 @media (max-width: 768px) {
   body {
     padding: 15px;
   }

   .delivery-banner {
     padding: 30px 25px 40px;
     border-radius: 16px;
   }

   .delivery-image {
     width: 300px;
     margin-bottom: 25px;
   }

   .delivery-img {
     height: 320px;
   }

   .delivery-content h1 {
     font-size: 36px;
     margin-bottom: 20px;
   }

   .delivery-content p {
     font-size: 16px;
     margin-bottom: 25px;
   }

   .cta-button {
     padding: 14px 35px;
     font-size: 16px;
   }
 }

 /* Mobile Portrait */
 @media (max-width: 480px) {
   body {
     padding: 10px;
   }

   .delivery-banner {
     padding: 25px 20px 35px;
     border-radius: 12px;
   }

   .delivery-image {
     width: 240px;
     margin-bottom: 20px;
   }

   .delivery-img {
     height: 260px;
   }

   .delivery-content h1 {
     font-size: 28px;
     margin-bottom: 15px;
     line-height: 1.2;
   }

   .delivery-content p {
     font-size: 14px;
     margin-bottom: 20px;
   }

   .cta-button {
     padding: 12px 30px;
     font-size: 15px;
   }
 }

 /* Extra Small Mobile */
 @media (max-width: 360px) {
   .delivery-banner {
     padding: 20px 15px 30px;
   }

   .delivery-image {
     width: 200px;
   }

   .delivery-img {
     height: 220px;
   }

   .delivery-content h1 {
     font-size: 24px;
   }

   .delivery-content p {
     font-size: 13px;
   }

   .cta-button {
     padding: 10px 25px;
     font-size: 14px;
   }
 }

 /* ---------------------BIKE SECTION--------------------- */



 /* ---------------------Best sales today--------------------- */

 /* --------------------- Big Sales Section --------------------- */
 .big-sales-container {
   max-width: 1400px;
   margin: 0 auto;
   display: flex;
   gap: 30px;
   flex-wrap: wrap;
   align-items: flex-start;
 }

 .left-section {
   flex: 1;
   min-width: 300px;
 }

 .header-v {
   display: flex;
   align-items: center;
   gap: 30px;
   margin-bottom: 30px;
   flex-wrap: wrap;
 }

 .header-v h1 {
   font-size: 32px;
   font-weight: 600;
   color: #1a1a1a;
 }

 .countdown {
   display: flex;
   gap: 15px;
 }

 .countdown-item {
   text-align: center;
 }

 .countdown-number {
   font-size: 36px;
   font-weight: 700;
   color: #00b853;
   line-height: 1;
 }

 .countdown-label {
   font-size: 12px;
   color: #666;
   margin-top: 5px;
 }

 .swiper {
   width: 100%;
   padding-bottom: 50px !important;
 }

 .swiper-slide {
   height: auto;
 }

 .product-card-v {
   background: white;
   border-radius: 12px;
   padding: 20px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   transition: transform 0.3s, box-shadow 0.3s;
   position: relative;
   height: 100%;
 }

 .product-card-v:hover {
   transform: translateY(-5px);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
 }

 .product-image-container-v {
   position: relative;
   height: 180px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 15px;
 }

 .product-image-container-v img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
 }

 .badges {
   position: absolute;
   top: 10px;
   left: 10px;
   display: flex;
   flex-direction: column;
   gap: 5px;
 }

 .badge-v {
   padding: 4px 10px;
   border-radius: 4px;
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
   display: inline-block;
 }

 .badge-v.markdown {
   background-color: #4a5fc1;
   color: white;
 }

 .badge-v.new {
   background-color: #2d2d2d;
   color: white;
 }

 .discount-badge-v {
   position: absolute;
   top: 10px;
   right: 10px;
   background-color: #00b853;
   color: white;
   padding: 4px 10px;
   border-radius: 4px;
   font-size: 11px;
   font-weight: 600;
 }

 .out-of-stock-badge {
   position: absolute;
   top: 10px;
   right: 10px;
   background-color: #ff5722;
   color: white;
   padding: 4px 10px;
   border-radius: 4px;
   font-size: 11px;
   font-weight: 600;
 }

 .progress-bar {
   width: 100%;
   height: 6px;
   background-color: #e0e0e0;
   border-radius: 3px;
   overflow: hidden;
   margin-bottom: 8px;
 }

 .progress-fill {
   height: 100%;
   background-color: #00b853;
   border-radius: 3px;
 }

 .stock-info {
   display: flex;
   justify-content: space-between;
   font-size: 12px;
   color: #666;
   margin-bottom: 15px;
 }

 .product-title-v {
   font-size: 18px;
   font-weight: 600;
   color: #1a1a1a;
   margin-bottom: 8px;
 }

 .product-category {
   font-size: 13px;
   color: #888;
   margin-bottom: 12px;
 }

 .quantity-selector {
   margin-bottom: 12px;
 }

 .quantity-selector select {
   width: 100%;
   padding: 8px 12px;
   border: 1px solid #ddd;
   border-radius: 6px;
   font-size: 14px;
   color: #333;
   background-color: white;
   cursor: pointer;
 }

 .stock-badge {
   display: inline-block;
   padding: 4px 12px;
   border-radius: 4px;
   font-size: 11px;
   font-weight: 600;
   margin-bottom: 12px;
 }

 .stock-badge.in-stock {
   background-color: #2d2d2d;
   color: white;
 }

 .stock-badge.out {
   background-color: #ff5722;
   color: white;
 }

 .price-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: auto;
 }

 .price-container {
   display: flex;
   flex-direction: column;
   gap: 2px;
 }

 .original-price-v {
   font-size: 14px;
   color: #999;
   text-decoration: line-through;
 }

 .current-price-v {
   font-size: 22px;
   font-weight: 700;
   color: #00b853;
 }

 .add-to-cart {
   background-color: transparent;
   border: 1px solid #ddd;
   cursor: pointer;
   padding: 8px;
   border-radius: 6px;
   opacity: 0.6;
   transition: opacity 0.3s, border-color 0.3s;
 }

 .add-to-cart:hover {
   opacity: 1;
   border-color: #00b853;
 }

 .add-to-cart svg {
   width: 20px;
   height: 20px;
   fill: #666;
 }

 .color-options {
   display: flex;
   gap: 8px;
   margin-bottom: 12px;
 }

 .color-dot {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   border: 2px solid #ddd;
   cursor: pointer;
 }

 .country-flags {
   display: flex;
   gap: 8px;
   margin-bottom: 12px;
 }

 .country-flags img {
   width: 24px;
   height: 18px;
   border-radius: 2px;
 }

 .promo-card-v {
   min-height: 300px;
   width: 364px;
   border-radius: 20px;
   padding: 50px 40px;
   color: white;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
   position: relative;
   overflow: hidden;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   height: 40rem;
 }

 .promo-card-v h2 {
   font-size: 43px;
   font-weight: 700;
   line-height: 48.5px;
   letter-spacing: -1.849px;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.24);
   color: #EBFFDC;
 }



 .promo-card-v h2 {
   font-size: 42px;
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 30px;
 }

 .shop-now-btn {
   background-color: white;
   color: #5a8a3a;
   padding: 14px 40px;
   border-radius: 30px;
   border: none;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   transition: transform 0.3s, box-shadow 0.3s;
   display: inline-block;
   margin-bottom: 40px;
   margin-top: 14px;
 }

 .shop-now-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   background: #243f2f;
   color: white;
 }

 .cheese-image {
   width: 100%;
   margin-top: 20px;
 }

 .swiper-button-next,
 .swiper-button-prev {
   background-color: #000 !important;
   color: #fff !important;
   height: 40px !important;
   width: 40px !important;
   border-radius: 50% !important;
   opacity: 0.9;
   transition: all 0.3s ease;
 }

 .swiper-button-next::after,
 .swiper-button-prev::after {
   font-size: 18px !important;
   font-weight: 700 !important;
 }

 .swiper-button-next:hover,
 .swiper-button-prev:hover {
   background-color: #2d6a4f !important;
   opacity: 1;
 }

 .swiper-pagination-bullet {
   background-color: #ddd;
   opacity: 1;
 }

 .swiper-pagination-bullet-active {
   background-color: #2d2d2d;
 }

 @media (max-width: 1024px) {
   .big-sales-container {
     flex-direction: column;
     align-items: center;
   }

   .left-section,
   .promo-card {
     width: 100%;
   }

   .promo-card {
     order: -1;
   }
 }

 @media (max-width: 768px) {
   .header-v {
     flex-direction: column;
     align-items: flex-start;
     gap: 15px;
   }

   .header-v h1 {
     font-size: 24px;
   }

   .countdown-number {
     font-size: 28px;
   }

   .swiper-button-next,
   .swiper-button-prev {
     top: auto !important;
     bottom: -5px !important;
     transform: none !important;
     height: 34px !important;
     width: 34px !important;
   }

   .swiper-button-prev {
     left: 42% !important;
   }

   .swiper-button-next {
     right: 42% !important;
   }

   .swiper {
     padding-bottom: 70px !important;
   }
 }

 /* ------------------------------BIG SALE CONTAINER------------------------------  */


 /* ------------------------------Welcom MODAL CSS------------------------------  */

 /* Modal background */
 /* Modal background */
 .modal {
   display: none;
   position: fixed;
   z-index: 999;
   inset: 0;
   /* shorthand for top/left/right/bottom = 0 */
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.6);
   overflow-y: auto;
   animation: fadeIn 0.3s ease-in-out;
 }

 /* Modal box */
 .modal-content {
   background-color: #fff;
   margin: auto;
   padding: 30px 25px;
   border-radius: 15px;
   width: 90%;
   max-width: 420px;
   text-align: center;
   position: relative;
   top: 50%;
   transform: translateY(-50%);
   box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
   animation: slideDown 0.4s ease-out;
 }

 /* Responsive Fix for small screens */
 @media (max-height: 500px) {
   .modal-content {
     top: 0;
     transform: none;
     margin: 40px auto;
   }
 }

 /* Heading styles */
 .modal-content h2 {
   font-size: 26px;
   margin-bottom: 10px;
   color: #2d572c;
 }

 .modal-content h2 span {
   color: #4caf50;
 }

 /* Paragraph */
 .modal-content p {
   color: #555;
   margin-bottom: 20px;
   line-height: 1.5;
   font-size: 15px;
 }

 /* Image */
 .modal-image {
   width: 70px;
   height: 70px;
   margin-bottom: 15px;
 }

 /* Button */
 .explore-btn {
   background-color: #4caf50;
   color: white;
   text-decoration: none;
   padding: 12px 25px;
   border-radius: 30px;
   font-weight: bold;
   font-size: 15px;
   display: inline-block;
   transition: background 0.3s;
 }

 .explore-btn:hover {
   background-color: #3e8e41;
 }

 /* Close button */
 .close-btn {
   position: absolute;
   top: 10px;
   right: 15px;
   font-size: 26px;
   color: #666;
   cursor: pointer;
   transition: color 0.2s;
 }

 .close-btn:hover {
   color: #000;
 }

 /* Animations */
 @keyframes fadeIn {
   from {
     opacity: 0;
   }

   to {
     opacity: 1;
   }
 }

 @keyframes slideDown {
   from {
     transform: translateY(-20px);
     opacity: 0;
   }

   to {
     transform: translateY(-50%);
     opacity: 1;
   }
 }



 /* ------------------------------Welcom MODAL CSS------------------------------  */


 /* ------------------------------DISCOUNT CARDS------------------------------  */
 .discount-section {
   display: flex;
   flex-wrap: wrap;
   gap: 25px;
   justify-content: center;
   align-items: flex-start;
   margin-top: 55px;
 }

 .discount-card {
   width: 333px;
   height: 426px;
   border-radius: 25px;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   position: relative;
   text-align: center;
   padding: 30px 20px;
   box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease;
 }

 .discount-card:hover {
   transform: translateY(-6px);
 }

 .discount-badge {
   display: inline-block;
   background: #fff;
   color: #178b3c;
   font-weight: 600;
   font-size: 24px;
   padding: 8px 22px;
   border-radius: 40px;
   position: absolute;
   top: 20px;
   left: 50%;
   transform: translateX(-50%);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }

 .discount-badge.red {
   color: #d91f26;
 }

 .discount-card h3 {
   margin-top: 62px;
   color: #1f2e25;
   font-size: 34px;
   line-height: 39px;
   font-weight: 700;
   letter-spacing: -1.36px;
 }

 @media (max-width: 768px) {
   .discount-section {
     flex-direction: column;
     align-items: center;
   }
 }

 /* ------------------------------DISCOUNT CARDS------------------------------  */


 /* ------------------------------Products Sales section------------------------------  */

 .product-lists {
   display: flex;
   flex-wrap: wrap;
   gap: 30px;
   justify-content: center;
   background-color: #e9f1e8;
   border-radius: 20px;
   padding: 40px;
 }

 .product-column {
   flex: 1;
   min-width: 250px;
 }

 .product-column h3 {
   font-size: 20px;
   font-weight: 700;
   color: #1f2e25;
   margin-bottom: 20px;
 }

 .product-item {
   display: flex;
   align-items: center;
   margin-bottom: 18px;
   gap: 12px;
 }

 .product-item img {
   width: 60px;
   height: 60px;
   border-radius: 10px;
   object-fit: cover;
   background: #fff;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }

 .product-item .title {
   font-size: 15px;
   color: #1f2e25;
   font-weight: 500;
   margin-bottom: 4px;
 }

 .product-item .price {
   font-size: 14px;
   color: #009b3e;
   font-weight: 600;
 }

 .product-item .stars {
   font-size: 13px;
   color: #11aa45;
   margin-bottom: 2px;
 }

 @media (max-width: 992px) {
   .product-lists {
     flex-direction: column;
     align-items: center;
   }

   .product-column {
     width: 100%;
     max-width: 500px;
   }
 }

 /* ------------------------------Products Sales section------------------------------  */

 /* ---------------------Footer--------------------- */
 .footer {
   background-color: #0e1e16;
   color: #aef0c2;
   padding: 50px 20px;
 }

 /* Footer container layout */
 .footer-container {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   flex-wrap: wrap;
   max-width: 1200px;
   margin: 0 auto;
   gap: 40px;
 }

 /* Left column */
 .footer-links a {
   display: block;
   color: #aef0c2;
   text-decoration: none;
   margin-bottom: 10px;
   transition: color 0.3s;
 }

 .footer-links a:hover {
   color: #2be38d;
 }

 /* Center section */
 .footer-center {
   flex: 1;
   text-align: center;
   min-width: 280px;
   margin: 0 147px 0 217px;
 }

 .footer-logo {
   font-weight: 700;
   font-size: 28px;
   color: #fff;
   margin-bottom: 10px;
 }

 .footer-center p {
   color: #aef0c2;
   font-size: 14px;
   line-height: 1.6;
   margin-bottom: 15px;
 }

 .social-icons a {
   color: #aef0c2;
   margin: 0 8px;
   font-size: 18px;
   transition: color 0.3s;
 }

 .social-icons a:hover {
   color: #2be38d;
 }

 .copyright {
   font-size: 13px;
   color: #75b38a;
   margin-top: 10px;
 }

 /* Right column */
 .footer-right {
   flex: 1;
   min-width: 280px;
 }

 .footer-right h3,
 .footer-right h4 {
   color: #2be38d;
   margin-bottom: 10px;
 }

 .footer-right p {
   color: #aef0c2;
   font-size: 14px;
   margin-bottom: 15px;
 }

 /* Subscribe form */
 .input-group {
   display: flex;
   background-color: #112a1f;
   border-radius: 30px;
   overflow: hidden;
 }

 .input-group input {
   flex: 1;
   border: none;
   outline: none;
   background: transparent;
   padding: 12px 16px;
   color: #aef0c2;
 }

 .input-group button {
   background-color: #2be38d;
   border: none;
   color: #0e1e16;
   padding: 12px 20px;
   cursor: pointer;
   font-weight: 600;
   transition: background 0.3s;
 }

 .input-group button:hover {
   background-color: #22c777;
 }

 /* Payment icons */
 .payments img {
   height: 28px;
   margin-right: 10px;
 }

 /* ---------------- Responsive Styles ---------------- */

 /* Tablet view (≤ 1024px) */
 @media (max-width: 1024px) {
   .footer-center {
     margin: 0 80px;
   }
 }

 /* Tablet & Mobile (≤ 900px) */
 @media (max-width: 900px) {
   .footer-container {
     flex-direction: column;
     align-items: center;
     text-align: center;
   }

   .footer-center {
     margin: 0;
   }

   .footer-links {
     text-align: center;
   }

   .footer-right {
     text-align: center;
   }

   .input-group {
     max-width: 300px;
     margin: 0 auto;
   }
 }

 /* Small mobile (≤ 600px) */
 @media (max-width: 600px) {
   .footer {
     padding: 30px 15px;
   }

   .footer-logo {
     font-size: 24px;
   }

   .footer-center p,
   .footer-right p {
     font-size: 13px;
   }

   .social-icons a {
     font-size: 16px;
     margin: 0 6px;
   }

   .input-group input {
     padding: 10px 12px;
   }

   .input-group button {
     padding: 10px 16px;
   }

   .payments img {
     height: 22px;
   }
 }
.promo-grid {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;

}

/* ---------------------Shop Page Styles--------------------- */
.shop-banner {
  padding: clamp(60px, 8vw, 100px) 0;
  text-align: center;
  color: #fff;
}

.shop-banner h1 {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
}

.shop-banner p {
  font-size: clamp(14px, 1.8vw, 18px);
  margin-top: clamp(8px, 1.2vw, 10px);
}

.shop-filters {
  padding: clamp(20px, 3vw, 30px) 0;
  border-bottom: 1px solid #eee;
}

.shop-filters h2 {
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 600;
}

.shop-products {
  padding: clamp(40px, 6vw, 60px) 0;
}

.shop-products .row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 30px);
}

.shop-products .product-card {
  position: relative;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: clamp(15px, 2.5vw, 20px);
  text-align: center;
  transition: 0.3s;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.shop-products .product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.shop-products .wishlist-btn {
  position: absolute;
  top: clamp(10px, 1.5vw, 15px);
  right: clamp(10px, 1.5vw, 15px);
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: clamp(30px, 4vw, 35px);
  height: clamp(30px, 4vw, 35px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.shop-products .wishlist-btn:hover {
  background: #ff4d4d;
  border-color: #ff4d4d;
}

.shop-products .wishlist-btn:hover i {
  color: #fff !important;
}

.shop-products .product-card img {
  width: 100%;
  height: clamp(180px, 25vw, 220px);
  object-fit: contain;
  border-radius: 10px;
  flex-shrink: 0;
}

.shop-products .product-card h3 {
  margin-top: clamp(10px, 1.5vw, 15px);
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 600;
  color: #2A3C2D;
  line-height: 1.3;
  flex-shrink: 0;
}

.shop-products .product-card p {
  color: #666;
  font-size: clamp(12px, 1.5vw, 14px);
  margin: clamp(6px, 1vw, 8px) 0;
  line-height: 1.4;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-products .product-card span {
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 700;
  color: #3cb815;
  display: block;
  margin: clamp(6px, 1vw, 8px) 0;
  flex-shrink: 0;
}

.shop-products .product-card > div {
  margin-top: clamp(10px, 1.5vw, 15px);
  margin-top: auto;
  flex-shrink: 0;
}

.shop-products .product-card .btn {
  padding: clamp(8px, 1.5vw, 10px) clamp(15px, 2.5vw, 20px);
  border-radius: 8px;
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  margin-top: clamp(8px, 1.2vw, 10px);
}

.shop-products .product-card .btn-success {
  background: #3cb815;
  color: #fff;
}

.shop-products .product-card .btn-success:hover {
  background: #2d8f0f;
}

.shop-products .product-card .btn-outline-success {
  background: transparent;
  color: #3cb815;
  border: 1px solid #3cb815;
  text-decoration: none;
  display: block;
}

.shop-products .product-card .btn-outline-success:hover {
  background: #3cb815;
  color: #fff;
}

/* Mobile responsive adjustments for shop products */
@media (max-width: 768px) {
  .shop-products .row {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(12px, 3vw, 20px);
  }

  .shop-products .product-card {
    padding: clamp(10px, 2.5vw, 15px);
    min-height: auto;
  }

  .shop-products .product-card img {
    height: clamp(120px, 25vw, 160px);
    margin-bottom: clamp(6px, 1.5vw, 10px);
  }

  .shop-products .product-card h3 {
    font-size: clamp(12px, 2.8vw, 15px);
    margin-top: clamp(6px, 1.2vw, 10px);
    margin-bottom: clamp(4px, 1vw, 6px);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .shop-products .product-card p {
    font-size: clamp(10px, 2.2vw, 12px);
    margin: clamp(4px, 1vw, 6px) 0;
    line-height: 1.4;
    -webkit-line-clamp: 2;
  }

  .shop-products .product-card span {
    font-size: clamp(14px, 2.8vw, 16px);
    margin: clamp(6px, 1.2vw, 8px) 0;
  }

  .shop-products .product-card > div {
    margin-top: clamp(8px, 1.5vw, 12px);
  }

  .shop-products .product-card .btn {
    font-size: clamp(10px, 2.2vw, 12px);
    padding: clamp(6px, 1.8vw, 8px) clamp(10px, 2.5vw, 15px);
    margin-top: clamp(4px, 1vw, 6px);
  }

  .shop-products .wishlist-btn {
    width: clamp(26px, 4vw, 30px);
    height: clamp(26px, 4vw, 30px);
    top: clamp(8px, 1.2vw, 12px);
    right: clamp(8px, 1.2vw, 12px);
  }
}

@media (max-width: 480px) {
  .shop-products .row {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(10px, 4vw, 15px);
  }

  .shop-products .product-card {
    padding: clamp(8px, 3vw, 12px);
    min-height: auto;
  }

  .shop-products .product-card img {
    height: clamp(100px, 28vw, 140px);
    margin-bottom: clamp(5px, 1.2vw, 8px);
  }

  .shop-products .product-card h3 {
    font-size: clamp(11px, 3.5vw, 14px);
    margin-top: clamp(5px, 1vw, 8px);
    margin-bottom: clamp(3px, 0.8vw, 5px);
    line-height: 1.3;
    -webkit-line-clamp: 2;
  }

  .shop-products .product-card p {
    font-size: clamp(9px, 2.8vw, 11px);
    margin: clamp(3px, 0.8vw, 5px) 0;
    line-height: 1.4;
    -webkit-line-clamp: 2;
  }

  .shop-products .product-card span {
    font-size: clamp(13px, 3.5vw, 15px);
    margin: clamp(5px, 1vw, 7px) 0;
  }

  .shop-products .product-card > div {
    margin-top: clamp(6px, 1.2vw, 10px);
  }

  .shop-products .product-card .btn {
    font-size: clamp(9px, 2.8vw, 11px);
    padding: clamp(5px, 1.5vw, 7px) clamp(8px, 2.2vw, 12px);
    margin-top: clamp(3px, 0.8vw, 5px);
  }

  .shop-products .wishlist-btn {
    width: clamp(24px, 4.5vw, 28px);
    height: clamp(24px, 4.5vw, 28px);
    top: clamp(6px, 1vw, 10px);
    right: clamp(6px, 1vw, 10px);
  }

  .shop-products .wishlist-btn i {
    font-size: clamp(12px, 2.5vw, 14px) !important;
  }
}

/* -----------------------------------Footer----------------------------------- */





/* PRELOADER BASE */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
background: linear-gradient(135deg, #243f2f 0%, #00d783 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  transition: opacity 0.6s ease;
}

.preloader-content {
  position: relative;
  text-align: center;
}

/* ARC TEXT */
.arc-text {
  position: absolute;
  top: -100px; /* slightly above logo */
  left: 50%;
  color: #fff;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10000;
}

.arc-text span {
  font-size: 36px; /* bigger font */
  font-weight: 800; /* bold */
  color: #fff;
  opacity: 0;
  transform-origin: bottom center;
  animation: fadeLetter 0.4s forwards ease-out;
}

/* Arc angle shaping */
.arc-text span:nth-child(1) { transform: rotate(-36deg); }
.arc-text span:nth-child(2) { transform: rotate(-27deg); }
.arc-text span:nth-child(3) { transform: rotate(-18deg); }
.arc-text span:nth-child(4) { transform: rotate(-9deg); }
.arc-text span:nth-child(5) { transform: rotate(0deg); }
.arc-text span:nth-child(6) { transform: rotate(9deg); }
.arc-text span:nth-child(7) { transform: rotate(18deg); }
.arc-text span:nth-child(8) { transform: rotate(27deg); }
.arc-text span:nth-child(9) { transform: rotate(36deg); }
.arc-text span:nth-child(10) { transform: rotate(45deg); }

/* Fade animation for letters */
@keyframes fadeLetter {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* LOGO */
.preloader-logo {
  width: 300px; /* bigger logo */
  opacity: 0;
  transform: scale(0.5);
  transition: all 1.2s ease-out;
}

.preloader-logo.show {
  opacity: 1;
  transform: scale(1);
}