/* =========================================================
   AFRO KANTAB FESTIVAL
   COMPLETE STYLESHEET
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --burgundy: #581924;

    --brown: #270D00;

    --gold: #CEC061;

    --white: #ffffff;

    --cream: #faf7f1;

    --text: #281914;

    --muted: #766a64;

    --border: rgba(39,13,0,.14);

    --heading:
        'Paytone One',
        sans-serif;

    --body:
        'Poppins',
        sans-serif;

    --shadow:
        0 20px 50px rgba(39,13,0,.12);

}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;

    scroll-padding-top: 90px;
}


body {

    font-family: var(--body);

    color: var(--text);

    background:
        var(--white);

    line-height: 1.7;

    overflow-x: hidden;

}


img {

    max-width: 100%;

    display: block;

}


a {

    text-decoration: none;

    color: inherit;

}


button,
input,
textarea {

    font-family: inherit;

}


button {

    cursor: pointer;

}


.container {

    width:
        min(
            1160px,
            calc(100% - 44px)
        );

    margin-inline: auto;

}


.section-padding {

    padding:
        100px 0;

}


/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {

    font-family: var(--heading);

    font-weight: 400;

    line-height: 1.12;

    letter-spacing: -.025em;

}


h1 {

    font-size:
        clamp(
            2.8rem,
            7vw,
            6rem
        );

}


h2 {

    font-size:
        clamp(
            2rem,
            4.4vw,
            3.8rem
        );

}


h3 {

    font-size:
        1.35rem;

}


p {

    margin-bottom: 18px;

}


.eyebrow {

    color:
        var(--gold);

    font-size:
        .73rem;

    font-weight:
        700;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;

    margin-bottom:
        17px;

}


.eyebrow-dark {

    color:
        var(--burgundy);

}


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

.button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    min-height:
        51px;

    padding:
        13px 24px;

    border:
        1px solid transparent;

    border-radius:
        4px;

    font-size:
        .84rem;

    font-weight:
        700;

    transition:
        .25s ease;

}


.button:hover {

    transform:
        translateY(-3px);

}


.button-gold {

    background:
        var(--gold);

    color:
        var(--brown);

}


.button-gold:hover {

    background:
        #dfd47c;

}


.button-outline {

    border-color:
        rgba(255,255,255,.75);

    color:
        var(--white);

}


.button-outline:hover {

    background:
        var(--white);

    color:
        var(--brown);

}


.button-dark {

    background:
        var(--brown);

    color:
        var(--white);

}


.button-dark:hover {

    background:
        var(--burgundy);

}


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

.site-header {

    position:
        sticky;

    top:
        0;

    z-index:
        100;

    background:
        rgba(39,13,0,.97);

    backdrop-filter:
        blur(12px);

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

}


.nav-container {

    min-height:
        88px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

}


.logo {

    display:
        flex;

    align-items:
        center;

}


.logo img {

    max-width:
        185px;

    max-height:
        65px;

    width:
        auto;

    object-fit:
        contain;

}


.logo-fallback {

    color:
        var(--white);

    font-family:
        var(--heading);

    font-size:
        1.25rem;

}


.logo-fallback strong {

    color:
        var(--gold);

    font-weight:
        400;

}


.main-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        clamp(
            15px,
            2.1vw,
            30px
        );

}


.main-nav > a {

    color:
        rgba(255,255,255,.85);

    font-size:
        .81rem;

    font-weight:
        500;

    position:
        relative;

}


.main-nav > a:not(.nav-donate)::after {

    content:
        '';

    position:
        absolute;

    left:
        0;

    bottom:
        -7px;

    width:
        0;

    height:
        2px;

    background:
        var(--gold);

    transition:
        width .25s ease;

}


.main-nav > a:hover::after,
.main-nav > a.active::after {

    width:
        100%;

}


.nav-donate {

    background:
        var(--gold);

    color:
        var(--brown) !important;

    padding:
        10px 17px;

    border-radius:
        4px;

}


.nav-donate:hover {

    background:
        #dfd47c;

}


.menu-toggle {

    display:
        none;

    border:
        0;

    background:
        transparent;

}


.menu-toggle span {

    display:
        block;

    width:
        27px;

    height:
        2px;

    background:
        white;

    margin:
        5px;

}


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

.hero {

    min-height:
        720px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    color:
        white;

    position:
        relative;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 50% 10%,
            #581924 0%,
            transparent 42%
        ),

        linear-gradient(
            135deg,
            #270D00,
            #581924,
            #270D00
        );

}


.hero[style] {

    background-image:

        linear-gradient(
            90deg,
            rgba(39,13,0,.90),
            rgba(88,25,36,.78),
            rgba(39,13,0,.87)
        ),

        var(--hero-image);

    background-size:
        cover;

    background-position:
        center;

}


.hero-overlay {

    position:
        absolute;

    inset:
        0;

    background:

        radial-gradient(
            circle at center,
            transparent 0%,
            rgba(0,0,0,.25) 100%
        );

}


.hero-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        950px;

    padding:
        100px 0;

}


.hero-title {

    max-width:
        900px;

    margin:
        0 auto;

}


.hero-title span {

    color:
        var(--gold);

}


.hero-description {

    max-width:
        680px;

    margin:
        28px auto;

    color:
        rgba(255,255,255,.82);

    font-size:
        1rem;

}


.hero-buttons {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        13px;

}


.hero-decoration {

    position:
        absolute;

    width:
        450px;

    height:
        450px;

    border:
        1px solid
        rgba(206,192,97,.12);

    border-radius:
        50%;

    right:
        -180px;

    bottom:
        -200px;

}


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

.intro-section {

    background:
        var(--cream);

}


.intro-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        10%;

    align-items:
        center;

}


.intro-grid h2 {

    color:
        var(--brown);

    max-width:
        540px;

}


.intro-text {

    color:
        var(--muted);

    max-width:
        560px;

}


.text-link {

    display:
        inline-flex;

    gap:
        12px;

    align-items:
        center;

    color:
        var(--burgundy);

    font-weight:
        700;

    font-size:
        .87rem;

}


.text-link span {

    transition:
        .25s ease;

}


.text-link:hover span {

    transform:
        translateX(5px);

}


/* =========================================================
   EVENTS
========================================================= */

