/* cache-bust: chart width verify (rev 2026-06-19c) */
/* ===========================================================================
internal-2026.css — GLOBAL reskin for all internal (header-new.php) pages
---------------------------------------------------------------------------
Brings the 500+ city/route pages (e.g. /flights-to-india/new-york-to-india/*)
up to the "Flights to India" 2026 visual language WITHOUT changing any markup
or adding content. Pure restyle of the existing class names.
Loaded once from header-new.php (after fly.css) so it cascades to every page
that uses that header. New-design pages use header-new-home.php and never load
this file, so there is no conflict.
Design tokens mirror flights-to-india-new.php's :root.
=========================================================================== */
:root {
--i-brand: #e11d48;
--i-brand-dark: #be123c;
--i-brand-soft: #fef2f2;
--i-accent: #f59e0b;
--i-ink: #0b1220;
--i-muted: #64748b;
--i-line: #e5e7eb;
--i-line-soft: #f1f5f9;
--i-surface: #ffffff;
--i-bg: #f8fafc;
--i-bg-tint: #fafbfd;
--i-radius-sm: 10px;
--i-radius: 16px;
--i-radius-lg: 24px;
--i-radius-xl: 32px;
--i-shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
--i-shadow: 0 4px 12px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04);
--i-shadow-lg: 0 18px 48px rgba(15,23,42,.10), 0 6px 16px rgba(15,23,42,.06);
--i-shadow-brand: 0 14px 36px rgba(225,29,72,.22);
--i-grad-brand: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
--i-grad-hero: linear-gradient(135deg, #0b1220 0%, #1e293b 45%, #5b21b6 100%);
--i-font: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--i-font-body: 'DM Sans', 'Plus Jakarta Sans', system-ui, sans-serif;
/* Headings use Plus Jakarta Sans to match the Flights-to-India page (which uses
Plus Jakarta everywhere). Was 'Bricolage Grotesque' — that diverged the
heading font from FTI on every section. */
--i-font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
/* CRITICAL: bootstrap.min.css sets html{font-size:10px}, which shrinks every rem-based
size on these pages to 0.625x — making the new hero, banner form and section type far
smaller than on the Flights-to-India page. FTI overrides this to 16px in its own CSS;
we do the same here so typography matches FTI exactly. The legacy body content is
px-based, so it is unaffected. */
html { font-size: 16px !important; }
/* bootstrap (loaded only on internal pages) sets body{font-size:14px}, so the
base/inherited text ran a notch smaller than the Flights-to-India page, whose
body is 16px. Match it so inherited copy (nav, footer, in-content text) is the
same size as FTI. Sections with their own explicit sizes are unaffected. */
body { font-size: 16px !important; }
/* ---- Section container width -------------------------------------------------
Match FTI's 1440/32 container on every content section we own. The internal
body otherwise uses the bootstrap default (max 1200 / 15px pad), which left the
sections below the hero narrower and mis-aligned against the 1440 hero/header.
The shared chart partial (.py-5 / .ef-flight-deals) is intentionally NOT
included so its fixed-width charts are not disturbed. */
section.service.main_servicess > .container,
section.main_section_Amenities > .container,
section.paper > .container,
section.banner_image_bg > .container,
section.tabbing_sec-new > .container,
section.faq_sec > .container,
section.reviews-section > .container,
section.tabbing_new_sec_two > .section_container_tabbing {
max-width: 1440px !important; width: 100% !important;
margin-left: auto !important; margin-right: auto !important;
padding-left: 32px !important; padding-right: 32px !important;
}
/* These sections carry their own 40px side padding (legacy), which caps the
inner container at 1360. Zero it so they reach the same 1440/32 as the rest
(their full-width backgrounds are unaffected). */
section.faq_sec,
section.tabbing_sec-new,
section.tabbing_new_sec_two {
padding-left: 0 !important; padding-right: 0 !important;
}
/* ---- Full-bleed safety -------------------------------------------------------
The fare-trend chart band uses width:100vw to break out of the centered 1440
layout (see FARE-TREND CHARTS block). 100vw includes the vertical scrollbar
width, so it can overflow the document by ~10px and add a horizontal scrollbar.
Clip it on the page wrapper. overflow-x:CLIP (not hidden) does NOT create a
scroll container, so it won't break the sticky/fixed smart-header. */
.wrapper { overflow-x: clip !important; }
/* ---- Page scrollbar ----------------------------------------------------------
FTI/home load airtravel/css/style.css which styles the page scrollbar; the
internal header (header-new.php) doesn't link it, so internal pages showed the
default OS scrollbar. Replicate the same scrollbar here (style.css is shared /
off-limits). Colours match FTI exactly. */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #fff; }
::-webkit-scrollbar-thumb { background: #006da6; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #2563EB; }
/* ---- Header nav alignment ----------------------------------------------------
bootstrap (loaded on internal pages, not on FTI) adds clearfix pseudo-elements
to ul.nav (`content:" "; display:table`). In the flex nav these become flex
items and, under justify-content:space-between, take the first + last slots —
pushing the real menu items ~55px inward so the menu looks centered. Remove
them so the menu spans edge-to-edge exactly like the Flights-to-India header. */
header.header ul.nav::before,
header.header ul.nav::after { content: none !important; display: none !important; }
/* ---- Header parity with FTI (call button + bar height) -----------------------
Internal pages don't load FTI's style.css, so the header inherits Arial + a
forced line-height:20px (bootstrap/custom reset). That makes the top bar ~13px
taller than FTI (148 vs 135) and renders the call button in the wrong font
(Arial 14/400 vs FTI's Bricolage 16/700). Normalise the header line-height and
replicate FTI's call-button typography. */
header.header,
header.header * { line-height: normal !important; }
/* custom.css adds `.header{border-bottom:1px solid #ccc}`; FTI has none. */
header.header { border-bottom: none !important; }
header.header img { vertical-align: middle !important; }
/* The logo row (.header-inner) rendered 68px on internal vs FTI's 60px — an 8px
ghost from the internal-only CSS env (bootstrap/custom) that the content
(logo 53 / trust-strip 60 / cta 57) doesn't need. Pin it to the content height
on desktop so the bar totals FTI's 135px (60 inner + 55 nav + 20 padding).
Mobile keeps auto (trust strip hidden, hamburger layout). */
@media (min-width: 992px) {
header.header .header-inner { height: 60px !important; align-items: center !important; }
}
/* Phone CTA — match FTI exactly. Internal had it in Plus Jakarta Sans with
line-height:normal, which renders the number wider (~228px pill) and looser
than FTI's Bricolage Grotesque + line-height:1.2 + .5px tracking (~208px). */
header.header .cta {
font-family: "Bricolage Grotesque", sans-serif !important;
font-size: 16px !important; font-weight: 700 !important;
}
header.header .cta .cta-info { line-height: 1.2 !important; }
header.header .cta .cta-label {
font-family: "Bricolage Grotesque", sans-serif !important;
font-size: 12px !important; font-weight: 400 !important; opacity: .9;
}
header.header .cta .cta-number {
font-family: "Bricolage Grotesque", sans-serif !important;
font-size: 17px !important; font-weight: 500 !important; letter-spacing: .5px !important;
}
/* The content sections we own on these pages. Scope kept to these so the shared
nav (header) and footer keep their own styling. */
.banner,
section.service.main_servicess,
section.ef-flight-deals,
section.py-5,
section.paper,
section.banner_image_bg,
section.tabbing_new_sec_two,
section.tabbing_sec-new,
section.main_section_Amenities,
section.faq_sec,
section.reviews-section {
font-family: var(--i-font-body);
color: var(--i-ink);
}
/* ---- Section rhythm + alternating surfaces -------------------------------- */
section.service.main_servicess,
section.ef-flight-deals,
section.py-5,
section.paper,
section.tabbing_new_sec_two,
section.tabbing_sec-new,
section.main_section_Amenities,
section.faq_sec,
section.reviews-section {
padding-top: 80px !important;
padding-bottom: 80px !important;
background: var(--i-surface);
}
section.tabbing_sec-new.bg-gran,
section.py-5.bg-light {
/* tint (#f8fafc) instead of white, matching FTI's equivalent sections.
reviews-section is intentionally NOT here — FTI gives it a pale-blue band
(#e8f7fe), set in the REVIEWS block below.
tabbing_new_sec_two (the "Major Travel Hubs & Airport Guide" section) was
also tinted to match FTI, but the user asked for it WHITE (2026-06-21), so
it now falls back to the white --i-surface from the group above. */
background: var(--i-bg) !important;
}
/* The "Popular U.S. Flight Routes" link-list sections (.paper.popular-routes) sit
between the white booking and white FAQ sections, so all three blended into one
flat white block. Tint them (#f8fafc) to restore the FTI white/tint alternation. */
section.paper.popular-routes { background: var(--i-bg) !important; }
/* ---- Headings ------------------------------------------------------------- */
.heading_container h2,
.container_Amenities.heading_container h2,
.container_Amenities.heading_container h3,
section.paper h2,
section.paper .page-header h2,
section.faq_sec h2 {
font-family: var(--i-font-display) !important;
font-weight: 800 !important;
letter-spacing: -.02em !important;
color: var(--i-ink) !important;
line-height: 1.15 !important;
}
.heading_container h2 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem) !important; }
.heading_container p,
.container_Amenities.heading_container p,
.container_Amenities.heading_container .subtitle {
color: var(--i-muted) !important;
font-size: 1.02rem !important;
line-height: 1.6 !important;
}
/* =====================================================================
HERO — .banner .new-banner-fly + .flight-widget form
===================================================================== */
.banner .bannerin.new-banner-fly {
background: var(--i-grad-hero) !important;
position: relative;
padding: 64px 0 72px !important;
overflow: hidden;
}
.banner .bannerin.new-banner-fly::after {
content: ""; position: absolute; inset: 0;
background: radial-gradient(900px 400px at 80% -10%, rgba(225,29,72,.28), transparent 60%);
pointer-events: none;
}
.banner .bannerin.new-banner-fly .container { position: relative; z-index: 2; }
.banner .main_left_side .inner_conatainer h1 {
font-family: var(--i-font-display) !important;
font-weight: 800 !important;
letter-spacing: -.02em !important;
color: #fff !important;
font-size: clamp(2rem, 1.3rem + 3vw, 3.1rem) !important;
line-height: 1.1 !important;
margin-bottom: 16px !important;
}
.banner .main_left_side .inner_conatainer p,
.banner .main_left_side .inner_conatainer p strong {
color: rgba(255,255,255,.86) !important;
font-size: 1.05rem !important;
line-height: 1.6 !important;
font-weight: 400 !important;
}
/* search/booking widget -> floating white card */
.banner .flight-widget {
background: var(--i-surface) !important;
border-radius: var(--i-radius-lg) !important;
box-shadow: var(--i-shadow-lg) !important;
padding: 22px !important;
border: 1px solid rgba(255,255,255,.6);
}
.banner .flight-widget h2 {
font-family: var(--i-font) !important;
font-weight: 700 !important;
font-size: 1.15rem !important;
color: var(--i-ink) !important;
margin: 0 0 14px !important;
}
.banner .flight-widget .radio-inline { color: var(--i-ink) !important; font-weight: 600; }
.banner .flight-widget label { color: var(--i-muted) !important; font-weight: 600; font-size: .82rem; }
.banner .flight-widget .frm-ctrl,
.banner .flight-widget select.frm-ctrl,
.banner .flight-widget input.frm-ctrl {
border: 1px solid var(--i-line) !important;
border-radius: var(--i-radius-sm) !important;
background: var(--i-bg-tint) !important;
color: var(--i-ink) !important;
height: auto; padding: 11px 12px !important;
transition: border-color .15s ease, box-shadow .15s ease;
}
.banner .flight-widget .frm-ctrl:focus {
border-color: var(--i-brand) !important;
box-shadow: 0 0 0 3px rgba(225,29,72,.12) !important;
outline: none !important;
}
.banner .flight-widget .main_button,
.banner .flight-widget button[type="submit"],
.banner .flight-widget input[type="submit"] {
background: var(--i-grad-brand) !important;
border: none !important;
color: #fff !important;
border-radius: var(--i-radius-sm) !important;
font-weight: 700 !important;
letter-spacing: .01em;
padding: 13px 22px !important;
box-shadow: var(--i-shadow-brand) !important;
transition: transform .15s ease, box-shadow .15s ease;
}
.banner .flight-widget .main_button:hover,
.banner .flight-widget button[type="submit"]:hover {
transform: translateY(-1px);
box-shadow: 0 18px 42px rgba(225,29,72,.30) !important;
}
/* =====================================================================
SECTION 1 — "MyflyYatra Advantage" cards (.service.main_servicess)
Mirrors the Flights-to-India ".fti-why" card grid: centered section head
with gradient underline, a flex grid with even gutters + equal-height
cards, a top accent bar that reveals on hover, and an icon chip for the
image. Page keeps its OWN images + copy — only the styling matches FTI.
===================================================================== */
/* Match FTI's section width: the internal body uses the bootstrap .container
(max 1200 / 15px pad) while FTI sections use 1440 / 32px. Widen this section's
container to match (scoped per-section, so the off-limits chart partial and any
nested width-constrained sections are untouched). */
section.service.main_servicess > .container {
max-width: 1440px !important; width: 100% !important;
margin-left: auto !important; margin-right: auto !important;
padding-left: 32px !important; padding-right: 32px !important;
}
/* Centered section head with gradient underline (FTI .fti-section-head) */
section.service.main_servicess .heading_container {
flex: 0 0 100%; width: 100%;
text-align: center; margin: 0 auto 56px !important; padding: 0 12px;
}
section.service.main_servicess .heading_container p {
max-width: 760px; margin: 0 auto !important;
font-size: 1.05rem !important; line-height: 1.65 !important;
}
section.service.main_servicess .heading_container h2 {
position: relative; display: inline-block; padding-bottom: 18px; margin: 0 0 16px !important;
line-height: 1.2 !important;
}
section.service.main_servicess .heading_container h2::after {
content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
width: 72px; height: 4px; border-radius: 999px; background: var(--i-grad-brand);
}
/* Extend FTI's centered gradient-underline section head to the remaining centered
sections — airlines, airport guide, booking, reviews. FTI puts this red accent
under every section title; internal only had it on the advantage section.
Content-free — pure ::after decoration. */
section.tabbing_sec-new .container_Amenities.heading_container h2,
section.tabbing_new_sec_two .container_Amenities.heading_container h2,
section.main_section_Amenities .container_Amenities.heading_container h2,
section.reviews-section .container > h2 {
position: relative; display: inline-block;
padding-bottom: 18px !important; margin-bottom: 16px !important;
line-height: 1.2 !important;
}
section.tabbing_sec-new .container_Amenities.heading_container,
section.tabbing_new_sec_two .container_Amenities.heading_container,
section.main_section_Amenities .container_Amenities.heading_container {
text-align: center !important;
}
section.tabbing_sec-new .container_Amenities.heading_container h2::after,
section.tabbing_new_sec_two .container_Amenities.heading_container h2::after,
section.main_section_Amenities .container_Amenities.heading_container h2::after,
section.reviews-section .container > h2::after {
content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
width: 72px; height: 4px; border-radius: 999px; background: var(--i-grad-brand);
}
/* Flex grid replaces the bootstrap float columns so the cards get even 24px
gutters and equal heights, exactly like .fti-why-grid. */
section.service.main_servicess .row {
display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch;
}
section.service.main_servicess .row > .heading_container { flex: 0 0 100%; }
section.service.main_servicess .best-sec {
flex: 1 1 calc((100% - 72px) / 4); min-width: 220px;
float: none !important; width: auto !important; margin: 0 !important;
background: var(--i-surface);
border: 1px solid var(--i-line);
border-radius: var(--i-radius) !important;
box-shadow: var(--i-shadow-sm);
padding: 32px 26px 30px !important;
text-align: left;
position: relative; overflow: hidden;
display: flex; flex-direction: column;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
/* kill the legacy fixed sizing (min-height:350px / height:325px from
header-new.php) so cards hug their content like FTI's .fti-why-card */
min-height: 0 !important; height: auto !important;
}
@media (max-width: 1024px) { section.service.main_servicess .best-sec { flex: 1 1 calc((100% - 24px) / 2); } }
@media (max-width: 560px) { section.service.main_servicess .best-sec { flex: 1 1 100%; } }
section.service.main_servicess .best-sec::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: var(--i-grad-brand); transform: scaleX(0); transform-origin: left;
transition: transform .35s ease;
}
section.service.main_servicess .best-sec:hover {
transform: translateY(-6px);
box-shadow: var(--i-shadow-lg);
border-color: rgba(225,29,72,.18);
}
section.service.main_servicess .best-sec:hover::before { transform: scaleX(1); }
/* image -> FTI icon chip (soft-brand rounded square). The legacy PNG/WebP
clip-art is swapped for FTI's clean line SVG via `content`, keyed off the
image filename so it works on every city page regardless of which icon file
that page shipped (zero markup changes). On hover the chip fills with the
brand gradient and the icon turns white, exactly like .fti-why-card. */
section.service.main_servicess .best-sec img {
width: 60px; height: 60px; object-fit: contain; box-sizing: border-box;
padding: 14px; background: var(--i-brand-soft);
border-radius: 14px; margin: 0 0 20px; display: block;
transition: background .25s ease;
}
section.service.main_servicess .best-sec:hover img { background: var(--i-grad-brand); }
section.service.main_servicess .best-sec img[src*="Easy-Booking"] { content: url("data:image/svg+xml;utf8,"); }
section.service.main_servicess .best-sec img[src*="Flexible-Booking"] { content: url("data:image/svg+xml;utf8,"); }
section.service.main_servicess .best-sec img[src*="Late-Night"] { content: url("data:image/svg+xml;utf8,"); }
section.service.main_servicess .best-sec img[src*="discount"] { content: url("data:image/svg+xml;utf8,"); }
section.service.main_servicess .best-sec img[src*="Deal"] { content: url("data:image/svg+xml;utf8,"); }
section.service.main_servicess .best-sec img[src*="prices"] { content: url("data:image/svg+xml;utf8,"); }
section.service.main_servicess .best-sec img[src*="support"] { content: url("data:image/svg+xml;utf8,"); }
section.service.main_servicess .best-sec img[src*="secure"] { content: url("data:image/svg+xml;utf8,"); }
section.service.main_servicess .best-sec img[src*="Trust-icon"] { content: url("data:image/svg+xml;utf8,"); }
section.service.main_servicess .best-sec img[src*="Comfart"] { content: url("data:image/svg+xml;utf8,"); }
section.service.main_servicess .best-sec:hover img[src*="Easy-Booking"] { content: url("data:image/svg+xml;utf8,"); }
section.service.main_servicess .best-sec:hover img[src*="Flexible-Booking"] { content: url("data:image/svg+xml;utf8,"); }
section.service.main_servicess .best-sec:hover img[src*="Late-Night"] { content: url("data:image/svg+xml;utf8,"); }
section.service.main_servicess .best-sec:hover img[src*="discount"] { content: url("data:image/svg+xml;utf8,"); }
section.service.main_servicess .best-sec:hover img[src*="Deal"] { content: url("data:image/svg+xml;utf8,"); }
section.service.main_servicess .best-sec:hover img[src*="prices"] { content: url("data:image/svg+xml;utf8,"); }
section.service.main_servicess .best-sec:hover img[src*="support"] { content: url("data:image/svg+xml;utf8,"); }
section.service.main_servicess .best-sec:hover img[src*="secure"] { content: url("data:image/svg+xml;utf8,"); }
section.service.main_servicess .best-sec:hover img[src*="Trust-icon"] { content: url("data:image/svg+xml;utf8,"); }
section.service.main_servicess .best-sec:hover img[src*="Comfart"] { content: url("data:image/svg+xml;utf8,"); }
section.service.main_servicess .best-sec h3,
section.service.main_servicess .best-sec h4,
section.service.main_servicess h3 {
font-family: var(--i-font) !important;
font-weight: 700 !important; color: var(--i-ink) !important;
font-size: 1.15rem !important; line-height: 1.3 !important; margin: 0 0 10px !important;
/* drop legacy min-height:62px + padding-top:21px on the title */
min-height: 0 !important; padding: 0 !important;
}
section.service.main_servicess .best-sec span,
section.service.main_servicess .best-sec p {
color: var(--i-muted) !important; font-size: .95rem !important;
line-height: 1.65 !important; display: block;
margin: 0 !important; padding: 0 !important; /* drop legacy span padding */
}
/* =====================================================================
FLIGHT DEALS — section.ef-flight-deals (ported from FTI .fti-2026
.ef-flight-deals; token-mapped to --i-*). Includes the Super.gif banner
(full-width, rounded, soft shadow), centered header w/ gradient underline,
pill tabs, 3-up card grid, price/badge/book-btn polish — matching FTI.
===================================================================== */
section.ef-flight-deals {
max-width: 1440px !important; margin: 0 auto !important;
/* no bottom padding: the chart band is the last child and already has its own
bottom padding + border, and the next section adds 80px top padding — the
extra 88px here just made too much empty space below the section */
padding: 88px 32px 0 !important; background: transparent !important;
}
/* Global .row is set to display:flex in this page (line 2529), which would lay out
the header + tabs + active panel as horizontal siblings. Force every direct .row
inside this section back to block flow so the heading stacks above the tab pills
above the card grid. */
section.ef-flight-deals > .row {
display: block !important;
margin: 0 !important;
}
/* Super.gif banner above the heading — show with proper sizing */
section.ef-flight-deals > .row:first-child {
margin: 0 0 28px !important;
}
section.ef-flight-deals > .row:first-child .col-xs-12 {
padding: 0 !important;
display: block;
}
section.ef-flight-deals > .row:first-child img {
display: block; width: 100%; max-width: 100%;
height: auto; margin: 0 auto;
border-radius: var(--i-radius);
box-shadow: var(--i-shadow-sm);
}
@media (max-width: 575px) {
section.ef-flight-deals > .row:first-child { margin: 0 0 20px !important; }
section.ef-flight-deals > .row:first-child img { border-radius: 12px; }
}
/* Header polish */
section.ef-flight-deals .ef-header {
text-align: center; margin-bottom: 32px !important;
}
section.ef-flight-deals .ef-header h2 {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: clamp(1.6rem, 2.6vw, 2.4rem) !important;
font-weight: 800 !important; color: var(--i-ink) !important;
line-height: 1.15 !important; letter-spacing: -.02em !important;
margin: 0 auto 14px !important; position: relative; padding-bottom: 18px;
display: inline-block;
}
section.ef-flight-deals .ef-header h2::after {
content: ''; position: absolute; left: 50%; bottom: 0;
transform: translateX(-50%); width: 72px; height: 4px;
border-radius: 999px; background: var(--i-grad-brand);
}
section.ef-flight-deals .ef-header h2 span {
color: var(--i-brand) !important; font-weight: 800; display: inline;
}
section.ef-flight-deals .ef-header p {
color: var(--i-muted) !important; max-width: 720px;
margin: 14px auto 0 !important; font-size: 1.02rem !important;
line-height: 1.6;
}
/* Tab pill bar (Round Trip / One Way) */
section.ef-flight-deals .ef-tabs {
margin: 0 auto 36px !important; background: #fff !important;
border: 1px solid var(--i-line); box-shadow: var(--i-shadow-sm);
border-radius: 999px; padding: 6px !important;
gap: 4px !important; width: fit-content;
}
section.ef-flight-deals .ef-tab-btn {
font-family: 'Plus Jakarta Sans', sans-serif !important;
color: var(--i-muted) !important; padding: 10px 22px !important;
border-radius: 999px !important; font-size: .94rem !important;
}
section.ef-flight-deals .ef-tab-btn img.ef-tab-icon { width: 14px; height: 14px; }
section.ef-flight-deals .ef-tab-btn.active {
background: var(--i-grad-brand) !important; color: #fff !important;
box-shadow: var(--i-shadow-brand) !important;
}
section.ef-flight-deals .ef-tab-btn.active img.ef-tab-icon {
opacity: 1; filter: brightness(0) invert(1);
}
/* Card grid: 3-up on desktop, responsive */
section.ef-flight-deals .ef-grid {
display: flex !important;
flex-wrap: wrap !important;
gap: 18px !important;
grid-template-columns: none !important;
/* gap below the deal cards before the full-bleed chart band (which otherwise
sits flush against the cards with no breathing room) */
margin-bottom: 40px !important;
}
section.ef-flight-deals .ef-card {
flex: 0 1 calc((100% - 36px) / 3) !important;
max-width: calc((100% - 36px) / 3) !important;
min-width: 0 !important;
}
@media (max-width: 992px) {
section.ef-flight-deals .ef-card { flex-basis: calc((100% - 18px) / 2) !important; max-width: calc((100% - 18px) / 2) !important; }
}
@media (max-width: 575px) {
section.ef-flight-deals .ef-card { flex-basis: 100% !important; max-width: 100% !important; }
}
/* Card itself */
section.ef-flight-deals .ef-card {
border-radius: var(--i-radius) !important;
border: 1px solid var(--i-line) !important;
box-shadow: var(--i-shadow-sm) !important; padding: 22px !important;
background: #fff; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
section.ef-flight-deals .ef-card:hover {
border-color: rgba(225,29,72,.18) !important;
box-shadow: var(--i-shadow-lg) !important; transform: translateY(-4px);
}
/* Top route row */
section.ef-flight-deals .ef-card-route { gap: 12px !important; }
section.ef-flight-deals .ef-airline-logo {
width: 42px !important; height: 42px !important; border-radius: 8px !important;
border: 1px solid var(--i-line) !important; padding: 4px !important; background: #fff;
}
section.ef-flight-deals .ef-city-block strong {
font-family: 'Plus Jakarta Sans', sans-serif !important;
color: var(--i-ink) !important; font-size: 1rem !important;
font-weight: 800 !important; letter-spacing: -.01em;
}
section.ef-flight-deals .ef-city-block span {
color: var(--i-muted) !important; font-size: .78rem !important;
font-weight: 500; margin-top: 2px; display: block;
}
section.ef-flight-deals .ef-route-line {
background: linear-gradient(90deg, var(--i-brand), var(--i-accent)) !important;
height: 2px !important; width: 44px !important;
}
section.ef-flight-deals .ef-flight-icon-wrap img {
width: 18px !important; height: 18px !important;
filter: invert(20%) sepia(94%) saturate(7494%) hue-rotate(340deg) brightness(80%) contrast(95%);
opacity: .85;
}
/* Divider */
section.ef-flight-deals .ef-card-divider {
background: var(--i-line-soft) !important; margin: 14px 0 !important;
}
/* Price row */
section.ef-flight-deals .ef-card-price-row {
display: grid !important;
grid-template-columns: 1fr auto;
gap: 12px; align-items: center;
}
section.ef-flight-deals .ef-original-price {
color: var(--i-muted) !important; font-size: .82rem !important;
text-decoration: line-through; font-weight: 500;
}
section.ef-flight-deals .ef-save-badge {
background: rgba(34,197,94,.12) !important;
color: #16a34a !important; font-weight: 700;
padding: 2px 8px; border-radius: 999px;
font-size: .7rem !important; margin-left: 6px;
}
section.ef-flight-deals .ef-offer-price {
font-family: 'Plus Jakarta Sans', sans-serif !important;
color: var(--i-brand) !important; font-size: 1.6rem !important;
font-weight: 800 !important; line-height: 1; margin-top: 4px;
}
section.ef-flight-deals .ef-offer-price sup {
font-size: .85rem !important; color: var(--i-ink) !important;
font-weight: 700 !important; top: -.6em;
}
/* CTA buttons — hide the "Call Now" button (the page already has a CTA banner + mobile bottom bar),
keep only "Book Now" as the primary action */
section.ef-flight-deals .ef-book-btn[href^="tel:"] { display: none !important; }
section.ef-flight-deals .ef-book-btn {
background: var(--i-grad-brand) !important; color: #fff !important;
border-radius: 10px !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
padding: 10px 18px !important; font-size: .88rem !important;
font-weight: 700 !important; letter-spacing: .02em;
box-shadow: var(--i-shadow-sm); border: none !important;
}
section.ef-flight-deals .ef-book-btn:hover {
color: #fff !important; transform: translateY(-2px);
box-shadow: var(--i-shadow-brand) !important;
}
@media (max-width: 575px) {
section.ef-flight-deals { padding: 64px 16px !important; }
section.ef-flight-deals .ef-tabs { width: 100%; }
section.ef-flight-deals .ef-tab-btn { flex: 1; justify-content: center; }
section.ef-flight-deals .ef-offer-price { font-size: 1.4rem !important; }
}
/* =====================================================================
FARE TABLES — .paper tables
(the .py-5 chart-card styling lives in the FARE-TREND CHARTS block above;
the old dark-gradient .card-header rule here was removed so the charts use
FTI's white card header.)
===================================================================== */
/* Match FTI's section.paper tables (.fti-2026 section.paper .table): a rounded,
bordered container with shadow, a LIGHT uppercase header (was a dark header),
clean single-line row borders + hover, subtle odd-row stripe. Numeric columns
keep their own `text-end` alignment (the fares table right-aligns prices). */
section.paper .table-responsive {
overflow-x: auto;
border-radius: var(--i-radius) !important;
border: 1px solid var(--i-line) !important;
box-shadow: var(--i-shadow-sm) !important;
margin-bottom: 56px !important;
}
section.paper table.table {
width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important;
margin: 0 !important; background: #fff !important;
border-radius: 0 !important; box-shadow: none !important;
}
section.paper table.table th,
section.paper table.table td {
padding: 14px 20px !important; vertical-align: middle !important;
border: none !important; border-bottom: 1px solid var(--i-line-soft) !important;
font-size: .96rem !important; color: var(--i-ink);
/* FTI uses one font for the whole table; internal td was inheriting DM Sans
while the th used Plus Jakarta Sans — unify both to --i-font like FTI */
font-family: var(--i-font) !important;
}
section.paper table.table thead th {
background: var(--i-bg) !important; color: var(--i-ink) !important;
font-family: var(--i-font) !important; font-weight: 700 !important; font-size: .82rem !important;
text-transform: uppercase !important; letter-spacing: .06em !important;
border-bottom: 2px solid var(--i-line) !important;
}
section.paper table.table td:first-child { font-weight: 600 !important; color: var(--i-ink) !important; }
/* neutralize bootstrap's built-in striping so the subtle FTI stripe + hover show */
section.paper table.table.table-striped > tbody > tr > * { --bs-table-accent-bg: transparent !important; box-shadow: none !important; }
section.paper table.table tbody tr:nth-of-type(odd) { background: rgba(15,23,42,.025) !important; }
section.paper table.table tbody tr:last-child td { border-bottom: none !important; }
section.paper table.table tbody tr:hover { background: var(--i-bg-tint) !important; }
/* Mobile/tablet: this 5-column fares table can't fit a phone, so it scrolls
horizontally. Refine that scroll: (1) PIN the Airline column so the row label
stays visible while the fare columns slide under it, and (2) keep a thin,
always-visible scrollbar as a scroll affordance so it doesn't read as "cut
off". The desktop cell padding (14/20px) + .96rem font also blew the table out
to ~968px, so tighten padding/font on phones to show far more at once. */
@media (max-width: 991px) {
section.paper .table-responsive { -webkit-overflow-scrolling: touch; }
/* thin persistent scrollbar = visible "you can scroll" hint */
section.paper .table-responsive::-webkit-scrollbar { height: 7px; -webkit-appearance: none; }
section.paper .table-responsive::-webkit-scrollbar-thumb {
background: rgba(15,23,42,.32); border-radius: 4px;
}
section.paper .table-responsive { scrollbar-width: thin; }
/* sticky Airline column (first cell of every row) */
section.paper table.table th:first-child,
section.paper table.table td:first-child {
position: sticky !important; left: 0 !important; z-index: 2;
background: #fff !important; box-shadow: 1px 0 0 var(--i-line) !important;
}
section.paper table.table thead th:first-child { background: var(--i-bg) !important; z-index: 3; }
/* keep the sticky column's stripe matching the row stripe underneath it */
section.paper table.table tbody tr:nth-of-type(odd) td:first-child { background: #f8f9fa !important; }
}
@media (max-width: 767px) {
section.paper table.table th,
section.paper table.table td { padding: 9px 10px !important; font-size: .82rem !important; }
section.paper table.table thead th { font-size: .68rem !important; letter-spacing: .03em !important; }
}
/* intro paragraph — internal was rendering the legacy 14px/light default; FTI's
intro is ~1.05rem, darker (ink-2), airier line-height. Match it (note: only the
direct-child intro p, not the small disclaimer inside .fare-note). */
section.paper > .container > .row > [class*="col-"] > p {
font-family: var(--i-font-body) !important;
font-size: 1.05rem !important; line-height: 1.7 !important;
color: #334155 !important; margin: 0 0 16px !important;
}
/* breathing room below the section heading before the intro/table */
section.paper .page-header,
section.paper h2.page-header { margin: 0 0 14px !important; padding-bottom: 0 !important; }
/* The Fares table heading is uniquely `h2.page-header.heading_container` — centre
it and give it FTI's red gradient underline so it matches the other section
heads (the other paper headings stay left-aligned). */
section.paper h2.page-header.heading_container {
text-align: center !important;
position: relative !important;
padding-bottom: 18px !important;
margin: 0 auto 18px !important;
line-height: 1.25 !important;
}
section.paper h2.page-header.heading_container::after {
content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
width: 72px; height: 4px; border-radius: 999px; background: var(--i-grad-brand);
}
/* Centre the fares intro paragraph under the now-centred heading. */
section.paper:has(h2.page-header.heading_container) > .container > .row > [class*="col-"] > p {
text-align: center !important; max-width: 900px;
margin-left: auto !important; margin-right: auto !important;
}
/* Fares "Note" disclaimer (.fare-note p.small.text-muted): the bootstrap .small
default (~14px) read too small, and the 56px table margin pushed it too far
below the table. Enlarge it, and turn it into a soft callout box so it reads as
a deliberate disclaimer block (a "background so it's different") rather than
loose grey text floating above a big empty gap. */
section.paper .table-responsive { margin-bottom: 24px !important; }
section.paper .fare-note {
margin-top: 20px !important;
background: var(--i-brand-soft) !important;
border: 1px solid var(--i-line) !important;
border-left: 4px solid var(--i-brand) !important;
border-radius: var(--i-radius) !important;
padding: 18px 22px !important;
}
section.paper .fare-note p,
section.paper .fare-note p.small {
font-family: var(--i-font-body) !important;
font-size: .95rem !important; line-height: 1.65 !important;
color: #475569 !important;
margin: 0 !important;
}
section.paper .fare-note p strong { color: var(--i-ink) !important; }
/* Tighten the gap below the fares table section so the note isn't followed by
~160px of dead space before the next (Flight Detail) section. */
section.paper:has(.fare-note) { padding-bottom: 44px !important; }
/* City body-text blocks (About New York / Why Visit Mumbai / Tips …): style the
h3 sub-heads + ensure every paragraph gets FTI body typography, including the
"Tips" paragraphs that sit as direct children of .container (not in a col). */
section.paper h3 {
font-family: var(--i-font-display) !important;
font-weight: 800 !important; letter-spacing: -.01em !important;
color: var(--i-ink) !important;
font-size: 1.5rem !important; line-height: 1.25 !important;
margin: 34px 0 14px !important;
}
section.paper > .container > p,
section.paper > .container > .row > [class*="col-"] > p {
font-family: var(--i-font-body) !important;
font-size: 1.05rem !important; line-height: 1.7 !important;
color: #334155 !important; margin: 0 0 16px !important;
}
section.paper > .container > p strong,
section.paper .row > [class*="col-"] > p strong { color: var(--i-ink) !important; }
/* =====================================================================
DARK CTA — .banner_image_bg + .call-cta
===================================================================== */
/* Matched 1:1 to FTI's CTA (.fti-2026 section.banner_image_bg): dark gradient
panel + radial brand/amber glows, centred 820px inner, white heading + muted
copy, and a WHITE call-card with a gradient phone-icon chip + dark text
(internal previously showed a red pill — different from FTI). Markup unchanged. */
section.banner_image_bg {
background: var(--i-grad-hero) !important;
color: #fff !important;
position: relative !important; overflow: hidden !important;
padding: 88px 0 !important; border-radius: 0;
/* header-new.php pins this to a fixed `height:429px`, which clipped the call
card under overflow:hidden — let it grow with its content like FTI. */
height: auto !important; min-height: 0 !important;
}
section.banner_image_bg::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background:
radial-gradient(circle at 80% 30%, rgba(225,29,72,.30) 0, transparent 45%),
radial-gradient(circle at 20% 80%, rgba(245,158,11,.20) 0, transparent 45%);
}
section.banner_image_bg .banner_inner {
position: relative; z-index: 2;
max-width: 820px; margin: 0 auto; text-align: center; color: #fff;
}
section.banner_image_bg .banner_inner h2,
section.banner_image_bg .banner_inner h3 {
font-family: var(--i-font-display) !important; font-weight: 800 !important; color: #fff !important;
font-size: clamp(1.8rem, 3vw, 2.6rem) !important; line-height: 1.2 !important;
margin: 0 0 16px !important;
}
section.banner_image_bg .banner_inner p {
color: rgba(226,232,240,.86) !important;
font-size: 1.05rem !important; line-height: 1.7 !important;
/* header-new.php pins `.banner_inner p { width:60%; margin:auto }`, which
squeezed the copy into a narrow left-offset column — let it fill the centred
820px inner like FTI. */
width: auto !important; max-width: 100% !important;
margin: 0 auto 28px !important;
}
/* .main_button = centering wrapper; FTI lays the call card out flex-centred */
section.banner_image_bg .main_button {
display: flex !important; flex-wrap: wrap !important;
gap: 14px !important; justify-content: center !important; align-items: center !important;
background: transparent !important; border: none !important; border-radius: 0 !important;
padding-top: 0 !important;
}
/* FTI call-cta = white rounded card */
section.banner_image_bg .call-cta {
display: inline-flex !important; align-items: center !important; gap: 16px !important;
padding: 16px 28px !important;
background: #fff !important; color: var(--i-ink) !important;
border-radius: 18px !important; box-shadow: var(--i-shadow-lg) !important;
border: none !important; text-decoration: none !important; font-weight: 700 !important;
transition: transform .2s ease, box-shadow .2s ease;
}
section.banner_image_bg .call-cta:hover {
transform: translateY(-3px) !important; box-shadow: 0 22px 50px rgba(0,0,0,.25) !important;
}
section.banner_image_bg .call-icon {
width: 52px !important; height: 52px !important; min-width: 52px !important; min-height: 52px !important;
display: grid !important; place-items: center !important; padding: 0 !important;
background: var(--i-grad-brand) !important; border-radius: 14px !important;
box-shadow: var(--i-shadow-brand) !important;
}
section.banner_image_bg .call-icon img {
width: 24px !important; height: 24px !important; filter: brightness(0) invert(1) !important;
}
section.banner_image_bg .call-text {
display: flex !important; flex-direction: column !important; align-items: flex-start !important;
}
section.banner_image_bg .call-small {
font-size: .78rem !important; color: var(--i-muted) !important; font-weight: 600 !important;
text-transform: uppercase !important; letter-spacing: .06em !important; text-align: left !important;
}
section.banner_image_bg .call-number {
font-size: 1.4rem !important; font-weight: 800 !important; color: var(--i-ink) !important;
letter-spacing: -.01em !important; margin-top: 2px !important;
}
@media (max-width: 575px) {
section.banner_image_bg { padding: 56px 0 !important; }
}
/* =====================================================================
TABS — .tabbing_new_sec_two (.tabs .tab-btn) + .tabbing_sec-new (swipe)
===================================================================== */
.tabbing_new_sec_two .tabs { gap: 8px; flex-wrap: wrap; }
.tabbing_new_sec_two .tabs .tab-btn,
.tabbing_sec-new .swipe-tabs-new .swipe-tab-new {
border-radius: 999px !important;
border: 1px solid var(--i-line) !important;
background: var(--i-surface) !important;
color: var(--i-ink) !important;
font-family: var(--i-font) !important; font-weight: 600 !important;
padding: 10px 18px !important;
transition: all .15s ease;
}
.tabbing_new_sec_two .tabs .tab-btn.active,
.tabbing_sec-new .swipe-tabs-new .swipe-tab-new.active-tab-new {
background: var(--i-grad-brand) !important;
border-color: transparent !important; color: #fff !important;
box-shadow: var(--i-shadow-brand) !important;
}
/* =====================================================================
FARE-TREND CHARTS — section.py-5 chart cards -> FTI .fti-fares cards
chart.php renders the Monthly / Weekly / Weekday Chart.js graphs inside
plain bootstrap cards. The graphs themselves use the same colours as FTI,
so we only restyle the CARD shell to match FTI's .fti-fares__card: tinted
section, 1440 container, rounded white card w/ border+shadow, and a header
with a soft-brand chart-icon chip + left-aligned title. CSS only; the chart
partial + Chart.js config are untouched (charts keep their responsive size).
===================================================================== */
/* Make the chart trio read as its OWN section, not part of the deals block above.
The .py-5 sections are nested INSIDE .ef-flight-deals (which has 32px side
padding); break them out with -32px side margins so the band spans the full
1440 block edge-to-edge, give it a distinct white surface + hairline top/bottom
borders so it visually detaches from the tinted deals grid above, while the
inner .container (max-width 1440, 32px pad) keeps the charts aligned to the
same grid as the deal cards. The two stacked .py-5 share one continuous band
(no margin between them), so the top border goes on the first, bottom on the
last (.bg-light weekday). */
section.py-5 {
/* TRUE full-bleed: the band must span the whole viewport, but .ef-flight-deals
is max-width:1440 centered, so a fixed -32px margin only reaches the 1440 cap
(looks boxed on >1440 screens). width:100vw + margin:calc(50% - 50vw) escapes
the centered container to the viewport edges at ANY width (works because the
ancestors are centred). The inner .container stays max-width:1440/centred so
the charts still align with the deal-card grid above. */
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
background: #fafbfd !important; /* match FTI .fti-fares background (rgb 250,251,253) */
}
/* override the .bg-light tint (set higher up at higher specificity) so the
weekday section shares the same band */
section.py-5.bg-light { background: #fafbfd !important; }
section.py-5 > .container {
max-width: 1440px !important; width: 100% !important; margin: 0 auto !important;
padding-left: 32px !important; padding-right: 32px !important;
}
section.py-5 .card {
background: #fff !important; border: 1px solid var(--i-line) !important;
border-radius: var(--i-radius-lg) !important;
box-shadow: var(--i-shadow) !important; overflow: hidden !important;
}
section.py-5 .card-header {
display: flex !important; align-items: center; gap: 12px;
text-align: left !important; justify-content: flex-start !important;
background: #fff !important; border: none !important;
padding: 22px 24px 0 !important;
font-family: var(--i-font) !important;
font-size: 16.5px !important; font-weight: 800 !important;
color: var(--i-ink) !important; letter-spacing: -.01em; line-height: 1.3;
}
section.py-5 .card-header::before {
content: ""; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px;
background-color: var(--i-brand-soft);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: center; background-size: 20px;
}
/* fixed-height card body so the FTI charts (maintainAspectRatio:false) fill it.
FTI .fti-fares__card-body is 320px (canvas 286) for the top row and 260px
(canvas 226) for the shorter full-width weekday graph — match both. */
section.py-5 .card-body { padding: 16px 20px 18px !important; height: 320px !important; position: relative; }
section.py-5.bg-light .card-body { height: 300px !important; }
/* CRITICAL: the canvas must FILL the card-body (height:100%) so Chart.js draws the
plot + X/Y axis labels INSIDE the box. chart.php pins the canvas to a fixed 320px
(260px ≤767) which is TALLER than the card-body content area, so it overflowed and
the bottom X labels (and the short weekday chart) got clipped on desktop + mobile.
This selector is more specific than chart.php's `.card.shadow-sm .card-body>canvas`
so the 100% wins at every breakpoint. */
section.py-5 .card.shadow-sm .card-body > canvas,
section.py-5 .card.shadow-sm .card-body canvas { width: 100% !important; height: 100% !important; }
/* iPad: charts go full width — give them a taller box (canvas still fills it 100%). */
@media (min-width: 768px) and (max-width: 1024px) {
section.py-5 .card-body,
section.py-5.bg-light .card-body { height: 400px !important; }
}
/* third graph (Weekly Day Fare Trend) full width inside the container, like FTI */
section.py-5.bg-light .col-lg-6 {
flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
}
/* Top row: 7/12 + 5/12 split (Monthly wider than Weekly) + 24px gap, matching
FTI's .fti-fares grid (793 / 559 cards). Flex (nowrap) with calc() basis that
accounts for the 24px gap; the bootstrap cols carry `mx-auto` + a card
max-width, so force the card to fill its column. */
section.py-5:not(.bg-light) .row {
display: flex !important; flex-wrap: nowrap !important; gap: 24px !important; margin: 0 !important;
}
/* bootstrap clearfix .row::before/::after become phantom flex items; with gap:24px
they shove the columns 24px to the right (Monthly no longer aligns to the left
edge). Remove them. */
section.py-5:not(.bg-light) .row::before,
section.py-5:not(.bg-light) .row::after { content: none !important; display: none !important; }
section.py-5:not(.bg-light) .row > [class*="col-"] { padding: 0 !important; margin: 0 !important; }
section.py-5:not(.bg-light) .row > [class*="col-"]:nth-child(1) { flex: 0 0 calc(58.333% - 12px) !important; max-width: calc(58.333% - 12px) !important; }
section.py-5:not(.bg-light) .row > [class*="col-"]:nth-child(2) { flex: 0 0 calc(41.667% - 12px) !important; max-width: calc(41.667% - 12px) !important; }
section.py-5:not(.bg-light) .row > [class*="col-"] > .card { width: 100% !important; max-width: none !important; margin: 0 !important; }
/* The 7/12 + 5/12 nowrap split above has no breakpoint, so on small screens the
Monthly & Weekly charts stayed locked side-by-side and squished to ~80-140px.
Below lg, let the row wrap and each card take the full width (stacked), like
the already-full-width weekday graph. */
@media (max-width: 991px) {
section.py-5:not(.bg-light) .row { flex-wrap: wrap !important; gap: 16px !important; }
section.py-5:not(.bg-light) .row > [class*="col-"]:nth-child(1),
section.py-5:not(.bg-light) .row > [class*="col-"]:nth-child(2) {
flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
}
}
/* Tighten the vertical gap between the stacked chart sections. bootstrap .py-5
gives each section 80px top+80px bottom, so the monthly/weekly row sat ~160px
above the full-width weekday graph. Keep the block's outer breathing room
(top of the monthly/weekly section, bottom of the weekday section) but collapse
the gap BETWEEN the two so the three graphs read as one block, like FTI. */
section.py-5 { padding-top: 48px !important; padding-bottom: 48px !important; }
section.py-5:not(.bg-light) { padding-bottom: 12px !important; } /* monthly/weekly -> weekday (24px total gap, like FTI) */
section.py-5.bg-light { padding-top: 12px !important; } /* weekday <- monthly/weekly */
/* =====================================================================
AMENITY CARDS — .amenities-grid .amenity-card (both tab + main sections)
===================================================================== */
.amenity-card {
background: var(--i-surface) !important;
border: 1px solid var(--i-line) !important;
border-radius: var(--i-radius) !important;
box-shadow: var(--i-shadow-sm) !important;
padding: 22px !important;
transition: transform .18s ease, box-shadow .18s ease;
}
.amenity-card:hover { transform: translateY(-3px); box-shadow: var(--i-shadow-lg) !important; }
.amenity-card .amenity-icon {
width: 54px; height: 54px; border-radius: 14px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--i-brand-soft) !important; color: var(--i-brand) !important;
margin-bottom: 14px;
}
/* Booking-step sections that keep their ORIGINAL photo/illustration icons (the
migrated pages have no .step-cta-new and so don't get the FTI glyph chips):
show the step illustration at its proper size instead of squishing it into the
54px chip. (Glyph-chip pages with .step-cta-new are unaffected.) */
section.main_section_Amenities .container:not(:has(> .step-cta-new)) .amenity-card .amenity-icon {
width: 100% !important; height: auto !important; border-radius: 0 !important;
background: transparent !important; display: block !important; margin-bottom: 18px !important;
}
section.main_section_Amenities .container:not(:has(> .step-cta-new)) .amenity-card .amenity-icon img {
display: block !important; width: 100% !important; max-width: 100% !important;
height: 180px !important; object-fit: cover !important; border-radius: 14px !important;
}
.amenity-card .amenity-content h3,
.amenity-card .amenity-content h4 {
font-family: var(--i-font) !important; font-weight: 700 !important; color: var(--i-ink) !important;
}
.amenity-card .amenity-content p,
.amenity-card .subtitle { color: var(--i-muted) !important; line-height: 1.6; }
/* =====================================================================
SECTION (Booking Process) — section.main_section_Amenities
Matches FTI's "#how" .fstep cards: 1440 container, centered head with
gradient underline, white-on-gradient icon chips (the legacy photo icons
are hidden and masked to FTI's search / compare / lock line glyphs by
position), and FTI title/desc sizing. Page content untouched. Scoped to
this section so the tabbed .amenity-card grid keeps its own styling.
===================================================================== */
section.main_section_Amenities > .container {
max-width: 1440px !important; width: 100% !important; margin: 0 auto !important;
padding-left: 32px !important; padding-right: 32px !important;
}
section.main_section_Amenities .container_Amenities.heading_container {
text-align: center; max-width: 760px; margin: 0 auto 56px !important; padding: 0 12px;
}
section.main_section_Amenities .heading_container h2 {
position: relative; display: inline-block; padding-bottom: 18px; margin: 0 0 16px !important; line-height: 1.2 !important;
}
section.main_section_Amenities .heading_container h2::after {
content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
width: 72px; height: 4px; border-radius: 999px; background: var(--i-grad-brand);
}
section.main_section_Amenities .heading_container .subtitle {
max-width: 760px; margin: 0 auto !important; font-size: 1.05rem !important; line-height: 1.65 !important;
}
/* The "3-Step" booking section is the one carrying the CTA strip (.step-cta-new),
inserted as a direct child of its .container. Scope the FTI step treatment to
that container via :has(), so the OTHER .main_section_Amenities block found on
airline pages ("Things to Prepare", 11 photo cards) keeps its own styling. */
/* Width: match the Flights-to-India #how booking section (1240), instead of the
full 1440 the other internal sections use (set ~line 64). Scoped to the step
section only, so the airline "Things to Prepare" amenities block stays 1440. */
section.main_section_Amenities .container:has(> .step-cta-new) {
max-width: 1240px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* card -> FTI .fstep */
section.main_section_Amenities .container:has(> .step-cta-new) .amenity-card {
border-radius: var(--i-radius-lg) !important;
padding: 40px 28px 32px !important;
position: relative !important; overflow: visible !important;
counter-increment: fstep;
/* Flex column (like FTI .fstep) so the icon chip and the title/desc text all
share the same left edge — fixes the icon/text alignment. */
display: flex !important; flex-direction: column !important; align-items: flex-start !important;
}
section.main_section_Amenities .container:has(> .step-cta-new) .amenity-content {
width: 100% !important;
padding-left: 0 !important; /* legacy .amenity-content has 20px left pad; drop it so text aligns flush with the icon */
}
/* Phone tel: link inside the booking card — bold dark like FTI (not default blue). */
section.main_section_Amenities .container:has(> .step-cta-new) .amenity-content a[href^="tel:"] {
color: var(--i-ink) !important; font-weight: 700 !important; text-decoration: none !important;
}
section.main_section_Amenities .container:has(> .step-cta-new) .amenity-content a[href^="tel:"]:hover { text-decoration: underline !important; }
section.main_section_Amenities .container:has(> .step-cta-new) .amenity-card:hover {
transform: translateY(-6px); border-color: rgba(225,29,72,.18) !important;
}
/* icon chip -> gradient + white masked line glyph (replaces tiny photo) */
section.main_section_Amenities .container:has(> .step-cta-new) .amenity-icon {
width: 64px !important; height: 64px !important; border-radius: 16px !important;
background: var(--i-grad-brand) !important; box-shadow: var(--i-shadow-brand);
margin-bottom: 20px !important; position: relative; padding: 0 !important;
}
section.main_section_Amenities .container:has(> .step-cta-new) .amenity-icon img { display: none !important; }
section.main_section_Amenities .container:has(> .step-cta-new) .amenity-icon::before {
content: ""; position: absolute; inset: 0; background: #fff;
-webkit-mask: var(--i-step-icon) center / 28px no-repeat;
mask: var(--i-step-icon) center / 28px no-repeat;
}
section.main_section_Amenities .container:has(> .step-cta-new) .amenities-grid > .amenity-card:nth-child(1) .amenity-icon { --i-step-icon: url("data:image/svg+xml;utf8,"); }
section.main_section_Amenities .container:has(> .step-cta-new) .amenities-grid > .amenity-card:nth-child(2) .amenity-icon { --i-step-icon: url("data:image/svg+xml;utf8,"); }
section.main_section_Amenities .container:has(> .step-cta-new) .amenities-grid > .amenity-card:nth-child(3) .amenity-icon { --i-step-icon: url("data:image/svg+xml;utf8,"); }
/* title + desc -> FTI sizes */
section.main_section_Amenities .container:has(> .step-cta-new) .amenity-content h3,
section.main_section_Amenities .container:has(> .step-cta-new) .amenity-content h4 {
font-size: 1.3rem !important; font-weight: 800 !important; margin: 0 0 10px !important; letter-spacing: -.01em;
}
section.main_section_Amenities .container:has(> .step-cta-new) .amenity-content p {
font-size: .98rem !important; line-height: 1.6 !important;
}
/* FTI step extras: faint 01/02/03 number watermark (top-right) + connector arrow
in the 30px column gap between cards. Pure CSS decoration — no page markup. */
section.main_section_Amenities .container:has(> .step-cta-new) .amenities-grid {
counter-reset: fstep;
/* Force exactly 3 columns (the page's base grid is auto-fit and drops to 2 cols
when the gap grows) with a wider column gap so the connector arrow sits cleanly
BETWEEN the cards instead of overlapping them. */
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
column-gap: 60px !important;
row-gap: 28px !important;
}
@media (max-width: 768px) {
section.main_section_Amenities .container:has(> .step-cta-new) .amenities-grid { grid-template-columns: 1fr !important; }
}
section.main_section_Amenities .container:has(> .step-cta-new) .amenity-card::after {
content: "0" counter(fstep);
position: absolute; top: 18px; right: 22px;
font-family: var(--i-font-display) !important;
font-size: 3rem; font-weight: 800; line-height: 1;
color: rgba(225,29,72,.08); letter-spacing: -.04em;
pointer-events: none;
}
section.main_section_Amenities .container:has(> .step-cta-new) .amenities-grid > .amenity-card:not(:last-child)::before {
content: ""; position: absolute; top: 50%; left: 100%;
/* FTI-size connector: a long thin line-arrow (~64px wide, like FTI's
.fstep__connector svg), centered on the 30px column gap. */
width: 44px; height: 14px; transform: translate(calc(-50% + 30px), -50%);
background: no-repeat center / 44px auto;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M2 6 H92 M92 6 l-6 -4 M92 6 l-6 4' fill='none' stroke='%23e11d48' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
opacity: .55; pointer-events: none;
}
/* On narrow screens the grid stacks to one column — drop the side arrows. */
@media (max-width: 768px) {
section.main_section_Amenities .container:has(> .step-cta-new) .amenities-grid > .amenity-card:not(:last-child)::before { display: none; }
}
/* FTI step CTA strip (.step-cta-new markup added to the booking section). Mirrors
FTI's .fstep-cta but un-namespaced since internal pages aren't .fti-2026. */
section.main_section_Amenities .step-cta-new {
text-align: center; display: flex; flex-direction: column;
align-items: center; gap: 12px; margin-top: 44px;
}
section.main_section_Amenities .step-cta-new__btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 16px 32px; border-radius: 14px;
background: var(--i-grad-brand); color: #fff !important;
font-weight: 700; font-size: 1.05rem; text-decoration: none !important;
box-shadow: var(--i-shadow-brand); transition: transform .2s ease;
font-family: var(--i-font-display) !important;
}
section.main_section_Amenities .step-cta-new__btn:hover { transform: translateY(-2px); color: #fff !important; }
section.main_section_Amenities .step-cta-new__btn svg { flex: 0 0 auto; }
section.main_section_Amenities .step-cta-new__hint { color: var(--i-muted); font-size: .92rem; font-weight: 500; }
section.main_section_Amenities .step-cta-new__hint a { color: var(--i-brand) !important; font-weight: 700; text-decoration: none !important; }
/* =====================================================================
POPULAR ROUTES — .paper.popular-routes
===================================================================== */
section.paper.popular-routes .page-header h2 { font-family: var(--i-font-display) !important; }
section.paper.popular-routes .route-description a,
section.paper.popular-routes a {
color: var(--i-brand) !important; font-weight: 600;
transition: color .15s ease;
}
section.paper.popular-routes a:hover { color: var(--i-brand-dark) !important; }
/* =====================================================================
FAQ — .faq_sec .accordion
===================================================================== */
section.faq_sec .accordion-item {
border: 1px solid var(--i-line) !important;
border-radius: var(--i-radius) !important;
background: var(--i-surface) !important;
box-shadow: var(--i-shadow-sm);
margin-bottom: 12px; overflow: hidden;
}
section.faq_sec .accordion-item-header {
font-family: var(--i-font) !important; font-weight: 700 !important;
/* right padding (44px) reserves room for the ::after chevron — without it the
arrow overlaps long question text on mobile. */
color: var(--i-ink) !important; padding: 16px 44px 16px 18px !important;
transition: background .15s ease, color .15s ease;
}
section.faq_sec .accordion-item-header:hover,
section.faq_sec .accordion-item-header.active {
background: var(--i-brand-soft) !important; color: var(--i-brand-dark) !important;
}
section.faq_sec .accordion-item-body-content {
color: var(--i-muted) !important; line-height: 1.65; padding: 4px 18px 18px !important;
}
/* FAQ arrow: replace the legacy errow_*.png (mislabelled, wrong direction, 96px tall)
with a centred inline-SVG chevron — points down when closed, flips up when open. */
section.faq_sec .accordion-item-header { position: relative; }
section.faq_sec .accordion-item-header::after,
section.faq_sec .accordion-item-header.active::after {
content: "" !important;
position: absolute !important; right: 16px !important; top: 50% !important; left: auto !important;
width: 20px !important; height: 20px !important;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat !important;
transform: translateY(-50%);
transition: transform .25s ease;
}
section.faq_sec .accordion-item-header.active::after { transform: translateY(-50%) rotate(180deg); }
/* =====================================================================
POPULAR ROUTES — section.paper.popular-routes (design-language polish)
Internal = prose paragraphs of inline city links (FTI = route-tag + price-card
directory; not reproducible without content). Per direction: keep the
paragraph, apply FTI typography. The .route-description paragraph already
inherits the paper body-text rule (font-body 1.05rem/1.7/#334155); here we
just refine the inline city links to a consistent brand treatment.
===================================================================== */
section.paper.popular-routes .route-description a {
color: var(--i-brand) !important; font-weight: 600 !important;
text-decoration: none !important; transition: color .15s ease;
}
section.paper.popular-routes .route-description a:hover {
color: var(--i-brand-dark) !important; text-decoration: underline !important;
}
/* =====================================================================
AIRPORT GUIDE — section.tabbing_new_sec_two (design-language polish)
Markup differs from FTI (FTI = airport-code card grid; internal = route-map
image + Key Airports/Travel Styles/Popular Routes tabs + 2-col bullet lists).
Keep structure; restyle: rounded map, chip-pill tabs, the .left_aripost
columns become FTI-style white cards with green-check bullets. CSS only.
===================================================================== */
/* The inner bootstrap .container is capped at ~1140px (default bootstrap) and
centred, so the map/tabs/cards sat ~1140 wide and inset ~135px — narrower than
the 1376 content width every other section uses (and than FTI, whose .container
fills 1440/32 since it has no bootstrap). Make it fill .section_container_tabbing
(already max-width:1440 + 32px pad) so the content lands at the same 1376/L32. */
section.tabbing_new_sec_two .section_container_tabbing > .container {
max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
}
section.tabbing_new_sec_two .main_tabbing_bg { padding: 0 !important; }
section.tabbing_new_sec_two .main_tabbing_bg > img {
/* round only the TOP corners; the tabs sit flush under the image, so square the
bottom so the map meets them cleanly. */
border-radius: var(--i-radius-lg) var(--i-radius-lg) 0 0 !important;
display: block !important; width: 100% !important;
}
/* main_tabbing_bg padding is 0 so the map image goes edge-to-edge — restore the
inset on the tab content (heading + JFK/BOM columns) only. */
section.tabbing_new_sec_two .tab-content { padding: 8px 32px 32px !important; }
/* FTI-style segmented pill-group: a centred white capsule holding the 3 tabs,
active tab filled with the brand gradient (matches FTI's .tabbing tab control). */
section.tabbing_new_sec_two .tabs {
/* one line: pill sizes to its tabs (no fixed 640 cap that forced long labels to
wrap); scrolls horizontally only if the labels exceed the container width. */
display: flex !important; flex-wrap: nowrap !important; justify-content: center !important;
gap: 8px !important; width: fit-content !important; max-width: 100% !important; margin: 28px auto 32px !important;
background: #fff !important; border: 1px solid var(--i-line) !important;
border-radius: 999px !important; padding: 8px !important;
box-shadow: var(--i-shadow-sm) !important;
overflow-x: auto !important;
}
section.tabbing_new_sec_two .tabs .tab-btn {
flex: 0 0 auto !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
background: transparent !important; border: none !important;
border-radius: 999px !important; padding: 12px 22px !important;
font-family: var(--i-font) !important; font-weight: 600 !important; font-size: .96rem !important;
color: var(--i-muted) !important; cursor: pointer; white-space: nowrap;
transition: color .2s ease, background .2s ease;
}
/* FTI's tab icons (pin / plane / check) — drawn via CSS so no markup/content is
added. currentColor masking makes the glyph follow the label colour, turning
white automatically on the active (gradient-filled) tab. */
section.tabbing_new_sec_two .tabs .tab-btn::before {
content: "" !important; flex: 0 0 auto; width: 17px; height: 17px;
background: currentColor;
-webkit-mask: var(--i-tab-ic) center / contain no-repeat;
mask: var(--i-tab-ic) center / contain no-repeat;
}
section.tabbing_new_sec_two .tabs .tab-btn[data-tab="airports"] { --i-tab-ic: url("data:image/svg+xml;utf8,"); }
section.tabbing_new_sec_two .tabs .tab-btn[data-tab="styles"] { --i-tab-ic: url("data:image/svg+xml;utf8,"); }
section.tabbing_new_sec_two .tabs .tab-btn[data-tab="routes"] { --i-tab-ic: url("data:image/svg+xml;utf8,"); }
section.tabbing_new_sec_two .tabs .tab-btn:hover { color: var(--i-ink) !important; }
section.tabbing_new_sec_two .tabs .tab-btn.active {
background: var(--i-grad-brand) !important; border-color: transparent !important;
color: #fff !important; box-shadow: var(--i-shadow-brand) !important;
}
/* Phones: the three tab labels were cramped/clipping inside the pill at ~425px.
Tighten spacing, shrink the type and drop the leading icon so all three fit
cleanly on one line down to 360px. */
@media (max-width: 480px) {
section.tabbing_new_sec_two .tabs {
gap: 3px !important; padding: 5px !important;
/* pill HUGS its tabs (fit-content) and centres — full width left too much empty
space inside the border. overflow visible + content-sized buttons keep all
three on one row without the base width:100% blowing them up. */
width: fit-content !important; max-width: 100% !important; overflow-x: visible !important;
margin-left: auto !important; margin-right: auto !important;
flex-wrap: nowrap !important; justify-content: center !important;
}
section.tabbing_new_sec_two .tabs .tab-btn {
/* kill base `.tab-btn{width:100%}` so they sit side by side, content-sized */
width: auto !important; flex: 0 0 auto !important; margin: 0 !important;
padding: 10px 10px !important; font-size: .78rem !important; gap: 0 !important;
white-space: nowrap !important;
}
section.tabbing_new_sec_two .tabs .tab-btn::before { display: none !important; }
}
/* header-new.php base sets `.heading_container{width:64%;margin:auto}` — the
`margin:auto` is what centres that 64% box. Earlier this rule set `margin:28px
0 4px` which killed the auto L/R margin, so the 64% box anchored hard LEFT.
Restore auto L/R (and cap to a comfortable FTI-style reading width) so the
centred text actually sits centred. */
section.tabbing_new_sec_two .tab-content .container_Amenities.heading_container {
width: auto !important; max-width: 760px !important;
margin: 28px auto 4px !important; text-align: center !important;
}
section.tabbing_new_sec_two .tab-content .container_Amenities.heading_container h3 {
font-family: var(--i-font-display) !important; font-weight: 800 !important;
color: var(--i-ink) !important; font-size: 1.4rem !important;
}
section.tabbing_new_sec_two .content-columns {
display: flex !important; flex-wrap: wrap !important; gap: 24px !important; margin-top: 24px !important;
}
section.tabbing_new_sec_two .left_aripost {
flex: 1 1 calc((100% - 24px) / 2) !important; min-width: 280px;
/* User asked (2026-06-21) for these JFK/BOM columns to be FLAT — no card
surface — so they blend into the now-white section. */
background: transparent !important; border: none !important;
border-radius: 0 !important; box-shadow: none !important;
padding: 8px 0 0 !important;
}
section.tabbing_new_sec_two .left_aripost > h3 {
font-family: var(--i-font-display) !important; font-weight: 800 !important;
color: var(--i-ink) !important; font-size: 1.2rem !important; line-height: 1.3 !important;
margin: 0 0 16px !important; padding-bottom: 14px !important;
border-bottom: 1px solid var(--i-line-soft) !important;
}
section.tabbing_new_sec_two .left_aripost ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
section.tabbing_new_sec_two .left_aripost li {
position: relative !important; list-style: none !important;
padding: 0 0 0 28px !important; margin: 0 0 14px !important;
}
section.tabbing_new_sec_two .left_aripost li::marker { content: "" !important; }
section.tabbing_new_sec_two .left_aripost li::before {
content: "" !important; position: absolute !important; left: 0; top: 4px; width: 18px; height: 18px;
background: url("data:image/svg+xml;utf8,") center/16px no-repeat;
}
section.tabbing_new_sec_two .left_aripost li p {
/* header partial sets `.section_container_tabbing ul li p{width:72%}`, capping
each pointer at ~72% of its column and leaving dead space on the right.
Restore full column width for these Key Airports / route bullets. */
width: 100% !important;
margin: 0 !important; font-family: var(--i-font-body) !important;
color: #334155 !important; font-size: .96rem !important; line-height: 1.6 !important;
}
@media (max-width: 768px) {
section.tabbing_new_sec_two .left_aripost { flex: 1 1 100% !important; }
}
/* =====================================================================
AIRPORT GUIDE — iPad (768–1024) + amenity-card fixes (reported on the
New York→Mumbai page)
• Map should run full-width on iPad (was inset by the 32px section gutter).
• Desktop-sized tab pills overflowed + scrolled on tablet, leaving only the
middle tab visible — drop the icon, tighten, and let them wrap.
• header-new.php's `@media(max-width:768px){.main_tabbing_bg .amenities-grid
{display:unset}}` collapsed the card grid to `inline`, killing the gap so
the Travel-Styles / Popular-Routes cards touched.
• The orange tick on .amenity-content bullets sat at left:-4px (outside the li).
===================================================================== */
/* iPad: map fills the content box (full width WITHIN the section gutter), not a
100vw bleed — the bleed broke past the inset content column while the tabs stayed
inset, so the image looked like it spilled outside the box. Keep the rounded top. */
@media (min-width: 768px) and (max-width: 1024px) {
section.tabbing_new_sec_two .main_tabbing_bg > img {
width: 100% !important; max-width: 100% !important; margin-left: 0 !important;
}
}
/* Tabs on tablet: drop the leading icon and tighten padding/type so the three sit
inline in one row. The pill HUGS its tabs (fit-content, centred) instead of
stretching full width — full width left too much empty space inside the border.
(≤480 keeps its own tighter phone treatment above.) */
@media (min-width: 481px) and (max-width: 1024px) {
section.tabbing_new_sec_two .tabs {
flex-wrap: wrap !important; overflow-x: visible !important;
width: fit-content !important; max-width: 100% !important;
margin-left: auto !important; margin-right: auto !important;
}
section.tabbing_new_sec_two .tabs .tab-btn {
/* base ≤768 forces width:100% (→ each tab on its own row); restore auto so the
three sit inline in one centred row. */
width: auto !important; flex: 0 0 auto !important; margin: 0 !important;
padding: 10px 16px !important; font-size: .9rem !important;
}
section.tabbing_new_sec_two .tabs .tab-btn::before { display: none !important; }
}
/* iPad + mobile: lay the tab-section amenity cards out with CENTERED flexbox (not
grid). Grid stranded an odd last card on the left of an empty 2-col row (e.g. the
"Popular Routes" tab has 5 cards → the 5th sat alone left). Flexbox + justify-center
centers a lone trailing card. This also overrides header-new.php's ≤768
`display:unset` that collapsed the grid + killed the gap. */
@media (max-width: 1024px) {
section.tabbing_new_sec_two .main_tabbing_bg .amenities-grid,
section.tabbing_new_sec_two .amenities-grid {
display: flex !important; flex-wrap: wrap !important;
justify-content: center !important; align-items: stretch !important; gap: 24px !important;
}
section.tabbing_new_sec_two .amenities-grid > .amenity-card {
flex: 0 1 calc(50% - 12px) !important; max-width: calc(50% - 12px) !important;
}
}
/* Narrow tablets + phones: one card per row, full width. */
@media (max-width: 640px) {
section.tabbing_new_sec_two .amenities-grid > .amenity-card {
flex-basis: 100% !important; max-width: 100% !important;
}
}
/* Pull the orange tick inside the bullet (was left:-4px) and give the text room. */
section.tabbing_new_sec_two .amenity-content ul li {
position: relative !important; padding-left: 28px !important;
}
section.tabbing_new_sec_two .amenity-content ul li::before {
left: 0 !important; top: 3px !important;
}
/* =====================================================================
AIRLINES — section.tabbing_sec-new (design-language polish)
Markup differs from FTI (FTI = logo chip-grid + dark info panel; internal =
swipe tab-pills + photo + bullet list). Keep the internal structure but style
it to read like FTI: bordered chip pills (wrap + centered) and a rounded
bordered 2-col panel with FTI's green-check "why fly" bullets. CSS only.
===================================================================== */
section.tabbing_sec-new .swipe-tabs-container-new,
section.tabbing_sec-new .swipe-tabs-wrapper-new { overflow: visible !important; }
/* Kill the legacy pale-blue (#C2E7F9) underline header-new.php paints under the
tab strip — FTI has no such rule; the pills carry their own border. */
section.tabbing_sec-new .swipe-tabs-wrapper-new,
section.tabbing_sec-new .swipe-tabs-container-new,
section.tabbing_sec-new .swipe-tabs-new { border-bottom: 0 !important; }
/* FTI-style airline-selector GRID: a 6-column grid of bordered rounded tiles
(FTI's chip grid is 6×2). Internal has no airline logos in the markup, so the
tiles are name-only, but the grid layout + selected-tile treatment (red border
+ red dot badge) match FTI. */
/* TILES — replicate FTI's airline tabs 1:1 (flights-to-india-new.php ~4245):
a 6-col grid of white tiles, each = a 48px rounded LOGO CHIP above the airline
name; active tile = white + red border + ring + a red check-dot badge. FTI has
a real in the markup; the internal tiles are name-only, so the logo is
painted into the chip via the ::before keyed on data-tab (0..11 = CX..TK). */
section.tabbing_sec-new .swipe-tabs-new {
display: grid !important;
grid-template-columns: repeat(6, 1fr) !important;
gap: 12px !important;
border: 0 !important; margin: 0 auto 32px !important; max-width: 1080px !important;
}
section.tabbing_sec-new .swipe-tabs-new .swipe-tab-new {
display: flex !important; flex-direction: column !important;
align-items: center !important; justify-content: center !important; gap: 10px !important;
text-align: center !important;
background: #fff !important;
border: 1.5px solid var(--i-line) !important;
border-radius: 14px !important;
padding: 18px 12px !important;
font-family: var(--i-font) !important;
font-weight: 600 !important; font-size: .82rem !important; line-height: 1.25 !important;
color: var(--i-ink) !important; white-space: normal !important;
cursor: pointer; position: relative;
box-shadow: var(--i-shadow-sm) !important;
transition: transform .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
/* the logo chip (48px rounded box) with the airline logo centred inside */
section.tabbing_sec-new .swipe-tabs-new .swipe-tab-new::before {
content: ""; display: block; width: 48px; height: 48px; flex: 0 0 48px;
border-radius: 12px;
background-color: var(--i-bg);
border: 1px solid var(--i-line-soft);
background-repeat: no-repeat; background-position: center; background-size: 34px auto;
transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
section.tabbing_sec-new .swipe-tab-new[data-tab="0"]::before { background-image: url("/assets/images/airlines/CX.gif"); }
section.tabbing_sec-new .swipe-tab-new[data-tab="1"]::before { background-image: url("/assets/images/airlines/SQ.gif"); }
section.tabbing_sec-new .swipe-tab-new[data-tab="2"]::before { background-image: url("/assets/images/airlines/EK.gif"); }
section.tabbing_sec-new .swipe-tab-new[data-tab="3"]::before { background-image: url("/assets/images/airlines/QR.gif"); }
section.tabbing_sec-new .swipe-tab-new[data-tab="4"]::before { background-image: url("/assets/images/airlines/EY.gif"); }
section.tabbing_sec-new .swipe-tab-new[data-tab="5"]::before { background-image: url("/assets/images/airlines/AA.gif"); }
section.tabbing_sec-new .swipe-tab-new[data-tab="6"]::before { background-image: url("/assets/images/airlines/LH.gif"); }
section.tabbing_sec-new .swipe-tab-new[data-tab="7"]::before { background-image: url("/assets/images/airlines/AF.gif"); }
section.tabbing_sec-new .swipe-tab-new[data-tab="8"]::before { background-image: url("/assets/images/airlines/KL.gif"); }
section.tabbing_sec-new .swipe-tab-new[data-tab="9"]::before { background-image: url("/assets/images/airlines/UA.gif"); }
section.tabbing_sec-new .swipe-tab-new[data-tab="10"]::before { background-image: url("/assets/images/airlines/AI.gif"); }
section.tabbing_sec-new .swipe-tab-new[data-tab="11"]::before { background-image: url("/assets/images/airlines/TK.gif"); }
section.tabbing_sec-new .swipe-tabs-new .swipe-tab-new:hover {
border-color: rgba(225,29,72,.30) !important; color: var(--i-ink) !important;
transform: translateY(-3px); box-shadow: var(--i-shadow-lg) !important; background: #fff !important;
}
section.tabbing_sec-new .swipe-tabs-new .swipe-tab-new.active-tab-new {
background: #fff !important;
border-color: var(--i-brand) !important;
color: var(--i-brand) !important;
transform: translateY(-2px);
box-shadow: 0 0 0 3px rgba(225,29,72,.10), var(--i-shadow-lg) !important;
/* header-new.php's legacy `.active-tab-new{left:20px!important;margin-bottom:-3px}`
shifts the active (position:relative) tile 20px right so it overlaps the next
tile — neutralise it (FTI does the same). */
left: auto !important; margin: 0 !important; border-radius: 14px !important;
}
section.tabbing_sec-new .swipe-tab-new.active-tab-new::before {
background-color: var(--i-brand-soft) !important;
border-color: rgba(225,29,72,.20) !important;
transform: scale(1.05);
}
/* FTI's selected tile carries a red check-dot badge top-right */
section.tabbing_sec-new .swipe-tabs-new .swipe-tab-new.active-tab-new::after {
content: ""; position: absolute; top: 8px; right: 8px;
width: 18px; height: 18px; border-radius: 50%;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23ffffff' d='M3.7 6.7L1.4 4.4l-.7.7 3 3 5-5-.7-.7z'/%3E%3C/svg%3E"),
var(--i-grad-brand);
background-position: center, 0 0;
background-repeat: no-repeat, no-repeat;
background-size: 10px 10px, cover;
box-shadow: 0 2px 8px rgba(225,29,72,.30);
}
@media (max-width: 992px) { section.tabbing_sec-new .swipe-tabs-new { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 640px) { section.tabbing_sec-new .swipe-tabs-new { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } }
@media (max-width: 480px) { section.tabbing_sec-new .swipe-tabs-new { grid-template-columns: repeat(2, 1fr) !important; } }
/* Panel width = tabs-row width. FTI aligns the tab pills and the content panel at
the same 1080px; internal left the content container full-width (1216) so the
panel jutted out wider than the pills above it. Constrain + centre to match. */
section.tabbing_sec-new .swipe-tabs-content-container-new {
max-width: 1080px !important;
margin-left: auto !important; margin-right: auto !important;
padding: 0 !important; /* drop the base 20px inset so the card fills the width */
}
/* Content panel → FTI-style airline card: photo left, content right with a DARK
header band carrying the airline name + a "WHY FLY" green-check checklist.
(FTI's full panel also has Hub/Stops/Gateways/Cabin/rating/buttons, which need
per-airline data not present in this page's markup — out of scope for CSS.) */
section.tabbing_sec-new .swipe_flex-new {
display: flex !important; flex-wrap: wrap !important; gap: 0 !important; align-items: stretch !important;
background: #fff !important;
border: 1px solid var(--i-line) !important;
border-radius: var(--i-radius-lg) !important;
box-shadow: var(--i-shadow-sm) !important;
padding: 0 !important; overflow: hidden !important; margin-top: 28px !important;
}
/* Layout rule (per request):
• image present → photo LEFT 50%, content (heading + checklist) RIGHT 50%
• no image → content spans the FULL width (the empty image box is hidden)
Gated purely on whether an exists inside .img-new (any airline image). */
section.tabbing_sec-new .siwpe_tab-new.img-new { display: none !important; }
section.tabbing_sec-new .swipe_flex-new:has(.siwpe_tab-new.img-new img) .siwpe_tab-new.img-new {
display: block !important; flex: 0 0 50% !important; max-width: 50% !important;
position: relative !important; overflow: hidden !important;
align-self: stretch !important; min-height: 380px !important;
}
section.tabbing_sec-new .siwpe_tab-new.img-new img {
position: absolute !important; inset: 0 !important;
width: 100% !important; height: 100% !important;
object-fit: cover !important; display: block !important; border-radius: 0 !important;
}
/* content column: FULL width by default; 50% only when an image is present.
Top-aligned (flex-start) so the dark heading band sits flush with the top of
the image — centering left a gap above the band. */
section.tabbing_sec-new .content_swipe-new {
flex: 1 1 100% !important; max-width: 100% !important; padding: 0 !important;
display: flex !important; flex-direction: column !important; min-width: 0 !important; justify-content: flex-start !important;
}
section.tabbing_sec-new .swipe_flex-new:has(.siwpe_tab-new.img-new img) .content_swipe-new {
flex: 0 0 50% !important; max-width: 50% !important;
min-height: 380px !important; margin-bottom: 0 !important;
}
/* heading spans the full width of the content column */
section.tabbing_sec-new .content_swipe-new h3 { width: 100% !important; }
section.tabbing_sec-new .swipe_flex-new h3 {
margin: 0 !important; padding: 22px 32px !important;
background: var(--i-grad-hero) !important; color: #fff !important;
font-family: var(--i-font-display) !important; font-weight: 800 !important;
letter-spacing: -.01em !important; font-size: 1.5rem !important; line-height: 1.2 !important;
display: flex !important; align-items: center !important; gap: 16px !important;
}
/* Logo chip removed: it was keyed by data-content index, but airline order varies
per page (e.g. Qatar at index 0), so the index-mapped logo mismatched the airline
name on most pages. Dropping it avoids any wrong logo; the name carries the band. */
section.tabbing_sec-new .swipe_flex-new h3::before { content: none !important; display: none !important; }
section.tabbing_sec-new .swipe-tab-content-new[data-content="0"] .swipe_flex-new h3::before { background-image: url("/assets/images/airlines/CX.gif"); }
section.tabbing_sec-new .swipe-tab-content-new[data-content="1"] .swipe_flex-new h3::before { background-image: url("/assets/images/airlines/SQ.gif"); }
section.tabbing_sec-new .swipe-tab-content-new[data-content="2"] .swipe_flex-new h3::before { background-image: url("/assets/images/airlines/EK.gif"); }
section.tabbing_sec-new .swipe-tab-content-new[data-content="3"] .swipe_flex-new h3::before { background-image: url("/assets/images/airlines/QR.gif"); }
section.tabbing_sec-new .swipe-tab-content-new[data-content="4"] .swipe_flex-new h3::before { background-image: url("/assets/images/airlines/EY.gif"); }
section.tabbing_sec-new .swipe-tab-content-new[data-content="5"] .swipe_flex-new h3::before { background-image: url("/assets/images/airlines/AA.gif"); }
section.tabbing_sec-new .swipe-tab-content-new[data-content="6"] .swipe_flex-new h3::before { background-image: url("/assets/images/airlines/LH.gif"); }
section.tabbing_sec-new .swipe-tab-content-new[data-content="7"] .swipe_flex-new h3::before { background-image: url("/assets/images/airlines/AF.gif"); }
section.tabbing_sec-new .swipe-tab-content-new[data-content="8"] .swipe_flex-new h3::before { background-image: url("/assets/images/airlines/KL.gif"); }
section.tabbing_sec-new .swipe-tab-content-new[data-content="9"] .swipe_flex-new h3::before { background-image: url("/assets/images/airlines/UA.gif"); }
section.tabbing_sec-new .swipe-tab-content-new[data-content="10"] .swipe_flex-new h3::before { background-image: url("/assets/images/airlines/AI.gif"); }
section.tabbing_sec-new .swipe-tab-content-new[data-content="11"] .swipe_flex-new h3::before { background-image: url("/assets/images/airlines/TK.gif"); }
/* Intro one-liner: the markup has a
after the name = ".
Key Features:". FTI carries the tagline in the dark header and has no
"Key Features:" label (the checklist's own "WHY FLY…" heading covers it).
Render the