/* =========================================================
   OLIVER RIDLEY
   SUPPORT PAGE
   GREEN / EMERALD EDITION

   SECTION 1 — SUPPORT HERO
   SECTION 2 — LIVE FUNDING
========================================================= */


/* =========================================================
   SUPPORT COLOUR SYSTEM
========================================================= */

:root {

    --support-green:
        #39ff88;

    --page-accent:
        #39ff88;

    --support-green-dark:
        #087a3c;

    --support-emerald:
        #063d25;

    --support-glow:
        rgba(57, 255, 136, 0.35);

    --support-glow-soft:
        rgba(57, 255, 136, 0.15);

    --support-white:
        #ffffff;

    --support-grey:
        #b8b8b8;

    --support-dark:
        #050505;

}


/* =========================================================
   GLOBAL SUPPORT BACKGROUND
========================================================= */

body.support-page {

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(0, 120, 60, 0.16),
            transparent 10%
        ),
        #050505;

}


/* =========================================================
   SECTION 1
   SUPPORT HERO
========================================================= */

.support-hero {

    min-height:
        calc(100vh - 90px);

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    padding:
        120px 30px
        140px;

    overflow:
        hidden;

}


/* =========================================================
   HERO GREEN ATMOSPHERE
========================================================= */

.support-hero-glow {

    position:
        absolute;

    width:
        750px;

    height:
        750px;

    left:
        50%;

    top:
        45%;

    transform:
        translate(-50%, -50%);

    background:
        radial-gradient(
            circle,

            rgba(57, 255, 136, 0.28)
            0%,

            rgba(0, 150, 75, 0.16)
            35%,

            transparent
            70%
        );

    filter:
        blur(35px);

    pointer-events:
        none;

    animation:
        supportGlow
        7s ease-in-out infinite;

}


/* =========================================================
   HERO CONTENT
========================================================= */

.support-hero-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        1100px;

    margin:
        0 auto;

}


/* =========================================================
   EYEBROW
========================================================= */

.support-eyebrow {

    margin:
        0 0 20px;

    color:
        var(--support-green);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.1rem;

    font-weight:
        600;

    letter-spacing:
        5px;

    text-transform:
        uppercase;

}


/* =========================================================
   MAIN TITLE
========================================================= */

.support-title {

    margin:
        0;

    color:
        var(--support-white);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        clamp(
            4rem,
            11vw,
            9.5rem
        );

    font-weight:
        500;

    letter-spacing:
        8px;

    line-height:
        0.9;

    text-shadow:
        0 0 30px
        rgba(57, 255, 136, 0.12);

}


/* =========================================================
   TITLE LINE
========================================================= */

.support-title-line {

    width:
        90px;

    height:
        2px;

    margin:
        35px auto 28px;

    background:
        var(--support-green);

    box-shadow:
        0 0 18px
        var(--support-green);

}


/* =========================================================
   TAGLINE
========================================================= */

.support-tagline {

    margin:
        0 0 20px;

    color:
        var(--support-white);

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.8rem
        );

    font-weight:
        500;

    letter-spacing:
        2px;

}


.support-tagline strong {

    color:
        var(--support-green);

    font-weight:
        500;

}


/* =========================================================
   HERO INTRO
========================================================= */

.support-intro {

    max-width:
        650px;

    margin:
        0 auto;

    color:
        var(--support-grey);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.3rem;

    font-weight:
        300;

    line-height:
        1.9;

}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.support-scroll {

    display:
        inline-flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        60px;

    color:
        var(--support-grey);

    text-decoration:
        none;

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        0.65rem;

    font-weight:
        500;

    letter-spacing:
        3px;

    transition:
        0.35s ease;

}


.support-scroll i {

    color:
        var(--support-green);

    font-size:
        1rem;

    animation:
        supportScrollArrow
        2s ease-in-out infinite;

}


.support-scroll:hover {

    color:
        var(--support-green);

    transform:
        translateY(4px);

}


