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

#footer{

    background:linear-gradient(
        180deg,
        #0f172a 0%,
        #08111f 100%
    );

    color:#ffffff;

    padding:90px 0 40px;

    margin-top:140px;

}

#footer .container{

    max-width:1500px;

    margin:auto;

}

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

.footer-top{

    display:grid;

    grid-template-columns:

        2fr
        1fr
        1fr
        1fr
        1fr;

    gap:50px;

    padding-bottom:70px;

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

}

/* ==========================================
   BRAND
========================================== */
 
.footer-logo{

    display:inline-flex;

}

.footer-logo img{

    height:60px;

    width:auto;

}

.footer-brand h3{

    font-size:43px;

    font-weight:800;

    line-height:1.1;

    color:#3b82f6;

    margin-bottom:32px;

}

.footer-brand p{

    font-size:22px;

    line-height:1.9;

    color:#cbd5e1;

    max-width:420px;

}

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

.footer-column h4{

    position:relative;

    font-size:24px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

    margin-bottom:35px;

}

.footer-column h4::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-12px;

    width:42px;

    height:4px;

    border-radius:999px;

    background:#7c3aed;

}

.footer-column ul{

    list-style:none;

    margin:0;

    padding:0;

}

.footer-column li{

    margin-bottom:18px;

}

.footer-column a{

    text-decoration:none;

    color:#cbd5e1;

    font-size:19px;

    transition:.25s;

}

.footer-column a:hover{

    color:#60a5fa;

    padding-left:6px;

}

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

.footer-middle{

    display:grid;

    grid-template-columns:

        1fr
        1.4fr
        auto;

    align-items:center;

    gap:40px;

    padding:55px 0;

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

}

/* ==========================================
   STAY UPDATED
========================================== */

.footer-news h4{

    position:relative;

    font-size:24px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:24px;

}

.footer-news h4::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:42px;

    height:4px;

    background:#7c3aed;

    border-radius:999px;

}

.footer-news p{

    color:#cbd5e1;

    font-size:19px;

    line-height:1.8;

}

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

.newsletter-form{

    display:flex;

    border-radius:18px;

    overflow:hidden;

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

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

}

.newsletter-form input{

    flex:1;

    height:66px;

    border:none;

    outline:none;

    background:transparent;

    padding:0 22px;

    color:#ffffff;

    font-size:18px;

}

.newsletter-form input::placeholder{

    color:#94a3b8;

}

.newsletter-form button{

    width:78px;

    border:none;

    cursor:pointer;

    background:#2563eb;

    color:#ffffff;

    font-size:24px;

    transition:.3s;

}

.newsletter-form button:hover{

    background:#1d4ed8;

}

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

.footer-social{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.footer-social h4{

    position:relative;

    font-size:24px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:24px;

}

.footer-social h4::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:42px;

    height:4px;

    background:#7c3aed;

    border-radius:999px;

}

.social-icons{

    display:flex;

    gap:16px;

}

.social-icons a{

    width:52px;

    height:52px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:16px;

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

    color:#ffffff;

    text-decoration:none;

    transition:all .30s ease;

}

.social-icons a:hover{

    background:#2563eb;

    transform:translateY(-4px);

}

.social-icons i{

    font-size:20px;

}

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

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

    padding-top:35px;

}

.footer-copyright{

    font-size:16px;

    color:#94a3b8;

}

/* ==========================================
   HIGHLIGHTS
========================================== */

.footer-highlights{

    display:flex;

    align-items:center;

    gap:28px;

}

.footer-highlights div{

    display:flex;

    align-items:center;

    gap:10px;

    color:#cbd5e1;

    font-size:16px;

}

.footer-highlights i{

    color:#3b82f6;

    font-size:17px;

}

/* ==========================================
   LANGUAGE
========================================== */

.footer-language{

    display:flex;

    align-items:center;

    gap:10px;

    color:#cbd5e1;

    font-size:16px;

    cursor:pointer;

    transition:.25s;

}

.footer-language:hover{

    color:#60a5fa;

}

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

@media(max-width:1400px){

    .footer-top{

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

        gap:40px;

    }

    .footer-brand{

        grid-column:1 / -1;

        padding-right:0;

    }

    .footer-middle{

        grid-template-columns:1fr;

        gap:30px;

        text-align:center;

    }

    .footer-social{

        align-items:center;

    }

}

@media(max-width:992px){

    .footer-top{

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

    }

    .footer-column{

        margin-top:10px;

    }

    .footer-bottom{

        flex-direction:column;

        gap:25px;

        text-align:center;

    }

    .footer-highlights{

        flex-wrap:wrap;

        justify-content:center;

    }

}

@media(max-width:768px){

    #footer{

        padding:70px 0 35px;

        margin-top:90px;

    }

    .footer-top{

        grid-template-columns:1fr;

        gap:40px;

    }

    .footer-brand{

        text-align:center;

        padding-right:0;

    }

    .footer-brand h3{

        font-size:42px;

    }

    .footer-brand p{

        max-width:none;

        font-size:18px;

    }

    .footer-column{

        text-align:center;

    }

    .footer-column h4::after{

        left:50%;

        transform:translateX(-50%);

    }

    .footer-news{

        text-align:center;

    }

    .footer-news h4::after{

        left:50%;

        transform:translateX(-50%);

    }

    .newsletter-form{

        flex-direction:column;

        border-radius:18px;

    }

    .newsletter-form input{

        width:100%;

    }

    .newsletter-form button{

        width:100%;

        height:60px;

    }

    .footer-social{

        align-items:center;

    }

    .footer-social h4::after{

        left:50%;

        transform:translateX(-50%);

    }

    .social-icons{

        justify-content:center;

        flex-wrap:wrap;

    }

    .footer-highlights{

        flex-direction:column;

        gap:15px;

    }

    .footer-language{

        justify-content:center;

    }

}