/* ===================================================
   Imagicaa Welfare Foundation — Shared Stylesheet
   Pure Bootstrap 5 + Font Awesome + AOS
=================================================== */
:root{
  --navy:#093B37;
  --navy-deep:#0B2A28;
  --ivory:#FBF8F3;
  --ivory-dim:#F0EEEA;
  --teal:#0E6660;
  --teal-light:#569490;
  --teal-pale:#E9F3F1;
  --gold:#F1A73B;
  --gold-deep:#C9821F;
  --gold-light:#F5C072;
  --ink:#0B2A28;
  --ink-soft:#4A5856;
  --rose:#B23A6B;
  --rose-deep:#923058;
  --rose-light:#CB799A;
  --line:#DEE6E3;
  --font-display:"Fraunces","Georgia",serif;
  --font-body:"Work Sans","Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono","Courier New",monospace;
}

html{
  overflow-x:hidden;
  overflow-x:clip; /* clip (not hidden) so it doesn't break the sticky navbar below — an
                       overflow value other than visible on an ancestor stops position:sticky
                       from working; clip prevents horizontal scroll without that side-effect. */
  width:100%;
  /* Stops the browser's "double-tap to zoom" gesture, which is what was
     zooming into a single block on mobile and making the page look cut
     off on one side with blank space on the other. Pinch-to-zoom (and
     therefore accessibility zoom) still works fine. */
  touch-action:manipulation;
}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--ivory);
  overflow-x:hidden;
  overflow-x:clip;
  width:100%;
  max-width:100%;
}
h1,h2,h3,h4,h5,h6,.font-heading{ font-family:var(--font-display); font-weight:700; color:var(--navy); letter-spacing:-0.01em; }
h1 em,h2 em,h3 em,h4 em,h5 em,h6 em,.font-heading em{ font-style:italic; font-weight:600; }
.font-serif{ font-family:var(--font-display); }
a{ text-decoration:none; }
::selection{ background:var(--gold-light); }

.eyebrow{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.75rem;
  font-weight:700;
  color:var(--teal);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--gold); display:inline-block; }
.eyebrow.light{ color:var(--gold-light); }
.eyebrow.light::before{ background:var(--gold-light); }

.text-teal{ color:var(--teal) !important; }
.text-gold{ color:var(--gold) !important; }
.bg-navy{ background:var(--navy) !important; }
.bg-navy-deep{ background:var(--navy-deep) !important; }
.bg-ivory-dim{ background:var(--ivory-dim) !important; }
.bg-teal{ background:var(--teal) !important; }

/* Buttons — premium gradient fills with a soft diagonal sheen on hover */
.btn-gold, .btn-teal-fill, .btn-outline-light-custom, .btn-outline-navy{
  position:relative; overflow:hidden; isolation:isolate; letter-spacing:.01em;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn-gold i, .btn-teal-fill i, .btn-outline-light-custom i, .btn-outline-navy i{ font-size:.92em; }
.btn-gold::before, .btn-teal-fill::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 48%, rgba(255,255,255,0) 66%);
  transform:translateX(-120%); transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.btn-gold:hover::before, .btn-teal-fill:hover::before{ transform:translateX(120%); }
.btn-gold{
  background:linear-gradient(135deg,var(--gold-deep) 0%, var(--gold) 55%, var(--gold-light) 100%); border-color:var(--gold); color:var(--navy-deep); font-weight:700;
  border-radius:10px; padding:.75rem 1.8rem; transition:transform .3s, box-shadow .3s;
  box-shadow:0 14px 30px -14px rgba(242,169,62,.55);
}
.btn-gold:hover{ background:linear-gradient(135deg,var(--gold-light),var(--gold)); border-color:var(--gold-light); color:var(--navy-deep); transform:translateY(-3px); box-shadow:0 20px 38px -14px rgba(242,169,62,.65); }
.btn-teal-fill{ background:linear-gradient(135deg,var(--teal),var(--teal-light)); border-color:var(--teal); color:#fff; border-radius:10px; padding:.75rem 1.8rem; font-weight:700; transition:transform .3s, box-shadow .3s; box-shadow:0 14px 30px -14px rgba(46,125,91,.55); }
.btn-teal-fill:hover{ background:linear-gradient(135deg,var(--teal-light),var(--teal)); border-color:var(--teal-light); color:#fff; transform:translateY(-3px); box-shadow:0 20px 38px -14px rgba(46,125,91,.6); }
.btn-outline-light-custom{ border:1.5px solid rgba(255,255,255,.55); color:#fff; border-radius:10px; padding:.75rem 1.8rem; font-weight:600; transition:.3s; }
.btn-outline-light-custom:hover{ background:rgba(255,255,255,.14); border-color:#fff; color:#fff; transform:translateY(-3px); }
.btn-outline-navy{ border:1.5px solid rgba(27,77,62,.2); color:var(--navy); border-radius:10px; padding:.75rem 1.8rem; font-weight:600; transition:.3s; }
.btn-outline-navy:hover{ border-color:var(--teal); color:var(--teal); background:var(--teal-pale); transform:translateY(-3px); }
.btn-sm-pill{ padding:.5rem 1.1rem; font-size:.8rem; border-radius:8px; }

/* Donate CTA — a distinct, always-recognizable highlight so giving is never
   mistaken for any other action on the page. Warm rose vs. the site's gold,
   with a slow breathing glow (not a flashy blink) so it reads as inviting,
   not alarming. */
.btn-donate{
  background:linear-gradient(135deg,var(--rose),var(--rose-light));
  border-color:var(--rose); color:#fff !important; font-weight:800;
  border-radius:10px; padding:.75rem 1.9rem;
  box-shadow:0 16px 34px -14px rgba(193,60,42,.6), 0 0 0 0 rgba(225,92,77,.55);
  animation:donateGlow 2.8s ease-in-out infinite;
}
.btn-donate:hover{
  background:linear-gradient(135deg,var(--rose-light),var(--rose)); border-color:var(--rose-light); color:#fff;
  transform:translateY(-3px); box-shadow:0 22px 42px -14px rgba(193,60,42,.7);
  animation-play-state:paused;
}
.btn-donate.btn-sm-pill{ padding:.5rem 1.2rem; }
@keyframes donateGlow{
  0%,100%{ box-shadow:0 16px 34px -14px rgba(193,60,42,.6), 0 0 0 0 rgba(225,92,77,.45); }
  50%{ box-shadow:0 16px 34px -14px rgba(193,60,42,.6), 0 0 0 9px rgba(225,92,77,0); }
}
.btn-outline-donate{
  border:1.5px solid var(--rose); color:var(--rose); border-radius:10px; padding:.75rem 1.8rem; font-weight:700; transition:.3s;
  background:rgba(225,92,77,.06);
}
.btn-outline-donate:hover{ background:var(--rose); border-color:var(--rose); color:#fff; transform:translateY(-3px); }
.text-rose{ color:var(--rose) !important; }

/* Accessible focus ring across every interactive control (quality floor) */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2.5px solid var(--gold); outline-offset:3px; border-radius:6px;
}

/* Top bar */
.topbar{ background:linear-gradient(90deg, var(--navy-deep) 0%, #163B30 50%, var(--navy-deep) 100%); color:rgba(255,255,255,.8); font-size:.82rem; }
.topbar a{ color:rgba(255,255,255,.8); }
.topbar a:hover{ color:var(--gold-light); }
.topbar .social-dot{
  width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.08);
  display:inline-flex; align-items:center; justify-content:center; transition:.3s; margin-left:6px;
}
.topbar .social-dot:hover{ background:var(--gold); color:var(--navy-deep) !important; }

/* Social icon row under the contact map */
.contact-map-social{ display:flex; gap:12px; }
.contact-map-social .social-dot{
  width:42px; height:42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:.88rem; border:1.5px solid rgba(27,77,62,.12); box-shadow:0 8px 18px -12px rgba(27,77,62,.35);
  transition:.3s cubic-bezier(.22,1,.36,1);
}
.contact-map-social .social-dot:hover{
  background:var(--teal) !important; color:#fff !important; border-color:var(--teal);
  transform:translateY(-4px) scale(1.06); box-shadow:0 16px 28px -12px rgba(27,77,62,.45);
}

/* Navbar */
.navbar-main{ background:rgba(251,247,239,.95); backdrop-filter:blur(12px); transition:.3s; padding-top:16px; padding-bottom:16px; z-index:1030; }
.navbar-main.sticky-top{ top:0; }
.navbar-main.scrolled{ box-shadow:0 10px 30px -18px rgba(15,50,41,.35); }
.navbar-brand-custom{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  width:44px; height:44px; border-radius:50%;
  background:conic-gradient(from 200deg, var(--teal), var(--gold), var(--teal-light), var(--teal));
  display:flex; align-items:center; justify-content:center;
}
.brand-mark span{
  width:31px; height:31px; border-radius:50%; background:var(--ivory);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; color:var(--navy);
}
.brand-text b{ font-family:var(--font-body); font-weight:800; color:var(--navy); display:block; font-size:1.05rem; line-height:1.1; }
.brand-text small{ font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); font-weight:700; }

/* Logo chip for dark backgrounds (mobile nav header, footer) */
.brand-logo-chip{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ivory); border-radius:10px; padding:6px 10px;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.35);
}
.brand-logo-chip img{ width:120px; display:block; }

/* Navbar links — soft pill hover instead of underline */
.navbar-nav .nav-link{
  font-weight:600; color:var(--navy) !important; position:relative; z-index:1;
  padding:10px 16px !important; border-radius:8px; margin:0 2px; white-space:nowrap; font-size:1.02rem;
  transition:color .3s;
}
.navbar-nav .nav-link::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:8px;
  background:linear-gradient(135deg, rgba(242,169,62,.16), rgba(46,125,91,.12)); opacity:0; transform:scale(.82);
  transition:opacity .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1);
}
.navbar-nav .nav-link:hover::before, .navbar-nav .nav-link.active::before{ opacity:1; transform:scale(1); }
.navbar-nav .nav-link.active, .navbar-nav .nav-link:hover{ color:var(--teal) !important; }
.navbar-nav .nav-link.active{ font-weight:700; }
.navbar-nav .nav-link.active::after{
  content:""; position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--gold);
}

/* Our Programs — hover mega-submenu */
.nav-has-submenu{ position:relative; }
.nav-caret{ font-size:.6rem; margin-left:4px; transition:transform .3s; position:relative; top:-1px; }
.nav-has-submenu:hover .nav-caret{ transform:rotate(180deg); }
.nav-submenu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  width:460px; max-width:88vw; padding-top:16px; z-index:600;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.nav-has-submenu:hover .nav-submenu{ opacity:1; visibility:visible; }
/* Stops the "Our Services" mega-menu from flashing open the instant a new
   page loads (the cursor is often still sitting over the nav item you just
   clicked, so :hover would otherwise fire immediately and then close again
   as soon as you move — this reads as a blink/flicker between page loads).
   script.js adds this class on every load and removes it on the first real
   mouse movement, so genuine hover still works normally right after. */
body.js-nav-settling .nav-has-submenu:hover .nav-submenu{ opacity:0 !important; visibility:hidden !important; }
body.js-nav-settling .nav-has-submenu:hover .nav-submenu-inner{ transform:translateY(10px) !important; }
.nav-submenu-inner{
  background:#fff; border-radius:16px; padding:16px;
  box-shadow:0 30px 60px -20px rgba(15,50,41,.35); border:1px solid rgba(27,77,62,.06);
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
  transform:translateY(10px); transition:transform .35s cubic-bezier(.22,1,.36,1);
  position:relative;
}
.nav-has-submenu:hover .nav-submenu-inner{ transform:translateY(0); }
.nav-submenu-inner::before{
  content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:14px; height:14px; background:#fff;
  border-left:1px solid rgba(27,77,62,.06); border-top:1px solid rgba(27,77,62,.06);
}
.nav-submenu-item{
  display:flex; align-items:center; gap:12px; padding:10px; border-radius:10px;
  transition:background .25s; grid-column:span 1;
}
.nav-submenu-item:hover{ background:var(--teal-pale); }
.nsi-icon{
  width:38px; height:38px; border-radius:10px; background:var(--teal-pale); color:var(--teal);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.9rem; transition:.25s;
}
.nav-submenu-item:hover .nsi-icon{ background:var(--teal); color:#fff; }
.nav-submenu-item strong{ display:block; font-size:.82rem; color:var(--navy); font-weight:700; line-height:1.3; }
.nav-submenu-item small{ display:block; font-size:.71rem; color:var(--ink-soft); }
@media(max-width:1400px){ .nav-submenu{ width:420px; } }

/* Tighten nav for laptop / narrow desktop widths so it never wraps */
.nav-ctas .btn{ white-space:nowrap; }
@media(min-width:1200px) and (max-width:1500px){
  .navbar-nav .nav-link{ margin:0 0; padding:10px 10px !important; font-size:.88rem; letter-spacing:-.01em; }
  .nav-ctas{ gap:8px !important; }
  .nav-ctas .btn{ padding:.6rem 1rem !important; font-size:.78rem !important; }
  .brand-text b{ font-size:.95rem; }
  .brand-text small{ font-size:.58rem; }
}
/* Extra-tight sub-range — the "Annapurna Jan Aahar" nav label is longer
   than the other items, so give this narrow band a little more shrink. */
@media(min-width:1200px) and (max-width:1360px){
  .navbar-nav .nav-link{ padding:10px 8px !important; font-size:.82rem; }
}

/* Annapurna Jan Aahar — always-highlighted nav item (signature initiative) */
.navbar-nav .nav-link-featured{
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%) !important;
  color:var(--navy-deep) !important; font-weight:700; box-shadow:0 10px 20px -10px rgba(242,169,62,.6);
}
.navbar-nav .nav-link-featured::before{ display:none; }
.navbar-nav .nav-link-featured:hover{ transform:translateY(-2px); box-shadow:0 14px 26px -10px rgba(242,169,62,.7); color:var(--navy-deep) !important; }
.navbar-nav .nav-link-featured i{ margin-right:5px; font-size:.85em; }
@media(min-width:1200px) and (max-width:1500px){ .navbar-nav .nav-link-featured{ padding:10px 12px !important; } }

