/* ==========================================================
   Safari Cabs – theme.css
   Loaded LAST on every page. Unifies container width, section
   spacing, hero, blog images and text readability.
   ========================================================== */
:root{
  --sc-container: 1240px;
  --sc-gutter: clamp(16px, 4vw, 24px);
  --sc-section-y: clamp(18px, 2.2vw, 28px);   /* was 48-80px: too much white space */
  --sc-ink: #0d1b2a;
  --sc-text: #2f3b48;
  --sc-muted: #56616e;
  --sc-blue-text: #0f6fa3;     /* readable blue for text on white (5.4:1) */
  --sc-orange-text: #a85f00;   /* readable orange for text on white */
}

/* ---------- 1. One container width everywhere ---------- */
.container, .osc-container, .osc-header-inner,
.sp-heading, .sp-carousel-wrap, .travel-expert-inner, .gallery-outer,
.wsa-title-outer, .wsa-inner, .svsvc-grid, .hiw-outer, .svc-slider-outer,
.cities-outer, .timeplace-grid, .discover-inner, .testi-slider-outer,
.blog-grid, .rwu-card, .why-section > *, .diff-section > *,
.ab-intro-grid, .ab-features-grid, .ab-howwork-grid, .ab-stats-grid,
.ab-process-grid, .ab-testi-grid,
.bl-grid, .bl-empty, .bd-inner, .sd-inner, .sv-grid, .sv-why-grid,
.contact-wrap, .map-wrap, .quick-bar-inner, .rt-section-inner,
.ctb-inner, .gal-wrap{
  max-width: var(--sc-container) !important;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}
.faq-list{ max-width: 860px; }            /* reading width for FAQ text */

/* ---------- 2. Equal section spacing ---------- */
.sp-section, .gallery-section, .wsa-section, .why-section, .svsvc-section,
.diff-section, .about-section, .hiw-section, .our-svc-section, .cities-section,
.timeplace-section, .discover-section, .testi-section, .blog-section,
.rwu-section, .faq-section,
.ab-section, .sv-section, .bl-section, .rt-section, .contact-section, .gal-wrap,
.ab-intro, .ab-features, .ab-howwork, .ab-process, .ab-testi, .ab-cta,
.sv-why, .sv-cta, .sd-wrap, .bd-wrap, .bk-main{
  padding-top: var(--sc-section-y) !important;
  padding-bottom: var(--sc-section-y) !important;
  padding-left: var(--sc-gutter) !important;
  padding-right: var(--sc-gutter) !important;
}
/* thin strips keep compact spacing */
.ratings-bar-section, .travel-expert-section{
  padding: 14px var(--sc-gutter) !important;
}
/* heading → content gap */
.sp-heading, .gallery-heading, .why-heading, .svsvc-heading, .diff-heading,
.hiw-heading, .svc-sec-title, .cities-sec-title, .rwu-heading, .faq-heading{
  margin-bottom: 16px !important;
}
.cities-sec-desc, .rwu-sub, .faq-sub{ margin-bottom: 20px !important; }

/* extra gaps: map strip, booking min-height */
.map-section{ padding-bottom: var(--sc-section-y) !important; }
.bk-main{ min-height: 0 !important; }
@media (max-width: 768px){
  .about-banner, .sv-banner, .sd-banner, .bl-banner, .bd-banner,
  .rt-banner, .contact-banner, .bk-banner, .gal-banner{ padding-top: 90px !important; padding-bottom: 32px !important; }
}

/* What Sets Safari Cabs Apart + How It Works: extra tight */
.wsa-section{ padding-top: 12px !important; padding-bottom: 16px !important; }
.wsa-title-outer{ margin-bottom: 12px !important; }
.hiw-section{ padding-top: 14px !important; padding-bottom: 18px !important; }
.hiw-section > img{ width: 48px !important; margin: 0 auto 4px !important; }
.hiw-heading{ margin-top: 0 !important; margin-bottom: 12px !important; }
.hiw-card{ padding: 20px 20px !important; gap: 10px !important; }

