/* =========================
   TABLET
========================= */

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

    .container{
        width:95%;
    }

    .hero h1{
        font-size:3.5rem;
    }

    .section-title h2{
        font-size:2.5rem;
    }

    .about-content,
    .booking-container{
        grid-template-columns:1fr;
    }

    .stats-grid{
        grid-template-columns:
        repeat(2,1fr);
    }

    .process-grid{
        grid-template-columns:
        repeat(2,1fr);
    }

}

/* =========================
   MOBILE
========================= */

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

    section{
        padding:80px 5%;
    }

    /* HERO */

    .hero{
        min-height:90vh;
    }

    .hero h1{
        font-size:2.5rem;
        line-height:1.2;
    }

    .hero p{
        font-size:.95rem;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .btn-gold,
    .btn-outline{
        width:100%;
        text-align:center;
    }

    /* TITLES */

    .section-title h2{
        font-size:2rem;
    }

    /* GRID */

    .service-grid,
    .gallery-grid,
    .why-grid,
    .facility-grid,
    .testimonial-grid,
    .value-grid,
    .special-grid{

        grid-template-columns:1fr;

    }

    /* STATS */

    .stats-grid{

        grid-template-columns:1fr;

    }

    /* PROCESS */

    .process-grid{

        grid-template-columns:1fr;

    }

    /* BOOKING */

    .booking-container{

        grid-template-columns:1fr;

    }

    .booking-form{

        padding:25px;

    }

    /* GALLERY */

    .gallery-item img{

        height:240px;

    }

    /* PROMO */

    .promo-banner h1{

        font-size:3rem;

    }

    /* CTA */

    .cta h2{

        font-size:2rem;

    }

    /* FOOTER */

    .footer-links{

        flex-direction:column;

        gap:15px;

    }

}

/* =========================
   SMALL PHONE
========================= */

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

    .hero h1{
        font-size:2rem;
    }

    .hero-tag{
        font-size:.8rem;
    }

    .section-title h2{
        font-size:1.8rem;
    }

    .page-banner h1{
        font-size:2rem;
    }

    .page-banner p{
        font-size:.9rem;
    }

    .booking-btn{
        font-size:14px;
    }

    .stat-box h3{
        font-size:2rem;
    }

    .service-card,
    .package-card,
    .facility-card,
    .why-card,
    .testimonial-card{

        padding:20px;

    }

}

/* =========================
   NAVBAR MOBILE
========================= */

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

    .navbar{

        padding:15px 5%;

    }

    .navbar ul{

        display:none;

    }

    .menu-toggle{

        display:block;

        font-size:28px;

        cursor:pointer;

        color:#fff;

    }

    .mobile-menu{

        position:fixed;

        top:0;
        right:-100%;

        width:280px;
        height:100vh;

        background:#111;

        padding:80px 30px;

        transition:.4s;

        z-index:9999;

    }

    .mobile-menu.active{

        right:0;

    }

    .mobile-menu a{

        display:block;

        margin-bottom:20px;

        color:#fff;

        text-decoration:none;

        font-size:18px;

    }

}

/* =========================
   FLOATING WA
========================= */

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

    .floating-wa{

        width:55px;
        height:55px;

        right:20px;
        bottom:20px;

    }

    #topBtn{

        width:45px;
        height:45px;

        right:20px;
        bottom:90px;

    }

}