.mnav-link-featured{ background:rgba(242,169,62,.14) !important; }
.mnav-link-featured i:first-child{ background:var(--gold) !important; color:var(--navy-deep) !important; }
.mnav-link-featured span{ color:var(--gold-light); }
@media(min-width:1200px){
  .navbar-nav{ flex-wrap:nowrap; }
  .navbar-nav .nav-link{ white-space:nowrap; }
}


/* ===================================================
   HERO SLIDER — FULL-BLEED PREMIUM LAYOUT
   (full-width photo background, no stock/placeholder art —
   only the Foundation's own photographs)
=================================================== */
.hero-slider.hero-full{ position:relative; background:var(--navy-deep); overflow:hidden; width:100%; max-width:100vw; }
.hero-slider.hero-full .carousel-inner,
.hero-slider.hero-full .carousel-item{ width:100%; max-width:100%; }
#heroCarousel.hero-full-carousel{ position:relative; }
.hero-slider.hero-full .carousel-inner{ overflow:hidden; }
.hero-slider.hero-full .carousel-item{
  position:relative; min-height:560px; height:76vh; max-height:700px;
  padding-top:88px; padding-bottom:76px;
}
/* Only the slide Bootstrap is actually showing gets laid out as flex —
   matches Bootstrap's own .active/-next/-prev display:block override,
   so inactive slides stay display:none (not stacked in normal flow)
   and the carousel auto-advances/cross-fades correctly. */
.hero-slider.hero-full .carousel-item.active,
.hero-slider.hero-full .carousel-item-next,
.hero-slider.hero-full .carousel-item-prev{
  display:flex; align-items:center;
}
.hero-full-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-bg-img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.06); }
.hero-bg-img.kb-run{ animation:kenBurns 6.4s ease-out forwards; }
/* The Annapurna slide's photo has its subjects (faces) in the upper third —
   on a wide laptop hero panel the box is much wider/shorter than the source
   photo, so a plain center crop pushes past their faces. Bias the crop
   upward. On phones the hero box is taller than the photo so no vertical
   cropping happens there anyway — this only changes desktop/laptop framing. */
.hero-bg-img.hero-img-face-safe{ object-position:center 15%; }
@keyframes kenBurns{ from{ transform:scale(1.06); } to{ transform:scale(1); } }
.hero-full-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(9,38,30,.94) 0%, rgba(9,38,30,.82) 30%, rgba(9,38,30,.48) 58%, rgba(9,38,30,.16) 82%),
    linear-gradient(0deg, rgba(9,38,30,.7) 0%, transparent 30%);
}
.hero-full-content-wrap{ position:relative; z-index:2; width:100%; }
.hero-full-content{ max-width:640px; }

@keyframes heroContentIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
.hero-slider.hero-full .carousel-item.active .hero-full-content{ animation:heroContentIn .8s cubic-bezier(.22,1,.36,1) both; }
.hero-slider.hero-full .carousel-item.active .hero-full-stat-card{ animation:heroContentIn .8s .15s cubic-bezier(.22,1,.36,1) both; }

.hero-badge{
  display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:8px 16px 8px 10px; border-radius:50px;
  font-size:.78rem; font-weight:700; color:#fff;
}
.pulse-dot{ width:9px; height:9px; border-radius:50%; background:var(--gold); position:relative; }
.pulse-dot::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:1.5px solid var(--gold); animation:pulse 2.2s infinite; }
@keyframes pulse{ 0%{transform:scale(.6);opacity:1;} 100%{transform:scale(1.9);opacity:0;} }

.hero-slider.hero-full h1,
.hero-slider.hero-full .hero-full-content h2{ color:#fff; font-size:clamp(2.1rem,4vw,3.4rem); max-width:16ch; margin-top:16px; }
.hero-slider.hero-full h1 em,
.hero-slider.hero-full .hero-full-content h2 em{
  font-style:italic; font-family:var(--font-display); font-weight:500;
  background:linear-gradient(120deg, var(--gold-deep) 0%, var(--gold-light) 45%, var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-slider.hero-full p{ color:rgba(255,255,255,.86); max-width:46ch; font-size:1.05rem; margin-top:14px; }
.hero-cta-row{ margin-top:26px; }
.hero-trust-line{
  display:flex; align-items:center; gap:8px; margin-top:22px; font-size:.78rem; font-weight:600;
  color:rgba(255,255,255,.78); letter-spacing:.02em;
}
.hero-trust-line i{ color:var(--gold-light); font-size:.82rem; }

/* Floating stat card, anchored to the photo rather than the copy */
.hero-full-stat-card{
  position:absolute; right:6%; bottom:130px; z-index:3;
  background:#fff; border-radius:16px; padding:14px 22px 14px 14px; display:flex; align-items:center; gap:13px;
  box-shadow:0 24px 48px -20px rgba(9,38,30,.55); max-width:230px;
}
.hero-full-stat-card .hfc-icn{
  width:42px; height:42px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--teal),var(--teal-light)); color:#fff; font-size:1rem;
}
.hero-full-stat-card b{ display:block; font-family:var(--font-display); font-size:1.15rem; color:var(--navy); line-height:1.1; }
.hero-full-stat-card span{ font-size:.7rem; color:var(--ink-soft); font-weight:600; }

/* Bottom control bar — sits over the photo, shared across every slide */
.hero-full-controls{ position:absolute; left:0; right:0; bottom:0; z-index:4; padding-bottom:34px; }
.hero-controls-row{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.hero-slider.hero-full .carousel-control-prev, .hero-slider.hero-full .carousel-control-next{
  width:auto; height:auto; opacity:1; position:static; top:auto; bottom:auto; transform:none;
}
.hero-arrows-group{ display:flex; gap:10px; }
.hero-arrow{
  width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; color:#fff; margin:0 auto;
  transition:.3s cubic-bezier(.22,1,.36,1);
}
.hero-slider.hero-full .carousel-control-prev:hover .hero-arrow, .hero-slider.hero-full .carousel-control-next:hover .hero-arrow{
  background:var(--gold); border-color:var(--gold); color:var(--navy-deep); transform:scale(1.08);
}

/* Slide counter + animated progress tabs */
.hero-progress-wrap{ display:flex; align-items:center; gap:18px; }
.hero-counter{ color:#fff; font-family:var(--font-display); font-size:1rem; display:flex; align-items:center; gap:8px; }
.hero-counter #heroCurrentSlide{ color:var(--gold-light); font-weight:600; font-size:1.3rem; }
.hero-counter .hc-sep{ width:18px; height:1px; background:rgba(255,255,255,.3); display:inline-block; }
.hero-counter .hc-total{ color:rgba(255,255,255,.6); }
.hero-progress-tabs{ display:flex; gap:8px; }
.hp-tab{
  width:38px; height:24px; padding:0; border-radius:4px; background:transparent; border:none; position:relative;
  cursor:pointer;
}
.hp-tab::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:4px; border-radius:4px;
  background:rgba(255,255,255,.25); transform:translateY(-50%); transition:background .25s;
}
.hp-tab:hover::before{ background:rgba(255,255,255,.4); }
.hp-fill{ position:absolute; left:0; right:auto; top:50%; height:4px; transform:translateY(-50%); background:var(--gold); width:0%; display:block; border-radius:4px; overflow:hidden; }
.hp-tab.active .hp-fill{ animation:hpFill 6s linear forwards; }
.hero-slider:hover .hp-fill{ animation-play-state:paused; }
@keyframes hpFill{ from{ width:0%; } to{ width:100%; } }

/* Shorter laptop screens (13"-14" @ 1366x768 etc.) — keep the full hero,
   including its bottom controls, inside one viewport without forcing a scroll */
@media(min-width:992px) and (max-height:820px){
  .hero-slider.hero-full .carousel-item{ height:70vh; max-height:580px; padding-top:72px; padding-bottom:64px; }
  .hero-full-stat-card{ bottom:96px; }
}
@media(min-width:992px) and (max-height:720px){
  .hero-slider.hero-full .carousel-item{ height:64vh; max-height:520px; padding-top:60px; padding-bottom:56px; }
  .hero-slider.hero-full h1,
  .hero-slider.hero-full .hero-full-content h2{ font-size:clamp(1.8rem,3.2vw,2.5rem); }
  .hero-full-stat-card{ bottom:84px; }
}
@media(max-width:991px){
  /* Full-bleed photo, but kept compact (not a full screen height) so the
     whole image is visible without the aggressive crop a full 100vh panel
     forces on tall/narrow phone aspect ratios. */
  .hero-slider.hero-full .carousel-item{
    height:82vh; height:82svh; min-height:520px; max-height:660px;
    padding-top:96px; padding-bottom:24px;
  }
  .hero-slider.hero-full .carousel-item.active,
  .hero-slider.hero-full .carousel-item-next,
  .hero-slider.hero-full .carousel-item-prev{ flex-direction:column; align-items:stretch; justify-content:flex-end; }
  .hero-full-overlay{
    background:
      linear-gradient(180deg, rgba(9,38,30,.55) 0%, rgba(9,38,30,.06) 24%, rgba(9,38,30,.1) 46%, rgba(9,38,30,.88) 82%, rgba(9,38,30,.96) 100%);
  }
  .hero-full-stat-card{
    position:static; right:auto; bottom:auto; transform:none; margin:22px auto 0; width:fit-content;
  }
  .hero-slider.hero-full .carousel-item.active .hero-full-stat-card{ animation:none; }
  .hero-arrows-group{ display:none; }
  .hero-controls-row{ justify-content:center; }
  .hero-full-controls{ position:static; padding:16px 0 22px; }
  .hero-cta-row{ margin-top:20px; }
  .hero-trust-line{ margin-top:16px; }

  /* On phones/tablets the hero box is much taller (narrow) than the source
     photo, so object-fit:cover shows the FULL height of the image with no
     vertical crop at all (only the sides get trimmed) — for this particular
     photo that means the plain feet/table strip at the very top of the
     original photo becomes visible above the classroom scene. Enlarge and
     shift this image up so the unwanted top strip is pushed out of frame,
     without touching how it renders on desktop (where it already crops fine). */
  .hero-img-crop-top{ position:absolute; left:0; top:-25%; width:100%; height:145%; }
}
@media(max-width:576px){
  .hero-slider.hero-full .carousel-item{ min-height:480px; max-height:580px; padding-top:88px; padding-bottom:18px; }
  .hero-slider.hero-full h1,
  .hero-slider.hero-full .hero-full-content h2{ font-size:1.55rem; margin-top:10px; line-height:1.15; }
  .hero-full-content p{ font-size:.9rem; margin-top:8px; }
  .hero-badge{ font-size:.7rem; padding:6px 13px 6px 8px; }
  .hero-full-stat-card{ max-width:220px; padding:9px 14px 9px 9px; margin-top:14px; }
  .hero-cta-row{ margin-top:14px; gap:8px !important; }
  .hero-cta-row .btn{ padding:.55rem 1.15rem; font-size:.85rem; }
  .hero-trust-line{ margin-top:12px; font-size:.7rem; }
  .hp-tab{ width:26px; }
}

/* Page hero (inner pages) */
.page-hero{ position:relative; padding:156px 0 76px; overflow:hidden; }
.page-hero img.bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 25%; z-index:0; }
.page-hero img.bg-img.obj-top-strong{ object-position:center 16%; }
.page-hero img.bg-img.obj-top{ object-position:center 32%; }
/* Wide/short screens crop the header image far more than tall/narrow phone screens
   (same px height, much wider box) — give it more height on laptop+ so faces/subjects
   stay in frame, and ease the top-bias slightly since there's more room now. */
@media(min-width:992px){
  .page-hero{ padding:212px 0 108px; }
  .page-hero img.bg-img.obj-top-strong{ object-position:center 22%; }
  .page-hero img.bg-img.obj-top{ object-position:center 34%; }
}
@media(min-width:1400px){
  .page-hero{ padding:236px 0 124px; }
}
.page-hero .overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,50,41,.7), rgba(15,50,41,.92)); z-index:1; }
.page-hero .content{ position:relative; z-index:2; }
.page-hero h1 em{
  font-style:italic; font-weight:500;
  background:linear-gradient(120deg, var(--gold-deep) 0%, var(--gold-light) 45%, var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Sunday Seva hero — extra bottom padding for the floating badge strip,
   plus a warmer overlay gradient tuned for the buffet-line photo. */
.seva-hero-premium{ padding-bottom:150px; }
.seva-hero-premium .overlay{ background:linear-gradient(180deg, rgba(15,50,41,.55) 0%, rgba(15,50,41,.75) 55%, rgba(15,50,41,.95) 100%); }
.seva-hero-badge-strip{
  position:relative; z-index:2; max-width:920px; margin:-64px auto 0; padding:0 20px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.seva-hero-badge-item{
  background:#fff; border-radius:16px; padding:18px 16px; display:flex; align-items:center; gap:12px;
  box-shadow:0 24px 50px -20px rgba(15,50,41,.4);
}
.seva-hero-badge-item i{
  width:42px; height:42px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--navy-deep); font-size:1.05rem;
}
.seva-hero-badge-item b{ display:block; font-family:var(--font-display); font-size:.98rem; color:var(--navy); line-height:1.2; }
.seva-hero-badge-item span{ font-size:.74rem; color:var(--ink-soft); }
@media(max-width:768px){
  .seva-hero-badge-strip{ grid-template-columns:1fr; margin-top:-40px; }
  .seva-hero-premium{ padding-bottom:70px; }
}
/* Breadcrumb — premium glass pill with a slow-drifting gradient border,
   a soft entrance animation, and an underline that sweeps in per-link on hover. */
@keyframes bcDrift{ 0%{ background-position:0% 50%; } 100%{ background-position:200% 50%; } }
@keyframes bcRise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@keyframes bcDotPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.6); opacity:.35; } }
.breadcrumb-custom{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:11px 24px; border-radius:30px; font-size:.86rem; font-weight:500;
  animation:bcRise .7s cubic-bezier(.22,1,.36,1) .15s both;
  transition:border-color .35s, background .35s, box-shadow .35s;
}
.breadcrumb-custom::before{
  content:""; position:absolute; inset:-1px; border-radius:30px; padding:1px; z-index:-1;
  background:linear-gradient(90deg, transparent, var(--gold-light), var(--rose-light), var(--gold-light), transparent);
  background-size:250% 100%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s;
}
.breadcrumb-custom:hover{ background:rgba(255,255,255,.12); box-shadow:0 14px 34px -16px rgba(0,0,0,.45); }
.breadcrumb-custom:hover::before{ opacity:1; animation:bcDrift 3.5s linear infinite; }
.breadcrumb-custom a{
  position:relative; color:rgba(255,255,255,.75); display:inline-flex; align-items:center; gap:7px;
  transition:color .3s, transform .3s; padding-bottom:2px;
}
.breadcrumb-custom a i{ color:var(--gold-light); font-size:.8rem; transition:transform .35s cubic-bezier(.22,1,.36,1); }
.breadcrumb-custom a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1.5px;
  background:linear-gradient(90deg,var(--gold-light),var(--rose-light)); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.breadcrumb-custom a:hover{ color:#fff; transform:translateY(-1px); }
.breadcrumb-custom a:hover i{ transform:scale(1.15) rotate(-4deg); }
.breadcrumb-custom a:hover::after{ transform:scaleX(1); }
.breadcrumb-custom .sep{ color:rgba(255,255,255,.35); font-size:.7rem; transition:transform .3s; }
.breadcrumb-custom:hover .sep{ transform:translateX(1px); }
.breadcrumb-custom .active{
  position:relative; color:var(--gold-light); font-weight:700; display:inline-flex; align-items:center; gap:8px;
}
.breadcrumb-custom .active::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--gold-light); flex-shrink:0;
  animation:bcDotPulse 1.8s ease-in-out infinite;
}