.events-section {

    background:
        var(--brown);

    color:
        white;

}


.section-heading {

    text-align:
        center;

    max-width:
        700px;

    margin:
        0 auto 50px;

}


.section-heading h2 {

    margin-bottom:
        14px;

}


.section-heading > p:last-child {

    color:
        rgba(255,255,255,.68);

}


.event-grid {

    display:
        grid;

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

    gap:
        20px;

}


.event-card {

    background:
        white;

    color:
        var(--text);

    border-radius:
        6px;

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.event-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 25px 55px rgba(0,0,0,.25);

}


.event-image {

    height:
        235px;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            var(--burgundy),
            var(--brown)
        );

}


.event-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .6s ease;

}


.event-card:hover
.event-image img {

    transform:
        scale(1.07);

}


.event-image.placeholder {

    display:
        grid;

    place-items:
        center;

    color:
        var(--gold);

    font-family:
        var(--heading);

}


.event-content {

    padding:
        24px 21px 27px;

    flex:
        1;

}


.event-content h3 {

    color:
        var(--burgundy);

    margin-bottom:
        10px;

}


.event-content p {

    color:
        var(--muted);

    font-size:
        .83rem;

    margin:
        0;

}


/* =========================================================
   MORE THAN A FESTIVAL
========================================================= */

.community-section {

    min-height:
        650px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    color:
        white;

    background:

        linear-gradient(
            135deg,
            #270D00,
            #581924
        );

    background-image:

        linear-gradient(
            90deg,
            rgba(39,13,0,.93),
            rgba(88,25,36,.74),
            rgba(39,13,0,.88)
        ),

        var(--community-image);

    background-size:
        cover;

    background-position:
        center;

    overflow:
        hidden;

}


.community-overlay {

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            180deg,
            rgba(39,13,0,.20),
            rgba(39,13,0,.35)
        );

}


.community-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        850px;

}


.community-content h2 {

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

}


.community-content h2 span {

    color:
        var(--gold);

}


.community-description {

    max-width:
        650px;

    color:
        rgba(255,255,255,.80);

    font-size:
        1rem;

    margin:
        25px 0 30px;

}


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

.gallery-section {

    background:
        var(--cream);

}


.gallery-section
.section-heading {

    margin-bottom:
        40px;

}


.gallery-section
.section-heading h2 {

    color:
        var(--brown);

}


.gallery-section
.section-heading > p:last-child {

    color:
        var(--muted);

}


.gallery-grid {

    display:
        grid;

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

    gap:
        15px;

}


.gallery-item {

    border:
        0;

    padding:
        0;

    overflow:
        hidden;

    background:
        #ddd;

    aspect-ratio:
        4 / 3;

    border-radius:
        4px;

}


.gallery-item img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .5s ease;

}


