/*==========================================================
  ROVING RUSH
  responsive.css
  PART 1
  Large Desktop • Desktop • Laptop
==========================================================*/

/*==========================================================
  LARGE DESKTOP
  1600px+
==========================================================*/

@media (min-width:1600px){

    :root{
        --container-width:1500px;
    }

    .container{
        max-width:1500px;
    }

    .hero-title{
        font-size:7rem;
    }

    .hero-description{
        max-width:850px;
        font-size:1.3rem;
    }

    .section{
        padding:9rem 0;
    }

}

/*==========================================================
  DESKTOP
  1400px
==========================================================*/

@media (max-width:1400px){

    .container{
        max-width:1200px;
    }

    .services-grid{
        grid-template-columns:repeat(4,1fr);
    }

    .gallery-grid{
        grid-template-columns:repeat(4,1fr);
    }

    .hero-title{
        font-size:clamp(3.5rem,6vw,5.5rem);
    }

}

/*==========================================================
  LARGE LAPTOP
  1200px
==========================================================*/

@media (max-width:1200px){

    .container{
        width:min(100% - 3rem,1100px);
    }

    .about-grid{
        gap:3rem;
    }

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

    .gallery-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .why-grid{
        grid-template-columns:repeat(3,1fr);
    }

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

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

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

}

/*==========================================================
  LAPTOP
  1024px
==========================================================*/

@media (max-width:1024px){

    html{
        font-size:15px;
    }

    .section{
        padding:6rem 0;
    }

    .hero{
        min-height:90vh;
    }

    .hero-title{
        font-size:clamp(3rem,6vw,4.5rem);
    }

    .hero-description{
        max-width:650px;
    }

    .hero-buttons{
        gap:1rem;
    }

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

    .about-grid{
        grid-template-columns:1fr;
    }

    .about-image{
        order:-1;
    }

    .about-image img{
        height:520px;
    }

    .experience-card{
        right:20px;
        bottom:20px;
    }

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

    .contact-grid{
        grid-template-columns:1fr;
    }

    .map-container{
        margin-top:2rem;
    }

}

/*==========================================================
  SMALL LAPTOP
==========================================================*/

@media (max-width:900px){

    .hero-stats{
        grid-template-columns:1fr;
        max-width:420px;
    }

    .destination-image img{
        height:280px;
    }

    .gallery-item img{
        height:250px;
    }

    .testimonial-slider{
        grid-template-columns:1fr;
    }

}
/*==========================================================
  TABLET
  992px
==========================================================*/

@media (max-width:992px){

    :root{
        --section-padding:5rem 0;
        --nav-height:80px;
    }

    /* Navigation */

    .nav-menu,
    .nav-actions{
        display:none;
    }

    .menu-toggle{
        display:flex;
    }

    .mobile-menu{
        display:block;
    }

    /* Hero */

    .hero{
        min-height:100vh;
        text-align:center;
    }

    .hero-content{
        max-width:700px;
        padding:0 1rem;
    }

    .hero-title{
        font-size:clamp(2.8rem,8vw,4.2rem);
    }

    .hero-description{
        max-width:100%;
    }

    .hero-buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

    /* About */

    .about-grid{
        grid-template-columns:1fr;
        gap:3rem;
    }

    .about-image{
        order:-1;
    }

    .about-image img{
        height:480px;
    }

    .experience-card{
        position:absolute;
        right:20px;
        bottom:20px;
        max-width:240px;
    }

    /* Services */

    .services-grid{
        grid-template-columns:repeat(2,1fr);
        gap:1.5rem;
    }

    /* Destinations */

    .destinations-grid{
        grid-template-columns:1fr 1fr;
        gap:1.5rem;
    }

    /* Why Choose Us */

    .why-grid{
        grid-template-columns:repeat(2,1fr);
        gap:1.5rem;
    }

    /* Gallery */

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

    /* Statistics */

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

    /* Testimonials */

    .testimonial-slider{
        grid-template-columns:1fr;
    }

    /* Contact */

    .contact-grid{
        grid-template-columns:1fr;
    }

    /* Footer */

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

}

