/**
* Theme Name: Conexi Child
* Description: This is a child theme of Conexi, generated by Merlin WP.
* Author: <a href="https://themeforest.net/user/tonatheme/portfolio">tonatheme</a>
* Template: conexi
* Version: 3.3.7+build.48-05fde71
*/

/* =====================================================================
   Goys Taxis – site customisations
   Content/DB fixes (social links, About Us, Book Online page) are applied
   on the live site. The rules below are presentation-only overrides that
   ship with the theme.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) X (Twitter) logo
   The bundled Font Awesome (5.8) has no `x-twitter` glyph, so render the
   X mark from an inline SVG mask. Works in the header (theme FA) and the
   footer (Elementor FA) regardless of which icon font is loaded.
   --------------------------------------------------------------------- */
i.fa-x-twitter::before {
  content: "" !important;
}
i.fa-x-twitter {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------------------------------------------------------------------
   2) Consistent typography
   The theme uses Poppins, but Elementor's global kit defaults to Roboto,
   so Elementor headings (e.g. the Airport Transfers title) rendered in a
   different font than the rest of the site. Point Elementor's global
   typography at Poppins and normalise heading/body/button widgets so the
   whole site uses one type family.
   --------------------------------------------------------------------- */
body {
  --e-global-typography-primary-font-family: "Poppins";
  --e-global-typography-secondary-font-family: "Poppins";
  --e-global-typography-text-font-family: "Poppins";
  --e-global-typography-accent-font-family: "Poppins";
}
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-button .elementor-button,
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-description {
  font-family: "Poppins", sans-serif !important;
}

/* ---------------------------------------------------------------------
   3) Page header (inner banner) spacing
   The page-title banner sat too close to the sticky site header. Add a
   little more breathing room above the title across pages.
   --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   4) Home yellow-pill header (.header-one) menu fit
   With 7 menu items (incl. Book Online) the menu ran underneath the
   absolutely-positioned black phone pill. Tighten letter-spacing / gaps /
   padding so all items fit, and cap the menu width so it can never slide
   under the phone box (which sits at right:0 of the pill).
   --------------------------------------------------------------------- */
@media (min-width: 1200px) {
  /* Widen the yellow pill into the empty space so all 7 items fit one line */
  .site-header.header-one .header-navigation .container {
    max-width: 1320px !important;
    padding-left: 40px;
  }
  /* Keep every item on a single row, but RESERVE the right-hand strip the
     absolutely-positioned black phone pill occupies (right:0). Without this
     cap the widened "Book Online" pill pushed the last item under the phone
     box, which clipped it ("BOOK ONLI…") and hid its padding. */
  .site-header.header-one .header-navigation .main-navigation {
    max-width: calc(100% - 240px);
  }
  .site-header.header-one .header-navigation ul.navigation-box {
    white-space: nowrap;
  }
  .site-header.header-one .header-navigation ul.navigation-box > li > a {
    font-size: 14px;
    letter-spacing: 0.03em;
  }
  /* Tighter inter-item gap so all 7 items + the padded pill fit inside the
     reserved width down to the 1200px min-desktop breakpoint. */
  .site-header.header-one .header-navigation ul.navigation-box > li + li {
    margin-left: 18px !important;
  }
  /* Trim the pill's own horizontal padding slightly at this width so it never
     re-triggers the overflow (the padding stays clearly visible). */
  .site-header.header-one .header-navigation ul.navigation-box > li#menu-item-2252 > a {
    padding: 10px 22px !important;  /* beat the live `padding:0 !important` reset */
  }
  .site-header.header-one .header-navigation .right-side-box .contact-btn-block {
    padding-left: 46px;
    padding-right: 32px;
  }
}

.inner-banner {
  padding-top: 185px !important;
}
@media (max-width: 991px) {
  .inner-banner {
    padding-top: 150px !important;
  }
}
@media (max-width: 767px) {
  .inner-banner {
    padding-top: 125px !important;
  }
}

/* ---------------------------------------------------------------------
   5) Preloader on top of everything
   The header nav uses z-index:9999 (same as the preloader) and sits later
   in the DOM, so the menu showed through the loading overlay. Lift the
   preloader above it. Theme JS fades .preloader out on window load, so the
   page renders normally once loading is complete.
   --------------------------------------------------------------------- */
.preloader {
  z-index: 100000 !important;
}

/* ---------------------------------------------------------------------
   6) Footer: "Built by NORTH" on its own line below the copyright
   The footer-bottom widget renders the copyright text and the "Built by"
   link inside one span. Drop the link onto a new line, left-aligned,
   beneath the copyright. (Targets the link inside the span only, so the
   footer-logo link is unaffected.)
   --------------------------------------------------------------------- */
.site-footer .bottom-footer .left-block span a {
  display: block;
  margin-left: 0;
  margin-top: 6px;
}
/* No footer logo is set, so the empty placeholder just indents the
   copyright text. Hide it so the copyright + "Built by" align flush-left
   with the footer columns above. (Re-enable if a footer logo is added.) */
.site-footer .bottom-footer .left-block .footer-logo {
  display: none;
}
/* Keep copyright + "Built by" stacked and flush-left at every width
   (the responsive layout turns the left block into a centred flex column). */
.site-footer .bottom-footer .inner-container .left-block {
  align-items: flex-start !important;
  text-align: left !important;
}
.site-footer .bottom-footer .left-block > span {
  display: block;
  text-align: left;
}

/* ---------------------------------------------------------------------
   7) Book Online form – native date picker (Pick-up date)
   The theme styles every form control with `display:block`, `height:67px`
   and `line-height:0`. A native <input type="date"> doesn't behave like a
   text input under those rules: the date text (placeholder AND the value
   you pick) collapses against the top edge of the pill and is barely
   visible, and the calendar icon sits at the default offset.
   Drop the UA `listbox` appearance, restore a normal line-height and
   vertically centre the date text inside the pill, and pin the calendar
   indicator to the far right so the picked date reads cleanly.
   --------------------------------------------------------------------- */
.contact-form-style-one input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;          /* lets align-items centre the date text   */
  align-items: center;           /* vertically centre in the 67px pill      */
  line-height: normal;           /* theme sets line-height:0, which hides it */
}
.contact-form-style-one input[type="date"]::-webkit-datetime-edit {
  padding: 0;
  line-height: normal;
}
.contact-form-style-one input[type="date"]::-webkit-calendar-picker-indicator {
  margin-left: auto;             /* push the calendar icon to the far right */
  cursor: pointer;
  opacity: 0.6;
}

/* ---------------------------------------------------------------------
   8) About Us page – remove the brand/clients logo carousel
   The `conexi_clients` widget renders an <hr> + an owl-carousel of generic
   stock "client" logos (edge, variant, Capital Power, …) that aren't real
   Goys Taxis partners. Hide the whole widget on the About Us page. Scoped by
   page id + widget type so it survives Elementor element-id regeneration and
   never affects the same widget elsewhere.
   --------------------------------------------------------------------- */
.page-id-2164 .elementor-widget-conexi_clients {
  display: none !important;
}

/* ---------------------------------------------------------------------
   9) Page banner images (DB-set inline backgrounds)
   The inner-banner background URL is stored per page in the DB and printed
   as an inline style on `.inner-banner`, so it can't be changed from the
   theme files. Override it per page with the supplied artwork — `!important`
   beats the inline (non-important) background-image. URLs are relative to
   this stylesheet: up out of conexi-child to /themes/, then into the parent
   theme's assets where the new images live.
   --------------------------------------------------------------------- */
