/* =========================================================
   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
========================================================= */
/* =========================================================
   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 BUTTON
========================================================= */
.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);
  transition:opacity .25s, transform .25s;
}

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

.center-intro {
  text-align: center !important;
  width: 100%;
  display: block;
  margin: 0 auto 40px auto;
  color: #ffffff !important;
}

/* 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;
}
/* =========================================
   DARK THEME PANEL BACKGROUND
========================================= */
.theme-deep {
  background: radial-gradient(circle at top,
      #0b1224 0%,
      #081426 40%,
      #050d1a 100%);
  color: #ffffff;
  padding: 80px 0;  /* padding so content isn't flush against edges */
}
.calendar-section {
  background: linear-gradient(to bottom, #ffffff 0%, #fbf8ef 100%);
  padding: 100px 20px;
  color: #1a1a1a;
}

.calendar-title {
  text-align: center;
  font-size: clamp(34px, 4vw, 44px);
  font-weight: 700;
  color: #212744;
  margin-bottom: 10px;
}

.calendar-logo {
  width: clamp(60px, 7vw, 90px);
  vertical-align: middle;
  margin-right: 10px;
}

.calendar-subtext {
  text-align: center;
  color: #444;
  font-size: 16px;
  margin-bottom: 20px;
}

.calendar-divider {
  width: 140px;
  height: 5px;
  margin: 20px auto 40px;
  border-radius: 4px;
  background: linear-gradient(90deg, #b58e00, #ffd700, #b58e00);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}
/* =========================================
   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;
}