/* TO MAKE IT MOBILE FRIENDLY START */

/* GENERAL NAV */
nav ul.nav-links {
  display: flex;
  gap: 20px;
  list-style: none;
}

/* HAMBURGER MENU - hidden on desktop */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #C9A962; /* gold */
  transition: 0.3s;
}

/* HAMBURGER ACTIVE ANIMATION */
.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* --- MOBILE STYLES --- */
@media (max-width: 900px) {
  /* 1. Navbar Layout */
  header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5%;
  }

  /* 2. Show hamburger */
  .menu-toggle {
    display: flex;
    z-index: 1002;
  }

  /* 3. Dropdown Menu */
  nav ul.nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0; /* Remove gap for cleaner borders */
    position: absolute;
    top: 100%; 
    left: 0;
    width: 100%;
    background-color: #09122a; 
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    padding: 0;
    margin: 0;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  }

  /* Active Menu State */
  nav ul.nav-links.active {
    max-height: 80vh; /* Adjust based on your link count */
    padding-bottom: 20px;
    border-bottom: 3px solid #C9A962;
  }

  nav ul.nav-links li {
    width: 100%;
    text-align: center;
    border-top: 1px solid rgba(201, 169, 98, 0.1); /* Subtle gold divider */
  }

  nav ul.nav-links li a {
    display: block;
    padding: 15px 0;
    font-size: 1.1rem;
  }

  /* 4. PREVENT SQUISHING (The Layout Fix) */
  .hero-container, 
  .cards-container, 
  .services-list, 
  .testimonial-grid {
    display: flex;
    flex-direction: column !important; /* Forces items to stack vertically */
    gap: 20px;
    padding: 20px;
  }

  .hero-content, .car-long-distance {
    width: 100% !important;
    text-align: center;
  }

  /* Quick fix for the car image in the hero */
  .car-long-distance img {
    max-width: 100%;
    height: auto;
    margin-top: 20px;
  }
}

/* TO MAKE IT MOBILE FRIENDLY END */



/* REVEAL ANIMATION */

/* 1. Initial State: Hidden and slightly shifted down */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease-out;
}

/* 1. Slide Up (Your current one) */
.reveal.fade-up {
  transform: translateY(50px);
}

/* 2. Slide from Left (Good for text) */
.reveal.fade-left {
  transform: translateX(-100px);
}

/* 3. Slide from Right (Good for images) */
.reveal.fade-right {
  transform: translateX(100px);
}

/* 4. Zoom In (Good for icons or logos) */
.reveal.zoom-in {
  transform: scale(0.5);
}
/* 2. Active State: When the 'active' class is added via JS */
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}


/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

body {
  line-height: 1.6;
  color: #0B1633;
  background-color: #fff;
}

/* TOP INFO BAR */
.top-bar {
  background-color: #09122a;
  /* slightly darker navy */
  color: #fff;
  font-size: 0.9rem;
  padding: 0.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-bar-left {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.top-bar-left span,
.top-bar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.top-bar a {
  color: #fff;
  text-decoration: none;
}

.top-bar a:hover {
  color: #C9A962;
  /* gold hover */
}

.top-bar i {
  color: #C9A962;
  /* gold icons */
  font-size: 0.9rem;
}

a {
  text-decoration: none;
  color: inherit;
}

/* HEADER */
header {
  background-color: #09122a;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* THIS keeps logo and nav aligned */
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 1000;
}


header .logo img {
  height: 150px;
  /* Adjust if needed */
  width: auto;
  display: block;
}


nav ul {
  display: flex;
  gap: 1.5rem;
}

nav ul li a {
  font-weight: 500;
  transition: color 0.3s;
}

nav ul li a:hover {
  color: #C9A962;
}

/* HERO SECTION */
/* HERO SECTION */
.hero {
  background: url('images/hero-image.jpg') center/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 6rem 2rem;
  position: relative;
}


.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(11, 22, 51, 0.6);
  z-index: 0;
}


.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.hero .cta-btn {
  display: inline-block;
  background-color: #C9A962;
  color: #0B1633;
  padding: 0.75rem 1.5rem;
  margin: 0 0.5rem;
  border-radius: 8px;
  font-weight: 600;
  transition: background 0.3s, transform 0.3s;
}

.hero .cta-btn:hover {
  background-color: #C9A962;
  transform: translateY(-2px);
}

/* SERVICES */
.services {
  padding: 4rem 2rem;
  text-align: center;
  background-color: #fff;
}

.services h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
}

.service-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.service-card {
  background: #f9f9f9;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  flex: 1 1 250px;
  max-width: 300px;
  transition: transform 0.3s;
}

.service-card:hover {
  transform: translateY(-5px);
}

.service-card h3 {
  margin-bottom: 1rem;
  color: #0B1633;
}

.service-card p {
  color: #555;
}

/* TRUST */
.trust {
  padding: 4rem 2rem;
  background-color: #fefaf5;
  text-align: center;
}

.trust h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
}

.trust-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  max-width: 150px;
}

.trust-item i {
  font-size: 2rem;
  color: #C9A962;
}

/* BOOKING FORM */
.booking {
  padding: 4rem 2rem;
  text-align: center;
  background-color: #fff;
}

.booking h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
}

.booking form {
  max-width: 600px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}

.booking input,
.booking select,
.booking button {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 1rem;
  width: 100%;
}

.booking button {
  background-color: #0B1633;
  color: #fff;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
}

.booking button:hover {
  background-color: #09122a;
}

/* FOOTER */
footer {
  background-color: #0B1633;
  color: #fff;
  padding: 2rem;
  text-align: center;
}

footer a {
  color: #C9A962;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    gap: 1rem;
  }

  .service-cards {
    flex-direction: column;
    align-items: center;
  }

  .trust-icons {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .top-bar {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  .top-bar-left {
    flex-direction: column;
    gap: 0.3rem;
  }
}

/* ===== GLOBAL PAGE STYLES ===== */

main {
  padding: 4rem 2rem;
  background-color: #ffffff;
}

main h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #09122a;
}

main h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #09122a;
}

main h3 {
  font-size: 1.2rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: #09122a;
}

main p {
  max-width: 900px;
  margin-bottom: 1rem;
  line-height: 1.7;
  color: #333;
}

/* ===== ABOUT / CONTENT SECTIONS ===== */

.about-section {
  margin-bottom: 3rem;
}

.intro {
  font-size: 1.1rem;
  font-weight: 500;
  max-width: 900px;
}

/* Feature lists */
.about-features,
.mission-list,
.approach-list {
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
}

.about-features li,
.mission-list li,
.approach-list li {
  margin-bottom: 1rem;
  padding-left: 2rem;
  position: relative;
}

.about-features li i {
  position: absolute;
  left: 0;
  top: 0.3rem;
  color: #C9A962;
}

/* Experience highlight box */
.experience-highlight {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #f7f7f7;
  padding: 1.2rem 1.5rem;
  border-radius: 12px;
  margin-top: 2rem;
}

.experience-highlight i {
  font-size: 2rem;
  color: #C9A962;
}

/* ===== CTA SECTION ===== */

.about-cta {
  background-color: #09122a;
  color: #fff;
  padding: 3rem 2rem;
  border-radius: 16px;
  text-align: center;
}

.about-cta h2 {
  color: #fff;
}

.about-cta p {
  color: #ddd;
}




/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
  main {
    padding: 2.5rem 1.5rem;
  }

  main h1 {
    font-size: 2rem;
  }
}

/* ===== SERVICES PAGE ===== */

.services-hero {
  text-align: center;
  margin-bottom: 4rem;
}

