/* ==========================================================================
   Vishwa Hindu Mahasabha — Modern Theme
   Restrained system: Slate neutrals + a single Teal accent. Flat, minimal
   gradients, modern rounded surfaces.
   (Legacy variable names kept; values point at the new system.)
   ========================================================================== */

:root {
  /* Restrained modern system: slate neutrals + ONE teal accent. Flat surfaces. */
  --accent:       #0D9488;   /* teal-600 — the single accent */
  --accent-dark:  #0F766E;   /* teal-700 */
  --accent-soft:  #14B8A6;   /* teal-500 */
  --accent-tint:  #F0FDFA;   /* teal-50 wash */

  /* Legacy names kept so existing markup picks up the new system */
  --saffron:      #0D9488;   /* → accent */
  --saffron-soft: #14B8A6;
  --gold:         #14B8A6;   /* accent on dark surfaces */
  --gold-deep:    #0F766E;
  --deep-red:     #0F172A;   /* headings → near-black slate (not colourful) */
  --deep-red-2:   #1E293B;
  --maroon:       #0F172A;   /* dark sections / footer */
  --cream:        #F8FAFC;   /* light background */
  --ink:          #0F172A;   /* body text */
  --muted:        #64748B;   /* slate-500 */
  --line:         #E2E8F0;   /* borders */
  --white:        #ffffff;

  /* Near-flat "gradients" (kept as vars so all existing usages stay valid) */
  --grad-fire:  linear-gradient(135deg, #0D9488 0%, #0F766E 100%);
  --grad-gold:  linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
  --grad-royal: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);

  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --shadow-md: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg: 0 12px 32px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.06);

  --radius:    14px;
  --radius-lg: 18px;
  --nav-h:     72px;   /* navbar height — heroes tuck under the transparent header */
  --font-head: 'Marcellus', 'Playfair Display', serif;
  --font-body: 'Poppins', system-ui, sans-serif;
  --font-bn:   'Hind Siliguri', 'Noto Sans Bengali', sans-serif;
  --header-h:  76px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
body.lang-bn, .lang-bn { font-family: var(--font-bn); }

h1,h2,h3,h4,.font-head { font-family: var(--font-head); letter-spacing: .3px; }
.lang-bn h1, .lang-bn h2, .lang-bn h3, .lang-bn h4 { font-family: var(--font-bn); font-weight: 700; }

a { text-decoration: none; transition: color .25s, transform .25s; }
img { max-width: 100%; }
section { position: relative; }

/* ---------- Utility ------------------------------------------------------- */
.text-saffron { color: var(--saffron) !important; }
.text-gold    { color: var(--gold-deep) !important; }
.text-red     { color: var(--deep-red) !important; }
.bg-cream     { background: var(--cream) !important; }
.bg-royal     { background: var(--grad-royal) !important; color:#fff; }
.grad-text {
  background: var(--grad-fire); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.section-pad { padding: clamp(3.5rem, 7vw, 7rem) 0; }
.container-narrow { max-width: 960px; margin-inline: auto; }

/* Decorative eyebrow + heading */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-body); font-weight: 600; letter-spacing: 3px;
  text-transform: uppercase; font-size: .74rem; color: var(--deep-red);
}
.eyebrow::before, .eyebrow::after {
  content: ""; width: 26px; height: 2px; background: var(--grad-fire); border-radius: 2px;
}
.section-title { font-size: clamp(1.8rem, 3.6vw, 2.9rem); font-weight: 700; line-height: 1.15; margin: .6rem 0 1rem; }
.section-sub { color: var(--muted); max-width: 640px; margin-inline: auto; }

/* Om / lotus decorative divider */
.divider-om { display:flex; align-items:center; justify-content:center; gap:1rem; color:var(--gold-deep); }
.divider-om::before, .divider-om::after {
  content:""; height:1px; width:min(120px,18vw);
  background:linear-gradient(90deg,transparent,var(--gold));
}
.divider-om.rev::before { background:linear-gradient(90deg,var(--gold),transparent); }

/* ---------- Buttons (modern, flat, no gradient) --------------------------- */
.btn {
  border-radius: 10px; font-weight: 600; font-size: .95rem;
  padding: .65rem 1.35rem; position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: .85rem 1.7rem; font-size: 1rem; border-radius: 12px; }
.btn-sm { padding: .45rem .9rem; font-size: .85rem; border-radius: 8px; }

