/* =========================================================
   ROOT COLORS & GLOBAL LAYOUT
========================================================= */
:root {
  --nav-h: 70px;
  --brand: #0f1b4c;   /* FDWC navy */
  --accent: #d4af37; /* Gold */
  --white: #ffffff;
  --ink: #0c1322;
  --muted: #5a6275;
  --cream: #f7f2e6;
  --slate: #101828;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: Inter, system-ui, Arial, sans-serif;
  color: var(--ink);
  background: #f7f8fb;
  line-height: 1.6;
  padding-top: var(--nav-h); /* space for fixed nav */
}

section {
  margin: 0;
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

.panel {
  padding: 80px 0;
  position: relative;
}

.container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}

/* =========================================================
   NAV BAR
========================================================= */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--brand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

.site-nav::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #b58e00, #ffd700, #b58e00);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-weight: 800;
  font-size: 22px;
  text-decoration: none;
}

.brand img {
  height: 26px;
  width: auto;
}

.site-nav nav a {
  color: var(--accent);
  text-decoration: none;
  margin-left: 20px;
  font-weight: 600;
  font-size: 17px;
  position: relative;
}

.site-nav nav a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 2px;
  background: #e6c764;
  transition: width .3s ease;
}

.site-nav nav a:hover::after {
  width: 100%;
}

/* GIVE button */
.btn-give {
  padding: 10px 26px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  color: var(--accent);
  font-weight: 800;
  margin-left: 20px;
  text-decoration: none;
  background: transparent;
  animation: givePulse 2.7s ease-in-out infinite;
  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

.btn-give:hover {
  background: var(--accent);
  color: var(--brand);
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    0 6px 14px rgba(0,0,0,0.35),
    0 0 14px rgba(212,175,55,0.9);
}

@keyframes givePulse {
  0%   { box-shadow: 0 0 0 rgba(212,175,55,0); }
  50%  { box-shadow: 0 0 20px rgba(212,175,55,.5); }
  100% { box-shadow: 0 0 0 rgba(212,175,55,0); }
}

@media (max-width: 640px) {
  .site-nav nav a {
    margin-left: 12px;
    font-size: 15px;
  }
  .brand img {
    height: 24px;
  }
  .btn-give {
    padding: 8px 18px;
    font-size: 14px;
    margin-left: 12px;
  }
}

/* =========================================================
   HERO — SOLID NAVY + VIDEO
========================================================= */
.hero-balanced {
  position: relative;
  overflow: hidden;
  min-height: 100vh; /* fills full first screen */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 20px 120px;
  color: #fff;
  text-align: center;
  background: #0f1b4c;
}

.hero-balanced .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.55;
  filter: brightness(0.7);
  z-index: -2;
  animation: slowZoom 22s ease-in-out infinite alternate;
}

@keyframes slowZoom {
  0%   { transform: scale(1); }
  100% { transform: scale(1.08); }
}

.hero-balanced::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  width: 60%;
  height: 130%;
  transform: translateX(-50%) rotate(8deg);
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.11),
    rgba(255,215,120,0.06) 45%,
    transparent 80%
  );
  filter: blur(24px);
  opacity: 0.7;
  z-index: -1;
}

.hero-content {
  position: relative;
  z-index: 5;
  max-width: 960px;
  margin: 0 auto;
}

.hero-logo-safe {
  height: clamp(80px, 10vw, 140px);
  width: auto;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
}


.hero-title-halo {
  font-family: "Cinzel", serif;
  font-size: clamp(40px, 4vw, 72px);
  font-weight: 700;
  letter-spacing: 1.4px;
  color: #ffffff;
  white-space: nowrap;
  text-shadow:
    0 0 8px rgba(255,255,255,0.7),
    0 0 18px rgba(212,175,55,0.6),
    0 4px 12px rgba(0,0,0,0.45);
  animation: heroGlow 4s ease-in-out infinite;
  margin: 0 0 12px;
}

@keyframes heroGlow {
  0%   { filter: brightness(1); }
  50%  { filter: brightness(1.25); }
  100% { filter: brightness(1); }
}

.gold-underline {
  width: 360px;
  max-width: 80%;
  height: 4px;
  margin: 12px auto 16px;
  border-radius: 4px;
  background: linear-gradient(90deg, #b58e00, #ffd700, #b58e00);
}

.hero-subtext {
  margin-top: 10px;
  font-size: clamp(18px, 2vw, 22px);
  font-style: italic;
  color: #ffffff;
}

.hero-subtext-small {
  margin-top: 6px;
  font-size: clamp(15px, 1.7vw, 19px);
  color: #eeeeee;
}

.hero-blessing,
.hero-scripture {
  opacity: 0;
  color: #ffffff;
  text-shadow:
    0 0 6px rgba(255,225,160,0.4),
    0 0 12px rgba(255,215,120,0.25);
}

@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(20px); filter: blur(6px); }
  60% { filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.hero-blessing {
  margin-top: 12px;
  font-size: clamp(16px,1.7vw,20px);
  animation: fadeUp 1.9s ease-out forwards;
  animation-delay: 1.2s;
}

.hero-scripture {
  margin-top: 6px;
  font-size: clamp(14px,1.4vw,18px);
  animation: fadeUp 2.2s ease-out forwards;
  animation-delay: 1.7s;
}

@media (max-width: 640px) {
  .hero-title-halo {
    white-space: normal;
    line-height: 1.1;
  }
  .hero-logo-safe {
    height: 52px;
  }
}

/* =========================================================
   GENERIC TITLES
========================================================= */
.section-header {
  text-align: center;
  margin: 0 0 18px;
  font-weight: 800;
  color: var(--brand);
  font-size: clamp(32px, 4vw, 46px);
  letter-spacing: 0.5px;
}

.jazz-title {
  font-size: clamp(28px,5vw,48px);
  font-weight: 800;
  text-align: center;
  margin-bottom: 18px;
}

.jazz-title::after {
  content:"";
  display:block;
  width:80px;
  height:4px;
  background:linear-gradient(90deg,var(--accent),transparent);
  margin:10px auto 0;
  border-radius:2px;
}

/* Gold underline helper */
.gold-underline-section {
  position: relative;
}
.gold-underline-section::after {
  content:"";
  display:block;
  width:110px;
  height:4px;
  background:linear-gradient(90deg,#b58e00,#ffd700,#b58e00);
  margin:12px auto 0;
  border-radius:4px;
  animation: glowBar 3s ease-in-out infinite;
}
@keyframes glowBar {
  0% { filter:brightness(.9); }
  50% { filter:brightness(1.8); }
  100% { filter:brightness(.9); }
}

/* =========================================================
   THEME HELPERS
========================================================= */
.theme-white  { background:#f7f8fb; color:var(--ink); }
.theme-navy   { background:var(--brand); color:#fff; }
.theme-cream  { background:var(--cream); color:var(--ink); }
.theme-slate  { background:var(--slate); color:#fff; }
.theme-gradient { background: linear-gradient(180deg, #ffffff, #eef2ff); }

.theme-dots {
  position: relative;
}
.theme-dots::before {
  content:"";
  position:absolute;
  inset:0;
  opacity:.08;
  pointer-events:none;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size:18px 18px;
}

/* =========================================================
   REVEAL ANIMATIONS
========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-stagger.in-view > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: .05s; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: .12s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: .19s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: .26s; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: .33s; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: .40s; }

/* =========================================================
   PARALLAX BASE
========================================================= */
.parallax-section {
  position: relative;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.parallax-section::before {
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.35);
  z-index:0;
}

.parallax-section > .container {
  position: relative;
  z-index: 1;
}


/* =========================================================
   SECTION TWO — HIGHLIGHTS
========================================================= */
#media-gallery {
  padding: 140px 0;
}

#media-gallery.parallax-section {
  background-image: url("assets/highlights-parallax.png");
}

#media-gallery .section-header {
  color: #ffffff;
  text-shadow: 0 3px 6px rgba(0,0,0,0.85);
}

#media-gallery .section-header::after {
  content:"";
  display:block;
  width:110px;
  height:4px;
  margin:10px auto 0;
  border-radius:4px;
  background:linear-gradient(90deg,#b58e00,#ffd700,#b58e00);
  animation: glowBarHighlights 3s ease-in-out infinite;
}
@keyframes glowBarHighlights {
  0% { filter:brightness(.9); }
  50% { filter:brightness(1.9); }
  100%{ filter:brightness(.9); }
}

#media-gallery p {
  color:#ffffff;
  font-size: 18px;
  max-width: 650px;
  margin: 0 auto 20px;
  text-align: center;   /* ADD THIS */
  text-shadow:0 3px 6px rgba(0,0,0,0.85);
}

/* Logos + slideshow row */
.gallery-with-logos {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:36px;
  width:100%;
  margin-bottom:18px;
}

.gallery-side-logo {
  height:65px;
  width:auto;
  opacity:0;
  transform:translateY(18px) scale(0.96);
  filter:drop-shadow(0 0 12px rgba(212,175,55,0.55));
  transition:opacity .6s ease, transform .6s ease;
}

.gallery-with-logos.in-view .left {
  animation: logoFadeLeft 1.2s ease-out forwards;
}
.gallery-with-logos.in-view .right {
  animation: logoFadeRight 1.2s ease-out forwards;
}

@keyframes logoFadeLeft {
  0% { opacity:0; transform:translateX(-40px) scale(.9); }
  100%{ opacity:1; transform:translateX(0) scale(1); }
}
@keyframes logoFadeRight {
  0% { opacity:0; transform:translateX(40px) scale(.9); }
  100%{ opacity:1; transform:translateX(0) scale(1); }
}

.gallery-side-logo:hover {
  transform: scale(1.06);
}

/* Slideshow frame (recommended setup) */
#slideshowContainer {
  position: relative;
  width: 100%;
  max-width: 900px;   /* Wider, modern look */
  height: 550px;      /* Good height for all image shapes */
  margin: 0 auto;
  overflow: hidden;
  background: #000;
  border-radius: 16px;
  border: 3px solid rgba(212,175,55,0.9);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.25),
    0 0 20px rgba(212,175,55,0.55);
}

/* Slides stacked on top of each other */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}

/* The active slide is fully visible */
.slide.active {
  opacity: 1;
}

/* Images/Videos/Iframes display fully without cropping */
.slide img,
.slide video,
.slide iframe {
  width: 100%;
  height: 100%;
  object-fit: contain; /* show full image */
  background-color: #000; /* clean letterbox bars */
  border-radius: 16px;
}


/* (Optional) dots styling if not already present */
.dots {
  text-align: center;
  margin-top: 10px;
}
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
}
.dot.active {
  background: #ffd700;
}

/* Unified gold underline bar for Watch Live + Past Services */
.section-title {
    position: relative;
    display: inline-block;
    padding-bottom: 8px;
}

.section-title::after {
    content: "";
    display: block;
    width: 120px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 50px;
    background: linear-gradient(90deg, #b58e00, #ffd700, #b58e00);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.75);
}


/* =========================================================
   DIVIDER BETWEEN SECTIONS
========================================================= */
.gold-divider {
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg,#b58e00,#ffd700,#b58e00);
  margin: 0;
}

.section-gap {
  height: 0;
}

/* =========================================================
   PLAN YOUR VISIT — PARALLAX
========================================================= */

#visit.parallax-section {
  background-image: url("assets/front-of-church.jpg");
  background-size: cover; 
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  
}

#visit.parallax-section::before {
  background: rgba(0,0,0,0.35);
}

#visit {
  padding: 100px 0;
}

#visit .section-header {
  color:#ffffff;
  text-shadow:
    0 0 6px rgba(0,0,0,0.65),
    0 0 10px rgba(0,0,0,0.85);
  letter-spacing:1px;
  font-size:clamp(32px,4vw,46px);
  font-weight:800;
}

#visit .section-header::after {
  content:"";
  display:block;
  width:110px;
  height:4px;
  margin:10px auto 0;
  border-radius:3px;
  background:linear-gradient(90deg,#b58e00,#ffd700,#b58e00);
  animation: visitGlow 3s infinite;
}
@keyframes visitGlow {
  0% { filter:brightness(.9); }
  50% { filter:brightness(2); }
  100%{ filter:brightness(.9); }
}

.grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card {
  background:#ffffffee;
  border-radius:20px;
  padding:22px;
  box-shadow:0 12px 32px rgba(0,0,0,0.20);
}

.btn {
  display:inline-block;
  padding:10px 20px;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  border:none;
}

.btn.ghost {
  background:transparent;
  color:var(--brand);
  border:2px solid var(--brand);
}

/* =========================================================
   OUR MISSION — ARCTIC BACKGROUND
========================================================= */
#about {
  padding: 50px 0;
  background: linear-gradient(135deg,#e8f4ff,#d9f1ff,#cce7f6);
}

#about .section-header {
  color: #0f1b4c;
  text-shadow: 0 1px 2px rgba(255,255,255,0.8);
}

#about p {
  color: #0f1b4c;
  font-size: 18px;
  line-height: 1.65;
}

.about-flex {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}

.about-text {
  flex:1 1 320px;
}

.about-image-frame {
  flex:1 1 320px;
  display:flex;
  justify-content:center;
}

.about-image-frame img {
  max-width: 360px;
  width:100%;
  border-radius:16px;
  border:4px solid rgba(212,175,55,0.85);
  box-shadow:0 12px 28px rgba(0,0,0,.20);
}

/* ===============================
   MINISTERIAL STAFF — CLEAN BUILD
================================*/

/* Parallax background (not zoomed, not repeated) */
#ministerial-staff {
  background-image: url("assets/pastor38.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  background-attachment: fixed;
  padding: 150px 0;
  position: relative;
  z-index: 1;
}

/* Dark overlay for text readability */
#ministerial-staff::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1;
}

/* Ensure text stays above overlay */
#ministerial-staff .container {
  position: relative;
  z-index: 2;
}

/* White header text */
#ministerial-staff .section-header,
#ministerial-staff .staff-intro {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(0,0,0,0.9);
}

/* Staff Grid */
.staff-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
  margin-top: 50px;
}

/* Card base */
.staff-item {
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(212,175,55,0.6);
  border-radius: 18px;
  padding: 20px;
  text-align: center;
  color: #ffffff;
  backdrop-filter: blur(6px);
  transition: all .35s ease;
  overflow: hidden;
}

/* Hover expand */
.staff-item:hover {
  transform: scale(1.08);
  box-shadow: 0 15px 45px rgba(0,0,0,0.4);
  background: rgba(255,255,255,0.25);
}

/* Hidden photo BEFORE hover */
.staff-photo {
  height: 0;
  transition: height .35s ease;
  overflow: hidden;
}

/* Reveal photo on hover */
.staff-item:hover .staff-photo {
  height: 240px;
}

/* Image inside */
.staff-photo img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

/* Name always visible */
.staff-name {
  margin-top: 15px;
  font-weight: bold;
  font-size: 18px;
  color: #ffffff;
}


/* Name ALWAYS showing */
.staff-name {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff !important;
}

/* Expand on hover */
.staff-item:hover .staff-photo {
  height: 220px;
}




/* MAP EACH NAME TO A PHOTO */
.staff-item:nth-child(1)::after { background-image: url("assets/ministers/linda-deseignora.png"); }
.staff-item:nth-child(2)::after { background-image: url("assets/ministers/saleem-ali.png"); }
.staff-item:nth-child(3)::after { background-image: url("assets/ministers/belinda-kelley.png"); }
.staff-item:nth-child(4)::after { background-image: url("assets/ministers/martha-harris.png"); }
.staff-item:nth-child(5)::after { background-image: url("assets/ministers/alicia-hubbard.png"); }
.staff-item:nth-child(6)::after { background-image: url("assets/ministers/marie-nock.png"); }
.staff-item:nth-child(7)::after { background-image: url("assets/ministers/zora-deseignora.png"); }
.staff-item:nth-child(8)::after { background-image: url("assets/ministers/janet-crawford.png"); }
.staff-item:nth-child(9)::after { background-image: url("assets/ministers/doris-holloway.png"); }
.staff-item:nth-child(10)::after { background-image: url("assets/ministers/cheryl-brown.png"); }


/* =========================================================
   MINISTRIES
========================================================= */
#ministries {
  background:#0f1b4c;
  color:#ffffff;
}

#ministries .section-header {
  color:#ffffff;
  text-shadow:0 2px 4px rgba(0,0,0,0.4);
}

.ministries-grid {
  display:grid;
  grid-template-columns: repeat(5,1fr);
  gap:22px;
  margin-top:24px;
}

@media (max-width:900px) {
  .ministries-grid {
    grid-template-columns: repeat(2,1fr);
  }
}

