/* ===========================================================
   GOOD CARE MINISTRIES - PREMIUM WEBSITE STYLES
   A Beautiful, Story-Driven Charity Site
   =========================================================== */

/* ===== CSS RESET & BASE ===== */
*,*::before,*::after {margin:0;padding:0;box-sizing:border-box;}

:root {
    --primary: #1a4d2e; --primary-light: #2d6a4f; --secondary: #8b6f47;
    --accent: #d4a574; --dark: #0d1b2a; --light: #faf8f5; --white: #ffffff;
    --text-dark: #1b2021; --text-muted: #6b7280;
    --font-heading: 'Cormorant Garamond', serif; --font-body: 'Inter', sans-serif;
    --section-padding: clamp(4rem, 10vw, 8rem); --container-padding: clamp(1.5rem, 5vw, 3rem);
    --transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --shadow-md: 0 4px 20px rgba(0,0,0,0.12);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.15); --shadow-xl: 0 20px 60px rgba(0,0,0,0.2);
}

html {scroll-behavior: smooth;overflow-x: hidden;width: 100%;}
body {font-family: var(--font-body);color: var(--text-dark);line-height: 1.7;overflow-x: hidden;background: var(--light);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;width: 100%;position: relative;}
h1,h2,h3,h4,h5,h6 {font-family: var(--font-heading);font-weight: 600;line-height: 1.2;color: var(--text-dark);}

img {max-width: 100%;height: auto;display: block;}
a {text-decoration: none;color: inherit;}

/* Prevent content from being cut off */
section {
    position: relative;
    overflow: visible;
}

.container {max-width: 1200px;margin: 0 auto;padding: 0 var(--container-padding);width: 100%;}
.container-wide {max-width: 1400px;margin: 0 auto;padding: 0 var(--container-padding);width: 100%;}
.container-narrow {max-width: 900px;margin: 0 auto;padding: 0 var(--container-padding);width: 100%;}

.section-label {display: inline-block;font-size: 0.875rem;font-weight: 700;text-transform: uppercase;letter-spacing: 3px;color: var(--accent);margin-bottom: 1rem;position: relative;padding-bottom: 0.5rem;}
.section-label::after {content: '';position: absolute;bottom: 0;left: 0;width: 50px;height: 2px;background: var(--accent);}
.section-label.light {color: var(--accent);opacity: 1;}
.section-label.light::after {background: var(--accent);}
.section-heading {font-size: clamp(2rem, 5vw, 3.5rem);margin-bottom: 1.5rem;color: var(--primary);position: relative;display: inline-block;}
.section-heading.light {color: var(--white);}
.section-desc {font-size: 1.125rem;color: var(--text-muted);max-width: 700px;margin: 0 auto 3rem;line-height: 1.9;}

/* ===== PAGE TRANSITIONS ===== */
.page-transition {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, #1a4d2e 0%, #2d6a4f 100%);z-index: 10000;pointer-events: none;opacity: 0;transition: opacity 0.5s ease;}
.page-transition.active {opacity: 1;}

/* ===== NAVIGATION ===== */
.navbar {position: fixed;top: 0;left: 0;right: 0;background: rgba(255, 255, 255, 0.98);backdrop-filter: blur(25px) saturate(180%);-webkit-backdrop-filter: blur(25px) saturate(180%);box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);z-index: 1000;transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);}
.navbar.scrolled {box-shadow: 0 4px 30px rgba(0,0,0,0.08);background: rgba(255, 255, 255, 0.95);}
.navbar .container {display: flex;justify-content: space-between;align-items: center;padding-top: 1.25rem;padding-bottom: 1.25rem;}
.nav-brand {display: flex;align-items: center;gap: 0.75rem;font-family: var(--font-heading);font-size: 1.5rem;font-weight: 700;color: var(--primary);text-decoration: none;transition: var(--transition);position: relative;}
.nav-brand::after {content: '';position: absolute;bottom: -5px;left: 0;width: 0;height: 3px;background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);}
.nav-brand:hover::after {width: 100%;}
.nav-brand:hover {color: var(--primary-light);transform: translateY(-2px);}
.brand-icon {font-size: 1.875rem;animation: float 3s ease-in-out infinite;}
@keyframes float {0%, 100% {transform: translateY(0);} 50% {transform: translateY(-5px);}}
.nav-menu {display: flex;list-style: none;gap: 3rem;align-items: center;}
.nav-menu a {text-decoration: none;color: var(--text-dark);font-weight: 600;font-size: 0.9375rem;position: relative;transition: var(--transition);padding: 0.5rem 0;}
.nav-menu a:hover,.nav-menu a.active {color: var(--primary);}
.nav-menu a::after {content: '';position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 0;height: 3px;background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);border-radius: 3px;}
.nav-menu a:hover::after,.nav-menu a.active::after {width: 100%;}
.btn-donate-nav {background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%) !important;color: var(--white) !important;padding: 0.75rem 2rem !important;border-radius: 30px;transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;box-shadow: 0 4px 15px rgba(26, 77, 46, 0.25);}
.btn-donate-nav::after {display: none !important;}
.btn-donate-nav:hover {background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%) !important;transform: translateY(-3px);box-shadow: 0 8px 25px rgba(26, 77, 46, 0.35) !important;}
.hamburger {display: none;flex-direction: column;cursor: pointer;gap: 6px;padding: 8px;}
.hamburger span {width: 30px;height: 3px;background: var(--primary);border-radius: 3px;transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);}

/* ===== BUTTONS ===== */
.btn-primary,.btn-secondary {display: inline-flex;align-items: center;gap: 0.75rem;padding: 1.125rem 2.75rem;border-radius: 50px;font-weight: 600;font-size: 1rem;text-decoration: none;transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);cursor: pointer;border: none;font-family: var(--font-body);position: relative;overflow: hidden;}
.btn-primary::before {content: '';position: absolute;top: 50%;left: 50%;width: 0;height: 0;border-radius: 50%;background: rgba(255,255,255,0.2);transform: translate(-50%, -50%);transition: width 0.6s ease, height 0.6s ease;}
.btn-primary:hover::before {width: 400px;height: 400px;}
.btn-primary {background: linear-gradient(135deg, #d4a574 0%, #c9975a 100%);color: var(--text-dark);box-shadow: 0 8px 25px rgba(212, 165, 116, 0.35);position: relative;z-index: 1;}
.btn-primary:hover {transform: translateY(-4px);box-shadow: 0 12px 35px rgba(212, 165, 116, 0.45);background: linear-gradient(135deg, #e0b687 0%, #d4a574 100%);}
.btn-secondary {background: transparent;color: var(--white);border: 2px solid var(--white);backdrop-filter: blur(10px);box-shadow: 0 4px 15px rgba(0,0,0,0.1);}
.btn-secondary:hover {background: var(--white);color: var(--primary);transform: translateY(-4px);box-shadow: 0 8px 25px rgba(255,255,255,0.3);}
.btn-secondary.light {color: var(--white);border-color: var(--white);}
.btn-secondary.light:hover {background: var(--white);color: var(--primary);}
.btn-primary.large,.btn-secondary.large {padding: 1.375rem 3.25rem;font-size: 1.125rem;}
.btn-primary.wide,.btn-secondary.wide {width: 100%;justify-content: center;}
.btn-arrow {transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);}
.btn-primary:hover .btn-arrow,.btn-secondary:hover .btn-arrow {transform: translateX(6px);}
.link-arrow {display: inline-flex;align-items: center;gap: 0.5rem;color: var(--primary);font-weight: 600;text-decoration: none;transition: var(--transition);position: relative;}
.link-arrow::after {content: '';position: absolute;bottom: -2px;left: 0;width: 0;height: 2px;background: var(--primary);transition: width 0.3s ease;}
.link-arrow:hover::after {width: calc(100% - 30px);}
.link-arrow:hover {gap: 0.85rem;color: var(--primary-light);}
.btn-text {display: inline-flex;align-items: center;gap: 0.5rem;background: none;border: none;color: var(--primary);font-weight: 600;font-size: 1rem;cursor: pointer;transition: var(--transition);font-family: var(--font-body);padding: 0;}
.btn-text:hover {gap: 0.75rem;color: var(--primary-light);}

/* ===== HERO SECTIONS ===== */
.hero {position: relative;height: 100vh;display: flex;align-items: center;justify-content: center;overflow: hidden;background: linear-gradient(135deg, #1a4d2e 0%, #2d6a4f 100%);}
.hero-background {position: absolute;top: 0;left: 0;right: 0;bottom: 0;overflow: hidden;}

/* Dual Hero Layout - Split Screen */
.hero-dual .hero-background {
    display: flex;
}

.hero-split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: 100%;
}

.hero-image-side,
.hero-video-side {
    position: relative;
    overflow: hidden;
}

.hero-image-wrapper,
.hero-video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: subtleZoom 15s ease-in-out infinite alternate;
}

.hero-video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-image-overlay,
.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(13, 27, 42, 0.6) 0%, rgba(26, 77, 46, 0.5) 100%);
    z-index: 1;
}

.hero-overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.8) 100%);
    z-index: 2;
    pointer-events: none;
}

