/* =========================================================
   AARYAM FOODS & MASALAS — MAIN STYLESHEET
   ========================================================= */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&display=swap');

/* ---------- Design tokens ---------- */
:root{
  --green-deep:   #3F6B33;
  --green-mid:    #5C8C4A;
  --green-pale:   #EAF3E2;
  --cream:        #FBF6EC;
  --gold:         #C68A2E;
  --rust:         #A3402B;
  --maroon:       #6E2A34;
  --ink:          #2A2620;
  --ink-light:    #6B6558;
  --white:        #FFFFFF;
  --border:       #E4DCC8;

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Work Sans", Arial, sans-serif;

  --radius: 10px;
  --shadow: 0 10px 30px rgba(42, 38, 32, 0.08);
  --container: 1180px;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--green-deep);
  line-height: 1.15;
  margin: 0 0 16px;
  font-weight: 600;
}
p{ margin:0 0 16px; color: var(--ink-light); }
.container{ max-width: var(--container); margin:0 auto; padding: 0 24px; }
:focus-visible{ outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 13px 28px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight:600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary{ background: var(--green-deep); color: var(--white); }
.btn-primary:hover{ background: var(--green-mid); transform: translateY(-2px); }
.btn-outline{ background: transparent; border-color: var(--green-deep); color: var(--green-deep); }
.btn-outline:hover{ background: var(--green-deep); color: var(--white); transform: translateY(-2px); }
.btn-gold{ background: var(--gold); color: var(--white); }
.btn-gold:hover{ background: #b3791f; transform: translateY(-2px); }

/* ---------- Top bar ---------- */
.topbar{
  background: var(--green-deep);
  color: var(--white);
  font-size: 0.85rem;
}
.topbar .container{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:8px; padding-bottom:8px; flex-wrap:wrap; gap:6px;
}
.topbar-contact{ display:flex; gap:20px; flex-wrap:wrap; }
.topbar-contact a{ opacity:.95; }
.topbar-contact a:hover{ text-decoration:underline; }
.topbar-social{ display:flex; gap:14px; align-items:center; }
.topbar-social a{
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.15);
  transition: background .2s ease;
}
.topbar-social a:hover{ background: var(--gold); }
.topbar-social svg{ width:14px; height:14px; fill:#fff; }

/* ---------- Header / Nav ---------- */
.site-header{
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  position: sticky; top:0; z-index: 100;
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 0;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width:48px; height:48px; border-radius:50%;
  background: var(--green-deep);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.brand-mark svg{ width:26px; height:26px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text .brand-name{
  font-family: var(--font-display); font-weight:700; font-size:1.35rem; color: var(--green-deep);
}
.brand-text .brand-tag{
  font-size:.72rem; color: var(--rust); letter-spacing:.03em;
}

.main-nav ul{ display:flex; align-items:center; gap:34px; }
.main-nav a{
  font-weight:600; font-size:.98rem; color: var(--ink);
  padding: 6px 2px; border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.main-nav a:hover, .main-nav a.active{ color: var(--green-deep); border-color: var(--gold); }

.nav-cta{ display:flex; align-items:center; gap:22px; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; margin-left: 12px;
}
.nav-toggle span{ width:26px; height:3px; background: var(--green-deep); border-radius:2px; }

@media (max-width: 880px){
  .main-nav{
    position:absolute; top:100%; left:0; right:0;
    background: var(--cream); border-bottom:1px solid var(--border);
    max-height:0; overflow:hidden; transition: max-height .3s ease;
  }
  .main-nav.open{ max-height:400px; }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap:0; padding: 8px 24px 20px; }
  .main-nav li{ width:100%; }
  .main-nav a{ display:block; padding:12px 0; border-bottom:1px solid var(--border); }
  .nav-toggle{ display:flex; }
  .nav-cta .btn-primary{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background: linear-gradient(180deg, var(--green-pale) 0%, var(--cream) 78%);
  overflow:hidden;
  padding: 76px 0 90px;
}
.hero .container{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap:48px; align-items:center;
}
.hero-eyebrow{
  display:inline-block; font-weight:600; color: var(--rust); font-size:.85rem;
  background: rgba(163,64,43,.08); padding:6px 14px; border-radius:999px; margin-bottom:18px;
}
.hero h1{ font-size: clamp(2.2rem, 4vw, 3.4rem); margin-bottom:18px; }
.hero h1 em{ font-style:normal; color: var(--rust); }
.hero p.lead{ font-size:1.08rem; max-width:48ch; margin-bottom:30px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-art{ position:relative; }
.hero-blob{
  position:absolute; inset:0; z-index:0;
}
.hero-art svg{ position:relative; z-index:1; width:100%; height:auto; }
.hero-stats{
  display:flex; gap:28px; margin-top:34px; flex-wrap:wrap;
}
.hero-stat strong{ display:block; font-family:var(--font-display); font-size:1.7rem; color: var(--green-deep); }
.hero-stat span{ font-size:.85rem; color: var(--ink-light); }

@media (max-width: 880px){
  .hero .container{ grid-template-columns:1fr; }
  .hero-art{ order:-1; max-width:320px; margin:0 auto; }
}

/* ---------- Section generic ---------- */
.section{ padding: 78px 0; }
.section-alt{ background: var(--white); }
.section-head{ max-width: 640px; margin: 0 auto 46px; text-align:center; }
.section-head .kicker{
  color: var(--rust); font-weight:600; font-size:.85rem; letter-spacing:.03em; display:block; margin-bottom:10px;
}
.section-head p{ max-width: 56ch; margin: 12px auto 0; }

/* ---------- Highlights strip ---------- */
.highlights{
  display:grid; grid-template-columns: repeat(4,1fr); gap:24px;
}
.highlight-card{
  background: var(--white); border:1px solid var(--border); border-radius: var(--radius);
  padding: 28px 22px; text-align:center; transition: box-shadow .2s ease, transform .2s ease;
}
.highlight-card:hover{ box-shadow: var(--shadow); transform: translateY(-4px); }
.highlight-icon{
  width:54px; height:54px; margin:0 auto 16px; border-radius:50%;
  background: var(--green-pale); display:flex; align-items:center; justify-content:center;
}
.highlight-icon svg{ width:26px; height:26px; fill: var(--green-deep); }
.highlight-card h3{ font-size:1.05rem; margin-bottom:6px; }
.highlight-card p{ font-size:.92rem; margin:0; }

@media (max-width: 880px){ .highlights{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .highlights{ grid-template-columns: 1fr; } }

/* ---------- Product grid ---------- */
.product-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:26px;
}
.product-card{
  background: var(--white); border:1px solid var(--border); border-radius: var(--radius);
  overflow:hidden; transition: box-shadow .2s ease, transform .2s ease;
}
.product-card:hover{ box-shadow: var(--shadow); transform: translateY(-4px); }
.product-photo {
    width: 100%;
    height: 280px;
    background: #eef4e7;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

.product-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.product-photo img{ width:100%; height:100%; object-fit:contain; }
.product-photo .ph-fallback{ text-align:center; color: var(--green-deep); font-family:var(--font-display); font-size:.95rem; padding:10px; }
.product-body{ padding:18px 20px 22px; }
.product-body h3{ font-size:1.08rem; margin-bottom:8px; }
.product-body p{ font-size:.92rem; margin:0; }

/* ---------- About preview / split ---------- */
.split{
  display:grid; grid-template-columns: 0.9fr 1.1fr; gap:56px; align-items:center;
}
.split img{ border-radius: var(--radius); box-shadow: var(--shadow); }
.split .frame{
  position:relative; border-radius: var(--radius); overflow:hidden; aspect-ratio: 4/5;
  background: var(--green-pale); display:flex; align-items:center; justify-content:center;
}
.split .frame img{ width:82%; height:100%; object-fit:cover; border-radius:0; box-shadow:none; }
.quote-badge{
  position:absolute; bottom:-22px; right:-22px; background: var(--rust); color:#fff;
  padding:16px 20px; border-radius: var(--radius); box-shadow: var(--shadow); max-width:230px; font-family:var(--font-display); font-size:1rem;
}
@media (max-width: 880px){
  .split{ grid-template-columns:1fr; gap:30px; }
  .quote-badge{ display:none; }
}

/* ---------- Contact preview / CTA band ---------- */
.cta-band{
  background: var(--green-deep); color:#fff; border-radius: var(--radius);
  padding: 46px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
}
.cta-band h2{ color:#fff; margin-bottom:6px; }
.cta-band p{ color: rgba(255,255,255,.85); margin:0; }
.cta-band .btn-gold{ flex-shrink:0; }

/* ---------- Contact page ---------- */
.contact-grid{
  display:grid; grid-template-columns: 0.9fr 1.1fr; gap:48px; align-items:start;
}
.contact-info-card{
  background: var(--white); border:1px solid var(--border); border-radius: var(--radius); padding: 32px;
}
.contact-row{ display:flex; gap:14px; margin-bottom:22px; align-items:flex-start; }
.contact-row .ic{
  width:40px; height:40px; border-radius:50%; background: var(--green-pale); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.contact-row .ic svg{ width:18px; height:18px; fill: var(--green-deep); }
.contact-row h4{ margin:0 0 4px; font-size:1rem; color: var(--ink); font-family: var(--font-body); font-weight:700; }
.contact-row p{ margin:0; font-size:.94rem; }
.contact-form{
  background: var(--white); border:1px solid var(--border); border-radius: var(--radius); padding: 34px;
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin-bottom:18px; }
.form-group{ display:flex; flex-direction:column; gap:6px; }
.form-group.full{ grid-column: 1 / -1; }
label{ font-size:.88rem; font-weight:600; color: var(--ink); }
input, textarea{
  font-family: var(--font-body); font-size:.95rem; padding:12px 14px;
  border: 1px solid var(--border); border-radius:8px; background: var(--cream); color: var(--ink);
}
input:focus, textarea:focus{ outline:2px solid var(--green-mid); border-color: var(--green-mid); }
textarea{ resize:vertical; min-height:120px; }
.form-note{ font-size:.82rem; color: var(--ink-light); margin-top:6px; }
.map-embed{ border-radius: var(--radius); overflow:hidden; border:1px solid var(--border); margin-top:28px; }
.map-embed iframe{ width:100%; height:280px; border:0; display:block; }

@media (max-width: 880px){
  .contact-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
}

/* ---------- Page banner (About / Products / Contact) ---------- */
.page-banner{
  background: var(--green-pale); padding: 56px 0; text-align:center; border-bottom:1px solid var(--border);
}
.page-banner .kicker{ color: var(--rust); font-weight:600; font-size:.85rem; }
.page-banner h1{ margin: 8px 0 0; font-size: clamp(1.9rem,3vw,2.6rem); }
.breadcrumb{ font-size:.85rem; color: var(--ink-light); margin-top:10px; }
.breadcrumb a{ color: var(--green-deep); font-weight:600; }

/* ---------- Story / Founder page ---------- */
.story p{ font-size:1.02rem; color: var(--ink); }
.pullquote{
  font-family: var(--font-display); font-size:1.5rem; color: var(--green-deep);
  border-left: 4px solid var(--gold); padding: 6px 0 6px 22px; margin: 30px 0;
}
.values-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; margin-top:20px; }
@media (max-width:880px){ .values-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:520px){ .values-grid{ grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer{ background: #2B2620; color: #DFD9CC; padding: 64px 0 0; }
.footer-grid{
  display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-brand .brand-name{ color: #fff; }
.footer-brand p{ color: #B9B2A2; font-size:.92rem; margin-top:14px; max-width:32ch; }
.footer-social{ display:flex; gap:12px; margin-top:18px; }
.footer-social a{
  width:34px; height:34px; border-radius:50%; background: rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; transition: background .2s ease;
}
.footer-social a:hover{ background: var(--gold); }
.footer-social svg{ width:16px; height:16px; fill:#fff; }
.footer-col h4{ color:#fff; font-family: var(--font-body); font-size:.95rem; letter-spacing:.02em; margin-bottom:18px; }
.footer-col ul li{ margin-bottom:11px; }
.footer-col a{ color:#B9B2A2; font-size:.92rem; transition: color .2s ease; }
.footer-col a:hover{ color: var(--gold); }
.footer-bottom{
  display:flex; justify-content:space-between; padding:22px 0; font-size:.82rem; color:#8B8474; flex-wrap:wrap; gap:8px;
}
@media (max-width: 880px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .footer-grid{ grid-template-columns: 1fr; }
}

/* ---------- Utilities ---------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }



/* =========================================================
   ENHANCEMENTS — animation, hover states, spice motifs
   ========================================================= */

/* ---------- Scroll-reveal base ---------- */
.reveal{
  opacity:0; transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{ opacity:1; transform:none; }
.reveal:nth-child(2){ transition-delay:.08s; }
.reveal:nth-child(3){ transition-delay:.16s; }
.reveal:nth-child(4){ transition-delay:.24s; }
.reveal:nth-child(5){ transition-delay:.32s; }
.reveal:nth-child(6){ transition-delay:.4s; }

/* ---------- Sticky header shadow on scroll ---------- */
.site-header.scrolled{ box-shadow: 0 6px 24px rgba(42,38,32,.08); }
.site-header{ transition: box-shadow .3s ease; }

/* ---------- Nav underline sweep ---------- */
.main-nav a{ position:relative; border-bottom:none !important; }
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:2px; height:2px; width:0;
  background: var(--gold); transition: width .3s ease;
}
.main-nav a:hover::after, .main-nav a.active::after{ width:100%; }

/* ---------- Button shine sweep ---------- */
.btn{ position:relative; overflow:hidden; }
.btn::before{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg);
}
.btn:hover::before{ animation: shine 0.9s ease forwards; }
@keyframes shine{ to{ left:130%; } }
.btn-primary:hover, .btn-gold:hover{ box-shadow: 0 10px 24px rgba(63,107,51,.28); }
.btn-gold:hover{ box-shadow: 0 10px 24px rgba(198,138,46,.32); }

/* ---------- Hero: floating spice icons + gradient shimmer ---------- */
.hero{ background-size: 200% 200%; animation: heroShift 14s ease infinite; }
@keyframes heroShift{
  0%{ background-position: 0% 0%; }
  50%{ background-position: 100% 40%; }
  100%{ background-position: 0% 0%; }
}

@keyframes floaty{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-16px) rotate(8deg); }
}
.hero-art svg{ animation: floaty 7s ease-in-out infinite; }

/* ---------- Section texture (subtle spice-grain dots) ---------- */
.section-alt{
  background-image: radial-gradient(rgba(63,107,51,.05) 1px, transparent 1px);
  background-size: 18px 18px;
}

/* ---------- Highlight cards ---------- */
.highlight-card{
  position:relative; overflow:hidden;
}
.highlight-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--green-deep), var(--gold), var(--rust));
  transform: scaleX(0); transform-origin:left; transition: transform .35s ease;
}
.highlight-card:hover::before{ transform: scaleX(1); }
.highlight-card:hover{ border-color: transparent; }
.highlight-icon{ transition: transform .35s ease, background .35s ease; }
.highlight-card:hover .highlight-icon{ transform: rotate(-8deg) scale(1.12); background: var(--gold); }
.highlight-card:hover .highlight-icon svg{ fill:#fff; }

/* ---------- Product cards ---------- */
.product-card{ position:relative; }
.product-card::after{
  content:"🌶"; position:absolute; top:12px; right:12px; font-size:1.1rem;
  background:#fff; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow); opacity:0; transform: scale(.6) rotate(-20deg);
  transition: opacity .3s ease, transform .3s ease;
}
.product-card:hover::after{ opacity:1; transform: scale(1) rotate(0deg); }
.product-photo img{ transition: transform .5s ease; }
.product-card:hover .product-photo img{ transform: scale(1.08); }
.product-body h3{ transition: color .25s ease; }
.product-card:hover .product-body h3{ color: var(--rust); }

/* ---------- About split image ---------- */
.frame{ transition: box-shadow .4s ease; }
.split:hover .frame{ box-shadow: 0 18px 40px rgba(42,38,32,.18); }
.frame img{ transition: transform .6s ease; }
.split:hover .frame img{ transform: scale(1.04); }
.quote-badge{ animation: floaty 5s ease-in-out infinite; }

/* ---------- CTA band shimmer ---------- */
.cta-band{
  position:relative; overflow:hidden;
  background: linear-gradient(120deg, var(--green-deep), #4d7d3e, var(--green-deep));
  background-size: 220% 220%; animation: heroShift 10s ease infinite;
}
.cta-band::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.12;
  background-image: radial-gradient(circle, #fff 2px, transparent 2px);
  background-size: 26px 26px;
}
.btn-gold{ position:relative; z-index:1; }

/* ---------- Contact icons ---------- */
.contact-row .ic{ transition: transform .3s ease, background .3s ease; }
.contact-row:hover .ic{ transform: scale(1.1) rotate(-6deg); background: var(--gold); }
.contact-row:hover .ic svg{ fill:#fff; }

/* ---------- Footer social ---------- */
.footer-social a{ transition: transform .3s ease, background .3s ease; }
.footer-social a:hover{ transform: translateY(-3px) rotate(-6deg); }

.footer-credit {
    color: var(--gold);
    font-weight: 600;
    transition: color 0.2s ease;
}

.footer-credit:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* ---------- Form focus polish ---------- */
input, textarea{ transition: border-color .25s ease, box-shadow .25s ease; }
input:focus, textarea:focus{ box-shadow: 0 0 0 4px rgba(92,140,74,.15); }
button[type="submit"]{ position:relative; }
button[type="submit"]:active{ transform: translateY(1px) scale(.98); }

/* ---------- Page banner gentle pattern ---------- */
.page-banner{
  background-image:
    radial-gradient(rgba(163,64,43,.06) 1.5px, transparent 1.5px),
    linear-gradient(180deg, var(--green-pale), var(--green-pale));
  background-size: 20px 20px, cover;
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
}


/* =========================================================
   PROFESSIONAL REDESIGN — collage layouts, coral accent, bold type
   ========================================================= */

:root{
  --coral: #D9432B;
  --coral-dark: #B8331F;
}

/* ---------- Coral button ---------- */
.btn-coral{ background: var(--coral); color:#fff; }
.btn-coral:hover{ background: var(--coral-dark); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(233,138,110,.35); }

/* ---------- Bigger, bolder headline ---------- */
.hero-copy h1{
  font-size: clamp(2.6rem, 5vw, 4.1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.hero-copy h1 .accent{ color: var(--coral); }
.hero-copy .lead{ font-size: 1.12rem; }
h2{ font-size: clamp(1.7rem, 2.6vw, 2.3rem); }

/* ---------- Hero layout: copy + photo collage ---------- */
.hero-grid{
  display:grid; grid-template-columns: 1.05fr 0.95fr; gap:56px; align-items:center;
  position:relative; z-index:1;
}
.hero-photos{ position:relative; min-height:460px; }
.hero-photo{
  position:absolute; border-radius:22px; overflow:hidden;
  box-shadow: 0 22px 50px rgba(42,38,32,.2); border:6px solid var(--white); background: var(--green-pale);
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-photo .ph-fallback{ display:flex; align-items:center; justify-content:center; height:100%; text-align:center; padding:14px; }
.hero-photo-main{ width:72%; aspect-ratio:4/5; top:0; left:0; z-index:1; }
.hero-photo-accent{ width:48%; aspect-ratio:1/1; bottom:-8%; right:0; z-index:2; }

@media (max-width: 880px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-photos{ min-height:320px; order:-1; margin-bottom:10px; }
  .hero-photo-main{ width:78%; }
  .hero-photo-accent{ width:50%; }
  .hero-photos::before{ display:none; }
}

/* ---------- About / split: photo collage variant ---------- */
.split-photos{ position:relative; min-height:420px; }
.split-photo{
  position:absolute; border-radius:20px; overflow:hidden;
  box-shadow: 0 18px 42px rgba(42,38,32,.16); border:6px solid var(--white); background: var(--green-pale);
}
.split-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.split-photo .ph-fallback{ display:flex; align-items:center; justify-content:center; height:100%; text-align:center; padding:14px; font-family:var(--font-display); color:var(--green-deep); }
.split-photo-main{ width:78%; aspect-ratio:4/5; top:0; left:0; z-index:1; }
.split-photo-accent{ width:52%; aspect-ratio:4/3; bottom:-9%; right:-4%; z-index:2; }
.split-photos .quote-badge{ z-index:3; }

@media (max-width: 880px){
  .split-photos{ min-height:320px; }
  .split-photo-main{ width:84%; }
  .split-photo-accent{ width:56%; }
}

/* ---------- Icon-accented section intros (like "About Aaryam") ---------- */
.intro-icon{
  width:58px; height:58px; border-radius:16px; background: var(--white);
  box-shadow: var(--shadow); display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.intro-icon svg{ width:28px; height:28px; fill: var(--ink); }


/* ---------- Logo image in header ---------- */
.nav-wrap{ align-items: center; flex-wrap: nowrap; }
.brand{ flex-shrink: 0; }
.brand-logo{
  height: 52px;
  max-height: 52px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
}
.main-nav a{ white-space: nowrap; }
@media (max-width: 480px){
  .brand-logo{ height: 40px; max-height: 40px; }
}
/* ---------- Single clean hero photo ---------- */
.hero-photo-single{
  position: static;
  width: 100%;
  aspect-ratio: 4/4.6;
  border-radius: 26px;
}


/* =========================================================
   HERO V2 — arch photo, bold two-line headline, entrance animation
   ========================================================= */

.hero-grid-v2{
  display:grid; grid-template-columns: 0.85fr 1.15fr; gap:60px; align-items:center;
  position:relative; z-index:1;
}

/* ---------- Arch-topped photo frame ---------- */
.hero-photo-arch{
  border-radius: 240px 240px 24px 24px;
  overflow:hidden; aspect-ratio: 3/4; width:100%;
  box-shadow: 0 24px 55px rgba(42,38,32,.22);
  border: 8px solid var(--white);
  background: var(--green-pale);
}
.hero-photo-arch img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-photo-arch .ph-fallback{
  display:flex; align-items:center; justify-content:center; height:100%;
  text-align:center; padding:20px; font-family:var(--font-display); color:var(--green-deep);
}

/* ---------- Welcome eyebrow + big headline ---------- */
.hero-welcome{
  display:block; font-family:var(--font-display); font-weight:600; font-size:1.4rem;
  color: var(--green-deep); margin-bottom:6px;
}
.hero-copy h1{
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  font-weight:700; letter-spacing:-0.01em; margin-bottom:20px;
}
.hero-copy h1 .accent{ color: var(--green-deep); }

/* ---------- Coral button with icon ---------- */
.btn-coral svg{ flex-shrink:0; }

/* ---------- Corner line-art decorations ---------- */
/* .hero{ position:relative; overflow:visible; }
.hero::before, .hero::after{
  content:""; position:absolute; background-repeat:no-repeat; background-size:contain;
  opacity:.9; pointer-events:none; z-index:0;
  animation: floaty 6s ease-in-out infinite;
}
.hero::before{
  top:-10px; left:-10px; width:150px; height:150px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%233F6B33' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='38' cy='24' rx='20' ry='14'/%3E%3Cpath d='M20 30c-2 6 2 10 18 10s20-4 18-10'/%3E%3Cpath d='M15 46l70 8'/%3E%3Cpath d='M25 44v14M45 48v14M65 50v12'/%3E%3Cpath d='M15 46c-6 10 2 18 12 14'/%3E%3C/g%3E%3C/svg%3E");
}
.hero::after{
  bottom:-10px; right:-10px; width:150px; height:190px; animation-delay:1.5s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130'%3E%3Cg fill='none' stroke='%235C8C4A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M25 70 Q50 100 75 70'/%3E%3Cpath d='M20 70h60a30 8 0 0 1-60 0z'/%3E%3Cpath d='M42 52c-3-6 3-9 0-15'/%3E%3Cpath d='M56 52c-3-6 3-9 0-15'/%3E%3Ccircle cx='50' cy='20' r='12'/%3E%3Cpath d='M40 20a10 8 0 0 1 20 0'/%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width: 980px){
  .hero::before, .hero::after{ display:none; }
} */

/* ---------- Corner floating decorative icons (from your own images) ---------- */
/* .hero{ position:relative; overflow:visible; }
.hero::before, .hero::after{
  content:""; position:absolute; background-repeat:no-repeat; background-size:contain;
  opacity:.85; pointer-events:none; z-index:0;
  animation: floaty 6s ease-in-out infinite;
}
.hero::before{
  top:-20px; left:-10px; width:170px; height:170px;
  background-image: url("../images/products/spices1.png");
}
.hero::after{
  bottom:-20px; right:-10px; width:200px; height:200px; animation-delay:1.5s;
  background-image: url("../images/products/spices-in-spoon.png");
}
@media (max-width: 980px){
  .hero::before, .hero::after{ display:none; }
} */

@media (max-width: 880px){
  .hero-grid-v2{ grid-template-columns:1fr; }
  .hero-photo-arch{ order:-1; max-width:340px; margin:0 auto; aspect-ratio:3/3.6; }
}

/* ---------- Entrance animation on page load ---------- */
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(24px); }
  to{ opacity:1; transform:none; }
}
.hero-welcome{ animation: fadeUp .7s ease both; }
.hero-copy h1{ animation: fadeUp .7s ease .1s both; }
.hero-copy .lead{ animation: fadeUp .7s ease .2s both; }
.hero-copy .hero-actions{ animation: fadeUp .7s ease .3s both; }
.hero-copy .hero-stats{ animation: fadeUp .7s ease .4s both; }
.hero-photo-arch{ animation: fadeUp .8s ease both; }

.floaters {
    position: relative;
    overflow: visible;
}


/* Both floating images */
.floaters::before,
.floaters::after {
    content: "";

    position: absolute;

    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    /* IMPORTANT - full clarity */
    opacity: 1;

    pointer-events: none;

    z-index: 1;

    /* optional slight enhancement */
    filter: saturate(1.08) contrast(1.05);

    animation: floaty 6s ease-in-out infinite;
}


/* TOP LEFT IMAGE */
.floaters::before {

    top: -30px;
    left: -10px;

    width: 150px;
    height: 150px;

    background-image:
        url("../images/products/spices1.png");
}


/* BOTTOM RIGHT IMAGE */
.floaters::after {

    bottom: -30px;
    right: -10px;

    width: 170px;
    height: 170px;

    background-image:
        url("../images/products/spices-in-spoon.png");

    animation-delay: 1.5s;
}


/* Keep cards/content above decorative images */
.floaters .container {
    position: relative;
    z-index: 2;
}


/* ---------- Hero text: stronger contrast ---------- */
.hero-banner-content h1{
  text-shadow: 0 3px 20px rgba(0,0,0,.6);
}
.hero-banner-content .lead{
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.hero-banner-content .hero-welcome{
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
}

/* =========================================================
   CLEAN PROFESSIONAL HERO SLIDER
   ========================================================= */


/* Main Banner */

.hero.hero-banner {
    position: relative;

    min-height: 610px;
    height: 610px;

    padding: 0;

    overflow: hidden;

    background: #1f211c;

    animation: none;
}


/* IMPORTANT:
   Disable old .hero .container grid
*/

.hero.hero-banner .container {
    display: block;

    max-width: 1180px;

    width: 100%;

    margin: 0 auto;

    padding-left: 60px;
    padding-right: 60px;
}


/* =================================
   BACKGROUND SLIDES
   ================================= */

.hero-slides {
    position: absolute;

    inset: 0;

    z-index: 0;
}


.hero-slide {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    opacity: 0;

    transform: scale(1.03);

    transition:
        opacity 1.2s ease,
        transform 6s ease;
}


.hero-slide.active {
    opacity: 1;

    transform: scale(1);
}


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

.hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,

            rgba(16, 18, 13, 0.90) 0%,

            rgba(16, 18, 13, 0.78) 35%,

            rgba(16, 18, 13, 0.48) 62%,

            rgba(16, 18, 13, 0.18) 100%
        );
}


/* =================================
   CONTENT POSITION
   ================================= */

.hero-banner-content {
    position: relative;

    z-index: 2;

    height: 100%;

    min-height: 610px;

    display: flex !important;

    align-items: center;

    justify-content: flex-start;
}


.hero-content-inner {
    width: 100%;

    max-width: 650px;
}


/* =================================
   MAIN WELCOME HEADING
   ================================= */

.hero-banner .hero-main-title {
    margin: 0 0 12px;

    font-family: var(--font-display);

    font-size: clamp(3rem, 5vw, 5rem);

    font-weight: 700;

    line-height: 1.02;

    letter-spacing: -0.025em;

    color: #ffffff;

    text-shadow:
        0 4px 18px rgba(0, 0, 0, 0.35);
}


.hero-banner .hero-main-title span {
    color: var(--gold);
}


/* =================================
   SUB HEADING
   ================================= */

.hero-banner .hero-sub-title {
    margin: 0 0 20px;

    max-width: 600px;

    font-family: var(--font-display);

    font-size: clamp(1.9rem, 3vw, 3rem);

    line-height: 1.12;

    font-weight: 600;

    color: #ffffff;
}


.hero-banner .hero-sub-title span {
    color: #e0a13c;
}


/* =================================
   DESCRIPTION
   ================================= */

.hero-banner-content .lead {
    max-width: 590px;

    margin: 0 0 30px;

    color: rgba(255, 255, 255, 0.90);

    font-family: var(--font-body);

    font-size: 1.05rem;

    line-height: 1.8;

    text-shadow: none;
}


/* =================================
   BUTTONS
   ================================= */

.hero-banner .hero-actions {
    display: flex;

    align-items: center;

    gap: 15px;

    margin: 0 0 35px;

    flex-wrap: wrap;
}


.hero-banner .hero-actions .btn {
    min-height: 52px;

    padding: 13px 26px;

    font-size: 0.95rem;

    font-weight: 600;
}


/* Dark Red Enquire Button */

.hero-banner .btn-coral {
    background: #9e2a2b;

    border: 2px solid #9e2a2b;

    color: #ffffff;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.20);
}


.hero-banner .btn-coral:hover {
    background: #7f1d1d;

    border-color: #7f1d1d;

    transform: translateY(-2px);
}


/* Explore Button */

.hero-banner .btn-outline-light {
    background: rgba(255, 255, 255, 0.05);

    border: 2px solid rgba(255, 255, 255, 0.85);

    color: #ffffff;

    backdrop-filter: blur(3px);
}


.hero-banner .btn-outline-light:hover {
    background: #ffffff;

    color: var(--green-deep);

    border-color: #ffffff;
}


/* =================================
   STATS
   ================================= */

.hero-banner .hero-stats {
    display: flex;

    align-items: flex-start;

    gap: 45px;

    margin: 0;

    padding-top: 22px;

    border-top:
        1px solid rgba(255, 255, 255, 0.22);

    max-width: 600px;
}


.hero-banner .hero-stat {
    position: relative;
}


.hero-banner .hero-stat strong {
    display: block;

    margin-bottom: 2px;

    font-family: var(--font-display);

    font-size: 1.55rem;

    line-height: 1.1;

    color: #ffffff;
}


.hero-banner .hero-stat span {
    display: block;

    font-size: 0.78rem;

    color: rgba(255, 255, 255, 0.70);
}


/* =================================
   SLIDER ARROWS
   ================================= */

.hero-arrow {
    position: absolute;

    top: 50%;

    z-index: 5;

    width: 46px;

    height: 46px;

    border: 1px solid rgba(255,255,255,.35);

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.90);

    color: var(--green-deep);

    font-size: 17px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transform: translateY(-50%);

    box-shadow:
        0 5px 18px rgba(0,0,0,.18);

    transition:
        background .25s ease,
        transform .25s ease;
}


.hero-arrow:hover {
    background: #ffffff;

    transform:
        translateY(-50%)
        scale(1.08);
}


.hero-arrow-prev {
    left: 22px;
}


.hero-arrow-next {
    right: 22px;
}


/* =================================
   SLIDER DOTS
   ================================= */

.hero-banner-dots {
    position: absolute;

    left: 50%;

    bottom: 20px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 9px;

    transform: translateX(-50%);
}


.hero-banner-dots .dot {
    width: 9px;

    height: 9px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.50);

    cursor: pointer;

    transition: all .25s ease;
}


.hero-banner-dots .dot.active {
    width: 27px;

    border-radius: 20px;

    background: #ffffff;
}


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

@media (max-width: 980px) {

    .hero.hero-banner {
        min-height: 570px;

        height: 570px;
    }


    .hero-banner-content {
        min-height: 570px;
    }


    .hero.hero-banner .container {
        padding-left: 70px;

        padding-right: 70px;
    }


    .hero-content-inner {
        max-width: 600px;
    }

}


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

@media (max-width: 700px) {

    .hero.hero-banner {
        min-height: 620px;

        height: 620px;
    }


    .hero-banner-content {
        min-height: 620px;

        align-items: center;
    }


    .hero.hero-banner .container {
        padding-left: 28px;

        padding-right: 28px;
    }


    .hero-overlay {

        background:
            linear-gradient(
                90deg,

                rgba(15, 18, 12, .89) 0%,

                rgba(15, 18, 12, .76) 100%
            );
    }


    .hero-banner .hero-main-title {
        font-size: clamp(2.7rem, 11vw, 3.8rem);
    }


    .hero-banner .hero-sub-title {
        font-size: clamp(1.7rem, 7vw, 2.4rem);
    }


    .hero-banner-content .lead {
        font-size: .95rem;

        line-height: 1.7;
    }


    .hero-banner .hero-actions {
        gap: 10px;
    }


    .hero-banner .hero-actions .btn {
        width: 100%;

        justify-content: center;
    }


    .hero-banner .hero-stats {
        gap: 22px;

        justify-content: space-between;
    }


    .hero-banner .hero-stat strong {
        font-size: 1.3rem;
    }


    .hero-arrow {
        display: none;
    }

}

/* =========================================================
   ABOUT PAGE BANNER BACKGROUND IMAGE
   ========================================================= */

.page-banner {
    position: relative;

    background-image:
        linear-gradient(
            rgba(20, 35, 18, 0.58),
            rgba(20, 35, 18, 0.58)
        ),
        url("../images/masala.avif");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    padding: 90px 0;

    text-align: center;

    border-bottom: none;
}


/* Keep banner content above background */
.page-banner .container {
    position: relative;
    z-index: 2;
}


/* Small heading */
.page-banner .kicker {
    color: #f4c36a;
    font-weight: 700;
    font-size: 0.95rem;
}


/* Main title */
.page-banner h1 {
    color: #ffffff;

    font-size: clamp(2.2rem, 4vw, 3.5rem);

    margin: 10px 0 12px;

    text-shadow:
        0 3px 15px rgba(0,0,0,0.45);
}


/* Breadcrumb */
.page-banner .breadcrumb {
    color: rgba(255,255,255,0.85);
}


/* Home link */
.page-banner .breadcrumb a {
    color: #ffffff;
    font-weight: 600;
}


.page-banner .breadcrumb a:hover {
    color: #f4c36a;
}

/* =========================================================
   HEADER - MOVE LOGO TO RIGHT SIDE
   ========================================================= */

.site-header .nav-wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 92px;
}

.site-header .main-nav{
    flex: 1;
}

.site-header .main-nav ul{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 34px;
}

.site-header .nav-cta{
    display: flex;
    align-items: center;
    gap: 18px;
}

.site-header .brand-right{
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 16px;
}

.site-header .brand-logo{
    height: 72px;
    max-height: 72px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
    display: block;
}

.site-header .nav-wrap{
    padding-top: 0px;
    padding-bottom: 0px;
}

@media (max-width: 880px){

    .site-header .nav-wrap{
        gap: 14px;
    }

    .site-header .brand-logo{
        height: 52px;
        max-height: 52px;
        max-width: 180px;
    }

    .site-header .brand-right{
        margin-left: 0;
    }

    .site-header .main-nav{
        flex: unset;
    }
}

@media (max-width: 480px){

    .site-header .brand-logo{
        height: 44px;
        max-height: 44px;
        max-width: 150px;
    }
}

/* Move Enquire Now button slightly towards left */
.site-header .nav-cta {
    margin-right: 50px;
}

/* =========================================================
   ABOUT PAGE - VISION & MISSION
   ========================================================= */

.vision-mission-section {
    background: var(--cream);
}


/* Two-column layout */
.vision-mission-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}


/* Individual card */
.vision-mission-card {
    position: relative;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 18px;

    padding: 42px 38px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(42, 38, 32, 0.06);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


/* Decorative top line */
.vision-mission-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 5px;

    background: linear-gradient(
        90deg,
        var(--green-deep),
        var(--gold),
        var(--rust)
    );
}


/* Hover */
.vision-mission-card:hover {
    transform: translateY(-6px);

    box-shadow: 0 18px 40px rgba(42, 38, 32, 0.12);

    border-color: transparent;
}


/* Icon */
.vm-icon {
    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 22px;

    border-radius: 50%;

    background: var(--green-pale);
}


.vm-icon svg {
    width: 29px;
    height: 29px;

    fill: var(--green-deep);
}


/* Small Vision / Mission label */
.vm-label {
    display: block;

    margin-bottom: 9px;

    color: var(--rust);

    font-size: .84rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .08em;
}


/* Card heading */
.vision-mission-card h3 {
    margin-bottom: 16px;

    font-size: clamp(1.35rem, 2vw, 1.75rem);

    color: var(--green-deep);

    line-height: 1.25;
}


/* Paragraph */
.vision-mission-card p {
    margin: 0;

    color: var(--ink-light);

    font-size: .98rem;

    line-height: 1.8;
}


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

    .vision-mission-grid {
        grid-template-columns: 1fr;
    }

    .vision-mission-card {
        padding: 32px 26px;
    }

}

/* =========================================================
   FIRST HERO SLIDE - IMAGE ONLY
   ========================================================= */

/* Smooth transition */
.hero-banner .hero-overlay,
.hero-banner .hero-banner-content {
    transition:
        opacity 0.45s ease,
        visibility 0.45s ease;
}


/* When Master Slider / Slide 1 is active */
.hero-banner.first-slide-active .hero-overlay {
    opacity: 0;
    visibility: hidden;
}


/* Hide all text/content on first slide */
.hero-banner.first-slide-active .hero-banner-content {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* Slide image stays fully visible */
.hero-banner.first-slide-active .hero-slide.active {
    opacity: 1;
}


/* Arrows and dots remain usable */
.hero-banner.first-slide-active .hero-arrow,
.hero-banner.first-slide-active .hero-banner-dots {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Other slides remain full cover */
.hero-banner .hero-slide:not(:first-child) {
    background-size: cover;
    background-position: center;
}

/* =========================================
   VISION & MISSION FLOATERS
   ========================================= */

.vm-elegant.floaters {
    position: relative;
    overflow: hidden;
}


/* Top-left spice image */
.vm-elegant.floaters::before {
    top: 20px;
    left: -15px;

    width: 150px;
    height: 150px;

    background-image: url("../images/products/spices1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    opacity: 1;
}


/* Bottom-right spice image */
.vm-elegant.floaters::after {
    right: -10px;
    bottom: 10px;

    width: 180px;
    height: 180px;

    background-image: url("../images/products/spices-in-spoon.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    opacity: 1;
}


/* Keep cards above the decorative images */
.vm-elegant.floaters .container {
    position: relative;
    z-index: 2;
}


/* Mobile */
@media (max-width: 980px) {

    .vm-elegant.floaters::before,
    .vm-elegant.floaters::after {
        display: none;
    }

}

/* =========================================
   HEADER LOGO - BIGGER + MOVE LEFT
   ========================================= */

.site-header .brand-logo {
    height: 90px;
    max-height: 90px;

    width: auto;
    max-width: 300px;

    object-fit: contain;
    display: block;
}


/* Move logo slightly left */
.site-header .brand-right {
    margin-left: 0;
    transform: translateX(-30px);
}

/* =========================================
   VISION & MISSION FLOATERS POSITION
   ========================================= */

.vm-brochure.floaters {
    position: relative;
    overflow: hidden;
}


/* Top-left spice decoration */
.vm-brochure.floaters::before {
    top: 40px;
    left: -20px;

    width: 150px;
    height: 150px;
}


/* Bottom-right spice decoration */
.vm-brochure.floaters::after {
    right: -15px;
    bottom: 30px;

    width: 180px;
    height: 180px;
}


/* Keep content above floaters */
.vm-brochure.floaters .container {
    position: relative;
    z-index: 2;
}


/* Hide floaters on small screens */
@media (max-width: 980px) {

    .vm-brochure.floaters::before,
    .vm-brochure.floaters::after {
        display: none;
    }

}

/* =========================================================
   HERO SLIDER - DESKTOP + MOBILE IMAGE FIX
   ========================================================= */


/* -----------------------------------------
   DESKTOP - KEEP EXISTING MASTER SLIDER
   ----------------------------------------- */

.hero-banner .hero-slide-master {
    background-image:
        url("../images/products/master-slider.png") !important;

    /* background-size: cover !important; */
    background-position: center center !important;
    background-repeat: no-repeat !important;
}


/* Other slides remain unchanged */
.hero-banner .hero-slide:not(.hero-slide-master) {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


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

@media (max-width: 700px) {

    /*
       Keep your existing mobile hero height.
       No other sections are affected.
    */

    .hero.hero-banner {
        height: 620px;
        min-height: 620px;
    }


    .hero-banner-content {
        min-height: 620px;
    }


    /*
       ONLY MASTER SLIDE:
       Replace desktop image with vertical mobile image
    */

    .hero-banner .hero-slide-master {
        background-image:
            url("../images/products/master-slider-mobile.png") !important;

        background-size: cover !important;

        background-position: center center !important;

        background-repeat: no-repeat !important;
    }

}

/* =========================================================
   MASTER HERO SLIDER
   DESKTOP NORMAL / MOBILE FULL IMAGE
   ========================================================= */


/* DESKTOP - existing wide image */
.hero-banner .hero-slide-master {
    background-image:
        url("../images/products/master-slider.png") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}


/* =========================================================
   MOBILE MASTER SLIDE ONLY
   ========================================================= */

@media (max-width: 700px) {

    /*
       ONLY WHEN FIRST SLIDE IS ACTIVE

       Mobile image ratio = approx 2:3.
       Hero height now follows the image instead of forcing 620px.
    */
    .hero.hero-banner.first-slide-active {
        width: 100%;

        height: auto !important;
        min-height: 0 !important;

        aspect-ratio: 2 / 3;

        background: #fbf6ec;
    }


    /* Use separate portrait banner */
    .hero-banner .hero-slide-master {
        background-image:
            url("../images/products/slider-mobile.png") !important;

        /* MOST IMPORTANT */
        background-size: contain !important;

        background-position: center center !important;

        background-repeat: no-repeat !important;

        transform: none !important;
    }


    /*
       First image already contains all its own text,
       so completely remove website hero content from layout.
    */
    .hero-banner.first-slide-active .hero-banner-content {
        display: none !important;

        min-height: 0 !important;
        height: 0 !important;
    }


    /* No overlay on master banner */
    .hero-banner.first-slide-active .hero-overlay {
        display: none !important;
    }


    /* Keep slider dots */
    .hero-banner.first-slide-active .hero-banner-dots {
        display: flex;
        bottom: 12px;
    }


    /*
       Slides 2, 3 and 4:
       restore your existing mobile hero size.
    */
    .hero.hero-banner:not(.first-slide-active) {
        height: 620px !important;
        min-height: 620px !important;

        aspect-ratio: auto;
    }


    .hero.hero-banner:not(.first-slide-active)
    .hero-banner-content {

        display: flex !important;

        min-height: 620px !important;
        height: 100%;
    }


    /* Other slides stay normal */
    .hero-banner .hero-slide:not(.hero-slide-master) {
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

}

/* =========================================================
   MOBILE HERO CONTENT FIX
   ONLY SLIDES 2, 3, 4
   ========================================================= */

@media (max-width: 700px) {

    /* Increase normal content slider slightly */
    .hero.hero-banner:not(.first-slide-active) {
        height: 700px !important;
        min-height: 700px !important;
    }


    /* Stop vertical centering that cuts the heading */
    .hero.hero-banner:not(.first-slide-active)
    .hero-banner-content {

        height: 700px !important;
        min-height: 700px !important;

        align-items: flex-start !important;

        /* move complete content slightly downward */
        padding-top: 28px !important;
        padding-bottom: 25px !important;
    }


    .hero.hero-banner:not(.first-slide-active)
    .hero-content-inner {

        width: 100%;
        max-width: 100%;

        margin: 0 !important;
        transform: none !important;
    }


    /* Heading - prevent top clipping */
    .hero.hero-banner:not(.first-slide-active)
    .hero-main-title {

        font-size: clamp(2.45rem, 11vw, 3rem);

        line-height: 1.10;

        margin-top: 0;
        margin-bottom: 12px;
    }


    /* Sub heading */
    .hero.hero-banner:not(.first-slide-active)
    .hero-sub-title {

        font-size: clamp(1.55rem, 7vw, 2rem);

        line-height: 1.15;

        margin-bottom: 16px;
    }


    /* Description */
    .hero.hero-banner:not(.first-slide-active)
    .lead {

        font-size: .93rem;

        line-height: 1.65;

        margin-bottom: 22px;
    }


    /* Buttons */
    .hero.hero-banner:not(.first-slide-active)
    .hero-actions {

        gap: 10px;

        margin-bottom: 22px;
    }


    .hero.hero-banner:not(.first-slide-active)
    .hero-actions .btn {

        width: 100%;

        min-height: 48px;

        padding: 11px 20px;

        justify-content: center;
    }


    /* Stats */
    .hero.hero-banner:not(.first-slide-active)
    .hero-stats {

        gap: 15px;

        padding-top: 16px;

        justify-content: space-between;
    }


    .hero.hero-banner:not(.first-slide-active)
    .hero-stat strong {

        font-size: 1.2rem;
    }


    .hero.hero-banner:not(.first-slide-active)
    .hero-stat span {

        font-size: .70rem;
    }

}

/* =========================================================
   FINAL DESKTOP MASTER SLIDER FIX
   FULL IMAGE + NO CROP + NO EMPTY SPACE
   ========================================================= */

@media (min-width: 701px) {

    /*
       MASTER SLIDE ONLY

       Image size: 2048 × 682
       Hero automatically gets the SAME ratio.
    */
    .hero.hero-banner.first-slide-active {
        width: 100% !important;

        /* VERY IMPORTANT */
        height: calc(100vw * 682 / 2048) !important;
        min-height: 0 !important;

        padding: 0 !important;
        margin: 0 !important;

        overflow: hidden !important;

        background: transparent !important;
    }


    /* MASTER IMAGE */
    .hero-banner .hero-slide-master {
        position: absolute !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 100% !important;

        background-image:
            url("../images/products/master-slider.png") !important;

        /*
           Because container and image now have same ratio,
           this fills perfectly without crop/distortion.
        */
        background-size: 100% 100% !important;

        background-position: center center !important;

        background-repeat: no-repeat !important;

        transform: none !important;
    }


    /* No overlay on master image */
    .hero-banner.first-slide-active .hero-overlay {
        display: none !important;
    }


    /* No website text on master image */
    .hero-banner.first-slide-active .hero-banner-content {
        display: none !important;
    }

}
/* =========================================================
   PRODUCT PAGE - CATEGORY SECTIONS
   ========================================================= */


/* Category navigation */
.product-category-nav {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;

    margin: -12px 0 65px;
}


.product-category-nav a {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 11px 22px;

    border: 1px solid var(--border);

    border-radius: 999px;

    background: var(--white);

    color: var(--green-deep);

    font-size: .9rem;

    font-weight: 600;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.product-category-nav a:hover {
    background: var(--green-deep);

    border-color: var(--green-deep);

    color: #fff;

    transform: translateY(-2px);
}



/* Main category wrapper */
.product-category {
    margin-bottom: 85px;

    scroll-margin-top: 140px;
}


.product-category:last-child {
    margin-bottom: 0;
}



/* Category heading */
.product-category-head {
    position: relative;

    max-width: 680px;

    margin: 0 auto 38px;

    text-align: center;
}


.category-kicker {
    display: block;

    margin-bottom: 8px;

    color: var(--rust);

    font-size: .8rem;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.product-category-head h2 {
    margin-bottom: 12px;

    color: var(--green-deep);

    font-size: clamp(1.7rem, 2.6vw, 2.3rem);
}


.product-category-head p {
    max-width: 58ch;

    margin: 0 auto;

    color: var(--ink-light);

    line-height: 1.7;
}



/* Small decorative divider */
.product-category-head::after {
    content: "";

    display: block;

    width: 70px;
    height: 3px;

    margin: 22px auto 0;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--green-deep),
            var(--gold),
            var(--rust)
        );
}



/* NON-VEG CATEGORY */
.nonveg-masalas .category-kicker {
    color: var(--rust);
}


/* PODI CATEGORY */
.traditional-podis .category-kicker {
    color: var(--gold);
}



/* Make 2 podi cards neat instead of stretching too much */
.traditional-podis .product-grid {
    grid-template-columns:
        repeat(2, minmax(240px, 320px));

    justify-content: center;
}



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

@media (max-width: 768px) {

    .product-category {
        margin-bottom: 65px;
    }


    .product-category-nav {
        margin-bottom: 50px;
    }


    .product-category-nav a {
        padding: 10px 17px;

        font-size: .84rem;
    }


    .product-category-head {
        margin-bottom: 30px;
    }


    .traditional-podis .product-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 520px) {

    .product-category-nav {
        gap: 8px;
    }


    .product-category-nav a {
        width: 100%;
    }

}

/* =========================================================
   FIX HORIZONTAL PAGE SCROLL
   ========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* =========================================================
   FINAL FLOATER OVERFLOW FIX
   NO HORIZONTAL SCROLL
   NO INNER VERTICAL SCROLLBAR
   ========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: clip;
}


/* Home page floater section */
.floaters {
    position: relative;

    /* clip only horizontal overflow */
    overflow-x: clip;

    /* allow decorative images vertically */
    overflow-y: visible;
}


/* Keep decorative images safely inside width */
.floaters::before {
    left: 0 !important;
}

.floaters::after {
    right: 0 !important;
}



/* Do not push decorative images outside viewport */
.floaters::before {
    left: 0 !important;
}

.floaters::after {
    right: 0 !important;
}

/* =========================================================
   MOBILE FLOATERS
   HOME = SHOW
   VISION & MISSION = HIDE
   ========================================================= */

@media (max-width: 980px) {

    /* =========================
       HOME PAGE - SHOW FLOATERS
       ========================= */

    .home-floaters::before,
    .home-floaters::after {
        display: block !important;
    }


    /* Top-left image */
    .home-floaters::before {
        width: 90px;
        height: 90px;

        top: -5px;
        left: 0 !important;
    }


    /* Bottom-right image */
    .home-floaters::after {
        width: 105px;
        height: 105px;

        bottom: -5px;
        right: 0 !important;
    }


    /* =========================
       VISION & MISSION
       HIDE FLOATERS ON MOBILE
       ========================= */

    .vm-brochure.floaters::before,
    .vm-brochure.floaters::after {
        display: none !important;
    }

}
/* =========================================================
   HEADER FIX — ENQUIRE NOW BUTTON + SPACING
   (keep this at the VERY END of style.css)
   ========================================================= */

/* Less empty space between menu, button and logo */
.site-header .nav-wrap{ gap: 51px !important; }
.site-header .main-nav ul{ gap: 22px !important; }
.site-header .main-nav a{ font-size: .93rem; }

/* Button area must never shrink */
.site-header .nav-cta{
  flex-shrink: 0 !important;
  margin-right: 0 !important;
  align-items: center !important;
}

/* Button: one line, shorter, wider */
.site-header .nav-cta .btn,
.site-header .nav-cta .btn-primary{
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 9px 18px !important;
  line-height: 1.2 !important;
  height: auto !important;
  min-height: 0 !important;
  font-size: .92rem !important;
}

/* Slightly smaller logo so everything fits (optional) */
.site-header .brand-logo{
  height: 72px !important;
  max-height: 72px !important;
  max-width: 220px !important;
}