/* =====================================================
   13. FOOTER
===================================================== */

.footer{
    margin-top:100px;
    background:#0b1220;
    border-top:1px solid rgba(255,255,255,.08);
}

.footer-container{
    width:90%;
    max-width:1400px;
    margin:auto;
    padding:60px 0;

    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:50px;
}

.footer-brand h2{
    color:#22c55e;
    margin-bottom:20px;
}

.footer-brand p{
    color:#94a3b8;
    line-height:1.8;
    max-width:380px;
}

.footer-links,
.footer-social{
    display:flex;
    flex-direction:column;
}

.footer-links h3,
.footer-social h3{
    margin-bottom:20px;
}

.footer-links a{
    color:#cbd5e1;
    margin-bottom:12px;
    transition:.3s;
}

.footer-links a:hover{
    color:#22c55e;
    transform:translateX(6px);
}

.social-icons{
    display:flex;
    gap:18px;
}

.social-icons a{
    width:45px;
    height:45px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:50%;
    background:#1e293b;

    transition:.3s;
}

.social-icons a:hover{
    background:#22c55e;
    transform:translateY(-5px);
}

.footer-bottom{
    text-align:center;
    padding:20px;
    border-top:1px solid rgba(255,255,255,.08);
    color:#94a3b8;
}

/* Footer Responsive */

@media (max-width:768px){

    .footer-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .footer-brand p{
        max-width:none;
    }

    .social-icons{
        justify-content:center;
    }
}