.page-id-2164 .inner-banner {            /* About Us */
  background-image: url("../conexi/assets/images/AboutUs/AboutUsBanner.webp") !important;
}
.page-id-2169 .inner-banner {            /* Airport Transfers */
  background-image: url("../conexi/assets/images/AirportTransfer/AirportTransferBanner.webp") !important;
}
.page-id-2182 .inner-banner {            /* Taxi Prices */
  background-image: url("../conexi/assets/images/TaxiPrices/TaxiPricesBanner.webp") !important;
}
/* Courier Service: the supplied banner is a near-square shot (sign above, taxi
   below) that can't show both fully in a wide, short page banner. The client
   asked to keep the CAR perfectly visible, so the source is pre-cropped to a
   car-focused band (branded taxi + a sliver of the sign posts) and centred —
   the taxi reads as the hero at every breakpoint. */
.page-id-2176 .inner-banner {            /* Courier Service */
  background-image: url("../conexi/assets/images/CourierServices/CourierService-banner.webp") !important;
  background-position: center !important;
}
/* Taxi Prices banner is a wide taxi shot whose subject sits low in the frame;
   the theme centres the background (`.inner-banner … center center`), which
   crops the taxi out of view. Anchor to the bottom so the taxi stays visible. */
.page-id-2182 .inner-banner {
  background-position: center bottom !important;
}
/* Airport Transfers banner: the plane/apron subject sits in the upper half of
   the shot, so the theme's centred crop hides the aircraft body. Anchor the
   background to the top so the top part of the image stays in view. */
.page-id-2169 .inner-banner {
  background-position: center top !important;
}

/* ---------------------------------------------------------------------
   10) Header logo sizing
   The new logo is a square badge, but the old one was a wide bar and the
   theme sizes `.logo-block img` to `width:170px` — applied to a square image
   that renders ~170px tall and blows up the header. Constrain by height
   instead (width auto) so the badge sits at roughly the previous logo height
   across both header variants, the sticky bar and mobile.
   --------------------------------------------------------------------- */
.logo-block img {
  width: auto !important;
  height: 72px !important;   /* +20% (was 60px) */
}
@media (max-width: 767px) {
  .logo-block img {
    height: 55px !important;  /* +20% (was 46px) */
  }
}

/* ---------------------------------------------------------------------
   11) Footer brand logo sizing
   The footer logo is an Elementor image widget set to width:100% of its
   column (~230px). The old footer image was a wide screenshot; the new
   M.Goys badge is square, so at 100% it renders far too tall. Cap its width
   so the round badge sits at a sensible footer size while staying circular.
   Scoped to the footer section (Elementor gives it the `site-footer` class),
   so no other image widget is affected.
   --------------------------------------------------------------------- */
.site-footer .elementor-widget-image {
  text-align: left !important;   /* widget defaults to centre; flush-left it */
}
.site-footer .elementor-widget-image img,
.elementor-666 .elementor-element.elementor-element-1a9c0de img {
  width: 86px !important;          /* +20% (was 72px); fixed so Elementor's 100% can't balloon it */
  max-width: 86px !important;
  height: auto !important;         /* keep the badge circular */
  margin-left: 0 !important;       /* kill any auto-centering on the <img> */
  margin-right: auto !important;
}

/* ---------------------------------------------------------------------
   12) Remove the stray black bar above the footer
   The parent theme paints a decorative 38px #111111 zig-zag bar on top of
   ANY `.site-footer` via `.site-footer:before/:after` (assets/css/style.css
   ~L1194). It's meant for the theme's own footer, but our footer is an
   Elementor section that also carries the `.site-footer` class (plus `.up`),
   so it inherits those bars — they render as a black block above the logo.
   Hide them, scoped to `.up` so the theme's default footer (`.no-top-zigzag`)
   is untouched.
   --------------------------------------------------------------------- */
.site-footer.up:before,
.site-footer.up:after {
  display: none !important;
}

/* ---------------------------------------------------------------------
   13) Header top-bar re-layout — logo left, socials + email right
   The theme's header_v2 top bar (`header_v2.php`) lays three items across a
   flex row: `.left-block` (the booking email, far left), `.logo-block` (the
   badge, absolutely centred) and `.social-block` (Facebook / X, far right).

   The brief: put the LOGO where the email was (left) and drop the EMAIL under
   the socials on the right. The markup lives in the parent template / DB, so
   we only re-arrange it with CSS:
     • `.logo-block` — un-absolute it and `order:-1` so it leads the row on the
       left (this is where `.left-block` used to sit).
     • `.social-block` — stays on the right (space-between), nudged just above
       centre so the email can tuck in beneath it.
     • `.left-block` — pulled out of flow and pinned right, one line below the
       socials, right-aligned so both share the container's right edge (15px
       Bootstrap `.container` padding).
   Scoped to `.header-one .top-bar` so no other header/footer is touched.
   --------------------------------------------------------------------- */
.site-header.header-one .top-bar .container {
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
}
.site-header.header-one .top-bar .logo-block {
  position: static;
  top: auto;
  left: auto;
  -webkit-transform: none;
          transform: none;
  order: -1;                 /* first item -> left edge */
}
.site-header.header-one .top-bar .social-block {
  -webkit-transform: translateY(-12px);
          transform: translateY(-12px);  /* sit just above centre */
}
.site-header.header-one .top-bar .left-block {
  position: absolute;
  top: 50%;
  margin-top: 3px;           /* one line below the socials */
  right: 15px;               /* align with the socials' right edge */
  text-align: right;
}

/* Mobile: the parent stacks the top bar into a centred column
   (responsive.css @max-width:991px). Undo the desktop absolute/offset tweaks
   so the items flow naturally again — order:-1 keeps the logo on top. */
@media (max-width: 991px) {
  .site-header.header-one .top-bar .left-block {
    position: static;
    top: auto;
    right: auto;
    margin-top: 0;
    text-align: center;
  }
  .site-header.header-one .top-bar .social-block {
    -webkit-transform: none;
            transform: none;
  }
}

/* ---------------------------------------------------------------------
   14) Header-two (inner pages) — email below the social icons
   Inner pages use a different header (`header-two`, header_v3.php): the logo
   already sits on the left and the right cluster is `.right-block > ul
   .contact-infos`, which holds the email `<li>` and the `.social-block` laid
   out as a horizontal row. To match the home header, turn that row into a
   right-aligned column with the socials on top and the email beneath them.
   (`order:-1` lifts the socials above the email regardless of source order.)
   --------------------------------------------------------------------- */
.site-header.header-two .top-bar .contact-infos {
  flex-direction: column;
  align-items: flex-end;     /* keep the stack flush with the right edge */
}
.site-header.header-two .top-bar .contact-infos .social-block {
  order: -1;                 /* socials above the email */
  margin-bottom: 6px;        /* gap between the socials and the email */
}
@media (max-width: 991px) {
  /* The bar goes vertical here (logo above the right cluster); centre the
     socials/email stack so it doesn't hug the right edge. */
  .site-header.header-two .top-bar .contact-infos {
    align-items: center;
  }
}

/* ---------------------------------------------------------------------
   15) Home "Numbers speak" fun-fact boxes — equal size + phrase box
   The theme sizes each white card to its content, so the boxes end up
   different widths/heights (the long "10000" card is much wider). Force all
   four cards to fill their column equally and share one height, and centre
   their contents vertically so the shorter figures sit level with the long
   "Thousands of Happy Customers" phrase (text swapped in via functions.php).
   --------------------------------------------------------------------- */
.page-id-2158 .funfact-style-one .single-funfact-one {
  width: 100%;                 /* fill the col-lg-3 → equal widths            */
  min-height: 320px;           /* equal heights across all three cards        */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 22px;          /* replace the theme's 55.5px 0 (room for text)*/
}
/* Remove the "24 Hour Service" card (client: drop "24 hours" everywhere). Its
   icon is the only `conexi-icon-happy` in the row, so :has() targets exactly
   that column. With four cards down to three, centre the row so the remaining
   cards sit balanced instead of leaving a 25% gap on the right. */
