/* =========================================================
   ABILITY PLUS INITIATIVE (API)
   WEBSITE V2.0
   PREMIUM NGO DESIGN SYSTEM
   Independent CSS for HTML + Elementor Integration
   ========================================================= */

/* =========================================================
   01. DESIGN TOKENS
========================================================= */

:root {

    --api-red: #c62828;
    --api-red-dark: #9f1f1f;
    --api-red-light: #fbe9e9;

    --api-dark: #1f2937;
    --api-dark-soft: #374151;
    --api-navy: #0f172a;

    --api-white: #ffffff;

    --api-light: #f8fafc;
    --api-light-gray: #f1f5f9;

    --api-text: #4b5563;
    --api-text-light: #6b7280;

    --api-gold: #d4af37;

    --api-border: #e5e7eb;

    --api-success: #2e7d32;

    --api-container: 1200px;

    --api-radius-sm: 8px;
    --api-radius-md: 14px;
    --api-radius-lg: 20px;
    --api-radius-xl: 28px;

    --api-shadow-sm:
        0 4px 12px rgba(15, 23, 42, 0.06);

    --api-shadow-md:
        0 12px 30px rgba(15, 23, 42, 0.10);

    --api-shadow-lg:
        0 20px 50px rgba(15, 23, 42, 0.14);

    --api-transition:
        all 0.3s ease;

}


/* =========================================================
   02. RESET
========================================================= */

.api-v2,
.api-v2 *,
.api-v2 *::before,
.api-v2 *::after {

    box-sizing: border-box;

}


.api-v2 {

    width: 100%;

    min-height: 100%;

    margin: 0;

    padding: 0;

    color:
        var(--api-text);

    background:
        var(--api-white);

    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.7;

    overflow-x: hidden;

}


.api-v2 img {

    display: block;

    max-width: 100%;

    height: auto;

}


.api-v2 a {

    color: inherit;

    text-decoration: none;

}


.api-v2 button,
.api-v2 input,
.api-v2 textarea,
.api-v2 select {

    font: inherit;

}


/* =========================================================
   03. TYPOGRAPHY
========================================================= */

.api-v2 h1,
.api-v2 h2,
.api-v2 h3,
.api-v2 h4,
.api-v2 h5,
.api-v2 h6 {

    margin-top: 0;

    margin-bottom: 20px;

    color:
        var(--api-dark);

    font-family:
        "Poppins",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.2;

    font-weight: 700;

}


.api-v2 p {

    margin-top: 0;

    margin-bottom: 20px;

    color:
        var(--api-text);

}


.api-v2 h1 {

    font-size:
        clamp(
            2.5rem,
            5vw,
            4.5rem
        );

}


.api-v2 h2 {

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

}


.api-v2 h3 {

    font-size:
        clamp(
            1.4rem,
            2.5vw,
            2rem
        );

}


.api-v2 h4 {

    font-size:
        1.25rem;

}


/* =========================================================
   04. GLOBAL CONTAINER
========================================================= */

.api-container {

    width:
        min(
            calc(100% - 40px),
            var(--api-container)
        );

    margin-inline:
        auto;

}


/* =========================================================
   05. SECTION SYSTEM
========================================================= */

.api-section {

    position:
        relative;

    padding:
        100px 0;

}


.api-section--light {

    background:
        var(--api-light);

}


.api-section--white {

    background:
        var(--api-white);

}


.api-section--dark {

    background:
        var(--api-dark);

}


.api-section__header {

    max-width:
        760px;

    margin:
        0 auto 60px;

    text-align:
        center;

}


.api-section__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        16px;

    color:
        var(--api-red);

    font-size:
        0.9rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


.api-section__title {

    margin-bottom:
        20px;

}


.api-section__description {

    max-width:
        680px;

    margin-inline:
        auto;

    color:
        var(--api-text-light);

    font-size:
        1.05rem;

}


/* =========================================================
   06. BUTTON SYSTEM
========================================================= */

.api-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        54px;

    padding:
        14px 28px;

    border:
        2px solid transparent;

    border-radius:
        999px;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        0.95rem;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;

}


.api-btn:hover {

    transform:
        translateY(-3px);

}


.api-btn:focus-visible {

    outline:
        3px solid
        rgba(
            198,
            40,
            40,
            0.35
        );

    outline-offset:
        4px;

}


.api-btn--primary {

    color:
        var(--api-white);

    background:
        var(--api-red);

    box-shadow:
        0 10px 25px
        rgba(
            198,
            40,
            40,
            0.25
        );

}


.api-btn--primary:hover {

    color:
        var(--api-white);

    background:
        var(--api-red-dark);

    box-shadow:
        0 15px 30px
        rgba(
            198,
            40,
            40,
            0.35
        );

}


.api-btn--secondary {

    color:
        var(--api-red);

    background:
        var(--api-white);

    border-color:
        var(--api-red);

}


.api-btn--secondary:hover {

    color:
        var(--api-white);

    background:
        var(--api-red);

}


.api-btn--dark {

    color:
        var(--api-white);

    background:
        var(--api-dark);

}


.api-btn--dark:hover {

    color:
        var(--api-white);

    background:
        var(--api-dark-soft);

}


/* =========================================================
   07. CARD SYSTEM
========================================================= */

.api-card {

    position:
        relative;

    padding:
        32px;

    background:
        var(--api-white);

    border:
        1px solid
        var(--api-border);

    border-radius:
        var(--api-radius-lg);

    box-shadow:
        var(--api-shadow-sm);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

}


.api-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(
            198,
            40,
            40,
            0.25
        );

    box-shadow:
        var(--api-shadow-md);

}


/* =========================================================
   08. GRID SYSTEM
========================================================= */

.api-grid {

    display:
        grid;

    gap:
        30px;

}


.api-grid--2 {

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

}


.api-grid--3 {

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

}


.api-grid--4 {

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

}


/* =========================================================
   09. ACCESSIBILITY
========================================================= */

.api-sr-only {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(
            0,
            0,
            0,
            0
        );

    white-space:
        nowrap;

    border:
        0;

}


/* =========================================================
   10. SCROLL REVEAL
========================================================= */

.api-reveal {

    opacity:
        0;

    transform:
        translateY(
            30px
        );

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;

}


.api-reveal.is-visible {

    opacity:
        1;

    transform:
        translateY(
            0
        );

}


/* =========================================================
   11. PREMIUM HEADER
========================================================= */

.api-site-header {

    position:
        fixed;

    top:
        0;

    left:
        0;

    z-index:
        1000;

    width:
        100%;

    padding:
        16px 0;

    background:
        rgba(
            255,
            255,
            255,
            0.97
        );

    border-bottom:
        1px solid
        rgba(
            15,
            23,
            42,
            0.06
        );

    transition:
        padding 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;

}


.api-site-header.is-scrolled {

    padding:
        10px 0;

    background:
        rgba(
            255,
            255,
            255,
            0.98
        );

    box-shadow:
        0 8px 30px
        rgba(
            15,
            23,
            42,
            0.08
        );

}


.api-navigation {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

}


.api-header-inner {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    width:
        min(
            calc(100% - 40px),
            var(--api-container)
        );

    min-height:
        86px;

    margin-inline:
        auto;

    position:
        relative;

}


.api-header-brand {

    display:
        flex;

    align-items:
        center;

    flex-shrink:
        0;

}


.api-logo {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    flex-shrink:
        0;

}


.api-logo-image {

    width:
        58px;

    height:
        58px;

    object-fit:
        contain;

    border-radius:
        8px;

}


.api-logo-name {

    max-width:
        190px;

    color:
        var(--api-dark);

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        0.95rem;

    font-weight:
        700;

    line-height:
        1.25;

}


.api-nav-menu {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        1 1 auto;

    min-width:
        0;

    gap:
        5px;

}


.api-nav-menu .api-nav-list {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        nowrap;

    gap:
        10px;

    margin:
        0 auto;

    padding:
        0;

    list-style:
        none;

}


.api-nav-menu .api-nav-list li {

    display:
        flex;

    align-items:
        center;

    position:
        relative;

}


.api-nav-menu a {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        10px 13px;

    color:
        var(--api-dark);

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        0.86rem;

    font-weight:
        600;

    white-space:
        nowrap;

    text-decoration:
        none;

    border-radius:
        999px;

    transition:
        color 0.3s ease,
        background-color 0.3s ease;

}


.api-nav-menu a:hover,
.api-nav-menu a:focus-visible {

    color:
        var(--api-red);

    background:
        rgba(
            212,
            38,
            38,
            0.06
        );

}


.api-nav-link {

    position:
        relative;

    padding:
        10px 13px;

    color:
        var(--api-dark);

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        0.86rem;

    font-weight:
        600;

    transition:
        color 0.3s ease;

}


.api-nav-link::after {

    content:
        "";

    position:
        absolute;

    left:
        13px;

    bottom:
        3px;

    width:
        0;

    height:
        2px;

    background:
        var(--api-red);

    transition:
        width 0.3s ease;

}


.api-nav-link:hover {

    color:
        var(--api-red);

}


.api-nav-link:hover::after {

    width:
        calc(
            100% - 26px
        );

}


/* =========================================================
   12. DONATE BUTTON
========================================================= */