.service-stats {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.stat-card {
  background: #f8f8f8;
  padding: 1.5rem;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.stat-card i {
  font-size: 1.8rem;
  color: #C9A962;
  margin-bottom: 0.5rem;
}

.stat-card h3 {
  margin-bottom: 0.3rem;
  color: #09122a;
}

/* Service blocks */

.service-block {
  max-width: 1000px;
  margin: 0 auto 4rem auto;
  padding: 2.5rem;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.service-block.alt {
  background: #f9f9f9;
}

.service-block h2 {
  margin-bottom: 0.8rem;
}

.service-block p {
  margin-bottom: 1rem;
}

.service-block ul {
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
}

.service-block ul li {
  padding-left: 1.8rem;
  margin-bottom: 0.6rem;
  position: relative;
}

.service-block ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #C9A962;
  font-weight: bold;
}

/* Buttons */

.btn-secondary {
  display: inline-block;
  background: #09122a;
  color: #fff;
  padding: 0.6rem 1.4rem;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s;
}

.btn-secondary:hover {
  background: #0B1633;
  transform: translateY(-2px);
}

/* CTA */

.services-cta {
  background: #09122a;
  color: #fff;
  text-align: center;
  padding: 4rem 2rem;
  border-radius: 20px;
  margin-top: 5rem;
}

.services-cta h2 {
  color: #fff;
}

.services-cta p {
  color: #ddd;
}

.cta-buttons {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}


/* ===== SERVICE PAGES ===== */

.services-hero {
  background: #0b1633;
  color: #fff;
  padding: 4rem 2rem;
  text-align: center;
}

.services-hero .tagline {
  color: #C9A962;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.services-hero h1 {
  font-size: 2.5rem;
  margin: 1rem 0;
}

.services-hero .intro {
  max-width: 700px;
  margin: 0 auto 2rem;
  font-size: 1.1rem;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Feature Grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}

.feature {
  text-align: center;
}

.feature i {
  font-size: 2rem;
  color: #C9A962;
  margin-bottom: 1rem;
}

/* Airports */
.airports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}

.airport-card {
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Steps */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  text-align: center;
}

.step span {
  display: inline-block;
  background: #C9A962;
  color: #0b1633;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  margin-bottom: 1rem;
}

/* Included List */
.included-list {
  max-width: 700px;
  margin: 0 auto;
  list-style: none;
}

.included-list li {
  padding: 0.5rem 0;
  position: relative;
  padding-left: 1.5rem;
}

.included-list li::before {
  content: "✓";
  color: #C9A962;
  position: absolute;
  left: 0;
}

/* CTA */
.services-cta {
  background: #0b1633;
  color: #fff;
  text-align: center;
  padding: 4rem 2rem;
}

.services-cta .cta-phone {
  margin-top: 1rem;
  color: #C9A962;
}

/* ===== ACTIVE NAV LINK ===== */

.nav-links a.active {
  color: #C9A962;
  position: relative;
}

.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background-color: #C9A962;
  border-radius: 2px;
}

/* ===== OTHER STYLES ABOVE ===== */

/* Hover effect for service cards */
.airport-card:hover {
  transform: translateY(-5px);
  transition: transform 0.3s ease;
}

/* ===== FORM INPUT STYLING ===== */

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s ease;
  font-family: 'Montserrat', sans-serif;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #C9A962;
  /* gold accent */
  box-shadow: 0 0 8px rgba(201, 162, 77, 0.4);
  /* subtle gold glow */
}



.contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

/* ===== SERVICE TYPE BUBBLES ===== */

.service-type-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.service-type-options input[type="radio"] {
  display: none;
  /* hide the radio button */
}

.service-type-options .service-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #0b1633;
  /* navy background */
  color: #f0f0f0;
  /* light grey text */
  padding: 1.5rem 1rem;
  border-radius: 12px;
  cursor: pointer;
  min-width: 120px;
  text-align: center;
  transition: all 0.3s ease;
  font-family: 'Montserrat', sans-serif;
  flex: 1 1 120px;
}

.service-type-options .service-option i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.service-type-options .service-option span {
  font-weight: 600;
}

/* Hover effect */
.service-type-options .service-option:hover {
  filter: brightness(1.15);
}

/* Selected state */
.service-type-options input[type="radio"]:checked+label {
  background-color: #C9A962;
  /* gold */
  color: #0b1633;
  font-weight: 700;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.service-type-options .service-option:hover {
  transform: scale(1.05);
}

/* ===== SERVICE TYPE BUBBLES ===== */
.service-type-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.service-type-options input[type="radio"] {
  display: none;
  /* hide radio button */
}

.service-type-options .service-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #0b1633;
  /* navy background */
  color: #f0f0f0;
  /* light grey text */
  padding: 1.5rem 1rem;
  border-radius: 12px;
  cursor: pointer;
  min-width: 120px;
  text-align: center;
  transition: all 0.3s ease;
  font-family: 'Montserrat', sans-serif;
  flex: 1 1 120px;
}

.service-type-options .service-option i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.service-type-options .service-option span {
  font-weight: 600;
}

/* Hover effect */
.service-type-options .service-option:hover {
  filter: brightness(1.15);
  transform: scale(1.05);
}

/* Selected state */
.service-type-options input[type="radio"]:checked+label {
  background-color: #C9A962;
  /* gold */
  color: #0b1633;
  font-weight: 700;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* ===== HERO SECTION / PAGE HEADER ===== */
.services-hero {
  background-color: #09122a;
  /* match main header */
  color: #ffffff;
  /* white text for contrast */
  padding: 3rem 1rem;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
}

.services-hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.services-hero p {
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
  color: #f0f0f0;
  /* lighter white for subtext */
}

.gold-text {
  color: #C9A962;
  /* metallic gold accent */
}

/* ===== FORM ROWS FOR TWO-COLUMN LAYOUT ===== */
.booking-form .form-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  /* wraps on small screens */
  margin-bottom: 1rem;
}

/* ===== FORM ROWS FOR TWO-COLUMN LAYOUT ===== */
.booking-form .form-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  /* wraps on small screens */
  margin-bottom: 1rem;
}

.booking-form .form-row .form-group {
  flex: 1 1 calc(50% - 0.5rem);
  /* two equal columns */
  display: flex;
  flex-direction: column;
}

.booking-form .form-row .form-group input,
.booking-form .form-row .form-group textarea {
  flex: 1;
  box-sizing: border-box;
  padding: 0.6rem 0.8rem;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.booking-form .form-row .form-group input:focus,
.booking-form .form-row .form-group textarea:focus {
  border-color: #C9A962;
  box-shadow: 0 0 8px rgba(201, 162, 77, 0.4);
}

/* For single column rows (like textarea or email row) */
.booking-form .form-row.single .form-group {
  flex: 1 1 100%;
}


/* Optional: maintain previous hover/focus styling */
.booking-form input:focus,
.booking-form textarea:focus {
  border-color: #C9A962;
  box-shadow: 0 0 8px rgba(201, 162, 77, 0.4);
}

.gold-icon {
  color: #C9A962 !important;
  /* gold */
  font-size: 1.3rem;
  /* slightly larger than text */
  margin-right: 0.5rem;
}

.booking-form h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* space between icon and text */
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* ===== FORM LABELS ===== */
.booking-form label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
  color: #09122a;
  /* dark navy for text */
}

.home-hero {
  background: #09122a;
  color: #fff;
  text-align: center;
  padding: 4rem 1rem;
}

.subtitle {
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #C9A962;
  font-size: 0.85rem;
}





.hero-trust {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.features-grid,
.services-grid,
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.service-card,
.testimonial {
  background: #fff;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.light-section {
  background: #f9f9f9;
  padding: 3rem 1rem;
}

.home-cta {
  background: #09122a;
  color: #fff;
  text-align: center;
  padding: 3rem 1rem;
}

/* ===== TWO COLUMN HERO ===== */
.home-hero {
  background: #09122a;
  padding: 4rem 1rem;
  color: #ffffff;
}

.hero-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}

.hero-content h1 {
  font-size: 2.6rem;
  margin-bottom: 1rem;
}

.hero-content .intro {
  max-width: 520px;
}

.car-long-distance img {
  width: 100%;
  max-width: 520px;
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
}


/* HERO TRUST */
.hero-trust {
  display: flex;
  gap: 1.5rem;
  margin-top: 2rem;
  font-weight: 600;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-image {
    margin-top: 2rem;
  }

  .hero-trust {
    justify-content: center;
  }
}

.hero-content h1,
.hero-content h5,
.hero-content p.intro {
  color: #ffffff;
  /* ensures text is visible on navy background */
}

.gold-text {
  color: #C9A962;
  /* your premium gold accent */
}

/* ===== HERO BUTTONS - BOOK NOW & GET A QUOTE ===== */
.hero-buttons {
  display: flex;
  gap: 1rem;
  /* space between buttons */
  justify-content: center;
  /* center buttons horizontally */
  margin-top: 1.5rem;
  flex-wrap: wrap;
  /* ensures responsiveness on smaller screens */
}


