/* Services page */

/* ---------- Page title ---------- */
.page-services .page-title { background-color: var(--bg-sky); padding: 5% 0; text-align: center; }
.page-services .page-title__heading {
  font-size: 36px; line-height: 36px; font-weight: 600; text-transform: uppercase; color: var(--blue);
}
.page-services .page-title__heading span { color: var(--red); font-weight: 700; }

/* ---------- Banner ---------- */
.page-services .banner {
  height: 70vh;
  background: var(--bg-sky) url("/assets/images/Airport-Taxi-Banner.webp") no-repeat 50% 100% / 100% auto;
}

/* ---------- Hero call to action ---------- */
.page-services .hero-cta { background-color: var(--bg-sky); padding: 0 0 5%; }
.page-services .hero-cta .boxed { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 60px; }  /* 50px spacer + 10px gap */
.page-services .hero-cta__text { margin: 0; font-size: 20px; line-height: 22px; font-weight: 500; color: var(--text); text-align: center; }
.page-services .hero-cta__buttons {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 22px;
  width: 100%; margin-top: 3%; position: relative; z-index: 3;
}
.page-services .hero-cta__btn {
  display: inline-block; width: 28%; max-width: 100%;
  padding: 1.4% 1.68%;
  font-size: 18px; line-height: 24px; font-weight: 700; text-transform: uppercase;
  border-radius: 10px;
}
.page-services .hero-cta__btn--quote { background-color: #C30101; }
.page-services .hero-cta__btn--quote:hover,
.page-services .hero-cta__btn--quote:focus-visible { background-color: rgba(195, 1, 1, .81); }
.page-services .hero-cta__btn--contact { background-color: #EC9720; }
.page-services .hero-cta__btn--contact:hover,
.page-services .hero-cta__btn--contact:focus-visible { background-color: var(--yellow-hover); }

/* ---------- Service rows ---------- */
.page-services .service { background-color: var(--white); padding: 5% 0; }
.page-services .service--alt { background-color: #F7F7F7; }

.page-services .services-intro { display: flex; flex-direction: column; gap: 20px; margin-bottom: 2%; text-align: center; }
.page-services .services-intro__title { font-size: 30px; line-height: 30px; font-weight: 400; text-transform: uppercase; color: var(--text); }
.page-services .services-intro__text { margin: 0; font-size: 20px; line-height: 34px; font-weight: 400; }

.page-services .split { display: flex; gap: 50px; }
.page-services .service--first .split { gap: 0; }
.page-services .split > * { flex: 1 1 0; min-width: 0; padding: 10px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.page-services .split__title { font-size: 24px; line-height: 26px; font-weight: 500; color: var(--text); }
.page-services .split__desc { margin: 0; font-size: 14px; line-height: 24px; font-weight: 400; color: var(--text); }
.page-services .split__action { text-align: left; }
.page-services .split__media { text-align: right; }
.page-services .split--img-left .split__media { text-align: left; }
.page-services .split__img { display: block; width: 100%; height: auto; }

.page-services .book {
  display: inline-block; padding: 15px 30px; border-radius: 5px;
  background-color: #C30101; color: var(--white);
  font-size: 14px; line-height: 20px; font-weight: 500; text-transform: capitalize;
}
.page-services .book:hover,
.page-services .book:focus-visible { background-color: rgba(195, 1, 1, .84); }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .page-services .banner { height: 37vh; }
  .page-services .service { padding: 4.7% 3%; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .page-services .page-title { padding: 8% 0 0; }
  .page-services .banner {
    height: 66vh;
    background-image: url("/assets/images/Airport-Taxi-Banner-MObile.webp");
    background-size: cover;
  }
  .page-services .hero-cta { padding: 14.72% 4%; }
  .page-services .hero-cta .boxed { padding-top: 0; }
  .page-services .hero-cta__text { line-height: 30px; }
  .page-services .hero-cta__buttons { padding: 0 10px; }
  .page-services .hero-cta__btn { width: 100%; padding: 5% 6%; }

  .page-services .service { padding: 14.72% 4%; }
  .page-services .services-intro { margin-bottom: 0; }
  .page-services .services-intro__text { font-size: 18px; line-height: 27px; }
  .page-services .service--first .split { margin-top: 16%; }

  .page-services .split,
  .page-services .service--first .split { flex-direction: column; gap: 20px; }
  .page-services .split > * { padding: 0; }
  .page-services .split__text { display: contents; }
  .page-services .split__title { order: 1; text-align: center; }
  .page-services .split__media { order: 2; }
  .page-services .split__desc { order: 3; font-size: 16px; text-align: center; }
  .page-services .split__action { order: 4; text-align: center; }
}