/* =========================================================
   home-responsive.css  -  World Gates
   Load LAST: after theme_style.css (see install notes).
   Breakpoints: 1319 / 1199 / 991 / 767 / 575
   Home-only rules are prefixed with .index_page
   ========================================================= */

/* ---------- 0. Safety ---------- */
.allpagewrp { overflow-x: clip; }
.index_page .fromtopmargin img { max-width: 100%; }

/* ---------- 1. Side gutters ----------
   .container.nopad has no padding, so content touches the screen edge
   whenever the viewport is narrower than the 1280px container. */
@media (max-width: 1319px) {
  .topbar .container.nopad,
  .modern-footer .container.nopad,
  .subscrptn .container.nopad,
  .index_page .fromtopmargin .container.nopad:not(.inspad):not(.mobile_pad), .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .header-nav .nav-links {gap: 6px;}
  .featured-hotel-card__content {padding: 12px 15px;}
  .htl_in span strong {margin-left: 0;display: block;}
}
@media (min-width: 768px) and (max-width: 1319px) {
  .topssec .container.nopad { padding-left: 16px !important; padding-right: 16px !important; }
  .index_page .srchinarea { padding-left: 16px; padding-right: 16px; }
}

/* ---------- 2. Header ---------- */
@media (max-width: 1199px) {
  .header-nav { display: none; }                 /* 10 links do not fit */
  .burger-menu-btn { display: flex; }
  .header-brand-cluster { flex: 1 1 auto; justify-content: flex-start; }
  .topssec .logo { width: auto; }
  .ritsude { flex: 0 0 auto; }
  .main_sec { width: auto; gap: 12px; }
}
@media (max-width: 991px) {
  .topbar .tagline, .topbar .divider { display: none; }
}
@media (max-width: 767px) {
  .topbar { padding: 8px 0; }
  .topbar .container { justify-content: space-between !important; }
  .topbar a.brand-link, .topbar .phone-link { font-size: 12px; }
  .top_rit ul li { padding-left: 14px; }
}
@media (max-width: 575px) {
  .topbar .container > div:first-child { display: none; }   /* keep contact row only */
  .topbar .container { justify-content: center !important; }
}

/* ---------- 3. Hero ---------- */
.index_page .ggt-heading { font-size: clamp(30px, 7vw, 64px); line-height: 1.15; }
@media (max-width: 991px) {
  .index_page .ggt-hero { padding: 40px 24px 88px; }
}
@media (max-width: 767px) {
  .index_page .ggt-hero { padding: 36px 16px 64px; }
  .index_page .ggt-hero-content { gap: 16px; }
  .index_page .ggt-heading .ggt-accent { margin-right: 0; }
  .index_page .ggt-subtext { font-size: 14px; line-height: 1.55; }
  /* .hero-pagination uses top:460px. Needs hero-slider.css to position safely:
  .index_page .hero-pagination { top: auto; bottom: 12px; } */
}

/* ---------- 4. Search tabs on tablet: one scrollable row ---------- */
@media (min-width: 768px) and (max-width: 1199px) {
  .index_page .commonNavTabCls { overflow-x: auto; scrollbar-width: none; }
  .index_page .commonNavTabCls::-webkit-scrollbar { display: none; }
  .index_page .nav-tabs.tabstab { flex-wrap: nowrap; }
  .index_page .nav-tabs.tabstab > li > a { white-space: nowrap; }
  .topbar .tagline, .topbar .phone-link {font-size: 13.5px;}
  .topbar {padding: 9px 0;}
  .burger-line { background: #F97A17 }
  .burger-menu-btn {border:none;background: transparent;}
}
@media (min-width: 991px) and (max-width: 1199px) {
.normalinput, .totlall {
    padding: 3px 8px !important;
}

.hotel-date-display-field .hotel-date-display {
    left: 8px;
    right: 8px;
}

.searchsbmt i.material-symbols-outlined, .plcetogo i, .totlall i.material-symbols-outlined {
    display: none;
}

#flight-form-submit {}

.padfive, .padfive.thrdtraveller {
    padding: 0 4px !important;
}
#flight-form-submit {
  padding-left: 6px !important;
  font-size: 15px !important;
}
}