/* Sections */
.section-pad{ padding:82px 0; }
@media(max-width:768px){ .section-pad{ padding:54px 0; } }
.sec-head h2{ font-size:clamp(1.85rem,3vw,2.5rem); margin-top:12px; }
.sec-head p{ color:var(--ink-soft); }

/* Impact counter panel */
.impact-num{ font-family:var(--font-display); font-weight:600; font-size:2.1rem; color:var(--teal); }

/* ===================================================
   SUNDAY SEVA — signature weekly initiative (compact + expandable)
=================================================== */
.seva-section-compact{ padding:70px 0; }
.seva-panel{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, #FFF6E6 0%, #FCE6C0 58%, #FFF8ED 100%);
  border-radius:32px; padding:52px 48px; box-shadow:0 44px 90px -48px rgba(178,127,34,.38);
}
.seva-panel-decor{ position:absolute; border-radius:50%; filter:blur(2px); opacity:.5; z-index:0; pointer-events:none; }
.seva-panel-decor-1{ width:280px; height:280px; background:radial-gradient(circle, rgba(46,125,91,.16), transparent 70%); top:-90px; right:-60px; }
.seva-panel-decor-2{ width:220px; height:220px; background:radial-gradient(circle, rgba(242,169,62,.28), transparent 70%); bottom:-80px; left:10%; }
.seva-panel > .row{ z-index:1; }

.seva-photo-block-sm{ position:relative; max-width:400px; margin:0 auto; }
.seva-photo-mat-sm{
  background:#fff; border-radius:24px; padding:10px; box-shadow:0 28px 54px -26px rgba(27,77,62,.4);
}
.seva-photo-mat-sm img{ width:100%; display:block; border-radius:16px; aspect-ratio:.95/1; object-fit:cover; object-position:center 22%; }
.seva-home-slider .carousel-inner{ border-radius:16px; overflow:hidden; cursor:pointer; }
.seva-home-slider .carousel-item{ transition-duration:.9s; }
.seva-home-slider-dots{ position:absolute; bottom:12px; margin:0; gap:5px; z-index:2; }
.seva-home-slider-dots button{
  width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.6); opacity:1;
  border:none; text-indent:-9999px; padding:0; transition:.25s;
}
.seva-home-slider-dots button.active{ background:var(--gold); width:18px; border-radius:5px; }
.seva-badge-tag-sm{
  position:absolute; top:20px; left:-12px; z-index:3; background:var(--navy-deep); color:#fff;
  padding:8px 16px 8px 13px; border-radius:0 50px 50px 0; font-weight:700; font-size:.76rem;
  display:flex; align-items:center; gap:7px; box-shadow:0 12px 22px -8px rgba(9,38,30,.5);
}
.seva-badge-tag-sm i{ color:var(--gold-light); }

/* Sunday Seva page — large hero slider (square corners, by design; no
   rounding on the frame or the images). Distinct from .seva-photo-block-sm
   used on the homepage, which stays untouched. */
.seva-slider-frame{ position:relative; box-shadow:0 34px 64px -28px rgba(27,77,62,.42); }
.seva-slider{ overflow:hidden; }
.seva-slider .carousel-inner, .seva-slider .carousel-item{ border-radius:0; }
.seva-slider .carousel-item img{
  width:100%; display:block; border-radius:0; object-fit:cover; object-position:center 25%;
  height:340px;
}
@media(min-width:576px){ .seva-slider .carousel-item img{ height:420px; } }
@media(min-width:992px){ .seva-slider .carousel-item img{ height:560px; } }
.seva-slider-arrow{
  width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--navy);
  display:flex; align-items:center; justify-content:center; font-size:.95rem; box-shadow:0 10px 24px -8px rgba(9,38,30,.5);
  transition:.25s;
}
.carousel-control-prev, .carousel-control-next{ width:64px; opacity:1; }
.carousel-control-prev:hover .seva-slider-arrow, .carousel-control-next:hover .seva-slider-arrow{ background:var(--gold); color:#fff; }
.seva-slider-dots{ position:absolute; bottom:16px; margin:0; gap:6px; }
.seva-slider-dots button{
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.55); opacity:1;
  border:none; text-indent:-9999px; transition:.25s;
}
.seva-slider-dots button.active{ background:var(--gold); width:22px; border-radius:5px; }

.seva-mini-heading{ font-size:.86rem; text-transform:uppercase; letter-spacing:.04em; color:var(--navy); font-weight:700; margin:18px 0 12px; }
.seva-mini-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; }
.seva-mini-list li{ display:flex; align-items:flex-start; gap:10px; font-size:.88rem; color:var(--ink-soft); line-height:1.4; }
.seva-mini-list .smi-icn{
  width:24px; height:24px; border-radius:7px; background:var(--teal); color:#fff; flex-shrink:0; margin-top:2px;
  display:flex; align-items:center; justify-content:center; font-size:.62rem;
}
.seva-mini-list li:nth-child(2n) .smi-icn{ background:var(--gold); }
.seva-pullquote{ font-size:1.02rem; color:var(--navy); margin:20px 0 0; padding-left:16px; border-left:3px solid var(--gold); }
.seva-mini-gallery{ display:flex; gap:10px; margin-top:18px; }
.seva-mini-gallery img{ width:33.33%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; box-shadow:0 14px 26px -14px rgba(27,77,62,.35); }

.btn-seva-readmore{
  background:#fff; color:var(--navy); font-weight:700; padding:.7rem 1.3rem; border-radius:50px; border:1px solid rgba(27,77,62,.12);
  box-shadow:0 10px 22px -14px rgba(27,77,62,.3); transition:.3s;
}
.btn-seva-readmore i{ transition:transform .3s; font-size:.78rem; }
.btn-seva-readmore:hover{ background:var(--navy); color:#fff; }
.btn-seva-readmore[aria-expanded="true"] i{ transform:rotate(180deg); }

@media(max-width:576px){
  .seva-panel{ padding:34px 22px; border-radius:24px; }
  .seva-mini-list{ grid-template-columns:1fr; }
}

/* ===================================================
   MILESTONE PATH — unique "journey" stat design
=================================================== */
.milestone-path{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  margin-top:14px; position:relative; z-index:10; flex-wrap:wrap;
}
.milestone-path::before{
  content:""; position:absolute; top:52px; left:8%; right:8%; height:0;
  border-top:2px dashed rgba(242,169,62,.55); z-index:0;
}
.milestone-item{
  flex:1 1 0; min-width:120px; text-align:center; position:relative; z-index:1;
  background:#fff; border-radius:16px; padding:26px 12px 20px;
  box-shadow:0 22px 45px -22px rgba(15,50,41,.35); border:1px solid rgba(27,77,62,.06);
  transition:transform .35s var(--ease,ease), box-shadow .35s, border-color .35s;
}
.milestone-item:hover{ transform:translateY(-8px); box-shadow:0 28px 55px -20px rgba(15,50,41,.4); border-color:var(--gold); }
.milestone-item:nth-child(even){ margin-top:26px; }
.milestone-icon{
  width:54px; height:54px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.15rem; box-shadow:0 12px 22px -8px rgba(0,0,0,.35);
}
.mi-1{ background:linear-gradient(135deg,var(--teal),var(--teal-light)); }
.mi-2{ background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--navy-deep); }
.mi-3{ background:linear-gradient(135deg,var(--teal-light),var(--teal)); }
.mi-4{ background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:var(--navy-deep); }
.mi-5{ background:linear-gradient(135deg,var(--teal),var(--navy)); }
.milestone-num{ font-family:var(--font-display); font-weight:600; font-size:1.7rem; color:var(--navy); }
.milestone-label{ font-size:.78rem; color:var(--ink-soft); font-weight:600; margin-top:2px; }

@media(max-width:991px){
  .milestone-path::before{ display:none; }
  .milestone-item{ flex:0 0 calc(50% - 8px); margin-top:0 !important; }
}
@media(max-width:480px){
  .milestone-item{ flex:0 0 100%; }
}

/* Cards - programs */
.prog-card{ border:none; border-radius:18px; overflow:hidden; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); transition:.4s; height:100%; }
.prog-card:hover{ transform:translateY(-8px); border-color:var(--gold); box-shadow:0 20px 40px -20px rgba(0,0,0,.5); }
.prog-card .img-wrap{ overflow:hidden; height:210px; }
.prog-card .img-wrap img{ width:100%; height:100%; object-fit:cover; transition:.6s; }
.prog-card:hover .img-wrap img{ transform:scale(1.1); }
.prog-icn{ width:46px; height:46px; border-radius:12px; background:rgba(242,169,62,.15); border:1px solid rgba(242,169,62,.4); display:flex; align-items:center; justify-content:center; margin-top:-45px; position:relative; z-index:2; margin-left:22px; color:var(--gold-light); font-size:1.1rem; }
.prog-card h5{ color:#fff; }
.prog-card p{ color:rgba(255,255,255,.62); font-size:.9rem; }
.prog-card .learn-link{ color:var(--gold-light); font-weight:700; font-size:.85rem; }
.prog-card .learn-link i{ transition:.3s; }
.prog-card:hover .learn-link i{ transform:translateX(4px); }

/* ===================================================
   OUR SERVICES — swipeable slider on mobile / tablet
=================================================== */
.swipe-hint{
  display:inline-flex; align-items:center; gap:10px; color:var(--gold-light); font-size:.72rem;
  font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-top:14px;
}
.swipe-hint i{ font-size:.65rem; opacity:.8; animation:swipeHintMove 1.8s ease-in-out infinite; }
.swipe-hint i.fa-arrow-right{ animation-delay:.2s; }
@keyframes swipeHintMove{ 0%,100%{ transform:translateX(0); opacity:.6; } 50%{ transform:translateX(4px); opacity:1; } }

@media(max-width:991px){
  .services-row.row{
    display:flex; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; padding:6px 4px 22px; margin-left:0; margin-right:0;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .services-row.row::-webkit-scrollbar{ display:none; }
  .services-row.row > [class*="col-"]{
    flex:0 0 72%; max-width:72%; scroll-snap-align:start;
  }
}
@media(max-width:576px){
  .services-row.row > [class*="col-"]{ flex:0 0 82%; max-width:82%; }
}

/* ===================================================
   OUR SERVICES — premium numbered cards
=================================================== */
.svc-icon-card{
  position:relative; background:#fff; border-radius:20px; padding:38px 26px 30px; height:100%;
  text-align:left; overflow:hidden;
  border:1px solid rgba(27,77,62,.07); box-shadow:0 18px 40px -28px rgba(27,77,62,.22);
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s, border-color .4s;
}
.svc-icon-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--teal),var(--teal-light));
  transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.svc-icon-card:hover{ transform:translateY(-8px); box-shadow:0 32px 58px -26px rgba(27,77,62,.3); border-color:rgba(242,169,62,.35); }
