@media(max-width:992px){

    .nav{

        position:fixed;

        top:90px;
        right:-100%;

        width:280px;
        height:calc(100vh - 90px);

        background:white;

        transition:.3s ease;

        box-shadow:
            -10px 0 30px rgba(0,0,0,.08);

        padding:40px 30px;

    }

    .nav.active{

        right:0;

    }

    .nav-links{

        flex-direction:column;

        gap:30px;

    }

    .menu-toggle{

        display:block;

    }

    .btn-whatsapp{

        display:none;

    }

}

@media(max-width:768px){

    section{

        padding:70px 0;

    }

    .section-title h2{

        font-size:32px;

    }

    .logo-text span{

        font-size:20px;

    }

}

@media(max-width:768px){

    .hero{

        height:auto;

        padding:140px 0 100px;

    }

    .hero-content h1{

        font-size:44px;

    }

    .hero-content p{

        font-size:17px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .tour-buttons{

        flex-direction:column;

    }

    .cta-box h2{

        font-size:36px;

    }

}

@media(max-width:768px){

    .page-hero{

        height:auto;

        padding:140px 0 80px;

    }

    .page-hero-content h1{

        font-size:42px;

    }

    .page-hero-content p{

        font-size:17px;

    }

    .tour-places{

        gap:10px;

    }

}

@media(max-width:992px){

    .tour-layout{

        grid-template-columns:1fr;

    }

    .sidebar-card{

        position:relative;

        top:0;

    }

}

@media(max-width:768px){

    .tour-hero{

        height:auto;

        padding:140px 0 100px;

    }

    .tour-hero-content h1{

        font-size:44px;

    }

    .tour-description h2{

        font-size:34px;

    }

    .included-section h3,
    .recommendations h3{

        font-size:28px;

    }

}

@media(max-width:992px){

    .reservation-layout{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .form-grid{

        grid-template-columns:1fr;

    }

    .reservation-box{

        padding:30px;

    }

}

@media(max-width:992px){

    .contact-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .contact-info-box,
    .contact-form-box{

        padding:30px;

    }

    .contact-info-box h2,
    .contact-form-box h2{

        font-size:30px;

    }

}