.hero-image-caption,
.hero-video-label {
    position: absolute;
    bottom: 30px;
    left: 30px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 0.875rem 1.5rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 3;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 1s ease-out 0.8s backwards;
}

.hero-image-caption {
    color: var(--primary);
    font-weight: 700;
    font-size: 0.95rem;
}

.hero-video-label {
    color: var(--primary);
    font-weight: 600;
    font-size: 0.9rem;
}

.caption-icon {
    font-size: 1.25rem;
}

.hero-video-label svg {
    width: 20px;
    height: 20px;
}

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

/* Old hero styles for compatibility */
.hero-image-container {position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.hero-image {width: 100%;height: 100%;object-fit: cover;transform: scale(1.1);animation: zoomIn 20s ease-out infinite alternate;}
.hero-overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, rgba(13, 27, 42, 0.75) 0%, rgba(26, 77, 46, 0.65) 100%);}

.hero-content {position: relative;z-index: 10;text-align: center;color: var(--white);max-width: 900px;padding: 0 2rem;}
.hero-text {animation: fadeInUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s backwards;}
.hero-label {display: inline-block;font-size: 0.9375rem;font-weight: 700;text-transform: uppercase;letter-spacing: 4px;color: var(--white);margin-bottom: 1.5rem;opacity: 1;text-shadow: 0 2px 20px rgba(0,0,0,0.3);background: rgba(212, 165, 116, 0.2);padding: 0.75rem 1.5rem;border-radius: 50px;border: 2px solid rgba(212, 165, 116, 0.4);backdrop-filter: blur(10px);}
.hero-title {font-size: clamp(2.5rem, 8vw, 5.5rem);font-weight: 700;margin-bottom: 1.5rem;line-height: 1.1;color: var(--white);text-shadow: 0 4px 30px rgba(0,0,0,0.5);}
.hero-title .line {display: block;animation: slideInUp 1s cubic-bezier(0.22, 1, 0.36, 1) backwards;}
.hero-title .line:nth-child(2) {animation-delay: 0.15s;}
.hero-subtitle {font-size: clamp(1.125rem, 2vw, 1.5rem);margin-bottom: 2.5rem;opacity: 1;font-weight: 300;line-height: 1.6;animation: fadeInUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.5s backwards;color: var(--white);text-shadow: 0 2px 20px rgba(0,0,0,0.4);}
.hero-actions {display: flex;gap: 1.5rem;justify-content: center;flex-wrap: wrap;animation: fadeInUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.7s backwards;}
.scroll-indicator {position: absolute;bottom: 3rem;left: 50%;transform: translateX(-50%);display: flex;flex-direction: column;align-items: center;gap: 0.75rem;color: var(--white);opacity: 0.9;animation: fadeIn 1.5s ease-out 1.2s backwards;cursor: pointer;transition: var(--transition);z-index: 15;}
.scroll-indicator:hover {opacity: 1;transform: translateX(-50%) translateY(-5px);}
.scroll-indicator span {font-size: 0.875rem;text-transform: uppercase;letter-spacing: 2px;font-weight: 600;}
.mouse {width: 26px;height: 42px;border: 2px solid var(--white);border-radius: 20px;position: relative;box-shadow: 0 0 20px rgba(255,255,255,0.3);}
.wheel {width: 4px;height: 8px;background: var(--white);border-radius: 2px;position: absolute;top: 8px;left: 50%;transform: translateX(-50%);animation: scroll 2s infinite;box-shadow: 0 0 10px rgba(255,255,255,0.5);}
@keyframes scroll {0% {opacity: 0;top: 8px;} 50% {opacity: 1;} 100% {opacity: 0;top: 24px;}}
@keyframes zoomIn {from {transform: scale(1.1);} to {transform: scale(1.2);}}
@keyframes slideInUp {from {opacity: 0;transform: translateY(60px) rotateX(15deg);} to {opacity: 1;transform: translateY(0) rotateX(0);}}


.page-hero {position: relative;height: 60vh;min-height: 500px;display: flex;align-items: center;justify-content: center;overflow: hidden;margin-top: 70px;}
.page-hero-content {position: relative;z-index: 10;text-align: center;color: var(--white);max-width: 800px;padding: 0 2rem;}
.page-title {font-size: clamp(2.5rem, 6vw, 4.5rem);font-weight: 700;margin-bottom: 1rem;}
.page-subtitle {font-size: clamp(1.125rem, 2vw, 1.375rem);opacity: 0.95;font-weight: 300;}

/* ===== PARALLAX ===== */
.parallax-section {position: relative;overflow: hidden;}
.parallax-image {position: absolute;top: -20%;left: 0;right: 0;height: 140%;overflow: hidden;}
.parallax-image img {width: 100%;height: 100%;object-fit: cover;will-change: transform;}
.content-overlay {position: relative;z-index: 10;padding: var(--section-padding) 0;}
.content-overlay.dark-overlay::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, rgba(13, 27, 42, 0.92) 0%, rgba(26, 77, 46, 0.88) 100%);z-index: -1;}
.parallax-section.dark .parallax-image::after {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, rgba(13, 27, 42, 0.85) 0%, rgba(26, 77, 46, 0.8) 100%);}