#ministries .card {
  background:#ffffff;
  color:#0f1b4c;
  border:2px solid rgba(212,175,55,0.55);
  border-radius:16px;
  padding:22px;
  box-shadow:
    0 10px 20px rgba(0,0,0,0.22),
    0 0 18px rgba(212,175,55,0.35);
  transition: transform .3s ease, box-shadow .3s ease;
}

#ministries .card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 14px 32px rgba(0,0,0,0.3),
    0 0 24px rgba(255,220,120,0.55);
}

/* =========================================================
   RESOURCES
========================================================= */
.resource-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:18px;
  margin-top:12px;
}

.resource-card {
  display:block;
  background:#fff;
  padding:18px;
  border-radius:16px;
  color:var(--ink);
  text-decoration:none;
  box-shadow:0 12px 28px rgba(15,27,76,.08);
  transition:0.3s ease;
}

.resource-card:hover {
  transform:translateY(-4px);
  box-shadow:0 18px 42px rgba(15,27,76,.14);
}

.icon-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(15,27,76,0.06);
  font-size: 22px;
}

/* =========================================================
   VIDEO FRAME (Watch Live / Past Services)
========================================================= */
.video-embed {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.video-embed iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* =========================================================
   WAVES
========================================================= */
.wave-divider {
  height:60px;
  overflow:hidden;
}
.wave-divider svg {
  width:100%;
  height:100%;
  display:block;
}
.wave-gold svg path { fill: var(--accent); }

/* =========================================================
   FOOTER
========================================================= */
.site-footer {
  padding:48px 0;
  background:#0f1b4c;
  color:#fff;
}
.site-footer .container {
  display:flex;
  justify-content:center;
}

.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1200;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15,27,76,.18);

  opacity: 0;
  transform: translateY(8px);
  pointer-events: none; /* 👈 ADD THIS */
  transition: opacity .25s, transform .25s;
}

.back-to-top.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto; /* 👈 ADD THIS */
}


/* FIX CARD ALIGNMENT INCLUDING CHERYL BROWN */
#ministerial-staff .staff-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
    gap: 28px !important;
    justify-items: center !important;   /* center cards in every row */
}

#ministerial-staff .staff-card {
    width: 100% !important;
    max-width: 420px !important;        /* uniform width */
    min-height: 120px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* ---------------------------------------
   MINISTERIAL STAFF — HOVER EXPAND + IMAGE REVEAL
---------------------------------------- */

/* Link cards behave like divs */
.staff-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    background: rgba(255,255,255,0.12);
    border: 2px solid rgba(212,175,55,0.6);
    border-radius: 18px;
    padding: 22px;
    max-width: 420px;
    width: 100%;
    color: white;
    transition: all .35s ease, transform .35s ease;
    overflow: hidden;
    position: relative;
}

/* Name under image always visible */
.staff-name {
    margin-top: 12px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

/* Hidden photo until hover */
.staff-photo {
    width: 100%;
    height: 0;
    opacity: 0;
    transition: all .35s ease;
}

.staff-photo img {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* Hover: card grows and photo expands */
.staff-card:hover {
    transform: translateY(-6px) scale(1.05);
    background: rgba(0,0,0,0.55);
    border-color: #d4af37;
    box-shadow: 0 12px 28px rgba(0,0,0,0.6);
}

.staff-card:hover .staff-photo {
    height: 260px;
    opacity: 1;
}
/* ============================
   HIGHLIGHTS — FULL SLIDESHOW
============================ */
.slideshow-container {
  position: relative;
  width: 100%;
  max-width: 950px;
  margin: 50px auto;
}

.slide {
  display: none;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.slide img,
.slide video,
.slide iframe {
  width: 100%;
  height: auto;
  display: block;
}


@keyframes fadeEffect {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ARROWS */
.slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 14px;
  font-size: 32px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  z-index: 10;
  user-select: none;
}

.slide-arrow.left { left: -50px; }
.slide-arrow.right { right: -50px; }

.slide-arrow:hover {
  color: gold;
}

/* DOTS */
.dots {
  text-align: center;
  margin-top: 18px;
}

.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #bbb;
  border-radius: 50%;
  margin: 0 4px;
  cursor: pointer;
}

.dot.active {
  background: gold;
}
/* =========================================
   MINISTRY PAGES
========================================= */

.ministry-hero {
  padding: 140px 0 70px;
  background: radial-gradient(circle at top, #363b5f 0, #0b1020 55%, #05060b 100%);
  color: #fff;
  text-align: center;
}

.ministry-hero .container {
  max-width: 900px;
  margin: 0 auto;
}

.ministry-tag {
  display: inline-block;
  padding: 4px 14px;
  margin-bottom: 14px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #f6e6a8;
  border: 1px solid rgba(246,230,168,0.6);
  background: rgba(0,0,0,0.35);
}

.ministry-title {
  font-size: clamp(30px, 4vw, 40px);
  margin-bottom: 10px;
}

.ministry-subtitle {
  font-size: 18px;
  max-width: 650px;
  margin: 0 auto 10px;
  opacity: 0.9;
}

.ministry-verse {
  font-size: 14px;
  max-width: 540px;
  margin: 18px auto 0;
  font-style: italic;
  color: #f4f0d4;
}

/* content area */
.ministry-content {
  padding: 70px 0 90px;
  background: #f5f5f8;
}

.ministry-content .container {
  max-width: 1100px;
  margin: 0 auto;
}

/* two-column layout */
.ministry-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr);
  gap: 40px;
}

@media (max-width: 900px) {
  .ministry-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* text blocks */
.ministry-section-title {
  font-size: 20px;
  margin-bottom: 8px;
  color: #222542;
}

.ministry-section-body {
  font-size: 16px;
  line-height: 1.7;
  color: #444;
  margin-bottom: 18px;
}

.ministry-list {
  padding-left: 18px;
  margin: 0 0 12px;
}

.ministry-list li {
  margin-bottom: 4px;
}

/* cards on right side */
.ministry-side-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 22px 22px 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.07);
  border: 1px solid rgba(0,0,0,0.03);
  margin-bottom: 18px;
}

.ministry-side-card h4 {
  margin-bottom: 6px;
  font-size: 16px;
  color: #272a45;
}

.ministry-side-card p {
  font-size: 14px;
  margin-bottom: 6px;
  color: #555;
}

.ministry-meta {
  font-size: 13px;
  color: #777;
}

.ministry-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: #f4f0d4;
  color: #5c4b10;
}

/* simple button */
.ministry-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 9px 18px;
  border-radius: 999px;
  background: linear-gradient(90deg,#b58e00,#ffd700,#b58e00);
  color: #281f02;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.ministry-btn:hover {
  filter: brightness(1.1);
}
.watch-live-logo {
    width: clamp(70px, 7vw, 110px) !important;
    height: auto;
    margin-right: 10px;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45));
    vertical-align: middle;
}
/* ===========================
   WATCH LIVE SECTION
=========================== */

#watch.panel {
    background: linear-gradient(
        135deg,
        #0f1529 0%,
        #0a1122 40%,
        #050b19 100%
    );
    padding: 120px 0 140px;
    color: #fff;
    text-align: center;
    position: relative;
}

.watch-live-container {
    max-width: 900px;
    margin: 0 auto;
}

/* Title */
.watch-live-title {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.watch-live-title span {
    color: #ffd700; /* gold accent */
}

/* Subtitle */
.watch-live-subtitle {
    font-size: 18px;
    color: #e8ecff;
    margin-bottom: 30px;
}

/* Video Frame */
.watch-live-video iframe {
    width: 100%;
    height: 420px;
    border-radius: 18px;
    border: 3px solid rgba(255,215,0,0.35);
    box-shadow:
        0 12px 28px rgba(0,0,0,0.55),
        0 0 20px rgba(255,215,0,0.25);
}

@media (max-width: 600px) {
    .watch-live-video iframe {
        height: 250px;
    }
}
#watch {
    position: relative;
    padding: 140px 0 160px;
    text-align: center;
    color: #fff;
    overflow: hidden;
}

.watch-live-backdrop {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0b1023 0%, #050816 60%, #02040a 100%);
    opacity: 0.95;
    z-index: -1;
}
.gold-divider {
    width: 160px;
    height: 4px;
    margin: 20px auto 30px;
    background: linear-gradient(90deg, #b58e00, #ffd700, #b58e00);
    border-radius: 10px;
    box-shadow: 0 0 16px rgba(255,215,0,0.65);
}
.watch-live-video iframe {
    width: 100%;
    height: 440px;
    border-radius: 20px;
    border: 2px solid rgba(255,215,0,0.4);
    box-shadow: 0 15px 35px rgba(0,0,0,0.7);
}
@media (max-width: 600px) {
    .watch-live-video iframe {
        height: 260px;
    }
}
.btn-watch-live {
    display: inline-block;
    padding: 12px 32px;
    background: #ffd700;
    color: #000;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    margin-top: 25px;
    box-shadow: 0 0 18px rgba(255,215,0,0.4);
    transition: all .3s ease;
}

.btn-watch-live:hover {
    background: #fff;
    transform: translateY(-4px);
}
.previous-sermons {
    margin-top: 70px;
}

.previous-sermons h3 {
    font-size: 26px;
    margin-bottom: 25px;
    color: #ffefb0;
}

.sermon-carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 10px;
}

.sermon-card {
    min-width: 200px;
    background: #111623;
    border-radius: 14px;
    border: 1px solid rgba(255,215,0,0.35);
    text-align: center;
    text-decoration: none;
    color: #fff;
    padding: 10px;
    transition: transform .3s ease;
}

.sermon-card:hover {
    transform: translateY(-6px);
}

.sermon-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 8px;
}
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: 0.7s ease;
}
.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}
/* Smaller logo just for the Watch Live section */
.watch-live-logo {
    width: clamp(55px, 5vw, 85px) !important;
    height: auto;
    margin-right: 8px;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
    vertical-align: middle;
}
/* Countdown Timer Style */
.countdown-timer {
    font-size: 18px;
    color: #ffefb0;
    margin-bottom: 25px;
}

#countdown-time {
    font-weight: 700;
    color: #ffd700;
    margin-left: 6px;
}
.watch-live-video iframe {
    width: 100%;
    height: 440px;
    border-radius: 20px;
    border: 3px solid gold;
    box-shadow: 0 0 20px rgba(255,215,0,0.35);
    animation: goldGlow 3s infinite ease-in-out;
}

@keyframes goldGlow {
    0% { box-shadow: 0 0 10px rgba(255,215,0,0.3); }
    50% { box-shadow: 0 0 28px rgba(255,215,0,0.6); }
    100% { box-shadow: 0 0 10px rgba(255,215,0,0.3); }
}
/* Night Mode */
body.night-mode #watch {
    background: linear-gradient(135deg, #070b16 0%, #02040a 100%);
}

body.night-mode .watch-live-title span {
    color: #ffd700;
}

body.night-mode .watch-live-video iframe {
    border-color: rgba(255,215,0,0.55);
}
/* ============================
   PAST SERVICES SECTION
============================ */

.past-services-section {
  padding: 90px 0;
  background: #080d1c;
  color: #f2f2f2;
  text-align: center;
}

.past-services-section .section-title {
  font-size: 34px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  color: #ffffff;
}

.ps-logo {
  width: 50px;
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
}

.section-subtitle {
  font-size: 16px;
  color: #d4d8ea;
  margin-bottom: 40px;
}

/* GRID LAYOUT */
.past-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.service-card {
  background: linear-gradient(145deg, #0f1528, #070b16);
  border-radius: 14px;
  padding: 16px;
  text-align: left;
  border: 1px solid rgba(255,215,0,0.28);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  border-color: gold;
  box-shadow: 0 18px 40px rgba(0,0,0,0.6);
}

/* THUMBNAIL */
.service-thumb img {
  width: 100%;
  border-radius: 10px;
  border: 2px solid rgba(255,215,0,0.45);
  margin-bottom: 12px;
}

/* TEXT */
.service-title {
  font-size: 18px;
  font-weight: 600;
  margin: 6px 0;
  color: #fff7d1;
}

.service-date {
  font-size: 14px;
  color: #cfd4ff;
  margin-bottom: 12px;
}

/* BUTTON */
.watch-btn {
  display: inline-block;
  padding: 8px 14px;
  background: linear-gradient(90deg, #b58e00, #ffd700, #b58e00);
  color: #000;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: background .3s ease;
}

.watch-btn:hover {
  background: linear-gradient(90deg, #ffd700, #fff3a0, #ffd700);
}

/* LOAD MORE */
.load-more-btn {
  margin-top: 32px;
  padding: 10px 26px;
  font-size: 16px;
  background: transparent;
  border: 2px solid gold;
  color: gold;
  border-radius: 8px;
  cursor: pointer;
  transition: .3s ease;
}

.load-more-btn:hover {
  background: gold;
  color: #000;
}
/* Past Services section look */
#past-services.panel.theme-dark {
  background: radial-gradient(circle at top, #0b1024 0, #020309 55%, #000 100%);
  color: #f7f7f7;
}



/* Optional: tighten spacing under the title description */
#past-services .ps-desc {
  max-width: 600px;
  margin: 0 auto 18px;
  text-align: center;
}

/* Optional footer text + button styling under the playlist */
.past-services-footer {
  margin-top: 18px;
  text-align: center;
  font-size: 14px;
  color: #d0d4f8;
}

.past-services-footer .btn-primary {
  display: inline-block;
  margin-bottom: 6px;
}
/* Same logo size for Watch Live AND Past Services */
#watch .fdwc-logo.logo--sm,
#past-services .fdwc-logo.logo--sm {
    height: 58px;   /* perfect medium size */
    width: auto;
    margin-right: 8px;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}
.section-title {
    width: 100%;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    color: #fff;
    margin: 0 auto 20px auto !important;
    text-align: center !important;
}


.section-title::after {
    content: "";
    display: block;
    width: 120px;
    height: 4px;
    background: linear-gradient(90deg,#b58e00,#ffd700,#b58e00);
    border-radius: 50px;
    box-shadow: 0 0 12px rgba(255,215,0,0.75);
    margin: 10px auto 0;
}
#past-services,
#watch {
    text-align: center !important;
}

/* =========================================
   MEDIA HEADERS (Watch Live + Past Services)
========================================= */

.media-heading {
  text-align: center;
  margin-bottom: 24px;
}

.media-heading-main {
  display: flex;
  justify-content: center;   /* centers logo + text */
  align-items: center;
  gap: 10px;
}

.media-heading-logo {
  width: clamp(48px, 5vw, 64px);  /* same size for Watch + Past */
  height: auto;
}

.media-heading-title {
  font-size: clamp(32px, 4vw, 40px);
  font-weight: 700;
  color: #ffffff;
}

/* gold bar under the title */
.media-heading-bar {
  width: 120px;
  height: 4px;
  margin: 14px auto 0;       /* auto => centered */
  border-radius: 999px;
  background: linear-gradient(90deg, #b58e00, #ffd700, #b58e00);
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.75);
}

/* optional smaller subtitle text */
.media-heading-subtitle {
  font-size: 15px;
  color: #d7dcff;
  margin-top: 10px;
}
/* =========================================
   MEDIA HEADERS (Watch Live + Past Services)
========================================= */

.media-heading {
  text-align: center;
  margin-bottom: 24px;
}

.media-heading-main {
  display: flex;
  justify-content: center;   /* centers logo + text */
  align-items: center;
  gap: 10px;
}

.media-heading-logo {
  width: clamp(48px, 5vw, 64px);  /* same size for Watch + Past */
  height: auto;
}

.media-heading-title {
  font-size: clamp(32px, 4vw, 40px);
  font-weight: 700;
  color: #ffffff;
}

/* gold bar under the title */
.media-heading-bar {
  width: 120px;
  height: 4px;
  margin: 14px auto 0;       /* auto => centered */
  border-radius: 999px;
  background: linear-gradient(90deg, #b58e00, #ffd700, #b58e00);
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.75);
}

/* optional smaller subtitle text */
.media-heading-subtitle {
  font-size: 15px;
  color: #d7dcff;
  margin-top: 10px;
}
/* ===========================
   CALENDAR SECTION
=========================== */

.calendar-section {
  background: linear-gradient(180deg, #fdf7e7 0%, #f7f0de 100%);
  color: #212744;
  padding: 80px 0;
}

.calendar-header {
  text-align: center;
}

.calendar-heading-main {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.calendar-logo {
  width: 52px;
  height: auto;
  flex-shrink: 0;
}

.calendar-heading-text {
  text-align: left;
}

.calendar-title {
  font-size: 30px;
  line-height: 1.1;
  margin: 0;
  color: #1b2345;
}

.calendar-subtitle {
  margin: 2px 0 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #7a7f98;
}

.calendar-divider {
  width: 120px;
  height: 4px;
  border-radius: 999px;
  background: #d4af37;
  margin: 28px auto 24px;
}

.calendar-intro {
  max-width: 720px;
  margin: 0 auto 32px;
  font-size: 15px;
  line-height: 1.6;
  color: #40445f;
  text-align: center;
}

.calendar-embed iframe {
  border: none;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  background: #ffffff;
}

/* small screens */
@media (max-width: 768px) {
  .calendar-section {
    padding: 60px 0;
  }

  .calendar-heading-main {
    flex-direction: row;
    padding: 8px 14px;
  }

  .calendar-logo {
    width: 44px;
  }

  .calendar-title {
    font-size: 24px;
  }

  .calendar-intro {
    padding: 0 10px;
  }
}

/* =========================================
   FEATURED EVENTS SECTION
========================================= */

.featured-events {
  margin-top: 60px;
  text-align: center;
}

.featured-events-title {
  font-size: 26px;
  color: #212744;
  margin-bottom: 8px;
}

.featured-events-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.event-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transition: transform .3s ease, box-shadow .3s ease;
}

.event-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.15);
}

