/* ===========================
   Manojava Export Pvt. Ltd.
   Custom Styles — v2 (Professional Redesign)
   =========================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Inter:wght@300;400;500;600;700&display=swap');

/* ---- Root Variables ---- */
:root {
  --choco-dark: #3B1F1A;
  --choco-mid: #8B5E3C;
  --choco-gold: #D4A373;
  --choco-cream: #FFF8F0;
  --choco-warm: #FFFDF9;
  --choco-light: #F5E6D3;
  --shadow-soft: 0 2px 20px rgba(59,31,26,0.08);
  --shadow-hover: 0 16px 48px rgba(59,31,26,0.18);
  --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ---- Base ---- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter',sans-serif;
  background-color:var(--choco-cream);
  color:var(--choco-dark);
  line-height:1.7;
  overflow-x:hidden;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:var(--choco-cream); }
::-webkit-scrollbar-thumb { background:var(--choco-gold); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--choco-mid); }

/* ---- Typography ---- */
h1,h2,h3,h4 { font-family:'Playfair Display',serif; }

/* ============================================================
   NAVBAR
   ============================================================ */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background-color:var(--choco-dark);
  transition:var(--transition);
  border-bottom:1px solid rgba(212,163,115,0.1);
}
#navbar.scrolled {
  box-shadow:0 4px 24px rgba(0,0,0,0.35);
  border-bottom-color:rgba(212,163,115,0.2);
}

.nav-link {
  position:relative;
  color:rgba(232,213,196,0.85);
  font-size:0.875rem; font-weight:500; letter-spacing:0.04em;
  padding:0.25rem 0;
  text-decoration:none;
  transition:color 0.2s;
  white-space:nowrap;
}
.nav-link::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:2px; background:var(--choco-gold);
  transform:scaleX(0); transition:transform 0.25s ease;
  border-radius:2px;
}
.nav-link:hover,.nav-link.active { color:var(--choco-gold); }
.nav-link:hover::after,.nav-link.active::after { transform:scaleX(1); }

/* Mobile menu */
#mobile-menu { max-height:0; overflow:hidden; transition:max-height 0.4s ease; }
#mobile-menu.open { max-height:600px; }

.mobile-nav-link {
  display:flex; align-items:center; gap:0.75rem;
  color:rgba(232,213,196,0.85);
  padding:0.85rem 1.5rem;
  font-size:0.9rem; font-weight:500;
  border-bottom:1px solid rgba(212,163,115,0.1);
  text-decoration:none;
  transition:background 0.2s, color 0.2s;
}
.mobile-nav-link:hover,.mobile-nav-link.active {
  background:rgba(212,163,115,0.1);
  color:var(--choco-gold);
}

/* Hamburger */
.hamburger { display:flex; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.hamburger span {
  display:block; width:24px; height:2px;
  background:var(--choco-gold); border-radius:2px;
  transition:var(--transition);
}
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  display:inline-flex; align-items:center; gap:0.5rem;
  background-color:var(--choco-gold); color:var(--choco-dark);
  font-weight:700; font-size:0.875rem; letter-spacing:0.05em;
  padding:0.8rem 1.75rem; border-radius:6px;
  border:2px solid var(--choco-gold); text-decoration:none;
  transition:var(--transition); cursor:pointer; white-space:nowrap;
  font-family:'Inter',sans-serif;
}
.btn-primary:hover {
  background-color:transparent; color:var(--choco-gold);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(212,163,115,0.35);
}

.btn-outline {
  display:inline-flex; align-items:center; gap:0.5rem;
  background-color:transparent; color:var(--choco-gold);
  font-weight:700; font-size:0.875rem; letter-spacing:0.05em;
  padding:0.8rem 1.75rem; border-radius:6px;
  border:2px solid var(--choco-gold); text-decoration:none;
  transition:var(--transition); cursor:pointer; white-space:nowrap;
  font-family:'Inter',sans-serif;
}
.btn-outline:hover {
  background-color:var(--choco-gold); color:var(--choco-dark);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(212,163,115,0.35);
}

.btn-dark {
  display:inline-flex; align-items:center; gap:0.5rem;
  background-color:var(--choco-dark); color:var(--choco-gold);
  font-weight:700; font-size:0.875rem; letter-spacing:0.05em;
  padding:0.8rem 1.75rem; border-radius:6px;
  border:2px solid var(--choco-dark); text-decoration:none;
  transition:var(--transition); cursor:pointer;
  font-family:'Inter',sans-serif;
}
.btn-dark:hover {
  background-color:transparent; color:var(--choco-dark);
  transform:translateY(-2px);
}

