/* =====================================
   DARA AFFILIATION
   FOOTER FUTURISTE 3D
===================================== */


.footer{

    background:#050914;

    padding:80px 0 0;

    position:relative;

    overflow:hidden;

    border-top:1px solid rgba(0,140,255,.2);

}


/* Lumière */

.footer::before{

    content:"";

    position:absolute;

    width:500px;

    height:300px;

    background:#008cff;

    filter:blur(180px);

    opacity:.15;

    bottom:-100px;

    left:50%;

    transform:translateX(-50%);

}





.footer-container{

    display:grid;

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

    gap:50px;

    position:relative;

    z-index:2;

}





.footer h3{

    color:white;

    font-size:20px;

    margin-bottom:25px;

}





.footer-about p{

    color:#b8c5d8;

    line-height:1.8;

    max-width:350px;

}





.footer-links ul{

    list-style:none;

    padding:0;

}



.footer-links li{

    margin-bottom:12px;

}



.footer-links a{

    color:#b8c5d8;

    text-decoration:none;

    transition:.3s;

}



.footer-links a:hover{

    color:#00c6ff;

    padding-left:8px;

}





/* SOCIAL */

.social-icons{

    display:flex;

    gap:15px;

}



.social-icons a{

    width:45px;

    height:45px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

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

    border:1px solid rgba(0,140,255,.3);

    color:white;

    font-size:18px;

    transition:.4s;

}



.social-icons a:hover{

    background:

    linear-gradient(
        135deg,
        #0066ff,
        #00c6ff
    );

    transform:translateY(-8px);

    box-shadow:

    0 10px 30px rgba(0,140,255,.5);

}





/* BAS FOOTER */

.footer-bottom{

    margin-top:60px;

    padding:25px;

    text-align:center;

    border-top:

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

}



.footer-bottom p{

    color:#8fa1b8;

    font-size:14px;

}





/* MOBILE */

@media(max-width:900px){


.footer-container{

    grid-template-columns:1fr;

    text-align:center;

}


.footer-about p{

    margin:auto;

}


.social-icons{

    justify-content:center;

}


}