/* Typography setup */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #ffffff;
  background-color: #000000;
}

h1, h2, h3, .section-title, .cta, nav a {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}
html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  height: auto;
  box-sizing: border-box;
  overflow-x: hidden !important;
}
html, body {
  overflow-x: hidden;
  width: 100%;
}

/* NAVIGATION STYLES */
/* Navbar Container */
.navbar {
  position: sticky;
  top: 0;
  background-color: #000;
  border-bottom: 2px solid #00aaff;
  z-index: 1000;
  padding: 6px 0;
}

.navbar-content {
  max-width: auto;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.logo img {
  height: 50px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  gap: 30px;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.3rem;
  font-family: 'Bebas Neue', sans-serif;
  text-transform: uppercase;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: #00aaff;
}


.hero-slider {
  position: relative;
  height: 90vh;
  overflow: hidden;
    border-bottom: 2px solid #00aaff;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  z-index: 0;
  overflow: hidden;
}

.slide.active {
  opacity: 1;
  z-index: 1;
}

/* NEW: background layer inside the slide */
.slide-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform 10s ease;
  z-index: -1; /* Ensure it's behind the content */
}

/* Zoom effect only when slide is active */
.slide.active .slide-bg {
  transform: scale(1.1);
}

.slide-card {
  position: absolute;
  bottom: 30%;
  left: 10%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 30px;
  border-radius: 8px;
  max-width: 450px;
  box-shadow: 0 0 20px rgba(0, 170, 255, 0.3);
  backdrop-filter: blur(4px);
}

.slide-card h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  margin-bottom: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.slide-card p {
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  margin-bottom: 20px;
}

.cta-button {
  display: inline-block;
  background-color: #00aaff;
  color: #fff;
  text-decoration: none;
  padding: 12px 24px;
  font-weight: bold;
  border-radius: 6px;
  transition: background 0.3s ease;
  font-family: 'Roboto', sans-serif;
}
/* Zoom effect for active slide */

.cta-button:hover {
  background-color: rgb(40, 191, 255);
}

/* Arrow Button Styles */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  color: #00aaff;
  font-size: 36px;
  padding: 10px 16px;
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s;
  border-radius: 50%;
}

.slider-arrow:hover {
  color: #92dbff;
}

.left-arrow {
  left: 20px;
}

.right-arrow {
  right: 20px;
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
  .slider-arrow {
    font-size: 28px;
    padding: 8px 12px;
  }
}
/* Base wrapper shared across all sections */
.section-wrapper {
  min-height: 550px;
  margin-top: 12rem;
  position: relative; /* needed for absolutely positioned headings */
  overflow: hidden;
  background-color: #272727;
      border: 2px solid #0099ff;
  box-sizing: border-box; /* so padding/margins don’t push out your border */
  
}

/* Remove default heading margins — we’re absolutely positioning now */
.section-wrapper h1 {
  position: absolute;
  top: 50%;
  font-size: 6rem;
  margin: 0;
  white-space: nowrap;
  color: #ffffff;
}

/* SERVICES — heading on the left */
/* Base heading setup for all sections */
/* Base style for all headings */
.section-wrapper h1 {
  position: absolute;
  font-size: 6rem;
  margin: 0;
  white-space: nowrap;
  color: #ffffff;
  top: 50%;
  transform: translateY(-50%);
}

/* LEFT-aligned (e.g. services, gallery) */
#services-wrapper h1,
#gallery-wrapper h1 {
  left: 6rem;
  transform: translate(-50%, -50%) rotate(-90deg); /* centered and rotated */
  transform-origin: center center;
}

/* RIGHT-aligned (e.g. why-choose, contact) */
#why-choose-wrapper h1,
#contact-wrapper h1 {
  right: 6rem;
  transform: translate(50%, -50%) rotate(90deg);
  transform-origin: center center;
  text-align: right;
}
/* --- SECTION WRAPPER BASE --- */
#services-wrapper {
  margin-left: 4rem;
  position: relative;
  z-index: 0;
  min-height: 600px;
  overflow: hidden;
margin-top: 8rem;
}

/* 60/40 background split */
#services-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
/* combine map + gradient in one declaration */
  background:
    /* 1) your faint map (make sure map.png already has low opacity baked in) */
    url('map.webp') no-repeat left center / contain,
    /* 2) the grey→white split */
    linear-gradient(to right, #25252586 60%, #ffffff 60%);
  z-index: -1;
}


/* --- CAROUSEL CONTAINER --- */
.carousel-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 70%;
  transform: translateX(-50%);
  width: 600px;
  max-width: 100%;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  /* Optional for debugging layout issues */
  /* border: 1px solid red; */
}

.carousel-cards {
  display: block;
  overflow-y: auto;
  scroll-behavior: auto;
  height: 100%;
  width: 100%;
  position: relative;
  padding-right: 0.5rem;
  scrollbar-width: none;
}

.carousel-cards::-webkit-scrollbar {
  display: none;
}

.service-card {
  background-color: #000;
    position: relative; 
  color: #fff;
  border: 2px solid #00aaff;
  padding: 1.25rem;
  border-radius: 6px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 3rem;
  width: 100%;
  box-sizing: border-box;
  height: fit-content;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}
/* make the link sit in the normal document flow, under the list */
/* 2) Style the vertical CTA */
.service-card .card-cta-vertical {
  position: absolute;
  top: 65%;
  right: -0.5rem;              /* tuck it just inside the card’s right edge */
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center;   /* pivot around its own center */
  white-space: nowrap;        /* keep the text on one line */

  font-size: 0.9rem;         /* smaller than your main CTA */
  font-weight: 500;
  color: #00aaff;             /* your blue */
  text-decoration: none;
  transition: opacity 0.2s;
}

.service-card .card-cta-vertical:hover {
  opacity: 0.7;
}
.play-pause-btn {
  position: absolute;
  top: 50%;
  right: -90px;             /* in that empty space */
  transform: translateY(-50%);
  background: transparent; /* no extra box */
  border: none;
  font-size: 5rem;       /* quite large */
  color: #000;             /* black symbol */
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.play-pause-btn:focus {
  outline: none;
}
.play-pause-btn:hover {
  opacity: 0.8;
}
.service-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  color: #00aaff;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid #00aaff;
  padding-bottom: 0.25rem;
}

.card-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.card-list li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
  color: #e0e0e0;
}

.card-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #00aaff;
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1;
}
/* styles.css */
.intro {
  margin-top: 6rem !important;
  text-align: left;
  color: #fff;
  line-height: 1.5;
  max-width: 400px;      /* Optional—limits width for better readability */
  margin-left: 13%;     /* center in the container */
  margin-right: auto;
  font-size: 1rem;       /* adjust as needed */
}
/* space & center the existing CTA button inside the intro */
.intro .intro-cta {
  margin-top: 2rem;
}

#why-choose-wrapper {
  margin-right: 4rem;
  /* fallback */
  background-color: #fff;
  /* 40% white / 20% dark / 40% white */
  background: linear-gradient(
    to right,
    #fff 0%,    /* start white */
    #fff 25%,   /* stay white until 40% */
    #272727 25%,/* switch to dark at 40% */
    #272727 40%,/* stay dark until 60% */
    #fff 40%,   /* back to white at 60% */
    #fff 100%   /* end white */
  );
}
#why-choose-wrapper h1 {
  color: #000; /* true black */
}
#why-choose-wrapper {
  position: relative;
  margin-right: 4rem;
  /* plus your gradient background, etc. */
  z-index: 1;
  height: 600px;
}

/* Reviews container (left 20% column) */
.reviews {
  /* keep your positioning and layout exactly */
  position: absolute;
  top: 50%;
  left: 5%;
  width: 30%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 0rem;
  padding-left: 3rem;
  box-sizing: border-box;
  height: 600px;
  overflow: visible;
}

