/* ===== RESET ===== */
*{
  margin:0;
  padding:0;
  
}

html, body{
  width:100%;
  overflow-x:hidden;
  font-family: Arial, sans-serif;
}

body{
  color:#050101;
  background:#d7eee2;
}

/* ================= LOGO ================= */

.logo{
  height:70px;
  display:block;
 
}

/* ================= TRUE INFINITE MARQUEE ================= */

.top-offer-bar{
  width:100%;
  background:#2e7d32;
  overflow:hidden;
  min-height:34px;
  display:flex;
  align-items:center;
  position:relative;
  z-index:100;
}

.marquee{
  display:flex;
  width:100%;
  overflow:hidden;
}

.marquee__group{
  display:flex;
  align-items:center;
  white-space:nowrap;
  animation:scroll 22s linear infinite;
}

.marquee__group span{
  color:#fff;
  font-size:13px;
  font-weight:600;
  padding-right:60px;
  letter-spacing:.3px;
}

@keyframes scroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-100%); }
}




/* ================= CLEAN HEADER SYSTEM ================= */

.header{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 20px;
  background:#ffffff;
  border-bottom:1px solid #e5e5e5;
  position:sticky;
  top:0;
  z-index:9999;
}

/* LOGO */
.logo{
  height:68px;
  margin-right:112px;
}

/* NAV WRAP */
.header-center-wrap{
  display:flex;
}

/* MENU */
.mobile-nav{
  display:flex;
  align-items:center;
  gap:26px;
}

.mobile-nav a{
  font-size:18px;
  font-weight:500;
  color:#111;
  text-decoration:none;
  position:relative;
}

.mobile-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:#2e7d32;
  transition:.25s;
}

.mobile-nav a:hover::after{
  width:100%;
}

/* ICONS */
.icons{
  display:flex;
  align-items:center;
  gap:14px;
  margin-left:112px;
  margin-right: 112px;
}


/* CART */
.cart-icon{
  position:relative;
  display:flex;
}

.cart-count{
  position:absolute;
  top:-6px;
  right:-8px;
  background:#2e7d32;
  color:#fff;
  font-size:11px;
  font-weight:600;
  padding:2px 6px;
  border-radius:50%;
}

/* MENU TOGGLE */
.menu-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}

.menu-toggle span{
  width:24px;
  height:2px;
  background:#111;
  border-radius:2px;
}

/* ================= MOBILE SYSTEM ================= */

@media(max-width:768px){

  body{
    padding-top:110px;
  }

  .header{
    position:fixed;
    top:50px;
    left:0;
    height:60px;
    width:100%;
    background:#fff;
    box-shadow:0 4px 14px rgba(0,0,0,.12);
    z-index:9999;
  }

  .logo{
    height:38px;
  }

  .menu-toggle{
    display:flex;
  }

  /* SLIDE MENU PANEL (RIGHT SIDE) */
  .header-center-wrap{
    position:fixed;
    top:60px;
    right:-100%;
    width:80%;
    height:calc(100vh - 60px);
    background:#ffffff;
    box-shadow:-10px 0 30px rgba(0,0,0,.15);
    padding:22px;
    transition:.35s ease;
    z-index:9999;
  }

  .header-center-wrap.active{
    right:0;
  }

  .mobile-nav{
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }

  .mobile-nav a{
    width:100%;
    font-size:16px;
    padding-bottom:10px;
    border-bottom:1px dashed #ddd;
  }

  .icons svg{
    width:20px;
    height:20px;
  }

  .cart-count{
    font-size:9px;
    padding:2px 5px;
  }

}





/* ================= HEADER ICONS FIX ================= */

.icons{
  display:flex;
  align-items:center;
  gap:18px;
}

.icon-box{
  font-size:20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* FIX cart alignment */
.cart-wrapper{
  position:relative;
}

.cart-icon{
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:4px;
}

/* ===== ACTIVE MENU EFFECT ===== */

.mobile-nav a.active{
  color:#2e7d32;
  font-weight:700;
}

.mobile-nav a.active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:2px;
  background:#2e7d32;
  border-radius:2px;
}


/* ================= SEARCH BOX ================= */
/* SEARCH BOX FINAL */

.search-box{
  display:none;
  position:absolute;
  top:65px;
  right:80px;
  background:#fff;
  width:250px;
  padding:10px;
  border-radius:8px;
  box-shadow:0 10px 25px rgba(0,0,0,0.1);
}

.search-box input{
  border:none;
  outline:none;
  background:#f2f2f2;
  padding:10px 18px;
  border-radius:30px;
  width:220px;
}

.search-box button{
  border:none;
  background:#1f2937;
  color:#fff;
  padding:10px 20px;
  border-radius:30px;
  cursor:pointer;
}
#liveSearch{
  width:100%;
  padding:8px 10px;
  border:1px solid #ddd;
  border-radius:20px;
}

#searchResult{
  margin-top:8px;
  background:#fff;
  border-radius:6px;
  max-height:200px;
  overflow-y:auto;
}

#searchResult a{
  display:block;
  padding:6px 10px;
  font-size:14px;
  color:#333;
  text-decoration:none;
}

#searchResult a:hover{
  background:#f1f8f2;
}








/* ================= HERO SLIDER ================= */

.slider{
  width:100%;
  height:760px;
  position:relative;
  overflow:hidden;
}

.slider-track{
  display:flex;
  width:100%;
  height:100%;
  transition:.8s ease;
}

.home-slider{
  min-width:100%;
  height:100%;
  position:relative;
}

.home-slider img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Overlay */
.home-slider::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
}

/* Content */
.slide-content{
  position:absolute;
  top:50%;
  left:80px;
  transform:translateY(-50%);
  color:#fff;
  max-width:680px;
  z-index:2;
}

.slide-content h2{
  font-size:42px;
  line-height:1.3;
  margin-bottom:14px;
}

.slide-content p{
  font-size:18px;
  margin-bottom:22px;
}

.slide-content a{
  display:inline-block;
  padding:14px 36px;
  background:#2e7d32;
  color:#fff;
  font-size:15px;
  font-weight:600;
  border-radius:30px;
  text-decoration:none;
  transition:.25s;
}

.slide-content a:hover{
  background:#1b5e20;
}

/* Mobile */
@media(max-width:768px){
  .slider{ height:260px; }

  .slide-content{
    left:15px;
    right:15px;
    text-align:center;
  }

  .slide-content h2{ font-size:24px; }
  .slide-content p{ font-size:14px; }
  .slide-content a{
    padding:10px 24px;
    font-size:14px;
  }
}

/* ================= FEATURE STRIP ================= */

.features-strip{
  margin-top:-55px;
  position:relative;
  z-index:5;
}

.features-box{
  max-width:980px;
  margin:auto;
  background:#d7eee2;
  border-radius:30px;
  padding:16px 14px;
  border:1px solid #e5e7eb;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}

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

.feature-item .icon{
  width:42px;
  height:42px;
  margin:auto;
  margin-bottom:8px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  color:#2e7d32;
}

.feature-item h4{
  font-size:14px;
  margin-bottom:2px;
}

.feature-item p{
  font-size:12px;
  color:#666;
}

/* ================= FEATURE STRIP MOBILE FIX ================= */

@media(max-width:600px){

  .features-box{
    grid-template-columns:repeat(5,1fr);   /* 1 row = 5 icons */
    padding:10px 6px;
    gap:4px;
  }

  .feature-item .icon{
    width:32px;
    height:32px;
    font-size:14px;
    margin-bottom:4px;
  }

  .feature-item h4{
    font-size:10px;
    line-height:1.2;
    margin-bottom:1px;
  }

  .feature-item p{
    font-size:8px;
    line-height:1.2;
  }

}




/* ================= WHY CHOOSE US ================= */

.why{
  max-width:1200px;
  margin:80px auto;
  padding:0 20px;
  text-align:center;
}

.why h2{
  font-size:28px;
  color:#2e7d32;
  margin-bottom:10px;
}

.why-subtext{
  max-width:650px;
  margin:0 auto 24px;
  color:#666;
  font-size:16px;
}

.why-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}