.event-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.event-info {
  padding: 16px;
  text-align: center;
}

.event-info h4 {
  font-size: 18px;
  margin-bottom: 6px;
  color: #222;
}

.event-date {
  font-size: 14px;
  color: #777;
  margin-bottom: 10px;
}

.event-btn {
  display: inline-block;
  padding: 8px 16px;
  background: #b58e00;
  color: #fff;
  border-radius: 6px;
  font-size: 14px;
  text-decoration: none;
  transition: background .3s ease;
}

.event-btn:hover {
  background: #d4af37;
}

/* Hide the featured-events strip if nothing was injected into it */
#featured-events:empty {
  display: none;
}

#past-services .section-title {
  text-align: center;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; 
}

#past-services .gold-divider,
.gold-divider {
  margin: 20px auto;
  width: 120px;
}
/* FIX BACK TO TOP BUTTON COLORS */
.back-to-top {
  background: #d4af37 !important;  /* gold */
  color: #ffffff !important;       /* white text */
  border: none !important;
  padding: 12px 20px !important;
  border-radius: 50px !important;
  font-weight: 600;
}

/* When the button is visible */
.back-to-top.show {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Center the Past Services Title */
#past-services .section-title {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100%;
  text-align: center !important;
  margin: 0 auto 20px auto !important;
}

#past-services .section-title img {
  height: 55px;
  width: auto;
}
/* Fix gold divider alignment under Past Services */
#past-services .gold-divider {
  width: 150px;
  height: 4px;
  background: #d4af37; /* gold */
  margin: 10px auto 30px auto !important;
  display: block !important;
}
/* ===============================
   ORIGINAL BACK TO TOP BUTTON
================================*/
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #0a1a48; /* FDWC navy */
    color: white;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Show button */
.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

/* Hover effect */
.back-to-top:hover {
    background: #13235f; /* slightly brighter navy */
}

/* FORCE FIX: Past Services Title CENTERED */
#past-services .section-title {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 18px !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto 20px auto !important;
    padding-left: 0 !important;
}

/* Logo inside Past Services */
#past-services .section-title img {
    height: 60px !important;
    width: auto !important;
    display: inline-block !important;
}

/* FORCE FIX: Gold line centered */
#past-services .gold-divider,
#past-services .section-title .gold-divider,
#past-services .section-title + .gold-divider {
    display: block !important;
    width: 140px !important;
    height: 4px !important;
    background: #d4af37 !important;
    margin: 15px auto !important;
    border-radius: 3px !important;
}

/* FIX: Section wrapper alignment */
#past-services .container {
    text-align: center !important;
}

/* FIX: The Past Services subtitle text alignment */
#past-services p {
    text-align: center !important;
    margin: 0 auto !important;
}
/* FORCE FIX: Past Services Title CENTERED */
#past-services .section-title {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 18px !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto 20px auto !important;
    padding-left: 0 !important;
}

/* Logo inside Past Services */
#past-services .section-title img {
    height: 60px !important;
    width: auto !important;
    display: inline-block !important;
}

/* FORCE FIX: Gold line centered */
#past-services .gold-divider,
#past-services .section-title .gold-divider,
#past-services .section-title + .gold-divider {
    display: block !important;
    width: 140px !important;
    height: 4px !important;
    background: #d4af37 !important;
    margin: 15px auto !important;
    border-radius: 3px !important;
}

/* FIX: Section wrapper alignment */
#past-services .container {
    text-align: center !important;
}

/* FIX: The Past Services subtitle text alignment */
#past-services p {
    text-align: center !important;
    margin: 0 auto !important;
}

/* FORCE Past Services Layout Correct */
#past-services {
  text-align: center !important;
}

#past-services .container {
  text-align: center !important;
}

#past-services .section-title,
#past-services h2,
#past-services p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#past-services .section-title img {
  display: inline-block !important;
}

#past-services .gold-divider {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

/* FIX PAST SERVICES TITLE LAYOUT */
#past-services .section-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-align: center !important;
    width: 100% !important;
}

/* Make the logo behave properly above the text */
#past-services .section-title img {
    display: block !important;
    margin: 0 auto !important;
    width: 90px !important;
    height: auto !important;
}

/* Center the gold bar fully */
#past-services .section-title span,
#past-services .gold-underline,
#past-services .gold-divider {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}
#past-services {
    padding-top: 80px !important;
}
/* ----------------------------------------------
   PERFECT ALIGNMENT FOR PAST SERVICES TITLE
---------------------------------------------- */

.pst-title-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    width: 100%;
    text-align: center;
    margin-bottom: 15px;
}

/* Logo beside text */
.pst-logo {
    width: 70px;
    height: auto;
    display: inline-block;
}

/* Past Services text */
.pst-title {
    font-size: 48px;
    font-weight: 700;
    color: white;
    margin: 0;
    padding: 0;
    display: flex !important;
    align-items: center !important;
    gap: 6px;
}

/* Gold bar EXACTLY like Watch Live */
.pst-gold-bar {
    width: 120px;
    height: 6px;
    background: #d4af37;
    margin: 12px auto 35px auto;
    border-radius: 4px;
}
/* Past Services Title Fix */
.pst-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -40px;        /* Pull logo DOWN toward title */
    margin-bottom: 10px;      /* Reduce spacing before gold bar */
}

.pst-logo {
    width: 85px;              /* Nice balanced size */
    margin-bottom: 10px;      /* Tighten spacing above text */
}

.pst-title {
    font-size: 48px;
    line-height: 1.1;
    margin-top: 0;
    margin-bottom: 8px;       /* Small gap above gold line */
}
/* ============================================
   MATCH "WATCH LIVE" STYLE FOR PAST SERVICES
============================================ */

.past-services-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;                  /* Spacing between logo + text */
    margin-top: 40px;
    margin-bottom: 10px;
    text-align: center;
}

.past-services-title span {
    font-size: 3.2rem;          /* Matches Watch Live */
    font-weight: 800;
    color: white;
    margin: 0;
    line-height: 1;
}

.ps-logo {
    height: 70px;               /* Matches Watch Live logo size */
    width: auto;
}

/* Underline bar matching Watch Live */
.ps-divider {
    width: 120px;               /* Same underline width */
    height: 6px;                /* Same thickness */
    background: var(--gold);
    margin: 10px auto 30px auto;
    border-radius: 4px;
}
/* FORCE BACK TO TOP BUTTON STYLE */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  outline: none;
  cursor: pointer;

  background: #1b2a5a;      /* deep navy to match header */
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  z-index: 50;
}

.back-to-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}
/* ===========================
   FEATURED EVENT STRIP
=========================== */

.featured-events {
  margin: 25px 0 35px;
  display: flex;
  justify-content: center;
}

.event-card {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.15);
  overflow: hidden;
  max-width: 700px;
  width: 100%;
  transition: transform 0.2s ease;
}

.event-card:hover {
  transform: translateY(-4px);
}

.event-card img {
  width: 160px;
  height: 120px;
  object-fit: cover;
}

.event-info {
  padding: 15px 20px;
}

.event-info h4 {
  margin: 0;
  font-size: 1.3rem;
  color: #1a1a1a;
  font-weight: 600;
}

.event-date {
  margin: 4px 0 12px;
  font-size: 0.95rem;
  color: #666;
}

.event-btn {
  display: inline-block;
  padding: 8px 14px;
  color: white;
  background: #0a2a43;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.2s;
}

.event-btn:hover {
  background: #0d3a60;
}
/* ===========================
   FEATURED EVENTS (Updated)
=========================== */

#featured-events {
  max-width: 900px;
  margin: 50px auto;
  padding: 20px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.12);
  text-align: center;
}

#featured-events .event-card {
  display: flex;
  gap: 20px;
  padding: 15px;
  background: #f8f9fc;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  align-items: center;
}

#featured-events .event-card img {
  width: 180px;
  height: 130px;
  object-fit: cover;
  border-radius: 8px;
}

#featured-events h4 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 6px;
}

#featured-events .event-date {
  font-size: 1rem;
  margin-bottom: 12px;
  color: #5b5b5b;
}

#featured-events .event-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 18px;
  background: #003399;
  color: #fff !important;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s ease-in-out;
}

#featured-events .event-btn:hover {
  background: #001f70;
}
.back-to-top {
  background: #003399 !important;
  color: white !important;
  border: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.back-to-top:hover {
  background: #001f70 !important;
}
/* BACK TO TOP BUTTON – BLUE CIRCLE WITH GOLD OUTLINE */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid #f4c542;      /* gold outline */
  background: #021b46;            /* FDWC navy/blue fill */
  color: #ffffff;                 /* white "TOP" text */
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  display: none;                  /* JS will toggle .show */
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  z-index: 9999;
  outline: none;
  background-image: none;         /* kill any old arrow icon */
}

/* when script adds .show */
.back-to-top.show {
  display: flex;
}

/* hover state */
.back-to-top:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
/* Separation above Resources section */
#resources {
  padding-top: 80px;
  padding-bottom: 80px;
  background: #ffffff; /* clean white background so it isn’t similar to the calendar */
  position: relative;
}

/* Optional subtle divider line */
#resources::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 80%;
  height: 2px;
  background: rgba(212, 175, 55, 0.35); /* soft gold */
  transform: translateX(-50%);
  border-radius: 2px;
}
/* Resource Cards */
.resource-card {
  background: #f9fafc; /* soft clean light background */
  border-radius: 14px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(0,0,0,0.10);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.resource-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}

/* Icon circle enhancement */
.icon-circle {
  width: 70px;
  height: 70px;
  background: #0a2a43; /* FDWC blue */
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  font-size: 32px;
  transition: background 0.25s ease, transform 0.25s ease;
}

.resource-card:hover .icon-circle {
  transform: scale(1.15);
  background: #D4AF37; /* gold on hover */
  color: #0a2a43;      /* blue icon */
}
/* Softer wave color between calendar & resources */
.wave-divider.wave-soft svg path {
  fill: #eef3ff; /* light cool tone */
}

/* Make Resources background distinct from Calendar */
.resources-panel {
  background: #f9fbff;  /* soft light blue-ish */
}

/* Gold underline on Resources heading (reuses existing pattern) */
#resources .section-header.gold-underline-section {
  position: relative;
  display: inline-block;
  margin-bottom: 1.75rem;
}

#resources .section-header.gold-underline-section::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -0.55rem;
  width: 120px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #b58e00, #f6e27a, #b58e00);
}

/* Resource card hover animation */
.resource-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 20px 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  position: relative;
  overflow: hidden;
}

.resource-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid transparent;
  pointer-events: none;
  transition: border-color 0.2s ease;
}

.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}

.resource-card:hover::before {
  border-color: #d4af37; /* soft gold outline on hover */
}
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid #d4af37;   /* gold outline */
  background: #0b2340;         /* deep blue */
  color: #ffffff;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 999;
}

.back-to-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#resources .section-header {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}
#resources .container {
    text-align: center;
}
.resource-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: white;
  padding: 25px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.resource-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.resource-card h3 {
  color: #0a2a43;
  font-weight: 700;
}

.resource-card p {
  color: #444;
}
#resources .section-header {
    text-align: center;
    margin-bottom: 10px;
    position: relative;
}

#resources .section-header::after {
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    background: #E5C34B; /* gold */
    margin: 12px auto 0;
    border-radius: 2px;
}
/* ===============================
   GOLD UNDERLINE ANIMATION
================================*/
.gold-underline-resources {
  display: inline-block;
  width: 120px;
  height: 4px;
  margin: 10px auto 25px;
  background: linear-gradient(90deg, #d4af37, #f7e4a0, #d4af37);
  background-size: 200% 100%;
  animation: goldShimmer 2.5s linear infinite;
  border-radius: 3px;
}

@keyframes goldShimmer {
  0% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
.profile-photo {
    max-width: 350px;     /* perfect portrait size */
    width: 100%;          /* stays responsive */
    height: auto;         /* keeps proportions */
    margin: 0 auto 30px;  /* centers the photo */
    display: block;
}
.profile-photo {
    max-width: 350px;     /* perfect portrait size */
    width: 100%;          /* stays responsive */
    height: auto;         /* keeps proportions */
    margin: 0 auto 30px;  /* centers the photo */
    display: block;
}
/* ============================
   STAFF PROFILE IMAGE SIZING
============================ */

.profile-photo-wrapper {
    width: 380px;       /* PERFECT SIZE */
    margin: 0 auto;     /* centers image */
    text-align: center;
}

.profile-photo-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 12px;      /* optional subtle curve */
    object-fit: cover;
}

/* ===== Minister Profile Page Background ===== */
.minister-profile-page {
  background: linear-gradient(
    180deg,
    #f6f7f9 0%,
    #ffffff 45%,
    #f2f4f7 100%
  );
  padding: 80px 0;
}
/* ===========================
   LINDA PROFILE PAGE
=========================== */

.profile-linda {
  background: #eef5fb; /* soft FDWC light blue */
  padding: 80px 0 100px;
}

.profile-container {
  max-width: 1100px;
}

/* Name */
.profile-linda h1,
.profile-linda h2 {
  color: #0a1f44; /* FDWC navy */
  text-align: center;
}

/* Title */
.profile-linda .role,
.profile-linda .subtitle {
  color: #c9a227; /* FDWC gold */
  text-align: center;
  font-weight: 600;
  margin-bottom: 40px;
}

/* Image sizing */
.profile-linda .profile-image img {
  width: 360px;
  max-width: 100%;
  border-radius: 18px;
  display: block;
  margin: 0 auto 40px;
}

/* Bio text */
.profile-linda .profile-bio {
  text-align: left;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #1f2937;
  padding: 0 20px;
}

/* ===========================
   BULLETIN VIEWER
=========================== */

.bulletin-viewer {
  margin-top: 30px;
  width: 100%;
}

.bulletin-viewer iframe {
  width: 100%;
  height: 80vh;
}

@media (max-width: 768px) {
  .bulletin-viewer iframe {
    height: 70vh;
  }
}
/* ============================
   BULLETIN PAGE
============================ */

.bulletin-page {
  background: linear-gradient(
    180deg,
    #0a2a43 0%,
    #081e33 100%
  );
  padding: 90px 0;
}

.bulletin-flipbook {
  max-width: 900px;
  margin: 40px auto 0;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.35);
  padding: 20px;
}

/* Mobile-friendly PDF */
.bulletin-flipbook embed {
  width: 100%;
  height: 80vh;
  border: none;
}

/* ============================
   BULLETIN PAGE STYLES
============================ */

.bulletin-page {
  background: #0a2a43; /* FDWC navy contrast */
  min-height: 100vh;
  padding: 80px 0;
}

.bulletin-container {
  max-width: 1100px;
  margin: 0 auto;
  background: #ffffff;
  padding: 40px;
  border-radius: 18px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.25);
}

.bulletin-title {
  text-align: center;
  color: #0a2a43;
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.bulletin-date {
  text-align: center;
  color: #b89b5e; /* FDWC gold */
  margin-bottom: 30px;
  font-weight: 600;
}

#flipbook {
  width: 100%;
  height: 650px;
  margin: 0 auto;
}

#flipbook iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* =========================================
   FOUNDERS PAGE (OVERRIDES IN styles.css)
   ========================================= */

body.founders-page,
body.founders-page main,
body.founders-page .page,
body.founders-page .content,
body.founders-page .site-content,
body.founders-page .container,
body.founders-page .wrapper {
  background: #0b1c2d !important;
}

/* Make ALL sections after navbar navy */
body.founders-page .founders-hero,
body.founders-page .founders-content,
body.founders-page .timeline-section {
  background: #0b1c2d !important;
  color: #ffffff;
}

/* Fix the “global img width:100%” problem */
body.founders-page .founders-hero img.founders-logo {
  width: 90px !important;
  max-width: 90px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto 22px !important;
}

/* Founders heading + gold bar */
body.founders-page .founders-title {
  color: #ffffff !important;
  margin: 0 !important;
}

