/* ======================================================================
   RESPONSIVE / MEDIA QUERIES
   Only 5 breakpoints are used in this entire file, and each one is
   written ONCE. Every rule that applies at a given width — no matter
   which section of the page it belongs to — sits inside that single
   block.
   ====================================================================== */

@media (max-width: 1200px){
    .packages-section{ padding: 100px 0 120px; }
    .featured-section{ padding: 120px 0; }
  
    .gallery-section{ padding-top: 120px; padding-bottom: 120px; }
    .faq-section{ padding-bottom: 120px; }
    .mega-menu-inner{ gap: 60px; padding-right: 40px; }
        .destinations-section{ padding-top: 120px; }
      .dest-card{ height: 440px; }
          .blog-section{ padding-bottom: 120px; }
  
}
@media (max-width: 1080px){
          .stat-card h3 {
        font-size: 20px;
    }
    .stat-card {
        padding: 15px;
    }
    .stat-card span {
        margin-bottom: 0;
    }
    .stat-card p{
        line-height: 1.5;
    }
    .featured-body {
        padding: 20px;
    }
    .gallery-viewport{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        padding: 0px 20px;
    }
    .gallery-viewport::-webkit-scrollbar{
        display: none;
    }
    .gallery-track{
        justify-content: flex-start;
        margin: 0;
    }
    .gallery-item{
        scroll-snap-align: center;
    }
      .mega-menu-left{ display: none; }

      
      .mega-menu-left{ display: none; }

.mega-menu-inner{
    grid-template-columns: 1fr;
    padding: 110px 60px 50px;
}

.mega-menu-content{
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
}

.mega-menu-right{
    width: 100%;
}

.mega-menu-list{
    padding-left: 0;
    gap: 0;
    width: 100%;
    counter-reset: menu-counter;
}

.mega-menu-list li{
    width: 100%;

}



.mega-menu-list a{
    display: flex;
    align-items: center;
    gap: 22px;
    width: 100%;
    font-size: 50px;
    padding: 15px 0;
    transition: padding-left .3s ease, color .3s ease;
}

.mega-menu-list a::before{
    counter-increment: menu-counter;
    content: counter(menu-counter, decimal-leading-zero);
    position: static;
    transform: none;
    display: inline-block;
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--primary);
    opacity: .9;
}

.mega-menu-list a:hover,
.mega-menu-list a.active{
    padding-left: 7px;
}

.mega-menu-info{
    display: flex;
    flex-direction: row;
  
    width: 100%;
    margin-top: 44px;
    padding-top: 32px;
    border-top:1px solid rgba(255,255,255,.12);
    justify-content: space-between;
            flex-direction: row-reverse;
}

.mega-menu-info-block{
    flex: 1;
}

.mega-info-label{
    font-size: 11px;
    letter-spacing: 1.6px;
}

.mega-menu-info-block a,
.mega-info-line{
    font-size: 14px;
}

  .dest-card{
        --s: .92;
        --c: 1.08;
        --z: 40px;
        height: 380px;
    }
    .dest-nav{ padding: 0 20px; }

}
@media (max-width: 992px){


   
  
    .top-bar-inner{ padding: 0px 30px; }
    .main-nav ul{ gap: 24px; }
    .logo img{ width: 140px; }
   
    .heading-right::before{ display:none; }
    .heading-right p{ padding-left: 0; }
    .season-layout{ grid-template-columns: 1fr; }
    .season-sidebar{ position: static; margin-bottom: 32px; }
    .gallery-item.g-edge{  height: 400px; }
    .gallery-item.g-large{ width: 320px; height: 400px; }
    .gallery-item.g-stack-top{ width: 210px; height: 150px; }
    .gallery-item.g-stack-bottom{ width: 210px; height: 235px; }

    .faq-layout{ grid-template-columns: 1fr;
        gap: 0px;
     }
    .faq-sidebar{ position: static; margin-bottom: 40px;     display: contents; }

    



.faq-list{
    order: 2;
}
.faq-contact-card{
    order: 3;
    margin-top: 50px;

}

    .footer-top{ gap: 50px;
    padding-bottom: 75px; }
    
    .footer-links-row{ grid-template-columns: 1fr 1fr;
    gap: 50px; padding-bottom: 60px; }
    .footer-contact{ grid-column: 1 / -1; }

  
  
    .featured-grid {
            grid-template-columns: repeat(1, 1fr);
    }
        .featured-body {
            padding: 24px 24px;
        }
        .faq-intro-text {
            margin-bottom: 40px;
        }
.season-grid{
    scroll-margin-top: 100px;
}
   .dest-card{ height: 360px; }
    .dest-info{ padding: 20px 16px; }
        

    .blog-grid{ grid-template-columns: 1fr; gap: 30px; }
    .blog-side{ gap: 30px; }
    .blog-card-big .blog-img{ height: 300px; }




}