/* =========================================================
   SECTION 2
   LIVE FUNDING
========================================================= */

.live-funding-section {

    position:
        relative;

    max-width:
        1450px;

    margin:
        0 auto;

    padding:
        130px 40px
        160px;

}


/* =========================================================
   LIVE FUNDING HEADING
========================================================= */

.live-funding-heading {

    max-width:
        850px;

    margin:
        0 auto 75px;

    text-align:
        center;

}


.live-funding-heading .section-label {

    margin:
        0 0 20px;

    color:
        var(--support-green);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1rem;

    font-weight:
        600;

    letter-spacing:
        5px;

    text-transform:
        uppercase;

}


.live-funding-heading h2 {

    margin:
        0 0 25px;

    color:
        var(--support-white);

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        clamp(
            4rem,
            8vw,
            7rem
        );

    font-weight:
        500;

    line-height:
        0.9;

}


.live-funding-heading h2 span {

    color:
        var(--support-green);

}


.live-funding-heading p:last-child {

    max-width:
        650px;

    margin:
        0 auto;

    color:
        var(--support-grey);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.23rem;

    font-weight:
        300;

    line-height:
        1.8;

}


/* =========================================================
   LIVE FUNDING CARD
   WHOLE CARD IS CLICKABLE
========================================================= */

.live-funding-card {

    position:
        relative;

    display:
        block;

    max-width:
        1250px;

    margin:
        0 auto;

    padding:
        70px;

    overflow:
        hidden;

    background:
        rgba(15, 15, 15, 0.78);

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

    border-radius:
        30px;

    backdrop-filter:
        blur(20px);

    text-decoration:
        none;

    color:
        inherit;

    cursor:
        pointer;

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

}


.live-funding-card:hover {

    transform:
        translateY(-10px);

    border-color:
        rgba(57, 255, 136, 0.70);

    box-shadow:

        0 30px 80px
        rgba(0, 0, 0, 0.60),

        0 0 55px
        rgba(57, 255, 136, 0.14);

}


/* =========================================================
   FUNDING ATMOSPHERIC GLOW
========================================================= */

.live-funding-glow {

    position:
        absolute;

    width:
        650px;

    height:
        650px;

    top:
        -320px;

    left:
        -250px;

    background:
        radial-gradient(
            circle,
            rgba(57, 255, 136, 0.18),
            transparent 70%
        );

    filter:
        blur(35px);

    pointer-events:
        none;

    transition:
        0.6s ease;

}


.live-funding-card:hover
.live-funding-glow {

    transform:
        scale(1.2);

    opacity:
        1;

}


/* =========================================================
   FUNDING CONTENT
========================================================= */

.live-funding-content {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        1.2fr
        0.8fr;

    gap:
        70px;

    align-items:
        center;

}


/* =========================================================
   LIVE STATUS
========================================================= */

.live-funding-status {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin:
        0 0 25px;

    color:
        var(--support-green);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        0.72rem;

    font-weight:
        600;

    letter-spacing:
        3px;

    text-transform:
        uppercase;

}


.live-funding-status::before {

    content:
        "";

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--support-green);

    box-shadow:
        0 0 14px
        var(--support-green);

    animation:
        livePulse
        2s ease-in-out infinite;

}


/* =========================================================
   FUNDING TITLE
========================================================= */

.live-funding-main h3 {

    margin:
        0 0 20px;

    color:
        var(--support-white);

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        clamp(
            3rem,
            6vw,
            5.5rem
        );

    font-weight:
        500;

    line-height:
        0.95;

}


.live-funding-main h3 span {

    color:
        var(--support-green);

}


/* =========================================================
   FUNDING DIVIDER
========================================================= */

.live-funding-divider {

    width:
        80px;

    height:
        1px;

    margin:
        32px 0;

    background:
        var(--support-green);

    box-shadow:
        0 0 15px
        rgba(57, 255, 136, 0.40);

}