.hero-buttons a.btn-primary,
.hero-buttons a.btn-outline {
  display: inline-flex;
  /* align icon/text vertically if any */
  align-items: center;
  justify-content: center;
  padding: 0.85rem 2rem;
  /* same padding for both */
  font-size: 1rem;
  /* uniform font size */
  font-weight: 600;
  /* consistent weight */
  border-radius: 8px;
  text-decoration: none;
  min-width: 140px;
  /* optional: equal width for both buttons */
  line-height: 1.2;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* Book Now - solid gold button */
.hero-buttons a.btn-primary {
  background-color: #C9A962;
  /* your new gold */
  color: #09122a;
  /* navy text */
  border: 2px solid #C9A962;
}

/* Get a Quote - navy button with gold border */
.hero-buttons a.btn-outline {
  background-color: #09122a;
  color: #C9A962;
  border: 2px solid #C9A962;
}

/* Hover effect for both buttons */
.hero-buttons a.btn-primary:hover,
.hero-buttons a.btn-outline:hover {
  background-color: #b8972b;
  /* slightly darker gold */
  color: #09122a;
  transform: translateY(-2px);
}

/* ===== GOLD BADGE SUBTITLE ===== */
.hero-content {
  display: flex;
  flex-direction: column;
  /* stack elements vertically */
  align-items: center;
  /* center everything horizontally */
  justify-content: center;
  /* optional, vertical alignment if needed */
  text-align: center;
  /* centers all text lines */
  gap: 1rem;
  /* spacing between badge, headline, paragraph, buttons */
}

.hero-content p.intro {
  color: #ffffff;
  /* visible on navy background */
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 480px;
  /* keeps it readable, not screen-wide */
  text-align: center;
  /* ensure it centers even if inside hero-content */
}

.hero-content .badge i {
  margin-right: 0.5rem;
  /* space between star and text */
  color: #C9A962;
  /* gold star */
}

.hero-content .badge {
  display: inline-block;
  background-color: #09122a;
  /* navy background */
  color: #C9A962;
  /* gold text */
  border: 2px solid #C9A962;
  /* gold circular outline */
  border-radius: 50px;
  /* pill/circular shape */
  padding: 0.4rem 1rem;
  /* adjust for desired size */
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

header::after {
  content: "";
  position: absolute;
  bottom: 0;
  /* stick to bottom of header */
  left: 0;
  width: 100%;
  height: 4px;
  /* thickness of line */
  background: linear-gradient(to right, transparent 10%, #C9A962 50%, transparent 90%);
  pointer-events: none;
  /* ensures it doesn’t block clicks on buttons/nav */
}

nav ul.nav-links {
  list-style: none;
  /* removes bullets */
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
  /* spacing between links */
}

nav ul.nav-links li a {
  text-decoration: none;
  color: #ffffff;
  /* default link color on header */
  font-weight: 500;
  transition: color 0.3s ease;
}

nav ul.nav-links li a:hover {
  color: #C9A962;
  /* gold on hover */
}

.nav-book a {
  background-color: #C9A962;
  color: #09122a;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  transition: background 0.3s ease;
}

.nav-book a:hover {
  background-color: #b8972b;
}

/* Book Now button in nav */
header nav ul.nav-links li.nav-book a {
  background-color: #C9A962 !important;
  /* gold background */
  color: #09122a !important;
  /* navy/blue text */
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Hover effect for Book Now button */
header nav ul.nav-links li.nav-book a:hover {
  background-color: #b8972b !important;
  /* slightly darker gold */
  color: #09122a !important;
  /* keep navy text */
}

/* Container */
.why-choose {
  text-align: center;
  padding: 4rem 1rem;
  background-color: #ffffff;
  /* white background for contrast */
}

.why-choose h2 {
  font-size: 2rem;
  color: #09122a;
  margin-bottom: 0.5rem;
}

.why-choose p {
  color: #09122a;
  max-width: 600px;
  margin: 0 auto 2rem auto;
}

/* Flex container for cards */
.cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

/* Individual card */
.feature-card {
  flex: 1 1 150px;
  /* grow/shrink, minimum width */
  max-width: 200px;
  border: 2px solid #C9A962;
  /* gold border */
  border-radius: 10px;
  padding: 2rem 1rem;
  text-align: center;
  background-color: #ffffff;
  /* stays white */
  cursor: default;
  /* not clickable */
  transition: none;
  /* card itself has no hover effect */
}

/* Icon styling */
.feature-card .icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1rem auto;
  border-radius: 50%;
  background-color: #09122a;
  /* navy background */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C9A962;
  /* gold icon */
  font-size: 1.5rem;
  transition: all 0.3s ease;
  /* smooth color swap */
}

/* Smooth transition */
.feature-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Floating hover effect */
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
}


/* Hover icon when hovering anywhere on the card */
.feature-card:hover .icon {
  background-color: #C9A962;
  /* gold circle */
  color: #09122a;
  /* navy icon */
}

/* Card text */
.feature-card h3 {
  color: #09122a;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0.5rem;
}

/* Description under each card title */
.feature-card p {
  color: #666666;
  /* medium grey */
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.gold-text {
  color: #C9A962;
  /* your gold color */
}

/* Section small label in gold */
.section-label {
  color: #C9A962;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  text-align: center;
  /* CENTER IT */
}

/* Large heading in blue */
.section-title {
  color: #09122a;
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  /* CENTER IT */
  margin-bottom: 1rem;
}

/* Description in grey */
.section-description {
  color: #666666;
  font-size: 1rem;
  text-align: center;
  /* CENTER IT */
  max-width: 700px;
  margin: 0 auto 3rem auto;
}


/* Service cards container */
.services-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Individual service card */
.service-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 2px solid #C9A962;
  /* gold border */
  border-radius: 10px;
  overflow: hidden;
  background-color: #ffffff;
}

/* Reverse card layout for alternating sides */
.service-card.reverse-card {
  flex-direction: row-reverse;
}

/* Image side */
.service-image {
  flex: 1;
  min-width: 150px;
  max-width: 300px;
  overflow: hidden;
}

.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content side */
.service-content {
  flex: 2;
  padding: 2rem;
}

.service-content h3 {
  font-size: 1.5rem;
  color: #09122a;
  margin-bottom: 0.5rem;
}

.service-content p {
  font-size: 1rem;
  color: #666666;
  margin-bottom: 1rem;
}

.service-content .btn-primary {
  display: inline-block;
  margin-top: 0.5rem;
}

/* Reset box-sizing */
* {
  box-sizing: border-box;
}

/* Services container */
.services-list {
  display: flex;
  flex-direction: row;
  /* important! ensures horizontal layout */
  flex-wrap: wrap;
  /* allow wrapping to next line */
  gap: 2rem;
  justify-content: center;
}

/* Individual service card */
.service-card {
  width: calc(33.333% - 1rem);
  /* 3 per row minus gap */
  min-width: 250px;
  /* prevents cards from shrinking too small */
  display: flex;
  flex-direction: row;
  /* image + text side by side */
  align-items: center;
  border: 2px solid #C9A962;
  border-radius: 10px;
  overflow: hidden;
  background-color: #ffffff;

  /* remove any previous flex-grow/shrink */
  flex: 0 0 auto;
}

.service-card.reverse-card {
  flex-direction: row-reverse;
}



@media screen and (max-width: 900px) {
  .service-card {
    flex: 1 1 100%;
    /* full width on mobile */
    flex-direction: column;
    /* stack image above text */
  }

  .service-card.reverse-card {
    flex-direction: column;
  }

  .service-image {
    max-width: 100%;
  }
}

/* Section small label in gold */
.section-label {
  color: #C9A962;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

/* Large heading in blue */
.section-title {
  color: #09122a;
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1rem;
}

/* Description in grey */
.section-description {
  color: #666666;
  font-size: 1rem;
  text-align: center;
  max-width: 700px;
  margin: 0 auto 3rem auto;
}

/* Container for cards */
.services-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

/* Individual card */
.service-card {
  width: calc(33.333% - 1rem);
  /* 3 cards per row */
  border: 2px solid #C9A962;
  border-radius: 10px;
  background-color: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* vertical layout: image on top */
  transition: transform 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
}

/* Image takes top half */
.service-card .service-image {
  width: 100%;
  height: 200px;
  /* fixed height for all images */
  overflow: hidden;
}

.service-card .service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-card .service-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* let content grow naturally */
}

.services-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: stretch;
  /* ensures all cards same height per row */
}

@media screen and (max-width: 900px) {
  .service-card {
    width: 100%;
  }
}

.service-card .service-content h3 {
  font-size: 1.5rem;
  color: #09122a;
  margin-bottom: 0.5rem;
}

.service-card .service-content p {
  font-size: 1rem;
  color: #666666;
  margin-bottom: 1rem;
}

.service-card .service-content .btn-primary {
  display: inline-block;
  margin-top: auto;
}

/* Mobile stacking */
@media screen and (max-width: 900px) {
  .service-card {
    width: 100%;
  }
}

.section-header {
  text-align: center;
  /* center everything inside */
  margin-bottom: 3rem;
  /* spacing before the cards */
}

.section-label {
  color: #C9A962;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.section-title {
  color: #09122a;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.section-description {
  color: #666666;
  font-size: 1rem;
  max-width: 700px;
  margin: 0 auto;
  /* keep description centered and narrow */
}

/* ===============================
   Booking Form with Theme Background
=================================*/

/* Section styling */
.service-block {
  background-color: #09122a;
  /* themed navy background */
  padding: 3rem 1rem;
  text-align: center;
  margin-top: 90px;
}

@media (max-width: 768px) {
  .service-block {
    margin-top: 60px;
  }
}


.service-block h2 {
  color: #C9A962;
  /* gold heading */
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.service-block p.intro {
  color: #ffffff;
  /* white intro */
  font-size: 1rem;
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Form container */
.quick-booking {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
}

/* Form group with label & icon */
.form-group {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #ffffff;
  /* white labels */
}

.form-group label {
  margin-bottom: 0.3rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.form-group label i {
  margin-right: 0.5rem;
  color: #C9A962;
  /* gold icons */
}

/* Inputs and textarea */
.quick-booking input,
.quick-booking select,
.quick-booking textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 2px solid #C9A962;
  /* gold border */
  border-radius: 8px;
  font-size: 1rem;
  color: #09122a;
  /* text inside input is navy */
  background-color: #ffffff;
  /* white input for contrast */
  transition: border 0.3s, box-shadow 0.3s;
}

.quick-booking input:focus,
.quick-booking select:focus,
.quick-booking textarea:focus {
  border-color: #D4AF37;
  /* slightly brighter gold on focus */
  box-shadow: 0 0 5px rgba(201, 169, 98, 0.5);
  outline: none;
}

/* Textarea special requests */
textarea {
  resize: vertical;
}

/* Submit button */
.quick-booking .btn-primary {
  flex: 1 1 100%;
  background-color: #09122a;
  /* navy */
  color: #C9A962;
  /* gold text */
  font-weight: 600;
  padding: 0.8rem 1.5rem;
  border: 2px solid #C9A962;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1rem;
}

.quick-booking .btn-primary:hover {
  background-color: #C9A962;
  /* gold background */
  color: #09122a;
  /* navy text */
  border-color: #09122a;
  transform: translateY(-2px);
}

/* Phone CTA */
.service-block .cta-phone {
  margin-top: 1.5rem;
  font-weight: 600;
  color: #ffffff;
}

.service-block .cta-phone a {
  color: #C9A962;
  text-decoration: none;
}

.service-block .cta-phone a:hover {
  text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .form-group {
    flex: 1 1 100%;
    /* stack all fields on smaller screens */
  }
}


/* TESTIMONIAL SECTION */
.light-section {
  text-align: center;
}

/* Testimonials title */
.light-section h2 {
  color: #C9A962;
  /* gold */
  margin-bottom: 10px;
}

/* What our customers say */
.light-section .intro {
  color: #09122a;
  /* navy */
  font-weight: 600;
  margin-bottom: 8px;
}

/* Description text */
.light-section .intro+p {
  color: #4a4a4a;
  /* grey */
  margin-bottom: 50px;
}


.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

@media (max-width: 900px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
  }
}

.testimonial {
  background: #ffffff;
  padding: 30px 25px;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  transition: all 0.35s ease;
  position: relative;
}

/* Lift effect */
.testimonial:hover {
  transform: translateY(-10px);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.12);
}

.testimonial::before {
  content: "\f005  \f005  \f005  \f005  \f005";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #C9A962;
  display: block;
  margin-bottom: 15px;
  font-size: 14px;
  letter-spacing: 3px;
}

.customer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #09122a;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  letter-spacing: 1px;
}