/* Wrapper around each review: crisp white, soft corners, subtle lift */
.review-box {
  position: relative;
  background: #000000;                          /* switch to white */
  padding: 1rem;                              /* slightly more padding */
  border-radius: 0.3rem;                        /* softer rounding */
  border: 2px solid #00aaff;     /* lighter blue border */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.9);    /* gentle shadow */
  width: 90%;
  margin-left: 0%;
  box-sizing: border-box;
  overflow: visible;
margin-bottom: 3rem;
margin-left: 1rem;
}

/* Individual review text */
.review {
  position: relative;
  padding: 0;
  background: transparent;
  color: #ffffff;                               /* softer dark for text */
  font-size: 0.9rem;                              /* bump up slightly */
  line-height: 1.6;                             /* more breathing room */
  font-style: italic;                           /* keep the italics */
  font-family: Georgia, serif;                  /* premium serif */
  overflow: visible;
  text-align: center;
}
.reviews-scroll {
  gap: 3rem;
   display: block;
  overflow-y: auto;
  overflow: auto;
  scroll-behavior: auto;
    scrollbar-width: none;
    height: 100%;
}
.reviews-scroll::-webkit-scrollbar {
  display: none;
}
/* Decorative opening quote (top-left) */
.review::before {
  content: "“";
  position: absolute;
  top: -45px;                                   /* pull in closer */
  left: -55px;
  font-size: 7rem;                              /* smaller, less heavy */
  color: #00aaff;                  /* ultra-subtle watermark */
  animation: sparkle 4s ease-in-out infinite;   /* slower, gentler sparkle */
  pointer-events: none;
}

/* Decorative closing quote (bottom-right) */
.review::after {
  content: "”";
  position: absolute;
  bottom: -120px;
  right: -40px;
  font-size: 7rem;
  color: #00aaff;
  animation: sparkle 4s ease-in-out infinite;
  pointer-events: none;
}
.review-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.review-name {
  font-size: 0.95rem;
  font-weight: bold;
  color: #00aaff;
}

.review-tag {
  font-size: 0.75rem;
  color: #00aaff;
  opacity: 0.8;
}


.review-box hr {
  border: none;
  border-top: 1px solid #00aaff;
  margin: 0.5rem 0 1rem;
}

/* sparkle animation (gentler) */
@keyframes sparkle {
  0%, 100% {
    opacity: 0.2;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.3;
    transform: scale(1.05) rotate(4deg);
  }
}
.review-toggle-btn {
  position: relative;
  background: transparent;
  border: none;
  font-size: 5rem;
  color: #000;
  cursor: pointer;
  padding-left: 1.5rem;
  line-height: 1;
  align-self: center;
  z-index: 5;
}
.review-toggle-btn:focus {
  outline: none;
}
.review-toggle-btn:hover {
  opacity: 0.8;
}
.reviews-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding-left: 1rem;
  padding-top: 1rem;
  height: 600px;
}

.feature-box {
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translateY(-50%);
  width: 45%;
  height: 80%;
  background-color: #272727;
  padding: 1rem;
  padding-top: 0rem !important;
  z-index: 1;
  overflow: visible;
}

/* Subtle star overlay */
.feature-box::before {
  content: "★ ★ ★ ★ ★";
  position: absolute;
  top: 0;

  font-size: 11rem;
  line-height: 4rem;
  letter-spacing: -1rem;
  color: rgba(255, 255, 255, 0.1);
  white-space: pre;
  pointer-events: none;
  user-select: none;
  width: 200%;
  height: 100%;
  transform: rotate(-35deg);
}

/* keep your existing .feature-box rules */

.feature-box h2 {
    font-size: 3.6rem;
    margin-top: 0rem !important;
    line-height: 0.77;
}
.tko-feature-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 0rem;
}

.tko-card {
  flex: 1 1 45%;
  background: rgba(0, 0, 0, 0.1);
  padding: 16px 16px;
  color: #fff;
  border-left: 4px solid #00aaff;
  border-radius: 6px;
  backdrop-filter: blur(3px);
  transition: transform 0.3s ease;
}

.tko-card:hover {
  transform: translateY(-4px);
}

.tko-card h3 {
  color: #00aaff;
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.tko-card p {
  font-size: 0.9rem;
  line-height: 1.5;
}
.cta-container {
  margin-top: 2.5rem;
  text-align: center;
}

#gallery-wrapper {
  margin-left: 4rem;
   background: linear-gradient(to top, #272727 50%, #ffffff 50%);
   height: 600px;
}
.split-heading {
  font-size: 5rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;

  background: linear-gradient(to left, rgb(0, 0, 0) 50%, rgb(255, 255, 255) 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Optional for Firefox support (won't work yet but no harm) */
  background-clip: text;
  color: transparent;
}
.gallery-scroll-wrapper {
  position: absolute;
  top: 5%;
  right: 0;
  width: 80%;
  height: 90%;
  overflow: visible;
}
#galleryCarousel {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: hidden;   /* ← add this */
  border-left: 4px solid #00aaff;
}

.gallery-scroll-track {
  display: flex;
  width: max-content;
  height: 100%;
}

.gallery-scroll-track img {
  height: 100%;
  width: auto;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 0.3rem;
}
#galleryToggle.gallery-toggle-btn {
  position: absolute;
  top: 50%;
  left: -6.5rem; /* adjust further left if needed */
  transform: translateY(-50%);
  font-size: 5rem;
  color: #000000;           /* Bright blue to match your theme */
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 9999;            /* High priority to stay above images */
  pointer-events: auto;
}

#galleryToggle.gallery-toggle-btn:hover {
  opacity: 0.8;
}

/* Hide by default */
.image-modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 10000;
}

/* Center the enlarged image */
.modal-img {
  position: absolute;
  top: 50%; left: 50%;
  max-width: 90%; max-height: 90%;
   min-height: 90vmin;
  transform: translate(-50%, -50%);
}

/* “×” close control */
.modal-close {
  position: absolute;
  top: 20px; right: 30px;
  font-size: 40px; color: #fff;
  cursor: pointer;
  user-select: none;
}
#contact-wrapper {
  margin-right: 4rem;
  height: 600px;
  background:

    linear-gradient(to right, #242424 50%, #ffffff 50%);  /* grey→white split */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rem;
}
#contact-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background:
    url('cbg.png') no-repeat left center / contain,
    linear-gradient(to right, #ffffff 50%, #ffffff 50%);
  z-index: 0;
}

#contact-wrapper h1 {
  color: #000;
  z-index: 1;
}

/* Centering Container */
.contact-container {
  width: 100%;
  max-width: 500px;
  padding: 1rem;
}

.contact-heading {
  text-align: center;
  color: #00aaff; /* blue heading */
  font-size: 4rem;
  margin-bottom: 1rem;
  margin-top: 0rem;
}

.contact-form {
  background-color: #00000013; /* black form background */
   backdrop-filter: blur(2px); /* optional: blur background behind form */
  padding: 2rem;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 500px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.9);   
}

.contact-form input,
.contact-form textarea {
 background-color: #0000001e; /* black form background */
   backdrop-filter: blur(4px); /* optional: blur background behind form */
  color: #fff;
  border: 2px solid #00aaff; /* Always blue border */
  padding: 0.75rem 1rem;
  border-radius: 4px;
  font-size: 1rem;
  transition: box-shadow 0.3s ease;
  font-family: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  box-shadow: 0 0 15px #00aaff; /* Blue glow on focus */
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #ffffff;
}

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

