/*
    DELF FOUNDATION — style.css
    Polished overrides and page-specific styles.
    Loads after: bootstrap.min.css, bootstrap-icons.css, templatemo-kind-heart-charity.css
*/

/* FONT FACE — Metropolis (local, matches templatemo CSS) */
@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis/Metropolis-Regular.woff2') format('woff2'),
         url('../fonts/Metropolis/Metropolis-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis/Metropolis-Light.woff2') format('woff2'),
         url('../fonts/Metropolis/Metropolis-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis/Metropolis-SemiBold.woff2') format('woff2'),
         url('../fonts/Metropolis/Metropolis-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis/Metropolis-Bold.woff2') format('woff2'),
         url('../fonts/Metropolis/Metropolis-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* GLOBAL DESIGN TOKENS */
:root {
    --brand-cyan:   hsl(194, 85%, 51%);
    --brand-navy:   #0b1f3a;
    --brand-gold:   #d4a017;
    --brand-blue:   #0077b6;
    --brand-bright: #00b4d8;
    --text-body:    #555;
    --text-muted:   #6c757d;
    --bg-light:     #f7f9fc;
    --bg-offwhite:  #f4f6f8;
    --border-light: #e8edf2;

    /* templatemo compatibility */
    --body-font-family: 'Metropolis', sans-serif;
    --primary-color:    hsl(194, 85%, 51%);
    --secondary-color:  #0b1f3a;
}

/* BASE RESETS */
html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    font-family: var(--body-font-family);
    background-color: #ffffff;
}

main { flex: 1; }

/*  TYPOGRAPHY OVERRIDES
   (templatemo sets h5 color to --primary-color which
    bleeds into custom section headings — we scope these
    overrides carefully) */
.intro-mv-box h5,
.activity-content h5,
.blog-title,
.leader-name,
.team-main-title,
.activities-main-title,
.impact-title,
.delf-intro-title {
    color: var(--brand-navy) !important;
}

/* NAVBAR */
.navbar .container {
    max-width: 88%;
}

.navbar {
    background: #ffffff;
    z-index: 1049;
    padding-top: 0;
    padding-bottom: 0;
    transition: box-shadow 0.3s ease;
    position: fixed;
    top: 42px; /* sits directly below .site-header */
    left: 0;
    right: 0;
}

/* Push page content down so it doesn't hide under the fixed bars */
body {
    padding-top: 114px; /* 42px header + ~72px navbar */
}

.navbar-brand { color: var(--brand-cyan); }

.logo {
    width: 150px;
    height: auto;
}

@media (max-width: 768px) {
    .logo { width: 130px; margin-left: -25px; }
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding: 20px 14px;
    font-size: 15px;
    font-weight: 500;
    color: var(--brand-navy);
    transition: color 0.25s ease;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
    color: var(--brand-cyan);
    background: transparent;
}

/* Donate button */
.donate-btn {
    background: var(--brand-cyan) !important;
    color: #ffffff !important;
    border-radius: 6px;
    padding: 9px 20px !important;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 4px 14px rgba(0,174,239,0.25);
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.donate-btn:hover {
    background: var(--brand-navy) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(11,31,58,0.25);
}

/* Navbar toggler */
.navbar-toggler {
    border: 0;
    padding: 0;
    cursor: pointer;
    margin: 0;
    width: 30px;
    height: 35px;
    outline: none;
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}

.navbar-toggler .navbar-toggler-icon {
    background: var(--brand-navy);
    display: block;
    width: 30px;
    height: 2px;
    position: relative;
    transition: background 150ms 300ms ease;
}

.navbar-toggler .navbar-toggler-icon::before,
.navbar-toggler .navbar-toggler-icon::after {
    content: '';
    position: absolute;
    right: 0; left: 0;
    background: var(--brand-navy);
    width: 30px; height: 2px;
    transition: top 300ms 350ms ease, transform 300ms 50ms ease;
}

.navbar-toggler .navbar-toggler-icon::before { top: -8px; }
.navbar-toggler .navbar-toggler-icon::after  { top: 8px; }

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { background: transparent; }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before,
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    transition: top 300ms 50ms ease, transform 300ms 350ms ease;
    top: 0;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before { transform: rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after  { transform: rotate(-45deg); }

/* SITE HEADER (top bar) */
.site-header {
    background: #0b1f3a;
    padding-top: 10px;
    padding-bottom: 8px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    height: 45px;
    overflow: hidden;
}

.site-header p,
.site-header p a,
.site-header .social-icon-link {
    color: #ffffff;
    font-size: 13px;
}

.site-header .social-icon {
    text-align: right;
    font-size: 15px;
    margin-bottom: 0;
}

.site-header .social-icon-link {
    background: transparent;
    width: inherit;
    height: inherit;
    line-height: inherit;
    margin-right: 14px;
    transition: opacity 0.2s ease;
}

.site-header .social-icon-link:hover { opacity: 0.75; }

/* HERO SECTION */
.hero-section-full-height {
    height: 680px;
    min-height: 680px;
    position: relative;
}

#hero-slide .carousel-item {
    height: 680px;
    min-height: 680px;
}

.carousel-image {
    display: block;
    width: 100%;
    min-height: 680px;
    object-fit: cover;
}

/* Full dark gradient overlay covering the entire carousel item */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(11, 31, 58, 0.30) 100%,
        rgba(11, 31, 58, 0.62) 20%,
        rgba(11, 31, 58, 0.82) 10%
    );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.5rem;
    z-index: 3;
}

.hero-overlay h1 {
    color: #ffffff;
    font-weight: 800;
    margin-bottom: 0.75rem;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
    text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.hero-overlay p {
    color: rgba(255,255,255,0.88);
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

/* Breadcrumb on dark overlay */
.hero-overlay .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    justify-content: center;
}

.hero-overlay .breadcrumb-item a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    transition: color 0.2s ease;
}

.hero-overlay .breadcrumb-item a:hover { color: #ffffff; }

.hero-overlay .breadcrumb-item.active { color: rgba(255,255,255,0.55); }

.hero-overlay .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,0.45);
}

/* Fade-up animation */
@keyframes heroFadeUp {
    0%   { opacity: 0; transform: translateY(24px); }
    100% { opacity: 1; transform: translateY(0); }
}

.carousel-item .hero-overlay {
    opacity: 0;
}

.carousel-item.active .hero-overlay {
    animation: heroFadeUp 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Mobile hero */
@media (max-width: 768px) {
    .hero-overlay h1 { font-size: 1.8rem; }
    .hero-overlay p  { font-size: 0.95rem; }
}

/* POST-HERO ABOUT INTRO */
.delf-foundation-intro {
    padding: 20px 0 30px;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

/* Dot-grid texture */
.delf-foundation-intro::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(0,180,216,0.10) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

/* Vignette to fade edges */
.delf-foundation-intro::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, #ffffff 82%);
    pointer-events: none;
}

.delf-foundation-intro .container { position: relative; z-index: 1; }

/* Eyebrow label */
.intro-label {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 2.5px;
    font-weight: 700;
    color: var(--brand-gold);
    text-transform: uppercase;
    margin-bottom: 14px;
}

/* Title */
.delf-intro-title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    color: var(--brand-navy);
    margin-bottom: 18px;
    line-height: 1.25;
}

/* Lead */
.delf-intro-lead {
    font-size: 18px;
    font-weight: 500;
    color: var(--brand-cyan);
    margin-bottom: 14px;
}

/* Description */
.intro-description {
    font-size: 16px;
    color: var(--text-body);
    line-height: 1.8;
    max-width: 750px;
    margin: 0 auto;
}

/* CTA buttons */
.intro-buttons .btn {
    padding: 13px 28px;
    font-weight: 600;
    border-radius: 4px;
    margin: 0 6px 8px;
    transition: all 0.25s ease;
}

.intro-btn-primary {
    background: var(--brand-cyan);
    color: #fff;
    border: 2px solid var(--brand-cyan);
}

.intro-btn-primary:hover {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: #fff;
    transform: translateY(-2px);
}

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

.intro-btn-outline:hover {
    background: var(--brand-cyan);
    color: #fff;
    transform: translateY(-2px);
}

/* Vision / Mission cards */
.intro-mv-box {
    background: #f8fafc;
    padding: 28px 24px;
    border-radius: 10px;
    border-left: 4px solid var(--brand-gold);
    box-shadow: 0 8px 28px rgba(0,0,0,0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
}

.intro-mv-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}

.intro-mv-box h5 {
    font-weight: 700 !important;
    margin-bottom: 10px;
    color: var(--brand-navy) !important;
    font-size: 18px !important;
}

.intro-mv-box p {
    font-size: 15px;
    color: var(--text-body);
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 991px) {
    .delf-intro-title { font-size: 28px; }
    .intro-description { font-size: 15px; }
}

/* FUNDING IMPACT SECTION */
.delf-impact-section {
    padding: 50px 0 20px;
    background: var(--bg-light);
}

.impact-label {
    display: block;
    font-size: 12px;
    letter-spacing: 2.5px;
    color: var(--brand-gold);
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.impact-title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    color: var(--brand-navy);
    margin-bottom: 14px;
    line-height: 1.2;
}

.impact-subtitle {
    max-width: 700px;
    margin: 0 auto;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.7;
}

/* Image collage */
.impact-image-collage {
    position: relative;
    padding-bottom: 50px;
}

.impact-image-collage .img-main {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 20px 45px rgba(0,0,0,0.08);
    display: block;
}

.impact-image-collage .img-secondary {
    position: absolute;
    bottom: 0;
    right: -20px;            /* safe — won't overflow container */
    width: 58%;
    border-radius: 12px;
    border: 6px solid #fff;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.impact-content { padding-left: 10px; }

.impact-text {
    font-size: 16px;
    color: #444;
    line-height: 1.8;
    margin-bottom: 24px;
}

/* Stat highlight card */
.impact-highlight {
    background: var(--brand-navy);
    color: #fff;
    padding: 22px 28px;
    border-radius: 10px;
    margin-bottom: 24px;
    display: inline-block;
}

.impact-highlight h3 {
    font-size: 34px;
    margin: 0 0 4px;
    font-weight: 800;
    color: var(--brand-cyan) !important;
}

.impact-highlight span {
    font-size: 13px;
    opacity: 0.85;
    color: #fff;
}

/* Points list */
.impact-points {
    list-style: none;
    padding: 0;
    margin-bottom: 28px;
}

.impact-points li {
    font-size: 15px;
    margin-bottom: 10px;
    color: #333;
    display: flex;
    align-items: center;
}

.impact-points i {
    color: var(--brand-cyan);
    margin-right: 10px;
    font-size: 17px;
    flex-shrink: 0;
}

/* CTA button */
.impact-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--brand-navy);
    color: #fff;
    padding: 13px 26px;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    border: 2px solid var(--brand-navy);
    transition: all 0.25s ease;
}

.impact-btn:hover {
    background: transparent;
    color: var(--brand-navy);
    transform: translateY(-2px);
}

@media (max-width: 991px) {
    .impact-image-collage {
        padding-bottom: 0;
    }
    .impact-image-collage .img-secondary {
        position: relative;
        right: 0; bottom: 0;
        width: 100%;
        margin-top: 16px;
        border: none;
    }
    .impact-title { font-size: 30px; }
}

/* ACTIVITIES SECTION */
.delf-activities-section {
    background: #ffffff;
    padding: 50px 0;
}

.activities-label {
    display: block;
    font-size: 12px;
    letter-spacing: 2.5px;
    color: var(--brand-gold);
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.activities-main-title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    color: var(--brand-navy);
    margin-bottom: 8px;
}

/* Card */
.activity-card {
    background: #f8fafc;
    padding: 30px 24px;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    height: 100%;
}

.activity-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
    background: #ffffff;
}

/* Icon */
.activity-icon {
    font-size: 38px;
    color: var(--brand-gold);
    min-width: 56px;
    line-height: 1;
    flex-shrink: 0;
}

/* Content */
.activity-content h5 {
    font-size: 17px !important;
    font-weight: 700;
    color: var(--brand-navy) !important;
    margin-bottom: 8px;
}

.activity-content p {
    font-size: 14px;
    color: var(--text-body);
    line-height: 1.7;
    margin-bottom: 16px;
}

/* Read More — underline link style instead of filled button */
.activity-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--brand-cyan);
    font-weight: 600;
    padding: 6px 0;
    font-size: 13px;
    text-decoration: none;
    border-bottom: 2px solid var(--brand-cyan);
    transition: color 0.25s ease, border-color 0.25s ease;
}

.activity-btn::after { content: '→'; transition: transform 0.25s ease; }

.activity-btn:hover {
    color: var(--brand-navy);
    border-color: var(--brand-navy);
}

@media (max-width: 991px) {
    .activity-card { padding: 25px 20px; }
    .activities-main-title { font-size: 30px; }
}

