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

.site-footer{

    background:linear-gradient(135deg,#5e1220 0%,#741b2a 55%,#8c2438 100%);
    color:#ffffff;

    margin-top:100px;

}

.footer-container{

    width:92%;
    max-width:1400px;

    margin:auto;

    padding:90px 0 35px;

}

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

.footer-top{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    gap:100px;

    padding-bottom:70px;

    border-bottom:1px solid rgba(255,255,255,.15);

}

/* LEFT */

.footer-brand{

    flex:1;

}

.brand-header{

    display:flex;
    align-items:center;

    gap:24px;

    margin-bottom:30px;

}

.brand-header img{

    width:95px;
    height:auto;

}

.brand-title h2{

    margin:0;

    color:#ffffff;

    font-size:36px;

    font-family:"Playfair Display",serif;

}

.brand-title span{

    display:block;

    margin-top:6px;

    color:#d4af37;

    font-size:15px;

    font-weight:600;

    letter-spacing:.5px;

}

.footer-brand p{

    max-width:620px;

    color:rgba(255,255,255,.85);

    font-size:16px;

    line-height:1.9;

}

/* RIGHT */

.footer-connect{

    width:420px;

}

.footer-connect h3{

    color:#ffffff;

    font-size:24px;

    font-family:"Playfair Display",serif;

    margin-bottom:20px;

}

.social-area{

    margin-bottom:45px;

}

.social-icons{

    display:flex;

    gap:16px;

    margin-top:20px;

}

.social-icons a{

    width:52px;
    height:52px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.45);

    display:flex;

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

    color:#ffffff;

    font-size:18px;

    transition:.35s;

}

.social-icons a:hover{

    background:#d4af37;

    border-color:#d4af37;

    transform:translateY(-4px);

}

/* Newsletter */

.newsletter p{

    color:rgba(255,255,255,.80);

    line-height:1.7;

    margin-bottom:22px;

}

.newsletter form{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.newsletter input{

    width:100%;

    padding:16px 22px;

    border-radius:40px;

    border:1px solid rgba(255,255,255,.25);

    background:rgba(255,255,255,.08);

    color:#ffffff;

    font-size:15px;

    outline:none;

}

.newsletter input::placeholder{

    color:rgba(255,255,255,.70);

}

.newsletter button{

    width:170px;

    padding:15px;

    border:none;

    border-radius:40px;

    background:#d4af37;

    color:#5e1220;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

}

.newsletter button:hover{

    background:#ffffff;

}

/* =========================
   Social Section
========================= */

.footer-social{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.footer-social h4{
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}

.social-icons{
    display: flex;
    gap: 14px;
}

.social-icons a{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    color: #741B2A;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 18px;
    transition: all .3s ease;
}

.social-icons a:hover{
    background: #c99a3b;
    color: #fff;
    transform: translateY(-4px);
}

.contact-list li{

    color:rgba(255,255,255,.85);

    line-height:1.8;

}

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

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-top:1px solid rgba(255,255,255,.15);

    padding-top:28px;

}

.footer-left{

    color:rgba(255,255,255,.75);

    font-size:14px;

}

.footer-right{

    display:flex;

    gap:14px;

    align-items:center;

}

.footer-right a{

    color:rgba(255,255,255,.75);

    text-decoration:none;

    transition:.3s;

}

.footer-right a:hover{

    color:#d4af37;

}

.footer-right span{

    color:rgba(255,255,255,.35);

}

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

@media(max-width:1100px){

.footer-top{

    flex-direction:column;

}

.footer-connect{

    width:100%;

}

.footer-links{

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

}

.footer-bottom{

    flex-direction:column;

    gap:15px;

    text-align:center;

}

}

@media(max-width:700px){

.footer-links{

    grid-template-columns:1fr;

}

.brand-header{

    flex-direction:column;

    align-items:flex-start;

}

.brand-title h2{

    font-size:30px;

}

}