.customer-info {
  text-align: left;
}

.customer-info strong {
  display: block;
  color: #09122a;
}

.customer-info span {
  color: #4a4a4a;
  font-size: 14px;
}

.testimonial p {
  color: #4a4a4a;
  font-style: italic;
  line-height: 1.6;
}

.light-section h2,
.light-section .intro,
.light-section p {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.light-section .intro {
  color: #09122a;
  font-weight: 600;
  max-width: 700px;
}

.light-section .intro+p {
  color: #4a4a4a;
  max-width: 720px;
  margin-top: 6px;
  margin-bottom: 50px;
}

.footer-logo {
  text-align: center;
  margin-bottom: 25px;
}

.footer-logo img {
  width: 140px;
  height: auto;
  opacity: 0.95;
  transition: 0.3s ease;
}

.footer-logo img:hover {
  opacity: 1;
  transform: scale(1.05);
}

.footer-logo img {
  filter: brightness(1.15);
}

.footer-tagline {
  color: #C9A962;
  font-size: 14px;
  margin-top: 10px;
}

/* ===== ABOUT PAGE HERO ===== */
.about-page {
  background-color: #09122a;
  /* navy blue background */
  color: #ffffff;
  /* default text color */
  text-align: center;
  padding: 4rem 2rem;
  /* space inside the section */
}

/* H1 styling */
.about-page h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

/* Split H1 into "About" white and "KB Cars Reading" gold */
.about-page h1 span.about {
  color: #ffffff;
  /* white */
}

.about-page h1 span.kb-cars {
  color: #C9A962;
  /* gold */
}

/* Intro paragraph */
.about-page p.intro {
  color: #ffffff;
  /* grey description */
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Optional: remove any margin from above elements so it sits flush with header */
.about-page {
  margin-top: 0;
}

/* ABOUT SECTION - TWO COLUMNS */
.about-section {
  padding: 4rem 2rem;
  /* space around section */
  background-color: #ffffff;
  /* keep white background */
}

.about-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
  /* allows stacking on mobile */
}

.about-text {
  flex: 1 1 55%;
  /* text takes ~55% width */
}

.about-text h2 {
  font-size: 2rem;
  color: #09122a;
  /* navy heading */
  margin-bottom: 1rem;
}

.about-text p {
  color: #666666;
  /* grey text */
  margin-bottom: 1rem;
  line-height: 1.7;
}

/* Experience highlight stays inside text column */
.experience-highlight {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #f7f7f7;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  margin-top: 2rem;
}

.experience-highlight i {
  font-size: 2rem;
  color: #C9A962;
}

/* IMAGE COLUMN */
.about-image {
  flex: 1 1 40%;
  /* image takes ~40% width */
  display: flex;
  justify-content: center;
}

.about-image img {
  width: 100%;
  max-width: 500px;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  display: block;
}

/* RESPONSIVE: stack columns on smaller screens */
@media (max-width: 900px) {
  .about-container {
    flex-direction: column;
  }

  .about-text,
  .about-image {
    flex: 1 1 100%;
  }

  .about-image img {
    max-width: 100%;
  }
}

/* WHY CHOOSE KB CARS - FEATURE CARDS */
.why-choose {
  background-color: #ffffff;
  /* white background */
  padding: 4rem 2rem;
  text-align: center;
}

.why-choose .section-header {
  margin-bottom: 3rem;
}

.why-choose .section-title {
  color: #09122a;
  /* navy heading */
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.why-choose .section-description {
  color: #666666;
  /* grey text */
  font-size: 1rem;
  max-width: 700px;
  margin: 0 auto;
}

/* Cards container */
.why-choose .cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

/* Individual card */
.why-choose .feature-card {
  flex: 1 1 220px;
  /* responsive width */
  max-width: 250px;
  background-color: #ffffff;
  border: 2px solid #C9A962;
  /* gold border */
  border-radius: 10px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.why-choose .feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
}

/* Icon styling */
.why-choose .feature-card .icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1rem auto;
  border-radius: 50%;
  background-color: #09122a;
  /* navy circle */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C9A962;
  /* gold icon */
  font-size: 1.5rem;
  transition: all 0.3s ease;
}

/* Icon hover effect */
.why-choose .feature-card:hover .icon {
  background-color: #C9A962;
  /* gold background */
  color: #09122a;
  /* navy icon */
}

/* Card title */
.why-choose .feature-card h3 {
  color: #09122a;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Card description */
.why-choose .feature-card p {
  color: #666666;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .why-choose .cards-container {
    flex-direction: column;
    align-items: center;
  }

  .why-choose .feature-card {
    max-width: 100%;
  }
}

/* OUR VISION SECTION */
.vision-section {

  padding: 4rem 2rem;
  display: flex;
  justify-content: center;
  /* center the card horizontally */
}

.vision-section .vision-card {
  background-color: #0b1633;
  /* slightly lighter navy card */
  padding: 2.5rem 2rem;
  border-radius: 16px;
  max-width: 900px;
  color: #f0f0f0;
  /* light text for readability */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vision-section .vision-card h2 {
  color: #C9A962;
  /* gold heading */
  font-size: 2rem;
  margin-bottom: 1rem;
}

.vision-section .vision-card p {
  color: #dcdcdc;
  /* light grey text */
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Lift effect on hover */
.vision-section .vision-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}

/* Responsive */
@media (max-width: 768px) {
  .vision-section {
    padding: 2.5rem 1.5rem;
  }

  .vision-section .vision-card {
    padding: 2rem 1.5rem;
  }
}

/* Mission Section - Two Columns */
.mission-section {
  background-color: #09122a;
  /* navy background */
  padding: 3rem 1rem;
  color: #ffffff;
  border-radius: 16px;
  /* optional lift effect */
  margin-top: 2rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.mission-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* left text, right image */
  gap: 3rem;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}

.mission-text h2 {
  font-size: 2rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.mission-text h2 .mission-icon {
  color: #C9A962;
  /* gold icon */
  font-size: 2.2rem;
}

/* Category titles in gold with icon */
.mission-text h3 {
  color: #C9A962;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.mission-category-icon {
  color: #C9A962;
  font-size: 1.2rem;
}

/* Paragraphs */
.mission-text p {
  color: #dddddd;
  line-height: 1.6;
}

/* Mission list with gold checkmarks */
.mission-list {
  list-style: none;
  padding-left: 1.5rem;
  margin-top: 1rem;
}

.mission-list li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 0.8rem;
  color: #ffffff;
}

.mission-list li::before {
  content: "\f00c";
  /* FontAwesome check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  color: #C9A962;
  /* gold checkmark */
}

/* Right column image */
.mission-image img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  display: block;
}

/* Responsive */
@media (max-width: 900px) {
  .mission-container {
    grid-template-columns: 1fr;
    /* stack columns on small screens */
  }

  .mission-image {
    margin-top: 2rem;
  }
}

/* Approach Section - White background, centered */
.approach-section {
  background-color: #ffffff;
  padding: 3rem 1rem;
  border-radius: 16px;
  margin: 2rem auto;
  max-width: 800px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  /* subtle lift */
  color: #333333;
}

.approach-section h2 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  font-size: 2rem;
  color: #09122a;
  /* dark blue for title */
  margin-bottom: 1rem;
}