.cta-button {
  background-color: #00aaff;
  color: white;
  border: none;
  padding: 0.75rem;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Social Icon Column */
.social-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  margin-left: 8rem;
  margin-top: 1rem;
}

.social-column img {
  width: 80px;
  height: 80px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.social-column img:hover {
  transform: scale(1.1);
}
.social-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}

/* Icon + label row */
.social-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Labels */
.social-row span {
  font-size: 1.3rem;
  font-weight: 500;
  color: #000;
  font-family: 'Bebas Neue', sans-serif;
}
#site-footer {
  background-color: #000000;
  color: #ffffff;
  padding: 0rem;
  text-align: center;
  margin-top: 1rem;
  border-top: 2px solid #00aaff;
}

.footer-container {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
    font-size: 0.875rem;
  color: hsl(0, 0%, 100%);
}
footer a {
  color: inherit;        /* makes it same color as surrounding text */
  text-decoration: none; /* removes underline */
    font-size: 0.875rem;
  color: hsl(0, 0%, 100%);
}

.footer-copy {
  font-size: 0.875rem;
  color: hsl(0, 0%, 100%);
}
/* HAMBURGER BASE STYLES */
/* HAMBURGER BUTTON */
.hamburger {
  display: none;
  font-size: 2rem;
  background: none;
  border: none;
  color: #00aaff;
  cursor: pointer;
  z-index: 1001;
}

@media (max-width: 767px) {
  .nav-links {
    position: absolute;
    top: 70px; /* below navbar */
    right: 20px;
    background-color: #000;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    padding: 10px 20px;
    border: 2px solid #00aaff;
    border-radius: 8px;
    width: auto;
    min-width: 100px;

    /* NEW for smooth transition */
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .nav-links a {
    display: block;
    padding: 12px 0;
    font-size: 1.2rem;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #00aaff;
  }

  .nav-links a:last-child {
    border-bottom: none;
  }

  .nav-links.show {
    display: flex; /* still needed for flex layout */
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .hamburger {
    display: block;
  }

  .navbar-content {
    position: relative;
  }
}

@media (max-width: 767px) {
  #services-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    min-height: auto;
    margin-left: 0rem;
    margin-right: 0rem;
    margin-top: 9rem;
    overflow-x: hidden !important;
  }

  .intro {
    max-width: 100%;
    margin-left: 0;
    text-align: center;
    padding: 0 1rem;
  }

  .carousel-container {
    position: static;
    width: 90%;
    height: auto;
    margin-top: 4rem;
    transform: none;
    display: flex;
    justify-content: center;
  }

  .carousel-cards {
    height: auto;
    max-height: 500px;
    overflow-y: auto;
    width: 90%;
    padding-left: 0.5rem;
  }

  .service-card {
    margin: 1rem auto;
    width: 100%;
    box-shadow: none;
  }

  .card-cta-vertical {
    display: none; /* too tight for sideways text on mobile */
  }
  .card-cta-vertical {
    display: block;      /* show it again */
    transform: none;     /* undo any rotation */
    position: relative;  /* flow inside the card */
    margin: 0rem auto 0; /* give some breathing room */
    font-size: 1rem;     /* scale it down if you like */
  }
  .play-pause-btn {
    font-size: 2.5rem;
    right: -40px;
    top: 10px;
  }
    #services-wrapper::before {
    background:
      url('map1.webp') no-repeat top center / contain,
      linear-gradient(to bottom, #25252586 50%, #ffffff 50%);
  }
   #services-wrapper h1 {
    position: static;
    transform: none;
    text-align: center;
    font-size: 3.8rem;
    margin-bottom: 1rem;
    white-space: normal;
  }
    .intro {
    margin-top: 0rem !important;
    padding: 0 1rem;
    text-align: left;
  }
    .intro-cta {
    text-align: center;
  display: flex;
  justify-content: center;
    padding-top: 2rem;
  }
  .play-pause-btn {
    right:89%;
    top: 75%;
    font-size: 2rem;
    z-index: 10;
  }
}
@media (max-width: 1200px) {
  #why-choose-wrapper {
    height: auto;
    margin-right: 0rem;
    padding: 2rem 0rem;
    background: linear-gradient(to top, #ffffff 50%, #272727 50%);
    overflow-x: hidden;
  }
  
  .why-choose-flex {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .reviews-wrapper {
    order: 2;
  }

  .feature-box {
    order: 1;
  }
  #why-choose-wrapper h1 {
    position: static;
    transform: none;
    text-align: center;
    font-size: 3.8rem;
    margin-bottom: 0rem;
    color: #fff;
  }

  .reviews-wrapper {
    flex-direction: column;
    align-items: center;
    height: auto;
    padding: 0;
    gap: 2rem;
    flex-direction: column-reverse; /* put reviews last */
  }

  .reviews {
    position: static;
    width: 85%;
    transform: none;
    padding-left: 0;
    height: 500px;
    max-width: 700px;
  }

  .review-box {
    width: 90%;
    margin: 1rem auto;
    box-shadow: none;
  }

    .feature-box {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: none;
    height: auto;
    padding: 1.5rem 1rem;
    margin: 2rem 0;
    background-color: #272727;
    box-sizing: border-box;
  }

  .feature-box h2 {
    font-size: 1.5rem;
    text-align: center;
    line-height: normal;
  }

  .feature-box::before {
    content: "★\A★\A★\A★\A★";
    white-space: pre;
    position: absolute;
    top: 1rem;
    left: 65%;
    font-size: 9rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.08);
    transform: none;
    z-index: 0;
    width: auto;
    height: auto;
 
  }

  .feature-box {
    position: relative;
    overflow: hidden;
    justify-items: center;
  }

  .feature-box * {
    position: relative;
    z-index: 1;
  }


  .tko-feature-cards {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .tko-card {
    width: 90%;
    padding: 1rem;
    max-width: 500px;
  }

  .cta-container {
    margin-top: 4rem;
  }

   .review-toggle-btn {
    position: absolute;
    left: 1%;
    top: 82%;
    transform: none;
    z-index: 2;
    font-size: 2rem;
    padding: 0;
    background: transparent;
  }

}
@media (max-width: 767px) {
   #gallery-wrapper h1 {
    font-size: 3.8rem;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff !important;
    left: 3rem;
    z-index: 99999999;
  }

.gallery-scroll-track  {
  height: 80%;
  width: auto;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 0.5rem;
 

}
#galleryCarousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

}
 
#galleryToggle.gallery-toggle-btn {
  font-size: 2rem;
    left: 1.3rem; /* adjust further left if needed */
    top: 94%;
    color: #fff;
}
.gallery-scroll-wrapper {
  position: static;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  padding: 3 0rem;
  box-sizing: border-box;
}
#gallery-wrapper {
  background-color: #ffffff;
  margin-left: 0rem;
}
#contact-wrapper {
    background-image: url('cbg1.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
    background-color: #ffffff;

    height: auto;
    padding: 2rem 1rem;
    margin-right: 0rem;
    margin-left: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  #contact-wrapper::before {
    content: none !important;
    display: none !important;
    background: none !important;
  }
  #contact-wrapper h1 {
    position: static;
    transform: none;
    font-size: 3.8rem;
    text-align: center;
    color: #000000;
    margin-bottom: 2rem;
  }

  /* Put icons ABOVE the form */
  .social-column {
    order: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1rem;
    justify-items: center;
    margin-bottom: 2rem;
    width: 100%;
  }

  .social-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .social-row img {
    width: 50px;
    height: 50px;
  }

  .social-row span {
    font-size: 1rem;
    color: #ffffff;
    text-align: center;
  }