@media (max-width: 576px) {
    .activity-icon { font-size: 32px; min-width: 46px; }
}

/* EVENTS SECTION */
.events-section {
    background: var(--bg-light);
    padding: 50px 0;
}

.section-title {
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 700;
    color: var(--brand-navy);
}

.section-title span { color: var(--brand-cyan); }

.section-subtitle {
    max-width: 600px;
    margin: 0 auto;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.7;
}

/* Event row — 3-column grid, safe breakpoints */
.event-row {
    display: grid;
    grid-template-columns: 150px 1fr 280px;
    gap: 32px;
    align-items: center;
    padding: 32px 0;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.2s ease, padding 0.2s ease;
}

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

.event-row:hover {
    background: rgba(0,180,216,0.03);
    border-radius: 8px;
    padding-left: 12px;
    padding-right: 12px;
}

/* Date column */
.event-date-col { text-align: center; position: relative; }

.event-date { font-size: 13px; color: #444; line-height: 1.6; }

.event-date strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--brand-navy);
}

.event-date-col::after {
    content: '';
    position: absolute;
    right: -16px;
    top: 0; bottom: 0;
    width: 1px;
    background: var(--border-light);
}

/* Content column */
.event-content-col h4 {
    font-size: 19px;
    font-weight: 700;
    color: var(--brand-navy);
    margin-bottom: 10px;
}

.event-content-col p {
    font-size: 14px;
    color: var(--text-body);
    line-height: 1.7;
    margin-bottom: 14px;
}

/* Event CTA button */
.event-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--brand-gold);
    color: #fff;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    border: 2px solid var(--brand-gold);
    transition: all 0.25s ease;
}

.event-btn:hover {
    background: transparent;
    color: var(--brand-gold);
}

/* Image column */
.event-image-col { text-align: right; overflow: hidden; }

.event-image-col img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transition: transform 0.35s ease;
    display: block;
}

.event-row:hover .event-image-col img { transform: scale(1.03); }

/* Responsive breakpoints — safe grid collapse */
@media (max-width: 1100px) {
    .event-row { grid-template-columns: 130px 1fr 220px; gap: 24px; }
}

@media (max-width: 880px) {
    .event-row {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 16px;
    }
    .event-date-col::after { display: none; }
    .event-image-col { text-align: center; }
    .event-image-col img { max-width: 100%; height: auto; }
    .event-row:hover { padding-left: 0; padding-right: 0; }
}

/* TEAM SECTION */
.team-section {
    background: var(--bg-offwhite);
    padding: 20px 0;
}

.team-eyebrow {
    display: block;
    font-size: 12px;
    letter-spacing: 2.5px;
    color: var(--brand-gold);
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.team-main-title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    color: var(--brand-navy);
}

/* Featured leader image */
.featured-img-wrapper {
    background: #e9e9e9;
    padding: 10px;
    border-radius: 8px;
    max-width: 420px;
    margin: 0 auto;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.featured-img-wrapper:hover {
    box-shadow: 0 20px 48px rgba(0,0,0,0.12);
}

.featured-leader-img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    object-position: top;
    border-radius: 4px;
    transition: transform 0.5s ease;
    display: block;
}

.featured-img-wrapper:hover .featured-leader-img { transform: scale(1.03); }

/* Leader text */
.leader-name {
    font-size: 26px;
    font-weight: 700;
    color: var(--brand-navy);
    margin-bottom: 4px;
}

.leader-role {
    color: var(--brand-cyan);
    font-style: italic;
    font-weight: 600;
    margin-bottom: 14px;
    font-size: 15px;
}

.leader-bio {
    color: var(--text-body);
    line-height: 1.75;
    font-size: 15px;
}

/* Leader social icons */
.leader-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: var(--brand-gold);
    color: #000;
    margin-right: 8px;
    font-size: 15px;
    border-radius: 4px;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.leader-social a:hover {
    background: var(--brand-navy);
    color: #fff;
    transform: translateY(-3px);
}

/* Divider */
.leader-divider {
    height: 2px;
    background: linear-gradient(90deg, var(--brand-gold), transparent);
    width: 100%;
    margin: 32px 0;
    opacity: 0.6;
}

/* Mini team cards — with hover */
.team-mini-card {
    background: #fff;
    border-radius: 12px;
    padding: 18px 16px 22px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
    border: 1px solid var(--border-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    text-align: center;
}

.team-mini-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.10);
}

.mini-leader-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: top;
    border-radius: 8px;
    transition: transform 0.5s ease;
    display: block;
}

.team-mini-card:hover .mini-leader-img { transform: scale(1.04); }

.team-mini-card h6 {
    font-weight: 700;
    margin-top: 14px;
    margin-bottom: 2px;
    font-size: 15px;
    color: var(--brand-navy);
}

@media (max-width: 768px) {
    .leader-name { font-size: 22px; }
    .team-main-title { font-size: 28px; }
}

/* BLOG SECTION */
.delf-blog-section {
    background: #ffffff;
    padding: 40px 0;
}

.text-accent { color: var(--brand-gold); }

/* Blog card */
.blog-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0,0,0,0.06);
    border: 1px solid var(--border-light);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    height: 100%;
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.1);
}

/* Image */
.blog-img-wrapper {
    position: relative;
    overflow: hidden;
}

.blog-img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.blog-card:hover .blog-img { transform: scale(1.06); }

/* Date badge */
.blog-date {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--brand-gold);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 4px;
}

/* Content */
.blog-content { padding: 22px 20px 26px; }

.blog-meta {
    font-size: 12px;
    color: #888;
    display: flex;
    gap: 14px;
    margin-bottom: 10px;
}

.blog-meta i {
    color: var(--brand-gold);
    margin-right: 4px;
}

.blog-title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--brand-navy) !important;
    line-height: 1.4;
}

.blog-excerpt {
    font-size: 14px;
    color: var(--text-body);
    line-height: 1.7;
    margin-bottom: 16px;
}

/* Read More button */
.btn-blog {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--brand-gold);
    color: #fff;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    border: 2px solid var(--brand-gold);
    transition: all 0.25s ease;
}

.btn-blog:hover {
    background: transparent;
    color: var(--brand-gold);
}

@media (max-width: 991px) { .blog-img { height: 210px; } }
@media (max-width: 576px)  { .blog-img { height: 190px; } .blog-title { font-size: 16px; } }

/* FOOTER */
.undelf-footer {
    background: var(--brand-navy);
    color: #ccc;
}

