/* DM Sans is loaded via a <link> in header.php's <head> (parallel fetch) instead of @import here */

:root {

  --font-gamily: 'DM Sans', sans-serif;

  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-primary: #26A9E0;
  --navy-900: #043673;
  --navy-800: #1c3a8d;
  --blue-600: #3170b7;
  --cyan-500: #26a9e0;
  --yellow: #f2c300;
  --green: #4eb978;
  --gray-300: #cbcbcc;
  --gray-200: #e3e2e2;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --font-weight-bolder: 800;
  --font-weight-light: 300;

}

/* ============================================================
   MOTION — single source of truth for scroll-reveal + hover timing.
   --reveal-easing matches the cubic-bezier already used site-wide
   for button/card hover states, so scroll-in and hover motion feel
   like one consistent language instead of many one-off tweaks.
   ============================================================ */
:root {
  --reveal-distance: 28px;
  --reveal-duration: 0.6s;
  --reveal-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --hover-duration: 280ms;
}

/* Shared scroll-reveal: element starts hidden/offset, JS adds
   .is-visible (once, via IntersectionObserver) to reveal it. */
.reveal-up {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) var(--reveal-easing),
              transform var(--reveal-duration) var(--reveal-easing);
}
.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-up,
  .mile-card,
  .sts-grop-img-wrapper .card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* The 4 service detail pages (Auto, School Transport, Spot2Spot, Staff &
   Tourism) share the .qq-section scroll-reveal on nearly every section on
   the page, which reads as everything perpetually sliding in on scroll -
   turned off for just these templates; .qq-section keeps animating on the
   other pages that use it (services listing, media, careers). */
body.page-template-template-auto-services-php .qq-section,
body.page-template-template-school-transport-services-php .qq-section,
body.page-template-template-spot2spot-services-php .qq-section,
body.page-template-template-staff-tourism-services-php .qq-section {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.font-800 {
  font-weight: var(--font-weight-bolder) !important;
}
.font-300 {
  font-weight: var(--font-weight-light) !important;
}
.font-400 {
  font-weight: var(--font-weight-regular) !important;
}

.font-500 {
  font-weight: var(--font-weight-medium) !important;
}

.font-600 {
  font-weight: var(--font-weight-semi-bold) !important;
}

.font-700 {
  font-weight: var(--font-weight-bold) !important;
}

.navy-900 {
  color: var(--navy-900) !important;
}
        /* ✅ ACTIVE FIX - covers every "current page" class WP's nav walker
           can output (it mixes underscore and hyphen naming depending on
           menu item type/context), so a child page like a service detail
           page correctly lights up its parent "Services" nav item too. */
        .nav-list .current-menu-item > .nav-link,
        .nav-list .current_page_item > .nav-link,
        .nav-list .current-menu-parent > .nav-link,
        .nav-list .current_page_parent > .nav-link,
        .nav-list .current-page-parent > .nav-link,
        .nav-list .current-menu-ancestor > .nav-link,
        .nav-list .current_page_ancestor > .nav-link,
        .nav-list .current-page-ancestor > .nav-link {
            color: var(--cyan-500);
        }
.navy-800 {
  color: var(--navy-800) !important;
}
.primary-color{
  color: var(--color-primary);
}
/* ============================================================
   TYPE SCALE — single source of truth for font sizes sitewide.
   Every font-size in the theme should read from one of these
   tokens (directly, or via one of the legacy aliases below).
   Each is a fluid clamp(min, preferred, max): it scales smoothly
   with the viewport, so no separate mobile/tablet overrides or
   breakpoint duplication are needed anywhere else in the CSS.
   To make text bigger/smaller sitewide, edit the values here —
   nowhere else.
   ============================================================ */
:root {
  --fs-h1:         clamp(2.25rem, 1.7rem + 2.2vw, 4rem);         /* ~36–64px: page/hero heading */
  --fs-h2:         clamp(1.75rem, 1.45rem + 1.3vw, 2.75rem);     /* ~28–44px: section heading */
  --fs-h3:         clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem);   /* ~22–30px: card / subsection heading */
  --fs-h4:         clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);  /* ~18–22px: minor heading */
  --fs-subheading: clamp(1rem, 0.9rem + 0.45vw, 1.375rem);       /* ~16–22px: intro / lead paragraph */
  --fs-body:       clamp(1rem, 0.95rem + 0.2vw, 1.125rem);       /* ~16–18px: body copy */
  --fs-small:      clamp(0.8125rem, 0.79rem + 0.1vw, 0.9375rem); /* ~13–15px: helper text */
  --fs-caption:    clamp(0.75rem, 0.735rem + 0.08vw, 0.8125rem); /* ~12–13px: labels / captions */
  --fs-button:     clamp(0.875rem, 0.85rem + 0.15vw, 1rem);      /* ~14–16px: buttons / nav links */
}

