/* ==================================================================
   Nutrixeal International Pvt. Ltd.
   Brand palette taken directly from the logo:
   leaf green #00B050 · globe blue #0090D0 · wordmark grey #303030
   ================================================================== */

:root{
  /* brand */
  --green:        #00B050;
  --green-600:    #009544;
  --green-700:    #007A38;
  --green-800:    #00592A;
  --green-900:    #013D1E;
  --blue:         #0090D0;
  --blue-600:     #0079AF;
  --blue-700:     #00618C;

  /* neutrals derived from the wordmark grey */
  --ink:          #303030;
  --ink-2:        #4E5A53;
  --ink-3:        #71807A;
  --line:         #E2EDE6;
  --mint:         #F3FAF6;
  --mint-2:       #E9F6EE;
  --white:        #FFFFFF;

  /* type */
  --display: 'Manrope', system-ui, sans-serif;
  --body:    'Inter', system-ui, sans-serif;

  /* shading */
  --sh-sm: 0 2px 6px rgba(1,61,30,.06);
  --sh-md: 0 8px 24px rgba(1,61,30,.08);
  --sh-lg: 0 18px 48px rgba(1,61,30,.12);
  --sh-brand: 0 10px 26px rgba(0,176,80,.24);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;

  --header-h: 78px;
}

/* ---------- base ---------- */
*{ -webkit-tap-highlight-color: transparent; }

html{ scroll-behavior:smooth; scroll-padding-top:150px; }

body{
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
  background: var(--white);
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--display);
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}

a{ text-decoration:none; color: var(--green-700); transition: color .2s ease; }
a:hover{ color: var(--green); }
img{ max-width:100%; }