.why-card{
  border-radius:18px;
  padding:28px 20px;
  transition:.25s;
}

.why-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.why-card img{
  width:60px;
  margin-bottom:14px;
}

.why-card h4{
  font-size:17px;
  margin-bottom:6px;
}

.why-card p{
  font-size:14px;
  color:#666;
  line-height:1.6;
}

/* ================= MOBILE FIX : WHY CHOOSE US ================= */

@media(max-width:600px){

  .why{
    margin:10px auto 30px;
    padding:0 12px;
  }

  .why h2{
    font-size:14px;
    margin-bottom:6px;
  }

  .why-subtext{
    font-size:11px;
    margin-bottom:14px;
    line-height:1.4;
  }

  .why-grid{
    grid-template-columns:repeat(4,1fr) !important;  
    gap:10px;
  }

  .why-card{
    padding:12px 6px;
    border-radius:12px;
  }

  .why-card img{
    width:36px;
    margin-bottom:6px;
  }

  .why-card h4{
    font-size:9px;
    margin-bottom:2px;
    line-height:1.2;
  }

  .why-card p{
    font-size:7px;
    line-height:1.3;
  }

}






/* ================= HOME CATEGORIES ================= */

.home-categories{
  max-width:1200px;
  margin:60px auto;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-bottom: 100px;
}

/* ================= CATEGORY CARD ================= */

.category-card{
  position:relative;
  height:240px;
  border-radius:20px;
  overflow:hidden;
  background:#000;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  transition:transform .35s ease, box-shadow .35s ease;
}

.category-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(0,0,0,.18);
}

/* ================= IMAGE ================= */

.category-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}

.category-card:hover img{
  transform:scale(1.06);
}

/* ================= CATEGORY HEADING ================= */

.home-cat-heading{
  text-align:center;
  margin-bottom:40px;
}

.home-cat-heading h2{
  font-size:28px;
  font-weight:700;
  margin-bottom:10px;
  color: #2e7d32;
}

.home-cat-heading p{
  font-size:16px;
  color:#666;
  max-width:650px;
  margin:0 auto;
}

/* ================= OVERLAY ================= */

.cat-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:transparent;   /* 🔥 black shadow removed */
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:32px;
  color:#fff;
}

/* ================= TEXT ================= */

.cat-overlay .small-title{
  font-family:'Georgia', serif;
  font-size:14px;
  letter-spacing:1px;
  opacity:.9;
  margin-bottom:2px;
}

.cat-overlay h3{
  font-size:22px;
  font-weight:700;
  margin-bottom:0px;
  letter-spacing:.3px;
}

.cat-overlay p{
  font-size:14px;
  opacity:.9;
  margin-bottom:4px;
}

/* ================= BUTTON ================= */
.banner-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  margin-top:4px;          /* thoda compact */
  align-self:flex-start;   /* 👈 LEFT side */

  background:#2e7d32;      /* green */
  color:#ffffff;

  padding:6px 14px;        /* 👈 chhota size */
  min-width:auto;

  border-radius:16px;      /* smaller pill */
  font-size:12px;
  font-weight:600;

  text-decoration:none;
  cursor:pointer;

  transition:background .2s ease;
}

/* hover */
.banner-btn:hover{
  background:#ff0000;
  color:#ffffff;
}

/* ================= MOBILE FIX : HOME CATEGORIES ================= */

@media(max-width:600px){

  .home-cat-heading{
    margin-bottom:6px;
    padding:0 12px;
  }

  .home-cat-heading h2{
    font-size:16px;
    margin-bottom:4px;
  }

  .home-cat-heading p{
    font-size:11px;
    line-height:1.4;
  }

  .home-categories{
    grid-template-columns:repeat(3,1fr);   /* 🔥 3 cards per row */
    gap:10px;
    padding: 12px 10px;
  }

  .category-card{
    height:120px;                          /* 🔥 compact cards */
    border-radius:12px;
  }

  .cat-overlay{
    padding:10px;
  }

  .cat-overlay .small-title{
    font-size:9px;
    margin-bottom:1px;
    color: #2e7d32;
  }

  .cat-overlay h3{
    font-size:11px;
    line-height:1.2;
    margin-bottom:1px;
  }

  .cat-overlay p{
    font-size:9px;
    margin-bottom:3px;
    line-height:1.2;
  }

  .banner-btn{
    padding:4px 8px;
    font-size:9px;
    border-radius:10px;
  }

}
@media(max-width:600px){

  .home-cat-heading{
    margin-bottom:8px !important;   /* 🔥 heading ke niche space kam */
    padding:0 10px;
  }

  .home-cat-heading h2{
    font-size:16px;
    margin-bottom:2px !important;
    line-height:1.2;
  }

  .home-cat-heading p{
    font-size:11px;
    margin-bottom:12px !important;
    line-height:1.3;
  }

  .home-categories{
    margin-top:6px !important;     /* 🔥 cards ko upar kheench */
    padding-top:0 !important;
  }

}









/* ================= PRODUCT SECTION ================= */

.products-section{
  width:100%;
  padding:0px 4px;
}

.products{
  max-width:1200px;
  margin:auto;
  padding:0 0px;
}

.products h2{
  text-align:center;
  font-size:28px;
  color: #2e7d32;
  margin-bottom:60px;
}

/* GRID */
.products .grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
}

/* CARD */
.product-card{
  background:#fff;
  border-radius:16px;
  border:1px solid #e5e7eb;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  position:relative;
  transition:.25s;
}

.product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 28px rgba(0,0,0,.12);
}

/* IMAGE */
.product-img{
  width:100%;
  height:220px;
  border-radius:14px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fafafa;
}

.product-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:8px;
}

/* BADGE */
.badge.new{
  position:absolute;
  top:10px;
  right:10px;
  background:#ef4444;
  color:#fff;
  font-size:11px;
  padding:3px 10px;
  border-radius:20px;
  font-weight:600;
  z-index:6;
}

/* WISHLIST */
.wishlist-btn{
  position:absolute;
  top:10px;
  left:10px;
  width:28px;
  height:28px;
  background:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 3px 8px rgba(0,0,0,.15);
  z-index:6;
}

.heart-icon{
  width:14px;
  height:14px;
  fill:#999;
}

/* RATING */
.rating{
  font-size:13px;
  color:#f4b400;
}

/* TAG */
.product-tag{
  font-size:13px;
  color:#2e7d32;
}

/* NAME */
.product-name{
  font-size:15px;
  font-weight:600;
  line-height:1.3;
}

/* OPTIONS ROW */
.product-options-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

/* DROPDOWN */
select{
  height:30px;
  padding:0 8px;
  border-radius:8px;
  border:1px solid #ddd;
  font-size:13px;
}

/* QTY */
.qty-ui{
  display:flex;
  align-items:center;
  gap:6px;
}