.social-row {
  padding-left: 0 !important;
  margin-left: 0 !important;
 
}
.social-column {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.social-row span {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  font-family: 'Bebas Neue', sans-serif;
}
  .contact-container {
    order: 2;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 4rem;
  }

  .contact-form {
    width: 100%;
    max-width: 90%;
    padding: 1.5rem;
    border-radius: 6px;

  }

  .contact-heading {
    font-size: 2rem;
    color: #00aaff;
    text-align: center;
    margin-bottom: 1.5rem;
  }

  .contact-form input,
  .contact-form textarea {
    font-size: 1rem;
  }
    .slide-card {
    bottom: 10%;
    left: 8%;
    max-width: 70%;
    padding: 1rem;
    font-size: 0.9rem;
    border-radius: 6px;
  }

  .slide-card h1 {
    font-size: 2rem;
  }

  .slide-card p {
    font-size: 1rem;
  }
}
@media (min-width: 1201px) and (max-width: 1300px) {
/* ─── Why Choose TKO: Smaller cards & headings ─── */
#why-choose-wrapper .tko-feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;              /* tighten spacing */
  justify-items: center;  /* center each card */
}

#why-choose-wrapper .tko-card {
  width: 100%;
  max-width: 200px;       /* cap card width at 200px */
  padding: 0.75rem;       /* reduce internal padding */
  box-shadow: none;       /* optional: simplify visual weight */
}

#why-choose-wrapper .feature-box h2 {
  font-size: 3rem;      /* shrink the h2 titles */
  line-height: 1;       /* tighter lines */
  margin-bottom: 0.5rem;  /* a little space below */
}

/* Center the “Book Now” button under the cards */
#why-choose-wrapper .cta-container {
  text-align: center;
  margin-top: 1rem;
}

#why-choose-wrapper .cta-container a {
  padding: 0.5rem 1rem;
  font-size: 1rem;
}
#services-wrapper .carousel-container {
  width: 60%;          /* or try 50%, 55%… whatever feels right */
  max-width: 500px;    /* hard cap so it never grows too large */

}


/* Optionally, also narrow the inner track */
#services-wrapper .carousel-cards {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;      /* center the scroll-track if it’s smaller */
}

}
@media (min-width: 768px) and (max-width: 1200px) {
    #gallery-wrapper h1 {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff !important;
    left: 3rem;
    z-index: 99999999;
  }


.gallery-scroll-track  {
  height: 80%;
  width: auto;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 0.5rem;
 

}
#galleryCarousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

}
 
#galleryToggle.gallery-toggle-btn {
  font-size: 2rem;
    left: 1.3rem; /* adjust further left if needed */
    top: 94%;
    color: #fff;
}
.gallery-scroll-wrapper {
  position: static;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  padding: 3 0rem;
  box-sizing: border-box;
}
#gallery-wrapper {
  background-color: #ffffff;
}
    #contact-wrapper {
    height: auto;
    padding: 2rem 1rem;
    margin-right: 3rem;
    margin-left: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  #contact-wrapper h1 {
 right: 3rem;
  }

  /* Put icons ABOVE the form */
  .social-column {
    order: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1rem;
    justify-items: center;
    margin-bottom: 2rem;
    width: 60%;
  }

  .social-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .social-row img {
    width: 50px;
    height: 50px;
  }

  .social-row span {
    font-size: 1rem;
    color: #ffffff;
    text-align: center;
  }
.social-row {
  padding-left: 0 !important;
  margin-left: 0 !important;
 
}
.social-column {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.social-row span {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  font-family: 'Bebas Neue', sans-serif;
}
  .contact-container {
    order: 2;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 4rem;
  }

  .contact-form {
    width: 70%;
    max-width: 90%;
    padding: 1.5rem;
    border-radius: 6px;

  }

  .contact-heading {
    font-size: 2rem;
    color: #00aaff;
    text-align: center;
    margin-bottom: 1.5rem;
  }

  .contact-form input,
  .contact-form textarea {
    font-size: 1rem;
  }
  #contact-wrapper::before {

  background:
    url('cbg.png') no-repeat bottom center / contain,
    linear-gradient(to right, #ffffff 50%, #ffffff 50%);

}
  #why-choose-wrapper {
    height: auto;
    margin-right: 3rem;
    padding: 2rem 0rem;
    background: linear-gradient(to top, #ffffff 50%, #272727 50%);
    overflow-x: hidden;
  }
   #why-choose-wrapper h1 {
    position: static;
    transform: none;
    text-align: center;
    font-size: 6rem;
    margin-bottom: 0rem;
    color: #fff;

  }
    #services-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    min-height: auto;
    margin-left: 3rem;
    margin-right: 0rem;
    margin-top: 9rem;
    overflow-x: hidden !important;
  }

  .intro {
    max-width: 100%;
    margin-left: 0;
    text-align: center;
    padding: 0 1rem;
  }

  .carousel-container {
    position: static;
    width: 90%;
    height: auto;
    margin-top: 4rem;
    transform: none;
    display: flex;
    justify-content: center;
  }

  .carousel-cards {
    height: auto;
    max-height: 500px;
    overflow-y: auto;
    width: 90%;
    padding-left: 0.5rem;
  }

  .service-card {
    margin: 1rem auto;
    width: 100%;
    box-shadow: none;
    max-width: 700px;
  }
  #services-wrapper h1 {
    font-size: 6rem !important;
  }
  .card-cta-vertical {
    display: none; /* too tight for sideways text on mobile */
  }
  .card-cta-vertical {
    display: block;      /* show it again */
    transform: none;     /* undo any rotation */
    position: relative;  /* flow inside the card */
    margin: 0rem auto 0rem !important; /* give some breathing room */
    font-size: 1rem;     /* scale it down if you like */
  }
  .play-pause-btn {
    font-size: 2.5rem;
    right: 93% !important;
    top: 10px;
  }
    #services-wrapper::before {
    background:
      url('map.webp') no-repeat top center / contain,
      linear-gradient(to bottom, #25252586 50%, #ffffff 50%);
  }
   #services-wrapper h1 {
    position: static;
    transform: none;
    text-align: center;
    font-size: 3.8rem;
    margin-bottom: 1rem;
    white-space: normal;
  }
    .intro {
    margin-top: 0rem !important;
    padding: 0 8rem;
    text-align: left;
  }
    .intro-cta {
    text-align: center;
  display: flex;
  justify-content: center;
    padding-top: 2rem;
  }
  .play-pause-btn {
    right:89%;
    top: 75%;
    font-size: 2rem;
    z-index: 10;
  }
    .review-toggle-btn {
    position: absolute;
    left: 4%;
    top: 82%;
    transform: none;
    z-index: 2;
    font-size: 2rem;
    padding: 0;
    background: transparent;
  }
}
/* Hide scrollbar in WebKit browsers (Chrome, Safari, Edge Chromium) */
.gallery-scroll-wrapper::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar in Firefox */
.gallery-scroll-wrapper {
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE and Edge */
}

.no-interaction,
.no-interaction * {
  pointer-events: none !important;
  touch-action: none !important;
}
#galleryCarousel {
  overflow-x: auto !important;         /* must be scrollable */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
/* Target only your horizontal gallery carousel */
#galleryCarousel {
  /* Firefox */
  scrollbar-width: thin;                  /* make it slim */
  scrollbar-color: white #00aaff;         /* thumb = white, track = #00aaff */
}

/* WebKit browsers */
#galleryCarousel::-webkit-scrollbar {
  height: 6px;                            /* thickness of the bar */
  background: #00aaff;                    /* track = #00aaff */
}

#galleryCarousel::-webkit-scrollbar-thumb {
  background-color: white;                /* thumb = white */
  border-radius: 3px;                     /* rounded ends */
}