.footer-top {
    padding: 60px 0 40px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-logo {
    width: 140px;
    margin-bottom: 16px;
    display: block;
    filter: brightness(0) invert(1);
}

.footer-about {
    font-size: 14px;
    color: rgba(255,255,255,0.65);
    line-height: 1.7;
    margin: 0;
}

.footer-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 18px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li { margin-bottom: 10px; }

.footer-links a {
    color: rgba(255,255,255,0.65);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover { color: var(--brand-cyan); }

.footer-top p {
    font-size: 14px;
    color: rgba(255,255,255,0.65);
    line-height: 1.7;
    margin-bottom: 8px;
}

.footer-top p i {
    color: var(--brand-cyan);
    margin-right: 8px;
}

.footer-btn {
    display: inline-block;
    background: var(--brand-cyan);
    color: #fff;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    margin-top: 6px;
    transition: background 0.25s ease;
}

.footer-btn:hover { background: var(--brand-gold); color: #fff; }

/* Newsletter */
.footer-newsletter {
    display: flex;
    gap: 0;
    margin-top: 12px;
}

.footer-newsletter input {
    flex: 1;
    padding: 10px 14px;
    border: none;
    border-radius: 4px 0 0 4px;
    font-size: 13px;
    outline: none;
}

.footer-newsletter button {
    background: var(--brand-cyan);
    color: #fff;
    border: none;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    transition: background 0.25s ease;
}

.footer-newsletter button:hover { background: var(--brand-gold); }

/* Footer bottom bar */
.footer-bottom {
    padding: 20px 0;
}

.copyright {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    margin: 0;
}

.copyright strong { color: rgba(255,255,255,0.8); }

.footer-social {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    font-size: 15px;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease;
}

.footer-social a:hover {
    background: var(--brand-cyan);
    color: #fff;
}

@media (max-width: 768px) {
    .footer-social { justify-content: flex-start; margin-top: 12px; }
}

/* BACK TO TOP */
#backToTop {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--brand-navy);
    color: #fff;
    border: none;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,0.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.25s ease;
    z-index: 999;
}

#backToTop.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#backToTop:hover { background: var(--brand-bright); }

@media (max-width: 768px) { #backToTop { bottom: 20px; right: 20px; } }

/* GLOBAL SECTION STYLING */
.section-padding {
    padding: 30px 0;
}

.section-title {
    font-size: 34px;
    font-weight: 700;
    color: #0b1f3a;
}

.section-subtitle {
    font-size: 17px;
    color: #6c757d;
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.7;
}

/* GLOBAL TOKENS */
    :root {
        --brand-cyan:   hsl(194, 85%, 51%);
        --brand-navy:   #0b1f3a;
        --brand-gold:   #d4a017;
        --brand-blue:   #0077b6;
        --brand-bright: #00b4d8;
        --text-body:    #555;
        --text-muted:   #6c757d;
        --bg-light:     #f7f9fc;
        --bg-offwhite:  #f4f6f8;
        --border-light: #e8edf2;
    }

    /* SCROLL-REVEAL */
    .reveal {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .reveal.revealed { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: 0.12s; }
    .reveal-delay-2 { transition-delay: 0.24s; }
    .reveal-delay-3 { transition-delay: 0.36s; }
    .reveal-delay-4 { transition-delay: 0.48s; }

    /* SECTION DIVIDERS */
    .wave-divider {
        display: block;
        line-height: 0;
        overflow: hidden;
        margin-bottom: -2px;
    }
    .wave-divider svg { display: block; width: 100%; }

    .stripe-divider {
        height: 4px;
        background: linear-gradient(90deg, var(--brand-navy), var(--brand-cyan), var(--brand-navy));
    }

    /* ABOUT INTRO */
    .about-intro-section {
        padding: 40px 0;
        background: #ffffff;
        position: relative;
        overflow: hidden;
    }

    /* Dot-grid texture */
    .about-intro-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle, rgba(0,180,216,0.10) 1px, transparent 1px);
        background-size: 28px 28px;
        pointer-events: none;
    }
    .about-intro-section::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at center, transparent 40%, #ffffff 82%);
        pointer-events: none;
    }
    .about-intro-section .container { position: relative; z-index: 1; }

    .about-intro-label {
        display: inline-block;
        font-size: 12px;
        letter-spacing: 2.5px;
        font-weight: 700;
        color: var(--brand-gold);
        text-transform: uppercase;
        margin-bottom: 14px;
    }

    .about-intro-title {
        font-size: clamp(26px, 4vw, 38px);
        font-weight: 800;
        color: var(--brand-navy);
        margin-bottom: 24px;
        line-height: 1.2;
    }

    .about-intro-text {
        font-size: 16px;
        line-height: 1.85;
        color: #444;
        margin-bottom: 16px;
    }

    /* VISION & MISSION */
    .vision-mission-section {
        background: var(--bg-light);
        padding: 40px 0;
    }

    .vm-card {
        background: #ffffff;
        padding: 40px 32px;
        border-radius: 14px;
        box-shadow: 0 10px 35px rgba(0,0,0,0.05);
        border: 1px solid var(--border-light);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        height: 100%;
        text-align: center;
    }

    .vm-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 48px rgba(0,0,0,0.09);
    }

    .vm-icon {
        width: 64px; height: 64px;
        background: rgba(0,180,216,0.08);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
    }

    .vm-icon i {
        font-size: 28px;
        color: var(--brand-cyan);
    }

    .vm-card h4 {
        font-weight: 700;
        margin-bottom: 12px;
        color: var(--brand-navy);
        font-size: 20px;
    }

    .vm-card p {
        font-size: 15px;
        color: var(--text-body);
        line-height: 1.75;
        margin: 0;
    }

    /* KEY PROGRAMS */
    .programs-section {
        background: #ffffff;
        padding: 40px 0;
    }

    .ap-section-label {
        display: inline-block;
        font-size: 12px;
        letter-spacing: 2.5px;
        font-weight: 700;
        color: var(--brand-gold);
        text-transform: uppercase;
        margin-bottom: 14px;
    }

    .ap-section-title {
        font-size: clamp(26px, 4vw, 38px);
        font-weight: 800;
        color: var(--brand-navy);
        margin-bottom: 14px;
        line-height: 1.2;
    }

    .ap-section-subtitle {
        font-size: 16px;
        color: var(--text-muted);
        line-height: 1.7;
        max-width: 700px;
        margin: 0 auto;
    }

    .program-card {
        background: var(--bg-light);
        border-radius: 14px;
        padding: 32px 28px;
        border: 1px solid var(--border-light);
        box-shadow: 0 4px 16px rgba(0,0,0,0.04);
        transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.3s ease;
        height: 100%;
    }

    .program-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 44px rgba(0,0,0,0.09);
        background: #ffffff;
    }

    .program-icon {
        width: 52px; height: 52px;
        background: rgba(0,180,216,0.09);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 18px;
    }

    .program-icon i {
        font-size: 24px;
        color: var(--brand-cyan);
    }

    .program-card h4 {
        font-size: 17px;
        font-weight: 700;
        margin-bottom: 10px;
        color: var(--brand-navy);
    }

    .program-card p {
        font-size: 14px;
        color: var(--text-body);
        line-height: 1.7;
        margin-bottom: 18px;
    }

    .program-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: transparent;
        color: var(--brand-cyan);
        font-weight: 600;
        font-size: 13px;
        text-decoration: none;
        border-bottom: 2px solid var(--brand-cyan);
        padding-bottom: 2px;
        transition: color 0.25s ease, border-color 0.25s ease;
    }

    .program-btn::after { content: '→'; }

    .program-btn:hover {
        color: var(--brand-navy);
        border-color: var(--brand-navy);
    }

    /* IMPACT STORIES */
    .impact-stories-section {
        background: var(--bg-offwhite);
        padding: 40px 0;
    }

    .impact-card {
        background: #ffffff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 8px 28px rgba(0,0,0,0.06);
        border: 1px solid var(--border-light);
        transition: transform 0.35s ease, box-shadow 0.35s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .impact-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 22px 50px rgba(0,0,0,0.10);
    }

    .impact-img-wrapper { overflow: hidden; }

    .impact-img {
        width: 100%;
        height: 230px;
        object-fit: cover;
        display: block;
        transition: transform 0.5s ease;
    }

    .impact-card:hover .impact-img { transform: scale(1.05); }

    .impact-content {
        padding: 24px 22px 26px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    /* Opening quote mark */
    .impact-content::before {
        content: '"';
        font-size: 56px;
        line-height: 1;
        color: var(--brand-cyan);
        opacity: 0.25;
        font-family: Georgia, serif;
        display: block;
        margin-bottom: -12px;
    }

    .impact-quote {
        font-style: italic;
        color: var(--text-body);
        line-height: 1.75;
        margin-bottom: 16px;
        font-size: 14px;
        flex-grow: 1;
    }

    .impact-name {
        font-weight: 700;
        margin-bottom: 2px;
        color: var(--brand-navy);
        font-size: 15px;
    }

    .impact-role {
        font-size: 13px;
        color: var(--brand-gold);
        font-weight: 600;
    }

    /* GLOBAL IMPACT STATS */
    .impact-stats-section {
        background: var(--brand-navy);
        padding: 40px 0 10px;
        position: relative;
        overflow: hidden;
    }

    /* Decorative background circles */
    .impact-stats-section::before {
        content: '';
        position: absolute;
        top: -100px; right: -100px;
        width: 400px; height: 400px;
        border-radius: 50%;
        background: rgba(0,180,216,0.06);
        pointer-events: none;
    }

    .impact-stats-section::after {
        content: '';
        position: absolute;
        bottom: -80px; left: -80px;
        width: 300px; height: 300px;
        border-radius: 50%;
        background: rgba(212,160,23,0.05);
        pointer-events: none;
    }

    .impact-stats-section .container { position: relative; z-index: 1; }

    .stats-header h2 {
        font-size: clamp(26px, 4vw, 36px);
        font-weight: 800;
        color: #ffffff !important;
        margin-bottom: 12px;
    }

    .stats-header p {
        font-size: 15px;
        color: rgba(255,255,255,0.70);
        max-width: 600px;
        margin: 0 auto;
        line-height: 1.7;
    }

    .title-underline {
        width: 40px;
        height: 3px;
        background: var(--brand-gold);
        margin: 0 auto 20px;
        border-radius: 2px;
    }

    .impact-item { padding: 40px 20px; }

    .impact-item.featured {
        border-left: 1px solid rgba(255,255,255,0.10);
        border-right: 1px solid rgba(255,255,255,0.10);
    }

    .impact-number {
        display: block;
        font-size: clamp(36px, 5vw, 52px);
        font-weight: 800;
        color: var(--brand-gold);
        margin-bottom: 12px;
        line-height: 1;
    }

    .impact-item h6 {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        font-weight: 600;
        color: rgba(255,255,255,0.65);
        margin: 0;
    }

    /* PARTNERS SECTION */
    .partners-section {
        background: var(--bg-light);
        padding: 40px 0;
    }

    .partner-logo {
        max-height: 68px;
        width: auto;
        max-width: 100%;
        object-fit: contain;
        filter: grayscale(100%);
        opacity: 0.7;
        transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
        display: block;
        margin: 0 auto;
    }

    .partner-logo:hover {
        filter: grayscale(0%);
        opacity: 1;
        transform: scale(1.06);
    }

    /* BACK TO TOP */
    #backToTop {
        position: fixed;
        bottom: 32px; right: 32px;
        width: 46px; height: 46px;
        border-radius: 50%;
        background: var(--brand-navy);
        color: #fff;
        border: none;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 6px 20px rgba(0,0,0,0.2);
        opacity: 0; visibility: hidden;
        transform: translateY(12px);
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.25s ease;
        z-index: 999;
    }
    #backToTop.visible { opacity: 1; visibility: visible; transform: translateY(0); }
    #backToTop:hover { background: var(--brand-bright); }
    @media (max-width: 768px) { #backToTop { bottom: 20px; right: 20px; } }

 /* GLOBAL TOKENS */
    :root {
        --brand-cyan:   hsl(194, 85%, 51%);
        --brand-navy:   #0b1f3a;
        --brand-gold:   #d4a017;
        --brand-blue:   #0077b6;
        --brand-bright: #00b4d8;
        --text-body:    #555;
        --text-muted:   #6c757d;
        --bg-light:     #f7f9fc;
        --bg-offwhite:  #f4f6f8;
        --border-light: #e8edf2;
    }

    /* SCROLL-REVEAL */
    .reveal {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .reveal.revealed { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: 0.12s; }
    .reveal-delay-2 { transition-delay: 0.24s; }
    .reveal-delay-3 { transition-delay: 0.36s; }

    /* SECTION DIVIDERS */
    .wave-divider {
        display: block;
        line-height: 0;
        overflow: hidden;
        margin-bottom: -2px;
    }
    .wave-divider svg { display: block; width: 100%; }

    .stripe-divider {
        height: 4px;
        background: linear-gradient(90deg, var(--brand-navy), var(--brand-cyan), var(--brand-navy));
    }

    /* WHY DONATE SECTION */
    .why-donate-section {
        background: #ffffff;
        padding: 40px 0;
        position: relative;
        overflow: hidden;
    }

    .why-donate-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle, rgba(0,180,216,0.09) 1px, transparent 1px);
        background-size: 28px 28px;
        pointer-events: none;
    }
    .why-donate-section::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at center, transparent 40%, #ffffff 82%);
        pointer-events: none;
    }
    .why-donate-section .container { position: relative; z-index: 1; }

    .section-label {
        display: inline-block;
        font-size: 12px;
        letter-spacing: 2.5px;
        font-weight: 700;
        color: var(--brand-gold);
        text-transform: uppercase;
        margin-bottom: 14px;
    }

    .section-heading {
        font-size: clamp(26px, 4vw, 38px);
        font-weight: 800;
        color: var(--brand-navy);
        margin-bottom: 16px;
        line-height: 1.2;
    }

    .section-lead {
        font-size: 16px;
        color: var(--text-muted);
        line-height: 1.75;
        max-width: 600px;
    }

    /* Impact pillar cards */
    .impact-pillar {
        background: var(--bg-light);
        border: 1px solid var(--border-light);
        border-radius: 14px;
        padding: 30px 24px;
        text-align: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
        height: 100%;
    }

    .impact-pillar:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 44px rgba(0,0,0,0.08);
        background: #ffffff;
    }

    .pillar-icon {
        width: 58px; height: 58px;
        background: rgba(0,180,216,0.09);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
    }

    .pillar-icon i { font-size: 24px; color: var(--brand-cyan); }

    .impact-pillar h5 {
        font-size: 15px;
        font-weight: 700;
        color: var(--brand-navy);
        margin-bottom: 8px;
    }

    .impact-pillar p {
        font-size: 13px;
        color: var(--text-muted);
        line-height: 1.65;
        margin: 0;
    }

    /* DONATE FORM SECTION */
    .donate-form-section {
        background: var(--bg-light);
        padding: 40px 0 40px;
        position: relative;
    }

    /* Background image with overlay */
    .donate-form-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url('images/group-people-volunteering-foodbank-poor-people.jpg');
        background-size: cover;
        background-position: center;
        opacity: 0.06;
        pointer-events: none;
    }
    .donate-form-section .container { position: relative; z-index: 1; }

    /* Form card */
    .donate-card {
        background: #ffffff;
        border-radius: 18px;
        box-shadow: 0 16px 60px rgba(0,0,0,0.10);
        overflow: hidden;
    }

    /* Card header bar */
    .donate-card-header {
        background: var(--brand-navy);
        padding: 28px 36px;
        position: relative;
        overflow: hidden;
    }

    .donate-card-header::after {
        content: '';
        position: absolute;
        top: -60px; right: -60px;
        width: 200px; height: 200px;
        border-radius: 50%;
        background: rgba(0,180,216,0.08);
        pointer-events: none;
    }

    .donate-card-header h3 {
        color: #ffffff;
        font-size: 22px;
        font-weight: 800;
        margin: 0 0 4px;
    }

    .donate-card-header p {
        color: rgba(255,255,255,0.65);
        font-size: 13px;
        margin: 0;
    }

    /* Card body */
    .donate-card-body { padding: 36px 36px 40px; }

    /* FREQUENCY TOGGLE */
    .frequency-toggle {
        display: flex;
        background: var(--bg-light);
        border-radius: 10px;
        padding: 4px;
        gap: 4px;
        margin-bottom: 28px;
    }

    .freq-btn {
        flex: 1;
        padding: 10px;
        border: none;
        background: transparent;
        border-radius: 7px;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-muted);
        cursor: pointer;
        transition: all 0.25s ease;
    }

    .freq-btn.active {
        background: var(--brand-navy);
        color: #ffffff;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    /* AMOUNT GRID  */
    .amount-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-bottom: 14px;
    }

    .amount-btn {
        padding: 13px 8px;
        border: 2px solid var(--border-light);
        border-radius: 10px;
        background: var(--bg-light);
        font-size: 15px;
        font-weight: 700;
        color: var(--brand-navy);
        cursor: pointer;
        transition: all 0.22s ease;
        text-align: center;
    }

    .amount-btn:hover {
        border-color: var(--brand-cyan);
        background: rgba(0,180,216,0.05);
    }

    .amount-btn.selected {
        border-color: var(--brand-navy);
        background: var(--brand-navy);
        color: #ffffff;
    }

    /* Custom amount input */
    .custom-amount-wrapper {
        position: relative;
        margin-bottom: 28px;
    }

    .custom-amount-symbol {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 15px;
        font-weight: 700;
        color: var(--brand-navy);
        pointer-events: none;
    }

    .custom-amount-input {
        width: 100%;
        padding: 13px 16px 13px 30px;
        border: 2px solid var(--border-light);
        border-radius: 10px;
        font-size: 15px;
        font-weight: 600;
        color: var(--brand-navy);
        background: var(--bg-light);
        transition: border-color 0.25s ease, background 0.25s ease;
        outline: none;
    }

    .custom-amount-input:focus {
        border-color: var(--brand-cyan);
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(0,180,216,0.10);
    }

    .custom-amount-input::placeholder { color: #aab0bb; font-weight: 400; }

    /* FORM FIELDS */
    .donate-input {
        width: 100%;
        padding: 13px 16px;
        border: 1px solid var(--border-light);
        border-radius: 10px;
        font-size: 14px;
        color: var(--brand-navy);
        background: var(--bg-light);
        transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
        outline: none;
    }

    .donate-input:focus {
        border-color: var(--brand-cyan);
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(0,180,216,0.10);
    }

    .donate-input::placeholder { color: #aab0bb; }

    .donate-label {
        font-size: 12px;
        font-weight: 700;
        color: var(--brand-navy);
        letter-spacing: 0.5px;
        text-transform: uppercase;
        margin-bottom: 6px;
        display: block;
    }

    /* Section mini-headings */
    .form-section-label {
        font-size: 13px;
        font-weight: 700;
        color: var(--brand-navy);
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .form-section-label::before {
        content: '';
        width: 18px; height: 2px;
        background: var(--brand-gold);
        border-radius: 2px;
        flex-shrink: 0;
    }

    /* PAYMENT METHOD CARDS */
    .payment-methods {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 24px;
    }

    .payment-option {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 18px;
        border: 2px solid var(--border-light);
        border-radius: 12px;
        background: var(--bg-light);
        cursor: pointer;
        transition: border-color 0.25s ease, background 0.25s ease;
        position: relative;
    }

    .payment-option:hover { border-color: var(--brand-cyan); background: rgba(0,180,216,0.03); }

    .payment-option input[type="radio"] {
        accent-color: var(--brand-navy);
        width: 18px; height: 18px;
        flex-shrink: 0;
        cursor: pointer;
    }

    .payment-option.checked {
        border-color: var(--brand-navy);
        background: rgba(11,31,58,0.03);
    }

    .payment-option-label {
        font-size: 14px;
        font-weight: 600;
        color: var(--brand-navy);
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        flex: 1;
    }

    .payment-option-label i { font-size: 20px; color: var(--brand-cyan); }

    /* Card fields (shown when card option selected) */
    .card-fields {
        display: none;
        margin-top: 14px;
        padding: 18px;
        background: var(--bg-light);
        border-radius: 10px;
        border: 1px solid var(--border-light);
    }

    .card-fields.visible { display: block; }

    /* SUBMIT BUTTON */
    .btn-donate-submit {
        width: 100%;
        background: var(--brand-gold);
        color: #ffffff;
        border: none;
        border-radius: 12px;
        padding: 16px;
        font-size: 16px;
        font-weight: 800;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: all 0.25s ease;
        letter-spacing: 0.3px;
        box-shadow: 0 6px 20px rgba(212,160,23,0.30);
    }

    .btn-donate-submit:hover {
        background: #b8880f;
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(212,160,23,0.38);
    }

    .btn-donate-submit .spinner {
        display: none;
        width: 18px; height: 18px;
        border: 2px solid rgba(255,255,255,0.4);
        border-top-color: #fff;
        border-radius: 50%;
        animation: spin 0.7s linear infinite;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    .form-feedback {
        display: none;
        border-radius: 10px;
        padding: 14px 18px;
        font-size: 14px;
        font-weight: 600;
        margin-top: 16px;
        text-align: center;
    }

    .form-feedback.success {
        display: block;
        background: rgba(0,180,216,0.08);
        border: 1px solid var(--brand-cyan);
        color: var(--brand-navy);
    }

    .form-feedback.error {
        display: block;
        background: rgba(220,53,69,0.07);
        border: 1px solid #dc3545;
        color: #842029;
    }

    /* Trust strip */
    .trust-strip {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        margin-top: 18px;
        padding-top: 18px;
        border-top: 1px solid var(--border-light);
    }

    .trust-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--text-muted);
        font-weight: 600;
    }

    .trust-item i { color: var(--brand-cyan); font-size: 14px; }

    /* SIDE PANEL */
    .donate-side-panel { padding-top: 8px; }

    .impact-preview-card {
        background: var(--brand-navy);
        border-radius: 14px;
        padding: 28px 24px;
        color: #ffffff;
        margin-bottom: 18px;
        position: relative;
        overflow: hidden;
    }

    .impact-preview-card::before {
        content: '';
        position: absolute;
        top: -40px; right: -40px;
        width: 160px; height: 160px;
        border-radius: 50%;
        background: rgba(0,180,216,0.08);
        pointer-events: none;
    }

    .impact-preview-card h5 {
        font-size: 15px;
        font-weight: 700;
        color: #ffffff !important;
        margin-bottom: 16px;
        position: relative;
    }

    .impact-line {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 12px;
        position: relative;
    }

    .impact-line i { color: var(--brand-gold); font-size: 15px; flex-shrink: 0; margin-top: 2px; }

    .impact-line p {
        font-size: 13px;
        color: rgba(255,255,255,0.75);
        line-height: 1.55;
        margin: 0;
    }

    .impact-line strong { color: #ffffff; }

    /* Dynamic impact display */
    .impact-meter {
        background: rgba(255,255,255,0.07);
        border-radius: 10px;
        padding: 16px 18px;
        margin-top: 16px;
        position: relative;
    }

    .impact-meter-label {
        font-size: 12px;
        color: rgba(255,255,255,0.55);
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        margin-bottom: 6px;
    }

    .impact-meter-value {
        font-size: 26px;
        font-weight: 800;
        color: var(--brand-gold);
        line-height: 1;
    }

    .impact-meter-desc {
        font-size: 12px;
        color: rgba(255,255,255,0.55);
        margin-top: 4px;
    }

    /* Tax info card */
    .tax-info-card {
        background: #ffffff;
        border: 1px solid var(--border-light);
        border-radius: 14px;
        padding: 22px 22px;
    }

    .tax-info-card h6 {
        font-size: 13px;
        font-weight: 700;
        color: var(--brand-navy);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .tax-info-card h6 i { color: var(--brand-gold); }

    .tax-info-card p {
        font-size: 12px;
        color: var(--text-muted);
        line-height: 1.65;
        margin: 0;
    }

    /* BACK TO TOP */
    #backToTop {
        position: fixed;
        bottom: 32px; right: 32px;
        width: 46px; height: 46px;
        border-radius: 50%;
        background: var(--brand-navy);
        color: #fff;
        border: none;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 6px 20px rgba(0,0,0,0.2);
        opacity: 0; visibility: hidden;
        transform: translateY(12px);
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.25s ease;
        z-index: 999;
    }
    #backToTop.visible { opacity: 1; visibility: visible; transform: translateY(0); }
    #backToTop:hover { background: var(--brand-bright); }

    /* RESPONSIVE */
    @media (max-width: 768px) {
        .donate-card-body { padding: 24px 20px 28px; }
        .amount-grid { grid-template-columns: repeat(2, 1fr); }
        .donate-side-panel { margin-top: 32px; }
    }


/* SITE FOOTER */
.site-footer {
  background-color: hsl(194, 85%, 51%);
  padding-top: 70px;
}

.site-footer-bottom {
  background-color: hsl(194, 85%, 51%);
  position: relative;
  z-index: 2;
  margin-top: 70px;
  padding-top: 25px;
  padding-bottom: 25px;
}

.site-footer-bottom a {
	color: var(--white-color);
}

.site-footer-bottom a:hover {
	color: #FF6;
}

.site-footer-link {
  color: var(--white-color);
}

.copyright-text {
  color: var(--section-bg-color);
  font-size: 19px;
  margin-right: 20px;
}

.site-footer .custom-btn {
  font-size: var(--copyright-font-size);
}

.site-footer .custom-btn:hover {
  background: var(--primary-color);
}


/*FOOTER MENU*/
.footer-menu {
  column-count: 2;
  margin: 0;
  padding: 0;
}

.footer-menu-item {
  list-style: none;
  display: block;
}

.footer-menu-link {
  font-size: var(--p-font-size);
  color: var(--white-color);
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 5px;
}


/*SOCIAL ICON */
.social-icon {
  margin: 0;
  padding: 0;
}

.social-icon-item {
  list-style: none;
  display: inline-block;
  vertical-align: top;
}

.social-icon-link {
  background: var(--site-footer-bg-color);
  border-radius: var(--border-radius-large);
  color: var(--white-color);
  font-size: var(--copyright-font-size);
  display: block;
  margin-right: 5px;
  text-align: center;
  width: 35px;
  height: 35px;
  line-height: 38px;
}

.social-icon-link:hover {
  background: var(--primary-color);
  color: var(--white-color);
}


/*RESPONSIVE STYLES               
-----------------------------------------*/
@media screen and (min-width: 1600px) {
  .featured-block {
    min-height: inherit;
  }

  .volunteer-section::after {
    width: 450px;
    height: 450px;
  }
  
  .volunteer-image {
    width: 350px;
    height: 350px;
  }
}

@media screen and (max-width: 1170px) {
  #hero-slide .carousel-image {
    height: 100%;
    object-fit: cover;
  }
}

@media screen and (max-width: 991px) {
  h1 {
    font-size: 36px;
  }

  h2 {
    font-size: 32px;
  }

  h3 {
    font-size: 30px;
  }

  h4 {
    font-size: 28px;
  }

  h5 {
    font-size: 20px;
  }

  h6 {
    font-size: 18px;
  }

  .section-padding {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .hero-form {
    padding-bottom: 40px;
  }

  .donate-form {
    padding: 35px;
  }

  .navbar {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .navbar-expand-lg .navbar-nav {
    padding-bottom: 30px;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding: 8px 20px;
  }
  
  .dropdown:hover .dropdown-menu {
    display: block;
    position: relative;
    margin-top: 5px;
    margin-bottom: 20px;
    left: 20px;
  }

  .site-header .social-icon {
    text-align: left;
    margin-top: 5px;
  }

  .hero-section-full-height {
    height: inherit;
  }

  .carousel:hover .carousel-control-next-icon, 
  .carousel:hover .carousel-control-prev-icon {
    opacity: 1;
  }

  #hero-slide .carousel-item {
    height: inherit;
  }

  .carousel-control-prev {
    left: 12px;
  }

  .carousel-control-next {
    right: 12px;
  }

  .carousel-control-next-icon, 
  .carousel-control-prev-icon {
    opacity: 1;
    width: 60px;
    height: 60px;
  }

  .news-detail-header-section {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .cta-section::before {
    width: 150px;
    height: 150px;
  }

  .cta-section::after {
    bottom: -60px;
    width: 100px;
    height: 100px;
  }

  .cta-section .row {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .volunteer-section::after {
    width: 300px;
    height: 300px;
  }

  .testimonial-section::before {
    width: 150px;
    height: 150px;
  }

  .testimonial-section::after {
    width: 200px;
    height: 200px;
  }

  #testimonial-carousel .carousel-caption {
    padding-top: 0;
  }

  blockquote {
    padding: 70px 30px 30px 30px;
  }

  .about-image {
    width: inherit;
    height: 450px;
  }

  .volunteer-image {
    width: 250px;
    height: 250px;
    margin: 0;
  }

  .custom-text-block {
    padding: 20px 0 0 0;
  }

  .custom-text-box,
  .volunteer-form {
    padding: 30px;
  }

  .counter-number, 
  .counter-number-text {
    font-size: var(--h2-font-size);
  }

  .contact-info-wrap {
    padding-top: 0;
  }

  .site-footer {
    padding-top: 50px;
  }

  .copyright-text-wrap {
    justify-content: center;
  }

  .site-footer-bottom {
    text-align: center;
    margin-top: 50px;
  }

  .site-footer-bottom .footer-menu {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}

@media screen and (max-width: 580px) {
  .hero-section-full-height,
  #hero-slide .carousel-item,
  .carousel-image {
    min-height: 520px;
  }

  #hero-slide .carousel-caption {
    clip-path: polygon(100% 100%, 100% 100px, 0 100%);
    padding-right: 50px;
    min-width: inherit;
    min-height: inherit;
  }
}

@media screen and (max-width: 480px) {
  h1 {
    font-size: 40px;
  }

  h2 {
    font-size: 28px;
  }

  h3 {
    font-size: 26px;
  }

  h4 {
    font-size: 22px;
  }

  h5 {
    font-size: 20px;
  }

  #hero-slide .carousel-caption {
    min-width: inherit;
    padding-bottom: 30px;
  }

  .carousel-control-next-icon, 
  .carousel-control-prev-icon {
    width: 45px;
    height: 45px;
  }

  .volunteer-image {
    width: 150px;
    height: 150px;
  }

  .volunteer-section::after {
    width: 200px;
    height: 200px;
  }

  .testimonial-section::before {
    top: -50px;
    width: 100px;
    height: 100px;
  }

  .testimonial-section::after {
    bottom: -150px;
    width: 200px;
    height: 200px;
  }

  .social-share .tags-block {
    margin-bottom: 10px;
  }

  .donate-form {
    padding: 25px;
  }
}

/* GLOBAL TOKENS (match site-wide tokens from style.css) */
    :root {
        --brand-cyan:   hsl(194, 85%, 51%);
        --brand-navy:   #0b1f3a;
        --brand-gold:   #d4a017;
        --brand-blue:   #0077b6;
        --brand-bright: #00b4d8;
        --text-body:    #555;
        --text-muted:   #6c757d;
        --bg-light:     #f7f9fc;
        --bg-offwhite:  #f4f6f8;
        --border-light: #e8edf2;

        /* Funding page local aliases */
        --fp-primary:   #003a63;
        --fp-accent:    #d4a017;
    }

    /* SCROLL-REVEAL */
    .reveal {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .reveal.revealed { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: 0.12s; }
    .reveal-delay-2 { transition-delay: 0.24s; }
    .reveal-delay-3 { transition-delay: 0.36s; }

    /* SECTION DIVIDERS */
    .wave-divider {
        display: block;
        line-height: 0;
        overflow: hidden;
        margin-bottom: -2px;
    }
    .wave-divider svg { display: block; width: 100%; }

    .stripe-divider {
        height: 4px;
        background: linear-gradient(90deg, var(--brand-navy), var(--brand-cyan), var(--brand-navy));
    }

    /* FUNDING PAGE — SECTION UTILITIES
       (scoped with .fp- prefix to avoid conflicts with style.css) */
    .fp-section { padding: 18px 0; }
    .fp-section-sm { padding: 14px 0; }

    .fp-label {
        display: inline-block;
        font-size: 12px;
        letter-spacing: 2.5px;
        font-weight: 700;
        color: var(--brand-gold);
        text-transform: uppercase;
        margin-bottom: 14px;
    }

    .fp-title {
        font-size: clamp(26px, 4vw, 38px);
        font-weight: 800;
        color: var(--brand-navy);
        margin-bottom: 14px;
        line-height: 1.2;
    }

    .fp-subtitle {
        font-size: 16px;
        color: var(--text-muted);
        line-height: 1.7;
        max-width: 720px;
        margin: 0 auto;
    }

    /* FUNDING OVERVIEW — INTRO */
    .funding-intro-section {
        background: #ffffff;
        padding: 28px 0 22px;
        position: relative;
        overflow: hidden;
    }

    /* Dot-grid texture */
    .funding-intro-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle, rgba(0,180,216,0.10) 1px, transparent 1px);
        background-size: 28px 28px;
        pointer-events: none;
    }
    .funding-intro-section::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at center, transparent 40%, #ffffff 82%);
        pointer-events: none;
    }
    .funding-intro-section .container { position: relative; z-index: 1; }

    /* FLEXIBLE CAPITAL HIGHLIGHT BOX */
    .highlight-capital { background: var(--bg-light); padding: 48px 0; }

    .highlight-box {
        background: #ffffff;
        padding: 52px 48px;
        border-radius: 20px;
        box-shadow: 0 20px 60px rgba(0,58,99,0.07);
        border: 1px solid var(--border-light);
        transition: transform 0.4s ease, box-shadow 0.4s ease;
        max-width: 860px;
        margin: 0 auto;
    }

    .highlight-box:hover {
        transform: translateY(-6px);
        box-shadow: 0 32px 80px rgba(0,58,99,0.10);
    }

    .highlight-label {
        display: block;
        font-size: 12px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--brand-gold);
        font-weight: 700;
        margin-bottom: 10px;
    }

    .highlight-box h2 {
        font-size: clamp(22px, 3.5vw, 32px);
        font-weight: 700;
        margin-bottom: 14px;
        color: var(--brand-navy) !important;
        letter-spacing: -0.5px;
    }

    .highlight-subtitle {
        max-width: 600px;
        margin: 0 auto 44px;
        font-size: 15px;
        line-height: 1.7;
        color: var(--text-muted);
    }

    /* Grant range */
    .grant-range {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 56px;
        margin-bottom: 36px;
    }

    .grant-card { text-align: center; }

    .range-label {
        display: block;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--brand-gold);
        font-weight: 700;
        margin-bottom: 10px;
    }

    .grant-card h3 {
        font-size: clamp(28px, 4vw, 40px);
        font-weight: 800;
        color: var(--brand-navy) !important;
        margin: 0;
    }

    .grant-divider {
        width: 1px;
        height: 64px;
        background: var(--border-light);
    }

    .funding-note {
        font-size: 13px;
        color: var(--text-muted);
        text-align: center;
        max-width: 680px;
        margin: 0 auto;
        line-height: 1.6;
    }

    @media (max-width: 640px) {
        .highlight-box { padding: 36px 24px; }
        .grant-range { flex-direction: column; gap: 24px; }
        .grant-divider { width: 60px; height: 1px; }
    }

    /* PRIORITY CARDS */
    .priority-card {
        background: #fff;
        border: 1px solid var(--border-light);
        border-radius: 14px;
        padding: 36px 24px;
        height: 100%;
        transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
        text-align: center;
    }

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

    .priority-card i {
        font-size: 32px;
        color: var(--brand-gold);
        margin-bottom: 14px;
        display: block;
    }

    .priority-card h6 {
        font-size: 15px !important;
        font-weight: 700;
        color: var(--brand-navy) !important;
        margin-bottom: 8px;
    }

    .priority-card p {
        font-size: 14px;
        color: var(--text-muted);
        margin: 0;
    }

    /* INFO CARDS (Eligibility / Requirements) */
    .info-card {
        background: #fff;
        border-radius: 14px;
        border: 1px solid var(--border-light);
        padding: 20px 16px;
        position: relative;
        height: 100%;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        overflow: hidden;
    }

    .info-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 18px 40px rgba(0,0,0,0.06);
    }

    .card-accent {
        height: 4px;
        width: 100%;
        background: linear-gradient(90deg, var(--brand-cyan), var(--brand-blue));
        position: absolute;
        top: 0; left: 0; right: 0;
        border-radius: 14px 14px 0 0;
    }

    .info-card h5 {
        font-size: 17px !important;
        font-weight: 700;
        color: var(--brand-navy) !important;
        margin-bottom: 18px;
        margin-top: 8px;
    }

    .info-card ul {
        padding-left: 18px;
        margin: 0;
    }

    .info-card ul li {
        margin-bottom: 10px;
        font-size: 14px;
        color: var(--text-body);
        line-height: 1.6;
    }

    /* WHO CAN APPLY — IMAGE CARDS */
    .who-apply-section {
        background: var(--bg-offwhite);
        padding: 28px 0;
    }

    .apply-card {
        background: #ffffff;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid var(--border-light);
        transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .apply-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 28px 60px rgba(0,0,0,0.09);
        border-color: rgba(0,58,99,0.12);
    }

    .card-image {
        overflow: hidden;
        height: 200px;
        flex-shrink: 0;
    }

    .card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
        display: block;
    }

    .apply-card:hover .card-image img { transform: scale(1.06); }

    .card-content {
        padding: 26px 22px;
        flex-grow: 1;
    }

    .card-content h5 {
        font-size: 16px !important;
        font-weight: 700;
        color: var(--brand-navy) !important;
        margin-bottom: 8px;
    }

    .card-content p {
        font-size: 14px;
        line-height: 1.6;
        color: var(--text-muted);
        margin: 0;
    }

    /* HOW TO APPLY — TIMELINE */
    .how-apply-section {
        background: var(--bg-light);
        padding: 28px 0;
    }

    .timeline { display: grid; gap: 16px; margin-top: 0; }

    .timeline-item {
        background: #fff;
        border: 1px solid var(--border-light);
        border-radius: 12px;
        padding: 22px 28px;
        display: flex;
        gap: 20px;
        align-items: flex-start;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .timeline-item:hover {
        transform: translateX(4px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    }

    .timeline-item .step-num {
        background: var(--brand-gold);
        color: #fff;
        font-weight: 700;
        font-size: 14px;
        width: 40px; height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .timeline-item strong {
        display: block;
        font-weight: 700;
        color: var(--brand-navy);
        margin-bottom: 4px;
        font-size: 15px;
    }

    .timeline-item p {
        font-size: 14px;
        color: var(--text-muted);
        margin: 0;
        line-height: 1.6;
    }

    .timeline-item a {
        color: var(--brand-cyan);
        font-weight: 600;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .timeline-item a:hover { color: var(--brand-navy); text-decoration: underline; }

    @media (max-width: 640px) {
        .timeline-item { flex-direction: column; gap: 12px; }
    }

    /* FAQ SECTION */
    .faq-section {
        background: #ffffff;
        padding: 28px 0;
    }

    .faq-container {
        max-width: 820px;
        margin: 0 auto;
    }

    .faq-item { border-bottom: 1px solid var(--border-light); }
    .faq-item:first-child { border-top: 1px solid var(--border-light); }

    .faq-question {
        width: 100%;
        background: none;
        border: none;
        padding: 20px 4px;
        font-size: 15px;
        font-weight: 600;
        color: var(--brand-navy);
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        text-align: left;
        transition: color 0.2s ease;
        gap: 16px;
    }

    .faq-question:hover { color: var(--brand-cyan); }

    .faq-icon {
        width: 28px; height: 28px;
        border-radius: 50%;
        border: 1.5px solid var(--border-light);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 16px;
        color: var(--brand-gold);
        transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
    }

    .faq-item.active .faq-icon {
        transform: rotate(45deg);
        background: var(--brand-gold);
        color: #fff;
        border-color: var(--brand-gold);
    }

    .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
    }

    .faq-answer p {
        padding: 0 4px 18px;
        font-size: 14px;
        color: var(--text-muted);
        line-height: 1.7;
        margin: 0;
    }

    .faq-item.active .faq-answer { max-height: 300px; }

    /* CTA SECTION */
    .cta-section {
        background: var(--bg-offwhite);
        padding: 28px 0;
    }

    .cta-box {
        background: linear-gradient(135deg, var(--brand-navy) 0%, #002540 100%);
        color: #fff;
        padding: 64px 48px;
        border-radius: 20px;
        text-align: center;
        max-width: 900px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }

    /* Subtle decorative circle */
    .cta-box::before {
        content: '';
        position: absolute;
        top: -80px; right: -80px;
        width: 280px; height: 280px;
        border-radius: 50%;
        background: rgba(0,180,216,0.07);
        pointer-events: none;
    }

    .cta-box::after {
        content: '';
        position: absolute;
        bottom: -60px; left: -60px;
        width: 200px; height: 200px;
        border-radius: 50%;
        background: rgba(212,160,23,0.06);
        pointer-events: none;
    }

    .cta-box h3 {
        font-size: clamp(22px, 3.5vw, 32px);
        font-weight: 800;
        color: #ffffff !important;
        margin-bottom: 14px;
        position: relative;
    }

    .cta-box p {
        font-size: 15px;
        max-width: 580px;
        margin: 0 auto 32px;
        color: rgba(255,255,255,0.80);
        line-height: 1.7;
    }

    .cta-actions {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
        position: relative;
    }

    .btn-cta-primary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #ffffff;
        color: var(--brand-navy);
        font-weight: 700;
        font-size: 14px;
        padding: 13px 28px;
        border-radius: 8px;
        text-decoration: none;
        border: 2px solid #fff;
        transition: all 0.25s ease;
    }

    .btn-cta-primary:hover {
        background: var(--brand-gold);
        border-color: var(--brand-gold);
        color: #fff;
        transform: translateY(-2px);
    }

    .btn-cta-outline {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: transparent;
        color: #ffffff;
        font-weight: 600;
        font-size: 14px;
        padding: 13px 28px;
        border-radius: 8px;
        text-decoration: none;
        border: 2px solid rgba(255,255,255,0.45);
        transition: all 0.25s ease;
    }

    .btn-cta-outline:hover {
        border-color: #fff;
        background: rgba(255,255,255,0.08);
        color: #fff;
    }

    /* Copy email button */
    .copy-btn {
        background: transparent;
        border: 2px solid rgba(255,255,255,0.35);
        color: #fff;
        padding: 10px 12px;
        border-radius: 8px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background 0.25s ease, border-color 0.25s ease;
        font-size: 13px;
    }

    .copy-btn:hover {
        background: rgba(255,255,255,0.12);
        border-color: rgba(255,255,255,0.7);
    }

    @media (max-width: 640px) {
        .cta-box { padding: 44px 24px; }
        .cta-actions { flex-direction: column; }
        .btn-cta-primary, .btn-cta-outline { width: 100%; justify-content: center; }
    }

    /* BACK TO TOP */
    #backToTop {
        position: fixed;
        bottom: 32px; right: 32px;
        width: 46px; height: 46px;
        border-radius: 50%;
        background: var(--brand-navy);
        color: #fff;
        border: none;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 6px 20px rgba(0,0,0,0.2);
        opacity: 0; visibility: hidden;
        transform: translateY(12px);
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.25s ease;
        z-index: 999;
    }
    #backToTop.visible { opacity: 1; visibility: visible; transform: translateY(0); }
    #backToTop:hover { background: var(--brand-bright); }

    @media (max-width: 768px) { #backToTop { bottom: 20px; right: 20px; } }

/* CAREERS PAGE STYLES  */

/* GLOBAL TOKENS  */
:root {
    --brand-cyan:   hsl(194, 85%, 51%);
    --brand-navy:   #0b1f3a;
    --brand-gold:   #d4a017;
    --brand-blue:   #0077b6;
    --brand-bright: #00b4d8;
    --text-body:    #555;
    --text-muted:   #6c757d;
    --bg-light:     #f7f9fc;
    --bg-offwhite:  #f8fafc;
    --border-light: #e8edf2;
}

/* SCROLL REVEAL */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* WAVE & STRIPE DIVIDERS */
.wave-divider {
    display: block;
    line-height: 0;
    overflow: hidden;
    margin-bottom: -1px;
}
.wave-divider svg { display: block; width: 100%; }

.stripe-divider {
    height: 5px;
    background: linear-gradient(90deg, var(--brand-navy), var(--brand-cyan), var(--brand-navy));
}

.angle-divider {
    height: 60px;
    background: var(--bg-light);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    margin-bottom: -1px;
}

/* CAREERS INTRO */
.careers-intro {
    padding: 42px 0 20px;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.careers-intro::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(0,180,216,0.12) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

.careers-intro::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, #ffffff 85%);
    pointer-events: none;
}

.careers-intro .container { position: relative; z-index: 1; }

.careers-label {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 2.5px;
    font-weight: 700;
    color: var(--brand-gold);
    text-transform: uppercase;
    margin-bottom: 16px;
}

.careers-title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    color: var(--brand-navy);
    margin-bottom: 18px;
    line-height: 1.2;
}

.careers-lead {
    font-size: 18px;
    font-weight: 500;
    color: var(--brand-cyan);
    margin-bottom: 15px;
}

.careers-description {
    font-size: 16px;
    color: var(--text-body);
    line-height: 1.8;
    max-width: 760px;
    margin: 0 auto;
}

/* LIFE AT DELF */
.life-delf-section {
    background: var(--bg-light);
    padding: 30px 0 30px;
    position: relative;
}

.life-delf-section .life-section-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--brand-navy);
    margin-bottom: 12px;
}

