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

.site-footer{
    background:#F8F4EE;
    border-top:1px solid #E8DED0;
}

.site-footer .container{
    width:min(1500px,92%);
    margin:auto;
}

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

.footer-top{
    padding:90px 0 70px;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.3fr 1.6fr;
    gap:50px;
}

/*==================================================
LOGO
==================================================*/

.footer-logo img{
    width:190px;
    margin-bottom:25px;
}

.footer-about p{
    color:#666;
    line-height:1.9;
    margin-bottom:30px;
    font-size:15px;
}

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

.footer-social{
    display:flex;
    gap:12px;
}

.footer-social a{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #DDD;
    border-radius:50%;
    color:#333;
    text-decoration:none;
    transition:.35s;
}

.footer-social a:hover{
    background:#B88A5A;
    color:#fff;
    border-color:#B88A5A;
    transform:translateY(-4px);
}

/*==================================================
HEADINGS
==================================================*/

.footer-column h4{
    font-size:20px;
    margin-bottom:28px;
    color:#1E1E1E;
    font-weight:600;
}

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

.footer-column ul{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-column ul li{
    margin-bottom:16px;
}

.footer-column ul li a{
    color:#666;
    text-decoration:none;
    transition:.3s;
}

.footer-column ul li a:hover{
    color:#B88A5A;
    padding-left:6px;
}

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

.footer-contact li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    color:#666;
}

.footer-contact i{
    color:#B88A5A;
    font-size:20px;
    margin-top:2px;
}

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

.newsletter-text{
    color:#666;
    line-height:1.8;
    margin-bottom:22px;
}

.newsletter-form{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.newsletter-form input{
    width:100%;
    height:52px;
    border:1px solid #DDD;
    padding:0 18px;
    border-radius:8px;
    font-size:15px;
    outline:none;
}

.newsletter-form input:focus{
    border-color:#B88A5A;
}

.newsletter-form button{
    height:52px;
    border:none;
    background:#B88A5A;
    color:#fff;
    border-radius:8px;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
    transition:.3s;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.newsletter-form button:hover{
    background:#A37345;
}

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

.footer-bottom{
    background:#203A5A;
    padding:22px 0;
}

.footer-bottom .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
}

.footer-bottom p{
    color:#fff;
    margin:0;
    font-size:14px;
}

.footer-bottom-links{
    display:flex;
    gap:30px;
}

.footer-bottom-links a{
    color:#fff;
    text-decoration:none;
    font-size:14px;
    transition:.3s;
}

.footer-bottom-links a:hover{
    color:#D7B38A;
}

/*==================================================
ANIMATION
==================================================*/

.site-footer{
    opacity:0;
    transform:translateY(50px);
    transition:.8s ease;
}

.site-footer.show{
    opacity:1;
    transform:translateY(0);
}

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

@media(max-width:1200px){

    .footer-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:768px){

    .footer-grid{
        grid-template-columns:1fr;
    }

    .footer-bottom .container{
        flex-direction:column;
        text-align:center;
    }

    .footer-bottom-links{
        justify-content:center;
    }

}