#galleryCarousel::-webkit-scrollbar-button {
  display: none;                          /* hide the arrow buttons */
  width: 0;
  height: 0;
}

#galleryCarousel::-webkit-scrollbar-track {
  background: #00aaff;                    /* ensure track = #00aaff */
}
#galleryCarousel.no-interaction::-webkit-scrollbar-thumb,
#galleryCarousel.no-interaction::-webkit-scrollbar-track {
  pointer-events: none;
}
/* make sure your sections are positioned so we can absolutely position inside them */
#servicesSection,
#reviewsSection {
  position: relative;
}
/* Base popup (you already have this) */
.section-popup {
  position: absolute;
  /* remove any top/right you set before, we’ll override below */
  /* top: 1rem; */
  /* right: 1rem; */
  /* bottom: auto; */
  /* left: auto; */
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  opacity: 1;
  transition: opacity 1s ease;
  pointer-events: none;
  z-index: 10;
}

/* Services carousel popup → bottom right */
/* Services section → popup bottom-right */
#services-section .section-popup {
  top: auto;
  right: 1rem;
  bottom: 1rem;
  left: auto;
}

/* “Why choose” (reviews) section → popup bottom-left */
#why-choose-section .section-popup {
  top: auto;
  left: 1rem;
  bottom: 1rem;
  right: auto;
}
#gallery-section .section-popup {
  top:    auto;
  right:  1rem;
  bottom: 1rem;
  left:   auto;
}

/* Append the extra bit of text for gallery */
#gallery-section .section-popup::after {
  margin-left: 0.25rem;
  font-size: 0.9rem;
  display: inline-block;
  vertical-align: middle;
  color: #ddd; /* or whatever accent color you prefer */
}
/* when we add this class, it will fade out */
.section-popup.fade-out {
  opacity: 0;
}
.services-header {
  position: relative;
  height: 40vh;
  background: url('serviceshero.jpeg') center center / cover no-repeat;
  border-bottom: 2px solid #00aaff;
  overflow: hidden;
}

.services-title {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 8rem;
  color: #000;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 1px;
  padding: 1rem 2rem;
  border-radius: 8px;
  z-index: 2;
}
/* --- BASIC DETAILING SECTION (full background image) --- */
#basic-detailing-section {
  position: relative;
  margin-left: 4rem;
  min-height: 500px;
  overflow: hidden;
  border-top: 2px solid #00aaff;
  border-bottom: 2px solid #00aaff;

  background:  linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('basic1.webp') center center / cover no-repeat;
  background-color: #252525; /* fallback */
  margin-top: 8rem;
}


#basic-detailing-section h1 {
  position: absolute;
  top: 16rem;
  left: 6rem;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center center;
  font-size: 5rem !important;
  font-family: 'Bebas Neue', sans-serif;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
  z-index: 5;
  pointer-events: none
}

.basic-detailing-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 4rem 6rem;
  position: relative;
  z-index: 1;
  gap: 4rem;
}

.basic-description {
  flex: 1;
  max-width: 33%;
  color: #fff;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Roboto', sans-serif;
  margin-left: 6rem;
  margin-top: 0rem;
  align-self: flex-start;
}

.basic-description p {
  line-height: 1.6;
}

.basic-boxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 1.5rem;
  max-width: 600px;
  align-self: center;
  position: relative;
  margin-right: 5%;
}

.card1 { grid-column: 2; grid-row: 1; }
.card2 { grid-column: 2; grid-row: 2; }
.card3 { grid-column: 2; grid-row: 3; }

.detail-card {
  height: 75px;
  position: relative;
  width: 480px;
  border: 2px solid #00aaff;
  border-radius: 8px;
  overflow: hidden;
  padding: 1.2rem 1.5rem;
  background-color: #000000;
  background-image: url('logo-transparent.png');
  background-repeat: no-repeat;
  background-position: right;
  background-size: 70%;
  background-blend-mode: lighten;
  opacity: 1;
  transition: all 0.4s ease;
  cursor: pointer;
  color: #000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.detail-card h3 {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  color: #00aaff;
  text-transform: uppercase;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  border: 1px solid #00aaff;
  display: inline-block;
  padding: 0rem 01rem;
  border-radius: 6px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  background: rgba(0, 0, 0, 0.5);
  margin-bottom: 2rem;
  border-bottom-left-radius: 30px;
  border-top-right-radius: 30px;
}

.detail-card p {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
  color: #ffffff;
}

/* CLICK/TAP EXPANSION (no hover) */
.detail-card.active {
  height: 350px;
}
.detail-card.active p {
  opacity: 1;
  max-height: 250px;
  margin-top: 10px;
}

.detail-card ul {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
  margin: 0;
  padding-left: 1.25rem;
  list-style-type: disc;
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.6;
}
.detail-card.active ul {
  opacity: 1;
  max-height: 300px;
  margin-top: 0.75rem;
}

.detail-card strong {
  display: block;
  margin-top: 1rem;
  color: #ffffff;
  font-weight: bold;
}

.detail-card-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.2rem 1.5rem;
  transition: all 0.4s ease;
}
.detail-card.active .detail-card-content {
  background-color: #000;
  height: auto;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.detail-card li::marker { color: #00aaff; }

/* --- PREMIUM DETAILING SECTION --- */
/* --- PREMIUM DETAILING SECTION --- */
/* --- PREMIUM DETAILING SECTION (full background image, darkened) --- */
#premium-detailing-section {
  position: relative;
  margin-right: 4rem;
  min-height: 500px;
  overflow: hidden;
  border-top: 2px solid #00aaff;
  border-bottom: 2px solid #00aaff;

  background:
linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url('premium.webp') center center / cover no-repeat;
  background-color: #252525; /* fallback */
}


#premium-detailing-section h1 {
  position: absolute;
  top: 16rem;
  right: 6rem;
  transform: translate(50%, -50%) rotate(90deg);
  transform-origin: center center;
  font-size: 5rem !important;
  font-family: 'Bebas Neue', sans-serif;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
  z-index: 5;
  pointer-events: none;
}

.premium-detailing-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 4rem 6rem;
  position: relative;
  z-index: 1;
  gap: 4rem;
}

.premium-description {
  flex: 1;
  max-width: 33%;
  color: #fff;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Roboto', sans-serif;
  margin-right: 6rem;
  align-self: flex-start;
}
.premium-description p { line-height: 1.6; }

.premium-boxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: 1.5rem;
  max-width: 600px;
  align-self: center;
  position: center;
  margin-left: 5%; /* adjust to taste */
}

.pcard1 { grid-column: 1; grid-row: 1; }
.pcard2 { grid-column: 1; grid-row: 2; }
.pcard3 { grid-column: 1; grid-row: 3; }

.premium-boxes .detail-card { width: 480px; }
.premium-boxes .detail-card h3 {
  padding: 0.3rem 1rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.premium-boxes .detail-card {
  background-image: url('logo-transparent.png');
  background-repeat: no-repeat;
  background-position: right;
  background-size: 68%;
}

/* --- XTRAS (matches BASIC styling, but 40/60 split) --- */
/* --- XTRAS (full background image) --- */
#xtras-section {
  position: relative;
  margin-left: 4rem;
  min-height: 500px;
  overflow: hidden;
  border-top: 2px solid #00aaff;
  border-bottom: 2px solid #00aaff;

  background:  linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),  url('extras1.webp') center center / cover no-repeat;
  background-color: #252525; /* fallback color */
}


#xtras-section h1 {
  position: absolute;
  top: 16rem;
  left: 6rem;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center center;
  font-size: 5rem !important;
  font-family: 'Bebas Neue', sans-serif;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
  z-index: 5;
  pointer-events: none;
}

.xtras-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 4rem 6rem;
  position: relative;
  z-index: 1;
  gap: 4rem;
}