body.founders-page .gold-bar {
  width: 85px !important;
  height: 4px !important;
  background: #c9a24d !important;
  margin: 16px auto 26px !important;
}
/* =========================================
   FOUNDERS PAGE – FINAL ALIGNMENT FIX
   ========================================= */

/* Center everything in the hero */
body.founders-page .founders-hero {
  text-align: center !important;
}

/* Increase logo to match hero page scale */
body.founders-page .founders-hero img.founders-logo {
  width: 115px !important;   /* slightly larger */
  max-width: 115px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto 26px !important;
}

/* Center the Founders title */
body.founders-page .founders-title {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ensure gold bar stays centered */
body.founders-page .gold-bar {
  margin-left: auto !important;
  margin-right: auto !important;
}
/* =========================================
   FOUNDERS PORTRAIT SECTION
   ========================================= */

body.founders-page .founders-portrait-section {
  background: #0b1c2d;
  padding: 60px 20px 80px;
  text-align: center;
}

body.founders-page .founders-portrait-wrap {
  max-width: 820px;
  margin: 0 auto;
}

body.founders-page .founders-portrait {
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  margin-bottom: 22px;
}

/* Optional gold accent line */
body.founders-page .founders-portrait::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: #c9a24d;
  margin: 26px auto 0;
}

body.founders-page .founders-caption {
  font-size: 16px;
  color: #e6e6e6;
  margin-top: 16px;
  font-style: italic;
}
/* =========================================
   FOUNDERS FEATURE – IMAGE RIGHT
   ========================================= */

body.founders-page .founders-feature {
  background: #0b1c2d;
  padding: 80px 20px;
}

body.founders-page .founders-feature-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: center;
}

/* TEXT */
body.founders-page .founders-text {
  color: #ffffff;
}

body.founders-page .founders-text p {
  font-size: 17px;
  line-height: 1.7;
  color: #e6e6e6;
}

/* IMAGE WRAPPER */
body.founders-page .founders-image-wrap {
  display: flex;
  justify-content: flex-end;
  position: sticky;
  top: 120px; /* stays below navbar */
  align-self: start;
}
body.founders-page .founders-image {
  transition: transform 0.3s ease;
}

/* IMAGE WITH THIN GOLD BORDER */
body.founders-page .founders-image {
  max-width: 360px;
  width: 100%;
  height: auto;
  border: 2px solid #c9a24d; /* thin gold */
  padding: 6px;
  background: #0b1c2d;
}

/* MOBILE STACK */
@media (max-width: 900px) {
  body.founders-page .founders-feature-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  body.founders-page .founders-image-wrap {
    justify-content: center;
  }
}
/* FOUNDERS NAMEPLATE */
body.founders-page .founders-nameplate {
  margin-top: 14px;
  text-align: center;
  color: #ffffff;
  font-family: "Libre Baskerville", Georgia, serif;
}

body.founders-page .founders-nameplate span {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: #c9a24d;
  letter-spacing: 1px;
}
/* FADE-IN ANIMATION */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1.2s ease forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* GOLD ACCENT UNDER SECTION HEADINGS */
body.founders-page .gold-accent::after {
  content: "";
  display: block;
  width: 70px;
  height: 3px;
  background: #c9a24d;
  margin-top: 12px;
}
/* FOUNDERS TIMELINE */
body.founders-page .founders-timeline {
  background: #0b1c2d;
  padding: 80px 20px;
}

body.founders-page .founders-container {
  max-width: 900px;
  margin: 0 auto;
  color: #ffffff;
}

body.founders-page .timeline-item {
  border-left: 2px solid #c9a24d;
  padding-left: 26px;
  margin-top: 32px;
  position: relative;
}

body.founders-page .timeline-item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 6px;
  width: 12px;
  height: 12px;
  background: #c9a24d;
  border-radius: 50%;
}

body.founders-page .timeline-year {
  font-weight: bold;
  color: #c9a24d;
  letter-spacing: 1px;
}
/* =========================================
   FOUNDERS TIMELINE – PARALLAX BACKGROUND
   ========================================= */

body.founders-page .parallax-timeline {
  position: relative;
  background-image: linear-gradient(
      rgba(11, 28, 45, 0.88),
      rgba(11, 28, 45, 0.88)
    ),
    url("/assets/founders/founders-background.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (max-width: 768px) {
  body.founders-page .parallax-timeline {
    background-attachment: scroll;
  }
}
/* =========================================
   TIMELINE LINE REVEAL ANIMATION
   ========================================= */

body.founders-page .timeline-item {
  opacity: 0;
  transform: translateY(20px);
  animation: timelineReveal 1s ease forwards;
}

body.founders-page .timeline-item:nth-child(1) { animation-delay: 0.2s; }
body.founders-page .timeline-item:nth-child(2) { animation-delay: 0.4s; }
body.founders-page .timeline-item:nth-child(3) { animation-delay: 0.6s; }

@keyframes timelineReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================================
   THEN & NOW – BUILDING IMAGES
   ========================================= */

body.founders-page .founders-then-now {
  background: #0b1c2d;
  padding: 80px 20px;
}

body.founders-page .then-now-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 40px;
}

body.founders-page .then-now-card {
  text-align: center;
  color: #ffffff;
}

body.founders-page .then-now-card img {
  width: 100%;
  max-width: 420px;
  border: 2px solid #c9a24d;
  padding: 6px;
  background: #0b1c2d;
}

body.founders-page .then-now-card span {
  display: block;
  margin-top: 14px;
  font-size: 15px;
  color: #c9a24d;
  letter-spacing: 1px;
}

@media (max-width: 900px) {
  body.founders-page .then-now-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================================
   FOUNDERS CLOSING QUOTE
   ========================================= */

body.founders-page .founders-quote {
  background: #0b1c2d;
  padding: 100px 20px;
  text-align: center;
}

body.founders-page .founders-quote blockquote {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px;
  color: #ffffff;
  max-width: 820px;
  margin: 0 auto;
  line-height: 1.4;
}

body.founders-page .founders-quote span {
  display: block;
  margin-top: 18px;
  font-size: 16px;
  color: #c9a24d;
  letter-spacing: 1px;
}
body {
  font-family: "Libre Baskerville", Georgia, serif;
}

/* =========================================
   HOME PAGE – RESOURCES / GIVE SEPARATOR
   ========================================= */

.home-divider {
  background: #0b1c2d;
  padding: 40px 0;
}

.home-divider .divider-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.home-divider span {
  display: inline-block;
  width: 90px;
  height: 3px;
  background: #c9a24d;
}
/* =========================================
   HOME PAGE – GIVE SECTION EMPHASIS
   ========================================= */

/* Slight visual lift for Give section */
body.home-page #give,
body.home-page .give-section {
  background: linear-gradient(
    rgba(11, 28, 45, 0.96),
    rgba(11, 28, 45, 0.96)
  );
  padding-top: 70px;
  padding-bottom: 80px;
  position: relative;
}

/* Gold accent line at top of Give */
body.home-page #give::before,
body.home-page .give-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 3px;
  background: #c9a24d;
}

/* Center Give heading if needed */
body.home-page #give h2,
body.home-page .give-section h2 {
  text-align: center;
}
/* =========================================
   RESOURCES → GIVE GOLD WAVE DIVIDER (FIXED)
   ========================================= */

.wave-divider {
  position: relative;
  height: 90px;
  background: #0b1c2d;
  z-index: 5;
}

.wave-divider::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 100%;
  background: #c9a24d;
  clip-path: polygon(
    0% 65%,
    12% 60%,
    28% 70%,
    45% 60%,
    60% 70%,
    75% 60%,
    90% 68%,
    100% 65%,
    100% 100%,
    0% 100%
  );
}

/* =========================================
   GIVE SECTION – GOLD ACCENT BAR
   ========================================= */

body.home-page .give-title::after {
  content: "";
  display: block;
  width: 90px;
  height: 3px;
  background: #c9a24d;
  margin: 14px auto 0;
}

/* =========================================
   GIVE SECTION – GOLD BAR (THEME-WHITE SAFE)
   ========================================= */

#give.theme-white .give-title {
  text-align: center;
}

#give.theme-white .give-title::after {
  content: "";
  display: block;
  width: 90px;
  height: 3px;
  background: #c9a24d;
  margin: 14px auto 0;
}
#give.theme-white {
  padding-top: 80px;
}
/* =========================================
   RESOURCES → GIVE SVG DIVIDER (GUARANTEED)
   ========================================= */

.give-divider {
  background: #0b1c2d;
  line-height: 0;
}

.give-divider svg {
  display: block;
  width: 100%;
  height: 90px;
}
/* =========================================
   GIVE SECTION – REAL GOLD BAR
   ========================================= */

#give .give-gold-bar {
  width: 90px;
  height: 3px;
  background: #c9a24d;
  margin: 16px auto 32px;
}
/* =========================================
   GIVE SECTION – GOLD BAR (FINAL FIX)
   ========================================= */

#give.panel.theme-white .give-gold-bar {
  width: 90px;
  height: 3px;
  background-color: #c9a24d;
  margin: 12px auto 24px;
}
#give.panel.theme-white .give-cards,
#give.panel.theme-white .cards {
  margin-top: 10px;
}
/* =========================================
   GIVE SECTION – FAIL-SAFE GOLD BAR
   ========================================= */

#give .give-divider-bar {
  width: 90px;
  height: 3px;
  border: none;
  background-color: #c9a24d;
  margin: 12px auto 28px;
}
/* =========================================
   GIVE SECTION – TRUE GOLD BAR
   ========================================= */

#give hr.give-divider-bar {
  all: unset;                 /* kills theme defaults */
  display: block;
  width: 90px;
  height: 4px;
  margin: 14px auto 30px;
  background-color: #c9a24d;  /* GOLD */
}
/* =========================================
   FOUNDERS IMAGE + NAMEPLATE STACKING
   ========================================= */

body.founders-page .founders-image-wrap {
  display: flex;
  flex-direction: column;   /* STACK vertically */
  align-items: center;      /* center image + text */
  position: sticky;
  top: 120px;
}

/* Image stays the same */
body.founders-page .founders-image {
  max-width: 360px;
  width: 100%;
  height: auto;
  border: 2px solid #c9a24d;
  padding: 6px;
  background: #0b1c2d;
}

/* Nameplate UNDER image */
body.founders-page .founders-nameplate {
  margin-top: 14px;
  text-align: center;
  color: #ffffff;
  font-family: "Libre Baskerville", Georgia, serif;
}

body.founders-page .founders-nameplate span {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: #c9a24d;
  letter-spacing: 1px;
}
/* =========================================
   FOUNDERS IMAGE + NAMEPLATE (FINAL FIX)
   ========================================= */

body.founders-page .founders-image-wrap {
  position: sticky;
  top: 120px;
  align-self: start;
  display: flex;
  justify-content: flex-end;
}

body.founders-page .founders-image-block {
  display: flex;
  flex-direction: column;   /* STACK IMAGE + NAME */
  align-items: center;
}

/* Image */
body.founders-page .founders-image {
  max-width: 360px;
  width: 100%;
  height: auto;
  border: 2px solid #c9a24d;
  padding: 6px;
  background: #0b1c2d;
}

/* Nameplate UNDER image */
body.founders-page .founders-nameplate {
  margin-top: 14px;
  text-align: center;
  color: #ffffff;
  font-family: "Libre Baskerville", Georgia, serif;
}

body.founders-page .founders-nameplate span {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: #c9a24d;
  letter-spacing: 1px;
}
/* =========================================
   MINISTER PROFILE – STICKY IMAGE FIX
   ========================================= */

/* Layout already exists – just ensure no clipping */
.profile-page .minister-layout {
  align-items: start;
}

/* STICKY IMAGE COLUMN */
.profile-page .minister-image {
  position: sticky;
  top: 120px; /* distance from top (below navbar) */
  align-self: start;
}

/* IMAGE STYLE (optional polish) */
.profile-page .minister-image img {
  max-width: 360px;
  width: 100%;
  height: auto;
  border: 2px solid #c9a24d;
  padding: 6px;
  background: #0b1c2d;
}

/* MOBILE: disable sticky */
@media (max-width: 900px) {
  .profile-page .minister-image {
    position: relative;
    top: auto;
    margin-bottom: 40px;
  }
}
/* =========================================
   FIX STICKY IMAGE BLOCKING
   ========================================= */

.profile-page .minister-page,
.profile-page .container,
.profile-page .minister-layout {
  overflow: visible !important;
}
/* STICKY MINISTER IMAGE */
.profile-page .minister-image {
  position: sticky;
  top: 120px;          /* below navbar */
  align-self: flex-start;
}
.profile-page .minister-image img {
  width: 100%;
  max-width: 360px;
  height: auto;
  border: 2px solid #c9a24d;
  padding: 6px;
  background: #0b1c2d;
}
/* =========================================
   MINISTER PROFILE – FIXED SCROLL IMAGE
   (Sticky-safe replacement)
========================================= */

.profile-page .minister-image {
  position: fixed;
  top: 120px;                 /* below navbar */
  right: calc(50% - 550px);   /* aligns with container */
  width: 360px;
  z-index: 10;
}

/* Image styling */
.profile-page .minister-image img {
  width: 100%;
  height: auto;
  border: 2px solid #c9a24d;
  padding: 6px;
  background: #0b1c2d;
}

/* Push text so it doesn't go under image */
.profile-page .minister-content {
  margin-right: 420px;
}

/* MOBILE — disable fixed */
@media (max-width: 900px) {
  .profile-page .minister-image {
    position: relative;
    right: auto;
    top: auto;
    margin: 0 auto 40px;
  }

  .profile-page .minister-content {
    margin-right: 0;
  }
}
/* =========================================
   FOUNDERS – MINISTRY VISION SECTION
========================================= */

body.founders-page .founders-vision {
  background: #0b1c2d;
  padding: 80px 20px;
  text-align: center;
}

body.founders-page .founders-vision h2 {
  color: #ffffff;
  margin-bottom: 30px;
}

body.founders-page .vision-image-wrap {
  max-width: 640px;   /* 👈 smaller, elegant */
  margin: 0 auto 28px;
}


body.founders-page .vision-image-wrap img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 2px solid #c9a24d; /* thin gold */
  background: #ffffff;
  box-shadow: 0 20px 45px rgba(0,0,0,0.45);
}

body.founders-page .vision-caption {
  max-width: 720px;
  margin: 0 auto;
  font-size: 16px;
  color: #e6e6e6;
  font-style: italic;
}
body.founders-page .vision-image-wrap {
  transform: translateY(0);
  transition: transform 0.4s ease;
}

body.founders-page .vision-image-wrap:hover {
  transform: translateY(-6px);
}

body.founders-page .founders-vision h2 {
  text-align: center !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

body.founders-page .founders-vision h2::after {
  content: "";
  display: block;
  width: 90px;
  height: 3px;
  background: #c9a24d;
  margin: 14px auto 0;   /* 👈 forces center */
  border-radius: 2px;
}
/* =========================================
   FOUNDERS PAGE – CENTER ALL SECTION HEADINGS
   ========================================= */

/* Legacy & Vision */
body.founders-page .section-heading,
body.founders-page .timeline-title {
  text-align: center !important;
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
}

/* Force gold bar centered under headings */
body.founders-page .section-heading::after,
body.founders-page .timeline-title::after {
  content: "";
  display: block;
  width: 90px;
  height: 3px;
  background: #c9a24d;       /* FDWC gold */
  margin: 14px auto 0 auto;  /* 👈 THIS centers it */
  border-radius: 2px;
}
/* =========================================
   BACK TO TOP — FOUNDERS PAGE FIX
   ========================================= */

body.founders-page .back-to-top {
  display: flex !important;
  align-items: center;
  justify-content: center;

  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;

  width: 56px;
  height: 56px;
  border-radius: 50%;

  background: #0b1c2d;          /* navy */
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;

  border: 2px solid #c9a24d;    /* gold outline */
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Show when scrolling */
body.founders-page .back-to-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* =========================================
   MINISTER PROFILE – BIO WIDTH FIX
   ========================================= */

.profile-page .minister-layout {
  grid-template-columns: 1fr 420px !important; /* wide text + fixed image */
  gap: 60px !important;
  align-items: start;
}

/* Allow text to breathe */
.profile-page .minister-content {
  max-width: 700px;        /* controls line length */
  padding-right: 20px;
}

/* Improve readability */
.profile-page .minister-bio p {
  max-width: 100%;
  line-height: 1.8;
  font-size: 17px;
}

/* Center the whole layout better */
.profile-page .container.minister-layout {
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px) {
  .ministry-layout {
    grid-template-columns: 1fr;
  }
}
/* =========================================
   MINISTER PROFILE — FORCE CENTERED LAYOUT
   ========================================= */

/* Force wider centered container ONLY on minister pages */
body.profile-page .minister-page .container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 60px !important;
  padding-right: 60px !important;
}

/* Override grid completely */
body.profile-page .minister-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 420px !important;
  gap: 80px !important;
  align-items: start !important;
}

