/* ==========================================
   FOOTER.CSS
========================================== */

.footer{

    background:white;

    border-top:1px solid var(--border);

    padding:
var(--space-2xl)
var(--space-lg)
var(--space-lg);

}


.footerContent{

    max-width:var(--container);

    margin:auto;

    text-align:center;

}


.footerLogo{

    height:var(--logo-height);
    height:calc(var(--logo-height) - 14px);

    margin:auto;

}


.footerDescription{

    margin-top:20px;

    color:var(--text-light);

    line-height:1.8;

    max-width:var(--container-text);

    margin-left:auto;

    margin-right:auto;

}


.socialLinks{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

    margin:45px 0;

}


.socialLinks a{

    width:56px;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:var(--bg);

    color:var(--blue);

    font-size:22px;

    transition:var(--transition);

}


.socialLinks a:hover{

    background:var(--blue);

    color:white;

    transform:translateY(-5px);

}


.footerInfo{

    display:flex;

    justify-content:center;

    gap:40px;

    flex-wrap:wrap;

    margin-bottom:40px;

}


.footerInfo div{

    color:var(--text-light);

    font-size:15px;

}


.footerBottom{

    border-top:1px solid var(--border);

    padding-top:25px;

    text-align:center;

    color:#7B8598;

    font-size:14px;

}


@media(max-width:768px){

.footer{

padding:

var(--space-xl)

var(--space-md)

var(--space-md);

}

.footerInfo{

flex-direction:column;

gap:18px;

}

.socialLinks{

gap:12px;

}
.socialLinks a:focus-visible{

background:var(--blue);

color:white;

}
.socialLinks a{

width:48px;

height:48px;

font-size:20px;

}

.footerLogo{

height:70px;

}

}