.page-id-2158 .funfact-style-one .col-lg-3:has(.conexi-icon-happy) {
  display: none !important;
}
.page-id-2158 .funfact-style-one .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
/* The phrase that replaces the "10000" counter: smaller than the 60px figures
   so it wraps cleanly and balances the numeric cards. */
.page-id-2158 .funfact-style-one .single-funfact-one .funfact-phrase {
  margin: 12px 0 0;
  color: #111111;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------
   16) Home — remove the "Why Choose M.Goys Taxis" section
   The whole block (dark background + heading + icon boxes) is a single
   conexi_service_icon widget. Hide the entire Elementor section that contains
   it (via :has) so no empty band or background is left behind. Scoped to Home.
   --------------------------------------------------------------------- */
.page-id-2158 .elementor-section:has(> .elementor-container .elementor-widget-conexi_service_icon) {
  display: none !important;
}

/* ---------------------------------------------------------------------
   17) About Us & Taxi Prices — inner-banner heading on one line
   Both page titles are short enough to sit on a single line at desktop
   widths. Prevent wrapping so the heading never breaks mid-word across
   the banner. On very narrow viewports the browser will still wrap if
   absolutely necessary (overflow:hidden is set by the theme).
   --------------------------------------------------------------------- */
.page-id-2164 .inner-banner h2,
.page-id-2182 .inner-banner h2 {
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   OLD 17) About Us & Taxi Prices — drop the photo/"Trusted by" column, span text
   Both pages use the conexi_about3 two-column layout: left = heading/text/CTA,
   right = the photo with the "Trusted by 4880" bubble. Hide the right column
   and let the content column span the full width so the heading and paragraph
   fill the space.
   --------------------------------------------------------------------- */
.page-id-2164 .about-style-two .row > .col-lg-6:last-child,
.page-id-2182 .about-style-two .row > .col-lg-6:last-child {
  display: none !important;
}
.page-id-2164 .about-style-two .row > .col-lg-6:first-child,
.page-id-2182 .about-style-two .row > .col-lg-6:first-child {
  -ms-flex: 0 0 100%;
      flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}
/* The heading carries a hard <br> baked into the DB content, forcing it onto
   two lines ("Taxi" / "Prices" and "Learn about our" / "taxi company"). With
   the column now full-width the whole heading fits on one line, so drop the
   forced break. Left as a normal (wrapping) heading rather than `nowrap` so it
   still wraps gracefully at narrow widths instead of overflowing. */
.page-id-2164 .about-style-two .block-title h2 br,
.page-id-2182 .about-style-two .block-title h2 br {
  display: none;
}

/* ---------------------------------------------------------------------
   19) Taxi Prices — body-copy text injected below the fare banners
   The PHP filter injects a `.goys-taxi-prices-footer-text` div after
   the `.taxi-fare-one` section. Style it to read cleanly beneath the
   pricing cards.
   --------------------------------------------------------------------- */
.goys-taxi-prices-footer-text {
  padding: 50px 0 60px;
  background-color: #F3F3F3;
}
.goys-taxi-prices-footer-text .container {
  max-width: 860px;
}
.goys-taxi-prices-footer-text p {
  color: #717171;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 30px;
  margin: 0;
  text-align: center;
}

/* ---------------------------------------------------------------------
   18) Contact form — message textarea can't be typed (line-height:0)
   The theme rule `form.wpcf7-form p { line-height: 0 }` is inherited by the
   multi-line message <textarea>, collapsing typed text to zero height so it
   looks like nothing can be entered. Restore a normal line-height on CF7
   textareas (single-line input pills are unaffected — their text stays
   vertically centred in the 67px pill). Fixes the message field on the Contact
   and Book Online forms.
   --------------------------------------------------------------------- */
.wpcf7-form textarea,
.contact-form-style-one textarea {
  line-height: 1.6 !important;
}

/* ---------------------------------------------------------------------
   Home banner prev/next arrows — hide on mobile & tablet
   The theme's custom circular arrows (`.carousel-btn-block .carousel-btn`) are
   `position:absolute; top:50%` of an ancestor that, on narrow screens, is
   taller than the slide, so they drop to the BOTTOM of the hero and land in the
   white band over the next section — one arrow is even clipped off the left
   edge (see client screenshots). Owl Carousel is touch-swipeable on mobile, so
   the arrows are redundant there. Hide the whole nav block below the desktop
   breakpoint so the slider reads clean and aligned; desktop keeps the side
   arrows. Both the CSS class (`carousel-btn-block`) and the JS hook class
   (`banner-carousel-btn`) are covered. */
@media (max-width: 991px) {
  .main-banner-wrapper .carousel-btn-block,
  .main-banner-wrapper .banner-carousel-btn {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------
   20) Home slider — injected 3rd slide (Slider-3)
   functions.php injects a third slide (class `slide-goys-taxi`) using the new
   Goys taxi shot (M24 GOY) with the sunset sky above the car. The client wants
   both the car AND the sky visible, so the source is cropped to a landscape
   framing that holds the car with the sky over it; centring the background
   (rather than the old `center bottom`, which showed only the road) keeps the
   car and the sky over it on screen. Owl clones slides for the loop, so the
   class-based rule covers the clones too. */
.banner-style-one .slide-goys-taxi {
  background-position: center center !important;
}

/* ---------------------------------------------------------------------
   21) Home "Make your booking" form – native date picker
   functions.php turns the booking form's date field into <input type="date">
   (the same direct picker as Book Online). The theme's dark pill plus
   `form.wpcf7-form p { line-height: 0 }` collapse the date text (same issue
   fixed for the Book Online form in section 7), so restore a normal
   line-height and vertically centre the value inside the pill. The native
   The browser's own picker indicator (the small control that sits inside the
   field, right after dd/mm/yyyy) is hidden — the theme's yellow calendar icon
   (`.input-holder.date input:before`) is the single trigger instead, and a
   small wp_footer script calls showPicker() on click so the calendar dropdown
   opens below the field. (The time field is a plain text input and needs no
   special handling — it inherits the pill style.)
   --------------------------------------------------------------------- */
.book-ride-one .booking-form-one input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;          /* lets align-items centre the date text */
  align-items: center;           /* vertically centre in the 67px pill    */
  line-height: normal;
  cursor: pointer;               /* whole field / yellow icon opens the picker */
}
.book-ride-one .booking-form-one input[type="date"]::-webkit-datetime-edit {
  padding: 0;
  line-height: normal;
}
.book-ride-one .booking-form-one input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;                 /* remove the duplicate control inside the field */
  -webkit-appearance: none;
}

/* ---------------------------------------------------------------------
   22) Airport Transfers (2169) & Courier Service (2176) – "Our Services" photo
   Round the service photo's corners to match the home-page imagery, and give
   it the same lift-and-shadow hover as the home statistics cards
   (`hvr-float-shadow`: rise 5px + a soft drop shadow). Scoped to each page's
   Our Services image by its attachment class so the footer logo — the only
   other image widget on these pages — is untouched.
   --------------------------------------------------------------------- */