/* ---------- 5. Section headings ---------- */
@media (max-width: 991px) {
  .index_page .twa-widget .twa-section-title,
  .index_page .popular-header h2,
  .index_page .route-sec-title,
  .index_page .trending-holiday-header h2,
  .index_page .subscrptn h4.footer-section-title,
  .index_page .app-title { font-size: 32px; line-height: 1.2; }
}
@media (max-width: 767px) {
  .index_page .twa-widget .twa-section-title,
  .index_page .popular-header h2,
  .index_page .route-sec-title,
  .index_page .trending-holiday-header h2,
  .index_page .subscrptn h4.footer-section-title,
  .index_page .app-title { font-size: 22px; line-height: 1.25; }

  .index_page .twa-widget .twa-section-sub,
  .index_page .popular-header .subtitle,
  .index_page .route-sec-subtitle,
  .index_page .holiday-subtitle,
  .index_page p.footer-section-subtitle { font-size: 14px; line-height: 1.45; }
  .index_page .twa-widget .twa-section-sub { margin-bottom: 16px !important; }
  .index_page .trending-holiday-header { margin-bottom: 16px; }
  .index_page .popular-header { padding-left: 0; padding-right: 0; }
  .index_page .twa-app-shell > .mb-4 { margin-bottom: 32px !important; }
}

/* ---------- 6. Recently viewed + offers (twa-widget) ---------- */
@media (min-width: 768px) and (max-width: 991px) {
  .index_page .twa-widget .row > .col-md-4 { flex: 0 0 auto; width: 50%; }
}
@media (max-width: 767px) {
  .index_page .twa-widget .twa-app-shell { padding: 16px 0 8px; }
  .index_page .twa-widget .twa-trip-card { padding: 16px; }
  .index_page .twa-widget .twa-route-text { font-size: 18px; }
  .index_page .twa-widget .twa-meta-text { margin: 10px 0 !important; font-size: 13px; }
  .index_page .twa-widget .twa-airline-name { font-size: 18px; line-height: 22px; }
  .index_page .twa-widget .twa-offer-top { padding: 16px; }
  .index_page .twa-widget .twa-offer-title { font-size: 20px; line-height: 24px; }
  .index_page .twa-widget .twa-offer-bottom { padding: 12px 16px; gap: 12px; }
  .index_page .twa-widget .twa-offer-price { font-size: 20px; }
}

/* ---------- 7. Hotel cards (Popular destinations + Luxury hotels) ----------
   Old mobile rules assume text sits ON the image; the new design puts it
   below. Switch to a normal stacked card on phones. */