.life-delf-section .life-section-subtitle {
    max-width: 720px;
    margin: 0 auto 50px;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.7;
}

.life-images {
    position: relative;
    max-width: 520px;
    margin: auto;
    padding-bottom: 50px;
}

.life-img-main {
    width: 100%;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
    object-fit: cover;
    display: block;
}

.life-img-secondary {
    position: absolute;
    bottom: 0;
    right: -30px;
    width: 62%;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.12);
    object-fit: cover;
    border: 6px solid #fff;
}

.life-content h4 {
    font-weight: 700;
    color: var(--brand-navy);
    font-size: 26px;
}

.life-content > p {
    color: var(--text-body);
    line-height: 1.8;
    font-size: 16px;
}

.benefit-box {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px 18px;
    height: 100%;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0,0,0,0.04);
}

.benefit-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 35px rgba(0,0,0,0.08);
}

.benefit-box i {
    font-size: 26px;
    color: var(--brand-cyan);
    margin-bottom: 10px;
    display: inline-block;
}

.benefit-box h6 {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 6px;
    color: var(--brand-navy);
}

.benefit-box p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 992px) {
    .life-img-secondary { position: relative; bottom: 0; right: 0; width: 100%; margin-top: 20px; border: none; }
    .life-images { max-width: 100%; padding-bottom: 0; }
    .life-content { text-align: center; }
}