.gallery-item:hover img {

    transform:
        scale(1.08);

}


.gallery-more {

    text-align:
        center;

    margin-top:
        32px;

}


/* =========================================================
   MARQUEE
========================================================= */

.marquee-section {

    background:
        var(--brown);

    padding:
        15px 0;

    overflow:
        hidden;

}


.marquee-track {

    display:
        flex;

    width:
        max-content;

    gap:
        16px;

    animation:
        marquee 55s linear infinite;

}


.marquee-track:hover {

    animation-play-state:
        paused;

}


.marquee-track img {

    width:
        250px;

    height:
        165px;

    object-fit:
        cover;

    border-radius:
        4px;

    flex:
        none;

}


@keyframes marquee {

    from {

        transform:
            translateX(0);

    }

    to {

        transform:
            translateX(-50%);

    }

}


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

.contact-section {

    background:

        linear-gradient(
            120deg,
            #270D00,
            #581924
        );

    color:
        white;

}


.contact-grid {

    display:
        grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap:
        8%;

    align-items:
        start;

}


.contact-information {

    padding-top:
        20px;

}


.contact-information h2 {

    font-size:
        clamp(
            2.4rem,
            4.5vw,
            4rem
        );

}


.contact-information h2 span {

    color:
        var(--gold);

}


.contact-description {

    max-width:
        450px;

    color:
        rgba(255,255,255,.72);

    margin:
        25px 0 35px;

}


.contact-detail {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin:
        20px 0;

}


.contact-icon {

    width:
        45px;

    height:
        45px;

    border:
        1px solid
        rgba(206,192,97,.6);

    border-radius:
        50%;

    display:
        grid;

    place-items:
        center;

    color:
        var(--gold);

}


.contact-detail small {

    display:
        block;

    color:
        rgba(255,255,255,.5);

    font-size:
        .7rem;

}


.contact-detail a {

    color:
        white;

    font-size:
        .88rem;

    font-weight:
        600;

    overflow-wrap:
        anywhere;

}


.contact-detail a:hover {

    color:
        var(--gold);

}


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

.contact-card {

    background:
        white;

    color:
        var(--text);

    padding:
        clamp(
            23px,
            4vw,
            40px
        );

    border-radius:
        6px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.25);

}


.contact-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        17px;

}


.contact-form label {

    display:
        block;

    color:
        #3b2d27;

    font-size:
        .76rem;

    font-weight:
        600;

}


.contact-form input:not([type="checkbox"]),
.contact-form textarea {

    width:
        100%;

    display:
        block;

    margin-top:
        7px;

    padding:
        13px;

    border:
        1px solid
        #ded7d2;

    border-radius:
        3px;

    background:
        #fffdf9;

    outline:
        none;

    color:
        var(--text);

    font-size:
        .86rem;

    transition:
        .2s ease;

}


.contact-form input:focus,
.contact-form textarea:focus {

    border-color:
        var(--burgundy);

    box-shadow:
        0 0 0 3px
        rgba(88,25,36,.09);

}


.contact-form textarea {

    resize:
        vertical;

    min-height:
        140px;

}


.form-two-columns {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        15px;

}


.optional {

    color:
        #988b83;

    font-weight:
        400;

}


/* =========================================================
   SUBJECT CHECKBOXES
========================================================= */

.subject-fieldset {

    border:
        0;

    padding:
        0;

    margin:
        0;

}


.subject-fieldset legend {

    width:
        100%;

    margin-bottom:
        12px;

    color:
        #3b2d27;

    font-size:
        .76rem;

    font-weight:
        600;

}


.subject-fieldset legend span {

    color:
        #998c84;

    font-weight:
        400;

    margin-left:
        7px;

}


.subject-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        10px;

}


.subject-option {

    display:
        flex !important;

    align-items:
        center;

    gap:
        10px;

    min-height:
        52px;

    padding:
        10px 12px;

    border:
        1px solid
        #e2dcd7;

    border-radius:
        4px;

    cursor:
        pointer;

    transition:
        .2s ease;

}


.subject-option:hover {

    border-color:
        var(--burgundy);

}


.subject-option:has(
    input:checked
) {

    background:
        #fbf0f2;

    border-color:
        var(--burgundy);

}


.subject-option input {

    width:
        17px;

    height:
        17px;

    accent-color:
        var(--burgundy);

    flex:
        none;

}


.subject-option span {

    font-size:
        .76rem;

}


.selection-message {

    display:
        block;

    margin-top:
        7px;

    color:
        #8e8078;

    font-size:
        .69rem;

}


