/* ===== ROOT VARIABLES ===== */
:root {
    --primary: #00a758;
    --primary-dark: #007c42;
    --primary-light: #e3f7ec;
    --accent: #f58334;
    --accent-dark: #d3691c;
    --accent-light: #fde7d3;
    --navy: #3d4094;
    --gold: #fec437;
    --charcoal: #4c4c4d;
    --text-dark: #1a1a1a;
    --text-muted: #4a4a4a;
    --white: #fefefe;
    --light-bg: #f8f9fa;
    --border: #e9ecef;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif; color: var(--text-dark); overflow-x: hidden; }
h1, h2, h3, h4, h5, h6, .section-title, .navbar-brand-text { font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif; letter-spacing: -0.02em; }
a { text-decoration: none; }

/* TOP BAR */
.top-bar { background: #081f11; color: #eafff2; font-size: 0.82rem; padding: 7px 0; }
.top-bar a { color: #eafff2; }
.top-bar a:hover { color: #fff; }
.top-bar-social { display: flex; align-items: center; gap: 8px; }
.top-bar-social a {
    width: 24px; height: 24px; border-radius: 50%; background: #fff;
    font-size: 0.72rem; color: var(--primary); display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25); transition: all 0.25s ease;
}
.top-bar-social a:hover { background: var(--gold); color: var(--primary-dark); transform: translateY(-2px); }
.top-bar-social a.top-bar-whatsapp:hover { background: #25d366; color: #fff; }

/* Floating WhatsApp bar, sticked bottom-right */
.floating-whatsapp-bar {
    position: fixed; right: 24px; bottom: 22px; z-index: 1040;
    display: flex; align-items: center; background: #25d366; color: #fff !important;
    font-weight: 700; font-size: 0.85rem; padding: 5px 16px; border-radius: 20px;
    box-shadow: 0 4px 18px rgba(37,211,102,0.55); transition: transform 0.25s ease, box-shadow 0.25s ease;
    animation: floatingWhatsappPulse 2.2s infinite;
}
.floating-whatsapp-bar i { font-size: 1rem; }
.floating-whatsapp-bar:hover { color: #fff !important; transform: translateY(-2px); box-shadow: 0 6px 22px rgba(37,211,102,0.7); animation-play-state: paused; }
@keyframes floatingWhatsappPulse {
    0% { box-shadow: 0 4px 18px rgba(37,211,102,0.55), 0 0 0 0 rgba(37,211,102,0.55); }
    70% { box-shadow: 0 4px 18px rgba(37,211,102,0.55), 0 0 0 14px rgba(37,211,102,0); }
    100% { box-shadow: 0 4px 18px rgba(37,211,102,0.55), 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width: 575px) {
    .floating-whatsapp-bar { right: 16px; bottom: 16px; padding: 11px 18px; font-size: 0.85rem; }
}
.top-bar-causes-btn {
    background: rgba(255,255,255,0.12); backdrop-filter: blur(6px); border: 1.5px solid rgba(255,255,255,0.55);
    color: #fff !important; border-radius: 20px; padding: 3px 16px; font-weight: 600;
    font-size: 0.8rem; transition: all 0.25s ease; display: inline-block;
}
.top-bar-causes-btn:hover { background: rgba(255,255,255,0.22); border-color: #fff; color: #fff !important; transform: translateY(-1px); }
.top-bar-csr-btn {
    position: relative; overflow: hidden; background: rgba(245,130,51,0.16); backdrop-filter: blur(6px);
    border: 1.5px solid rgba(245,130,51,0.7);
    color: #fff !important; border-radius: 20px; padding: 4px 18px 4px 14px; font-weight: 700;
    font-size: 0.8rem; letter-spacing: 0.2px; transition: all 0.25s ease; display: inline-flex; align-items: center;
    margin-left: 10px; box-shadow: 0 0 0 0 rgba(245,130,51,0.6);
    animation: topBarCsrPulse 2.2s infinite;
}
.top-bar-csr-btn::before {
    content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-20deg); animation: topBarCsrShine 3s ease-in-out infinite;
}
.top-bar-csr-btn i { animation: topBarCsrWiggle 2.2s ease-in-out infinite; }
.top-bar-csr-btn:hover { background: rgba(245,130,51,0.3); border-color: #fff; color: #fff !important; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(245,130,51,0.45); animation-play-state: paused; }
@keyframes topBarCsrShine {
    0% { left: -60%; }
    45% { left: 130%; }
    100% { left: 130%; }
}
@keyframes topBarCsrWiggle {
    0%, 100% { transform: rotate(0deg); }
    5% { transform: rotate(-12deg); }
    10% { transform: rotate(10deg); }
    15% { transform: rotate(0deg); }
}
@keyframes topBarCsrPulse {
    0% { box-shadow: 0 0 0 0 rgba(245,130,51,0.55); }
    70% { box-shadow: 0 0 0 7px rgba(245,130,51,0); }
    100% { box-shadow: 0 0 0 0 rgba(245,130,51,0); }
}

/* NAVBAR */
.main-navbar { background: var(--white) !important; box-shadow: 0 2px 15px rgba(0,0,0,0.08); padding: 10px 0; position: static; }
.navbar-brand-text { font-size: 1.3rem; font-weight: 800; color: var(--primary); line-height: 1.1; }
.navbar-brand-text small { font-size: 0.7rem; font-weight: 400; color: var(--text-muted); display: block; }
.nav-link-custom { color: var(--text-dark) !important; font-weight: 500; font-size: 0.84rem; padding: 6px 10px !important; white-space: nowrap; transition: color 0.2s; }
@media (min-width: 992px) and (max-width: 1200px) {
    .nav-link-custom { font-size: 0.78rem; padding: 6px 7px !important; }
}
.nav-link-custom:hover { color: var(--primary) !important; }
.nav-link-custom.active { color: var(--primary) !important; font-weight: 700; }
.btn-donate-nav { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: var(--white) !important; border-radius: 25px; padding: 8px 22px !important; font-weight: 700; font-size: 0.88rem; transition: all 0.25s; box-shadow: 0 4px 14px rgba(245,130,51,0.3); }
.btn-donate-nav:hover { color: var(--white) !important; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(245,130,51,0.45); }

/* NAVBAR — "Projects" mega menu (one column per program, projects listed below each) */
.mega-menu-programs { width: 640px; max-width: 90vw; padding: 26px 30px; left: 0; right: auto; transform: none; border-radius: 14px; }
.mega-menu-program-title { display: block; font-weight: 800; font-size: 0.95rem; color: var(--primary); text-decoration: none; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--primary-light); }
.mega-menu-program-title:hover { color: var(--accent); }
.mega-menu-project-list { list-style: none; margin: 0; padding: 0; }
.mega-menu-project-list li { margin-bottom: 4px; }
.mega-menu-project-list a { display: block; color: var(--text-dark); font-size: 0.85rem; padding: 5px 8px; border-radius: 6px; text-decoration: none; transition: all 0.2s; }
.mega-menu-project-list a:hover { background: var(--light-bg); color: var(--primary); padding-left: 12px; }
.mega-menu-empty { color: var(--text-muted); font-size: 0.8rem; font-style: italic; padding: 5px 8px; }
@media (max-width: 991px) {
    .mega-menu-programs { width: 100%; max-width: 100%; left: 0; transform: none; box-shadow: none !important; padding: 10px 20px; }
}

/* HERO — full-bleed background photo */
.hero-section {
    background: linear-gradient(160deg, #081f11 0%, #0f4025 48%, #081f11 100%); /* instant-paint fallback under the photo */
    /* Content is top-anchored (align-items:flex-start + padding-top) rather
       than vertically centered. Centering used to pull the heading close
       to (or, on short windows, right up against) the navbar logo, which
       overlaps down into this section by design (see .navbar-logo-badge) —
       and even with a min-height floor to prevent collisions, centering
       still left a large empty gap above the content on tall windows.
       Fixed padding-top makes the heading's position independent of
       viewport height entirely: no gap on tall screens, no collision risk
       on short ones, no floor hack needed. 90px still clears the logo's
       dip into this section. */
    min-height: 92vh; display: flex; align-items: flex-start; position: relative; overflow: hidden; padding: 90px 0 70px;
}
.hero-section::before { content: ''; position: absolute; top: -100px; right: -100px; width: 500px; height: 500px; background: rgba(255,255,255,0.03); border-radius: 50%; z-index: 1; }
.hero-section::after { content: ''; position: absolute; bottom: -150px; left: -80px; width: 400px; height: 400px; background: rgba(255,255,255,0.03); border-radius: 50%; z-index: 1; }
.hero-section > .container { position: relative; z-index: 2; }
.hero-bg-carousel, .hero-bg-carousel .carousel, .hero-bg-carousel .carousel-inner, .hero-bg-carousel .carousel-item { position: absolute; inset: 0; height: 100%; }
.hero-bg-carousel { z-index: 0; }
.hero-bg-carousel img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); animation: heroKenBurnsBg 9s ease-out forwards; }
@keyframes heroKenBurnsBg { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background:
        radial-gradient(circle at 88% 8%, rgba(245,130,51,0.5) 0%, transparent 42%),
        radial-gradient(circle at 6% 95%, rgba(0,80,40,0.55) 0%, transparent 48%),
        linear-gradient(180deg, rgba(5,18,10,0.4) 0%, rgba(5,18,10,0.82) 100%);
}
.hero-badge { background: rgba(245,130,51,0.18); color: #ffc199; border: 1px solid rgba(245,130,51,0.45); border-radius: 20px; padding: 4px 13px; font-size: 0.72rem; font-weight: 700; display: inline-block; margin-bottom: 16px; letter-spacing: 0.6px; text-transform: uppercase; }
.hero-section h1 { font-size: 2rem; font-weight: 700; color: var(--white); line-height: 1.15; margin-bottom: 18px; letter-spacing: -0.03em; }
.hero-section h1 span { color: var(--accent); }
.hero-section .hero-desc { color: rgba(255,255,255,0.85); font-size: 1.05rem; line-height: 1.8; margin-bottom: 30px; }
.btn-hero-primary { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: var(--white); border-radius: 25px; padding: 10px 24px; font-weight: 700; font-size: 0.88rem; border: none; display: inline-block; transition: all 0.3s; box-shadow: 0 8px 25px rgba(245,130,51,0.35); }
.btn-hero-primary:hover { color: var(--white); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(245,130,51,0.5); }
.btn-hero-outline { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.5); border-radius: 25px; padding: 9px 20px; font-weight: 600; font-size: 0.88rem; display: inline-block; transition: all 0.3s; }
.btn-hero-outline:hover { background: rgba(255,255,255,0.1); color: var(--white); border-color: var(--white); }
.hero-stat-strip { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 32px; margin-top: 32px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.18); }
.hero-stat-strip .hs-num { font-size: 1.55rem; font-weight: 800; color: var(--accent); line-height: 1; }
.hero-stat-strip .hs-label { font-size: 0.76rem; color: rgba(255,255,255,0.75); margin-top: 4px; }

/* HERO — right-side image carousel frame */
.hero-image-wrap { position: relative; }
.hero-image-frame { position: relative; height: 460px; border-radius: 24px; overflow: hidden; border: 2px solid rgba(255,255,255,0.28); box-shadow: 0 25px 60px rgba(0,0,0,0.35); }
.hero-image-frame .carousel-inner, .hero-image-frame .carousel-item { height: 100%; }
.hero-slide-img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(1.12); }
@media (max-width: 767px) {
    .hero-image-frame { height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-slide-img { animation: none; }
}

/* HERO — entrance animation */
@keyframes heroFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.reveal-up { opacity: 0; animation: heroFadeUp 0.75s cubic-bezier(0.22,1,0.36,1) forwards; }
.reveal-up.d1 { animation-delay: .05s; } .reveal-up.d2 { animation-delay: .15s; }
.reveal-up.d3 { animation-delay: .28s; } .reveal-up.d4 { animation-delay: .40s; }
.reveal-up.d5 { animation-delay: .52s; } .reveal-up.d6 { animation-delay: .64s; }
.text-gradient-accent { background: linear-gradient(90deg, var(--accent) 0%, #ffb066 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* SECTION COMMON */
.section-pad { padding: 80px 0; }
.section-badge { background: var(--primary-light); color: var(--primary); border-radius: 25px; padding: 5px 16px; font-size: 0.8rem; font-weight: 700; display: inline-block; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.section-title { font-size: 1.9rem; font-weight: 800; color: var(--text-dark); margin-bottom: 10px; }
.section-title span { color: var(--primary); }
.section-subtitle { color: var(--text-muted); font-size: 0.98rem; max-width: 560px; margin: 0 auto; line-height: 1.7; }
.title-line { width: 55px; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 2px; margin: 12px auto 0; }

/* STATS BAR */
.stat-sep { width: 1px; background: rgba(255,255,255,0.15); height: 70px; margin: auto; }

/* CAUSES */
.cause-card { border: none; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.07); transition: all 0.3s; }
.cause-card:hover, .cause-card-new:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,167,88,0.18); }
.cause-card img { height: 195px; object-fit: cover; width: 100%; }
.cause-tag { background: var(--primary-light); color: var(--primary); font-size: 0.73rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; }
.cause-meta { font-size: 0.82rem; color: var(--text-muted); }
.cause-meta strong { color: var(--primary); }
.btn-cause { background: var(--primary); color: var(--white); border: none; border-radius: 25px; padding: 9px 22px; font-size: 0.88rem; font-weight: 600; width: 100%; transition: all 0.3s; cursor: pointer; }
.btn-cause:hover { background: var(--primary-dark); color: var(--white); }
.urgent-badge { background: #dc3545; color: #fff; font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; }

/* HOW IT WORKS */
.how-section { background: var(--light-bg); }
.step-card { text-align: center; padding: 30px 20px; position: relative; }
.step-num { width: 55px; height: 55px; background: var(--primary); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 800; margin: 0 auto 18px; }
.step-icon-box { width: 80px; height: 80px; background: var(--primary-light); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--primary); margin: 0 auto 18px; }
.step-arrow { position: absolute; right: -20px; top: 50%; transform: translateY(-50%); color: var(--primary); font-size: 1.5rem; opacity: 0.3; }

/* PROGRAMS */
.program-card { border: none; border-radius: 16px; padding: 28px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); transition: all 0.3s; border-left: 4px solid var(--border); height: 100%; }
.program-card:hover { transform: translateY(-4px); box-shadow: 0 16px 35px rgba(0,167,88,0.16); border-left-color: var(--primary); }
.prog-icon { width: 62px; height: 62px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; margin-bottom: 16px; }

/* PROGRAM PAGE — shared brand hero/CTA gradient */
.program-hero, .program-cta {
    background:
        radial-gradient(circle at 88% 10%, rgba(245,130,51,0.45) 0%, transparent 42%),
        radial-gradient(circle at 6% 92%, rgba(0,167,88,0.45) 0%, transparent 48%),
        linear-gradient(160deg, #081f11 0%, #0f4025 48%, #081f11 100%);
    position: relative; overflow: hidden;
}
.program-hero {
    padding: 80px 0 60px;
    background:
        linear-gradient(160deg, rgba(8,31,17,0.88) 0%, rgba(15,64,37,0.82) 48%, rgba(8,31,17,0.88) 100%),
        url('../images/inner-hero.png');
    background-size: cover;
    background-position: center;
}
.program-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.5); }
.program-cta { padding: 70px 0; }

/* PROJECT DETAIL — section design system */
.pd-hero-bg { background-position: center 50%; will-change: background-position; }
.pd-section { padding: 40px 0; }
.pd-section-header { text-align: center; margin-bottom: 30px; }
.pd-section-title { font-size: 1.7rem; font-weight: 800; color: var(--text-dark); margin: 0; }
.pd-section-header .title-line { margin: 12px auto 0; }
.pd-section-header--light .pd-section-title { color: #fff; }

.pd-objective-card { position: relative; display: flex; gap: 16px; background: #fff; border-radius: 16px; padding: 26px; box-shadow: 0 4px 16px rgba(0,0,0,0.06); height: 100%; overflow: hidden; border-top: 3px solid transparent; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.pd-objective-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,0.1); border-top-color: var(--primary); }
.pd-objective-num { position: absolute; top: -6px; right: 10px; font-size: 3.2rem; font-weight: 800; color: var(--text-dark); opacity: 0.05; line-height: 1; }
.pd-objective-icon { position: relative; width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.pd-objective-card h6 { font-weight: 800; font-size: 1rem; margin-bottom: 6px; color: var(--text-dark); }
.pd-objective-card p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.7; margin: 0; }

.pd-impact-band {
    background: linear-gradient(160deg, #081f11 0%, #0f4025 48%, #081f11 100%);
    position: relative; overflow: hidden;
    padding: 40px 0;
}
.pd-goal-quote { max-width: 760px; margin: 0 auto; text-align: center; }
.pd-band-divider { width: 60px; height: 2px; background: rgba(255,255,255,0.18); margin: 26px auto; }
.pd-impact-callout { max-width: 760px; margin: 0 auto 24px; text-align: center; }
.pd-stat-item { text-align: center; }

.pd-story-row { margin-bottom: 50px; }
.pd-story-row:last-child { margin-bottom: 0; }

.pd-sibling-card { position: sticky; top: 100px; background: #fff; border-radius: 20px; padding: 24px; box-shadow: 0 6px 24px rgba(0,0,0,0.07); }

.pd-sibling-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text-dark); font-weight: 600; font-size: 0.9rem; transition: color 0.2s ease; }
.pd-sibling-link:last-child { border-bottom: 0; }
.pd-sibling-link:hover { color: var(--primary); }
.pd-sibling-link-arrow { color: var(--accent); flex-shrink: 0; }

/* PROGRAM PAGE — project showcase cards */
.project-card { position: relative; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.07); transition: all 0.35s ease; height: 100%; display: flex; flex-direction: column; }
.project-card:hover { transform: translateY(-6px); box-shadow: 0 20px 42px rgba(0,167,88,0.16); }
.project-card-media { position: relative; height: 250px; overflow: hidden; flex-shrink: 0; }
.project-card-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; color: var(--primary); font-weight: 700; font-size: 0.85rem; text-decoration: none; transition: gap 0.25s ease; }
.project-card-btn:hover { gap: 10px; color: var(--primary); }
.project-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; }
.project-card:hover .project-card-media img { transform: scale(1.08); }
.project-card .project-num { position: absolute; top: 10px; right: 14px; font-size: 0.72rem; font-weight: 800; color: rgba(255,255,255,0.9); background: rgba(0,0,0,0.28); backdrop-filter: blur(3px); padding: 4px 10px; border-radius: 20px; letter-spacing: 0.5px; z-index: 2; }
.project-card-media img ~ .project-num { color: rgba(255,255,255,0.95); }
.project-card-body { position: relative; padding: 26px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.project-card h5 { font-weight: 800; font-size: 1.08rem; margin-bottom: 8px; }
.project-card p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.65; margin: 0; }

/* Vision & Mission zig-zag (About page) */
.vm-zigzag-row { display: flex; align-items: center; gap: 60px; margin-bottom: 70px; }
.vm-zigzag-row:last-child { margin-bottom: 0; }
.vm-zigzag-row-reverse { flex-direction: row-reverse; }
.vm-zigzag-media { position: relative; flex: 0 0 34%; max-width: 320px; }
.vm-zigzag-media::before { content: ''; position: absolute; top: 18px; left: 18px; right: -18px; bottom: -18px; border: 3px solid var(--frame-color, var(--primary)); border-radius: 24px; z-index: 0; }
.vm-zigzag-row-reverse .vm-zigzag-media::before { left: -18px; right: 18px; }
.vm-zigzag-media img { position: relative; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 20px; border: 6px solid #fff; box-shadow: 0 20px 45px rgba(0,0,0,0.16); display: block; z-index: 1; transition: transform 0.4s ease; }
.vm-zigzag-row:hover .vm-zigzag-media img { transform: scale(1.03); }
.vm-zigzag-text { flex: 1; }
.vm-zigzag-step { display: block; font-size: 3.2rem; font-weight: 800; line-height: 1; color: var(--border); margin-bottom: 8px; }
.vm-card-title { font-weight: 800; margin-bottom: 14px; }
.vm-card-text { color: var(--text-muted); line-height: 1.8; margin: 0; }
@media (max-width: 991px) {
    .vm-zigzag-row, .vm-zigzag-row-reverse { flex-direction: column; gap: 32px; margin-bottom: 50px; }
    .vm-zigzag-media { flex: 0 0 auto; max-width: 260px; margin: 0 auto; }
    .vm-zigzag-media::before, .vm-zigzag-row-reverse .vm-zigzag-media::before { top: 14px; left: 14px; right: -14px; bottom: -14px; }
}

/* Homepage/About "Partners & Associates" */
.partner-logo-box { display: flex; align-items: center; justify-content: center; height: 96px; width: 190px; background: #fff; border: 1px solid #d3d8dd; border-radius: 12px; padding: 12px 18px; transition: all 0.3s ease; }
.partner-logo-box img { max-height: 66px; max-width: 100%; object-fit: contain; transition: all 0.3s ease; }
.partner-logo-box:hover { border-color: var(--primary); box-shadow: 0 8px 20px rgba(0,167,88,0.12); transform: translateY(-3px); }
.partner-name-badge { display: inline-flex; align-items: center; height: 96px; background: var(--light-bg); color: var(--text-dark); border: 1px solid #d3d8dd; border-radius: 12px; padding: 0 22px; font-size: 0.88rem; font-weight: 700; transition: all 0.3s ease; }
.partner-name-badge:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-3px); }
.partners-logo-slider { padding-bottom: 4px; }
.partners-logo-slider .slick-track { display: flex; align-items: center; }
.partners-logo-slider .slick-slide { display: flex; justify-content: center; }
.partners-logo-slider .px-2 { display: flex; justify-content: center; width: 100%; }

/* Prev/Next project navigation on the project detail page */
.prevnext-link { display: inline-flex; align-items: center; color: var(--text-dark); font-weight: 700; font-size: 0.95rem; text-decoration: none; transition: color 0.25s ease; }
.prevnext-link:hover { color: var(--primary); text-decoration: none; }

/* DONATE */
.donate-section { background: linear-gradient(135deg, #0a2e18, #00a758); padding: 80px 0; position: relative; overflow: hidden; }
.donate-section::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; background: rgba(255,255,255,0.03); border-radius: 50%; }
.donate-box { background: rgba(255,255,255,0.07); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 40px; }
.donate-box h3 { color: var(--white); font-weight: 800; font-size: 1.6rem; }
.donate-box p { color: rgba(255,255,255,0.8); }
.amount-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.amount-btn { background: rgba(255,255,255,0.1); color: var(--white); border: 2px solid rgba(255,255,255,0.25); border-radius: 10px; padding: 12px 8px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.3s; text-align: center; }
.amount-btn:hover, .amount-btn.active { background: var(--accent); border-color: var(--accent); }
.donate-input { background: rgba(255,255,255,0.1); border: 2px solid rgba(255,255,255,0.25); color: var(--white); border-radius: 10px; padding: 13px 16px; font-size: 1rem; width: 100%; margin-bottom: 12px; }
.donate-input::placeholder { color: rgba(255,255,255,0.5); }
.donate-input:focus { outline: none; border-color: var(--accent); }
.btn-donate-now { background: var(--accent); color: var(--white); border: none; border-radius: 30px; padding: 16px; font-size: 1.05rem; font-weight: 700; width: 100%; cursor: pointer; transition: all 0.3s; }
.btn-donate-now:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(245,130,51,0.4); }
.payment-note { color: rgba(255,255,255,0.6); font-size: 0.8rem; text-align: center; margin-top: 10px; }
.donate-feature { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.85); margin-bottom: 16px; font-size: 0.95rem; }
.donate-feature i { color: var(--accent); font-size: 1.2rem; flex-shrink: 0; }

/* REGISTER */
.register-section { background: var(--light-bg); }
.reg-card { background: var(--white); border-radius: 20px; padding: 35px 28px; box-shadow: 0 4px 20px rgba(0,0,0,0.07); text-align: center; transition: all 0.3s; border-top: 4px solid transparent; height: 100%; }
.reg-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0,167,88,0.16); border-top-color: var(--primary); }
.reg-icon { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 20px; }
.btn-reg { border-radius: 25px; padding: 10px 26px; font-weight: 600; font-size: 0.9rem; border: 2px solid var(--primary); color: var(--primary); background: transparent; transition: all 0.3s; display: inline-block; }
.btn-reg:hover { background: var(--primary); color: var(--white); }