/* Legacy token names kept as aliases so every selector already using
   var(--Banner-Heading) etc. keeps working untouched — tune sizes in
   the scale above, not here. */
:root {

  /* Banner */
  --Banner-Heading: var(--fs-h1);
  --Banner-Sub-Heading: var(--fs-subheading);

  /* Sections */
  --section-Heading: var(--fs-h2);
  /* .section-sub-heading is used both as a real heading (h3/h4 in several
     templates) and as lead-paragraph text, so it keeps the subheading
     size rather than dropping to body - too small for its heading uses */
  --section-sub-headings: var(--fs-subheading);
  --section-sub-headings-contactus: var(--fs-subheading);

  /* Services */
  --Services-card-heading: var(--fs-h4);

  /* STS Card */
  --sts-card-heading: var(--fs-h4);
  --sts-card-sub-heading: var(--fs-body);

  /* About */
  --about-us-card-main-heading: var(--fs-h3);

  /* Milestones: compact stat-pin labels on the roadmap graphic, intentionally
     smaller than the main scale rather than aliased to it */
  --milestone-card-heading: clamp(0.75rem, 0.65rem + 0.7vw, 1.25rem);       /* ~12–20px */
  --milestone-card-sub-heading: clamp(0.6875rem, 0.665rem + 0.15vw, 0.75rem); /* ~11–12px */

  /* About us page */
  --our-scale2-subheading: var(--fs-small);
}

.quick-title {
    font-weight: 700 !important; /* extra bold */
}
#wpcf7-f196-o1-ve-your-email{
display:none;
}
.wpcf7-not-valid-tip{
display:none;
}


.banner-heading {
  font-size: var(--Banner-Heading);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-family: var(--font-gamily);

}

.banner-sub-heading {
  margin: 22px 0 0;
  max-width: 780px;
  font-size: var(--Banner-Sub-Heading);
  line-height: 1.26;
  font-weight: 300;
  font-family: var(--font-gamily);
}

.section-main-heading {
  font-size: var(--section-Heading);
  font-weight: 600;
  text-align: center;
  color: var(--navy-900);
  font-family: var(--font-gamily); 
}
.apply-justify{
  text-align: justify !important;
}
.section-sub-heading {
  margin: 20px auto 36px;
  max-width: 780px;
  text-align: center;
  font-size: var(--section-sub-headings);
  line-height: 1.26;
  font-weight: 400;
  font-family: var(--font-gamily);
}

.section-sub-heading-contactus{
	font-size:var(--section-sub-headings-contactus);
	line-height: 1.26;
  font-weight: 400;
  font-family: var(--font-gamily);
}

.service-card-heading {
  font-size: var(--Services-card-heading);
  line-height: 1.12;
  font-weight: 700;
  font-family: var(--font-gamily);
}


.sts-card-heading {
  margin-top: 15px !important;
  font-size: var(--sts-card-heading);
  line-height: 1.12;
  font-weight: 600;
  font-family: var(--font-gamily);
  min-height:50px;
}

.sts-card-sub-heading {
  margin: 24px 7px;
  font-size: var(--sts-card-sub-heading);
  line-height: 1.22;
  font-weight: 400;
  font-family: var(--font-gamily);
}

.about-us-card-main-heading {
  font-size: var(--about-us-card-main-heading);
  line-height: 1.12;
  font-weight: 600;
  font-family: var(--font-gamily);
}

.milestone-card-heading {
  font-size: var(--milestone-card-heading);
  line-height: 1.12;
  font-weight: 600;
  font-family: var(--font-gamily);
}

.milestone-card-sub-heading {
  font-size: var(--milestone-card-sub-heading);
  line-height: 1;
  font-weight: 500 !important;
  font-family: var(--font-gamily);
  padding-top:5px;
}


/* About us page */

.our-scale2-subheading {
  font-size: var(--our-scale2-subheading);
  line-height: 1.22;
  font-weight: 300;
  font-family: var(--font-gamily);
  color: var(--white);
}


.about-page-button {
  display: inline-flex;
  margin-top: 34px;
  text-decoration: none;
  border-radius: 999px;
  padding: 14px 38px;
  font-size: var(--fs-button);
  line-height: 1;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  border: none;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms ease, filter 300ms ease;
}