.xtras-description {
  flex: 1;
  max-width: 28%;
  color: #fff;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Roboto', sans-serif;
  margin-left: 6rem;
  margin-top: 0rem;
  align-self: flex-start;
}
.xtras-description p { line-height: 1.6; }

.xtras-boxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  gap: 1.5rem;
  max-width: 700px;
  align-self: center;
  position: relative;
  margin-right: 2%;
}
.xtras-boxes .detail-card { width: 300px;
   background-image: url('logo-transparent.png');
  background-repeat: no-repeat;
  background-position: right;
  background-size: 100%;}
.xtras-boxes .detail-card.active { height: 250px; }

/* --- SERVICE AREA SECTION --- */
#service-area-section {
  position: relative;
  margin-right: 4rem;
  min-height: 450px;
  overflow: hidden;
  border: 2px solid #00aaff;
 

  /* left = white, right = image */
  background:
    
    url('map3.webp');
  background-size: 100% 100%, cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #ffffff;
  margin-top: 12rem;
  margin-bottom: 10rem;
}

/* Vertical heading on the RIGHT */
#service-area-section h1 {
  position: absolute;
  top: 50%;
  right: 6rem;
  transform: translate(50%, -50%) rotate(90deg);
  transform-origin: center center;
  font-size: 5rem !important;
  font-family: 'Bebas Neue', sans-serif;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
  z-index: 5;
  pointer-events: none;
}

/* Content area on the LEFT */
.service-area-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 4rem 6rem;
  position: relative;
  z-index: 1;
  gap: 4rem;
}

/* Service Area description styled like contact form */
.service-area-description {
  background-color: #00000013;       /* transparent black */
  backdrop-filter: blur(5px);        /* subtle blur */
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.9);
  color: #fff;                       /* white text */
  max-width: 500px;
  font-size: 1rem;
  font-family: inherit;
  margin-left: 15%;
  padding: 3rem;
}

.service-area-description p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.service-area-note {
  background-color: #0000001e;
  border: 2px solid #00aaff;
  padding: 1rem;
  border-radius: 4px;
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 1.5rem;
}
/* ===== ≤1200px ===== */
@media (max-width: 1200px) {
  /* Headings: top center, no rotation */
  #basic-detailing-section h1,
  #premium-detailing-section h1,
  #xtras-section h1,
  #service-area-section h1 {
    position: static;
    transform: none;
    text-align: center;
    margin-bottom: 1.5rem;
    margin-top: 2rem;
    white-space: normal;
  }

  /* Stack descriptions above boxes */
  .basic-detailing-grid,
  .premium-detailing-grid,
  .xtras-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .basic-description,
  .premium-description,
  .xtras-description {
    order: -1; /* push description above boxes */
  }

  /* Let descriptions grow */
  .basic-description,
  .premium-description,
  .xtras-description,
  .service-area-description {
    max-width: none;
    width: 100%;
    margin: 0 auto;
  }

  /* Column fills width cleanly */
  .basic-detailing-grid,
  .premium-detailing-grid,
  .xtras-grid {
    align-items: stretch;
    padding: 2rem 1.5rem;
  }

  /* Cards reflow */
  .basic-boxes,
  .premium-boxes,
  .xtras-boxes {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
  }

  /* Clear manual grid placement */
  .card1, .card2, .card3,
  .pcard1, .pcard2, .pcard3 {
    grid-column: auto;
    grid-row:   auto;
  }

  /* Allow cards to shrink */
  .detail-card,
  .premium-boxes .detail-card,
  .xtras-boxes .detail-card {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }

  /* --- later ≤1200px rules (preserve order) --- */

  /* Switch hero image + shift to right */
  .services-header {
    background: url('serviceshero1.jpeg') right center / cover no-repeat;
  }

  /* Scale down and center the title */
  .services-title {
    font-size: 3.7rem;
    padding: 0;
  }

  /* Fill card background */
  .detail-card,
  .premium-boxes .detail-card,
  .xtras-boxes .detail-card {
    background-size: 100%;
  }
}

/* ===== 768px–1200px ===== */
@media (min-width: 768px) and (max-width: 1200px) {
  .basic-boxes .detail-card,
  .premium-boxes .detail-card,
  .xtras-boxes .detail-card {
    max-width: 88%;
    flex: 1 1 35%;
    margin: 0 auto;
  }

  .basic-description,
  .premium-description,
  .xtras-description,
  .service-area-description {
    max-width: 75%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  /* Center the CTA buttons inside descriptions */
  .basic-description .cta-button,
  .premium-description .cta-button,
  .xtras-description .cta-button,
  .service-area-description .cta-button {
    display: block;
    margin: 2rem auto 0;
    width: fit-content;
  }

  #service-area-section {
    background: url('map2.webp') center center / cover no-repeat;
  }

  .detail-card p,
  .detail-card ul,
  .detail-card li,
  .detail-card strong {
    font-size: 0.8rem;
  }

  #basic-detailing-section h1,
  #premium-detailing-section h1,
  #xtras-section h1,
  #service-area-section h1 {
    font-size: 6rem;
  }

  .basic-detailing-grid,
  .premium-detailing-grid,
  .xtras-grid,
  .service-area-grid {
    padding-top: 0;
    margin-top: 0;
  }

  .services-title {
    font-size: 6rem;
  }

  #basic-detailing-section,
  #xtras-section {
    margin-left: 3rem;
    margin-right: 0;
  }

  #premium-detailing-section,
  #service-area-section {
    margin-right: 3rem;
    margin-left: 0;
  }
}

/* ===== ≤767px ===== */
@media (max-width: 767px) {
  /* Service area background */
  #service-area-section {
    background: url('map1.webp') center center / cover no-repeat;
  }

  /* Headings size on mobile */
  #basic-detailing-section h1,
  #premium-detailing-section h1,
  #xtras-section h1,
  #service-area-section h1 {
    font-size: 3.5rem !important;
  }

  /* Descriptions: 90% width, centered, left-aligned */
  .basic-description,
  .premium-description,
  .xtras-description,
  .service-area-description {
    width: 90%;
    margin: 0 auto;
    text-align: left;
  }

  /* Tighter top padding on mobile */
  .basic-detailing-grid,
  .premium-detailing-grid,
  .xtras-grid,
  .service-area-grid {
    padding-top: 0.5em;
  }

  /* Cards: single column; later block sets width:100% and centers items */
  .basic-boxes,
  .premium-boxes,
  .xtras-boxes {
    grid-template-columns: 1fr;
    width: 100%;
    justify-items: center;
  }

  /* Allow full 90% width first, then final width below */
  .detail-card,
  .premium-boxes .detail-card,
  .xtras-boxes .detail-card {
    max-width: none;
  }

  /* Smaller list text on cards */
  .detail-card ul {
    font-size: 0.8rem;
    line-height: 1.35;
  }

  /* Edge-to-edge sections on phones */
  #basic-detailing-section,
  #premium-detailing-section,
  #xtras-section,
  #service-area-section {
    margin-left: 0;
    margin-right: 0;
  }

  /* Center only the CTA buttons */
  .basic-description .cta-button,
  .premium-description .cta-button,
  .xtras-description .cta-button,
  .service-area-description .cta-button {
    display: block;
    margin: 4rem auto 3rem auto !important;
    width: fit-content;
  }

  /* Cards: single column, centered, explicit width */
  .detail-card,
  .premium-boxes .detail-card,
  .xtras-boxes .detail-card {
    width: 85%;
    margin: 0 auto;
  }

  /* Normalize H1 spacing for service sections */
  #basic-detailing-section h1,
  #premium-detailing-section h1,
  #xtras-section h1 {
    margin-top: 0;
    margin-bottom: 0rem;
    padding-top: 2rem;
    padding-bottom: 0;
  }

  /* Service area tweaks */
  .service-area-grid {
    height: auto;
    padding: 1.25rem 1rem;
  }

  .service-area-description {
    /* already 90% + centered above; also ensure mobile padding */
    padding: 1.25rem;
    margin-left: 0; /* override any desktop left margin */
  }

  /* Smaller headings and paragraph text inside cards */
  .detail-card h3 {
    font-size: 1.4rem;
  }

  .detail-card p {
    font-size: 0.8rem;
    line-height: 1.3;
  }
}


