/* ==========================================================================
   Sango Taxi — redesign layer
   Loaded after sango-polish.css. This is the deliberate visual redesign
   pass: unifying every card family under one language, refining spacing
   and hierarchy site-wide. Brand palette (rust/cream/black) is kept as-is
   per direction; structure and functional hooks (IDs, form fields, JS
   selectors) are untouched — only presentation changes.
   ========================================================================== */

/* ==========================================================================
   Section spacing (site-wide)
   ========================================================================== */

/* ".section-space"/".section-space-two" drive the top/bottom padding for
   most major sections site-wide (about, services, download-app,
   testimonials, etc.) via these two custom properties, at 120px/118px -
   very generous, and the direct cause of the large dead gap between the
   page banner and the About page's first section. Overriding the
   variables tightens every section that uses them in one place, instead
   of patching each section individually. */
:root {
  --section-space: 80px;
  --section-space2: 78px;
}
@media (max-width: 767px) {
  .section-space,
  .section-space-two {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}
@media (max-width: 575px) {
  .section-space,
  .section-space-two {
    padding-top: 52px;
    padding-bottom: 52px;
  }
}

/* ==========================================================================
   Topbar contrast + polish
   ========================================================================== */

/* The template ships two topbar variants: a light one (".topbar--two",
   white background) and a dark one (".topbar", rust background - the one
   this site actually uses). The dark variant's icons/text were never
   given their own color rule; they fall back to the same near-black
   (#141414 / #000000) used by the light variant, which is illegible on
   the dark rust background (measured contrast ~2.4:1, well under the
   4.5:1 minimum for body text). This is the actual cause of the topbar
   being "hard to read" - not a subjective styling issue. */
.topbar__info li {
  color: var(--cityride-white, #fff);
}
.topbar__info__icon {
  color: var(--cityride-white, #fff);
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}
li:hover .topbar__info__icon {
  color: var(--cityride-base, #832e19);
  background-color: var(--cityride-white, #fff);
  border-color: var(--cityride-white, #fff);
}
.topbar__login__icon,
.topbar__login__inner {
  color: var(--cityride-white, #fff);
}
.topbar__login a:hover {
  color: rgba(255, 255, 255, 0.75);
}
/* Subtle depth instead of a flat color block, plus a hairline seam so the
   dark topbar and white nav below don't meet as a hard, abrupt edge. */
.topbar {
  background-image: linear-gradient(135deg, #8f3420 0%, var(--cityride-base, #832e19) 60%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Language dropdown panel: the base template gives it no shadow, no
   radius, and no z-index. The "Book a Taxi" button in the header row
   below carries an explicit z-index:1, which - with the dropdown stuck
   at the default (auto/0) - let the button render on top of the open
   panel instead of underneath it, so they visually collided. Elevate the
   panel properly and give it the same floating-card treatment used for
   every other dropdown/menu on the site. */
.topbar__language .bootstrap-select .dropdown-menu {
  z-index: 999;
  min-width: 140px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 16px 34px rgba(0, 0, 0, 0.18);
}
.topbar__language .bootstrap-select .dropdown-menu > li > a {
  padding: 10px 16px;
}
/* The dropdown's caret uses the same near-black meant for a light
   background; barely visible against the dark rust toggle. */
.topbar__language .bootstrap-select > .dropdown-toggle::after {
  border-color: var(--cityride-white, #fff);
}

/* ==========================================================================
   Header spacing
   ========================================================================== */

/* Each nav link (Home/About/Services/Contact Us) carries 39.5px of padding
   above and below its text - 79px total, clearly sized for a much taller
   header than this one uses. The outer .main-header__inner padding was
   already tightened to 18px earlier, but this leftover per-item padding
   is now the dominant factor: at 109px tall, the nav is taller than both
   the logo (62px) and the "Book a Taxi" button (48px) combined with it in
   the same flex row, so centering everything against the nav's height is
   what was producing the large gaps above/below the whole header row. */
.main-menu .main-menu__list > li {
  padding: 10px 0;
}

/* Inner page banners ("Welcome Message", "About Us", etc.) carry
   106px/112px of top/bottom padding in the base template - sized for a
   much bigger hero. Cut down to a slim, modern breadcrumb bar site-wide
   since every inner page uses this same .page-header component. */
.page-header {
  padding-top: 34px;
  padding-bottom: 38px;
}
@media (max-width: 991px) {
  .page-header {
    padding-top: 30px;
    padding-bottom: 34px;
  }
}
@media (max-width: 575px) {
  .page-header {
    padding-top: 26px;
    padding-bottom: 30px;
  }
}

/* ---- Service cards ("We're Partner Of Your Business"): the image has
   object-fit:cover but no CSS height, so each photo renders at its own
   raw native pixel height (540px, 540px, 1200px for the three source
   files) instead of being cropped to a shared size. Two of the three
   happened to share a similar native height so the bug wasn't obvious;
   the Airport Transport photo's 1200px native height blew its card up to
   nearly double the others'. Give every service card image a fixed,
   shared height so object-fit:cover can actually do its job. ---- */
.service-card__image img {
  height: 260px;
  display: block;
}

/* ---- Contact page: the exact same bug. "Our Address" and "Hot: ..." info
   cards use a 1600x1200 photo while the email card uses a 720x540 one -
   same object-fit:cover-with-no-height gap, so two of the three cards
   render nearly twice as tall as the middle one. The "Get In Touch" photo
   next to the form has the identical gap. ---- */
.contact-top__item__thumb img {
  height: 220px;
  display: block;
}
.contact-one__image img {
  height: 480px;
  display: block;
}

/* ---- Taxi rate cards ("Our Flexible Taxi Rates"): the last card family
   still flat and square while every other card (service, testimonial,
   booking form) is rounded and shadowed. Bring it into the same family. ---- */
.taxi-card {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.18);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.taxi-card:hover {
  transform: translateY(-8px);
  box-shadow: 0px 20px 50px rgba(131, 46, 25, 0.28);
}
/* Cards sit in a Bootstrap row (align-items:stretch by default, so the
   column stretches to the row's tallest item) but the card itself never
   filled that stretched column - so a card with a longer category name or
   description just sat shorter at the top, leaving empty space below it
   while neighboring cards looked taller. Fill the column, and pin the
   "book now" button to the same bottom position regardless of how much
   text is above it. */
.taxi-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.taxi-card__inner {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.taxi-card__content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.taxi-card__content .cityride-btn {
  margin-top: auto;
}

/* ---- Why Choose Us tab panel: the only remaining flat, unshadowed
   rectangle among an otherwise all-rounded, all-elevated card system
   (service cards, testimonials, taxi cards, booking form). ---- */
.why-choose-one__item {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.08);
}

/* Tab buttons ("Car Booking" / "Pathfinder" / "Pickup Price" / "Transport"):
   plain boxy rectangles, and each has a decorative clip-path triangle
   (an inner <span>) pointing down to "connect" it to the panel below.
   Real selector is ".why-choose-one .tab-buttons button" (element
   selector, not the .tab-btn class alone) - give them a branded pill
   shape and drop the now-redundant connector triangle. */
.why-choose-one .tab-buttons {
  gap: 10px;
}
.why-choose-one .tab-buttons button {
  border-radius: 999px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.why-choose-one .tab-buttons button:hover {
  transform: translateY(-2px);
}
.why-choose-one .tab-buttons button span {
  display: none;
}

/* ---- Contact page: info cards (Address/Email/Phone) have a shadow but
   no radius; the "Get In Touch" form has neither. Bring both into the
   same rounded-card family as the rest of the site. ---- */
.contact-top__item {
  border-radius: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-top__item:hover {
  transform: translateY(-6px);
  box-shadow: 0px 14px 40px rgba(131, 46, 25, 0.16);
}
.contact-one__form {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.08);
}

/* ---- Welcome page: the message panel (photo + text) is a plain bordered
   box, no radius/shadow. Same rounded-card treatment. ---- */
.driver-details__inner {
  border: none;
  border-radius: 20px;
  box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.08);
  transition: box-shadow 350ms ease;
}
.driver-details__inner:hover {
  box-shadow: 0px 20px 55px rgba(0, 0, 0, 0.14);
}

/* ---- Custom cursor ring/dot (the mouse-follower effect): a desktop-only
   feature with no rule hiding it on mobile. It only moves on "mousemove",
   which never fires on touch devices, so it sits frozen at its default
   fixed position (top-left corner, 0,0) as a permanent stray circle for
   every mobile/tablet visitor. Hide it wherever there's no real mouse. ---- */
@media (max-width: 991px), (hover: none) {
  .custom-cursor__cursor,
  .custom-cursor__cursor-two {
    display: none;
  }
}

/* ---- About page "emergency call us" avatar: the circular container never
   had overflow:hidden, and the image rule set width:100% but no height —
   harmless while the <img> had no HTML width/height attributes (browser
   used the container's own aspect), but once explicit width/height
   attributes were added (for the sitewide CLS fix), the browser started
   using the real 864x864 file dimensions for height, stretching this into
   a 68px-wide, 864px-tall sliver spilling into the section below. ---- */
.about-four__author__man {
  overflow: hidden;
}
.about-four__author__man img {
  height: 100%;
}

/* ==========================================================================
   Header dropdown menus (About / Services)
   ========================================================================== */

/* Contrast bug: hovered/current dropdown items get a rust background with
   near-black (#141414) text - the same ~2:1 contrast failure fixed earlier
   on the primary buttons, just in a different component. */
.main-menu .main-menu__list li ul li.current > a,
.main-menu .main-menu__list li ul li:hover > a {
  color: var(--cityride-white, #FFFFFF);
}

/* Chevron on nav items that actually have a dropdown (Home and Contact Us
   share the same base markup/classes but have no submenu, so target only
   items with a real nested <ul> rather than assuming from the class name).
   Rotates to point up while the menu is open, on hover or keyboard focus. */
.main-menu .main-menu__list > li.dropdown:has(> ul) > a::after {
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  font-size: 11px;
  margin-left: 7px;
  transition: transform 300ms ease;
}
.main-menu .main-menu__list > li.dropdown:has(> ul):hover > a::after,
.main-menu .main-menu__list > li.dropdown:has(> ul):focus-within > a::after {
  transform: rotate(180deg);
}

/* Panel: rounded corners, a brand-colored top accent, and a softer, more
   "floating" shadow instead of the flat default. */
.main-menu .main-menu__list li ul {
  border-radius: 14px;
  border-top: 3px solid var(--cityride-base, #832e19);
  box-shadow: 0px 20px 50px rgba(20, 20, 20, 0.14);
  padding: 12px;
}

/* Items: contained pill-style highlight instead of an edge-to-edge block -
   reads as a deliberate, modern menu rather than a stock template default.
   More generous height per item (was a tight 8px 20px) so the panel feels
   substantial rather than cramped, plus a leading arrow that slides into
   view on hover/current to reinforce direction of travel. */
.main-menu .main-menu__list li ul li {
  margin-bottom: 4px;
}
.main-menu .main-menu__list li ul li:last-child {
  margin-bottom: 0;
}
.main-menu .main-menu__list li ul li > a {
  position: relative;
  padding: 13px 18px 13px 30px;
  font-size: 13.5px;
  border-radius: 8px;
  margin-bottom: 0;
  transition: background-color 300ms ease, color 300ms ease, padding-left 300ms ease;
}
.main-menu .main-menu__list li ul li > a::before {
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 300ms ease, left 300ms ease;
}
.main-menu .main-menu__list li ul li.current > a::before,
.main-menu .main-menu__list li ul li:hover > a::before {
  opacity: 1;
  left: 16px;
}
.main-menu .main-menu__list li ul li > a::after {
  display: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* "About" column (logo, blurb, social icons) was top-aligned within a row
   that stretches to match its taller neighbors (Quick Links / Recent Posts
   / Contact Us both run longer), leaving it visually pinned to the top
   instead of sitting level with the rest. Center it in the available
   height instead. */
.footer-widget--about {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Social icons: replaced the outdated Twitter bird with the current X
   logo (inline SVG - Font Awesome 5 here predates the 2023 rebrand and
   has no X glyph). Rounded to match the site's card language, and each
   platform now lifts into its own real brand color on hover instead of a
   generic white - Facebook blue, X black, LinkedIn blue, YouTube red. */
.footer-widget__social a,
.mobile-nav__social a,
.sidebar-one__social a {
  border-radius: 10px;
}

/* Social icons now show their official brand color by default, not just
   on hover - a visitor scanning the footer should immediately recognize
   Facebook/X/LinkedIn/YouTube by color, the same way those brands present
   themselves everywhere else. Hover becomes a lift + matching glow
   instead of a color reveal, since the color is already there.
   (Selectors repeat ".footer-widget__social a" so they outweigh the base
   template's own ".footer-widget__social a" rule, which would otherwise
   win on specificity and keep these transparent.) */
.footer-widget__social a.footer-widget__social__facebook {
  background-color: #1877F2;
  border-color: #1877F2;
  color: var(--cityride-white, #FFFFFF);
}
.footer-widget__social a.footer-widget__social__facebook:hover {
  transform: translateY(-4px);
  box-shadow: 0px 10px 22px rgba(24, 119, 242, 0.45);
}
.footer-widget__social a.footer-widget__social__x {
  background-color: #000000;
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--cityride-white, #FFFFFF);
}
.footer-widget__social a.footer-widget__social__x:hover {
  transform: translateY(-4px);
  box-shadow: 0px 10px 22px rgba(255, 255, 255, 0.25);
}
.footer-widget__social a.footer-widget__social__linkedin {
  background-color: #0A66C2;
  border-color: #0A66C2;
  color: var(--cityride-white, #FFFFFF);
}
.footer-widget__social a.footer-widget__social__linkedin:hover {
  transform: translateY(-4px);
  box-shadow: 0px 10px 22px rgba(10, 102, 194, 0.45);
}
.footer-widget__social a.footer-widget__social__youtube {
  background-color: #FF0000;
  border-color: #FF0000;
  color: var(--cityride-white, #FFFFFF);
}
.footer-widget__social a.footer-widget__social__youtube:hover {
  transform: translateY(-4px);
  box-shadow: 0px 10px 22px rgba(255, 0, 0, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .footer-widget__social a.footer-widget__social__facebook:hover,
  .footer-widget__social a.footer-widget__social__x:hover,
  .footer-widget__social a.footer-widget__social__linkedin:hover,
  .footer-widget__social a.footer-widget__social__youtube:hover {
    transform: none;
  }
}

/* ==========================================================================
   Section backgrounds
   ========================================================================== */

/* Testimonials: the flattest, most textureless section on the page - every
   neighboring section has a photo, gradient, or pattern layer, but this one
   is plain solid white. A CSS-only dot grid (no extra image request) in the
   brand color at very low opacity, so it reads as texture rather than
   competing with the testimonial cards sitting on top of it. */
.testimonials-one {
  background-image: radial-gradient(rgba(131, 46, 25, 0.08) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
}

/* ==========================================================================
   Booking form arrangement
   ========================================================================== */

/* "Select Your Service" only shows one field (Booking Type) until a type
   requiring a vehicle category is chosen, at which point Car Category
   appears beside it. With only one grid item, the auto-fit grid stretches
   it to the full ~1100px form width - much wider than every paired field
   elsewhere in the form, and visually unbalanced. Cap it to a reasonable
   width while the row is in its single-field state; this reacts purely to
   the existing inline display:none the JS already toggles, so it releases
   itself automatically once Car Category becomes visible - no JS touched. */
.form-row:has(> #car_category_container[style*="display:none"])
  > .form-group-enhanced:not(#car_category_container) {
  max-width: 400px;
}

/* ==========================================================================
   Hero welcome copy
   ========================================================================== */

/* The hero jumps straight from the headline to the "Book a Taxi" button -
   no line explaining what the service actually is, so a first-time visitor
   has to scroll past the whole booking form before reaching any real
   description (in the About section). cityride.css already has a reveal
   animation defined for a ".main-slider-one__text" element (matching the
   title/button's staggered fade-in), but the base typography was never
   written and the element was never added to the markup - it's a stub
   left over from the template. Give it real styling now that it has
   content. */
.main-slider-one__text {
  opacity: 0;
  transform: translateX(-30px);
  transition: transform 1500ms ease, opacity 1500ms ease;
  transition-delay: 1450ms;
  max-width: 480px;
  margin-bottom: 32px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 17px;
  line-height: 1.6;
}

/* ==========================================================================
   Welcome message page
   ========================================================================== */

/* The "Welcome Message" page reuses the template's driver-profile layout
   (photo + name + paragraph text), which reads as a plain bio block rather
   than an executive welcome note from the company. Editorial treatment -
   section intro, large portrait with a fixed editorial crop, strong name
   typography, and value-prop chips pulled straight from the existing copy
   - so the same content reads as an intentional, premium profile rather
   than a generic bio card. */
.driver-details {
  background-image: radial-gradient(rgba(131, 46, 25, 0.035) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
}

/* .section-space-top reserves 120px of top padding, sized for a page
   that opens straight into this section. Stacked on top of the page
   banner's own bottom padding, that left a huge dead gap before "Our
   People" ever appeared. (This section is reused as-is, minus the photo,
   for the Our Vision / Our Mission page - the tighter spacing benefits
   that page too.) */
.driver-details.section-space-top {
  padding-top: 40px;
}
@media (max-width: 767px) {
  .driver-details.section-space-top {
    padding-top: 32px;
  }
}
@media (max-width: 575px) {
  .driver-details.section-space-top {
    padding-top: 28px;
  }
}

/* ---- Section intro ("Our People") ---- */
.driver-details__section-intro {
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
}
.driver-details__section-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cityride-base, #832e19);
  margin-bottom: 8px;
}
.driver-details__section-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cityride-black, #141414);
  margin-bottom: 12px;
}
.driver-details__section-text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--cityride-text, #838383);
  margin: 0;
}

/* ---- Editorial portrait: fixed 3:4 crop so every team photo (regardless
   of its native resolution) renders at the same consistent ratio, biased
   toward the top so heads never get cropped off. ---- */
.driver-details__image {
  position: relative;
}
.driver-details__image__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0px 20px 50px rgba(20, 20, 20, 0.12);
}
.driver-details__image__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  transition: transform 400ms ease;
}
.driver-details__inner:hover .driver-details__image__frame img {
  transform: scale(1.03);
}

/* Identity caption overlapping the bottom of the portrait - name, title,
   and social links live directly on the photo, so the person and their
   identity read as one connected unit instead of two separate blocks. A
   bottom-up gradient keeps the white text legible over any photo. */
.driver-details__image__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 56px 24px 22px;
  background: linear-gradient(to top, rgba(10, 8, 6, 0.88) 0%, rgba(10, 8, 6, 0.55) 55%, rgba(10, 8, 6, 0) 100%);
}
/* Thin brand-colored accent beside the frame rather than a heavy border -
   lives on the unclipped outer wrapper so it can peek past the frame's
   own overflow:hidden edge. */
.driver-details__image::after {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: -14px;
  width: 5px;
  border-radius: 5px;
  background-color: var(--cityride-base, #832e19);
}

@media (prefers-reduced-motion: reduce) {
  .driver-details__image__frame img,
  .driver-details__inner {
    transition: none !important;
  }
  .driver-details__inner:hover .driver-details__image__frame img {
    transform: none;
  }
}

/* "A Message From Muheto Alexis" eyebrow, now a standalone label leading
   the message column (name/title live on the photo instead). */
.driver-details__eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cityride-base, #832e19);
  margin-bottom: 18px;
}

/* Name + title, set in white over the photo's gradient scrim. */
/* Scoped to the photo caption specifically - the Mission & Vision page
   reuses ".driver-details__name" for its "Our Vision"/"Our Mission"
   headings on a plain white card, so a bare ".driver-details__name" rule
   here would make those headings white-on-white. */
.driver-details__image__caption .driver-details__name {
  font-size: 28px;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  color: var(--cityride-white, #fff);
}
.driver-details__image__caption .driver-details__designation {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.04em;
}

/* Compact icon-only circular buttons for the photo caption - frosted
   glass so they read clearly over any photo tone, filling brand-rust
   with a white icon on hover/focus. */
.driver-details__image__social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
/* Extra ".driver-details" prefix keeps specificity above the base
   template's ".driver-details .social-links a" rule (which this markup
   still matches, since it also carries the plain "social-links" class),
   so these overrides win regardless of source order. */
.driver-details .driver-details__image__social a {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--cityride-white, #fff);
  font-size: 14px;
}
.driver-details .driver-details__image__social a:hover,
.driver-details .driver-details__image__social a:focus-visible {
  background-color: var(--cityride-base, #832e19);
  border-color: var(--cityride-base, #832e19);
  color: var(--cityride-white, #fff);
}
.driver-details .driver-details__image__social a:focus-visible {
  outline: 2px solid var(--cityride-white, #fff);
  outline-offset: 2px;
}

.driver-details__lead {
  position: relative;
  font-family: var(--cityride-heading-font, "Plus Jakarta Sans", sans-serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--cityride-black, #141414);
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  padding-left: 40px;
  max-width: 34ch;
}
.driver-details__quote-icon {
  position: absolute;
  left: 0;
  top: 3px;
  font-size: 24px;
  color: rgba(131, 46, 25, 0.25);
}

.driver-details__highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 6px;
  padding: 0;
  list-style: none;
}
.driver-details__highlights li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background-color: var(--cityride-white2, #F4F1EA);
  font-size: 14px;
  font-weight: 600;
  color: var(--cityride-black, #141414);
  transition: all 400ms ease;
}
.driver-details__highlights li i {
  color: var(--cityride-base, #832e19);
  font-size: 14px;
}
.driver-details__highlights li:hover {
  background-color: var(--cityride-base, #832e19);
  color: var(--cityride-white, #fff);
  transform: translateY(-2px);
}
.driver-details__highlights li:hover i {
  color: inherit;
}

.driver-details__signoff {
  font-weight: 700;
  color: var(--cityride-base, #832e19);
}

/* Visible, on-brand focus ring for the contact links (the photo's social
   icons get their own white-outline treatment above, since a rust
   outline would be low-contrast against the photo). */
.driver-details__info a:focus-visible {
  outline: 2px solid var(--cityride-base, #832e19);
  outline-offset: 2px;
}

@media (max-width: 991px) {
  .driver-details__image::after {
    display: none;
  }
  .driver-details__section-title {
    font-size: 26px;
  }
}

@media (max-width: 575px) {
  .driver-details__image__caption {
    padding: 40px 18px 18px;
  }
  .driver-details__image__caption .driver-details__name {
    font-size: 24px;
  }
  .driver-details__lead {
    font-size: 22px;
    padding-left: 32px;
  }
  .driver-details__quote-icon {
    font-size: 20px;
  }
  .driver-details__section-title {
    font-size: 22px;
  }
}

/* ==========================================================================
   Mission & Vision page
   ========================================================================== */

/* This page reuses the same .driver-details/.driver-details__inner shell
   as the Welcome Message page, but with two plain text blocks instead of
   a photo + message. The base template's grid (".driver-details__inner")
   is fixed at "391px auto" - sized for a photo column - so on this page
   it silently squashed "Our Vision" into a narrow 391px column while
   "Our Mission" stretched across the rest. Give the two-pillar variant
   its own equal-width grid, an icon per pillar, and a divider between
   them instead of borrowing the photo layout's proportions. */
.driver-details__inner--pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 48px;
}
.driver-details__inner--pillars .driver-details__content {
  padding: 0 40px;
}
.driver-details__inner--pillars .driver-details__content:first-child {
  padding-left: 0;
  border-right: 1px solid var(--cityride-border-color, #DFDFDF);
}
.driver-details__inner--pillars .driver-details__content:last-child {
  padding-right: 0;
}

.driver-details__pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--cityride-white2, #F4F1EA);
  color: var(--cityride-base, #832e19);
  font-size: 22px;
  margin-bottom: 20px;
}

.driver-details__inner--pillars .driver-details__name {
  font-size: 24px;
  margin-bottom: 14px;
}

@media (max-width: 767px) {
  .driver-details__inner--pillars {
    grid-template-columns: 1fr;
    padding: 32px;
    gap: 32px;
  }
  .driver-details__inner--pillars .driver-details__content {
    padding: 0;
  }
  .driver-details__inner--pillars .driver-details__content:first-child {
    padding: 0 0 32px;
    border-right: 0;
    border-bottom: 1px solid var(--cityride-border-color, #DFDFDF);
  }
}

/* ---- Core values strip ---- */
.driver-details__values {
  max-width: 780px;
  margin: 56px auto 0;
  text-align: center;
}
.driver-details__values .driver-details__section-eyebrow {
  margin-bottom: 16px;
}
.driver-details__highlights--values {
  justify-content: center;
}
.driver-details__highlights--values li {
  padding: 12px 22px;
  font-size: 15px;
}

/* The base template's CTA banner pulls itself up 144px via negative
   margin so it floats over whatever precedes it - a deliberate overlap
   that works after the homepage's testimonials section, but on this page
   it was swallowing the "What We Stand For" values row directly above it.
   Neutralized only for this adjacency; the homepage's overlap is untouched. */
.driver-details.section-space-top + .cta-one .cta-one__inner {
  margin-top: 0;
}
@media (max-width: 991px) {
  .driver-details__values {
    margin-top: 40px;
  }
}

/* ==========================================================================
   About page
   ========================================================================== */

/* The hero photo has no explicit height, and object-fit:cover needs one
   to do anything - without it, the <img> falls back to its raw HTML
   height attribute (1200px) as its rendered height, ignoring the column's
   432px width entirely. The photo was rendering as a bizarre 432x1200
   sliver showing mostly the garage ceiling, with the car barely visible.
   A fixed editorial aspect-ratio fixes it and matches the treatment used
   on the Welcome page's portrait. */
.about-four__image__item {
  aspect-ratio: 3 / 2;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
.about-four__image__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* "25,000+ Customer Worldwide" stat badge - the base template renders
   this as a vertical ribbon (rotated, writing-mode: vertical-rl) running
   up the left edge of the photo. Rebuilt as a horizontal pill overlapping
   the bottom-left corner instead, which also fixes the same near-black-
   on-rust contrast bug found in the topbar and elsewhere (~2.4:1). */
.about-four__image__text {
  position: absolute;
  left: 24px;
  right: auto;
  bottom: 24px;
  top: auto;
  transform: none;
  writing-mode: horizontal-tb;
  clip-path: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100% - 48px);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.3;
  box-shadow: 0px 16px 34px rgba(0, 0, 0, 0.3);
  color: var(--cityride-white, #fff);
}
.about-four__image__text i {
  flex-shrink: 0;
  font-size: 20px;
}
@media (max-width: 400px) {
  .about-four__image__text {
    font-size: 13px;
    padding: 12px 16px;
  }
}

/* Emergency-call photo: the base template sizes this at 68px, easy to
   miss next to the phone number. Given more visual weight with a bigger
   frame and a white ring so it reads as a deliberate feature, not an
   afterthought. */
.about-four__author__man {
  max-width: 92px;
  height: 92px;
  border: 3px solid var(--cityride-white, #fff);
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
}

/* Checklist icon badges on the dark "Get Special Benefits" section: same
   near-black-on-rust bug - the checkmark was nearly invisible against its
   own badge background. */
.download-app-two__item__icon {
  color: var(--cityride-white, #fff);
}
.download-app-two__item:hover .download-app-two__item__icon {
  color: var(--cityride-base, #832e19);
}

/* A little more depth behind the phone mockup so it doesn't read as a
   flat rust dome. */
.download-app-two__image {
  box-shadow: 0px 30px 60px rgba(0, 0, 0, 0.35);
}

/* Subtle lift on the "emergency call us" block to match the hover polish
   used on cards elsewhere in the redesign. */
.about-four__author {
  padding: 10px 14px;
  margin: -10px -14px;
  border-radius: 14px;
  transition: background-color 350ms ease;
}
.about-four__author:hover {
  background-color: var(--cityride-white2, #f4f1ea);
}

@media (max-width: 767px) {
  .about-four__image__item {
    aspect-ratio: 4 / 3;
  }
}

/* ==========================================================================
   Carousel nav buttons (site-wide)
   ========================================================================== */

/* The prev/next buttons on every carousel (hero slider, services, both
   testimonials carousels) share one class, ".cityride-owl__carousel--
   basic-nav" - so this single fix updates all of them at once. The base
   template renders them as a skewed parallelogram via clip-path, echoing
   the "Book a Taxi" ribbon button; fitting for a CTA, but busy for a
   simple pair of nav arrows, and the icon repeats the same near-black-
   on-rust contrast bug found elsewhere on the site. Replaced with a
   clean circular icon button - the same badge language already used for
   social links and info icons throughout the redesign. */
.cityride-owl__carousel--basic-nav.owl-carousel .owl-nav {
  gap: 14px;
}
.cityride-owl__carousel--basic-nav.owl-carousel .owl-nav button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  clip-path: none;
  color: var(--cityride-white, #fff);
  box-shadow: 0px 10px 24px rgba(131, 46, 25, 0.28);
}
.cityride-owl__carousel--basic-nav.owl-carousel .owl-nav button.owl-prev,
.cityride-owl__carousel--basic-nav.owl-carousel .owl-nav button.owl-nex {
  margin: 0;
}
.cityride-owl__carousel--basic-nav.owl-carousel .owl-nav button:hover {
  transform: translateY(-3px);
  box-shadow: 0px 14px 28px rgba(20, 20, 20, 0.25);
}
@media (prefers-reduced-motion: reduce) {
  .cityride-owl__carousel--basic-nav.owl-carousel .owl-nav button:hover {
    transform: none;
  }
}

/* ==========================================================================
   Footer polish
   ========================================================================== */

/* The footer background was flat black plus a low-opacity grain texture -
   functional but flat, with no relationship to the brand. Layered in two
   soft rust glows (echoing the brand color used everywhere else) behind
   the existing texture, so the footer reads as designed rather than a
   default dark section. */
.main-footer__inner {
  background-color: var(--cityride-black, #141414);
  background-image:
    radial-gradient(circle at 12% 15%, rgba(131, 46, 25, 0.35), transparent 45%),
    radial-gradient(circle at 88% 85%, rgba(131, 46, 25, 0.25), transparent 40%);
}

/* The footer logo was a flat JPEG with a solid white background baked in
   - it read as a stray white rectangle against the dark footer. Swapped
   to the background-removed PNG (already used elsewhere on the site) and
   given a soft rounded plate instead of a hard-edged box, since the logo
   itself uses dark rust/black that still needs a light backdrop to stay
   legible on a near-black footer. */
.footer-widget__logo {
  background-color: rgba(255, 255, 255, 0.94);
  border-radius: 14px;
  padding: 10px 16px;
  box-shadow: 0px 10px 26px rgba(0, 0, 0, 0.25);
  /* ".footer-widget--about" is a column flexbox with no align-items set,
     so it defaults to "stretch" - every child, including this logo
     plate, was stretching to the full column width instead of hugging
     the logo image, leaving a large empty white rectangle beside it. */
  align-self: flex-start;
}

/* Quick Links / Our Services now use per-item Font Awesome icons instead
   of one repeated arrow glyph - give them a fixed-width column so labels
   with wider or narrower icons still line up on the same start position. */
.footer-widget__links li a i {
  display: inline-flex;
  justify-content: center;
  width: 18px;
}

/* Body/link text sits at ~4.1:1 contrast on the near-black footer -
   just under the 4.5:1 minimum for normal text. Brightened site-wide
   across the footer's gray text. */
.footer-widget__about-text,
.footer-widget__links li,
.footer-widget__links li a,
.footer-widget__post__meta a {
  color: rgba(255, 255, 255, 0.75);
}
.footer-widget__links li a:hover {
  color: var(--cityride-base, #832e19);
}

/* Two phone numbers were run together on one flex row with only a small
   gap between them, reading as a single long string. Stacked instead so
   each is independently scannable. */
.footer-widget__info__phones {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer-widget__info li:has(.footer-widget__info__phones) {
  align-items: flex-start;
  padding-top: 2px;
}

/* Soft glow instead of a flat, rigid two-segment dash under each widget
   heading - one fading gradient line instead of two solid blocks. */
.footer-widget__title::before {
  width: 0;
}
.footer-widget__title::after {
  left: 0;
  width: 90px;
  height: 3px;
  background: linear-gradient(to right, var(--cityride-base, #832e19), rgba(131, 46, 25, 0));
}

/* Newsletter input: keep the white field (better contrast than a
   transparent dark-mode input) but give it some lift so it doesn't sit
   flush against the dark background. */
/* The subscribe form had no heading of its own - it just appeared under
   the phone numbers with no context for what it does. */
.footer-widget__newsletter__label {
  color: var(--cityride-white, #fff);
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 12px;
}
.footer-widget__newsletter .form-group__form {
  box-shadow: 0px 14px 30px rgba(0, 0, 0, 0.25);
  transition: box-shadow 350ms ease;
}
.footer-widget__newsletter .form-group__form:focus-within {
  box-shadow: 0px 14px 30px rgba(0, 0, 0, 0.25), 0 0 0 2px var(--cityride-base, #832e19);
}
.footer-widget__newsletter .form-group__form button[type="submit"]:hover {
  background-color: var(--cityride-black, #141414);
}

/* The "back to top" button is already a fixed-position FAB - it just had
   no shadow, so it blended into whatever was directly behind it. */
.scroll-top {
  box-shadow: 0px 10px 26px rgba(0, 0, 0, 0.3);
}

/* ========================================================================== 
   Contact page
   ========================================================================== */
.sango-contact { background: #f7f4f0; }
.sango-contact__heading { max-width: 680px; margin: 0 auto 46px; text-align: center; }
.sango-contact__eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--cityride-base, #832e19); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sango-contact__heading h2 { margin: 10px 0 12px; font-size: clamp(30px, 4vw, 44px); }
.sango-contact__heading p { margin: 0; color: #595959; font-size: 16px; line-height: 1.75; }
.sango-contact__details { display: flex; min-height: 100%; flex-direction: column; overflow: hidden; border: 1px solid #e5ded8; border-radius: 20px; background: #832e19; color: #fff; box-shadow: 0 16px 40px rgba(20,20,20,.12); }
.sango-contact__photo { position: relative; height: 255px; flex: 0 0 255px; overflow: hidden; background: #2a211d; }
.sango-contact__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sango-contact__photo span { position: absolute; bottom: 18px; left: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 8px; background: #fff; color: #832e19; font-size: 12px; font-weight: 700; }
.sango-contact__details-content { position: relative; z-index: 1; flex: 1; padding: 34px 42px 30px; background: #832e19; }
.sango-contact__small-title { color: rgba(255,255,255,.8); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sango-contact__details h3 { max-width: 360px; margin: 12px 0; color: #fff; font-size: clamp(27px,3vw,37px); line-height: 1.22; }
.sango-contact__details-content > p { max-width: 390px; margin: 0 0 34px; color: rgba(255,255,255,.84); line-height: 1.7; }
.sango-contact__detail { display: flex; align-items: center; gap: 14px; margin-top: 17px; color: #fff; }
a.sango-contact__detail:hover { color: #fff; }.sango-contact__detail-icon { display: inline-flex; flex: 0 0 44px; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.38); border-radius: 12px; background: rgba(255,255,255,.11); font-size: 16px; transition: transform .25s ease, background-color .25s ease; }
a.sango-contact__detail:hover .sango-contact__detail-icon { background: #fff; color: var(--cityride-base,#832e19); transform: translateY(-2px); }.sango-contact__detail small, .sango-contact__detail strong { display: block; }.sango-contact__detail small { margin-bottom: 2px; color: rgba(255,255,255,.7); font-size: 12px; }.sango-contact__detail strong { color: inherit; font-size: 15px; font-weight: 600; }
.sango-contact__availability { padding: 17px 42px; border-top: 1px solid rgba(255,255,255,.2); background: #6f2514; color: #fff; font-size: 13px; }.sango-contact__availability i { margin-right: 7px; color: #a8e1b9; font-size: 9px; vertical-align: 1px; }
.sango-contact__form-card { height: 100%; padding: 42px; border: 1px solid rgba(131,46,25,.12); border-radius: 20px; background: #fff; box-shadow: 0 16px 40px rgba(20,20,20,.08); }.sango-contact__form-intro { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; padding-bottom: 24px; border-bottom: 1px solid #e8e1dc; }.sango-contact__form-number { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--cityride-white2,#f4f1ea); color: var(--cityride-base,#832e19); font-weight: 700; }.sango-contact__form-intro h3 { margin: 0 0 3px; font-size: 24px; }.sango-contact__form-intro p { margin: 0; color: #6b6b6b; font-size: 13px; }
.sango-contact-form label { display: block; margin: 0 0 9px; color: var(--cityride-black,#141414); font-size: 14px; font-weight: 700; }.sango-contact-form label span { color: var(--cityride-base,#832e19); }.sango-contact-form__field { position: relative; display: flex; align-items: center; min-height: 56px; border: 1px solid #e6e1dd; border-radius: 10px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }.sango-contact-form__field:focus-within { border-color: var(--cityride-base,#832e19); box-shadow: 0 0 0 3px rgba(131,46,25,.12); }.sango-contact-form__field > i { width: 47px; color: var(--cityride-base,#832e19); text-align: center; font-size: 15px; }.sango-contact-form input, .sango-contact-form select, .sango-contact-form textarea { width: 100%; border: 0; outline: 0; background: transparent; color: var(--cityride-black,#141414); font-family: var(--cityride-font,"Manrope",sans-serif); font-size: 14px; }.sango-contact-form input, .sango-contact-form select { height: 54px; padding: 0 16px 0 0; }.sango-contact-form select { appearance: auto; cursor: pointer; }.sango-contact-form input::placeholder, .sango-contact-form textarea::placeholder { color: #8b8581; }.sango-contact-form__field--message { align-items: flex-start; padding-top: 17px; }.sango-contact-form__field--message textarea { min-height: 126px; padding: 0 16px 15px 0; line-height: 1.6; resize: vertical; }
.sango-contact-form__footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; }.sango-contact-form__footer p { margin: 0; color: #6a6663; font-size: 12px; line-height: 1.55; }.sango-contact-form__footer p i { margin-right: 5px; color: var(--cityride-base,#832e19); }.sango-contact-form .cityride-btn { flex: 0 0 auto; border: 0; padding: 15px 23px; }.sango-contact-form .cityride-btn i { margin-left: 8px; }.sango-contact-map { height: 380px; background: #eee; }.sango-contact-map iframe { display: block; width: 100%; height: 100%; border: 0; filter: saturate(.78) contrast(.95); }
@media (max-width: 991px) { .sango-contact__details { min-height: 560px; } }@media (max-width: 575px) { .sango-contact__heading { margin-bottom: 32px; }.sango-contact__details-content { padding: 34px 25px 88px; }.sango-contact__availability { padding: 17px 25px; }.sango-contact__form-card { padding: 28px 20px; }.sango-contact-form__footer { align-items: stretch; flex-direction: column; }.sango-contact-form .cityride-btn { width: 100%; }.sango-contact-map { height: 290px; } }

/* The contact page uses solid surfaces and a visible photo, rather than
   blending the image beneath a gradient overlay. */
.sango-contact-form .cityride-btn {
  background: #832e19;
  color: #fff;
}
.sango-contact-form .cityride-btn::before,
.sango-contact-form .cityride-btn::after {
  display: none;
}
.sango-contact-form .cityride-btn:hover,
.sango-contact-form .cityride-btn:focus-visible {
  background: #5f1c0c;
  color: #fff;
}

/* Keep the original contact-page vehicle photography as a prominent,
   equal-height set of quick-contact cards. */
.sango-contact__channels {
  margin: 0 0 64px;
}
.sango-contact__channel-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e5ded8;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(20, 20, 20, 0.08);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.sango-contact__channel-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 36px rgba(20, 20, 20, 0.13);
}
.sango-contact__channel-card .contact-top__item__thumb {
  height: 218px;
  flex: 0 0 218px;
}
.sango-contact__channel-card .contact-top__item__thumb::before,
.sango-contact__channel-card .contact-top__item__thumb::after {
  display: none;
}
.sango-contact__channel-card .contact-top__item__thumb img {
  height: 100%;
  transform: none;
}
.sango-contact__channel-card:hover .contact-top__item__thumb img {
  transform: scale(1.04);
}
.sango-contact__channel-card .contact-top__item__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0 28px 28px;
}
.sango-contact__channel-card .contact-top__item__icon {
  margin-bottom: 19px;
}
.sango-contact__channel-card .contact-top__item__icon__inner {
  color: #fff;
}
.sango-contact__channel-card:hover .contact-top__item__icon__inner {
  background: #5f1c0c;
  color: #fff;
}
.sango-contact__channel-card .contact-top__item__title {
  margin-bottom: 8px;
  font-size: 22px;
}
.sango-contact__channel-card .contact-top__item__text {
  margin-bottom: 18px;
  color: #5d5a58;
  font-size: 15px;
  line-height: 1.55;
}
.sango-contact__channel-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  margin: auto auto 0;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  color: #832e19;
  font-size: 13px;
  font-weight: 700;
}
.sango-contact__channel-link:hover,
.sango-contact__channel-link:focus-visible {
  color: #5f1c0c;
}
.sango-contact__channel-link:focus-visible,
.sango-contact__detail:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
@media (max-width: 991px) {
  .sango-contact__details { min-height: auto; }
}
@media (max-width: 575px) {
  .sango-contact__channels { margin-bottom: 46px; }
  .sango-contact__channel-card .contact-top__item__thumb { height: 205px; flex-basis: 205px; }
  .sango-contact__photo { height: 220px; flex-basis: 220px; }
  .sango-contact__details-content { padding: 30px 25px; }
}

/* ==========================================================================
   Booking Modal & Homepage CTA Section Styles
   ========================================================================== */

/* Google Places Autocomplete dropdown z-index fix for modal overlay */
.pac-container {
  z-index: 999999 !important;
  font-family: inherit;
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(131, 46, 25, 0.15);
  overflow: hidden;
  margin-top: 4px;
}
.pac-item {
  padding: 10px 14px;
  cursor: pointer;
}
.pac-item:hover, .pac-item-selected {
  background-color: #f7f3f0;
}

/* Modal Overlay & Base */
.booking-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.booking-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.booking-modal__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(18, 12, 10, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1;
}

.booking-modal__dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 820px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: scale(0.92) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.booking-modal.active .booking-modal__dialog {
  transform: scale(1) translateY(0);
}

.booking-modal__content {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(131, 46, 25, 0.12);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
}

/* Modal Header */
.booking-modal__header {
  padding: 24px 30px;
  background: linear-gradient(135deg, #1f1715 0%, #2a1b18 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #832e19;
}

.booking-modal__title-box {
  display: flex;
  align-items: center;
  gap: 16px;
}

.booking-modal__icon {
  font-size: 32px;
  background: rgba(255, 255, 255, 0.08);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.booking-modal__title {
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px 0;
  letter-spacing: -0.3px;
}

.booking-modal__subtitle {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  margin: 0;
}

.booking-modal__close {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
}

.booking-modal__close:hover {
  background: #832e19;
  border-color: #832e19;
  transform: rotate(90deg);
}

/* Modal Body & Form inside modal */
.booking-modal__body {
  padding: 30px;
  overflow-y: auto;
  max-height: calc(90vh - 100px);
}

/* Enhanced Form Controls Inside Modal */
.booking-modal .taxi-booking__form {
  margin: 0;
}

.booking-modal .section-title {
  font-size: 16px;
  font-weight: 700;
  color: #832e19;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.booking-modal .section-divider {
  margin: 24px 0;
  border-top: 1px dashed #e2dad5;
}

.booking-modal .form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -10px;
  margin-left: -10px;
}

.booking-modal .form-group-enhanced {
  flex: 1 0 240px;
  padding: 0 10px;
  margin-bottom: 18px;
}

.booking-modal .form-group-enhanced label {
  font-size: 13px;
  font-weight: 600;
  color: #3d3532;
  margin-bottom: 6px;
  display: block;
}

.booking-modal .input-icon-wrapper {
  position: relative;
}

.booking-modal .input-icon-wrapper i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #832e19;
  font-size: 15px;
}

.booking-modal .form-control-enhanced {
  width: 100%;
  padding: 12px 14px 12px 42px;
  border: 1px solid #dcd3cd;
  border-radius: 12px;
  font-size: 14px;
  background-color: #faf7f5;
  color: #1a1a1a;
  transition: all 0.2s ease;
}

.booking-modal select.form-control-enhanced {
  padding-left: 14px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23832e19' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 00-1.414-1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.booking-modal .form-control-enhanced:focus {
  background-color: #ffffff;
  border-color: #832e19;
  box-shadow: 0 0 0 3px rgba(131, 46, 25, 0.15);
  outline: none;
}

/* Fare Display inside modal */
.booking-modal .fare-display-card {
  display: none;
  background: linear-gradient(135deg, #fff7f4 0%, #fef0eb 100%);
  border: 1px solid #f3d4cb;
  border-radius: 16px;
  padding: 20px;
  margin: 20px 0;
}

.booking-modal .fare-display-card.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

.booking-modal .fare-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(131, 46, 25, 0.08);
}

.booking-modal .fare-info-row:last-child {
  border-bottom: none;
  padding-top: 12px;
  margin-top: 6px;
}

.booking-modal .fare-label {
  font-size: 14px;
  color: #594d48;
  font-weight: 500;
}

.booking-modal .fare-value {
  font-size: 14px;
  font-weight: 600;
  color: #222;
}

.booking-modal .fare-total {
  font-size: 20px;
  font-weight: 800;
  color: #832e19;
}

.booking-modal .submit-btn-enhanced {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #9e3b1e 0%, #832e19 100%);
  color: #ffffff;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(131, 46, 25, 0.28);
  transition: all 0.25s ease;
  margin-top: 10px;
}

.booking-modal .submit-btn-enhanced:hover {
  background: linear-gradient(135deg, #a63f21 0%, #6e2513 100%);
  box-shadow: 0 12px 30px rgba(131, 46, 25, 0.4);
  transform: translateY(-2px);
}


/* ==========================================================================
   Homepage Replacement CTA Showcase Section
   ========================================================================== */
.booking-cta-section {
  padding: 40px 0 80px;
}

.booking-cta-card {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  padding: 56px 48px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  background: #191210;
}

.booking-cta-card__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.25;
  filter: blur(2px);
  transform: scale(1.05);
}

.booking-cta-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, rgba(25, 18, 16, 0.95) 0%, rgba(131, 46, 25, 0.85) 100%);
}

.booking-cta-card .row {
  position: relative;
  z-index: 2;
}

.booking-cta-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.booking-cta-card__title {
  color: #ffffff;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 16px;
}

.booking-cta-card__title span {
  color: #ffb8a6;
  background: linear-gradient(90deg, #ffffff 0%, #ffc5b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.booking-cta-card__text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 580px;
}

.booking-cta-card__features {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.cta-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
}

.cta-feature-item i {
  color: #ffaa95;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.12);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.booking-cta-card__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

@media (max-width: 991px) {
  .booking-cta-card__actions {
    align-items: center;
    margin-top: 20px;
  }
}

.booking-cta-btn {
  padding: 18px 36px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  animation: pulseGlow 2.5s infinite;
}

@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
  70% { box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.booking-cta-call-link {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease;
}

.booking-cta-call-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

@media (max-width: 767px) {
  .booking-cta-card {
    padding: 36px 24px;
  }
  .booking-cta-card__title {
    font-size: 28px;
  }
  .booking-cta-card__text {
    font-size: 14px;
  }
}

/* ==========================================================================
   Hero Slider Background & Space Elimination Redesign
   ========================================================================== */

/* Hero main slider background photo enhancement */
.main-slider-one__bg {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.main-slider-one__bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(15, 10, 8, 0.92) 0%, rgba(15, 10, 8, 0.72) 48%, rgba(15, 10, 8, 0.35) 100%) !important;
  z-index: 1;
}

.main-slider-one__content {
  position: relative;
  z-index: 3;
}

.main-slider-one__col-image {
  position: relative;
  z-index: 3;
}

/* Eliminate awkward gaps & dead space site-wide */
.main-slider-one {
  margin-bottom: 0 !important;
}

.booking-cta-section {
  padding: 36px 0 48px !important;
  margin: 0 !important;
}

.about-four.section-space {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.services-one.section-space {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

/* Remove horizontal scroll & side gaps */
/* ==========================================================================
   Seamless Edge-to-Edge Hero & Viewport Spacing System
   ========================================================================== */

/* Zero out default margins and paddings affecting hero viewport */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  overflow-x: hidden !important;
  background-color: #0f0a08 !important;
}

.page-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  overflow-x: hidden !important;
  background-color: #0f0a08 !important;
}

/* Crisp White Main Header - Logo & Nav 100% Crisp & Visible */
.main-header {
  margin-bottom: 0 !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06) !important;
}

.main-header .main-menu__list > li > a {
  color: #141414 !important;
  font-weight: 600 !important;
}

.main-header .main-menu__list > li:hover > a,
.main-header .main-menu__list > li.current > a {
  color: var(--cityride-base, #832e19) !important;
}

/* Main Hero Slider Container - Edge to Edge Width */
.main-slider-one {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background-color: #0f0a08 !important;
  min-height: clamp(480px, 70vh, 760px) !important;
}

/* Background image & gradient overlay extend 100% edge-to-edge */
.main-slider-one__bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  z-index: 1 !important;
}

.main-slider-one__bg::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(90deg, rgba(15, 10, 8, 0.95) 0%, rgba(15, 10, 8, 0.8) 50%, rgba(15, 10, 8, 0.5) 100%) !important;
  z-index: 2 !important;
}

/* Slide Item layout fitting viewport seamlessly */
.main-slider-one__item {
  position: relative !important;
  width: 100% !important;
  min-height: clamp(480px, 70vh, 760px) !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(32px, 5vh, 72px) 0 !important;
  margin: 0 !important;
  background: transparent !important;
  z-index: 3 !important;
}

/* Container fluid responsive layout */
.main-slider-one .container {
  width: 100% !important;
  max-width: 1380px !important;
  margin: 0 auto !important;
  padding-left: clamp(16px, 4vw, 48px) !important;
  padding-right: clamp(16px, 4vw, 48px) !important;
  position: relative !important;
  z-index: 4 !important;
}

.main-slider-one .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-items: center !important;
}

.main-slider-one__col-content {
  width: 55% !important;
  padding-right: clamp(16px, 2vw, 32px) !important;
}

.main-slider-one__col-image {
  width: 45% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Heading, Subtitle, Text & Button Spacing */
.main-slider-one__top {
  margin-bottom: clamp(10px, 1.5vh, 18px) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.main-slider-one__sub-title {
  font-size: clamp(13px, 1.2vw, 16px) !important;
  letter-spacing: 0.08em !important;
}

.main-slider-one__title {
  font-size: clamp(30px, 4.2vw, 64px) !important;
  line-height: 1.12 !important;
  margin-top: 0 !important;
  margin-bottom: clamp(14px, 2vh, 26px) !important;
  color: #ffffff !important;
}

.main-slider-one__text {
  font-size: clamp(14px, 1.3vw, 17px) !important;
  line-height: 1.6 !important;
  margin-bottom: clamp(18px, 2.5vh, 32px) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  max-width: 540px !important;
}

.main-slider-one__button {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

/* Standalone Taxi Showcase Photo (No card box frame, whole car 100% visible) */
.main-slider-one__hero-showcase {
  width: 100% !important;
  max-width: clamp(300px, 42vw, 620px) !important;
  height: auto !important;
  object-fit: contain !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  display: block !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.6)) !important;
  transition: transform 0.35s ease !important;
}

.main-slider-one__hero-showcase:hover {
  transform: translateY(-6px) scale(1.015) !important;
}

.main-slider-one__image {
  overflow: visible !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

/* Responsive Stacking & Mobile Viewport Fitting */
@media (max-width: 991px) {
  .main-slider-one {
    min-height: auto !important;
  }
  .main-slider-one__item {
    min-height: auto !important;
    padding: clamp(30px, 5vh, 50px) 0 !important;
  }
  .main-slider-one .row {
    flex-direction: column !important;
    text-align: center !important;
  }
  .main-slider-one__col-content {
    width: 100% !important;
    padding-right: 0 !important;
  }
  .main-slider-one__col-image {
    width: 100% !important;
    margin-top: clamp(20px, 3vh, 36px) !important;
  }
  .main-slider-one__top,
  .main-slider-one__button {
    justify-content: center !important;
  }
  .main-slider-one__text {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .main-slider-one__hero-showcase {
    max-width: clamp(280px, 88vw, 500px) !important;
  }
}

@media (max-width: 575px) {
  .main-slider-one .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .main-slider-one__title {
    font-size: clamp(26px, 7vw, 36px) !important;
  }
  .main-slider-one__button {
    flex-direction: column !important;
    width: 100% !important;
  }
  .main-slider-one__btn {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   Clean White Mobile Navigation Drawer
   ========================================================================== */
.mobile-nav__content {
  background-color: #ffffff !important;
  box-shadow: 6px 0 30px rgba(0, 0, 0, 0.15) !important;
}

.mobile-nav__close {
  color: #141414 !important;
}

.mobile-nav__close:hover {
  color: var(--cityride-base, #832e19) !important;
}

.mobile-nav__content .main-menu__list li:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.mobile-nav__content .main-menu__list ul {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.mobile-nav__content .main-menu__list li > a {
  color: #141414 !important;
  font-weight: 600 !important;
}

.mobile-nav__content .main-menu__list li.current > a,
.mobile-nav__content .main-menu__list li:hover > a {
  color: var(--cityride-base, #832e19) !important;
}

.mobile-nav__content .main-menu__list li a button {
  background-color: var(--cityride-base, #832e19) !important;
  color: #ffffff !important;
}

.mobile-nav__content .main-menu__list li a button.expanded {
  background-color: #141414 !important;
  color: #ffffff !important;
}

.mobile-nav__contact li {
  color: #141414 !important;
  font-weight: 600 !important;
}

.mobile-nav__contact li a {
  color: #141414 !important;
}

.mobile-nav__contact li a:hover {
  color: var(--cityride-base, #832e19) !important;
}

.mobile-nav__social a {
  background-color: #f4f4f4 !important;
  color: #141414 !important;
}

.mobile-nav__social a:hover {
  background-color: var(--cityride-base, #832e19) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   Cityride Info Feature Redesign (Clean 2-Column Split, No Text Overlap)
   ========================================================================== */

.cityride-info {
  margin-bottom: 50px !important;
}

.cityride-info__inner {
  position: relative !important;
  padding: 36px 40px !important;
  background: #ffffff !important;
  border-radius: 24px !important;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(131, 46, 25, 0.12) !important;
  overflow: hidden !important;
}

.cityride-info__inner::after {
  display: none !important;
}

.cityride-info__bg {
  display: none !important;
}

.cityride-info__item {
  text-align: center !important;
  padding: 24px 16px !important;
  background: #fbf9f8 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.cityride-info__item:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 30px rgba(131, 46, 25, 0.12) !important;
  background: #ffffff !important;
  border-color: rgba(131, 46, 25, 0.3) !important;
}

.cityride-info__item__icon {
  margin: 0 0 16px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 32px !important;
  color: #ffffff !important;
  width: 68px !important;
  height: 68px !important;
  border-radius: 50% !important;
  background-color: var(--cityride-base, #832e19) !important;
  box-shadow: 0 8px 20px rgba(131, 46, 25, 0.25) !important;
  transition: transform 0.3s ease !important;
}

.cityride-info__item:hover .cityride-info__item__icon {
  transform: scale(1.08) !important;
  background-color: #141414 !important;
  color: #ffffff !important;
}

.cityride-info__item__title {
  margin: 0 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  color: #141414 !important;
}

.cityride-info__image-wrap {
  width: 100% !important;
  height: 100% !important;
  min-height: 220px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12) !important;
}

.cityride-info__image-new {
  width: 100% !important;
  height: 100% !important;
  max-height: 260px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 18px !important;
  transition: transform 0.5s ease !important;
}

.cityride-info__image-wrap:hover .cityride-info__image-new {
  transform: scale(1.04) !important;
}

@media (max-width: 991px) {
  .cityride-info__inner {
    padding: 28px 20px !important;
  }
  .cityride-info__image-wrap {
    margin-top: 24px !important;
  }
}