/* ---------- 3. Consistent section headings ---------- */
.sp-heading, .gallery-heading, .why-heading, .svsvc-heading, .diff-heading,
.hiw-heading, .svc-sec-title, .cities-sec-title, .rwu-heading, .faq-heading,
.ab-title, .wsa-title-inside{
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(26px, 3vw, 36px) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: var(--sc-ink) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-align: center;
}
.ab-title{ text-align: left; }

/* ---------- 4. Hero banner ---------- */
#hero{
  min-height: clamp(520px, 75vh, 680px) !important;
  padding: 110px var(--sc-gutter) 56px !important;
}
.hero-bg-vid{ background-position: center bottom !important; }
.hero-overlay{
  display: block !important;
  background: linear-gradient(90deg,
      rgba(8,20,36,.45) 0%, rgba(8,20,36,.55) 45%, rgba(8,20,36,.80) 100%) !important;
}
.hero-wrap{ gap: 48px !important; }
.hero-tagline{ font-size: 13px !important; letter-spacing: 1.5px !important; }
.hero-sub{ font-size: 16px !important; }
.hero-badges span{ font-size: 14px !important; }
.hero-title, .hero-sub, .hero-badges span{ text-shadow: 0 2px 12px rgba(0,0,0,.35); }

@media (max-width: 1024px){
  #hero{ min-height: 0 !important; padding: 96px var(--sc-gutter) 40px !important; }
  .hero-overlay{ background: rgba(8,20,36,.65) !important; }
}
@media (max-width: 768px){
  /* mobile: headline hidden, booking form sits right at the top */
  #hero{ padding: 16px 12px 24px !important; min-height: 0 !important; align-items: flex-start !important; }
  .hero-left{ display: none !important; }
  .hero-right{ order: 1 !important; max-width: 100% !important; }
  .hero-wrap{ gap: 0 !important; }
}

/* page banners (about, services, blog …) */
.about-banner, .sv-banner, .sd-banner, .bl-banner, .bd-banner,
.rt-banner, .contact-banner, .bk-banner, .gal-banner{
  padding: 105px var(--sc-gutter) 40px !important;
  background-position: center !important;
}