.qty-ui button{
  width:26px;
  height:26px;
  border-radius:6px;
  border:1px solid #d8e5dc;
  background:#f9fbfa;
  color:#2e7d32;
  cursor:pointer;
}

.qty-ui span{
  min-width:18px;
  text-align:center;
  font-size:13px;
}

/* PRICE ROW */
.price-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

/* PRICE */
.price{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.price .new-price{
  font-size:16px;
  font-weight:700;
  color:#16a34a;
}

.price .old-price{
  font-size:13px;
  text-decoration:line-through;
  color:#999;
}

.price .price-off{
  font-size:11px;
  background:#dcfce7;
  color:#15803d;
  padding:2px 6px;
  border-radius:6px;
}

/* ADD BUTTON */
.product-add{
  background:#2e7d32;
  color:#fff;
  border:none;
  padding:6px 16px;
  border-radius:24px;
  font-size:13px;
  cursor:pointer;
  transition:.25s;
}

.product-add:hover{
  background:#1b5e20;
}

.premium-dd{position:relative}

.custom-select{
  position:relative;
  width:120px;
  font-size:14px;
}

.custom-select .selected{
  padding:8px 12px;
  border-radius:10px;
  border:1px solid #ddd;
  cursor:pointer;
  background:#fff;
  font-weight:600;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.custom-select .selected::after{
  content:"▾";
  font-size:14px;
  opacity:.6;
}

.custom-select .options{
  position:absolute;
  top:110%;
  left:0;
  width:100%;
  background:#fff;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,.1);
  overflow:hidden;
  display:none;
  z-index:10;
}

.custom-select.open .options{display:block}

.custom-select .option{
  padding:10px 12px;
  cursor:pointer;
  transition:.25s;
}

.custom-select .option:hover{
  background:#e8f5e9;
  color:#2e7d32;
}


/* ================= MOBILE RESPONSIVE ================= */

/* ===== ULTRA COMPACT MOBILE FIX ===== */
@media (max-width:600px){

  .products{
    padding:0 4px;
    overflow-x:hidden;
  }

  .products .grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:5px;
  }

  .product-card{
    padding:8px;
    border-radius:10px;
    min-width:0;
  }

  /* IMAGE */
  .product-img{
    height:58px;
    border-radius:8px;
  }

  .product-img img{
    max-height:90px;
  }

  /* BADGE FIX */
  .badge.new{
    top:4px;
    right:4px;
    font-size:7px;
    padding:2px 6px;
  }

  .wishlist-btn{
    top:4px;
    left:4px;
    width:18px;
    height:18px;
  }

  .heart-icon{
    width:9px;
    height:9px;
  }

  /* TEXT */
  .rating{ font-size:7px; }
  .product-tag{ font-size:5px; }
  .product-name{
    font-size:7px;
    line-height:1.1;
  }

  /* OPTIONS */
  select{
    height:14px;
    font-size:6px;
    padding:0 0px;
  }

  .qty-ui{
    gap:2px;
  }

  .qty-ui button{
    width:4px;
    height:12px;
    font-size:8px;
  }

  .qty-ui span{
    font-size:8px;
  }

  /* PRICE */
  .price{
    gap:3px;
  }

  .price .new-price{ font-size:8px; }
  .price .old-price{ font-size:6px; }
  .price .price-off{ font-size:5px; }

  /* ADD BUTTON */
  .product-add{
    padding:1px 6px;
    font-size:8px;
    border-radius:4px;
  }

}





/* ================= PAHADI CORNER ================= */

.pahadi-corner{
  position:relative;
  background:url("images/pahadi-bg.jpg") no-repeat center center;
  background-size:cover;
  background-attachment:fixed;

  margin:100px 0;
 
  overflow:hidden;
}

/* DARK OVERLAY */
.pahadi-corner::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.25);
  z-index:1;
}

/* ================= CONTENT WRAP (1400px) ================= */

.pahadi-wrap{
  position:relative;
  z-index:2;

  max-width:1200px;
  margin: auto;

  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:60px;                 /* 👈 beech ka khaali space */

  padding:60px 0px;
}

/* ================= LEFT CONTENT ================= */

.pahadi-text{
  text-align:left;
}

.pahadi-text h2{
  font-size:42px;
  color:#ffffff;
  margin-bottom:18px;
}

.pahadi-text p{
  font-size:18px;
  color:#f1f1f1;
  line-height:1.8;
  margin-bottom:50px;
}

.pahadi-text ul{
  list-style:none;
  padding:0;
  margin-bottom:28px;
}

.pahadi-text ul li{
  font-size:18px;
  margin-bottom:18px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#ffffff;
}

/* ================= CTA BUTTON ================= */

.pahadi-btn{
  display:inline-block;
  background:#2e7d32;
  color:#fff;
  padding:13px 32px;
  border-radius:30px;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  transition:.3s;
}

.pahadi-btn:hover{
  background:#245f28;
}

/* ================= RIGHT IMAGE ================= */

.pahadi-img{
  display:flex;
  justify-content:flex-end;   /* 🔥 right align */
}

.pahadi-img img{
  width:100%;
  max-width:720px;
  border-radius:22px;
  
}







/* ================= PAHADI CORNER : MOBILE FIX ================= */

@media(max-width:600px){

  .pahadi-corner{
    margin:24px 0;
    background-attachment:scroll;  /* 🔥 mobile pe fixed bg heavy hota hai */
  }

  .pahadi-wrap{
    grid-template-columns:2fr 1fr;
    gap:24px;
    padding:28px 14px;
    text-align:center;
  }

  /* TEXT */
  .pahadi-text h2{
    font-size:14px;
    margin-bottom:10px;
    line-height:1;
  }

  .pahadi-text p{
    font-size:10px;
    line-height:1.2;
    margin-bottom:10px;
  }

  .pahadi-text ul{
    margin-bottom:18px;
  }

  .pahadi-text ul li{
    font-size:10px;
    margin-bottom:0px;
    justify-content:left;
  }

  /* BUTTON */
  .pahadi-btn{
        padding: 3px 9px;
        font-size: 12px;
        border-radius: 9px;
    }

  /* IMAGE */
  .pahadi-img{
    justify-content:right;
  }

  .pahadi-img img{
    max-width:140px;
    border-radius:14px;
  }

}



/* ================= BLOG MAGAZINE LAYOUT ================= */

.blog{
  padding:70px 20px;
}

.blog h2{
  text-align:center;
  margin-bottom:40px;
}

/* GRID */
.blog-grid{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
}

/* CARD */
.blog-card{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  transition:transform .3s ease;
  display:flex;
  flex-direction:column;
}

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

/* IMAGE */
.blog-img img{
  width:100%;
  height:190px;
  object-fit:cover;
}

/* CONTENT */
.blog-card h4{
  font-size:16px;
  margin:10px 14px 6px;
  line-height:1.3;
}

.blog-card p{
  font-size:14px;
  color:#555;
  margin:0 14px 10px;
  line-height:1.5;
}

.blog-card .date{
  font-size:12px;
  color:#888;
  margin:0 14px 6px;
}

.blog-card .read-more{
  display:inline-block;
  margin:0 14px 14px;
  font-size:13px;
  color:#2e7d32;
  font-weight:600;
  text-decoration:none;
}

/* ================= TABLET ================= */

@media(max-width:992px){
  .blog-grid{
    grid-template-columns:repeat(2,1fr);
    gap:20px;
  }
}

/* ================= PERFECT MOBILE BLOG GRID ================= */

