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

.site-footer {
    background:
        #080A12;

    border-top:
        1px solid
        var(--border);
}


.footer-main {
    display:
        grid;

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

    gap:
        70px;

    padding-top:
        75px;

    padding-bottom:
        65px;
}


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

.footer-brand {
    max-width:
        360px;
}


.footer-logo {
    display:
        inline-flex;

    margin-bottom:
        19px;
}


.footer-logo img {
    width:
        auto;

    height:
        58px;
}


.footer-brand p {
    max-width:
        320px;

    color:
        var(--text-muted);

    font-size:
        .88rem;

    line-height:
        1.7;
}


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

.footer-socials {
    display:
        flex;

    gap:
        8px;

    margin-top:
        24px;
}


.footer-socials a {
    width:
        39px;

    height:
        39px;

    display:
        grid;

    place-items:
        center;

    background:
        var(--surface);

    color:
        var(--text-muted);

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

    border-radius:
        10px;

    text-decoration:
        none;

    transition:
        color .35s var(--ease),
        background .35s var(--ease),
        border-color .35s var(--ease),
        transform .35s var(--ease);
}


.footer-socials a:hover {
    transform:
        translateY(-2px);

    background:
        var(--surface-hover);

    color:
        var(--primary-light);

    border-color:
        var(--border-purple);
}


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

.footer-column {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        12px;
}


.footer-column strong {
    margin-bottom:
        7px;

    color:
        var(--text);

    font-size:
        .84rem;
}


.footer-column a {
    position:
        relative;

    color:
        var(--text-muted);

    text-decoration:
        none;

    font-size:
        .82rem;

    transition:
        color .35s
        var(--ease);
}


.footer-column a:hover {
    color:
        var(--primary-light);
}


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

.footer-bottom {
    min-height:
        74px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    border-top:
        1px solid
        var(--border);
}


.footer-bottom p {
    margin:
        0;

    color:
        var(--text-soft);

    font-size:
        .7rem;
}


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

@media (max-width: 900px) {

    .footer-main {
        grid-template-columns:
            repeat(2,1fr);

        gap:
            45px;
    }

}


@media (max-width: 600px) {

    .footer-main {
        grid-template-columns:
            1fr;

        padding-top:
            55px;

        padding-bottom:
            45px;
    }


    .footer-bottom {
        align-items:
            flex-start;

        flex-direction:
            column;

        padding-top:
            20px;

        padding-bottom:
            20px;
    }

}