.page-id-2169 img.wp-image-2175,
.page-id-2176 img.wp-image-2181 {
  border-radius: 10px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.page-id-2169 img.wp-image-2175:hover,
.page-id-2176 img.wp-image-2181:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
/* ---------------------------------------------------------------------
   23) Footer – remove the duplicate "Links" column and the Newsletter column
   The footer had five 20% columns: About Us · Links · Pages · Contact ·
   Newsletter. "Links" and "Pages" held the identical five-item menu, so hide
   the duplicate "Links" column and keep "Pages" (repopulated with the full
   header menu in functions.php). The client also asked to drop the Newsletter
   sign-up column, so hide that too. Widen the three remaining columns
   (About Us · Pages · Contact) to fill the row evenly. Scoped by the Elementor
   column element-ids (stable, unique to the footer template).
   --------------------------------------------------------------------- */
.site-footer .elementor-element-d80b72c,   /* Links (duplicate of Pages) */
.site-footer .elementor-element-38d10561 { /* Newsletter (removed per client) */
  display: none !important;
}
@media (min-width: 768px) {
  .site-footer .elementor-element-2bc7d4c5,  /* About Us */
  .site-footer .elementor-element-f8a1065,   /* Pages    */
  .site-footer .elementor-element-4e0b6499 { /* Contact  */
    width: 33.3333% !important;
  }
}

/* ---------------------------------------------------------------------
   24) About Us – "Contract Work" section (injected in functions.php)
   Modern icon-card grid: a centred heading + intro, then the sectors as
   rounded cards with circular icon badges that invert colour and lift with a
   soft shadow on hover (same hover language as the home statistics cards).
   --------------------------------------------------------------------- */
.goys-contract-work {
  padding: 90px 0;
  background: #ffffff;
}
.goys-contract-work .gcw-head {
  max-width: 760px;
  margin: 0 auto 50px;
  text-align: center;
}
.goys-contract-work .gcw-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: #FFC000;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.goys-contract-work .gcw-head h2 {
  margin: 0 0 16px;
  color: #111111;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.goys-contract-work .gcw-head p {
  margin: 0;
  color: #717171;
  font-size: 17px;
  line-height: 1.7;
}
.goys-contract-work .gcw-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.goys-contract-work .gcw-card {
  background: #F7F7F7;
  border-radius: 14px;
  padding: 36px 20px;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.goys-contract-work .gcw-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  background: #ffffff;
}
.goys-contract-work .gcw-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: #FFF3D0;
  color: #FFC000;
  transition: background .3s ease, color .3s ease;
}
.goys-contract-work .gcw-icon i {
  font-size: 30px;
  line-height: 1;
}
.goys-contract-work .gcw-card:hover .gcw-icon {
  background: #FFC000;
  color: #ffffff;
}
.goys-contract-work .gcw-card h3 {
  margin: 0;
  color: #111111;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}
@media (max-width: 1100px) {
  .goys-contract-work .gcw-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .goys-contract-work { padding: 60px 0; }
  .goys-contract-work .gcw-head h2 { font-size: 32px; }
  .goys-contract-work .gcw-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
  .goys-contract-work .gcw-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   25) About Us – "What we're offering" card images
   The three service photos are swapped for the AboutUs assets in
   functions.php. The Courier shot is portrait, so give all three cards a
   uniform height and centre-crop (the image-block already clips + rounds the
   top corners) — the row stays even and the Courier image shows its centre.
   --------------------------------------------------------------------- */
.page-id-2164 .single-offer-one .image-block > img {
  height: 260px;
  object-fit: cover;
  object-position: center;
}
/* Long Distance card: the source is now cropped to the same 1.33 landscape
   framing as the Airport card (car centred, sky/road margins), so it can share
   the siblings' `cover` treatment and fill the card to the identical height —
   no more short, floating image. The margins absorb the cover-crop, so the whole
   car stays visible. (Marker class kept in case per-card tuning is needed.) */
.page-id-2164 .single-offer-one .image-block > img.goys-longdistance-img {
  object-position: center;
}

/* ---------------------------------------------------------------------
   26) Header "Book Online" menu item -> highlighted pill button
   The last nav item (#menu-item-2252, "Book Online") is a plain text link
   like every other item, so it reads as just another word in the menu.
   Turn it into a padded, rounded pill button so it stands out as the primary
   call to action. Because the two header variants sit on opposite-coloured
   bars — header-one is a solid yellow (#FFC000) pill, header-two is a solid
   dark (#111111) bar — the button uses inverted brand colours per header so
   it always contrasts with the bar behind it:
     • header-one (yellow bar): dark pill + yellow text.
     • header-two (dark bar):   yellow pill + dark text.
   Hover lifts the button and deepens the fill. The theme's dot-underline and
   hover text-shadow are suppressed on this item so only the pill shows.
   Scoped to the Book Online menu id so no other nav item is affected.
   --------------------------------------------------------------------- */
.site-header .header-navigation ul.navigation-box > li#menu-item-2252 > a {
  display: inline-block;
  /* !important beats the theme's `.header-one .navigation-box > li > a
     { padding:0 !important }` reset (present on the live build only), which
     otherwise collapsed the pill to zero padding on the home header. Our ID
     selector already out-specifies that reset, so with !important it wins. */
  padding: 10px 26px !important;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease, transform .3s ease;
}
/* Kill the theme's dot-underline marker + hover text-shadow on the button. */
.site-header .header-navigation ul.navigation-box > li#menu-item-2252 > a:before {
  display: none;
}
.site-header .header-navigation ul.navigation-box > li#menu-item-2252:hover > a {
  text-shadow: none;
}

/* header-one (yellow bar) — dark pill, yellow text. */
.site-header.header-one .header-navigation ul.navigation-box > li#menu-item-2252 > a {
  background-color: #111111;
  color: #FFC000;
}
.site-header.header-one .header-navigation ul.navigation-box > li#menu-item-2252 > a:hover,
.site-header.header-one .header-navigation ul.navigation-box > li#menu-item-2252:hover > a {
  background-color: #000000;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30);
}

/* header-two (dark bar) — yellow pill, dark text. Flat (no glow/shadow) per
   the inner-page brief; on hover it inverts to a dark pill with off-white
   ("dark white") text so the label stays legible without any glow. */
.site-header.header-two .header-navigation ul.navigation-box > li#menu-item-2252 > a {
  background-color: #FFC000;
  color: #111111;
  box-shadow: none;
}
.site-header.header-two .header-navigation ul.navigation-box > li#menu-item-2252 > a:hover,
.site-header.header-two .header-navigation ul.navigation-box > li#menu-item-2252:hover > a {
  /* Raised dark fill (not the bar's #111) so the pill shape stays visible on
     the dark header while the text reads as off-white. No glow. */
  background-color: #363636;
  color: #ededed;
  transform: translateY(-2px);
  box-shadow: none;
}

/* Inner-page phone button: drop the handset icon, keep the number. The
   contact-btn-block is a flex row [icon-block][text-block]; hide the icon and
   remove the text's now-orphaned left gap so the number sits flush. */
.site-header.header-two .header-navigation .container .right-side-box .contact-btn-block .icon-block {
  display: none;
}
.site-header.header-two .header-navigation .container .right-side-box .contact-btn-block .text-block {
  margin-left: 0;
}

/* Mobile stacked menu (<1200px): keep the pill self-contained and spaced so it
   doesn't butt against the neighbouring links in the drop-down panel. */
@media (max-width: 1199px) {
  .site-header .header-navigation ul.navigation-box > li#menu-item-2252 > a {
    display: inline-block;
    margin: 8px 0;
  }
}

/* ---------------------------------------------------------------------
   27) Courier Service (2176) "Our Services" photo — centre-cropped & tall
   The photo (OurService.webp, a 4298×5372 portrait, wp-image-2181) sat as a
   plain <img> that just scaled to its column, ending up roughly the same
   height as the text beside it. Make it a bold, magazine-style feature:
   crop it to a fixed height taller than the section's content and lock the
   focal point to the centre of the frame (object-position: center) so the
   handover is always what's shown. Small negative top/bottom margins let the
   image bleed just beyond the section so it reads as taller than the section
   itself, while the text column stays vertically centred against it.
   Scoped to the image's Elementor column so nothing else on the page moves.
   --------------------------------------------------------------------- */