.svc-icon-card:hover::before{ transform:scaleX(1); }
.svc-icon-card .svc-num{
  position:absolute; top:14px; right:20px; z-index:0; font-family:var(--font-display); font-weight:600;
  font-size:2.5rem; line-height:1; color:var(--teal-pale); transition:.4s cubic-bezier(.22,1,.36,1);
}
.svc-icon-card:hover .svc-num{ transform:translateY(-3px); color:rgba(46,125,91,.16); }
.svc-icn{
  position:relative; z-index:1; width:60px; height:60px; margin:0 0 20px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--teal),var(--teal-light)); color:#fff; font-size:1.3rem;
  box-shadow:0 14px 26px -10px rgba(46,125,91,.5); transition:.4s cubic-bezier(.22,1,.36,1);
}
.svc-icon-card.svc-gold .svc-icn{ background:linear-gradient(135deg,var(--gold),var(--gold-light)); box-shadow:0 14px 26px -10px rgba(242,169,62,.55); }
.svc-icon-card.svc-gold::before{ background:linear-gradient(90deg,var(--gold),var(--gold-light)); }
.svc-icon-card:hover .svc-icn{ transform:rotate(-8deg) scale(1.08); }
.svc-icon-card h5{ position:relative; z-index:1; margin-bottom:8px; font-size:1.04rem; }
.svc-icon-card p{ position:relative; z-index:1; color:var(--ink-soft); font-size:.86rem; margin-bottom:16px; min-height:2.6em; }
.svc-icon-card .learn-link{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:7px;
  color:var(--teal); font-weight:700; font-size:.84rem; transition:.3s;
}
.svc-icon-card.svc-gold .learn-link{ color:#b9791e; }
.svc-icon-card .learn-link i{ font-size:.72rem; transition:transform .3s cubic-bezier(.22,1,.36,1); }
.svc-icon-card:hover .learn-link i{ transform:translateX(5px); }
.swipe-hint-dark{
  display:inline-flex; align-items:center; gap:10px; color:var(--teal); font-size:.72rem;
  font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-top:14px;
}
.swipe-hint-dark i{ font-size:.65rem; opacity:.8; animation:swipeHintMove 1.8s ease-in-out infinite; }
.swipe-hint-dark i.fa-arrow-right{ animation-delay:.2s; }

/* Generic image cards */
.img-card{ border-radius:18px; overflow:hidden; position:relative; }
.img-card img{ width:100%; height:100%; object-fit:cover; transition:.6s ease; }
.img-card:hover img{ transform:scale(1.08); }
.img-tag{ position:absolute; top:16px; left:16px; z-index:2; background:var(--gold); color:var(--navy-deep); font-size:.68rem; font-weight:700; text-transform:uppercase; padding:6px 12px; border-radius:50px; }

/* Feature cards (used on About / Get Involved pages) */
.feature-card{ border:1px solid rgba(27,77,62,.1); border-radius:16px; padding:26px 22px; background:#fff; transition:.3s; height:100%; }
.feature-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px -22px rgba(27,77,62,.25); border-color:transparent; }
.feature-card .num{ font-family:var(--font-display); color:var(--gold); font-weight:600; }

/* Why We Exist — enhanced icon feature list (homepage) */
.why-feature-list{ display:flex; flex-direction:column; gap:14px; }
.why-feature-item{
  display:flex; gap:18px; align-items:flex-start; padding:18px 20px; border-radius:16px;
  border:1px solid rgba(27,77,62,.08); background:#fff; transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .35s;
  position:relative; overflow:hidden;
}
.why-feature-item::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--teal),var(--gold)); transform:scaleY(0); transform-origin:top; transition:transform .35s;
}
.why-feature-item:hover{ transform:translateX(6px); box-shadow:0 22px 45px -26px rgba(27,77,62,.3); border-color:rgba(242,169,62,.4); }
.why-feature-item:hover::before{ transform:scaleY(1); }
.wf-icon{
  width:50px; height:50px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0; color:#fff; transition:transform .35s cubic-bezier(.22,1,.36,1);
  background:linear-gradient(135deg,var(--teal),var(--teal-light)); box-shadow:0 10px 20px -8px rgba(46,125,91,.5);
}
.why-feature-item:nth-child(2) .wf-icon{ background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--navy-deep); box-shadow:0 10px 20px -8px rgba(242,169,62,.5); }
.why-feature-item:nth-child(3) .wf-icon{ background:linear-gradient(135deg,var(--navy),var(--teal)); }
.why-feature-item:hover .wf-icon{ transform:rotate(-8deg) scale(1.07); }
.wf-num{ font-family:var(--font-display); font-size:.7rem; font-weight:700; color:var(--gold); letter-spacing:.06em; }
.why-feature-item h6{ font-size:1rem; }

/* Event & news cards */
.event-card, .news-card{ border:1px solid rgba(27,77,62,.1); border-radius:18px; overflow:hidden; background:#fff; transition:.35s; height:100%; }
.event-card:hover, .news-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px -22px rgba(27,77,62,.25); }
.event-card .img-wrap, .news-card .img-wrap{ height:200px; overflow:hidden; position:relative; }
.event-card .img-wrap img, .news-card .img-wrap img{ width:100%; height:100%; object-fit:cover; transition:.6s; }
.event-card:hover img, .news-card:hover img{ transform:scale(1.08); }
.event-date-badge{ color:var(--teal); font-weight:700; font-size:.78rem; letter-spacing:.03em; }

/* Filters */
.filter-btn{
  padding:9px 20px; border-radius:8px; font-size:.85rem; font-weight:600; border:1px solid rgba(27,77,62,.15);
  color:var(--ink-soft); background:#fff; transition:.25s; margin:4px;
}
.filter-btn.active, .filter-btn:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* Gallery masonry — GLightbox powered */
.masonry{ column-count:4; column-gap:16px; }
.masonry .item{
  display:block; break-inside:avoid; margin-bottom:16px; border-radius:16px; overflow:hidden; position:relative;
  cursor:pointer; box-shadow:0 20px 45px -28px rgba(27,77,62,.4);
}
.masonry .item img{ width:100%; max-height:380px; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.masonry .item:hover img{ transform:scale(1.09); }
.masonry .view-overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,50,41,0) 40%, rgba(15,50,41,.82) 100%);
  opacity:0; transition:.35s; display:flex; flex-direction:column; justify-content:flex-end; padding:16px;
}
.masonry .item:hover .view-overlay{ opacity:1; }
.masonry .view-tag{
  align-self:flex-start; display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.14);
  backdrop-filter:blur(8px); color:#fff; font-size:.7rem; font-weight:700; padding:6px 13px; border-radius:50px;
  transform:translateY(8px); transition:transform .4s .05s;
}
.masonry .item:hover .view-tag{ transform:translateY(0); }
.masonry .view-tag i{ color:var(--gold-light); }
.masonry .view-expand{
  position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.16); backdrop-filter:blur(8px); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.7); transition:.35s;
}
.masonry .item:hover .view-expand{ opacity:1; transform:scale(1); background:var(--gold); color:var(--navy-deep); }
@media(max-width:991px){ .masonry{ column-count:3; } }
@media(max-width:576px){ .masonry{ column-count:2; column-gap:10px; } .masonry .item{ margin-bottom:10px; } }

