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

.site-footer{

    position:relative;

    background:#FAFBFE;

    padding:90px 0 30px;

    border-top:1px solid #E8EEF7;

    overflow:hidden;

}

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

.site-footer .container{

    max-width:1320px;

    margin:0 auto;

    padding:0 24px;

}

/*==========================================================
    TOP LABEL
==========================================================*/

.footer-top{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    margin-bottom:70px;

}

.footer-line{

    width:90px;

    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        #2563EB,
        transparent
    );

}

.footer-label{

    color:#2563EB;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    white-space:nowrap;

}

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

.footer-main{

    display:grid;

    grid-template-columns:

        1.6fr

        repeat(4,1fr);

    gap:60px;

    align-items:flex-start;

}

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

.footer-brand{

    max-width:360px;

}

.footer-logo{

    display:inline-flex;

    align-items:center;

    text-decoration:none;

    margin-bottom:28px;

}

.footer-logo img{

    width:180px;

    height:auto;

    display:block;

}

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

.footer-description{

    margin:0;

    color:#64748B;

    font-size:16px;

    line-height:1.9;

    max-width:320px;

}

/*==========================================================
    EMAIL CHIP
==========================================================*/

.footer-email{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin:30px 0 34px;

    padding:14px 20px;

    background:#ffffff;

    border:1px solid #E7EEF9;

    border-radius:14px;

    text-decoration:none;

    box-shadow:
        0 10px 30px rgba(15,23,42,.06);

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

}

.footer-email:hover{

    transform:translateY(-4px);

    border-color:#2563EB;

    box-shadow:
        0 18px 40px rgba(37,99,235,.14);

}

.footer-email svg{

    width:20px;

    height:20px;

    stroke:#2563EB;

    flex-shrink:0;

}

.footer-email span{

    color:#081B4B;

    font-size:15px;

    font-weight:600;

}

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

.footer-column h4{

    margin:0 0 24px;

    color:#081B4B;

    font-size:18px;

    font-weight:700;

}

.footer-column ul{

    margin:0;

    padding:0;

    list-style:none;

}

.footer-column li{

    margin-bottom:16px;

}

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

.footer-column a{

    position:relative;

    display:inline-block;

    color:#64748B;

    text-decoration:none;

    font-size:15px;

    transition:
        color .30s ease;

}

.footer-column a:hover{

    color:#2563EB;

}

.footer-column a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    background:#2563EB;

    transition:width .30s ease;

}

.footer-column a:hover::after{

    width:100%;

}

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

.footer-column li{

    display:flex;

    align-items:flex-start;

    gap:12px;

}

.footer-column li svg{

    width:18px;

    height:18px;

    margin-top:2px;

    stroke:#2563EB;

    flex-shrink:0;

}

.footer-column li span{

    color:#64748B;

    font-size:15px;

    line-height:1.7;

}

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

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    margin-top:70px;

    padding-top:30px;

    border-top:1px solid #E7EEF9;

}

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

.footer-social{

    display:flex;

    align-items:center;

    gap:22px;

}

.footer-social a{

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    border-radius:50%;

    text-decoration:none;

    color:#64748B;

    background:#FFFFFF;

    border:1px solid #E7EEF9;

    transition:
        all .35s ease;

}

.footer-social a:hover{

    color:#FFFFFF;

    background:#2563EB;

    border-color:#2563EB;

    transform:translateY(-5px);

    box-shadow:
        0 12px 30px rgba(37,99,235,.25);

}

.footer-social svg{

    width:18px;

    height:18px;

}

/*==========================================================
    COPYRIGHT
==========================================================*/

.footer-copyright{

    text-align:right;

}

.footer-copyright p{

    margin:0;

    color:#081B4B;

    font-size:15px;

    font-weight:600;

}

.footer-copyright span{

    display:block;

    margin-top:8px;

    color:#64748B;

    font-size:14px;

    line-height:1.7;

}

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

@media(max-width:1100px){

    .footer-main{

        grid-template-columns:

            repeat(2,1fr);

        gap:50px;

    }

    .footer-brand{

        max-width:100%;

        grid-column:1/-1;

    }

}

@media(max-width:768px){

    .site-footer{

        padding:70px 0 24px;

    }

    .footer-top{

        margin-bottom:50px;

    }

    .footer-main{

        grid-template-columns:1fr;

        gap:42px;

    }

    .footer-brand{

        text-align:center;

        max-width:100%;

    }

    .footer-description{

        margin-inline:auto;

    }

    .footer-email{

        justify-content:center;

    }

    .footer-column{

        text-align:center;

    }

    .footer-column li{

        justify-content:center;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

    .footer-copyright{

        text-align:center;

    }

}

@media(max-width:576px){

    .footer-line{

        width:45px;

    }

    .footer-label{

        font-size:11px;

        letter-spacing:1px;

    }

    .footer-logo img{

        width:150px;

    }

    .footer-description{

        font-size:15px;

    }

    .footer-column h4{

        font-size:17px;

    }

    .footer-column a{

        font-size:14px;

    }

    .footer-email{

        width:100%;

    }

    .footer-email span{

        font-size:14px;

    }

}

/*==========================================================
    HOVER EFFECT
==========================================================*/

.footer-column{

    transition:
        transform .35s ease;

}

.footer-column:hover{

    transform:translateY(-3px);

}

.footer-brand{

    animation:footerFade .8s ease both;

}

.footer-column:nth-child(2){

    animation:footerFade .8s .1s ease both;

}

.footer-column:nth-child(3){

    animation:footerFade .8s .2s ease both;

}

.footer-column:nth-child(4){

    animation:footerFade .8s .3s ease both;

}

.footer-column:nth-child(5){

    animation:footerFade .8s .4s ease both;

}

@keyframes footerFade{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.footer-social a svg{width:18px;height:18px;display:block}