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

.site-footer{

    margin-top:120px;

    padding:90px 0 40px;

    background:#fff;

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

}

.footer-top{

    display:grid;

    grid-template-columns:1.2fr 2fr;

    gap:80px;

    padding-bottom:60px;

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

}

.footer-brand img{

    height:60px;

    width:auto;

    margin-bottom:24px;

}

.footer-brand p{

    color:var(--text-light);

    max-width:420px;

    line-height:1.8;

    margin-bottom:30px;

}

.footer-social{

    display:flex;

    gap:20px;

}

.footer-social a{

    text-decoration:none;

    color:var(--text);

    font-weight:600;

}

.footer-links{

    display:grid;

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

    gap:50px;

}

.footer-column h3{

    margin-bottom:22px;

    font-size:20px;

}

.footer-column ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-column li{

    margin-bottom:14px;

}

.footer-column a{

    color:var(--text-light);

    text-decoration:none;

    transition:.3s;

}

.footer-column a:hover{

    color:var(--primary);

}

.footer-benefits{

    display:flex;

    justify-content:center;

    gap:80px;

    padding:40px 0;

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

    font-weight:600;

}

.footer-bottom{

    padding-top:30px;

    text-align:center;

    color:var(--text-light);

}

@media (max-width:900px){

    .site-footer{

        margin-top:80px;

        padding:64px 0 32px;

    }

    .footer-top{

        grid-template-columns:1fr;

        gap:48px;

    }

    .footer-links{

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

        gap:36px;

    }

    .footer-benefits{

        display:grid;

        grid-template-columns:1fr;

        justify-items:start;

        gap:18px;

        padding:32px 0;

    }

    .footer-benefits div{

        max-width:100%;

    }

}

@media (max-width:560px){

    .site-footer{

        margin-top:56px;

        padding:48px 0 28px;

    }

    .footer-top{

        gap:36px;

        padding-bottom:40px;

    }

    .footer-brand p{

        max-width:none;

        margin-bottom:24px;

    }

    .footer-social{

        flex-wrap:wrap;

        gap:14px 20px;

    }

    .footer-links{

        grid-template-columns:1fr;

        gap:28px;

    }

    .footer-column h3{

        margin-bottom:14px;

        font-size:18px;

    }

    .footer-benefits{

        gap:16px;

    }

    .footer-bottom{

        text-align:left;

    }

}