/* Primary — solid accent */
.btn-fire { background: var(--accent); color:#fff; box-shadow: var(--shadow-sm); }
.btn-fire:hover { background: var(--accent-dark); color:#fff; box-shadow: var(--shadow-md); }

/* Secondary — dark slate */
.btn-royal { background: var(--ink); color:#fff; }
.btn-royal:hover { background:#1E293B; color:#fff; box-shadow: var(--shadow-md); }

/* Tonal — soft accent tint */
.btn-gold { background: var(--accent-tint); color: var(--accent-dark); border-color: #99F6E4; }
.btn-gold:hover { background:#CCFBF1; color: var(--accent-dark); }

/* Outline / ghost */
.btn-ghost { border:1px solid var(--line); color: var(--ink); background:#fff; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-tint); }
.btn-outline-light-2 { border:1px solid rgba(255,255,255,.5); color:#fff; background:rgba(255,255,255,.08); backdrop-filter: blur(4px); }
.btn-outline-light-2:hover { background:#fff; color:var(--ink); border-color:#fff; }

/* Ripple (subtle) */
.btn .ripple { position:absolute; border-radius:50%; transform:scale(0); background:rgba(255,255,255,.28); animation:ripple .6s linear; pointer-events:none; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* ---------- Loader -------------------------------------------------------- */
#vhm-loader {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: var(--grad-royal); transition: opacity .6s ease, visibility .6s;
}
#vhm-loader.hide { opacity: 0; visibility: hidden; }
.loader-om {
  width: 84px; height: 84px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25); border-top-color: var(--gold);
  display: grid; place-items: center; animation: spin 1.1s linear infinite;
  color: var(--gold); font-size: 2rem; font-family: var(--font-head);
}
.loader-om span { animation: pulse 1.1s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100%{opacity:.5} 50%{opacity:1} }

/* ---------- Top bar + Navbar (modern, clean) ------------------------------ */
.topbar { background: var(--ink); color: #94A3B8; font-size: .8rem; border-bottom: 1px solid transparent; }
.topbar a { color: #CBD5E1; }
.topbar a:hover { color: var(--accent-soft); }

/* Transparent glass header that floats over the hero, then solidifies on scroll */
.navbar-vhm {
  position: sticky; top: 0; z-index: 1030;
  /* deep transparent glass over the hero — image shows through, white text stays legible */
  background: rgba(15,23,42,.32); backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background .3s, box-shadow .3s, border-color .3s, backdrop-filter .3s;
}
.navbar-vhm.scrolled {
  background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--line); box-shadow: var(--shadow-sm);
}
/* Pages without a dark hero behind the header get the solid treatment always */
body.has-solid-nav .navbar-vhm { background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(14px); border-bottom-color: var(--line); }

.navbar-brand { display: flex; align-items: center; gap: .55rem; }
.navbar-brand img { height: 42px; width: 42px; border-radius: 10px; object-fit: cover; background:#fff; padding:2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25); flex:0 0 auto; }
.brand-text { display:flex; flex-direction:column; justify-content:center; line-height:1.1; }
.brand-name { display:block; font-family: var(--font-head); font-weight: 700; line-height: 1.1; color: #fff; font-size: 1rem; letter-spacing:.2px; }
.brand-sub { display:block; font-size: .6rem; line-height:1; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent-soft); font-weight:600; margin-top:4px; }

.navbar-vhm .nav-link {
  font-weight: 500; font-size: .9rem; color: rgba(255,255,255,.82); margin: 0 .05rem; white-space: nowrap;
  padding: .45rem .7rem !important; border-radius: 8px; transition: color .2s, background .2s;
}
.navbar-vhm .nav-link:hover { color:#fff; background: rgba(255,255,255,.12); }
.navbar-vhm .nav-link.active { color:#fff; background: rgba(255,255,255,.16); font-weight: 600; }
.navbar-vhm .dropdown-toggle::after { margin-left:.35em; opacity:.55; }
.navbar-vhm .navbar-toggler-icon { filter: invert(1) brightness(2); }

/* Scrolled / solid state → dark text on light glass */
.navbar-vhm.scrolled .brand-name,
body.has-solid-nav .brand-name { color: var(--ink); }
.navbar-vhm.scrolled .nav-link,
body.has-solid-nav .navbar-vhm .nav-link { color:#475569; }
.navbar-vhm.scrolled .nav-link:hover,
body.has-solid-nav .navbar-vhm .nav-link:hover { color: var(--ink); background:#F1F5F9; }
.navbar-vhm.scrolled .nav-link.active,
body.has-solid-nav .navbar-vhm .nav-link.active { color: var(--accent-dark); background: var(--accent-tint); }
.navbar-vhm.scrolled .navbar-brand img,
body.has-solid-nav .navbar-brand img { box-shadow: 0 0 0 1px var(--line); }
.navbar-vhm.scrolled .navbar-toggler-icon,
body.has-solid-nav .navbar-toggler-icon { filter:none; }
.navbar-vhm.scrolled .navbar-toggler,
body.has-solid-nav .navbar-vhm .navbar-toggler { border-color: var(--line); }
.navbar-vhm .navbar-toggler { border:1px solid rgba(255,255,255,.35); }

/* Heroes tuck beneath the transparent header */
.hero-modern, .page-hero { margin-top: calc(-1 * var(--nav-h)); }
.hero-modern .hero-slide-split { padding-top: calc(var(--nav-h) + 2rem); }
.page-hero { padding-top: calc(var(--nav-h) + clamp(2.5rem, 5vw, 4rem)) !important; }

.lang-switch { display:inline-flex; background:rgba(255,255,255,.08); border-radius:8px; padding:2px; }
.lang-switch a { font-weight:600; font-size:.75rem; padding:.2rem .5rem; border-radius:6px; color:#94A3B8; }
.lang-switch a.on { background: var(--accent); color:#fff; }

/* Modern hamburger */
.navbar-vhm .navbar-toggler { border:1px solid var(--line); border-radius:8px; padding:.35rem .55rem; box-shadow:none; }
.navbar-vhm .navbar-toggler:focus { box-shadow:none; }

/* Mobile header: keep the brand from pushing the toggler off-screen */
@media (max-width: 991px){
  .navbar-vhm .container { flex-wrap: nowrap; }
  .navbar-brand { max-width: calc(100% - 64px); min-width:0; overflow:hidden; }
  .navbar-brand > span { min-width:0; overflow:hidden; }        /* allow the text to shrink */
  .navbar-brand img { flex:0 0 auto; }
  .navbar-vhm .navbar-toggler { flex:0 0 auto; }
  .brand-name { font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
  .navbar-brand img { height:38px; width:38px; }
  .navbar-vhm .nav-link { padding:.7rem .8rem !important; }
  .navbar-vhm .nav-item .btn { width:100%; margin-top:.5rem; }
}

.dropdown-menu { border:1px solid var(--line); box-shadow: var(--shadow-lg); border-radius: 12px; padding:.35rem; margin-top:.5rem; }
.dropdown-item { border-radius:8px; font-weight:500; font-size:.92rem; padding:.55rem .8rem; color:#475569; }
.dropdown-item:hover { background: var(--accent-tint); color: var(--accent-dark); }

/* ---------- Hero Slider --------------------------------------------------- */
.hero { position: relative; }
.hero .swiper { width: 100%; height: clamp(520px, 92vh, 900px); }
.hero-slide { position: relative; height: 100%; display: grid; align-items: center; }
.hero-slide .bg {
  position:absolute; inset:0; background-size: cover; background-position: center;
  transform: scale(1.12); transition: transform 7s ease;
}
.swiper-slide-active .hero-slide .bg { transform: scale(1); }
.hero-slide::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(30,27,75,.86) 0%, rgba(67,56,202,.55) 45%, rgba(0,0,0,.15) 100%);
}
.hero-content { position: relative; z-index: 3; color: #fff; max-width: 720px; }
.hero-eyebrow { color: var(--gold); letter-spacing: 4px; text-transform: uppercase; font-weight:600; font-size:.8rem; }
.hero-title { font-size: clamp(2.2rem, 5.4vw, 4.4rem); font-weight: 700; line-height: 1.06; text-shadow: 0 6px 30px rgba(0,0,0,.4); }
.hero-title .grad-text { background: var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-text { font-size: clamp(1rem,1.5vw,1.2rem); color: #e0e7ff; max-width: 560px; }
.hero .swiper-pagination-bullet { background:#fff; opacity:.5; width:11px; height:11px; }
.hero .swiper-pagination-bullet-active { background: var(--gold); opacity:1; width:30px; border-radius:6px; }
.hero-nav { position:absolute; z-index:4; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.4); color:#fff; cursor:pointer; backdrop-filter:blur(6px); transition:.3s; }
.hero-nav:hover { background: var(--gold); color: var(--maroon); }
.hero-prev { left: 22px; } .hero-next { right: 22px; }
@media (max-width: 991px){ .hero-nav{ display:none; } .hero-slide::after{ background:linear-gradient(180deg, rgba(30,27,75,.6), rgba(67,56,202,.75)); } }

/* Marquee sanskrit banner */
.mantra-bar { background: var(--ink); color:#94A3B8; overflow:hidden; white-space:nowrap; border-bottom:1px solid rgba(255,255,255,.06); }
/* Transparent glass strip pinned to the bottom of the hero */
.mantra-over { position:absolute; left:0; right:0; bottom:0; z-index:4; background:rgba(255,255,255,.06);
  backdrop-filter: blur(8px); border-top:1px solid rgba(255,255,255,.12); border-bottom:0; color:rgba(255,255,255,.75); }
.mantra-over .mantra-track span { color:rgba(255,255,255,.72); }
.mantra-over .mantra-track .bi { color:var(--accent-soft); }
.mantra-track { display:inline-flex; gap:3rem; padding:.6rem 0; animation: marquee 24s linear infinite; font-family:var(--font-head); letter-spacing:.5px; font-size:.9rem; }
.mantra-track span { display:inline-flex; align-items:center; gap:1rem; }
@keyframes marquee { from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- Glass cards --------------------------------------------------- */
.glass {
  background: rgba(255,255,255,.72); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.card-lift { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; will-change: transform; }
.card-lift:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); }

/* Fancy top-border card */
.card-fancy { background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); border:1px solid var(--line); }
.card-fancy .card-top { height:3px; background: var(--accent); }

/* ---------- Stats counters ------------------------------------------------ */
.stat { text-align:center; color:#fff; }
.stat .num { font-family: var(--font-head); font-size: clamp(2rem,4vw,3.2rem); font-weight:700; color: var(--gold); }
.stat .lbl { text-transform:uppercase; letter-spacing:2px; font-size:.78rem; opacity:.9; }

/* ---------- Activity cards ------------------------------------------------ */
.activity-card { position:relative; border-radius: var(--radius); overflow:hidden; min-height: 260px; display:flex; align-items:flex-end; color:#fff; box-shadow: var(--shadow-sm); }
.activity-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .6s; }
.activity-card:hover img { transform: scale(1.12); }
.activity-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(15,23,42,.62) 100%); }
.activity-card .body { position:relative; z-index:2; padding:1.3rem; }
.activity-card .ico { width:52px; height:52px; border-radius:14px; background:var(--grad-fire); display:grid; place-items:center; font-size:1.4rem; margin-bottom:.6rem; box-shadow:0 8px 18px rgba(99,102,241,.4); }
.activity-card h5 { margin:0; font-family:'Poppins',system-ui,sans-serif; font-weight:500; font-size:.92rem; letter-spacing:.2px; text-shadow:0 1px 8px rgba(0,0,0,.5); }

/* ---------- Leader cards -------------------------------------------------- */
.leader-card { background:#fff; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-sm); text-align:center; }
.leader-photo { position:relative; aspect-ratio: 1/1; overflow:hidden; }
.leader-photo img { width:100%; height:100%; object-fit:cover; transition: transform .6s; }
.leader-card:hover .leader-photo img { transform: scale(1.08); }
.leader-photo .placeholder { width:100%; height:100%; display:grid; place-items:center; background: var(--grad-royal); color: var(--gold); font-family:var(--font-head); font-size:3.4rem; }
.leader-photo .ribbon { position:absolute; left:0; bottom:0; right:0; padding:.9rem; background:linear-gradient(180deg,transparent,rgba(30,27,75,.85)); color:#fff; }
.leader-body { padding:1.1rem 1rem 1.4rem; }
.leader-body h5 { margin:0; color:var(--deep-red); font-weight:700; }
.leader-role { color: var(--gold-deep); font-weight:600; font-size:.9rem; }
.leader-socials a { width:34px;height:34px;border-radius:50%; display:inline-grid; place-items:center; background:var(--cream); color:var(--deep-red); margin:.15rem; }
.leader-socials a:hover { background:var(--grad-fire); color:#fff; }
.badge-order { position:absolute; top:12px; left:12px; z-index:2; background:var(--grad-gold); color:var(--maroon); width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:700; box-shadow:var(--shadow-sm); }

/* ---------- Section backgrounds ------------------------------------------ */
.bg-pattern { background-image: radial-gradient(rgba(20,184,166,.18) 1.2px, transparent 1.2px); background-size: 22px 22px; }
.section-royal { background: var(--grad-royal); color:#fff; }
.section-royal .section-sub { color:#cbd5e1; }
.section-royal .eyebrow { color: var(--gold); }
.section-royal .eyebrow::before,.section-royal .eyebrow::after{ background:var(--gold); }

/* ---------- Leadership message ------------------------------------------- */
.msg-card { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:1.6rem; position:relative; overflow:hidden; }
.msg-card::before { content:"\201C"; position:absolute; top:-10px; right:14px; font-family:var(--font-head); font-size:6rem; color:rgba(45,212,191,.25); }
.msg-avatar { width:66px; height:66px; border-radius:50%; object-fit:cover; border:3px solid var(--gold); }

/* ---------- Intl coordination -------------------------------------------- */
.flag-card { border-radius:var(--radius); overflow:hidden; position:relative; min-height:180px; display:grid; place-items:center; color:#fff; text-align:center; box-shadow:var(--shadow-sm); }
.flag-card::after { content:""; position:absolute; inset:0; background:rgba(30,27,75,.45); }
.flag-card .fl { position:relative; z-index:2; }
.flag-card .fl .em { font-size:2.6rem; }

/* ---------- Countdown ----------------------------------------------------- */
.count-box { background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); border-radius:14px; padding:.8rem 1rem; text-align:center; min-width:78px; }
.count-box .n { font-family:var(--font-head); font-size:1.9rem; font-weight:700; color:var(--gold); }
.count-box .l { font-size:.7rem; text-transform:uppercase; letter-spacing:1px; opacity:.85; }

/* ---------- Gallery ------------------------------------------------------- */
.gallery-item { position:relative; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); }
.gallery-item img { width:100%; height:100%; object-fit:cover; aspect-ratio: 4/3; transition: transform .6s; }
.gallery-item:hover img { transform: scale(1.12); }
.gallery-item .cap { position:absolute; inset:0; display:flex; align-items:flex-end; padding:1rem; color:#fff; opacity:0; background:linear-gradient(180deg,transparent,rgba(30,27,75,.85)); transition:.35s; }
.gallery-item:hover .cap { opacity:1; }

/* ---------- CTA ----------------------------------------------------------- */
.cta-band { background: var(--accent); color:#fff; border-radius: var(--radius-lg); padding: clamp(2rem,5vw,3rem); box-shadow: var(--shadow-md); position:relative; overflow:hidden; }
.cta-band::after { content:""; position:absolute; right:-70px; top:-70px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.07); }

/* ---------- Footer -------------------------------------------------------- */
.footer { background: var(--maroon); color:#e2e8f0; padding-top: 3.5rem; }
.footer h6 { color: var(--gold); text-transform:uppercase; letter-spacing:2px; font-size:.85rem; }
.footer a { color:#e2e8f0; }
.footer a:hover { color: var(--gold); padding-left:4px; }
.footer .foot-links li { margin-bottom:.5rem; }
.footer .social a { width:40px; height:40px; border-radius:50%; display:inline-grid; place-items:center; background:rgba(255,255,255,.08); margin-right:.4rem; }
.footer .social a:hover { background: var(--grad-fire); color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); margin-top:2.5rem; padding:1.2rem 0; font-size:.85rem; }

/* ---------- Page hero (inner pages) -------------------------------------- */
.page-hero { position:relative; padding: clamp(3rem,7vw,6rem) 0 clamp(2.5rem,5vw,4rem); color:#fff; text-align:center; overflow:hidden; }
.page-hero::before { content:""; position:absolute; inset:0; background-size:cover; background-position:center; background-image: var(--ph-bg); transform: scale(1.05); }
.page-hero::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(15,23,42,.42), rgba(15,23,42,.58)); }
.page-hero > .container { position:relative; z-index:2; }
.page-hero h1 { font-size: clamp(2rem,4.4vw,3.4rem); font-weight:700; text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.breadcrumb-vhm { display:inline-flex; gap:.5rem; align-items:center; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); padding:.4rem 1rem; border-radius:50px; font-size:.85rem; }
.breadcrumb-vhm a { color: var(--gold); }

/* ---------- Student Projects header (imageless gradient) ----------------- */
.sp-hero { position:relative; overflow:hidden; text-align:center; color:#fff;
  padding: clamp(3rem,7vw,5.5rem) 0 clamp(2.4rem,5vw,3.6rem);
  background: linear-gradient(120deg, #0F172A 0%, #134E4A 52%, #0D9488 100%); }
.sp-hero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image: radial-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.4px); background-size:22px 22px; }
.sp-hero .container { position:relative; z-index:2; }
.sp-blob { position:absolute; border-radius:50%; filter:blur(60px); opacity:.35; pointer-events:none; }
.sp-blob-1 { width:320px; height:320px; background:#14B8A6; top:-120px; right:-60px; }
.sp-blob-2 { width:260px; height:260px; background:#0EA5E9; bottom:-140px; left:-60px; opacity:.25; }
.sp-kicker { display:inline-flex; align-items:center; gap:.35rem; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28); padding:.32rem .9rem; border-radius:50px; font-size:.74rem;
  font-weight:600; letter-spacing:1.5px; text-transform:uppercase; }
.sp-title { font-family:var(--font-head); font-size:clamp(2rem,4.4vw,3.2rem); font-weight:700; margin:.7rem 0 0; }
.sp-sub { color:#CFE9E5; max-width:640px; margin:.7rem auto 0; font-size:1.02rem; line-height:1.7; }
.sp-crumb { display:inline-flex; gap:.5rem; align-items:center; margin-top:1.1rem; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25); padding:.4rem 1rem; border-radius:50px; font-size:.82rem; }
.sp-crumb a { color:#fff; text-decoration:none; opacity:.9; } .sp-crumb .bi { font-size:.7rem; opacity:.8; }

/* ---------- Forms / multi-step ------------------------------------------- */
.form-control, .form-select { border-radius: 12px; padding:.7rem .9rem; border:1.5px solid #e7d9c4; }
.form-control:focus, .form-select:focus { border-color: var(--saffron); box-shadow: 0 0 0 .2rem rgba(99,102,241,.15); }
.form-label { font-weight:600; color:var(--ink); }
.step-track { display:flex; justify-content:space-between; margin-bottom:2rem; position:relative; }
.step-track::before { content:""; position:absolute; top:22px; left:6%; right:6%; height:3px; background:#eaddc6; z-index:0; }
.step-dot { position:relative; z-index:2; text-align:center; flex:1; }
.step-dot .c { width:46px; height:46px; border-radius:50%; background:#fff; border:3px solid #eaddc6; color:var(--muted); display:grid; place-items:center; margin:0 auto .4rem; font-weight:700; transition:.3s; }
.step-dot.active .c, .step-dot.done .c { background: var(--grad-fire); border-color:transparent; color:#fff; box-shadow:var(--shadow-sm); }
.step-dot .t { font-size:.78rem; font-weight:600; color:var(--muted); }
.step-dot.active .t { color:var(--deep-red); }
.step-panel { display:none; } .step-panel.active { display:block; animation: fadeUp .4s ease; }
@keyframes fadeUp { from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }

/* Photo upload preview */
.photo-drop { border:2px dashed #e0c9a3; border-radius:16px; padding:1.4rem; text-align:center; cursor:pointer; transition:.3s; }
.photo-drop:hover { border-color: var(--saffron); background: var(--cream); }
.photo-preview { width:120px; height:140px; object-fit:cover; border-radius:10px; border:2px solid var(--gold); }

/* ---------- Membership card ---------------------------------------------- */
.mcard { width: 340px; border-radius:18px; overflow:hidden; box-shadow: var(--shadow-lg); background:#fff; margin-inline:auto; }
.mcard-top { background: var(--grad-royal); color:#fff; padding:1rem; display:flex; align-items:center; gap:.7rem; }
.mcard-top img { width:44px; height:44px; border-radius:50%; border:2px solid var(--gold); }
.mcard-body { padding:1rem; display:flex; gap:1rem; }
.mcard-photo { width:96px; height:112px; object-fit:cover; border-radius:10px; border:2px solid var(--gold); }
.mcard .mid { font-family:var(--font-head); color:var(--deep-red); letter-spacing:1px; }
.mcard-foot { background: var(--grad-fire); color:#fff; padding:.5rem 1rem; font-size:.78rem; text-align:center; }

/* ---------- Timeline ------------------------------------------------------ */
.timeline { position:relative; padding-left:0; }
.timeline::before { content:""; position:absolute; left:20px; top:0; bottom:0; width:3px; background: var(--grad-fire); }
.tl-item { position:relative; padding-left:60px; margin-bottom:2rem; }
.tl-item .dot { position:absolute; left:8px; top:2px; width:26px; height:26px; border-radius:50%; background:#fff; border:4px solid var(--saffron); }

/* ---------- Back to top --------------------------------------------------- */
#toTop { position:fixed; right:20px; bottom:20px; width:44px; height:44px; border-radius:10px; border:none;
  background: var(--ink); color:#fff; box-shadow: var(--shadow-lg); opacity:0; visibility:hidden; transform: translateY(10px); transition:.25s; z-index:1040; }
#toTop.show { opacity:1; visibility:visible; transform:none; }

/* ---------- Floating action (donate) ------------------------------------- */
.fab-donate { position:fixed; left:20px; bottom:20px; z-index:1040; background:var(--accent); color:#fff; border-radius:10px; padding:.6rem 1.1rem; box-shadow:var(--shadow-lg); font-weight:600; font-size:.9rem; display:inline-flex; gap:.5rem; align-items:center; }
.fab-donate:hover { color:#fff; background:var(--accent-dark); }

/* ---------- Dark mode ----------------------------------------------------- */
body.dark { --cream:#1a1210; --ink:#f3e6d6; --muted:#c9b7a3; --white:#211815; background:#160f0d; color:#f3e6d6; }
body.dark .glass, body.dark .card-fancy, body.dark .leader-card, body.dark .msg-card, body.dark .mcard { background:#241a16; border-color:rgba(45,212,191,.2); color:#f3e6d6; }
body.dark .navbar-vhm { background:rgba(30,20,16,.85); }
body.dark .navbar-vhm .nav-link { color:#f3e6d6; }
body.dark .form-control, body.dark .form-select { background:#241a16; color:#f3e6d6; border-color:#3a2b23; }

/* ---------- Modern grid background --------------------------------------- */
.grid-bg { position: relative; }
.grid-bg::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 55%, transparent 100%);
}
.grid-bg > * { position: relative; z-index: 1; }
.section-royal.grid-bg::before {
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
}

/* ---------- Hindu decorative floating animations ------------------------- */
.deco-layer { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.float-deco { position:absolute; font-family:var(--font-head); color:rgba(15,23,42,.05); user-select:none;
  animation: floaty 8s ease-in-out infinite; }
.float-deco.om  { font-size:3.4rem; }
.float-deco.slow { animation-duration:12s; }
.float-deco.spin { animation: spinFloat 22s linear infinite; }
@keyframes floaty { 0%,100%{ transform:translateY(0) rotate(0deg); opacity:.5 } 50%{ transform:translateY(-26px) rotate(8deg); opacity:.9 } }
@keyframes spinFloat { from{ transform:rotate(0) } to{ transform:rotate(360deg) } }

/* Petal/diya drift */
.petal { position:absolute; top:-40px; width:16px; height:16px; border-radius:50% 0 50% 0;
  background:linear-gradient(135deg,var(--saffron),var(--gold)); opacity:.55; animation: drift linear infinite; }
@keyframes drift { 0%{ transform:translateY(-40px) rotate(0); opacity:0 } 10%{opacity:.7} 100%{ transform:translateY(105vh) rotate(360deg); opacity:0 } }

/* Section reveal shimmer for headings */
.grad-underline { position:relative; display:inline-block; }
.grad-underline::after { content:""; position:absolute; left:15%; right:15%; bottom:-10px; height:4px; border-radius:4px;
  background:var(--grad-fire); transform:scaleX(0); transform-origin:center; animation: growLine 1s ease forwards; animation-delay:.3s; }
@keyframes growLine { to{ transform:scaleX(1) } }

/* ---------- Enhanced animated Donate button ------------------------------ */
.btn-donate { background: var(--accent); color:#fff; border:none; box-shadow: var(--shadow-sm); }
.btn-donate:hover { color:#fff; background: var(--accent-dark); box-shadow: var(--shadow-md); }

@keyframes heartBeat { 0%,100%{ transform:scale(1) } 15%{ transform:scale(1.3) } 30%{ transform:scale(1) } 45%{ transform:scale(1.2) } }
@keyframes donateGlow { 0%,100%{ box-shadow:0 10px 26px rgba(99,102,241,.4) } 50%{ box-shadow:0 14px 40px rgba(45,212,191,.7) } }

@keyframes donateRing { 0%{ opacity:.7; transform:scale(1) } 100%{ opacity:0; transform:scale(1.25) } }

/* Floating donate FAB upgrade */


/* ---------- Share bar (news single) -------------------------------------- */
.share-bar { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; }
.share-btn { width:42px; height:42px; border-radius:50%; display:inline-grid; place-items:center; border:none;
  color:#fff; font-size:1.1rem; transition:.25s; text-decoration:none; }
.share-btn:hover { transform:translateY(-3px) scale(1.08); color:#fff; }
.share-btn.fb{ background:#1877f2 } .share-btn.wa{ background:#25d366 } .share-btn.tw{ background:#111 }
.share-btn.tg{ background:#29a9eb } .share-btn.copy{ background:var(--grad-fire) }

/* ==========================================================================
   HOME v3 — modern split hero, expanding country panels, image spreads
   ========================================================================== */

/* ---------- Modern split hero -------------------------------------------- */
.hero-modern {
  position: relative; overflow: hidden; color: #fff;
  background-color: var(--ink);
  background-image: var(--hero-img);
  background-size: cover; background-position: center;
}
.hero-modern::before { /* light wash — let the background image show, keep text legible on the left only */
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(100deg, rgba(15,23,42,.55) 0%, rgba(15,23,42,.22) 42%, rgba(15,23,42,0) 75%);
}
.hero-copy h1, .hero-copy .hero-eyebrow { text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.hero-copy p { text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.hero-slide-split { display:flex; flex-direction:column; justify-content:center; min-height: clamp(520px, 78vh, 760px); padding: 3rem 0 4.5rem; }

/* Typewriter caret */
.type-caret { display:inline-block; width:3px; margin-left:3px; background:var(--accent-soft); color:transparent;
  animation: caretBlink .9s step-end infinite; }
@keyframes caretBlink { 0%,100%{ opacity:1 } 50%{ opacity:0 } }

/* Image stage — only the picture animates out/in, the section never slides */
.hero-stage { position:relative; width:100%; height: clamp(320px, 52vh, 520px); border-radius:10px; overflow:hidden; background:rgba(0,0,0,.2); }
.hero-shot { position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:0; transform: scale(1.04); filter: blur(6px);
  transition: opacity .7s ease, transform .9s ease, filter .7s ease; }
.hero-shot.on { opacity:1; transform:scale(1); filter:none; }
.hero-shot.out { opacity:0; transform: scale(.96); filter: blur(6px); }

/* Dots under the image */
.hero-dots { display:flex; gap:8px; justify-content:center; margin-top:1.4rem; }
.hero-dots button { width:26px; height:3px; border:0; border-radius:2px; background:rgba(255,255,255,.28); cursor:pointer; transition:.3s; padding:0; }
.hero-dots button.on { background:var(--accent-soft); width:44px; }
.hero-copy { position:relative; z-index:3; }
.hero-copy .hero-eyebrow { color: var(--accent-soft); letter-spacing:2.5px; text-transform:uppercase; font-weight:600; font-size:.75rem;
  display:inline-flex; align-items:center; gap:.55rem; }
.hero-copy .hero-eyebrow::before { content:""; width:26px; height:1px; background:var(--accent-soft); }
.hero-copy h1 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); font-weight:700; line-height:1.1; margin:.7rem 0; letter-spacing:-.5px; overflow-wrap: break-word; }
.hero-copy h1 .grad-text { color: var(--accent-soft); -webkit-text-fill-color: var(--accent-soft); background:none; }
.hero-copy p { color:#E2E8F0; font-size:clamp(1rem,1.3vw,1.1rem); max-width:520px; line-height:1.7; }

/* Framed poster device on the right */
.hero-frame { position:relative; z-index:2; padding: 12px; border-radius: 16px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.hero-frame img { width:100%; border-radius: 10px; display:block; height: clamp(320px, 52vh, 520px); object-fit: contain; background: rgba(0,0,0,.2); }
.hero-frame .frame-badge { position:absolute; left:-10px; top:18px; background:var(--accent); color:#fff;
  padding:.4rem .8rem; border-radius:8px; font-weight:600; box-shadow:var(--shadow-md); font-size:.78rem; }
.hero-frame .frame-cap { position:absolute; right:-8px; bottom:-14px; background:#fff; color:var(--ink);
  padding:.5rem .9rem; border-radius:8px; box-shadow:var(--shadow-lg); font-weight:600; font-size:.8rem; max-width:70%; }
.hero-float { display:none; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.6rem; }
@media (max-width: 991px){
  /* extra bottom padding so buttons never touch the mantra strip / next section */
  .hero-slide-split { text-align:center; padding: calc(var(--nav-h) + 1rem) 0 4.5rem; min-height:auto; }
  .hero-copy { margin-top:1.2rem; }
  .hero-copy p { margin-inline:auto; }
  .hero-copy .hero-eyebrow::before { display:none; }
  .hero-copy .hero-eyebrow { justify-content:center; }
  .hero-actions { justify-content:center; }
  /* Full image on top: show the whole poster, generous height */
  .hero-frame { padding:8px; }
  .hero-frame img, .hero-stage { height: clamp(240px, 46vw, 360px); }
}
@media (max-width: 575px){
  .hero-copy h1 { font-size: 1.6rem; }
  .hero-copy p { font-size:.95rem; }
  .hero-actions { gap:.5rem; }
  /* Smaller, tidy buttons */
  .hero-actions .btn.btn-lg { padding:.62rem .7rem; font-size:.88rem; border-radius:10px; gap:.35rem; }
  .hero-actions .btn.btn-lg i { font-size:.95rem; }
  /* Two buttons in the first row, the third full-width below */
  .hero-actions .btn { flex: 1 1 calc(50% - .25rem); min-width:0; }
  .hero-actions .btn.hero-btn-wide { flex: 1 1 100%; }
}

/* ---------- Expanding country panels (International Coordination) --------- */
.xpanels { display:flex; gap:14px; height:480px; }
.xpanel { position:relative; flex:1; min-width:56px; border-radius:24px; overflow:hidden; cursor:pointer;
  box-shadow: var(--shadow-md); transition: flex .6s cubic-bezier(.2,.8,.2,1); }
.xpanel.active { flex: 4.5; }
.xpanel img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .8s, filter .5s; filter: saturate(.9); }
.xpanel.active img { transform: scale(1.06); filter: saturate(1.1); }
.xpanel::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(30,27,75,.15) 0%, rgba(30,27,75,.9) 100%); }
.xpanel .xp-flag { position:absolute; top:16px; left:16px; z-index:3; font-size:2rem;
  background:rgba(255,255,255,.9); width:56px; height:56px; border-radius:16px; display:grid; place-items:center; box-shadow:var(--shadow-sm); }
.xpanel .xp-body { position:absolute; left:0; right:0; bottom:0; z-index:3; padding:1.4rem; color:#fff; }
.xpanel .xp-name { font-family:var(--font-head); font-weight:700; font-size:1.5rem; writing-mode: vertical-rl; transform: rotate(180deg);
  position:absolute; left:16px; bottom:16px; transition:.4s; text-shadow:0 2px 10px rgba(0,0,0,.5); }
.xpanel.active .xp-name { writing-mode: horizontal-tb; transform:none; position:static; font-size:1.9rem; margin-bottom:.4rem; }
.xpanel .xp-desc { max-width:420px; opacity:0; transform:translateY(12px); transition:.4s .1s; height:0; overflow:hidden; }
.xpanel.active .xp-desc { opacity:1; transform:none; height:auto; }
.xpanel .xp-desc .btn { margin-top:.8rem; }
@media (max-width: 767px){
  .xpanels { flex-direction:column; height:auto; }
  .xpanel { height:120px; } .xpanel.active { height:300px; flex:none; }
  .xpanel .xp-name { writing-mode:horizontal-tb; transform:none; position:absolute; left:82px; bottom:auto; top:26px; }
  .xpanel.active .xp-name { position:static; margin-left:0; }
}

/* ---------- International coordination cards (full, one row) -------------- */
.intl-card { background:#fff; border-radius:22px; overflow:hidden; box-shadow:var(--shadow-md);
  transition: transform .35s, box-shadow .35s; display:flex; flex-direction:column; }
.intl-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.intl-img { position:relative; background:var(--cream); display:grid; place-items:center; padding:12px; min-height:250px; }
.intl-img img { max-width:100%; max-height:240px; object-fit:contain; border-radius:12px; transition: transform .6s; }
.intl-card:hover .intl-img img { transform: scale(1.05); }
.intl-flag { position:absolute; top:14px; left:14px; font-size:1.6rem; color:var(--deep-red); background:rgba(255,255,255,.97);
  width:54px; height:54px; border-radius:14px; display:grid; place-items:center; box-shadow:var(--shadow-md); z-index:2; overflow:hidden; }
.intl-flag img { width:38px; height:26px; object-fit:cover; border-radius:5px; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.intl-body { padding:1.4rem; text-align:center; flex:1; display:flex; flex-direction:column; align-items:center; }
.intl-body .btn { margin-top:auto; }

/* ---------- Spirit of Sanatan (Hindu image backdrop, centred text) -------- */
.spirit-band { position:relative; background-size:cover; background-position:center; background-attachment:fixed; }
.spirit-band::before { content:""; position:absolute; inset:0; background:rgba(15,23,42,.40); }
.spirit-content { position:relative; z-index:1; max-width:740px; margin-inline:auto; text-align:center; padding: clamp(3.5rem,7vw,6rem) 1rem; }
.spirit-content h2 { font-size:clamp(1.9rem,3.6vw,2.8rem); font-family:var(--font-head); color:#fff; margin:.5rem 0 1rem; text-shadow:0 2px 16px rgba(0,0,0,.6); }
.spirit-content p { color:#E2E8F0; font-size:1.05rem; line-height:1.8; text-shadow:0 1px 10px rgba(0,0,0,.6); }
.spirit-content .eyebrow { color:var(--accent-soft); }
.spirit-content .eyebrow::before, .spirit-content .eyebrow::after { background:var(--accent-soft); }
.om-lg { font-size:2.6rem; color:var(--accent-soft); font-family:var(--font-head); line-height:1; margin-bottom:.4rem; }
@media (max-width:991px){ .spirit-band{ background-attachment:scroll; } }

/* ---------- Poster cards (home International Coordination) — one row ------- */
.poster-card { position:relative; display:block; text-decoration:none; height:100%; padding:.9rem; border-radius:14px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(10px);
  transition: transform .25s, background .25s, border-color .25s; }
.poster-card:hover { transform:translateY(-6px); background:rgba(255,255,255,.1); border-color:var(--accent-soft); }
/* Small tilted flag on a short stick, top-left corner of the card */
.pc-flag { position:absolute; top:-12px; left:-6px; z-index:3; width:54px; height:36px; display:flex; align-items:flex-start;
  transform:rotate(-9deg); transform-origin:left top; filter:drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.pc-flag::before { content:""; flex:0 0 auto; width:3px; height:52px; margin-right:-1px; border-radius:2px; z-index:2;
  background:linear-gradient(180deg,#e2e8f0,#94a3b8 45%,#64748b); }
.pc-flag .pc-flag-wave { display:block; width:48px; height:34px; transform-origin:left center;
  animation:flagWave 3.2s ease-in-out infinite; }
.pc-flag img { width:48px; height:34px; object-fit:cover; border-radius:1px 4px 4px 1px; }
.pc-flag.pc-flag-np img { width:30px; object-fit:contain; }
.pc-flag i { font-size:1.5rem; color:var(--accent-soft); line-height:34px; }
/* Globe icon has no flagpole */
.pc-flag-globe { transform:none; }
.pc-flag-globe::before { display:none; }
.pc-flag-globe .pc-flag-wave { animation:none; }
.poster-card:hover .pc-flag .pc-flag-wave { animation-duration:2s; }
.poster-name { color:#fff; font-weight:700; font-size:.98rem; text-align:center; margin:0 0 .6rem; }
.poster-thumb { width:100%; height:130px; border-radius:10px; overflow:hidden; background:rgba(0,0,0,.25);
  display:grid; place-items:center; padding:6px; }
.poster-thumb img { max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; transition:transform .5s; }
.poster-card:hover .poster-thumb img { transform:scale(1.06); }
/* Light-section variant (International Coordination now sits on a white background) */
.intl-coord .poster-card { background:#fff; border:1px solid var(--line); backdrop-filter:none; box-shadow:var(--shadow-sm); }
.intl-coord .poster-card:hover { background:#fff; border-color:var(--accent); box-shadow:var(--shadow-md); }
.intl-coord .poster-name { color:var(--ink); }
.intl-coord .poster-thumb { background:#f1f5f9; height:200px; }
.intl-coord .pc-flag i { color:var(--accent); }

/* High mobile responsiveness for the International Coordination poster grid */
@media (max-width:767.98px){
  .intl-coord .poster-thumb { height:150px; }
}
@media (max-width:575.98px){
  .intl-coord .row { --bs-gutter-x:.65rem; --bs-gutter-y:1rem; }
  .poster-card { padding:.65rem .55rem; border-radius:12px; }
  .pc-flag { top:-9px; left:0; width:44px; height:30px; }
  .pc-flag::before { height:42px; }
  .pc-flag .pc-flag-wave, .pc-flag img { width:40px; height:28px; }
  .pc-flag.pc-flag-np img { width:24px; }
  .pc-flag i { font-size:1.2rem; line-height:28px; }
  .poster-name { font-size:.86rem; margin:.15rem 0 .45rem; }
  .poster-thumb { height:118px; padding:4px; }
}

/* Shared waving-flag styling (used on the International DETAILS page) — full flag, smooth wave */
.flag { width:150px; height:104px; overflow:visible; transform-origin:left center;
  animation:flagWave 3.2s ease-in-out infinite; will-change:transform; }
.flag img { width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(0 8px 16px rgba(0,0,0,.4)); }
.flag-globe { display:grid; place-items:center; background:linear-gradient(135deg,#1e293b,#0f172a);
  color:var(--accent-soft); font-size:2.6rem; border:1px solid rgba(255,255,255,.12); border-radius:6px; }
/* Smooth continuous ripple (many small steps → no jerk) */
@keyframes flagWave {
  0%   { transform: perspective(500px) rotateY(0deg)   skewY(0deg); }
  12%  { transform: perspective(500px) rotateY(-6deg)  skewY(1.4deg); }
  25%  { transform: perspective(500px) rotateY(-9deg)  skewY(2deg); }
  37%  { transform: perspective(500px) rotateY(-6deg)  skewY(1.4deg); }
  50%  { transform: perspective(500px) rotateY(0deg)   skewY(0deg); }
  62%  { transform: perspective(500px) rotateY(6deg)   skewY(-1.4deg); }
  75%  { transform: perspective(500px) rotateY(9deg)   skewY(-2deg); }
  87%  { transform: perspective(500px) rotateY(6deg)   skewY(-1.4deg); }
  100% { transform: perspective(500px) rotateY(0deg)   skewY(0deg); }
}
@keyframes flagFlutter {
  0%,100% { transform: rotate(-9deg) skewY(0deg); }
  50%     { transform: rotate(-6deg) skewY(2deg); }
}
.flag-card:hover .flag, .intlm:hover .flag { animation-duration:2s; }

/* ---------- CTA band (Become a Member / Support Our Cause) ---------------- */
/* Same treatment as the hero: dark Hindu-image backdrop + glass cards */
.cta-hero { position:relative; background-size:cover; background-position:center; background-attachment:fixed; }
.cta-hero::before { content:""; position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(15,23,42,.42) 0%, rgba(15,23,42,.30) 55%, rgba(15,23,42,.20) 100%); }
.cta-hero > .container { position:relative; z-index:1; }
@media (max-width:991px){ .cta-hero { background-attachment:scroll; } }

.cta-glass { background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); backdrop-filter: blur(12px);
  border-radius:16px; padding: clamp(1.6rem, 3vw, 2.4rem); display:flex; flex-direction:column; align-items:flex-start;
  transition: background .3s, border-color .3s, transform .3s; }
.cta-glass:hover { background: rgba(255,255,255,.1); border-color: var(--accent-soft); transform: translateY(-4px); }
.cta-ic { width:52px; height:52px; border-radius:12px; display:grid; place-items:center; font-size:1.4rem;
  background: rgba(20,184,166,.16); border:1px solid rgba(20,184,166,.4); color: var(--accent-soft); margin-bottom:1rem; }
.cta-glass h3 { color:#fff; font-size:1.5rem; font-weight:700; margin-bottom:.6rem; }
.cta-glass p { color:#94A3B8; line-height:1.7; margin-bottom:1.3rem; }
.cta-glass .btn { margin-top:auto; }

/* ---------- Free IT Training panel --------------------------------------- */
.it-panel { background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-md); }
.it-media { height:100%; min-height:320px; background:#F1F5F9; display:grid; place-items:center; padding:14px; }
.it-media img { max-width:100%; max-height:340px; object-fit:contain; border-radius:12px; }
.it-body { padding: clamp(1.5rem, 3vw, 2.6rem); }
.it-chip { display:inline-flex; align-items:center; gap:.4rem; background:var(--accent-tint); color:var(--accent-dark);
  border:1px solid #CCFBF1; border-radius:50px; padding:.3rem .8rem; font-size:.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px; }
.it-title { font-size:clamp(1.5rem,2.6vw,2.2rem); font-weight:700; color:var(--ink); margin:.8rem 0 .5rem; }
.it-text { color:var(--muted); line-height:1.7; margin-bottom:1.2rem; }
.it-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
.it-item { display:flex; align-items:center; gap:.55rem; background:#F8FAFC; border:1px solid var(--line);
  border-radius:10px; padding:.6rem .7rem; font-size:.85rem; font-weight:500; color:var(--ink); }
.it-item .bi { color:var(--accent); font-size:1.05rem; }
@media (max-width:575px){ .it-grid { grid-template-columns:1fr; } }

/* ---------- Hindu image spreads ------------------------------------------ */
/* Mosaic collage */
.img-mosaic { display:grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 150px; gap:14px; }
.img-mosaic .m-cell { position:relative; border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm); }
.img-mosaic .m-cell img { width:100%; height:100%; object-fit:cover; transition: transform .7s; }
.img-mosaic .m-cell:hover img { transform: scale(1.12); }
.img-mosaic .m-cell::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(30,27,75,.55)); opacity:0; transition:.4s; }
.img-mosaic .m-cell:hover::after { opacity:1; }
.img-mosaic .m-cell .m-cap { position:absolute; left:14px; bottom:12px; z-index:2; color:#fff; font-weight:600; opacity:0; transform:translateY(8px); transition:.4s; }
.img-mosaic .m-cell:hover .m-cap { opacity:1; transform:none; }
.m-a { grid-column: span 2; grid-row: span 2; } .m-b { grid-column: span 2; } .m-c { grid-column: span 2; }
.m-d { grid-column: span 3; } .m-e { grid-column: span 3; } .m-f { grid-column: span 2; grid-row: span 2; } .m-g { grid-column: span 2; }
@media (max-width: 767px){ .img-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .m-a,.m-b,.m-c,.m-d,.m-e,.m-f,.m-g { grid-column: span 1; grid-row: span 1; } .m-a,.m-f { grid-column: span 2; } }

/* Parallax quote strip */
.img-parallax { position:relative; min-height: 420px; display:grid; place-items:center; text-align:center; color:#fff;
  background-attachment: fixed; background-size: cover; background-position: center; }
.img-parallax::after { content:""; position:absolute; inset:0; background:rgba(15,23,42,.42); }

/* Hindu-image backdrop for dark sections (subtle, text stays readable) */
.bg-hindu { background-size:cover; background-position:center; background-attachment:fixed; }
.bg-hindu::before { content:""; position:absolute; inset:0; background:rgba(15,23,42,.46); z-index:0; }
.bg-hindu > .container { position:relative; z-index:1; }
.bg-hindu .section-title, .bg-hindu .section-sub { text-shadow:0 2px 16px rgba(0,0,0,.6); }

/* Hindu-image backdrop — show the background image; only a whisper of dark tint for text contrast */
.bg-hindu-soft { position:relative; background-size:cover; background-position:center; background-attachment:fixed; }
.bg-hindu-soft::before { content:""; position:absolute; inset:0; z-index:0;
  background:rgba(15,23,42,.22); }
.bg-hindu-soft > .container { position:relative; z-index:1; }
/* Headings sit directly on the photo now, so make them light + shadowed */
.bg-hindu-soft .section-title, .bg-hindu-soft .section-sub { color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.65); }
.bg-hindu-soft .eyebrow { color:var(--accent-soft); text-shadow:0 1px 10px rgba(0,0,0,.6); }
@media (max-width:991px){ .bg-hindu, .bg-hindu-soft { background-attachment:scroll; } }

/* ---------- Leader cards (home) — modern, detailed, no number badges ------ */
.lead-card { background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
  transition: transform .3s, box-shadow .3s, border-color .3s; }
.lead-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--accent); }
.lead-photo { position:relative; aspect-ratio:1/1; overflow:hidden; background:#F1F5F9; }
.lead-photo img { width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.lead-card:hover .lead-photo img { transform:scale(1.05); }
.lead-ph { width:100%; height:100%; display:grid; place-items:center; background:var(--ink); color:var(--accent-soft);
  font-family:var(--font-head); font-size:3rem; }
.lead-body { padding:1.2rem; display:flex; flex-direction:column; flex:1; gap:.1rem; }
.lead-role { font-size:.68rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--accent-dark);
  background:var(--accent-tint); border:1px solid #CCFBF1; border-radius:6px; padding:.2rem .5rem; align-self:flex-start; }
.lead-name { margin:.55rem 0 .35rem; font-size:1.02rem; font-weight:700; color:var(--ink); }
.lead-bio { font-size:.83rem; color:var(--muted); line-height:1.6; margin-bottom:.6rem; }
/* Uniform 3-line clamp for the homepage preview cards */
.lead-bio-clamp { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.lead-resp { display:flex; gap:.4rem; font-size:.76rem; color:#475569; background:#F8FAFC; border:1px solid var(--line);
  border-radius:8px; padding:.45rem .55rem; margin-bottom:.8rem; }
.lead-resp .bi { color:var(--accent); margin-top:1px; }
.lead-link { margin-top:auto; font-size:.82rem; font-weight:600; color:var(--accent-dark); display:inline-flex; gap:.3rem; align-items:center; }
.lead-link:hover { gap:.55rem; color:var(--accent); }
.img-parallax .pq { position:relative; z-index:2; max-width:820px; padding:2rem; }
.img-parallax .pq .om { font-size:3rem; color:var(--gold); }
.img-parallax .pq h2 { font-size: clamp(1.6rem, 3.4vw, 2.8rem); font-family:var(--font-head); text-shadow:0 2px 16px rgba(0,0,0,.6); }
.img-parallax .pq p { text-shadow:0 1px 12px rgba(0,0,0,.6); }
@media (max-width: 991px){ .img-parallax { background-attachment: scroll; } }

/* Auto-scroll image marquee */
.img-marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.img-marquee .track { display:inline-flex; gap:16px; animation: imgscroll 22s linear infinite; }
.img-marquee:hover .track { animation-play-state: paused; }
.img-marquee img { height:180px; width:260px; object-fit:cover; border-radius:16px; box-shadow:var(--shadow-sm); }
@keyframes imgscroll { from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- Footer grid background --------------------------------------- */
.footer { position:relative; }
.footer::before { content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(45,212,191,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,212,191,.08) 1px, transparent 1px);
  background-size: 46px 46px; opacity:.7; }
.footer .container { position:relative; z-index:1; }

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

/* ---------- Mobile off-canvas drawer (slides in from the left) ------------ */
@media (max-width: 991.98px){
  /* A backdrop-filter on the navbar makes it the containing block for the
     position:fixed drawer, trapping it inside the bar. Disable it on mobile so
     the drawer anchors to the viewport and slides fully in. */
  .navbar-vhm, .navbar-vhm.scrolled, body.has-solid-nav .navbar-vhm {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .vhm-drawer.offcanvas-start {
    width: 300px; max-width: 84vw;
    background: #ffffff;                 /* solid — never blends with the page */
    border-right: 1px solid var(--line);
    box-shadow: 8px 0 40px rgba(15,23,42,.25);
  }
  body.dark .vhm-drawer.offcanvas-start { background:#0F172A; border-right-color:rgba(255,255,255,.08); }
  .vhm-drawer .offcanvas-header { border-bottom:1px solid var(--line); padding:1rem 1.1rem; }
  .drawer-brand { line-height:1.05; }
  .drawer-brand .brand-name { color:var(--ink); font-size:.92rem; line-height:1.1; }
  .drawer-brand .brand-sub { margin-top:1px; font-size:.56rem; }
  .vhm-drawer .offcanvas-body { padding: .6rem .8rem 1.2rem; display:block; }
  .vhm-drawer .navbar-nav { width:100%; }

  /* Menu links — dark on the white drawer, clearly readable, nicely spaced */
  .vhm-drawer .nav-link {
    color:#1E293B !important; font-weight:600; font-size:1rem;
    padding:.8rem .9rem !important; border-radius:10px; margin:2px 0;
    display:flex; align-items:center; justify-content:space-between;
    border:1px solid transparent;
  }
  .vhm-drawer .nav-link:hover { background:var(--accent-tint); color:var(--accent-dark) !important; }
  .vhm-drawer .nav-link.active { background:var(--accent); color:#fff !important; }
  .vhm-drawer .dropdown-toggle::after { opacity:.6; }

  /* Sub-menus render inline (not as a floating popover) inside the drawer */
  .vhm-drawer .dropdown-menu {
    position:static !important; transform:none !important; float:none;
    border:0; box-shadow:none; padding:.1rem 0 .3rem .6rem; margin:0;
    background:transparent; border-left:2px solid var(--accent-tint);
  }
  .vhm-drawer .dropdown-item { color:#475569; padding:.6rem .8rem; border-radius:8px; font-size:.92rem; }
  .vhm-drawer .dropdown-item:hover { background:var(--accent-tint); color:var(--accent-dark); }

  .drawer-extra { margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line); }
  .drawer-mini { display:flex; align-items:center; color:#334155; font-weight:600; padding:.7rem .9rem;
    background:#F8FAFC; border:1px solid var(--line); border-radius:10px; }
  .drawer-extra .lang-switch { background:#F1F5F9; }
  .drawer-extra .lang-switch a { color:#64748B; }
  .drawer-extra .lang-switch a.on { background:var(--accent); color:#fff; }
  .drawer-extra .bi { color:var(--accent-dark); font-size:1.2rem; }

  /* Backdrop tint */
  .offcanvas-backdrop.show { opacity:.5; }
}
/* On desktop the drawer body sits inline and stays transparent */
@media (min-width: 992px){
  .vhm-drawer .offcanvas-header, .vhm-drawer .drawer-extra { display:none !important; }
  .vhm-drawer .offcanvas-body { padding:0; }
}

/* ---------- Phone layout: images on top, text below, nothing cropped ------ */
@media (max-width: 767px){
  /* Remove floating decorations that overflow / overlap on small screens */
  .float-deco, .deco-layer, .hero-float { display:none !important; }
  /* Any image+text two-column row stacks with the IMAGE first */
  .row.align-items-center > [class*="col-"] .position-relative { margin-bottom:1rem; }
  /* Bring the floating "Sanatan Dharma" badge inside the frame */
  .position-relative > .glass.position-absolute { left:8px !important; right:auto !important; top:8px !important;
    padding:.55rem .7rem !important; font-size:.85rem; }
  /* The small overlap image in the welcome block stays hidden (was d-md-block) */
  /* Decorative side images never overflow the viewport */
  section img { max-width:100%; height:auto; }
  /* Free IT training: image on top, comfortable height */
  .it-media { min-height:auto; }
  .it-media img { max-height:260px; }
  /* Card / poster images show fully, not half-cut */
  .poster-thumb { height:120px; }
  .nrow-media, .intlm-poster { min-height:auto; }
}