/* Team */
.team-card{ text-align:center; }
.team-photo{ border-radius:18px; overflow:hidden; aspect-ratio:1/1; position:relative; box-shadow:0 20px 40px -22px rgba(27,77,62,.3); }
.team-photo img{ width:100%; height:100%; object-fit:cover; transition:.5s; }
.team-card:hover .team-photo img{ transform:scale(1.1); }
.team-social{ position:absolute; inset:0; background:rgba(15,50,41,.55); display:flex; align-items:center; justify-content:center; gap:10px; opacity:0; transition:.3s; }
.team-card:hover .team-social{ opacity:1; }
.team-social a{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; color:#fff; }
.team-social a:hover{ background:var(--gold); color:var(--navy-deep); }
.team-avatar-initials{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:2.4rem; color:#fff;
  transition:transform .5s;
}
.team-card:hover .team-avatar-initials{ transform:scale(1.06); }

/* Testimonials */


/* form-box-premium — shared card styling for volunteer & contact forms */
.form-box-premium{ background:#fff; border-radius:22px; padding:38px; box-shadow:0 20px 50px -25px rgba(27,77,62,.3); border:1px solid rgba(27,77,62,.08); }


/* Doc / transparency */
.doc-card{ background:var(--ivory-dim); border-radius:16px; padding:24px; display:flex; gap:16px; align-items:flex-start; transition:.3s; border:1px solid rgba(27,77,62,.08); height:100%; }
.doc-card:hover{ background:#fff; box-shadow:0 20px 40px -25px rgba(27,77,62,.25); transform:translateY(-4px); }
.doc-icn{ width:46px; height:46px; border-radius:12px; background:#fff; border:1px solid rgba(27,77,62,.1); display:flex; align-items:center; justify-content:center; color:var(--teal); flex-shrink:0; }

/* CTA band */
.cta-band{ background:linear-gradient(155deg,#0F3229 0%, #2E7D5B 130%); color:#fff; position:relative; overflow:hidden; }
.cta-band h2{ color:#fff; }

/* Ripple decoration */
.ripple-deco{ position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.15); pointer-events:none; }

/* ===================================================
   PREMIUM FOOTER
=================================================== */
footer.site-footer{
  background:var(--navy-deep); color:rgba(255,255,255,.65); padding-top:0; position:relative; overflow:hidden;
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-accent-bar{ height:4px; width:100%; background:linear-gradient(90deg,var(--teal) 0%, var(--gold) 50%, var(--teal-light) 100%); background-size:200% 100%; animation:accentShift 6s linear infinite; }
@keyframes accentShift{ from{background-position:0% 0;} to{background-position:200% 0;} }
footer.site-footer .footer-ripple{ position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.05); pointer-events:none; }

.footer-newsletter-wrap{ position:relative; z-index:3; padding-top:56px; }
.footer-newsletter{
  background:linear-gradient(135deg, rgba(46,125,91,.28), rgba(242,169,62,.14));
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  padding:30px 34px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  backdrop-filter:blur(6px);
}
.footer-newsletter-icon{
  width:48px; height:48px; border-radius:12px; background:rgba(255,255,255,.1); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:var(--gold-light); font-size:1.1rem;
}
.footer-newsletter-text{ display:flex; align-items:center; gap:16px; flex:1 1 260px; min-width:0; }
.footer-newsletter h5{ color:#fff; margin-bottom:4px; font-size:1.05rem; }
.footer-newsletter p{ color:rgba(255,255,255,.6); font-size:.85rem; margin:0; }
.newsletter-form{ display:flex; gap:0; max-width:360px; width:100%; flex:0 1 360px; }
.newsletter-form input{
  border:1.5px solid rgba(255,255,255,.18); background:rgba(255,255,255,.07); color:#fff;
  border-radius:10px 0 0 10px; padding:13px 18px; font-size:.86rem; flex:1; min-width:0; outline:none;
}
.newsletter-form input::placeholder{ color:rgba(255,255,255,.45); }
.newsletter-form input:focus{ border-color:var(--gold); }
.newsletter-form button{
  border-radius:0 10px 10px 0; background:var(--gold); color:var(--navy-deep); border:none; padding:0 20px;
  font-weight:700; display:flex; align-items:center; gap:8px; transition:.3s; flex-shrink:0;
}
.newsletter-form button:hover{ background:var(--gold-light); }

.footer-main{ position:relative; z-index:2; padding-top:44px; }
footer.site-footer h6{ color:#fff; margin-bottom:20px; position:relative; padding-bottom:12px; }
footer.site-footer h6::after{ content:""; position:absolute; left:0; bottom:0; width:34px; height:2px; background:var(--gold); }
footer.site-footer ul li{ margin-bottom:12px; }
footer.site-footer ul li a{ color:rgba(255,255,255,.62); display:inline-flex; align-items:center; gap:9px; transition:.25s; }
footer.site-footer ul li a i{ font-size:.65rem; color:var(--gold); transition:.25s; }
footer.site-footer ul li a:hover{ color:var(--gold-light); padding-left:4px; }
footer.site-footer ul li a:hover i{ transform:translateX(2px); }

.footer-brand-box p{ font-size:.88rem; line-height:1.7; }
.footer-social-btn{
  width:40px; height:40px; border-radius:50%; border:1.5px solid rgba(255,255,255,.16);
  display:inline-flex; align-items:center; justify-content:center; color:#fff; transition:.3s cubic-bezier(.22,1,.36,1); margin-right:8px;
  background:rgba(255,255,255,.04);
}
.footer-social-btn:hover{ background:linear-gradient(135deg,var(--gold),var(--gold-light)); border-color:var(--gold); color:var(--navy-deep); transform:translateY(-4px) scale(1.05); box-shadow:0 12px 24px -8px rgba(242,169,62,.45); }

.footer-contact-item{ display:flex; gap:14px; align-items:flex-start; margin-bottom:16px; transition:.25s; }
.footer-contact-item .ic{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:var(--gold-light); flex-shrink:0; font-size:.85rem; transition:.25s; }
.footer-contact-item:hover .ic{ background:var(--gold); color:var(--navy-deep); border-color:var(--gold); }
.footer-contact-item span{ font-size:.86rem; color:rgba(255,255,255,.68); padding-top:8px; }

footer.site-footer .foot-bottom{ border-top:1px solid rgba(255,255,255,.08); padding:22px 0; font-size:.85rem; position:relative; z-index:2; }
footer.site-footer .foot-bottom a{ color:rgba(255,255,255,.65); margin-left:16px; }
footer.site-footer .foot-bottom a:hover{ color:var(--gold-light); }
.foot-heart{ color:var(--gold-light); }

@media(max-width:768px){
  .footer-newsletter-wrap{ padding-top:40px; }
  .footer-newsletter{ flex-direction:column; align-items:flex-start; padding:26px 22px; }
  .newsletter-form{ max-width:100%; flex-basis:auto; }
  .footer-newsletter-text{ flex-wrap:wrap; }
}
@media(max-width:576px){
  .footer-newsletter-wrap{ padding-top:26px; }
  .footer-newsletter{ padding:18px 16px; border-radius:14px; gap:12px; }
  .footer-newsletter-icon{ width:36px; height:36px; font-size:.88rem; border-radius:9px; }
  .footer-newsletter-text{ gap:10px; }
  .footer-newsletter h5{ font-size:.9rem; margin-bottom:2px; }
  .footer-newsletter p{ font-size:.74rem; line-height:1.35; }
  .newsletter-form input{ padding:9px 12px; font-size:.78rem; }
  .newsletter-form button{ padding:0 13px; }
}

/* ===================================================
   PREMIUM BUTTONS — icon-circle reveal + shine sweep
=================================================== */
.btn-gold, .btn-teal-fill, .btn-outline-navy, .btn-outline-light-custom{
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s, background .4s, color .4s, border-color .4s;
}
.btn-gold{ background:linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%); }
.btn-teal-fill{ background:linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%); }
.btn-gold::before, .btn-teal-fill::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,.55) 45%, transparent 65%);
  transform:translateX(-120%); transition:transform .7s ease;
}
.btn-gold:hover::before, .btn-teal-fill:hover::before{ transform:translateX(120%); }

.btn-gold:not(.btn-sm-pill), .btn-teal-fill:not(.btn-sm-pill), .btn-outline-navy:not(.btn-sm-pill), .btn-outline-light-custom:not(.btn-sm-pill){
  padding-right:3.1rem !important;
}
.btn-gold:not(.btn-sm-pill)::after, .btn-teal-fill:not(.btn-sm-pill)::after,
.btn-outline-navy:not(.btn-sm-pill)::after, .btn-outline-light-custom:not(.btn-sm-pill)::after{
  content:"\f061"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.7rem;
  position:absolute; right:7px; top:50%; transform:translateY(-50%) rotate(-45deg);
  width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:transform .4s cubic-bezier(.22,1,.36,1), background .3s;
}
.btn-gold:not(.btn-sm-pill)::after{ background:var(--navy-deep); color:var(--gold-light); }
.btn-teal-fill:not(.btn-sm-pill)::after{ background:rgba(255,255,255,.22); color:#fff; }
.btn-outline-navy:not(.btn-sm-pill)::after{ background:var(--navy); color:#fff; }
.btn-outline-light-custom:not(.btn-sm-pill)::after{ background:rgba(255,255,255,.2); color:#fff; }
.btn-gold:hover:not(.btn-sm-pill)::after, .btn-teal-fill:hover:not(.btn-sm-pill)::after,
.btn-outline-navy:hover:not(.btn-sm-pill)::after, .btn-outline-light-custom:hover:not(.btn-sm-pill)::after{
  transform:translateY(-50%) rotate(0deg);
}
.btn-gold:hover, .btn-teal-fill:hover{ transform:translateY(-4px); box-shadow:0 18px 34px -14px rgba(242,169,62,.55); }
.btn-outline-navy:hover, .btn-outline-light-custom:hover{ transform:translateY(-4px); }

/* ===================================================
   SECTION WAVE DIVIDERS
=================================================== */
.wave-divider{ line-height:0; position:relative; z-index:2; }
.wave-divider svg{ width:100%; height:60px; display:block; }
.wave-divider.to-navy svg path{ fill:var(--navy); }
.wave-divider.from-navy svg path{ fill:var(--navy); }
.wave-divider.to-ivory-dim svg path{ fill:var(--ivory-dim); }

/* ===================================================
   PREMIUM CARD HOVER — gradient border glow
=================================================== */
.prog-card{ position:relative; }
.prog-card::before{
  content:""; position:absolute; inset:0; border-radius:18px; padding:1.5px;
  background:linear-gradient(135deg, var(--gold), transparent 40%, transparent 60%, var(--teal-light));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s; pointer-events:none;
}
.prog-card:hover::before{ opacity:1; }
.event-card, .news-card, .feature-card, .doc-card{ transition:transform .35s var(--ease,ease), box-shadow .35s, border-color .35s; }

/* ===================================================
   UNIQUE GALLERY PEEK-SLIDER
=================================================== */
.gallery-slider-wrap{ position:relative; }
.gallery-slider{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:10px 4px 20px; scrollbar-width:none; -ms-overflow-style:none;
}
.gallery-slider::-webkit-scrollbar{ display:none; }
.hgs-card{
  display:block; flex:0 0 auto; width:320px; height:250px; scroll-snap-align:start; border-radius:18px; overflow:hidden;
  position:relative; box-shadow:0 22px 44px -24px rgba(27,77,62,.35); transition:transform .4s; cursor:pointer;
}
.hgs-card img{ width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .7s cubic-bezier(.22,1,.36,1); }
.hgs-card:hover img{ transform:scale(1.1); }
.hgs-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(15,50,41,.86) 100%); }
.gslide-cap{ position:absolute; left:0; right:0; bottom:0; padding:18px; z-index:2; color:#fff; }
.gcat{
  display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.16); backdrop-filter:blur(8px);
  padding:5px 13px; border-radius:50px; font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px;
}
.gcat i{ color:var(--gold-light); }
.gslide-cap h6{ color:#fff; margin:0; font-size:.96rem; }
.gslide-view{
  position:absolute; top:14px; right:14px; z-index:2; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.16); backdrop-filter:blur(8px); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(-8px); transition:.35s;
}
.hgs-card:hover .gslide-view{ opacity:1; transform:translateY(0); background:var(--gold); color:var(--navy-deep); }

.gslide-arrow{
  width:52px; height:52px; border-radius:50%; background:#fff; box-shadow:0 20px 40px -16px rgba(27,77,62,.4);
  position:absolute; top:44%; transform:translateY(-50%); z-index:5; display:flex; align-items:center; justify-content:center;
  color:var(--navy); border:none; transition:.3s;
}
.gslide-arrow:hover{ background:var(--gold); color:var(--navy-deep); }
.gslide-arrow.gprev{ left:-10px; } .gslide-arrow.gnext{ right:-10px; }
@media(max-width:991px){ .gslide-arrow{ display:none; } }
@media(max-width:576px){ .hgs-card{ width:250px; height:200px; } }

/* Grid variant of .hgs-card — for when these cards sit inside a normal
   responsive Bootstrap row/column (e.g. the Sunday Seva "Moments" gallery)
   instead of the fixed-width horizontal peek-slider (#gallerySlider) on the
   homepage. Without this override the card kept the peek-slider's fixed
   320x250px box regardless of its column's actual width — so it never
   filled the column on desktop and left an odd small box with empty space
   next to it on mobile. This makes it fill its column and follow the
   image's natural proportions at every screen size instead. */
.hgs-grid .hgs-card{ width:100%; height:auto; aspect-ratio:3/2; }

/* Legal content pages */
.legal-content h5{ color:var(--navy); }
.legal-content p{ line-height:1.8; }

/* ===================================================
   ABOUT PAGE — UNIQUE SECTIONS
=================================================== */

/* Quick-stat strip under page hero */
.about-stat-strip{
  position:relative; z-index:5; margin-top:-56px; margin-bottom:10px;
}
.about-stat-strip-inner{
  background:#fff; border-radius:20px; box-shadow:0 30px 60px -25px rgba(27,77,62,.35);
  display:flex; flex-wrap:wrap; padding:8px;
}
.about-stat-cell{
  flex:1 1 0; min-width:140px; text-align:center; padding:20px 10px;
  border-right:1px solid rgba(27,77,62,.08);
}
.about-stat-cell:last-child{ border-right:none; }
.about-stat-cell b{ display:block; font-family:var(--font-display); font-size:1.7rem; color:var(--navy); }
.about-stat-cell span{ font-size:.76rem; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
@media(max-width:768px){ .about-stat-cell{ flex:1 1 50%; border-right:none; border-bottom:1px solid rgba(27,77,62,.08); } .about-stat-cell:nth-child(2n){ border-left:1px solid rgba(27,77,62,.08); } }

/* Who We Are — asymmetric collage */
/* .about-collage is superseded by .single-photo-frame above. */

/* Vision & Mission premium cards */
.vm-card{
  position:relative; background:#fff; border-radius:22px; padding:38px 32px; height:100%; overflow:hidden;
  border:1px solid rgba(27,77,62,.08); transition:transform .35s, box-shadow .35s;
}
.vm-card:hover{ transform:translateY(-6px); box-shadow:0 30px 55px -28px rgba(27,77,62,.3); }
.vm-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg,var(--teal),var(--gold)); }
.vm-card .vm-num{
  position:absolute; right:18px; top:6px; font-family:var(--font-display); font-weight:600; font-size:5.5rem;
  color:rgba(27,77,62,.05); line-height:1; pointer-events:none;
}
.vm-card .vm-icn{
  width:56px; height:56px; border-radius:16px; background:linear-gradient(135deg,var(--teal),var(--teal-light));
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:18px;
  box-shadow:0 14px 26px -10px rgba(46,125,91,.5); position:relative; z-index:1;
}
.vm-card.vm-mission .vm-icn{ background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--navy-deep); box-shadow:0 14px 26px -10px rgba(242,169,62,.5); }
.vm-card h5{ position:relative; z-index:1; }
.vm-card p{ position:relative; z-index:1; }

/* Core values */
.value-card{
  text-align:center; padding:30px 18px; border-radius:18px; background:#fff; border:1px solid rgba(27,77,62,.08);
  height:100%; transition:transform .35s, box-shadow .35s, border-color .35s;
}
.value-card:hover{ transform:translateY(-6px); border-color:var(--gold); box-shadow:0 22px 45px -26px rgba(27,77,62,.3); }
.value-card .vc-icn{
  width:58px; height:58px; margin:0 auto 16px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--teal-pale); color:var(--teal); font-size:1.3rem; transition:.35s;
}
.value-card:hover .vc-icn{ background:var(--teal); color:#fff; transform:rotate(-8deg) scale(1.06); }
.value-card h6{ margin-bottom:6px; }

/* Founder message — quote mark styling */
.founder-frame{ position:relative; }
.founder-avatar-ring{
  width:180px; height:180px; border-radius:50%; margin:0 auto; padding:8px;
  background:conic-gradient(from 200deg, var(--teal), var(--gold), var(--teal-light), var(--teal));
  display:flex; align-items:center; justify-content:center;
}
.founder-avatar-ring .fa-inner{
  width:100%; height:100%; border-radius:50%; background:linear-gradient(135deg,var(--navy),var(--teal));
  display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display);
  font-weight:600; font-size:2.6rem; border:5px solid var(--ivory);
}
.founder-quote-mark{ font-family:var(--font-display); font-size:5rem; line-height:.6; color:var(--gold); opacity:.5; display:block; }

/* Vertical zig-zag timeline */
.timeline-vertical{ position:relative; max-width:900px; margin:0 auto; }
.timeline-vertical::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(242,169,62,.05), rgba(242,169,62,.55) 10%, rgba(242,169,62,.55) 90%, rgba(242,169,62,.05));
}
.tl-item{ position:relative; display:flex; justify-content:flex-end; padding-right:calc(50% + 34px); margin-bottom:44px; }
.tl-item:nth-child(even){ justify-content:flex-start; padding-right:0; padding-left:calc(50% + 34px); }
.tl-dot{
  position:absolute; left:50%; top:6px; transform:translateX(-50%); width:16px; height:16px; border-radius:50%;
  background:var(--gold); border:4px solid var(--ivory); box-shadow:0 0 0 2px rgba(242,169,62,.4); z-index:2;
}
.tl-card{
  background:#fff; border-radius:16px; padding:22px 24px; max-width:340px; width:100%;
  border:1px solid rgba(27,77,62,.08); box-shadow:0 20px 42px -26px rgba(27,77,62,.28);
}
.tl-card .tl-year{ font-family:var(--font-display); color:var(--gold); font-weight:600; font-size:.92rem; }
@media(max-width:767px){
  .timeline-vertical::before{ left:14px; }
  .tl-item, .tl-item:nth-child(even){ justify-content:flex-start; padding-left:44px; padding-right:0; }
  .tl-dot{ left:14px; }
  .tl-card{ max-width:100%; }
}

/* Achievements — circular stat cards */
.stat-ring-card{ text-align:center; }
.stat-ring{
  width:112px; height:112px; border-radius:50%; margin:0 auto 16px; position:relative;
  background:conic-gradient(var(--teal) 0deg, var(--teal-light) 260deg, rgba(27,77,62,.08) 260deg);
  display:flex; align-items:center; justify-content:center; padding:7px;
}
.stat-ring-card:nth-child(2) .stat-ring{ background:conic-gradient(var(--gold) 0deg, var(--gold-light) 200deg, rgba(27,77,62,.08) 200deg); }
.stat-ring-card:nth-child(3) .stat-ring{ background:conic-gradient(var(--teal-light) 0deg, var(--teal) 230deg, rgba(27,77,62,.08) 230deg); }
.stat-ring-card:nth-child(4) .stat-ring{ background:conic-gradient(var(--gold-light) 0deg, var(--gold) 300deg, rgba(27,77,62,.08) 300deg); }
.stat-ring-inner{
  width:100%; height:100%; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(27,77,62,.05);
}
.stat-ring-inner i{ font-size:1.6rem; color:var(--navy); }