.approach-icon {
  color: #C9A962;
  /* gold icon */
  font-size: 2rem;
}

/* Approach list with checkmarks and light grey background */
.approach-list {
  list-style: none;
  padding: 0;
  margin-top: 2rem;
}

.approach-list li {
  position: relative;
  padding: 0.8rem 1rem 0.8rem 3rem;
  margin-bottom: 1rem;
  background-color: #f5f5f5;
  /* faint grey background */
  border-radius: 8px;
  display: inline-block;
  text-align: left;
  max-width: 600px;
}

.approach-list li::before {
  content: "\f00c";
  /* FontAwesome check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #C9A962;
  /* gold checkmark */
}

.approach-final {
  font-weight: 700;
  /* bold like the title */
  font-size: 1.2rem;
  margin-top: 2rem;
}

.white-text {
  color: #09122a;
  /* white */
}

.gold-text {
  color: #C9A962;
  /* gold */
}

.mission-section {
  display: flex;
  align-items: center;
  /* vertically center image with text */
  gap: 2rem;
  /* space between text and image */
  padding: 2rem 0;
  /* optional vertical padding */
}

.mission-content {
  flex: 1;
  /* text column */
}

.mission-image {
  flex: 1;
  /* image column */
  display: flex;
  justify-content: center;
  /* horizontally center the image */
}

.mission-image img {
  margin-top: 140px;
  /* adjust this value as needed */
  max-width: 100%;
  height: auto;
  display: block;
}

/* CTA Section */
.about-cta {
  background-color: #f5f5f5;
  /* navy blue background */
  color: #fff;
  text-align: center;
  /* ensures headings and paragraphs are centered */
  padding: 3rem 1rem;
  border-radius: 12px;
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* centers content horizontally */
  justify-content: center;
  /* optional: vertically centers if needed */
}

.about-cta h2,
.about-cta p {
  max-width: 800px;
  /* keeps text from being too wide on large screens */
  margin: 0 auto 1.5rem auto;
  /* centers and adds spacing below */
}


/* CTA Section */


.about-cta h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #09122a;
  /* white */
  font-weight: 700;
}

.about-cta p {
  color: #09122a;
  /* light grey text */
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

/* Buttons container */
.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Book Now button */
.btn-book {
  background-color: #0B1633;
  /* blue */
  color: #ffffff;
  padding: 0.85rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-book:hover {
  background-color: #C9A962;
  /* optional: gold hover */
  color: #09122a;
  transform: translateY(-2px);
}

/* Call Us button */
.btn-call {
  background-color: #C9A962;
  /* gold */
  color: #09122a;
  /* navy text */
  padding: 0.85rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* space between icon and text */
  transition: all 0.3s ease;
}

.btn-call:hover {
  background-color: #C9A962;
  /* slightly darker gold */
  color: #09122a;
  transform: translateY(-2px);
}

.services-hero {
  background-color: #09122a;
  /* dark blue */
  color: #fff;
  text-align: center;
  padding: 6rem 1rem 4rem 1rem;
}

.services-hero h1 {
  font-size: 3rem;
  font-weight: 700;
}

.services-hero h1 .gold-text {
  color: #C9A962;
  /* gold color */
}

.services-hero .intro {
  font-size: 1.5rem;
  margin-top: 1rem;
  line-height: 1.6;
}

.services-hero .intro .highlight {
  display: block;
  font-weight: 700;
  /* bold */
  margin-bottom: 0.5rem;
  /* spacing between the bold line and rest of paragraph */
}

.services-hero {
  background-color: #09122a;
  /* keep blue background */
  color: #ffffff;
  text-align: center;
  padding: 20px 20px;
  /* reduce this from maybe 120px to 80px */
}

.services-hero h1 {
  color: #C9A962;
  /* gold heading */
  font-size: 2.5rem;
  /* reduce if it’s too big */
  margin-bottom: 20px;
}

.services-hero .intro {
  font-weight: normal;
  font-size: 1.2rem;
  /* slightly smaller text */
  max-width: 600px;
  margin: 0 auto;
}

/* Footer Social Icons */
.footer-socials {
  margin-top: 20px;
  display: flex;
  gap: 18px;
  justify-content: center;
  /* center in footer */
}

.footer-socials a {
  width: 42px;
  height: 42px;
  background: #09122a;
  /* navy */
  color: #C9A962;
  /* gold icon */
  border: 2px solid #C9A962;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: 0.3s ease;
}

/* Hover effect (flip colours like your buttons) */
.footer-socials a:hover {
  background: #C9A962;
  color: #09122a;
  transform: translateY(-3px);
}

/* SERVICES — Alternating feature rows */
.page-services .airports-grid {
  display: flex;
  flex-direction: column;
  gap: 70px;
  padding: 0 20px;
}

/* Each row: two columns */
.page-services .airport-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 50px;
}

/* Alternate layout (every second card flips) */
.page-services .airport-card:nth-child(even) .airport-image {
  order: 2;
}

.page-services .airport-card:nth-child(even) .airport-content {
  order: 1;
}

/* Image styling */
.page-services .airport-image img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  border-radius: 12px;
}

/* Text styling */
.page-services .airport-content h3 {
  color: #C9A962;
  /* gold */
  font-size: 1.9rem;
  margin-bottom: 10px;
}

.page-services .airport-content p {
  color: #1a1a1a;
  /* dark text */
  margin-bottom: 15px;
}

/* Included list */
.page-services .included-list li {
  margin-bottom: 8px;
  color: #09122a;
}

.page-services .included-list li::before {
  content: "\2713";
  /* checkmark */
  color: #C9A962;
  margin-right: 8px;
}

/* Optional: buttons styling */
.page-services .btn-secondary {
  display: inline-block;
  margin-top: 1rem;
}

/* Responsive */
@media (max-width: 900px) {
  .page-services .airport-card {
    grid-template-columns: 1fr;
  }

  .page-services .airport-image img {
    height: 240px;
  }
}

/* Feature block section (optional for other service features) */
.page-services .service-block {
  background-color: #ffffff;
  padding: 60px 20px;
  border-radius: 12px;
}

.page-services .service-block .feature h3 {
  color: #09122a;
}

