/* ==========================================================================
   Vishwa Hindu Mahasabha — Premium Theme
   Palette: White · Saffron · Golden · Deep Red   |  Spiritual • Modern • Premium
   ========================================================================== */

:root {
  --saffron:      #FF7A00;
  --saffron-soft: #FF9A3D;
  --gold:         #E9B44C;
  --gold-deep:    #C8952B;
  --deep-red:     #9E1B1B;
  --deep-red-2:   #7A0F12;
  --maroon:       #5A0A16;
  --cream:        #FFF8EE;
  --ink:          #2A1A0E;
  --muted:        #6b5b4d;
  --white:        #ffffff;

  --grad-fire: linear-gradient(135deg, var(--saffron) 0%, var(--gold) 55%, var(--deep-red) 100%);
  --grad-gold: linear-gradient(135deg, #F6D365 0%, var(--gold) 40%, var(--gold-deep) 100%);
  --grad-royal: linear-gradient(135deg, var(--deep-red) 0%, var(--maroon) 100%);

  --shadow-sm: 0 4px 14px rgba(120, 30, 10, .08);
  --shadow-md: 0 12px 30px rgba(120, 30, 10, .14);
  --shadow-lg: 0 26px 60px rgba(120, 30, 10, .22);

  --radius:    18px;
  --radius-lg: 26px;
  --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; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(233,180,76,.12), transparent 60%),
    radial-gradient(1000px 500px at -10% 20%, rgba(255,122,0,.08), transparent 60%),
    var(--cream);
  overflow-x: hidden;
  margin: 0;
}
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 ------------------------------------------------------- */
.btn { border-radius: 50px; font-weight: 600; padding: .7rem 1.6rem; position: relative; overflow: hidden; }
.btn-fire { background: var(--grad-fire); color: #fff; border: none; box-shadow: 0 10px 24px rgba(255,122,0,.35); }
.btn-fire:hover { color:#fff; transform: translateY(-3px); box-shadow: 0 16px 34px rgba(255,122,0,.45); }
.btn-gold { background: var(--grad-gold); color: var(--maroon); border: none; }
.btn-gold:hover { color: var(--maroon); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn-royal { background: var(--grad-royal); color:#fff; border:none; }
.btn-royal:hover { color:#fff; transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn-outline-light-2 { border:2px solid rgba(255,255,255,.7); color:#fff; background:transparent; }
.btn-outline-light-2:hover { background:#fff; color:var(--deep-red); }
.btn-ghost { border:2px solid var(--gold); color:var(--deep-red); background:transparent; }
.btn-ghost:hover { background:var(--gold); color:#fff; }

/* Ripple */
.btn .ripple { position:absolute; border-radius:50%; transform:scale(0); background:rgba(255,255,255,.5); 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 --------------------------------------------- */
.topbar { background: var(--grad-royal); color: #ffe9c7; font-size: .82rem; }
.topbar a { color: #ffe9c7; }
.topbar a:hover { color: #fff; }

.navbar-vhm {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255,255,255,.78); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(200,149,43,.25);
  transition: box-shadow .3s, background .3s, padding .3s;
}
.navbar-vhm.scrolled { box-shadow: var(--shadow-sm); background: rgba(255,255,255,.95); }
.navbar-brand { display: flex; align-items: center; gap: .7rem; }
.navbar-brand img { height: 52px; width: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 16px rgba(158,27,27,.25); border: 2px solid var(--gold); }
.brand-name { font-family: var(--font-head); font-weight: 700; line-height: 1; color: var(--deep-red); font-size: 1.12rem; }
.brand-sub { font-size: .64rem; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-deep); }
.navbar-vhm .nav-link { font-weight: 600; color: var(--ink); margin: 0 .15rem; position: relative; padding: .5rem .7rem !important; }
.navbar-vhm .nav-link::after {
  content:""; position:absolute; left:.7rem; right:.7rem; bottom:.3rem; height:2px;
  background: var(--grad-fire); transform: scaleX(0); transform-origin:left; transition: transform .3s; border-radius:2px;
}
.navbar-vhm .nav-link:hover, .navbar-vhm .nav-link.active { color: var(--deep-red); }
.navbar-vhm .nav-link:hover::after, .navbar-vhm .nav-link.active::after { transform: scaleX(1); }
.lang-switch a { font-weight:700; padding:.15rem .45rem; border-radius:6px; color:var(--muted); }
.lang-switch a.on { background: var(--grad-fire); color:#fff; }
.dropdown-menu { border:none; box-shadow: var(--shadow-md); border-radius: 14px; padding:.5rem; }
.dropdown-item { border-radius:10px; font-weight:500; padding:.5rem .8rem; }
.dropdown-item:hover { background: var(--cream); color: var(--deep-red); }

/* ---------- 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(90,10,22,.86) 0%, rgba(122,15,18,.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: #f4e6d4; 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(90,10,22,.6), rgba(122,15,18,.75)); } }

/* Marquee sanskrit banner */
.mantra-bar { background: var(--grad-fire); color:#fff; overflow:hidden; white-space:nowrap; }
.mantra-track { display:inline-flex; gap:3rem; padding:.7rem 0; animation: marquee 30s linear infinite; font-family:var(--font-head); letter-spacing:1px; }
.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 rgba(200,149,43,.18); }
.card-fancy .card-top { height:5px; background: var(--grad-fire); }

/* ---------- 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 30%, rgba(90,10,22,.9) 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(255,122,0,.4); }
.activity-card h5 { margin:0; font-weight:700; }

/* ---------- 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(90,10,22,.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(200,149,43,.18) 1.2px, transparent 1.2px); background-size: 22px 22px; }
.section-royal { background: var(--grad-royal); color:#fff; }
.section-royal .section-sub { color:#f0d9c6; }
.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(233,180,76,.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(90,10,22,.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(90,10,22,.85)); transition:.35s; }
.gallery-item:hover .cap { opacity:1; }

/* ---------- CTA ----------------------------------------------------------- */
.cta-band { background: var(--grad-fire); color:#fff; border-radius: var(--radius-lg); padding: clamp(2rem,5vw,3.5rem); box-shadow: var(--shadow-lg); position:relative; overflow:hidden; }
.cta-band::after { content:""; position:absolute; right:-60px; top:-60px; width:240px; height:240px; border-radius:50%; background:rgba(255,255,255,.12); }

/* ---------- Footer -------------------------------------------------------- */
.footer { background: var(--maroon); color:#f3e2d0; padding-top: 3.5rem; }
.footer h6 { color: var(--gold); text-transform:uppercase; letter-spacing:2px; font-size:.85rem; }
.footer a { color:#f3e2d0; }
.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(90,10,22,.82), rgba(122,15,18,.9)); }
.page-hero > .container { position:relative; z-index:2; }
.page-hero h1 { font-size: clamp(2rem,4.4vw,3.4rem); font-weight:700; }
.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); }

/* ---------- 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(255,122,0,.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:22px; bottom:22px; width:48px; height:48px; border-radius:50%; border:none;
  background: var(--grad-fire); color:#fff; box-shadow: var(--shadow-md); opacity:0; visibility:hidden; transform: translateY(12px); transition:.3s; z-index:1040; }
#toTop.show { opacity:1; visibility:visible; transform:none; }

/* ---------- Floating action (donate) ------------------------------------- */
.fab-donate { position:fixed; left:22px; bottom:22px; z-index:1040; background:var(--grad-royal); color:#fff; border-radius:50px; padding:.6rem 1.1rem; box-shadow:var(--shadow-md); font-weight:600; display:inline-flex; gap:.5rem; align-items:center; }
.fab-donate:hover { color:#fff; transform:translateY(-3px); }

/* ---------- 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(233,180,76,.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(200,149,43,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,149,43,.10) 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(200,149,43,.35); 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 {
  position:relative; background:var(--grad-fire); color:#fff; border:none; border-radius:50px;
  padding:.8rem 1.8rem; font-weight:700; overflow:visible; box-shadow:0 10px 26px rgba(255,122,0,.4);
  animation: donateGlow 2.4s ease-in-out infinite;
}
.btn-donate:hover { color:#fff; transform:translateY(-3px) scale(1.03); }
.btn-donate .bi-heart-fill { animation: heartBeat 1.3s ease-in-out infinite; display:inline-block; }
@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(255,122,0,.4) } 50%{ box-shadow:0 14px 40px rgba(233,180,76,.7) } }
.btn-donate::after { content:""; position:absolute; inset:-4px; border-radius:50px; border:2px solid var(--gold);
  opacity:0; animation: donateRing 2.4s ease-out infinite; }
@keyframes donateRing { 0%{ opacity:.7; transform:scale(1) } 100%{ opacity:0; transform:scale(1.25) } }

/* Floating donate FAB upgrade */
.fab-donate { background:var(--grad-fire); animation: donateGlow 2.4s ease-in-out infinite; border:2px solid rgba(255,255,255,.4); }
.fab-donate .bi-heart-fill { animation: heartBeat 1.3s ease-in-out infinite; }

/* ---------- 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:
    radial-gradient(900px 600px at 85% -10%, rgba(233,180,76,.20), transparent 60%),
    radial-gradient(700px 500px at 0% 110%, rgba(255,122,0,.16), transparent 60%),
    var(--grad-royal);
}
.hero-modern::before { /* grid overlay */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 55%, transparent 100%);
}
.hero-modern .swiper { width:100%; }
.hero-slide-split { display:flex; align-items:center; min-height: clamp(560px, 84vh, 820px); padding: 3rem 0; }
.hero-copy { position:relative; z-index:3; }
.hero-copy .hero-eyebrow { color: var(--gold); letter-spacing:4px; text-transform:uppercase; font-weight:600; font-size:.8rem;
  display:inline-flex; align-items:center; gap:.5rem; }
.hero-copy .hero-eyebrow::before { content:""; width:34px; height:2px; background:var(--gold); }
.hero-copy h1 { font-size: clamp(2.2rem, 4.4vw, 4rem); font-weight:700; line-height:1.05; margin:.6rem 0; text-shadow:0 6px 30px rgba(0,0,0,.35); }
.hero-copy h1 .grad-text { background: var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-copy p { color:#f4e6d4; font-size:clamp(1rem,1.4vw,1.18rem); max-width:520px; }

/* Framed poster device on the right */
.hero-frame { position:relative; z-index:2; padding: 18px; border-radius: 30px;
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.02));
  border:1px solid rgba(233,180,76,.45); box-shadow: 0 40px 90px rgba(0,0,0,.45);
  backdrop-filter: blur(6px); transform: perspective(1200px) rotateY(-6deg); transition: transform .6s; }
.hero-modern .swiper-slide-active .hero-frame { transform: perspective(1200px) rotateY(0deg); }
.hero-frame img { width:100%; border-radius: 18px; display:block; height: clamp(340px, 58vh, 580px); object-fit: contain; background: rgba(0,0,0,.14); }
.hero-frame .frame-badge { position:absolute; left:-14px; top:22px; background:var(--grad-fire); color:#fff;
  padding:.5rem .9rem; border-radius:12px; font-weight:700; box-shadow:var(--shadow-md); font-size:.85rem; }
.hero-frame .frame-cap { position:absolute; right:-10px; bottom:-16px; background:#fff; color:var(--deep-red);
  padding:.6rem 1rem; border-radius:14px; box-shadow:var(--shadow-md); font-weight:600; font-size:.85rem; max-width:70%; }
/* corner ornaments */
.hero-frame::before, .hero-frame::after { content:""; position:absolute; width:26px; height:26px; border:3px solid var(--gold); }
.hero-frame::before { top:8px; left:8px; border-right:0; border-bottom:0; border-radius:10px 0 0 0; }
.hero-frame::after  { bottom:8px; right:8px; border-left:0; border-top:0; border-radius:0 0 10px 0; }

.hero-modern .swiper-pagination { position:static; margin-top:2rem; text-align:left; }
.hero-modern .swiper-pagination-bullet { width:34px; height:5px; border-radius:4px; background:rgba(255,255,255,.35); opacity:1; transition:.3s; }
.hero-modern .swiper-pagination-bullet-active { background:var(--gold); width:52px; }
.hero-modern .hero-nav { top:auto; bottom:34px; transform:none; }
.hero-modern .hero-prev { left:auto; right:88px; } .hero-modern .hero-next { right:26px; }
.hero-float { position:absolute; font-family:var(--font-head); color:rgba(233,180,76,.28); animation: floaty 9s ease-in-out infinite; z-index:1; }
@media (max-width: 991px){
  .hero-slide-split { flex-direction:column; text-align:center; gap:2rem; padding-top:2rem; }
  .hero-copy p { margin-inline:auto; }
  .hero-copy .hero-eyebrow::before { display:none; }
  .hero-frame { transform:none !important; }
  .hero-modern .swiper-pagination { text-align:center; }
  .hero-modern .hero-nav { display:none; }
}

/* ---------- 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(90,10,22,.15) 0%, rgba(90,10,22,.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.7rem; background:rgba(255,255,255,.95);
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center; box-shadow:var(--shadow-sm); z-index:2; }
.intl-body { padding:1.4rem; text-align:center; flex:1; display:flex; flex-direction:column; align-items:center; }
.intl-body .btn { margin-top:auto; }

/* ---------- 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(90,10,22,.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:linear-gradient(180deg, rgba(90,10,22,.82), rgba(122,15,18,.86)); }
.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); }
@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 36s 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(233,180,76,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,180,76,.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; }
}

/* ---------- Responsive tweaks -------------------------------------------- */
@media (max-width: 991px){
  .navbar-collapse { background:#fff; border-radius:16px; padding:1rem; margin-top:.6rem; box-shadow:var(--shadow-md); }
  body.dark .navbar-collapse { background:#241a16; }
}