@media screen and (min-width:990px) and (max-width:1440px) {
     :root {
        --fs-sm: 0.75rem;
        --fs-base: 0.85rem;
        --fs-lg: 1.05rem;
        --fs-xl: 1.5rem;
        --heading-xl: 3rem;
        --heading-lg: 2rem;
        --heading-md: 1.25rem;
        --heading-sm: 1rem;
    }
    .section {
        padding: 3rem 2rem;
    }
    .about-facility-card {
        gap: 0.75rem;
    }
    .about-facility-card .facility {
        padding: 0.3rem 0.6rem;
    }
}

@media screen and (max-width:990px) {
     :root {
        --fs-sm: 0.75rem;
        --fs-base: 0.85rem;
        --fs-lg: 1rem;
        --fs-xl: 1.5rem;
        --heading-xl: 3rem;
        --heading-lg: 2rem;
        --heading-md: 1.25rem;
        --heading-sm: 1rem;
    }
    .rooms .rooms-headcard .card-grid {
        flex-direction: column;
        position: unset;
        width: 100%;
        gap: 1rem;
    }
    .testimonial-card {
        padding: 1rem;
    }
    .footer .footer-ph {
        width: 40px;
        height: 40px;
    }
    .footer-icon {
        width: 30px;
    }
    .section {
        padding: 2rem;
    }
}

@media screen and (max-width:720px) {
     :root {
        --fs-sm: 0.75rem;
        --fs-base: 0.85rem;
        --fs-lg: 1rem;
        --fs-xl: 1.2rem;
        --heading-xl: 2.5rem;
        --heading-lg: 1.5rem;
        --heading-md: 1rem;
        --heading-sm: 0.85rem;
    }
    body {
        overflow-x: hidden;
    }
    .navbar-brand {
        width: 150px;
    }
    .hero-section .swiper-button-prev,
    .hero-section .swiper-button-next {
        width: 40px;
        height: 40px;
        padding: 0.5rem;
    }
    .swiper-button-next:after,
    .swiper-button-prev:after {
        width: 100%;
    }
    .section {
        padding: 1rem;
    }
    .section .content-main {
        padding: 0;
    }
    .rooms .rooms-headcard {
        padding: 1rem;
    }
    .rooms .rooms-detail {
        margin-top: 1rem;
    }
    .info-banner {
        padding: 1rem;
        margin: 2rem 0 0 0;
    }
    .btn-fix-whatsapp {
        width: 80px;
        bottom: 10rem;
    }
    .btn-fix img {
        width: 80px;
    }
    .hero-section{
        padding: 0 1rem 1rem 1rem;
    }
}