/* Make the text column wider and centered visually */
body.profile-page .minister-content {
  max-width: 760px !important;
  width: 100%;
}

/* Improve bio readability */
body.profile-page .minister-bio p {
  font-size: 17px;
  line-height: 1.85;
  max-width: 100%;
}

/* Keep image sticky */
body.profile-page .minister-image {
  position: sticky;
  top: 120px;
  align-self: start;
}

/* Mobile safety */
@media (max-width: 900px) {
  body.profile-page .minister-layout {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  body.profile-page .minister-page .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
/* =========================================
   SIMPLE INTERNAL PAGES (Avatar / VBS / FFD)
   ========================================= */

/* REMOVE GLOBAL LINE PATTERN BACKGROUND */
body.fun-day-page,
body.fun-day-page main,
body.fun-day-page .simple-content,
body.fun-day-page .community-moments {
  background-image: none !important;
}
 {
  background: #0b1c2d;
  color: #ffffff;
  min-height: 100vh;
}

.simple-hero {
  padding: 140px 20px 60px;
  text-align: center;
}

.simple-title {
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 700;
  color: #ffffff;
}

.simple-content {
  padding: 60px 20px 100px;
}

.simple-content p {
  font-size: 17px;
  line-height: 1.8;
  max-width: 820px;
  margin: 0 auto 20px;
  color: #e6e6e6;
}
/* =========================================
   VIDEO CARDS – ANNOUNCEMENTS / EVENTS
   ========================================= */

.video-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}

.video-card {
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(201,162,77,0.75); /* gold */
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.65);
}

/* Video frame */
.video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
  border-radius: 14px;
  margin-bottom: 16px;
  background: #000;
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Text */
.video-card h3 {
  font-size: 20px;
  margin-bottom: 8px;
  color: #ffffff;
}

.video-card p {
  font-size: 15px;
  color: #e6e6e6;
  line-height: 1.6;
}
/* =========================================
   GIVE SECTION – HEADING COLOR FIX
   ========================================= */

#give h2,
#give .section-title,
#give .panel-title {
  color: #ffffff !important; /* white for contrast */
}
/* =========================================
   GIVE SECTION – REMOVE EXTRA GOLD BARS
   ========================================= */

#give .section-title::before,
#give .section-title::after,
#give h2::before,
#give h2::after {
  content: none !important;
  display: none !important;
}
/* =========================================
   GIVE SECTION — REMOVE PANEL DECOR LINES
   ========================================= */

/* Kill panel-level decorative bars */
#give::before,
#give::after {
  content: none !important;
  display: none !important;
}

/* Kill any heading-based bars inside Give */
#give h1::before,
#give h1::after,
#give h2::before,
#give h2::after,
#give .section-title::before,
#give .section-title::after,
#give .panel-title::before,
#give .panel-title::after {
  content: none !important;
  display: none !important;
}

/* Ensure Give heading is readable */
#give h1,
#give h2 {
  color: #ffffff !important;
}
/* =========================================
   GIVE SECTION — FORCE SOLID BACKGROUND
   ========================================= */

#give {
  background: #0b1c2d !important;   /* solid navy */
  background-image: none !important;
}

/* Kill any inherited panel gradients or overlays */
#give.panel,
#give.panel.theme-white {
  background: #0b1c2d !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Remove any pseudo-element shading */
#give::before,
#give::after {
  content: none !important;
  display: none !important;
}
/* =========================================
   FOOTER + GIVE SECTION CLEAN SEPARATION
   ========================================= */

/* Remove any extra bottom background from Give */
#give {
  padding-bottom: 80px !important;
  margin-bottom: 0 !important;
}

/* Kill any panel bleed after Give */
#give + * {
  background: transparent !important;
}

/* Footer should start clean */
.site-footer,
footer {
  background: #0a1a33; /* deep navy footer */
  padding: 40px 20px;
  margin-top: 0 !important;
}

/* Ensure footer text is centered and clean */
.site-footer p,
footer p {
  margin: 0;
  color: #ffffff;
  font-size: 14px;
}
/* =========================================
   GIVE — SINGLE CENTERED GOLD BAR
   ========================================= */

#give h2 {
  position: relative;
  text-align: center;
  margin-bottom: 30px;
}

/* Gold bar under Give */
#give h2::after {
  content: "";
  display: block;
  width: 90px;
  height: 4px;
  background: #c9a24d; /* FDWC gold */
  margin: 14px auto 0;
  border-radius: 2px;
}
/* =========================================
   GIVE SECTION — FORCE GOLD BAR (FINAL)
   ========================================= */

/* Target ANY possible Give title */
#give h1,
#give h2,
#give .panel-title,
#give .section-title {
  position: relative !important;
  text-align: center !important;
  color: #ffffff !important;
  margin-bottom: 28px !important;
}

/* Inject gold bar under the title */
#give h1::after,
#give h2::after,
#give .panel-title::after,
#give .section-title::after {
  content: "" !important;
  display: block !important;
  width: 96px !important;
  height: 4px !important;
  background-color: #c9a24d !important;
  margin: 14px auto 0 auto !important;
  border-radius: 2px !important;
}
/* Give section spacing polish */
#give {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}

#give .give-cards {
  margin-top: 40px;
}
/* =========================================
   FLYERS & GALLERIES (VBS / FUN DAY)
   ========================================= */

.flyer-section {
  text-align: center;
  margin-bottom: 80px;
}

.flyer-placeholder {
  width: 100%;
  max-width: 700px;
  height: 380px;
  margin: 30px auto;
  border: 2px dashed #c9a24d;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c9a24d;
  font-size: 18px;
  background: rgba(255,255,255,0.04);
}

/* Buttons */
.primary-btn {
  display: inline-block;
  padding: 14px 28px;
  background: #c9a24d;
  color: #0b1c2d;
  font-weight: 700;
  border-radius: 30px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

.primary-btn.disabled {
  pointer-events: none;
  opacity: 0.6;
}

/* Gallery */
.gallery-section {
  text-align: center;
}

.gallery-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.gallery-item {
  height: 220px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(201,162,77,0.5);
}

.gallery-item.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c9a24d;
  font-size: 14px;
}
/* =========================================
   HERO LOGO — INTERNAL EVENT PAGES
   ========================================= */

.simple-hero .hero-logo {
  width: 130px;          /* matches hero scale */
  max-width: 100%;
  margin: 0 auto 18px;
  display: block;
}
/* =========================================
   SUBTLE HERO LOGO LOAD ANIMATION
   ========================================= */

.simple-hero .hero-logo {
  opacity: 0;
  transform: translateY(10px);
  animation: heroLogoFade 0.9s ease-out forwards;
  animation-delay: 0.2s;
}

/* Keyframes */
@keyframes heroLogoFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .simple-hero .hero-logo {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
/* =========================================
   GLOBAL LOGO LOAD ANIMATION
   (All pages)
   ========================================= */

.hero-logo {
  opacity: 0;
  transform: translateY(10px);
  animation: globalLogoFade 0.9s ease-out forwards;
  animation-delay: 0.2s;
}

/* Keyframes */
@keyframes globalLogoFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-logo {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
/* =========================================
   GLOBAL PAGE LOGO LOAD ANIMATION (SITE-WIDE)
   Catches multiple logo classes used across FDWC
   ========================================= */

/* Animate page-level logos (NOT navbar logo) */
.hero-logo,
.hero-logo-safe,
.founders-logo,
.media-heading-logo,
.ps-logo,
.pst-logo,
.fdwc-logo.logo--sm,
.simple-hero img,
.founders-hero img.founders-logo,
.hero-content img {
  opacity: 0;
  transform: translateY(10px);
  animation: globalLogoFade 0.9s ease-out forwards;
  animation-delay: 0.15s;
}

/* EXCLUDE NAVBAR BRAND LOGO */
.site-nav .brand img {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

@keyframes globalLogoFade {
  to { opacity: 1; transform: translateY(0); }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .hero-logo,
  .hero-logo-safe,
  .founders-logo,
  .media-heading-logo,
  .ps-logo,
  .pst-logo,
  .fdwc-logo.logo--sm,
  .simple-hero img,
  .founders-hero img.founders-logo,
  .hero-content img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* =========================================
   GLOBAL LOGO FADE-IN (ALL PAGES)
========================================= */

.site-nav .brand img,
.page-logo,
.hero-logo-safe {
  opacity: 0;
  transform: translateY(-6px);
  animation: logoFadeIn 1.2s ease-out forwards;
  animation-delay: 0.15s;
}

@keyframes logoFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================================
   GLOBAL LOGO FADE-IN (ALL PAGE HERO LOGOS)
   ========================================= */

/* Page hero logos (all ministry & event pages) */
.hero-logo,
.founders-logo,
.ministry-hero-logo,
.simple-hero img,
.founders-hero img,
.ministry-hero img {
  opacity: 0;
  transform: translateY(10px);
  animation: logoFadeIn 0.9s ease-out forwards;
  animation-delay: 0.2s;
}

/* EXCLUDE NAVBAR LOGO */
.site-nav img,
.navbar img {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

@keyframes logoFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .hero-logo,
  .founders-logo,
  .ministry-hero-logo,
  .simple-hero img,
  .founders-hero img,
  .ministry-hero img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* ===========================
   SIMPLE HERO LOGO (GLOBAL)
=========================== */
.simple-hero-logo {
  width: clamp(70px, 7vw, 110px);
  height: auto;
  display: block;
  margin: 0 auto 14px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45));

  /* subtle animation */
  opacity: 0;
  transform: translateY(-6px);
  animation: logoFadeIn 1.2s ease forwards;
}

@keyframes logoFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================
   HERO LOGO FADE ANIMATION
========================= */

.hero-logo {
  display: block;
  margin: 0 auto 18px;
  max-width: 140px;
}

.fade-logo {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeLogoIn 1.2s ease-out forwards;
}

@keyframes fadeLogoIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================
   GLOBAL GALLERY LIGHTBOX
========================= */

#gallery-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#gallery-lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
}

.gallery-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}
/* ==========================
   HIGHLIGHTS GALLERY GRID
========================== */
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.highlights-grid img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.highlights-grid img:hover {
  transform: scale(1.04);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
/* ==========================
   COMMUNITY MOMENTS – LIGHT PANEL
========================== */
.fun-day-page .panel.theme-dark {
  background: #f5f7fa; /* light gray-blue */
  color: #0f2340;
  padding: 80px 0;
}

.fun-day-page .panel.theme-dark .section-header {
  color: #0f2340;
}

.fun-day-page .panel.theme-dark .gold-divider {
  background: linear-gradient(
    to right,
    transparent,
    #d4af37,
    transparent
  );
}
.fun-day-page .highlights-grid img {
  background: #ffffff;
  padding: 6px;
  border-radius: 14px;
}
/* ==========================
   COMMUNITY MOMENTS – SINGLE FEATURE
========================== */
.community-feature {
  background: linear-gradient(
    180deg,
    #081a2f,
    #0b2340
  );
  padding: 90px 0;
  color: #ffffff;
  text-align: center;
}

.community-feature .section-header.white {
  color: #ffffff;
}

.community-feature .community-description {
  max-width: 720px;
  margin: 20px auto 40px;
  font-size: 1.05rem;
  opacity: 0.9;
}

.featured-image {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid rgba(212,175,55,0.4);
  box-shadow: 0 30px 60px rgba(0,0,0,0.45);
}

.featured-image img {
  width: 100%;
  display: block;
}
/* ==========================
   COMMUNITY MOMENTS – SCROLL GALLERY
========================== */
.community-feature {
  background: linear-gradient(180deg, #081a2f, #0b2340);
  padding: 90px 0;
  color: #ffffff;
  text-align: center;
}

.community-feature .section-header.white {
  color: #ffffff;
}

.community-description {
  max-width: 720px;
  margin: 20px auto 40px;
  font-size: 1.05rem;
  opacity: 0.9;
}

/* Gallery window */
.scroll-gallery {
  max-width: 1000px;
  margin: 0 auto;
  overflow-x: auto;
  padding-bottom: 10px;
}

/* Hide scrollbar (clean look) */
.scroll-gallery::-webkit-scrollbar {
  height: 8px;
}
.scroll-gallery::-webkit-scrollbar-thumb {
  background: rgba(212,175,55,0.6);
  border-radius: 6px;
}

/* Track */
.scroll-track {
  display: flex;
  gap: 24px;
  padding: 10px;
}

/* Images */
.scroll-track img {
  height: 380px;
  border-radius: 16px;
  border: 2px solid rgba(212,175,55,0.4);
  box-shadow: 0 25px 50px rgba(0,0,0,0.45);
  flex-shrink: 0;
}

/* Mobile */
@media (max-width: 768px) {
  .scroll-track img {
    height: 260px;
  }
}
/* ==========================
   COMMUNITY PREVIEW
========================== */
.community-feature {
  background: #0b2340;
  padding: 90px 0;
  text-align: center;
  color: #fff;
}

.gallery-preview {
  max-width: 700px;
  margin: 40px auto 0;
  position: relative;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(212,175,55,0.5);
}

.gallery-preview img {
  width: 100%;
  display: block;
}

.preview-label {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-preview:hover .preview-label {
  opacity: 1;
}

/* ==========================
   GALLERY VIEWER (ONE WINDOW)
========================== */
#gallery-viewer {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
}

.gallery-scroll {
  display: flex;
  gap: 30px;
  padding: 80px 40px;
  overflow-x: auto;
  height: 100%;
  align-items: center;
}

.gallery-scroll img {
  height: 420px;
  border-radius: 16px;
  flex-shrink: 0;
}

.gallery-close {
  position: absolute;
  top: 25px;
  right: 35px;
  font-size: 42px;
  color: #fff;
  cursor: pointer;
}
.gallery-scroll {
  scroll-behavior: smooth;
}
/* =========================
   COMMUNITY MOMENTS
========================= */
.community-moments {
  background: #0b1c2d; /* navy */
  padding: 70px 20px;
  text-align: center;
}

.community-moments .section-title {
  color: #ffffff;
  font-size: 36px;
  margin-bottom: 35px;
  letter-spacing: 1px;
}

/* View window (smaller + elegant) */
.slider-window {
  max-width: 780px;
  height: 420px;            /* 👈 controls size */
  margin: 0 auto;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}

/* Images fill window without stretching */
.slider-track img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* keeps image elegant */
  flex-shrink: 0;
}


/* Sliding track */
.slider-track {
  display: flex;
  width: 100%;
  animation: slideLoop 50s linear infinite;
}

/* Images */
.slider-track img {
  width: 100%;
  flex-shrink: 0;
  object-fit: cover;
}

/* Animation */
@keyframes slideLoop {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-400%); }
}
/* Ensure hover area is detected */
.slider-window {
  position: relative;
}

/* Pause animation on hover */
.slider-window:hover .slider-track {
  animation-play-state: paused !important;
}

/* Section wrapper */
.community-moments {
  background: #0b1c2d;
  padding: 70px 20px;
  text-align: center; /* centers text */
}

/* Title */
.community-moments .section-title {
  color: #ffffff;
  font-size: 36px;
  margin-bottom: 14px;
  letter-spacing: 1px;
}

/* Gold bar */
.community-moments .gold-bar {
  width: 90px;
  height: 4px;
  background: #c9a24d; /* gold */
  margin: 0 auto 40px auto; /* centers bar */
  border-radius: 2px;
}
/* =========================
   COMMUNITY MOMENTS HEADER
========================= */
.community-moments .community-header {
  display: flex;
  flex-direction: column;
  align-items: center;   /* HARD center */
  text-align: center;
  margin-bottom: 40px;
}

.community-moments .community-header .section-title {
  color: #ffffff;
  font-size: 36px;
  margin: 0 0 14px 0;
  letter-spacing: 1px;
}

.community-moments .community-header .gold-bar {
  width: 90px;
  height: 4px;
  background: #c9a24d;
  border-radius: 2px;
}
/* FORCE center Community Moments title + bar */
body .community-moments h2.section-title {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body .community-moments .gold-bar {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* =========================
   FLYER SIZE CONTROL
========================= */
.flyer-placeholder {
  display: block;
  max-width: 360px;
  margin: -50px auto 40px;  /* 👈 moves flyer UP */
}



.flyer-placeholder img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.35);
}
@media (max-width: 768px) {
  .flyer-placeholder {
    max-width: 260px;
  }
}
/* Move Register Family button down */
.register-button {
  margin-top: 30px;   /* 👈 controls vertical spacing */
}
/* Separate flyer from register button */
.flyer-placeholder {
  display: block;
  margin-bottom: 40px;  /* 👈 pushes button down */
}