.api-header-action {

    display:
        flex;

    align-items:
        center;

    flex-shrink:
        0;

    margin-left:
        auto;

}


.api-header-cta {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        12px 21px;

    color:
        var(--api-white) !important;

    background:
        var(--api-red);

    border-radius:
        999px;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        0.88rem;

    font-weight:
        600;

    box-shadow:
        0 8px 20px
        rgba(
            198,
            40,
            40,
            0.22
        );

    white-space:
        nowrap;

    transition:
        all 0.3s ease;

}


.api-header-cta:hover {

    color:
        var(--api-white) !important;

    background:
        var(--api-red-dark);

    transform:
        translateY(
            -2px
        );

}


.api-nav-donate {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    margin-left:
        10px;

    padding:
        12px 21px;

    color:
        var(--api-white) !important;

    background:
        var(--api-red);

    border-radius:
        999px;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        0.88rem;

    font-weight:
        600;

    box-shadow:
        0 8px 20px
        rgba(
            198,
            40,
            40,
            0.22
        );

    transition:
        all 0.3s ease;

}


.api-nav-donate:hover {

    color:
        var(--api-white) !important;

    background:
        var(--api-red-dark);

    transform:
        translateY(
            -2px
        );

}


/* =========================================================
   13. MOBILE MENU
========================================================= */

.api-menu-toggle {

    display:
        none;

    width:
        48px;

    height:
        48px;

    padding:
        0;

    border:
        0;

    border-radius:
        10px;

    background:
        var(--api-light);

    cursor:
        pointer;

}


.api-menu-toggle span {

    display:
        block;

    width:
        22px;

    height:
        2px;

    margin:
        5px auto;

    background:
        var(--api-dark);

    transition:
        all 0.3s ease;

}


/* =========================================================
   14. HERO
========================================================= */

.api-hero {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    min-height:
        min(
            850px,
            100vh
        );

    padding:
        150px 0
        100px;

    overflow:
        hidden;

    background:
        var(--api-navy);

}


/* =========================================================
   15. HERO BACKGROUND
========================================================= */

.api-hero-background {

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

}


.api-hero-image {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

}


/* =========================================================
   16. HERO OVERLAY
========================================================= */

.api-hero-overlay {

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    background:
        linear-gradient(
            90deg,
            rgba(
                8,
                15,
                30,
                0.96
            ) 0%,

            rgba(
                8,
                15,
                30,
                0.88
            ) 38%,

            rgba(
                8,
                15,
                30,
                0.60
            ) 68%,

            rgba(
                8,
                15,
                30,
                0.35
            ) 100%
        );

}


/* =========================================================
   17. HERO CONTAINER
========================================================= */

.api-hero
.api-container {

    position:
        relative;

    z-index:
        2;

}


.api-hero-inner {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1.35fr
        )
        minmax(
            280px,
            0.65fr
        );

    align-items:
        center;

    gap:
        70px;

}


/* =========================================================
   18. HERO CONTENT
========================================================= */

.api-hero-content {

    position:
        relative;

    z-index:
        5;

    max-width:
        760px;

}


.api-hero-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        24px;

    color:
        rgba(
            255,
            255,
            255,
            0.95
        );

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        0.85rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


.api-hero-eyebrow-line {

    display:
        block;

    width:
        45px;

    height:
        2px;

    background:
        var(--api-red);

}


/* =========================================================
   19. HERO TITLE — FIXED
========================================================= */

.api-hero-title {

    display:
        block !important;

    position:
        relative;

    z-index:
        5;

    max-width:
        900px;

    margin:
        0 0 28px;

    color:
        #ffffff !important;

    font-family:
        "Poppins",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size:
        clamp(
            3rem,
            6vw,
            5.8rem
        ) !important;

    font-weight:
        800;

    line-height:
        1.05;

    letter-spacing:
        -0.04em;

    text-shadow:
        0 3px 20px
        rgba(
            0,
            0,
            0,
            0.25
        );

}


.api-hero-title span {

    display:
        block;

    color:
        #ffffff !important;

}


/* =========================================================
   20. HERO DESCRIPTION — FIXED
========================================================= */

.api-hero-description {

    position:
        relative;

    z-index:
        5;

    max-width:
        680px;

    margin:
        0 0 36px;

    color:
        rgba(
            255,
            255,
            255,
            0.95
        ) !important;

    font-size:
        clamp(
            1rem,
            1.5vw,
            1.15rem
        );

    font-weight:
        400;

    line-height:
        1.8;

    text-shadow:
        0 2px 12px
        rgba(
            0,
            0,
            0,
            0.45
        );

}


/* =========================================================
   21. HERO CTA BUTTONS
========================================================= */

.api-hero-actions {

    position:
        relative;

    z-index:
        5;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;

}


.api-hero-actions
.api-btn {

    min-width:
        190px;

}


.api-btn--hero-secondary {

    color:
        #ffffff !important;

    background:
        rgba(
            255,
            255,
            255,
            0.12
        ) !important;

    border:
        2px solid
        rgba(
            255,
            255,
            255,
            0.65
        ) !important;

    backdrop-filter:
        blur(
            10px
        );

}


.api-btn--hero-secondary:hover {

    color:
        var(--api-dark) !important;

    background:
        #ffffff !important;

    border-color:
        #ffffff !important;

}


/* =========================================================
   22. HERO IMPACT CARD
========================================================= */

.api-hero-impact {

    position:
        relative;

    z-index:
        5;

    padding:
        30px;

    background:
        rgba(
            255,
            255,
            255,
            0.10
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.25
        );

    border-radius:
        var(--api-radius-xl);

    backdrop-filter:
        blur(
            18px
        );

    box-shadow:
        0 25px 60px
        rgba(
            0,
            0,
            0,
            0.25
        );

}


.api-hero-impact-header {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding-bottom:
        20px;

    margin-bottom:
        8px;

    color:
        rgba(
            255,
            255,
            255,
            0.85
        );

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        0.8rem;

    font-weight:
        600;

    text-transform:
        uppercase;

    letter-spacing:
        0.1em;

}


.api-hero-impact-dot {

    width:
        8px;

    height:
        8px;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        var(--api-gold);

    box-shadow:
        0 0 0 5px
        rgba(
            212,
            175,
            55,
            0.15
        );

}


.api-hero-stat {

    padding:
        20px 0;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.15
        );

}


.api-hero-stat:last-child {

    border-bottom:
        0;

}


.api-hero-stat strong {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #ffffff !important;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        1.5rem;

}


.api-hero-stat span {

    display:
        block;

    color:
        rgba(
            255,
            255,
            255,
            0.75
        ) !important;

    font-size:
        0.9rem;

}


/* =========================================================
   23. SCROLL INDICATOR
========================================================= */

.api-scroll-indicator {

    position:
        absolute;

    bottom:
        30px;

    left:
        50%;

    z-index:
        6;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        8px;

    color:
        rgba(
            255,
            255,
            255,
            0.75
        );

    font-size:
        0.75rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.1em;

    transform:
        translateX(
            -50%
        );

}


.api-scroll-arrow {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.5
        );

    border-radius:
        50%;

    animation:
        apiScrollBounce
        2s
        infinite;

}


@keyframes apiScrollBounce {

    0%,
    100% {

        transform:
            translateY(
                0
            );

    }

    50% {

        transform:
            translateY(
                7px
            );

    }

}


/* =========================================================
   24. RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1100px) {

    .api-nav-link {

        padding:
            10px 8px;

        font-size:
            0.8rem;

    }


    .api-nav-donate {

        padding:
            11px 16px;

    }


    .api-hero-inner {

        gap:
            45px;

    }

}


/* =========================================================
   25. RESPONSIVE — MOBILE MENU
========================================================= */

@media (max-width: 991px) {

    .api-header-inner {

        gap:
            12px;

    }


    .api-header-action {

        display:
            none;

        position:
            absolute;

        left:
            20px;

        right:
            20px;

        top:
            calc(100% + 150px);

        justify-content:
            center;

        z-index:
            5;

    }


    .api-nav-menu.is-open ~ .api-header-action {

        display:
            flex;

    }


    .api-nav-menu .menu-item:has(a[href*="donation"]),
    .api-nav-menu .menu-item:has(a[href*="donate"]) {

        display:
            none !important;

    }


    .api-menu-toggle {

        display:
            block;

    }


    .api-nav-menu {

        position:
            absolute;

        top:
            calc(
                100% + 10px
            );

        left:
            20px;

        right:
            20px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            5px;

        padding:
            15px 15px 92px;

        background:
            var(--api-white);

        border:
            1px solid
            var(--api-border);

        border-radius:
            var(--api-radius-md);

        box-shadow:
            var(--api-shadow-lg);

        opacity:
            0;

        visibility:
            hidden;

        transform:
            translateY(
                -10px
            );

        transition:
            all 0.3s ease;

    }


    .api-nav-menu.is-open {

        opacity:
            1;

        visibility:
            visible;

        transform:
            translateY(
                0
            );

    }


    .api-nav-menu.is-open .api-nav-list {

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            6px;

    }


    .api-nav-link {

        padding:
            13px 15px;

    }


    .api-nav-link::after {

        display:
            none;

    }


    .api-header-cta {

        width:
            100%;

        justify-content:
            center;

        padding:
            13px 18px;

    }


    .api-hero {

        min-height:
            auto;

        padding:
            140px 0
            100px;

    }


    .api-hero-inner {

        grid-template-columns:
            1fr;

    }


    .api-hero-impact {

        max-width:
            500px;

    }

}