@media(max-width:600px){

  .blog{
    padding:30px 10px;
  }

  .blog h2{
    font-size:16px;
    margin-bottom:18px;
  }

  /* 🔥 4 BLOGS IN 1 ROW */
  .blog-grid{
    grid-template-columns:repeat(4,1fr);
    gap:6px;
  }

  /* CARD COMPACT */
  .blog-card{
    border-radius:10px;
  }

  /* IMAGE SMALL */
  .blog-img img{
    height:60px;
    border-radius:10px 10px 0 0;
  }

  /* TEXT COMPACT */
  .blog-card h4{
    font-size:7px;
    margin:5px 6px 2px;
    line-height:1.15;
  }

  .blog-card p{
    font-size:7px;
    margin:0 6px 3px;
    line-height:1.2;
  }

  .blog-card .date{
    font-size:6px;
    margin:0 6px 2px;
  }

  .blog-card .read-more{
    font-size:7px;
    margin:0 6px 6px;
  }

}




/* ================= FEATURED BRANDS lOGO ================= */

.brands{
  width:100%;
  margin:80px 0;
  text-align:center;
}

.brands h2{
  font-size:28px;
  margin-bottom:30px;
  color:#222;
  font-weight:700;
}

/* SLIDER WRAP */
.logo-slider{
  overflow:hidden;
  background:transparent;
  border-radius:16px;
  padding:20px 0;
}

/* TRACK */
.logo-track{
  display:flex;
  gap:60px;
  width:max-content;
  white-space:nowrap;
  animation:logoScroll 40s linear infinite;
}

/* LOGO ITEM */
.logo-item{
  width:130px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* LOGO IMAGE */
.logo-item img{
  max-width:120px;
  max-height:45px;
  width:auto;
  opacity:0.9;
  transition:0.3s ease;
}

.logo-item img:hover{
  opacity:1;
  transform:scale(1.15);
}

/* ANIMATION */
@keyframes logoScroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

/* ================= MOBILE RESPONSIVE ================= */

@media(max-width:768px){

  .brands{
    margin:50px 0;
  }

  .brands h2{
    font-size:18px;
    margin-bottom:18px;
  }

  .logo-slider{
    padding:12px 0;
  }

  .logo-track{
    gap:28px;
    animation-duration:30s;
  }

  .logo-item{
    width:90px;
  }

  .logo-item img{
    max-width:80px;
    max-height:32px;
  }

}


/* =====================================================
   CART PAGE — PREMIUM UI + FULL RESPONSIVE
   ===================================================== */
.cart-page{
  max-width:1200px;
  margin:40px auto;
  padding:0 15px;
}

.cart-heading{
  font-size:26px;
  margin-bottom:20px;
  text-align:center;
}

.cart-empty{
  text-align:center;
  font-size:16px;
  padding:40px 0;
}

/* ================= TABLE ================= */

.cart-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 25px rgba(0,0,0,.06);
}

.cart-table thead{
  background:#2e7d32;
  color:#fff;
}

.cart-table th,
.cart-table td{
  padding:14px 10px;
  text-align:center;
  font-size:14px;
  border-bottom:1px solid #eee;
}

.cart-table th{
  font-weight:600;
  font-size:13px;
}

.cart-product{
  text-align:left;
}

.cart-product img{
  width:60px;
  height:60px;
  object-fit:contain;
  border-radius:8px;
  background:#f9faf9;
}

.cart-remove{
  color:#dc2626;
  font-size:13px;
  text-decoration:none;
}

/* ================= FOOTER ================= */

.cart-footer{
  margin-top:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.cart-total{
  font-size:20px;
  font-weight:700;
}

.cart-checkout{
  background:#2e7d32;
  color:#fff;
  padding:12px 30px;
  border-radius:30px;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
}

.cart-checkout:hover{
  background:#1b5e20;
}







/* ================= CUSTOM MASALA MIX ================= */

.mix-landscape{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}

.mix-landscape div{
  width:70px;
  font-size:11px;
  text-align:center;
}

/* ===================================================
   MOBILE RESPONSIVE → TABLE → CARD STYLE
   =================================================== */

@media(max-width:768px){

  .cart-heading{
    font-size:20px;
  }

  .cart-table thead{
    display:none;
  }

  .cart-table,
  .cart-table tbody,
  .cart-table tr,
  .cart-table td{
    display:block;
    width:100%;
  }

  .cart-table tr{
    margin-bottom:12px;
    border-radius:14px;
    background:#fff;
    padding:10px;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
  }

  .cart-table td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:6px 4px;
    font-size:12px;
    border:none;
  }

  .cart-table td::before{
    content:attr(data-label);
    font-weight:600;
    color:#444;
  }

  .cart-product{
    flex-direction:column;
    align-items:flex-start;
  }

  .cart-product img{
    width:70px;
    height:70px;
    margin-bottom:6px;
  }

  .cart-footer{
    flex-direction:column;
    gap:10px;
  }

  .cart-total{
    font-size:18px;
  }

  .cart-checkout{
    width:100%;
    text-align:center;
  }
}











/* ================= CUSTOMER REVIEWS ================= */

.reviews{
  max-width:1200px;
  margin:80px auto;
  padding:0 20px;
  text-align:center;
}

.reviews h2{
  font-size:30px;
  font-weight:700;
  margin-bottom:10px;
  color:#222;
}

/* LINE */
.reviews .line{
  width:80px;
  height:3px;
  background:#2e7d32;
  margin:14px auto 40px;
  border-radius:2px;
}

/* WRAP */
.reviews-wrap{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:40px;
  align-items:center;
}

/* SUMMARY */
.review-summary{
  background:#f6faf6;
  padding:35px 28px;
  border-radius:20px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
}

.review-summary h3{
  font-size:26px;
  margin-bottom:10px;
  color:#2e7d32;
}

.review-summary .stars{
  font-size:26px;
  color:#f4b400;
  margin-bottom:8px;
}

.review-summary p{
  font-size:14px;
  color:#555;
  margin-bottom:18px;
}

.google-logo img{
  width:90px;
}

/* SLIDER */
.review-slider{
  display:flex;
  gap:22px;
  overflow:hidden;
}

/* CARD */
.review-card{
  background:#fff;
  border-radius:18px;
  padding:22px;
  min-width:280px;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  text-align:left;
  transition:.3s;
}

.review-card:hover{
  transform:translateY(-5px);
}

/* HEADER */
.review-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}

.avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  background:#2e7d32;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:15px;
}