/* Basic Detailing → popup bottom-right */
#basic-detailing-section .section-popup {
  top: auto;
  right: 1rem;
  bottom: 1rem;
  left: auto;
}

/* Premium Detailing → popup bottom-left */
#premium-detailing-section .section-popup {
  top: auto;
  left: 1rem;
  bottom: 1rem;
  right: auto;
}

/* Extras → popup bottom-right */
#xtras-section .section-popup {
  top: auto;
  right: 1rem;
  bottom: 1rem;
  left: auto;
}


.booking-header {
  position: relative;
  height: 40vh;
  background: url('bookinghero.jpeg') center center / cover no-repeat;
  border-bottom: 2px solid #00aaff;
  overflow: hidden;
}


.booking-title {
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 8rem;
  color: #000;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 1px;
  padding: 1rem 2rem;
  border-radius: 8px;
  z-index: 2;
}
/* ===== ≤1200px ===== */
@media (max-width: 1200px) {
  .booking-header {
    background: url('bookinghero1.jpeg') left center / cover no-repeat;
  }
  .booking-title {
    font-size: 6rem;
  }
}

/* ===== ≤767px ===== */
@media (max-width: 767px) {
  .booking-title {
    font-size: 3.4rem;
    padding-right: 0rem;
    padding-left: 0rem;
  }
}
#book-now-section {
  position: relative;
  margin-left: 4rem;
  min-height: 500px;
  overflow: hidden;
  border: 2px solid #00aaff;

  background:
    
    url('formbg.webp') center center / cover no-repeat;
  background-color: #252525; /* fallback */
  margin-top: 8rem;
  color: #fff;
}


/* Vertical, rotated section title (desktop like Basic Detailing) */
#book-now-section h1 {
  position: absolute;
  top: 50%;
  left: 6rem;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center center;
  font-size: 5rem;
  font-family: 'Bebas Neue', sans-serif;
  margin: 0;
  white-space: nowrap;
  z-index: 5;
  pointer-events: none;
}

/* Two-column layout, centered horizontally */
.book-now-grid {
  display: grid;
 grid-template-columns: 2fr 4fr;
  gap: 4rem;
  align-items: start;
  justify-content: center; /* horizontally center the grid content */
  height: 100%;
  padding: 4rem 6rem;
  position: relative;
  z-index: 1;
}



.book-cards-wrapper {
  width: 80%;
  margin-left: 6rem;
  margin-top: 3rem;
}

.book-description-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  
}

.book-card {
  background: rgba(0, 0, 0, 0.1);
  padding: 16px;
  color: #fff;
  border-left: 4px solid #00aaff;
  border-radius: 6px;
  backdrop-filter: blur(3px);
  transition: transform 0.3s ease;
  margin-bottom: 3rem;
}

.book-card:hover {
  transform: translateY(-4px);
}
.book-card h3 i {
  color: #00aaff;
  margin-right: 0.5rem;
  font-size: 1.3rem;
  vertical-align: middle;
}

.book-card h3 {
  color: #00aaff;
  font-size: 1.2rem;
  margin-bottom: 8px;
  font-family: 'Bebas Neue', sans-serif;
}

.book-card p {
  font-size: 0.9rem;
  line-height: 1.5;
}

.booking-form {
  background-color: #00000044;
  backdrop-filter: blur(2px);
  padding: 2rem;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 600px;
  width: 100%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  justify-self: center;
  color: #fff;
  font-family: inherit;
}

.booking-form fieldset {
  border: 2px solid #00aaff;
  border-radius: 8px;
  padding: 1.25rem;
  margin: 0 0 1.25rem 0;
  background: rgba(0, 0, 0, 0.6);
}
.booking-form legend {
  font-size: 1.5rem;
  font-weight: 900;
  color: #ffffff;
  padding: 0 .5rem;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.booking-form fieldset > label {
  display: block;
  margin: 0 0 .35rem;
  color: #fff;
}
.booking-form fieldset > label:not(:first-of-type) {
  margin-top: .75rem; }

.booking-form input[type="text"],
.booking-form input[type="email"],
.booking-form input[type="tel"],
.booking-form input[type="date"],
.booking-form input[type="time"],
.booking-form textarea {
  width: 100%;
  box-sizing: border-box;
  background-color: #0000001e;
  backdrop-filter: blur(4px);
  color: #fff;
  border: 2px solid #00aaff;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.booking-form textarea {
  min-height: 120px;
  resize: vertical;
}
.booking-form input:focus,
.booking-form textarea:focus {
  outline: none;
  border-color: #00aaff;
  box-shadow: 0 0 15px #00aaff;
}
.booking-form ::placeholder {
  color: #ffffff;
  opacity: 1;
}

.booking-form .checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .95rem;
}
.booking-form input[type="checkbox"] {
  accent-color: #00aaff;
}

.multi-select { position: relative; }

.multi-trigger {
  width: 100%;
   background-color: rgba(0, 0, 0, 0.12); 
  backdrop-filter: blur(4px);
  color: #fff;
  border: 2px solid #00aaff;
  border-radius: 4px;
  padding: 0.75rem 2.75rem 0.75rem 1rem;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: box-shadow .3s ease, border-color .3s ease;
  backdrop-filter: blur(4px);
  position: relative;
}
.multi-trigger:focus {
  outline: none;
  box-shadow: 0 0 15px #00aaff;
}

.multi-trigger::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; 
  height: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' fill='%2300aaff' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-size: 40px 40px; 
  pointer-events: none;
}

.multi-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: #000000;
  border: 2px solid #00aaff;
  border-radius: 6px;
  padding: .75rem 1rem;
  display: none;
  max-height: 240px;
  overflow: auto;
  box-shadow: 0 10px 24px rgba(0,0,0,.6);
  z-index: 50;
}
.multi-panel.open { display: block; }

.multi-panel label {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .25rem 0;
  cursor: pointer;
  line-height: 1.3;
  color: #fff;
}
.multi-panel input[type="checkbox"],
.multi-panel input[type="radio"] {
  margin: 0;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  accent-color: #00aaff;
  border-radius: 2px; 
}
.service-area-link {
  color: #00aaff; 
  text-decoration: underline;
}

.service-area-link:hover {
  color: #33bfff; 
}

.booking-form textarea {
  font-family: inherit;  
  font-size: 1rem; 
  line-height: 1.5;
}

.multi-select + .multi-select { margin-top: 1rem; }

.booking-form fieldset > input,
.booking-form fieldset > textarea,
.booking-form fieldset > .multi-select {
  margin-bottom: 1rem;
}
.booking-form fieldset > input:last-of-type,
.booking-form fieldset > textarea:last-of-type,
.booking-form fieldset > .multi-select:last-of-type {
  margin-bottom: 0;
}
.booking-form textarea {
  min-height: 120px;
  resize: none;
}

@media (max-width: 480px) {
  .booking-form { padding: 1.25rem; }
  .multi-panel { max-height: 50vh; }
}
/* FAQ Section — layout & background */
/* FAQ Section — layout, border, angled split, and one large question mark */
#faq-section {
  position: relative;
  margin-right: 4rem;
  margin-top: 12rem;
  margin-bottom: 8rem;
  border: 2px solid #00aaff; /* blue border, no radius */
  min-height: 500px;
  overflow: hidden;
}