/* =========================================================
   26. RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 767px) {

    .api-container {

        width:
            min(
                calc(100% - 30px),
                var(--api-container)
            );

    }


    .api-section {

        padding:
            65px 0;

    }


    .api-grid--2,
    .api-grid--3,
    .api-grid--4 {

        grid-template-columns:
            1fr;

    }


    .api-section__header {

        margin-bottom:
            40px;

    }


    .api-site-header {

        padding:
            10px 0;

    }


    .api-logo-image {

        width:
            48px;

        height:
            48px;

    }


    .api-logo-name {

        max-width:
            150px;

        font-size:
            0.8rem;

    }


    .api-hero {

        padding:
            130px 0
            90px;

    }


    .api-hero-title {

        font-size:
            clamp(
                2.6rem,
                12vw,
                4rem
            ) !important;

        line-height:
            1.08;

    }


    .api-hero-description {

        font-size:
            1rem;

    }


    .api-hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .api-hero-actions
    .api-btn {

        width:
            100%;

    }


    .api-hero-impact {

        padding:
            24px;

    }


    .api-scroll-indicator {

        display:
            none;

    }

}


/* =========================================================
   27. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }


    .api-scroll-arrow {

        animation:
            none;

    }

}


/* =========================================================
   28. ASTRA / ELEMENTOR PROTECTION
========================================================= */

/*
   These rules help keep the custom V2 design independent
   from Astra and Elementor global typography.
*/

.api-v2 .api-site-header,
.api-v2 .api-hero,
.api-v2 .api-hero-content,
.api-v2 .api-hero-impact {

    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

}


.api-v2 .api-hero h1 {

    font-family:
        "Poppins",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

}


.api-v2 .api-hero p {

    color:
        rgba(
            255,
            255,
            255,
            0.95
        ) !important;

}


.api-v2 .api-hero a {

    text-decoration:
        none !important;

}

/* =========================================================
   29. ABOUT / WHO WE ARE
========================================================= */

.api-about-section {

    position:
        relative;

    overflow:
        hidden;

}


/* =========================================================
   ABOUT GRID
========================================================= */

.api-about-grid {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            0.95fr
        )
        minmax(
            0,
            1.05fr
        );

    align-items:
        center;

    gap:
        90px;

}


/* =========================================================
   ABOUT MEDIA
========================================================= */

.api-about-media {

    position:
        relative;

}


.api-about-image-wrap {

    position:
        relative;

    max-width:
        560px;

    padding:
        0 25px 25px 0;

}


.api-about-image {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    height:
        620px;

    object-fit:
        cover;

    object-position:
        center;

    border-radius:
        24px;

    box-shadow:
        0 25px 60px
        rgba(
            15,
            23,
            42,
            0.14
        );

}


/* =========================================================
   DECORATIVE SHAPE
========================================================= */

.api-about-image-decoration {

    position:
        absolute;

    right:
        0;

    bottom:
        0;

    width:
        75%;

    height:
        75%;

    background:
        var(--api-red-light);

    border-radius:
        24px;

}


/* =========================================================
   ABOUT BADGE
========================================================= */

.api-about-badge {

    position:
        absolute;

    right:
        0;

    bottom:
        45px;

    z-index:
        5;

    display:
        flex;

    flex-direction:
        column;

    min-width:
        190px;

    padding:
        22px 26px;

    background:
        var(--api-red);

    border-radius:
        16px;

    box-shadow:
        0 20px 40px
        rgba(
            198,
            40,
            40,
            0.25
        );

}


.api-about-badge-number {

    color:
        #ffffff;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        2rem;

    font-weight:
        800;

    line-height:
        1;

}


.api-about-badge-text {

    margin-top:
        8px;

    color:
        rgba(
            255,
            255,
            255,
            0.85
        );

    font-size:
        0.85rem;

    font-weight:
        500;

}


/* =========================================================
   ABOUT CONTENT
========================================================= */

.api-about-content {

    max-width:
        650px;

}


.api-about-eyebrow-line {

    display:
        inline-block;

    width:
        38px;

    height:
        2px;

    background:
        var(--api-red);

}


.api-about-title {

    max-width:
        620px;

    margin-bottom:
        28px;

    color:
        var(--api-dark);

    font-size:
        clamp(
            2.2rem,
            4vw,
            3.6rem
        );

    font-weight:
        750;

    line-height:
        1.12;

    letter-spacing:
        -0.03em;

}


.api-about-title span {

    display:
        block;

    color:
        var(--api-red);

}


.api-about-lead {

    color:
        var(--api-dark-soft) !important;

    font-size:
        1.15rem;

    font-weight:
        500;

    line-height:
        1.8;

}


.api-about-content > p:not(
    .api-about-lead
) {

    color:
        var(--api-text-light);

    font-size:
        1rem;

    line-height:
        1.8;

}


/* =========================================================
   ABOUT VALUES
========================================================= */

.api-about-values {

    display:
        grid;

    gap:
        18px;

    margin:
        40px 0 0;

}


.api-about-value {

    display:
        grid;

    grid-template-columns:
        48px
        1fr;

    align-items:
        start;

    gap:
        18px;

    padding:
        20px 22px;

    background:
        var(--api-light);

    border:
        1px solid
        var(--api-border);

    border-radius:
        14px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

}


.api-about-value:hover {

    transform:
        translateX(
            5px
        );

    border-color:
        rgba(
            198,
            40,
            40,
            0.25
        );

    box-shadow:
        var(--api-shadow-sm);

}


/* =========================================================
   VALUE ICON
========================================================= */

.api-about-value-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        48px;

    height:
        48px;

    color:
        var(--api-red);

    background:
        var(--api-red-light);

    border-radius:
        12px;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        0.8rem;

    font-weight:
        700;

}


.api-about-value h3 {

    margin:
        0 0 4px;

    color:
        var(--api-dark);

    font-size:
        1.05rem;

}


.api-about-value p {

    margin:
        0;

    color:
        var(--api-text-light);

    font-size:
        0.94rem;

    line-height:
        1.7;

}


/* =========================================================
   ABOUT CTA
========================================================= */

.api-about-actions {

    margin-top:
        30px;

}


/* =========================================================
   ABOUT RESPONSIVE — TABLET
========================================================= */

@media (max-width: 991px) {

    .api-about-grid {

        grid-template-columns:
            1fr;

        gap:
            60px;

    }


    .api-about-media {

        max-width:
            650px;

        margin-inline:
            auto;

        width:
            100%;

    }


    .api-about-content {

        max-width:
            700px;

    }


    .api-about-image {

        height:
            560px;

    }

}


/* =========================================================
   ABOUT RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 767px) {

    .api-about-image-wrap {

        padding:
            0 15px 15px 0;

    }


    .api-about-image {

        height:
            430px;

        border-radius:
            18px;

    }


    .api-about-image-decoration {

        border-radius:
            18px;

    }


    .api-about-badge {

        right:
            0;

        bottom:
            30px;

        min-width:
            160px;

        padding:
            18px 20px;

    }


    .api-about-badge-number {

        font-size:
            1.6rem;

    }


    .api-about-title {

        font-size:
            clamp(
                2rem,
                9vw,
                2.8rem
            );

    }


    .api-about-lead {

        font-size:
            1.05rem;

    }


    .api-about-value {

        grid-template-columns:
            42px
            1fr;

        gap:
            14px;

        padding:
            16px;

    }


    .api-about-value-icon {

        width:
            42px;

        height:
            42px;

    }


    .api-about-actions
    .api-btn {

        width:
            100%;

    }

}

/* =========================================================
   PREMIUM BUTTON TEXT FIX
========================================================= */

/* Primary red buttons */
.api-btn--primary,
.api-btn--primary:visited {

    color: #ffffff !important;

    background:
        var(--api-red);

}


/* Primary button hover */
.api-btn--primary:hover,
.api-btn--primary:focus {

    color:
        #ffffff !important;

}


/* Primary button arrow */
.api-btn--primary span,
.api-btn--primary:hover span {

    color:
        #ffffff !important;

}


/* =========================================================
   HERO PRIMARY BUTTON
========================================================= */

.api-hero .api-btn--primary,
.api-hero .api-btn--primary:visited {

    color:
        #ffffff !important;

}


.api-hero .api-btn--primary:hover {

    color:
        #ffffff !important;

    background:
        #a91f1f;

}


/* =========================================================
   HEADER DONATE BUTTON
========================================================= */

.api-header .api-btn--primary,
.api-header .api-btn--primary:visited {

    color:
        #ffffff !important;

}


.api-header .api-btn--primary span {

    color:
        #ffffff !important;

}


/* =========================================================
   ABOUT CTA
========================================================= */

.api-about-actions .api-btn--primary,
.api-about-actions .api-btn--primary:visited {

    color:
        #ffffff !important;

}


.api-about-actions .api-btn--primary span {

    color:
        #ffffff !important;

}


/* =========================================================
   HERO SECONDARY BUTTON
========================================================= */