/* =========================================================
   FUNDING DESCRIPTION
========================================================= */

.live-funding-description {

    max-width:
        650px;

    margin:
        0;

    color:
        var(--support-grey);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        1.15rem;

    font-weight:
        300;

    line-height:
        1.8;

}


/* =========================================================
   SUPPORT THE JOURNEY
========================================================= */

.live-funding-click {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        35px;

    color:
        var(--support-green);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        0.68rem;

    font-weight:
        600;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

    transition:
        0.35s ease;

}


.live-funding-click i {

    transition:
        0.35s ease;

}


.live-funding-card:hover
.live-funding-click {

    color:
        white;

}


.live-funding-card:hover
.live-funding-click i {

    transform:
        translateX(6px);

}


/* =========================================================
   LIVE FUNDING DISPLAY
========================================================= */

.live-funding-display {

    position:
        relative;

    z-index:
        2;

    padding:
        40px 35px;

    background:
        rgba(0, 0, 0, 0.30);

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

    border-radius:
        24px;

    text-align:
        center;

    transition:
        0.5s ease;

}


.live-funding-card:hover
.live-funding-display {

    border-color:
        rgba(57, 255, 136, 0.55);

    box-shadow:
        0 0 35px
        rgba(57, 255, 136, 0.10);

}


/* =========================================================
   DISPLAY LABEL
========================================================= */

.live-funding-display-label {

    display:
        block;

    margin:
        0 0 12px;

    color:
        var(--support-green);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        0.72rem;

    font-weight:
        600;

    letter-spacing:
        3px;

    text-transform:
        uppercase;

}


/* =========================================================
   MONEY
========================================================= */

.live-funding-raised {

    display:
        block;

    margin:
        0;

    color:
        white;

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        clamp(
            3.2rem,
            6vw,
            5.5rem
        );

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        -2px;

    text-shadow:
        0 0 25px
        rgba(57, 255, 136, 0.15);

}


/* =========================================================
   GOAL
========================================================= */

.live-funding-goal {

    margin:
        10px 0 30px;

    color:
        var(--support-grey);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        0.8rem;

    font-weight:
        400;

    letter-spacing:
        2px;

}


/* =========================================================
   PROGRESS BAR
========================================================= */

.live-funding-progress {

    width:
        100%;

    height:
        5px;

    margin:
        0 0 15px;

    overflow:
        hidden;

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

    border-radius:
        999px;

}


.live-funding-progress-fill {

    width:
        0%;

    height:
        100%;

    background:
        var(--support-green);

    border-radius:
        inherit;

    box-shadow:
        0 0 15px
        rgba(57, 255, 136, 0.55);

    transition:
        width 1s ease;

}


/* =========================================================
   REMAINING
========================================================= */

.live-funding-remaining {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

}


.live-funding-remaining span {

    color:
        var(--support-grey);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        0.65rem;

    font-weight:
        500;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}


.live-funding-remaining strong {

    color:
        white;

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        0.9rem;

    font-weight:
        500;

}


/* =========================================================
   NOTE
========================================================= */

.live-funding-note {

    max-width:
        650px;

    margin:
        45px auto 0;

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

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        0.75rem;

    font-weight:
        300;

    line-height:
        1.7;

    text-align:
        center;

}


/* =========================================================
   ANIMATION — HERO GLOW
========================================================= */

@keyframes supportGlow {

    0%,
    100% {

        transform:
            translate(-50%, -50%)
            scale(1);

        opacity:
            0.75;

    }

    50% {

        transform:
            translate(-50%, -50%)
            scale(1.12);

        opacity:
            1;

    }

}


/* =========================================================
   ANIMATION — SCROLL
========================================================= */

@keyframes supportScrollArrow {

    0%,
    100% {

        transform:
            translateY(0);

        opacity:
            0.6;

    }

    50% {

        transform:
            translateY(7px);

        opacity:
            1;

    }

}