.index_page .featured-hotel-card__media { left: 0; right: 0; top: 0; }
@media (max-width: 991px) {
  .index_page .featured-hotel-card__title { font-size: 20px; line-height: 1.25; }
}
@media (max-width: 767px) {
  .index_page .featured-hotel-card,
  .index_page .luxury_hotels .featured-hotel-card {
    aspect-ratio: auto; min-height: 0; display: flex; flex-direction: column; background: #fff;
  }
  .index_page .featured-hotel-card__media { position: relative; width: 100%; height: 200px; flex: 0 0 auto; }
  .index_page .featured-hotel-card__media img { height: 200px; }
  .index_page .featured-hotel-card__gradient { display: none; }
  .index_page .featured-hotel-card__content { position: relative; padding: 14px 16px 16px; gap: 2px; }
  .index_page .featured-hotel-card__title { font-size: 18px; color: #00334D; -webkit-line-clamp: 2; }
  .index_page .featured-hotel-card__location { font-size: 13px; color: #737B8C; }
  .index_page .featured-hotel-card__book-pill { display: inline-flex; align-self: flex-start; margin-top: 8px; }
  .index_page .lxry_htl { gap: 12px; }
  .index_page .prc_tag { left: 12px; bottom: 12px; }
}

/* ---------- 8. Best flight deals ---------- */
@media (min-width: 768px) and (max-width: 991px) {
  .index_page .flight-routes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .index_page .flight-routes-grid { grid-template-columns: 1fr; gap: 10px; }
  .index_page .route-card-grid { align-items: center; padding: 14px; }
  .index_page .route-card-main { display: flex; max-width: none; align-items: center; gap: 12px; }
  .index_page .flt_rout { flex: 1 1 auto; min-width: 0; }
  .index_page .route-departure,
  .index_page .route-arrival { width: auto; align-items: flex-start; text-align: left; }
  .index_page .route-airport-code { font-size: 20px; line-height: 24px; letter-spacing: 0; color: #00334D; text-transform: none; }
  .index_page .route-connection { width: 32px; min-width: 32px; height: auto; }
  .index_page .route-line { display: none; }
  .index_page ul.flt_rout_btm { padding-left: 0; list-style: none; margin-top: 6px; font-size: 13px; }
  .index_page .route-card-grid .holiday-view-btn { flex-shrink: 0; }
}

/* ---------- 9. Holiday packages ---------- */
@media (max-width: 991px) {
  .index_page .holiday-content { padding: 16px; }
  .index_page .holiday-content .holiday-title { font-size: 20px; line-height: 24px; }
  .index_page .holiday-duration { left: 16px; bottom: 16px; }
}
@media (max-width: 767px) {
  /* bottom-left is used by the title/price caption; move the chip up */
  .index_page .holiday-duration { top: 12px; bottom: auto; left: auto; right: 12px; }
}

/* ---------- 10. Why World Gates ---------- */
@media (max-width: 991px) {
  .index_page .why-travel-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .index_page .why-travel-strip .why-travel-feature:nth-child(n) { border: 1px solid #E3E5E8; }
}
@media (max-width: 767px) {
  .index_page .why-travel-section { padding: 24px 0; }
}
@media (max-width: 575px) {
  .index_page .why-travel-strip { grid-template-columns: 1fr; gap: 12px; }
  .index_page .why-travel-feature { flex-direction: row; align-items: flex-start; gap: 14px; padding: 16px; }
  .index_page .why-travel-icon-wrap { margin: 0; }
  .index_page .why-travel-feature .why-travel-card-title { font-size: 18px; line-height: 22px; margin-bottom: 4px; }
}

/* ---------- 11. App banner ---------- */
@media (max-width: 991px) {
  .index_page .app-banner { padding: 32px; gap: 24px; }
  .index_page .qr-wrapper { width: 200px; height: 200px; }
  .index_page .qr-box { width: 140px; height: 140px; }
}
@media (max-width: 767px) {
  .index_page .app-banner { width: 100%; margin: 0 0 24px; padding: 24px 20px; flex-direction: column; align-items: stretch; border-radius: 16px; }
  .index_page .app-content { max-width: 100%; }
  .index_page .app-title { max-width: none; margin: 12px 0; }
  .index_page .app-description { font-size: 14px; line-height: 1.5; max-width: none; }
  .index_page .store-buttons { flex-wrap: wrap; gap: 10px; }
  .index_page .store-btn { flex: 1 1 140px; padding: 10px 14px; gap: 10px; }
  .index_page .qr-mainwrap { justify-content: center; width: 100%; }
  .index_page .qr-mainwrap::before,
  .index_page .app-banner::after { display: none; }
  .index_page .qr-wrapper { right: auto; width: 150px; height: 150px; border-radius: 20px; margin: 8px auto 0; }
  .index_page .qr-box { width: 106px; height: 106px; padding: 0; }
}

/* ---------- 12. Partners ---------- */
@media (max-width: 767px) {
  .index_page .airline-partner-section { padding: 24px 16px 28px; border-radius: 16px; margin-bottom: 16px; }
  .index_page .airline-partner-title { margin-bottom: 16px; }
  .index_page .airline-partner-card span { font-size: 11px; line-height: 14px; }
  .index_page .airline-logo-wrapper { height: 56px; }
  .index_page .airline-partner-card { height: 96px; }
}

/* ---------- 13. Newsletter ----------
   theme_style.css turns the group into a column <=991px, which makes the
   absolutely-positioned Subscribe button cover the whole input.
   Also the input text was white-on-white in light mode. */
.subscrptn .newsletter-input-group { flex-direction: row; align-items: center; }
.subscrptn .newsletter-input { padding-right: 112px; color: #00334D; }
.subscrptn .newsletter-input::placeholder { color: #8F96A3; }
.subscrptn .newsletter-subscribe-btn { width: auto; position: absolute; right: 6px; }
@media (max-width: 767px) {
  .subscrptn { padding: 16px 0 24px; }
  .subscrptn .newsletter-form-wrapper { padding-top: 8px; }
}

/* ---------- 14. Footer ---------- */
@media (max-width: 767px) {
  .modern-footer .footer-top-section { padding: 32px 0 8px; }
  .modern-footer .footer-top-row > .footer-logo-col { flex: 0 0 100%; max-width: 100%; }
  .modern-footer .footer-top-row > .footer-services-col,
  .modern-footer .footer-top-row > .footer-quicklinks-col {
    flex: 0 0 50%; max-width: 50%; padding: 0 12px; margin-bottom: 24px;   /* 2 x 2 link grid */
  }
  .modern-footer .footer-bottom-section { padding-bottom: 24px; }
  .modern-footer .footer-bottom-content { align-items: center; gap: 12px; text-align: center; }
  .modern-footer .footer-legal-links { flex-direction: column; gap: 8px; }
  .modern-footer .footer-payment-logos { justify-content: center; }
}

/* ---------- 15. Global fixes ----------
   theme_style.css forces width:90% !important on every text input and
   select at <=550px, which misaligns forms. */
@media (max-width: 550px) {
  .allpagewrp input[type="text"],
  .allpagewrp input[type="date"],
  .allpagewrp select { width: 100% !important; box-sizing: border-box; }
}