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



.footer{


    position:relative;


    padding:


    70px 0 20px;


    overflow:hidden;


}






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


.footer-container{


    display:grid;


    grid-template-columns:


    2fr 1fr 1fr;


    gap:50px;


    padding:


    50px;


    background:


    rgba(255,255,255,.35);


    backdrop-filter:


    blur(25px);


    border:


    1px solid rgba(255,255,255,.7);


    border-radius:


    40px;


    box-shadow:


    var(--shadow-md);


}







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


.footer-logo{


    display:flex;


    align-items:center;


    gap:15px;


    font-size:


    1.5rem;


    font-weight:


    700;


    margin-bottom:


    20px;


}

.footer-logo-img{
    height:48px;
    width:auto;
    object-fit:contain;
    display:block;
}



.footer-brand p{


    max-width:


    350px;


    margin-bottom:


    25px;


}







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


.social-links{


    display:flex;


    gap:15px;


}




.social-links a{


    width:


    45px;


    height:


    45px;


    display:flex;


    justify-content:center;


    align-items:center;


    border-radius:


    50%;


    background:


    rgba(255,255,255,.55);


    border:


    1px solid rgba(255,255,255,.7);


    color:


    var(--primary);


    transition:


    .4s;


}





.social-links a:hover{


    transform:


    translateY(-8px);


    background:


    var(--primary);


    color:white;


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


.footer-container h3{


    margin-bottom:


    20px;


    font-size:


    1.2rem;


}




.footer-links{


    display:flex;


    flex-direction:column;


    gap:12px;


}





.footer-links a{


    color:


    var(--text-light);


    transition:


    .3s;


}




.footer-links a:hover{


    color:


    var(--primary);


    transform:


    translateX(8px);


}







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


.footer-bottom{


    text-align:center;


    margin-top:


    35px;


    padding-top:


    20px;


    border-top:


    1px solid rgba(255,255,255,.5);


}



.footer-bottom p{


    font-size:


    .9rem;


}








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


.footer::before{


    content:"";


    position:absolute;


    width:


    400px;


    height:


    400px;


    border-radius:


    50%;


    background:


    rgba(105,144,255,.18);


    filter:


    blur(120px);


    bottom:-150px;


    left:50%;


    transform:


    translateX(-50%);


    z-index:-1;


}








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


@media(max-width:900px){



.footer-container{


    grid-template-columns:


    1fr;


    padding:


    35px;


    gap:


    35px;


}



}






@media(max-width:600px){



.footer{


    padding-top:


    50px;


}





.footer-container{


    border-radius:


    30px;


}



}