/* ===================================================
   WHY WE EXIST — unique premium split section
=================================================== */
.we-label{
  display:inline-flex; align-items:center; gap:9px; background:var(--navy); color:#fff;
  padding:8px 18px 8px 12px; border-radius:50px; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
}
.we-label span.dot{ width:8px; height:8px; border-radius:50%; background:var(--gold); }

/* .we-collage is superseded by .single-photo-frame above — kept as an alias
   so any legacy markup still renders sensibly. */

/* Numbered connector stepper */
.we-step-list{ position:relative; }
.we-step-item{ position:relative; display:flex; gap:18px; padding-bottom:26px; }
.we-step-item:last-child{ padding-bottom:0; }
.we-step-item::before{
  content:""; position:absolute; left:23px; top:50px; bottom:0; width:1.5px;
  background:repeating-linear-gradient(180deg, rgba(242,169,62,.5) 0 5px, transparent 5px 10px);
}
.we-step-item:last-child::before{ display:none; }
.we-step-num{
  flex-shrink:0; width:46px; height:46px; border-radius:14px; background:var(--teal-pale); color:var(--teal);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:1.05rem;
  position:relative; z-index:1; transition:.3s;
}
.we-step-item:hover .we-step-num{ background:var(--teal); color:#fff; }
.we-step-item h6{ margin-bottom:4px; }

/* ===================================================
   SINGLE PHOTO FRAME — one real photo, shown true to
   its own proportions, mounted on a white premium mat
   (used for "Why We Exist" and "Our Story" sections)
=================================================== */
.single-photo-frame{ position:relative; max-width:560px; margin:0 auto; padding:22px 0 0 22px; }
.single-photo-frame .spf-dotgrid{
  position:absolute; left:0; top:0; width:92px; height:92px; z-index:0;
  background-image:radial-gradient(var(--teal) 1.8px, transparent 1.8px); background-size:13px 13px; opacity:.4;
}
.single-photo-frame .spf-mat{
  position:relative; z-index:1; background:#fff; border-radius:28px; padding:14px;
  box-shadow:0 34px 64px -28px rgba(27,77,62,.42);
}
.single-photo-frame .spf-mat .spf-img-wrap{ border-radius:20px; overflow:hidden; }
.single-photo-frame .spf-mat img{ width:100%; display:block; aspect-ratio:3/2; object-fit:cover; object-position:center center; }
.single-photo-frame .spf-badge{
  position:absolute; top:6px; right:-14px; width:100px; height:100px; border-radius:50%; z-index:3;
  background:var(--gold); color:var(--navy-deep); display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; box-shadow:0 20px 40px -16px rgba(242,169,62,.6); transform:rotate(6deg);
}
.single-photo-frame .spf-badge b{ font-family:var(--font-display); font-size:1.4rem; line-height:1; }
.single-photo-frame .spf-badge span{ font-size:.56rem; text-transform:uppercase; font-weight:700; letter-spacing:.04em; max-width:66px; }
@media(max-width:576px){
  .single-photo-frame{ padding:16px 0 0 16px; max-width:420px; }
  .single-photo-frame .spf-badge{ width:82px; height:82px; right:-8px; }
  .single-photo-frame .spf-badge b{ font-size:1.1rem; }
}

/* ===================================================
   TESTIMONIALS — premium dark card + avatar switcher
=================================================== */
.testi-card-v2{
  position:relative; background:linear-gradient(155deg, var(--navy-deep), var(--navy)); border-radius:26px;
  padding:46px 40px 38px; overflow:hidden; text-align:center; box-shadow:0 40px 70px -32px rgba(27,77,62,.55);
}
.testi-card-v2 .tc-ripple{
  position:absolute; width:280px; height:280px; border-radius:50%; border:1px solid rgba(255,255,255,.08);
  top:-90px; right:-90px;
}
.testi-card-v2 .tc-ripple::before{ content:""; position:absolute; inset:34px; border-radius:50%; border:1px solid rgba(255,255,255,.08); }
.testi-quote-mark{
  font-family:var(--font-display); font-size:4rem; line-height:.5; color:var(--gold); opacity:.7; display:block; position:relative; z-index:1;
}
.testi-stars{ color:var(--gold-light); font-size:.8rem; letter-spacing:3px; margin:10px 0 18px; position:relative; z-index:1; }
.testi-text{ position:relative; z-index:1; color:#fff; font-size:1.15rem; }
.testi-person{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:22px; position:relative; z-index:1; }
.testi-avatar-ring{
  width:52px; height:52px; border-radius:50%; padding:2.5px; background:linear-gradient(135deg,var(--gold),var(--teal-light));
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.testi-avatar-ring span{
  width:100%; height:100%; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
}
.testi-person h6{ color:#fff; margin:0; text-align:left; }
.testi-person span{ color:rgba(255,255,255,.55); font-size:.78rem; }

.testi-switcher{ display:flex; justify-content:center; gap:14px; margin-top:26px; }
.testi-switch-btn{
  width:48px; height:48px; border-radius:50%; border:none; padding:2px; cursor:pointer;
  background:transparent; display:flex; align-items:center; justify-content:center; transition:.3s; opacity:.55;
}
.testi-switch-btn span{
  width:100%; height:100%; border-radius:50%; background:var(--teal-pale); color:var(--teal); display:flex; align-items:center;
  justify-content:center; font-family:var(--font-display); font-weight:600; font-size:.82rem;
}
.testi-switch-btn.active{ opacity:1; background:linear-gradient(135deg,var(--gold),var(--teal-light)); }
.testi-switch-btn.active span{ background:var(--navy); color:#fff; }
.testi-switch-btn:hover{ opacity:1; }
@media(max-width:576px){ .testi-card-v2{ padding:36px 22px 30px; } .testi-text{ font-size:1.02rem; } }

/* ===================================================
   MOBILE OFFCANVAS NAV — premium redesign
=================================================== */
.mobile-nav-panel{
  background:linear-gradient(165deg, var(--navy-deep) 0%, var(--navy) 100%); color:#fff; width:min(310px,80vw);
  overflow-x:hidden; max-width:100vw; touch-action:manipulation;
}
.navbar-toggler{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.navbar-toggler:focus{ box-shadow:none; }
.mnav-header{
  padding:20px 22px; border-bottom:1px solid rgba(255,255,255,.08); position:relative;
}
.mnav-header::after{
  content:""; position:absolute; top:-60px; right:-60px; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle, rgba(242,169,62,.18), transparent 70%); pointer-events:none;
}
.mnav-body{ padding:14px 16px 20px; overflow-y:auto; }
.mnav-links{ display:flex; flex-direction:column; gap:2px; }
.mnav-link{
  display:flex; align-items:center; gap:13px; padding:13px 12px; border-radius:12px; color:rgba(255,255,255,.88);
  font-weight:600; font-size:.94rem; text-decoration:none; border:none; background:transparent; width:100%; text-align:left;
  transition:.25s; position:relative;
}
.mnav-link i:first-child{
  width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center;
  font-size:.85rem; color:var(--gold-light); flex-shrink:0; transition:.25s;
}
.mnav-link:hover, .mnav-link:focus{ background:rgba(255,255,255,.07); color:#fff; }
.mnav-link:hover i:first-child{ background:var(--gold); color:var(--navy-deep); }
.mnav-link span{ flex:1; }
.mnav-caret{ font-size:.72rem; opacity:.6; transition:transform .3s; flex:0 0 auto !important; width:auto !important; height:auto !important; background:none !important; }
.mnav-toggle[aria-expanded="true"] .mnav-caret{ transform:rotate(180deg); }
.mnav-toggle[aria-expanded="true"]{ background:rgba(255,255,255,.06); }

.mnav-submenu{
  display:flex; flex-direction:column; gap:1px; padding:4px 0 8px 46px; margin-bottom:2px; position:relative;
}
.mnav-submenu::before{ content:""; position:absolute; left:28px; top:0; bottom:10px; width:1px; background:rgba(255,255,255,.1); }
.mnav-submenu-link{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; color:rgba(255,255,255,.65);
  font-size:.82rem; font-weight:500; text-decoration:none; transition:.2s;
}
.mnav-submenu-link i{ width:16px; text-align:center; color:var(--gold-light); font-size:.78rem; opacity:.8; }
.mnav-submenu-link:hover{ background:rgba(255,255,255,.06); color:#fff; padding-left:14px; }

.mnav-foot{ padding-top:16px; margin-top:10px; border-top:1px solid rgba(255,255,255,.08); }
.mnav-foot-meta{ display:flex; align-items:center; justify-content:center; margin-top:16px; flex-wrap:wrap; gap:10px; }
.mnav-foot-meta a{ color:rgba(255,255,255,.7); font-size:.8rem; text-decoration:none; }
.mnav-foot-meta a:hover{ color:var(--gold-light); }
.mnav-social{ display:flex; gap:8px; }
.mnav-social a{
  width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.78rem; transition:.25s;
}
.mnav-social a:hover{ background:var(--gold); color:var(--navy-deep); transform:translateY(-2px); }

/* ===================================================
   MOBILE OFFCANVAS NAV — premium redesign end
=================================================== */
.back-to-top{
  position:fixed; bottom:24px; right:24px; width:46px; height:46px; border-radius:50%;
  background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:.3s; z-index:999; box-shadow:0 10px 25px -10px rgba(0,0,0,.4);
}
.back-to-top.show{ opacity:1; visibility:visible; }
.back-to-top:hover{ background:var(--gold); color:var(--navy-deep); }

/* WhatsApp floating button */
.whatsapp-float{
  position:fixed; bottom:82px; left:24px; width:52px; height:52px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; z-index:999; box-shadow:0 15px 30px -10px rgba(37,211,102,.6); transition:.3s;
}
.whatsapp-float:hover{ transform:scale(1.08); color:#fff; box-shadow:0 18px 36px -8px rgba(37,211,102,.75); }
@media(max-width:576px){
  .whatsapp-float{ bottom:90px; left:16px; width:46px; height:46px; font-size:1.3rem; }
  .back-to-top{ bottom:90px; right:16px; width:44px; height:44px; }
}

/* Floating mobile CTA bar */
.float-cta-mobile{
  display:none; position:fixed; bottom:16px; left:16px; right:16px; z-index:998;
  background:var(--navy); border-radius:16px; padding:8px 8px 8px 18px; align-items:center; justify-content:space-between; gap:10px; box-shadow:0 20px 40px -15px rgba(0,0,0,.5);
}
.float-cta-mobile span{ color:#fff; font-weight:600; font-size:.85rem; white-space:nowrap; }
.float-cta-mobile .fcm-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.float-cta-close{
  width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.12); border:none; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.7rem; flex-shrink:0; padding:0; transition:.2s; line-height:1;
}
.float-cta-close:hover{ background:rgba(255,255,255,.28); }
@media(max-width:576px){
  .float-cta-mobile{ display:flex; padding:8px 6px 8px 14px; gap:6px; }
  .float-cta-mobile span{ font-size:.78rem; }
  .float-cta-mobile .fcm-actions{ gap:6px; }
  .float-cta-mobile .btn-donate.btn-sm-pill{ padding:.5rem .85rem; font-size:.76rem; }
}
@media(max-width:360px){
  .float-cta-mobile span{ font-size:.72rem; }
  .float-cta-mobile .btn-donate.btn-sm-pill{ padding:.46rem .7rem; font-size:.72rem; }
  .float-cta-mobile .btn-donate.btn-sm-pill i{ margin-right:.35rem !important; }
}

/* countdown */
.cd-box{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:10px; padding:12px 16px; text-align:center; min-width:68px; }
.cd-box b{ display:block; font-family:var(--font-display); font-size:1.4rem; color:#fff; }
.cd-box span{ font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.6); }

/* Marquee */
.marquee-wrap{ background:var(--gold); overflow:hidden; padding:12px 0; }
.marquee-track{ display:flex; gap:50px; white-space:nowrap; animation:marquee 26s linear infinite; width:max-content; }
.marquee-track span{ font-weight:700; font-size:.82rem; color:var(--navy-deep); text-transform:uppercase; letter-spacing:.04em; }
.marquee-track span i{ margin-right:8px; font-size:.55rem; opacity:.6; }
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* Partner placeholder slots — premium "coming soon" chips instead of bracketed text */
.partner-slot{
  display:inline-flex; align-items:center; gap:9px; padding:12px 22px; border-radius:50px;
  background:#fff; border:1.5px dashed rgba(27,77,62,.22); color:var(--ink-soft);
  font-weight:700; font-size:.85rem; transition:.3s;
}
.partner-slot i{ color:var(--teal); font-size:.85rem; }
.partner-slot:hover{ border-color:var(--teal); color:var(--teal); transform:translateY(-3px); box-shadow:0 14px 28px -18px rgba(27,77,62,.35); }
.partner-slot-cta{ background:var(--navy); border-style:solid; border-color:var(--navy); color:#fff; text-decoration:none; }
.partner-slot-cta i{ color:var(--gold-light); }
.partner-slot-cta:hover{ background:var(--teal); border-color:var(--teal); color:#fff; }

/* Sponsor/client logo strip — a distinct band between image and content, fully visible */
.sponsor-strip{
  display:flex; align-items:center; gap:18px; padding:14px 22px; background:#f6f7f2;
  border-bottom:1px solid rgba(27,77,62,.08);
}
.sponsor-strip img{ height:36px; width:auto; max-width:150px; object-fit:contain; }
.sponsor-strip.sponsor-strip-multi img{ height:34px; max-width:110px; }

/* Featured project — sponsor strip above the heading */
.featured-sponsor-strip{
  display:inline-flex; align-items:center; gap:14px; background:#fff; border-radius:10px; padding:12px 20px;
  width:fit-content; margin-bottom:18px; box-shadow:0 14px 30px -16px rgba(0,0,0,.55);
}
.featured-sponsor-strip img{ max-height:36px; max-width:180px; object-fit:contain; }


/* Illustration/poster images: show in full rather than cropping */
.img-wrap.img-contain{ background:#f4f5f0; }
.img-wrap.img-contain img{ object-fit:contain; padding:16px; }

/* Upcoming project placeholder card */
.upcoming-card{ height:100%; border:1.5px dashed rgba(27,77,62,.25); background:var(--teal-pale, #f0f7f5); }
.upcoming-card .vc-icn{
  width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#fff; color:var(--teal); font-size:1.3rem;
}

/* Utility */
.rounded-24{ border-radius:24px; }
.shadow-soft{ box-shadow:0 26px 58px -26px rgba(15,50,41,.4); }
.object-cover{ object-fit:cover; }

/* Generic learn-link fallback, for cards outside the svc-icon-card / prog-card scope */
.learn-link{ color:var(--teal); font-weight:700; font-size:.85rem; display:inline-flex; align-items:center; gap:6px; }
.learn-link i{ font-size:.72rem; transition:transform .3s cubic-bezier(.22,1,.36,1); }
.learn-link:hover i{ transform:translateX(4px); }

/* ===================================================
   DONATE PAGE
=================================================== */
.donate-hero-premium .overlay{ background:linear-gradient(165deg, rgba(199,69,47,.55) 0%, rgba(15,50,41,.86) 65%, rgba(15,50,41,.95) 100%); }
.donate-badge{ background:rgba(225,92,77,.22); border:1px solid rgba(225,92,77,.4); }
.donate-badge .pulse-dot{ background:var(--rose-light); }
.donate-badge .pulse-dot::after{ border-color:var(--rose-light); }

.donate-trust-strip{ background:var(--navy-deep); padding:22px 0; }
.dts-item{ display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,.85); }
.dts-item i{ color:var(--gold-light); font-size:1.15rem; }
.dts-item span{ font-size:.78rem; font-weight:600; line-height:1.3; }

.donate-amount-card{
  background:#fff; border:1px solid rgba(27,77,62,.1); border-radius:20px; padding:28px;
  box-shadow:0 30px 60px -35px rgba(27,77,62,.3);
}
.donate-amount-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.donate-amount-chip{
  border:1.5px solid rgba(27,77,62,.15); background:var(--ivory-dim); border-radius:10px; padding:14px 6px;
  font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--navy); transition:.25s; cursor:pointer;
}
.donate-amount-chip.donate-amount-custom{ font-family:var(--font-body); font-size:.85rem; font-weight:700; }
.donate-amount-chip:hover{ border-color:var(--rose); color:var(--rose); }
.donate-amount-chip.active{ background:linear-gradient(135deg,var(--rose),var(--rose-light)); border-color:var(--rose); color:#fff; }
@media(max-width:400px){ .donate-amount-grid{ grid-template-columns:repeat(2,1fr); } }

/* Donate page — "giving" animation (replaces the amount-picker column) */
.give-animation-wrap{
  position:relative; width:280px; height:280px; margin:0 auto; display:flex; align-items:center; justify-content:center;
}
.give-pulse-ring{
  position:absolute; top:50%; left:50%; width:130px; height:130px; border-radius:50%;
  border:2px solid var(--teal); opacity:.5; transform:translate(-50%,-50%) scale(1);
  animation: givePulse 3.6s ease-out infinite;
}
.give-pulse-ring.r2{ animation-delay:1.2s; }
.give-pulse-ring.r3{ animation-delay:2.4s; }
@keyframes givePulse{
  0%{ transform:translate(-50%,-50%) scale(1); opacity:.5; border-color:var(--teal); }
  100%{ transform:translate(-50%,-50%) scale(2.15); opacity:0; border-color:var(--gold); }
}
.give-center-icon{
  position:relative; z-index:2; width:130px; height:130px; border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--navy)); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:2.6rem; box-shadow:0 20px 45px -18px rgba(9,59,55,.55);
  animation: giveBeat 2.6s ease-in-out infinite;
}
@keyframes giveBeat{
  0%,100%{ transform:scale(1); }
  15%{ transform:scale(1.08); }
  30%{ transform:scale(1); }
}
.give-float{
  position:absolute; z-index:1; font-size:1.35rem; opacity:0;
  animation: giveFloat 5s ease-in infinite;
}
.give-float.f1{ left:12%; top:62%; color:var(--rose); animation-delay:0s; }
.give-float.f2{ left:78%; top:64%; color:var(--teal); animation-delay:1.25s; }
.give-float.f3{ left:22%; top:14%; color:#5f9e66; animation-delay:2.5s; }
.give-float.f4{ left:70%; top:12%; color:var(--gold); animation-delay:3.75s; }
@keyframes giveFloat{
  0%{ transform:translateY(0) scale(.6); opacity:0; }
  15%{ opacity:1; }
  75%{ opacity:1; }
  100%{ transform:translateY(-95px) scale(1.05); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .give-pulse-ring, .give-center-icon, .give-float{ animation:none; }
  .give-pulse-ring{ opacity:.25; }
  .give-float{ opacity:.8; }
}

.donate-upi-card{
  background:var(--ivory-dim); border-radius:20px; padding:28px; border:1px solid rgba(27,77,62,.08); height:100%;
}
.donate-qr-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:#fff; border:1.5px dashed rgba(27,77,62,.22); border-radius:16px; padding:32px 20px;
}
.donate-qr-placeholder i{ font-size:2.6rem; color:var(--teal-light); }
.donate-qr-placeholder span{ color:var(--ink-soft); font-size:.85rem; }

.bank-detail-list{ background:#fff; border-radius:14px; border:1px solid rgba(27,77,62,.09); overflow:hidden; }
.bank-detail-row{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:13px 18px; border-bottom:1px solid rgba(27,77,62,.07); font-size:.92rem; }
.bank-detail-row:last-child{ border-bottom:none; }
.bank-detail-row span{ color:var(--ink-soft); white-space:nowrap; }
.bank-detail-row b{ color:var(--navy); text-align:right; letter-spacing:.02em; word-break:break-word; }
@media (max-width:420px){
  .bank-detail-row{ flex-direction:column; gap:2px; }
  .bank-detail-row b{ text-align:left; }
}

/* Accordion — restyled to match the brand rather than default Bootstrap blue */
.accordion-premium .accordion-item{ border:1px solid rgba(27,77,62,.1); border-radius:14px !important; margin-bottom:12px; overflow:hidden; }
.accordion-premium .accordion-button{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-display); font-weight:600; color:var(--navy); background:#fff;
}
.accordion-premium .accordion-button:not(.collapsed){ background:var(--teal-pale); color:var(--navy); box-shadow:none; }
.accordion-premium .accordion-button::before{
  content:"\f059"; font-family:"Font Awesome 6 Free"; font-weight:900; color:var(--gold-deep); font-size:.85rem; flex-shrink:0;
}
.accordion-premium .accordion-button:focus{ box-shadow:0 0 0 2px var(--gold); }
.accordion-premium .accordion-body{ font-size:.92rem; }

/* Shared glassy highlight for every gradient icon badge across the site —
   svc-icn, wf-icon, nsi-icon (on hover), milestone-icon, hfc-icn, doc-icn, prog-icn */
.svc-icn, .wf-icon, .milestone-icon, .hfc-icn, .cfp-icon, .cil-icn{
  position:relative;
}
.svc-icn::after, .wf-icon::after, .milestone-icon::after, .hfc-icn::after, .cfp-icon::after, .cil-icn::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(155deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 40%);
}

/* ===================================================
   CONTACT PAGE
=================================================== */
.contact-hero-premium{ padding-bottom:76px; }

.contact-info-list{ margin-top:6px; }
.cil-item{ display:flex; gap:16px; padding:16px 0; border-bottom:1px dashed rgba(27,77,62,.15); }
.cil-item:last-child{ border-bottom:0; }
.cil-icn{
  width:48px; height:48px; border-radius:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.05rem; position:relative;
}
.cil-teal{ background:linear-gradient(135deg,var(--teal),var(--teal-light)); box-shadow:0 12px 24px -10px rgba(46,125,91,.5); }
.cil-gold{ background:linear-gradient(135deg,var(--gold-deep),var(--gold)); box-shadow:0 12px 24px -10px rgba(184,121,30,.5); }
.cil-item h6{ font-family:var(--font-display); margin-bottom:3px; }
.cil-item p{ color:var(--ink-soft); font-size:.88rem; margin-bottom:0; }
.cil-item p a{ color:var(--ink-soft); text-decoration:none; }
.cil-item p a:hover{ color:var(--teal); }

.contact-map-frame{ position:relative; border-radius:20px; overflow:hidden; height:260px; box-shadow:0 24px 50px -25px rgba(27,77,62,.35); border:1px solid rgba(27,77,62,.08); }
.contact-map-label{
  position:absolute; top:14px; left:14px; z-index:2; background:#fff; padding:7px 14px; border-radius:50px;
  font-size:.76rem; font-weight:700; color:var(--navy); display:flex; align-items:center; gap:7px; box-shadow:0 10px 20px -8px rgba(9,38,30,.4);
}
.contact-map-label i{ color:var(--rose); }

.contact-form-premium{ position:relative; overflow:hidden; }
.contact-form-premium::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg,var(--teal),var(--gold),var(--rose)); }
.cfp-icon{
  width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--teal),var(--teal-light)); color:#fff; font-size:1.2rem; margin-bottom:14px; position:relative;
}
.input-group-icon .input-group-text{ background:var(--ivory-dim); border-right:0; color:var(--teal); border-color:#dfe3e1; }
.input-group-icon .form-control{ border-left:0; }
.input-group-icon .form-control:focus{ box-shadow:none; border-color:#dfe3e1; }
.input-group-icon:focus-within .input-group-text{ color:var(--gold-deep); }
.input-group-icon:focus-within{ box-shadow:0 0 0 3px rgba(46,125,91,.15); border-radius:10px; }

/* ===================================================
   SERVICE / PROGRAM PAGES (programs/*.html)
=================================================== */
.prog-hero-icn{
  width:64px; height:64px; border-radius:18px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--teal),var(--teal-light)); color:#fff; font-size:1.5rem;
  box-shadow:0 18px 34px -14px rgba(46,125,91,.55); position:relative;
}
.prog-label{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:800; font-size:.76rem;
  letter-spacing:.05em; text-transform:uppercase; padding:6px 14px 6px 11px; border-radius:50px; margin-bottom:12px; border:0;
}
.prog-label-challenge{ background:rgba(225,92,77,.12); color:var(--rose-deep); }
.prog-label-challenge::before{ content:"\f071"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.72rem; }
.prog-label-approach{ background:var(--teal-pale); color:var(--teal); }
.prog-label-approach::before{ content:"\f0eb"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.72rem; }

.prog-related-card{ transition:.3s cubic-bezier(.22,1,.36,1); border:1px solid transparent; }
.prog-related-card:hover{ transform:translateY(-6px); border-color:rgba(242,169,62,.35); box-shadow:0 30px 54px -26px rgba(15,50,41,.42) !important; }
.prog-related-icn{ transition:.3s; }
.prog-related-card:hover .prog-related-icn{ background:linear-gradient(135deg,var(--gold-deep),var(--gold)); color:#fff; transform:rotate(-6deg) scale(1.06); }

/* ===================================================
   TEAM — premium 5-in-a-row grid (homepage preview only)
   Square, card-style — no rounded corners; photo + name
   sit inside one bordered card unit.
=================================================== */
.team-premium-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:26px 22px;
}
@media(max-width:991px){ .team-premium-grid{ grid-template-columns:repeat(3,1fr); gap:28px 20px; } }
@media(max-width:576px){ .team-premium-grid{ grid-template-columns:repeat(2,1fr); gap:24px 14px; } }

.team-premium-card{
  background:#fff; border:1px solid rgba(27,77,62,.09); overflow:hidden;
  box-shadow:0 20px 40px -26px rgba(9,59,55,.35); transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
}
.team-premium-card:hover{ transform:translateY(-7px); box-shadow:0 30px 54px -24px rgba(9,59,55,.45); border-color:rgba(242,169,62,.4); }
.team-premium-photo{ position:relative; aspect-ratio:1/1; overflow:hidden; }
.team-premium-photo .team-premium-initials{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:1.9rem; color:#fff; transition:transform .5s;
}
.team-premium-card:hover .team-premium-initials{ transform:scale(1.08); }
.team-premium-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.team-premium-card:hover .team-premium-photo img{ transform:scale(1.1); }
.team-premium-social{
  position:absolute; left:0; right:0; bottom:0; padding:14px 0 16px;
  display:flex; align-items:center; justify-content:center; gap:12px;
  background:linear-gradient(0deg, rgba(9,38,30,.94) 15%, rgba(9,38,30,.6) 65%, transparent 100%);
  opacity:0; transform:translateY(10px); transition:opacity .35s, transform .35s;
}
.team-premium-card:hover .team-premium-social{ opacity:1; transform:translateY(0); }
.team-premium-social a{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.16); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.92rem; transition:.25s; border:1px solid rgba(255,255,255,.32);
}
.team-premium-social a:hover{ background:var(--gold); border-color:var(--gold); color:var(--navy-deep); transform:scale(1.18); }
.team-premium-info{ padding:16px 10px 20px; text-align:center; border-top:1px solid rgba(27,77,62,.07); }
.team-premium-info h6{ margin-bottom:2px; font-size:.96rem; }
.team-premium-info span{ font-size:.76rem; }

/* ===================================================
   ANNAPURNA JAN AAHAR — brand name treatment
=================================================== */
.seva-brand-name{
  font-family:var(--font-display); color:var(--gold-deep); font-weight:700; font-size:1.5rem;
  letter-spacing:.01em; display:block; margin-bottom:4px;
}

.hero-quicklook{
  color:#fff; font-size:.85rem; font-weight:600; text-decoration:underline; text-underline-offset:3px;
  opacity:.9; transition:.25s; display:inline-flex; align-items:center; gap:6px; margin-top:14px;
}
.hero-quicklook:hover{ color:var(--gold-light); opacity:1; }

/* Annapurna Jan Aahar — floating corner popup (slides in from the right) */
.annapurna-popup{
  position:fixed; bottom:112px; right:24px; width:340px; max-width:88vw;
  background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 40px 80px -24px rgba(9,38,30,.5);
  transform:translateX(140%); opacity:0; pointer-events:none;
  transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .5s; z-index:1000;
}
.annapurna-popup.show{ transform:translateX(0); opacity:1; pointer-events:auto; }
.apop-close{
  position:absolute; top:10px; right:10px; z-index:3; width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.92); border:none; display:flex; align-items:center; justify-content:center;
  color:var(--navy); font-size:.78rem; box-shadow:0 6px 14px -6px rgba(0,0,0,.35); transition:.2s;
}
.apop-close:hover{ background:var(--gold); color:var(--navy-deep); }
.apop-img-wrap{ position:relative; height:195px; }
.apop-img-wrap img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block; }
.apop-img-wrap::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(9,38,30,.72) 0%, transparent 55%); }
.apop-badge{
  position:absolute; left:14px; bottom:12px; background:var(--gold); color:var(--navy-deep);
  font-weight:700; font-size:.7rem; padding:.32rem .75rem; border-radius:50px; display:inline-flex; align-items:center; gap:5px;
}
.apop-body{ padding:18px 20px 20px; }
.apop-body h5{ font-size:1.15rem; margin-bottom:4px; }
.apop-body p{ font-size:.84rem; color:var(--ink-soft); margin-bottom:0; line-height:1.55; }
.apop-cta{ display:flex; gap:8px; margin-top:16px; }
.apop-cta .btn{ flex:1 1 auto; justify-content:center; white-space:nowrap; }
@media(max-width:576px){
  .annapurna-popup{ left:16px; right:16px; width:auto; bottom:150px; }
  .apop-img-wrap{ height:140px; }
  .apop-body{ padding:14px 16px 16px; }
  .apop-body h5{ font-size:1.05rem; }
  .apop-body p{ font-size:.8rem; line-height:1.45; }
  .apop-cta{ margin-top:12px; }
}

@media(prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ===================================================
   UTILITY FIXES — classes used in markup but never defined
=================================================== */
.text-navy{ color:var(--navy) !important; }
.rounded-16{ border-radius:16px !important; }
.prog-related-card strong{ font-family:var(--font-display); font-size:1.05rem; }

/* Bootstrap .g-5 rows use a 3rem gutter (-1.5rem side margins) which is wider
   than the container's own padding on phones, pushing every two-column
   section ~12px past the screen edge. Use a normal gutter on small screens. */
@media(max-width:575.98px){
  .row.g-5, .row.gx-5{ --bs-gutter-x:1.5rem; }
}

/* ===================================================
   SEO LANDING PAGES — shared components
   (solid-waste-management-ngo-in-patna-bihar,
    csr-project-implementation-ngo-in-patna-bihar)
=================================================== */
.lp-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:18px auto 0; }
.lp-chip{
  display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:50px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.9);
  font-size:.8rem; font-weight:600; backdrop-filter:blur(4px);
}
.lp-chip i{ color:var(--gold-light); font-size:.78rem; }

