/* ================================================================
METAIRFARE — RESPONSIVE-FIX.CSS (FINAL COMPLETE)
Link order in :
================================================================ */
/* ── Global ── */
*,
*::before,
*::after {
box-sizing: border-box !important;
}
html,
body {
overflow-x: hidden !important;
width: 100% !important;
}
/* ================================================================
HAMBURGER BUTTON
================================================================ */
.menu-toggle {
display: none !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
gap: 5px !important;
width: 38px !important;
height: 38px !important;
cursor: pointer !important;
background: none !important;
border: none !important;
padding: 4px !important;
z-index: 1100 !important;
flex-shrink: 0 !important;
outline: none !important;
}
.menu-toggle span {
display: block !important;
height: 2.5px !important;
border-radius: 3px !important;
background: var(--coral, #f16e5e) !important;
transition: all 0.3s ease !important;
transform-origin: center !important;
}
.menu-toggle span:nth-child(1) {
width: 24px !important;
}
.menu-toggle span:nth-child(2) {
width: 18px !important;
}
.menu-toggle span:nth-child(3) {
width: 12px !important;
}
/* X animation */
.menu-toggle.open span:nth-child(1) {
width: 24px !important;
transform: translateY(7.5px) rotate(45deg) !important;
}
.menu-toggle.open span:nth-child(2) {
opacity: 0 !important;
transform: scaleX(0) !important;
}
.menu-toggle.open span:nth-child(3) {
width: 24px !important;
transform: translateY(-7.5px) rotate(-45deg) !important;
}
/* ── Overlay ── */
.nav-overlay {
display: none !important;
position: fixed !important;
inset: 0 !important;
background: rgba(0, 0, 0, 0.6) !important;
z-index: 990 !important;
}
.nav-overlay.active {
display: block !important;
}
body.menu-open {
overflow: hidden !important;
}
/* ── Sticky nav ── */
.nav-wrap.sticky {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
z-index: 1000 !important;
background: #fff !important;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12) !important;
animation: slideDown 0.3s ease;
}
.nav-wrap.sticky nav {
box-shadow: none !important;
border-radius: 0 !important;
}
@keyframes slideDown {
from {
transform: translateY(-110%);
}
to {
transform: translateY(0);
}
}
/* ================================================================
≤ 1100px
================================================================ */
@media (max-width: 1100px) {
.dest-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.routes-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.foot-grid {
grid-template-columns: 1fr 1fr !important;
}
}
/* ================================================================
≤ 992px — HAMBURGER + SLIDE DRAWER
================================================================ */
@media (max-width: 1100px) {
/* Show hamburger */
.menu-toggle {
display: flex !important;
}
/* Hide support number */
.nav-sup {
display: none !important;
}
nav {
padding: 10px 20px !important;
height: auto !important;
min-height: 62px !important;
border-radius: 16px !important;
position: relative !important;
}
.logo img {
width: 150px !important;
}
/* ── Nav drawer — always display:flex, hidden via transform ──
CRITICAL: never use display:none — it breaks CSS transitions */
.nav-links {
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: auto !important;
bottom: 0 !important;
width: 260px !important;
height: 100vh !important;
background: #fff !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
padding: 80px 28px 30px !important;
margin: 0 !important;
gap: 0 !important;
list-style: none !important;
z-index: 1000 !important;
box-shadow: -4px 0 28px rgba(0, 0, 0, 0.15) !important;
/* hidden off-screen to the right */
transform: translateX(110%) !important;
transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1) !important;
display: flex !important; /* MUST stay flex for transition to work */
overflow-y: auto !important;
/* Remove desktop centering */
}
/* Open */
.nav-links.active {
transform: translateX(0) !important;
}
.nav-links li {
width: 100% !important;
border-bottom: 1px solid #f2f2f2 !important;
}
.nav-links li a {
display: block !important;
padding: 14px 4px !important;
font-size: 16px !important;
color: #444 !important;
font-weight: 500 !important;
border-bottom: none !important;
transition:
color 0.2s,
padding-left 0.2s !important;
}
.nav-links li a.active {
color: var(--coral, #f16e5e) !important;
padding-left: 10px !important;
border-bottom: none !important;
}
.nav-links li a:hover {
color: var(--coral, #f16e5e) !important;
padding-left: 10px !important;
}
}
/* ================================================================
≤ 900px — HERO + SECTIONS
================================================================ */
@media (max-width: 1024px) {
/* ── HERO ── */
.hero {
padding: 110px 20px 50px !important;
min-height: auto !important;
overflow: visible !important;
}
.hero-inner {
flex-direction: column !important;
gap: 28px !important;
align-items: center !important;
}
.hero-left {
text-align: center !important;
padding-bottom: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
.hero-left h1 {
font-size: 46px !important;
}
.hero-sub {
font-size: 16px !important;
}
.rating-pill {
justify-content: center !important;
gap: 7px;
padding: 15px 22px;
flex-direction: column;
}
.rating-pill .rt {
font-size: 12px;
}
.hero-arc-1,
.hero-arc-2,
.arc-plane {
display: none !important;
}
/* Booking card below hero text — NO BLACK GAP */
.booking-card {
width: 100% !important;
max-width: 520px !important;
margin: 0 auto !important;
position: relative !important; /* remove z-index stacking issues */
z-index: 2 !important;
}
/* ── SECTIONS ── */
.flight-sec,
.fare-sec,
.why-sec,
.routes-sec,
.reviews-sec,
.offers-sec,
.blogs-sec {
padding: 60px 20px !important;
}
footer {
padding: 50px 20px 20px !important;
}
/* ── FARE DEALS ── */
.fare-inner {
flex-direction: column !important;
gap: 28px !important;
text-align: center !important;
}
.fare-left {
flex: none !important;
max-width: 100% !important;
}
.fare-right {
justify-content: center !important;
width: 100% !important;
}
.fare-cols {
flex-wrap: wrap !important;
justify-content: center !important;
align-items: flex-start !important;
display: flex;
gap: 16px !important;
}
/* Reset bar-graph heights — all equal on tablet/mobile */
.fare-col:nth-child(1) .fare-logo-box,
.fare-col:nth-child(2) .fare-logo-box,
.fare-col:nth-child(3) .fare-logo-box,
.fare-col:nth-child(4) .fare-logo-box {
height: 100px !important;
}
/* ── WHY CHOOSE — fix icons + layout ── */
.why-inner {
flex-direction: column !important;
gap: 32px !important;
padding: 0 !important;
max-width: 100% !important;
align-items: stretch !important;
}
.why-content {
width: 100% !important;
flex: none !important;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.why-sub {
width: 100% !important;
max-width: 100% !important;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 15px;
text-align: center;
}
.feat-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
flex-wrap: unset !important;
}
.feat-item {
max-width: 100% !important;
flex: none !important;
width: 100% !important;
padding: 16px 12px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
.feat-item p {
text-align: center !important;
}
.exp-card {
width: 100% !important;
max-width: 420px !important;
margin: 0 auto !important;
padding: 40px 28px !important;
}
/* ── ROUTES ── */
.routes-grid {
grid-template-columns: repeat(2, 1fr) !important;
padding: 0 !important;
}
/* ── CTA ── */
.cta-banner {
flex-direction: column !important;
text-align: center !important;
gap: 20px !important;
padding: 36px 20px !important;
}
.cta-plane {
display: none !important;
}
.cta-left h3 {
font-size: 22px !important;
}
.cta-phone {
font-size: 22px !important;
}
/* ── CUSTOMER REVIEWS — fix empty space ── */
.reviews-sec {
padding: 60px 20px !important;
}
.reviews-grid {
padding-left: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
margin-top: 24px !important;
position: relative !important;
min-height: auto !important;
}
.score-card {
position: static !important;
width: 100% !important;
max-width: 300px !important;
margin: 0 auto !important;
left: auto !important;
top: auto !important;
}
.reviews-slider-wrap {
width: 100% !important;
display: block !important;
}
.reviews-slider {
position: static !important;
width: 100% !important;
}
/* ── FOOTER ── */
.foot-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 28px !important;
}
}
/* ================================================================
≤ 768px — tablet-mobile
================================================================ */
@media (max-width: 768px) {
/* ── SPECIAL OFFERS — eliminate white space ── */
.offers-sec {
padding: 40px 0 40px !important;
overflow: hidden !important;
}
/* Owl wraps the offers slider */
.offers-sec .owl-stage-outer {
overflow: hidden !important;
}
.offers-sec .owl-item {
padding: 0 !important;
}
/* dots spacing */
.offers-slider.owl-carousel .owl-dots {
margin-top: 16px !important;
}
.offers-slider.owl-carousel .owl-dot span {
background: #ccc !important;
}
.offers-slider.owl-carousel .owl-dot.active span {
background: #f26545 !important;
}
.offer-card {
padding: 10px !important;
border-radius: 16px !important;
}
.offer-img {
height: 200px !important;
border-radius: 18px !important;
}
.offer-overlay-text {
font-size: 26px !important;
bottom: 52px !important;
right: 12px !important;
}
.offer-badge {
width: 84px !important;
height: 84px !important;
bottom: 18px !important;
left: 10px !important;
}
.offer-badge span {
font-size: 11px !important;
white-space: normal !important;
text-align: center !important;
line-height: 1.2 !important;
}
.offer-badge strong {
font-size: 18px !important;
}
.offer-footer {
font-size: 13px !important;
padding: 10px 12px !important;
margin-left: -14px !important;
margin-right: -14px !important;
margin-top: -42px !important;
border-width: 3px !important;
border-radius: 30px !important;
position: relative !important;
z-index: 5 !important;
}
/* ── LATEST BLOGS — fix orange gap + arrow overlap ── */
.blogs-sec {
padding: 40px 16px 16px !important;
}
.blogs-slider {
margin-top: 20px !important;
position: relative !important;
}
.blog-card {
border-radius: 20px !important;
padding: 12px !important;
}
.blog-img {
border-radius: 16px !important;
}
.blog-body {
padding: 12px 4px 4px !important;
}
.blog-body h4 {
font-size: 14px !important;
margin-bottom: 10px !important;
}
/* Arrows — hidden on mobile (replaced by dots) */
.blogs-sec .owl-nav {
display: none !important;
}
/* Dots for blogs slider on mobile */
.blogs-slider.owl-carousel .owl-dots {
margin-top: 16px !important;
text-align: center !important;
}
.blogs-slider.owl-carousel .owl-dot span {
background: rgba(255, 255, 255, 0.5) !important;
width: 8px !important;
height: 8px !important;
}
.blogs-slider.owl-carousel .owl-dot.active span {
background: #fff !important;
}
}
/* ================================================================
≤ 600px — MOBILE
================================================================ */
@media (max-width: 600px) {
/* Nav */
.logo img {
width: 130px !important;
}
nav {
padding: 8px 14px !important;
min-height: 54px !important;
}
.nav-wrap {
top: 8px !important;
}
/* Hero — no black gap */
.hero {
padding: 84px 16px 36px !important;
min-height: auto !important;
overflow: visible !important;
}
.hero-left h1 {
font-size: 32px !important;
line-height: 1.1 !important;
}
.hero-sub {
font-size: 14px !important;
}
.hero-plane-icon img {
width: 56px !important;
}
.hero-globe {
opacity: 0.07 !important;
}
.hero-skyline {
display: none !important;
}
.booking-card {
padding: 16px 14px !important;
max-width: 100% !important;
width: 100% !important;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2) !important;
}
.bk-tab {
font-size: 12px !important;
padding: 6px 10px !important;
}
.f3 {
grid-template-columns: 1fr !important;
gap: 0 !important;
}
.submit-btn {
font-size: 14px !important;
}
/* Sections */
.flight-sec,
.fare-sec,
.why-sec,
.routes-sec,
.reviews-sec,
.blogs-sec {
padding: 40px 16px !important;
}
.stitle {
font-size: clamp(24px, 7vw, 36px) !important;
}
.container {
padding: 0 16px !important;
}
/* Dest grid */
.dest-grid {
grid-template-columns: 1fr !important;
}
/* City tabs */
.city-tabs {
gap: 8px !important;
}
.city-tab {
font-size: 12px !important;
padding: 7px 12px !important;
}
/* Fare → 2×2 */
.fare-cols {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
width: 100% !important;
}
/* Why choose → 1 col */
.feat-grid {
grid-template-columns: 1fr !important;
}
/* Routes → 1 col */
.routes-grid {
grid-template-columns: 1fr !important;
}
/* CTA */
.cta-left h3 {
font-size: 18px !important;
}
.cta-phone {
font-size: 18px !important;
padding: 10px 18px !important;
}
/* Special offers */
.offers-sec {
padding: 40px 0 !important;
}
.offer-card {
padding: 8px !important;
}
.offer-img {
height: 180px !important;
border-radius: 16px !important;
}
.offer-footer {
margin-left: -12px !important;
margin-right: -12px !important;
margin-top: -36px !important;
font-size: 13px !important;
}
/* ── FOOTER — center everything ── */
.foot-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.fcol {
text-align: center !important;
}
.fcol h4 {
text-align: center !important;
}
.fcol ul {
padding: 0 !important;
}
.fcol ul li {
text-align: center !important;
}
.faddr {
justify-content: center !important;
align-items: flex-start !important;
}
.faddr p {
text-align: left !important;
}
.fline {
padding-left: 0 !important;
justify-content: center !important;
}
.social-row {
padding-left: 0 !important;
justify-content: center !important;
}
.foot-bottom {
font-size: 12px !important;
line-height: 1.7 !important;
padding: 14px 10px !important;
}
}
/* ================================================================
≤ 400px
================================================================ */
@media (max-width: 400px) {
.hero-left h1 {
font-size: 26px !important;
}
.stitle {
font-size: 22px !important;
}
.bk-tab {
font-size: 11px !important;
padding: 5px 8px !important;
}
.cta-phone {
font-size: 14px !important;
}
}
/* ================================================================
REVIEWS SECTION FIX
Add AFTER responsive-fix.css in
================================================================ */
/* ── Desktop: score card absolute left, slider to the right ── */
.reviews-sec {
background: #f5f5f5;
border-top: 30px solid #fff;
padding: 80px 0;
}
.reviews-grid {
position: relative;
padding-left: 300px;
margin-top: 40px;
min-height: 260px; /* ensures enough height for absolute score card */
}
.score-card {
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 260px !important;
background: #fff;
border-radius: 18px;
padding: 47px 22px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.07);
text-align: center;
}
.reviews-slider-wrap {
width: 100%;
display: block;
}
/* Make sure rv-card has visible background */
.rv-card {
background: #fff !important;
border-radius: 16px !important;
padding: 20px !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
height: 230px !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
.rv-card .rv-text {
flex: 1;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
.rv-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 8px;
}
.rv-stars {
display: flex;
gap: 3px;
}
.rv-good {
font-size: 12px;
color: #1ea28a;
font-weight: 600;
margin-top: 6px;
}
.rv-date {
font-size: 11px;
color: #bbb;
}
.rv-name {
font-size: 15px;
font-weight: 700;
color: #070b0d;
margin: 8px 0;
}
.rv-text {
font-size: 13px;
color: #666;
line-height: 1.6;
}
/* ── Owl dots for reviews ── */
.reviews-slider.owl-carousel .owl-dots {
margin-top: 16px;
text-align: center;
}
.reviews-slider.owl-carousel .owl-dot span {
background: #ddd !important;
width: 8px !important;
height: 8px !important;
}
.reviews-slider.owl-carousel .owl-dot.active span {
background: var(--coral, #f16e5e) !important;
}
/* ================================================================
≤ 900px — Stack score card above slider
================================================================ */
@media (max-width: 1024px) {
.reviews-sec {
padding: 60px 20px !important;
}
.reviews-grid {
padding-left: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 28px !important;
margin-top: 24px !important;
min-height: auto !important;
position: static !important;
}
.score-card {
position: static !important;
left: auto !important;
top: auto !important;
width: 100% !important;
max-width: 300px !important;
margin: 0 auto !important;
}
.reviews-slider-wrap {
width: 100% !important;
}
}
/* ================================================================
≤ 600px
================================================================ */
@media (max-width: 600px) {
.reviews-sec {
padding: 40px 16px !important;
}
.rv-card {
padding: 16px !important;
}
.reviews-slider.owl-carousel {
padding: 0 !important;
}
}
/* ================================================================
REVIEWS — Desktop: Owl Carousel / Mobile: Bootstrap Carousel
================================================================ */
/* Desktop: show Owl, hide Bootstrap */
.reviews-owl-wrap {
display: block;
}
.reviews-bs-wrap {
display: none;
}
/* Mobile (≤767px): hide Owl, show Bootstrap */
@media (max-width: 767px) {
.reviews-owl-wrap {
display: none !important;
}
.reviews-bs-wrap {
display: block !important;
}
}
/* Bootstrap carousel card styles */
#reviewsCarousel .carousel-item {
padding: 4px 4px 48px;
}
#reviewsCarousel .rv-card {
background: #fff;
border-radius: 16px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
height: 230px;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Orange dot indicators */
#reviewsCarousel .rv-dots {
position: static;
margin-top: 10px;
display: flex;
justify-content: center;
gap: 6px;
}
#reviewsCarousel .rv-dots button {
width: 8px;
height: 8px;
border-radius: 50%;
background: #ccc;
border: none;
padding: 0;
opacity: 1;
flex: none;
}
#reviewsCarousel .rv-dots button.active {
background: #f26545;
}