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

.footer{

    position:relative;

    padding:100px 0 40px;

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

    background:linear-gradient(
        180deg,
        transparent,
        rgba(255,255,255,.015)
    );

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:60px;

    margin-bottom:70px;

}

.footer-brand p{

    margin-top:24px;

    color:var(--color-text-secondary);

    line-height:1.8;

    max-width:380px;

}

.footer-logo{

    width:180px;

}

.footer h4{

    margin-bottom:24px;

    font-size:1rem;

}

.footer ul{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.footer ul li{

    color:var(--color-text-secondary);

}

.footer a{

    color:var(--color-text-secondary);

    transition:.3s;

}

.footer a:hover{

    color:var(--color-primary);

}

.footer-social{

    display:flex;

    gap:16px;

    margin-top:35px;

}

.footer-social a{

    width:48px;

    height:48px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:14px;

    background:rgba(255,255,255,.04);

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

    transition:.35s;

}

.footer-social a:hover{

    transform:translateY(-5px);

    background:rgba(255,212,0,.08);

    border-color:rgba(255,212,0,.25);

}

.footer-social img{

    width:22px;

    height:22px;

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:35px;

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

    color:var(--color-text-secondary);

}

.footer-links{

    display:flex;

    gap:28px;

}

.footer-links a{

    font-size:.9rem;

}

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

@media(max-width:992px){

    .footer-grid{

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

        gap:50px;

    }

}

@media(max-width:768px){

    .footer{

        padding:80px 0 35px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:45px;

        text-align:center;

    }

    .footer-brand{

        display:flex;

        flex-direction:column;

        align-items:center;

    }

    .footer-brand p{

        max-width:500px;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-bottom{

        flex-direction:column;

        gap:20px;

        text-align:center;

    }

    .footer-links{

        flex-direction:column;

        gap:12px;

    }

}