.lp-lede{ font-size:1.08rem; line-height:1.75; color:var(--ink-soft); }
.lp-lede strong, .lp-body strong{ color:var(--navy); font-weight:700; }
.lp-body p{ color:var(--ink-soft); line-height:1.75; }

/* Photo with a floating caption badge */
.lp-photo{ position:relative; }
.lp-photo img{ width:100%; height:auto; border-radius:24px; box-shadow:0 26px 58px -26px rgba(15,50,41,.4); display:block; }
.lp-photo .lp-photo-badge{
  position:absolute; left:-14px; bottom:26px; background:#fff; border-radius:16px; padding:14px 18px;
  display:flex; align-items:center; gap:12px; box-shadow:0 22px 44px -20px rgba(15,50,41,.45); max-width:250px;
}
.lp-photo-badge .ic{
  width:42px; height:42px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--navy-deep);
}
.lp-photo-badge strong{ display:block; font-family:var(--font-display); color:var(--navy); font-size:.95rem; line-height:1.2; }
.lp-photo-badge small{ color:var(--ink-soft); font-size:.76rem; }
.lp-photo .lp-photo-sub{
  position:absolute; right:-18px; top:-22px; width:42%; border:6px solid var(--ivory); border-radius:20px;
  box-shadow:0 20px 40px -20px rgba(15,50,41,.45);
}
.bg-ivory-dim .lp-photo .lp-photo-sub{ border-color:var(--ivory-dim); }
@media(max-width:991.98px){
  .lp-photo .lp-photo-badge{ left:12px; bottom:12px; }
  .lp-photo .lp-photo-sub{ right:10px; top:-16px; width:38%; border-width:4px; }
}