/* VERIFY */
.verify-section { background: var(--white); }
.verify-box { background: var(--light-bg); border-radius: 20px; padding: 40px; }
.verify-input { border: 2px solid var(--border); border-radius: 12px; padding: 14px 18px; font-size: 1rem; width: 100%; transition: border-color 0.3s; background: var(--white); }
.verify-input:focus { outline: none; border-color: var(--primary); }
.btn-verify { background: var(--primary); color: var(--white); border: none; border-radius: 12px; padding: 14px 28px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: all 0.3s; white-space: nowrap; }
.btn-verify:hover { background: var(--primary-dark); }

/* TESTIMONIALS */
.testi-section { background: var(--light-bg); }
.testi-card { background: var(--white); border-radius: 16px; padding: 28px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); border-top: 4px solid var(--primary); height: 100%; }
.testi-quote { font-size: 3.5rem; color: var(--primary); line-height: 0.8; opacity: 0.2; font-family: Georgia, serif; }
.testi-text { color: var(--text-dark); font-size: 0.95rem; line-height: 1.7; font-style: italic; }
.testi-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary-light); }
.testi-name { font-weight: 700; font-size: 0.92rem; color: var(--text-dark); }
.testi-role { font-size: 0.8rem; color: var(--text-muted); }
.stars { color: var(--accent); font-size: 0.85rem; }