/* =========================================================
   FORM MESSAGES
========================================================= */

.form-success {

    background:
        #e8f7ed;

    color:
        #1c6338;

    padding:
        13px;

    border:
        1px solid
        #b9e4c8;

    border-radius:
        4px;

    margin-bottom:
        17px;

    font-size:
        .82rem;

}


.form-error {

    background:
        #fff0f0;

    color:
        #812020;

    padding:
        13px;

    border:
        1px solid
        #efc5c5;

    border-radius:
        4px;

    margin-bottom:
        17px;

    font-size:
        .82rem;

}


.form-error ul {

    margin:
        5px 0 0 18px;

}


.submit-button {

    border:
        0;

    width:
        100%;

}


.form-note {

    text-align:
        center;

    margin:
        14px 0 0;

    color:
        #8d8079;

    font-size:
        .68rem;

}


/* =========================================================
   DONATE
========================================================= */

.donate-section {

    background:
        var(--gold);

    color:
        var(--brown);

    padding:
        65px 0;

}


.donate-content {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        35px;

}


.donate-content .eyebrow {

    color:
        var(--burgundy);

    margin-bottom:
        8px;

}


.donate-content h2 {

    margin-bottom:
        7px;

}


.donate-content p:not(.eyebrow) {

    margin:
        0;

    color:
        rgba(39,13,0,.75);

}


/* =========================================================
   INNER PAGE HERO
========================================================= */

.inner-hero {

    color:
        white;

    padding:
        105px 0;

    background:

        radial-gradient(
            circle at 80% 20%,
            #581924,
            transparent 38%
        ),

        linear-gradient(
            120deg,
            #270D00,
            #581924,
            #270D00
        );

}


.inner-hero h1 {

    max-width:
        850px;

}


.inner-hero h1 span {

    color:
        var(--gold);

}


.inner-hero p:not(.eyebrow) {

    max-width:
        650px;

    color:
        rgba(255,255,255,.75);

}


/* =========================================================
   TV
========================================================= */

.tv-section {

    background:
        var(--cream);

}


.video-wrapper {

    position:
        relative;

    width:
        100%;

    max-width:
        950px;

    margin:
        0 auto 60px;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    border-radius:
        7px;

    box-shadow:
        var(--shadow);

}


.video-wrapper iframe {

    width:
        100%;

    height:
        100%;

    border:
        0;

}


.tv-text {

    max-width:
        700px;

    margin:
        auto;

    text-align:
        center;

}


.tv-text h2 {

    color:
        var(--brown);

}


.tv-text p:not(.eyebrow) {

    color:
        var(--muted);

}


/* =========================================================
   EMPTY
========================================================= */

.empty-state {

    text-align:
        center;

    background:
        var(--cream);

    padding:
        70px 25px;

}


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

.site-footer {

    background:
        #1a0800;

    color:
        white;

}


.footer-grid {

    display:
        grid;

    grid-template-columns:
        1.3fr .8fr 1fr;

    gap:
        60px;

    padding:
        65px 0;

}


.footer-logo {

    font-family:
        var(--heading);

    font-size:
        1.8rem;

}


.footer-logo span {

    color:
        var(--gold);

}


.footer-brand p {

    color:
        rgba(255,255,255,.55);

    font-size:
        .8rem;

    margin:
        12px 0 18px;

}


.footer-email {

    color:
        rgba(255,255,255,.72);

    font-size:
        .8rem;

}


.footer-email:hover {

    color:
        var(--gold);

}


.footer-column h3 {

    font-family:
        var(--body);

    font-size:
        .82rem;

    font-weight:
        700;

    color:
        var(--gold);

    margin-bottom:
        18px;

}


.footer-column:not(.footer-brand) {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        10px;

}


.footer-column:not(.footer-brand) a {

    color:
        rgba(255,255,255,.68);

    font-size:
        .78rem;

}


.footer-column:not(.footer-brand) a:hover {

    color:
        var(--gold);

}


.social-links {

    display:
        flex !important;

    flex-direction:
        row !important;

    gap:
        10px !important;

    margin-bottom:
        15px;

}


.social-links a {

    display:
        grid !important;

    place-items:
        center;

    min-width:
        80px;

    min-height:
        40px;

    border:
        1px solid
        rgba(206,192,97,.45);

    border-radius:
        4px;

    color:
        var(--gold) !important;

    transition:
        .2s ease;

}


.social-links a:hover {

    background:
        var(--gold);

    color:
        var(--brown) !important;

}


