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


.footer{

    background:#071426;

    color:white;

    padding:80px 8% 30px;

    position:relative;

    overflow:hidden;

}



.footer::before{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    background:#0A3D91;

    filter:blur(150px);

    opacity:.4;

    top:-150px;

    left:-150px;

}



/*==================================
GRID
==================================*/


.footer-grid{

    display:grid;

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

    gap:50px;

    position:relative;

    z-index:2;

}




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


.footer-logo{

    font-size:38px;

    font-weight:800;

    color:white;

    display:inline-block;

    margin-bottom:20px;

}



.footer-logo span{

    color:#4F8BFF;

}



.footer-brand p{

    color:#b8c2d1;

    line-height:1.8;

    max-width:350px;

}




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


.footer-social{

    display:flex;

    gap:15px;

    margin-top:30px;

}



.footer-social a{

    width:45px;

    height:45px;

    border-radius:50%;

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

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s;

}



.footer-social a:hover{

    background:#4F8BFF;

    transform:translateY(-5px);

}





/*==================================
LINKS
==================================*/


.footer h3{

    font-size:22px;

    margin-bottom:25px;

}



.footer-links ul{

    list-style:none;

}



.footer-links li{

    margin-bottom:15px;

}



.footer-links a{

    color:#b8c2d1;

    transition:.3s;

}



.footer-links a:hover{

    color:#4F8BFF;

    padding-left:5px;

}





/*==================================
CONTACT
==================================*/


.footer-contact p{

    display:flex;

    align-items:center;

    gap:12px;

    color:#b8c2d1;

    margin-bottom:18px;

}



.footer-contact i{

    color:#4F8BFF;

}





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


.footer-bottom{

    margin-top:60px;

    padding-top:25px;

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

    display:flex;

    justify-content:space-between;

    color:#9aa7bb;

    font-size:14px;

}



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


@media(max-width:1100px){


.footer-grid{

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

}


}



@media(max-width:768px){


.footer-grid{

    grid-template-columns:1fr;

}


.footer-bottom{

    flex-direction:column;

    gap:15px;

    text-align:center;

}


}

.footer-contact a{
    color:inherit;
    text-decoration:none;
}

.footer-contact a:hover{
    color:#2563eb;
}

.designer-credit{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 15px;
}

.designer-credit span{
    font-weight: 600;
    color: #fffafa;
}

.designer-instagram{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #9aa7bb;   /* Same as footer text */
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s;
}

.designer-instagram i{
    color: #9aa7bb;   /* Same as text */
    font-size: 16px;
    transition: 0.3s;
}

.designer-instagram:hover{
    color: #4F8BFF;   /* Same hover color as other footer links */
    transform: translateY(-2px);
}

.designer-instagram:hover i{
    color: #4F8BFF;
}