.page-id-2176 .elementor-element-43c8ce9 > .elementor-widget-wrap {
  align-content: center;
  justify-content: center;
}
.page-id-2176 img.wp-image-2181 {
  width: 100%;
  height: 640px;                 /* taller than the adjacent text column */
  object-fit: cover;             /* crop rather than squash the portrait   */
  object-position: center;       /* focus on the centre of the photo       */
  margin-top: -40px;             /* rise above the section…                 */
  margin-bottom: -40px;          /* …and drop below it, so it overshoots    */
}
@media (max-width: 991px) {
  /* Stacked layout: keep it tall but pull the bleed in so it doesn't collide
     with the heading above or the CTA band below. */
  .page-id-2176 img.wp-image-2181 {
    height: 460px;
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* ---------------------------------------------------------------------
   28) Home (2158) welcome "video-block-one" — plain section heading
   The car photo + play button (.image-block) is removed in functions.php.
   Drop the theme's grey rounded panel entirely and render the heading as a
   normal centred section heading, matching the "Numbers speak" .block-title
   h2 exactly (60px / 700 / #111 / letter-spacing -.04em, scaling down the
   same way at each breakpoint). The <h3> keeps the theme's markup but adopts
   the h2 look so the two sections read as peers.
   --------------------------------------------------------------------- */
.page-id-2158 .about-style-one .video-block-one {
  background-color: transparent;
  border-radius: 0;
  overflow: visible;
}
.page-id-2158 .about-style-one .video-block-one .content-block {
  -webkit-box-flex: 1;
          flex: 1 1 100%;
  width: 100%;
  text-align: left;   /* left-aligned to line up with the paragraph below */
  padding: 0;
}
.page-id-2158 .about-style-one .video-block-one .content-block h3 {
  color: #111111;
  font-weight: 700;
  font-size: 28px;          /* matches the blog-card title size, not Numbers speak */
  letter-spacing: -.04em;
  line-height: 1.3;
}
@media (max-width: 375px) {
  .page-id-2158 .about-style-one .video-block-one .content-block h3 {
    font-size: 20px;        /* mirrors the blog title's small-screen size */
  }
}

/* ---------------------------------------------------------------------
   29) Airport Transfers (2169) – injected "Airport Transfer Fares" banner
   functions.php lifts the Airport Transfers fare card from the Taxi Prices
   page and injects it (`.goys-airport-fares`) between the service intro and
   the "Call now" CTA. It reuses the theme's `taxi-fare-one` markup, so it
   inherits the card styling; these rules only adapt it to a single, centred
   card and lay the 9-row price list out in two columns on desktop so it reads
   as a compact banner rather than one tall strip.
   --------------------------------------------------------------------- */
.page-id-2169 .goys-airport-fares {
  padding-top: 80px;
  padding-bottom: 90px;
  background-color: #F3F3F3;
}
/* Centre the single card (fallback if Bootstrap's justify-content-center
   isn't applied) and give it comfortable, not cavernous, padding. */
.page-id-2169 .goys-airport-fares .row {
  -webkit-box-pack: center;
          justify-content: center;
}
.page-id-2169 .goys-airport-fares .single-taxi-fare-one {
  padding: 55px 60px;
  margin-bottom: 30px;
}
/* Two-column fare list on tablet/desktop; single column on phones. */
@media (min-width: 768px) {
  .page-id-2169 .goys-airport-fares .features-list {
    -webkit-column-count: 2;
            column-count: 2;
    -webkit-column-gap: 50px;
            column-gap: 50px;
  }
  .page-id-2169 .goys-airport-fares .features-list li {
    -webkit-column-break-inside: avoid;
            break-inside: avoid;
  }
}
.page-id-2169 .goys-airport-fares .features-list li {
  padding: 6px 0;
  gap: 12px;                 /* keep name + price apart in the narrow columns */
}
.page-id-2169 .goys-airport-fares .features-list li .price-line {
  white-space: nowrap;       /* never break "£300.00" across lines */
}
.page-id-2169 .goys-airport-fares .block-text {
  margin-top: 10px;
}
.page-id-2169 .goys-airport-fares .block-text a {
  color: #111111;
  font-weight: 700;
  text-decoration: underline;
}
@media (max-width: 575px) {
  .page-id-2169 .goys-airport-fares {
    padding-top: 55px;
    padding-bottom: 60px;
  }
  .page-id-2169 .goys-airport-fares .single-taxi-fare-one {
    padding: 40px 25px;
  }
}

/* ---------------------------------------------------------------------
   30) Home header (.header-one) — black "Phone line" block must fill the
   yellow bar's full height (static pill AND sticky bar)
   The theme's `.contact-btn-block` takes its height only from its own vertical
   padding (25.5px), which is shorter than the yellow header bar (the menu
   items use 30.5px padding). Since the block sits inside the bar at the right
   edge, the taller yellow background bled around the block's rounded right cap
   — a thin yellow arc showed above and below it (and, in the sticky state, a
   yellow gap top/bottom before the black screen-edge seam).

   Stretch the absolutely-positioned right-side-box to the bar's full height
   (top:0 + bottom:0) and let the black block fill it (height:100%, contents
   re-centred with flex now that the centring padding is removed). The block's
   existing right-corner radius then lines up exactly with the pill's corner in
   the static state, and with the full-height black `:after` seam in the sticky
   state — so no yellow shows through in either header. Applies to both states
   because `.header-navigation` is present static and `.stricky-fixed`.
   --------------------------------------------------------------------- */
.site-header.header-one .header-navigation .right-side-box {
  top: 0;
  bottom: 0;
}
.site-header.header-one .header-navigation .right-side-box .contact-btn-block {
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}
/* Sticky bar only: the nav element is `.navbar`, which carries Bootstrap's
   default 8px top/bottom padding. In the sticky state the nav itself is the
   yellow bar, so that padding renders as an 8px yellow strip above and below
   the full-height black block + its screen-edge `:after` seam (both sized to
   the inset container). Zero the nav's vertical padding so the yellow bar
   collapses to exactly the container height and the black covers it edge to
   edge. Static (non-sticky) header keeps the padding — there the nav is
   transparent, so it's just breathing room above the floating pill. */
.site-header.header-one .header-navigation.stricky-fixed {
  padding-top: 0;
  padding-bottom: 0;
}
/* The theme nudges the sticky block up 1px (`margin-top:-1px`), which now
   leaves a 1px yellow sliver at the block's bottom edge; reset it so the black
   block aligns flush top and bottom with the collapsed bar. */
.site-header.header-one .header-navigation.stricky-fixed .container .right-side-box .contact-btn-block {
  margin-top: 0;
}

/* ---------------------------------------------------------------------
   31) Taxi Prices (2182) — tighten the gap between the intro/CTA block and
   the "Our Taxi Fares" section.
   The intro is a conexi_about3 widget (.about-style-two, padding-bottom
   120px) whose right-hand photo column is hidden (section 17), so the copy
   + "Book Online" pill are short — but the section keeps its full 120px
   bottom padding. Stacked on the fares section's 105px padding-top that
   left ~225px of dead space under the button. Trim both so the two blocks
   read as one continuous flow with a single, deliberate section gap.
   --------------------------------------------------------------------- */
.page-id-2182 .about-style-two {
  padding-bottom: 45px;
}
.page-id-2182 .taxi-fare-one {
  padding-top: 55px;
}
@media (max-width: 767px) {
  .page-id-2182 .about-style-two {
    padding-bottom: 30px;
  }
  .page-id-2182 .taxi-fare-one {
    padding-top: 40px;
  }
}

/* ---------------------------------------------------------------------
   32) About Us (2164) — tighten the gap between the intro/CTA block and
   the injected "Contract Work" section.
   Same situation as section 31 on Taxi Prices: the intro is a conexi_about3
   widget (.about-style-two, padding-bottom 120px) whose right-hand photo
   column is hidden (section 17), so the copy + "Book Now" pill are short —
   but the section keeps its full bottom padding. Stacked on the injected
   .goys-contract-work section's 90px padding-top, that left a large band of
   dead white space under the button. Trim both so the two blocks read as one
   continuous flow with a single, deliberate section gap.
   --------------------------------------------------------------------- */
.page-id-2164 .about-style-two {
  padding-bottom: 45px;
}
.page-id-2164 .goys-contract-work {
  padding-top: 55px;
}
@media (max-width: 767px) {
  .page-id-2164 .about-style-two {
    padding-bottom: 30px;
  }
  .page-id-2164 .goys-contract-work {
    padding-top: 40px;
  }
}

/* ---------------------------------------------------------------------
   SEO: heading structure (see inc/seo-migration.php §10)

   The page-title in the inner-page hero is promoted from <h2> to <h1> for
   a single, meaningful H1 per page. Mirror the parent's `.inner-banner h2`
   rules (style.css:3675 / responsive.css:645) onto `.inner-banner h1` so
   the promotion is visually identical — nothing moves on the page.
   --------------------------------------------------------------------- */
.inner-banner h1 {
  font-size: 60px;
  letter-spacing: -.02em;
  font-weight: 700;
  color: #fff;
  margin-top: 10px;
}
@media (max-width: 767px) {
  .inner-banner h1 {
    font-size: 40px;
  }
}

/* Screen-reader-only H1 on the home page: present for SEO/accessibility,
   invisible on screen (the visible hero is the rotating slider). Standard
   visually-hidden pattern — does not affect layout. */
.goys-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   25) Footer bottom bar – keep the legal links visible at every width
   The theme's bottom bar (`.inner-container`) is a non-wrapping flex row
   (justify-content:space-between) that only stacks into a column below
   575px. Between ~576–767px — and any time the left copyright block is
   wide — the right-hand legal links (Privacy Policy · Cookie Policy) get
   squeezed and pushed off the right edge, so they effectively disappear.
   Let the bar wrap so the links drop onto their own line instead of
   overflowing, and stack cleanly on tablet/mobile. (The "Terms of Use"
   link is removed server-side in functions.php.)
   --------------------------------------------------------------------- */