/* NEWS */
.news-card { border: none; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.06); transition: all 0.3s; height: 100%; }
.news-card:hover { transform: translateY(-4px); box-shadow: 0 16px 35px rgba(0,167,88,0.15); }
.news-card img { height: 195px; object-fit: cover; width: 100%; }
.news-tag { background: var(--primary-light); color: var(--primary); font-size: 0.73rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.news-date { font-size: 0.8rem; color: var(--text-muted); }
.btn-read { color: var(--primary); font-weight: 600; font-size: 0.88rem; }
.btn-read:hover { color: var(--primary-dark); }

/* FOOTER */
footer { background: #0a1f10; color: #8aab96; border-top: 3px solid var(--primary); }
footer h5, footer h6 { color: var(--white); font-weight: 700; position: relative; padding-bottom: 10px; }
footer h5::after, footer h6::after { content: ''; position: absolute; left: 0; bottom: 0; width: 32px; height: 2px; background: var(--accent); border-radius: 2px; }
footer a { color: #8aab96; transition: color 0.2s; }
footer a:hover { color: var(--accent); }
.footer-link { display: block; padding: 4px 0; font-size: 0.88rem; }
.footer-contact-item { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; padding: 5px 0; }
.footer-contact-item i { color: var(--accent); margin-top: 2px; flex-shrink: 0; }
.social-btn { width: 36px; height: 36px; background: rgba(255,255,255,0.07); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #8aab96; transition: all 0.3s; font-size: 0.88rem; }
.social-btn:hover { background: var(--primary); color: var(--white); }
.footer-policy-badge { font-size: 0.7rem; color: #8aab96; border: 1px solid rgba(138,171,150,0.35); border-radius: 20px; padding: 3px 10px; transition: all 0.25s; }
.footer-policy-badge:hover { color: var(--white); border-color: var(--primary); background: rgba(0,167,88,0.12); }
.footer-bottom { background: rgba(0,0,0,0.4); font-size: 0.83rem; padding: 16px 0; }
@media (min-width: 768px) {
    .footer-bottom .container { padding-right: 90px; }
}
@media (max-width: 767px) {
    /* The "Powered by..." line wraps onto its own row here and, being
       the last thing on the page, sits right where the fixed WhatsApp
       button floats — extra bottom padding keeps them from overlapping. */
    .footer-bottom { padding-bottom: 76px; }
}
.footer-bottom a { color: #8aab96; }
.footer-admin-link { color: rgba(255,255,255,0.85) !important; border: 1px solid rgba(255,255,255,0.3); border-radius: 20px; padding: 4px 12px; font-weight: 600; transition: all 0.2s; }
.footer-admin-link:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.6); color: #fff !important; }

/* CAUSES PAGE */
.cause-card-new img { transition: transform 0.4s; }
.cause-card-new:hover img { transform: scale(1.05); }

/* RESPONSIVE */
@media (max-width: 991px) {
    .hero-section h1 { font-size: 2.2rem; }
    .section-title { font-size: 1.6rem; }
    .hero-section { min-height: auto; padding: 60px 0; }
    .stat-sep { display: none; }
    .step-arrow { display: none; }
}
@media (max-width: 576px) {
    .hero-section h1 { font-size: 1.8rem; }
    .amount-grid { grid-template-columns: repeat(2, 1fr); }
    .section-pad { padding: 55px 0; }
    .stats-band-value { font-size: 1.5rem; }
    .stats-band-label { font-size: 0.75rem; }
}

/* ===== SCROLL-REVEAL (used across program pages) ===== */
.reveal-on-scroll { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
}

/* ===== PROGRAM PAGE POLISH ===== */

/* Story cards (reuse .cause-card) — photo zoom + accent top bar */
.story-card { position: relative; }
.story-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; }
.story-card:hover::before { transform: scaleX(1); }
.story-card-photo-wrap { overflow: hidden; }
.story-card-photo-wrap img { transition: transform 0.5s ease; }
.story-card:hover .story-card-photo-wrap img { transform: scale(1.08); }

/* Gallery: zoom + caption overlay on hover */
.gallery-item { display: block; position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.08); transition: box-shadow 0.35s ease; cursor: pointer; text-decoration: none; }
.gallery-item:hover { box-shadow: 0 16px 34px rgba(0,0,0,0.18); }
.gallery-item img { width: 100%; height: 280px; object-fit: cover; display: block; transition: transform 0.5s ease; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px; font-size: 0.82rem; font-weight: 600; color: #fff; background: linear-gradient(to top, rgba(0,0,0,0.72), transparent); }
.gallery-video-wrap { border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.08); transition: box-shadow 0.35s ease; }
.gallery-video-wrap:hover { box-shadow: 0 16px 34px rgba(0,0,0,0.18); }

/* Gallery lightbox */
.gallery-lightbox-overlay { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.92); align-items: center; justify-content: center; }
.gallery-lightbox-overlay.is-open { display: flex; }
.gallery-lightbox-img { max-width: min(650px, 80vw); max-height: 60vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.gallery-lightbox-caption { position: absolute; left: 0; right: 0; bottom: 28px; text-align: center; color: #fff; font-size: 0.9rem; font-weight: 600; }
.gallery-lightbox-close { position: absolute; top: 18px; right: 24px; background: transparent; border: 0; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; opacity: 0.8; }
.gallery-lightbox-close:hover { opacity: 1; }
.gallery-lightbox-prev, .gallery-lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.12); border: 0; color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; transition: background 0.2s ease; }
.gallery-lightbox-prev:hover, .gallery-lightbox-next:hover { background: rgba(255,255,255,0.25); }
.gallery-lightbox-prev { left: 20px; }
.gallery-lightbox-next { right: 20px; }
@media (max-width: 576px) {
    .gallery-lightbox-prev, .gallery-lightbox-next { width: 40px; height: 40px; font-size: 1rem; }
    .gallery-lightbox-prev { left: 8px; }
    .gallery-lightbox-next { right: 8px; }
}

/* Related/relevant CTA buttons already have transitions via .btn-hero-primary etc. — add a gentle press effect */
.btn-hero-primary, .btn-hero-outline { transition: all 0.3s ease, transform 0.15s ease; }
.btn-hero-primary:active, .btn-hero-outline:active { transform: scale(0.97); }

/* Project detail page — "Donate Now" CTA: bigger, pulsing, with a shine sweep on hover */
.pd-contribute-btn { position: relative; overflow: hidden; padding: 15px 34px; font-size: 1rem; border-radius: 30px; animation: pdContributePulse 2.4s ease-in-out infinite; }
.pd-contribute-btn:hover { animation-play-state: paused; transform: translateY(-3px) scale(1.03); }
.pd-contribute-btn::before { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent); transform: skewX(-20deg); transition: left 0.6s ease; }
.pd-contribute-btn:hover::before { left: 125%; }
@keyframes pdContributePulse {
    0%, 100% { box-shadow: 0 8px 25px rgba(245,130,51,0.35); }
    50% { box-shadow: 0 8px 25px rgba(245,130,51,0.35), 0 0 0 8px rgba(245,130,51,0.15); }
}

/* Project detail page — per-project "quick contribution" calculator (qty stepper) */
.pd-quick-contrib {
    display: inline-flex; flex-direction: column; align-items: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.16); border-radius: 24px; padding: 36px 40px 32px;
    margin: 0 auto; max-width: 420px; width: 100%;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    backdrop-filter: blur(6px);
}
.pd-quick-contrib-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff; font-size: 1.4rem; display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px; box-shadow: 0 8px 20px rgba(245,130,51,0.4);
}
.pd-quick-contrib-label { color: #fff; font-weight: 800; font-size: 1.25rem; margin-bottom: 4px; text-align: center; }
.pd-quick-contrib-unit-price { color: rgba(255,255,255,0.65); font-size: 0.85rem; margin-bottom: 22px; }
.pd-qty-stepper { display: flex; align-items: center; gap: 22px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 40px; padding: 6px 10px; margin-bottom: 22px; }
.pd-qty-btn { width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--accent); color: #fff; font-size: 1.2rem; font-weight: 800; line-height: 1; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; }
.pd-qty-btn:hover { background: var(--accent-dark); transform: scale(1.08); }
.pd-qty-value { min-width: 30px; text-align: center; color: #fff; font-weight: 800; font-size: 1.2rem; }
.pd-quick-contrib-total-box { display: flex; flex-direction: column; align-items: center; background: rgba(245,130,51,0.12); border: 1px solid rgba(245,130,51,0.3); border-radius: 14px; padding: 12px 28px; margin-bottom: 24px; width: 100%; }
.pd-quick-contrib-total-label { color: rgba(255,255,255,0.7); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.pd-quick-contrib-total-value { color: var(--accent); font-weight: 800; font-size: 1.7rem; }
@media (max-width: 480px) {
    .pd-quick-contrib { padding: 28px 22px 26px; }
    .pd-qty-stepper { gap: 16px; }
}

/* Section badges: subtle shimmer on hover for a premium feel */
.section-badge { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.section-badge:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,167,88,0.18); }

/* Stories of Change — sliding carousel controls */
#storiesCarousel { padding-bottom: 50px; }
.story-carousel-arrow {
    width: 46px; height: 46px; border-radius: 50%; background: #fff; opacity: 1;
    box-shadow: 0 6px 18px rgba(0,0,0,0.14); color: var(--primary); display: flex; align-items: center; justify-content: center;
    top: 40%; transition: all 0.3s ease;
}
.story-carousel-arrow:hover { background: var(--primary); color: #fff; transform: scale(1.08); }
.story-carousel-arrow.carousel-control-prev { left: -10px; }
.story-carousel-arrow.carousel-control-next { right: -10px; }
@media (max-width: 767px) {
    .story-carousel-arrow.carousel-control-prev { left: -6px; }
    .story-carousel-arrow.carousel-control-next { right: -6px; }
}
.story-carousel-indicators { position: static; margin-top: 30px; }
.story-carousel-indicators button { width: 9px !important; height: 9px !important; border-radius: 50% !important; border: none !important; background-color: var(--border) !important; opacity: 1 !important; transition: all 0.3s; }
.story-carousel-indicators button.active { width: 26px !important; border-radius: 5px !important; background-color: var(--primary) !important; }

/* Homepage "Who We Are" — compassion (hands + heart) accent badge on the image collage */
.about-heart-badge {
    position: absolute; bottom: 4px; left: -14px; width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.5rem;
    box-shadow: 0 10px 26px rgba(245,130,51,0.45); border: 3px solid #fff;
    animation: aboutHeartPulse 2.8s ease-in-out infinite; z-index: 2;
}
@keyframes aboutHeartPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (max-width: 575px) {
    .about-heart-badge { width: 52px; height: 52px; font-size: 1.2rem; left: -8px; }
}

/* "Our Stories, In Their Words" — video testimonial cards */
.video-testi-card { background: #fff; border-radius: 16px; padding: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: all 0.3s ease; height: 100%; max-width: 300px; margin: 0 auto; }
.video-testi-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(0,167,88,0.15); }
.stories_words_slider { padding-bottom: 20px; }
.stories_words_slider .slick-track { display: flex; align-items: stretch; }
.stories_words_slider .slick-slide { height: auto; }
.stories_words_slider .slick-slide > div { height: 100%; }
.stories_words_slider .slick-dots { bottom: -10px; }
.stories_words_slider .slick-dots li button:before { font-size: 9px; color: var(--border); opacity: 1; }
.stories_words_slider .slick-dots li.slick-active button:before { color: var(--primary); }

/* Photo gallery carousels on the Impact Stories page */
.photo-gallery-slider { padding-bottom: 20px; }
.photo-gallery-slider .slick-slide { padding: 0; }
.photo-gallery-slider .slick-dots { bottom: -8px; }
.photo-gallery-slider .slick-dots li button:before { font-size: 9px; color: var(--border); opacity: 1; }
.photo-gallery-slider .slick-dots li.slick-active button:before { color: var(--primary); }

/* "Precious Moments" style gallery — framed image + italic caption + visible arrows */
.pm-frame { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.pm-frame img { width: 100%; height: 260px; object-fit: cover; display: block; }
.pm-caption { text-align: center; font-style: italic; font-weight: 600; font-size: 0.85rem; color: var(--text-dark); margin: 12px 0 0; }
.photo-gallery-slider-arrows { padding: 0 40px; }
.photo-gallery-slider-arrows .slick-prev,
.photo-gallery-slider-arrows .slick-next { width: 38px; height: 38px; background: rgba(0,0,0,0.5); border-radius: 50%; z-index: 2; transition: background 0.25s ease; }
.photo-gallery-slider-arrows .slick-prev:hover,
.photo-gallery-slider-arrows .slick-next:hover { background: rgba(0,0,0,0.75); }
.photo-gallery-slider-arrows .slick-prev:before,
.photo-gallery-slider-arrows .slick-next:before { font-size: 16px; opacity: 1; }
.photo-gallery-slider-arrows .slick-prev { left: -6px; }
.photo-gallery-slider-arrows .slick-next { right: -6px; }

/* ============================================================
   HOMEPAGE (home.php) — styles moved here from inline attributes.
   Colors/percentages that vary per PHP loop item are still set
   inline as CSS custom properties (--icon-bg, --icon-color, etc.)
   and consumed by the rules below via var().
   ============================================================ */

/* --- Part 1: Hero --- */
.hero-h1-oneline { font-weight: 800; color: #fff; line-height: 1.25; margin: 16px 0 18px; }
.hero-bg-circle-tr { position: absolute; top: -120px; right: -120px; width: 500px; height: 500px; background: rgba(255,255,255,0.04); border-radius: 50%; pointer-events: none; }
.hero-bg-circle-bl { position: absolute; bottom: -150px; left: -80px; width: 420px; height: 420px; background: rgba(255,255,255,0.03); border-radius: 50%; pointer-events: none; }
.hero-trust-row { margin-bottom: 28px; }
.hero-trust-item { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.8); font-size: 0.85rem; }
.hero-trust-item i { color: var(--accent); }
.hero-avatars-row { display: flex; align-items: center; gap: 12px; margin-top: 32px; }
.hero-avatars-stack { display: flex; }
.hero-avatar-img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; margin-right: -10px; object-fit: cover; }
.hero-avatars-stack .hero-avatar-img:last-child { margin-right: 0; }
.hero-avatar-initial { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; margin-right: -10px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.82rem; flex-shrink: 0; }
.hero-avatars-stack .hero-avatar-initial:last-child { margin-right: 0; }
.hero-donor-count { color: #fff; font-weight: 700; font-size: 0.88rem; }
.hero-donor-sub { color: rgba(255,255,255,0.65); font-size: 0.78rem; }
.hero-slide-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(10,46,24,0.32) 0%, transparent 45%); pointer-events: none; }
.hero-slide-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px 24px 44px; background: linear-gradient(to top, rgba(6,26,15,0.55) 0%, rgba(6,26,15,0.15) 60%, transparent 100%); }
.hero-slide-caption-title { color: #fff; font-size: 1.15rem; font-weight: 800; margin: 0 0 4px; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.hero-slide-caption-text { color: rgba(255,255,255,0.9); font-size: 0.85rem; margin: 0; line-height: 1.5; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
@media (max-width: 767px) {
    .hero-slide-caption { padding: 16px 18px 38px; }
    .hero-slide-caption-title { font-size: 1rem; }
    .hero-slide-caption-text { font-size: 0.8rem; }
}

/* --- Part 2: Stats band --- */
.stats-band { background: linear-gradient(rgba(245,130,51,0.88), rgba(211,105,28,0.92)), url('https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?w=1600&q=80') center/cover; padding: 56px 0; scroll-margin-top: 110px; }
.stats-band-item { position: relative; }
.stat-sep { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.stats-band-icon { color: #fff; font-size: 1.8rem; margin-bottom: 8px; display: block; opacity: 0.9; }
.stats-band-value { font-size: 2.2rem; font-weight: 800; color: #fff; margin: 0; line-height: 1; }
.stats-band-label { color: rgba(255,255,255,0.9); font-size: 0.82rem; margin: 6px 0 0; }

/* --- Part 3: About --- */
.about-collage-wrap { position: relative; padding: 20px 20px 20px 0; }
.about-img-main { width: 100%; aspect-ratio: 1 / 1; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.15); display: block; object-fit: cover; }
.about-img-secondary { width: 40%; aspect-ratio: 1 / 1; border-radius: 16px; box-shadow: 0 15px 40px rgba(0,0,0,0.18); position: absolute; bottom: -30px; right: 0; border: 4px solid #fff; object-fit: cover; z-index: 2; }
.about-carousel-indicators { position: absolute; bottom: 14px; margin: 0; z-index: 1; }
.about-carousel-indicators button { width: 8px !important; height: 8px !important; border-radius: 50% !important; border: none !important; background-color: rgba(255,255,255,0.6) !important; opacity: 1 !important; transition: all 0.3s; }
.about-carousel-indicators button.active { width: 22px !important; border-radius: 4px !important; background-color: #fff !important; }
.about-years-badge { position: absolute; top: 0; right: 10px; background: var(--primary); color: #fff; border-radius: 14px; padding: 14px 18px; text-align: center; box-shadow: 0 10px 30px rgba(0,167,88,0.4); z-index: 3; }
.about-years-badge-num { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.about-years-badge-label { font-size: 0.72rem; opacity: 0.9; }
.about-text-col { padding-top: 20px; }
.about-lead-para { color: var(--text-muted); line-height: 1.8; margin-bottom: 16px; }
.about-trust-badges-row { margin-bottom: 28px; }
.about-trust-badge { display: flex; align-items: flex-start; gap: 10px; background: var(--light-bg); border-radius: 12px; padding: 12px 14px; }
.about-trust-badge i { color: var(--primary); font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }
.about-trust-badge-title { font-weight: 700; font-size: 0.85rem; color: var(--text-dark); }
.about-trust-badge-desc { font-size: 0.75rem; color: var(--text-muted); }
.about-cta-btn { background: var(--primary); color: #fff; border-radius: 25px; padding: 10px 24px; font-weight: 700; font-size: 0.88rem; display: inline-block; transition: all 0.3s; }

/* "Who We Are" pull-quote (About page) */
.about-pull-quote { position: relative; border-left: 4px solid var(--accent); background: var(--light-bg); border-radius: 0 16px 16px 0; padding: 26px 28px 26px 64px; margin: 0 0 24px; }
.about-pull-quote-icon { position: absolute; top: 22px; left: 22px; font-size: 1.7rem; color: var(--accent); opacity: 0.6; }
.about-pull-quote-text { font-size: 1.4rem; font-weight: 800; font-style: italic; line-height: 1.5; color: var(--text-dark); margin: 0; }
@media (max-width: 575px) {
    .about-pull-quote { padding: 20px 18px 20px 52px; }
    .about-pull-quote-icon { top: 18px; left: 16px; font-size: 1.4rem; }
    .about-pull-quote-text { font-size: 1.12rem; }
}

/* --- Part 4: Programs --- */
.prog-home-card { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.07); transition: all 0.3s; height: 100%; }
.prog-home-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,167,88,0.18) !important; }
.prog-home-card:hover img { transform: scale(1.06); }
.prog-home-media { position: relative; overflow: hidden; }
.prog-home-img { width: 100%; height: 180px; object-fit: cover; display: block; transition: transform 0.4s; }
.prog-home-gradient { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.5)); }
.prog-home-icon-badge { position: absolute; top: 14px; left: 14px; background: var(--icon-bg); color: var(--icon-color); width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.prog-home-count-badge-wrap { position: absolute; bottom: 12px; left: 14px; }
.prog-home-count-badge { background: rgba(255,255,255,0.2); backdrop-filter: blur(4px); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.prog-home-body { padding: 20px; }
.prog-home-title { font-weight: 800; margin-bottom: 8px; color: var(--text-dark); }
.prog-home-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 16px; }
.prog-home-link { color: var(--primary); font-weight: 700; font-size: 0.88rem; display: flex; align-items: center; gap: 6px; }
.prog-home-link i { font-size: 0.75rem; }

/* Shared "View All X" outline pill buttons */
.outline-pill-btn { border: 2px solid var(--primary); color: var(--primary); border-radius: 25px; padding: 9px 22px; font-weight: 700; font-size: 0.88rem; display: inline-block; transition: all 0.3s; }
.outline-pill-btn-sm { border: 2px solid var(--primary); color: var(--primary); border-radius: 20px; padding: 7px 18px; font-weight: 700; font-size: 0.8rem; display: inline-block; }

/* Story detail: rich-body typography + meta bar + share button + related cards */
.story-prose { color: var(--text-dark); line-height: 1.95; font-size: 1.05rem; }
.story-prose p { margin: 0 0 20px; }
.story-prose h1, .story-prose h2, .story-prose h3, .story-prose h4 { font-weight: 800; color: var(--text-dark); margin: 32px 0 16px; line-height: 1.35; }
.story-prose h1:first-child, .story-prose h2:first-child, .story-prose h3:first-child { margin-top: 0; }
.story-prose ul, .story-prose ol { margin: 0 0 20px; padding-left: 22px; }
.story-prose li { margin-bottom: 8px; }
.story-prose img { max-width: 100%; height: auto; border-radius: 12px; margin: 24px 0; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.story-prose blockquote { border-left: 4px solid var(--accent); background: var(--light-bg); border-radius: 0 12px 12px 0; padding: 18px 24px; margin: 24px 0; font-style: italic; color: var(--text-dark); }
.story-prose a { color: var(--primary); font-weight: 600; }

.story-meta-bar { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.story-meta-item { color: rgba(255,255,255,0.75); font-size: 0.85rem; font-weight: 600; }
.story-share-btn { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; cursor: pointer; transition: all 0.25s; }
.story-share-btn:hover, .story-share-btn.is-copied { background: var(--accent); border-color: var(--accent); }
.story-share-btn-light { flex-shrink: 0; width: 40px; height: 40px; border-radius: 20px; background: var(--light-bg); border: none; color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; cursor: pointer; transition: all 0.25s; }
.story-share-btn-light:hover, .story-share-btn-light.is-copied { background: var(--primary); color: #fff; }

.story-more-card { display: block; text-decoration: none; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,0.07); height: 100%; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.story-more-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(0,0,0,0.1); }
.story-more-img { width: 100%; height: 170px; object-fit: cover; display: block; }
.story-more-body { padding: 18px 20px; }
.story-more-title { font-weight: 800; color: var(--text-dark); font-size: 0.95rem; line-height: 1.4; margin: 0; min-height: 2.6rem; }

.story-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.story-pager-link { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text-dark); font-weight: 700; font-size: 0.9rem; text-decoration: none; border: 2px solid var(--border); transition: all 0.25s ease; }
.story-pager-link:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.story-pager-link.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.story-pager-ellipsis { color: var(--text-muted); font-weight: 700; padding: 0 4px; }

.story-date-badge { position: absolute; left: 10px; bottom: 10px; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 5px 12px; border-radius: 20px; }

/* Founder/Mentor "Bio" button that opens the shared bio modal */
.btn-bio { border: 2px solid var(--primary); background: transparent; color: var(--primary); border-radius: 20px; padding: 7px 20px; font-weight: 700; font-size: 0.82rem; transition: all 0.3s; }
.btn-bio:hover { background: var(--primary); color: #fff; }

/* --- Part 5: Featured causes --- */
.cause-home-card { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.07); transition: all 0.3s; height: 100%; }
.cause-home-media { position: relative; overflow: hidden; }
.cause-home-media-link { display: block; position: relative; width: 100%; border: none; background: none; padding: 0; margin: 0; text-align: left; cursor: pointer; }
.cause-home-img { width: 100%; height: 210px; object-fit: cover; display: block; transition: transform 0.4s; }
.cause-home-gradient { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 45%, rgba(0,0,0,0.55)); }
.cause-home-play-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; background: rgba(220,53,69,0.92); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 4px 14px rgba(0,0,0,0.35); transition: transform 0.25s; }
.cause-home-media:hover .cause-home-play-badge { transform: translate(-50%, -50%) scale(1.1); }
/* Cause video, embedded directly and always playable — same idea as the
   "Real Voices" testimonial videos: a responsive 16:9 box, not a fixed
   height, so the video is never letterboxed/cropped. */
.cause-home-video-wrap { position: relative; width: 100%; padding-top: 56.25%; }
.cause-home-video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Video lightbox popup (shared, footer.php) */
.video-lightbox-content { background: #000; border: none; border-radius: 14px; overflow: hidden; }
.video-lightbox-frame { position: relative; width: 100%; padding-top: 56.25%; }
.video-lightbox-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.video-lightbox-close { position: absolute; top: 10px; right: 10px; z-index: 2; filter: invert(1); opacity: 0.9; }
/* justify-content:flex-start (not space-between) + margin-left:auto on the
   urgent badge — the project tag is now conditional (no project linked =
   no tag at all), and space-between would've left a lone urgent badge
   sitting on the LEFT with nothing to push it right. margin-left:auto
   pushes it to the right edge regardless of whether the tag exists. */
.cause-home-tags-row { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: flex-start; align-items: flex-start; gap: 8px; }
.cause-home-tag { background: var(--tag-bg); color: var(--tag-color); font-size: 0.72rem; font-weight: 700; padding: 4px 12px; border-radius: 20px; }
.cause-home-urgent-badge { background: #dc3545; color: #fff; font-size: 0.7rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; margin-left: auto; }
.cause-home-days-badge-wrap { position: absolute; bottom: 12px; right: 14px; }
.cause-home-days-badge { background: rgba(0,0,0,0.5); color: #fff; font-size: 0.75rem; padding: 4px 10px; border-radius: 20px; backdrop-filter: blur(4px); }
.cause-home-days-badge i { color: var(--accent); }
.cause-home-body { padding: 22px; }
.cause-home-title { font-weight: 800; font-size: 1rem; margin-bottom: 8px; line-height: 1.4; }
.cause-home-title-link { color: var(--text-dark); }
.cause-home-title-link:hover { color: var(--primary); text-decoration: underline; }
.cause-home-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 14px; }
.cause-progress-wrap { margin-bottom: 14px; }
.cause-progress-row { display: flex; justify-content: space-between; margin-bottom: 5px; }
.cause-progress-raised { font-size: 0.78rem; color: var(--text-muted); }
.cause-progress-raised strong { color: var(--primary); }
.cause-progress-pct { font-size: 0.78rem; font-weight: 700; color: var(--primary); }
.cause-progress-track { background: #e9ecef; border-radius: 10px; height: 7px; overflow: hidden; }
.cause-progress-fill { background: linear-gradient(90deg, var(--primary), #27ae60); height: 100%; border-radius: 10px; }
.cause-progress-meta-row { display: flex; justify-content: space-between; margin-top: 5px; }
.cause-progress-meta-row span { font-size: 0.75rem; color: var(--text-muted); }
.cause-donate-btn { display: block; background: var(--primary); color: #fff; border-radius: 8px; padding: 9px; text-align: center; font-weight: 700; font-size: 0.85rem; transition: all 0.3s; flex: 1; }
.btn-cause-share { flex-shrink: 0; width: 44px; background: var(--light-bg); color: var(--primary); border: none; border-radius: 10px; font-size: 1rem; cursor: pointer; transition: all 0.25s; }
.btn-cause-share:hover, .btn-cause-share.is-copied { background: var(--primary); color: #fff; }

/* --- Part 7: Get Involved --- */
.involve-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.07); transition: all 0.3s; height: 100%; position: relative; }
.involve-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(245,130,51,0.18) !important; }
.involve-card:hover img { transform: scale(1.05); }
.involve-card-featured { border: 2px solid var(--accent); }
.involve-ribbon { position: absolute; top: 14px; right: -32px; background: var(--accent); color: #fff; font-size: 0.68rem; font-weight: 800; padding: 4px 38px; transform: rotate(45deg); z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.involve-media { position: relative; overflow: hidden; }
.involve-img { width: 100%; height: 190px; object-fit: cover; display: block; transition: transform 0.4s; }
.involve-gradient { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.55)); }
.involve-icon-badge { position: absolute; top: 16px; left: 16px; background: var(--icon-bg); color: var(--icon-color); width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.involve-icon-pulse { position: relative; }
.involve-icon-pulse::after { content: ''; position: absolute; inset: -6px; border-radius: 16px; border: 2px solid var(--accent); animation: involvePulse 1.8s ease-out infinite; }
@keyframes involvePulse {
    0% { transform: scale(0.9); opacity: 0.9; }
    70% { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}
.involve-body { padding: 24px; }
.involve-title { font-weight: 800; margin-bottom: 8px; }
.involve-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 16px; }
.involve-perks-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.involve-perk-badge { background: var(--light-bg); color: var(--text-dark); font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: 20px; }
.involve-perk-badge i { color: var(--primary); }
.involve-cta-btn { display: block; background: var(--btn-bg, var(--primary)); color: #fff; border-radius: 8px; padding: 9px; text-align: center; font-weight: 700; font-size: 0.85rem; transition: all 0.3s; }

/* --- Part 8.5: Video testimonials (home) --- */
.video-testi-file { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; border-radius: 14px; }
.video-testi-iframe-wrap { position: relative; padding-top: 125%; border-radius: 14px; overflow: hidden; }
.video-testi-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.video-testi-name { font-weight: 800; margin: 14px 0 2px; text-align: center; }
.video-testi-role { color: var(--text-muted); font-size: 0.82rem; text-align: center; margin: 0; }

/* --- Part 9: Little Voices video grid + Upcoming Events --- */
.lv-video-card { border-radius: 14px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); background: #fff; }
.lv-video-wrap { position: relative; padding-top: 130%; }
.lv-video-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.lv-video-caption { margin: 0; padding: 9px 10px; font-weight: 700; font-size: 0.78rem; color: var(--text-dark); }

/* --- Part 9.5: Little Voices — YouTube share-style thumbnail card (impact-stories) --- */
.lv-yt-card { display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.15); text-decoration: none; }
.lv-yt-thumb { position: relative; padding-top: 62%; background-size: cover; background-position: center; background-color: #111; transition: transform 0.4s ease; }
.lv-yt-card:hover .lv-yt-thumb { transform: scale(1.03); }
.lv-yt-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.05) 32%, rgba(0,0,0,0.05) 55%, rgba(0,0,0,0.75) 100%); }
.lv-yt-brand { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 7px; z-index: 2; }
.lv-yt-avatar { width: 26px; height: 26px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
.lv-yt-avatar i { color: var(--accent); font-size: 0.68rem; }
.lv-yt-brand-name { color: #fff; font-size: 0.68rem; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.lv-yt-share { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 2; }
.lv-yt-share i { color: #fff; font-size: 0.66rem; }
.lv-yt-title { position: absolute; left: 10px; right: 44px; top: 40px; color: #fff; font-weight: 800; font-size: 0.85rem; line-height: 1.3; text-shadow: 0 1px 4px rgba(0,0,0,0.75); z-index: 2; }
.lv-yt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 46px; height: 32px; border-radius: 8px; background: #ff0000; display: flex; align-items: center; justify-content: center; z-index: 2; box-shadow: 0 2px 10px rgba(0,0,0,0.4); }
.lv-yt-play i { color: #fff; font-size: 0.82rem; margin-left: 2px; }
.lv-yt-badge { position: absolute; bottom: 10px; right: 10px; display: flex; align-items: center; gap: 5px; background: rgba(0,0,0,0.55); color: #fff; font-size: 0.66rem; font-weight: 700; padding: 4px 9px; border-radius: 20px; z-index: 2; }
.lv-yt-badge i { color: #ff0000; font-size: 0.8rem; }
.events-widget-card { background: #fff; border-radius: 20px; padding: 26px; box-shadow: 0 4px 20px rgba(0,0,0,0.07); height: 100%; }
.events-widget-title { font-weight: 800; margin-bottom: 20px; font-size: 1.1rem; }
.events-widget-title i { color: var(--primary); }
.event-row { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.event-icon-box { width: 66px; height: 66px; border-radius: 14px; overflow: hidden; flex-shrink: 0; box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
.event-icon-top { background: var(--icon-color); color: #fff; font-size: 1.3rem; text-align: center; padding: 10px 0 6px; }
.event-icon-badge { background: #fff; color: var(--icon-color); font-size: 0.62rem; font-weight: 800; text-align: center; padding: 5px 0; text-transform: uppercase; letter-spacing: 0.5px; }
.event-info-title { font-weight: 700; margin-bottom: 2px; font-size: 0.92rem; line-height: 1.3; }
.event-info-location { font-size: 0.8rem; color: var(--text-muted); margin: 0; }
.events-empty-text { color: var(--text-muted); font-size: 0.85rem; }

/* Events list page — card with image, map link, attendance, RSVP button */
.event-card { background: #fff; border-radius: 18px; padding: 24px; margin-bottom: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.07); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.event-card-media { position: relative; width: 110px; height: 110px; border-radius: 16px; overflow: hidden; flex-shrink: 0; box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
.event-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-card-date-badge { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.55); color: #fff; font-size: 0.62rem; font-weight: 800; text-align: center; padding: 4px 0; text-transform: uppercase; letter-spacing: 0.5px; }
.event-card-meta-row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 2px; }
.event-card-meta-item { color: var(--text-muted); font-size: 0.85rem; display: inline-flex; align-items: center; }
.event-card-map-link { color: var(--primary); font-size: 0.8rem; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; }
.event-card-map-link:hover { text-decoration: underline; }
.event-card-attendees-btn { background: none; border: none; padding: 0; color: var(--primary); font-size: 0.85rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; }
.event-card-attendees-btn:hover { text-decoration: underline; }

/* Event detail page — photo gallery grid */
.event-detail-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.event-detail-gallery-item { border-radius: 12px; overflow: hidden; aspect-ratio: 1 / 1; display: block; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.event-detail-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.event-detail-gallery-item:hover img { transform: scale(1.06); }
.event-card-actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; margin-left: auto; }
.event-card-btn { border-radius: 20px; padding: 8px 18px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; text-decoration: none; text-align: center; border: none; cursor: pointer; }
.event-card-btn-outline { background: rgba(245,130,51,0.12); color: var(--accent); border: 1px solid rgba(245,130,51,0.35); }
.event-card-btn-primary { background: var(--primary); color: #fff; }
.event-card-btn-primary:hover { background: var(--primary-dark); color: #fff; }
/* Fallback "calendar" date badge shown when an event has no photo — fixed,
   good-looking style, independent of any per-event icon/color. */
.event-calendar-badge { width: 78px; height: 78px; border-radius: 16px; overflow: hidden; flex-shrink: 0; box-shadow: 0 3px 10px rgba(0,0,0,0.12); display: flex; flex-direction: column; }
.event-calendar-badge-top { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; font-size: 1.3rem; text-align: center; padding: 12px 0 6px; }
.event-calendar-badge-bottom { background: #fff; color: var(--primary); font-size: 0.66rem; font-weight: 800; text-align: center; padding: 5px 0; text-transform: uppercase; letter-spacing: 0.5px; }
.event-calendar-badge--sm { width: 64px; height: 64px; }
.event-calendar-badge--sm .event-calendar-badge-top { font-size: 1.1rem; padding: 9px 0 4px; }
.event-rsvp-alert { border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; font-size: 0.9rem; }
.event-rsvp-alert-success { background: #e3f7ec; border: 1px solid #c3e6cb; color: #155724; }
.event-rsvp-alert-danger { background: #ffe8e8; border: 1px solid #f5c6cb; color: #721c24; }
@media (max-width: 575px) {
    .event-card-actions { flex-direction: row; flex-wrap: wrap; margin-left: 0; width: 100%; }
}

/* --- Part 10: CTA banner --- */
.cta-banner-section { background: radial-gradient(circle at 90% 100%, rgba(245,130,51,0.5) 0%, transparent 45%), radial-gradient(circle at 5% 0%, rgba(39,174,96,0.45) 0%, transparent 45%), linear-gradient(160deg,#081f11 0%,#0f4025 50%,#081f11 100%); padding: 80px 0; position: relative; overflow: hidden; }
.cta-banner-circle-tr { position: absolute; top: -80px; right: -80px; width: 350px; height: 350px; background: rgba(255,255,255,0.04); border-radius: 50%; }
.cta-banner-circle-bl { position: absolute; bottom: -100px; left: -60px; width: 300px; height: 300px; background: rgba(255,255,255,0.03); border-radius: 50%; }
.cta-banner-inner { position: relative; z-index: 1; }
.cta-banner-badge { background: rgba(245,130,51,0.18); color: #ffc199; border: 1px solid rgba(245,130,51,0.4); }
.cta-banner-title { color: #fff; font-size: 2.6rem; font-weight: 800; margin: 16px 0 14px; letter-spacing: -0.02em; }
.cta-banner-subtitle { color: rgba(255,255,255,0.8); max-width: 560px; margin: 0 auto 36px; font-size: 1rem; line-height: 1.8; }

/* Brand statement band (About page) */
.about-statement-band { padding: 90px 0; }
.about-statement-wrap { max-width: 1040px; margin: 0 auto; text-align: center; }
.about-statement-quote-icon { font-size: 3rem; color: var(--accent); opacity: 0.6; display: block; margin-bottom: 20px; }
.about-statement-text { font-size: 3.6rem; font-weight: 800; line-height: 1.35; color: #fff; margin: 0; letter-spacing: -0.01em; }
@media (max-width: 767px) {
    .about-statement-band { padding: 60px 0; }
    .about-statement-text { font-size: 2rem; line-height: 1.45; }
}
.cta-banner-btns-row { margin-bottom: 16px; }
.cta-btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; border-radius: 25px; padding: 11px 26px; font-weight: 700; font-size: 0.9rem; display: inline-block; transition: all 0.3s; box-shadow: 0 8px 25px rgba(245,130,51,0.4); }
.cta-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(245,130,51,0.55) !important; color: #fff; }
.cta-btn-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.5); border-radius: 25px; padding: 10px 24px; font-weight: 600; font-size: 0.9rem; display: inline-block; transition: all 0.3s; }
.cta-btn-outline:hover { background: rgba(255,255,255,0.18) !important; border-color: #fff !important; transform: translateY(-2px); color: #fff; }
.cta-trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 8px; }
.cta-trust-row span { color: rgba(255,255,255,0.6); font-size: 0.82rem; }

/* Small shared utilities used across home.php sections */
.bg-section-white { background: #fff; }
.bg-section-light { background: var(--light-bg); }
.title-line-left { margin: 12px 0 20px; }
.about-lead-para--last { margin-bottom: 24px; }
.scroll-anchor { scroll-margin-top: 110px; }
.empty-state-text { color: var(--text-muted); padding: 20px 0; }
.text-accent { color: var(--accent); }
.min-w-0 { min-width: 0; }

/* Global page behaviour (was an inline <style> in the header) */
html { scroll-behavior: smooth; }

/* Sticky header wrapper */
#stickyHeader { position: fixed; top: 0; left: 0; right: 0; z-index: 1050; }

/* Top bar - mobile compact links */
.top-bar-mobile-link { color: #cde8d8; font-size: 0.75rem; white-space: nowrap; }
@media (max-width: 767px) {
    .top-bar-csr-btn { font-size: 0.72rem; padding: 2px 10px; white-space: nowrap; }
}
/* Below ~400px (e.g. Galaxy S8+ at 360px) phone + email + CSR button no longer
   fit on one line and wrap mid-word — drop the email from the mobile top bar;
   it's still reachable via the footer and contact page. */
@media (max-width: 400px) {
    .top-bar-mobile-email { display: none; }
}

/* Navbar brand logo — portrait logo (logo-big.png, 630x967). The badge is
   taken out of the navbar row's flow (position:absolute) so the row stays
   at its natural compact height (nav links only, ~59px) instead of
   growing to fit the logo. The logo then overlaps upward over the
   top-bar (explicitly OK'd — the phone/email text stays exactly where it
   is, just visually behind the badge near its left edge) and dips
   slightly into the hero below; .hero-section has a min-height floor so
   that dip can never reach the heading, verified down to 992x600 windows.
   top:-45px (rather than flush with the very top of the page) leaves a
   small gap of visible green above the badge instead of it butting
   against the browser's edge. */
.navbar-brand { position: relative; width: 130px; }
.navbar-logo-badge {
    position: absolute; left: 0; top: -25px; z-index: 5;
    display: inline-flex; align-items: center; background: #fff;
    border-radius: 16px; padding: 8px 16px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.navbar-logo-img { height: 132px; width: auto; display: block; transition: height 0.2s ease; }

/* Once scrolled past the hero (see the scroll listener in header.php),
   the logo can't sensibly overlap "into the hero" any more — whatever
   section has scrolled up behind the fixed header instead would show
   through/under it oddly. Collapse to the same compact, fully-contained
   badge already used on mobile. */
#stickyHeader.header-scrolled .navbar-brand { position: static; width: auto; }
#stickyHeader.header-scrolled .navbar-logo-badge { position: static; padding: 6px 14px; border-radius: 14px; }
#stickyHeader.header-scrolled .navbar-logo-img { height: 60px; }

@media (max-width: 767px) {
    .navbar-brand { position: static; width: auto; }
    .navbar-logo-badge { position: static; padding: 4px 10px; border-radius: 12px; }
    .navbar-logo-img { height: 52px; }
}
@media (max-width: 575px) {
    .navbar-logo-img { height: 44px; }
}

/* Footer */
.footer-tagline { font-size: 0.9rem; line-height: 1.8; }
.footer-legal-text { font-size: 0.8rem; color: #8aab96; }
.footer-newsletter-title { font-size: 0.88rem; }
.footer-newsletter-input {
    border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.07); color: #8aab96;
    border-radius: 8px; padding: 9px 14px; font-size: 0.85rem; flex: 1; outline: none;
}
.footer-newsletter-btn {
    background: var(--accent); color: #fff; border: none; border-radius: 8px;
    padding: 9px 16px; font-size: 0.85rem; cursor: pointer; white-space: nowrap;
}
.footer-newsletter-btn:disabled { opacity: 0.7; cursor: default; }
.footer-newsletter-msg { font-size: 0.8rem; margin: 8px 0 0; }
.footer-newsletter-msg-success { color: #7ee6a8; }
.footer-newsletter-msg-error { color: #ff9d9d; }

/* Home: hero donor avatar stack - background colour is data-driven (rotating palette) */
.hero-avatar-initial { background: var(--avatar-bg); }

/* Home: donation progress bar - width is data-driven (% raised) */
.cause-progress-fill { width: var(--progress); }

/* Home: featured cause card - fallback media block when no image is set */
.cause-home-media--fallback { height: 210px; background: var(--fallback-bg); display: flex; align-items: center; justify-content: center; }
.cause-home-icon-fallback { font-size: 2.6rem; color: var(--icon-color); }
.cause-donate-row { display: flex; gap: 8px; }
.involve-cta-btn--featured { --btn-bg: var(--accent); }

/* Home: "Verify ID" widget result box */
.verify-result-box { border-radius: 12px; padding: 18px; margin-bottom: 12px; display: flex; align-items: center; gap: 14px; }
.verify-result-box--valid { background: #e3f7ec; border: 2px solid var(--primary); }
.verify-result-box--invalid { background: #ffe8e8; border: 2px solid #dc3545; }
.verify-result-icon-badge { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.verify-result-icon-badge--valid { background: var(--primary); }
.verify-result-icon-badge--invalid { background: #dc3545; }
.verify-result-icon-badge i { color: #fff; font-size: 1.2rem; }
.verify-result-heading { font-weight: 800; margin: 0; }
.verify-result-heading--valid { color: var(--primary); }
.verify-result-heading--invalid { color: #dc3545; }
.verify-result-text { color: var(--text-muted); font-size: 0.82rem; margin: 0; }
.verify-result-text a { color: var(--primary); }

/* Shared jQuery Validate styling: Donate / Member / Volunteer / Intern forms */
.field-invalid { border-color: #dc3545 !important; }
.field-error-msg { display: block; color: #dc3545; font-size: 0.78rem; font-style: normal; margin-top: 4px; }

/* Home: Welcome Popup (upcoming events) modal — moved out of front/home.php */
.wp-modal-dialog { max-width: 560px; }
.wp-modal-content { border: none; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.18); }
/* Header */
.wp-header { background: #fff; text-align: center; padding: 22px 24px 0; position: relative; border-bottom: 1px solid #f0f0f0; }
.wp-close { position: absolute; top: 12px; right: 14px; }
.wp-logo { max-width: 180px; width: 100%; display: block; margin: 0 auto 12px; }
.wp-divider { height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 2px; width: 44px; margin: 0 auto 10px; }
.wp-section-label { font-size: .7rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .8px; margin: 0 0 10px; }
/* Body */
.wp-body { padding: 12px 16px 16px; background: #fff; }
/* Slider — show 2 slides at once with a gap */
.wp-events-slider { margin-bottom: 4px; }
.wp-slide-item { padding: 0 5px; }
.wp-events-slider .slick-list { margin: 0 -5px; }
.wp-events-slider .slick-dots { position: static; margin-top: 8px; text-align: center; padding: 0; }
.wp-events-slider .slick-dots li { margin: 0 2px; }
.wp-events-slider .slick-dots li button:before { font-size: 7px; color: #ccc; opacity: 1; }
.wp-events-slider .slick-dots li.slick-active button:before { color: var(--primary); }
/* Event card */
.wp-event-card { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid #eef0f2; border-radius: 14px; padding: 10px 11px; box-shadow: 0 2px 8px rgba(0,0,0,.05); height: 100%; }
/* Top row: cal + info */
.wp-event-top { display: flex; align-items: center; gap: 10px; }
/* Calendar badge */
.wp-event-cal { width: 54px; height: 54px; border-radius: 10px; overflow: hidden; flex-shrink: 0; display: flex; flex-direction: column; box-shadow: 0 2px 8px rgba(0,0,0,.12); position: relative; }
.wp-event-cal-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wp-event-cal-icon { flex: 1; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.wp-event-cal-date { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.62); color: #fff; font-size: .52rem; font-weight: 800; text-align: center; padding: 2px 0; text-transform: uppercase; letter-spacing: .3px; }
/* Info */
.wp-event-info { flex: 1; min-width: 0; }
.wp-event-title { font-weight: 800; font-size: .8rem; margin: 0 0 3px; color: #1a1a1a; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wp-event-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.wp-event-meta-item { color: #6c757d; font-size: .72rem; display: inline-flex; align-items: center; gap: 3px; }
.wp-event-map-link { color: var(--primary); font-size: .7rem; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; }
.wp-event-map-link:hover { text-decoration: underline; }
/* Actions row */
.wp-event-actions { display: flex; gap: 6px; }
.wp-btn-view { flex: 1; background: rgba(245,130,51,.1); color: var(--accent); border: 1.5px solid rgba(245,130,51,.35); border-radius: 16px; padding: 5px 8px; font-size: .7rem; font-weight: 700; white-space: nowrap; text-decoration: none; text-align: center; transition: all .2s; }
.wp-btn-view:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Footer */
.wp-footer { text-align: center; padding-top: 10px; border-top: 1px solid #f0f0f0; margin-top: 8px; }
.wp-all-events-link { color: var(--primary); font-size: .78rem; font-weight: 700; text-decoration: none; }
.wp-all-events-link:hover { text-decoration: underline; }
.wp-empty { color: #6c757d; font-size: .85rem; text-align: center; padding: 10px 0; }