:root{
  --qvg-green:#0b8f3c;
  --qvg-green-700:#086a2d;
  --qvg-dark:#0c0f12;
  --qvg-bg:#0f1318;       /* page background under hero */
  --qvg-card:#171d23;     /* card surface */
  --qvg-card-border:#26303a;
}

/* ---------- Base ---------- */
html,body{ background:var(--qvg-bg); color:#e7edf4; }
a{ text-decoration:none }

/* ---------- Navbar ---------- */
.qvg-navbar{
  background: transparent;
  transition: background-color .25s ease, box-shadow .25s ease;
  z-index:1030;
}
.qvg-navbar.scrolled{
  background: rgba(12,15,18,.92);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.qvg-logo{ width:100px; height:100px; object-fit:contain; }
.qvg-nav-links .nav-link{ position:relative; padding:.5rem .9rem; font-weight:600; color:#dfe7ee; }
.qvg-nav-links .nav-link.active, .qvg-nav-links .nav-link:hover{ color:#fff; }
.qvg-nav-links .nav-link.active::after, .qvg-nav-links .nav-link:hover::after{
  content:""; position:absolute; left:12px; right:12px; bottom:-6px; height:3px; border-radius:2px; background:var(--qvg-green);
}

/* ---------- Hero: fixed, full-viewport background ---------- */
.qvg-hero{
  position:relative;
  z-index:0;                    /* create stacking context for pseudo-elements */
  /*min-height:30vh;*/             /* fill visible page */
  display:flex; align-items:center;
  padding: 6rem 0 2.5rem;
  background-image:url('/images/hero-mosque.jpg');
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;  /* key line for fixed background */
  overflow:hidden;
}

/* gradient overlay on top of the fixed image */
.qvg-hero::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  background:
    radial-gradient(1200px 600px at 50% 20%, rgba(0,0,0,.10), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.70));
}
.qvg-hero-inner{ position:relative; z-index:1; padding:6rem 0 1.5rem; }

/* iOS Safari fallback: emulate fixed background with a fixed layer */
@supports (-webkit-touch-callout: none) {
  .qvg-hero{
    background-attachment:scroll;     /* disable broken fixed on iOS */
    background-image:none;            /* we’ll paint it via ::after */
  }
  .qvg-hero::after{
    content:"";
    position:fixed; inset:0;          /* fixed to the viewport */
    z-index:-1;                       /* behind the hero + overlay */
    background:url('/images/hero-mosque.jpg') center top / cover no-repeat;
    transform:translateZ(0);          /* hint to GPU */
  }
}

/* CTA */
.qvg-cta{
  background:var(--qvg-green); border:none; padding:.85rem 1.35rem; font-weight:700;
  box-shadow:0 10px 30px rgba(11,143,60,.25);
}
.qvg-cta:hover{ background:var(--qvg-green-700); }

/* Scroll chevron */
.qvg-scroll-down{ display:inline-block; opacity:.9 }
.qvg-chevron{
  display:inline-block; width:28px; height:28px; border-right:3px solid #fff; border-bottom:3px solid #fff;
  transform:rotate(45deg); animation:qvg-bounce 1.6s infinite;
}
@keyframes qvg-bounce{
  0%,100%{ transform:translateY(0) rotate(45deg); opacity:.9 }
  50%{ transform:translateY(6px) rotate(45deg); opacity:.65 }
}

/* ---------- Sections & cards ---------- */
/* ---------- Sections & cards ---------- */
/* Replace your existing .qvg-section block with this */
.qvg-section{
  position: relative;
  padding: 3.5rem 0;

  /* 30% transparent overlay + fixed background image */
  background-image:
    linear-gradient(rgba(12,15,18,0.70), rgba(12,15,18,0.70)),  /* overlay = 70% opacity -> 30% transparent */
    url('/images/hero-mosque.jpg');                              /* same image as hero */
  background-size: auto, cover;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, fixed;                          /* overlay scrolls, image stays fixed */
}

/* (optional) iOS Safari fallback for fixed backgrounds */
@supports (-webkit-touch-callout: none) {
  .qvg-section{
    background-attachment: scroll, scroll;                       /* iOS doesn’t honor fixed reliably */
  }
  .qvg-section::after{
    content:"";
    position: fixed; inset: 0; z-index: -1;
    background: url('/images/hero-mosque.jpg') center top / cover no-repeat;
  }
}

.qvg-card{ background:var(--qvg-card); border:1px solid var(--qvg-card-border); border-radius:1rem; }
.form-label{ font-weight:600 }

/* Video shell to avoid super-tall column on small screens */
.qvg-video-shell{ background:#0c0f12; max-height:70vh; }

/* Ratio helper (Bootstrap has ratio-16x9 etc.; we add 9x16) */
.ratio-9x16{ --bs-aspect-ratio: 177.7778%; }

/* Anchor compensation for fixed navbar when jumping */
main > *:first-child{ scroll-margin-top:84px; }

/* --- Translucent panels (≈30% transparent) --- */
.qvg-card{
  background: rgba(23, 29, 35, 0.7);              /* was var(--qvg-card) */
  border: 1px solid rgba(38, 48, 58, 0.5);        /* softer border */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);             /* Safari */
}

.qvg-video-shell{
  background: rgba(12, 15, 18, 0.7);              /* was #0c0f12 */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}