/*====================================================
            LARGE LAPTOPS (1200px and below)
=====================================================*/

@media (max-width:1200px){

    .container{
        width:95%;
    }

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

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

}

/*====================================================
                TABLETS (992px and below)
=====================================================*/

@media (max-width:992px){

    section{
        padding:80px 0;
    }

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

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

    .about-grid,
    .restaurant-grid,
    .gardens-grid,
    .contact-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

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

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

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

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

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

}

/*====================================================
            MOBILE MENU (850px and below)
=====================================================*/

@media (max-width:850px){

    .menu-btn{
        display:block;
        z-index:1001;
    }

    .nav-links{

        position:fixed;

        top:90px;
        right:-100%;

        width:280px;

        height:calc(100vh - 90px);

        background:#111;

        flex-direction:column;

        align-items:center;

        justify-content:flex-start;

        padding-top:50px;

        transition:.4s;

    }

    .nav-links.active{

        right:0;

    }

    .nav-links li{

        width:100%;
        text-align:center;

    }

    .nav-links a{

        display:block;
        padding:18px 0;
        color:#fff !important;

    }

    .book-btn{

        display:none;

    }

}

/*====================================================
                PHONES (768px and below)
=====================================================*/

@media (max-width:768px){

    .hero{
        height:90vh;
    }

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

    .hero-buttons{
        flex-direction:column;
        width:100%;
        max-width:320px;
    }

    .primary-btn,
    .secondary-btn{

        text-align:center;

    }

    .booking{

        margin-top:-40px;

    }

    .booking form{

        grid-template-columns:1fr;

    }

    .section-title h2{

        font-size:2.4rem;

    }

    .about-content h2,
    .restaurant-content h2,
    .gardens-content h2,
    .contact-info h2{

        font-size:2.3rem;

    }

    .room-grid{

        grid-template-columns:1fr;

    }

    .drink-grid{

        grid-template-columns:1fr;

    }

    .gallery-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .stats .container{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr;

    }

}

/*====================================================
            SMALL PHONES (576px and below)
=====================================================*/

@media (max-width:576px){

    body{

        font-size:15px;

    }

    section{

        padding:70px 0;

    }

    .hero h1{

        font-size:2.3rem;

        line-height:1.2;

    }

    .hero-subtitle{

        font-size:.8rem;

        letter-spacing:2px;

    }

    .hero p{

        font-size:.95rem;

    }

    .section-title h2{

        font-size:2rem;

    }

    .about-content h2,
    .restaurant-content h2,
    .gardens-content h2,
    .contact-info h2{

        font-size:2rem;

    }

    .room-content{

        padding:22px;

    }

    .room-footer{

        flex-direction:column;
        align-items:flex-start;
        gap:15px;

    }

    .testimonial{

        padding:30px 20px;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .back-to-top,
    .whatsapp{

        width:50px;
        height:50px;
        right:18px;

    }

    .back-to-top{

        bottom:85px;

    }

    .whatsapp{

        bottom:18px;

    }

}

/*====================================================
        EXTRA SMALL DEVICES (400px and below)
=====================================================*/

@media (max-width:400px){

    .hero h1{

        font-size:2rem;

    }

    .hero-buttons{

        max-width:100%;

    }

    .primary-btn,
    .secondary-btn{

        padding:14px 22px;

    }

    .booking form{

        padding:20px;

    }

    .room-info{

        flex-direction:column;

    }

    .amenity-card{

        padding:30px 20px;

    }

}