.page-services .service-block .feature p {
  color: #666666;
}

.page-services .service-block .feature i {
  color: #C9A962;
}

.airport-hero .hero-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
}

.hero-text {
  flex: 1;
  /* left column takes half */
}

.hero-image {
  flex: 1;
  /* right column takes half */
}

.hero-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Responsive: stack on mobile */
@media (max-width: 900px) {
  .airport-hero .hero-grid {
    flex-direction: column;
    text-align: center;
  }

  .hero-image {
    margin-top: 30px;
  }
}

/* Container for the buttons */
.hero-actions {
  margin-top: 20px;
  display: flex;
  gap: 15px;
  /* spacing between buttons */
  flex-wrap: wrap;
  /* allows wrapping on small screens */
}

/* Primary button (blue) */
.hero-actions .btn-primary {
  background-color: #09122a;
  /* your site blue */
  color: #ffffff;
  border: 2px solid #C9A962;
  padding: 12px 30px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.hero-actions .btn-primary:hover {
  background-color: #C9A962;
  color: #09122a;
}

/* Secondary button (gold) */
.hero-actions .btn-secondary {
  background-color: #C9A962;
  /* your site gold */
  color: #09122a;
  /* blue text */
  padding: 12px 30px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.hero-actions .btn-secondary i {
  margin-right: 8px;
  /* space between icon and text */
}

.hero-actions .btn-secondary:hover {
  background-color: #09122a;
  /* darker gold on hover */
  color: #C9A962;
  border: 2px solid #C9A962;


}

/* Mobile: stack buttons */
@media (max-width: 600px) {
  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    width: 100%;
    text-align: center;
  }
}

/* Headline colors */
.highlight-gold {
  color: #C9A962;
  /* gold */
}

.highlight-white {
  color: #ffffff;
  /* white */
}

/* Grid layout for features */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Individual feature cards */
.feature {
  background-color: #ffffff;
  /* white background */
  padding: 25px 20px;
  text-align: center;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

/* Hover lift effect */
.feature:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}

/* Icon styling */
.feature i {
  font-size: 2.5rem;
  color: #C9A962;
  /* gold */
  margin-bottom: 15px;
}

/* Heading styling */
.feature h3 {
  color: #09122a;
  /* dark navy */
  margin-bottom: 10px;
  font-size: 1.4rem;
}

/* Paragraph styling */
.feature p {
  color: #666666;
  /* grey text */
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Responsive adjustments */
@media (max-width: 1000px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}

.airports-section h2 {
  text-align: center;
  color: #C9A962;
  /* gold */
  margin-bottom: 10px;
}

.airports-section .intro {
  text-align: center;
  color: #1a1a1a;
  /* dark text */
  margin-bottom: 40px;
  max-width: 600px;
  /* optional: prevents it from stretching too wide */
  margin: 0 auto 20px;
  /* centers horizontally and adds bottom margin */
  color: #4a4a4a;
  /* optional: keeps your grey description text */
}

/* Grid layout: 2 columns */
.airports-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Individual airport cards */
.airport-card {
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

/* Hover lift effect */
.airport-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}

/* Image on top */
.airport-image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* Content below image */
.airport-content {
  padding: 20px;
}

.airport-content h3 {
  color: #C9A962;
  /* gold */
  margin-bottom: 8px;
}

.airport-content p {
  color: #666666;
  margin-bottom: 10px;
  font-size: 0.95rem;
}

/* Button styling */
.airport-content .btn-secondary {
  background-color: #09122a;
  /* navy/blue button */
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  transition: background 0.3s;
}

.airport-content .btn-secondary:hover {
  background-color: #C9A962;
  /* gold on hover */
  color: #09122a;
}

/* Responsive */
@media (max-width: 900px) {
  .airports-grid {
    grid-template-columns: 1fr;
  }
}

.steps-block {
  background-color: #f6f6f6;
  /* white or no background */
  text-align: center;
  padding: 60px 20px;
}

/* Subtitle in gold */
.steps-block .steps-subtitle {
  color: #C9A962;
  /* gold */
  font-weight: bold;
  margin-bottom: 10px;
}

/* Title in blue */
.steps-block .steps-title {
  color: #09122a;
  /* blue/navy */
  margin-bottom: 40px;
}

/* Steps container */
.steps-block .steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  /* space between steps and arrows */
  flex-wrap: wrap;
}

/* Each step box */
.steps-block .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 180px;
}

/* Step number styling */
.steps-block .step-number {
  font-size: 2.5rem;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.3);
  /* translucent gold */
  margin-bottom: 15px;
}

/* Step title and description */
.steps-block .step h3 {
  color: #09122a;
  margin-bottom: 10px;
}

.steps-block .step p {
  color: #666666;
  font-size: 0.95rem;
}

/* Arrow between steps */
.steps-block .arrow {
  font-size: 2rem;
  color: #C9A962;
  /* gold */
}

.included-section {
  background-color: transparent;
  /* white or no background */
  padding: 40px 20px;
  text-align: left;
}

/* Section heading */
.included-section h2 {
  color: #09122a;
  /* blue/navy */
  margin-bottom: 25px;
}

/* Checklist styling */
.included-section .included-list {
  list-style: none;
  /* remove default bullets */
  padding: 0;
  margin: 0;
}

.included-section .included-list li {
  position: relative;
  padding-left: 30px;
  /* space for the checkmark */
  margin-bottom: 15px;
  color: #09122a;
  /* blue text */
  font-size: 1rem;
}

/* Gold checkmark before each item */
.included-section .included-list li::before {
  content: "\2713";
  /* checkmark */
  position: absolute;
  left: 0;
  color: #C9A962;
  /* gold */
  font-weight: bold;
}

.services-cta {
  background-color: #09122a;
  /* blue background like theme */
  color: #ffffff;
  text-align: center;
  padding: 60px 20px;
  border-radius: 12px;
}

/* Heading */
.services-cta h2 {
  color: #C9A962;
  /* gold */
  font-size: 2.2rem;
  margin-bottom: 15px;
}

/* Paragraph */
.services-cta p {
  color: #ffffff;
  font-size: 1.1rem;
  margin-bottom: 25px;
}

/* CTA buttons container */
.services-cta .cta-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* Book Now button */
.services-cta .btn-book {
  background-color: #C9A962;
  /* gold button */
  color: #09122a;
  /* blue text */
  padding: 12px 28px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: transform 0.2s, box-shadow 0.2s;
}

.services-cta .btn-book:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Call button */
.services-cta .btn-call {
  background-color: transparent;
  color: #C9A962;
  /* gold text */
  border: 2px solid #C9A962;
  /* gold border */
  padding: 12px 28px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.services-cta .btn-call:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Optional phone paragraph below buttons */
.services-cta .cta-phone {
  color: #ffffff;
  font-size: 1rem;
  margin-top: 10px;
}

/* General hero grid layout */
.services-hero.kidz-hero .hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
}

.hero-text .tagline {
  display: block;
  font-size: 1rem;
  color: #C9A962;
  /* gold tagline */
  margin-bottom: 10px;
}

.hero-text h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.highlight-gold {
  color: #C9A962;
}

.highlight-white {
  color: #ffffff;
}

.hero-text .intro {
  font-size: 1.1rem;
  color: #ffffff;
  margin-bottom: 30px;
}