.avatar.purple{ background:#7c3aed; }

.review-header h4{
  font-size:14px;
  margin-bottom:2px;
}

.review-header span{
  font-size:12px;
  color:#777;
}

/* STARS */
.review-card .stars.small{
  font-size:15px;
  color:#f4b400;
  margin-bottom:6px;
}

/* TEXT */
.review-card p{
  font-size:13px;
  color:#555;
  line-height:1.6;
}

/* BUTTON */
.review-btn{
  margin-top:30px;
  background:#2e7d32;
  color:#fff;
  border:none;
  padding:11px 28px;
  border-radius:30px;
  font-size:14px;
  cursor:pointer;
  transition:.3s;
}

.review-btn:hover{
  background:#256628;
}

/* ================= MOBILE RESPONSIVE ================= */

@media(max-width:900px){
  .reviews-wrap{
    grid-template-columns:1fr;
  }

  .review-slider{
    justify-content:center;
    flex-wrap:wrap;
  }
}

/* ===== MOBILE : 1 ROW SLIDER + COMPACT CARDS ===== */

@media(max-width:600px){

  .reviews{
    margin:50px auto;
    padding:0 12px;
  }

  .reviews h2{
    font-size:20px;
  }

  .reviews .line{
    margin-bottom:26px;
  }

  .review-summary{
    padding:20px 16px;
  }

  .review-summary h3{
    font-size:18px;
  }

  .review-summary .stars{
    font-size:18px;
  }

  .review-summary p{
    font-size:12px;
  }

  /* 🔥 ONE ROW SCROLL */
  .review-slider{
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:12px;
    padding-bottom:10px;
    scroll-snap-type:x mandatory;
  }

  .review-slider::-webkit-scrollbar{
    display:none;
  }

  .review-card{
    min-width:220px;
    padding:14px;
    border-radius:14px;
    scroll-snap-align:start;
  }

  .avatar{
    width:34px;
    height:34px;
    font-size:12px;
  }

  .review-header h4{
    font-size:12px;
  }

  .review-header span{
    font-size:10px;
  }

  .review-card .stars.small{
    font-size:12px;
  }

  .review-card p{
    font-size:11px;
    line-height:1.45;
  }

  .review-btn{
    padding:8px 20px;
    font-size:12px;
  }

}


/* ================= ABOUT PAGE ================= */

.about-page{
  max-width:1200px;
  margin:60px auto;
  padding:0 20px;
}

/* HERO */
.about-hero{
  text-align:center;
  padding:70px 20px;
  background:#f6faf6;
  border-radius:24px;
  margin-bottom:60px;
}

.about-hero h1{
  font-size:40px;
  font-weight:700;
  color:#2e7d32;
  margin-bottom:12px;
}

.about-hero p{
  font-size:17px;
  color:#555;
  max-width:650px;
  margin:0 auto;
  line-height:1.6;
}

/* COMMON SECTION */
.about-section{
  margin-bottom:0px;
}

/* ================= TEXT + IMAGE SAME LINE ================= */
/* IMPORTANT: GRID hata ke FLEX use kar rahe hain */

.about-section.grid-2{
  display:flex;
  align-items:flex-start;        /* text aur logo same top line */
  justify-content:space-between;
  gap:80px;
}


.about-section p{
  max-width:420px;
  line-height:1.9;
}

/* RIGHT IMAGE BLOCK */
.about-image{
  flex-shrink:0;
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;        /* logo upar hi rahe */
}

.about-image img{
  width:100%;
  max-width:100%;
  margin-top:0px;
  border-radius:22px;
  
}


/* GRID-3 (VALUES) */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}
/* LIST */
.about-list{
  list-style:none;
  padding:0;
}

.about-list li{
  font-size:15px;
  margin-bottom:18px;
  color:#333;
}

/* HIGHLIGHT / MISSION */
.about-section.highlight{
  background:#2e7d32;
  color:#fff;
  padding:60px 40px;
  border-radius:26px;
  text-align:center;
}

.about-section.highlight h2{
  color:#fff;
}

.about-section.highlight p{
  color:#e9f5ec;
  font-size:17px;
  max-width:800px;
  margin:0 auto;
}



/* VALUES */
.value-box{
  background:#fff;
  padding:30px 22px;
  border-radius:22px;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  text-align:center;
  transition:.3s;
}

.value-box h4{
  font-size:18px;
  margin-bottom:8px;
}

.value-box p{
  font-size:14px;
  color:#555;
  line-height:1.6;
}

.value-box:hover{
  transform:translateY(-6px);
}


.about-wrapper{
  max-width:1200px;
  margin:40px auto;
  padding:0 0px;
  display:flex;
  align-items:center;
  gap:60px;
}

/* LEFT TEXT */
.about-section{
  flex:1;
}

.about-section h2{
  font-size:36px;
  margin-bottom:18px;
}

.about-section p{
  font-size:16px;
  line-height:1.8;
  color:#444;
}

.why-title{
  margin-top:25px;
  font-size:22px;
}

.about-list{
  margin-top:12px;
  padding-left:0;
  list-style:none;
}

.about-list li{
  margin-bottom:8px;
  font-weight:500;
  font-size:15px;
}

/* ================= RESPONSIVE ================= */
@media(max-width:900px){
  .about-section.grid-2{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .about-section.grid-2 > div:first-child,
  .about-section h2,
  .about-section p{
    max-width:100%;
  }

  .about-image{
    justify-content:center;
    margin-top:30px;
  }
}


/* ================= CONTACT PAGE ================= */

.contact-section{
  padding:80px 20px;
  background:#f9fafb;
}

.contact-wrapper{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  background:#fff;
  padding:50px;
  border-radius:18px;
   box-shadow:0 20px 40px rgba(0,0,0,0.25);

}

/* LEFT */
.contact-info h1{
  font-size:36px;
  margin-bottom:5px;
}

.contact-info .subtitle{
  color:#666;
  margin-bottom:30px;
}

.info-box p{
  margin:10px 0;
  color:#333;
}

.map-box{
  margin-top:25px;
  border-radius:0px;
  overflow:hidden;
}

.map-box iframe{
  width:100%;
  height:520px;
  border:0;
}

/* RIGHT FORM */
.contact-form h2{
  margin-bottom:20px;
  font-size:28px;
}

.contact-form form{
  display:flex;
  flex-direction:column;
  gap:15px;
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:14px 16px;
  border:1px solid #ddd;
  border-radius:10px;
  font-size:14px;
  outline:none;
}

.contact-form input:focus,
.contact-form textarea:focus{
  border-color:#2e7d32;
}

.contact-form button{
  background:#2e7d32;
  color:#fff;
  padding:14px;
  border:none;
  border-radius:10px;
  font-size:16px;
  cursor:pointer;
  transition:.3s;
}

.contact-form button:hover{
  background:#256628;
}

/* RESPONSIVE */
@media(max-width:900px){
  .contact-wrapper{
    grid-template-columns:1fr;
    padding:30px;
  }

  .form-row{
    grid-template-columns:1fr;
  }
}





/* ================= CHECKOUT PAGE ================= */

.checkout-page{
  max-width:1200px;
  margin:50px auto;
  padding:0 20px;
}

.checkout-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:30px;
}

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