.site-footer .bottom-footer .inner-container {
  flex-wrap: wrap;
  gap: 18px 24px;
}
/* The legal links themselves wrap within their block so two links never
   overflow a narrow viewport; the flex gap replaces the theme's
   `li + li { margin-left:16px }`, which mis-spaces the first item of a
   wrapped row. */
.site-footer .bottom-footer .link-lists {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.site-footer .bottom-footer .link-lists li + li {
  margin-left: 0;
}
@media (max-width: 767px) {
  .site-footer .bottom-footer .inner-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .site-footer .bottom-footer .right-block .link-lists {
    justify-content: flex-start;
  }
}

/* ---------------------------------------------------------------------
   26) Privacy Policy & Cookie Policy pages – always show the content
   A site-wide scroll-reveal snippet adds `.gx-reveal` (opacity:0) to the
   page banner and every Elementor widget, then fades each one in with an
   IntersectionObserver once it scrolls into view. The policy pages are a
   single very tall text widget, which the observer never registers as
   sufficiently "in view", so the entire policy text (and the page title)
   stays stuck at opacity:0 — invisible on mobile and tablet no matter how
   far you scroll. Legal text must always be readable, so neutralise the
   reveal on just these two pages; the fade-in still runs everywhere else.
   Scoped by page id: 2186 = Privacy Policy, 2188 = Cookie Policy.
   --------------------------------------------------------------------- */
.page-id-2186 .gx-reveal,
.page-id-2188 .gx-reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* ---------------------------------------------------------------------
   33) Header phone relocated under the email + eight-item menu fit + alignment
   The primary menu now carries eight items (Home … Testimonials + the
   Book Online pill). The phone (`.right-side-box`/`.contact-btn-block`)
   used to sit absolutely-pinned at the right of the menu row, so the extra
   item collided with it and wrapped "Book Online" onto a second line.

   conexi_child_relocate_header_phone() (functions.php) moves the phone block
   OUT of the nav and into the top bar — under the email — tagging it
   `.gx-phone-topbar`. Here we (a) restyle that moved block to read as a quiet
   contact line beneath the email, and (b) free the menu row so all eight
   items sit on one line again. Works on both header variants (home /
   header-one and inner / header-two).
   --------------------------------------------------------------------- */
/* (a) The relocated phone → a quiet line under the email. Reset every trace
   of the nav pill (absolute position, pill background, fixed sizing). */
.site-header .top-bar .gx-phone-topbar {
  margin-top: 6px;
  text-align: right;
}
.site-header .top-bar .gx-phone-topbar .contact-btn-block {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  background: none !important;
  box-shadow: none !important;
  border: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}
.site-header .top-bar .gx-phone-topbar .contact-btn-block:hover { color: #FFC000; }
.site-header .top-bar .gx-phone-topbar .icon-block {
  position: static;
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  background: none;
  border-radius: 0;
  line-height: 1;
  font-size: 14px;
  color: #FFC000;              /* match the gold envelope icon on the email */
}
.site-header .top-bar .gx-phone-topbar .text-block {
  display: inline;
  padding: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}
.site-header .top-bar .gx-phone-topbar .tag-line { display: none; }  /* drop "Phone line" */

/* header-two: the phone joins the right-aligned contact column, flush right
   and directly beneath the email <li>. */
.site-header.header-two .top-bar .contact-infos .gx-phone-topbar {
  align-self: flex-end;
}

/* (b) Keep all eight items on ONE row. The theme floats the menu <li>, and
   floats wrap to a new line as soon as their combined width exceeds the row —
   `white-space:nowrap` can't stop that. Switching the list to a non-wrapping
   flex row forces a single line (there is comfortable width to spare once the
   items are laid out inline). Split by header because their widths differ:
   header-two dropped the phone (full-width row); header-one keeps the phone at
   the right, so we reserve a slim strip for it. */
@media (min-width: 992px) {
  /* header-two (inner pages): phone lives in the top bar, so span the full row. */
  .site-header.header-two .header-navigation .main-navigation {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
  .site-header.header-two .header-navigation ul.navigation-box {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    /* Edge-aligned with a DELIBERATE gap: the nav links start at the left page
       edge (under the logo) with a controlled, even spacing between them, and
       the Book Online pill is pushed to the right page edge (under the
       email/socials). The menu lines up with the site's content edges without
       stretching every tab apart. */
    justify-content: flex-start;
  }
  .site-header.header-two .header-navigation ul.navigation-box > li > a { font-size: 14px; }
  /* The single, tunable "spacing between each tab". */
  .site-header.header-two .header-navigation ul.navigation-box > li + li { margin-left: 30px !important; }
  /* Collect the spare width into ONE clean gap before the CTA (which sits at the
     right page edge) instead of spreading it across every tab. */
  .site-header.header-two .header-navigation ul.navigation-box > li#menu-item-2252 { margin-left: auto !important; }
}

/* HOME header (header-one) is intentionally left to its original §4 styling —
   the client is happy with it exactly as it was, so no overrides here. */

/* Mobile (< 992px): the nav collapses to a hamburger and the top bar stacks
   into a centred column — centre the relocated phone so it doesn't hug the
   right edge. */
@media (max-width: 991px) {
  .site-header .top-bar .gx-phone-topbar { text-align: center; }
  .site-header.header-two .top-bar .contact-infos .gx-phone-topbar { align-self: center; }
}


/* ---------------------------------------------------------------------
   34) About Us — "Our Story" owner introduction (family photo + quote)
   Injected after the welcome section by conexi_child_about_contract_work()
   (functions.php), gated on assets/images/AboutUs/clientfamily.webp existing.
   A warm, personal band: the owners' family photo beside a first-person quote,
   so the page opens on a human note. Inherits the site's Poppins type; uses the
   brand gold (#FFC000) for the accent, quote badge and signature rule.
   --------------------------------------------------------------------- */
.goys-about-story {
  padding: 90px 0;
  background: linear-gradient(180deg, #fffdf9 0%, #f7f4ee 100%);
}
.goys-about-story .container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}
.goys-about-story .gas-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.goys-about-story .gas-media {
  margin: 0;
  position: relative;
}
.goys-about-story .gas-media img {
  width: 100%;
  height: auto;                    /* natural portrait ratio (900×1043) — no crop */
  border-radius: 20px;
  box-shadow: 0 30px 60px -25px rgba(20, 22, 28, 0.4);
  display: block;
}
/* Decorative gold quote badge tucked over the photo's top-left corner. */
.goys-about-story .gas-media::after {
  content: "\201C";
  position: absolute;
  left: -14px;
  top: -22px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #FFC000;
  color: #1a1c24;
  font: 800 46px/70px Georgia, "Times New Roman", serif;
  text-align: center;
  box-shadow: 0 14px 26px -8px rgba(255, 192, 0, 0.6);
}
.goys-about-story .gas-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c79200;
  margin-bottom: 12px;
}
.goys-about-story .gas-body h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.15;
  color: #1a1c24;
  margin: 0 0 22px;
}
/* Neutralise the theme's global <blockquote> skin (yellow fill, padding and
   injected quote-mark icons) — we want clean quoted text on the warm band. */