.register-family-btn {
  display: inline-block;
  margin-top: 30px;
}
.fun-day-page {
  background-color: #0b1c2d; /* navy */
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,0.04) 0 2px, transparent 3px 40px),
    repeating-radial-gradient(circle at 80% 70%, rgba(201,162,77,0.05) 0 2px, transparent 3px 50px);
}

/* === STABILIZATION OVERRIDE === */
.reveal,
.panel,
.parallax-section {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
/* === HIGHLIGHTS EMERGENCY VISIBILITY FIX === */
#media-gallery {
  display: block !important;
  position: relative !important;
  z-index: 10 !important;
  overflow: visible !important;
}

#media-gallery img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#slides {
  min-height: 200px !important;
  display: block !important;
}

.gallery-with-logos {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px;
}

.gallery-side-logo {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 20 !important;
  max-width: 120px;
}
.slides-static {
  display: flex;
  gap: 20px;
  overflow-x: auto;
}

.slides-static img {
  max-height: 280px;
  border-radius: 10px;
}
/* =========================
   HIGHLIGHTS ROTATING SLIDER
========================= */
.highlights-slider {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 420px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
}

.highlights-slider .slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.highlights-slider .slide.active {
  opacity: 1;
}
/* Side logo base state */
.gallery-side-logo {
  opacity: 0;
  transform: translateX(-40px);
  transition: all 0.8s ease;
}

/* Right logo comes from the other side */
.gallery-side-logo.right {
  transform: translateX(40px);
}

/* When visible */
.gallery-side-logo.show {
  opacity: 1;
  transform: translateX(0);
}
/* ===== FINAL HIGHLIGHTS FIX ===== */

.highlights-fixed{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
}

/* LOGOS */
.gallery-side-logo{
  width:90px;
  opacity:0;
  transform:translateX(-40px);
  animation: logoIn .8s ease forwards;
}
.gallery-side-logo.right{
  transform:translateX(40px);
  animation-delay:.2s;
}

@keyframes logoIn{
  to{
    opacity:1;
    transform:translateX(0);
  }
}

/* IMAGE FRAME */
.highlights-frame{
  position:relative;
  width:min(900px, 90vw);
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:14px;
  background:#000;
  border:2px solid #c9a24d;
}

/* ROTATING IMAGES (NO JS) */
.highlights-frame img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  animation: highlightFade 12s infinite;
}

.highlights-frame img:nth-child(1){ animation-delay:0s; }
.highlights-frame img:nth-child(2){ animation-delay:4s; }
.highlights-frame img:nth-child(3){ animation-delay:8s; }

@keyframes highlightFade{
  0%{opacity:0}
  8%{opacity:1}
  33%{opacity:1}
  41%{opacity:0}
  100%{opacity:0}
}
/* === FORCE HIGHLIGHTS ROTATION === */
.highlights-frame img {
  animation: highlightFade 12s infinite !important;
  opacity: 0;
}
/* === SIDE LOGOS (SCROLL TRIGGERED) === */
.gallery-side-logo {
  width: 90px;
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.gallery-side-logo.right {
  transform: translateX(40px);
}

.gallery-side-logo.show {
  opacity: 1;
  transform: translateX(0);
}
/* ===== FDWC HIGHLIGHTS: HARD-SCOPED (NO CONFLICTS) ===== */
#media-gallery .fdwc-hi-wrap{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:24px !important;
}

/* Frame */
#media-gallery .fdwc-hi-frame{
  position:relative !important;
  width:min(900px, 90vw) !important;
  aspect-ratio:16/9 !important;
  overflow:hidden !important;
  border-radius:14px !important;
  background:#000 !important;
  border:2px solid rgba(201,162,77,0.95) !important;
}

/* Slides (only one visible) */
#media-gallery .fdwc-hi-slide{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  opacity:0 !important;
  transition:opacity 0.9s ease-in-out !important;
}

#media-gallery .fdwc-hi-slide.is-on{
  opacity:1 !important;
}

/* Logos (hidden until JS adds .show) */
#media-gallery .fdwc-hi-logo{
  width:90px !important;
  height:auto !important;
  opacity:0 !important;
  transform:translateX(-40px) !important;
  transition:opacity .8s ease, transform .8s ease !important;
}

#media-gallery .fdwc-hi-logo-right{
  transform:translateX(40px) !important;
}

#media-gallery .fdwc-hi-logo.show{
  opacity:1 !important;
  transform:translateX(0) !important;
}
// ===== FDWC Highlights Rotator + Logo Scroll-In =====
(function () {
  // Rotation
  const frame = document.getElementById("fdwcHighlights");
  if (!frame) return;

  const slides = frame.querySelectorAll(".fdwc-hi-slide");
  if (slides.length < 2) return;

  let i = 0;
  window.setInterval(() => {
    slides[i].classList.remove("is-on");
    i = (i + 1) % slides.length;
    slides[i].classList.add("is-on");
  }, 3000);

  // Scroll-in logos
  const logos = document.querySelectorAll("#media-gallery .fdwc-hi-logo");
  const section = document.getElementById("media-gallery");
  if (!logos.length || !section) return;

  const obs = new IntersectionObserver((entries) => {
    entries.forEach((e) => {
      if (e.isIntersecting) {
        logos.forEach((l) => l.classList.add("show"));
        obs.disconnect();
      }
    });
  }, { threshold: 0.45 });

  obs.observe(section);
})();
console.log("FDWC script loaded OK");
.highlights-images {
  display: flex;
  gap: 20px;
  max-width: 800px;
  overflow-x: auto;
}

.highlights-images img {
  height: 220px;
  border-radius: 10px;
  object-fit: cover;
}
/* ==========================================
   FDWC Highlights (Correct + Stable)
   - Small logos left/right
   - One viewer centered
   - Auto-rotate (CSS only)
========================================== */

#media-gallery .fdwc-highlights-row{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 28px !important;
  margin-top: 20px !important;
}

/* Keep logos SMALL (prevents the huge logo issue) */
#media-gallery .fdwc-highlights-logo{
  width: 90px !important;
  max-width: 90px !important;
  height: auto !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Viewer frame */
#media-gallery .fdwc-highlights-viewer{
  position: relative !important;
  width: min(900px, 86vw) !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: #000 !important;
  border: 2px solid rgba(201, 162, 77, 0.95) !important;
}

/* Slides (stacked absolutely, NOT vertically) */
#media-gallery .fdwc-highlights-viewer .fdwc-hi-slide{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0 !important;
  animation: fdwcHiFade 9s infinite !important;
}

/* 3 images = 3 steps (3s each) */
#media-gallery .fdwc-highlights-viewer .fdwc-hi-slide:nth-child(1){ animation-delay: 0s !important; }
#media-gallery .fdwc-highlights-viewer .fdwc-hi-slide:nth-child(2){ animation-delay: 3s !important; }
#media-gallery .fdwc-highlights-viewer .fdwc-hi-slide:nth-child(3){ animation-delay: 6s !important; }

@keyframes fdwcHiFade{
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  33%  { opacity: 1; }
  43%  { opacity: 0; }
  100% { opacity: 0; }
}
/* ===== TEMP FIX: FORCE FIRST HIGHLIGHT IMAGE VISIBLE ===== */

#media-gallery .fdwc-highlights-viewer img {
  opacity: 0;
}

#media-gallery .fdwc-highlights-viewer img:first-child {
  opacity: 1 !important;
}
/* ==========================================
   FDWC Highlights — FINAL ROTATION (LOCKED)
========================================== */

#media-gallery .fdwc-highlights-viewer {
  position: relative;
  overflow: hidden;
}

/* Base slide */
#media-gallery .fdwc-highlights-viewer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation-name: fdwcHiFade !important;
  animation-duration: 12s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
}

/* Stagger timing */
#media-gallery .fdwc-highlights-viewer img:nth-child(1) {
  animation-delay: 0s !important;
}
#media-gallery .fdwc-highlights-viewer img:nth-child(2) {
  animation-delay: 4s !important;
}
#media-gallery .fdwc-highlights-viewer img:nth-child(3) {
  animation-delay: 8s !important;
}

/* Keyframes */
@keyframes fdwcHiFade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  33%  { opacity: 1; }
  41%  { opacity: 0; }
  100% { opacity: 0; }
}
#media-gallery .fdwc-highlights-viewer img {
  animation-play-state: running !important;
}
/* ===== NIGHT STOP FIX: STABLE HIGHLIGHTS VIEWER ===== */

#media-gallery .fdwc-highlights-viewer {
  max-width: 800px;
  margin: 0 auto;
}

#media-gallery .fdwc-highlights-viewer img {
  position: static;
  width: 100%;
  height: auto;
  max-height: 450px;
  object-fit: contain;
  opacity: 1;
  animation: none !important;
}
#media-gallery .fdwc-highlights-viewer img {
  animation: none !important;
}
/* ===== FDWC HIGHLIGHTS VIEWER ===== */

.fdwc-highlights-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
}

.fdwc-highlights-logo{
  width:90px;
  height:auto;
  flex-shrink:0;
}

/* Viewer frame */
.fdwc-highlights-viewer{
  position:relative;
  width: min(900px, 86vw);
  aspect-ratio: 16 / 9;
  overflow:hidden;
  border-radius:14px;
  background:#000;
  border:2px solid rgba(201,162,77,.95);
}

/* Slides */
.fdwc-hi-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition: opacity .6s ease-in-out;
}

.fdwc-hi-slide.active{
  opacity:1;
}
/* ===== HIGHLIGHTS: SIZE LOCK (NO MORE OVERSIZE) ===== */

.fdwc-highlights-viewer {
  position: relative;
  width: 800px;
  max-width: 90vw;
  height: 450px;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
  border: 2px solid rgba(201,162,77,.95);
}

.fdwc-hi-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.fdwc-hi-slide.show {
  display: block;
}
/* FDWC Highlights viewer: force correct size */
.fdwc-highlights-viewer{
  position:relative;
  width: min(900px, 86vw);
  height: 420px;            /* fixed height prevents oversize */
  overflow:hidden;
  border-radius:14px;
  background:#000;
  border:2px solid rgba(201,162,77,.95);
}

.fdwc-hi-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:none;             /* only one visible */
}

.fdwc-hi-slide.is-showing{
  display:block;
}
/* ===============================
   FDWC Highlights Auto-Rotation
================================ */

/* Viewer container */
.fdwc-highlights-viewer {
  width: min(900px, 86vw);
  height: 420px;
  position: relative;
  overflow: hidden;
  margin: auto;
  border: 2px solid rgba(201,162,77,.95);
  border-radius: 14px;
  background: #000;
}

/* Images */
.fdwc-gallery-image {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  object-fit: cover;
}

/* Active image */
.fdwc-gallery-image.active {
  opacity: 1;
}

/* Logos (lock size) */
.fdwc-highlights-logo {
  width: 90px;
  height: auto;
  flex-shrink: 0;
}
.fdwc-highlights-viewer{
  width: min(900px, 86vw);
  height: 420px;
  position: relative;
  overflow: hidden;
}

.fdwc-hi-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.fdwc-highlights-viewer img {
  display: none;
}
/* ===== ISOLATED HIGHLIGHTS VIEWER ===== */
#fdwc-highlights-viewer{
  width: min(900px, 86vw);
  height: 420px;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
  border: 2px solid rgba(201,162,77,.95);
}

#fdwc-highlights-viewer img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
/* ===== Rotating Highlights Carousel ===== */

.image-container{
  position: relative;
  width: 420px;
  height: 280px;
  transform-style: preserve-3d;
  transition: transform 1s ease;
  margin: 30px auto;
}

.image-container span{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(calc(var(--i) * 120deg)) translateZ(500px);
}

.image-container img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 20px 45px rgba(0,0,0,.35);
}

.btn-container{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-top:15px;
}

.btn{
  background:#c9a24d;
  color:#081b2c;
  border:none;
  padding:10px 18px;
  border-radius:6px;
  cursor:pointer;
  font-weight:600;
}
/* ===== FORCE HIGHLIGHTS VIEWER VISIBLE ===== */

.image-container{
  width: 420px !important;
  height: 280px !important;
  margin: 40px auto !important;
  position: relative !important;
  display: block !important;
}

.image-container span{
  position: absolute;
  inset: 0;
}

.image-container img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ===== FDWC Highlights 3D Carousel (FINAL) ===== */

.image-container{
  position: relative;
  width: 420px;
  height: 280px;
  margin: 40px auto;
  transform-style: preserve-3d;
  transition: transform 1s ease;
  perspective: 1200px;
}

.image-container span{
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* Position slides in a ring */
.image-container span:nth-child(1){
  transform: rotateY(0deg) translateZ(500px);
}
.image-container span:nth-child(2){
  transform: rotateY(120deg) translateZ(500px);
}
.image-container span:nth-child(3){
  transform: rotateY(240deg) translateZ(500px);
}

.image-container img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 20px 45px rgba(0,0,0,.4);
}
/* ===== FDWC Highlights Flat Slideshow ===== */

#fdwcHighlightsFlat{
  width: min(900px, 86vw);
  height: 420px;
  margin: 40px auto;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
  border: 2px solid rgba(201,162,77,.95);
}

#fdwcHighlightsFlat img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}

#fdwcHighlightsFlat img.active{
  opacity: 1;
}
#fdwcHighlightsFlat img {
  transition: opacity 1s ease !important;
}
/* COMMUNITY MOMENTS LAYOUT */
.fdwc-highlights-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 30px;
}

/* CENTER VIEWER */
.fdwc-gallery-iframe {
  flex: 1;
  width: 100%;
  max-width: 900px;
  height: 740px;
  border: none;
  display: block;
}

/* SIDE LOGOS */
.fdwc-highlights-logo {
  width: 90px;
  height: auto;
  flex-shrink: 0;
  opacity: 0.95;
}
 {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
}

/* IFRAME */
.fdwc-highlights-iframe {
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: 18px;
  background: black;
}

/* LOGOS */
.fdwc-highlights-logo {
  width: 110px;
  opacity: 0;
  transition: all 1s ease;
}

.fdwc-highlights-logo.left {
  transform: translateX(-60px);
}

.fdwc-highlights-logo.right {
  transform: translateX(60px);
}

/* When visible */
.fdwc-highlights-logo.show {
  opacity: 1;
  transform: translateX(0);
}
/* Reveal stagger FIX */
.reveal-stagger {
  opacity: 0;
  transform: translateY(30px);
}

.reveal-stagger.in-view {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
/* Never hide critical UI */
.countdown-timer {
  opacity: 1 !important;
  transform: none !important;
}

.back-to-top {
  opacity: 1 !important;
  pointer-events: auto !important;
  display: flex !important;
  transform: none !important;
  z-index: 99999 !important;
}
html, body {
  transform: none !important;
}
.back-to-top {
  position: fixed;
  inset: auto 30px 30px auto;
  z-index: 100000;
}
.back-to-top {
  position: fixed !important;
  bottom: 30px !important;
  right: 30px !important;
  z-index: 2147483647 !important; /* max safe */
  opacity: 1 !important;
  display: flex !important;
  pointer-events: auto !important;
}
.acts-fade{
  opacity:0 !important;
  transform:translateY(10px);
  animation: actsFade 0.9s ease forwards;
  animation-delay: 0.8s;
}
@keyframes actsFade{
  to{ opacity:1; transform:translateY(0); }
}
.hero-balanced .acts-inline{
  opacity:0 !important;
  transform:translateY(10px) !important;
  animation:actsFade .9s ease forwards !important;
  animation-delay:.8s !important;
}

@keyframes actsFade{
  to{opacity:1; transform:translateY(0);}
}
#youth-highlights .section-header,
#youth-highlights p{
  color:#ffffff;
  text-align:center;
}

#youth-highlights p{
  max-width: 720px;
  margin: 0 auto 26px;
}
#youth-highlights .fdwc-highlights-row{
  align-items: center;
}
#youth-highlights iframe{
  aspect-ratio: auto !important;
  height: 620px !important;
}

/* FORCE VBS SECTION TO MATCH HERO NAVY */
#vbs-highlights.panel,
#vbs-highlights.parallax-section {
  background: #0b1f3a !important;
}
#vbs-highlights::before,
#vbs-highlights::after {
  content: none !important;
  display: none !important;
}

/* ===============================
   FORCE VBS SECTION TO MATCH HERO
================================ */
#vbs-highlights {
  background: linear-gradient(
    180deg,
    #0b1f3a 0%,
    #0b1f3a 100%
  ) !important;
  
  #vbs-highlights .section-header {
  color: #ffffff !important;
}
#vbs-highlights p {
  color: #ffffff !important;
  text-align: center !important;
  max-width: 720px;
  margin: 0 auto 32px;
}