.api-hero .api-btn:not(.api-btn--primary),
.api-hero .api-btn:not(.api-btn--primary):visited {

    color:
        #c41010 !important;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.7
        );

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

}


.api-hero .api-btn:not(.api-btn--primary):hover {

    color:
        #faf7f7 !important;

    background:
        rgba(
            255,
            255,
            255,
            0.16
        );

    border-color:
        #ffffff;

}


.api-hero .api-btn:not(.api-btn--primary) span {

    color:
        #ec7a7a !important;

}


/* =========================================================
   03 — IMPACT SECTION
========================================================= */

.api-impact {

    position:
        relative;

    padding:
        120px
        0;

    background:
        #172235;

    color:
        #ffffff;

    overflow:
        hidden;

}


/* Decorative background glow */

.api-impact::before {

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    top:
        -250px;

    right:
        -180px;

    border-radius:
        50%;

    background:
        rgba(
            210,
            38,
            38,
            0.12
        );

    filter:
        blur(80px);

    pointer-events:
        none;

}


/* Container */

.api-impact .api-container {

    position:
        relative;

    z-index:
        2;

}


/* Intro */

.api-impact-intro {

    max-width:
        760px;

    margin:
        0 auto 70px;

    text-align:
        center;

}


/* Eyebrow */

.api-impact .api-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        20px;

    color:
        #e32b2b;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}


/* Eyebrow line */

.api-impact .api-eyebrow-line {

    display:
        inline-block;

    width:
        34px;

    height:
        2px;

    background:
        #e32b2b;

}


/* Main heading */

.api-impact-intro h2 {

    margin:
        0 0 22px;

    color:
        #ffffff;

    font-size:
        clamp(
            38px,
            5vw,
            64px
        );

    line-height:
        1.05;

    font-weight:
        800;

    letter-spacing:
        -2px;

}


/* Heading accent */

.api-impact-intro h2 span {

    display:
        block;

    color:
        #e32b2b;

}


/* Description */

.api-impact-intro p {

    max-width:
        720px;

    margin:
        0 auto;

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

    font-size:
        16px;

    line-height:
        1.85;

}


/* Statistics Grid */

.api-impact-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap:
        20px;

}


/* Impact Card */

.api-impact-card {

    position:
        relative;

    padding:
        44px 30px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.16
        );

    border-radius:
        18px;

    background:
        rgba(
            255,
            255,
            255,
            0.06
        );

    transition:
        transform
        0.35s
        ease,

        border-color
        0.35s
        ease,

        background
        0.35s
        ease;

}


/* Card hover */

.api-impact-card:hover {

    transform:
        translateY(
            -8px
        );

    border-color:
        rgba(
            227,
            43,
            43,
            0.65
        );

    background:
        rgba(
            255,
            255,
            255,
            0.075
        );

}


/* Number */

.api-impact-number {

    display:
        flex;

    align-items:
        baseline;

    margin-bottom:
        20px;

}


/* Counter */

.api-counter {

    color:
        #ffffff;

    font-size:
        clamp(
            42px,
            4vw,
            58px
        );

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        -2px;

}


/* Plus symbol */

.api-counter-symbol {

    margin-left:
        4px;

    color:
        #e32b2b;

    font-size:
        32px;

    font-weight:
        800;

}


/* Card heading */

.api-impact-card h3 {

    margin:
        0 0 12px;

    color:
        #ffffff;

    font-size:
        18px;

    line-height:
        1.3;

    font-weight:
        700;

}


/* Card paragraph */

.api-impact-card p {

    margin:
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.78
        );

    font-size:
        15px;

    line-height:
        1.75;

}


/* =========================================================
   IMPACT RESPONSIVE — TABLET
========================================================= */

@media (
    max-width:
    1024px
) {

    .api-impact {

        padding:
            90px
            0;

    }


    .api-impact-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }

}


/* =========================================================
   IMPACT RESPONSIVE — MOBILE
========================================================= */

@media (
    max-width:
    767px
) {

    .api-impact {

        padding:
            80px
            20px;

    }


    .api-impact-intro {

        margin-bottom:
            50px;

    }


    .api-impact-intro h2 {

        font-size:
            40px;

        letter-spacing:
            -1px;

    }


    .api-impact-intro p {

        font-size:
            15px;

    }


    .api-impact-grid {

        grid-template-columns:
            1fr;

        gap:
            16px;

    }


    .api-impact-card {

        padding:
            34px
            26px;

    }

}
/* =========================================================
   04 — PROGRAMS SECTION
========================================================= */

.api-programs {

    position:
        relative;

    padding:
        120px
        0;

    background:
        #ffffff;

    overflow:
        hidden;

}


/* Programs Introduction */

.api-programs-intro {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        80px;

    align-items:
        end;

    margin-bottom:
        70px;

}


/* Programs heading */

.api-programs-heading {

    max-width:
        620px;

}


/* Eyebrow */

.api-programs .api-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        20px;

    color:
        #e32b2b;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}


/* Eyebrow line */

.api-programs .api-eyebrow-line {

    display:
        inline-block;

    width:
        34px;

    height:
        2px;

    background:
        #e32b2b;

}


/* Main heading */

.api-programs-heading h2 {

    margin:
        0;

    color:
        #172235;

    font-size:
        clamp(
            40px,
            5vw,
            64px
        );

    line-height:
        1.05;

    font-weight:
        800;

    letter-spacing:
        -2px;

}


/* Heading accent */

.api-programs-heading h2 span {

    display:
        block;

    color:
        #d42626;

}


/* Description */

.api-programs-description {

    max-width:
        500px;

}


.api-programs-description p {

    margin:
        0 0 28px;

    color:
        #5a6778;

    font-size:
        16px;

    line-height:
        1.85;

}


/* Programs grid */

.api-programs-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        24px;

}


/* Program card */

.api-program-card {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    overflow:
        hidden;

    border:
        1px solid
        #e8ebef;

    border-radius:
        18px;

    background:
        #ffffff;

    box-shadow:
        0
        15px
        45px
        rgba(
            23,
            34,
            53,
            0.06
        );

    transition:
        transform
        0.4s
        ease,

        box-shadow
        0.4s
        ease,

        border-color
        0.4s
        ease;

}


/* Card hover */

.api-program-card:hover {

    transform:
        translateY(
            -10px
        );

    border-color:
        rgba(
            212,
            38,
            38,
            0.25
        );

    box-shadow:
        0
        25px
        60px
        rgba(
            23,
            34,
            53,
            0.12
        );

}


/* Program image */

.api-program-image {

    position:
        relative;

    height:
        260px;

    overflow:
        hidden;

}


/* Image */

.api-program-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform
        0.6s
        ease;

}


/* Image hover */

.api-program-card:hover
.api-program-image img {

    transform:
        scale(
            1.06
        );

}


/* Image overlay */

.api-program-image::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to top,
            rgba(
                23,
                34,
                53,
                0.3
            ),
            transparent
        );

    pointer-events:
        none;

}


/* Content */

.api-program-content {

    position:
        relative;

    display:
        flex;

    flex:
        1;

    flex-direction:
        column;

    padding:
        30px;

}


/* Program number */

.api-program-number {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    margin-bottom:
        20px;

    border-radius:
        10px;

    color:
        #d42626;

    background:
        rgba(
            212,
            38,
            38,
            0.08
        );

    font-size:
        12px;

    font-weight:
        800;

}


/* Card heading */

.api-program-content h3 {

    margin:
        0 0 14px;

    color:
        #172235;

    font-size:
        21px;

    line-height:
        1.3;

    font-weight:
        750;

}


/* Card description */

.api-program-content p {

    margin:
        0 0 22px;

    color:
        #607086;

    font-size:
        15px;

    line-height:
        1.78;

}


/* Program link */

.api-program-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        auto;

    color:
        #d42626 !important;

    font-size:
        14px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        gap
        0.3s
        ease,

        color
        0.3s
        ease;

}


/* Link arrow */

.api-program-link span {

    color:
        #d42626;

    transition:
        transform
        0.3s
        ease;

}


/* Link hover */

.api-program-link:hover {

    color:
        #a91f1f !important;

    gap:
        14px;

}


.api-program-link:hover span {

    transform:
        translateX(
            3px
        );

}


/* =========================================================
   PROGRAMS RESPONSIVE — TABLET
========================================================= */

@media (
    max-width:
    1024px
) {

    .api-programs {

        padding:
            90px
            0;

    }


    .api-programs-intro {

        grid-template-columns:
            1fr;

        gap:
            30px;

        align-items:
            start;

    }


    .api-programs-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }

}


/* =========================================================
   PROGRAMS RESPONSIVE — MOBILE
========================================================= */

