/* ===================== N-ECO FRIENDLY JUTE BAGS ===================== */

:root{
  --dark-green: #16342a;
  --deep-green: #1c4232;
  --mid-green: #2c5c46;
  --accent-green: #3a7a5a;
  --cream: #f6f1e7;
  --cream-2: #efe8d8;
  --paper: #fffdf8;
  --text-dark: #1f2b24;
  --text-muted: #5c6b62;
  --border-soft: #e2dbc8;
  --white: #ffffff;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(22,52,42,0.08);
  --container: 1240px;
}

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

html{scroll-behavior:smooth;}

body{
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  color: var(--text-dark);
  background: var(--cream);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}

a{text-decoration:none;color:inherit;}
ul{list-style:none;}

.container{
  max-width: var(--container);
  margin:0 auto;
  padding:0 24px;
}

.eyebrow{
  display:inline-block;
  font-size:12px;
  letter-spacing:2px;
  font-weight:600;
  color: var(--accent-green);
  text-transform:uppercase;
  margin-bottom:8px;
}

.section-title{
  font-size:clamp(24px,3vw,34px);
  font-weight:700;
  color: var(--dark-green);
  margin-bottom:10px;
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:34px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 26px;
  border-radius:6px;
  font-weight:600;
  font-size:14px;
  letter-spacing:.3px;
  cursor:pointer;
  border:1.5px solid transparent;
  transition: all .25s ease;
  white-space:nowrap;
}

.btn-primary{
  background: var(--dark-green);
  color:#fff;
}
.btn-primary:hover{ background: var(--mid-green); transform: translateY(-2px); }