/*==========================================================
  TABLET
  768px
==========================================================*/

@media (max-width:768px){

    html{
        font-size:15px;
    }

    .container{
        width:min(100% - 2rem,100%);
    }

    .section{
        padding:4.5rem 0;
    }

    .section-header{
        margin-bottom:3rem;
    }

    .section-title{
        font-size:clamp(2rem,6vw,3rem);
    }

    /* Hero */

    .hero{
        padding-top:var(--nav-height);
    }

    .hero-title{
        font-size:clamp(2.4rem,9vw,3.5rem);
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
    }

    .hero-buttons .btn{
        width:100%;
        max-width:320px;
    }

    .hero-stats{
        grid-template-columns:1fr;
        gap:1rem;
    }

    /* About */

    .experience-card{
        position:relative;
        right:auto;
        bottom:auto;
        margin-top:1.5rem;
        max-width:100%;
    }

    .feature-item{
        padding:1rem;
    }

    /* Services */

    .services-grid{
        grid-template-columns:1fr;
    }

    /* Destinations */

    .destinations-grid{
        grid-template-columns:1fr;
    }

    /* Why Choose Us */

    .why-grid{
        grid-template-columns:1fr;
    }

    /* Gallery */

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

    .gallery-item img{
        height:220px;
    }

    /* Statistics */

    .stats-grid{
        grid-template-columns:1fr;
    }

    /* Footer */

    .footer-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .footer-social{
        justify-content:center;
    }

    .footer-bottom{
        flex-direction:column;
        text-align:center;
    }

    /* Floating Buttons */

    .back-to-top{
        right:20px;
        bottom:20px;
    }

    .whatsapp-button{
        left:20px;
        bottom:20px;
    }

}
/*==========================================================
  MOBILE
  576px
==========================================================*/

@media (max-width:576px){

    :root{
        --nav-height:72px;
        --section-padding:4rem 0;
    }

    html{
        font-size:14px;
    }

    .container{
        width:calc(100% - 1.5rem);
    }

    /* Navigation */

    .logo-image{
        width:48px;
    }

    .logo-title{
        font-size:1rem;
    }

    .logo-tagline{
        display:none;
    }

    .mobile-menu{
        width:100%;
    }

    /* Hero */

    .hero{
        min-height:100svh;
        padding-top:var(--nav-height);
    }

    .hero-subtitle{
        font-size:.75rem;
        padding:.6rem 1rem;
    }

    .hero-title{
        font-size:2.4rem;
        line-height:1.1;
    }

    .hero-description{
        font-size:.95rem;
        margin-bottom:2rem;
    }

    .hero-buttons{
        gap:.8rem;
    }

    .hero-buttons .btn{
        width:100%;
    }

    .hero-stat{
        padding:1.25rem;
    }

    /* About */

    .about-image img{
        height:320px;
        border-radius:20px;
    }

    .about-card,
    .experience-card{
        padding:1.5rem;
    }

    .feature-item{
        flex-direction:column;
        text-align:center;
    }

    .feature-icon{
        margin:0 auto;
    }

    /* Services */

    .service-card{
        padding:1.75rem;
    }

    .service-icon{
        width:70px;
        height:70px;
        font-size:1.75rem;
    }

    /* Destinations */

    .destination-image img{
        height:240px;
    }

    .destination-content{
        padding:1.5rem;
    }

    /* Gallery */

    .gallery-grid{
        grid-template-columns:1fr;
    }

    .gallery-item img{
        height:240px;
    }

    /* Video */

    .video-wrapper{
        padding:.75rem;
    }

    .video-wrapper::after{
        width:70px;
        height:70px;
        font-size:1.5rem;
    }

    /* Statistics */

    .stat-card{
        padding:2rem 1.25rem;
    }

    .counter{
        font-size:2.8rem;
    }

    /* Testimonials */

    .testimonial-card{
        padding:1.5rem;
    }

    .testimonial-author img{
        width:60px;
        height:60px;
    }

    /* Contact */

    .contact-card,
    .contact-form{
        padding:1.5rem;
    }

    .map-container iframe{
        height:300px;
    }

    /* Footer */

    .footer{
        padding:4rem 0 2rem;
    }

}