/* Hero buttons */
.hero-actions {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.btn-primary {
  background-color: #C9A962;
  /* gold */
  color: #09122a;
  /* blue text */
  padding: 12px 28px;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.btn-secondary.btn-bordered {
  background-color: transparent;
  color: #C9A962;
  border: 2px solid #C9A962;
  padding: 12px 28px;
  border-radius: 6px;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-secondary.btn-bordered:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Hero image styling */
.hero-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Responsive for mobile */
@media (max-width: 900px) {
  .services-hero.kidz-hero .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-image {
    margin-top: 30px;
  }
}

/* Kidz Commute features - theme styled */
.service-block.kidz-features {
  background-color: transparent;
  /* or white if you prefer */
  padding: 60px 20px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
}

.feature {
  text-align: center;
  padding: 25px;
  border-radius: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.feature:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.feature i {
  font-size: 2.2rem;
  color: #C9A962;
  /* gold icons */
  margin-bottom: 15px;
}

.feature h3 {
  font-size: 1.5rem;
  color: #09122a;
  /* navy/blue text */
  margin-bottom: 10px;
}

.feature p {
  color: #666666;
  /* grey text */
  font-size: 1rem;
  line-height: 1.5;
}

/* Kidz Commute Safety Section */
.service-block.kidz-safety {
  background-color: #f6f6f6;
  /* or white if preferred */
  padding: 60px 20px;
}

.kidz-safety-grid {
  display: flex;
  align-items: center;
  gap: 50px;
  flex-wrap: wrap;
}

.kidz-safety .steps-subtitle {
  color: #C9A962;
  /* gold */
  font-weight: bold;
  margin-bottom: 10px;
}

.kidz-text {
  flex: 1;
  min-width: 300px;
}

.kidz-text h2 {
  color: #09122a;
  /* blue heading */
  font-size: 2rem;
  margin-bottom: 15px;
}

.kidz-text .intro {
  color: #666666;
  /* grey text */
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 25px;
}

/* List styling with gold checkmarks */
.kidz-text .included-list {
  list-style: none;
  padding-left: 0;
}

.kidz-text .included-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  color: #09122a;
  /* navy text for items */
  font-size: 1rem;
}

.kidz-text .included-list li::before {
  content: "\2713";
  /* checkmark */
  position: absolute;
  left: 0;
  top: 0;
  color: #C9A962;
  /* gold */
  font-weight: bold;
}

/* Right column image styling */
.kidz-image {
  flex: 1;
  min-width: 300px;
}

.kidz-image img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
  max-height: 400px;
  /* keeps image visible without cropping */
}

/* Responsive for smaller screens */
@media (max-width: 900px) {
  .kidz-safety-grid {
    flex-direction: column;
  }

  .kidz-image img {
    max-height: 300px;
  }
}

/* Kidz Commute Steps Section */
.service-block.kidz-steps {
  background-color: transparent;
  /* or white if preferred */
  padding: 60px 20px;
  text-align: center;
}

.kidz-steps .tagline-gold {
  color: #C9A962;
  /* gold */
  font-size: 1.2rem;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.kidz-steps h2 {
  color: #09122a;
  /* blue */
  font-size: 2rem;
  margin-bottom: 40px;
}

/* Steps horizontal layout */
.kidz-steps .steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.kidz-steps .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 180px;
}

.kidz-steps .step span {
  display: inline-block;
  font-size: 2rem;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.5);
  /* translucent gold */
  margin-bottom: 10px;
}

.kidz-steps .step h3 {
  color: #09122a;
  /* blue */
  font-size: 1.2rem;
  margin-bottom: 6px;
}

.kidz-steps .step p {
  color: #666666;
  /* grey */
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Arrow between steps */
.kidz-steps .arrow {
  font-size: 2rem;
  color: #C9A962;
  /* gold */
  align-self: center;
}

/* Responsive: stack on small screens */
@media (max-width: 900px) {
  .kidz-steps .steps {
    flex-direction: column;
  }

  .kidz-steps .arrow {
    transform: rotate(90deg);
    margin: 10px 0;
  }
}

/* Schools Coverage Section */
.service-block.schools-coverage {
  background-color: transparent;
  /* or white if needed */
  padding: 60px 20px;
  text-align: center;
}

.schools-coverage .tagline-gold {
  color: #C9A962;
  /* gold */
  font-size: 1.2rem;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.schools-coverage h2 {
  color: #09122a;
  /* blue */
  font-size: 2rem;
  margin-bottom: 20px;
}

.schools-coverage .intro2 {
  color: #666666;
  /* grey */
  font-size: 1rem;
  margin-bottom: 40px;
}

/* Grid layout for school cards */
.schools-coverage .schools-grid {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
}

.schools-coverage .school-card {
  background-color: #ffffff;
  /* card background */
  border-radius: 12px;
  padding: 20px;
  max-width: 300px;
  flex: 1 1 280px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}

.schools-coverage .school-card h3 {
  color: #09122a;
  /* gold heading */
  margin-bottom: 10px;
  font-size: 1.3rem;
}

.schools-coverage .school-card p {
  color: #09122a;
  /* blue text */
  font-size: 0.95rem;
}

/* Hover lift effect */
.schools-coverage .school-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Responsive */
@media (max-width: 900px) {
  .schools-coverage .schools-grid {
    flex-direction: column;
    align-items: center;
  }
}

.schools-coverage .school-card h3 i {
  color: #C9A962;
  /* gold */
  margin-right: 8px;
  font-size: 1.2rem;
  vertical-align: middle;
}

.school-cta {
  background-color: #0B1633;
  /* blue theme */
  color: #ffffff;
  text-align: center;
  padding: 60px 20px;
  /* border-radius: 12px; */
}

.school-cta h2 {
  color: #C9A962;
  /* gold */
  font-size: 2.2rem;
  margin-bottom: 15px;
}

.school-cta p {
  color: #ffffff;
  font-size: 1.1rem;
  margin-bottom: 25px;
}

.school-cta .cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.school-cta .btn-primary {
  background-color: #C9A962;
  /* gold button */
  color: #09122a;
  /* dark text */
  padding: 12px 25px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.2s ease;
}

.school-cta .btn-primary:hover {
  transform: translateY(-3px);
}

.school-cta .btn-secondary.btn-bordered {
  background-color: transparent;
  border: 2px solid #C9A962;
  color: #C9A962;
  padding: 12px 25px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.school-cta .btn-secondary.btn-bordered:hover {
  background-color: #C9A962;
  color: #09122a;
  transform: translateY(-3px);
}

.school-cta .btn-secondary i {
  margin-right: 8px;
}

.contact-features {
  background-color: transparent;
  /* clear background */
  padding: 40px 20px;
}

.contact-features .features-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  /* allows wrapping on small screens */
  gap: 20px;
}

.contact-features .feature {
  flex: 1 1 220px;
  /* responsive width for each card */
  text-align: center;
  padding: 20px;
}

.contact-features .feature i {
  font-size: 2rem;
  color: #C9A962;
  /* gold */
  margin-bottom: 10px;
}

.contact-features .feature h3 {
  color: #09122a;
  /* blue */
  margin-bottom: 5px;
  font-size: 1.2rem;
}

.contact-features .feature p {
  color: #1a1a1a;
  /* dark text */
  margin: 2px 0;
  font-size: 0.95rem;
}

/* CONTACT PAGE MAIN LAYOUT */
.contact-main {
  padding: 80px 20px;
  background-color: #f6f6f6;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  max-width: 1200px;
  margin: auto;
  align-items: start;
}

/* LEFT FORM SIDE */
.contact-left h2 {
  color: #09122a;
  margin-bottom: 10px;
}

.contact-left .intro {
  color: #666;
  margin-bottom: 25px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-form input,
.contact-form textarea {
  padding: 14px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 0.95rem;
  transition: 0.2s;
}

.contact-form textarea {
  min-height: 130px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #C9A962;
  box-shadow: 0 0 0 2px rgba(201, 169, 98, 0.2);
}

/* RIGHT SIDE CARDS */
.contact-right {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.contact-card {
  background: #09122a;
  color: white;
  padding: 28px;
  border-radius: 12px;
}

.contact-card h2,
.contact-card h3 {
  color: #C9A962;
  margin-bottom: 10px;
}

.contact-card p {
  color: #d5d9e6;
}

.cta-phone {
  margin-top: 15px;
  font-size: 1.2rem;
}

.cta-phone i {
  color: #C9A962;
  margin-right: 8px;
}

/* LIST STYLE */
.contact-card .included-list {
  margin: 15px 0 20px;
}

.contact-card .included-list li {
  margin-bottom: 6px;
  list-style: none;
}

.contact-card .included-list li::before {
  content: "✓";
  color: #C9A962;
  margin-right: 8px;
}

.hours-title {
  margin-top: 20px;
}

.open {
  font-weight: bold;
  color: #C9A962;
}

/* MOBILE */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.form-title i {
  color: #C9A962;
  margin-right: 10px;
}

.contact-form label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #09122a;
  margin-top: 8px;
}

.contact-form label i {
  color: #C9A962;
  margin-right: 8px;
}

.call-button {
  display: inline-block;
  background: #C9A962;
  color: #09122a;
  padding: 14px 22px;
  border-radius: 8px;
  font-weight: 700;
  margin-top: 15px;
  text-decoration: none;
  transition: 0.25s;
}

.call-button i {
  margin-right: 8px;
}

.call-button:hover {
  background: #b99745;
  transform: translateY(-2px);
}

.white-card {
  background: white;
  color: #09122a;
}

.white-card h3 {
  color: #09122a;
}

.white-card p {
  color: #555;
}

.white-card .included-list li::before {
  content: "✓";
  color: #C9A962;
  margin-right: 8px;
}

/* KB BOOKING FORM STYLES */
.kb-booking-section {

  padding: 80px 20px;
  font-family: 'Montserrat', sans-serif;
}

.kb-booking-card {
  max-width: 1000px;
  margin: auto;
  background: white;
  border-radius: 18px;
  padding: 50px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .15);
}

.kb-booking-title {
  color: #07122b;
  font-weight: 600;
  margin: 40px 0 10px;
  text-align: center;
}

.kb-booking-gold-icon {
  color: #C9A962;
  margin-right: 10px;
}

.kb-booking-desc {
  color: #4a4a4a;
  margin-bottom: 25px;
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* SERVICE BUBBLES */
.kb-booking-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 15px;
  margin-bottom: 30px;
  justify-items: center;
}

.kb-booking-service-grid input {
  display: none;
}

.kb-booking-service-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border-radius: 14px;
  border: 2px solid #e5e5e5;
  cursor: pointer;
  font-weight: 500;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.kb-booking-service-option i {
  font-size: 22px;
  color: #C9A962;
  margin-bottom: 8px;
}

/* LIFT ON HOVER */
.kb-booking-service-option:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.kb-booking-service-grid input:checked+.kb-booking-service-option {
  background: #07122b;
  color: white;
  border-color: #07122b;
}

.kb-booking-service-grid input:checked+.kb-booking-service-option i {
  color: #C9A962;
}

/* FORM ROWS */
.kb-booking-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 18px;
}

.kb-booking-row.kb-booking-single {
  grid-template-columns: 1fr;
}

.kb-booking-group label {
  display: block;
  font-weight: 500;
  margin-bottom: 6px;
  color: #07122b;
}

.kb-booking-group input,
.kb-booking-group textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-family: Montserrat;
}

.kb-booking-group textarea {
  min-height: 120px;
  resize: vertical;
}

/* BUTTON */
.kb-booking-btn {
  background: #C9A962;
  color: #07122b;
  padding: 16px 28px;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 20px;
  transition: .25s;
  display: block;
  /* Makes the button a block element */
  width: 100%;
  /* Full width of the container */
  text-align: center;
  /* Center the text inside */
  box-sizing: border-box;
  /* Include padding in width */
}

.kb-booking-btn:hover {
  background: #07122b;
  color: #C9A962;
}

/* INFO TEXT */
.kb-booking-info {
  margin-top: 20px;
  font-size: 14px;
  color: #555;
  text-align: center;
}

/* MOBILE */
@media(max-width:768px) {
  .kb-booking-card {
    padding: 30px 20px;
  }

  .kb-booking-row {
    grid-template-columns: 1fr;
  }
}


/* FROM HEREEEEEEEEEEEEEEE */

/* GENERAL */
.wheelchair-page .service-block {
  padding: 80px 8%;
}

.wheelchair-page .white {
  background: #fff;
  color: #112c75;
}

.wheelchair-page .blue {
  background: #09122a;
  color: #fff;
}

.wheelchair-page .gold {
  color: #C9A962;
}

.wheelchair-page .simple-different {
  color: #09122a;
}

/* HERO */
.wheelchair-page .services-hero {
  padding: 90px 8%;
  background: linear-gradient(135deg, #09122a, #0a122a);
  color: white;
}

.wheelchair-page .hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}

.wheelchair-page .hero-image img {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
}

.wheelchair-page .highlight-gold {
  color: #C9A962;
}

.wheelchair-page .highlight-white {
  color: white;
}

.wheelchair-page .btn-primary {
  background: #C9A962;
  color: #09122a;
  padding: 14px 26px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}

.wheelchair-page .btn-secondary {
  color: white;
  padding: 14px 26px;
  text-decoration: none;
}

.wheelchair-page .btn-bordered {
  border: 2px solid #C9A962;
  border-radius: 6px
}

/* FEATURES */
.wheelchair-page .features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.wheelchair-page .feature {
  text-align: center;
}

.wheelchair-page .feature i {
  font-size: 32px;
  color: #C9A962;
  margin-bottom: 15px;
}

/* SPLIT SECTION */
.wheelchair-page .split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.wheelchair-page .split-image img {
  width: 100%;
  border-radius: 12px
}

/* LIST */
.wheelchair-page .included-list {
  list-style: none;
  padding: 0
}

.wheelchair-page .included-list li {
  margin: 12px 0;
  position: relative;
  padding-left: 28px;
}

.wheelchair-page .included-list li::before {
  content: "✔";
  color: #C9A962;
  position: absolute;
  left: 0;
}

/* STEPS */
.wheelchair-page .steps {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
}

.wheelchair-page .step {
  text-align: center;
  flex: 1;
}

.wheelchair-page .step span {
  font-size: 48px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.3);
  display: block;
}

