/* ================= RESPONSIVE SETTINGS FOR ALL DEVICES ================= */

@media screen and (max-width: 768px) {
    .chat-box {
        width: 300px;
        max-height: 400px;
    }

    .contact-stack {
        bottom: 15px;
        right: 15px;
        gap: 10px;
    }
}

@media screen and (max-width: 480px) {

    .whatsapp-float,
    .chat-btn {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .chat-box {
        width: 100% !important;
        height: 100% !important;
        max-height: 100vh;
        bottom: 0;
        right: 0;
        border-radius: 0;
    }

    .chat-header {
        padding: 20px 15px;
        font-size: 18px;
    }

    .chat-body {
        height: calc(100vh - 130px);
    }

    .contact-stack {
        bottom: 10px;
        right: 10px;
    }
}

@media screen and (max-height: 450px) {
    .chat-box {
        max-height: 80vh;
    }

    .contact-stack {
        flex-direction: row;
    }
}


/* Toppper Section */
@keyframes scroll-toppers {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Carousel MOBILE RESPONSIVE */
@media (max-width: 768px) {

    .hero-slide {
        height: 60vh;
    }

    .hero-content {
        padding: 20px;
        max-width: 100%;
    }

    .hero-content h2 {
        font-size: 22px;
    }

    .hero-content p {
        font-size: 14px;
    }
}