/* =====================================================
   GLOBAL RESPONSIVE FIX SYSTEM
===================================================== */

*{
  box-sizing: border-box;
}

img{
  max-width:100%;
  height:auto;
}

body{
  overflow-x:hidden;
}

/* Fluid typography */
.hero h1{
  font-size: clamp(28px, 5vw, 60px) !important;
}

.hero p{
  font-size: clamp(16px, 2.8vw, 26px) !important;
}

/* =====================================================
   SEARCH BAR FIX
===================================================== */

@media(max-width:1200px){
  .search-box{
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media(max-width:992px){
  .search-box{
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media(max-width:600px){
  .search-box{
    grid-template-columns: 1fr !important;
  }

    .search-btn {
        padding: 15px 25px;
        width: 100%;
    }

  
}


 
/* Mobile slider */
@media (max-width: 768px) {
  .dest-grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 10px 16px;

    /* smooth scrolling */
    -webkit-overflow-scrolling: touch;
  }

  .dest-grid::-webkit-scrollbar {
    display: none; /* hide scrollbar */
  }

  .dest-card {
    min-width: 75%;           /* controls slide width */
    flex-shrink: 0;
    scroll-snap-align: center;
  }
}

/* Desktop: hide mobile menu-contact */
.menu-contact {
  display: none;
}

/* Desktop: keep desktop-only elements visible */
.desktop-only {
  display: inline-flex;
}

/* Mobile */
@media (max-width: 768px) {

  /* Hide desktop versions */
  .desktop-only {
    display: none;
  }

  /* Show menu-contact inside nav */
  .menu-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #eee;
    align-items: center;
  }

  .menu-support {
    color: #112F4E;
  }

  /* Optional: style links in mobile menu */
  .main-nav a {
    display: block;
    padding: 10px 0;
  }
}


 
/* Desktop grid */
.air-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Mobile slider */
@media (max-width: 768px) {
  .air-grid {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    scroll-snap-type: x mandatory;
    padding: 10px 16px;
    -webkit-overflow-scrolling: touch;
  }

  .air-grid::-webkit-scrollbar {
    display: none;
  }

  .air-card {
    min-width: 85%;
    flex-shrink: 0;
    scroll-snap-align: center;
  }
}

/* Pagination dots */
.air-dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.air-dot {
  width: 8px;
  height: 8px;
  background: #cfd6dc;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.air-dot.active {
  width: 20px;
  border-radius: 10px;
  background: #0ca3c8;
}

@media (max-width: 768px) {
  .air-dots {
    display: flex;
  }
}


/* =====================================================
   HERO SECTION
===================================================== */

.hero{
  min-height: auto;
  padding: 60px 0;
}

/* =====================================================
   DESTINATIONS
===================================================== */

@media(max-width:992px){
  .destinations{
    grid-template-columns:1fr !important;
    margin: 0 10px !important;
  }

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

@media(max-width:600px){
  .dest-grid{
    grid-template-columns:1fr !important;
  }

  .dest-card{
    flex-direction: column;
    text-align:center;
  }

  .dest-btn{
    margin-top:10px;
  }
}


/* =====================================================
   AIRLINES
===================================================== */

.air-grid{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 8px !important;
}

.air-card{
  width:100% !important;
  max-width:340px;
  height:auto !important;
  margin:auto;
}

.air-bottom{
  width:100% !important;
}

/* =====================================================
   DISCOVER SECTION
===================================================== */

@media(max-width:992px){
  .discover{
    grid-template-columns:1fr !important;
    text-align:center;
  }

  .feature-grid{
    grid-template-columns:1fr 1fr !important;
  }
}

@media(max-width:600px){
  .feature-grid{
    grid-template-columns:1fr !important;
  }
}

/* =====================================================
   INFO BOX
===================================================== */

@media(max-width:600px){
  .info-box{
    flex-direction: column;
    align-items:center;
    text-align:center;
  }

  .info-content h4,
  .info-content p{
    width:auto !important;
  }
}

/* =====================================================
   FAQ SECTION
===================================================== */

@media(max-width:768px){
  .faq{
    display:block !important;
    height:auto !important;
    padding: 30px 16px !important;
    
  }

  .faq-left{
    display:none !important;
  }

  .faq-right{
    height:auto !important;
  }

  .faq-list{
    max-height:none !important;
    overflow: visible !important;
  }
}

/* =====================================================
   REVIEWS
===================================================== */

@media(max-width:768px){
  .review-track{
    animation-duration: 60s;
  }

  .review-card{
    min-width:260px;
    max-width:260px;
  }
}

/* =====================================================
   FOOTER
===================================================== */

.footer-bg{
  height:auto !important;
  min-height:200px;
}

/* =====================================================
   NAVBAR SAFETY FIX
===================================================== */

@media(max-width:768px){
  .topbar{
    position: relative;
  }

  .container{
    padding: 10px 14px;
  }
}

/* =====================================================
   OVERFLOW PROTECTION
===================================================== */

.hero,
.destinations-wrapper,
.airlines,
.discover,
.reviews-section,
.testimonials,
.faq{
  max-width:100vw;
}

/* =====================================================
   SMALL MOBILE OPTIMIZATION
===================================================== */

@media(max-width:480px){
  .section-title{
    font-size: 28px !important;
  }

  .section-subtitle{
    font-size: 20px !important;
  }

  .air-title span{
    font-size: 22px !important;
  }

   

}

/* =========================
   SEARCH INPUT STYLING
========================= */

.search-input{
  width:100%;
  border:none;
  background:transparent;
  outline:none;
  font-size:15px;
  font-weight:600;
  margin-top:4px;
  cursor:pointer;
}

.search-item label{
  font-size:13px;
  color:#777;
  font-weight:500;
}

/* Input focus effect */
.search-item:focus-within{
  background:rgba(11,94,215,0.04);
  border-radius:8px;
}

/* Date input cursor */
.search-input[type="date"]{
  cursor:pointer;
}

/* Select fix */
.search-item select{
  appearance:none;
  background:transparent;
  border:none;
  outline:none;
  cursor:pointer;
}

/* =====================================================
   FORCE HIDE DIVIDERS ON SMALL SCREENS
===================================================== */

/* Desktop default */
.h-line,
.v-line{
  display:block;
}

/* Tablet */
@media(max-width:992px){
  .search-box .h-line,
  .search-box .v-line{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    width:0 !important;
    height:0 !important;
  }
}

/* Mobile */
@media(max-width:600px){
  .search-box .h-line,
  .search-box .v-line{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    width:0 !important;
    height:0 !important;
  }

  .hero  h1,p{
    justify-items: center !important;
    text-align: center !important;
  }

  .section-header {
    flex-direction: column;   /* line goes above text */
    justify-content: center;
    text-align: center;
  }

  .section-title{
    text-align: center;
  }
  .section-line {
    margin-bottom: 8px;
  }
   

}

/* Extra safety */
@media(max-width:480px){
  .search-box .h-line,
  .search-box .v-line{
    display:none !important;
  }
}

/* =====================================================
   DATE INPUT ISOLATION FIX
===================================================== */

.search-input[type="date"]{
  background: initial;
  border: initial;
  appearance: auto;
  -webkit-appearance: auto;
}

/* =====================================================
   MOBILE DATE PICKER FIX
===================================================== */

@media(max-width:768px){

  .search-input[type="date"]{
    background:#fff !important;
    border:1px solid #ddd !important;
    height:46px !important;
    padding:0 12px !important;
    border-radius:8px !important;
    font-size:15px !important;
    cursor:pointer !important;
  }

  .search-input[type="date"]::-webkit-calendar-picker-indicator{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
    cursor:pointer;
  }
}
/* =====================================================
   MOBILE DATE PICKER - HARD FIX
===================================================== */

@media(max-width:768px){

  /* Make input real clickable layer */
  .search-item{
    position: relative !important;
  }

  .search-input[type="date"]{
    position: relative !important;
    z-index: 9999 !important;
    pointer-events: auto !important;

    -webkit-appearance: auto !important;
    appearance: auto !important;

    background:#fff !important;
    border:1px solid #ccc !important;
    border-radius:10px !important;

    width:100% !important;
    height:50px !important;
    padding:0 14px !important;

    font-size:16px !important;
    color:#000 !important;

    opacity:1 !important;
    visibility:visible !important;
  }

  /* Kill overlays */
  .from-icon,
  .to-icon,
  .search-item::before,
  .search-item::after{
    pointer-events:none !important;
  }

  /* Force native calendar UI */
  .search-input[type="date"]::-webkit-calendar-picker-indicator{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

}
/* =====================================================
   FAQ ACCORDION SYSTEM
===================================================== */

.faq-answer{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.25s ease;
  padding: 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: #555;
}

/* When active */
.faq-box.active .faq-answer{
  max-height: 500px;   /* enough for text */
  padding: 12px 16px 16px;
}

/* Question styling */
.faq-question{
  cursor: pointer;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  display:flex;
  justify-content: space-between;
  align-items: center;
}

/* Box style */
.faq-box{
  border-bottom: 1px solid #eaeaea;
}

/* =====================================================
   HIDE FAQ BACKGROUND IMAGE ON SMALL SCREENS
===================================================== */

@media(max-width: 992px){
  .faq{
    background-image: none !important;
    background: none !important;
  }

  .faq-left{
    display: none !important;   /* removes background/image panel */
  }
}

@media(max-width: 600px){
  .faq{
    background-image: none !important;
    background: #FCFAF1 !important;   /* clean white background */
  }

  .faq-left{
    display: none !important;
  }

  .faq-right{
    background: #FCFAF1 !important;
  }
}

/* Container alignment */
.container, .hero-content  {
  max-width: 1400px; 
  margin: 0 auto;     
  padding: 0 20px;     
  box-sizing: border-box;
}

 .airlines {
  max-width: 85vw; 
  margin: 0 auto;     
  padding: 0 20px;     
  box-sizing: border-box;
}
  


/* === TESTIMONIAL MARQUEE === */

.review-marquee{
  width:100%;
  overflow:hidden;
  position:relative;
  margin-top:40px;
}

.review-marquee-track{
  display:flex;
  width:max-content;
  animation: reviewMarquee 35s linear infinite;
  will-change: transform;
}

.review-card{
  flex:0 0 auto;
  margin-right:24px; /* spacing between cards */
}

/* infinite loop animation */
@keyframes reviewMarquee{
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(-50%);
  }
}

/* pause on hover */
.review-marquee:hover .review-marquee-track{
  animation-play-state: paused;
}

/* accessibility */
@media (prefers-reduced-motion: reduce) {
  .review-marquee-track{
    animation: none;
  }
}

/* ===============================
   AIRLINES PATCH FIX (SAFE MODE)
   Non-destructive, isolated
================================ */

/* scope strictly to airlines section */
section.airlines .air-grid{
  width:100%;
}

/* mobile slider stability */
@media (max-width: 768px){
  section.airlines .air-grid{
    display:flex;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type:x mandatory;
  }

  section.airlines .air-card{
    flex-shrink:0;
    scroll-snap-align:center;
    min-width:85%;
  }
}

/* laptop fix: force 5 cards */
@media (min-width: 1200px){
  section.airlines .air-grid{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
  }
  .airlines{
    max-width: 95vw; 
  }
  .air-info {
    gap:0px;
  }
}

/* laptop fix: force 5 cards */
@media (min-width: 1900px){
  section.airlines .air-grid{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
  }
  .airlines{
    max-width: 85vw; 
  }
    .discover {
        max-width: 1600px !important;
        padding: 100px 20px;
    }
}
/* ===============================
   AIRLINES PATCH FIX (OVERRIDE)
   Safe + isolated + final
================================ */

@media (min-width: 1200px){
  section.airlines .air-grid{
    display:grid !important;
    grid-template-columns: repeat(5, 1fr) !important; /* ✅ force 5 cards */
  }
}

/* ===============================
   AIRLINES SIDE MARGIN PATCH
   Safe + isolated
================================ */

section.airlines{
  padding-left: 80px;
  padding-right: 80px;
  padding-bottom: 80px;
}

/* Mobile spacing */
@media (max-width: 768px){
  section.airlines{
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Large desktop spacing */
@media (min-width: 1400px){
  section.airlines{
    padding-left: 30px;
    padding-right: 30px;
  }
}


/* ===============================
   AIRLINES GRID GAP REDUCE PATCH
   Safe + isolated
================================ */

section.airlines .air-grid{
  gap: 0px;   /* default reduced gap */
}

/* Mobile slider spacing */
@media (max-width: 768px){
  section.airlines .air-grid{
    gap: 12px;
  }
}

/* Large screens */
@media (min-width: 1400px){
  section.airlines .air-grid{
    gap: 18px;
  }
}
@media (max-width: 1300px){
    .hero h1 {
        font-size: clamp(28px, 5vw, 50px) !important;
    }

    .hero p {
        font-size: clamp(16px, 2.8vw, 20px) !important;
    }

    .container, .hero-content {
        max-width: 1200px !important;
    }

    .dest-name{
        font-size: 18px;
    }

    .book-code {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-size: 20px;
        line-height: 36px;
        color: #000000;
    }
    .air-title{
        font-size: 0px;
    }
}