/*
=====================================================
DIGITAL IPSUM FOOTER
=====================================================
*/

.site-footer {

    --di-navy: #080f25;
    --di-navy-2: #0c1530;
    --di-orange: #f79621;
    --di-orange-soft: #ffad48;
    --di-white: #ffffff;
    --di-border: rgba(255, 255, 255, .10);

    width: 100%;

    background:
        var(--di-navy);

    color:
        var(--di-white);

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

    padding:
        85px 0 25px;
}


/*
=====================================================
CONTAINER
=====================================================
*/

.footer-container {

    width:
        min(
            calc(100% - 48px),
            1280px
        );

    margin:
        0 auto;
}


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

.footer-grid {

    display: grid;

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

    gap:
        50px;

    padding-bottom:
        70px;
}


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

.footer-brand {

    min-width: 0;
}


.footer-logo {

    display: inline-flex;

    line-height: 0;
}


.footer-logo img {

    display: block;

    width:
        125px;

    max-width: 100%;

    height: auto;
}


.footer-site-title {

    color:
        var(--di-white);

    text-decoration: none;

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size:
        28px;

    font-weight:
        800;
}


.footer-statement {

    max-width:
        300px;

    margin:
        25px 0 0;

    color:
        #c5ccda;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size:
        18px;

    line-height:
        1.7;
}


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

.footer-title {

    margin:
        0 0 24px;

    color:
        var(--di-orange);

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}


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

.footer-links {

    list-style: none;

    padding: 0;

    margin: 0;
}


.footer-links li {

    margin:
        0 0 12px;

    padding: 0;
}


.footer-links a {

    display: inline-block;

    color:
        #aeb7ca;

    text-decoration: none;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size:
        16px;

    line-height:
        1.5;

    transition:
        color .3s ease,
        padding-left .3s ease;
}


.footer-links a:hover {

    color:
        var(--di-white);

    padding-left:
        4px;
}


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

.footer-contact > .footer-links a {

    color:
        var(--di-white);

    font-weight:
        600;
}


.footer-contact > .footer-links a:hover {

    color:
        var(--di-orange-soft);
}


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

.footer-newsletter {

    margin-top:
        38px;
}


.footer-newsletter p {

    max-width:
        320px;

    margin:
        0 0 20px;

    color:
        #7f8aa1;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size:
        15px;

    line-height:
        1.6;
}


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

.newsletter-form {

    width: 100%;

    max-width:
        380px;

    display: flex;

    align-items: stretch;

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

    border-radius:
        10px;

    overflow:
        hidden;
}


.newsletter-form input {

    min-width: 0;

    flex: 1;

    height:
        48px;

    padding:
        0 14px;

    border: 0;

    outline: 0;

    background:
        transparent;

    color:
        var(--di-white);

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size:
        14px;
}


.newsletter-form input::placeholder {

    color:
        #6f7990;
}


.newsletter-form button {

    flex:
        0 0 auto;

    min-width:
        52px;

    padding:
        0 16px;

    border: 0;

    background:
        var(--di-orange);

    color:
        var(--di-navy);

    font-family:
        Arial,
        sans-serif;

    font-size:
        20px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        background .2s ease;
}


.newsletter-form button:hover {

    background:
        var(--di-orange-soft);
}


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

.footer-bottom {

    padding-top:
        22px;

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

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        20px;

    color:
        #68738c;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size:
        12px;

    line-height:
        1.5;
}


.footer-bottom-links {

    display: flex;

    align-items: center;

    gap:
        20px;
}


.footer-bottom-links a {

    color:
        #68738c;

    text-decoration:
        none;

    transition:
        color .2s ease;
}


.footer-bottom-links a:hover {

    color:
        var(--di-white);
}


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

@media (max-width: 1050px) {

    .footer-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            50px 35px;
    }


    .footer-bottom {

        flex-wrap: wrap;
    }

}


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

@media (max-width: 767px) {

    .site-footer {

        padding:
            65px 0 22px;
    }


    .footer-container {

        width:
            calc(100% - 32px);
    }


    .footer-grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            45px 25px;

        padding-bottom:
            50px;
    }


    .footer-brand {

        grid-column:
            1 / -1;
    }


    .footer-statement {

        font-size:
            16px;
    }


    .footer-title {

        margin-bottom:
            18px;
    }


    .footer-links a {

        font-size:
            15px;
    }


    .footer-bottom {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            12px;
    }

}


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

@media (max-width: 480px) {

    .footer-grid {

        grid-template-columns:
            1fr;
    }


    .footer-brand {

        grid-column:
            auto;
    }


    .footer-newsletter {

        margin-top:
            30px;
    }


    .newsletter-form {

        max-width:
            100%;
    }


    .footer-bottom-links {

        gap:
            15px;
    }

}