@media (max-width: 768px){
    /* .top-bar-inner{
        padding: 14px 20px;
    } */
   

    .logo img{ width: 128px; }
    .main-nav ul{
        /* gap: 18px; */
        padding: 14px 20px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* justify-content: flex-start; */
        scrollbar-width: none;
    }
    .main-nav ul::-webkit-scrollbar{
        display: none;
    }
    .main-nav a{
        white-space: nowrap;
    }
   
  
    .hero-content{ padding: 0 20px; }
    .hero-content .para{ font-size: 13px; margin-top: 18px; }
    .about-stats{ grid-template-columns: repeat(2,1fr); margin-bottom: -40px; }
    .about-media{ min-height: 480px; }


    .packages-carousel-nav{
        align-self: flex-end;
    }
        .mega-menu-list a {
            font-size: 44px;
        }


 
     .dest-card{ height: 330px; }
    .dest-name{ font-size: 20px; }
    .dest-nav{ padding: 0 12px; }
    .dest-nav button.owl-prev,
    .dest-nav button.owl-next{ width: 38px; height: 38px; font-size: 13px !important; }


   
   


}

@media (max-width: 576px){
    .featured-section{ padding: 110px 0; }
    .season-section{ padding: 60px 0; }
    .gallery-section{ padding-top: 110px; padding-bottom: 110px; }
    .faq-section{ padding-bottom: 110px; }
    .para{ font-size: 13px; }
   
   
    .about-media{ min-height: 420px; }


    .stat-card h3{ font-size: 18px; }
    .packages-section{ padding: 70px 0 110px; }
  
    .filter-btn{ font-size: 12px; }
   
  
    .package-body{ padding: 18px 18px 20px; }
  
    .season-sidebar{ padding: 6px 16px; }
    .season-item{ padding: 14px 4px; gap: 12px; }
    .season-icon{ width: 38px; height: 38px; font-size: 15px; }
    .gallery-item.g-edge{ width: 260px; height: 300px; }
    .gallery-item.g-large{ width: 230px; height: 300px; }
    .gallery-item.g-stack-top{ width: 165px; height: 115px; }
    .gallery-item.g-stack-bottom{ width: 165px; height: 180px; }
    .gallery-col.gallery-stack{ gap: 14px; }
    .gallery-track{ gap: 16px; }
    .lightbox-nav{ width: 42px; height: 42px; font-size: 16px; }
    .lightbox-prev{ left: 10px; }
    .lightbox-next{ right: 10px; }
    .lightbox-close{ top: 14px; right: 14px; width: 38px; height: 38px; }
    .footer-panel{ padding: 50px 0 36px; }
    .footer-top{ padding-bottom: 25px;     grid-template-columns: 1fr; }
    .footer-links-row{ grid-template-columns: 1fr; padding-bottom: 25px; gap: 40px; }
    .footer-form-row{ grid-template-columns: 1fr; }
  
    .footer-logo{ grid-template-columns: 1fr;  }
    /* .footer-logo-blank{ display: none; } */
    .footer-social{ gap: 12px; }
.footer-social a{ width: 38px; height: 38px; font-size: 15px; }
    .footer-logo-img{ width: 200px; height: auto; }
   
        .top-bar-inner{ padding: 0px 18px; }
          
              .btn-contact{
        padding: 8px 12px;
        /* font-size: 10.5px; */
    }
    .social-icons a {
        font-size: 13px;
    }
    .packages-toolbar {
        margin-bottom: 30px;
        gap: 0px;
    }
   .about-title {
    margin-bottom: 15px;
   }
       .featured-body {
        padding: 20px;
       }
     
       .season-grid {
            grid-template-columns: repeat(1, 1fr);
            gap: 30px;
       }
       .footer-divider {
        margin-bottom: 30px;
        
       }
        .packages-heading{
        grid-template-columns: 1fr;
        gap: 10px;
        }
        .faq-title {
            margin-bottom: 10px;
        }
        .packages-heading {
            border-bottom: none;
            margin-bottom: 0px;
        }
            .season-sidebar {
                margin-bottom: 0;
            }
            .footer-nav {
                flex-direction: column;
                gap: 30px;
                    order: 1;
            }
            .footer-address{
    order: 2;

}
            .footer-col {
                gap: 8px;
            }



            /* Sirf non-scrolled (top) state me navbar minimal karna - sirf logo dikhana */
.site-header:not(.scrolled) .header-left .social-icons{
    display: none;
}
.site-header:not(.scrolled) .contact-wrap{
    display: none;
}
.site-header:not(.scrolled) .main-nav{
    max-height: 0;
    opacity: 0;
    border-color: transparent;
}
.site-header:not(.scrolled) .top-bar{
    border-bottom-color: transparent;
}
.site-header:not(.scrolled) .header-left{
    border-right-color: transparent;
}
.site-header:not(.scrolled) .contact-wrap{
    border-left-color: transparent;
}
.featured-grid {
    gap: 30px;

}
    .mega-menu-list a {
        padding: 7px 0;
font-size: 28px;
    }
    .mega-menu-content {
        justify-content: center;
    }
        .mega-menu-inner {
            padding: 0px 25px;
        }
            .mega-menu-info-block a, .mega-info-line {
                font-size: 13px;
            }
                .mega-menu-info {
                            margin-top: 30px;
        padding-top: 30px;
                }
                .mega-menu {
                    height: 100vh;
                    border-radius: 0;
                }
                .menu-toggle.open {
                    height: 34px;
                    width: 34px;
                }

                  .page-header-clean{
        padding: 100px 0 40px;
    }
    .page-header-clean-breadcrumb{
    
        flex-wrap: wrap;
    }
    .mega-sub-arrow {
        font-size: 20px;
    }

     .destinations-section{ padding-top: 110px; }

    .dest-card{
        --s: .9;
        --c: 1;      /* center bada nahi, side cards chhote */
        --z: 0px;    /* mobile pe 3D pop band (card kat jata hai) */
        height: 360px;
    }

    .dest-carousel{ perspective: none; }
    .dest-carousel .owl-stage-outer{ padding: 24px 0 50px; }

    .dest-nav{
        top: calc(50% - 13px);   /* (24 - 50) / 2 */
        padding: 0 6px;
    }
    .dest-nav button.owl-prev,
    .dest-nav button.owl-next{
        width: 34px;
        height: 34px;
        font-size: 12px !important;
        box-shadow: 0 6px 16px rgba(20,30,40,.25);
    }

    .dest-info{ padding: 18px 14px; }
    .dest-tag{ font-size: 9px; }
    .dest-name{ font-size: 22px; }
        .dest-pill{ font-size: 10px; padding: 6px 12px; top: 10px; }
    
                

  .blog-section{ padding-bottom: 110px; }
    .blog-card-row{ flex-direction: column; }
    .blog-card-row .blog-img{ width: 100%; height: 220px; }
    .blog-card-big .blog-img{ height: 220px; }
    .blog-card-big .blog-body{ padding: 18px 18px 20px; }
    .blog-card-overlay{ min-height: 300px; }
    .blog-card-row .blog-body {
        padding: 18px 18px 20px; 

    }








         

}