/* JOBS SECTION */
.careers-section {
    padding: 30px 0;
    background: var(--bg-offwhite);
}

.jobs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 36px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--border-light);
}

.jobs-header-left h2 {
    font-size: 36px;
    font-weight: 700;
    color: var(--brand-navy);
    margin: 0 0 4px;
}

.jobs-header-left p {
    color: var(--text-muted);
    font-size: 15px;
    margin: 0;
}

.job-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--brand-navy);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 30px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.job-count-badge .count-num {
    background: var(--brand-bright);
    color: #fff;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}

/* Filter buttons */
.job-filters { margin-bottom: 32px; }

.filter-btn {
    background: #ffffff;
    border: 1px solid #e1e5ea;
    color: var(--brand-cyan);
    padding: 9px 20px;
    margin: 4px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.25s ease;
    cursor: pointer;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--brand-cyan);
    color: #fff;
    border-color: var(--brand-cyan);
    box-shadow: 0 4px 14px rgba(0,180,216,0.25);
}

/* Job cards */
.job-card {
    background: #ffffff;
    border-radius: 14px;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
    border: 1px solid var(--border-light);
    border-left: 4px solid transparent;
    overflow: hidden;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.job-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.09); }
.job-primary   { border-left-color: var(--brand-cyan); }
.job-secondary { border-left-color: var(--text-muted); }