/* ===== COMMON CARD ===== */
.checkout-card{
  background:#fff;
  border-radius:18px;
  padding:30px;
  box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.checkout-card h3{
  margin:0 0 22px;
  font-size:20px;
  font-weight:600;
}

/* ===== FORM ===== */
.checkout-form input,
.checkout-form textarea{
  width:100%;
  padding:14px 0px;
  border-radius:12px;
  border:1px solid #ddd;
  font-size:14px;
  margin-bottom:14px;
}

.checkout-form textarea{
  min-height:90px;
  resize:none;
}

.checkout-form input:focus,
.checkout-form textarea:focus{
  outline:none;
  border-color:#2e7d32;
}

/* ===== PAYMENT ===== */
.payment-box{
  margin:20px 0;
}

.payment-option{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border:1px solid #ddd;
  border-radius:12px;
  margin-bottom:10px;
  cursor:pointer;
}

.payment-option input{
  accent-color:#2e7d32;
}

/* ===== PLACE ORDER BUTTON ===== */
.place-order-btn{
  width:100%;
  padding:16px;
  border:none;
  border-radius:30px;
  background:linear-gradient(135deg,#2e7d32,#1b5e20);
  color:#fff;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:.3s;
}

.place-order-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(46,125,50,.35);
}

/* ===== ORDER SUMMARY ===== */
.order-summary-item{
  display:flex;
  justify-content:space-between;
  margin-bottom:12px;
  font-size:14px;
}

.order-total{
  margin-top:20px;
  padding-top:15px;
  border-top:1px dashed #ccc;
  font-size:18px;
  font-weight:600;
}









/* ================= USER LOGIN / REGISTER ================= */

.auth-page{
  min-height:calc(100vh - 200px); /* header + footer adjust */
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f4f6f9;
  padding:60px 20px;
}

.auth-form{
  width:100%;
  max-width:380px;
  background:#ffffff;
  padding:30px;
  border-radius:12px;
  box-shadow:0 15px 40px rgba(0,0,0,0.12);
}

.auth-page h2{
  text-align:center;
  margin-bottom:20px;
  color:#1f2937;
}

/* INPUTS */
.auth-form input{
  width:100%;
  padding:12px 14px;
  margin-bottom:15px;
  border-radius:8px;
  border:1px solid #ddd;
  font-size:14px;
}

/* BUTTON */
.auth-form button{
  width:100%;
  padding:12px;
  background:#1f2937;
  color:#fff;
  border:none;
  border-radius:8px;
  font-size:15px;
  cursor:pointer;
}

.auth-form button:hover{
  background:#111827;
}

/* LINK */
.auth-link{
  text-align:center;
  margin-top:15px;
  font-size:14px;
}

.auth-link a{
  color:#1f2937;
  font-weight:600;
  text-decoration:none;
}
/* AUTH PAGE */
.auth-page{
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f5f7f9;
}

/* AUTH BOX */
.auth-box{
  background:#fff;
  padding:40px;
  border-radius:14px;
  width:100%;
  max-width:420px;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  text-align:center;
}

/* TITLE */
.auth-title{
  margin-bottom:25px;
  font-size:26px;
  font-weight:700;
}

/* FORM */
.auth-form input{
  width:100%;
  padding:14px;
  margin-bottom:14px;
  border-radius:8px;
  border:1px solid #ddd;
  font-size:15px;
}

.auth-form button{
  width:100%;
  padding:14px;
  border:none;
  border-radius:8px;
  background:#1f2937;
  color:#fff;
  font-size:16px;
  cursor:pointer;
}

.auth-form button:hover{
  background:#111827;
}

/* LINK */
.auth-link{
  margin-top:15px;
  font-size:14px;
}

.auth-link a{
  color:#2e7d32;
  font-weight:600;
  text-decoration:none;
}
/* ORDER TIMELINE */
.order-timeline{
  display:flex;
  justify-content:space-between;
  margin:30px 0;
  position:relative;
}

.order-timeline::before{
  content:'';
  position:absolute;
  top:18px;
  left:0;
  right:0;
  height:3px;
  background:#ddd;
  z-index:0;
}

.timeline-step{
  text-align:center;
  position:relative;
  z-index:1;
  flex:1;
}

.timeline-step .dot{
  width:16px;
  height:16px;
  background:#ddd;
  border-radius:50%;
  display:inline-block;
  margin-bottom:8px;
}

.timeline-step p{
  font-size:13px;
  margin:0;
}

/* COMPLETED */
.timeline-step.done .dot{
  background:#2e7d32;
}

/* CURRENT */
.timeline-step.active .dot{
  background:#ff9800;
  box-shadow:0 0 0 6px rgba(255,152,0,.2);
}

.timeline-step.done p,
.timeline-step.active p{
  font-weight:600;
}
/* ==== CART GLASS BOX + ANIMATION ==== */
.cart-wrap{
  position:relative;
  background:rgba(255,255,255,0.9) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius:22px;
  padding:30px;
  overflow:hidden;
}

/* animated background */
.cart-wrap::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(46,125,50,.15), transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(255,152,0,.18), transparent 45%);
  animation: floatSpices 10s linear infinite;
  z-index:0;
}

/* keep content above animation */
.cart-wrap > *{
  position:relative;
  z-index:2;
}

@keyframes floatSpices{
  0%{background-position:0 0, 100% 100%}
  100%{background-position:100% 100%, 0 0}
}

/* ===== SVG ICON SYSTEM ===== */

.icon{
  width:20px;
  height:40px;
  stroke:#333;
  stroke-width:2;
  fill:none;
  transition:all .25s ease;
}

/* icon box */
/* hover color */
.icon-box:hover .icon,
.cart-icon:hover .icon{
  stroke:#014415;
}

/* active / brand color */
.icon-box.active .icon{
  stroke:#2e7d32;
}






/* ===== BEST SELLER CENTER ALIGN FIX ===== */

.products.best-seller .grid{
  max-width:1200px;        /* page ke center ka control */
  margin:0 auto;          /* 🔥 center align */
  justify-content:center; /* safety */
}






/* ===== RELATED PRODUCTS : 5 PER ROW ===== */
.products.related-products .grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:24px;
}

/* responsive */
@media(max-width:1200px){
  .products.related-products .grid{
    grid-template-columns:repeat(4,1fr);
  }
}
@media(max-width:992px){
  .products.related-products .grid{
    grid-template-columns:repeat(3,1fr);
  }
}
@media(max-width:768px){
  .products.related-products .grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:480px){
  .products.related-products .grid{
    grid-template-columns:1fr;
  }
}

/* ================= FOOTER ================= */

.footer{
  position: relative;
  margin-top: 60px;
  padding-top: 40px;
  background: transparent;
  overflow: hidden;
  font-size:14px;
  color:#000;
}

/* BACKGROUND IMAGE */
.footer::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("images/footer-bg.png") center -60px / cover no-repeat;
  opacity:1;
  z-index:0;
  background-position: center -100px; /* 🔼 minus value = image upar */
}
/* content upar rahe */
.footer > *{
  position:relative;
  z-index:1;
}

/* 🔥 LOGO CENTER, ALAG */
.footer-logo-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:160px;
}

.footer-main-logo{
  height:90px;
}

/* 🔥 ONE ROW TEXT */
.footer-top{
  max-width:1200px;
  margin:auto;
  padding:40px;
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:80px;
  position: relative;
  top: -160px;  
}
.footer-text{
  font-size:14px;
  line-height:1.8;
}

/* HEADINGS */
.footer-col h4{
  font-size:16px;
  margin-bottom:16px;
  font-weight:600;
}

/* LINKS */
.footer-col ul{
  list-style:none;
}
.footer-col ul li{
  margin-bottom:10px;
  font-size:14px;
  cursor:pointer;
}

/* COPYRIGHT */
.footer-bottom{
  background:#000000;
  color:#fff;
  text-align:center;
  padding:14px;
  font-size:13px;
}

/* RESPONSIVE */
@media(max-width:900px){
  .footer-top{
    grid-template-columns:1fr 1fr;
    text-align:center;
  }
}
@media(max-width:600px){
  .footer-top{
    grid-template-columns:1fr;
  }
}
  

/* ================= FOOTER (GLOBAL FIX) ================= */

.footer{
  position: relative;

  overflow: hidden;
  font-size: 14px;
  color: #000;
}

/* BACKGROUND IMAGE */
.footer::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("images/footer-bg.png") center bottom / cover no-repeat;
  opacity:80%;
  z-index:0;
}

/* CONTENT ABOVE IMAGE */
.footer > *{
  position:relative;
  z-index:1;
}

/* FOOTER TOP */
.footer-top{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:40px;
}