@media (
    max-width:
    767px
) {

    .api-programs {

        padding:
            80px
            20px;

    }


    .api-programs-intro {

        margin-bottom:
            50px;

    }


    .api-programs-heading h2 {

        font-size:
            40px;

        letter-spacing:
            -1px;

    }


    .api-programs-description p {

        font-size:
            15px;

    }


    .api-programs-grid {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


    .api-program-image {

        height:
            240px;

    }


    .api-program-content {

        padding:
            26px;

    }

}
/* =========================================================
   05 — GALLERY SECTION
========================================================= */

.api-gallery {

    position:
        relative;

    padding:
        120px
        0;

    background:
        #f7f9fb;

    overflow:
        hidden;

}


/* =========================================================
   GALLERY HEADER
========================================================= */

.api-gallery-header {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        80px;

    align-items:
        end;

    margin-bottom:
        60px;

}


.api-gallery-heading {

    max-width:
        650px;

}


.api-gallery .api-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        20px;

    color:
        #d42626;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}


.api-gallery .api-eyebrow-line {

    display:
        inline-block;

    width:
        34px;

    height:
        2px;

    background:
        #d42626;

}


.api-gallery-heading h2 {

    margin:
        0;

    color:
        #172235;

    font-size:
        clamp(
            40px,
            5vw,
            64px
        );

    line-height:
        1.05;

    font-weight:
        800;

    letter-spacing:
        -2px;

}


.api-gallery-heading h2 span {

    display:
        block;

    color:
        #d42626;

}


.api-gallery-intro {

    max-width:
        500px;

}


.api-gallery-intro p {

    margin:
        0 0 28px;

    color:
        #5a6778;

    font-size:
        16px;

    line-height:
        1.85;

}


/* =========================================================
   GALLERY GRID
========================================================= */

.api-gallery-grid {

    display:
        grid;

    grid-template-columns:
        1.4fr
        1fr
        1fr;

    grid-template-rows:
        280px
        280px;

    gap:
        20px;

}


/* Gallery item */

.api-gallery-item {

    position:
        relative;

    min-width:
        0;

    margin:
        0;

    overflow:
        hidden;

    border-radius:
        18px;

    background:
        #172235;

    box-shadow:
        0
        15px
        45px
        rgba(
            23,
            34,
            53,
            0.08
        );

}


/* Large featured image */

.api-gallery-item--large {

    grid-row:
        span 2;

}


/* Gallery image */

.api-gallery-item img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform
        0.7s
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );

}


/* Image hover */

.api-gallery-item:hover img {

    transform:
        scale(
            1.08
        );

}


/* Dark image overlay */

.api-gallery-item::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to top,
            rgba(
                10,
                18,
                32,
                0.85
            )
            0%,

            rgba(
                10,
                18,
                32,
                0.15
            )
            55%,

            transparent
            100%
        );

    pointer-events:
        none;

}


/* =========================================================
   GALLERY CAPTION
========================================================= */

.api-gallery-caption {

    position:
        absolute;

    right:
        28px;

    bottom:
        25px;

    left:
        28px;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    padding:
        16px 18px;

    border-radius:
        14px;

    background:
        rgba(
            10,
            18,
            32,
            0.62
        );

    color:
        #ffffff;

}


.api-gallery-caption span {

    color:
        #f0c94b;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;

}


.api-gallery-caption strong {

    color:
        #ffffff;

    font-size:
        18px;

    line-height:
        1.35;

    font-weight:
        700;

}


/* Featured caption */

.api-gallery-item--large
.api-gallery-caption strong {

    font-size:
        26px;

}


/* =========================================================
   GALLERY BUTTON
========================================================= */

.api-gallery .api-btn--outline {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        14px
        24px;

    border:
        1px
        solid
        #d42626;

    border-radius:
        999px;

    color:
        #d42626;

    background:
        transparent;

    font-size:
        14px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        all
        0.3s
        ease;

}


.api-gallery .api-btn--outline span {

    transition:
        transform
        0.3s
        ease;

}


.api-gallery .api-btn--outline:hover {

    color:
        #ffffff;

    background:
        #d42626;

    transform:
        translateY(
            -2px
        );

}


.api-gallery .api-btn--outline:hover span {

    transform:
        translateX(
            4px
        );

}


/* =========================================================
   GALLERY RESPONSIVE — TABLET
========================================================= */

@media (
    max-width:
    1024px
) {

    .api-gallery {

        padding:
            90px
            0;

    }


    .api-gallery-header {

        grid-template-columns:
            1fr;

        gap:
            30px;

        align-items:
            start;

    }


    .api-gallery-grid {

        grid-template-columns:
            1fr
            1fr;

        grid-template-rows:
            320px
            240px
            240px;

    }


    .api-gallery-item--large {

        grid-column:
            span 2;

        grid-row:
            span 1;

    }

}


/* =========================================================
   GALLERY RESPONSIVE — MOBILE
========================================================= */

@media (
    max-width:
    767px
) {

    .api-gallery {

        padding:
            80px
            20px;

    }


    .api-gallery-heading h2 {

        font-size:
            40px;

        letter-spacing:
            -1px;

    }


    .api-gallery-intro p {

        font-size:
            15px;

    }


    .api-gallery-grid {

        display:
            grid;

        grid-template-columns:
            1fr;

        grid-template-rows:
            repeat(
                5,
                260px
            );

        gap:
            16px;

    }


    .api-gallery-item--large {

        grid-column:
            auto;

        grid-row:
            auto;

    }


    .api-gallery-caption {

        right:
            20px;

        bottom:
            20px;

        left:
            20px;

    }


    .api-gallery-item--large
    .api-gallery-caption strong {

        font-size:
            21px;

    }

}
/* =========================================================
   06 — NEWS & EVENTS SECTION
========================================================= */

.api-news {

    position:
        relative;

    padding:
        120px
        0;

    background:
        #ffffff;

    overflow:
        hidden;

}


/* =========================================================
   NEWS HEADER
========================================================= */

.api-news-header {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        80px;

    align-items:
        end;

    margin-bottom:
        60px;

}


.api-news-heading {

    max-width:
        650px;

}


/* Eyebrow */

.api-news .api-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        20px;

    color:
        #d42626;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}


.api-news .api-eyebrow-line {

    display:
        inline-block;

    width:
        34px;

    height:
        2px;

    background:
        #d42626;

}


/* Main heading */

.api-news-heading h2 {

    margin:
        0;

    color:
        #172235;

    font-size:
        clamp(
            40px,
            5vw,
            64px
        );

    line-height:
        1.05;

    font-weight:
        800;

    letter-spacing:
        -2px;

}


.api-news-heading h2 span {

    display:
        block;

    color:
        #d42626;

}


/* Description */

.api-news-intro {

    max-width:
        500px;

}


.api-news-intro p {

    margin:
        0 0 28px;

    color:
        #617087;

    font-size:
        16px;

    line-height:
        1.8;

}


/* =========================================================
   NEWS GRID
========================================================= */

.api-news-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        24px;

}


/* =========================================================
   NEWS CARD
========================================================= */

.api-news-card {

    overflow:
        hidden;

    border:
        1px
        solid
        #e8ebef;

    border-radius:
        18px;

    background:
        #ffffff;

    box-shadow:
        0
        15px
        45px
        rgba(
            23,
            34,
            53,
            0.06
        );

    transition:
        transform
        0.4s
        ease,

        box-shadow
        0.4s
        ease,

        border-color
        0.4s
        ease;

}


/* Card hover */

.api-news-card:hover {

    transform:
        translateY(
            -8px
        );

    border-color:
        rgba(
            212,
            38,
            38,
            0.25
        );

    box-shadow:
        0
        25px
        60px
        rgba(
            23,
            34,
            53,
            0.12
        );

}


/* =========================================================
   NEWS IMAGE
========================================================= */

.api-news-image {

    position:
        relative;

    display:
        block;

    height:
        260px;

    overflow:
        hidden;

}


.api-news-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform
        0.6s
        ease;

}


.api-news-card:hover
.api-news-image img {

    transform:
        scale(
            1.06
        );

}


/* Image dark overlay */

.api-news-image::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to top,
            rgba(
                10,
                18,
                32,
                0.35
            ),
            transparent
        );

    pointer-events:
        none;

}


/* =========================================================
   NEWS CATEGORY
========================================================= */

.api-news-category {

    position:
        absolute;

    top:
        20px;

    left:
        20px;

    z-index:
        2;

    padding:
        8px
        13px;

    border-radius:
        999px;

    color:
        #ffffff;

    background:
        #d42626;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1.2px;

}


/* =========================================================
   NEWS CONTENT
========================================================= */

.api-news-content {

    padding:
        30px;

}


/* Meta */

.api-news-meta {

    margin-bottom:
        15px;

}


.api-news-meta span {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #d42626;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

}


.api-news-meta span span {

    font-size:
        8px;

}


/* News heading */

.api-news-content h3 {

    margin:
        0 0 15px;

    color:
        #172235;

    font-size:
        21px;

    line-height:
        1.35;

    font-weight:
        750;

}


/* News description */

.api-news-content p {

    margin:
        0 0 24px;

    color:
        #68778b;

    font-size:
        14px;

    line-height:
        1.75;

}


/* =========================================================
   NEWS LINK
========================================================= */

.api-news-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        #d42626 !important;

    font-size:
        14px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        gap
        0.3s
        ease;

}


.api-news-link span {

    transition:
        transform
        0.3s
        ease;

}


.api-news-link:hover {

    gap:
        14px;

    color:
        #a91f1f !important;

}


.api-news-link:hover span {

    transform:
        translateX(
            3px
        );

}