/* Angled grey (left) / white (right) split */
#faq-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #181818 0%,        /* your dark grey left */
    #181818 48%,
    #ffffff 48%,
    #ffffff 100%
  );
  z-index: 0;
  pointer-events: none;
}

/* Large faint question marks on left half */
/* Large faint question marks in a row */
#faq-section::after {
  content: "??????????";
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translate(-50%, -50%);
  font-size: 40rem;
 font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  color: #ffffff;
  opacity: 0.1; /* faint overlay */
  z-index: 0;
  pointer-events: none;
  white-space: nowrap; /* keep them on one line */
  letter-spacing: 5rem; /* space between question marks */
}



/* Keep content above backgrounds */
#faq-section h1,
#faq-section .faq-body {
  position: relative;
  z-index: 1;
}


/* Vertical, right-side heading (white) */
#faq-section h1 {
  position: absolute;
  top: 16rem;
  right: 6rem;
  transform: translate(50%, -50%) rotate(90deg);
  transform-origin: center center;
  font-size: 5rem;
  font-family: 'Bebas Neue', sans-serif;
  margin: 0;
  white-space: nowrap;
  color: #000000;
  pointer-events: none;
  z-index: 2;
}

/* FAQ container (centered like reviews layout but in FAQ section) */
#faq-section .faq-body {
  position: relative;
  max-width: 70%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 0;
  box-sizing: border-box;
  margin-top: 2rem;
  margin-right: 19rem;
  margin-bottom: 2rem;
}

/* Each FAQ item styled like your review-box */
#faq-section .faq-item {
  position: relative;
  background: #000000; /* black background */
  padding: 1rem;
  border-radius: 0.3rem; /* softer rounding */
  border: 2px solid #00aaff; /* blue border */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.9);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* FAQ question */
#faq-section .faq-question {
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  text-align: left;
  font-size: 1.2rem;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  padding-right: 2rem;
  
}

/* Plus/minus toggle icon */
#faq-section .faq-question::after {
  content: '+';
  position: absolute;
  right: 0.5rem;
  top: -0.3rem;
  font-size: 1.5rem;
  transition: transform 0.3s ease;
  color: #00aaff;
}

#faq-section .faq-item.active .faq-question::after {
  content: '-';
  font-size: 2rem;
}

/* FAQ answer */
#faq-section .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: 
    max-height 0.5s ease,
    padding 0.3s ease,
    opacity 0.4s ease;
  color: #ccc;
  padding-top: 0;
  opacity: 0;
}

#faq-section .faq-item.active .faq-answer {
  max-height: 1000px; 
  padding-top: 0.5rem;
  opacity: 1;
}
.booking-form-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 4rem;
  color: #00aaff;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 1rem;
  margin-top: 0rem;
}
#service-area-section .cta-button {
  display: block;
  width: 100%;
  text-align: center;
}
.service-area-heading {
  font-size: 4rem;
  font-family: 'Bebas Neue', sans-serif;
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: #00aaff;
  margin-top: 0rem;
  text-align: center;
}

/* ===== ≤1200px ===== */
@media (max-width: 1200px) {
  /* Keep the vertical header but scale down & pull in a bit */
  #faq-section h1 {
    font-size: 6rem;
    right: 3rem;
  }
 .book-card {
    margin-bottom: 1rem;
  }
  /* Center the accordion stack and widen it slightly */
  #faq-section .faq-body {
    width: 75%;
    max-width: 980px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
    margin-left: 3rem;
  }

  /* Soften the big ? row */
  #faq-section::after {
    font-size: 22rem;      /* was 30rem on desktop */
    letter-spacing: 3rem;  /* tighten spacing slightly */
    left: 22%;
  }
}

/* ===== 768px–1200px ===== */
@media (min-width: 768px) and (max-width: 1200px) {
  /* Slightly smaller cards look tidier in this range */
  #faq-section .faq-item {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Keep content comfy */
  #faq-section .faq-question {
    font-size: 1.1rem;
  }

  /* Maintain section edges similar to services */
  #faq-section {
    margin-right: 3rem;
    margin-left: 0; /* keep your right-edge bias */
  }
}

/* ===== ≤767px ===== */
@media (max-width: 767px) {
  /* Smaller vertical heading; keep on right unless you want horizontal */
  #faq-section h1 {
    font-size: 3.8rem;
    right: 2rem;
  }

  /* Center the accordion and limit width for readability */
  #faq-section .faq-body {
    width: 85%;
    max-width: 520px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
    margin-left: 0.1rem;
    margin-top: 2rem;
    gap: 1rem;
  }

  /* Make the three question marks stack vertically on mobile */
  #faq-section::after {
    content: "?\A?\A?";
    white-space: pre-line;
    font-size: 12rem;
    line-height: 1.05;   /* vertical spacing between marks */
    letter-spacing: 0;   /* no horizontal spacing when stacked */
    left: 25%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /* Tighter card spacing & text sizes */
  #faq-section .faq-item {
    margin-bottom: 1.25rem;
  }
  #faq-section .faq-question {
    font-size: 0.9rem;
    padding-right: 2rem;
  }

  /* Normalize section margins like services */
  #faq-section {
    margin-left: 0;
    margin-right: 0;
  }
}
/* Show desktop heading only above 1200px */
.heading-desktop { display: block; }
.heading-mobile { display: none; }

@media (max-width: 1200px) {
  .heading-desktop { display: none; }
  .heading-mobile {
    display: block;
    font-size: 3.8rem; /* your mobile size */
    text-align: center;
    margin-top: 1rem;
  }
}

/* ===== ≤1200px ===== */
@media (max-width: 1200px) {
    #book-now-section {
    background: url('formbgr.webp') center center / cover no-repeat;
  }
  /* Stack cards above form */
  .book-now-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    padding: 3rem; /* keeps side gap for 768px–1200px */
    padding-top: 0rem;
  }

  .book-cards-wrapper {
    order: -1;
    width: 100%;
    max-width: 600px;
  }

  /* Adjust heading size */
  #book-now-section h1 {
    font-size: 6rem;
    transform: none;
    position: static;
    text-align: center;
    margin-bottom: 2rem;
  }

  .book-card h3 {
    font-size: 1rem;
  }
  .book-card p {
    font-size: 0.85rem;
  }

  /* Fill 90% width for cards & form */
  .book-cards-wrapper,
  .booking-form {
    width: 90%;
    margin: 0 auto;
  }

}
/* ===== ≤767px ===== */
@media (max-width: 767px) {
  .booking-form-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.5rem;
  color: #00aaff;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 1rem;
  margin-top: 0rem;
}
.service-area-heading {
  font-size: 2.5rem;
  font-family: 'Bebas Neue', sans-serif;
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: #00aaff;
  margin-top: 0rem;
}
  /* Remove side gaps entirely */
  .book-now-grid {
    padding-left: 0;
    padding-right: 0;
    padding-top: 3rem;
  }
#book-now-section {
  margin-left: 0rem;
}
  /* Heading top center */
  #book-now-section h1 {
    font-size: 3.2rem;
    transform: none;
    position: static;
    text-align: center;
    margin-bottom: 0rem;
    margin-left: 1rem;
    padding-top: 3rem;
  }

  /* Fill 90% width for cards & form */
  .book-cards-wrapper,
  .booking-form {
    width: 90%;
    margin: 0 auto;
  }

  .book-card h3 {
    font-size: 0.95rem;
  }
  .book-card p {
    font-size: 0.8rem;
  }
}