/* CTA */
.wheelchair-page .services-cta {
  background: #09122a;
  color: white;
  text-align: center;
  padding: 80px 20px;
}

.wheelchair-page .cta-buttons {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.wheelchair-page .btn-call {
  border: 2px solid #d4af37;
  padding: 14px 26px;
  border-radius: 6px;
  color: white;
  text-decoration: none;
}

/* MOBILE — WHEELCHAIR PAGE ONLY */
@media(max-width:900px) {

  .wheelchair-page .hero-grid,
  .wheelchair-page .split-grid {
    grid-template-columns: 1fr;
  }

  .wheelchair-page .features-grid {
    grid-template-columns: 1fr 1fr;
  }

  .wheelchair-page .steps {
    flex-direction: column;
  }

}

footer {
  background-color: #09122a; /* Navy */
  color: #ffffff;
  padding: 4rem 5% 2rem 5%;
  border-top: 4px solid #C9A962; /* Gold */
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr; /* Center column slightly wider for the logo */
  gap: 2rem;
  align-items: start;
}

.footer-column h3 {
  color: #C9A962; /* Gold */
  font-size: 1.1rem;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Center Column Styles */
.footer-center {
  text-align: center;
}

.footer-logo img {
  height: 120px; /* Adjust as needed */
  width: auto;
  margin-bottom: 1rem;
}

.footer-tagline {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #dddddd;
  margin-bottom: 1.5rem;
}

/* Links & List Styles */
.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-column ul li {
  margin-bottom: 0.8rem;
}

.footer-column a:hover {
  color: #C9A962;
}

/* Social Icons */
.footer-socials {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.footer-socials i {
  font-size: 1.4rem;
  color: #C9A962;
  transition: transform 0.3s ease;
}

.footer-socials a:hover i {
  transform: translateY(-3px);
}

/* Bottom Bar */
.footer-bottom {
  text-align: center;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(201, 169, 98, 0.2); /* Faint gold line */
  font-size: 0.8rem;
  color: #999;
}

/* MOBILE VIEW */
@media (max-width: 900px) {
  .footer-container {
    grid-template-columns: 1fr; /* Stack into 1 column */
    text-align: center;
  }
  
  .footer-center {
    order: -1; /* Keeps logo at the very top on mobile */
    margin-bottom: 2rem;
  }
}

/* This ensures the section title lands below your sticky header */
.policy-section {
  scroll-margin-top: 100px; /* Adjust this to match your header height */
  padding: 4rem 0;
}

.gold-divider {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accent-gold), transparent);
  margin: 2rem 0;
  opacity: 0.3;
}

.policy-section h2 {
  color: var(--primary-navy);
  margin-bottom: 1.5rem;
  font-size: 2rem;
  border-left: 4px solid var(--accent-gold);
  padding-left: 1rem;
}
/* Policies Page Specifics */
.policy-container {
    max-width: 900px;
    margin: 4rem auto;
    padding: 0 20px;
}

.policy-section {
    scroll-margin-top: 120px; /* Crucial for Sticky Header landing */
    margin-bottom: 4rem;
}

.policy-block {
    margin-bottom: 2rem;
}

.policy-block h3 {
    color: var(--primary-navy);
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
}

.policy-block p {
    margin-bottom: 1rem;
    color: #444;
}

.policy-list {
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.policy-list li {
    margin-bottom: 0.5rem;
    position: relative;
    padding-left: 1rem;
}

.policy-list li::before {
    content: "•";
    color: var(--accent-gold);
    position: absolute;
    left: -0.5rem;
}

.policy-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--accent-gold), transparent);
    margin: 4rem 0;
}


/* Booking form message */
.form-message {
    display: none;
    margin-top: 15px;
    font-size: 16px;
    font-weight: 500;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
}

/* Success message */
.form-message.success {
    color: green;
    background: #e6ffe6;
}

/* Error message */
.form-message.error {
    color: red;
    background: #ffe6e6;
}

/* Disabled submit button */
button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}