.footer-donate {

    margin-top:
        5px;

}


.footer-bottom {

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

}


.footer-bottom .container {

    min-height:
        65px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

}


.footer-bottom p {

    margin:
        0;

    color:
        rgba(255,255,255,.48);

    font-size:
        .67rem;

}


/* =========================================================
   LIGHTBOX
========================================================= */

.lightbox {

    position:
        fixed;

    inset:
        0;

    z-index:
        999;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        50px;

    background:
        rgba(14,4,0,.95);

}


.lightbox.open {

    display:
        flex;

}


.lightbox img {

    max-width:
        90vw;

    max-height:
        85vh;

    object-fit:
        contain;

}


.lightbox button {

    position:
        absolute;

    border:
        0;

    background:
        transparent;

    color:
        white;

    font-size:
        3rem;

}


.lightbox-close {

    right:
        25px;

    top:
        15px;

}


.lightbox-prev {

    left:
        25px;

}


.lightbox-next {

    right:
        25px;

}


/* =========================================================
   ENTRANCE ANIMATIONS
========================================================= */

.reveal {

    opacity:
        0;

    transform:
        translateY(30px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}


.reveal.visible {

    opacity:
        1;

    transform:
        translateY(0);

}


[data-delay="100"] {

    transition-delay:
        .1s;

}


[data-delay="150"] {

    transition-delay:
        .15s;

}


[data-delay="200"] {

    transition-delay:
        .2s;

}


[data-delay="300"] {

    transition-delay:
        .3s;

}


[data-delay="400"] {

    transition-delay:
        .4s;

}


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

@media (max-width: 1000px) {

    .main-nav {

        gap:
            14px;

    }


    .main-nav > a {

        font-size:
            .73rem;

    }


    .event-grid {

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

    }


    .contact-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .contact-information {

        max-width:
            650px;

    }

}


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

@media (max-width: 760px) {

    .container {

        width:
            min(
                100% - 32px,
                1160px
            );

    }


    .section-padding {

        padding:
            75px 0;

    }


    .nav-container {

        min-height:
            75px;

    }


    .logo img {

        max-width:
            150px;

    }


    .menu-toggle {

        display:
            block;

    }


    .main-nav {

        display:
            none;

        position:
            absolute;

        top:
            100%;

        left:
            0;

        right:
            0;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            5px;

        padding:
            18px 22px 25px;

        background:
            #270D00;

        box-shadow:
            0 20px 30px
            rgba(0,0,0,.25);

    }


    .main-nav.open {

        display:
            flex;

    }


    .main-nav > a {

        padding:
            10px 0;

        font-size:
            .88rem;

    }


    .nav-donate {

        align-self:
            flex-start;

        margin-top:
            8px;

    }


    .hero {

        min-height:
            650px;

    }


    .hero-content {

        padding:
            85px 0;

    }


    .hero-title {

        font-size:
            clamp(
                2.6rem,
                12vw,
                4.3rem
            );

    }


    .hero-description {

        font-size:
            .9rem;

    }


    .hero-buttons {

        flex-direction:
            column;

        max-width:
            290px;

        margin:
            auto;

    }


    .intro-grid {

        grid-template-columns:
            1fr;

        gap:
            25px;

    }


    .event-grid {

        grid-template-columns:
            1fr;

    }


    .event-image {

        height:
            240px;

    }


    .community-section {

        min-height:
            600px;

    }


    .community-content h2 {

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

    }


    .gallery-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            9px;

    }


    .marquee-track img {

        width:
            205px;

        height:
            135px;

    }


    .form-two-columns {

        grid-template-columns:
            1fr;

    }


    .subject-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .donate-content {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .footer-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            35px 25px;

    }


    .footer-brand {

        grid-column:
            1 / -1;

    }


    .footer-bottom .container {

        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            center;

        padding:
            18px 0;

    }


    .lightbox {

        padding:
            35px 10px;

    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 480px) {

    .container {

        width:
            calc(100% - 30px);

    }


    .hero-title {

        font-size:
            2.55rem;

    }


    .gallery-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .subject-option {

        padding:
            9px;

        gap:
            7px;

    }


    .subject-option span {

        font-size:
            .7rem;

    }


    .contact-card {

        padding:
            20px 16px;

    }


    .footer-grid {

        grid-template-columns:
            1fr;

    }


    .footer-brand {

        grid-column:
            auto;

    }


    .social-links a {

        min-width:
            74px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    html {

        scroll-behavior:
            auto;

    }


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

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}