.
.hero is display:flex; flex-direction:column — without this rule
the wrapper div becomes the only flex child and collapses content.
display:contents makes the div transparent to flex layout so its
children participate directly in the hero flex container.
---------------------------------------------------------------- */
.hero-content {
display: contents;
}
/* ----------------------------------------------------------------
2. HERO CTA GROUP
Service pages use
for the button row.
Mirrors .hero-buttons from Phase 1.
---------------------------------------------------------------- */
.hero-cta-group {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
}
body[dir="rtl"] .hero-cta-group {
justify-content: flex-start;
}
@media (max-width: 640px) {
.hero-cta-group {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.hero-cta-group .btn-primary,
.hero-cta-group .btn-secondary,
.hero-cta-group .btn-orange,
.hero-cta-group .btn-outline,
.hero-cta-group a {
width: 100%;
text-align: center;
justify-content: center;
}
}
/* ----------------------------------------------------------------
3. MIN-WIDTH: 0 ON ALL GRID AND FLEX CHILDREN
Default min-width:auto on grid/flex items allows content (long
Arabic words, wide images) to overflow the track. Setting
min-width:0 makes the browser clip at the track boundary instead.
This is the single most common cause of overflow-x on iPhone
Safari for this site.
---------------------------------------------------------------- */
/* Hub cards inside any grid */
.cities-hub-grid > .hub-card,
.tp-vehicle-grid > .hub-card,
.tp-train-grid > .hub-card {
min-width: 0;
}
/* Hub card content column (text stacks inside the card) */
.hub-card-content {
min-width: 0;
}
/* Why-visit feature boxes */
.why-visit-grid > .why-feature {
min-width: 0;
}
/* Experience cards */
.experience-grid > .experience-card {
min-width: 0;
}
/* Attractions grid */
.attractions-grid > * {
min-width: 0;
}
/* City hotels strip */
.city-hotels-strip > * {
min-width: 0;
}
/* Homepage service cards */
.services-grid > .service-item,
.services-grid > .srv-card {
min-width: 0;
}
/* Hotel cards */
.hotels-grid > .hotel-card,
#hotelsGrid > .hotel-card {
min-width: 0;
}
/* B2B feature cards */
.features-grid > .b2b-feature {
min-width: 0;
}
/* Package cards */
.packages-grid > .package-card {
min-width: 0;
}
/* Stats and team */
.stats-row > .stat-box { min-width: 0; }
.team-grid > .team-member { min-width: 0; }
/* Hub card highlights — flex row of pills inside an absolute container */
.hub-card-highlights {
min-width: 0;
}
.hub-card-highlights li {
min-width: 0;
word-break: break-word;
}
/* ----------------------------------------------------------------
4. HERO MIN-HEIGHT — SVH PARITY FOR PHASE 9 STEPS
Phase 9 overrides set vh values at 768px and 480px.
Add svh equivalents so Safari 15.4+ (iPhone 13+) also benefits.
---------------------------------------------------------------- */
@media (max-width: 992px) {
.hero { min-height: 70svh; }
}
@media (max-width: 768px) {
.hero { min-height: 64svh; }
}
@media (max-width: 480px) {
.hero { min-height: 55svh; }
}
@media (max-height: 500px) and (orientation: landscape) {
.hero { min-height: 100svh; }
}
/* ================================================================
PHASE 15 — TRUE MOBILE CARD VARIANTS
================================================================
Problem: desktop card proportions are forced onto mobile screens.
Fixing grid columns alone produces tall poster-like cards at
~165px width. The card BEHAVIOR must change at narrow widths:
different aspect ratios, stripped content, proper image exposure.
Scope:
1. Vehicle cards — 2-col, image-dominant, content stripped
2. Train cards — 1-col below 640px (content too rich for 2-col)
3. Service hub cards — compact 2-col + shorter featured card
4. Touch hover — remove card lift on touch devices
================================================================ */
/* ----------------------------------------------------------------
4. TOUCH HOVER — disable card lift animations on touch screens.
translateY(-6px) on :hover triggers on tap in mobile browsers,
causing layout jank and a visible snap. On touch devices there
is no persistent hover state so hover effects add no value.
---------------------------------------------------------------- */
@media (hover: none) {
.hub-card:hover,
.hotel-card:hover,
.service-item:hover,
.b2b-feature:hover,
.package-card:hover,
.why-feature:hover {
transform: none;
box-shadow: none;
}
.hub-card:hover .hub-card-img { transform: none; }
.hub-card:hover::before {
background: linear-gradient(
to top,
rgba(7, 26, 16, 0.94) 0%,
rgba(7, 26, 16, 0.55) 45%,
rgba(7, 26, 16, 0.10) 100%
);
}
}
/* ================================================================
1. VEHICLE CARDS — IMAGE-DOMINANT 2-COL MOBILE VARIANT
At ≤640px each card is ~165px wide (2-col on 375px phone).
Strategy: strip all non-essential content; let the image and
vehicle name carry the card. Description and tags are unreadable
at this width. Aspect-ratio drives height so all cards are
consistent regardless of name length.
================================================================ */
@media (max-width: 640px) {
/* Aspect-ratio replaces fixed min-height — consistent proportions */
.tp-vehicle-grid .hub-card {
aspect-ratio: 3 / 4;
min-height: 0 !important;
}
/* Lighter top overlay — image visible in upper 55% */
.tp-vehicle-grid .hub-card::before {
background: linear-gradient(
to top,
rgba(7, 26, 16, 0.97) 0%,
rgba(7, 26, 16, 0.52) 40%,
rgba(7, 26, 16, 0.05) 100%
);
}
/* Minimal content block — just enough to identify + book */
.tp-vehicle-grid .hub-card-content {
padding: 10px 11px 13px !important;
}
.tp-vehicle-grid .hub-card .hub-card-eyebrow {
font-size: 0.58rem !important;
letter-spacing: 0.7px;
margin-bottom: 4px;
}
.tp-vehicle-grid .hub-card h3 {
font-size: 1.05rem !important;
line-height: 1.2;
margin-bottom: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Description and tags are not readable at ~165px width */
.tp-vehicle-grid .hub-card .hub-card-desc,
.tp-vehicle-grid .hub-card .tp-tags {
display: none;
}
/* Full-width compact button */
.tp-vehicle-grid .hub-card .btn-secondary {
align-self: stretch !important;
width: 100%;
font-size: 0.72rem !important;
padding: 8px 10px !important;
min-height: 36px !important;
justify-content: center;
border-width: 1px;
border-radius: 6px;
letter-spacing: 0;
}
}
/* ================================================================
2. TRAIN CARDS — 1-COL BELOW 640px
Train cards carry rich content: route description, city route
label, two stat columns (travel time × 2 legs), CTA button.
At 2-col on 375px (165px per card) this content is unreadable.
Full-width (1-col) gives 343px — enough for all content.
Between 640px–900px (tablets) they stay 2-col from Phase 13.
================================================================ */
@media (max-width: 640px) {
/* Override Phase 13's min-width range query */
.tp-train-grid {
grid-template-columns: 1fr !important;
}
/* First child no longer needs full-width override */
.tp-train-grid .hub-card:first-child {
grid-column: auto !important;
}
/* Full-width card: use 16:9 landscape — image visible above content */
.tp-train-grid .hub-card {
min-height: 300px !important;
aspect-ratio: unset;
}
/* Lighter overlay — image prominent in upper half */
.tp-train-grid .hub-card::before {
background: linear-gradient(
to top,
rgba(7, 26, 16, 0.97) 0%,
rgba(7, 26, 16, 0.62) 42%,
rgba(7, 26, 16, 0.10) 100%
);
}
.tp-train-grid .hub-card-content {
padding: 18px 16px 20px !important;
}
.tp-train-grid .hub-card .hub-card-eyebrow {
font-size: 0.62rem !important;
margin-bottom: 6px;
}
.tp-train-grid .hub-card h3 {
font-size: 1.35rem !important;
margin-bottom: 8px;
}
/* Clip description to 2 lines — preserve the stat block */
.tp-train-grid .hub-card .hub-card-desc {
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 0.82rem !important;
line-height: 1.5 !important;
margin-bottom: 10px !important;
max-width: none;
}
/* Full-width CTA button */
.tp-train-grid .hub-card .btn-secondary {
align-self: stretch !important;
width: 100%;
font-size: 0.82rem !important;
padding: 10px 14px !important;
min-height: 40px !important;
justify-content: center;
}
}
/* ================================================================
3. SERVICE HUB CARDS (.cities-hub-grid — services/index.html,
accommodation, vip, visa pages)
Non-featured (2-col) cards at ≤640px: same image-dominant
treatment as vehicle cards. Featured first card (full-width):
shorter fixed height with clipped description.
================================================================ */
@media (max-width: 640px) {
/* Non-featured 2-col cards: aspect-ratio driven, strip content */
.cities-hub-grid:not(.tp-vehicle-grid):not(.tp-train-grid) .hub-card:not(:first-child) {
aspect-ratio: 3 / 4;
min-height: 0 !important;
}
.cities-hub-grid:not(.tp-vehicle-grid):not(.tp-train-grid) .hub-card:not(:first-child)::before {
background: linear-gradient(
to top,
rgba(7, 26, 16, 0.97) 0%,
rgba(7, 26, 16, 0.50) 38%,
rgba(7, 26, 16, 0.05) 100%
);
}
.cities-hub-grid:not(.tp-vehicle-grid):not(.tp-train-grid) .hub-card:not(:first-child) .hub-card-content {
padding: 10px 11px 13px !important;
}
.cities-hub-grid:not(.tp-vehicle-grid):not(.tp-train-grid) .hub-card:not(:first-child) .hub-card-eyebrow {
font-size: 0.58rem !important;
letter-spacing: 0.8px;
margin-bottom: 3px;
}
.cities-hub-grid:not(.tp-vehicle-grid):not(.tp-train-grid) .hub-card:not(:first-child) h3 {
font-size: 1rem !important;
line-height: 1.2;
margin-bottom: 0;
}
/* Hide desc and highlights on narrow 2-col cards */
.cities-hub-grid:not(.tp-vehicle-grid):not(.tp-train-grid) .hub-card:not(:first-child) .hub-card-desc,
.cities-hub-grid:not(.tp-vehicle-grid):not(.tp-train-grid) .hub-card:not(:first-child) .hub-card-highlights {
display: none;
}
/* Compact full-width CTA for non-featured cards */
.cities-hub-grid:not(.tp-vehicle-grid):not(.tp-train-grid) .hub-card:not(:first-child) .hub-card-cta,
.cities-hub-grid:not(.tp-vehicle-grid):not(.tp-train-grid) .hub-card:not(:first-child) .btn-primary,
.cities-hub-grid:not(.tp-vehicle-grid):not(.tp-train-grid) .hub-card:not(:first-child) .btn-secondary {
align-self: stretch !important;
width: 100%;
font-size: 0.72rem !important;
padding: 8px 10px !important;
min-height: 36px !important;
justify-content: center;
border-width: 1px;
border-radius: 6px;
letter-spacing: 0;
}
/* Featured first card (full-width): shorter height, clipped desc */
.cities-hub-grid:not(.tp-vehicle-grid):not(.tp-train-grid) .hub-card:first-child {
min-height: 280px !important;
aspect-ratio: unset;
}
.cities-hub-grid:not(.tp-vehicle-grid):not(.tp-train-grid) .hub-card:first-child .hub-card-content {
padding: 16px 18px 20px !important;
}
.cities-hub-grid:not(.tp-vehicle-grid):not(.tp-train-grid) .hub-card:first-child .hub-card-desc {
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 0.88rem !important;
line-height: 1.55 !important;
margin-bottom: 12px !important;
}
.cities-hub-grid:not(.tp-vehicle-grid):not(.tp-train-grid) .hub-card:first-child .hub-card-highlights {
display: none;
}
}
/* ============================================================================
DUNYA TRAVEL — GLOBAL BRAND LIGHT THEME MIGRATION
Single source of truth. Appended last so it overrides the legacy dark rules
above by source order. Color migration only — no layout/structure changes.
Palette: White + Deep Dunya Green (nav #0A3D25 / accents #0F4D2E) + Orange.
Photo-based card systems (hub-card / hotel-card / package-card / city-info)
are migrated per-page where text-over-image needs case-by-case handling.
============================================================================ */
:root, body {
--bg-dark: #FFFFFF;
--brand-green: #0F4D2E;
--green-hover: #13663D;
--btn-orange: #F28C28;
--orange-hover: #E67E22;
--text-light: #ffffff; /* stays white: used on green/photo surfaces */
--text-muted: #6B7280;
--card-bg: #FFFFFF;
--bg-soft: #F7F9F7;
--border: #E5E7EB;
}
body { background-color: #FFFFFF !important; color: #1F2937 !important; }
/* Hero — neutral dark readability overlay (NO green cast), text-edge weighted */
:root {
--hero-overlay: linear-gradient(to right, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.28) 35%, rgba(0,0,0,0.10) 60%, transparent 82%);
--hero-overlay-rtl: linear-gradient(to left, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.28) 35%, rgba(0,0,0,0.10) 60%, transparent 82%);
}
.hero h1 { color: #FFFFFF; }
.hero p, .hero p.lead { color: rgba(255,255,255,0.92); }
.badge { background-color: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.55); color: #FFFFFF; }
/* Navbar — dark logo green, white text, orange active/hover */
header { background-color: #0A3D25 !important; border-bottom: 1px solid rgba(255,255,255,0.12) !important; }
.nav-links a { color: #FFFFFF; }
.nav-links a:hover, .nav-links a.active { color: var(--btn-orange); }
.lang-dropbtn { border-color: rgba(255,255,255,0.45); color: #FFFFFF; }
.mobile-menu { background-color: #0A3D25 !important; border-bottom-color: rgba(255,255,255,0.12) !important; }
.mobile-menu a { color: #FFFFFF; border-bottom-color: rgba(255,255,255,0.12); }
.mobile-menu a:hover, .mobile-menu a.active { color: var(--btn-orange); }
/* Language dropdown — white surface, dark text, green hover */
.lang-dropdown-content { background-color: #FFFFFF !important; border-color: #E5E7EB !important; box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important; }
.lang-dropdown-content a { color: #1F2937 !important; border-bottom-color: #E5E7EB !important; }
.lang-dropdown-content a:hover { background-color: #0F4D2E !important; color: #FFFFFF !important; }
/* Buttons — orange CTA, white text */
.btn-orange, .btn-primary { background-color: #F28C28 !important; color: #FFFFFF !important; }
.btn-orange:hover, .btn-primary:hover { background-color: #E67E22 !important; }
/* Section backgrounds: dark -> soft gray; reset borders to light */
.grid-section, .services, .contact-section, .contact-b2b, .custom-trip, .why-visit, .filter-container { background-color: #F7F9F7 !important; }
.cities, .services, .about-team, .contact-section, .contact-b2b, .custom-trip, .why-visit { border-top-color: #E5E7EB !important; }
.why-visit, .filter-container { border-bottom-color: #E5E7EB !important; }
.srv-img-wrapper { background: #F7F9F7 !important; }
/* Simple (non-photo) cards — white, light border, soft shadow */
.service-item, .stat-box, .team-member, .contact-info-box, .b2b-feature {
background: #FFFFFF !important; border-color: #E5E7EB !important; box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}
.service-item:hover, .b2b-feature:hover { background-color: #F7F9F7 !important; border-color: #0F4D2E !important; }
.service-item h4, .stat-box p,
.b2b-feature h2, .b2b-feature h3, .b2b-feature h4,
.contact-info-box h2, .contact-info-box h3, .contact-info-box h4,
.team-member h2, .team-member h3, .team-member h4 { color: #1F2937 !important; }
/* Photo overlay cards (.card with bg image) — keep photo, brand-green overlay, white text */
.card::before { background: rgba(15,77,46,0.62) !important; }
.card:hover::before { background: rgba(15,77,46,0.74) !important; }
.card:hover { box-shadow: 0 10px 30px rgba(15,77,46,0.20) !important; }
.card p.desc { color: rgba(255,255,255,0.88) !important; }
/* Forms — white inputs, dark text */
.form-control { background: #FFFFFF !important; color: #1F2937 !important; border-color: #E5E7EB !important; }
.form-control:focus { background: #FFFFFF !important; border-color: #F28C28 !important; }
.form-control::placeholder { color: #9CA3AF; }
/* Footer — deep green, white text, orange hover */
footer { background-color: #0F4D2E !important; border-top-color: #0F4D2E !important; color: rgba(255,255,255,0.82) !important; }
.footer-grid h3 { color: #FFFFFF !important; }
.footer-links a { color: rgba(255,255,255,0.78) !important; }
.footer-links a:hover { color: #F28C28 !important; }
/* Language startup popup */
.popup-content { background-color: #FFFFFF !important; border-color: #E5E7EB !important; box-shadow: 0 15px 50px rgba(0,0,0,0.20) !important; }
.popup-title, .lang-main { color: #1F2937 !important; }
.language-option { background-color: #FFFFFF !important; border-color: #E5E7EB !important; }
.language-option:hover, .language-option:has(input:checked) { border-color: #F28C28 !important; background-color: rgba(242,140,40,0.08) !important; }
/* Inline white text that now sits on light surfaces */
div[style*="rgba(255,255,255,0.07)"] { border-color: #E5E7EB !important; box-shadow: 0 4px 14px rgba(0,0,0,0.05); }
div[style*="rgba(255,255,255,0.07)"] h4 { color: #1F2937 !important; }
.contact-info-box strong { color: #1F2937 !important; }
/* Cities hub + transport: .hub-card photo cards — keep image, neutral (no green) gradient, white text */
.hub-card { border-color: rgba(0,0,0,0.08) !important; background-color: #FFFFFF !important; }
.hub-card::before { background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.10) 100%) !important; }
.hub-card-cta { color: #FFFFFF !important; }
.hub-card:hover .hub-card-cta { background: #E67E22 !important; }
/* City detail pages — .city-info is a text column (not over a photo): darken headings, white info cards */
.city-info h2 { color: #1F2937 !important; }
.info-block { background: #FFFFFF !important; border-color: #E5E7EB !important; box-shadow: 0 4px 14px rgba(0,0,0,0.05); }
.info-block h4 { color: #1F2937 !important; }
/* City detail pages — alternating sections used inline background-color:#05120b (dark stripe).
Light theme: that stripe becomes the soft surface. */
[style*="background-color:#05120b"], [style*="background-color: #05120b"], [style*="background:#05120b"], [style*="background: #05120b"] { background-color: #F7F9F7 !important; }
/* white-text components that now sit on white cards / soft sections */
.city-about-text h2 { color: #1F2937 !important; }
.city-quick-fact span { color: #1F2937 !important; }
.attraction-body h3 { color: #1F2937 !important; }
.city-hotel-tile h4 { color: #1F2937 !important; }
.itinerary-day strong { color: #1F2937 !important; }
.itinerary-body h4 { color: #1F2937 !important; }
.city-hotel-tile-tier { background: rgba(15,77,46,0.10) !important; color: #0F4D2E !important; }
.city-quick-fact, .attraction-card, .itinerary-item, .city-hotel-tile { border-color: #E5E7EB !important; }
/* experience cards: dark green gradient -> white card, keep orange accent edge */
.experience-card { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-left: 2px solid #F28C28 !important; box-shadow: 0 4px 14px rgba(0,0,0,0.05) !important; }
body[dir="rtl"] .experience-card { border-left: 1px solid #E5E7EB !important; border-right: 2px solid #F28C28 !important; }
.experience-card:hover { background: #F7F9F7 !important; border-color: #0F4D2E !important; border-left-color: #F28C28 !important; }
body[dir="rtl"] .experience-card:hover { border-right-color: #F28C28 !important; }
.experience-card h4 { color: #1F2937 !important; }
/* Hotels page — star-rating sections, drop gold #FFD700 for brand orange, readable filter bar */
.star-section-title { color: #1F2937 !important; border-bottom-color: #E5E7EB !important; }
.star-gold { color: #F28C28 !important; }
.hotel-stars { color: #F28C28 !important; }
.filter-btn { color: #1F2937 !important; border-color: #0F4D2E !important; }
.filter-btn:hover, .filter-btn.active { background: #F28C28 !important; color: #FFFFFF !important; border-color: #F28C28 !important; }
/* B2B page — contact method cards + partnership form headings on white */
.method-text h4 { color: #1F2937 !important; }
.b2b-form h3 { color: #1F2937 !important; }
/* B2C page — custom-trip + contact headings on light, WhatsApp callout keeps brand green button */
.custom-text h2 { color: #1F2937 !important; }
.contact-b2c .contact-info h2 { color: #1F2937 !important; }
.wa-box h4 { color: #1F2937 !important; }
.wa-box p { color: #374151 !important; }
.b2c-form h3 { color: #1F2937 !important; }
/* Section headings that used --text-light (white) — now sit on light/soft sections.
In the light theme every section background is white/soft, so headings go dark. */
.section-header h2 { color: #1F2937 !important; }
.hub-intro h2 { color: #1F2937 !important; }
.why-feature h4 { color: #1F2937 !important; }
.hub-cta-inner h2 { color: #1F2937 !important; }
/* keep the orange highlight spans inside those headings */
.section-header h2 span, .hub-intro h2 span, .hub-cta-inner h2 span { color: #F28C28 !important; }
/* Outline button: default green outline on light sections; stays white over hero photos */
.btn-secondary { border-color: #0F4D2E !important; color: #0F4D2E !important; }
.btn-secondary:hover { border-color: #E67E22 !important; color: #E67E22 !important; }
.hero .btn-secondary, .page-hero .btn-secondary, .city-hero .btn-secondary, .hotel-hero .btn-secondary { border-color: #FFFFFF !important; color: #FFFFFF !important; }
.hero .btn-secondary:hover, .page-hero .btn-secondary:hover, .city-hero .btn-secondary:hover, .hotel-hero .btn-secondary:hover { border-color: #F28C28 !important; color: #F28C28 !important; }
/* === END GLOBAL MIGRATION === */
/* =================================================================
HOMEPAGE COMPACT DENSITY PASS (cards smaller, less wasted space)
Appended last so it wins the cascade. CSS-only, no content change.
================================================================= */
/* ---- Desktop / base: tighter sections & headers ---- */
.cities { padding: 60px 5%; }
.services.svc-redesign { padding: 60px 5%; }
.about-team { padding: 60px 5%; }
.contact-section { padding: 60px 5%; gap: 40px; }
.cities-head { margin-bottom: 34px; }
.cities-head .desc { margin-bottom: 0; font-size: 1rem; }
.cities-head h2 { font-size: 2.4rem; margin-bottom: 14px; }
.svc-redesign .svc-head { margin-bottom: 34px; }
.svc-redesign .svc-head h2 { font-size: 2.3rem; margin-bottom: 14px; }
.svc-redesign .svc-head .desc { font-size: 1rem; }
.about-team p[data-tr="about_intro"] { margin: 16px auto 38px !important; }
.about-team p[data-tr="team_label"] { margin-top: 44px !important; }
.about-team h2[data-tr="team_title"] { margin-bottom: 30px !important; font-size: 2.3rem !important; }
/* ---- City cards: compact ---- */
.city-cards-grid { gap: 18px; }
.city-card-media { height: 160px; }
.city-card-icon { width: 58px; height: 58px; }
.city-card-icon svg { width: 27px; height: 27px; }
.city-card-body { padding: 40px 16px 18px; }
.city-card-body h3 { font-size: 1.25rem; margin-bottom: 6px; }
.city-card-body > p { font-size: .88rem; margin-bottom: 14px; min-height: 2.6em; }
.city-card-stats { margin-bottom: 16px; }
.city-card-cta { padding: 10px 0; }
/* ---- Service cards: compact (icon re-anchored to new media height) ---- */
.svc-redesign .svc-grid { gap: 18px; }
.svc-redesign .svc-media { height: 140px; }
.svc-redesign .svc-icon { top: 140px; width: 56px; height: 56px; }
.svc-redesign .svc-icon svg { width: 26px; height: 26px; }
.svc-redesign .svc-content { padding: 40px 16px 18px; }
.svc-redesign .svc-content h4 { font-size: 1.12rem; margin-bottom: 6px; }
.svc-redesign .svc-content > p { font-size: .86rem; margin-bottom: 12px; }
.svc-redesign .svc-features { gap: 7px; margin-bottom: 14px; }
.svc-redesign .svc-features li { font-size: .82rem; }
.svc-redesign .svc-cta { padding: 10px 0; }
.svc-redesign .svc-benefits { margin-top: 34px; gap: 16px; }
.svc-redesign .svc-benefit { padding: 14px 16px; gap: 12px; }
.svc-redesign .svc-benefit .b-ico { width: 44px; height: 44px; }
.svc-redesign .svc-benefit .b-ico svg { width: 23px; height: 23px; }
/* ---- Stats + team: compact ---- */
.stats-row { margin: 28px 0 42px; gap: 18px; }
.stat-box { padding: 24px 20px; }
.stat-box h3 { font-size: 2.6rem; }
.team-grid { gap: 18px; margin-top: 28px; }
.team-member { padding: 14px; }
.team-img { height: 170px; margin-bottom: 12px; }
/* ---- Tablet: 2-3 columns ---- */
@media (max-width: 1100px) and (min-width: 601px) {
.city-cards-grid { grid-template-columns: repeat(3, 1fr); }
.team-grid { grid-template-columns: repeat(3, 1fr); }
}
/* ---- Mobile: horizontal card carousels (several cards visible) ---- */
@media (max-width: 600px) {
.cities, .services.svc-redesign, .about-team { padding: 40px 16px; }
.contact-section { padding: 40px 16px; gap: 24px; }
.cities-head h2, .svc-redesign .svc-head h2 { font-size: 1.9rem; }
.city-cards-grid,
.svc-redesign .svc-grid,
.team-grid {
display: flex;
grid-template-columns: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 12px;
padding-bottom: 12px;
scroll-padding: 0 16px;
}
.city-cards-grid > *,
.svc-redesign .svc-grid > * {
flex: 0 0 47%;
scroll-snap-align: start;
}
.team-grid > * {
flex: 0 0 42%;
scroll-snap-align: start;
}
/* small info chips stay as compact 2-col grids, never full-width */
.svc-redesign .svc-benefits { grid-template-columns: 1fr 1fr; gap: 12px; }
.stats-row { grid-template-columns: 1fr 1fr; gap: 12px; }
}
/* === GLOBAL COMPACT-DENSITY PASS (laptop/desktop ≥901px) === */
@media (min-width: 901px) {
:root {
--space-section: 64px;
--space-section-sm: 40px;
--space-xl: 64px;
--space-lg: 44px;
--space-md: 24px;
}
.grid-section { padding: 64px 5%; gap: 32px; }
.city-detail { padding: 56px 5%; gap: 40px; }
.features-section { padding: 64px 5%; }
.contact-b2b { padding: 64px 5%; gap: 48px; }
.packages-section { padding: 64px 5%; }
.custom-trip { padding: 64px 5%; gap: 48px; }
.contact-b2c { padding: 64px 5%; gap: 48px; }
.hotels-section { padding: 48px 6% 64px; }
.card { padding: 28px; }
.b2b-feature { padding: 28px; }
.method-card { padding: 22px; }
.b2b-form { padding: 36px; }
.features-grid { gap: 28px; }
.packages-grid { gap: 28px; }
}
/* === END GLOBAL COMPACT-DENSITY PASS === */
/* =================================================================
DENSITY PASS v2 — DESKTOP + RESPONSIVE REFINEMENT
Appended last (wins the cascade). CSS-only: no markup, content,
language, navigation, or functionality changes.
Goal: cut wasted vertical space so laptops/desktops show more per
screen, and replace giant full-width mobile cards with swipeable
carousels. The mobile (<=992px) spacing layers above are already
compact; only the gaps they left are addressed here.
================================================================= */
/* ---------- DESKTOP (>=993px): the main "oversized" fixes ---------- */
@media (min-width: 993px) {
/* Calmer typographic hierarchy — headings were oversized.
Body text is untouched; readability preserved. */
:root {
--fs-h1: 3.4rem; --fs-hero: 3.4rem;
--fs-h2: 2.15rem; --fs-title: 2.15rem;
--fs-subtitle: 1.4rem;
--fs-lead: 1.18rem;
}
/* Master hero (every page uses .hero): shorter, less empty space,
so more of the page is visible above the fold. Was 120px / 85vh. */
.hero { padding: 80px 5%; min-height: 64vh; min-height: 64svh; }
.hero h1 { margin-bottom: 16px; }
.hero p, .hero p.lead { margin-bottom: 26px; }
/* Section header rhythm — tighter than the token default. */
.section-header { margin-bottom: 36px; }
/* Forms — compact, professional field sizing without harming
usability (keeps 16px text + comfortable hit area). */
.form-control { padding: 12px 14px; }
.form-group { margin-bottom: 16px; }
.form-row { margin-bottom: 14px; gap: 16px; }
.b2b-form, .b2c-form { padding: 32px; }
.contact-info-box { padding: 24px; margin-top: 24px; }
/* Oversized fixed heights → trimmed (mobile heights untouched).
Was: slider 580px, city image 750px, custom img 500px,
hub cards 460/520px (incl. inline 500/520 on transport). */
.cities-slider { height: 460px; }
.city-image-container { height: 560px; }
.custom-img img { height: 400px; }
.hub-card { min-height: 380px !important; }
.hub-card:first-child { min-height: 430px !important; }
}
/* ---------- TABLET (601-992px): denser multi-column grids ---------- */
@media (min-width: 601px) and (max-width: 992px) {
.features-grid,
.packages-grid,
.cities-hub-grid { grid-template-columns: 1fr 1fr; }
.cities-hub-grid .hub-card:first-child { grid-column: auto; }
}
/* ---------- MOBILE (<=600px): swipeable card carousels ----------
Replaces single giant full-width cards with horizontal peek
carousels so several cards are discoverable at a glance.
Mirrors the existing homepage carousel pattern. */
@media (max-width: 600px) {
.features-grid,
.packages-grid,
.cities-hub-grid {
display: flex;
grid-template-columns: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 12px;
padding-bottom: 14px;
scroll-padding: 0 16px;
}
.features-grid > * { flex: 0 0 64%; scroll-snap-align: start; }
.packages-grid > *,
.cities-hub-grid > * { flex: 0 0 80%; scroll-snap-align: start; }
.cities-hub-grid .hub-card:first-child { grid-column: auto; }
}
/* === END DENSITY PASS v2 === */
/* =================================================================
PHASE 16 — GLOBAL DENSITY & UX REFINEMENT
Appended last (wins the cascade). CSS-only: zero content, markup,
translation, navigation, or functionality changes.
Goal: premium compact feel — more visible per screen, pro UX.
================================================================= */
/* ================================================================
A. HERO — REDUCE HEIGHT & PADDING (desktop)
================================================================ */
@media (min-width: 993px) {
.hero {
padding: 54px 5%;
min-height: 50vh;
min-height: 50svh;
}
.hero h1 { font-size: 2.75rem !important; margin-bottom: 13px; line-height: 1.1; }
.hero p, .hero p.lead { font-size: 1.08rem; margin-bottom: 20px; }
.hero-buttons { gap: 13px; margin-bottom: 0; }
.badge { padding: 5px 14px; font-size: 11.5px; letter-spacing: 0.8px; margin-bottom: 16px; }
}
/* ================================================================
B. SECTION PADDINGS — COMPACT ON DESKTOP
================================================================ */
@media (min-width: 993px) {
.features-section { padding: 50px 5%; }
.contact-b2b { padding: 50px 5%; gap: 36px; }
.packages-section { padding: 50px 5%; }
.custom-trip { padding: 50px 5%; gap: 36px; }
.contact-b2c { padding: 50px 5%; gap: 36px; }
.hotels-section { padding: 34px 6% 48px; }
.grid-section { padding: 50px 5%; gap: 22px; }
.section-header { margin-bottom: 24px; }
.section-header h2 { font-size: 1.85rem !important; }
/* City detail */
.city-detail { padding: 44px 5%; gap: 34px; }
.city-image-container { height: 470px; }
/* Cities hub & service pages */
.cities-hub-section { padding: 50px 5%; }
.hub-intro { padding: 50px 5%; }
.why-visit { padding: 50px 5%; }
.hub-cta { padding: 50px 5%; }
.hub-cta-inner { padding: 36px 30px; }
.city-page-section { padding: 50px 5%; }
}
/* ================================================================
C. CARDS — COMPACT ACROSS DESKTOP & TABLET
================================================================ */
@media (min-width: 901px) {
/* ---- B2B feature cards ---- */
.b2b-feature { padding: 20px 22px !important; }
.b2b-feature h3 { font-size: 1.1rem !important; line-height: 1.35; }
.b2b-feature p { font-size: 0.89rem !important; line-height: 1.58; }
.features-grid { gap: 16px !important; }
/* ---- Homepage B2B/B2C image cards ---- */
.card { padding: 22px !important; }
.card h2 { font-size: 1.48rem !important; margin: 7px 0 11px !important; }
.card p.desc { font-size: 0.94rem !important; margin-bottom: 13px !important; }
.card ul { margin-bottom: 12px; }
.card ul li { margin-bottom: 5px; font-size: 0.94rem; }
/* ---- B2B contact method cards ---- */
.method-card { padding: 15px 19px !important; }
.contact-methods { gap: 13px; }
.method-icon { font-size: 28px; }
.method-text h4 { font-size: 1.06rem; }
.method-text p { font-size: 0.87rem; }
/* ---- B2B form ---- */
.b2b-form { padding: 26px !important; }
.b2b-form h3 { font-size: 1.5rem; margin-bottom: 7px; }
.b2b-form > p { margin-bottom: 18px; }
/* ---- B2C form ---- */
.b2c-form { padding: 26px !important; }
/* ---- Form controls ---- */
.form-control { padding: 10px 12px; }
.form-group { margin-bottom: 12px; }
.form-row { margin-bottom: 10px; gap: 12px; }
.contact-info-box { padding: 18px 20px; margin-top: 16px; }
/* ---- Package cards ---- */
.package-img { height: 170px !important; }
.package-content { padding: 18px 17px; }
.package-content h3 { font-size: 1.38rem; margin-bottom: 7px; }
.package-content p.desc { font-size: 0.91rem; margin-bottom: 13px; }
.package-route { padding: 10px 12px; margin-bottom: 13px; }
.packages-grid { gap: 19px !important; }
/* ---- Hotel / Transport listing cards ---- */
.hotel-img-wrapper { height: 176px; }
.hotel-info { padding: 15px 15px 11px; }
.hotel-title { font-size: 1.12rem; margin-bottom: 6px; }
.hotel-desc { margin-bottom: 11px; font-size: 12.5px; }
.hotel-amenities { margin-bottom: 13px; padding-top: 10px; gap: 7px; }
/* ---- Stat boxes ---- */
.stat-box { padding: 18px 16px; }
.stat-box h3 { font-size: 2.25rem; }
.stat-box p { font-size: 0.97rem; }
/* ---- Team members ---- */
.team-img { height: 152px !important; }
.team-member { padding: 11px 10px; }
.team-member h4 { font-size: 1.05rem; margin-bottom: 3px; }
/* ---- Homepage services (dark non-redesign) ---- */
.services-grid { gap: 17px; }
.srv-img-wrapper { height: 152px; }
.srv-body { padding: 17px 15px; }
.service-item h4 { font-size: 1.1rem; }
.service-item p { font-size: 0.86rem; }
/* ---- Cities carousel ---- */
.cities-slider { height: 390px; }
/* ---- Hub (cinematic overlay) cards ---- */
.hub-card { min-height: 310px !important; }
.hub-card:first-child { min-height: 360px !important; }
.hub-card-content { padding: 20px 22px 24px !important; }
.hub-card h3 { font-size: 1.6rem; margin-bottom: 5px; }
.hub-card-desc { font-size: 0.88rem; line-height: 1.62; margin-bottom: 11px; }
.hub-card-highlights { margin-bottom: 13px; gap: 7px; }
.hub-card-highlights li { font-size: 0.76rem; padding: 4px 9px; }
.hub-card-cta { padding: 8px 15px; font-size: 0.84rem; }
.cities-hub-grid { gap: 17px; }
/* ---- Why-visit strips ---- */
.why-feature { padding: 20px 19px; }
.why-feature h4 { font-size: 1.05rem; margin-bottom: 6px; }
.why-feature p { font-size: 0.87rem; line-height: 1.57; }
.why-visit-grid { gap: 17px; }
/* ---- City attraction cards ---- */
.attraction-body { padding: 13px 15px 15px; }
.attraction-body h3 { font-size: 1.05rem; margin-bottom: 5px; }
.attraction-body p { font-size: 0.88rem; margin-bottom: 9px; }
/* ---- City hotel tiles ---- */
.city-hotel-tile-body { padding: 11px 13px 13px; }
.city-hotel-tile h4 { font-size: 0.98rem; }
.city-hotel-tile p { font-size: 0.83rem; }
/* ---- Stats row spacing ---- */
.stats-row { margin: 20px 0 32px !important; gap: 15px; }
}
/* ================================================================
D. B2B GRID — ENFORCE 3-COL, NO ORPHAN CARDS
================================================================ */
/* Desktop: always 3-column for even rows */
@media (min-width: 901px) {
.features-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
/* Center a lone last card that starts a new row (positions 1, 4, 7, 10...) */
.features-grid > *:last-child:nth-child(3n+1) {
grid-column: 1 / -1;
max-width: calc(33.33% - 11px);
justify-self: center;
}
}
/* Tablet 2-col: center orphan */
@media (min-width: 641px) and (max-width: 900px) {
.features-grid > *:last-child:nth-child(odd) {
grid-column: 1 / -1;
max-width: calc(50% - 9px);
justify-self: center;
}
}
/* ================================================================
E. MOBILE CAROUSELS — HOTELS GRID & BENEFITS STRIP
================================================================ */
@media (max-width: 600px) {
/* Hotels / Transport listing page carousel */
.hotels-grid, #hotelsGrid {
display: flex !important;
grid-template-columns: none !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
gap: 12px !important;
padding-bottom: 14px !important;
scrollbar-width: none !important;
}
.hotels-grid::-webkit-scrollbar, #hotelsGrid::-webkit-scrollbar { display: none; }
.hotels-grid > *, #hotelsGrid > * {
flex: 0 0 78% !important;
scroll-snap-align: start !important;
min-width: 0 !important;
max-width: none !important;
}
/* Homepage service benefits strip carousel */
.svc-redesign .svc-benefits {
display: flex !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
gap: 10px !important;
padding-bottom: 10px !important;
margin-top: 22px !important;
scrollbar-width: none !important;
}
.svc-redesign .svc-benefits::-webkit-scrollbar { display: none; }
.svc-redesign .svc-benefits > * {
flex: 0 0 72% !important;
scroll-snap-align: start !important;
min-width: 0 !important;
}
/* Orphan prevention on remaining 2-col grids */
.packages-grid > *:last-child:nth-child(odd),
.services-grid > *:last-child:nth-child(odd) {
grid-column: 1 / -1;
max-width: calc(50% - 6px);
justify-self: center;
}
}
/* ================================================================
F. TYPOGRAPHY — EFFICIENT HIERARCHY
================================================================ */
body { line-height: 1.7; }
/* B2B/B2C contact section headings */
.contact-b2c .contact-info h2 { font-size: 2rem; line-height: 1.2; margin-bottom: 14px; }
.contact-b2b .section-header h2 { font-size: var(--fs-title); }
/* ================================================================
G. FOOTER — COMPACT
================================================================ */
@media (min-width: 901px) {
footer { padding: 44px 5% 24px !important; }
.footer-grid { margin-bottom: 28px; gap: 28px; }
.footer-grid h3 { margin-bottom: 14px; font-size: 1.05rem; }
.footer-links li { margin-bottom: 8px; }
}
/* ================================================================
H. B2C CUSTOM TRIP — TIGHTER
================================================================ */
@media (min-width: 901px) {
.custom-text h2 { font-size: 2.1rem !important; margin-bottom: 13px; }
.custom-text p { font-size: 0.97rem !important; margin-bottom: 18px; }
.feature-list { margin-bottom: 24px !important; }
.feature-list li { margin-bottom: 9px; font-size: 0.97rem; }
.custom-img img { height: 360px !important; }
.wa-box { padding: 20px; }
.wa-box h4 { font-size: 1.28rem; margin-bottom: 7px; }
}
/* ================================================================
I. HOMEPAGE SMALL DETAILS
================================================================ */
/* Cities section footer CTA */
.cities-foot { margin-top: 30px; }
.city-view-all { padding: 11px 28px; font-size: 0.88rem; }
/* Stats + team spacing */
@media (min-width: 901px) {
.about-team p[data-tr="about_intro"] { margin-bottom: 28px !important; }
.team-grid { gap: 15px !important; margin-top: 22px; }
}
/* Hero-buttons margin reset (already set above, ensure no bottom gap) */
.hero-buttons { margin-bottom: 0; }
/* ================================================================
J. STAR SECTION (Hotels page) — compact
================================================================ */
.star-section-block { margin-bottom: 38px; }
.star-section-title { font-size: 1.22rem; margin-bottom: 18px; padding-bottom: 10px; }
/* ================================================================
K. CITY DETAIL PAGE INFO BLOCKS — COMPACT
================================================================ */
@media (min-width: 993px) {
.info-block { padding: 20px 22px; margin-bottom: 20px; }
.info-block h4 { font-size: 1.15rem; margin-bottom: 11px; }
.info-list li { margin-bottom: 8px; font-size: 0.97rem; }
.city-info h2 { font-size: 2.8rem; }
.city-desc { font-size: 1rem; margin-bottom: 22px; }
}
/* ================================================================
L. HOMEPAGE HERO & B2B HERO CONSISTENCY
Ensure all pages use the same hero proportion from rule A above.
The .hero class covers all pages already — this is a reinforcement.
================================================================ */
@media (min-width: 993px) {
/* B2B / B2C label on section header */
.features-section .section-header { margin-bottom: 22px; }
.packages-section .section-header { margin-bottom: 22px; }
/* Cities hub hub-card: shorter featured card */
.hub-card:first-child { min-height: 355px !important; }
}
/* === END PHASE 16 === */
/* ================================================================
B2C TRAVELERS PAGE — components (appended; light-theme palette)
================================================================ */
/* ---- Trust strip under hero ---- */
.b2c-trust-wrap { background: #FFFFFF; border-bottom: 1px solid #E5E7EB; }
.b2c-trust {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
max-width: 1280px; margin: 0 auto; padding: 26px 5%;
}
.tr-item {
display: flex; align-items: center; gap: 14px;
background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 16px;
padding: 16px 18px; box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}
.tr-item .t-ico {
width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
background: rgba(15,77,46,0.08);
display: flex; align-items: center; justify-content: center;
}
.tr-item .t-ico svg { width: 22px; height: 22px; stroke: #0F4D2E; fill: none; }
.tr-item strong { display: block; color: #1F2937; font-size: 0.95rem; }
.tr-item span { color: #6B7280; font-size: 0.82rem; }
@media (max-width: 992px) { .b2c-trust { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .b2c-trust { grid-template-columns: 1fr; padding: 18px 5%; gap: 10px; } }
/* ---- Why-visit visual cards (image + icon + text) ---- */
.wv-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
max-width: 1280px; margin: 0 auto;
}
.wv-card {
background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 16px;
overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,0.05);
transition: transform 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease;
}
.wv-card:hover { transform: translateY(-6px); border-color: #F28C28; box-shadow: 0 14px 30px rgba(0,0,0,0.10); }
.wv-media { position: relative; height: 168px; overflow: hidden; }
.wv-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.wv-card:hover .wv-media img { transform: scale(1.06); }
.wv-ico {
position: absolute; bottom: -22px; inset-inline-start: 18px;
width: 46px; height: 46px; border-radius: 12px; background: #0F4D2E;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 18px rgba(0,0,0,0.18); z-index: 2;
}
.wv-ico svg { width: 22px; height: 22px; stroke: #FFFFFF; fill: none; }
.wv-body { padding: 32px 20px 22px; }
.wv-body h4 { color: #1F2937; font-size: 1.12rem; margin-bottom: 8px; line-height: 1.3; }
.wv-body p { color: #6B7280; font-size: 0.93rem; line-height: 1.7; }
@media (max-width: 992px) { .wv-grid { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (max-width: 600px) { .wv-grid { grid-template-columns: 1fr; } .wv-media { height: 150px; } }
/* ---- Package cards: light surfaces + meta/price rows ---- */
.packages-section { border-bottom: 1px solid #E5E7EB; }
.package-card { background: #FFFFFF; border: 1px solid #E5E7EB; }
.package-card:hover { box-shadow: 0 15px 30px rgba(15,77,46,0.15); }
.package-content h3 { color: #1F2937; font-size: 1.45rem; }
.package-badge { color: #FFFFFF; }
.package-route { background: #F7F9F7; border: 1px dashed rgba(15,77,46,0.45); }
.package-route span { color: #374151; }
.pkg-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; }
.pkg-meta span { display: inline-flex; align-items: center; gap: 6px; color: #6B7280; font-size: 0.88rem; }
.pkg-meta svg { width: 16px; height: 16px; stroke: #0F4D2E; fill: none; flex-shrink: 0; }
.pkg-price {
display: flex; align-items: baseline; gap: 8px;
margin-bottom: 16px; padding-top: 14px; border-top: 1px solid #E5E7EB;
}
.pkg-price strong { color: #F28C28; font-size: 1.45rem; }
.pkg-price span { color: #6B7280; font-size: 0.85rem; }
/* ---- Traveler services compact tiles ---- */
.tsv-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
max-width: 1140px; margin: 0 auto;
}
.tsv-card {
display: flex; align-items: flex-start; gap: 14px;
background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 16px;
padding: 20px 22px; box-shadow: 0 4px 14px rgba(0,0,0,0.05);
text-decoration: none; transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.tsv-card:hover { border-color: #0F4D2E; background: #F7F9F7; transform: translateY(-3px); }
.tsv-card .t-ico {
width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
background: rgba(15,77,46,0.08);
display: flex; align-items: center; justify-content: center;
}
.tsv-card .t-ico svg { width: 22px; height: 22px; stroke: #0F4D2E; fill: none; }
.tsv-card strong { display: block; color: #1F2937; font-size: 1rem; margin-bottom: 4px; }
.tsv-card span { color: #6B7280; font-size: 0.86rem; line-height: 1.55; }
@media (max-width: 992px) { .tsv-grid { grid-template-columns: 1fr 1fr; gap: 14px; } }
@media (max-width: 600px) { .tsv-grid { grid-template-columns: 1fr; } }
/* ---- Custom trip planner band (premium dark green) ---- */
.planner-band { background: #0F4D2E; padding: 80px 5%; }
.planner-inner {
max-width: 1240px; margin: 0 auto;
display: grid; grid-template-columns: 1.08fr 1fr; gap: 50px; align-items: center;
}
.planner-form { background: #FFFFFF; border-radius: 16px; padding: 36px; }
.planner-form h3 { color: #1F2937; font-size: 1.55rem; margin-bottom: 22px; }
.planner-side .plan-eyebrow {
color: #F28C28; font-weight: 700; letter-spacing: 1.5px;
text-transform: uppercase; font-size: 0.8rem; margin-bottom: 12px;
}
.planner-side h2 { color: #FFFFFF; font-size: 2.3rem; line-height: 1.25; margin-bottom: 14px; }
.planner-side h2 span { color: #F28C28; }
.planner-side > p { color: rgba(255,255,255,0.85); font-size: 1.02rem; line-height: 1.75; margin-bottom: 26px; }
.plan-benefits { list-style: none; margin: 0 0 28px; padding: 0; }
.plan-benefits li {
display: flex; align-items: center; gap: 12px;
color: #FFFFFF; font-size: 1rem; margin-bottom: 13px;
}
.plan-benefits li::before {
content: '\2713'; flex-shrink: 0;
width: 24px; height: 24px; border-radius: 50%;
background: #F28C28; color: #FFFFFF;
font-size: 0.78rem; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.planner-band .wa-box { background: rgba(255,255,255,0.08); text-align: start; }
.planner-band .wa-box h4 { color: #FFFFFF !important; }
.planner-band .wa-box p { color: rgba(255,255,255,0.80) !important; }
@media (max-width: 992px) {
.planner-inner { grid-template-columns: 1fr; gap: 36px; }
.planner-band { padding: 56px 5%; }
}
@media (max-width: 600px) {
.planner-form { padding: 26px 20px; }
.planner-side h2 { font-size: 1.7rem; }
}
/* ==========================================================================
HOME V2 — Premium light redesign (scoped to body.home-v2, homepage only)
========================================================================== */
body.home-v2 {
/* Re-map legacy variables so shared components (header, footer, popup,
FAQ, contact, WA widget) adopt the light premium theme automatically */
--bg-dark: #FAFAF8;
--brand-green: #0E3B2C;
--btn-orange: #A6792B;
--text-light: #0E3B2C;
--text-muted: #5F6B63;
--card-bg: #FFFFFF;
/* New tokens */
--hv-cream: #FAFAF8; /* primary page background — bright off-white */
--hv-cream2: #F2EFE9; /* subtle alt-section tint (kept distinct, not heavy beige) */
--hv-green: #0E3B2C;
--hv-green-deep: #0A2C20;
--hv-gold: #C2913B;
--hv-gold-dark: #A6792B;
--hv-ink: #0E3B2C; /* primary heading colour */
--hv-body: #5F6B63; /* body text */
--hv-secondary: #7B857E; /* secondary text */
--hv-label: #8D968F; /* small labels */
--hv-line: #ECE9E1; /* card / divider border */
--hv-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
--hv-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
background-color: var(--hv-cream) !important;
color: var(--hv-body) !important;
}
body.home-v2, body.home-v2 * { font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; }
body.home-v2[dir="ltr"] h1, body.home-v2[dir="ltr"] h2,
body.home-v2[dir="ltr"] .hv-journey-price strong,
body.home-v2[dir="ltr"] .hv-stat strong,
body.home-v2[dir="ltr"] .hv-pstat strong,
body.home-v2[dir="ltr"] blockquote { font-family: var(--hv-serif); }
/* ---- Shared chrome re-skin (header / mobile menu / footer / popup) ---- */
body.home-v2 header {
background-color: rgba(250, 250, 248, 0.92) !important;
border-bottom: 1px solid var(--hv-line) !important;
backdrop-filter: blur(12px);
}
body.home-v2 .nav-links a:hover { color: var(--hv-gold-dark); }
body.home-v2 .hamburger span { background: var(--hv-green); }
body.home-v2 .mobile-menu {
background-color: rgba(250, 250, 248, 0.97) !important;
border-bottom: 1px solid var(--hv-line) !important;
}
body.home-v2 .mobile-menu a { color: var(--hv-ink); border-color: var(--hv-line); }
body.home-v2 .nav-links a { color: var(--hv-ink); }
body.home-v2 .nav-links a.active { color: var(--hv-gold-dark); }
body.home-v2 .lang-dropbtn { border-color: var(--hv-line); color: var(--hv-green); }
body.home-v2 .lang-dropdown-content { box-shadow: 0 14px 35px rgba(28,43,34,0.18); border-color: var(--hv-line); }
body.home-v2 .lang-dropdown-content a:hover { background: var(--hv-cream2); }
body.home-v2 footer {
background: linear-gradient(135deg, #0E3B2C 0%, #0A2F23 100%) !important;
border-top: 2px solid var(--hv-gold) !important;
color: rgba(255, 255, 255, 0.75) !important;
/* Re-scope legacy text tokens so all footer text becomes light automatically */
--brand-green: #FFFFFF;
--text-light: #FFFFFF;
--text-muted: rgba(255, 255, 255, 0.75);
--btn-orange: #C2913B;
}
body.home-v2 footer p { color: rgba(255, 255, 255, 0.75); }
body.home-v2 .popup-content { box-shadow: 0 25px 70px rgba(28,43,34,0.30); border-color: var(--hv-line); }
body.home-v2 .form-control { background: #FFFFFF; color: var(--hv-ink); border: 1px solid var(--hv-line); }
body.home-v2 .form-control:focus { border-color: var(--hv-gold); }
body.home-v2 .form-control::placeholder { color: #95A099; }
body.home-v2 .faq-item { background: #FFFFFF; border: 1px solid var(--hv-line); }
body.home-v2 .faq-item summary { color: var(--hv-ink); }
body.home-v2 .faq-body { color: var(--text-muted); }
body.home-v2 .btn-outline { border: 1.5px solid var(--hv-green); color: var(--hv-green); }
body.home-v2 .btn-outline:hover { background: var(--hv-green); color: #F6F1E7; }
body.home-v2 .btn-orange { background-color: var(--hv-gold) !important; color: #FFFFFF !important; border: none; }
body.home-v2 .btn-orange:hover { background-color: var(--hv-gold-dark) !important; }
body.home-v2 .contact-section { padding-top: 90px; padding-bottom: 100px; background-color: var(--hv-cream) !important; border-top-color: var(--hv-line) !important; }
/* ---- Primitives ---- */
body.home-v2 .hv-eyebrow {
display: inline-block;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 2.2px;
text-transform: uppercase;
color: var(--hv-gold-dark);
margin-bottom: 14px;
}
body.home-v2 .hv-eyebrow-gold { color: var(--hv-gold); }
body.home-v2 .hv-center { display: block; text-align: center; }
body.home-v2 .hv-sub { color: var(--text-muted); font-size: 1.02rem; line-height: 1.85; }
body.home-v2 .hv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 30px;
border-radius: 999px;
font-weight: 700;
font-size: 0.95rem;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
line-height: 1.4;
}
body.home-v2 .hv-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
body.home-v2 .hv-btn-solid { background: var(--hv-green); color: #F6F1E7; }
body.home-v2 .hv-btn-solid:hover { background: var(--hv-green-deep); transform: translateY(-2px); }
body.home-v2 .hv-btn-ghost { border: 1.5px solid var(--hv-green); color: var(--hv-green); background: transparent; }
body.home-v2 .hv-btn-ghost:hover { background: var(--hv-green); color: #F6F1E7; transform: translateY(-2px); }
body.home-v2 .hv-btn-gold { background: var(--hv-gold); color: #FFFFFF; }
body.home-v2 .hv-btn-gold:hover { background: var(--hv-gold-dark); transform: translateY(-2px); }
body.home-v2 .hv-btn-ghostlight { border: 1.5px solid rgba(246,241,231,0.55); color: #F6F1E7; background: transparent; }
body.home-v2 .hv-btn-ghostlight:hover { background: rgba(246,241,231,0.12); transform: translateY(-2px); }
body.home-v2 .hv-btn-wa { background: #1FAF54; color: #FFFFFF; }
body.home-v2 .hv-btn-wa:hover { background: #178A42; transform: translateY(-2px); }
/* ---- 1. Hero ---- */
body.home-v2 .hv-hero { padding: 150px 5% 70px; }
body.home-v2 .hv-hero-inner {
max-width: 1380px;
margin: 0 auto;
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 64px;
align-items: center;
}
body.home-v2 .hv-hero-copy h1 {
font-size: clamp(2.4rem, 4.6vw, 3.9rem);
line-height: 1.14;
color: var(--hv-ink);
font-weight: 700;
margin: 6px 0 24px;
}
body.home-v2 .hv-hero-copy h1 span { color: var(--hv-green); position: relative; }
body.home-v2 .hv-hero-copy h1 span::after {
content: '';
position: absolute;
inset-inline: 0;
bottom: -6px;
height: 3px;
background: var(--hv-gold);
border-radius: 2px;
}
body.home-v2 .hv-lead { color: var(--text-muted); font-size: 1.05rem; line-height: 1.9; max-width: 560px; margin-bottom: 34px; }
body.home-v2 .hv-hero-cta { display: flex; flex-wrap: wrap; gap: 16px; }
body.home-v2 .hv-hero-media { position: relative; }
body.home-v2 .hv-hero-media > img {
width: 100%;
aspect-ratio: 5 / 4;
object-fit: cover;
border-radius: 26px;
box-shadow: var(--hv-shadow);
display: block;
}
body.home-v2 .hv-hero-quote {
position: absolute;
bottom: -28px;
inset-inline-end: -14px;
max-width: 300px;
background: #FFFFFF;
border: 1px solid var(--hv-line);
border-radius: 18px;
padding: 24px 26px 20px;
box-shadow: var(--hv-shadow);
margin: 0;
}
body.home-v2 .hv-quote-mark { display: block; font-size: 2.6rem; line-height: 0.6; color: var(--hv-gold); font-family: Georgia, serif; margin-bottom: 10px; }
body.home-v2 .hv-hero-quote blockquote { font-size: 1.02rem; font-weight: 700; color: var(--hv-green); line-height: 1.6; margin: 0 0 12px; border: none; padding: 0; }
body.home-v2 .hv-hero-quote figcaption { font-size: 0.8rem; color: var(--text-muted); }
/* ---- 2. Stats strip ---- */
body.home-v2 .hv-stats { padding: 70px 5% 30px; }
body.home-v2 .hv-stats-inner {
max-width: 1380px;
margin: 0 auto;
background: #FFFFFF;
border: 1px solid var(--hv-line);
border-radius: 22px;
box-shadow: 0 12px 35px rgba(28,43,34,0.06);
display: grid;
grid-template-columns: repeat(5, 1fr);
}
body.home-v2 .hv-stat {
padding: 34px 18px;
text-align: center;
display: flex;
flex-direction: column;
gap: 4px;
border-inline-start: 1px solid var(--hv-line);
}
body.home-v2 .hv-stat:first-child { border-inline-start: none; }
body.home-v2 .hv-stat strong { font-size: 2.1rem; font-weight: 700; color: var(--hv-green); line-height: 1.2; }
body.home-v2 .hv-stat span { font-size: 0.88rem; color: var(--text-muted); }
body.home-v2 .hv-stat-gold strong { color: var(--hv-gold-dark); font-size: 1.45rem; padding-top: 8px; }
/* ---- 3. Destinations ---- */
body.home-v2 .hv-dest { padding: 100px 5% 90px; }
body.home-v2 .hv-dest-head { max-width: 1380px; margin: 0 auto 50px; }
body.home-v2 .hv-dest-headtext { max-width: 640px; }
body.home-v2 .hv-dest-headtext h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); color: var(--hv-ink); line-height: 1.2; margin-bottom: 18px; }
body.home-v2 .hv-dest-headtext h2 span { color: var(--hv-green); }
body.home-v2 .hv-dest-headtext .hv-sub { margin-bottom: 28px; }
body.home-v2 .hv-dest-grid {
max-width: 1380px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 22px;
}
body.home-v2 .hv-dest-card {
position: relative;
border-radius: 20px;
overflow: hidden;
aspect-ratio: 3 / 4.3;
display: block;
text-decoration: none;
box-shadow: 0 10px 28px rgba(28,43,34,0.10);
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
body.home-v2 .hv-dest-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(28,43,34,0.20); }
body.home-v2 .hv-dest-card > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
body.home-v2 .hv-dest-card:hover > img { transform: scale(1.06); }
body.home-v2 .hv-dest-badge {
position: absolute;
top: 14px;
inset-inline-start: 14px;
z-index: 2;
background: rgba(255, 253, 248, 0.92);
color: var(--hv-gold-dark);
font-size: 0.72rem;
font-weight: 800;
padding: 6px 12px;
border-radius: 999px;
letter-spacing: 0.4px;
}
body.home-v2 .hv-dest-overlay {
position: absolute;
inset-inline: 0;
bottom: 0;
z-index: 1;
padding: 70px 20px 20px;
background: linear-gradient(to top, rgba(8, 25, 18, 0.92) 0%, rgba(8, 25, 18, 0.45) 55%, transparent 100%);
}
body.home-v2 .hv-dest-overlay h3 { color: #FFFDF8; font-size: 1.45rem; font-weight: 800; margin-bottom: 4px; }
body.home-v2 .hv-dest-tag { display: flex; align-items: center; gap: 6px; color: #E8C98A; font-size: 0.84rem; font-weight: 600; margin: 0; }
body.home-v2 .hv-dest-tag svg { width: 14px; height: 14px; flex-shrink: 0; }
body.home-v2 .hv-dest-desc {
color: rgba(246, 241, 231, 0.88);
font-size: 0.83rem;
line-height: 1.65;
max-height: 0;
opacity: 0;
overflow: hidden;
margin: 0;
transition: max-height 0.45s ease, opacity 0.45s ease, margin 0.45s ease;
}
body.home-v2 .hv-dest-card:hover .hv-dest-desc { max-height: 160px; opacity: 1; margin-top: 10px; }
/* ---- 4. Services band (deep green) ---- */
body.home-v2 .hv-services {
background:
radial-gradient(ellipse at 12% 8%, rgba(194, 145, 59, 0.10), transparent 45%),
radial-gradient(ellipse at 90% 95%, rgba(194, 145, 59, 0.08), transparent 40%),
var(--hv-green);
padding: 100px 5%;
}
body.home-v2 .hv-services-inner {
max-width: 1380px;
margin: 0 auto;
display: grid;
grid-template-columns: 0.85fr 1.35fr;
gap: 64px;
align-items: center;
}
body.home-v2 .hv-services-head h2 { color: #FFFDF8; font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.25; margin-bottom: 18px; }
body.home-v2 .hv-services-head .hv-sub { color: rgba(246, 241, 231, 0.75); margin-bottom: 30px; }
body.home-v2 .hv-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
body.home-v2 .hv-svc {
background: rgba(255, 255, 255, 0.055);
border: 1px solid rgba(246, 241, 231, 0.14);
border-radius: 18px;
padding: 26px 22px;
text-decoration: none;
display: block;
transition: all 0.3s ease;
}
body.home-v2 .hv-svc:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(194, 145, 59, 0.55); transform: translateY(-4px); }
body.home-v2 .hv-svc-ico {
width: 48px;
height: 48px;
border-radius: 14px;
background: rgba(194, 145, 59, 0.16);
color: var(--hv-gold);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
body.home-v2 .hv-svc-ico svg { width: 24px; height: 24px; }
body.home-v2 .hv-svc h3 { color: #FFFDF8; font-size: 1.04rem; font-weight: 800; margin-bottom: 6px; }
body.home-v2 .hv-svc p { color: rgba(246, 241, 231, 0.68); font-size: 0.86rem; line-height: 1.6; margin: 0; }
/* ---- 5. B2B / B2C gateway ---- */
body.home-v2 .hv-gateway { padding: 100px 5%; }
body.home-v2 .hv-gateway-inner {
max-width: 1380px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
align-items: stretch;
}
body.home-v2 .hv-gate {
position: relative;
border-radius: 28px;
overflow: hidden;
min-height: 620px;
display: flex;
align-items: flex-end;
text-decoration: none;
box-shadow: var(--hv-shadow);
transition: transform 0.4s ease, box-shadow 0.4s ease;
isolation: isolate;
}
body.home-v2 .hv-gate:hover { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(10, 44, 32, 0.30); }
body.home-v2 .hv-gate > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
transition: transform 0.7s ease;
}
body.home-v2 .hv-gate:hover > img { transform: scale(1.07); }
body.home-v2 .hv-gate::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to top, rgba(10, 44, 32, 0.96) 18%, rgba(10, 44, 32, 0.72) 48%, rgba(10, 44, 32, 0.30) 78%, rgba(10, 44, 32, 0.15) 100%);
transition: background 0.4s ease;
}
body.home-v2 .hv-gate::after {
content: '';
position: absolute;
inset: 16px;
border: 1px solid rgba(194, 145, 59, 0);
border-radius: 18px;
pointer-events: none;
transition: border-color 0.4s ease;
}
body.home-v2 .hv-gate:hover::after { border-color: rgba(194, 145, 59, 0.45); }
body.home-v2 .hv-gate-body { padding: 52px 46px 46px; width: 100%; }
body.home-v2 .hv-gate-eyebrow {
display: inline-block;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 2.2px;
text-transform: uppercase;
color: var(--hv-gold);
background: rgba(194, 145, 59, 0.14);
border: 1px solid rgba(194, 145, 59, 0.40);
padding: 7px 16px;
border-radius: 999px;
margin-bottom: 18px;
}
body.home-v2 .hv-gate-body h2 { color: #FFFDF8; font-size: clamp(1.6rem, 2.4vw, 2.15rem); line-height: 1.25; margin-bottom: 14px; }
body.home-v2 .hv-gate-desc { color: rgba(246, 241, 231, 0.80); font-size: 0.96rem; line-height: 1.8; margin-bottom: 22px; max-width: 520px; }
body.home-v2 .hv-gate-list { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
body.home-v2 .hv-gate-list li { display: flex; align-items: flex-start; gap: 10px; color: rgba(246, 241, 231, 0.92); font-size: 0.9rem; font-weight: 600; line-height: 1.55; }
body.home-v2 .hv-gate-list svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--hv-gold); margin-top: 3px; }
body.home-v2 .hv-gate .hv-btn-gold { pointer-events: none; }
body.home-v2 .hv-gate:hover .hv-btn-gold { background: var(--hv-gold-dark); transform: translateY(-2px); }
/* ---- 6. Partner network ---- */
body.home-v2 .hv-partners { padding: 50px 5% 100px; }
body.home-v2 .hv-partners-inner {
max-width: 1000px;
margin: 0 auto;
text-align: center;
background: #FFFFFF;
border: 1px solid var(--hv-line);
border-radius: 26px;
padding: 70px 48px;
box-shadow: 0 12px 35px rgba(28,43,34,0.05);
}
body.home-v2 .hv-partners-inner h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--hv-ink); line-height: 1.25; margin-bottom: 16px; }
body.home-v2 .hv-partners-inner .hv-sub { max-width: 660px; margin: 0 auto 40px; }
body.home-v2 .hv-partners-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 60px; margin-bottom: 42px; }
body.home-v2 .hv-pstat { display: flex; flex-direction: column; gap: 4px; }
body.home-v2 .hv-pstat strong { font-size: 2.2rem; font-weight: 700; color: var(--hv-green); }
body.home-v2 .hv-pstat span { font-size: 0.88rem; color: var(--text-muted); }
/* ---- 7. Travel inspiration ---- */
body.home-v2 .hv-insp { padding: 40px 5% 100px; }
body.home-v2 .hv-insp-head { max-width: 1380px; margin: 0 auto 44px; text-align: center; }
body.home-v2 .hv-insp-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); color: var(--hv-ink); }
body.home-v2 .hv-insp-grid {
max-width: 1380px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
}
body.home-v2 .hv-insp-card {
background: #FFFFFF;
border: 1px solid var(--hv-line);
border-radius: 20px;
overflow: hidden;
text-decoration: none;
display: flex;
flex-direction: column;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
body.home-v2 .hv-insp-card:hover { transform: translateY(-6px); box-shadow: var(--hv-shadow); }
body.home-v2 .hv-insp-media { aspect-ratio: 16 / 10; overflow: hidden; }
body.home-v2 .hv-insp-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
body.home-v2 .hv-insp-card:hover .hv-insp-media img { transform: scale(1.05); }
body.home-v2 .hv-insp-body { padding: 26px 26px 30px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
body.home-v2 .hv-insp-body h3 { color: var(--hv-ink); font-size: 1.12rem; font-weight: 800; line-height: 1.45; }
body.home-v2 .hv-insp-body p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.7; margin: 0; flex: 1; }
body.home-v2 .hv-insp-read { color: var(--hv-gold-dark); font-weight: 800; font-size: 0.88rem; }
/* ---- 8. Team & company ---- */
body.home-v2 .hv-team { padding: 60px 5% 100px; }
body.home-v2 .hv-team-head { max-width: 780px; margin: 0 auto 60px; text-align: center; }
body.home-v2 .hv-team-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); color: var(--hv-ink); margin-bottom: 18px; }
body.home-v2 .hv-team-head .hv-sub { margin-bottom: 26px; }
body.home-v2 .hv-team-badge {
display: inline-flex;
align-items: center;
gap: 9px;
background: rgba(14, 59, 44, 0.07);
border: 1px solid var(--hv-line);
color: var(--hv-green);
font-size: 0.86rem;
font-weight: 700;
padding: 10px 20px;
border-radius: 999px;
}
body.home-v2 .hv-team-badge svg { width: 16px; height: 16px; color: var(--hv-gold-dark); }
body.home-v2 .hv-ceo-card {
max-width: 980px;
margin: 0 auto 80px;
background: #FFFFFF;
border: 1px solid var(--hv-line);
border-radius: 26px;
overflow: hidden;
display: grid;
grid-template-columns: 330px 1fr;
box-shadow: var(--hv-shadow);
}
body.home-v2 .hv-ceo-photo { position: relative; min-height: 320px; }
body.home-v2 .hv-ceo-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
body.home-v2 .hv-ceo-body { padding: 48px 50px; display: flex; flex-direction: column; justify-content: center; }
body.home-v2 .hv-ceo-body blockquote { font-size: 1.45rem; font-weight: 700; color: var(--hv-green); line-height: 1.55; margin: 0 0 26px; border: none; padding: 0; }
body.home-v2 .hv-ceo-id h3 { font-size: 1.2rem; color: var(--hv-ink); font-weight: 800; }
body.home-v2 .hv-ceo-id p { color: var(--hv-gold-dark); font-size: 0.9rem; font-weight: 700; margin: 2px 0 0; }
body.home-v2 .hv-team-title { margin-bottom: 44px; font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--hv-ink); text-align: center; }
body.home-v2 .hv-team-grid {
max-width: 1180px;
margin: 0 auto 80px;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 22px;
}
body.home-v2 .hv-member { text-align: center; }
body.home-v2 .hv-member-photo {
aspect-ratio: 1 / 1.12;
border-radius: 18px;
overflow: hidden;
margin-bottom: 14px;
box-shadow: 0 8px 22px rgba(28,43,34,0.10);
}
body.home-v2 .hv-member-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
body.home-v2 .hv-member:hover .hv-member-photo img { transform: scale(1.06); }
body.home-v2 .hv-member h4 { font-size: 1rem; color: var(--hv-ink); font-weight: 800; }
body.home-v2 .hv-member p { font-size: 0.78rem; color: var(--text-muted); margin: 2px 0 0; }
body.home-v2 .hv-why { max-width: 1180px; margin: 0 auto; }
body.home-v2 .hv-why h2 { font-size: clamp(1.7rem, 2.8vw, 2.2rem); color: var(--hv-ink); margin-bottom: 40px; }
body.home-v2 .hv-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
body.home-v2 .hv-why-item {
background: #FFFFFF;
border: 1px solid var(--hv-line);
border-inline-start: 3px solid var(--hv-gold);
border-radius: 16px;
padding: 30px 32px;
}
body.home-v2 .hv-why-item h4 { color: var(--hv-green); font-size: 1.05rem; font-weight: 800; margin-bottom: 10px; }
body.home-v2 .hv-why-item p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.75; margin: 0; }
/* ---- 9. Final CTA ---- */
body.home-v2 .hv-cta {
background:
linear-gradient(rgba(10, 44, 32, 0.88), rgba(10, 44, 32, 0.94)),
url('imges/hero-home.jpg') center / cover no-repeat;
padding: 110px 5%;
text-align: center;
}
body.home-v2 .hv-cta-inner { max-width: 760px; margin: 0 auto; }
body.home-v2 .hv-cta h2 { color: #FFFDF8; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.22; margin-bottom: 18px; }
body.home-v2 .hv-cta p { color: rgba(246, 241, 231, 0.78); font-size: 1.05rem; line-height: 1.8; margin-bottom: 38px; }
body.home-v2 .hv-cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
/* ---- Responsive ---- */
@media (max-width: 1200px) {
body.home-v2 .hv-dest-grid { grid-template-columns: repeat(3, 1fr); }
body.home-v2 .hv-team-grid { grid-template-columns: repeat(3, 1fr); }
body.home-v2 .hv-gate { min-height: 560px; }
}
@media (max-width: 992px) {
body.home-v2 .hv-hero { padding-top: 120px; }
body.home-v2 .hv-hero-inner { grid-template-columns: 1fr; gap: 70px; }
body.home-v2 .hv-hero-quote { bottom: -34px; inset-inline-end: 12px; }
body.home-v2 .hv-stats-inner { grid-template-columns: repeat(3, 1fr); }
body.home-v2 .hv-stat { border-inline-start: none; border-top: 1px solid var(--hv-line); }
body.home-v2 .hv-stat:nth-child(-n+3) { border-top: none; }
body.home-v2 .hv-services-inner { grid-template-columns: 1fr; gap: 44px; }
body.home-v2 .hv-services-grid { grid-template-columns: repeat(2, 1fr); }
body.home-v2 .hv-insp-grid { grid-template-columns: 1fr; max-width: 620px; }
body.home-v2 .hv-why-grid { grid-template-columns: 1fr; }
body.home-v2 .hv-ceo-card { grid-template-columns: 1fr; }
body.home-v2 .hv-ceo-photo { min-height: 0; height: 300px; }
}
@media (max-width: 768px) {
body.home-v2 .hv-dest-grid {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 16px;
padding-bottom: 14px;
margin-inline: -5vw;
padding-inline: 5vw;
scrollbar-width: none;
}
body.home-v2 .hv-dest-grid::-webkit-scrollbar { display: none; }
body.home-v2 .hv-dest-card { flex: 0 0 72%; max-width: 300px; scroll-snap-align: center; }
body.home-v2 .hv-dest-desc { max-height: 160px; opacity: 1; margin-top: 10px; }
body.home-v2 .hv-gateway-inner { grid-template-columns: 1fr; }
body.home-v2 .hv-gate { min-height: 0; }
body.home-v2 .hv-gate-body { padding: 110px 28px 34px; }
body.home-v2 .hv-partners-inner { padding: 50px 26px; }
body.home-v2 .hv-partners-stats { gap: 34px; }
body.home-v2 .hv-team-grid { grid-template-columns: repeat(2, 1fr); }
body.home-v2 .hv-ceo-body { padding: 36px 28px; }
body.home-v2 .hv-ceo-body blockquote { font-size: 1.2rem; }
}
@media (max-width: 520px) {
body.home-v2 .hv-hero { padding-top: 108px; }
body.home-v2 .hv-hero-cta .hv-btn { width: 100%; }
body.home-v2 .hv-hero-quote { position: static; max-width: none; margin-top: 18px; }
body.home-v2 .hv-stats { padding-top: 40px; }
body.home-v2 .hv-stats-inner { grid-template-columns: repeat(2, 1fr); }
body.home-v2 .hv-stat { padding: 24px 12px; }
body.home-v2 .hv-stat:nth-child(-n+3) { border-top: 1px solid var(--hv-line); }
body.home-v2 .hv-stat:nth-child(-n+2) { border-top: none; }
body.home-v2 .hv-stat:last-child { grid-column: 1 / -1; }
body.home-v2 .hv-services-grid { grid-template-columns: 1fr; }
body.home-v2 .hv-cta-btns .hv-btn { width: 100%; }
body.home-v2 .hv-dest { padding-top: 70px; }
body.home-v2 .hv-gateway, body.home-v2 .hv-services { padding-top: 70px; padding-bottom: 70px; }
}
/* ================================================================
MOBILE OPTIMISATION — phones only (max-width: 600px)
Scoped to body.home-v2. Desktop (>992px) and tablet (601–992px)
layouts are intentionally untouched. This block only reorders and
compresses for density — no content removed, no copy/SEO changed.
Placed after the existing home-v2 responsive rules so it wins the
cascade where it overlaps the older 768px / 520px phone rules.
================================================================ */
@media (max-width: 600px) {
/* ---- 1. Language dropdown: always fully inside the viewport (LTR + RTL).
The default RTL rule anchored left:0 and pushed it off the right edge. */
body.home-v2 .lang-dropdown-content,
body.home-v2[dir="rtl"] .lang-dropdown-content {
right: 0;
left: auto;
min-width: 168px;
max-width: calc(100vw - 24px);
max-height: calc(100vh - 96px);
overflow-y: auto;
}
/* ---- 2. Hero: image first (right under the navbar), tighter rhythm ---- */
body.home-v2 .hv-hero { padding: 24px 5% 34px; }
body.home-v2 .hv-hero-inner { gap: 22px; }
body.home-v2 .hv-hero-media { order: -1; }
body.home-v2 .hv-hero-media > img { aspect-ratio: 16 / 11; border-radius: 18px; }
body.home-v2 .hv-hero-copy h1 { margin: 2px 0 28px; } /* +clearance so the gold underline never overlaps the lead paragraph */
body.home-v2 .hv-lead { font-size: 0.96rem; line-height: 1.65; margin-bottom: 18px; }
body.home-v2 .hv-hero-quote { margin-top: 14px; padding: 16px 18px 14px; }
body.home-v2 .hv-hero-quote blockquote { font-size: 0.95rem; }
/* ---- 3. Stats: one compact horizontal bar (all 5 in a single row) ---- */
body.home-v2 .hv-stats { padding: 26px 5% 6px; }
body.home-v2 .hv-stats-inner { grid-template-columns: repeat(5, 1fr); border-radius: 14px; }
body.home-v2 .hv-stat {
padding: 12px 4px;
gap: 2px;
border-inline-start: 1px solid var(--hv-line);
border-top: none !important;
grid-column: auto !important; /* clears the 520px "last child full row" rule */
}
body.home-v2 .hv-stat:first-child { border-inline-start: none; }
body.home-v2 .hv-stat strong { font-size: 1.12rem; }
body.home-v2 .hv-stat span { font-size: 0.57rem; line-height: 1.22; }
body.home-v2 .hv-stat-gold strong { font-size: 0.74rem; padding-top: 3px; line-height: 1.18; }
/* ---- 4. Destinations: drives a true auto-rotating carousel (see JS).
Keep the edge-to-edge horizontal scroller; just tighten the heading. */
body.home-v2 .hv-dest { padding: 44px 5% 40px; }
body.home-v2 .hv-dest-head { margin-bottom: 22px; }
body.home-v2 .hv-dest-headtext h2 { font-size: 1.6rem; margin-bottom: 12px; }
body.home-v2 .hv-dest-headtext .hv-sub { margin-bottom: 16px; font-size: 0.92rem; }
body.home-v2 .hv-dest-card { scroll-snap-align: start; }
/* ---- 5. Services: compact 3 × 2 grid (3 cards per row) ---- */
body.home-v2 .hv-services { padding: 54px 5%; }
body.home-v2 .hv-services-inner { gap: 26px; }
body.home-v2 .hv-services-head h2 { font-size: 1.55rem; margin-bottom: 12px; }
body.home-v2 .hv-services-head .hv-sub { margin-bottom: 16px; font-size: 0.92rem; }
body.home-v2 .hv-services-grid { grid-template-columns: repeat(3, 1fr); gap: 9px; }
body.home-v2 .hv-svc { padding: 13px 8px; border-radius: 13px; }
body.home-v2 .hv-svc-ico { width: 34px; height: 34px; border-radius: 10px; margin-bottom: 8px; }
body.home-v2 .hv-svc-ico svg { width: 18px; height: 18px; }
body.home-v2 .hv-svc h3 { font-size: 0.78rem; margin-bottom: 3px; line-height: 1.2; }
body.home-v2 .hv-svc p { font-size: 0.65rem; line-height: 1.4; }
/* ---- 6. B2B / B2C gateway: shorter stacked cards, tighter spacing ---- */
body.home-v2 .hv-gateway { padding: 54px 5%; }
body.home-v2 .hv-gateway-inner { gap: 16px; }
body.home-v2 .hv-gate { border-radius: 20px; }
body.home-v2 .hv-gate-body { padding: 62px 20px 26px; }
body.home-v2 .hv-gate-eyebrow { margin-bottom: 11px; padding: 5px 13px; font-size: 0.66rem; }
body.home-v2 .hv-gate-body h2 { font-size: 1.4rem; margin-bottom: 9px; }
body.home-v2 .hv-gate-desc { font-size: 0.85rem; line-height: 1.55; margin-bottom: 13px; }
body.home-v2 .hv-gate-list { gap: 6px; margin-bottom: 16px; }
body.home-v2 .hv-gate-list li { font-size: 0.81rem; line-height: 1.4; }
/* ---- 7. Hotel network: compact, stats forced onto one row (≥40% shorter) ---- */
body.home-v2 .hv-partners { padding: 6px 5% 54px; }
body.home-v2 .hv-partners-inner { padding: 28px 16px; border-radius: 18px; }
body.home-v2 .hv-partners-inner h2 { font-size: 1.45rem; margin-bottom: 9px; }
body.home-v2 .hv-partners-inner .hv-sub { margin-bottom: 20px; font-size: 0.88rem; line-height: 1.6; }
body.home-v2 .hv-partners-stats { gap: 12px; flex-wrap: nowrap; margin-bottom: 22px; }
body.home-v2 .hv-pstat strong { font-size: 1.5rem; }
body.home-v2 .hv-pstat span { font-size: 0.64rem; line-height: 1.28; }
/* ---- 8. Travel guides: 2 on row 1, 3rd centred on row 2; shorter media ---- */
body.home-v2 .hv-insp { padding: 6px 5% 54px; }
body.home-v2 .hv-insp-head { margin-bottom: 22px; }
body.home-v2 .hv-insp-head h2 { font-size: 1.5rem; }
body.home-v2 .hv-insp-grid { grid-template-columns: 1fr 1fr; gap: 11px; max-width: none; }
body.home-v2 .hv-insp-card:nth-child(3) { grid-column: 1 / -1; max-width: calc(50% - 6px); margin-inline: auto; }
body.home-v2 .hv-insp-media { aspect-ratio: 16 / 10; }
body.home-v2 .hv-insp-body { padding: 13px 13px 15px; gap: 7px; }
body.home-v2 .hv-insp-body h3 { font-size: 0.84rem; line-height: 1.3; }
body.home-v2 .hv-insp-body p { font-size: 0.71rem; line-height: 1.5; }
body.home-v2 .hv-insp-read { font-size: 0.74rem; }
/* ---- 9. Why Dunya Travel: two cards per row, compact ---- */
body.home-v2 .hv-team { padding: 40px 5% 54px; }
body.home-v2 .hv-why h2 { font-size: 1.4rem; margin-bottom: 18px; }
body.home-v2 .hv-why-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
body.home-v2 .hv-why-item { padding: 15px 12px; border-radius: 13px; }
body.home-v2 .hv-why-item h4 { font-size: 0.85rem; margin-bottom: 5px; line-height: 1.2; }
body.home-v2 .hv-why-item p { font-size: 0.71rem; line-height: 1.5; }
/* ---- FAQ preview band: trim the oversized vertical padding ---- */
body.home-v2 section[style*="padding:80px 5%"] { padding: 44px 5% !important; }
/* ---- 10. Main CTA: less vertical padding, slightly smaller buttons ---- */
body.home-v2 .hv-cta { padding: 54px 6%; }
body.home-v2 .hv-cta h2 { font-size: 1.7rem; margin-bottom: 12px; }
body.home-v2 .hv-cta p { font-size: 0.95rem; line-height: 1.6; margin-bottom: 22px; }
body.home-v2 .hv-cta-btns { gap: 10px; }
body.home-v2 .hv-cta-btns .hv-btn { padding: 12px 22px; font-size: 0.9rem; }
/* ---- 11. Contact form: compact fields & spacing (16px kept to avoid iOS zoom) ---- */
body.home-v2 .contact-section { padding-top: 46px !important; padding-bottom: 54px !important; gap: 22px; }
body.home-v2 .contact-section h2 { font-size: 1.85rem !important; margin-bottom: 12px !important; }
body.home-v2 .contact-section > div:last-child { padding: 22px !important; border-radius: 14px; }
body.home-v2 .contact-section h3 { font-size: 1.3rem !important; margin-bottom: 16px !important; }
body.home-v2 .contact-info-box { padding: 18px; margin-top: 18px; }
body.home-v2 .contact-section .form-group { margin-bottom: 11px; }
body.home-v2 .contact-section .form-control { padding: 11px 13px; font-size: 16px; border-radius: 8px; }
body.home-v2 .contact-section #f_msg { min-height: 80px; height: 80px; }
body.home-v2 .contact-section .btn-orange { padding: 12px !important; font-size: 1rem !important; }
}
/* Very small phones — keep the dense rows from overflowing */
@media (max-width: 360px) {
body.home-v2 .hv-stat strong { font-size: 1rem; }
body.home-v2 .hv-stat span { font-size: 0.52rem; }
body.home-v2 .hv-stat-gold strong { font-size: 0.66rem; }
body.home-v2 .hv-svc { padding: 11px 6px; }
body.home-v2 .hv-svc h3 { font-size: 0.72rem; }
body.home-v2 .hv-svc p { font-size: 0.6rem; }
body.home-v2 .hv-pstat strong { font-size: 1.3rem; }
}
/* ===================== B2C v2 — Travelers page ===================== */
body.b2c-v2 .bc-hero { padding-bottom: 40px; }
/* The hero keyword sits mid-sentence here; the absolute gold bar from the
homepage would strike through wrapped words, so underline the text itself */
body.b2c-v2 .hv-hero-copy h1 span::after { display: none; }
body.b2c-v2 .hv-hero-copy h1 span {
text-decoration: underline;
text-decoration-color: var(--hv-gold);
text-decoration-thickness: 3px;
text-underline-offset: 7px;
}
body.b2c-v2 .bc-hero-stat {
position: absolute;
inset-inline-end: -16px;
bottom: 34px;
background: var(--hv-green-deep);
border: 1px solid rgba(194, 145, 59, 0.4);
border-radius: 16px;
padding: 22px 26px;
max-width: 240px;
box-shadow: 0 20px 45px rgba(10, 44, 32, 0.35);
}
body.b2c-v2 .bc-hero-stat span { display: block; font-size: 0.82rem; color: rgba(246, 241, 231, 0.78); line-height: 1.5; }
body.b2c-v2 .bc-hero-stat strong { display: block; font-size: 2.1rem; font-weight: 700; color: #E8C98A; line-height: 1.3; }
body.b2c-v2 .bc-trust { max-width: 1380px; margin: 70px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
body.b2c-v2 .bc-trust-item { display: flex; align-items: center; gap: 14px; background: #FFFFFF; border: 1px solid var(--hv-line); border-radius: 14px; padding: 18px 20px; }
body.b2c-v2 .bc-trust-item svg { width: 28px; height: 28px; color: var(--hv-gold-dark); flex-shrink: 0; fill: none; stroke: currentColor; }
body.b2c-v2 .bc-trust-item strong { display: block; font-size: 0.94rem; color: var(--hv-ink); font-weight: 800; }
body.b2c-v2 .bc-trust-item span { font-size: 0.8rem; color: var(--text-muted); }
body.b2c-v2 .bc-head { max-width: 820px; margin: 0 auto 48px; text-align: center; }
body.b2c-v2 .bc-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); color: var(--hv-ink); line-height: 1.25; margin-bottom: 14px; }
body.b2c-v2 .bc-head h2 span { color: var(--hv-green); }
body.b2c-v2 .bc-foot { text-align: center; margin-top: 44px; }
body.b2c-v2 .bc-progs { padding: 90px 5%; }
body.b2c-v2 .bc-progs-grid { max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
body.b2c-v2 .bc-prog { background: #FFFFFF; border: 1px solid var(--hv-line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.35s ease, box-shadow 0.35s ease; }
body.b2c-v2 .bc-prog:hover { transform: translateY(-6px); box-shadow: var(--hv-shadow); }
body.b2c-v2 .bc-prog-media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
body.b2c-v2 .bc-prog-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
body.b2c-v2 .bc-prog:hover .bc-prog-media img { transform: scale(1.05); }
body.b2c-v2 .bc-prog-days { position: absolute; top: 12px; inset-inline-start: 12px; background: var(--hv-green-deep); color: #F6F1E7; font-size: 0.75rem; font-weight: 700; padding: 5px 13px; border-radius: 30px; }
body.b2c-v2 .bc-prog-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
body.b2c-v2 .bc-prog-body h3 { font-size: 1.12rem; font-weight: 800; color: var(--hv-ink); }
body.b2c-v2 .bc-prog-cities { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; margin: 0; flex: 1; }
body.b2c-v2 .bc-prog-price { font-size: 0.8rem; color: var(--text-muted); margin: 6px 0 12px; }
body.b2c-v2 .bc-prog-price strong { font-size: 1.35rem; color: var(--hv-gold-dark); font-weight: 700; margin-inline: 5px; }
body.b2c-v2 .bc-prog-price em { font-style: normal; }
body.b2c-v2 .bc-prog-btn { width: 100%; justify-content: center; padding: 11px 18px; }
body.b2c-v2 .bc-why { padding: 80px 5%; background: var(--hv-cream2); border-top: 1px solid var(--hv-line); border-bottom: 1px solid var(--hv-line); }
body.b2c-v2 .bc-why-grid { max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
body.b2c-v2 .bc-why-item { background: #FFFFFF; border: 1px solid var(--hv-line); border-radius: 14px; padding: 26px 16px; text-align: center; }
body.b2c-v2 .bc-why-ico { width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 50%; background: rgba(14, 59, 44, 0.08); display: flex; align-items: center; justify-content: center; color: var(--hv-green); }
body.b2c-v2 .bc-why-ico svg { width: 23px; height: 23px; fill: none; stroke: currentColor; }
body.b2c-v2 .bc-why-item h3 { font-size: 0.97rem; font-weight: 800; color: var(--hv-ink); margin-bottom: 6px; }
body.b2c-v2 .bc-why-item p { font-size: 0.8rem; color: var(--text-muted); line-height: 1.6; margin: 0; }
body.b2c-v2 .bc-guide { padding: 90px 5% 80px; }
body.b2c-v2 .bc-guide-grid { max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
body.b2c-v2 .bc-guide-card { background: #FFFFFF; border: 1px solid var(--hv-line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; transition: transform 0.35s ease, box-shadow 0.35s ease; }
body.b2c-v2 .bc-guide-card:hover { transform: translateY(-6px); box-shadow: var(--hv-shadow); }
body.b2c-v2 .bc-guide-media { aspect-ratio: 16 / 11; overflow: hidden; }
body.b2c-v2 .bc-guide-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
body.b2c-v2 .bc-guide-card:hover .bc-guide-media img { transform: scale(1.05); }
body.b2c-v2 .bc-guide-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
body.b2c-v2 .bc-guide-body h3 { font-size: 0.98rem; font-weight: 800; color: var(--hv-ink); line-height: 1.45; }
body.b2c-v2 .bc-guide-body p { font-size: 0.82rem; color: var(--text-muted); line-height: 1.65; margin: 0; flex: 1; }
body.b2c-v2 .bc-guide-read { color: var(--hv-gold-dark); font-weight: 800; font-size: 0.82rem; }
body.b2c-v2 .hv-dest-head { text-align: center; }
body.b2c-v2 .hv-dest-headtext { max-width: 760px; margin: 0 auto; }
body.b2c-v2 .hv-dest-headtext .hv-sub { margin-bottom: 0; }
body.b2c-v2 .bc-faq { padding: 90px 5%; }
body.b2c-v2 .bc-faq-wrap { max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: 1fr 350px; gap: 26px; align-items: start; }
body.b2c-v2 .bc-faq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
body.b2c-v2 .bc-faq-cols .faq-item { margin: 0; }
body.b2c-v2 .bc-faqcta { position: relative; border-radius: 18px; overflow: hidden; min-height: 420px; display: flex; align-items: flex-end; background: var(--hv-green-deep); }
body.b2c-v2 .bc-faqcta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
body.b2c-v2 .bc-faqcta-body { position: relative; width: 100%; padding: 60px 28px 32px; background: linear-gradient(to top, rgba(10, 44, 32, 0.95), rgba(10, 44, 32, 0)); }
body.b2c-v2 .bc-faqcta-body h3 { color: #FFFDF8; font-size: 1.35rem; font-weight: 800; line-height: 1.35; margin-bottom: 8px; }
body.b2c-v2 .bc-faqcta-body p { color: rgba(246, 241, 231, 0.85); font-size: 0.92rem; line-height: 1.7; margin-bottom: 20px; }
body.b2c-v2 .bc-banner { padding: 0 5% 100px; }
body.b2c-v2 .bc-banner-inner { position: relative; max-width: 1380px; margin: 0 auto; border-radius: 22px; overflow: hidden; padding: 90px 8%; text-align: center; background: var(--hv-green-deep); }
body.b2c-v2 .bc-banner-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
body.b2c-v2 .bc-banner-content { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
body.b2c-v2 .bc-banner-content h2 { color: #FFFDF8; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.25; margin-bottom: 14px; }
body.b2c-v2 .bc-banner-content p { color: rgba(246, 241, 231, 0.82); font-size: 1.02rem; line-height: 1.8; margin-bottom: 32px; }
body.b2c-v2 .bc-banner-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
@media (max-width: 1200px) {
body.b2c-v2 .bc-progs-grid { grid-template-columns: repeat(2, 1fr); }
body.b2c-v2 .bc-guide-grid { grid-template-columns: repeat(3, 1fr); }
body.b2c-v2 .bc-why-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px) {
body.b2c-v2 .bc-hero-stat { inset-inline-end: 12px; bottom: -30px; }
body.b2c-v2 .bc-trust { margin-top: 80px; grid-template-columns: repeat(2, 1fr); }
body.b2c-v2 .bc-guide-grid { grid-template-columns: repeat(2, 1fr); }
body.b2c-v2 .bc-faq-wrap { grid-template-columns: 1fr; }
body.b2c-v2 .bc-faqcta { min-height: 300px; }
}
@media (max-width: 600px) {
/* Travel program benefits (hero trust bar): 2 per row */
body.b2c-v2 .bc-trust { grid-template-columns: repeat(2, 1fr); gap: 10px; }
body.b2c-v2 .bc-trust-item { padding: 13px 13px; gap: 11px; border-radius: 12px; }
body.b2c-v2 .bc-trust-item svg { width: 24px; height: 24px; }
body.b2c-v2 .bc-trust-item strong { font-size: 0.84rem; }
body.b2c-v2 .bc-trust-item span { font-size: 0.69rem; line-height: 1.35; }
/* Most popular programs: horizontal carousel (JS adds autoplay + loop).
~1.2 cards visible via 82% card width + peek of the next card. */
body.b2c-v2 .bc-progs-grid {
display: flex;
grid-template-columns: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 14px;
padding-bottom: 6px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
body.b2c-v2 .bc-progs-grid::-webkit-scrollbar { display: none; }
body.b2c-v2 .bc-prog { flex: 0 0 82%; scroll-snap-align: start; }
/* Why choose Dunya Travel: 3 per row, compact cards/icons */
body.b2c-v2 .bc-why-grid { grid-template-columns: repeat(3, 1fr); gap: 9px; }
body.b2c-v2 .bc-why-item { padding: 14px 8px; border-radius: 13px; }
body.b2c-v2 .bc-why-ico { width: 36px; height: 36px; margin-bottom: 9px; }
body.b2c-v2 .bc-why-ico svg { width: 18px; height: 18px; }
body.b2c-v2 .bc-why-item h3 { font-size: 0.74rem; margin-bottom: 4px; line-height: 1.2; }
body.b2c-v2 .bc-why-item p { font-size: 0.62rem; line-height: 1.4; }
/* Travel guide: 2 per row, 5th card centred; equal heights */
body.b2c-v2 .bc-guide-grid { grid-template-columns: 1fr 1fr; gap: 11px; }
body.b2c-v2 .bc-guide-card:nth-child(5) { grid-column: 1 / -1; max-width: calc(50% - 5.5px); margin-inline: auto; }
body.b2c-v2 .bc-guide-media { aspect-ratio: 16 / 10; }
body.b2c-v2 .bc-guide-body { padding: 13px 13px 15px; gap: 7px; }
body.b2c-v2 .bc-guide-body h3 { font-size: 0.85rem; line-height: 1.3; }
body.b2c-v2 .bc-guide-body p { font-size: 0.72rem; line-height: 1.5; }
body.b2c-v2 .bc-guide-read { font-size: 0.74rem; }
body.b2c-v2 .bc-faq-cols { grid-template-columns: 1fr; }
body.b2c-v2 .bc-banner-inner { padding: 56px 7%; }
body.b2c-v2 .bc-banner-btns .hv-btn { width: 100%; }
}
/* ============================================================================
CITY V2 — Destination landing pages (scoped to body.city-v2)
Reuses home-v2 tokens + hv-/bc- components; adds reference-specific blocks:
breadcrumb, hero mini-features, facts strip, attractions split, green band,
gallery row. Always paired with class "home-v2 city-v2".
============================================================================ */
/* ---- Breadcrumb ---- */
body.city-v2 .cv-crumbs { max-width: 1380px; margin: 0 auto; padding: 14px 5% 0; }
body.city-v2 .cv-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; font-size: 0.82rem; }
body.city-v2 .cv-crumbs li { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
body.city-v2 .cv-crumbs a { color: var(--hv-green); font-weight: 700; text-decoration: none; }
body.city-v2 .cv-crumbs a:hover { color: var(--hv-gold-dark); }
body.city-v2 .cv-crumbs li[aria-current] { color: var(--text-muted); font-weight: 600; }
body.city-v2 .cv-crumbs .sep { color: var(--hv-label); }
body.city-v2[dir="rtl"] .cv-crumbs .sep { transform: scaleX(-1); display: inline-block; }
/* ---- Hero additions (hero itself reuses .hv-hero) ---- */
body.city-v2 .hv-hero { padding-top: 30px; }
/* More breathing room between the gold subtitle and the city title (city pages only) */
body.city-v2 .hv-eyebrow { margin-bottom: 28px; }
/* City hero: the gold accent under the city name doubles as the decorative
divider before the subtitle. Sit it as a balanced divider with equal
breathing room above (title) and below (subtitle) — never squeezed against
either. City-only override; the homepage underline (body.home-v2, same
specificity, earlier in the cascade) is intentionally left unchanged. */
body.city-v2 .hv-hero-copy h1 { margin: 6px 0 0; }
body.city-v2 .hv-hero-copy h1 span::after { bottom: -9px; }
body.city-v2 .cv-hero-sub { font-size: clamp(1.1rem, 2vw, 1.45rem); color: var(--hv-green); font-weight: 700; margin: 34px 0 18px; }
body.city-v2 .cv-hero-feats { display: grid; grid-template-columns: repeat(4, auto); gap: 26px 30px; margin: 30px 0 34px; }
body.city-v2 .cv-hero-feat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; max-width: 92px; }
body.city-v2 .cv-hero-feat .cv-ico { width: 44px; height: 44px; border-radius: 12px; background: rgba(14, 59, 44, 0.07); display: flex; align-items: center; justify-content: center; color: var(--hv-green); }
body.city-v2 .cv-hero-feat .cv-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }
body.city-v2 .cv-hero-feat span { font-size: 0.8rem; font-weight: 700; color: var(--hv-ink); line-height: 1.35; }
body.city-v2 .hv-hero-media > img { aspect-ratio: 4 / 3.2; }
/* ---- Facts strip ---- */
body.city-v2 .cv-facts { padding: 50px 5% 20px; }
body.city-v2 .cv-facts-inner {
max-width: 1380px; margin: 0 auto; background: var(--hv-cream2);
border: 1px solid var(--hv-line); border-radius: 22px;
display: grid; grid-template-columns: repeat(4, 1fr);
}
body.city-v2 .cv-fact { padding: 30px 22px; text-align: center; display: flex; flex-direction: column; gap: 4px; border-inline-start: 1px solid var(--hv-line); }
body.city-v2 .cv-fact:first-child { border-inline-start: none; }
body.city-v2 .cv-fact-label { font-size: 0.74rem; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--hv-label); }
body.city-v2 .cv-fact-value { font-size: 1.7rem; font-weight: 700; color: var(--hv-green); line-height: 1.2; }
body.city-v2 .cv-fact-sub { font-size: 0.84rem; color: var(--text-muted); }
/* ---- Section heading helper ---- */
body.city-v2 .cv-head { max-width: 1380px; margin: 0 auto 40px; }
body.city-v2 .cv-head.cv-center { text-align: center; }
body.city-v2 .cv-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); color: var(--hv-ink); line-height: 1.22; margin-bottom: 14px; }
body.city-v2 .cv-head h2 span { color: var(--hv-green); }
body.city-v2 .cv-head .hv-sub { max-width: 720px; }
body.city-v2 .cv-head.cv-center .hv-sub { margin-inline: auto; }
/* ---- Top attractions: feature image + list ---- */
body.city-v2 .cv-attractions { padding: 70px 5% 30px; }
body.city-v2 .cv-attr-grid { max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: stretch; }
body.city-v2 .cv-attr-feature { position: relative; border-radius: 24px; overflow: hidden; min-height: 420px; box-shadow: var(--hv-shadow); isolation: isolate; }
body.city-v2 .cv-attr-feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
body.city-v2 .cv-attr-note {
position: absolute; inset-inline-start: 26px; bottom: 26px; max-width: 340px;
background: rgba(10, 44, 32, 0.92); border: 1px solid rgba(194, 145, 59, 0.35);
border-radius: 18px; padding: 24px 26px; backdrop-filter: blur(2px);
}
body.city-v2 .cv-attr-note h3 { color: #FFFDF8; font-size: 1.18rem; font-weight: 800; margin-bottom: 8px; }
body.city-v2 .cv-attr-note p { color: rgba(246, 241, 231, 0.85); font-size: 0.86rem; line-height: 1.65; margin: 0; }
body.city-v2 .cv-attr-list { display: flex; flex-direction: column; gap: 14px; }
body.city-v2 .cv-attr-item {
display: flex; align-items: center; gap: 18px; background: #FFFFFF;
border: 1px solid var(--hv-line); border-radius: 16px; padding: 14px; text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
body.city-v2 .cv-attr-item:hover { transform: translateY(-3px); box-shadow: var(--hv-shadow); border-color: rgba(194, 145, 59, 0.45); }
body.city-v2 .cv-attr-thumb { flex-shrink: 0; width: 104px; height: 78px; border-radius: 12px; overflow: hidden; }
body.city-v2 .cv-attr-thumb img { width: 100%; height: 100%; object-fit: cover; }
body.city-v2 .cv-attr-text { flex: 1; }
body.city-v2 .cv-attr-text h4 { display: flex; align-items: center; gap: 8px; color: var(--hv-ink); font-size: 1.02rem; font-weight: 800; margin-bottom: 4px; }
body.city-v2 .cv-attr-text h4 svg { width: 16px; height: 16px; color: var(--hv-gold-dark); flex-shrink: 0; fill: none; stroke: currentColor; }
body.city-v2 .cv-attr-text p { color: var(--text-muted); font-size: 0.85rem; line-height: 1.55; margin: 0; }
body.city-v2 .cv-attr-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--hv-gold-dark); font-weight: 800; font-size: 0.86rem; text-decoration: none; align-self: flex-start; }
/* ---- Deep-green feature band ---- */
body.city-v2 .cv-band { padding: 40px 5% 70px; }
body.city-v2 .cv-band-inner {
max-width: 1380px; margin: 0 auto; background: var(--hv-green);
border-radius: 22px; padding: 40px 30px;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
background-image:
radial-gradient(ellipse at 10% 10%, rgba(194,145,59,0.12), transparent 45%),
radial-gradient(ellipse at 90% 90%, rgba(194,145,59,0.10), transparent 45%);
}
body.city-v2 .cv-band-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 0 10px; }
body.city-v2 .cv-band-item .cv-ico { width: 48px; height: 48px; border-radius: 14px; background: rgba(194, 145, 59, 0.16); color: var(--hv-gold); display: flex; align-items: center; justify-content: center; }
body.city-v2 .cv-band-item .cv-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; }
body.city-v2 .cv-band-item h4 { color: #FFFDF8; font-size: 1rem; font-weight: 800; }
body.city-v2 .cv-band-item p { color: rgba(246, 241, 231, 0.72); font-size: 0.82rem; line-height: 1.5; margin: 0; }
/* ---- Experience gallery ---- */
body.city-v2 .cv-gallery { padding: 30px 5% 80px; }
body.city-v2 .cv-gallery-grid { max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
body.city-v2 .cv-gallery-grid figure { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 4; box-shadow: 0 8px 22px rgba(28,43,34,0.10); }
body.city-v2 .cv-gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
body.city-v2 .cv-gallery-grid figure:hover img { transform: scale(1.07); }
/* ---- FAQ ---- */
body.city-v2 .cv-faq { padding: 30px 5% 90px; }
body.city-v2 .cv-faq-list { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
body.city-v2 .cv-faq-foot { text-align: center; margin-top: 28px; }
/* ---- Final CTA band ---- */
body.city-v2 .cv-cta { padding: 0 5% 100px; }
body.city-v2 .cv-cta-inner { position: relative; max-width: 1380px; margin: 0 auto; border-radius: 24px; overflow: hidden; padding: 90px 8%; text-align: center; background: var(--hv-green-deep); }
body.city-v2 .cv-cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.32; }
body.city-v2 .cv-cta-content { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
body.city-v2 .cv-cta-content h2 { color: #FFFDF8; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.22; margin-bottom: 14px; }
body.city-v2 .cv-cta-content p { color: rgba(246, 241, 231, 0.85); font-size: 1.04rem; line-height: 1.8; margin-bottom: 32px; }
body.city-v2 .cv-cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
/* ---- Suggested programs section wrapper (reuses bc-prog cards) ---- */
body.city-v2 .cv-progs { padding: 30px 5% 80px; }
body.city-v2 .cv-progs-grid { max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
body.city-v2 .cv-prog { background: #FFFFFF; border: 1px solid var(--hv-line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.35s ease, box-shadow 0.35s ease; }
body.city-v2 .cv-prog:hover { transform: translateY(-6px); box-shadow: var(--hv-shadow); }
body.city-v2 .cv-prog-media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
body.city-v2 .cv-prog-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
body.city-v2 .cv-prog:hover .cv-prog-media img { transform: scale(1.05); }
body.city-v2 .cv-prog-days { position: absolute; top: 12px; inset-inline-end: 12px; background: rgba(255,253,248,0.92); color: var(--hv-gold-dark); font-size: 0.74rem; font-weight: 800; padding: 5px 12px; border-radius: 30px; }
body.city-v2 .cv-prog-badge { position: absolute; top: 12px; inset-inline-start: 12px; background: var(--hv-gold); color: #fff; font-size: 0.72rem; font-weight: 800; padding: 5px 12px; border-radius: 30px; }
body.city-v2 .cv-prog-body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
body.city-v2 .cv-prog-body h3 { font-size: 1.08rem; font-weight: 800; color: var(--hv-ink); }
body.city-v2 .cv-prog-body p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; margin: 0; flex: 1; }
body.city-v2 .cv-prog-price { font-size: 0.8rem; color: var(--text-muted); margin: 6px 0 12px; }
body.city-v2 .cv-prog-price strong { font-size: 1.3rem; color: var(--hv-gold-dark); font-weight: 700; margin-inline: 5px; }
body.city-v2 .cv-prog-btn { width: 100%; justify-content: center; padding: 11px 18px; }
/* ---- City responsive ---- */
@media (max-width: 1100px) {
body.city-v2 .cv-progs-grid { grid-template-columns: repeat(2, 1fr); }
body.city-v2 .cv-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px) {
body.city-v2 .cv-attr-grid { grid-template-columns: 1fr; gap: 30px; }
body.city-v2 .cv-attr-feature { min-height: 340px; }
body.city-v2 .cv-facts-inner { grid-template-columns: repeat(2, 1fr); }
body.city-v2 .cv-fact:nth-child(3) { border-inline-start: none; }
body.city-v2 .cv-fact:nth-child(n+3) { border-top: 1px solid var(--hv-line); }
body.city-v2 .cv-band-inner { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}
@media (max-width: 768px) {
body.city-v2 .cv-hero-feats { gap: 20px; }
body.city-v2 .cv-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
body.city-v2 .cv-progs-grid { grid-template-columns: 1fr; }
body.city-v2 .cv-facts-inner { grid-template-columns: 1fr 1fr; }
body.city-v2 .cv-hero-feats { grid-template-columns: repeat(4, 1fr); gap: 14px; }
body.city-v2 .cv-hero-feat { max-width: none; }
body.city-v2 .cv-band-inner { grid-template-columns: 1fr 1fr; }
body.city-v2 .cv-attr-thumb { width: 84px; height: 64px; }
body.city-v2 .cv-cta-inner { padding: 60px 7%; }
body.city-v2 .cv-cta-btns .hv-btn { width: 100%; }
}
/* ================================================================
SITE-WIDE MOBILE STANDARD (phones ≤600px) — extends the homepage
pattern to the rest of the home-v2 family + the legacy hub pages.
Hero-image-first is handled per hero; these are the cross-page
density + compaction rules. Desktop/tablet (>600px) untouched.
================================================================ */
@media (max-width: 600px) {
/* B2C + Services hero stat — the floating card would overlap the copy
once the image is moved to the top, so let it sit in normal flow. */
body.b2c-v2 .bc-hero-stat {
position: static;
inset: auto;
max-width: none;
margin-top: 14px;
padding: 16px 20px;
}
body.b2c-v2 .bc-hero { padding-bottom: 20px; }
body.b2c-v2 .bc-head { margin-bottom: 26px; }
body.b2c-v2 .bc-progs { padding: 46px 5%; }
body.b2c-v2 .bc-why { padding: 46px 5%; }
body.b2c-v2 .bc-guide { padding: 46px 5% 40px; }
body.b2c-v2 .bc-faq { padding: 46px 5%; }
body.b2c-v2 .bc-banner { padding: 0 5% 56px; }
/* City pages — compact section rhythm (grids already responsive) */
body.city-v2 .cv-head { margin-bottom: 24px; }
body.city-v2 .cv-facts { padding: 30px 5% 14px; }
body.city-v2 .cv-attractions { padding: 44px 5% 20px; }
body.city-v2 .cv-band { padding: 24px 5% 44px; }
body.city-v2 .cv-band-inner { padding: 28px 18px; }
body.city-v2 .cv-gallery { padding: 20px 5% 48px; }
body.city-v2 .cv-progs { padding: 20px 5% 48px; }
body.city-v2 .cv-faq { padding: 20px 5% 54px; }
/* Legacy hub pages (visa / vip / accommodation) — denser "why" grid
instead of one tall column; this overrides the older 1-col rule. */
.why-visit-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.why-feature { padding: 18px 16px; }
.why-feature h4 { font-size: 1rem; }
.why-feature p { font-size: 0.82rem; line-height: 1.55; }
}
/* ================================================================
CITY PAGES — MOBILE EXPERIENCE PASS (phones ≤600px only)
Aligns the five destination pages (Tashkent · Samarkand · Bukhara
· Khiva · Amirsoy) with the homepage mobile philosophy: a clean
hero divider, one compact facts row, 2-up "things to do", and
horizontal auto-rotating sliders for the gallery / programs /
other-destinations (auto-rotate logic in cities-mobile.js).
Tablet (601–992px) and desktop are intentionally untouched.
This block is placed last so it wins the cascade where it overlaps
the earlier city responsive rules.
================================================================ */
@media (max-width: 600px) {
/* 1 · Hero — keep the gold divider sitting cleanly between the
title and the subtitle. The base -8px pull collapses the gap on
phones, letting the underline (drawn under the full city name)
cut into the subtitle. Restore equal breathing room instead. */
body.city-v2 .hv-hero-copy h1 { margin: 2px 0 0; }
body.city-v2 .cv-hero-sub { margin-top: 28px; }
/* 2 · City facts — one compact horizontal row of four. */
body.city-v2 .cv-facts-inner { grid-template-columns: repeat(4, 1fr); }
body.city-v2 .cv-fact { padding: 14px 5px; gap: 3px; border-top: none; border-inline-start: 1px solid var(--hv-line); }
body.city-v2 .cv-fact:first-child { border-inline-start: none; }
body.city-v2 .cv-fact:nth-child(3) { border-inline-start: 1px solid var(--hv-line); } /* undo the 2×2 reset */
body.city-v2 .cv-fact:nth-child(n+3) { border-top: none; } /* undo the 2×2 top border */
body.city-v2 .cv-fact-label { font-size: 0.55rem; letter-spacing: 0.5px; }
body.city-v2 .cv-fact-value { font-size: 1.04rem; }
body.city-v2 .cv-fact-sub { font-size: 0.58rem; line-height: 1.3; }
/* 4 · Top things to do — two cards per row (compact vertical cards).
All images, titles and descriptions are kept. */
body.city-v2 .cv-attr-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.city-v2 .cv-attr-item { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; }
body.city-v2 .cv-attr-thumb { width: 100%; height: 92px; }
body.city-v2 .cv-attr-text h4 { font-size: 0.82rem; gap: 5px; margin-bottom: 3px; }
body.city-v2 .cv-attr-text h4 svg { width: 14px; height: 14px; }
body.city-v2 .cv-attr-text p { font-size: 0.7rem; line-height: 1.45; }
body.city-v2 .cv-attr-more { grid-column: 1 / -1; justify-content: center; align-self: center; margin-top: 6px; }
/* 5 · Experience gallery — edge-to-edge horizontal slider with a
peeking next slide (auto-rotate + infinite loop via JS). */
body.city-v2 .cv-gallery-grid {
display: flex; grid-template-columns: none;
overflow-x: auto; scroll-snap-type: x mandatory;
gap: 12px; margin-inline: -5vw; padding-inline: 5vw; padding-bottom: 12px;
scrollbar-width: none;
}
body.city-v2 .cv-gallery-grid::-webkit-scrollbar { display: none; }
body.city-v2 .cv-gallery-grid figure { flex: 0 0 60%; max-width: 240px; scroll-snap-align: start; }
/* 6 · Suggested programs — horizontal slider; pricing, duration
badges and all program details are preserved inside each card. */
body.city-v2 .cv-progs-grid {
display: flex; grid-template-columns: none;
overflow-x: auto; scroll-snap-type: x mandatory;
gap: 14px; margin-inline: -5vw; padding-inline: 5vw; padding-bottom: 14px;
scrollbar-width: none;
}
body.city-v2 .cv-progs-grid::-webkit-scrollbar { display: none; }
body.city-v2 .cv-prog { flex: 0 0 78%; max-width: 320px; scroll-snap-align: start; }
/* 7 · Other destinations already renders as the homepage .hv-dest
horizontal scroller on phones (flex + 72% cards with peek).
cities-mobile.js adds the auto-rotate + seamless infinite loop. */
}
/* ================================================================
MOBILE QUALITY PASS → B2B benchmark (phones only).
Lifts sub-readable captions to a legible floor, relaxes the
densest grids for narrow Android / iPhone SE, and adds the
Arabic/RTL tuning B2B has. APPENDED LAST and gated entirely
behind ≤600 / ≤380 — desktop & tablet (>600px) are untouched.
Covers Homepage (hv-*), B2C (bc-*), City pages (cv-*). Hotels
is intentionally excluded.
================================================================ */
@media (max-width: 600px) {
/* Readability floor — only the smallest captions are lifted, so the
established phone look is preserved on mainstream devices. */
body.home-v2 .hv-stat span { font-size: 0.62rem; }
body.b2c-v2 .bc-trust-item span { font-size: 0.72rem; }
body.city-v2 .cv-fact-label { font-size: 0.6rem; letter-spacing: 0.4px; }
body.city-v2 .cv-fact-value { font-size: 1.12rem; }
body.city-v2 .cv-fact-sub { font-size: 0.62rem; line-height: 1.3; }
/* Arabic / RTL — kill Latin letter-spacing on eyebrows/labels and give
Arabic the extra line-height + safe wrapping (mirrors the B2B block). */
body.home-v2[dir="rtl"] .hv-eyebrow,
body.city-v2[dir="rtl"] .cv-fact-label { letter-spacing: 0; }
body.home-v2[dir="rtl"] .hv-svc h3,
body.b2c-v2[dir="rtl"] .bc-why-item h3,
body.city-v2[dir="rtl"] .cv-attr-text h4,
body.city-v2[dir="rtl"] .cv-fact-value { line-height: 1.5; overflow-wrap: anywhere; }
body.home-v2[dir="rtl"] .hv-svc p,
body.b2c-v2[dir="rtl"] .bc-why-item p,
body.city-v2[dir="rtl"] .cv-attr-text p,
body.city-v2[dir="rtl"] .cv-fact-sub,
body.home-v2[dir="rtl"] .hv-stat span { line-height: 1.5; }
}
/* Narrow Android (Galaxy A / Redmi) + iPhone SE — relax the densest grids
so cards stop becoming too narrow and text stays readable. */
@media (max-width: 380px) {
/* Homepage services: 3-up → 2-up, readable text */
body.home-v2 .hv-services-grid { grid-template-columns: repeat(2, 1fr); }
body.home-v2 .hv-svc h3 { font-size: 0.82rem; }
body.home-v2 .hv-svc p { font-size: 0.72rem; line-height: 1.45; }
body.home-v2 .hv-stat span { font-size: 0.6rem; }
/* B2C "why choose": 3-up → 2-up */
body.b2c-v2 .bc-why-grid { grid-template-columns: repeat(2, 1fr); }
body.b2c-v2 .bc-why-item h3 { font-size: 0.82rem; }
body.b2c-v2 .bc-why-item p { font-size: 0.72rem; line-height: 1.45; }
/* City facts: 4-across → balanced 2×2 with clean dividers */
body.city-v2 .cv-facts-inner { grid-template-columns: 1fr 1fr; }
body.city-v2 .cv-fact { border-top: none; padding: 16px 8px; }
body.city-v2 .cv-fact:nth-child(odd) { border-inline-start: none; }
body.city-v2 .cv-fact:nth-child(even) { border-inline-start: 1px solid var(--hv-line); }
body.city-v2 .cv-fact:nth-child(n+3) { border-top: 1px solid var(--hv-line); }
body.city-v2 .cv-fact-label { font-size: 0.64rem; }
body.city-v2 .cv-fact-value { font-size: 1.25rem; }
body.city-v2 .cv-fact-sub { font-size: 0.66rem; }
/* City hero mini-features: 4-across → 2×2 */
body.city-v2 .cv-hero-feats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
/* ============================================================================
SERVICES NAV DROPDOWN (Phase 2)
Reuses the existing dark navbar + lang-dropdown look. Desktop = hover menu,
mobile = tap accordion inside the existing mobile menu. No redesign — same
colours (--bg-dark / --brand-green / --text-light / --btn-orange), same fonts.
============================================================================ */
/* ── Desktop dropdown ── */
.nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-dropdown > .nav-dropbtn {
display: inline-flex; align-items: center; gap: 5px;
color: var(--text-light); text-decoration: none; font-size: 15px; font-weight: 500;
cursor: pointer; transition: 0.3s;
}
.nav-dropdown > .nav-dropbtn .nav-caret { transition: transform .3s ease; margin-top: 1px; }
.nav-dropdown:hover > .nav-dropbtn,
.nav-dropdown.open > .nav-dropbtn,
.nav-dropdown > .nav-dropbtn:hover,
.nav-dropdown > .nav-dropbtn.active { color: var(--btn-orange); }
.nav-dropdown:hover > .nav-dropbtn .nav-caret,
.nav-dropdown.open > .nav-dropbtn .nav-caret { transform: rotate(180deg); }
.nav-dropdown-content {
display: none; position: absolute; top: 100%; inset-inline-start: 0; margin-top: 10px;
min-width: 214px; background-color: var(--bg-dark); border: 1px solid var(--brand-green);
border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,0.5); overflow: hidden;
padding: 6px 0; z-index: 2000;
}
/* invisible bridge so the menu doesn't close in the gap between trigger and panel */
.nav-dropdown-content::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-dropdown:hover .nav-dropdown-content,
.nav-dropdown.open .nav-dropdown-content,
.nav-dropdown:focus-within .nav-dropdown-content { display: block; }
.nav-links .nav-dropdown-content a {
display: flex; align-items: center; gap: 10px;
color: var(--text-light); text-decoration: none; font-size: 14px; font-weight: 500;
padding: 11px 18px; transition: background .2s, color .2s; border: none;
}
.nav-links .nav-dropdown-content a:hover { background-color: var(--brand-green); color: #fff; }
.nav-links .nav-dropdown-content a.active { color: var(--btn-orange); }
/* ── Mobile accordion (inside .mobile-menu) ── */
.mobile-menu { max-height: calc(100vh - 70px); overflow-y: auto; }
.mobile-dropdown { display: flex; flex-direction: column; border-bottom: 1px solid rgba(16,91,58,0.3); }
.mobile-dropbtn {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
width: 100%; background: none; border: none; cursor: pointer;
color: var(--text-light); font-family: inherit; font-size: 16px; font-weight: 500;
padding: 14px 0; transition: 0.3s;
}
.mobile-dropbtn .nav-caret { transition: transform .3s ease; flex-shrink: 0; }
.mobile-dropdown.open .mobile-dropbtn .nav-caret { transform: rotate(180deg); }
.mobile-dropbtn.active { color: var(--btn-orange); }
.mobile-submenu { display: none; padding-inline-start: 16px; padding-bottom: 4px; }
.mobile-dropdown.open .mobile-submenu { display: block; }
.mobile-submenu a {
display: block; color: var(--text-light); text-decoration: none;
font-size: 15px; font-weight: 500; padding: 12px 0;
border-bottom: 1px solid rgba(16,91,58,0.18); transition: 0.3s;
}
.mobile-submenu a:last-child { border-bottom: none; }
.mobile-submenu a:hover, .mobile-submenu a.active { color: var(--btn-orange); }
/* ===================================================================
TEMPORARY PRE-LAUNCH HIDES — v2, updated 2026-07-02
-------------------------------------------------------------------
A reversible visibility switch. Deleting this entire block (down to
"END PRE-LAUNCH HIDES") restores the site exactly as before. No HTML,
JavaScript, translations, data, or other CSS was changed or removed.
The B2C page is LIVE again — every link/button/card that points to
B2C.html has been restored. Only OFFERS / PACKAGES remain hidden:
(1) B2C page: the "Most Popular Programs" tour-package section.
(2) B2C page: buttons that scroll to that section (#tours).
(3) City pages: the "Suggested Programs" section.
(4) City pages: buttons that scroll to that section (#programs).
=================================================================== */
/* (1) The whole tour-packages section on B2C.html — heading, four
program cards, prices, and the "View All Programs" button.
display:none removes it from flow, so "Why Book with Dunya"
moves up with no empty gap. The mobile carousel script guards
itself and is harmless while the grid is hidden. */
.bc-progs { display: none !important; }
/* (2) Hero "Explore Tour Packages" and final-banner "Explore Tours"
buttons point at the hidden #tours section — hide them so no
button leads to an invisible target. Only B2C.html uses this
anchor. The neighbouring "Contact Us" / WhatsApp buttons stay. */
a[href="#tours"] { display: none !important; }
/* (3) The entire "Suggested Programs" section on every city page
(eyebrow, heading, subtitle, program cards, prices, badges,
buttons). */
body.city-v2 .cv-progs { display: none !important; }
/* (4) City-page buttons that scroll to the hidden section: the hero
"Explore Programs ➔" CTA and the attractions "See all …
programs →" link. The "City Guide" hero button stays. */
body.city-v2 a[href="#programs"] { display: none !important; }
/* ====================== END PRE-LAUNCH HIDES ====================== */