@media (
    min-width:
    768px
) {

    .api-news-card {

        display:
            flex;

        flex-direction:
            column;

        height:
            100%;

    }


    .api-news-image {

        height:
            270px;

    }


    .api-news-content {

        display:
            flex;

        flex-direction:
            column;

        flex:
            1 1 auto;

        padding:
            28px 28px
            30px;

    }


    .api-news-meta {

        display:
            flex;

        flex-wrap:
            wrap;

        gap:
            12px;

        margin-bottom:
            14px;

    }


    .api-news-content h3 {

        min-height:
            58px;

        margin-bottom:
            14px;

    }


    .api-news-content p {

        margin-bottom:
            20px;

    }


    .api-news-link {

        margin-top:
            auto;

    }

}


/* =========================================================
   NEWS RESPONSIVE — TABLET
========================================================= */

@media (
    max-width:
    1024px
) {

    .api-news {

        padding:
            90px
            0;

    }


    .api-news-header {

        grid-template-columns:
            1fr;

        gap:
            30px;

        align-items:
            start;

    }


    .api-news-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }

}


/* =========================================================
   NEWS RESPONSIVE — MOBILE
========================================================= */

@media (
    max-width:
    767px
) {

    .api-news {

        padding:
            80px
            20px;

    }


    .api-news-heading h2 {

        font-size:
            40px;

        letter-spacing:
            -1px;

    }


    .api-news-intro p {

        font-size:
            15px;

    }


    .api-news-grid {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


    .api-news-image {

        height:
            240px;

    }


    .api-news-content {

        padding:
            26px;

    }

}
/* =========================================================
   07 — PARTNERS & SUPPORTERS SECTION
========================================================= */

.api-partners {

    position:
        relative;

    padding:
        120px
        0;

    background:
        #172235;

    color:
        #ffffff;

    overflow:
        hidden;

}


/* Decorative background */

.api-partners::before {

    content:
        "";

    position:
        absolute;

    width:
        550px;

    height:
        550px;

    top:
        -300px;

    left:
        -250px;

    border-radius:
        50%;

    background:
        rgba(
            212,
            38,
            38,
            0.12
        );

    filter:
        blur(
            90px
        );

    pointer-events:
        none;

}


/* Container */

.api-partners .api-container {

    position:
        relative;

    z-index:
        2;

}


/* =========================================================
   PARTNERS INTRO
========================================================= */

.api-partners-intro {

    max-width:
        760px;

    margin:
        0 auto 70px;

    text-align:
        center;

}


/* Eyebrow */

.api-partners .api-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        20px;

    color:
        #e32b2b;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}


/* Eyebrow line */

.api-partners .api-eyebrow-line {

    display:
        inline-block;

    width:
        34px;

    height:
        2px;

    background:
        #e32b2b;

}


/* Main heading */

.api-partners-intro h2 {

    margin:
        0 0 22px;

    color:
        #ffffff;

    font-size:
        clamp(
            40px,
            5vw,
            64px
        );

    line-height:
        1.05;

    font-weight:
        800;

    letter-spacing:
        -2px;

}


/* Heading accent */

.api-partners-intro h2 span {

    display:
        block;

    color:
        #e32b2b;

}


/* Description */

.api-partners-intro p {

    max-width:
        680px;

    margin:
        0 auto 30px;

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );

    font-size:
        16px;

    line-height:
        1.8;

}


/* =========================================================
   LIGHT BUTTON
========================================================= */

.api-partners .api-btn--light {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        14px
        24px;

    border:
        1px
        solid
        #ffffff;

    border-radius:
        999px;

    color:
        #172235 !important;

    background:
        #ffffff;

    font-size:
        14px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        all
        0.3s
        ease;

}


.api-partners .api-btn--light span {

    color:
        #172235;

    transition:
        transform
        0.3s
        ease;

}


.api-partners .api-btn--light:hover {

    color:
        #ffffff !important;

    background:
        #d42626;

    border-color:
        #d42626;

    transform:
        translateY(
            -3px
        );

}


.api-partners .api-btn--light:hover span {

    color:
        #ffffff;

    transform:
        translateX(
            4px
        );

}


/* =========================================================
   PARTNER LOGOS
========================================================= */

.api-partners-logos {

    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            1fr
        );

    gap:
        16px;

}


/* Partner logo placeholder */

.api-partner-logo {

    min-height:
        110px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    border-radius:
        14px;

    background:
        rgba(
            255,
            255,
            255,
            0.04
        );

    text-align:
        center;

    transition:
        transform
        0.35s
        ease,

        background
        0.35s
        ease,

        border-color
        0.35s
        ease;

}


/* Placeholder small text */

.api-partner-logo span {

    margin-bottom:
        5px;

    color:
        rgba(
            255,
            255,
            255,
            0.42
        );

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.5px;

}


/* Placeholder main text */

.api-partner-logo strong {

    color:
        rgba(
            255,
            255,
            255,
            0.75
        );

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        0.5px;

}


/* Hover */

.api-partner-logo:hover {

    transform:
        translateY(
            -6px
        );

    border-color:
        rgba(
            227,
            43,
            43,
            0.55
        );

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

}


.api-partner-logo:hover strong {

    color:
        #ffffff;

}


/* =========================================================
   PARTNERS RESPONSIVE — TABLET
========================================================= */

@media (
    max-width:
    1024px
) {

    .api-partners {

        padding:
            90px
            0;

    }


    .api-partners-logos {

        grid-template-columns:
            repeat(
                3,
                1fr
            );

    }

}


/* =========================================================
   PARTNERS RESPONSIVE — MOBILE
========================================================= */

@media (
    max-width:
    767px
) {

    .api-partners {

        padding:
            80px
            20px;

    }


    .api-partners-intro {

        margin-bottom:
            50px;

    }


    .api-partners-intro h2 {

        font-size:
            40px;

        letter-spacing:
            -1px;

    }


    .api-partners-intro p {

        font-size:
            15px;

    }


    .api-partners-logos {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

        gap:
            12px;

    }


    .api-partner-logo {

        min-height:
            95px;

    }

}
/* =========================================================
   08 — FINAL CTA SECTION
========================================================= */

.api-cta {

    position:
        relative;

    padding:
        100px
        0;

    background:
        #f7f9fb;

    overflow:
        hidden;

}


/* =========================================================
   CTA MAIN BOX
========================================================= */

.api-cta-box {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        1.2fr
        0.8fr;

    gap:
        70px;

    align-items:
        center;

    padding:
        80px;

    overflow:
        hidden;

    border-radius:
        28px;

    background:
        #d42626;

    box-shadow:
        0
        30px
        80px
        rgba(
            212,
            38,
            38,
            0.18
        );

}


/* =========================================================
   CTA DECORATIONS
========================================================= */

.api-cta-decoration {

    position:
        absolute;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    border-radius:
        50%;

    pointer-events:
        none;

}


.api-cta-decoration--one {

    width:
        500px;

    height:
        500px;

    top:
        -300px;

    right:
        -120px;

}


.api-cta-decoration--two {

    width:
        300px;

    height:
        300px;

    bottom:
        -200px;

    left:
        -120px;

}


/* =========================================================
   CTA CONTENT
========================================================= */

.api-cta-content {

    position:
        relative;

    z-index:
        2;

}


/* Eyebrow */

.api-cta .api-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        20px;

    color:
        rgba(
            255,
            255,
            255,
            0.75
        );

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}


.api-cta .api-eyebrow-line {

    display:
        inline-block;

    width:
        34px;

    height:
        2px;

    background:
        #ffffff;

}


/* CTA Heading */

.api-cta-content h2 {

    max-width:
        650px;

    margin:
        0 0 22px;

    color:
        #ffffff;

    font-size:
        clamp(
            40px,
            5vw,
            64px
        );

    line-height:
        1.05;

    font-weight:
        800;

    letter-spacing:
        -2px;

}


.api-cta-content h2 span {

    display:
        block;

    color:
        #f5d36a;

}


/* CTA Description */

.api-cta-content p {

    max-width:
        650px;

    margin:
        0 0 32px;

    color:
        rgba(
            255,
            255,
            255,
            0.78
        );

    font-size:
        16px;

    line-height:
        1.8;

}


/* =========================================================
   CTA BUTTONS
========================================================= */

.api-cta-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        14px;

}


/* White Button */

.api-cta .api-btn--white {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        15px
        26px;

    border:
        1px
        solid
        #ffffff;

    border-radius:
        999px;

    color:
        #d42626 !important;

    background:
        #ffffff;

    font-size:
        14px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        all
        0.3s
        ease;

}


.api-cta .api-btn--white span {

    color:
        #d42626;

    transition:
        transform
        0.3s
        ease;

}


.api-cta .api-btn--white:hover {

    color:
        #172235 !important;

    background:
        #f5d36a;

    border-color:
        #f5d36a;

    transform:
        translateY(
            -3px
        );

}


.api-cta .api-btn--white:hover span {

    color:
        #172235;

    transform:
        translateX(
            4px
        );

}


/* Outline Light Button */

.api-cta .api-btn--outline-light {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        15px
        26px;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.7
        );

    border-radius:
        999px;

    color:
        #ffffff !important;

    background:
        transparent;

    font-size:
        14px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        all
        0.3s
        ease;

}


.api-cta .api-btn--outline-light span {

    color:
        #ffffff;

}