.btn-white {
  display:inline-flex; align-items:center; gap:0.5rem;
  background-color:white; color:var(--choco-dark);
  font-weight:700; font-size:0.875rem; letter-spacing:0.05em;
  padding:0.8rem 1.75rem; border-radius:6px;
  border:2px solid white; text-decoration:none;
  transition:var(--transition); cursor:pointer;
  font-family:'Inter',sans-serif;
}
.btn-white:hover {
  background-color:transparent; color:white;
  transform:translateY(-2px);
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
  position:relative; overflow:hidden;
  background-color:#1a0d0b;
  background-image:
    linear-gradient(135deg, rgba(26,13,11,0.94) 0%, rgba(59,31,26,0.88) 50%, rgba(46,24,20,0.92) 100%),
    url('https://images.unsplash.com/photo-1481391243133-f96216dcb5d2?auto=format&fit=crop&w=1920&q=80');
  background-size:cover; background-position:center;
}

/* PAGE HEADERS */
.page-header {
  background-color:var(--choco-dark);
  background-image:
    linear-gradient(135deg, rgba(26,13,11,0.95) 0%, rgba(59,31,26,0.90) 100%),
    url('https://images.unsplash.com/photo-1606312619070-d48b4c652a52?auto=format&fit=crop&w=1920&q=80');
  background-size:cover; background-position:center;
  padding:7rem 0 4.5rem; position:relative; overflow:hidden;
}
.page-header::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23D4A373' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ============================================================
   SECTION TYPOGRAPHY
   ============================================================ */
.section-eyebrow {
  display:inline-block;
  padding:0.3rem 1rem; border-radius:100px;
  font-size:0.7rem; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase;
  background:rgba(139,94,60,0.12);
  color:var(--choco-mid);
  border:1px solid rgba(139,94,60,0.2);
}
.section-eyebrow-light {
  display:inline-block;
  padding:0.3rem 1rem; border-radius:100px;
  font-size:0.7rem; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase;
  background:rgba(212,163,115,0.15);
  color:var(--choco-gold);
  border:1px solid rgba(212,163,115,0.3);
}

.section-title {
  font-family:'Playfair Display',serif;
  color:var(--choco-dark);
  font-size:clamp(1.75rem,4vw,2.6rem);
  font-weight:700; line-height:1.2;
}
.section-title-white {
  font-family:'Playfair Display',serif;
  color:#fff;
  font-size:clamp(1.75rem,4vw,2.6rem);
  font-weight:700; line-height:1.2;
}

.section-body { color:#4a3530; font-size:1rem; line-height:1.8; }
.section-body-light { color:rgba(255,255,255,0.8); font-size:1rem; line-height:1.8; }

.section-divider {
  width:56px; height:3px;
  background:linear-gradient(90deg,var(--choco-gold),var(--choco-mid));
  border-radius:2px; margin:1rem 0;
}
.section-divider.center { margin:1rem auto; }

/* ============================================================
   ICON BOXES
   ============================================================ */
.icon-box-gold {
  width:60px; height:60px; border-radius:16px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--choco-gold) 0%,var(--choco-mid) 100%);
  box-shadow:0 6px 20px rgba(212,163,115,0.35);
}
.icon-box-soft {
  width:60px; height:60px; border-radius:16px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(212,163,115,0.12);
  border:1px solid rgba(212,163,115,0.25);
}
.icon-box-dark {
  width:60px; height:60px; border-radius:16px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(212,163,115,0.25);
}
.icon-box-sm {
  width:48px; height:48px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background:#fff; border-radius:14px;
  box-shadow:var(--shadow-soft);
  transition:var(--transition); overflow:hidden;
  border:1px solid rgba(212,163,115,0.08);
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-hover); }