.goys-about-story .gas-quote {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  quotes: none;
  font-style: normal;
}
.goys-about-story .gas-quote::before,
.goys-about-story .gas-quote::after,
.goys-about-story .gas-quote p::before,
.goys-about-story .gas-quote p::after {
  content: none !important;
  display: none !important;
}
.goys-about-story .gas-quote p {
  font-size: 18px;
  line-height: 1.75;
  color: #3a3f4b;
  margin: 0 0 16px;
  padding: 0;
  background: none;
}
.goys-about-story .gas-sign {
  display: inline-block;
  margin-top: 10px;
  padding-top: 14px;
  font-size: 20px;
  font-weight: 700;
  color: #1a1c24;
  border-top: 2px solid #FFC000;
}
@media (max-width: 991px) {
  .goys-about-story { padding: 64px 0; }
  .goys-about-story .gas-grid { grid-template-columns: 1fr; gap: 36px; }
  /* Keep the portrait from dominating the stacked layout — cap its height and
     centre the crop so the couple stays framed. */
  .goys-about-story .gas-media img { max-height: 460px; object-fit: cover; }
  .goys-about-story .gas-media::after { left: 8px; top: -18px; }
}

/* ---------------------------------------------------------------------
   35) Service pages "Our Services" CTA — brand the Elementor button
   The Airport Transfers (2169) and Courier Service (2176) service sections end
   with an Elementor button ("Book Online") that renders in Elementor's DEFAULT
   grey skin — off-brand and looking broken next to the site's yellow CTAs.
   Restyle it to the brand yellow pill with dark text (inverting to a dark pill
   on hover), matching the header "Book Online" CTA.
   --------------------------------------------------------------------- */
.page-id-2169 .elementor-widget-button .elementor-button,
.page-id-2176 .elementor-widget-button .elementor-button {
  background-color: #FFC000 !important;
  color: #111111 !important;
  border: none !important;
  border-radius: 30px !important;
  padding: 15px 36px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  box-shadow: 0 12px 26px -12px rgba(255, 192, 0, 0.7);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}