/* Mobile parallax fixes */
@media (max-width: 768px) {
    .parallax-section {
        overflow: visible;
        min-height: auto;
    }
    
    .parallax-image {
        position: relative;
        top: 0;
        height: auto;
        min-height: 400px;
        margin-bottom: 2rem;
        background: var(--dark);
    }
    
    .parallax-image img {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 400px;
        object-fit: contain;
        object-position: center;
        background: var(--dark);
    }
    
    .content-overlay {
        position: relative;
        z-index: 10;
        padding: 2rem 0;
    }
    
    /* Disable parallax transforms on mobile for better performance */
    .parallax-image img {
        transform: none !important;
    }
    
    [data-speed] {
        transform: none !important;
    }
    
    /* Hero image on mobile - show full image */
    .hero {
        height: auto;
        min-height: 100vh;
    }
    
    .hero-image-container {
        position: relative;
        height: 100vh;
        background: var(--dark);
    }
    
    .hero-image {
        object-fit: contain;
        object-position: center;
        transform: none;
        animation: none;
    }
}

/* ===== STORY PREVIEW ===== */
.story-preview {margin-top: -1px;}
.split-content {display: grid;grid-template-columns: 1fr 1fr;gap: 4rem;align-items: center;}
.section-text {font-size: 1.125rem;line-height: 1.9;color: var(--text-dark);margin-bottom: 2rem;}
.story-highlight {display: flex;flex-direction: column;gap: 2rem;}
.highlight-item {padding: 2.5rem;background: rgba(255, 255, 255, 0.95);backdrop-filter: blur(15px);border-radius: 20px;border-left: 5px solid var(--accent);box-shadow: 0 10px 40px rgba(0,0,0,0.08);transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);transform-origin: left center;position: relative;overflow: hidden;}
.highlight-item::before {content: '';position: absolute;top: 0;left: 0;width: 5px;height: 0;background: linear-gradient(180deg, var(--accent) 0%, var(--primary) 100%);transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);}
.highlight-item:hover::before {height: 100%;}
.highlight-item:hover {transform: translateX(15px) scale(1.02);box-shadow: 0 15px 50px rgba(0,0,0,0.15);background: rgba(255, 255, 255, 1);}
.highlight-item h3 {font-size: 1.625rem;color: var(--primary);margin-bottom: 0.75rem;transition: color 0.3s ease;}
.highlight-item:hover h3 {color: var(--primary-light);}
.highlight-item p {color: var(--text-muted);line-height: 1.7;font-size: 1.0625rem;}

/* ===== MISSION PREVIEW ===== */
.mission-preview {background: var(--light);padding: var(--section-padding) 0;position: relative;overflow: hidden;}
.mission-preview::before {content: '';position: absolute;bottom: -30%;left: -15%;width: 500px;height: 500px;background: radial-gradient(circle, rgba(26, 77, 46, 0.05) 0%, transparent 70%);border-radius: 50%;pointer-events: none;}
.mission-content {display: grid;grid-template-columns: 1fr 1fr;gap: 5rem;align-items: center;}
.mission-text p {font-size: 1.125rem;line-height: 1.9;color: var(--text-dark);margin-bottom: 2.5rem;}
.mission-values {display: flex;flex-wrap: wrap;gap: 2.5rem;margin-bottom: 3rem;}
.value-item {display: flex;align-items: center;gap: 1.25rem;transition: all 0.3s ease;}
.value-item:hover {transform: translateX(10px);}
.value-icon {flex-shrink: 0;color: var(--primary);transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);}
.value-item:hover .value-icon {color: var(--accent);transform: scale(1.15) rotate(5deg);}
.value-item span {font-weight: 700;color: var(--text-dark);font-size: 1.0625rem;}
.image-stack {position: relative;height: 600px;}
.stack-image {position: absolute;width: 70%;height: 400px;object-fit: cover;border-radius: 25px;box-shadow: 0 15px 50px rgba(0,0,0,0.15);transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);}
.stack-image:first-child {top: 0;left: 0;z-index: 1;}
.stack-image:last-child {bottom: 0;right: 0;z-index: 2;}
.stack-image:hover {transform: scale(1.05);box-shadow: 0 20px 60px rgba(0,0,0,0.25);z-index: 3;}

