/*======================================
EIVOX FOOTER CSS
Version: 1.0
======================================*/


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

.footer{

    margin-top:80px;

    background:var(--card);

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

}


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

.footer-top{

    padding:70px 0 50px;

}

.footer-grid{

    display:grid;

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

    gap:40px;

}


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

.footer-brand{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.footer-logo{

    display:flex;

    align-items:center;

    gap:15px;

}

.footer-logo img{

    width:55px;

    height:55px;

    object-fit:contain;

}

.footer-logo h2{

    color:var(--text);

    font-size:1.5rem;

    font-weight:var(--weight-bold);

}

.footer-description{

    color:var(--text-muted);

    line-height:1.8;

}


/*======================================
TITLE
======================================*/

.footer-title{

    margin-bottom:20px;

    color:var(--text);

    font-size:1.1rem;

    font-weight:var(--weight-bold);

}


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

.footer-links{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer-links a{

    color:var(--text-muted);

    transition:var(--transition);

}

.footer-links a:hover{

    color:var(--primary);

    padding-left:6px;

}


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

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.footer-contact li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    color:var(--text-muted);

}

.footer-contact i,
.footer-contact svg{

    color:var(--primary);

    margin-top:2px;

}


/*======================================
NEWSLETTER
======================================*/

.footer-newsletter{

    margin-top:25px;

}

.footer-newsletter form{

    display:flex;

    gap:12px;

    margin-top:15px;

}

.footer-newsletter input{

    flex:1;

}


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

.footer-social{

    display:flex;

    gap:12px;

    margin-top:25px;

}

.footer-social a{

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--surface);

    color:var(--text);

    transition:var(--transition);

}

.footer-social a:hover{

    background:var(--primary);

    color:#fff;

    transform:translateY(-4px);

}


/*======================================
PAYMENT
======================================*/

.footer-payments{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:25px;

}

.footer-payment{

    width:60px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--surface);

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

    border-radius:var(--radius);

}

.footer-payment img{

    max-width:38px;

    max-height:22px;

}


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

.footer-bottom{

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

    padding:22px 0;

}

.footer-bottom-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.footer-copy{

    color:var(--text-muted);

}

.footer-bottom-links{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.footer-bottom-links a{

    color:var(--text-muted);

    transition:var(--transition);

}

.footer-bottom-links a:hover{

    color:var(--primary);

}


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

@media(max-width:991px){

    .footer-grid{

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

    }

}

@media(max-width:767px){

    .footer{

        margin-top:60px;

    }

    .footer-top{

        padding:50px 0 40px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:35px;

    }

    .footer-newsletter form{

        flex-direction:column;

    }

    .footer-newsletter .btn{

        width:100%;

    }

    .footer-bottom-content{

        flex-direction:column;

        text-align:center;

    }

    .footer-bottom-links{

        justify-content:center;

    }

}