/* ================= FOOTER ================= */
.site-footer{
    background:#fff;
    border-top:1px solid #eaeaea;
    padding:50px 30px 20px;
    color:#253d4e;
}

.footer-main{
    display:grid;
    grid-template-columns:2fr repeat(5,1fr);
    gap:30px;
}

.footer-brand img{
    width:160px;
    margin-bottom:12px;
}

.brand-desc{
    font-size:14px;
    margin-bottom:18px;
}

.contact-list{
    list-style:none;
    font-size:14px;
}
.contact-list li{
    display:flex;
    gap:10px;
    margin-bottom:10px;
    align-items:flex-start;
}
.contact-list i{
    color:#a63636;
    font-size:18px;
}

.footer-column h4{
    font-size:18px;
    margin-bottom:16px;
}
.footer-column ul{
    list-style:none;
}
.footer-column ul a{
    text-decoration:none;
}
.footer-column li{
    font-size:14px;
    color:#555;
    margin-bottom:10px;
    cursor:pointer;
}
.footer-column li:hover{
    color:#a63636;
}

.app-buttons{
    display:flex;
    gap:10px;
    margin:14px 0;
}
.app-buttons img{
    width:120px;
}

.secure-text-footer{
    font-size:14px;
    margin-top:10px;
}

.payment-icons img{
    width:180px;
    margin-top:10px;
}

/* ===== FOOTER BOTTOM ===== */
.footer-bottom{
    border-top:1px solid #eaeaea;
    margin-top:40px;
    padding-top:20px;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    align-items:center;
    gap:20px;
}

.footer-bottom span{
    color:#a63636;
}

.footer-support{
    display:flex;
    gap:30px;
}
.footer-support div{
    display:flex;
    gap:10px;
    align-items:center;
}
.footer-support i{
    font-size:28px;
    color:#a63636;
}
.footer-support strong{
    font-size:18px;
}
.footer-support span{
    display:block;
    font-size:13px;
    color:#777;
}

.footer-social{
    text-align:right;
}
.social-icons{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin:8px 0;
}
.social-icons a{
    text-decoration:none;
}
.social-icons i{
    background:#a63636;
    color:#fff;
    width:34px;
    height:34px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.footer-social p{
    font-size:13px;
    color:#777;
}

/* ================= RESPONSIVE ================= */
@media(max-width:1200px){
    .footer-main{
        grid-template-columns:1fr 1fr 1fr;
    }
}

@media(max-width:768px){
    .footer-main{
        grid-template-columns:1fr;
    }
    .footer-bottom{
        grid-template-columns:1fr;
        text-align:center;
    }
    .footer-support{
        justify-content:center;
    }
    .footer-social{
        text-align:center;
    }
    .social-icons{
        justify-content:center;
    }
}
/* ======================================================
   Floating WhatsApp Button
====================================================== */

.whatsapp-float{
    position:fixed;
    right:24px;
    bottom:24px;
    width:62px;
    height:62px;
    background:#25D366;
    color:#fff;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    box-shadow:0 10px 25px rgba(0,0,0,.18);
    transition:all .35s ease;
    z-index:99999;
}

.whatsapp-float:hover{
    transform:translateY(-5px) scale(1.08);
    box-shadow:0 18px 35px rgba(37,211,102,.35);
}

.whatsapp-float i{
    font-size:34px;
    line-height:1;
}

/* Online Indicator */

.whatsapp-online{
    position:absolute;
    top:6px;
    right:6px;
    width:14px;
    height:14px;
    background:#00e676;
    border:3px solid #fff;
    border-radius:50%;
}

/* Tooltip */

.whatsapp-tooltip{
    position:absolute;
    right:78px;
    background:#222;
    color:#fff;
    padding:10px 15px;
    border-radius:8px;
    font-size:14px;
    font-weight:500;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    transition:.3s;
    pointer-events:none;
}

.whatsapp-tooltip::after{
    content:"";
    position:absolute;
    top:50%;
    right:-6px;
    transform:translateY(-50%);
    border-left:6px solid #222;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
}

.whatsapp-float:hover .whatsapp-tooltip{
    opacity:1;
    visibility:visible;
}

/* Small Floating Effect */

@keyframes whatsappFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-6px);
    }

    100%{
        transform:translateY(0);
    }

}

.whatsapp-float{
    animation:whatsappFloat 3s ease-in-out infinite;
}

/* Mobile */

@media (max-width:768px){

    .whatsapp-float{

        width:56px;
        height:56px;
        right:16px;
        bottom:16px;

    }

    .whatsapp-float i{

        font-size:30px;

    }

    .whatsapp-tooltip{

        display:none;

    }

    .whatsapp-online{

        width:12px;
        height:12px;
        top:5px;
        right:5px;

    }

}