.btn-outline{
  background:transparent;
  border-color: var(--dark-green);
  color: var(--dark-green);
}
.btn-outline:hover{ background: var(--dark-green); color:#fff; }

.btn-light{
  background:#fff;
  color: var(--dark-green);
}
.btn-light:hover{ background: var(--cream-2); }

.link-arrow{
  font-weight:600;
  font-size:14px;
  color: var(--dark-green);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.link-arrow svg{ transition: transform .2s ease; }
.link-arrow:hover svg{ transform: translateX(4px); }

/* ---------- TOP BAR ---------- */
.topbar{
  background: var(--dark-green);
  color: #cfe0d5;
  font-size:12.5px;
}
.topbar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 24px;
  flex-wrap:wrap;
  gap:8px;
}
.topbar-left{ display:flex; gap:22px; flex-wrap:wrap; }
.topbar-left span::before{ content:"• "; color:#5b8a71; margin-right:2px; }
.topbar-left span:first-child::before{ content:""; }
.topbar-right{ display:flex; gap:20px; align-items:center; }
.topbar-right a{ display:flex; align-items:center; gap:6px; }

/* ---------- MAIN NAV ---------- */
.navbar{
  background:#fff;
  border-bottom:1px solid var(--border-soft);
  position:sticky; top:0; z-index:100;
}
.navbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 24px;
  gap:20px;
}
.logo{ display:flex; align-items:center; gap:12px; }
.logo-img{
  height:52px; width:auto; border-radius:8px; display:block;
}
.logo-icon{
  width:46px;height:46px;
  background: var(--dark-green);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.logo-text .l1{
  font-weight:700; font-size:16.5px; color:var(--dark-green); letter-spacing:.2px; line-height:1.15;
}
.logo-text .l2{
  font-size:10.5px; color:var(--text-muted); letter-spacing:.3px;
}
.nav-links{
  display:flex; gap:30px; font-size:14.5px; font-weight:500; color:#33443b;
}
.nav-links a{ position:relative; padding:6px 0; }
.nav-links a.active{ color: var(--dark-green); font-weight:600; }
.nav-links a.active::after{
  content:""; position:absolute; left:0; bottom:-3px; width:100%; height:2px; background:var(--dark-green);
}
.nav-links a:hover{ color: var(--dark-green); }

/* ---------- MOBILE MENU BUTTON ---------- */
.mobile-menu-btn{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:40px; height:40px;
  border:1px solid var(--border-soft);
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  flex-shrink:0;
}
.mobile-menu-btn span{
  display:block; width:18px; height:2px; background:var(--dark-green);
  transition: transform .25s ease, opacity .25s ease;
}
.mobile-menu-btn.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn.open span:nth-child(2){ opacity:0; }
.mobile-menu-btn.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- HERO ---------- */
.hero{
  background: linear-gradient(180deg,#f2ede0 0%, var(--cream) 100%);
  overflow:hidden;
  position:relative;
}
.hero.hero-bg{
  background:
    linear-gradient(90deg, rgba(15,36,28,.88) 0%, rgba(15,36,28,.68) 45%, rgba(15,36,28,.35) 100%),
    url('../images/homeHero.jpg');
  background-size: cover;
  background-position: center;
}
.hero .container{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:center;
  gap:40px;
  padding:70px 24px 40px;
}
.hero .container.hero-single{
  display:block;
  padding:110px 24px;
  min-height:520px;
}
.hero-bg .hero-copy h1{ color:#fff; }
.hero-bg .hero-copy p{ color:#e4ece6; }
.hero-bg .hero-feats div{ color:#fff; }
.hero-bg .hero-feats .ic{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); }
.hero-bg .hero-outline{ border-color:#fff; color:#fff; }
.hero-bg .hero-outline:hover{ background:#fff; color: var(--dark-green); }
.hero-copy h1{
  font-size:clamp(32px,4.2vw,48px);
  font-weight:700;
  color: var(--dark-green);
  line-height:1.15;
  margin-bottom:18px;
}
.hero-copy p{
  color: var(--text-muted);
  font-size:16px;
  max-width:460px;
  margin-bottom:28px;
}
.hero-ctas{ display:flex; gap:16px; margin-bottom:36px; flex-wrap:wrap; }
.hero-feats{
  display:flex; gap:30px; flex-wrap:wrap;
}
.hero-feats div{
  display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:500; color: var(--text-dark);
}
.hero-feats .ic{
  width:34px;height:34px;border-radius:50%;
  background:#fff;border:1px solid var(--border-soft);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.hero-visual{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.hero-visual img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- STATS STRIP ---------- */
.stats-strip{
  background: var(--dark-green);
  color:#fff;
}
.stats-strip .container{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:34px 24px;
}
.stat-item{
  text-align:center;
  border-right:1px solid rgba(255,255,255,.12);
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.stat-item:last-child{ border-right:none; }
.stat-item .num{ font-size:28px; font-weight:700; display:flex; align-items:center; gap:8px;}
.stat-item .lbl{ font-size:12.5px; color:#bfd4c6; letter-spacing:.3px; }

/* ---------- SECTION SPACING ---------- */
.section{ padding:70px 0; }
.section.alt{ background: var(--paper); }

/* ---------- COLLECTION CARDS ---------- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.card-grid.cols-10{
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.cat-card{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.cat-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); }
.cat-thumb{
  height:230px;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg,#efe7d3,#e4dcc4);
}
.cat-badge{
  position:absolute; top:14px; left:14px;
  width:30px;height:30px;border-radius:50%;
  background: var(--dark-green); color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px; font-weight:700;
}
.cat-thumb-img{
  background:#fff;
  padding:0;
}
.cat-thumb-img img,
.cat-thumb-img video{
  width:100%; height:100%; object-fit:cover; object-position:center;
}
.cat-body h3{ font-size:18px; color:var(--dark-green); margin-bottom:8px; font-weight:600; }
.cat-price{ font-size:15px; font-weight:700; color:var(--accent-green); margin-bottom:8px; }
.cat-body p{ font-size:13.5px; color:var(--text-muted); margin-bottom:14px; }
.cat-body ul{ margin-bottom:16px; }
.cat-body ul li{
  font-size:13px; color:var(--text-dark); margin-bottom:6px;
  display:flex; align-items:center; gap:8px;
}
.cat-body ul li::before{
  content:"✓"; color: var(--accent-green); font-weight:700; font-size:12px;
}

/* ---------- VIDEOS ---------- */
.video-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.video-card .thumb{
  height:150px; border-radius:10px; overflow:hidden;
  position:relative;
  background: linear-gradient(135deg,#2b4438,#16342a);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.thumb-poster{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.thumb-video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.play-btn{
  width:46px;height:46px;border-radius:50%;
  background: rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;
  position:relative; z-index:2;
}
.duration{
  position:absolute; bottom:8px; right:10px;
  background:rgba(0,0,0,.55); color:#fff; font-size:11px;
  padding:2px 7px; border-radius:4px;
  z-index:2;
}
.video-card h4{ font-size:14.5px; margin:12px 0 4px; color:var(--dark-green); font-weight:600; }
.video-card p{ font-size:12.5px; color:var(--text-muted); }

/* ---------- CERT / MEMBER ---------- */
.two-col{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:50px;
}
.mini-head{
  font-size:12px; letter-spacing:1.5px; font-weight:700; color:var(--accent-green);
  text-transform:uppercase; margin-bottom:16px;
}
.badge-row{ display:flex; gap:16px; flex-wrap:wrap; }
.cert-badge{
  width:96px;
  text-align:center;
}
.cert-box{
  width:96px;height:70px;border:1px solid var(--border-soft);
  border-radius:8px; background:#fff;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:8px;
}
.cert-badge span{ font-size:10.5px; color:var(--text-muted); font-weight:500; }
.member-row{ display:flex; gap:16px; flex-wrap:wrap; }
.member-box{
  width:96px;height:70px;border:1px solid var(--border-soft);
  border-radius:8px; background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:10px; font-weight:700; color:var(--dark-green); text-align:center; padding:6px;
}
.view-all{ margin-top:16px; display:inline-block; }

/* ---------- ACHIEVEMENTS ---------- */
.ach-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px;
}
.ach-item{
  background:#fff; border:1px solid var(--border-soft); border-radius:10px;
  padding:24px 10px; text-align:center;
}
.ach-item .ic{ margin-bottom:10px; display:flex; justify-content:center; }
.ach-item .num{ font-size:22px; font-weight:700; color:var(--dark-green); }
.ach-item .lbl{ font-size:11.5px; color:var(--text-muted); margin-top:4px; }

/* ---------- WHY + PROCESS ---------- */
.why-process{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}
.why-box{
  background: var(--dark-green);
  color:#fff;
  border-radius: var(--radius);
  padding:34px;
}
.why-box h3{ font-size:12.5px; letter-spacing:1.5px; margin-bottom:22px; color:#a9d0b8; }
.why-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 20px;
}
.why-list li{
  font-size:13.5px; display:flex; gap:10px; align-items:flex-start; line-height:1.4;
}
.why-list li::before{ content:"✓"; color:#8fd6ac; font-weight:700; }

.process-box h3{ font-size:12.5px; letter-spacing:1.5px; margin-bottom:22px; color:var(--accent-green); text-align:center;}
.process-steps{
  display:flex; justify-content:space-between; position:relative;
}
.process-steps::before{
  content:""; position:absolute; top:26px; left:6%; right:6%; height:1px; background:var(--border-soft); z-index:0;
}
.pstep{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; position:relative; z-index:1; flex:1;
}
.pstep .circle{
  width:52px;height:52px;border-radius:50%;
  background:#fff; border:1.5px solid var(--border-soft);
  display:flex;align-items:center;justify-content:center;
  font-weight:700; color:var(--dark-green);
}
.pstep span{ font-size:11.5px; color:var(--text-muted); max-width:80px; }

/* ---------- CONTACT ---------- */
.contact-grid{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr 1fr;
  gap:30px;
}
.contact-card h4{ font-size:14px; text-transform:uppercase; letter-spacing:1px; color:var(--accent-green); margin-bottom:18px; }
.contact-row{
  display:flex; gap:14px; margin-bottom:18px; align-items:flex-start;
}
.contact-row .ic{
  width:38px;height:38px;border-radius:50%; background:var(--cream-2);
  display:flex;align-items:center;justify-content:center; flex-shrink:0;
}
.contact-row div p{ font-size:13.5px; color:var(--text-dark); }
.contact-row div .lbl{ font-size:11.5px; color:var(--text-muted); margin-bottom:2px; }

.form-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.form-grid input, .form-grid textarea{
  width:100%; padding:12px 14px; border:1px solid var(--border-soft); border-radius:6px;
  font-family:inherit; font-size:13.5px; background:#fff;
}
.form-grid textarea{ grid-column:1/-1; resize:vertical; min-height:90px; }
.form-grid .full{ grid-column:1/-1; }
.form-grid button{ grid-column:1/-1; }

.map-box{
  height:100%; min-height:260px; border-radius:10px; overflow:hidden; border:1px solid var(--border-soft);
  background: repeating-linear-gradient(45deg,#eef1ea,#eef1ea 10px,#e6ebe1 10px,#e6ebe1 20px);
  position:relative;
}
.map-pin{
  position:absolute; top:44%; left:48%; width:22px;height:22px; background:#c0392b; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  border:2px solid #fff;
}

/* ---------- CTA BANNER ---------- */
.cta-banner{
  background: var(--dark-green); color:#fff;
}
.cta-banner .container{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:44px 24px; flex-wrap:wrap;
}
.cta-banner h2{ font-size:26px; margin-bottom:6px; }
.cta-banner p{ color:#bfd4c6; font-size:14px; }
.cta-btns{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- FOOTER ---------- */
.footer{ background: var(--dark-green); color:#c7dacd; }
.footer-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr; gap:30px;
  padding:60px 24px 40px;
}
.footer h5{ color:#fff; font-size:14px; margin-bottom:18px; letter-spacing:.3px; }
.footer ul li{ margin-bottom:10px; font-size:13.5px; }
.footer ul li a:hover{ color:#fff; }
.footer-logo{ display:flex; gap:10px; align-items:center; margin-bottom:14px; }
.footer-logo-img{ height:44px; width:auto; border-radius:8px; display:block; }
.footer p.desc{ font-size:13px; color:#a9c2b1; margin-bottom:16px; max-width:230px; }
.social-row{ display:flex; gap:10px; }
.social-row a{
  width:32px;height:32px;border-radius:50%; border:1px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center; font-size:12px;
}
.newsletter{ display:flex; margin-top:8px; }
.newsletter input{
  flex:1; padding:11px 12px; border:1px solid rgba(255,255,255,.25); background:transparent; color:#fff; font-size:13px;
  border-radius:6px 0 0 6px;
}
.newsletter button{
  background:var(--accent-green); border:none; color:#fff; padding:0 16px; border-radius:0 6px 6px 0; cursor:pointer;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding:18px 24px; font-size:12px; color:#9fb8a8;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.footer-indiamart{ display:flex; align-items:center; }
.footer-indiamart img{ height:34px; width:auto; display:block; border-radius:4px; transition:transform .2s ease; }
.footer-indiamart:hover img{ transform:scale(1.06); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px){
  .hero .container{ grid-template-columns:1fr; }
  .hero .container.hero-single{ padding:80px 24px; min-height:auto; }
  .card-grid{ grid-template-columns:1fr 1fr; }
  .video-grid{ grid-template-columns:1fr 1fr; }
  .two-col{ grid-template-columns:1fr; }
  .ach-grid{ grid-template-columns:repeat(3,1fr); }
  .why-process{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }

  /* mobile nav */
  .navbar .container{ position:relative; flex-wrap:wrap; }
  .nav-links{
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    gap:2px;
    background:#fff;
    border:1px solid var(--border-soft);
    border-top:none;
    box-shadow: var(--shadow);
    padding:10px 24px 16px;
    z-index:200;
    max-height:calc(100vh - 100%);
    overflow-y:auto;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:12px 0; border-bottom:1px solid var(--border-soft); }
  .nav-links a:last-child{ border-bottom:none; }
  .nav-links a.active::after{ display:none; }
  .mobile-menu-btn{ display:flex; }
}
@media (max-width: 760px){
  .stat-item .num{ font-size:22px; }
  .form-grid{ grid-template-columns:1fr; }
  .why-list{ grid-template-columns:1fr; }
  .offer-grid, .whyus-grid, .cz-why-grid, .ct-why-grid{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width: 640px){
  .stats-strip .container{ grid-template-columns:1fr 1fr; row-gap:20px; }
  .stat-item{ border-right:none; }
  .card-grid{ grid-template-columns:1fr; }
  .video-grid{ grid-template-columns:1fr; }
  .ach-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr; }
  .topbar .container{ justify-content:center; text-align:center; }
  .topbar-left{ justify-content:center; }
  .section{ padding:48px 0; }
  .container{ padding:0 18px; }
  .logo-text .l1{ font-size:14.5px; }
  .logo-text .l2{ display:none; }
  .cta-banner .container{ text-align:center; justify-content:center; }
}
@media (max-width: 420px){
  .hero-copy h1{ font-size:26px; }
  .hero-ctas{ flex-direction:column; align-items:stretch; }
  .hero-ctas .btn{ justify-content:center; }
  .btn{ padding:12px 18px; font-size:13px; }
}

/* ===================== Dynamic product grid states ===================== */
.neco-grid-loading, .neco-grid-empty{
  grid-column: 1 / -1;
  text-align:center;
  padding:50px 20px;
  color: var(--text-muted);
  font-size:14.5px;
  background:#fff;
  border:1px dashed var(--border-soft);
  border-radius: var(--radius);
}