/* 🔥 FORCE VBS SECTION — DEBUG OVERRIDE 🔥 */
body #vbs-highlights,
body #vbs-highlights.panel,
body #vbs-highlights.parallax-section {
  background: #0b1f3a !important;
  background-image: none !important;
}

/* kill ALL overlays */
body #vbs-highlights::before,
body #vbs-highlights::after,
body #vbs-highlights *::before,
body #vbs-highlights *::after {
  content: none !important;
  display: none !important;
}

/* force text visibility */
body #vbs-highlights h2,
body #vbs-highlights .section-header {
  color: #ffffff !important;
}

body #vbs-highlights p {
  color: #ffffff !important;
  text-align: center !important;
  max-width: 720px;
  margin: 0 auto 32px !important;
}
/* VBS TEXT FIX — SIMPLE & DIRECT */
#vbs-highlights .section-header {
  color: #ffffff;
}

#vbs-highlights p {
  color: #ffffff;
  text-align: center;
}
/* FORCE VBS TEXT COLOR & ALIGNMENT */
#vbs-highlights h2,
#vbs-highlights .section-header {
  color: #ffffff !important;
}

#vbs-highlights p {
  color: #ffffff !important;
  text-align: center !important;
}
/* ===============================
   VBS PAGE — UNIFIED BACKGROUND
================================ */

/* whole page */
body.vbs-page {
  background: #0b1f3a !important;
}

/* hero section */
body.vbs-page .simple-hero {
  background: #0b1f3a !important;
}

/* main content area */
body.fun-day-page .simple-content {
  background: none !important;
}


/* highlights panel */
body.vbs-page #vbs-highlights {
  background: #0b1f3a !important;
}

/* REMOVE any panel gradients or overlays */
body.vbs-page #vbs-highlights::before,
body.vbs-page #vbs-highlights::after {
  display: none !important;
  content: none !important;
}
body.vbs-page section {
  background-color: #0b1f3a !important;
}
/* FDWC NAVY */
body.vbs-page,
body.vbs-page .simple-hero,
body.vbs-page .simple-content,
body.vbs-page section,
body.vbs-page #vbs-highlights {
  background: #0b1f3a !important;
  background-image: none !important;
}
/* =========================================
   VBS PAGE — MATCH HERO BACKGROUND EXACTLY
========================================= */

/* define hero background as the source */
body.vbs-page .simple-hero {
  background: inherit;
}

/* force ALL other sections to use SAME background */
body.vbs-page,
body.vbs-page .simple-content,
body.vbs-page #vbs-highlights,
body.vbs-page section {
  background: inherit !important;
}

/* remove gradients & overlays */
body.vbs-page .panel,
body.vbs-page .parallax-section {
  background-image: none !important;
}

body.vbs-page .panel::before,
body.vbs-page .panel::after,
body.vbs-page .parallax-section::before,
body.vbs-page .parallax-section::after {
  content: none !important;
  display: none !important;
}
/* Space between VBS flyer and registration button */
.flyer-placeholder {
  margin-bottom: 40px;
}
/* Move VBS flyer UP without moving button */
.flyer-placeholder {
  margin-top: -80px;
}
.flyer-placeholder img {
  max-height: 520px;
  width: auto;
  display: block;
  margin: 0 auto;
}
.flyer-placeholder img {
  transform: translateY(-80px);
}
/* Remove dotted border around VBS flyer */
.flyer-placeholder {
  border: none !important;
  outline: none !important;
}

.flyer-placeholder img {
  border: none !important;
  outline: none !important;
}

/* Row layout for viewer + logos */
.fdwc-highlights-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 40px;
}

/* Logos on sides */
.fdwc-highlights-logo {
  width: 90px;
  max-width: 12vw;
  opacity: 0.95;
}

/* Center iframe viewer */
.fdwc-gallery-iframe {
  width: 100%;
  max-width: 900px;
  height: 740px;
  border: none;
  display: block;
}
/* Horizontal layout for logos + viewer */
.fdwc-highlights-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
}

/* Side logos */
.fdwc-highlights-logo {
  width: 90px;
  max-width: 12vw;
  opacity: 0.95;
}

/* Viewer iframe */
.fdwc-gallery-iframe {
  width: 100%;
  max-width: 900px;
  height: 740px;
  border: none;
  display: block;
}

/* FIX gallery iframe inside flex row */
.fdwc-gallery-iframe {
  flex: 1;
  width: 100%;
  max-width: 900px;
  height: 740px;
  border: none;
  display: block;
}

/* COMMUNITY MOMENTS LAYOUT FIX */
.fdwc-highlights-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

/* LOGOS */
.fdwc-highlights-logo {
  width: 90px;
  height: auto;
  flex: 0 0 auto;
  opacity: 0.95;
}

/* VIEWER — CONSTRAINED */
.fdwc-gallery-iframe {
  flex: 0 1 900px;   /* 👈 THIS IS THE FIX */
  width: 900px;
  height: 740px;
  border: none;
  display: block;
  background: #000;
}
.gallery-wrapper {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

/* KEEP GALLERY SIZE */
.gallery-frame {
  width: 100%;
  height: 740px;
  border: none;
  display: block;
}

/* LOGOS */
.side-logo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 140px;     /* ⬅️ SMALLER */
  max-width: 18vw;  /* ⬅️ RESPONSIVE SAFETY */
  height: auto;
  opacity: 0.25;    /* ⬅️ SUBTLE, NOT DOMINANT */
  pointer-events: none;
}


/* LEFT / RIGHT POSITIONS */
.left-logo {
  left: -200px;
}

.right-logo {
  right: -200px;
}

/* MOBILE SAFETY */
@media (max-width: 1100px) {
  .side-logo {
    display: none;
  }
}
/* REMOVE LIGHT BACKGROUND BEHIND GALLERY */
.community-moments,
.community-moments .container,
.community-moments .simple-content {
  background: transparent !important;
}
/* 🔥 HARD RESET: REMOVE BACKGROUND BEHIND FAMILY & FRIENDS GALLERY */
body.fun-day-page section,
body.fun-day-page .simple-content,
body.fun-day-page .community-moments,
body.fun-day-page .community-moments * {
  background: transparent !important;
}
/* 💀 FINAL OVERRIDE */
body.fun-day-page div {
  background-color: transparent !important;
}
/* CENTER VENDOR / EVENT LINKS */
.fun-day-page .event-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 30px;
  text-align: center;
}
/* FORCE CENTER VENDOR LINKS – FUN DAY PAGE */
.fun-day-page a.secondary-btn,
.fun-day-page .vendor-links,
.fun-day-page .event-links {
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  gap: 24px;
  width: 100%;
  margin: 30px auto 0;
  text-align: center;
}

/* if links are naked anchors (purple text) */
.fun-day-page a[href*="Vendor"],
.fun-day-page a[href*="Event"] {
  display: inline-block;
  margin: 0 12px;
}
/* FUN DAY – CENTER VENDOR LINKS */
.fun-day-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 40px auto;
  width: 100%;
}

.fun-day-links a {
  text-align: center;
}
/* CENTER VENDOR LINKS – FINAL FIX */
.fun-day-page .event-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 40px auto 0;
  width: 100%;
  text-align: center;
}

.fun-day-page .event-links a {
  display: inline-block;
}
/* REMOVE light blue background behind gallery viewer */
.community-moments,
.simple-content,
.simple-content > div {
  background: transparent !important;
}
/* Remove background pattern lines */
.community-moments::before,
.simple-content::before {
  display: none !important;
}
.community-moments {
  background-color: inherit !important;
}
/* 🔥 KILL BACKGROUND OVERLAY BEHIND FUN DAY GALLERY */
body.fun-day-page::before,
body.fun-day-page main::before,
body.fun-day-page .simple-content::before,
body.fun-day-page .panel::before {
  content: none !important;
  display: none !important;
}
/* 📱 MOBILE FIX FOR GALLERY VIEWER */
@media (max-width: 768px) {

  /* Let the section breathe */
  .community-moments {
    padding: 20px 0;
  }

  /* Make iframe responsive */
  .gallery-frame {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;   /* 🔑 THIS fixes mobile */
  }

  /* Remove any forced heights */
  iframe {
    max-height: none !important;
  }
}
/* Allow touch scrolling inside iframe area */
.gallery-frame {
  touch-action: pan-y;
}




/* ===========================
   MOBILE PARALLAX FIX
=========================== */
@media (max-width: 768px) {

  .parallax,
  .parallax-section {
    background-attachment: scroll !important;
    background-position: center top;
    background-size: cover;
    min-height: 60vh;
  }

}
@media (max-width: 768px) {

  .parallax-section {
    height: auto;
    padding: 80px 0;
  }

}

/* ===========================
   MOBILE STAFF IMAGE FIX
=========================== */
@media (max-width: 768px) {

  .ministerial-staff img,
  .staff-section img,
  .parallax img {
    width: 100% !important;
    height: auto !important;
    max-height: 60vh !important;
    object-fit: cover !important;
  }

}
@media (max-width: 768px) {

  .ministerial-staff,
  .staff-section,
  .parallax-section {
    background-attachment: scroll !important;
    background-size: cover !important;
    min-height: auto !important;
    padding: 80px 0 !important;
  }

}

/* =========================================================
   FDWC MOBILE HAMBURGER NAV — SINGLE SOURCE OF TRUTH
========================================================= */

/* ===== Desktop (default) ===== */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--brand);
  padding: 0 22px;
  z-index: 1000;
}

.site-nav .main-nav {
  display: flex;
  gap: 20px;
}

.site-nav .nav-toggle {
  display: none;
}

/* ===== Mobile ===== */
@media (max-width: 768px) {

  .site-nav {
    flex-wrap: wrap;
    height: auto;
    padding-bottom: 10px;
  }

  /* Show hamburger */
  .site-nav .nav-toggle {
    display: block;
    position: absolute;
    right: 16px;
    top: 14px;
    font-size: 28px;
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    z-index: 9999;
  }

  /* Hide menu until toggled */
  .site-nav .main-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    background: #0b1d4d;
    margin-top: 12px;
  }

  /* Show menu */
  .site-nav .main-nav.active {
    display: flex;
  }

  /* Mobile links */
  .site-nav .main-nav a {
    padding: 14px;
    margin-left: 0;
    text-align: center;
    font-size: 18px;
    color: #ffffff;
    border-bottom: 1px solid rgba(212,175,55,0.25);
  }
}
/* =========================================
   MINISTERIAL STAFF — FORCE HEADING SIZE
========================================= */

/* Desktop */
.parallax-staff .staff-card h3,
.parallax-staff .staff-card h4,
.parallax-staff .staff-card .staff-name {
  font-size: 18px !important;
  line-height: 1.3 !important;
}

/* Mobile */
@media (max-width: 768px) {
  .parallax-staff .staff-card h3,
  .parallax-staff .staff-card h4,
  .parallax-staff .staff-card .staff-name {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .parallax-staff .staff-card h3,
  .parallax-staff .staff-card h4,
  .parallax-staff .staff-card .staff-name {
    font-size: 14px !important;
  }
}
/* ============================
   MINISTERIAL STAFF — TEXT SIZE FIX
============================ */

.staff-card .staff-name {
  font-size: 20px !important;   /* desktop */
  line-height: 1.25 !important;
  font-weight: 600;
  text-align: center;
}

/* Mobile adjustment */
@media (max-width: 768px) {
  .staff-card .staff-name {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }
}
/* ============================
   GIVE SECTION LOGO
============================ */

.give-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.give-logo {
  width: 90px;          /* adjust if needed */
  height: auto;
  display: block;
}

.give-heading span {
  display: block;
}

/* 🚨 ABSOLUTE OVERRIDE — REMOVE CIRCLES EVERYWHERE */
.ministry-team *,
.ministry-team img,
.ministry-team figure img,
.ministry-team-grid img {
  border-radius: 0 !important;
}
/* 🚨 NUCLEAR MOBILE FIX — REMOVE ALL CIRCLES */
@media (max-width: 768px) {

  .ministry-team img,
  .ministry-team figure,
  .ministry-team .team-member,
  .ministry-team .team-member-img {
    border-radius: 0 !important;
    clip-path: none !important;
    aspect-ratio: unset !important;
    overflow: visible !important;
  }

  .team-member-img {
    width: 100%;
    height: 420px !important;
    object-fit: cover;
  }
}
/* ✅ DESKTOP GALLERY HEIGHT + GOLD FRAME */
.ministry-team-grid {
  max-width: 1200px;
  margin: 30px auto;
  padding: 20px;

  border: 2px solid rgba(212,175,55,0.65);
  border-radius: 14px;
  background: rgba(0,0,0,0.25);
}

.team-member-img {
  height: 480px;
}
/* 🚨 FORCE WORSHIP TEAM TO NEVER BE CIRCLES (MOBILE) */
@media (max-width: 768px) {

  .ministry-team-grid,
  .ministry-team figure.team-member {
    border-radius: 0 !important;
    overflow: visible !important;
    aspect-ratio: auto !important;
  }

  .ministry-team figure.team-member {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .ministry-team figure.team-member img {
    border-radius: 0 !important;
    clip-path: none !important;
    width: 100% !important;
    height: 420px !important;
    object-fit: cover;
    display: block;
  }
}

/* ===============================
   FORCE GOLD DIVIDER (VISIBLE)
=============================== */

.gold-divider-tight {
  display: block;
  width: 180px;
  height: 4px;
  margin: 8px auto 12px;

  background-color: #d4af37; /* SOLID GOLD */
  border-radius: 4px;

  box-shadow: 0 0 10px rgba(212,175,55,0.8);
  opacity: 1 !important;
}
/* =====================================
   GOLD DIVIDER — TIGHT SPACING
===================================== */

.gold-divider-tight {
  width: 160px;
  height: 2px;
  margin: 10px auto 12px; /* tight gap */
  background: linear-gradient(
    90deg,
    rgba(212,175,55,0),
    #d4af37,
    rgba(212,175,55,0)
  );
  border-radius: 2px;
}

/* Mobile */
@media (max-width: 768px) {
  .gold-divider-tight {
    width: 120px;
    margin: 8px auto 10px;
  }
}
/* ===============================
   HARD TEST DIVIDER (DEBUG)
=============================== */

/* ===============================
   GOLD DIVIDER — TIGHT SPACING
=============================== */

.gold-divider-tight {
  display: block;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    90deg,
    #b58e00,
    #ffd700,
    #b58e00
  );
  margin: 14px 0;
}
/* Tighten space between gallery and main content */
.gallery-section,
.youth-highlights,
.ministry-gallery {
  margin-bottom: 12px !important;
  padding-bottom: 0 !important;
}

.main-content,
.ministry-main,
.youth-main {
  margin-top: 12px !important;
  padding-top: 0 !important;
}

/* Mobile extra tightening */
@media (max-width: 768px) {
  .gold-divider-tight {
    margin: 10px 0;
  }

  .main-content,
  .ministry-main,
  .youth-main {
    margin-top: 8px !important;
  }
}
/* ======================================
   FINAL GOLD DIVIDER — FORCE OVERRIDE
====================================== */

.gold-divider-tight {
  display: block !important;
  width: 100% !important;
  height: 4px !important;

  background: linear-gradient(
    90deg,
    #b58e00,
    #ffd700,
    #b58e00
  ) !important;

  margin: 24px 0 !important;   /* middle spacing */
  padding: 0 !important;
  border: none !important;
}
/* Space control around gallery + main */
.gallery-section {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.main-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Mobile tightening */
@media (max-width: 768px) {
  .gold-divider-tight {
    margin: 18px 0 !important;
  }
}
/* ===============================
   FINAL GOLD DIVIDER — CENTERED
=============================== */

.fdwc-gold-divider {
  width: 140px;                 /* ⬅ controls length */
  height: 4px;
  margin: 28px auto;            /* ⬅ centers it */
  background: linear-gradient(
    90deg,
    #b58e00,
    #ffd700,
    #b58e00
  );
  border-radius: 999px;
}

/* Mobile tweak */
@media (max-width: 768px) {
  .fdwc-gold-divider {
    width: 100px;
    margin: 22px auto;
  }
}
/* ===== FORCE GOLD DIVIDER (DEBUG) ===== */
.fdwc-gold-divider {
  display: block !important;
  width: 160px !important;
  height: 6px !important;
  margin: 30px auto !important;

  background: gold !important;
  color: gold !important;

  text-align: center;
  font-size: 10px;
}
/* ===== FORCE GOLD DIVIDER — ABSOLUTE OVERRIDE ===== */
div.fdwc-gold-divider {
  display: block !important;
  width: 180px !important;
  height: 8px !important;
  margin: 40px auto !important;

  background-color: #d4af37 !important;
  border: none !important;
  box-shadow: 0 0 0 2px #d4af37 !important;
}
/* =========================================
   GOLD DIVIDER — YOUTH SAFE (UNOVERRIDABLE)
========================================= */

.fdwc-gold-divider-wrapper {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 32px 0 !important;
}

.fdwc-gold-divider-wrapper > .fdwc-gold-divider {
  display: block !important;
  width: 140px !important;
  height: 4px !important;

  background: linear-gradient(
    90deg,
    #b58e00,
    #ffd700,
    #b58e00
  ) !important;

  border-radius: 999px !important;
}
/* ===========================
   GOLD DIVIDER — STANDARD
=========================== */
.gold-divider {
  width: 120px;
  height: 4px;
  margin: 30px auto;
  background: linear-gradient(90deg, #b58e00, #ffd700, #b58e00);
  border-radius: 4px;
}
/* ===========================
   GOLD DIVIDER — POSITION FIX
=========================== */
.gold-divider {
  margin: 18px auto;   /* ⬅ tighter & centered */
}
/* =====================================
   YOUTH PAGE — SECTION GOLD BAR POSITION
===================================== */

/* Move gold bar closer to gallery */
#youth-highlights + .section-accent,
#youth-highlights + .section-divider,
#youth-highlights + .gold-divider,
#youth-highlights + .divider {
  margin-top: 10px !important;
  margin-bottom: 14px !important;
}
/* Tighten space below youth gallery */
#youth-highlights {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* Pull main content upward */
.youth-main,
.about-youth,
.main-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
@media (max-width: 768px) {
  #youth-highlights + .section-accent,
  #youth-highlights + .section-divider,
  #youth-highlights + .gold-divider,
  #youth-highlights + .divider {
    margin-top: 6px !important;
    margin-bottom: 10px !important;
  }
}
/* =====================================
   YOUTH PAGE — MOVE GOLD BAR UP
   (Gold bar is attached to About section)
===================================== */

/* Pull About section UP toward gallery */
.about-youth,
.youth-about,
#about-youth,
.about-section {
  margin-top: -40px !important;
}
@media (max-width: 768px) {
  .about-youth,
  .youth-about,
  #about-youth,
  .about-section {
    margin-top: -28px !important;
  }
}
/* =====================================
   YOUTH PAGE — GOLD BAR LENGTH
===================================== */

.about-youth::before,
.youth-about::before,
#about-youth::before,
.about-section::before {
  width: 240px !important;   /* ⬅ longer bar */
  max-width: 70% !important;
}
/* =====================================
   YOUTH PAGE — MOVE GOLD BAR UP
===================================== */

.about-youth,
.youth-about,
#about-youth,
.about-section {
  margin-top: -48px !important; /* ⬅ pulls bar UP */
}
@media (max-width: 768px) {
  .about-youth,
  .youth-about,
  #about-youth,
  .about-section {
    margin-top: -32px !important;
  }

  .about-youth::before,
  .youth-about::before,
  #about-youth::before,
  .about-section::before {
    width: 120px !important;
  }
}
/* =====================================
   YOUTH PAGE — FORCE GOLD DIVIDER MOVE
===================================== */

.gold-divider,
.section-divider,
.divider {
  width: 180px !important;          /* longer bar */
  height: 3px;
  background: linear-gradient(90deg, #b58e00, #ffd700, #b58e00);

  margin: 0 auto;
  transform: translateY(-60px) !important; /* ⬅ MOVE UP */
}
@media (max-width: 768px) {
  .gold-divider,
  .section-divider,
  .divider {
    width: 130px !important;
    transform: translateY(-40px) !important;
  }
}
/* =====================================
   YOUTH — GOLD DIVIDER (POSITION + SIZE)
   Targets: .fdwc-gold-divider-wrapper > .fdwc-gold-divider
===================================== */

.fdwc-gold-divider-wrapper{
  display: flex;
  justify-content: center;

  /* move the whole divider UP */
  margin-top: -60px;      /* ⬅ increase (more negative) to go higher */
  margin-bottom: 18px;    /* space before the main content */
}

.fdwc-gold-divider{
  display: block;
  width: 260px;           /* ⬅ longer bar */
  height: 4px;
  border-radius: 999px;

  background: linear-gradient(90deg, #b58e00, #ffd700, #b58e00);
  box-shadow: 0 10px 22px rgba(0,0,0,0.45);
}

/* Mobile */
@media (max-width: 768px){
  .fdwc-gold-divider-wrapper{
    margin-top: -40px;    /* ⬅ move up on phone */
    margin-bottom: 14px;
  }

  .fdwc-gold-divider{
    width: 190px;         /* ⬅ slightly shorter on phone */
    height: 3px;
  }
}
/* =====================================
   YOUTH HIGHLIGHTS — GOLD DIVIDER
===================================== */

#youth-highlights {
  position: relative;
  padding-bottom: 60px; /* space for divider */
}

#youth-highlights .fdwc-gold-divider-wrapper {
  position: absolute;
  left: 50%;
  bottom: 12px;              /* ⬅ controls vertical position */
  transform: translateX(-50%);
  z-index: 50;
}

#youth-highlights .fdwc-gold-divider {
  display: block;
  width: 320px;              /* ⬅ bar length */
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #b58e00,
    #ffd700,
    #b58e00
  );
  box-shadow: 0 8px 18px rgba(0,0,0,0.45);
}