/*==========================================================
  SMALL MOBILE
  480px
==========================================================*/

@media (max-width:480px){

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

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

    .hero-description,
    p{
        font-size:.9rem;
    }

    .btn{
        min-height:50px;
        padding:0 1.5rem;
        font-size:.95rem;
    }

    .section-header{
        margin-bottom:2.5rem;
    }

    .gallery-item img{
        height:220px;
    }

    .destination-image img{
        height:220px;
    }

    .service-card,
    .testimonial-card,
    .contact-card,
    .contact-form{
        border-radius:20px;
    }

    .back-to-top,
    .whatsapp-button{
        width:52px;
        height:52px;
    }

    .lightbox img{
        max-width:95%;
    }

}
/*==========================================================
  EXTRA SMALL DEVICES
  360px
==========================================================*/

@media (max-width:360px){

    html{
        font-size:13px;
    }

    .container{
        width:calc(100% - 1rem);
    }

    .hero{
        min-height:100svh;
    }

    .hero-title{
        font-size:1.8rem;
        line-height:1.15;
    }

    .hero-subtitle{
        font-size:.7rem;
        padding:.5rem .9rem;
    }

    .hero-description{
        font-size:.85rem;
    }

    .btn{
        width:100%;
        min-height:48px;
        padding:0 1rem;
        font-size:.9rem;
    }

    .section{
        padding:3.5rem 0;
    }

    .service-card,
    .about-card,
    .testimonial-card,
    .contact-card,
    .contact-form{
        padding:1.25rem;
    }

    .gallery-item img,
    .destination-image img,
    .about-image img{
        height:200px;
    }

    .counter{
        font-size:2.2rem;
    }

    .footer-bottom{
        font-size:.8rem;
    }

}

/*==========================================================
  LANDSCAPE PHONES
==========================================================*/

@media (max-height:600px) and (orientation:landscape){

    .hero{
        min-height:700px;
    }

    .hero-content{
        padding-top:3rem;
        padding-bottom:3rem;
    }

    .scroll-indicator{
        display:none;
    }

}

/*==========================================================
  LARGE TOUCH DEVICES
==========================================================*/

@media (hover:none){

    .card:hover,
    .service-card:hover,
    .gallery-item:hover,
    .destination-card:hover,
    .why-card:hover,
    .testimonial-card:hover{

        transform:none;

    }

}

/*==========================================================
  ACCESSIBILITY
==========================================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

    .scroll-indicator,
    .floating-shapes{

        display:none;

    }

}

/*==========================================================
  PRINT STYLES
==========================================================*/

@media print{

    body{

        background:#fff !important;

        color:#000 !important;

    }

    .header,
    .footer,
    .loader,
    .back-to-top,
    .whatsapp-button,
    .scroll-progress,
    .hero-video,
    .floating-shapes{

        display:none !important;

    }

    .section{

        padding:2rem 0;

        page-break-inside:avoid;

    }

    a{

        color:#000 !important;

        text-decoration:underline;

    }

}

/*==========================================================
  RESPONSIVE UTILITIES
==========================================================*/

.hide-desktop{
    display:none;
}

@media (max-width:768px){

    .hide-mobile{
        display:none !important;
    }

    .hide-desktop{
        display:block !important;
    }

    .mobile-center{
        text-align:center !important;
    }

    .mobile-full{
        width:100% !important;
    }

    .mobile-stack{
        display:flex;
        flex-direction:column;
        gap:1rem;
    }

}