/* ---------- 5. Blog images ---------- */
.blog-img-wrap{ height: auto !important; aspect-ratio: 16 / 9; background: #e9eef4; }
.blog-img-wrap img{ width: 100%; height: 100%; object-fit: cover; }
.bl-card-img, .bl-card-img-placeholder{
  display: block; width: 100%; height: auto !important;
  aspect-ratio: 16 / 9; object-fit: cover; background: #e9eef4;
}
.bl-card-img-placeholder{ display: flex; align-items: center; justify-content: center; font-size: 40px; color: #9fb0c3; }
.bd-hero-img, .bd-hero-placeholder{
  width: 100%; height: auto !important; max-height: 480px;
  aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; display: block;
}
.bd-recent-thumb{ width: 72px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.bd-content img, .bd-body img{ max-width: 100%; height: auto; border-radius: 10px; }

/* ---------- 6. Readable text ---------- */
body{ color: var(--sc-text); -webkit-font-smoothing: antialiased; }
p{ line-height: 1.7; }

/* tiny labels (were 9–11px) */
.inp-label, .trip-sub, .te-small-label, .yr-txt, .asb-small,
.svsvc-feat-label, .svc-feat-label, .rating-count, .sp-price-label,
.hiw-step, .top-rated, .te-call-24, .osc-btn-callback{
  font-size: 12px !important;
}
.trip-main, .te-subtext, .te-call-label, .osc-mob-close{ font-size: 13px !important; }

/* body copy (was 12–12.5px) */
.svsvc-desc, .svc-card-desc, .city-routes p, .te-welcome,
.cities-sec-desc, .rwu-sub, .faq-sub, .blog-excerpt{
  font-size: 14.5px !important; line-height: 1.7 !important;
}
.city-routes strong{ font-size: 14px !important; }

/* low-contrast colours on light backgrounds */
.svsvc-heading, .svsvc-title, .hiw-step, .inp-label{ color: var(--sc-blue-text) !important; }
.rating-count, .svsvc-desc, .svc-card-desc, .cities-sec-desc,
.rwu-sub, .faq-sub, .diff-card p, .why-card p{ color: var(--sc-muted) !important; }
.te-small-label, .blog-label{ color: var(--sc-orange-text) !important; }
.blog-category{ background: #0f6fa3 !important; color: #fff !important; }
footer p, .osc-footer p, .osc-footer a, .osc-footer li{ color: rgba(255,255,255,.82); }

/* ---------- 7. Missing city photos: branded placeholder instead of blank ---------- */
.city-img-wrap{ background: linear-gradient(160deg, #1a3c6e 0%, #29abe2 100%); }

/* ---------- 8. Keyboard focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline: 3px solid #f5c800; outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- 9. Slider arrows OUTSIDE the cards (same as How It Works) ---------- */
.sc-arrow-shell{ position: relative; max-width: var(--sc-container); margin: 0 auto; }
.sc-arrow-shell .gallery-outer, .sc-arrow-shell .cities-outer{ max-width: 100% !important; }
.why-swiper-wrap{ padding-left: 0 !important; padding-right: 0 !important; }

.gallery-arrow, .cities-arrow, .sp-nav-btn, .why-swiper-btn{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 38px !important; height: 38px !important;
  border-radius: 50% !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.10) !important;
  color: #1a3c6e !important;
  font-size: 14px !important;
  display: flex !important; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5; padding: 0 !important;
  transition: all .2s;
}
.gallery-arrow:hover, .cities-arrow:hover, .sp-nav-btn:hover, .why-swiper-btn:hover{
  background: #1a3c6e !important; color: #fff !important; border-color: #1a3c6e !important;
}
.gallery-prev, .cities-prev, .sp-nav-prev, .why-swiper-prev{ left: -48px !important; right: auto !important; }
.gallery-next, .cities-next, .sp-nav-next, .why-swiper-next{ right: -48px !important; left: auto !important; }

/* tablet / mobile: arrows hide, swipe + dots work (same as How It Works) */
@media (max-width: 1024px){
  .gallery-arrow, .cities-arrow, .sp-nav-btn, .why-swiper-btn{ display: none !important; }
}
/* laptop screens: leave room so outside arrows never get cut off */
@media (min-width: 1025px) and (max-width: 1360px){
  .sc-arrow-shell, .sp-carousel-wrap, .why-swiper-wrap, .hiw-outer{
    max-width: calc(100% - 100px) !important; margin-left: auto !important; margin-right: auto !important;
  }
}
/* ==========================================================
   Sept 2026 updates
   ========================================================== */

/* 1) Hero tagline above the booking form — desktop only */
.hero-tagline-form{ display:none; }
@media (min-width: 1025px){
  .hero-left .hero-tagline{ display:none; }
  .hero-tagline-form{ display:block; text-align:center; margin:0 0 12px !important;
    text-shadow:0 2px 10px rgba(0,0,0,.45); }
}

/* 2) Explore Our Services title + "Sets Safari Cabs" highlight — #29ABE2 */
.svsvc-heading{ color:#29ABE2 !important; }
.diff-heading span{ color:#29ABE2 !important; text-decoration-color:#29ABE2 !important; }
.svsvc-title{ color:#29ABE2 !important; }

/* 3) Service card icon — half on the image, half below it */
.svsvc-img-wrap{ overflow:visible !important; }
.svsvc-img-wrap > img{ border-radius:12px 12px 0 0; }
.svsvc-badge{ bottom:-26px !important; right:18px !important; width:52px !important; height:52px !important;
  z-index:3; border:3px solid #fff; box-shadow:0 6px 16px rgba(0,0,0,.18) !important; }
.svsvc-body{ padding-top:34px !important; }

/* 4) Section-title car icon bigger, less space before title */
.hiw-section > img, .our-svc-section > img, .cities-section > img, .rwu-icon{
  width:110px !important; margin:0 auto 2px !important;
}
.hiw-heading, .svc-sec-title, .cities-sec-title, .rwu-heading{ margin-top:0 !important; }

/* 5) Testimonials */
.testi-our-title{ font-family:'Playfair Display',serif; font-size:clamp(20px,2.4vw,26px); font-weight:800;
  color:#f5a623; text-align:center; margin:0 0 22px; }
.testi-our-title::after{ content:''; display:block; width:56px; height:3px; background:#f5a623;
  border-radius:3px; margin:10px auto 0; }
.testi-summary{ margin-bottom:32px !important; }
.testi-track-wrap{ padding:8px 0 !important; }
.testi-card{ flex-shrink:0; }

/* 6 + 7) Load More / View More buttons */
.sc-more-wrap{ text-align:center; margin-top:26px; }
.sc-more-btn{ text-decoration:none; display:inline-flex; align-items:center; gap:8px; padding:12px 30px; border-radius:50px;
  background:#29ABE2; color:#fff; border:none; font-family:'Lora',serif; font-weight:700; font-size:14.5px;
  cursor:pointer; box-shadow:none; transition:transform .2s, background .2s; }
.sc-more-btn.is-open{ background:#CF3425; }
.sc-more-btn:hover{ background:#1a8fc2; }
.sc-more-btn.is-open:hover{ background:#a92a1e; }
.sc-more-btn:hover{ transform:translateY(-2px); }

/* 9) Download app section — fill empty desktop side space */
.app-side{ display:none; }
@media (min-width: 1100px){
  .ratings-bar-inner{ max-width:1240px !important; display:grid; grid-template-columns:1fr minmax(0,780px) 1fr;
    gap:28px; align-items:center; }
  .app-side{ display:flex; flex-direction:column; gap:14px; }
  .app-side-item{ display:flex; align-items:center; gap:12px; background:#fff; border-radius:14px;
    padding:12px 16px; box-shadow:0 4px 18px rgba(15,50,90,.07); border:1px solid #e6eef7; }
  .app-side-left .app-side-item{ flex-direction:row-reverse; text-align:right; }
  .app-side-ic{ width:40px; height:40px; border-radius:50%; background:#e8f6fd; color:#29ABE2;
    display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:16px; }
  .app-side-item strong{ display:block; font-size:13.5px; color:#111; }
  .app-side-item small{ display:block; font-size:11.5px; color:#667; margin-top:2px; }
}

/* Special Package — show full image, no cropping */
.sp-img-wrap{ height:auto !important; aspect-ratio:auto !important; background:transparent !important; }
.sp-img-wrap img{ width:100% !important; height:auto !important; object-fit:contain !important; }

/* ===== Custom changes ===== */
/* Header phone number bold (desktop + mobile) */
.osc-topbar-phone, .osc-topbar-phone span,
.mob-phone-big, .mob-phone-big span,
.osc-topbar-mob-row1 .mob-phone-big span{
  font-family:'Montserrat', Arial, sans-serif !important;
  font-weight:900 !important;
}
/* FAQ red question mark */
.faq-qmark{ color:#e53935 !important; font-weight:900; }
/* Download The Safari App heading */
.app-dl-heading{
  text-align:center; font-family:'Playfair Display', Georgia, serif;
  font-weight:800; font-size:clamp(20px,2.4vw,28px); color:#1a1a1a; margin:0 0 16px;
}
/* Mobile: ALL section titles same size as "What Sets Safari Cabs Apart?" + single line */
@media (max-width:768px){
  .wsa-title-inside, .sp-heading, .gallery-heading, .why-heading, .svsvc-heading,
  .diff-heading, .hiw-heading, .svc-sec-title, .cities-sec-title, .rwu-heading,
  .faq-heading, .app-dl-heading, .ab-title{
    font-size:min(16px, 4.2vw) !important;
    line-height:1.3 !important;
    white-space:nowrap !important;
    letter-spacing:0 !important;
    padding-left:4px !important; padding-right:4px !important;
    overflow:visible !important;
  }
  .wsa-title-inside{ text-transform:uppercase !important; }
}

/* Hero phone box: content vertically centered (label removed) */
.iti-wrap .iti{ display:flex !important; align-items:center; }
.iti-wrap .iti__flag-container{ top:0 !important; bottom:0 !important; padding:0 !important; display:flex; align-items:stretch; }
.iti-input{ padding-top:14px !important; padding-bottom:14px !important; }
.iti-wrap .iti__selected-flag{ height:100% !important; padding:0 8px 0 12px !important; display:flex !important; align-items:center !important; background:#eef0f2 !important; border-radius:10px 0 0 10px; }

/* Download App: "(4.2K+ Reviews)" ek hi line me number ke saath */
.rating-count{ white-space:nowrap !important; }
@media (max-width:768px){
  .rating-count{ font-size:8.5px !important; letter-spacing:0 !important; }
  .rating-item{ gap:5px !important; min-width:0; }
}
/* Hero phone field: grey box covers its own border, blue line only around number part, blue line all round on focus, bold number */
.iti-wrap .iti__flag-container{ top:0 !important; bottom:0 !important; left:0 !important; z-index:2; }
.iti-wrap .iti__selected-flag{ border-radius:10px 0 0 10px !important; border-right:1.5px solid #e2e8f0; }
.iti-wrap:focus-within .iti__selected-flag{ border-right-color:#29ABE2; }
.iti-input{ font-weight:700 !important; letter-spacing:.5px; }
.iti-input::placeholder{ font-weight:400; letter-spacing:0; }
/* ==========================================================
   Oct 2026 updates
   ========================================================== */

/* 1) Header: phone aur Request Callback button ke beech ki white line hatao (desktop) */
@media (min-width: 1025px){
  .osc-topbar-phone{ border-right:none !important; }
}

/* 2) Hero: form ke upar wali yellow line badi + form ki poori width me fit, background shade hatao */
@media (min-width: 1025px){
  .hero-tagline-form{
    display:block !important;
    width:100%;
    font-size:24px !important;
    letter-spacing:4px !important;
    text-align:justify !important;
    text-align-last:justify !important;
    -moz-text-align-last:justify;
    padding:0 2px;
    box-sizing:border-box;
    white-space:nowrap;
  }
}
.hero-overlay{ display:none !important; background:transparent !important; }
.hero-title, .hero-sub, .hero-badges span, .hero-tagline-form{ text-shadow:none !important; }

/* 3a) One Way / Round Trip: active = navy, inactive = yellow (click par colour swap) */
#ow-btn, #rt-btn{ background:#f5c800 !important; }
#ow-btn .trip-main, #ow-btn .trip-sub,
#rt-btn .trip-main, #rt-btn .trip-sub{ color:#111 !important; }
#ow-btn.active, #rt-btn.active{ background:#0C4477 !important; }
#ow-btn.active .trip-main, #ow-btn.active .trip-sub,
#rt-btn.active .trip-main, #rt-btn.active .trip-sub{ color:#fff !important; }

/* 3b) Saare form fields (From, To, Date, Time, Number) ki border blue, hover par sirf yellow */
.booking-card .inp-field{ border:1.5px solid #29ABE2 !important; box-shadow:none !important; }
.booking-card .inp-field:hover{ border-color:#f5c800 !important; box-shadow:none !important; }
.booking-card .inp-field:focus,
.booking-card .inp-field:focus-visible{ border-color:#29ABE2 !important; outline:none !important; box-shadow:none !important; }
.booking-card .inp-field:focus:hover{ border-color:#f5c800 !important; }

/* 3c) Number field: grey +91 box bhi blue line ke andar */
.iti-wrap .iti__flag-container{ top:1.5px !important; bottom:1.5px !important; left:1.5px !important; }
.iti-wrap .iti__selected-flag{ border-radius:8.5px 0 0 8.5px !important; border-right:none !important; }

/* 4) Call Expert button: halki black outline */
.te-call-btn{ border:1px solid rgba(0,0,0,.18) !important; }

/* 5) What Sets Safari Cabs Apart: icon circle ka dark outer ring halka */
.diff-icon{ border:2px solid rgba(0,0,0,.08) !important; outline:none !important;
  box-shadow:0 0 0 3px rgba(0,0,0,.04) !important; }
.diff-icon i{ font-weight:900; opacity:.95; text-shadow:none !important; }

/* 6) Most Booked Cities: mobile me ek time pe sirf ek card */
@media (max-width:768px){
  .cities-outer{ overflow:hidden !important; touch-action:pan-y; }
  .cities-track{ gap:0 !important; }
  .city-card{ width:100% !important; min-width:100% !important; flex:0 0 100% !important; }
  .city-card:hover{ transform:none !important; }
}

/* 7) Our Prompt Services + What Our Riders Say dots — #29ABE2 */
.svc-dot.active, .testi-dot.active{ background:#29ABE2 !important; }
@media (max-width:768px){
  .testi-dot{ background:rgba(41,171,226,.35) !important; }
  .testi-dot.active{ background:#29ABE2 !important; }
}

/* 8) Back-to-top button: reference jaisa — top-left & bottom-right sharp, baaki do bade curve, gradient, no glow */
#backToTop{
  border-radius:0 16px 0 16px !important;
  box-shadow:none !important;
}

/* ===== Oct 2026 — round 2 ===== */

/* Hero tagline above form (desktop): justify hatao, sirf bada font */
@media (min-width: 1025px){
  .hero-tagline-form{
    text-align:center !important;
    text-align-last:auto !important;
    -moz-text-align-last:auto;
    font-size:22px !important;
    letter-spacing:2px !important;
    white-space:normal;
  }
}

/* What Sets Safari Cabs Apart — circles ka dark black border halka */
.wsa-circle{
  border:1.5px solid rgba(0,0,0,.15) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.08) !important;
}

/* Testimonials — saara yellow #29ABE2 */
.testi-header .testi-label,
.testi-header h2 span,
.testi-stat .stat-num,
.testi-our-title,
.testi-stars i,
.testi-city i,

.testi-our-title::after,
.testi-our-title span::after{ background:#29ABE2 !important; }
.testi-avatar{ border-color:#29ABE2 !important; }
.testi-avatar-init{ background:linear-gradient(135deg,#29ABE2,#1a8fc2) !important; }
.testi-arrow:hover:not(:disabled){ background:#29ABE2 !important; border-color:#29ABE2 !important; }

/* From Our Travel Blog — #29ABE2 */
.blog-header .blog-label,
.blog-header h2 span,
.blog-meta span i,
.blog-read-more:hover{ color:#29ABE2 !important; }
.blog-category{ background:#29ABE2 !important; }

/* ===== Oct 2026 — round 3: testimonials text colour (stronger selectors) ===== */
section.testi-section .testi-header .testi-label,
section.testi-section .testi-header h2 span,
section.testi-section .testi-summary .testi-stat .stat-num,
section.testi-section h3.testi-our-title,
section.testi-section .testi-card .testi-stars i,
section.testi-section .testi-card .testi-city i{ color:#29ABE2 !important; background:none !important; }
section.testi-section h3.testi-our-title > span{ color:#fff !important; background:none !important; }
/* selection highlight halka rakho taaki blue patti na dikhe */
section.testi-section ::selection{ background:rgba(255,255,255,.18); color:inherit; }

/* ===== Oct 2026 — round 4: hover par yellow line field ke BAHAR (blue line ke upar) ===== */
.booking-card .inp-field,
.booking-card .inp-field:hover,
.booking-card .inp-field:focus,
.booking-card .inp-field:focus:hover{
  border-color:#29ABE2 !important;
  outline:none !important;
}
.booking-card .input-wrap:hover .inp-field,
.booking-card .iti-wrap:hover .inp-field{
  box-shadow:0 0 0 2.5px #f5c800 !important;
}
.booking-card .inp-field:focus-visible{ outline:none !important; }

/* ===== round 5: WSA icon circle — black outline wapas, par patli & halki ===== */
.wsa-circle{ border:1px solid rgba(0,0,0,.55) !important; }