.api-cta .api-btn--outline-light:hover {

    color:
        #d42626 !important;

    background:
        #ffffff;

    border-color:
        #ffffff;

    transform:
        translateY(
            -3px
        );

}


.api-cta .api-btn--outline-light:hover span {

    color:
        #d42626;

}


/* =========================================================
   CTA OPTIONS
========================================================= */

.api-cta-options {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

}


/* Individual option */

.api-cta-option {

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    padding:
        18px
        20px;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.16
        );

    border-radius:
        14px;

    color:
        #ffffff;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

    text-decoration:
        none;

    transition:
        transform
        0.3s
        ease,

        background
        0.3s
        ease,

        border-color
        0.3s
        ease;

}


/* Option hover */

.api-cta-option:hover {

    transform:
        translateX(
            6px
        );

    border-color:
        rgba(
            255,
            255,
            255,
            0.35
        );

    background:
        rgba(
            255,
            255,
            255,
            0.14
        );

}


/* Option icon */

.api-cta-option-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    width:
        42px;

    height:
        42px;

    border-radius:
        50%;

    color:
        #d42626;

    background:
        #ffffff;

    font-size:
        24px;

    line-height:
        1;

}


/* Option content */

.api-cta-option-content {

    display:
        flex;

    flex:
        1;

    flex-direction:
        column;

    gap:
        4px;

}


.api-cta-option-content strong {

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        700;

}


.api-cta-option-content small {

    color:
        rgba(
            255,
            255,
            255,
            0.58
        );

    font-size:
        12px;

}


/* Option arrow */

.api-cta-option-arrow {

    color:
        #ffffff;

    font-size:
        18px;

    transition:
        transform
        0.3s
        ease;

}


.api-cta-option:hover
.api-cta-option-arrow {

    transform:
        translateX(
            5px
        );

}


/* =========================================================
   CTA RESPONSIVE — TABLET
========================================================= */

@media (
    max-width:
    1024px
) {

    .api-cta {

        padding:
            80px
            0;

    }


    .api-cta-box {

        grid-template-columns:
            1fr;

        gap:
            50px;

        padding:
            60px;

    }


    .api-cta-options {

        display:
            grid;

        grid-template-columns:
            repeat(
                3,
                1fr
            );

    }


    .api-cta-option {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}


/* =========================================================
   CTA RESPONSIVE — MOBILE
========================================================= */

@media (
    max-width:
    767px
) {

    .api-cta {

        padding:
            60px
            20px;

    }


    .api-cta-box {

        gap:
            40px;

        padding:
            50px
            24px;

        border-radius:
            22px;

    }


    .api-cta-content h2 {

        font-size:
            40px;

        letter-spacing:
            -1px;

    }


    .api-cta-content p {

        font-size:
            15px;

    }


    .api-cta-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .api-cta .api-btn--white,
    .api-cta .api-btn--outline-light {

        justify-content:
            center;

    }


    .api-cta-options {

        display:
            flex;

        flex-direction:
            column;

    }


    .api-cta-option {

        flex-direction:
            row;

        align-items:
            center;

    }

}
/* =========================================================
   08 — FINAL CTA SECTION
========================================================= */

.api-cta {

    position:
        relative;

    padding:
        100px
        0;

    background:
        #f7f9fb;

    overflow:
        hidden;

}


/* =========================================================
   CTA MAIN BOX
========================================================= */

.api-cta-box {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        1.2fr
        0.8fr;

    gap:
        70px;

    align-items:
        center;

    padding:
        80px;

    overflow:
        hidden;

    border-radius:
        28px;

    background:
        #d42626;

    box-shadow:
        0
        30px
        80px
        rgba(
            212,
            38,
            38,
            0.18
        );

}


/* =========================================================
   CTA DECORATIONS
========================================================= */

.api-cta-decoration {

    position:
        absolute;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    border-radius:
        50%;

    pointer-events:
        none;

}


.api-cta-decoration--one {

    width:
        500px;

    height:
        500px;

    top:
        -300px;

    right:
        -120px;

}


.api-cta-decoration--two {

    width:
        300px;

    height:
        300px;

    bottom:
        -200px;

    left:
        -120px;

}


/* =========================================================
   CTA CONTENT
========================================================= */

.api-cta-content {

    position:
        relative;

    z-index:
        2;

}


/* Eyebrow */

.api-cta .api-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        20px;

    color:
        rgba(
            255,
            255,
            255,
            0.75
        );

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}


.api-cta .api-eyebrow-line {

    display:
        inline-block;

    width:
        34px;

    height:
        2px;

    background:
        #ffffff;

}


/* CTA Heading */

.api-cta-content h2 {

    max-width:
        650px;

    margin:
        0 0 22px;

    color:
        #ffffff;

    font-size:
        clamp(
            40px,
            5vw,
            64px
        );

    line-height:
        1.05;

    font-weight:
        800;

    letter-spacing:
        -2px;

}


.api-cta-content h2 span {

    display:
        block;

    color:
        #f5d36a;

}


/* CTA Description */

.api-cta-content p {

    max-width:
        650px;

    margin:
        0 0 32px;

    color:
        rgba(
            255,
            255,
            255,
            0.78
        );

    font-size:
        16px;

    line-height:
        1.8;

}


/* =========================================================
   CTA BUTTONS
========================================================= */

.api-cta-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        14px;

}


/* White Button */

.api-cta .api-btn--white {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        15px
        26px;

    border:
        1px
        solid
        #ffffff;

    border-radius:
        999px;

    color:
        #d42626 !important;

    background:
        #ffffff;

    font-size:
        14px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        all
        0.3s
        ease;

}


.api-cta .api-btn--white span {

    color:
        #d42626;

    transition:
        transform
        0.3s
        ease;

}


.api-cta .api-btn--white:hover {

    color:
        #172235 !important;

    background:
        #f5d36a;

    border-color:
        #f5d36a;

    transform:
        translateY(
            -3px
        );

}


.api-cta .api-btn--white:hover span {

    color:
        #172235;

    transform:
        translateX(
            4px
        );

}


/* Outline Light Button */

.api-cta .api-btn--outline-light {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        15px
        26px;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.7
        );

    border-radius:
        999px;

    color:
        #ffffff !important;

    background:
        transparent;

    font-size:
        14px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        all
        0.3s
        ease;

}


.api-cta .api-btn--outline-light span {

    color:
        #ffffff;

}


.api-cta .api-btn--outline-light:hover {

    color:
        #d42626 !important;

    background:
        #ffffff;

    border-color:
        #ffffff;

    transform:
        translateY(
            -3px
        );

}


.api-cta .api-btn--outline-light:hover span {

    color:
        #d42626;

}


/* =========================================================
   CTA OPTIONS
========================================================= */

.api-cta-options {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

}


/* Individual option */

.api-cta-option {

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    padding:
        18px
        20px;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.16
        );

    border-radius:
        14px;

    color:
        #ffffff;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

    text-decoration:
        none;

    transition:
        transform
        0.3s
        ease,

        background
        0.3s
        ease,

        border-color
        0.3s
        ease;

}


/* Option hover */

.api-cta-option:hover {

    transform:
        translateX(
            6px
        );

    border-color:
        rgba(
            255,
            255,
            255,
            0.35
        );

    background:
        rgba(
            255,
            255,
            255,
            0.14
        );

}


/* Option icon */

.api-cta-option-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    width:
        42px;

    height:
        42px;

    border-radius:
        50%;

    color:
        #d42626;

    background:
        #ffffff;

    font-size:
        24px;

    line-height:
        1;

}


/* Option content */

.api-cta-option-content {

    display:
        flex;

    flex:
        1;

    flex-direction:
        column;

    gap:
        4px;

}


.api-cta-option-content strong {

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        700;

}


.api-cta-option-content small {

    color:
        rgba(
            255,
            255,
            255,
            0.58
        );

    font-size:
        12px;

}


/* Option arrow */

.api-cta-option-arrow {

    color:
        #ffffff;

    font-size:
        18px;

    transition:
        transform
        0.3s
        ease;

}


.api-cta-option:hover
.api-cta-option-arrow {

    transform:
        translateX(
            5px
        );

}


/* =========================================================
   CTA RESPONSIVE — TABLET
========================================================= */

@media (
    max-width:
    1024px
) {

    .api-cta {

        padding:
            80px
            0;

    }


    .api-cta-box {

        grid-template-columns:
            1fr;

        gap:
            50px;

        padding:
            60px;

    }


    .api-cta-options {

        display:
            grid;

        grid-template-columns:
            repeat(
                3,
                1fr
            );

    }


    .api-cta-option {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}


/* =========================================================
   CTA RESPONSIVE — MOBILE
========================================================= */

@media (
    max-width:
    767px
) {

    .api-cta {

        padding:
            60px
            20px;

    }


    .api-cta-box {

        gap:
            40px;

        padding:
            50px
            24px;

        border-radius:
            22px;

    }


    .api-cta-content h2 {

        font-size:
            40px;

        letter-spacing:
            -1px;

    }


    .api-cta-content p {

        font-size:
            15px;

    }


    .api-cta-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .api-cta .api-btn--white,
    .api-cta .api-btn--outline-light {

        justify-content:
            center;

    }


    .api-cta-options {

        display:
            flex;

        flex-direction:
            column;

    }


    .api-cta-option {

        flex-direction:
            row;

        align-items:
            center;

    }

}
/* =========================================================
   09 — FOOTER
========================================================= */

.api-footer {

    position:
        relative;

    padding:
        90px
        0
        30px;

    color:
        #ffffff;

    background:
        #111a2a;

    overflow:
        hidden;

}


/* =========================================================
   FOOTER MAIN
========================================================= */

.api-footer-main {

    display:
        grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1.3fr;

    gap:
        60px;

    padding-bottom:
        70px;

}


/* =========================================================
   FOOTER BRAND
========================================================= */

.api-footer-brand {

    max-width:
        330px;

}


.api-footer-logo {

    display:
        inline-flex;

    align-items:
        center;

    margin-bottom:
        25px;

}


.api-footer-logo img {

    display:
        block;

    width:
        auto;

    max-width:
        190px;

    max-height:
        75px;

    object-fit:
        contain;

}


.api-footer-brand p {

    margin:
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.76
        );

    font-size:
        14px;

    line-height:
        1.8;

}