/* ABOUT */
.footer-about{
  max-width:320px;
}

.footer-logo{
  height:90px;
  margin-bottom:14px;
}

.footer-text{
  line-height:1.7;
  color:#000;
}

/* TITLES */
.footer-col h4{
  font-size:16px;
  margin-bottom:16px;
  font-weight:600;
}

/* LINKS */
.footer-col ul{
  list-style:none;
}

.footer-col ul li{
  margin-bottom:10px;
  cursor:pointer;
}

.footer-col ul li:hover{
  text-decoration:underline;
}

/* CONTACT */
.footer-col p{
  margin-bottom:10px;
}



/* ================= RESPONSIVE ================= */

@media(max-width:900px){
  .footer-top{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:600px){
  .footer-top{
    grid-template-columns:1fr;
    text-align:center;
  }

  
}

/* ================= LEAVES BACKGROUND ANIMATION ================= */

/* FULL SCREEN – BUT BACKGROUND */
#leaves-layer{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;

  z-index: 0;            /* 👈 BACKGROUND */
}

/* SINGLE LEAF */
.leaf{
  position: absolute;
  top: -50px;
  width: 30px;
  height: 30px;
  background-image: url("images/leaf.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.9;

  animation-name: fallLeaf;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* FALL ANIMATION (UNCHANGED) */
@keyframes fallLeaf{
  0%{
    transform: translateY(0) rotate(0deg);
  }
  100%{
    transform: translateY(110vh) rotate(360deg);
  }
}






/* ================= ROOT ================= */
:root{
  --green:#2e7d32;
  --green-soft:#e8f5e9;
  --dark:#1a1a1a;
  --text:#333;
  --shadow-soft:0 6px 16px rgba(0,0,0,.08);
  --shadow-hover:0 10px 24px rgba(0,0,0,.12);
}

/* ================= LAYOUT ================= */
.page{
  max-width:1200px;
  margin:60px auto;
  padding:0 24px;
}
.center{
  text-align:center;
  margin:40px 0 24px;
}





.profile-box{
  max-width:500px;
  margin:60px auto;
  padding:25px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 8px 25px rgba(0,0,0,0.08);
}

.profile-box h2{
  margin-bottom:20px;
}

.back-btn{
  display:inline-block;
  margin-top:15px;
  padding:10px 18px;
  background:#1f2937;
  color:#fff;
  border-radius:8px;
  text-decoration:none;
}
.orders-wrap{
  max-width:900px;
  margin:50px auto;
  padding:0 20px;
}

.orders-wrap h2{
  margin-bottom:25px;
  font-size:28px;
}

.empty{
  background:#fff3cd;
  padding:15px;
  border-radius:10px;
}

.order-card{
  background:#fff;
  border-radius:14px;
  padding:20px;
  margin-bottom:18px;
  box-shadow:0 8px 25px rgba(0,0,0,0.06);
}

.order-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.order-head .date{
  display:block;
  font-size:13px;
  color:#777;
}

.badge{
  padding:6px 14px;
  border-radius:30px;
  font-size:13px;
  color:#fff;
}

/* ================= FULL PROFILE PAGE ================= */

.profile-wrapper{
  max-width:650px;
  margin:60px auto;
  padding:0 15px;
}

.profile-card{
  background:#fff;
  padding:30px;
  border-radius:18px;
  box-shadow:0 10px 35px rgba(0,0,0,.08);
}

.profile-card h2{
  font-size:30px;
  margin-bottom:10px;
}

.profile-form h3{
  margin:20px 0 12px;
}

.profile-form input,
.profile-form textarea{
  width:100%;
  padding:13px 14px;
  border:1px solid #ddd;
  border-radius:10px;
  margin-bottom:12px;
  font-size:14px;
}

.profile-form textarea{
  min-height:90px;
  resize:none;
}

.profile-form input:focus,
.profile-form textarea:focus{
  outline:none;
  border-color:#111;
}

/* Buttons */
.profile-form button{
  width:100%;
  padding:14px;
  border:none;
  border-radius:12px;
  background:#111;
  color:#fff;
  font-size:15px;
  cursor:pointer;
  transition:.3s;
}

.profile-form button:hover{
  background:#000;
}

/* Alerts */
.success{
  background:#e7f9ef;
  color:#1e8e3e;
  padding:12px 14px;
  border-radius:10px;
  margin-bottom:14px;
}

.error{
  background:#ffecec;
  color:#c62828;
  padding:12px 14px;
  border-radius:10px;
  margin-bottom:14px;
}

.back-btn{
  display:inline-block;
  margin-top:20px;
  text-decoration:none;
  font-size:14px;
  color:#666;
}

@media(max-width:600px){
  .profile-card{
    padding:22px;
  }
}



.badge.pending{ background:#ff9800; }
.badge.processing{ background:#2196f3; }
.badge.shipped{ background:#673ab7; }
.badge.delivered{ background:#4caf50; }
.badge.cancelled{ background:#f44336; }

.order-body{
  display:flex;
  gap:40px;
  margin-bottom:15px;
}

.order-actions{
  display:flex;
  gap:12px;
}

.btn{
  padding:8px 16px;
  border-radius:8px;
  text-decoration:none;
  font-size:14px;
}

.btn.view{
  background:#1f2937;
  color:#fff;
}

.btn.cancel{
  background:#ffecec;
  color:#c62828;
}

@media(max-width:600px){
  .order-body{
    flex-direction:column;
    gap:6px;
  }
}
.order-view-wrap{
  max-width:850px;
  margin:50px auto;
  background:#fff;
  padding:30px;
  border-radius:14px;
  box-shadow:0 8px 25px rgba(0,0,0,0.05);
}

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

.badge.pending{ background:#ff9800; }
.badge.processing{ background:#2196f3; }
.badge.shipped{ background:#673ab7; }
.badge.delivered{ background:#4caf50; }
.badge.cancelled{ background:#f44336; }

.order-info{
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  font-size:14px;
  margin-bottom:15px;
}

.item-row{
  display:flex;
  justify-content:space-between;
  padding:8px 0;
  border-bottom:1px solid #eee;
}

.btn{
  display:inline-block;
  padding:10px 18px;
  border-radius:8px;
  text-decoration:none;
  font-size:14px;
  margin-right:10px;
}

.btn.back{
  background:#1f2937;
  color:#fff;
}

.btn.cancel{
  background:#ffecec;
  color:#c62828;
}

@media(max-width:600px){
  .order-info{
    flex-direction:column;
    gap:6px;
  }
}




.mix-landscape{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px;
}

.mix-item{
  width:70px;
  text-align:center;
  font-size:12px;
  color:#444;
}

.mix-item img{
  width:42px;
  height:42px;
  object-fit:contain;
  display:block;
  margin:0 auto 4px;
}

.mix-item .gm{
  font-weight:600;
  color:#2e7d32;
}
.btn{
  padding:6px 12px;
  background:#1976d2;
  color:#fff;
  font-size:13px;
  text-decoration:none;
  border-radius:4px;
  margin-right:6px;
}

.btn.green{ background:#2e7d32; }
.btn.red{ background:#c62828; }


/* ================= 10% offer herbs spices ================= */


 .herbs-offer{
  background:url("images/herbs-banner.jpg") no-repeat center center;
  background-size:cover;
  padding:170px 0px;
  margin:80px 0;
   background-attachment:fixed;  

}

.herbs-content{
  max-width:650px;
  margin:auto;
  text-align:center;
}

.herbs-tag{
  font-family: 'Georgia', serif;
  font-size:20px;
  color:#f4b41a;
  display:block;
  margin-bottom:10px;
}

.herbs-content h2{
  font-size:42px;
  font-weight:700;
  color:#ffffff;
  margin-bottom:15px;
  line-height:1.25;
}

.herbs-content h2 b{
  color:#f4b41a;
}

.herbs-content p{
  font-size:15px;
  color:#777;
  max-width:520px;
  margin:0 auto 30px;
}

.herbs-buttons{
  display:flex;
  gap:15px;
  justify-content:center;
}

.btn-yellow{
  background:#f4b41a;
  color:#fff;
  padding:12px 26px;
  border-radius:25px;
  font-size:13px;
  text-decoration:none;
  font-weight:600;
}

.btn-brown{
  background:#8b4513;
  color:#fff;
  padding:12px 26px;
  border-radius:25px;
  font-size:13px;
  text-decoration:none;
  font-weight:600;
}




/* ================= PREMIUM DASHBOARD ================= */

.dash-wrapper{
  max-width:1200px;
  margin:60px auto;
  padding:0 16px;
}

.dash-header{
  margin-bottom:30px;
}

.dash-header h2{
  font-size:32px;
  font-weight:700;
  margin-bottom:6px;
}

.dash-header p{
  color:#666;
  font-size:15px;
}

/* Cards Grid */
.dash-cards.premium{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

/* Card UI */
.dash-card{
  background:linear-gradient(135deg,#ffffff,#fafafa);
  border-radius:18px;
  padding:26px 22px;
  text-decoration:none;
  color:#111;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  transition:.35s ease;
  position:relative;
  overflow:hidden;
}

/* Hover Effect */
.dash-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(0,0,0,.12);
}

/* Top Accent Line */
.dash-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,#ff6a00,#ee0979);
}

/* Icon */
.dash-card .icon{
  font-size:32px;
  margin-bottom:10px;
}

/* Title */
.dash-card h3{
  font-size:20px;
  margin-bottom:6px;
}

/* Description */
.dash-card p{
  font-size:14px;
  color:#555;
}

/* Different Accent Colors */
.dash-card.orders::before{
  background:linear-gradient(90deg,#2874f0,#00c6ff);
}

.dash-card.profile::before{
  background:linear-gradient(90deg,#00b09b,#96c93d);
}

.dash-card.logout::before{
  background:linear-gradient(90deg,#ff416c,#ff4b2b);
}

/* Mobile Responsive */
@media(max-width:991px){
  .dash-cards.premium{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .dash-cards.premium{
    grid-template-columns:1fr;
  }

  .dash-header h2{
    font-size:26px;
  }
}
.dash-card:hover .icon{
  transform:scale(1.1);
  transition:.3s;
}







/* ================= MY ORDERS PREMIUM ================= */

.orders-wrapper{
  max-width:900px;
  margin:60px auto;
  padding:0 15px;
}

.orders-wrapper h2{
  font-size:30px;
  margin-bottom:20px;
}

/* Empty Orders */
.empty-orders{
  text-align:center;
  background:#fff;
  padding:40px 20px;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.empty-orders a{
  display:inline-block;
  margin-top:12px;
  padding:10px 18px;
  border-radius:8px;
  background:#111;
  color:#fff;
  text-decoration:none;
}

/* Order Card */
.order-card{
  background:#fff;
  border-radius:16px;
  padding:22px;
  margin-bottom:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}

/* Header */
.order-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}

.order-head span{
  display:block;
  font-size:13px;
  color:#777;
}

.amount{
  font-size:20px;
  font-weight:700;
}

/* Status */
.order-body{
  display:flex;
  gap:10px;
  margin-bottom:16px;
}

/* Badges */
.badge{
  padding:6px 12px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
}

.badge.pending{ background:#fff3cd; color:#856404; }
.badge.processing{ background:#cce5ff; color:#004085; }
.badge.shipped{ background:#d4edda; color:#155724; }
.badge.delivered{ background:#d1f5e0; color:#0f5132; }
.badge.cancelled{ background:#f8d7da; color:#721c24; }

.badge.pay.paid{ background:#e6fffa; color:#00695c; }
.badge.pay.pending{ background:#fff3cd; color:#856404; }

/* Buttons */
.order-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn-view{
  padding:10px 16px;
  border-radius:8px;
  background:#111;
  color:#fff;
  text-decoration:none;
  font-size:13px;
}

.btn-cancel{
  padding:10px 16px;
  border-radius:8px;
  background:#ffecec;
  color:#c62828;
  text-decoration:none;
  font-size:13px;
  border:1px solid #f5c6cb;
}

.btn-cancel:hover{
  background:#ffdede;
}

/* Responsive */
@media(max-width:600px){
  .order-head{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
}










.hero-masala{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
  padding:80px 8%;
}

.hero-left{
  width:45%;
}

.hero-left h1{
  font-size:44px;
  line-height:1.2;
  margin-bottom:15px;
}

.hero-left p{
  font-size:16px;
  margin-bottom:22px;
}

.hero-btn{
  display:inline-block;
  padding:14px 26px;
  background:#2e7d32;
  color:#fff;
  border-radius:30px;
  font-weight:600;
  text-decoration:none;
}

.hero-right{
  width:420px;
  height:420px;
  position:relative;
}

.main-product{
  width:340px;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  transition:.8s ease;
}

.orbit{
  width:100%;
  height:100%;
  position:absolute;
  border-radius:50%;
  animation:spin 26s linear infinite;
}

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



/* ================= LEGAL / STATIC PAGES ================= */

.legal-page{
  padding:60px 15px;
  background:#f9faf9;
}

.legal-page .container{
  max-width:900px;
  margin:auto;
  background:#fff;
  padding:40px;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.legal-page h1{
  font-size:32px;
  margin-bottom:10px;
  color:#000;
}

.legal-page h2{
  margin-top:25px;
  font-size:20px;
  color:#000;
}

.legal-page p,
.legal-page li{
  line-height:1.8;
  color:#444;
  font-size:15px;
}

.static-page{
  max-width:1200px;
  margin:50px auto;
  padding:0 15px;
}

.static-page h1{
  font-size:32px;
  margin-bottom:15px;
  color:#000;
}

.static-page h3{
  margin-top:25px;
  font-size:20px;
  color:#000;
}

.static-page p,
.static-page li{
  font-size:15px;
  line-height:1.7;
  color:#444;
}

.static-box{
  background:#f8f8f8;
  padding:15px 20px;
  border-left:5px solid #2e7d32;
  margin:15px 0;
  border-radius:6px;
}


/* ================= HEADER MENU FIX ================= */

/* Default menu color → BLACK */
.header nav a,
.header nav a:visited,
.header nav a:active{
  color:#000 !important;
  text-decoration:none !important;
  font-weight:500;
}

/* Hover color */
.header nav a:hover{
  color:#2e7d32 !important;
  text-decoration:none !important;
}

/* Active menu */
.header nav a.active{
  color:#2e7d32 !important;
  text-decoration:none !important;
}

/* Remove default underline */
.header nav a{
  text-decoration:none !important;
  position:relative;
}

/* Premium underline animation */
.header nav a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:2px;
  background:#2e7d32;
  transition:.3s ease;
}

/* Hover underline */
.header nav a:hover::after{
  width:100%;
}

/* Remove ugly blue link color */
a{
  color:inherit;
  text-decoration:none;
}