/* Mobile */
@media (max-width: 768px) {
  #youth-highlights .fdwc-gold-divider {
    width: 220px;
    height: 3px;
  }

  #youth-highlights .fdwc-gold-divider-wrapper {
    bottom: 8px;
  }
}
/* =====================================
   YOUTH PAGE — MOBILE SPACING FIX
===================================== */

@media (max-width: 768px) {

  /* Tighten space under hero */
  .hero,
  .page-hero,
  .simple-hero,
  .parallax-hero {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Tighten space above gallery */
  #youth-highlights {
    margin-top: 0 !important;
    padding-top: 8px !important;
  }

  /* Remove panel/parallax extra spacing */
  #youth-highlights.panel,
  #youth-highlights.parallax-section {
    padding-top: 4px !important;
    padding-bottom: 20px !important;
  }

  /* Tighten heading spacing */
  #youth-highlights h2 {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
  }

  #youth-highlights p {
    margin-bottom: 12px !important;
  }
}

/* =====================================
   YOUTH PAGE — MOBILE HERO → GALLERY GAP
===================================== */
@media (max-width: 768px) {

  /* Kill extra space under hero */
  .hero,
  .page-hero,
  .simple-hero,
  .parallax-hero {
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
  }

  /* Tighten youth highlights top */
  #youth-highlights {
    margin-top: 0 !important;
    padding-top: 0px !important;
  }

  /* Remove panel/parallax padding inflation */
  #youth-highlights.panel,
  #youth-highlights.parallax-section {
    padding-top: 0px !important;
    padding-bottom: 16px !important;
  }

  /* Tighten heading spacing */
  #youth-highlights .section-header {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
  }

  #youth-highlights p {
    margin-bottom: 8px !important;
  }

  /* Pull iframe up slightly */
  #youth-highlights iframe {
    margin-top: 6px !important;
  }
}

/* =====================================
   BULLETIN — MOBILE SIZE FIX
===================================== */
@media (max-width: 768px) {

  /* Bulletin container */
  .bulletin,
  .bulletin-wrapper,
  .bulletin-embed,
  .bulletin-viewer {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px;
    box-sizing: border-box;
  }

  /* Bulletin iframe or PDF */
  .bulletin iframe,
  .bulletin-viewer iframe,
  .bulletin embed,
  .bulletin object {
    width: 100% !important;
    max-width: 100% !important;
    height: 75vh; /* good mobile height */
    border: none;
  }

  /* If bulletin is an image */
  .bulletin img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }
}
/* ============================
   MOBILE PARALLAX FIX
============================ */
@media (max-width: 768px) {
  .parallax-section {
    min-height: 55vh !important;   /* reduce height */
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center center !important;
  }
}
/* ============================
   HIGHLIGHTS LOGO FIX (MOBILE)
============================ */
@media (max-width: 768px) {
  .fdwc-highlights-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .fdwc-highlights-logo {
    max-width: 90px;
    height: auto;
    opacity: 0.85;
  }
}
@media (max-width: 768px) {

  .fdwc-highlights-row {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .fdwc-highlights-logo {
    width: 120px;
    max-width: 60%;
    height: auto;
    opacity: 0.9;
  }

}

/* ============================
   MOBILE — FIX PARALLAX SCALE
============================ */
@media (max-width: 768px) {

  .parallax-section {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center top !important;
    min-height: auto !important;
    padding-top: 60px;
    padding-bottom: 60px;
  }

}
/* ============================
   HIGHLIGHTS — MOBILE LOGO FIX
============================ */
@media (max-width: 768px) {

  .fdwc-highlights-row {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .fdwc-highlights-logo {
    max-width: 120px;
    width: 100%;
    opacity: 0.85;
  }

}
/* WOMEN'S MINISTRY AUTO SLIDER — FIXED */
.ministry-team-grid {
  position: relative;
  overflow: hidden;
}

.team-member {
  position: relative;
  height: 520px;            /* 🔒 lock the viewer height */
}

.team-member-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;             /* 🔑 force same height */
  object-fit: cover;        /* 🔑 NOT contain */

  opacity: 0;
  transition: opacity 1s ease;
}

.team-member-img.active {
  opacity: 1;
}
/* ============================
   MINISTRY GALLERY IFRAME SIZE
============================ */

.ministry-gallery-iframe {
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 9;   /* 🔥 keeps images perfect */
  height: auto;
  border: none;
  display: block;
  margin: 0 auto;
}

/* Mobile */
@media (max-width: 768px) {
  .ministry-gallery-iframe {
    max-width: 100%;
  }
}
/* ============================
   MINISTRY GALLERY CONTAINER
============================ */

.ministry-team-grid {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

.fdwc-highlights-viewer {
  width: 100%;
  max-width: 1280px;   /* 🔥 THIS is the key */
}

/* iframe inside viewer */
.fdwc-highlights-viewer iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: none;
}

/* Mobile */
@media (max-width: 768px) {
  .fdwc-highlights-viewer {
    max-width: 100%;
  }
}
/* MOBILE — make Women's gallery same size as Worship */
@media (max-width: 768px) {
  .ministry-team iframe {
    height: 520px;   /* ⬅️ matches Worship viewer feel */
    max-width: 100%;
  }
}
/* DESKTOP — slightly smaller gallery viewer */
.ministry-team iframe {
  height: 520px;          /* ⬅️ smaller than before */
  max-width: 780px;       /* keeps it elegant */
}

/* MOBILE — keep same size as Worship */
@media (max-width: 768px) {
  .ministry-team iframe {
    height: 520px;
    max-width: 100%;
  }
}
/* ✅ WOMEN'S GALLERY — make images fit inside viewer (no zoom/crop) */
.fdwc-highlights-viewer img,
.ministry-viewer img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;  /* KEY: fit image inside frame */
  display: block;
  background: #000;
}
/* ✅ WOMEN'S VIEWER FRAME SIZE */
.fdwc-highlights-viewer,
.ministry-viewer {
  width: 100%;
  max-width: 900px;
  height: 740px;                 /* match youth */
  margin: 0 auto;
  overflow: hidden;
  background: #000;
  border-radius: 14px;
}
@media (max-width: 768px) {
  .fdwc-highlights-viewer,
  .ministry-viewer {
    max-width: 92%;
    height: 420px;               /* similar to worship phone viewer */
  }
}

/* =====================================
   FORCE WOMEN'S GALLERY TO MATCH FAMILY & FRIENDS
===================================== */

.ministry-team iframe {
  max-width: 900px !important;
  height: 740px !important;
}

@media (max-width: 768px) {
  .ministry-team iframe {
    max-width: 100% !important;
    height: 520px !important; /* same mobile feel */
  }
}
/* FIX: Prevent bio text from scrolling behind image (mobile) */
@media (max-width: 768px) {

  .minister-card,
  .minister-profile,
  .minister-bio-wrapper {
    display: flex;
    flex-direction: column;
  }

  .minister-photo,
  .minister-image,
  .minister-headshot {
    position: relative !important;
    float: none !important;
    margin: 0 auto 18px;
    z-index: 2;
  }

  .minister-bio,
  .minister-text,
  .minister-content {
    position: relative;
    z-index: 1;
    clear: both;
  }
}
/* MATCH ABOUT US LIST STYLING */
.ministry-card ul {
  color: #ffffff;
  list-style: disc;
  margin: 16px 0 24px 24px;
}

.ministry-card li {
  color: #ffffff;
  line-height: 1.6;
  margin-bottom: 10px;
}

/* Optional: gold bullets (same style language) */
.ministry-card li::marker {
  color: #d4af37;
}
/* REMOVE light blue background under gallery */
.community-moments,
.fdwc-highlights-row,
.panel.parallax-section {
  background: transparent !important;
}
/* Tighten space below gallery */
.community-moments {
  padding-bottom: 20px !important;
  margin-bottom: 0 !important;
}

/* Tighten space above cards */
.ministry-main {
  margin-top: 20px !important;
}
/* FORCE REMOVE blue background under Community Moments */
section.community-moments,
section.community-moments *,
#family-friends,
#family-friends .panel,
.panel.parallax-section {
  background-color: transparent !important;
  background-image: none !important;
}
/* REMOVE excess space under gallery */
section.community-moments {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* PULL CONTENT UP */
.ministry-main {
  margin-top: 30px !important;
}

/* FIX: remove blue panel under Family & Friends gallery */
.community-moments,
.community-moments .fdwc-highlights-row,
.community-moments.panel,
.community-moments.parallax-section {
  background: transparent !important;
  padding-bottom: 0 !important;
}
/* FORCE REMOVE BLUE BLOCK UNDER FAMILY & FRIENDS GALLERY */
.community-moments,
.community-moments * {
  background: transparent !important;
}

.community-moments {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* FIX excess blue space under Family & Friends gallery */
.community-moments {
  padding-bottom: 0 !important;
}

/* Remove extra spacing below the viewer */
.community-moments .controls {
  margin-bottom: 0 !important;
}

/* Tighten spacing before the next card */
.community-moments + .ministry-main {
  margin-top: 30px !important;
}
@media (max-width: 768px) {
  .community-moments {
    padding-bottom: 0 !important;
  }

  .community-moments .controls {
    margin-bottom: 10px !important;
  }
}

/* ============================
   iOS SAFARI PARALLAX FIX
============================ */

/* Target iPhones & iPads */
@supports (-webkit-touch-callout: none) {

  .parallax,
  .parallax-section,
  .ministerial-parallax {
    background-attachment: scroll !important;
    background-position: center top !important;
    background-size: cover !important;
  }
}
@supports (-webkit-touch-callout: none) {
  .ministerial-parallax {
    min-height: 60vh !important;
  }
}
/* ==============================
   HARD OVERRIDE — BULLETIN PAGE
============================== */

.panel.theme-white.inner-page {
  background: #ffffff !important;
}

.panel.theme-white.inner-page * {
  color: #0b1f3a !important;
}

.panel.theme-white.inner-page .gold-underline-section {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #0b1f3a !important;
  color: #ff0000 !important;

}
/* ==============================
   BULLETIN PAGE — FINAL FIX
============================== */

.panel.theme-white.inner-page {
  background: #ffffff !important;
}

.panel.theme-white.inner-page * {
  color: #0b1f3a !important;
  -webkit-text-fill-color: #0b1f3a !important;
  mix-blend-mode: normal !important;
}

/* Header-specific cleanup */
.panel.theme-white.inner-page .gold-underline-section {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #0b1f3a !important;
  mix-blend-mode: normal !important;
  text-shadow: none !important;
}
/* Disable blend modes on inner content pages */
.inner-page * {
  mix-blend-mode: normal;
}

/* FIX BULLETIN TITLE VISIBILITY */
.bulletin-section h1 {
  color: #ffffff !important;
}
/* BULLETIN TITLE — FORCE VISIBLE TEXT */
.section-header.bulletin-title {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;

  color: #0f1322 !important;
  -webkit-text-fill-color: #0f1322 !important;
}

/* BULLETIN TITLE — FORCE VISIBLE TEXT */
.section-header.bulletin-title {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;

  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}

/* BULLETIN PAGE — FIX TITLE COLOR */
.bulletin-section .bulletin-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* ===== BULLETIN TITLE — HARD RESET ===== */
.bulletin-section h2.section-header.bulletin-title {
  /* kill gradient/clip text */
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;

  /* force visible text */
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  /* ensure it isn't hidden */
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 2 !important;
}
/* ==================================
   BULLETIN PAGE — FORCE TITLE VISIBLE
================================== */

.bulletin-section h2.section-header.bulletin-title {
  /* disable hero/gradient text */
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;

  /* force visible color */
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  /* safety */
  opacity: 1 !important;
}

/* MOBILE FIX FOR BULLETIN TITLE */
@media (max-width: 768px) {
  .bulletin-title {
    font-size: 28px !important;
  }
}