:focus-visible{ outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background: var(--green); color:#fff; padding:.6rem 1rem; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{ left:0; color:#fff; }

/* ---------- shared type helpers ---------- */
.section{ padding: 84px 0; }
.section-tight{ padding: 62px 0; }
.section-mint{ background: var(--mint); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family: var(--display);
  font-size: .78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color: var(--green-700); margin-bottom:.85rem;
}
/* signature device: the logo's green/blue split, reduced to a two-tone bar */
.eyebrow::before{
  content:""; width:34px; height:4px; border-radius:2px;
  background: linear-gradient(90deg, var(--green) 0 55%, var(--blue) 55% 100%);
}

.section-title{ font-size: clamp(1.85rem, 3.2vw, 2.6rem); margin-bottom: .85rem; }
.section-lead{ font-size: 1.03rem; color: var(--ink-3); max-width: 62ch; margin-bottom:0; }

.text-green{ color: var(--green-700) !important; }
.text-blue{ color: var(--blue-600) !important; }

/* ---------- buttons ---------- */
.btn{
  font-family: var(--display); font-weight: 700; font-size: .93rem;
  border-radius: 999px; padding: .68rem 1.4rem;
  display:inline-flex; align-items:center; gap:.5rem;
  border: 0; transition: transform .18s ease, box-shadow .18s ease, background .2s ease;
}
.btn:active{ transform: translateY(1px); }

.btn-brand{
  background: linear-gradient(135deg, var(--green) 0%, var(--green-600) 100%);
  color:#fff; box-shadow: var(--sh-brand);
}
.btn-brand:hover{ background: linear-gradient(135deg, var(--green-600), var(--green-700)); color:#fff; box-shadow: 0 14px 30px rgba(0,176,80,.32); }

.btn-blue{ background: var(--blue); color:#fff; box-shadow: 0 10px 24px rgba(0,144,208,.22); }
.btn-blue:hover{ background: var(--blue-600); color:#fff; }

.btn-outline-brand{ background: transparent; color: var(--green-700); box-shadow: inset 0 0 0 2px var(--green); }
.btn-outline-brand:hover{ background: var(--green); color:#fff; }

.btn-ghost-light{ background: rgba(255,255,255,.12); color:#fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }
.btn-ghost-light:hover{ background:#fff; color: var(--green-800); }

.btn-lg{ padding: .85rem 1.75rem; font-size: 1rem; }

/* ==================================================================
   HEADER
   ================================================================== */
.topbar{
  background: linear-gradient(90deg, var(--green-800) 0%, var(--green-700) 48%, var(--blue-700) 100%);
  color: rgba(255,255,255,.9);
  font-size: .82rem;
}
.topbar-row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height: 40px; flex-wrap: wrap;
}
.topbar-tags{ display:flex; align-items:center; gap:.65rem; font-weight:500; letter-spacing:.02em; }
.topbar-tags i{ color:#9BE8BE; margin-right:.25rem; }
.topbar-tags .sep{ width:4px; height:4px; border-radius:50%; background: rgba(255,255,255,.45); }
.topbar-contact{ display:flex; align-items:center; gap:1.1rem; }
.topbar-contact a{ color: rgba(255,255,255,.92); display:inline-flex; align-items:center; gap:.4rem; }
.topbar-contact a:hover{ color:#fff; }
.topbar-social{ display:inline-flex; gap:.55rem; padding-left:.4rem; border-left:1px solid rgba(255,255,255,.22); }
.topbar-social a{ font-size:.95rem; }

@media (max-width: 575.98px){
  .topbar-tags span:not(.sep){ font-size:.74rem; }
  .topbar-row{ justify-content:center; }
}

.site-header{ position: sticky; top:0; z-index: 1030; background:#fff; }
.main-nav{
  background:#fff; padding: .55rem 0;
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease, padding .25s ease;
}
.site-header.is-stuck .main-nav{ box-shadow: var(--sh-md); }

.navbar-brand{ padding:0; margin-right: 1.25rem; }
.brand-logo{ height: 52px; width:auto; display:block; transition: height .25s ease; }
.site-header.is-stuck .brand-logo{ height: 44px; }

.navbar-toggler{
  border:0; padding:.35rem .55rem; font-size:1.6rem; color: var(--green-700);
  box-shadow: inset 0 0 0 1.5px var(--line); border-radius: var(--r-sm); line-height:1;
}
.navbar-toggler:focus{ box-shadow: inset 0 0 0 2px var(--green); }

.navbar-nav{ gap:.15rem; }
.main-nav .nav-link{
  font-family: var(--display); font-weight: 600; font-size: .96rem;
  color: var(--ink); padding: .55rem .95rem !important; border-radius: var(--r-sm);
  position: relative; transition: color .2s ease, background .2s ease;
}
.main-nav .nav-link:hover{ color: var(--green-700); background: var(--mint); }
.main-nav .nav-link.active{ color: var(--green-700); }

@media (min-width: 992px){
  .main-nav .nav-link.active::after{
    content:""; position:absolute; left:.95rem; right:.95rem; bottom:.18rem; height:3px;
    border-radius:2px; background: linear-gradient(90deg, var(--green) 0 55%, var(--blue) 55% 100%);
  }
}

.dropdown-menu{
  border:0; border-radius: var(--r-md); padding:.5rem; margin-top:.6rem !important;
  box-shadow: var(--sh-lg); min-width: 250px;
  border-top: 3px solid var(--green);
}
.dropdown-item{
  font-family: var(--display); font-weight:600; font-size:.92rem; color: var(--ink);
  border-radius: var(--r-sm); padding:.6rem .8rem; display:flex; align-items:center; gap:.6rem;
}
.dropdown-item i{ color: var(--green); font-size:1rem; }
.dropdown-item:hover, .dropdown-item:focus{ background: var(--mint-2); color: var(--green-800); }

/* offcanvas mobile drawer */
.nav-offcanvas{ width: min(340px, 86vw); }
@media (max-width: 991.98px){
  .nav-offcanvas .offcanvas-header{ border-bottom:1px solid var(--line); }
  .nav-offcanvas .brand-logo{ height:44px; }
  .main-nav .nav-link{ padding:.75rem .6rem !important; border-bottom:1px solid var(--line); border-radius:0; }
  .main-nav .nav-link:hover{ background:transparent; }
  .navbar-nav{ gap:0; }
  .dropdown-menu{ box-shadow:none; border-top:0; background: var(--mint); margin-top:0 !important; }
}
.offcanvas-extra{ margin-top:1.5rem; }
.offcanvas-extra-title{
  font-family: var(--display); font-weight:800; font-size:.76rem; letter-spacing:.14em;
  text-transform:uppercase; color: var(--green-700); margin-bottom:.5rem;
}
.offcanvas-extra > a:not(.btn){
  display:block; padding:.4rem 0; color: var(--ink-2); font-size:.93rem; font-weight:500;
}
.offcanvas-extra > a:not(.btn):hover{ color: var(--green); }
.offcanvas-contact{ margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--line); display:grid; gap:.4rem; }
.offcanvas-contact a{ color: var(--ink); font-weight:600; font-size:.92rem; display:flex; gap:.55rem; align-items:center; }
.offcanvas-contact i{ color: var(--green); }

/* category ribbon */
.cat-ribbon{ background: var(--mint); border-bottom:1px solid var(--line); }
.cat-ribbon-list{
  list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:.25rem; flex-wrap:wrap;
}
.cat-ribbon-list > li > a{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family: var(--display); font-weight:600; font-size:.86rem; color: var(--ink-2);
  padding:.62rem .85rem; border-bottom:3px solid transparent; transition: all .2s ease;
}
.cat-ribbon-list > li > a i{ color: var(--blue); font-size:.95rem; }
.cat-ribbon-list > li > a:hover{ color: var(--green-800); border-bottom-color: var(--green); }
.ribbon-note{
  margin-left:auto; font-size:.8rem; color: var(--ink-3); display:flex; align-items:center; gap:.4rem;
}
.ribbon-note i{ color: var(--green); }

/* ==================================================================
   HERO
   ================================================================== */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 480px at 88% 12%, rgba(0,144,208,.10), transparent 60%),
    radial-gradient(760px 500px at 6% 88%, rgba(0,176,80,.12), transparent 62%),
    var(--mint);
  padding: 76px 0 96px;
}
.hero::after{
  content:""; position:absolute; inset:auto 0 -1px 0; height:70px;
  background:#fff; clip-path: ellipse(72% 100% at 50% 100%);
}
.hero .container{ position:relative; z-index:2; }

.hero-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; border-radius:999px; padding:.42rem .95rem .42rem .5rem;
  box-shadow: var(--sh-sm); font-size:.82rem; font-weight:600; color: var(--ink-2);
  margin-bottom:1.4rem;
}
.hero-badge b{
  background: linear-gradient(135deg,var(--green),var(--blue)); color:#fff;
  border-radius:999px; padding:.16rem .6rem; font-size:.72rem; letter-spacing:.06em;
  font-family: var(--display); text-transform:uppercase;
}

.hero-title{
  font-size: clamp(2.15rem, 4.6vw, 3.5rem);
  line-height:1.1; margin-bottom:1.1rem;
}
.hero-title .accent{
  background: linear-gradient(120deg, var(--green) 0%, var(--blue) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-lead{ font-size:1.06rem; color: var(--ink-2); max-width: 54ch; margin-bottom:1.9rem; }

.hero-actions{ display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:2.2rem; }

.hero-points{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.hero-points div{ display:flex; align-items:center; gap:.55rem; font-size:.9rem; font-weight:600; color: var(--ink); }
.hero-points i{ color: var(--green); font-size:1.1rem; }

.hero-visual{ position:relative; }
.hero-stack{
  position:relative; max-width: 460px; margin-left:auto; padding-bottom: 34px;
}
.hero-frame{ position:relative; border-radius: 24px; overflow:hidden; }
.hero-frame-a{
  width: 80%; margin-left:auto; aspect-ratio: 4/5; box-shadow: var(--sh-lg);
}
.hero-frame-b{
  position:absolute; left:0; bottom:0; width: 56%; aspect-ratio: 4/3;
  border-radius: 18px; border: 6px solid #fff; box-shadow: var(--sh-md);
}
.hero-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

.hero-chip{
  position:absolute; z-index:4; background:#fff; border-radius: var(--r-md);
  box-shadow: var(--sh-lg); padding:.8rem 1rem; display:flex; align-items:center; gap:.7rem;
}
.hero-chip .chip-ico{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  color:#fff; font-size:1.15rem; flex:none;
}
.hero-chip .chip-txt{ display:block; text-align:left; }
.hero-chip b{ font-family: var(--display); font-size:1.12rem; color: var(--ink); display:block; line-height:1.15; }
.hero-chip .chip-txt span{ font-size:.76rem; color: var(--ink-3); }
.hero-chip-1{ left:-8px; top:28px; }
.hero-chip-1 .chip-ico{ background: linear-gradient(135deg,var(--green),var(--green-700)); }
.hero-chip-2{ right:-14px; bottom:26px; }
.hero-chip-2 .chip-ico{ background: linear-gradient(135deg,var(--blue),var(--blue-700)); }

@media (max-width: 991.98px){
  .hero{ padding: 52px 0 76px; text-align:center; }
  .hero-lead{ margin-left:auto; margin-right:auto; }
  .hero-actions, .hero-points{ justify-content:center; }
  .hero-visual{ margin-top:3rem; }
  .hero-stack{ margin: 0 auto; }
}
@media (max-width: 575.98px){
  .hero-stack{ max-width: 330px; padding-bottom: 20px; }
  .hero-chip{ padding:.5rem .7rem; gap:.5rem; }
  .hero-chip .chip-ico{ width:34px; height:34px; border-radius:10px; font-size:.95rem; }
  .hero-chip b{ font-size:.92rem; }
  .hero-chip .chip-txt span{ font-size:.66rem; }
  .hero-chip-1{ left:-10px; top:14px; }
  .hero-chip-2{ right:-10px; bottom:14px; }
}

/* ==================================================================
   CATEGORY CARDS
   ================================================================== */
.cat-card{
  display:block; height:100%; background:#fff; border-radius: var(--r-lg);
  padding: 1.6rem 1.25rem; text-align:center;
  border:1px solid var(--line); box-shadow: var(--sh-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position:relative; overflow:hidden;
}
.cat-card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:4px;
  background: linear-gradient(90deg, var(--green) 0 55%, var(--blue) 55% 100%);
  transform: scaleX(0); transform-origin:left; transition: transform .3s ease;
}
.cat-card:hover{ transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: transparent; }
.cat-card:hover::before{ transform: scaleX(1); }
.cat-ico{
  width:60px; height:60px; margin:0 auto 1rem; border-radius:18px;
  display:grid; place-items:center; font-size:1.6rem; color:#fff;
  background: linear-gradient(135deg, var(--green), var(--green-700));
  box-shadow: 0 8px 18px rgba(0,176,80,.24);
}
.row > [class*="col"]:nth-child(even) .cat-ico{
  background: linear-gradient(135deg, var(--blue), var(--blue-700));
  box-shadow: 0 8px 18px rgba(0,144,208,.24);
}
.cat-card h3{ font-size:1.02rem; margin-bottom:.35rem; }
.cat-card p{ font-size:.85rem; color: var(--ink-3); margin:0; }

/* ==================================================================
   ABOUT
   ================================================================== */
.about-media{ position:relative; max-width: 500px; margin: 0 auto; padding-bottom: 40px; padding-left: 6px; }
.about-img-main{
  border-radius: 22px; overflow:hidden; box-shadow: var(--sh-lg); aspect-ratio: 5/6; width: 82%; margin-left:auto;
}
.about-img-main img{ width:100%; height:100%; object-fit:cover; }
.about-img-sub{
  position:absolute; left:0; bottom:0; width:54%; aspect-ratio: 4/3;
  border-radius: 18px; overflow:hidden; border:6px solid #fff; box-shadow: var(--sh-md);
}
.about-img-sub img{ width:100%; height:100%; object-fit:cover; }
.about-years{
  position:absolute; left:-10px; top:24px; z-index:3;
  background: linear-gradient(135deg,var(--green),var(--green-700)); color:#fff;
  border-radius: 18px; padding:.9rem 1.1rem; text-align:center; box-shadow: var(--sh-brand);
}
.about-years b{ display:block; font-family: var(--display); font-size:1.75rem; line-height:1; }
.about-years span{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; opacity:.92; }

.check-list{ list-style:none; padding:0; margin:1.5rem 0 1.9rem; display:grid; gap:.7rem; }
.check-list li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.96rem; }
.check-list i{ color: var(--green); font-size:1.15rem; line-height:1.4; flex:none; }
.check-list b{ color: var(--ink); font-weight:600; }

@media (max-width: 991.98px){
  .about-media{ margin: 0 auto 2.5rem; }
}

/* ==================================================================
   PRODUCTS
   ================================================================== */
.filter-bar{
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin: 2.2rem 0 2.4rem;
}
.filter-btn{
  font-family: var(--display); font-weight:600; font-size:.88rem;
  background:#fff; color: var(--ink-2); border:1px solid var(--line);
  border-radius:999px; padding:.55rem 1.15rem; cursor:pointer;
  transition: all .2s ease; display:inline-flex; align-items:center; gap:.45rem;
}
.filter-btn i{ font-size:.95rem; color: var(--blue); transition: color .2s ease; }
.filter-btn:hover{ border-color: var(--green); color: var(--green-800); }
.filter-btn.is-active{
  background: linear-gradient(135deg,var(--green),var(--green-600));
  color:#fff; border-color:transparent; box-shadow: var(--sh-brand);
}
.filter-btn.is-active i{ color:#fff; }

.product-card{
  height:100%; background:#fff; border-radius: var(--r-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow: var(--sh-sm);
  transition: transform .25s ease, box-shadow .25s ease;
  display:flex; flex-direction:column;
}
.product-card:hover{ transform: translateY(-6px); box-shadow: var(--sh-lg); }
.product-thumb{ position:relative; aspect-ratio: 1/1; overflow:hidden; background: var(--mint-2); }
.product-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.product-card:hover .product-thumb img{ transform: scale(1.07); }
.product-tag{
  position:absolute; top:12px; left:12px; z-index:2;
  background: rgba(255,255,255,.94); backdrop-filter: blur(4px);
  color: var(--green-800); font-family: var(--display); font-weight:700;
  font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.3rem .65rem; border-radius:999px; box-shadow: var(--sh-sm);
}
.product-body{ padding:1.1rem 1.15rem 1.25rem; display:flex; flex-direction:column; flex:1; }
.product-body h3{ font-size:1.08rem; margin-bottom:.3rem; }
.product-crop{ font-size:.78rem; color: var(--blue-600); font-weight:600; margin-bottom:.5rem; }
.product-body p{ font-size:.87rem; color: var(--ink-3); margin-bottom:1rem; }
.product-link{
  margin-top:auto; font-family: var(--display); font-weight:700; font-size:.86rem;
  color: var(--green-700); display:inline-flex; align-items:center; gap:.4rem;
}
.product-link i{ transition: transform .2s ease; }
.product-link:hover i{ transform: translateX(3px); }

.is-hidden{ display:none !important; }

/* ==================================================================
   WHY / FEATURE BAND
   ================================================================== */
.band{
  position:relative; overflow:hidden; color:#fff;
  background: linear-gradient(135deg, var(--green-900) 0%, var(--green-800) 42%, var(--blue-700) 100%);
  padding: 82px 0;
}
.band::before{
  content:""; position:absolute; width:640px; height:640px; right:-190px; top:-260px;
  border-radius:50%; background: rgba(255,255,255,.05);
}
.band::after{
  content:""; position:absolute; width:420px; height:420px; left:-160px; bottom:-200px;
  border-radius:50%; background: rgba(0,176,80,.16);
}
.band .container{ position:relative; z-index:2; }
.band .section-title{ color:#fff; }
.band .eyebrow{ color:#9BE8BE; }
.band .eyebrow::before{ background: linear-gradient(90deg,#9BE8BE 0 55%, #7FD3F5 55% 100%); }
.band .section-lead{ color: rgba(255,255,255,.78); }

.feature{
  background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13);
  border-radius: var(--r-lg); padding: 1.5rem 1.35rem; height:100%;
  transition: background .25s ease, transform .25s ease;
}
.feature:hover{ background: rgba(255,255,255,.13); transform: translateY(-4px); }
.feature-ico{
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center;
  background: rgba(255,255,255,.14); color:#9BE8BE; font-size:1.4rem; margin-bottom:1rem;
}
.feature h3{ color:#fff; font-size:1.02rem; margin-bottom:.4rem; }
.feature p{ color: rgba(255,255,255,.74); font-size:.87rem; margin:0; }

/* stats */
.stat-row{ margin-top: 3.2rem; padding-top: 2.4rem; border-top:1px solid rgba(255,255,255,.16); }
.stat b{
  display:block; font-family: var(--display); font-weight:800;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); color:#fff; line-height:1;
}
.stat span{ font-size:.85rem; color: rgba(255,255,255,.72); }

/* ==================================================================
   VIDEO
   ================================================================== */
.video-card{
  position:relative; display:block; border-radius: var(--r-lg); overflow:hidden;
  aspect-ratio: 4/5; box-shadow: var(--sh-md); background: var(--ink);
}
.video-card img{
  width:100%; height:100%; object-fit:cover; opacity:.86; transition: transform .6s ease, opacity .3s ease;
}
.video-card:hover img{ transform: scale(1.06); opacity:.72; }
.video-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(1,61,30,.86) 0%, rgba(1,61,30,.15) 52%, transparent 100%);
}
.video-play{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); z-index:3;
  width:66px; height:66px; border-radius:50%; display:grid; place-items:center;
  background: rgba(255,255,255,.94); color: var(--green-700); font-size:1.5rem;
  box-shadow: 0 10px 26px rgba(0,0,0,.28); transition: transform .25s ease, background .25s ease;
}
.video-card:hover .video-play{ transform: translate(-50%,-50%) scale(1.1); background:#fff; }
.video-meta{ position:absolute; left:1.1rem; right:1.1rem; bottom:1.1rem; z-index:3; color:#fff; }
.video-meta span{
  display:inline-block; font-size:.7rem; font-family: var(--display); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:#9BE8BE; margin-bottom:.25rem;
}
.video-meta h3{ color:#fff; font-size:1rem; margin:0; }

.ratio-video iframe{ border:0; border-radius: var(--r-md); }
.modal-content{ border:0; border-radius: var(--r-md); overflow:hidden; }

/* ==================================================================
   GALLERY
   ================================================================== */
.gal-item{
  display:block; position:relative; border-radius: var(--r-md); overflow:hidden;
  aspect-ratio: 4/5; box-shadow: var(--sh-sm);
}
.gal-item img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.gal-item::after{
  content:"\F52A"; font-family:'bootstrap-icons'; font-size:1.5rem;
  position:absolute; inset:0; display:grid; place-items:center; color:#fff;
  background: linear-gradient(to top, rgba(0,89,42,.78), rgba(0,144,208,.28));
  opacity:0; transition: opacity .3s ease;
}
.gal-item:hover img{ transform: scale(1.08); }
.gal-item:hover::after{ opacity:1; }

/* ==================================================================
   REVIEWS
   ================================================================== */
.review-card{
  background:#fff; border-radius: var(--r-lg); padding:1.7rem 1.5rem;
  border:1px solid var(--line); box-shadow: var(--sh-sm); height:100%;
  display:flex; flex-direction:column; position:relative;
}
.review-card::before{
  content:"\201C"; position:absolute; right:1.2rem; top:.2rem;
  font-family: var(--display); font-size:4.2rem; line-height:1; color: var(--mint-2);
}
.review-stars{ color:#F5A623; font-size:.92rem; margin-bottom:.8rem; letter-spacing:.08em; }
.review-text{ font-size:.94rem; color: var(--ink-2); margin-bottom:1.4rem; position:relative; z-index:2; }
.review-who{ display:flex; align-items:center; gap:.8rem; margin-top:auto; }
.review-who .review-avatar{
  width:48px; height:48px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-family: var(--display); font-weight:800; font-size:1.15rem; color:#fff;
  background: linear-gradient(135deg, var(--green), var(--blue));
}
.review-who b{ display:block; font-family: var(--display); font-size:.94rem; color: var(--ink); line-height:1.3; }
.review-who > div > span{ font-size:.78rem; color: var(--ink-3); }

.rev-controls{ display:flex; gap:.6rem; justify-content:center; margin-top:2rem; }
.rev-btn{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:#fff; color: var(--green-700); font-size:1.1rem; cursor:pointer;
  transition: all .2s ease; display:grid; place-items:center;
}
.rev-btn:hover{ background: var(--green); color:#fff; border-color: var(--green); box-shadow: var(--sh-brand); }

/* ==================================================================
   CTA
   ================================================================== */
.cta{
  border-radius: 26px; padding: 3rem 2.4rem; position:relative; overflow:hidden;
  background: linear-gradient(120deg, var(--green-800) 0%, var(--green-700) 55%, var(--blue-600) 100%);
  color:#fff;
}
.cta::before{
  content:""; position:absolute; width:420px; height:420px; right:-140px; top:-160px;
  border-radius:50%; background: rgba(255,255,255,.08);
}
.cta .container-inner{ position:relative; z-index:2; }
.cta h2{ color:#fff; font-size: clamp(1.6rem,3vw,2.15rem); margin-bottom:.6rem; }
.cta p{ color: rgba(255,255,255,.82); margin-bottom:0; }
@media (max-width: 767.98px){ .cta{ padding: 2.2rem 1.4rem; text-align:center; } }

/* ==================================================================
   FOOTER
   ================================================================== */
.site-footer{
  background: var(--green-900); color: rgba(255,255,255,.68);
  padding: 74px 0 0; position:relative; overflow:hidden; font-size:.92rem;
}
.footer-leaf{
  position:absolute; right:-140px; top:-120px; width:460px; height:460px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(0,176,80,.24), transparent 62%);
  pointer-events:none;
}
.site-footer .container{ position:relative; z-index:2; }

.footer-brand{ display:flex; align-items:center; gap:.85rem; margin-bottom:1.1rem; }
.footer-mark{ width:54px; height:auto; }
.footer-brand-name{
  display:block; font-family: var(--display); font-weight:800; font-size:1.5rem;
  color:#fff; line-height:1;
}
.footer-brand-sub{
  display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:#9BE8BE; margin-top:.2rem;
}
.footer-text{ margin-bottom:1.3rem; }
.footer-social{ display:flex; gap:.55rem; }
.footer-social a{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background: rgba(255,255,255,.08); color:#fff; font-size:1rem; transition: all .2s ease;
}
.footer-social a:hover{ background: var(--green); transform: translateY(-3px); }

.footer-title{
  color:#fff; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:1.15rem; font-weight:800;
}
.footer-links{ list-style:none; padding:0; margin:0; display:grid; gap:.55rem; }
.footer-links a{ color: rgba(255,255,255,.68); }
.footer-links a:hover{ color:#9BE8BE; padding-left:4px; }
.footer-links a{ transition: color .2s ease, padding-left .2s ease; display:inline-block; }

.footer-contact{ list-style:none; padding:0; margin:0; display:grid; gap:.9rem; }
.footer-contact li{ display:flex; gap:.7rem; }
.footer-contact i{ color:#9BE8BE; font-size:1rem; margin-top:.25rem; }
.footer-contact a{ color: rgba(255,255,255,.72); }
.footer-contact a:hover{ color:#fff; }

.footer-bottom{
  margin-top: 3.2rem; border-top:1px solid rgba(255,255,255,.1); padding: 1.1rem 0;
  font-size:.84rem;
}
.footer-bottom .container{ display:flex; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }
.footer-bottom p{ margin:0; color: rgba(255,255,255,.55); }
.footer-bottom a{ color:#9BE8BE; }

/* ==================================================================
   FLOATING BUTTONS
   ================================================================== */
.wa-float{
  position:fixed; left:20px; bottom:22px; z-index:1040;
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:#25D366; color:#fff; font-size:1.55rem; box-shadow: 0 8px 22px rgba(37,211,102,.42);
  transition: transform .2s ease;
}
.wa-float:hover{ color:#fff; transform: scale(1.08); }

.to-top{
  position:fixed; right:20px; bottom:22px; z-index:1040;
  width:46px; height:46px; border-radius:50%; border:0;
  background: var(--green-700); color:#fff; font-size:1.1rem;
  box-shadow: var(--sh-md); opacity:0; visibility:hidden;
  transition: opacity .25s ease, visibility .25s ease, transform .2s ease;
}
.to-top.show{ opacity:1; visibility:visible; }
.to-top:hover{ transform: translateY(-3px); background: var(--green); }

@media (max-width: 575.98px){
  .wa-float{ width:48px; height:48px; font-size:1.4rem; left:14px; bottom:16px; }
  .to-top{ width:42px; height:42px; right:14px; bottom:16px; }
}

/* ==================================================================
   REVEAL ON SCROLL
   ================================================================== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- inner page banner (used by about/services/products/contact) ---------- */
.page-banner{
  background: linear-gradient(120deg, var(--green-800) 0%, var(--green-700) 55%, var(--blue-700) 100%);
  color:#fff; padding: 66px 0; position:relative; overflow:hidden;
}
.page-banner::before{
  content:""; position:absolute; width:520px; height:520px; right:-170px; top:-210px;
  border-radius:50%; background: rgba(255,255,255,.07);
}
.page-banner .container{ position:relative; z-index:2; }
.page-banner h1{ color:#fff; font-size: clamp(1.8rem,3.6vw,2.6rem); margin-bottom:.4rem; }
.page-banner .breadcrumb{ margin:0; }
.page-banner .breadcrumb a{ color:#9BE8BE; }
.page-banner .breadcrumb-item+.breadcrumb-item::before{ color: rgba(255,255,255,.45); }
.page-banner .breadcrumb-item.active{ color: rgba(255,255,255,.8); }