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

.footer {
    background:var(--background);
    padding-top: clamp(0.9rem,2vw,4.5rem);
    padding-left: clamp(0.9rem,3vw,3rem);
    padding-right: clamp(0.9rem,3vw,3rem) ;
    padding-bottom: clamp(0.9rem,2vw,4.5rem) ;
}
/* =====================================================
                    FOOTER TOP
===================================================== */
.footer-top{
    display:grid;

    grid-template-columns:
        1.3fr
        1fr
        1fr
        1fr;
    gap:4rem;
}
/* =====================================================
                COMPANY
===================================================== */
.footer-logo{
    width:200px;
    margin-bottom:1.5rem;
}

.footer-description{
    max-width:320px;
}
/* =====================================================
                TITLES
===================================================== */

.footer-column h3{
    font-size:1.4rem;
    margin-bottom:1.6rem;
    color:#111;
}
/* =====================================================
                LIST
===================================================== */

.footer-column ul{
    display:flex;
    flex-direction:column;

    gap:1.2rem;
}

.footer-column li,
.footer-column a ,
.footer-description{

    color:var(--text-gray);
    font-weight: 480;
    
    transition:.3s;
}

.footer-column a:hover{
    color:var(--primary-color);
    transition:
        transform .35s;
}


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

.footer-social{
    display:flex;

    gap:.9rem;

    margin-top:1rem;
    margin-bottom:1.5rem;

}

.footer-social a{
    width:40px;

    height:40px;

    display:flex;
    justify-content:center;
    align-items:center;

    opacity: .7;

}

.social-links {
    margin-top: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 1.6rem;
}

.social-links a:hover {
    transform:translateY(-3px);
    transition:
        transform .35s;
}

.social-icon{
    position:relative;
    display:inline-flex;

    width:42px;
    height:42px;
}

.social-icon img{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    transition:opacity .3s ease;
}

.social-icon .hover{
    opacity:0;
}

.social-icon:hover .normal{
    opacity:0;
}

.social-icon:hover .hover{
    opacity:1;
}


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

.footer-bottom{
    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top: 5%;

    border-top:1px solid #777;

}

.footer-bottom p{

    color:#333;

}

.footer-legal{

    display:flex;

    gap:2rem;

}

.footer-legal a{

    color:#333;

}


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

@media (max-width:992px){

.footer-top{

grid-template-columns:1fr 1fr;

}

}

@media (max-width:768px){

.footer-top{

grid-template-columns:1fr;

}

.footer-bottom{

flex-direction:column;

align-items:flex-start;

gap:1rem;

}

}