.job-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 28px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.job-card-header:hover { background: #fafbfc; }
.job-card-header-left  { flex: 1; min-width: 0; }

.job-card-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--brand-navy);
    margin: 0 0 8px;
    line-height: 1.35;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.job-id {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--brand-gold);
    padding: 2px 9px;
    border-radius: 20px;
    background: rgba(212,160,23,0.08);
    border: 1px solid rgba(212,160,23,0.2);
    white-space: nowrap;
}

.job-meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.job-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    padding: 3px 10px;
    border-radius: 20px;
}

.job-pill i { font-size: 11px; color: var(--brand-bright); }

.job-toggle-icon {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.25s ease, transform 0.3s ease;
    color: var(--brand-navy);
    font-size: 14px;
}

.job-card.open .job-toggle-icon {
    background: var(--brand-cyan);
    color: #fff;
    border-color: var(--brand-cyan);
    transform: rotate(180deg);
}

.job-card-body {
    display: none;
    padding: 0 28px 24px;
    border-top: 1px solid var(--border-light);
}

.job-card.open .job-card-body { display: block; }

.job-summary {
    background: var(--bg-light);
    border-radius: 8px;
    padding: 14px 18px;
    margin: 20px 0 18px;
    font-size: 15px;
    color: var(--text-body);
    line-height: 1.7;
    border-left: 3px solid var(--brand-bright);
}

.job-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 20px;
}

@media (max-width: 680px) { .job-details-grid { grid-template-columns: 1fr; } }

.job-detail-block h6 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--brand-navy);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--border-light);
}

.job-detail-block ul {
    padding-left: 16px;
    margin: 0;
}

.job-detail-block ul li {
    font-size: 14px;
    color: #444;
    line-height: 1.7;
    margin-bottom: 6px;
    list-style-type: disc;
}

.job-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
}

.job-inclusive-note {
    font-size: 12px;
    font-style: italic;
    color: var(--text-muted);
    max-width: 420px;
}

.btn-apply {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--brand-navy);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 11px 22px;
    border-radius: 6px;
    text-decoration: none;
    letter-spacing: 0.3px;
    border: 2px solid var(--brand-navy);
    transition: background 0.25s ease, color 0.25s ease, gap 0.25s ease;
    white-space: nowrap;
}

.btn-apply:hover {
    background: transparent;
    color: var(--brand-navy);
    gap: 12px;
}

.btn-apply i { font-size: 14px; transition: transform 0.25s ease; }
.btn-apply:hover i { transform: translateX(3px); }

@media (max-width: 768px) {
    .job-card-header { padding: 20px; }
    .job-card-body   { padding: 0 20px 20px; }
    .job-card-header h3 { font-size: 1rem; }
    .jobs-header { flex-direction: column; align-items: flex-start; }
}

/* APPLICATION PROCESS */
.application-process-section {
    background: #ffffff;
    padding: 35px 0 20px;
}

.ap-left-panel { position: sticky; top: 70px; }

.ap-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.ap-eyebrow-line {
    width: 26px;
    height: 2px;
    background: var(--brand-bright);
    flex-shrink: 0;
    border-radius: 2px;
}

.ap-eyebrow-text {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--brand-bright);
}

.ap-heading {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--brand-navy);
    margin-bottom: 16px;
}

.ap-subtext {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-body);
    margin-bottom: 30px;
}

.ap-progress {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
}

.ap-dot-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ap-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #dde3ea;
    flex-shrink: 0;
    transition: background 0.3s ease, transform 0.3s ease;
}

.ap-dot.active {
    background: var(--brand-bright);
    transform: scale(1.5);
}

.ap-dot-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.process-timeline {
    display: flex;
    flex-direction: column;
}

.process-step {
    display: grid;
    grid-template-columns: 3px 1fr;
    gap: 24px;
    padding: 32px 0;
    border-bottom: 1px solid var(--border-light);
    opacity: 0;
    transform: translateY(16px);
    animation: ap-fadeUp 0.5s ease forwards;
}

.process-step:nth-child(1) { animation-delay: 0.10s; }
.process-step:nth-child(2) { animation-delay: 0.22s; }
.process-step:nth-child(3) { animation-delay: 0.34s; }
.process-step:nth-child(4) { animation-delay: 0.46s; border-bottom: none; }

.process-step-bar {
    width: 3px;
    border-radius: 2px;
    background: var(--border-light);
    align-self: stretch;
    position: relative;
    overflow: hidden;
}

.process-step-bar::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 0%;
    background: linear-gradient(180deg, var(--brand-bright), var(--brand-blue));
    border-radius: 2px;
    transition: height 0.4s ease;
}

.process-step:hover .process-step-bar::after { height: 100%; }

.process-icon {
    width: 42px; height: 42px;
    background: #ffffff;
    border: 1.5px solid var(--border-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.process-step:hover .process-icon {
    background: rgba(0,180,216,0.06);
    border-color: var(--brand-bright);
    box-shadow: 0 4px 16px rgba(0,180,216,0.15);
}

.process-icon i {
    color: var(--text-muted);
    font-size: 17px;
    transition: color 0.3s ease;
}

.process-step:hover .process-icon i { color: var(--brand-bright); }

.process-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.process-step-num {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 0.3s ease;
}

.process-step:hover .process-step-num { color: var(--brand-bright); }

.process-step-tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--brand-blue);
    background: rgba(0,119,182,0.07);
    border: 1px solid rgba(0,119,182,0.18);
    padding: 2px 9px;
    border-radius: 20px;
}

.process-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--brand-navy);
    margin-bottom: 8px;
    line-height: 1.35;
    transition: color 0.3s ease;
}

.process-step:hover .process-title { color: var(--brand-blue); }

.process-desc {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-body);
    margin: 0;
}

@keyframes ap-fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 991px) {
    .application-process-section { padding: 60px 0; }
    .ap-left-panel { position: static; margin-bottom: 40px; }
    .ap-progress   { display: none; }
    .ap-heading    { font-size: 28px; }
}

/* BACK TO TOP */
#backToTop {
    position: fixed;
    bottom: 32px; right: 32px;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--brand-navy);
    color: #fff;
    border: none;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.25s ease;
    z-index: 999;
}

#backToTop.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#backToTop:hover { background: var(--brand-bright); }

@media (max-width: 768px) {
    .careers-title { font-size: 26px; }
    #backToTop { bottom: 20px; right: 20px; }
}

/* CTA SECTION */
.cta-section {
    background: var(--bg-offwhite);
    padding: 35x 0;
}

.cta-box {
    background: linear-gradient(135deg, var(--brand-navy) 0%, #002540 100%);
    color: #fff;
    padding: 64px 48px;
    border-radius: 20px;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.cta-box::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: rgba(0,180,216,0.07);
    pointer-events: none;
}

.cta-box::after {
    content: '';
    position: absolute;
    bottom: -60px; left: -60px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(212,160,23,0.06);
    pointer-events: none;
}

.cta-box h3 {
    font-size: clamp(22px, 3.5vw, 32px);
    font-weight: 800;
    color: #ffffff !important;
    margin-bottom: 14px;
    position: relative;
}

.cta-box p {
    font-size: 15px;
    max-width: 580px;
    margin: 0 auto 32px;
    color: rgba(255,255,255,0.80);
    line-height: 1.7;
}

.cta-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    position: relative;
}

.btn-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    color: var(--brand-navy);
    font-weight: 700;
    font-size: 14px;
    padding: 13px 28px;
    border-radius: 8px;
    text-decoration: none;
    border: 2px solid #fff;
    transition: all 0.25s ease;
}

.btn-cta-primary:hover {
    background: var(--brand-gold);
    border-color: var(--brand-gold);
    color: #fff;
    transform: translateY(-2px);
}

.btn-cta-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    padding: 13px 28px;
    border-radius: 8px;
    text-decoration: none;
    border: 2px solid rgba(255,255,255,0.45);
    transition: all 0.25s ease;
}

.btn-cta-outline:hover {
    border-color: #fff;
    background: rgba(255,255,255,0.08);
    color: #fff;
}

.copy-btn {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.35);
    color: #fff;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.copy-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.70);
}

@media (max-width: 640px) {
    .cta-box { padding: 44px 24px; }
    .cta-actions { flex-direction: column; }
    .btn-cta-primary, .btn-cta-outline { width: 100%; justify-content: center; }
}

/* VISION & MISSION */
.vision-mission h3 {
    color: #003366;
    margin-bottom: 0px;
}

.vision-mission p {
    font-size: 16px;
    padding: 0 15px;
}
/* IMPACT STATS */
.impact-section h1 {
    font-weight: 700;
    color: #005fa3;
}

.impact-section p {
    font-size: 15px;
}
/* ACTIVITIES */
.activities h5 {
    color: #003366;
    margin-bottom: 10px;
}

.activities p {
    font-size: 15px;
    color: #555;
}