/* ===== IMPACT SECTION ===== */
.impact-section {margin-top: -1px;position: relative;}
.impact-header {text-align: center;margin-bottom: 4rem;}
.stats-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 3.5rem;margin-bottom: 4rem;}
.stat-item {text-align: center;color: var(--white);position: relative;padding: 2.5rem 1.5rem;background: rgba(255, 255, 255, 0.05);backdrop-filter: blur(10px);border-radius: 20px;transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);border: 2px solid rgba(255, 255, 255, 0.1);}
.stat-item::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, rgba(212, 165, 116, 0.1) 0%, rgba(26, 77, 46, 0.1) 100%);border-radius: 20px;opacity: 0;transition: opacity 0.5s ease;z-index: -1;}
.stat-item:hover::before {opacity: 1;}
.stat-item:hover {transform: translateY(-15px) scale(1.05);box-shadow: 0 20px 60px rgba(0,0,0,0.3);border-color: rgba(212, 165, 116, 0.4);}
.stat-number {font-family: var(--font-heading);font-size: clamp(3rem, 6vw, 5.5rem);font-weight: 700;line-height: 1;margin-bottom: 0.75rem;background: linear-gradient(135deg, var(--accent) 0%, #f4d5a6 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-fill-color: transparent;filter: drop-shadow(0 0 20px rgba(212, 165, 116, 0.3));}
.stat-number::after {content: '+';}
.stat-label {font-size: 1.375rem;font-weight: 700;margin-bottom: 0.75rem;letter-spacing: 0.5px;}
.stat-description {font-size: 1rem;opacity: 0.9;}
.impact-cta {text-align: center;color: var(--white);}
.impact-cta p {font-size: 1.375rem;margin-bottom: 2.5rem;opacity: 0.95;font-weight: 300;}

/* ===== CTA SECTION ===== */
.cta-section {background: var(--light);padding: var(--section-padding) 0;position: relative;overflow: hidden;}
.cta-section::before {content: '';position: absolute;top: -50%;right: -10%;width: 600px;height: 600px;background: radial-gradient(circle, rgba(212, 165, 116, 0.08) 0%, transparent 70%);border-radius: 50%;pointer-events: none;}
.cta-content {text-align: center;position: relative;z-index: 1;}
.cta-main {max-width: 700px;margin: 0 auto 4rem;}
.cta-main h2 {font-size: clamp(2rem, 5vw, 3rem);color: var(--primary);margin-bottom: 1rem;}
.cta-main p {font-size: 1.125rem;color: var(--text-muted);line-height: 1.8;}
.cta-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 2rem;margin-bottom: 3rem;}
.cta-card {background: var(--white);padding: 3.5rem 2.5rem;border-radius: 25px;box-shadow: 0 5px 30px rgba(0,0,0,0.06);transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);position: relative;border: 2px solid transparent;overflow: hidden;}
.cta-card::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 5px;background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);transform: scaleX(0);transform-origin: left;transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);}
.cta-card:hover::before {transform: scaleX(1);}
.cta-card:hover {transform: translateY(-15px);box-shadow: 0 20px 60px rgba(0,0,0,0.15);border-color: var(--primary);}
.cta-card.featured {border-color: var(--accent);background: linear-gradient(135deg, #fdfcfa 0%, #f9f6f2 100%);box-shadow: 0 10px 40px rgba(212, 165, 116, 0.2);}
.cta-card.featured:hover {box-shadow: 0 25px 70px rgba(212, 165, 116, 0.3);}
.featured-badge {position: absolute;top: 1.5rem;right: 1.5rem;background: linear-gradient(135deg, var(--accent) 0%, #c9975a 100%);color: var(--white);padding: 0.625rem 1.25rem;border-radius: 25px;font-size: 0.875rem;font-weight: 700;display: flex;align-items: center;gap: 0.5rem;box-shadow: 0 4px 15px rgba(212, 165, 116, 0.3);animation: pulse 2s ease-in-out infinite;}
@keyframes pulse {0%, 100% {transform: scale(1);} 50% {transform: scale(1.05);}}
.cta-icon {width: 90px;height: 90px;margin: 0 auto 2rem;display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg, #1a4d2e 0%, #2d6a4f 100%);border-radius: 50%;color: var(--white);box-shadow: 0 10px 30px rgba(26, 77, 46, 0.3);transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);}
.cta-card:hover .cta-icon {transform: rotateY(360deg) scale(1.1);box-shadow: 0 15px 40px rgba(26, 77, 46, 0.4);}
.cta-card h3 {font-size: 1.875rem;color: var(--primary);margin-bottom: 1rem;transition: color 0.3s ease;}
.cta-card:hover h3 {color: var(--primary-light);}
.cta-card p {color: var(--text-muted);line-height: 1.8;margin-bottom: 1.5rem;font-size: 1.0625rem;}
.cta-link {color: var(--primary);font-weight: 700;text-decoration: none;transition: all 0.3s ease;position: relative;display: inline-block;}
.cta-link::after {content: '';position: absolute;bottom: -2px;left: 0;width: 0;height: 2px;background: var(--primary);transition: width 0.3s ease;}
.cta-link:hover::after {width: 100%;}
.cta-link:hover {color: var(--primary-light);transform: translateX(5px);}
.scripture-quote {max-width: 650px;margin: 0 auto;padding: 3.5rem;background: linear-gradient(135deg, rgba(212, 165, 116, 0.12) 0%, rgba(212, 165, 116, 0.05) 100%);border-radius: 25px;position: relative;border: 2px solid rgba(212, 165, 116, 0.2);box-shadow: 0 10px 40px rgba(212, 165, 116, 0.15);}
.scripture-quote::before {content: '"';position: absolute;top: 1rem;left: 2rem;font-size: 5rem;font-family: var(--font-heading);color: var(--accent);opacity: 0.15;}
.quote-icon {color: var(--accent);opacity: 0.4;margin-bottom: 1rem;}
.scripture-quote p {font-size: 1.3125rem;font-style: italic;color: var(--text-dark);line-height: 1.9;margin-bottom: 1.25rem;font-weight: 400;}
.scripture-quote cite {font-size: 1.0625rem;color: var(--primary);font-style: normal;font-weight: 600;}

/* ===== FOOTER ===== */
.footer {background: var(--dark);color: rgba(255, 255, 255, 0.8);padding: 4rem 0 2rem;}
.footer-main {display: grid;grid-template-columns: 1.5fr 2fr;gap: 4rem;margin-bottom: 3rem;}
.footer-brand h3 {font-size: 1.75rem;color: var(--white);margin-bottom: 1rem;}
.footer-brand p {line-height: 1.7;margin-bottom: 2rem;}
.social-links {display: flex;gap: 1rem;}
.social-icon {width: 44px;height: 44px;display: flex;align-items: center;justify-content: center;background: rgba(255, 255, 255, 0.1);border-radius: 50%;color: var(--white);transition: var(--transition);}
.social-icon:hover {background: var(--primary);transform: translateY(-3px);}
.footer-links {display: grid;grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));gap: 2rem;}
.footer-column h4 {color: var(--white);font-size: 1.125rem;margin-bottom: 1rem;}
.footer-column ul {list-style: none;}
.footer-column ul li {margin-bottom: 0.75rem;}
.footer-column ul li a,.footer-column ul li {color: rgba(255, 255, 255, 0.7);text-decoration: none;transition: var(--transition);}
.footer-column ul li a:hover {color: var(--white);padding-left: 5px;}
.footer-bottom {padding-top: 2rem;border-top: 1px solid rgba(255, 255, 255, 0.1);text-align: center;font-size: 0.9375rem;}
.footer-tagline {margin-top: 0.5rem;color: var(--accent);font-style: italic;}

/* ===== SCROLL ANIMATIONS ===== */
[data-scroll] {opacity: 0;transform: translateY(80px) scale(0.95);transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1);will-change: opacity, transform;}
[data-scroll].in-view {opacity: 1;transform: translateY(0) scale(1);}

/* Staggered animations for grid items */
.stats-grid [data-scroll]:nth-child(1) {transition-delay: 0.1s;}
.stats-grid [data-scroll]:nth-child(2) {transition-delay: 0.2s;}
.stats-grid [data-scroll]:nth-child(3) {transition-delay: 0.3s;}
.stats-grid [data-scroll]:nth-child(4) {transition-delay: 0.4s;}

.cta-grid [data-scroll]:nth-child(1) {transition-delay: 0.1s;}
.cta-grid [data-scroll]:nth-child(2) {transition-delay: 0.2s;}
.cta-grid [data-scroll]:nth-child(3) {transition-delay: 0.3s;}

.values-grid .value-card:nth-child(1) {animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s backwards;}
.values-grid .value-card:nth-child(2) {animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s backwards;}
.values-grid .value-card:nth-child(3) {animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s backwards;}

@keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
@keyframes fadeInUp {from {opacity: 0;transform: translateY(50px);} to {opacity: 1;transform: translateY(0);}}
@keyframes fadeInScale {from {opacity: 0;transform: scale(0.9);} to {opacity: 1;transform: scale(1);}}
@keyframes slideInLeft {from {opacity: 0;transform: translateX(-60px);} to {opacity: 1;transform: translateX(0);}}
@keyframes slideInRight {from {opacity: 0;transform: translateX(60px);} to {opacity: 1;transform: translateX(0);}}

/* ===== STORY PAGE ===== */
.timeline-nav {position: sticky;top: 70px;background: var(--white);padding: 2rem 0;z-index: 100;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);}
.timeline-progress {position: relative;height: 2px;background: rgba(26, 77, 46, 0.2);margin-bottom: 1rem;}
.progress-bar {position: absolute;top: 0;left: 0;height: 100%;background: var(--primary);width: 0%;transition: width 0.3s ease;}
.timeline-dots {display: flex;justify-content: space-between;}
.timeline-dot {display: flex;flex-direction: column;align-items: center;gap: 0.5rem;background: none;border: none;cursor: pointer;transition: var(--transition);}
.timeline-dot .dot {width: 16px;height: 16px;border-radius: 50%;border: 2px solid var(--primary);background: var(--white);transition: var(--transition);}
.timeline-dot.active .dot,.timeline-dot:hover .dot {background: var(--primary);transform: scale(1.2);}
.timeline-dot .label {font-size: 0.875rem;font-weight: 600;color: var(--text-muted);transition: var(--transition);}
.timeline-dot.active .label,.timeline-dot:hover .label {color: var(--primary);}
.story-chapter {padding: var(--section-padding) 0;}
.story-chapter:nth-child(even) {background: var(--light);}
.chapter-layout {display: grid;grid-template-columns: 1fr 1fr;gap: 5rem;align-items: center;}
.story-chapter.reverse .chapter-layout {direction: rtl;}
.story-chapter.reverse .chapter-layout > * {direction: ltr;}
.image-frame {position: relative;border-radius: 20px;overflow: hidden;box-shadow: var(--shadow-lg);}
.image-frame img {width: 100%;height: 500px;object-fit: cover;display: block;}
.image-overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 50%);}
.chapter-number {display: inline-block;font-size: 0.875rem;font-weight: 700;text-transform: uppercase;letter-spacing: 2px;color: var(--accent);margin-bottom: 1rem;}
.chapter-title {font-size: clamp(2rem, 4vw, 3rem);color: var(--primary);margin-bottom: 2rem;}
.chapter-text {font-size: 1.0625rem;line-height: 1.9;color: var(--text-dark);}
.lead-text {font-size: 1.375rem;font-weight: 500;color: var(--primary);margin-bottom: 1.5rem;line-height: 1.6;}
.chapter-text p {margin-bottom: 1.5rem;}
.story-quote {margin: 2.5rem 0;padding: 2rem 2.5rem;background: rgba(212, 165, 116, 0.1);border-left: 4px solid var(--accent);border-radius: 10px;font-size: 1.25rem;font-style: italic;color: var(--primary);line-height: 1.7;}
.chapter-footer {margin-top: 3rem;padding-top: 2rem;border-top: 2px solid rgba(26, 77, 46, 0.2);}
.emphasis {font-size: 1.25rem;font-weight: 600;color: var(--primary);margin-bottom: 1.5rem;line-height: 1.6;}
.story-closing {background: linear-gradient(135deg, #1a4d2e 0%, #2d6a4f 100%);color: var(--white);text-align: center;padding: var(--section-padding) 0;}
.closing-content h2 {font-size: clamp(2rem, 5vw, 3.5rem);color: var(--white);margin-bottom: 1.5rem;}
.closing-content p {font-size: 1.25rem;max-width: 700px;margin: 0 auto 2.5rem;opacity: 0.95;line-height: 1.8;}
.closing-actions {display: flex;gap: 1.5rem;justify-content: center;flex-wrap: wrap;}

/* Continue styles for Mission, Impact, and Donate pages... */
.mission-statement {background: var(--white);padding: var(--section-padding) 0;text-align: center;}
.statement-content h2 {font-size: clamp(2rem, 5vw, 3.5rem);color: var(--primary);margin-bottom: 2rem;line-height: 1.3;}
.lead-quote {font-size: 1.25rem;line-height: 1.9;color: var(--text-muted);max-width: 800px;margin: 0 auto;}
.core-values {background: var(--light);padding: var(--section-padding) 0;}
.section-header {text-align: center;margin-bottom: 4rem;}
.values-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 2.5rem;}
.value-card {background: var(--white);padding: 3rem 2rem;border-radius: 20px;box-shadow: var(--shadow-sm);transition: var(--transition);text-align: center;}
.value-card:hover {transform: translateY(-10px);box-shadow: var(--shadow-lg);}
.value-visual {margin-bottom: 2rem;}
.value-icon-large {width: 100px;height: 100px;margin: 0 auto;display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg, #1a4d2e 0%, #2d6a4f 100%);border-radius: 50%;color: var(--white);}
.value-card h3 {font-size: 1.75rem;color: var(--primary);margin-bottom: 1rem;}
.value-card p {color: var(--text-muted);line-height: 1.7;}
.what-we-do {padding: var(--section-padding) 0;}
.ministry-item {display: grid;grid-template-columns: 1.2fr 1fr;gap: 4rem;align-items: center;margin-bottom: 5rem;}
.ministry-item.reverse {direction: rtl;}
.ministry-item.reverse > * {direction: ltr;}
.ministry-visual {position: relative;border-radius: 20px;overflow: hidden;box-shadow: var(--shadow-lg);}
.ministry-visual img {width: 100%;height: 400px;object-fit: cover;display: block;}
.ministry-number {font-family: var(--font-heading);font-size: 5rem;font-weight: 700;color: rgba(26, 77, 46, 0.1);line-height: 1;margin-bottom: 0.5rem;}
.ministry-content h3 {font-size: 2rem;color: var(--primary);margin-bottom: 1rem;}
.ministry-content p {font-size: 1.0625rem;color: var(--text-muted);line-height: 1.8;margin-bottom: 1.5rem;}
.ministry-list {list-style: none;margin-bottom: 0;}
.ministry-list li {padding-left: 2rem;position: relative;margin-bottom: 0.75rem;color: var(--text-dark);}
.ministry-list li::before {content: '✓';position: absolute;left: 0;color: var(--primary);font-weight: 700;}
.vision-section {background: var(--light);padding: var(--section-padding) 0;}
.vision-intro {font-size: 1.25rem;text-align: center;max-width: 700px;margin: 0 auto 3rem;color: var(--text-muted);line-height: 1.8;}
.vision-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap: 2rem;margin-bottom: 3rem;}
.vision-item {padding: 2.5rem 2rem;background: var(--white);border-radius: 15px;box-shadow: var(--shadow-sm);transition: var(--transition);}
.vision-item:hover {transform: translateY(-5px);box-shadow: var(--shadow-md);}
.vision-item h4 {font-size: 1.375rem;color: var(--primary);margin-bottom: 1rem;}
.vision-item p {color: var(--text-muted);line-height: 1.7;}
.vision-cta {text-align: center;margin-top: 3rem;}
.vision-cta p {font-size: 1.25rem;color: var(--text-dark);margin-bottom: 2rem;}

/* IMPACT PAGE */
.impact-stats-section {padding: var(--section-padding) 0;background: var(--white);}
.stats-intro {text-align: center;font-size: 1.25rem;color: var(--text-muted);max-width: 700px;margin: 0 auto 4rem;line-height: 1.8;}
.stats-mega-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 3rem;}
.mega-stat {text-align: center;padding: 3rem 2rem;background: linear-gradient(135deg, #fdfaf7 0%, #f9f6f2 100%);border-radius: 20px;box-shadow: var(--shadow-sm);transition: var(--transition);}
.mega-stat:hover {transform: translateY(-10px);box-shadow: var(--shadow-lg);}
.mega-number {font-family: var(--font-heading);font-size: clamp(3rem, 6vw, 4.5rem);font-weight: 700;color: var(--primary);line-height: 1;margin-bottom: 1rem;}
.mega-number::after {content: '+';}
.mega-label {font-size: 1.375rem;font-weight: 600;color: var(--text-dark);margin-bottom: 0.75rem;}
.mega-desc {color: var(--text-muted);font-size: 1rem;}
.testimonies-section {background: var(--light);padding: var(--section-padding) 0;}
.testimonies-grid {display: flex;flex-direction: column;gap: 3rem;}
.testimony-feature {display: grid;grid-template-columns: 1fr 1.2fr;gap: 3rem;background: var(--white);border-radius: 20px;overflow: hidden;box-shadow: var(--shadow-md);transition: var(--transition);}
.testimony-feature:hover {transform: translateY(-5px);box-shadow: var(--shadow-lg);}
.testimony-image {position: relative;min-height: 350px;}
.testimony-image img {width: 100%;height: 100%;object-fit: cover;}
.testimony-overlay {position: absolute;inset: 0;background: linear-gradient(to top, rgba(26, 77, 46, 0.3) 0%, transparent 50%);}
.testimony-content {padding: 3rem;}
.testimony-content h3 {font-size: 1.75rem;color: var(--primary);margin-bottom: 1.5rem;}
.testimony-content blockquote {font-size: 1.125rem;line-height: 1.8;color: var(--text-dark);margin-bottom: 2rem;font-style: italic;}
.testimony-author strong {display: block;font-size: 1.125rem;color: var(--primary);margin-bottom: 0.25rem;}
.testimony-author span {color: var(--text-muted);font-size: 0.9375rem;}
.impact-areas {background: var(--white);padding: var(--section-padding) 0;}
.impact-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 2.5rem;}
.impact-area-card {padding: 3rem 2rem;background: var(--light);border-radius: 20px;transition: var(--transition);}
.impact-area-card:hover {background: var(--white);box-shadow: var(--shadow-lg);transform: translateY(-5px);}
.impact-icon {width: 80px;height: 80px;margin: 0 auto 2rem;display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg, #1a4d2e 0%, #2d6a4f 100%);border-radius: 50%;color: var(--white);}
.impact-area-card h3 {text-align: center;font-size: 1.75rem;color: var(--primary);margin-bottom: 1.5rem;}
.impact-details {display: grid;grid-template-columns: repeat(3, 1fr);gap: 1.5rem;margin: 2rem 0;}
.detail-item {text-align: center;}
.detail-num {display: block;font-family: var(--font-heading);font-size: 2rem;font-weight: 700;color: var(--primary);margin-bottom: 0.25rem;}
.detail-label {font-size: 0.875rem;color: var(--text-muted);}
.impact-area-card > p {text-align: center;color: var(--text-dark);line-height: 1.7;}
.video-section {background: var(--dark);padding: var(--section-padding) 0;text-align: center;}
.video-content h2 {font-size: clamp(2rem, 5vw, 3rem);color: var(--white);margin-bottom: 1rem;}
.video-content p {font-size: 1.25rem;color: rgba(255, 255, 255, 0.8);margin-bottom: 3rem;}
.video-embed {max-width: 900px;margin: 0 auto;}
.video-placeholder {aspect-ratio: 16/9;background: linear-gradient(135deg, rgba(26, 77, 46, 0.3) 0%, rgba(45, 106, 79, 0.3) 100%);border-radius: 20px;display: flex;flex-direction: column;align-items: center;justify-content: center;color: var(--white);gap: 1rem;border: 2px solid rgba(255, 255, 255, 0.2);}
.impact-cta-section {background: var(--light);padding: var(--section-padding) 0;}
.impact-cta-content {text-align: center;max-width: 700px;margin: 0 auto;}
.impact-cta-content h2 {font-size: clamp(2rem, 5vw, 3.5rem);color: var(--primary);margin-bottom: 1.5rem;}
.impact-cta-content p {font-size: 1.25rem;color: var(--text-muted);line-height: 1.8;margin-bottom: 2.5rem;}
.cta-buttons {display: flex;gap: 1.5rem;justify-content: center;flex-wrap: wrap;}

/* DONATE PAGE */
.scripture-banner {background: linear-gradient(135deg, #1a4d2e 0%, #2d6a4f 100%);padding: 4rem 0;color: var(--white);text-align: center;}
.scripture-content {max-width: 800px;margin: 0 auto;}
.quote-mark {color: var(--accent);opacity: 0.5;margin-bottom: 1.5rem;}
.scripture-content blockquote {font-size: clamp(1.25rem, 3vw, 1.75rem);font-style: italic;line-height: 1.7;margin-bottom: 1rem;}
.scripture-content cite {font-size: 1.125rem;opacity: 0.9;font-style: normal;}
.ways-to-give-section {padding: var(--section-padding) 0;background: var(--light);}
.giving-options {display: grid;grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));gap: 2.5rem;margin-top: 3rem;}
.giving-card {background: var(--white);padding: 3rem;border-radius: 25px;box-shadow: var(--shadow-md);transition: var(--transition);position: relative;border: 2px solid transparent;}
.giving-card:hover {transform: translateY(-10px);box-shadow: var(--shadow-xl);}
.giving-card.featured {border-color: var(--accent);box-shadow: 0 10px 40px rgba(212, 165, 116, 0.25);}
.giving-header {text-align: center;margin-bottom: 2rem;}
.giving-icon {width: 100px;height: 100px;margin: 0 auto 2rem;display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg, #1a4d2e 0%, #2d6a4f 100%);border-radius: 50%;color: var(--white);}
.giving-card h3 {font-size: 1.875rem;color: var(--primary);margin-bottom: 0.75rem;}
.giving-tagline {color: var(--text-muted);font-size: 1.0625rem;}
.giving-benefits {margin: 2rem 0;}
.benefit-item {display: flex;align-items: flex-start;gap: 1rem;margin-bottom: 1rem;}
.benefit-item svg {flex-shrink: 0;color: var(--primary);margin-top: 0.25rem;}
.benefit-item span {color: var(--text-dark);line-height: 1.6;}
.giving-description {margin: 2rem 0;}
.giving-description p {color: var(--text-muted);line-height: 1.8;}
.giving-amounts {display: grid;grid-template-columns: repeat(2, 1fr);gap: 0.75rem;margin-bottom: 2rem;}
.amount-btn {padding: 1rem;background: rgba(26, 77, 46, 0.05);border: 2px solid rgba(26, 77, 46, 0.2);border-radius: 12px;font-weight: 600;font-size: 1.125rem;color: var(--primary);cursor: pointer;transition: var(--transition);font-family: var(--font-heading);}
.amount-btn:hover,.amount-btn.active {background: var(--primary);color: var(--white);border-color: var(--primary);}
.amount-btn span {font-size: 0.875rem;opacity: 0.7;}
.program-list {margin: 2rem 0;}
.program-item {padding: 1.5rem;background: rgba(26, 77, 46, 0.03);border-radius: 12px;margin-bottom: 1rem;}
.program-item strong {display: block;color: var(--primary);font-size: 1.125rem;margin-bottom: 0.5rem;}
.program-item span {color: var(--text-muted);font-size: 0.9375rem;}
.other-ways-section {background: var(--white);padding: var(--section-padding) 0;}
.other-ways-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));gap: 2.5rem;}
.other-way-card {padding: 3rem 2rem;background: var(--light);border-radius: 20px;text-align: center;transition: var(--transition);}
.other-way-card:hover {background: var(--white);box-shadow: var(--shadow-lg);transform: translateY(-5px);}
.other-icon {width: 100px;height: 100px;margin: 0 auto 2rem;display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg, #1a4d2e 0%, #2d6a4f 100%);border-radius: 50%;color: var(--white);}
.other-way-card h3 {font-size: 1.75rem;color: var(--primary);margin-bottom: 1.5rem;}
.other-way-card p {color: var(--text-muted);line-height: 1.7;margin-bottom: 2rem;}
.commitment-list {text-align: left;list-style: none;margin-bottom: 2rem;}
.commitment-list li {padding-left: 1.75rem;position: relative;margin-bottom: 0.75rem;color: var(--text-dark);}
.commitment-list li::before {content: '✓';position: absolute;left: 0;color: var(--primary);font-weight: 700;}
.share-buttons {display: flex;gap: 1rem;justify-content: center;flex-wrap: wrap;}
.share-btn {display: flex;align-items: center;gap: 0.5rem;padding: 0.75rem 1.5rem;border: none;border-radius: 30px;font-weight: 600;cursor: pointer;transition: var(--transition);font-family: var(--font-body);color: var(--white);}
.share-btn.facebook {background: #1877f2;}
.share-btn.twitter {background: #1da1f2;}
.share-btn.whatsapp {background: #25d366;}
.share-btn:hover {transform: translateY(-2px);box-shadow: var(--shadow-md);}
.impact-of-giving {background: var(--light);padding: var(--section-padding) 0;}
.impact-breakdown {display: grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap: 2rem;}
.breakdown-card {padding: 2.5rem 2rem;background: var(--white);border-radius: 20px;box-shadow: var(--shadow-sm);text-align: center;transition: var(--transition);}
.breakdown-card:hover {transform: translateY(-5px);box-shadow: var(--shadow-md);}
.breakdown-amount {font-family: var(--font-heading);font-size: 3rem;font-weight: 700;color: var(--accent);margin-bottom: 1rem;}
.breakdown-card h4 {font-size: 1.375rem;color: var(--primary);margin-bottom: 1rem;}
.breakdown-card p {color: var(--text-muted);line-height: 1.7;}
.faq-section {background: var(--white);padding: var(--section-padding) 0;}
.faq-list {max-width: 800px;margin: 0 auto;}
.faq-item {margin-bottom: 1.5rem;background: var(--light);border-radius: 15px;overflow: hidden;transition: var(--transition);}
.faq-item:hover {box-shadow: var(--shadow-sm);}
.faq-question {width: 100%;padding: 1.75rem 2rem;background: none;border: none;display: flex;justify-content: space-between;align-items: center;text-align: left;font-size: 1.125rem;font-weight: 600;color: var(--primary);cursor: pointer;transition: var(--transition);font-family: var(--font-body);}
.faq-question:hover {color: var(--primary-light);}
.faq-icon {transition: transform 0.3s ease;}
.faq-item.active .faq-icon {transform: rotate(180deg);}
.faq-answer {max-height: 0;overflow: hidden;transition: max-height 0.3s ease;}
.faq-item.active .faq-answer {max-height: 500px;}
.faq-answer p {padding: 0 2rem 2rem;color: var(--text-muted);line-height: 1.8;}
.final-cta-section {background: linear-gradient(135deg, #1a4d2e 0%, #2d6a4f 100%);color: var(--white);padding: var(--section-padding) 0;text-align: center;}
.final-cta-content h2 {font-size: clamp(2rem, 5vw, 3.5rem);color: var(--white);margin-bottom: 1.5rem;}
.final-cta-content p {font-size: 1.25rem;max-width: 700px;margin: 0 auto 2.5rem;opacity: 0.95;line-height: 1.8;}
.final-cta-buttons {display: flex;gap: 1.5rem;justify-content: center;flex-wrap: wrap;}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .split-content, .mission-content, .chapter-layout, .ministry-item {
        grid-template-columns: 1fr;gap: 3rem;
    }
    .story-chapter.reverse .chapter-layout,.ministry-item.reverse {direction: ltr;}
    .image-stack {height: 400px;}
    .stack-image {width: 85%;}
    
    /* Fix mobile scaling */
    html {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    /* Mobile Navigation */
    .nav-menu {
        position: fixed;left: -100%;top: 70px;flex-direction: column;background: white;
        width: 100%;padding: 2rem 0;transition: 0.3s;box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        z-index: 999;
    }
    .nav-menu.active {left: 0;}
    .hamburger {display: flex;}
    
    /* Mobile Layout Fixes */
    .hero {
        min-height: 100vh;
        height: auto;
        padding: 120px 0 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .hero-content {
        padding: 0 1.5rem;
        max-width: 100%;
        width: 100%;
    }
    
    .hero-title {
        font-size: 2rem !important;
        line-height: 1.15;
        margin-bottom: 1.25rem;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
        margin-bottom: 2rem;
        line-height: 1.5;
    }
    
    .hero-label {
        font-size: 0.7rem;
        letter-spacing: 2px;
        padding: 0.625rem 1rem;
        margin-bottom: 1.25rem;
    }
    
    .hero-overlay {
        background: linear-gradient(135deg, rgba(13, 27, 42, 0.88) 0%, rgba(26, 77, 46, 0.82) 100%);
    }
    
    /* Fix disappearing content */
    .story-preview,
    .mission-preview,
    .impact-section,
    .cta-section {
        overflow: visible !important;
    }
    
    .content-overlay {
        padding: 3rem 0;
    }
    
    .split-content {
        gap: 2rem;
    }
    
    .section-text {
        font-size: 1rem;
    }
    
    /* Button stacking */
    .hero-actions, .closing-actions, .cta-buttons, .final-cta-buttons {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        gap: 1rem;
    }
    
    .btn-primary, .btn-secondary {
        width: 100%;
        justify-content: center;
        padding: 1rem 2rem;
        font-size: 0.95rem;
    }
    
    /* Grid fixes */
    .footer-main {grid-template-columns: 1fr;}
    .timeline-dots {flex-wrap: wrap;gap: 1rem;}
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .testimony-feature {grid-template-columns: 1fr;}
    .testimony-image {min-height: 250px;}
    .impact-details {grid-template-columns: 1fr;gap: 1rem;}
    .giving-options {grid-template-columns: 1fr;}
    
    /* Image frames on mobile - show full images */
    .image-frame {
        background: var(--dark);
    }
    
    .image-frame img {
        width: 100%;
        height: auto;
        min-height: 300px;
        object-fit: contain;
        object-position: center;
        background: var(--dark);
    }
    
    /* Mission values on mobile */
    .mission-values {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    /* Card padding reduction */
    .cta-card, .value-card {
        padding: 2rem 1.5rem;
    }
    
    /* Scroll indicator on mobile */
    .scroll-indicator {
        bottom: 2rem;
        font-size: 0.75rem;
    }
    
    .mouse {
        width: 22px;
        height: 36px;
    }
}

@media (max-width: 480px) {
    :root {
        --section-padding: clamp(3rem, 8vw, 5rem);
        --container-padding: 1.25rem;
    }
    
    html {
        font-size: 14px;
    }
    
    body {
        font-size: 14px;
    }
    
    .hero {
        padding: 100px 0 60px;
        min-height: 100vh;
    }
    
    .hero-content {
        padding: 0 1.25rem;
    }
    
    .hero-title {
        font-size: 1.75rem !important;
        line-height: 1.15;
        margin-bottom: 1rem;
    }
    
    .hero-subtitle {
        font-size: 0.95rem !important;
        margin-bottom: 1.75rem;
        line-height: 1.5;
    }
    
    .hero-label {
        font-size: 0.65rem;
        letter-spacing: 1.5px;
        padding: 0.5rem 0.875rem;
        margin-bottom: 1rem;
    }
    
    .hero-actions {
        gap: 0.875rem;
    }
    
    .btn-primary, .btn-secondary {
        padding: 0.875rem 1.75rem;
        font-size: 0.9rem;
    }
    
    .page-title {
        font-size: 1.75rem !important;
    }
    
    .section-heading {
        font-size: 1.5rem !important;
    }
    
    .section-label {
        font-size: 0.7rem;
        letter-spacing: 1.5px;
    }
    
    /* Icon sizes */
    .value-icon-large, .cta-icon, .other-icon, .giving-icon {
        width: 60px;
        height: 60px;
    }
    
    /* Stat numbers smaller on mobile */
    .stat-number {
        font-size: 2.25rem !important;
    }
    
    .mega-number {
        font-size: 2.25rem !important;
    }
    
    /* Highlight items on mobile */
    .highlight-item {
        padding: 1.25rem;
    }
    
    /* Navigation brand smaller */
    .nav-brand {
        font-size: 1.25rem;
    }
    
    .brand-icon {
        font-size: 1.5rem;
    }
    
    /* Giving amounts */
    .giving-amounts {
        grid-template-columns: 1fr;
    }
    
    /* Footer adjustments */
    .footer-links {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    /* Scripture quote */
    .scripture-quote {
        padding: 2rem 1.5rem;
    }
    
    .scripture-quote p {
        font-size: 1.125rem;
    }
}

/* ===== ADDITIONAL ENHANCEMENTS ===== */
.section-heading::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
    border-radius: 2px;
}

/* Enhanced hover effects for all cards */
.value-card, .cta-card, .other-way-card, .breakdown-card {
    cursor: pointer;
    will-change: transform;
}

/* Smooth page load animation */
body {
    animation: fadeIn 0.6s ease-out;
}

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

/* Enhanced link underlines */
.link-arrow, .cta-link {
    background-image: linear-gradient(var(--primary), var(--primary));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition: background-size 0.3s ease-out;
}

.link-arrow:hover, .cta-link:hover {
    background-size: 100% 2px;
}

/* Focus states for accessibility */
button:focus-visible,
a:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ===== DIRECT CONTACT SECTION ===== */
.direct-contact-section {
    padding: var(--section-padding) 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    position: relative;
    overflow: hidden;
}

.direct-contact-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.contact-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.contact-card {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.contact-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.contact-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: 50%;
    color: white;
}

.contact-card h3 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: var(--primary);
}

.contact-label {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    font-weight: 500;
}

.contact-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.contact-value:hover {
    color: var(--accent);
}

.bank-details {
    background: var(--light);
    padding: 1.5rem;
    border-radius: 12px;
    margin: 1.5rem 0;
    text-align: left;
}

.bank-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.bank-detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
}

.detail-value {
    font-size: 1rem;
    color: var(--primary);
    font-weight: 700;
    font-family: 'Courier New', monospace;
}

.copy-account-btn {
    margin-top: 1rem;
    width: 100%;
    cursor: pointer;
}

.phone-card .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 1rem;
}

/* Mobile responsiveness for contact cards */
@media (max-width: 768px) {
    .contact-cards-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .contact-card {
        padding: 2rem 1.5rem;
    }
    
    .contact-value {
        font-size: 1.25rem;
    }
}

/* ===== QUICK CONTACT CARDS (Homepage/Story) ===== */
.quick-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.quick-contact-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 1.75rem;
    border-radius: 12px;
    text-align: center;
    border: 2px solid rgba(26, 77, 46, 0.1);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.quick-contact-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent);
}

.quick-contact-card svg {
    margin: 0 auto 1rem;
    color: var(--primary);
}

.quick-contact-card h4 {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
    color: var(--primary);
    font-weight: 600;
}

.quick-contact-link {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent);
    transition: color 0.3s ease;
}

.quick-contact-link:hover {
    color: var(--primary);
}

.bank-mini {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.account-mini {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    font-family: 'Courier New', monospace;
}

@media (max-width: 640px) {
    .quick-contact-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== VIDEO SECTIONS ===== */
.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}

.hero-image {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.hero-image-fallback {
    z-index: -1;
}

/* Show image if video fails to load */
.hero-video:not([src]) + .hero-image-fallback,
video.hero-video[error] + .hero-image-fallback {
    z-index: 1;
}

.hero-video-full {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.video-testimony-section {
    padding: var(--section-padding) 0;
    background: linear-gradient(180deg, var(--light) 0%, #f8f6f3 100%);
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.video-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.video-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background: #000;
    overflow: hidden;
}

.ministry-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-caption {
    padding: 1.5rem;
    text-align: center;
}

.video-caption h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--primary);
}

.video-caption p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.video-frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 12px;
}

.chapter-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Mobile video adjustments */
@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .hero-video,
    .hero-video-full {
        min-width: 100%;
        min-height: 100%;
    }
}

/* ===== CHILDREN GALLERY ===== */
.children-gallery-section {
    padding: var(--section-padding) 0;
    background: var(--white);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 1;
    box-shadow: var(--shadow-md);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    cursor: pointer;
}

.gallery-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-xl);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    padding: 1.5rem;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-item:hover .gallery-overlay {
    transform: translateY(0);
}

.gallery-overlay p {
    color: white;
    font-weight: 600;
    font-size: 1.125rem;
    margin: 0;
    text-align: center;
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .gallery-item {
        aspect-ratio: 1;
    }
    
    .gallery-item img {
        object-fit: contain;
        background: var(--dark);
    }
    
    /* Dual Hero Mobile - Stack Vertically */
    .hero-split-layout {
        grid-template-columns: 1fr;
        grid-template-rows: 50vh 50vh;
    }
    
    .hero-image-caption,
    .hero-video-label {
        bottom: 15px;
        left: 15px;
        padding: 0.625rem 1rem;
        font-size: 0.8rem;
    }
}

/* ===== VIDEO CONTROLS & OVERLAYS ===== */
.video-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    z-index: 10;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.video-play-overlay:hover {
    background: rgba(0, 0, 0, 0.5);
}

.video-play-btn {
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease;
    padding: 0;
}

.video-play-btn:hover {
    transform: scale(1.1);
}

.mute-indicator {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    z-index: 20;
    display: none;
    animation: fadeInOut 1.5s ease;
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(-10px); }
    20% { opacity: 1; transform: translateY(0); }
    80% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-10px); }
}