/* =========================================================
   SOCIAL LINKS
========================================================= */

.api-footer-social {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        28px;

}


.api-footer-social a {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        40px;

    height:
        40px;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.14
        );

    border-radius:
        50%;

    color:
        rgba(
            255,
            255,
            255,
            0.75
        );

    background:
        rgba(
            255,
            255,
            255,
            0.04
        );

    font-size:
        0;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        all
        0.3s
        ease;

}


.api-footer-social a::before {

    content:
        "";

    font-size:
        12px;

    line-height:
        1;

    letter-spacing:
        0.01em;

}


.api-footer-social a:nth-child(1)::before {

    content:
        "f";

}


.api-footer-social a:nth-child(2)::before {

    content:
        "ig";

}


.api-footer-social a:nth-child(3)::before {

    content:
        "x";

}


.api-footer-social a:nth-child(4)::before {

    content:
        "yt";

}


.api-footer-social a:hover {

    color:
        #ffffff;

    background:
        #d42626;

    border-color:
        #d42626;

    transform:
        translateY(
            -3px
        );

}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

.api-footer-column {

    min-width:
        0;

}


.api-footer-column h3 {

    margin:
        0 0 25px;

    color:
        #ffffff;

    font-size:
        15px;

    font-weight:
        700;

}


.api-footer-column ul {

    display:
        flex;

    flex-direction:
        column;

    gap:
        13px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.api-footer-column li {

    margin:
        0;

    padding:
        0;

}


.api-footer-column li a {

    color:
        rgba(
            255,
            255,
            255,
            0.7
        );

    font-size:
        13px;

    text-decoration:
        none;

    transition:
        color
        0.3s
        ease,

        padding-left
        0.3s
        ease;

}


.api-footer-column li a:hover {

    padding-left:
        5px;

    color:
        #f5d36a;

}


/* =========================================================
   CONTACT
========================================================= */

.api-footer-contact li {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.api-footer-contact-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    width:
        30px;

    height:
        30px;

    border-radius:
        50%;

    color:
        #f5d36a;

    background:
        rgba(
            245,
            211,
            106,
            0.1
        );

    font-size:
        12px;

}


.api-footer-contact li > span:last-child {

    color:
        rgba(
            255,
            255,
            255,
            0.55
        );

    font-size:
        13px;

}


.api-footer-contact li a {

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


/* Donate button */

.api-footer-donate {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        25px;

    padding:
        12px
        18px;

    border:
        1px
        solid
        #d42626;

    border-radius:
        999px;

    color:
        #ffffff !important;

    background:
        #d42626;

    font-size:
        12px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        all
        0.3s
        ease;

}


.api-footer-donate:hover {

    color:
        #172235 !important;

    background:
        #f5d36a;

    border-color:
        #f5d36a;

    transform:
        translateY(
            -2px
        );

}


/* =========================================================
   NEWSLETTER
========================================================= */

.api-footer-newsletter {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    padding:
        35px
        0;

    border-top:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.09
        );

    border-bottom:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.09
        );

}


.api-footer-newsletter-label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        #f5d36a;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


.api-footer-newsletter-content h3 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        21px;

    font-weight:
        700;

}


/* Newsletter form */

.api-footer-newsletter-form {

    display:
        flex;

    width:
        100%;

    max-width:
        500px;

    padding:
        5px;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.15
        );

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            0.04
        );

}


.api-footer-newsletter-form input {

    flex:
        1;

    min-width:
        0;

    padding:
        12px
        18px;

    border:
        0;

    outline:
        none;

    color:
        #ffffff;

    background:
        transparent;

    font-family:
        inherit;

    font-size:
        13px;

}


.api-footer-newsletter-form input::placeholder {

    color:
        rgba(
            255,
            255,
            255,
            0.4
        );

}


.api-footer-newsletter-form button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    flex-shrink:
        0;

    padding:
        11px
        20px;

    border:
        0;

    border-radius:
        999px;

    color:
        #ffffff;

    background:
        #d42626;

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        all
        0.3s
        ease;

}


.api-footer-newsletter-form button:hover {

    color:
        #172235;

    background:
        #f5d36a;

}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.api-footer-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding-top:
        30px;

}


.api-footer-bottom p {

    margin:
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.4
        );

    font-size:
        12px;

}


.api-footer-legal {

    display:
        flex;

    align-items:
        center;

    gap:
        25px;

}


.api-footer-legal a {

    color:
        rgba(
            255,
            255,
            255,
            0.4
        );

    font-size:
        12px;

    text-decoration:
        none;

    transition:
        color
        0.3s
        ease;

}


.api-footer-legal a:hover {

    color:
        #f5d36a;

}


/* =========================================================
   SCREEN READER ONLY
========================================================= */

.api-sr-only {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(
            0,
            0,
            0,
            0
        );

    white-space:
        nowrap;

    border:
        0;

}


/* =========================================================
   FOOTER RESPONSIVE — TABLET
========================================================= */

@media (
    max-width:
    1024px
) {

    .api-footer {

        padding:
            75px
            0
            25px;

    }


    .api-footer-main {

        grid-template-columns:
            1.5fr
            1fr
            1fr;

        gap:
            50px;

    }


    .api-footer-brand {

        grid-column:
            span 3;

        max-width:
            550px;

    }


    .api-footer-newsletter {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            25px;

    }


    .api-footer-newsletter-form {

        max-width:
            100%;

    }

}


/* =========================================================
   FOOTER RESPONSIVE — MOBILE
========================================================= */

@media (
    max-width:
    767px
) {

    .api-footer {

        padding:
            65px
            20px
            25px;

    }


    .api-footer-main {

        grid-template-columns:
            1fr;

        gap:
            40px;

        padding-bottom:
            50px;

    }


    .api-footer-brand {

        grid-column:
            auto;

        max-width:
            100%;

    }


    .api-footer-logo img {

        max-width:
            170px;

    }


    .api-footer-newsletter {

        padding:
            30px
            0;

    }


    .api-footer-newsletter-form {

        flex-direction:
            column;

        gap:
            5px;

        padding:
            5px;

        border-radius:
            14px;

    }


    .api-footer-newsletter-form input {

        width:
            100%;

        padding:
            14px;

    }


    .api-footer-newsletter-form button {

        justify-content:
            center;

        width:
            100%;

    }


    .api-footer-bottom {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            20px;

    }


    .api-footer-legal {

        flex-wrap:
            wrap;

        gap:
            15px
            20px;

    }

}
/* =========================================================
   10 — READABILITY POLISH
========================================================= */

body .api-container {

    max-width:
        1200px;

}

.api-about-intro p,
.api-programs-description p,
.api-gallery-intro p,
.api-news-intro p,
.api-partners-intro p,
.api-cta-content p {

    font-size:
        16px;

    line-height:
        1.85;

}

.api-impact-intro p,
.api-impact-card p,
.api-program-content p,
.api-news-content p,
.api-footer-brand p,
.api-footer-column li a,
.api-footer-contact li > span:last-child {

    line-height:
        1.8;

}

.api-program-card,
.api-news-card {

    box-shadow:
        0
        16px
        40px
        rgba(
            23,
            34,
            53,
            0.08
        );

}

.api-program-card:hover,
.api-news-card:hover {

    box-shadow:
        0
        24px
        56px
        rgba(
            23,
            34,
            53,
            0.14
        );

}

.api-program-content h3,
.api-news-content h3 {

    letter-spacing:
        -0.02em;

}

.api-footer-social {

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        28px;

}

.api-footer-social a {

    width:
        42px;

    height:
        42px;

    font-size:
        13px;

}

.api-footer-contact li {

    align-items:
        flex-start;

}

.api-footer-contact li > span:last-child {

    line-height:
        1.7;

}

@media (
    max-width:
    767px
) {

    .api-about-intro p,
    .api-programs-description p,
    .api-gallery-intro p,
    .api-news-intro p,
    .api-partners-intro p,
    .api-cta-content p {

        font-size:
            15px;

    }


    .api-footer-social {

        gap:
            10px;

        justify-content:
            flex-start;

    }


    .api-footer-social a {

        width:
            40px;

        height:
            40px;

    }

}
/* =========================================================
   END OF ABILITY PLUS INITIATIVE V2 CSS
========================================================= */