.about-page-button--dark {
  background: #0d4387;
  color: #fff;
}

.about-page-button--light {
  background: #47b9ea;
  color: #0d4387;
}

.about-page-button:hover,
.about-page-button:focus-visible {
  box-shadow: 0 16px 28px rgba(7, 58, 127, 0.3);
  filter: brightness(1.08);
}


@media (max-width: 1027px) {

  .about-page-button {
    margin-top: 25px;
  }

}

@media (max-width: 991.98px) {
  .about-page-button {
    margin-top: 18px;
  }

}


:root {
  --navy-900: #043673;
  --navy-800: #1c3a8d;
  --blue-600: #3170b7;
  --cyan-500: #26a9e0;
  --yellow: #f2c300;
  --green: #4eb978;
  --gray-300: #cbcbcc;
  --gray-200: #e3e2e2;
  --white: #ffffff;
  --content-max: 1280px;
  --gutter: 48px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: 'DM Sans', sans-serif;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a,
button,
input {
  font: inherit;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--white);
  color: var(--navy-900);
  border: 2px solid var(--navy-900);
  border-radius: 8px;
  padding: 8px 12px;
  z-index: 1000;
}

.skip-link:focus-visible {
  left: 8px;
  top: 8px;
}

/* .content {
  width: min(100%, var(--content-max));
  margin: 0 auto;
  padding-inline: var(--gutter);
} */


.header {
  position: relative;
  height: 150px;
  z-index: 10;
}

.header-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #c9c9cc 0%, #ececed 50%, #c9c9cc 100%);
}

.header-inner {
  position: relative;
  height: 150px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
}

.header .content {
  width: 100%;
  max-width: none;
  padding-inline: 0px;
}

.brand {
  justify-self: start;
  margin-left: 0;
}

.brand img {
  width: 160px;
}

.primary-nav {
  justify-self: end;
  min-width: 0;
}

.nav-toggle,
.nav-toggle-btn {
  display: none;
}

.nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 22px;
}

.nav-list a {
  text-decoration: none;
  color: var(--navy-900);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  position: relative;
  transition: color 220ms ease;
}

.nav-list a.active {
  color: var(--cyan-500);
}

.nav-list a:hover,
.nav-list a:focus-visible,
.nav-list a.active {
  color: var(--cyan-500);
}

.nav-list a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  border-radius: 99px;
  background: var(--cyan-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--hover-duration) var(--reveal-easing);
}

.nav-list a:hover::after,
.nav-list a:focus-visible::after,
.nav-list a.active::after {
  transform: scaleX(1);
}

.portal {
  text-decoration: none;
  color: var(--cyan-500);
  background: var(--navy-800);
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1;
  padding: 10px 10px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  justify-self: end;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease, background-color 260ms ease;
  animation: portal-live-pulse 2.8s ease-in-out infinite;
}

.portal::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0) 80%);
  transform: translateX(-170%);
  animation: portal-sheen 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  pointer-events: none;
}

.portal:hover,
.portal:focus-visible {
  background: #2750a8;
  box-shadow: 0 10px 22px rgba(28, 58, 141, 0.34);
}

.header-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  background: linear-gradient(90deg, var(--blue-600) 0%, var(--cyan-500) 50%, var(--blue-600) 100%);
}

@media (min-width: 1028px) and (max-width: 1439px) {
.header .content {
  padding-inline: 0px;
}

}

@media (max-width: 1027px) {
  .primary-nav {
    display: none;
  }

  /* .portal {
    display: ;
  } */

  .nav-toggle-btn {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
  }

  .nav-toggle-btn span {
    width: 25px;
    height: 3px;
    background: #000;
    display: block;
  }
}

@media (max-width: 1027px) {

  .header-inner {
    grid-template-columns: auto 1fr auto;
  }

  .nav-toggle-btn {
    justify-self: end;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 20;
  }

  .nav-toggle-btn span {
    width: 26px;
    height: 3px;
    background: var(--navy-900);
    border-radius: 2px;
    transition: 0.3s;
  }

  .primary-nav {
    display: none !important;
  }
}

.m-header-menu {
  --bs-offcanvas-width: 420px;
}

@media (max-width: 1027px) {
  .nav-toggle-btn {
    display: inline-flex;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 2px solid var(--navy-900);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.7);
  }

  .nav-list {
    display: grid;
    justify-content: stretch;
    gap: 20px;
    padding: 30px 20px 0 25px;
  }
}


.qq-section {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) var(--reveal-easing),
              transform var(--reveal-duration) var(--reveal-easing);
}

.qq-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}