@media (max-width: 480px){

    .logo img{ width: 120px; }
  
    .btn-contact .btn-text{
        white-space: nowrap;
    }
    .hero-section{ min-height: 480px; }
    .hero-title{ letter-spacing: -0.4px; }

    .package-title{ font-size: 15.5px; }
    .price-value{ font-size: 16px; }
    .featured-body{
                padding: 18px;
    }
    .featured-title{ font-size: 15.5px; }
    .faq-question{ padding: 13px 20px; font-size: 14px; gap: 14px; }
    .faq-answer p{ padding: 0 20px 20px; }
    .faq-contact-card{ padding: 24px 20px; }
    .main-nav a {
            font-size: 10px;

    }
      
            .social-icons a {
                font-size: 12px;
            }
            .social-icons {
                gap: 15px;
            }
            .contact-wrap {
                padding-left: 15px;
            }
            .header-left {
                padding-right: 15px;
            }
            .btn-contact {
                font-size: 11px;
                   padding: 7px 10px;
            }
            .about-stats {
                gap: 12px;
            }
                .stat-card {
                    padding: 11px;
                }
                    .stat-card h3 {
                        font-size: 15px;
                    }
                        .featured-card{ flex-direction: column; }
    .featured-img{ width: 100%; aspect-ratio: 16/10; }
    .featured-grid{ grid-template-columns: 1fr; }
        .faq-sidebar {
            margin-bottom: 20px;
        }
        .footer-bottom-inner span ,.webpyrix,.footer-bottom-links a{
            font-size: 11px;
        }
      
        .packages-padding{
            padding-right: 12px;
            padding-left: 12px;
        }
        .packages-carousel-nav button.owl-prev, .packages-carousel-nav button.owl-next {
            height: 37px;
            width: 37px;
        }
        .packages-bottom-action {
            margin-top: 48px;
        }
        .packages-eyebrow {
            font-size: 10px;
            
        }
        .heading-left::before {
            margin-bottom: 14px;
            width: 37px;
        }
        .btn-padding{
            margin-top: 30px;
        }
            .lightbox-nav {
                        width: 33px;
        height: 33px;
        font-size: 13px;
            }
                .lightbox-close {
                            width: 33px;
        height: 33px;
        font-size: 14px;
                }
                .mega-sub-list li {
                    margin-bottom: 4px;
                }
                .mega-sub-list li a {
                    font-size: 18px;
                }
                    .dest-card{ height: 320px; }
    .dest-name{ font-size: 20px; }


                

}

/* These two use a different media feature (height / hover capability)
   than the max-width scale above, so they stay on their own. */


@media (hover: none){
    .package-card:active,
    .featured-card:active{
        transform: scale(.98);
    }
    .package-cta:active,
    .long-btn:active,
    .btn-contact:active{
        transform: scale(.96);
    }
}