@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500;6..96,600;6..96,700&family=Cinzel:wght@400;500;600;700;800&display=swap');

:root {
    --page-bg: #0f172a;
    --primary-dark: #0f172a;
    --deep-blue: #1d3557;
    --slate-blue: #334155;
    --darkest-blue: #0b1320;

    --accent-gold: #d4af6a;
    --accent-gold-light: #e8c98a;

    --text-light: #e2e8f0;
    --text-muted: #94a3b8;
    --text-dark: #e2e8f0;

    --card-bg: rgba(30, 41, 59, 0.82);
    --card-cream: rgba(30, 41, 59, 0.75);
    --light-bg: #1e293b;

    --border-light: rgba(226, 232, 240, 0.15);
    --border-color: rgba(226, 232, 240, 0.12);
}


body { background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 55%, #1d3557 78%, #0b1320 100%); background-attachment: fixed; color: var(--text-light); }

h1, h2, h3, h4, h5, h6, button, .nav-link, .brand-title, .brand-subtitle, .section-title, .section-subtitle, .banner-title, .value-title, .card-heading, .header-title, .gallery-title, .member-name, .member-role, .president-name, .president-role, .event-title, .photo-title, .date-num, .date-month, .stat-label, .stat-value { font-family: 'Cinzel', serif; }

p, span, li, a, .hero-subtext, .lead-text, .card-desc, .card-text-custom, .value-desc, .event-meta, .president-quote { font-family: 'Bodoni Moda', serif; }


/* =========================
NAVBAR
========================= */
.navbar { background: rgba(15,23,42,.88); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(212,175,106,.2); animation: navbarSlideDown 1s cubic-bezier(.19,1,.22,1) forwards; }
.door-title { position: relative; display: inline-flex; justify-content: center; align-items: center; overflow: hidden; padding: 0 20px; }
.navbar-title { margin: 0; font-size: 1.8rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; opacity: 0; position: relative; overflow: hidden; background: linear-gradient(90deg, #f0d86b 0%, #c0c0c0 25%, #f8e38a 50%, #e8e8e8 75%, #bfa21f 100%); background-size: 250% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 8px rgba(191,162,31,.25), 0 0 18px rgba(192,192,192,.2); animation: titleFade .2s linear 1.15s forwards,  gradientMove 6s linear infinite; }
@keyframes goldSilverGlow {
    0%,100% { filter: drop-shadow(0 0 4px rgba(191,162,31,.45)) drop-shadow(0 0 8px rgba(192,192,192,.25)); }
    50% { filter: drop-shadow(0 0 10px rgba(240,216,107,.9)) drop-shadow(0 0 18px rgba(232,232,232,.7)); }
}

@keyframes gradientMove {
    0% { background-position: 0% center; }
    100% { background-position: 250% center; }
}
.navbar-title::after { content: ""; position: absolute; top: -20%; left: -120%; width: 60%; height: 140%; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.15) 30%, rgba(255,255,255,.95) 50%, rgba(255,255,255,.15) 70%, transparent 100%); transform: skewX(-25deg); animation: shine 4s ease-in-out 4s infinite; }
.door { position: absolute; top: 0; width: 50%; height: 100%; background: rgba(15,23,42,.98); z-index: 2; }
.door.left { left: 0; border-right: 1px solid var(--accent-gold); animation: openLeft .8s ease-in-out 1.2s forwards; }
.door.right { right: 0; border-left: 1px solid var(--accent-gold); animation: openRight .8s ease-in-out 1.2s forwards; }

@keyframes navbarSlideDown {
    0% { transform: translateY(-100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

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

@keyframes openLeft {
    from { transform: translateX(0); }
    to { transform: translateX(-105%); }
}

@keyframes openRight {
    from { transform: translateX(0); }
    to { transform: translateX(105%); }
}

@keyframes shine {
    0% { left: -120%; }
    100% { left: 150%; }
}

@keyframes goldGlow {
    0%,100% { text-shadow: 0 0 8px rgba(191,162,31,.35), 0 0 18px rgba(191,162,31,.2); }
    50% { text-shadow: 0 0 12px rgba(240,216,107,.7), 0 0 28px rgba(191,162,31,.45); }
}


/* =========================
HERO SECTION
========================= */
.hero-section { position: relative; min-height: 88vh; display: flex; align-items: center; background: linear-gradient(to right, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.92) 25%, rgba(30, 41, 59, 0.68) 55%, rgba(11, 19, 32, 0.55) 100%), url('https://images.unsplash.com/photo-1511632765486-a01980e01a18?q=80&w=1920&auto=format&fit=crop') center/cover no-repeat; }
.scripture-watermark { position: absolute; top: 15%; left: 32%; color: rgba(212, 175, 106, 0.18); font-family: 'Bodoni Moda', serif; font-size: 5rem; transform: rotate(-6deg); pointer-events: none; white-space: nowrap; }
.hero-title { color: #f8fafc; font-family: 'Cinzel', serif; font-size: 3.3rem; font-weight: 700; line-height: 1.15; text-transform: uppercase; }
.accent-bar { width: 45px; height: 3px; margin: 1rem 0 1.5rem; background: var(--accent-gold); }
.hero-subtext { max-width: 420px; color: #cbd5e1; font-size: 1rem; line-height: 1.8; }
.btn-discover { display: inline-flex; align-items: center; gap: 10px; padding: 0.85rem 1.75rem; border-radius: 6px; background: var(--accent-gold); color: var(--darkest-blue); font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; text-decoration: none; text-transform: uppercase; }
.btn-discover:hover { background: var(--accent-gold-light); color: var(--darkest-blue); }
.feature-card { padding: 1.25rem; border: 1px solid rgba(212, 175, 106, 0.2); border-radius: 16px; background: rgba(15, 23, 42, 0.72); backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.icon-box { width: 60px; height: 60px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-size: 1.6rem; }
.icon-box.green { background: var(--deep-blue); }
.icon-box.gold { background: var(--accent-gold); }
.pillars-wrapper { position: relative; min-height: 520px; opacity: 0; animation: pillarsWrapperFade 1.5s ease 0.2s forwards; }
.pillars-intro-card { position: absolute; top: 50%; left: 0; z-index: 10; width: 100%; padding: 2rem; border: 1px solid rgba(212, 175, 106, 0.65); border-radius: 16px; background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(12px); text-align: center; box-shadow: 0 0 8px rgba(212, 175, 106, 0.35), 0 0 20px rgba(212, 175, 106, 0.2), inset 0 0 12px rgba(212, 175, 106, 0.08); transform: translateY(-50%); animation: introCardReveal 3.5s cubic-bezier(0.22, 1, 0.36, 1) forwards, introCardGlow 2.5s ease-in-out infinite alternate; }

@keyframes introCardGlow {
    0% { border-color: rgba(212, 175, 106, 0.45); box-shadow: 0 0 6px rgba(212, 175, 106, 0.25), 0 0 14px rgba(212, 175, 106, 0.15), inset 0 0 8px rgba(212, 175, 106, 0.05); }
    100% { border-color: rgba(212, 175, 106, 0.95); box-shadow: 0 0 10px rgba(212, 175, 106, 0.65), 0 0 28px rgba(212, 175, 106, 0.4), inset 0 0 16px rgba(212, 175, 106, 0.12); }
}

.pillars-intro-card h2 { margin: 0; color: var(--accent-gold); font-family: 'Cinzel', serif; font-size: 1.25rem; font-weight: 700; letter-spacing: 2px; }
.pillar-card { position: absolute; left: 0; width: 100%; opacity: 0; will-change: transform, opacity; }
.pillar-believe { top: 0; animation: believeReveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) 2.25s forwards, pillarBreathingGlow 3.5s ease-in-out 3.5s infinite; }
.pillar-belong { top: 50%; transform: translateY(-50%); animation: belongReveal 1.1s cubic-bezier(0.22, 1, 0.36, 1) 2.35s forwards, pillarBreathingGlow 3.5s ease-in-out 3.6s infinite; }
.pillar-become { bottom: 0; animation: becomeReveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) 2.45s forwards, pillarBreathingGlow 3.5s ease-in-out 3.7s infinite; }

@keyframes pillarBreathingGlow {
    0% { border-color: rgba(212, 175, 106, 0.35); box-shadow: 0 0 6px rgba(212, 175, 106, 0.15), 0 0 14px rgba(212, 175, 106, 0.08); }
    50% { border-color: rgba(212, 175, 106, 0.85); box-shadow: 0 0 12px rgba(212, 175, 106, 0.5), 0 0 30px rgba(212, 175, 106, 0.28); }
    100% { border-color: rgba(212, 175, 106, 0.35); box-shadow: 0 0 6px rgba(212, 175, 106, 0.15), 0 0 14px rgba(212, 175, 106, 0.08); }
}

@keyframes pillarsWrapperFade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes introCardReveal {
    0% { opacity: 0; transform: translateY(-50%) scale(0.94); }
    15% { opacity: 1; transform: translateY(-50%) scale(1); }
    65% { opacity: 1; transform: translateY(-50%) scale(1); }
    82% { opacity: 0; transform: translateY(-50%) scale(0.98); }
    100% { opacity: 0; visibility: hidden; transform: translateY(-50%) scale(0.96); }
}

@keyframes believeReveal {
    0% { opacity: 0; top: 50%; transform: translateY(-50%) scale(0.94); }
    35% { opacity: 1; }
    100% { opacity: 1; top: 0; transform: translateY(0) scale(1); }
}

@keyframes belongReveal {
    0% { opacity: 0; transform: translateY(-50%) scale(0.94); }
    35% { opacity: 1; }
    100% { opacity: 1; transform: translateY(-50%) scale(1); }
}

@keyframes becomeReveal {
    0% { opacity: 0; bottom: 50%; transform: translateY(50%) scale(0.94); }
    35% { opacity: 1; }
    100% { opacity: 1; bottom: -15px; transform: translateY(0) scale(1); }
}


/* =========================
ABOUT SECTION
========================= */
.about-section { padding: 80px 0; background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 55%, #1d3557 78%, #0b1320 100%); }
.collage-wrapper { position: relative; padding: 10px; }
.skewed-img-container { overflow: hidden; border: 3px solid rgba(212, 175, 106, 0.5); border-radius: 20px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); transform: skewX(-8deg); }
.skewed-img-container img { width: 100%; height: 100%; display: block; object-fit: cover; transform: skewX(8deg) scale(1.15); }
.img-large { height: 380px; }
.img-small-top { height: 180px; }
.img-small-bottom { height: 200px; }
.section-subtitle { margin-bottom: 0.5rem; color: var(--accent-gold); font-family: Cinzel; font-size: 0.8rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.section-title { color: #f8fafc; font-size: 2rem; font-weight: 700; text-transform: uppercase; font-family: Cinzel; }
.section-title span { color: var(--accent-gold); }
.lead-text { color: #fff; font-size: 1rem; line-height: 1.8; }
.lead-text:nth-of-type(1) span { animation-delay: calc(var(--char-index) * 0.03s + 0s); }
.lead-text:nth-of-type(2) span { animation-delay: calc(var(--char-index) * 0.03s + 0.5s); }
.lead-text:nth-of-type(3) span { animation-delay: calc(var(--char-index) * 0.03s + 0.5s); }
/* Letter Glow Animation */
.section-subtitle span,
.section-title span span,
.lead-text span { display: inline-block; opacity: 0; animation: letter-glow 0.001s ease forwards; }

@keyframes letter-glow {
    0% { opacity: 0; text-shadow: 0 0 1px rgba(255,255,255,0.1); }
    66% { opacity: 1; text-shadow: 0 0 20px rgba(255,255,255,0.9); }
    77% { opacity: 1; }
    100% { opacity: 0.7; text-shadow: 0 0 20px rgba(255,255,255,0); }
}
.stat-item { padding: 0 10px; text-align: center; }
.stat-border-start { border-left: 1px solid var(--border-light); }
.stat-icon { margin-bottom: 0.5rem; font-size: 2rem; }
.stat-icon.green { color: #93c5fd; }
.stat-icon.gold { color: var(--accent-gold); }
.stat-label { color: var(--text-muted); font-size: 0.6rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.stat-value { color: #f8fafc; font-size: 0.9rem; font-weight: 700; }
.border-col-left { border-left: 1px solid var(--border-light); }
.card-heading { color: #f8fafc; font-size: 1rem; font-weight: 700; text-transform: uppercase; }
.card-accent-bar { width: 30px; height: 2px; margin: 0.5rem 0 1rem; background: var(--accent-gold); }
.card-desc { color: #cbd5e1; font-size: 0.9rem; line-height: 1.8; }


/* =========================
VALUES SECTION
========================= */
.values-section { padding: 0 0 0rem; }
.values-banner { position: relative; overflow: hidden; padding: 3rem 2rem; border: 1px solid rgba(212, 175, 106, 0.25); border-radius: 12px; background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 55%, #1d3557 78%, #0b1320 100%); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); }
.section-title-wrapper { width: 100%; display: flex; align-items: center; justify-content: center; gap: 15px; margin: 0 auto 2.5rem; text-align: center; }
.title-line { position: relative; flex: 0 0 45px; height: 1px; background: var(--accent-gold); }
.title-line::after { content: ''; position: absolute; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-gold); }
.title-line.left::after { right: 0; }
.title-line.right::after { left: 0; }
.banner-title { margin: 0; color: #f8fafc; font-size: 1.2rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; }
.value-item { position: relative; padding: 0 15px; text-align: center; }
.value-col:not(:last-child) .value-item::after { content: ''; position: absolute; top: 10%; right: 0; width: 1px; height: 80%; background: rgba(212, 175, 106, 0.25); }
.icon-wrapper { width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; color: var(--accent-gold); font-size: 2.2rem; }
.icon-circle { border: 2px solid var(--accent-gold); border-radius: 50%; }
.value-title { margin-bottom: 0.75rem; color: #f8fafc; font-size: 1rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.value-desc { margin: 0; color: #cbd5e1; font-size: 1rem; line-height: 1.7; }


 /* =========================
OFFICE BEARERS
========================= */
.office-bearers-section { padding: 4rem 0; }
.office-bearers-section .section-title-wrapper { margin-bottom: 2.5rem; }
.office-bearers-section .section-title { margin: 0; white-space: nowrap; }
.president-card { height: 100%; min-height: 300px; position: relative; overflow: hidden; display: flex; align-items: center; padding: 1.5rem; border: 1px solid rgba(212, 175, 106, 0.25); border-radius: 0px; background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 55%, #1d3557 78%, #0b1320 100%); color: #fff; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); }
.president-img-box { width: 190px; height: 250px; flex-shrink: 0; padding: 3px; border: 1.5px solid var(--accent-gold); border-radius: 10px; }
.president-img-box img { width: 100%; height: 100%; border-radius: 9px; object-fit: cover; }
.president-role { margin-bottom: 0.25rem; color: var(--accent-gold); font-size: 1rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.president-name { margin-bottom: 0.5rem; color: #f8fafc; font-size: 1.50rem; font-weight: 700; text-transform: uppercase; }
.president-quote { margin-bottom: 1rem; color: #cbd5e1; font-size: 1.15rem; }
.office-members-grid { height: 100%; }
.office-members-grid > .col { display: flex; }
.office-members-scroll { display: flex; flex-wrap: nowrap; cursor: grab; user-select: none; scroll-behavior: smooth; gap: 1rem; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--accent-gold) transparent; }
.office-members-scroll::-webkit-scrollbar { height: 8px; }
.office-members-scroll:active { cursor: grabbing; }
.office-members-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.08); border-radius: 10px; }
.office-members-scroll::-webkit-scrollbar-thumb { background: var(--accent-gold); border-radius: 10px; }
.office-members-scroll > .col { flex: 0 0 20%; max-width: 20%; display: flex; }

@media (max-width: 991.98px) {
    .office-members-scroll > .col { flex: 0 0 32%; max-width: 32%; }
}

@media (max-width: 767.98px) {
    .office-members-scroll > .col { flex: 0 0 55%; max-width: 55%; }
}

@media (max-width: 575.98px) {
    .office-members-scroll > .col { flex: 0 0 75%; max-width: 75%; }
}

.member-card { width: 100%; min-height: 250px; height: 100%; position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 10px; border: 1px solid rgba(212, 175, 106, 0.18); border-radius: 0px; background: rgba(30, 41, 59, 0.82); text-align: center; transition: transform 0.2s ease, border-color 0.2s ease; }
.member-card:hover { transform: translateY(-4px); border-color: var(--accent-gold); }
.member-img-box { width: 100%; height: 250px; overflow: hidden; margin-bottom: 0.75rem; border-radius: 12px; }
.member-img-box img { width: 100%; height: 100%; object-fit: cover; }
.member-name { margin-bottom: 0.25rem; color: #f8fafc; font-size: 1rem; font-weight: 700; text-transform: uppercase; }
.member-role { margin-top: auto; padding-bottom: 4px; color: var(--accent-gold); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; }
.border-line { position: absolute; display: block; z-index: 5; pointer-events: none; filter: drop-shadow(0 0 5px rgba(212, 175, 106, 0.8)); }
.border-line.top { top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-gold)); animation: animateTop 2.5s linear infinite; }
.border-line.right { top: -100%; right: 0; width: 2px; height: 100%; background: linear-gradient(180deg, transparent, var(--accent-gold)); animation: animateRight 2.5s linear infinite 0.625s; }
.border-line.bottom { right: -100%; bottom: 0; width: 100%; height: 2px; background: linear-gradient(270deg, transparent, var(--accent-gold)); animation: animateBottom 2.5s linear infinite 1.25s; }
.border-line.left { bottom: -100%; left: 0; width: 2px; height: 100%; background: linear-gradient(360deg, transparent, var(--accent-gold)); animation: animateLeft 2.5s linear infinite 1.875s; }

@keyframes animateTop {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

@keyframes animateRight {
    0% { top: -100%; }
    50%, 100% { top: 100%; }
}

@keyframes animateBottom {
    0% { right: -100%; }
    50%, 100% { right: 100%; }
}

@keyframes animateLeft {
    0% { bottom: -100%; }
    50%, 100% { bottom: 100%; }
}

/* =========================
MINISTRIES
========================= */
.ministries-section { padding: 2rem 0 4rem; }
.section-card { height: 100%; display: flex; flex-direction: column; padding: 1.75rem 1.25rem; border: 1px solid rgba(212, 175, 106, 0.18); border-radius: 18px; background: rgba(30, 41, 59, 0.78); }
.header-title { margin-bottom: 1.25rem; color: #f8fafc; font-size: 1rem; font-weight: 700; text-transform: uppercase; }
.ministry-list { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-around; padding: 0; margin: 0; list-style: none; }
.ministry-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; color: #cbd5e1; font-size: 1rem;  font-weight: 600; cursor: default; transition: all 0.3s ease; }
.ministry-item:hover { background: rgba(212, 175, 106, 0.1); color: var(--accent-gold); transform: translateX(5px); }
.ministry-icon { width: 24px; display: flex; align-items: center; justify-content: center; color: var(--accent-gold); font-size: 1.2rem; transition: transform 0.3s ease; }
.ministry-item:hover .ministry-icon { transform: scale(1.15); }
.ministry-photo-card { position: relative; height: 100%; min-height: 380px; overflow: hidden; border: 2px solid rgba(192, 192, 192, 0.2); border-radius: 14px; animation: ministrySilverBlink 3s infinite; }
.ministry-photo-card img { width: 100%; height: 100%; object-fit: cover; }

@keyframes ministrySilverBlink {
    0%,
    100% {
        border-color: rgba(192, 192, 192, 0.2);
        box-shadow: 0 0 5px rgba(192, 192, 192, 0.1);
    }
    50% {
        border-color: var(--accent-gold);
        box-shadow:
            0 0 15px rgba(192, 192, 192, 0.6),
            0 0 30px rgba(192, 192, 192, 0.3);
    }
}

.ministry-cards-row > .col:nth-child(1) .ministry-photo-card { animation-delay: 0s; }
.ministry-cards-row > .col:nth-child(2) .ministry-photo-card { animation-delay: 0.5s; }
.ministry-cards-row > .col:nth-child(3) .ministry-photo-card { animation-delay: 1s; }
.ministry-cards-row > .col:nth-child(4) .ministry-photo-card { animation-delay: 1.5s; }
.ministry-cards-row > .col:nth-child(5) .ministry-photo-card { animation-delay: 2s; }
.photo-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 1.25rem 0.5rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.2) 45%, transparent 100%); }
.photo-title { margin: 0; color: #fff; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; }


/* =========================
EVENTS
========================= */
.events-list { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-around; background: rgba(15, 23, 42, 0.55); border-radius: 10px; }
.event-item { display: flex; align-items: center; gap: 12px; padding: 1rem 0; color: inherit; text-decoration: none; margin-left: 10px; }
.event-item:not(:last-child) { border-bottom: 1px solid var(--border-color); }
.date-badge { width: 52px; height: 52px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; color: #fff; }
.date-badge.green { background: var(--deep-blue); }
.date-badge.gold { background: var(--accent-gold); }
.date-num { font-size: 1.1rem; font-weight: 700; }
.date-month { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; }
.event-title { margin-bottom: 2px; color: #f8fafc; font-size: 1rem; font-weight: 700; text-transform: uppercase; }
.event-meta { margin: 0; color: var(--text-muted); font-size: 0.65rem; }
.arrow-icon { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-left: auto; border: 1px solid rgba(212, 175, 106, 0.3); border-radius: 50%; color: var(--accent-gold); }
.event-item:hover .arrow-icon { border-color: var(--accent-gold); background: var(--accent-gold); color: var(--darkest-blue); }


/* =========================
GALLERY
========================= */
.gallery-section { padding: 2rem 0 5rem; }
.gallery-header { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; opacity: 0; }
.gallery-title { margin: 0; color: #f8fafc; font-size: 3rem; font-weight: 700; text-transform: uppercase; }
.filter-nav { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; }
.filter-nav li { opacity: 0; }
.filter-btn { padding: 12px 25px; border: 2px solid rgba(212, 175, 106, 0.25); border-radius: 25px; background: transparent; color: var(--text-muted); font-size: 1rem; font-weight: 600; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; }
.filter-btn.active, .filter-btn:hover { background: var(--accent-gold); color: var(--darkest-blue); }
.filter-nav li:first-child { animation: popIn 0.6s ease forwards; }
.filter-nav li:nth-child(2) { transform: translateX(-120px); animation: spreadOut 0.5s ease forwards; animation-delay: 0.45s; }
.filter-nav li:nth-child(3) { transform: translateX(-120px); animation: spreadOut 0.5s ease forwards; animation-delay: 0.60s; }
.filter-nav li:nth-child(4) { transform: translateX(-120px); animation: spreadOut 0.5s ease forwards; animation-delay: 0.75s; }
.filter-nav li:nth-child(5) { transform: translateX(-120px); animation: spreadOut 0.5s ease forwards; animation-delay: 0.90s; }
.filter-nav li:nth-child(6) { transform: translateX(-120px); animation: spreadOut 0.5s ease forwards; animation-delay: 1.05s; }
.gallery-card { position: relative; overflow: hidden; border: 2px solid rgba(212, 175, 106, 0.35); border-radius: 14px; animation: imageGlow 1.5s ease-out forwards; }
.gallery-card img { display: block; width: 100%; height: 100%; border-radius: 12px; }
@keyframes imageGlow {
    0% { box-shadow: 0 0 0 rgba(212, 175, 106, 0), 0 0 0 rgba(212, 175, 106, 0); }
    50% { box-shadow: 0 0 12px rgba(212, 175, 106, 0.9), 0 0 24px rgba(212, 175, 106, 0.6); }
    100% { box-shadow: 0 0 6px rgba(212, 175, 106, 0.35), 0 0 12px rgba(212, 175, 106, 0.2); }
}
.gallery-section.animate .gallery-card { animation: imageGlow 1.5s ease-out forwards; }
.gallery-header, .gallery-col { opacity: 0; }
.gallery-section.animate .gallery-header { animation: fadeDown 0.8s ease forwards; }
.gallery-section.animate .gallery-col:nth-child(1) { animation: splitFarLeft 1s cubic-bezier(.22,1,.36,1) forwards; animation-delay: .2s; }
.gallery-section.animate .gallery-col:nth-child(2) { animation: splitMidLeft 1s cubic-bezier(.22,1,.36,1) forwards; animation-delay: .2s; }
.gallery-section.animate .gallery-col:nth-child(3) { animation: splitNearLeft 1s cubic-bezier(.22,1,.36,1) forwards; animation-delay: .2s; }
.gallery-section.animate .gallery-col:nth-child(4) { animation: splitNearRight 1s cubic-bezier(.22,1,.36,1) forwards; animation-delay: .2s; }
.gallery-section.animate .gallery-col:nth-child(5) { animation: splitMidRight 1s cubic-bezier(.22,1,.36,1) forwards; animation-delay: .2s; }
.gallery-section.animate .gallery-col:nth-child(6) { animation: splitFarRight 1s cubic-bezier(.22,1,.36,1) forwards; animation-delay: .2s; }

@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes splitFarLeft {
    from { opacity: 0; transform: translateX(250%) scale(.8); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes splitMidLeft {
    from { opacity: 0; transform: translateX(170%) scale(.8); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes splitNearLeft {
    from { opacity: 0; transform: translateX(90%) scale(.8); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes splitNearRight {
    from { opacity: 0; transform: translateX(-90%) scale(.8); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes splitMidRight {
    from { opacity: 0; transform: translateX(-170%) scale(.8); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes splitFarRight {
    from { opacity: 0; transform: translateX(-250%) scale(.8); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes popIn {
    0% { opacity: 0; transform: scale(0.2); }
    60% { opacity: 1; transform: scale(1.15); }
    80% { transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes spreadOut {
    0% { opacity: 0; transform: translateX(-120px) scale(0.9); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}
.gallery-card { height: 200px; overflow: hidden; border: 1px solid rgba(212, 175, 106, 0.15); border-radius: 14px; }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; }
.gallery-col.hide { display: none !important; }


/* =========================
RESPONSIVE
========================= */

@media (max-width: 991.98px) {
    .hero-section { padding-top: 2rem; padding-bottom: 3rem; background: linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.9)), url('https://images.unsplash.com/photo-1511632765486-a01980e01a18?q=80&w=1920&auto=format&fit=crop') center/cover no-repeat; }
    .hero-title { font-size: 2.5rem; }
    .scripture-watermark { display: none; }
    .border-col-left { padding-top: 2rem; margin-top: 2rem; border-top: 1px solid var(--border-light); border-left: none; }
    .skewed-img-container { transform: none; }
    .skewed-img-container img { transform: none; }
    .value-col:not(:last-child) .value-item::after { display: none; }
    .value-col { margin-bottom: 2rem; }
    .value-col:last-child { margin-bottom: 0; }
    .ministry-photo-card { min-height: 280px; }
}

@media (max-width: 767.98px) {
    .section-title-wrapper { gap: 8px; }
    .title-line { flex-basis: 20px; }
    .banner-title, .office-bearers-section .section-title { font-size: 0.9rem; letter-spacing: 1px; }
    .president-card { min-height: 250px; flex-direction: column; justify-content: center; text-align: center; }
    .president-img-box { width: 130px; height: 160px; }
    .gallery-card { height: 220px; }
}

@media (max-width: 575.98px) {
    .hero-title { font-size: 2rem; }
    .values-banner { padding: 2rem 1rem; }
    .stat-value { font-size: 0.75rem; }
    .stat-label { font-size: 0.5rem; }
}


.exit-btn { position: fixed; right: 25px; bottom: 25px; display: flex; align-items: center; justify-content: center; min-width: 110px; height: 52px; padding: 0 24px; background: linear-gradient(145deg, #f7e28a 0%, #d4af37 45%, #b8860b 100%); color: #111827; font-size: 0.9rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; border: 2px solid rgba(255,255,255,0.2); border-radius: 50px; box-shadow: 0 0 15px rgba(212,175,55,0.45), 0 8px 25px rgba(0,0,0,0.35); z-index: 9999; transition: all 0.35s ease; animation: exitFloat 3s ease-in-out infinite; }
.exit-btn:hover { color: #111827; text-decoration: none; transform: translateY(-6px) scale(1.08); box-shadow: 0 0 25px rgba(212,175,55,0.75), 0 12px 30px rgba(0,0,0,0.45); }
@keyframes exitFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}