.activities .col-md-4 {
    padding: 20px;
}
/* SECTION HEADINGS */
section h2 {
    font-weight: 700;
    margin-bottom: 25px;
    color: #1f2d3d;
}
/* FUNDING APPLICATION FORM */

.funding-form-section {
    padding: 30px 0;
    background-color: #f8f9fa;
}

.funding-form-section h2 {
    font-weight: 700;
    color: #003366;
    margin-bottom: 10px;
}

.funding-form-section p {
    max-width: 700px;
    margin: 0 auto 40px;
    font-size: 16px;
    color: #555;
}
.funding-form {
    background: #ffffff;
    padding: 45px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
.funding-form label {
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

.funding-form .form-control {
    border-radius: 8px;
    padding: 12px;
    font-size: 15px;
}

.funding-form .form-control:focus {
    border-color: #003366;
    box-shadow: 0 0 0 0.15rem rgba(0,51,102,0.15);
}
.funding-form h4 {
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: 600;
    color: #003366;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 8px;
}
.funding-form .form-check-label {
    font-size: 15px;
    color: #444;
}

.funding-form .form-check-input:checked {
    background-color: #003366;
    border-color: #003366;
}
.funding-form button {
    background-color: #003366;
    border: none;
    padding: 14px 50px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 30px;
    transition: background-color 0.3s ease;
}

.funding-form button:hover {
    background-color: #005fa3;
}
@media (max-width: 768px) {
    .funding-form {
        padding: 30px;
    }
}
.btn-primary {
    background-color: #003366;
    border-color: #003366;
}

.btn-primary:hover {
    background-color: #005fa3;
    border-color: #005fa3;
}

    /* GLOBAL TOKENS */
    :root {
        --brand-cyan:   hsl(194, 85%, 51%);
        --brand-navy:   #0b1f3a;
        --brand-gold:   #d4a017;
        --brand-blue:   #0077b6;
        --brand-bright: #00b4d8;
        --text-body:    #555;
        --text-muted:   #6c757d;
        --bg-light:     #f7f9fc;
        --bg-offwhite:  #f4f6f8;
        --border-light: #e8edf2;
    }

    /* SCROLL-REVEAL */
    .reveal {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .reveal.revealed { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: 0.12s; }
    .reveal-delay-2 { transition-delay: 0.24s; }
    .reveal-delay-3 { transition-delay: 0.36s; }
    .reveal-delay-4 { transition-delay: 0.48s; }

    /* SECTION DIVIDERS */
    .wave-divider {
        display: block;
        line-height: 0;
        overflow: hidden;
        margin-bottom: -2px;
    }
    .wave-divider svg { display: block; width: 100%; }

    .stripe-divider {
        height: 4px;
        background: linear-gradient(90deg, var(--brand-navy), var(--brand-cyan), var(--brand-navy));
    }

    /* CONTACT SECTION */
    .contact-section {
        background: var(--bg-light);
        padding: 88px 0 96px;
    }

    /* Accent bar at top of section */
    .contact-accent-bar {
        height: 4px;
        background: linear-gradient(90deg, var(--brand-navy), var(--brand-cyan), var(--brand-navy));
        margin-bottom: 0;
    }

    /* Section header */
    .contact-header-title {
        font-size: clamp(26px, 4vw, 36px);
        font-weight: 800;
        color: var(--brand-navy);
        position: relative;
        padding-bottom: 18px;
        margin-bottom: 14px;
        line-height: 1.2;
    }

    .contact-header-title::after {
        content: '';
        width: 56px;
        height: 3px;
        background: var(--brand-gold);
        position: absolute;
        left: 0;
        bottom: 0;
        border-radius: 2px;
    }

    .contact-header-subtitle {
        font-size: 16px;
        color: var(--text-muted);
        line-height: 1.75;
        max-width: 580px;
        margin-top: 16px;
    }

    /* Column title */
    .column-title {
        font-size: 17px;
        font-weight: 700;
        color: var(--brand-navy);
        margin-bottom: 28px;
        letter-spacing: 0;
        position: relative;
        padding-bottom: 12px;
    }

    .column-title::after {
        content: '';
        width: 32px;
        height: 2px;
        background: var(--brand-cyan);
        position: absolute;
        left: 0;
        bottom: 0;
        border-radius: 2px;
    }

    /* INFO BLOCKS */
    .info-block {
        display: flex;
        gap: 18px;
        padding: 22px 0;
        border-bottom: 1px solid var(--border-light);
        transition: background 0.2s ease;
    }

    .info-block:first-of-type { border-top: 1px solid var(--border-light); }

    .info-icon {
        width: 44px; height: 44px;
        background: var(--brand-navy);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--brand-gold);
        font-size: 18px;
        flex-shrink: 0;
        transition: background 0.25s ease;
    }

    .info-block:hover .info-icon { background: var(--brand-cyan); color: #fff; }

    .info-block h6 {
        font-size: 14px !important;
        font-weight: 700;
        color: var(--brand-navy);
        margin-bottom: 4px;
    }

    .info-block p {
        font-size: 13px;
        color: var(--text-muted);
        margin-bottom: 6px;
        line-height: 1.5;
    }

    .info-link {
        font-size: 14px;
        font-weight: 600;
        color: var(--brand-cyan);
        text-decoration: none;
        transition: color 0.2s ease;
        word-break: break-all;
    }

    .info-link:hover { color: var(--brand-navy); text-decoration: underline; }

    /* OFFICE CARDS */
    .office-card {
        display: flex;
        gap: 16px;
        border: 1px solid var(--border-light);
        padding: 20px 22px;
        margin-bottom: 14px;
        border-radius: 10px;
        background: #fff;
        transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    }

    .office-card:hover {
        border-color: var(--brand-cyan);
        transform: translateY(-3px);
        box-shadow: 0 10px 28px rgba(0,0,0,0.07);
    }

    .office-icon {
        width: 40px; height: 40px;
        background: var(--brand-navy);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--brand-gold);
        font-size: 16px;
        flex-shrink: 0;
        transition: background 0.25s ease;
    }

    .office-card:hover .office-icon { background: var(--brand-cyan); color: #fff; }

    .office-card h6 {
        font-size: 13px !important;
        font-weight: 700;
        color: var(--brand-navy);
        margin-bottom: 4px;
    }

    .office-card p {
        font-size: 13px;
        color: var(--text-muted);
        margin: 0;
        line-height: 1.6;
    }

    /* CONTACT FORM */
    .contact-form-wrapper {
        background: #ffffff;
        padding: 48px 44px;
        border: 1px solid var(--border-light);
        border-radius: 14px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.05);
    }

    .form-section-title {
        font-size: 20px;
        font-weight: 700;
        color: var(--brand-navy);
        margin-bottom: 8px;
        text-align: center;
    }

    .form-section-sub {
        font-size: 14px;
        color: var(--text-muted);
        text-align: center;
        margin-bottom: 28px;
    }

    .contact-input {
        border: 1px solid var(--border-light);
        border-radius: 8px;
        padding: 13px 16px;
        font-size: 14px;
        color: var(--brand-navy);
        background: var(--bg-light);
        transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
        width: 100%;
    }

    .contact-input:focus {
        border-color: var(--brand-cyan);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(0,180,216,0.10);
        outline: none;
    }

    .contact-input::placeholder { color: #aab0bb; }

    textarea.contact-input { resize: vertical; min-height: 130px; }

    .btn-contact-submit {
        width: 100%;
        background: var(--brand-navy);
        color: #fff;
        border: 2px solid var(--brand-navy);
        border-radius: 8px;
        padding: 14px;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: all 0.25s ease;
        margin-top: 20px;
    }

    .btn-contact-submit:hover {
        background: var(--brand-cyan);
        border-color: var(--brand-cyan);
        transform: translateY(-2px);
    }

    /* Form success / error states */
    .form-feedback {
        display: none;
        border-radius: 8px;
        padding: 14px 18px;
        font-size: 14px;
        font-weight: 600;
        margin-top: 16px;
        text-align: center;
    }

    .form-feedback.success {
        display: block;
        background: rgba(0,180,216,0.08);
        border: 1px solid var(--brand-cyan);
        color: var(--brand-navy);
    }

    .form-feedback.error {
        display: block;
        background: rgba(220,53,69,0.07);
        border: 1px solid #dc3545;
        color: #842029;
    }

    /* Loading spinner on button */
    .btn-contact-submit .spinner {
        display: none;
        width: 16px; height: 16px;
        border: 2px solid rgba(255,255,255,0.4);
        border-top-color: #fff;
        border-radius: 50%;
        animation: spin 0.7s linear infinite;
    }

    @keyframes spin { to { transform: rotate(360deg); } }


    /* BACK TO TOP */
    #backToTop {
        position: fixed;
        bottom: 32px; right: 32px;
        width: 46px; height: 46px;
        border-radius: 50%;
        background: var(--brand-navy);
        color: #fff;
        border: none;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 6px 20px rgba(0,0,0,0.2);
        opacity: 0; visibility: hidden;
        transform: translateY(12px);
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.25s ease;
        z-index: 999;
    }
    #backToTop.visible { opacity: 1; visibility: visible; transform: translateY(0); }
    #backToTop:hover { background: var(--brand-bright); }
    @media (max-width: 768px) { #backToTop { bottom: 20px; right: 20px; } }

    /* RESPONSIVE */
    @media (max-width: 768px) {
        .contact-form-wrapper { padding: 32px 22px; }
        .contact-header-title::after { left: 50%; transform: translateX(-50%); }
    }

 /* GLOBAL TOKENS */
    :root {
        --brand-cyan:   hsl(194, 85%, 51%);
        --brand-navy:   #0b1f3a;
        --brand-gold:   #d4a017;
        --brand-blue:   #0077b6;
        --brand-bright: #00b4d8;
        --text-body:    #555;
        --text-muted:   #6c757d;
        --bg-light:     #f7f9fc;
        --bg-offwhite:  #f4f6f8;
        --border-light: #e8edf2;
    }

    /* SCROLL-REVEAL */
    .reveal {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .reveal.revealed { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: 0.12s; }
    .reveal-delay-2 { transition-delay: 0.24s; }
    .reveal-delay-3 { transition-delay: 0.36s; }

    /* SECTION DIVIDERS */
    .wave-divider {
        display: block;
        line-height: 0;
        overflow: hidden;
        margin-bottom: -2px;
    }
    .wave-divider svg { display: block; width: 100%; }

    .stripe-divider {
        height: 4px;
        background: linear-gradient(90deg, var(--brand-navy), var(--brand-cyan), var(--brand-navy));
    }

    /* WHY DONATE SECTION */
    .why-donate-section {
        background: #ffffff;
        padding: 48px 0;
        position: relative;
        overflow: hidden;
    }

    .why-donate-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle, rgba(0,180,216,0.09) 1px, transparent 1px);
        background-size: 28px 28px;
        pointer-events: none;
    }
    .why-donate-section::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at center, transparent 40%, #ffffff 82%);
        pointer-events: none;
    }
    .why-donate-section .container { position: relative; z-index: 1; }

    .section-label {
        display: inline-block;
        font-size: 12px;
        letter-spacing: 2.5px;
        font-weight: 700;
        color: var(--brand-gold);
        text-transform: uppercase;
        margin-bottom: 14px;
    }

    .section-heading {
        font-size: clamp(26px, 4vw, 38px);
        font-weight: 800;
        color: var(--brand-navy);
        margin-bottom: 16px;
        line-height: 1.2;
    }

    .section-lead {
        font-size: 16px;
        color: var(--text-muted);
        line-height: 1.75;
        max-width: 600px;
    }

    /* Impact pillar cards */
    .impact-pillar {
        background: var(--bg-light);
        border: 1px solid var(--border-light);
        border-radius: 14px;
        padding: 30px 24px;
        text-align: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
        height: 100%;
    }

    .impact-pillar:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 44px rgba(0,0,0,0.08);
        background: #ffffff;
    }

    .pillar-icon {
        width: 58px; height: 58px;
        background: rgba(0,180,216,0.09);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
    }

    .pillar-icon i { font-size: 24px; color: var(--brand-cyan); }

    .impact-pillar h5 {
        font-size: 15px;
        font-weight: 700;
        color: var(--brand-navy);
        margin-bottom: 8px;
    }

    .impact-pillar p {
        font-size: 13px;
        color: var(--text-muted);
        line-height: 1.65;
        margin: 0;
    }

    /* DONATE FORM SECTION */
    .donate-form-section {
        background: var(--bg-light);
        padding: 48px 0 46px;
        position: relative;
    }

    /* Background image with overlay */
    .donate-form-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url('images/Delf-group.jpg');
        background-size: cover;
        background-position: center;
        opacity: 0.06;
        pointer-events: none;
    }
    .donate-form-section .container { position: relative; z-index: 1; }

    /* Form card */
    .donate-card {
        background: #ffffff;
        border-radius: 18px;
        box-shadow: 0 16px 60px rgba(0,0,0,0.10);
        overflow: hidden;
    }

    /* Card header bar */
    .donate-card-header {
        background: var(--brand-navy);
        padding: 28px 36px;
        position: relative;
        overflow: hidden;
    }

    .donate-card-header::after {
        content: '';
        position: absolute;
        top: -60px; right: -60px;
        width: 200px; height: 200px;
        border-radius: 50%;
        background: rgba(0,180,216,0.08);
        pointer-events: none;
    }

    .donate-card-header h3 {
        color: #ffffff;
        font-size: 22px;
        font-weight: 800;
        margin: 0 0 4px;
    }

    .donate-card-header p {
        color: rgba(255,255,255,0.65);
        font-size: 13px;
        margin: 0;
    }

    /* Card body */
    .donate-card-body { padding: 36px 36px 40px; }

    /* FREQUENCY TOGGLE */
    .frequency-toggle {
        display: flex;
        background: var(--bg-light);
        border-radius: 10px;
        padding: 4px;
        gap: 4px;
        margin-bottom: 28px;
    }

    .freq-btn {
        flex: 1;
        padding: 10px;
        border: none;
        background: transparent;
        border-radius: 7px;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-muted);
        cursor: pointer;
        transition: all 0.25s ease;
    }

    .freq-btn.active {
        background: var(--brand-navy);
        color: #ffffff;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    /* AMOUNT GRID */
    .amount-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-bottom: 14px;
    }

    .amount-btn {
        padding: 13px 8px;
        border: 2px solid var(--border-light);
        border-radius: 10px;
        background: var(--bg-light);
        font-size: 15px;
        font-weight: 700;
        color: var(--brand-navy);
        cursor: pointer;
        transition: all 0.22s ease;
        text-align: center;
    }

    .amount-btn:hover {
        border-color: var(--brand-cyan);
        background: rgba(0,180,216,0.05);
    }

    .amount-btn.selected {
        border-color: var(--brand-navy);
        background: var(--brand-navy);
        color: #ffffff;
    }

    /* Custom amount input */
    .custom-amount-wrapper {
        position: relative;
        margin-bottom: 28px;
    }

    .custom-amount-symbol {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 15px;
        font-weight: 700;
        color: var(--brand-navy);
        pointer-events: none;
    }

    .custom-amount-input {
        width: 100%;
        padding: 13px 16px 13px 30px;
        border: 2px solid var(--border-light);
        border-radius: 10px;
        font-size: 15px;
        font-weight: 600;
        color: var(--brand-navy);
        background: var(--bg-light);
        transition: border-color 0.25s ease, background 0.25s ease;
        outline: none;
    }

    .custom-amount-input:focus {
        border-color: var(--brand-cyan);
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(0,180,216,0.10);
    }

    .custom-amount-input::placeholder { color: #aab0bb; font-weight: 400; }

    /* FORM FIELDS */
    .donate-input {
        width: 100%;
        padding: 13px 16px;
        border: 1px solid var(--border-light);
        border-radius: 10px;
        font-size: 14px;
        color: var(--brand-navy);
        background: var(--bg-light);
        transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
        outline: none;
    }

    .donate-input:focus {
        border-color: var(--brand-cyan);
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(0,180,216,0.10);
    }

    .donate-input::placeholder { color: #aab0bb; }

    .donate-label {
        font-size: 12px;
        font-weight: 700;
        color: var(--brand-navy);
        letter-spacing: 0.5px;
        text-transform: uppercase;
        margin-bottom: 6px;
        display: block;
    }

    /* Section mini-headings */
    .form-section-label {
        font-size: 13px;
        font-weight: 700;
        color: var(--brand-navy);
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .form-section-label::before {
        content: '';
        width: 18px; height: 2px;
        background: var(--brand-gold);
        border-radius: 2px;
        flex-shrink: 0;
    }

    /* PAYMENT METHOD CARDS */
    .payment-methods {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 24px;
    }

    .payment-option {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 18px;
        border: 2px solid var(--border-light);
        border-radius: 12px;
        background: var(--bg-light);
        cursor: pointer;
        transition: border-color 0.25s ease, background 0.25s ease;
        position: relative;
    }

    .payment-option:hover { border-color: var(--brand-cyan); background: rgba(0,180,216,0.03); }

    .payment-option input[type="radio"] {
        accent-color: var(--brand-navy);
        width: 18px; height: 18px;
        flex-shrink: 0;
        cursor: pointer;
    }

    .payment-option.checked {
        border-color: var(--brand-navy);
        background: rgba(11,31,58,0.03);
    }

    .payment-option-label {
        font-size: 14px;
        font-weight: 600;
        color: var(--brand-navy);
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        flex: 1;
    }

    .payment-option-label i { font-size: 20px; color: var(--brand-cyan); }

    /* Card fields (shown when card option selected) */
    .card-fields {
        display: none;
        margin-top: 14px;
        padding: 18px;
        background: var(--bg-light);
        border-radius: 10px;
        border: 1px solid var(--border-light);
    }

    .card-fields.visible { display: block; }

    /* SUBMIT BUTTON  */
    .btn-donate-submit {
        width: 100%;
        background: var(--brand-gold);
        color: #ffffff;
        border: none;
        border-radius: 12px;
        padding: 16px;
        font-size: 16px;
        font-weight: 800;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: all 0.25s ease;
        letter-spacing: 0.3px;
        box-shadow: 0 6px 20px rgba(212,160,23,0.30);
    }

    .btn-donate-submit:hover {
        background: #b8880f;
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(212,160,23,0.38);
    }

    .btn-donate-submit .spinner {
        display: none;
        width: 18px; height: 18px;
        border: 2px solid rgba(255,255,255,0.4);
        border-top-color: #fff;
        border-radius: 50%;
        animation: spin 0.7s linear infinite;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    .form-feedback {
        display: none;
        border-radius: 10px;
        padding: 14px 18px;
        font-size: 14px;
        font-weight: 600;
        margin-top: 16px;
        text-align: center;
    }

    .form-feedback.success {
        display: block;
        background: rgba(0,180,216,0.08);
        border: 1px solid var(--brand-cyan);
        color: var(--brand-navy);
    }

    .form-feedback.error {
        display: block;
        background: rgba(220,53,69,0.07);
        border: 1px solid #dc3545;
        color: #842029;
    }

    /* Trust strip */
    .trust-strip {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        margin-top: 18px;
        padding-top: 18px;
        border-top: 1px solid var(--border-light);
    }

    .trust-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--text-muted);
        font-weight: 600;
    }

    .trust-item i { color: var(--brand-cyan); font-size: 14px; }

    /* SIDE PANEL */
    .donate-side-panel { padding-top: 8px; }

    .impact-preview-card {
        background: var(--brand-navy);
        border-radius: 14px;
        padding: 28px 24px;
        color: #ffffff;
        margin-bottom: 18px;
        position: relative;
        overflow: hidden;
    }

    .impact-preview-card::before {
        content: '';
        position: absolute;
        top: -40px; right: -40px;
        width: 160px; height: 160px;
        border-radius: 50%;
        background: rgba(0,180,216,0.08);
        pointer-events: none;
    }

    .impact-preview-card h5 {
        font-size: 15px;
        font-weight: 700;
        color: #ffffff !important;
        margin-bottom: 16px;
        position: relative;
    }

    .impact-line {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 12px;
        position: relative;
    }

    .impact-line i { color: var(--brand-gold); font-size: 15px; flex-shrink: 0; margin-top: 2px; }

    .impact-line p {
        font-size: 13px;
        color: rgba(255,255,255,0.75);
        line-height: 1.55;
        margin: 0;
    }

    .impact-line strong { color: #ffffff; }

    /* Dynamic impact display */
    .impact-meter {
        background: rgba(255,255,255,0.07);
        border-radius: 10px;
        padding: 16px 18px;
        margin-top: 16px;
        position: relative;
    }

    .impact-meter-label {
        font-size: 12px;
        color: rgba(255,255,255,0.55);
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        margin-bottom: 6px;
    }

    .impact-meter-value {
        font-size: 26px;
        font-weight: 800;
        color: var(--brand-gold);
        line-height: 1;
    }

    .impact-meter-desc {
        font-size: 12px;
        color: rgba(255,255,255,0.55);
        margin-top: 4px;
    }

    /* Tax info card */
    .tax-info-card {
        background: #ffffff;
        border: 1px solid var(--border-light);
        border-radius: 14px;
        padding: 22px 22px;
    }

    .tax-info-card h6 {
        font-size: 13px;
        font-weight: 700;
        color: var(--brand-navy);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .tax-info-card h6 i { color: var(--brand-gold); }

    .tax-info-card p {
        font-size: 12px;
        color: var(--text-muted);
        line-height: 1.65;
        margin: 0;
    }

    /* BACK TO TOP */
    #backToTop {
        position: fixed;
        bottom: 32px; right: 32px;
        width: 46px; height: 46px;
        border-radius: 50%;
        background: var(--brand-navy);
        color: #fff;
        border: none;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 6px 20px rgba(0,0,0,0.2);
        opacity: 0; visibility: hidden;
        transform: translateY(12px);
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.25s ease;
        z-index: 999;
    }
    #backToTop.visible { opacity: 1; visibility: visible; transform: translateY(0); }
    #backToTop:hover { background: var(--brand-bright); }

    /* RESPONSIVE */
    @media (max-width: 768px) {
        .donate-card-body { padding: 24px 20px 28px; }
        .amount-grid { grid-template-columns: repeat(2, 1fr); }
        .donate-side-panel { margin-top: 32px; }
    }

/* TRUST & DISCLAIMER SECTION */

.footer-trust {
    background: #091a2b;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Trust Badges */
.trust-badges {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.trust-badges li {
    display: flex;
    align-items: center;
    font-size: 13.5px;
    font-weight: 500;
    color: #ffffff;
}

.trust-badges i {
    font-size: 18px;
    margin-right: 8px;
    color: #4da3ff;
}

/* Disclaimer */
.footer-disclaimer {
    font-size: 12px;
    line-height: 1.6;
    color: #ffffff;
    border-left: 3px solid #4da3ff;
    padding-left: 15px;
}

/* Responsive */
@media (max-width: 768px) {
    .trust-badges {
        justify-content: center;
    }

    .footer-disclaimer {
        border-left: none;
        border-top: 2px solid #4da3ff;
        padding-left: 0;
        padding-top: 12px;
        text-align: center;
    }
.home-about {
    padding: 60px 0;
    background: #f8f9fa;
}

.home-about ul {
    padding-left: 18px;
}
.home-programs {
    padding: 60px 0;
}

.program-box {
    background: #ffffff;
    border-radius: 8px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
/* SCROLL FADE-IN ANIMATION */

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.show {
    opacity: 1;
    transform: translateY(0);
}

/* Optional delay helpers */
.fade-delay-1 {
    transition-delay: 0.15s;
}

.fade-delay-2 {
    transition-delay: 0.3s;
}

.fade-delay-3 {
    transition-delay: 0.45s;
}
/* SCROLL ANIMATION (FIXED) */

.animate-on-scroll {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: none;
}
/*DELF FOUNDATION – CUSTOM GLOBAL STYLES */

/* GLOBAL */
.section-padding {
    padding: 30px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
}

img {
    max-width: 100%;
    height: auto;
}

/* HERO SECTION */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.hero-overlay h1 {
    font-size: 3rem;
    font-weight: 700;
}

/* SCROLL ANIMATIONS */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* IMPACT COUNTERS */
.impact-box {
    background: #ffffff;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.impact-number {
    font-size: 42px;
    font-weight: 700;
    color: #0d6efd;
    margin-bottom: 10px;
}

/* PROGRAMS */
.program-box {
    background: #ffffff;
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    font-weight: 600;
}

/* CTA */
.cta {
    background: #0d6efd;
    color: #ffffff;
    padding: 70px 0;
    text-align: center;
}

.cta a {
    display: inline-block;
    margin-top: 20px;
    background: #ffffff;
    color: #0d6efd;
    padding: 12px 32px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
}

/* NEWS SECTION */
.news-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.news-card img {
    height: 180px;
    width: 100%;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 15px;
}

.news-card h5 {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.news-card a {
    text-decoration: none;
    font-weight: 600;
    color: #0d6efd;
}

/* FOOTER */
footer {
    background: hsl(194, 85%, 51%);
    color: #ffffff;
}

.footer-trust {
    background: #f8f9fa;
    color: #333;
    padding: 30px 0;
    font-size: 14px;
}

.trust-badges {
    list-style: none;
    padding: 0;
    margin: 0;
}

.trust-badges li {
    display: inline-flex;
    align-items: center;
    margin-right: 15px;
    font-weight: 500;
}

.trust-badges i {
    color: #0d6efd;
    margin-right: 6px;
}