/* Video cursor hint */
video[controls] {
    cursor: pointer;
}

video[controls]:hover {
    filter: brightness(1.05);
}

/* ===== FOUNDER SECTION ===== */
.founder-section {
    padding: var(--section-padding) 0;
    background: linear-gradient(180deg, var(--white) 0%, var(--light) 100%);
}

.founder-content {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 4rem;
    align-items: start;
}

.founder-image {
    position: sticky;
    top: 100px;
}

.image-frame-founder {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.image-frame-founder:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25);
}

.image-frame-founder img {
    width: 100%;
    height: auto;
    display: block;
}

.founder-badge {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: var(--shadow-lg);
}

.founder-badge svg {
    width: 18px;
    height: 18px;
}

.founder-text {
    padding-top: 1rem;
}

.founder-intro {
    font-size: 1.375rem;
    font-style: italic;
    color: var(--accent);
    margin-bottom: 2rem;
    font-weight: 500;
}

.founder-description {
    font-size: 1.0625rem;
    line-height: 1.9;
    color: var(--text-dark);
}

.founder-description p {
    margin-bottom: 1.5rem;
}

.founder-quote {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    padding: 2rem;
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    margin: 2.5rem 0;
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.7;
    box-shadow: var(--shadow-md);
}

.founder-tribute {
    background: var(--light);
    padding: 1.75rem;
    border-radius: 12px;
    border-left: 4px solid var(--accent);
    font-size: 1.0625rem;
    margin-top: 2rem;
    line-height: 1.8;
}

.founder-tribute strong {
    color: var(--primary);
    font-size: 1.125rem;
}

@media (max-width: 968px) {
    .founder-content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .founder-image {
        position: relative;
        top: 0;
        max-width: 400px;
        margin: 0 auto;
    }
}