/* Check-list in two columns */
.lp-checks{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr; gap:10px 22px; }
@media(min-width:576px){ .lp-checks{ grid-template-columns:1fr 1fr; } }
.lp-checks li{ display:flex; gap:10px; align-items:flex-start; color:var(--ink-soft); font-size:.95rem; line-height:1.45; }
.lp-checks li i{ color:var(--teal); margin-top:3px; flex-shrink:0; }
.lp-checks.lp-checks-card li{ background:#fff; border:1px solid rgba(27,77,62,.08); border-radius:12px; padding:12px 14px; }

/* Waste-type bins (SWM page) */
.seg-bin{
  background:#fff; border-radius:18px; border:1px solid rgba(27,77,62,.08); padding:24px 20px 22px; height:100%;
  position:relative; overflow:hidden; transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
}
.seg-bin::before{ content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--bin,var(--teal)); }
.seg-bin:hover{ transform:translateY(-6px); box-shadow:0 24px 46px -24px rgba(15,50,41,.35); }
.seg-bin .seg-ic{
  width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.3rem;
  color:var(--bin,var(--teal)); background:color-mix(in srgb, var(--bin,var(--teal)) 12%, #fff); margin-bottom:14px;
}
.seg-bin h6{ font-size:1.02rem; margin-bottom:6px; }
.seg-bin p{ font-size:.86rem; color:var(--ink-soft); margin:0; line-height:1.5; }
.seg-bin .seg-tag{ display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--bin,var(--teal)); margin-bottom:6px; }
.seg-wet{ --bin:#2E8B57; } .seg-dry{ --bin:#2F6FB5; } .seg-rec{ --bin:#0E6660; } .seg-san{ --bin:#B23A6B; } .seg-oth{ --bin:#C9821F; }

/* 3R trio */
.r3-wrap{ display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:768px){ .r3-wrap{ grid-template-columns:repeat(3,1fr); } }
.r3-card{
  border-radius:20px; padding:26px 24px; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(145deg,var(--navy) 0%,var(--teal) 100%);
}
.r3-card:nth-child(2){ background:linear-gradient(145deg,var(--teal) 0%,var(--teal-light) 120%); }
.r3-card:nth-child(3){ background:linear-gradient(145deg,var(--gold-deep) 0%,var(--gold) 100%); color:var(--navy-deep); }
.r3-card .r3-big{ font-family:var(--font-display); font-size:2.6rem; font-weight:800; line-height:1; opacity:.2; position:absolute; right:18px; top:14px; }
.r3-card i{ font-size:1.5rem; margin-bottom:12px; display:block; }
.r3-card h5{ color:inherit; margin-bottom:6px; }
.r3-card p{ margin:0; font-size:.9rem; opacity:.9; }

/* Icon + text focus cards */
.focus-card{
  display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid rgba(27,77,62,.08);
  border-radius:16px; padding:20px; height:100%; transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .35s;
}
.focus-card:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -26px rgba(15,50,41,.35); border-color:rgba(242,169,62,.4); }
.focus-card .fc-ic{
  width:46px; height:46px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg,var(--teal),var(--teal-light)); box-shadow:0 10px 20px -8px rgba(46,125,91,.5);
}
.focus-card:nth-child(3n+2) .fc-ic, .col-focus:nth-child(3n+2) .fc-ic{ background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--navy-deep); }
.focus-card h6{ margin-bottom:4px; font-size:1rem; }
.focus-card p{ margin:0; font-size:.88rem; color:var(--ink-soft); line-height:1.5; }

/* Programme-area cards with photo (CSR page) */
.area-card{ background:#fff; border-radius:20px; overflow:hidden; height:100%; border:1px solid rgba(27,77,62,.08); transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; display:flex; flex-direction:column; }
.area-card:hover{ transform:translateY(-6px); box-shadow:0 26px 50px -26px rgba(15,50,41,.4); }
.area-card .area-img{ height:190px; overflow:hidden; position:relative; }
.area-card .area-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.area-card:hover .area-img img{ transform:scale(1.06); }
.area-card .area-ic{
  position:absolute; left:18px; bottom:-22px; width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--navy-deep); box-shadow:0 12px 24px -10px rgba(0,0,0,.35); z-index:2;
}
.area-card .area-img{ overflow:visible; }
.area-card .area-img .area-clip{ height:100%; overflow:hidden; }
.area-card .area-body{ padding:34px 22px 22px; }
.area-card h5, .area-card .h5{ font-size:1.1rem; margin-bottom:8px; font-weight:700; }
.area-card p{ font-size:.9rem; color:var(--ink-soft); margin:0; line-height:1.6; }

/* Horizontal process track (CSR page) */
.ptrack{ display:grid; grid-template-columns:1fr; gap:18px; counter-reset:pt; }
@media(min-width:992px){ .ptrack{ grid-template-columns:repeat(5,1fr); gap:16px; } }
.ptrack-step{ position:relative; background:#fff; border:1px solid rgba(27,77,62,.08); border-radius:18px; padding:24px 20px 22px; transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; }
.ptrack-step:hover{ transform:translateY(-5px); box-shadow:0 22px 44px -24px rgba(15,50,41,.35); }
.ptrack-num{
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:#fff; margin-bottom:14px;
  background:linear-gradient(135deg,var(--navy),var(--teal)); box-shadow:0 0 0 6px var(--teal-pale);
}
.ptrack-step:nth-child(even) .ptrack-num{ background:linear-gradient(135deg,var(--gold-deep),var(--gold)); box-shadow:0 0 0 6px #FCEFD9; }
.ptrack-step h6, .ptrack-step .h6{ font-size:1rem; margin-bottom:6px; font-weight:700; }
.ptrack-step p{ font-size:.87rem; color:var(--ink-soft); margin:0; line-height:1.55; }
@media(min-width:992px){
  .ptrack-step:not(:last-child)::after{
    content:""; position:absolute; top:47px; right:-17px; width:18px; height:2px;
    background:repeating-linear-gradient(90deg, var(--gold) 0 4px, transparent 4px 7px); z-index:2;
  }
}

/* Highlight callout band */
.lp-callout{
  border-radius:24px; padding:34px 30px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--teal-pale) 0%, #FDF4E6 100%); border:1px solid rgba(14,102,96,.12);
}
.lp-callout .lp-callout-ic{
  width:60px; height:60px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:#fff;
  background:linear-gradient(135deg,var(--teal),var(--teal-light)); box-shadow:0 16px 30px -14px rgba(46,125,91,.6); flex-shrink:0;
}
@media(max-width:575.98px){ .lp-callout{ padding:26px 20px; } }

/* Keyword-rich pill cloud */
.lp-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.lp-pills span{ background:#fff; border:1px solid rgba(27,77,62,.1); color:var(--navy); font-size:.82rem; font-weight:600; padding:7px 14px; border-radius:50px; display:inline-flex; align-items:center; gap:7px; }
.lp-pills span i{ color:var(--gold-deep); font-size:.75rem; }

.accordion-premium h3.accordion-header{ margin:0; }

/* Form helpers — honeypot + submit status */
.hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.js-mail-form{ position:relative; }
.form-status{ display:none; border-radius:12px; padding:12px 16px; font-size:.9rem; line-height:1.5; }
.form-status.show{ display:block; }
.form-status.success{ background:var(--teal-pale); color:var(--teal); border:1px solid rgba(14,102,96,.2); }
.form-status.error{ background:#FDECEF; color:var(--rose-deep); border:1px solid rgba(178,58,107,.2); }
.form-status a{ color:inherit; text-decoration:underline; }
.js-mail-form.iwf-validated .form-control:invalid, .js-mail-form.iwf-validated .form-select:invalid{ border-color:var(--rose); box-shadow:0 0 0 3px rgba(178,58,107,.12); }