/* =====================================================
   SEQUENT TOURS & TRAVELS
   FILE        : footer.css
   VERSION     : 1.0
   AUTHOR      : Sequent Travels
   DESCRIPTION : Global Footer, Footer Links, Contact,
                 Social Icons, Map and Responsive Footer
===================================================== */


/* =====================================================
   01. FOOTER
===================================================== */

.footer{
    width:100%;
    padding:70px 80px 22px;
    background:#111827;
    color:#FFFFFF;
    overflow:hidden;
}


/* =====================================================
   02. FOOTER GRID
===================================================== */

.footer-container{
    width:100%;
    max-width:1280px;
    margin:0 auto;

    display:grid;
    grid-template-columns:1.2fr 1fr 1fr 1fr;
    gap:50px;

    align-items:start;
}

.footer-col{
    min-width:0;
}


/* =====================================================
   03. FOOTER LOGO
===================================================== */

.footer-logo{
    height:56px;
    width:auto;

    display:block;

    margin-bottom:18px;
}


/* =====================================================
   04. FOOTER TEXT
===================================================== */

.footer-col p{
    margin:0;

    color:#D1D5DB;

    font-size:15px;
    line-height:1.9;
}


/* =====================================================
   05. FOOTER HEADINGS
===================================================== */

.footer-col h3{
    margin:0 0 22px;

    color:#FFFFFF;

    font-size:20px;
    font-weight:500;
    line-height:1.4;
}


/* =====================================================
   06. FOOTER LINKS
===================================================== */

.footer-col a{
    display:block;

    margin-bottom:14px;

    color:#D1D5DB;

    text-decoration:none;

    transition:color .3s ease;
}

.footer-col a:hover{
    color:#D97706;
}


/* =====================================================
   07. FOOTER CONTACT
===================================================== */

.footer-col:last-child p{
    width:100%;

    display:flex;
    align-items:flex-start;
    gap:10px;

    margin-bottom:18px;

    white-space:normal;
}

.footer-col:last-child p i{
    flex:0 0 auto;

    margin-top:6px;
}

.footer-col:last-child .bi-telephone-fill{
    color:#E66A36;
}

.footer-col:last-child .bi-envelope-fill{
    color:#D97706;
}

.footer-col:last-child .bi-geo-alt-fill{
    color:#D97706;
}

.contact-link{
    color:inherit;
    text-decoration:none;
    cursor:pointer;
    font-weight:500;
    transition:color .3s ease;
}

.contact-link:hover{
    color:#FFB561;
}


/* =====================================================
   08. FOOTER SOCIAL
===================================================== */

.footer-social{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;

    margin-top:30px;
}

.footer-social a{
    width:50px;
    height:50px;

    margin:0;

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

    flex:0 0 50px;

    border-radius:50%;

    background:rgba(255,255,255,.06);
    color:#FFFFFF;

    font-size:20px;
    line-height:1;

    text-decoration:none;

    transition:background .3s ease,transform .3s ease;
}

.footer-social a i{
    color:#FFFFFF;

    line-height:1;

    transition:color .3s ease;
}

.footer-social a:hover{
    background:#D97706;
    color:#FFFFFF;

    transform:translateY(-2px);
}

.footer-social a:hover i{
    color:#FFFFFF;
}


/* =====================================================
   09. FOOTER MAP
===================================================== */

.footer-map{
    width:100%;

    display:block;

    margin-top:18px;
    margin-bottom:0;

    overflow:hidden;

    border-radius:16px;
}

.footer-map img{
    width:100%;
    height:120px;

    display:block;

    object-fit:cover;

    border-radius:16px;

    transition:transform .35s ease;
}

.footer-map:hover img{
    transform:scale(1.04);
}


/* =====================================================
   10. FOOTER BOTTOM / COPYRIGHT
===================================================== */

.footer-bottom{
    width:100%;
    max-width:1280px;

    margin:55px auto 0;
    padding-top:18px;

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

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

    color:#9CA3AF;

    font-size:13px;
    line-height:1.6;
}


/* =====================================================
   11. FOOTER - TABLET
===================================================== */

@media (max-width:1024px){

    .footer{
        padding:80px 50px 28px;
    }

    .footer-container{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:40px;
    }

}


/* =====================================================
   12. FOOTER - MOBILE
===================================================== */

@media (max-width:768px){

    .footer{
        padding:70px 24px 24px;
    }

    .footer-container{
        grid-template-columns:1fr;
        gap:34px;
    }

    .footer-col:last-child p{
        max-width:100%;
    }

    .footer-map img{
        height:150px;
    }

    .footer-bottom{
        margin-top:45px;

        justify-content:center;

        text-align:center;
    }

}


/* =====================================================
   13. FOOTER - SMALL MOBILE
===================================================== */

@media (max-width:430px){

    .footer{
        padding:60px 20px 22px;
    }

    .footer-container{
        gap:32px;
    }

    .footer-col h3{
        margin-bottom:18px;

        font-size:19px;
    }

    .footer-col p,
    .footer-col a{
        font-size:14px;
    }

    .footer-social{
        gap:12px;

        margin-top:24px;
    }

    .footer-social a{
        width:46px;
        height:46px;

        flex-basis:46px;

        font-size:19px;
    }

    .footer-map img{
        height:135px;
    }

    .footer-bottom{
        margin-top:38px;

        font-size:12px;
    }

}


/* =====================================================
   14. FLOATING WHATSAPP BUTTON
===================================================== */

.floating-whatsapp{
    position:fixed;

    right:24px;
    bottom:24px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    padding:14px 18px;

    background:#25D366;
    color:#FFFFFF;

    border-radius:999px;

    text-decoration:none;
    font-weight:600;

    box-shadow:0 12px 30px rgba(37,211,102,.35);

    z-index:9999;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

    animation:whatsappPulse 2.5s infinite;
}

.floating-whatsapp i{
    font-size:24px;
    line-height:1;
}

.floating-whatsapp:hover{
    color:#FFFFFF;

    transform:translateY(-3px);

    box-shadow:
        0 16px 36px rgba(37,211,102,.45);
}


/* =====================================================
   14.1 WHATSAPP PULSE ANIMATION
===================================================== */

@keyframes whatsappPulse{

    0%{
        box-shadow:
            0 0 0 0 rgba(37,211,102,.45);
    }

    70%{
        box-shadow:
            0 0 0 14px rgba(37,211,102,0);
    }

    100%{
        box-shadow:
            0 0 0 0 rgba(37,211,102,0);
    }

}


/* =====================================================
   14.2 FLOATING WHATSAPP - MOBILE
===================================================== */

@media (max-width:768px){

    .floating-whatsapp{
        right:16px;
        bottom:16px;

        padding:14px;
    }

    .floating-whatsapp span{
        display:none;
    }

}

/* Footer map image border radius */

.footer-col img {
    border-radius: 12px;
}