* {
   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);
 }

 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%); */
   /* min-height: 450px; */
   position: relative;
   overflow: hidden;
   /* display: flex; */
   align-items: center;
   /* padding: 60px 0; */
   background-size: cover;
   background-position: center;
   /* background-repeat: no-repeat; */
   /* color: #ffffff; */
   /* min-height: 565px; */
 }

 .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: #EBFFDC;
   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-title {
     font-size: 60px;
   }

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

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

 @media (max-width: 992px) {
   .hero-container {
     grid-template-columns: 1fr;
     gap: 40px;
     text-align: center;
   }

   .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 {
     min-height: auto;
     padding: 50px 0;
   }

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

   .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-title {
     font-size: 36px;
   }

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

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


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




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


 .promo-section {
   /* display: flex; */
   /* justify-content: center; */
 }

 .promo-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 2rem;
   width: 100%;
   padding: 13px;
   /* margin-left: 57px; */
 }

 .promo-card {
   position: relative;
   border-radius: 24px;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 2rem;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   margin-top: 35px;
   min-height: 200px;
   height: 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: 32px;
   font-weight: 700;
   color: #2A3C2D;
   margin-bottom: 1rem;
   line-height: 1.2;
 }

 .promo-btn {
   display: inline-block;
   background: #ffffff;
   color: #1A3C2A;
   font-weight: 600;
   padding: 0.75rem 1.5rem;
   border-radius: 50px;
   text-decoration: none;
   transition: background 0.3s ease, color 0.3s ease;
 }

 .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(auto-fill, minmax(300px, 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;
   overflow: hidden;
 }

 .product-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   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;
 }

 .product-description {
   color: #666;
   margin: 0 0 1.5rem 0;
   line-height: 1.5;
   flex-grow: 1;
 }

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

 .current-price {
   font-size: 1.25rem;
   font-weight: 700;
   color: #2A3C2D;
 }

 .original-price {
   font-size: 1rem;
   color: #999;
   text-decoration: line-through;
 }

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

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

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

   .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;
   }
 }

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