/* Product cards */
.product-card {
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(212,163,115,0.1);
  transition:var(--transition);
  display:flex; flex-direction:column;
}
.product-card:hover {
  transform:translateY(-8px);
  box-shadow:var(--shadow-hover);
  border-color:rgba(212,163,115,0.4);
}
.product-img-wrapper {
  position:relative; overflow:hidden; height:220px;
  background:var(--choco-dark);
}
.product-img-wrapper img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.6s ease;
}
.product-card:hover .product-img-wrapper img { transform:scale(1.08); }
.product-img-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(26,13,11,0.55) 0%, transparent 55%);
}
.product-img-icon {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#3B1F1A 0%,#6B3A2A 40%,#8B5E3C 100%);
}
.product-img-icon.maize-bg {
  background:linear-gradient(135deg,#3a2c00 0%,#7a5c00 40%,#b8900a 100%);
}
.product-img-icon.makhana-bg {
  background:linear-gradient(135deg,#1e2e14 0%,#3a5a24 40%,#5a8a3a 100%);
}

/* Segment cards */
.segment-card {
  background:#fff; border-radius:16px; padding:2.5rem 2rem;
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(212,163,115,0.1);
  transition:var(--transition);
  text-align:center;
}
.segment-card:hover {
  transform:translateY(-8px);
  box-shadow:var(--shadow-hover);
  border-color:rgba(212,163,115,0.4);
}

/* Why cards - DARK SECTION */
.why-card {
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(212,163,115,0.2);
  border-radius:14px; padding:1.75rem;
  transition:var(--transition);
}
.why-card:hover {
  background:rgba(212,163,115,0.1);
  border-color:rgba(212,163,115,0.45);
  transform:translateY(-4px);
}
/* Force white text inside why-card (dark section) */
.why-card h3 { color:#ffffff !important; font-family:'Playfair Display',serif; }
.why-card p { color:rgba(255,255,255,0.75) !important; font-size:0.875rem; line-height:1.7; }

/* Leader cards */
.leader-card {
  background:#fff; border-radius:16px; padding:2rem;
  text-align:center; box-shadow:var(--shadow-soft);
  border:1px solid rgba(212,163,115,0.1);
  transition:var(--transition);
}
.leader-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-hover);
  border-color:rgba(212,163,115,0.4);
}
.leader-avatar {
  width:88px; height:88px; border-radius:50%;
  background:linear-gradient(135deg,var(--choco-gold) 0%,var(--choco-mid) 100%);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.25rem;
  font-size:2rem; font-weight:700; color:#fff;
  font-family:'Playfair Display',serif;
  box-shadow:0 8px 24px rgba(212,163,115,0.4);
}

/* Contact info cards */
.contact-info-card {
  background:#fff; border-radius:16px; padding:2rem;
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(212,163,115,0.1);
  transition:var(--transition);
}
.contact-info-card:hover {
  border-color:rgba(212,163,115,0.4);
  box-shadow:var(--shadow-hover);
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner {
  background-color:#1a0d0b;
  background-image:
    linear-gradient(135deg,#1a0d0b 0%,var(--choco-dark) 50%,#4a2318 100%),
    url('https://images.unsplash.com/photo-1549007994-cb92caebd54b?auto=format&fit=crop&w=1920&q=80');
  background-blend-mode:multiply;
  background-size:cover; background-position:center;
  position:relative; overflow:hidden;
}
.cta-banner::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center,rgba(212,163,115,0.12) 0%,transparent 65%);
  pointer-events:none;
}

/* ============================================================
   ABOUT ACCENT PANEL
   ============================================================ */
.about-accent {
  background:linear-gradient(135deg,var(--choco-dark) 0%,#5c3020 100%);
  border-radius:20px; position:relative; overflow:hidden;
}
.about-accent-img {
  width:100%; height:100%; min-height:400px; object-fit:cover;
  border-radius:20px; opacity:0.25; position:absolute; inset:0;
}
/* All text in about-accent must be white */
.about-accent h3, .about-accent p, .about-accent .text-white { color:#fff !important; }

/* ============================================================
   MISSION/VISION CARDS
   ============================================================ */
.mv-card { border-radius:16px; padding:2.5rem; position:relative; overflow:hidden; }
.mv-card-mission {
  background:linear-gradient(135deg,var(--choco-dark) 0%,#4a2318 100%);
}
.mv-card-vision {
  background:linear-gradient(135deg,var(--choco-mid) 0%,#5a3218 100%);
}
.mv-card h3, .mv-card p { color:#fff; }
.mv-card p { opacity:0.85; }

/* ============================================================
   PROCESS STEPS
   ============================================================ */
.process-number {
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--choco-gold) 0%,var(--choco-mid) 100%);
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif; font-weight:700; font-size:1.1rem;
  color:#fff; box-shadow:0 4px 16px rgba(212,163,115,0.4);
}

/* ============================================================
   PRODUCT FILTER TABS
   ============================================================ */
.filter-tab {
  padding:0.6rem 1.5rem; border-radius:100px;
  font-size:0.875rem; font-weight:600; letter-spacing:0.04em;
  border:2px solid rgba(139,94,60,0.25);
  background:transparent; color:#6b4030;
  cursor:pointer; transition:var(--transition);
  font-family:'Inter',sans-serif;
}
.filter-tab:hover,.filter-tab.active {
  background:var(--choco-dark); color:var(--choco-gold);
  border-color:var(--choco-dark);
}

/* ============================================================
   FORM STYLES
   ============================================================ */
.form-label {
  display:block; font-size:0.85rem; font-weight:600;
  color:var(--choco-dark); margin-bottom:0.5rem; letter-spacing:0.03em;
}
.form-input,.form-select,.form-textarea {
  width:100%; padding:0.85rem 1.1rem;
  border:2px solid rgba(139,94,60,0.18);
  border-radius:8px; background:#fff;
  color:var(--choco-dark);
  font-family:'Inter',sans-serif; font-size:0.95rem;
  transition:var(--transition); outline:none;
}
.form-input:focus,.form-select:focus,.form-textarea:focus {
  border-color:var(--choco-gold);
  box-shadow:0 0 0 4px rgba(212,163,115,0.15);
}
.form-input::placeholder,.form-textarea::placeholder { color:#b0957e; }
.form-input.error,.form-textarea.error { border-color:#dc2626; }
.form-error { color:#dc2626; font-size:0.8rem; margin-top:0.3rem; display:none; }
.form-error.visible { display:block; }
.form-textarea { resize:vertical; min-height:140px; }

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position:fixed; bottom:2rem; right:2rem;
  background:#166534; color:#fff;
  padding:1rem 1.5rem; border-radius:10px;
  font-weight:600; font-size:0.9rem;
  box-shadow:0 8px 32px rgba(0,0,0,0.25);
  transform:translateY(120px); opacity:0;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  z-index:9999; display:flex; align-items:center; gap:0.75rem;
  max-width:360px;
}
.toast.show { transform:translateY(0); opacity:1; }

/* ============================================================
   FADE ANIMATIONS
   ============================================================ */
.fade-in-up {
  opacity:0; transform:translateY(36px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}
.fade-in-up.visible { opacity:1; transform:translateY(0); }
.fade-in-up.delay-1 { transition-delay:0.1s; }
.fade-in-up.delay-2 { transition-delay:0.2s; }
.fade-in-up.delay-3 { transition-delay:0.3s; }
.fade-in-up.delay-4 { transition-delay:0.4s; }
.fade-in-up.delay-5 { transition-delay:0.5s; }
.fade-in { opacity:0; transition:opacity 0.8s ease; }
.fade-in.visible { opacity:1; }

/* ============================================================
   FOOTER
   ============================================================ */
footer { background-color:var(--choco-dark); }
.footer-link {
  color:rgba(232,213,196,0.65); text-decoration:none;
  font-size:0.875rem; transition:color 0.2s;
  display:block; padding:0.2rem 0;
}
.footer-link:hover { color:var(--choco-gold); }

/* ============================================================
   UTILITY
   ============================================================ */
.gold-line {
  width:100%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,163,115,0.4),transparent);
}

.stat-num {
  font-family:'Playfair Display',serif;
  font-size:2.5rem; font-weight:800;
  color:var(--choco-gold); line-height:1;
}

/* Badge variants */
.badge {
  display:inline-block; padding:0.25rem 0.9rem; border-radius:100px;
  font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  background:rgba(139,94,60,0.12); color:var(--choco-mid);
  border:1px solid rgba(139,94,60,0.22);
}
.badge-on-dark {
  display:inline-block; padding:0.25rem 0.9rem; border-radius:100px;
  font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  background:rgba(212,163,115,0.15); color:var(--choco-gold);
  border:1px solid rgba(212,163,115,0.35);
}

/* Product category badge */
.prod-badge-choco { background:rgba(139,94,60,0.12); color:#6b3a1a; border:1px solid rgba(139,94,60,0.22); font-size:0.7rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:0.2rem 0.75rem; border-radius:100px; }
.prod-badge-maize { background:rgba(180,130,0,0.12); color:#7a5a00; border:1px solid rgba(180,130,0,0.25); font-size:0.7rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:0.2rem 0.75rem; border-radius:100px; }
.prod-badge-makhana { background:rgba(50,100,30,0.12); color:#2a5a10; border:1px solid rgba(50,100,30,0.25); font-size:0.7rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:0.2rem 0.75rem; border-radius:100px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:768px) {
  .hero-section { background-attachment:scroll; }
  .page-header { padding:6rem 0 3rem; }
}

/* Stats on dark bg */
.stat-label-dark { color:rgba(255,255,255,0.55); font-size:0.8rem; margin-top:0.25rem; }

/* Hover scale on segment icon */
.segment-icon-wrap { transition:transform 0.3s ease; }
.segment-card:hover .segment-icon-wrap { transform:scale(1.1) rotate(-3deg); }