/* =========================================================
   ANIMATION — LIVE DOT
========================================================= */

@keyframes livePulse {

    0%,
    100% {

        transform:
            scale(1);

        opacity:
            0.6;

    }

    50% {

        transform:
            scale(1.35);

        opacity:
            1;

    }

}


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

@media (max-width: 1000px) {

    .support-hero {

        padding:
            100px 25px
            120px;

    }


    .live-funding-section {

        padding:
            110px 25px
            130px;

    }


    .live-funding-card {

        padding:
            55px 45px;

    }


    .live-funding-content {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .support-hero {

        min-height:
            calc(100vh - 70px);

        padding:
            90px 20px
            100px;

    }


    .support-title {

        font-size:
            clamp(
                3.3rem,
                15vw,
                5.5rem
            );

        letter-spacing:
            4px;

    }


    .support-tagline {

        font-size:
            1.7rem;

    }


    .support-intro {

        font-size:
            0.9rem;

    }


    .live-funding-section {

        padding:
            90px 20px
            110px;

    }


    .live-funding-heading {

        margin-bottom:
            50px;

    }


    .live-funding-heading h2 {

        font-size:
            4rem;

    }


    .live-funding-heading p:last-child {

        font-size:
            0.95rem;

    }


    .live-funding-card {

        padding:
            35px 25px;

        border-radius:
            24px;

    }


    .live-funding-main h3 {

        font-size:
            3.2rem;

    }


    .live-funding-description {

        font-size:
            0.95rem;

    }


    .live-funding-display {

        padding:
            35px 25px;

    }


    .live-funding-raised {

        font-size:
            3.4rem;

    }


    .live-funding-remaining {

        flex-direction:
            column;

        align-items:
            center;

    }

}/* =========================================================
SECTION 4
WHERE YOUR SUPPORT GOES
GREEN EDITION
========================================================= */

.support-goes {

 position: relative;

max-width: 1450px;

margin: 0 auto;

padding:
    150px 40px
    170px;

overflow: hidden;
 
}

/* =========================================================
ATMOSPHERIC GLOW
========================================================= */

.support-goes-glow {

 position: absolute;

width: 800px;
height: 800px;

top: 50%;
left: 50%;

transform:
    translate(-50%, -50%);

background:
    radial-gradient(
        circle,
        rgba(82, 255, 154, 0.09),
        rgba(20, 120, 65, 0.05) 40%,
        transparent 70%
    );

filter:
    blur(50px);

pointer-events: none;

animation:
    supportGoesGlow 9s ease-in-out infinite;
 
}

/* =========================================================
HEADING
========================================================= */

.support-goes-heading {

 position: relative;

z-index: 2;

max-width: 850px;

margin:
    0 auto 85px;

text-align: center;
 
}

.support-goes-heading h2 {

 margin:
    0 0 28px;

color: #ffffff;

font-family:
    'Cormorant Garamond',
    serif;

font-size:
    clamp(
        4rem,
        8vw,
        7rem
    );

font-weight: 500;

line-height: 0.88;
 
}

.support-goes-heading h2 span {

 display: block;

color: #52ff9a;

text-shadow:
    0 0 25px
    rgba(82, 255, 154, 0.15);
 
}

.support-goes-heading > p:last-child {

 max-width: 650px;

margin: 0 auto;

color: #b8b8b8;

font-family:
    'Montserrat',
    sans-serif;

font-size: 1.2rem;

font-weight: 300;

line-height: 1.85;
 
}

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

.support-goes-grid {

 position: relative;

z-index: 2;

display: grid;

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

gap: 35px;

max-width: 1250px;

margin: 0 auto;
 
}

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

.support-goes-card {

 position: relative;

min-height: 370px;

display: flex;

flex-direction: column;

justify-content: space-between;

padding: 42px;

overflow: hidden;

color: inherit;

text-decoration: none;

background:
    rgba(14, 18, 16, 0.78);

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

border-radius: 25px;

backdrop-filter:
    blur(18px);

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

.support-goes-card::before {

 content: "";

position: absolute;

width: 350px;
height: 350px;

top: -180px;
right: -160px;

background:
    radial-gradient(
        circle,
        rgba(82, 255, 154, 0.13),
        transparent 70%
    );

filter:
    blur(30px);

opacity: 0.6;

pointer-events: none;

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

.support-goes-card:hover {

 transform:
    translateY(-10px);

border-color:
    rgba(82, 255, 154, 0.72);

background:
    rgba(17, 24, 20, 0.85);

box-shadow:
    0 30px 75px
    rgba(0, 0, 0, 0.55),

    0 0 45px
    rgba(82, 255, 154, 0.11);
 
}

.support-goes-card:hover::before {

 transform:
    scale(1.3);

opacity: 1;
 
}

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

.support-goes-icon {

 position: relative;

z-index: 2;

width: 65px;
height: 65px;

display: flex;

align-items: center;

justify-content: center;

border:
    1px solid
    rgba(82, 255, 154, 0.45);

border-radius: 50%;

background:
    rgba(40, 150, 80, 0.10);

color: #52ff9a;

font-size: 1.25rem;

box-shadow:
    0 0 25px
    rgba(82, 255, 154, 0.08);

transition:
    transform 0.45s ease,
    background 0.45s ease,
    box-shadow 0.45s ease;
 
}

.support-goes-card:hover
.support-goes-icon {

 transform:
    translateY(-4px)
    scale(1.05);

background:
    rgba(82, 255, 154, 0.15);

box-shadow:
    0 0 30px
    rgba(82, 255, 154, 0.16);
 
}

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

.support-goes-card-content {

 position: relative;

z-index: 2;
 
}

/* =========================================================
NUMBER
========================================================= */

.support-goes-number {

 display: block;

margin-bottom: 12px;

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

font-family:
    'Montserrat',
    sans-serif;

font-size: 0.65rem;

font-weight: 600;

letter-spacing: 3px;
 
}

/* =========================================================
TITLE
========================================================= */

.support-goes-card h3 {

 margin:
    0 0 18px;

color: #ffffff;

font-family:
    'Cormorant Garamond',
    serif;

font-size:
    clamp(
        2.5rem,
        4vw,
        3.5rem
    );

font-weight: 500;

line-height: 0.95;

transition:
    color 0.4s ease;
 
}

.support-goes-card:hover h3 {

 color:
    #52ff9a;
 
}

/* =========================================================
DESCRIPTION
========================================================= */

.support-goes-card p {

 max-width: 500px;

margin: 0;

color: #b8b8b8;

font-family:
    'Montserrat',
    sans-serif;

font-size: 1rem;

font-weight: 300;

line-height: 1.8;
 
}

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

.support-goes-link {

 display: inline-flex;

align-items: center;

margin-top: 28px;

color: #52ff9a;

font-family:
    'Montserrat',
    sans-serif;

font-size: 0.65rem;

font-weight: 600;

letter-spacing: 2px;

transition:
    transform 0.4s ease,
    color 0.4s ease;
 
}

.support-goes-card:hover
.support-goes-link {

 color: #ffffff;

transform:
    translateX(6px);
 
}

/* =========================================================
GLOW ANIMATION
========================================================= */

@keyframes supportGoesGlow {

 0%,
100% {

    transform:
        translate(-50%, -50%)
        scale(1);

    opacity: 0.55;
}

50% {

    transform:
        translate(-50%, -50%)
        scale(1.12);

    opacity: 0.9;
}
 
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 900px) {

 .support-goes {

    padding:
        110px 25px
        130px;
}

.support-goes-grid {

    grid-template-columns:
        1fr;
}
 
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 600px) {

 .support-goes {

    padding:
        90px 20px
        110px;
}

.support-goes-heading {

    margin-bottom:
        60px;
}

.support-goes-heading h2 {

    font-size:
        clamp(
            3.5rem,
            15vw,
            5rem
        );
}

.support-goes-heading > p:last-child {

    font-size:
        0.95rem;
}

.support-goes-card {

    min-height: 350px;

    padding: 32px;
}

.support-goes-card h3 {

    font-size: 2.7rem;
}

.support-goes-card p {

    font-size: 0.92rem;
}
 
}
/* =========================================================
SECTION 5
MORE WAYS TO SUPPORT
GREEN EDITION
========================================================= */

.support-options {

 position: relative;

max-width: 1450px;

margin: 0 auto;

padding:
    150px 40px
    170px;

overflow: hidden;
 
}

/* =========================================================
ATMOSPHERIC GLOW
========================================================= */

.support-options-glow {

 position: absolute;

width: 850px;
height: 850px;

top: 50%;
right: -350px;

transform:
    translateY(-50%);

background:
    radial-gradient(
        circle,
        rgba(82, 255, 154, 0.10),
        rgba(30, 130, 70, 0.05) 40%,
        transparent 70%
    );

filter:
    blur(50px);

pointer-events: none;

animation:
    supportOptionsGlow 10s ease-in-out infinite;
 
}

/* =========================================================
HEADING
========================================================= */

.support-options-heading {

 position: relative;

z-index: 2;

max-width: 850px;

margin:
    0 auto 85px;

text-align: center;
 
}

.support-options-heading h2 {

 margin:
    0 0 28px;

color: #ffffff;

font-family:
    'Cormorant Garamond',
    serif;

font-size:
    clamp(
        4rem,
        8vw,
        7rem
    );

font-weight: 500;

line-height: 0.88;
 
}

.support-options-heading h2 span {

 display: block;

color: #52ff9a;

text-shadow:
    0 0 25px
    rgba(82, 255, 154, 0.15);
 
}

.support-options-heading > p:last-child {

 max-width: 650px;

margin: 0 auto;

color: #b8b8b8;

font-family:
    'Montserrat',
    sans-serif;

font-size: 1.2rem;

font-weight: 300;

line-height: 1.85;
 
}

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

.support-options-grid {

 position: relative;

z-index: 2;

display: grid;

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

gap: 35px;

max-width: 1250px;

margin: 0 auto;
 
}

/* =========================================================
SUPPORT OPTION
========================================================= */

.support-option {

 position: relative;

min-height: 390px;

display: flex;

flex-direction: column;

justify-content: space-between;

padding: 42px;

overflow: hidden;

color: inherit;

text-decoration: none;

background:
    rgba(14, 18, 16, 0.78);

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

border-radius: 25px;

backdrop-filter:
    blur(18px);

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

/* =========================================================
CARD ATMOSPHERE
========================================================= */

.support-option::before {

 content: "";

position: absolute;

width: 400px;
height: 400px;

top: -220px;
left: -180px;

background:
    radial-gradient(
        circle,
        rgba(82, 255, 154, 0.12),
        transparent 70%
    );

filter:
    blur(30px);

opacity: 0.55;

pointer-events: none;

transition:
    transform 0.8s ease,
    opacity 0.8s ease;
 
}

.support-option:hover {

 transform:
    translateY(-10px);

border-color:
    rgba(82, 255, 154, 0.72);

background:
    rgba(17, 24, 20, 0.86);

box-shadow:
    0 30px 75px
    rgba(0, 0, 0, 0.55),

    0 0 45px
    rgba(82, 255, 154, 0.11);
 
}

.support-option:hover::before {

 transform:
    scale(1.3);

opacity: 1;
 
}

/* =========================================================
FEATURED GOFUNDME CARD
========================================================= */

.support-option-featured {

 border-color:
    rgba(82, 255, 154, 0.25);

background:
    rgba(18, 28, 21, 0.80);
 
}

.support-option-featured::after {

 content: "";

position: absolute;

inset: 0;

border-radius: 25px;

background:
    linear-gradient(
        135deg,
        rgba(82, 255, 154, 0.045),
        transparent 45%
    );

pointer-events: none;
 
}

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

.support-option-icon {

 position: relative;

z-index: 2;

width: 65px;
height: 65px;

display: flex;

align-items: center;

justify-content: center;

border:
    1px solid
    rgba(82, 255, 154, 0.45);

border-radius: 50%;

background:
    rgba(40, 150, 80, 0.10);

color:
    #52ff9a;

font-size: 1.25rem;

transition:
    transform 0.45s ease,
    background 0.45s ease,
    box-shadow 0.45s ease;
 
}

.support-option:hover
.support-option-icon {

 transform:
    translateY(-4px)
    scale(1.05);

background:
    rgba(82, 255, 154, 0.15);

box-shadow:
    0 0 30px
    rgba(82, 255, 154, 0.16);
 
}

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

.support-option-content {

 position: relative;

z-index: 2;
 
}

/* =========================================================
NUMBER
========================================================= */

.support-option-number {

 display: block;

margin-bottom: 12px;

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

font-family:
    'Montserrat',
    sans-serif;

font-size: 0.65rem;

font-weight: 600;

letter-spacing: 3px;
 
}

/* =========================================================
TITLE
========================================================= */

.support-option h3 {

 margin:
    0 0 18px;

color: #ffffff;

font-family:
    'Cormorant Garamond',
    serif;

font-size:
    clamp(
        2.5rem,
        4vw,
        3.5rem
    );

font-weight: 500;

line-height: 0.95;

transition:
    color 0.4s ease;
 
}

.support-option:hover h3 {

 color:
    #52ff9a;
 
}

/* =========================================================
DESCRIPTION
========================================================= */

.support-option p {

 max-width: 500px;

margin: 0;

color: #b8b8b8;

font-family:
    'Montserrat',
    sans-serif;

font-size: 1rem;

font-weight: 300;

line-height: 1.8;
 
}

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

.support-option-link {

 display: inline-flex;

align-items: center;

gap: 10px;

margin-top: 28px;

color:
    #52ff9a;

font-family:
    'Montserrat',
    sans-serif;

font-size: 0.65rem;

font-weight: 600;

letter-spacing: 2px;

transition:
    transform 0.4s ease,
    color 0.4s ease;
 
}

.support-option-link i {

 transition:
    transform 0.4s ease;
 
}

.support-option:hover
.support-option-link {

 color: #ffffff;

transform:
    translateX(5px);
 
}

.support-option:hover
.support-option-link i {

 transform:
    translateX(5px);
 
}

/* =========================================================
ANIMATION
========================================================= */

@keyframes supportOptionsGlow {

 0%,
100% {

    transform:
        translateY(-50%)
        scale(1);

    opacity: 0.55;
}

50% {

    transform:
        translateY(-50%)
        scale(1.12);

    opacity: 0.9;
}
 
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 900px) {

 .support-options {

    padding:
        110px 25px
        130px;
}

.support-options-grid {

    grid-template-columns:
        1fr;
}
 
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 600px) {

 .support-options {

    padding:
        90px 20px
        110px;
}

.support-options-heading {

    margin-bottom:
        60px;
}

.support-options-heading h2 {

    font-size:
        clamp(
            3.5rem,
            15vw,
            5rem
        );
}

.support-options-heading > p:last-child {

    font-size:
        0.95rem;
}

.support-option {

    min-height: 350px;

    padding: 32px;
}

.support-option h3 {

    font-size: 2.7rem;
}

.support-option p {

    font-size: 0.92rem;
}
 
}
/* =========================================================
SECTION 6
THANK YOU
GREEN EDITION
========================================================= */

.support-thank-you {

 position: relative;

min-height: 80vh;

display: flex;

align-items: center;

justify-content: center;

padding:
    150px 30px;

overflow: hidden;

text-align: center;
 
}

/* =========================================================
ATMOSPHERIC GLOW
========================================================= */

.support-thank-you-glow {

 position: absolute;

width: 900px;
height: 900px;

top: 50%;
left: 50%;

transform:
    translate(-50%, -50%);

background:
    radial-gradient(
        circle,
        rgba(82, 255, 154, 0.16),
        rgba(30, 130, 70, 0.08) 35%,
        transparent 70%
    );

filter:
    blur(45px);

pointer-events: none;

animation:
    thankYouGlow 9s ease-in-out infinite;
 
}

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

.support-thank-you-content {

 position: relative;

z-index: 2;

max-width: 900px;

margin: 0 auto;
 
}

/* =========================================================
EYEBROW
========================================================= */

.support-thank-you-content
.support-section-eyebrow {

 margin-bottom: 25px;
 
}

/* =========================================================
MAIN HEADING
========================================================= */

.support-thank-you-content h2 {

 margin: 0;

color: #ffffff;

font-family:
    'Cormorant Garamond',
    serif;

font-size:
    clamp(
        4rem,
        9vw,
        8rem
    );

font-weight: 500;

line-height: 0.86;

letter-spacing: 1px;
 
}

.support-thank-you-content h2 span {

 display: block;

color:
    #52ff9a;

text-shadow:
    0 0 30px
    rgba(82, 255, 154, 0.14);
 
}

/* =========================================================
LINE
========================================================= */

.support-thank-you-line {

 width: 100px;

height: 2px;

margin:
    42px auto 35px;

background:
    #52ff9a;

box-shadow:
    0 0 20px
    rgba(82, 255, 154, 0.45);
 
}

/* =========================================================
TEXT
========================================================= */

.support-thank-you-text {

 max-width: 620px;

margin:
    0 auto 18px;

color:
    #b8b8b8;

font-family:
    'Montserrat',
    sans-serif;

font-size: 1rem;

font-weight: 300;

line-height: 1.9;
 
}

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

.support-thank-you-button {

 display: inline-flex;

align-items: center;

gap: 15px;

margin-top: 32px;

padding:
    18px 32px;

color: #ffffff;

border:
    1px solid
    #52ff9a;

border-radius: 999px;

background:
    rgba(45, 150, 85, 0.15);

backdrop-filter:
    blur(12px);

text-decoration: none;

font-family:
    'Montserrat',
    sans-serif;

font-size: 0.7rem;

font-weight: 600;

letter-spacing: 2px;

transition:
    transform 0.45s ease,
    background 0.45s ease,
    box-shadow 0.45s ease;
 
}

.support-thank-you-button i {

 color:
    #52ff9a;

transition:
    transform 0.4s ease;
 
}

.support-thank-you-button:hover {

 transform:
    translateY(-5px);

background:
    #52ff9a;

color:
    #050505;

box-shadow:
    0 15px 45px
    rgba(82, 255, 154, 0.25);
 
}

.support-thank-you-button:hover i {

 color:
    #050505;

transform:
    translateX(6px);
 
}

/* =========================================================
SIGN OFF
========================================================= */

.support-thank-you-signoff {

 margin-top: 65px;

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

font-family:
    'Shadows Into Light',
    cursive;

font-size: 1.4rem;

letter-spacing: 1px;
 
}

/* =========================================================
GLOW ANIMATION
========================================================= */

@keyframes thankYouGlow {

 0%,
100% {

    transform:
        translate(-50%, -50%)
        scale(1);

    opacity: 0.60;
}

50% {

    transform:
        translate(-50%, -50%)
        scale(1.12);

    opacity: 0.95;
}
 
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 700px) {

 .support-thank-you {

    min-height: 80vh;

    padding:
        110px 20px;
}

.support-thank-you-content h2 {

    font-size:
        clamp(
            3.5rem,
            14vw,
            5.5rem
        );
}

.support-thank-you-text {

    font-size:
        0.9rem;
}

.support-thank-you-signoff {

    font-size:
        1.2rem;
}
 
}