.page-id-2169 .elementor-widget-button .elementor-button .elementor-button-text,
.page-id-2176 .elementor-widget-button .elementor-button .elementor-button-text {
  color: inherit !important;
}
.page-id-2169 .elementor-widget-button .elementor-button:hover,
.page-id-2176 .elementor-widget-button .elementor-button:hover,
.page-id-2169 .elementor-widget-button .elementor-button:focus,
.page-id-2176 .elementor-widget-button .elementor-button:focus {
  background-color: #111111 !important;
  color: #ededed !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------------------------
   Home page – remove the blog section
   The home page (body.home, page-id-2158) renders the blog as two
   consecutive Elementor top-level sections: the "From our blog /
   News & Updates" title band (widget conexi_h1_blog_title) and the
   posts grid below it (widgets conexi_blog_left / conexi_blog_right).
   The demo blog content isn't wanted on the front page, so hide both.
   Data-ids are unique to this Elementor page; the .home prefix keeps the
   rule scoped to the front page only.
   --------------------------------------------------------------------- */
.home .elementor-element-7848f1c0,   /* blog title band */
.home .elementor-element-7ce1d01 {   /* blog posts grid  */
  display: none !important;
}

/* ---------------------------------------------------------------------
   Book Online – injected journey fields (see inc/emails.php)
   Pick-up/drop-off/passengers/return don't exist as CF7 tags on form
   2250, so the child theme injects them into the rendered markup. The
   text and number inputs inherit the theme's grey pill automatically
   (.contact-form-style-one input), but its rule doesn't cover <select>,
   so the return-journey dropdown is matched to the pill here.
   --------------------------------------------------------------------- */
.contact-form-style-one .gx-select {
  border: none;
  outline: none;
  width: 100%;
  background-color: #F3F3F3;
  height: 67px;
  border-radius: 33.5px;
  padding-left: 40px;
  padding-right: 40px;
  color: #717171;
  font-size: 14px;
  font-weight: 600;
  display: block;
  cursor: pointer;
  /* Drop the OS control skin so it matches the flat pill inputs, then
     re-add a chevron (none is drawn once appearance is stripped). */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath fill='none' stroke='%23717171' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 30px center;
}

/* Unselected state reads as a placeholder, matching the other fields. */
.contact-form-style-one .gx-select:invalid,
.contact-form-style-one .gx-select option[value=""] {
  color: #717171;
}

/* The passengers field is type=number for a numeric keypad on mobile; the
   spinner arrows would collide with the pill's right padding. */
.contact-form-style-one .gx-injected-field input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.contact-form-style-one .gx-injected-field input[type="number"]::-webkit-outer-spin-button,
.contact-form-style-one .gx-injected-field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---------------------------------------------------------------------
   Contact Form 7 – field validation errors
   CF7 ships .wpcf7-not-valid-tip as a bare `display:block` with no
   padding, so the error sits flush against the pill's outer edge while
   the field's own text is inset by the pill's 40px padding — the two
   read as unrelated. Indenting the tip to the same 40px lines it up
   under the text it refers to, on every CF7 form on the site: Contact
   Us and Book Online (.contact-form-style-one), the home "Make your
   booking" form, and the blog comment form. All three input styles use
   padding-left:40px at every breakpoint, so one value covers them.
   The 1em default is also larger than the 14px fields it annotates.
   --------------------------------------------------------------------- */
.contact-form-style-one .wpcf7-not-valid-tip,
.book-ride-one .booking-form-one .wpcf7-not-valid-tip,
.single-blog-details-page .reply-comment-block .contact-form-one .wpcf7-not-valid-tip {
  padding-left: 40px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
}

/* The home booking form sits on #111111, where CF7's default red only
   reaches ~4:1 contrast — under the 4.5:1 minimum for body text. */
.book-ride-one .booking-form-one .wpcf7-not-valid-tip {
  color: #FF6B6B;
}

/* ---------------------------------------------------------------------
   Home "Make your booking" – form-level response message
   CF7 only ever sets a *border* colour on .wpcf7-response-output and
   leaves the text to inherit. On this section that inherits #212529
   (near-black) against #111111 — a 1.22:1 contrast, i.e. invisible.
   The section also carries a photographic background, so plain white
   text alone isn't dependable either: the scrim guarantees the message
   is readable wherever it lands over the image. CF7's own state colours
   (yellow invalid / green sent / red failed) are left on the border,
   which is the only cue distinguishing them.
   Scoped to this section — the Contact Us and Book Online forms sit on
   white, where the inherited near-black already reads fine.
   Note the selector stops at .book-ride-one: the theme closes
   .booking-form-one *before* the response output (the tips above are
   inside it, this isn't), so going a level deeper matches nothing.
   --------------------------------------------------------------------- */
.book-ride-one .wpcf7-response-output {
  color: #FFFFFF;
  background-color: rgba(0, 0, 0, 0.62);
  border-radius: 12px;
  padding: 13px 24px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------
   Home "Make your booking" – injected fields (see inc/emails.php)
   Phone, return journey and notes don't exist as CF7 tags on form 117,
   so the child theme injects them to match the Book Online form. The
   phone input inherits the theme's dark pill for free
   (.book-ride-one .booking-form-one input), but that rule covers `input`
   only, so the <select> and <textarea> would render as unstyled browser
   controls on the dark section. These match them to the pill.
   --------------------------------------------------------------------- */
.book-ride-one .booking-form-one .gx-select,
.book-ride-one .booking-form-one .gx-textarea {
  border: none;
  outline: none;
  width: 100%;
  background-color: #242424;
  color: #B5B5B5;
  font-size: 14px;
  font-weight: 600;
  display: block;
  padding-left: 40px;
  padding-right: 40px;
}

.book-ride-one .booking-form-one .gx-select {
  height: 67px;
  border-radius: 33.5px;
  cursor: pointer;
  /* Strip the OS control skin so it matches the flat pills, then draw our
     own chevron (none is rendered once appearance is removed). */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath fill='none' stroke='%23B5B5B5' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 30px center;
}

/* The dropdown list itself is drawn by the OS, which uses the element's own
   colours: without this the options render dark-on-dark in some browsers. */
.book-ride-one .booking-form-one .gx-select option {
  background-color: #242424;
  color: #EDEDED;
}

/* Notes: a pill shape makes no sense multi-line, so soften to a rounded box
   and let it grow instead of forcing the 67px field height. */
.book-ride-one .booking-form-one .gx-textarea {
  height: auto;
  min-height: 120px;
  border-radius: 24px;
  padding-top: 22px;
  padding-bottom: 22px;
  resize: vertical;
}

.book-ride-one .booking-form-one .gx-textarea::-webkit-input-placeholder { color: #B5B5B5; }
.book-ride-one .booking-form-one .gx-textarea::-moz-placeholder { color: #B5B5B5; }
.book-ride-one .booking-form-one .gx-textarea:-ms-input-placeholder { color: #B5B5B5; }

/* ---------------------------------------------------------------------
   Mobile menu – keep the nav labels clear of the phone block
   The header's phone block (.right-side-box) is position:absolute;
   right:0 with z-index:99 on .contact-btn-block, so when the collapsed
   menu is opened it paints straight over the right-hand side of the
   list. The links are full-width, so a long label ("Airport Transfers")
   runs underneath it and is unreadable — measured at 320/390/414px.
   Reserving the block's width as padding-right makes those labels wrap
   onto a second line instead. Padding rather than max-width so the row
   stays full-width (its background/underline effect are unaffected);
   the reserved strip sits under the phone block anyway, which owns the
   taps there regardless.
   The theme sets this padding with !important in two places
   (responsive.css), hence !important plus a .site-header prefix to
   out-specify both.
   Only applies below 1200px, which is where the theme collapses the
   menu and the phone block starts overlapping it.
   --------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .site-header .header-navigation ul.navigation-box > li > a {
    padding-right: 245px !important;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* At <=375px the theme hides the phone icon, so the block narrows to
   ~160px (responsive.css @media max-width:375px). Reserving the full
   245px there would needlessly squeeze the labels into ~80px. */
@media (max-width: 375px) {
  .site-header .header-navigation ul.navigation-box > li > a {
    padding-right: 170px !important;
  }
}

/* ---------------------------------------------------------------------
   Home hero – rolling taxi checker strip under the banner
   The theme already draws this band at the bottom of the booking
   section (.book-ride-one:after): a 38px strip tiling
   resources/zigzag-box-2.png (a 38x38 tile) horizontally, rolled along
   by the parent theme's `bgSlide` keyframes. Reused here rather than
   rebuilt, so the two bands stay identical if the tile is ever changed.

   Done as a pseudo-element on the hero for the same reason the theme
   does it: no markup, so nothing to add to the Elementor/DB layout, and
   it sits at the banner's bottom edge exactly like the booking one
   rather than adding 38px of page height.

   .banner-style-one is also .owl-carousel, which is already
   position:relative, so the strip anchors to the hero. Only the home
   page uses this banner, so no other page picks it up.
   pointer-events:none keeps it from swallowing carousel clicks/swipes.
   --------------------------------------------------------------------- */
.banner-style-one:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38px;
  background-color: #111111;
  background-image: url(../conexi/assets/images/resources/zigzag-box-2.png);
  background-repeat: repeat-x;
  -webkit-animation: bgSlide 20s linear infinite;
          animation: bgSlide 20s linear infinite;
  z-index: 3;
  pointer-events: none;
}

/* Motion that loops forever with no way to stop it is precisely what this
   preference exists for; the strip still reads as a taxi checker when
   static, so nothing is lost. Covers the theme's existing band too. */
@media (prefers-reduced-motion: reduce) {
  .banner-style-one:after,
  .book-ride-one:after {
    -webkit-animation: none;
            animation: none;
  }
}

/* ---------------------------------------------------------------------
   Home hero – equal-height slides (fixes the white gap on small screens)
   Owl sizes .owl-stage to the TALLEST slide, but each .slide is only as
   tall as its own content, and each slide's photo is its background. At
   320px the "Airports, Stations & Long…" and "Friendly & Reliable…"
   headings wrap to three lines (632px) while "Competitive Taxi Prices"
   wraps to two (582px) — so whenever that shorter slide is showing, the
   last 50px of the stage has no background and the page shows through
   as a white band.
   Stretching every slide to the stage height puts a background behind
   those pixels. Flex, so the height is whatever the tallest slide needs
   rather than a magic min-height that would need re-tuning per
   breakpoint and per heading edit.
   Measured GAP=0 at 320/360/414/768/1280 after this; slide heights come
   out equal at every one of those widths.
   Scoped to this carousel so the site's other Owl sliders keep their
   float layout untouched.
   --------------------------------------------------------------------- */
.banner-style-one .owl-stage {
  display: flex;
}

.banner-style-one .owl-stage .owl-item {
  display: flex;
  flex-direction: column;
}

/* flex:1 so a short slide grows to fill; width:100% because a flex child
   ignores the float/width Owl sets and would otherwise shrink to fit. */
.banner-style-one .owl-stage .owl-item .slide {
  flex: 1 1 auto;
  width: 100%;
}