/* ===== CSS Variables ===== */
:root {
  /* Colors */
  --primary-color: #214767;
  --primary-dark: #183158;
  --primary-light: #6caacf;
  --accent-color: #6D28D9;
  --text-dark: #1F2937;
  --text-gray: #6B7280;
  --text-light: #9CA3AF;
  --white: #FFFFFF;
  --light-bg: #F9FAFB;
  --border-color: #E5E7EB;
  --success: #10B981;
  --warning: #F59E0B;
  
  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  
  /* Font Weights */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  
  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-4xl: 6rem;
  
  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
  
  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal: 1040;
  --z-tooltip: 1050;
  
  /* Container */
  --container-width: 1400px;
  --header-height: 4.5rem;
  /* Glassmorphism defaults */
  --glass-bg: rgba(255,255,255,0.65);
  --glass-border: rgba(0,0,0,0.06);
  --glass-blur: 6px;
  --glass-glow: 0 8px 30px rgba(30,64,175,0.06);
}

/* Dark mode glass overrides */
.dark {
  --glass-bg: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.06);
  --glass-blur: 8px;
  --glass-glow: 0 10px 40px rgba(30,64,175,0.12);
}

/* ===== Raceline Font Face ===== */
@font-face {
  font-family: 'Raceline';
  /* Use root-relative URLs so preloads and @font-face reference the exact same resource URL */
  src: url('/fonts/Raceline.ttf') format('truetype'),
       url('/fonts/Raceline.otf') format('opentype');
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}

/* ===== Base Styles ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-regular);
  line-height: 1.6;
  color: var(--text-dark);
  background-color: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-bold);
  line-height: 1.2;
  color: var(--text-dark);
}

h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl); }
h6 { font-size: var(--font-size-lg); }

p {
  margin-bottom: var(--spacing-md);
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-base);
}

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

ul {
  list-style: none;
}

button {
  font-family: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  transition: var(--transition-base);
}

input, textarea, select {
  font-family: inherit;
  border: none;
  outline: none;
}

/* ===== Utility Classes ===== */
.container {
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

/* Wider container for header on large screens */
.header .container {
  max-width: 1400px;
}

.section {
  padding: var(--spacing-4xl) 0;
}

.section__header {
  text-align: center;
  margin-bottom: var(--spacing-3xl);
  position: relative;
  z-index: 1;
}

.section__subtitle {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-semibold);
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--spacing-sm);
}

.section__title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-extrabold);
  color: var(--text-dark);
  margin-bottom: var(--spacing-md);
  line-height: 1.1;
}

.section__description {
  font-size: var(--font-size-lg);
  color: var(--text-gray);
  max-width: 700px;
  margin: 0 auto;
}

.highlight {
  color: var(--primary-color);
  position: relative;
}

/* ===== Buttons ===== */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: 1rem 2rem;
  font-size: var(--font-size-base);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  cursor: pointer;
  border: 2px solid transparent;
  white-space: nowrap;
}

.button--primary {
  background-color: var(--primary-color);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.button--primary:hover {
  background-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.button--primary:active {
  transform: translateY(0);
}

.button--secondary {
  background-color: transparent;
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.button--secondary:hover {
  background-color: var(--primary-color);
  color: var(--white);
}

.button--full {
  width: 100%;
}

/* ===== Header & Navigation ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--white);
  z-index: var(--z-fixed);
  transition: var(--transition-base);
}

.header.scroll-header {
  box-shadow: var(--shadow-md);
}

.nav {
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__logo {
  font-size: 1.5rem;
  font-weight: var(--font-extrabold);
  color: var(--primary-color);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
}

/* NS Taxi Logo with Raceline Font and Gradient Animation */
.logo-ns-taxi {
  font-family: 'Raceline', sans-serif;
  font-size: 2.5rem;
  letter-spacing: 0.1em;
  font-weight: normal;
  
  /* Gradient Animation */
  color: transparent;
  background: linear-gradient(
    -257deg,
    rgba(23, 67, 111, 1) 0%,
    rgba(149, 188, 217, 1) 50%,
    rgba(23, 67, 111, 1) 99%
  );
  background-position: 0 0;
  background-size: 1000%;
  
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  
  animation: gradientAnimation 30s linear infinite;
  
  padding-left: 3px;
  display: inline-block;
  white-space: nowrap;
}

/* Gradient Animation Keyframes */
@keyframes gradientAnimation {
  0% {
    background-position: 500% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.nav__toggle,
.nav__close {
  display: none;
  font-size: 1.5rem;
  color: var(--text-dark);
  cursor: pointer;
}

.nav__actions {
  display: none;
  align-items: center;
  gap: var(--spacing-md);
}

.nav__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  height: 100%;
  background-color: transparent;
}

.nav__call-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-color);
  color: var(--white);
  transition: var(--transition-base);
  box-shadow: 0 2px 8px rgba(30, 64, 175, 0.2);
}

.nav__call-btn:hover {
  background: var(--primary-dark);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
}

.nav__call-btn svg {
  width: 18px;
  height: 18px;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
}

.nav__link {
  font-size: var(--font-size-base);
  font-weight: var(--font-medium);
  color: var(--text-dark);
  position: relative;
  transition: var(--transition-base);
  display: inline-flex; /* ensure text and icon align vertically */
  align-items: center;
  gap: 0.25rem; /* small spacing between label and icon */
  line-height: 1; /* prevent vertical shift from line-height differences */
  box-sizing: border-box; /* ensure padding and borders don't change measured height */
  padding-top: calc(var(--spacing-sm));
  padding-bottom: calc(var(--spacing-sm));
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -0.25rem; /* moved closer to text */
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary-color);
  transition: var(--transition-base);
}

/* ===== Glassmorphism Utilities ===== */
.glass {
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-glow);
  border-radius: var(--radius-lg);
}

.glass--card {
  padding: 1.25rem;
}

/* Apply subtle glass look in dark mode to key surfaces */
/* Apply glass effect to header by default (light + dark); variables control appearance */
.header {
  background-color: var(--glass-bg);
  border-bottom: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}

.service__card,
.contact__form-wrapper,
.faq__item {
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-sm);
}

/* Provide an explicit utility class to force glass on any element */
.apply-glass {
  background-color: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  box-shadow: var(--glass-glow) !important;
}

/* Accessibility: reduce motion/transparency fallbacks */
@media (prefers-reduced-transparency: reduce) {
  .glass,
  .apply-glass,
  .dark .service__card,
  .dark .contact__form-wrapper {
    background-color: rgba(255,255,255,0.95);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    border: 1px solid var(--border-color);
  }
}

/* =====================
   Cookie Consent Banner
   ===================== */
.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  z-index: var(--z-modal);
}

.cookie-consent__card {
  width: 100%;
  max-width: 1100px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  box-sizing: border-box;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  /* Increased opacity for better readability */
  background-color: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
}

.cookie-consent__card svg#cookieSvg { width: 36px; height: 36px; flex-shrink: 0; display: none; } /* Hide icon on mobile */
.cookie-consent__content { flex: 1 1 auto; }
.cookieHeading { margin: 0; font-weight: 700; color: var(--text-dark); font-size: 0.95rem; }
.cookieDescription { margin: 0; font-size: 0.8rem; color: var(--text-gray); line-height: 1.4; }
.cookie-consent__actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.cookie-consent__actions .button { min-width: 80px; font-size: 0.85rem; white-space: nowrap; }
.acceptButton { background-color: var(--primary-color); color: var(--white); border-radius: var(--radius-full); padding: 0.5rem 0.85rem; }
.declineButton { background-color: var(--light-bg); color: var(--text-dark); border-radius: var(--radius-full); padding: 0.5rem 0.85rem; border: 1px solid var(--border-color); }

/* Desktop / large screens: small glass card in bottom-left corner */
@media screen and (min-width: 1025px) {
  .cookie-consent { justify-content: flex-start; padding: 0; }
  .cookie-consent__card {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    width: 360px;
    max-width: calc(100% - 2rem);
    border-radius: var(--radius-lg);
    padding: 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .cookie-consent__card svg#cookieSvg { display: block; width: 40px; height: 40px; }
  .cookieHeading { font-size: 1rem; }
  .cookieDescription { font-size: 0.9rem; }
  .cookie-consent__actions {
    justify-content: flex-start;
    width: 100%;
    display: flex;
    gap: 0.5rem;
  }
  .cookie-consent__actions .button { min-width: 0; flex: 1; font-size: 0.9rem; }
}

/* Tablet size: show icon, slightly larger text */
@media screen and (min-width: 640px) and (max-width: 1024px) {
  .cookie-consent__card svg#cookieSvg { display: block; width: 38px; height: 38px; }
  .cookieHeading { font-size: 1rem; }
  .cookieDescription { font-size: 0.875rem; }
  .cookie-consent__actions .button { min-width: 90px; font-size: 0.9rem; }
}

/* Reduced-transparency fallback for the banner */
@media (prefers-reduced-transparency: reduce) {
  .cookie-consent__card {
    background-color: rgba(255,255,255,0.98) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: var(--shadow-md) !important;
  }
}

.nav__link:hover,
.nav__link.active-link {
  color: var(--primary-color);
}

.nav__link:hover::after,
.nav__link.active-link::after {
  width: 100%;
}

.nav__cta {
  padding: 0.75rem 1.5rem;
  background-color: var(--primary-color);
  color: var(--white);
  border-radius: var(--radius-lg);
  font-weight: var(--font-semibold);
  transition: var(--transition-base);
}

.nav__cta:hover {
  background-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Hide mobile-only items on desktop */
.nav__item--mobile-only {
  display: none;
}

/* Dropdown Menu Styles */
.nav__dropdown {
  position: relative;
}

.dropdown-icon {
  display: inline-flex; /* ensure icon aligns the same as text */
  align-items: center;
  justify-content: center;
  margin-left: 0.25rem;
  transform-origin: center;
  transform: none; /* rely on flex centering instead of manual translate */
  transition: var(--transition-base);
}

.dropdown-icon svg {
  display: block; /* remove inline baseline quirks */
  height: 0.95em; /* slightly smaller to avoid increasing parent's computed height */
  width: auto;
}

.nav__dropdown:hover .dropdown-icon {
  transform: rotate(180deg);
}

.dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background-color: var(--white);
  box-shadow: var(--shadow-xl);
  border-radius: var(--radius-lg);
  padding: var(--spacing-sm) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-base);
  z-index: var(--z-dropdown);
  margin-top: 0.5rem;
}

.nav__dropdown:hover .dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown__menu li {
  list-style: none;
}

.dropdown__link {
  display: block;
  padding: 0.75rem 1.5rem;
  color: var(--text-dark);
  font-size: var(--font-size-sm);
  font-weight: var(--font-medium);
  transition: var(--transition-base);
  white-space: nowrap;
}

.dropdown__link:hover {
  background-color: var(--light-bg);
  color: var(--primary-color);
  padding-left: 2rem;
}

/* ===== Breadcrumb Navigation ===== */
.breadcrumb {
  padding: 1rem 0;
  background-color: transparent;
  margin-top: var(--header-height);
}

.breadcrumb__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-sm);
}

.breadcrumb__link {
  color: var(--text-gray);
  text-decoration: none;
  transition: color var(--transition-base);
  font-weight: var(--font-medium);
}

.breadcrumb__link:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

.breadcrumb__link--home {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.breadcrumb__link--home svg {
  width: 16px;
  height: 16px;
}

.breadcrumb__separator {
  color: var(--text-light);
  user-select: none;
}

.breadcrumb__current {
  color: var(--text-dark);
  font-weight: var(--font-semibold);
}

/* ===== Hero Section ===== */
.hero {
  padding-top: var(--header-height);
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #F9FAFB 0%, #EEF2FF 100%);
}

.hero__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3xl);
  align-items: center;
}

.hero__content {
  animation: fadeInUp 0.8s ease-out;
}

.hero__title {
  font-size: var(--font-size-6xl);
  font-weight: var(--font-extrabold);
  line-height: 1.1;
  margin-bottom: var(--spacing-lg);
  color: var(--text-dark);
}

.hero__description {
  font-size: var(--font-size-xl);
  color: var(--text-gray);
  margin-bottom: var(--spacing-2xl);
  line-height: 1.6;
}

.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-2xl);
}

.hero__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
}

.feature-badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0.5rem 1rem;
  background-color: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-medium);
  color: var(--text-dark);
}

.feature-badge svg {
  color: var(--primary-color);
  flex-shrink: 0;
}

.hero__image {
  animation: fadeInRight 0.8s ease-out;
}

.hero__image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #F9FAFB 0%, #EEF2FF 100%);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

/* ===== Car Animation ===== */
.car-animation {
  --black: #1a1c20;
  --white: #fff;
  --green: #F9FAFB;
  --d-green: #EEF2FF;
  --gray: #c1c1c1;
  --l-gray: #c4c4c4;
  --m-gray: #373838;
  --d-gray: #282724;
  --d-blue: #202428;
  --orange: #ef6206;
  --yellow: #dfa500;
  --l-yellow: #deb953;
  --light: #fbfbfb;
  --n-road: -4em;
  --p-road: 7em;
  
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: car 3.5s cubic-bezier(0.57, 0.63, 0.49, 0.65) infinite;
  background-repeat: no-repeat;
  background-image: radial-gradient(
      circle at 49% 117%,
      var(--black) 37%,
      transparent 38%
    ),
    radial-gradient(circle at -24% 50%, var(--white) 31%, transparent 49%),
    radial-gradient(2.95em 2.5em at 52% 1.2%, var(--black) 37%, transparent 38%),
    radial-gradient(2.95em 2.5em at 52% 1.2%, var(--black) 37%, transparent 38%),
    linear-gradient(var(--black) 100%, transparent 0),
    radial-gradient(circle at 49% 117%, var(--black) 37%, transparent 38%),
    radial-gradient(circle at 124% 50%, var(--white) 31%, transparent 49%),
    radial-gradient(2.95em 2.5em at 48% 1.2%, var(--black) 37%, transparent 38%),
    radial-gradient(2.95em 2.5em at 48% 1.2%, var(--black) 37%, transparent 38%),
    linear-gradient(var(--black) 100%, transparent 0),
    linear-gradient(var(--d-green) 100%, transparent 0);
  background-size: 2.5em 2.5em, 0.7em 0.6em, 2.5em 0.9em, 2.5em 0.9em,
    1.95em 3.9em, 2.5em 2.5em, 0.7em 0.6em, 2.5em 0.9em, 2.5em 0.9em,
    1.95em 3.9em, 13em 0.9em;
  background-position: calc(50% - 6.4em) calc(50% - 1.7em),
    calc(50% - 5.26em) calc(50% - -3.4em), calc(50% - 6.5em) calc(50% - -3.8em),
    calc(50% - 4.3em) calc(50% - -3.2em), calc(50% - 6.58em) calc(50% - -1.5em),
    calc(50% - -6.45em) calc(50% - 1.7em),
    calc(50% - -5.26em) calc(50% - -3.4em),
    calc(50% - -6.5em) calc(50% - -3.8em), calc(50% - -4.3em) calc(50% - -3.2em),
    calc(50% - -6.58em) calc(50% - -1.5em), center calc(50% - -3.8em);
}

.car-animation::before {
    content: " ";
    position: absolute;
    width: 15.5em;
    height: 62.9em;
    top: calc(50% - 26.2em);
    background-size: 24.6% 491%;
    background-repeat: no-repeat;
    background-position: center 0;
    animation: line 1.5s infinite linear, move-road 3.5s infinite linear;
    transform: perspective(311px) rotateX(83deg)
      translate3d(var(--n-road), -11.975em, 0);
    background-image: repeating-linear-gradient(
      to top,
      var(--white),
      var(--white) 4.6%,
      transparent 0,
      transparent 13.01%
    );
}

.car-animation::after {
    content: " ";
    position: absolute;
    width: 15.2em;
    height: 13.2em;
    top: calc(50% - 8.8em);
    left: calc(50% - 7.55em);
    background-repeat: no-repeat;
    animation: light 1s linear infinite, shake 3.5s linear infinite;
    background-image: radial-gradient(
        58em 20em at 50% 215%,
        transparent 20%,
        var(--white) 20.5%,
        var(--white) 20.8%,
        var(--green) 21.5%
      ),
      radial-gradient(circle at center 100%, var(--black) 30%, transparent 0),
      linear-gradient(var(--white) 100%, transparent 0),
      radial-gradient(
        17.8em 37em at 70% 240%,
        var(--black) 30%,
        transparent 30.5%
      ),
      radial-gradient(
        17.8em 37em at 31% 240%,
        var(--black) 30%,
        transparent 30.5%
      ),
      radial-gradient(
        circle,
        var(--light) 48%,
        var(--black) 52%,
        var(--black) 59%,
        transparent 62%
      ),
      radial-gradient(
        circle,
        var(--light) 48%,
        var(--black) 52%,
        var(--black) 59%,
        transparent 62%
      ),
      radial-gradient(1em 1em at 102% 100%, var(--m-gray) 28%, #f3f3f3 30%),
      radial-gradient(1em 1em at 97% -7%, var(--m-gray) 28%, var(--l-gray) 30%),
      radial-gradient(1em 1em at -6% 102%, var(--m-gray) 28%, #efefef 30%),
      radial-gradient(1em 1em at -6% -1%, var(--m-gray) 28%, var(--l-gray) 30%),
      linear-gradient(
        to top,
        var(--m-gray) 50%,
        var(--d-gray) 0,
        var(--d-gray) 58%,
        var(--m-gray) 0
      ),
      linear-gradient(to top, var(--l-gray) 30%, var(--white) 100%, transparent 0),
      radial-gradient(
        16.4em 30.1em at 209% 333%,
        var(--white) 30%,
        transparent 30.2%
      ),
      radial-gradient(
        16.4em 30.1em at -109% 333%,
        var(--white) 30%,
        transparent 30.2%
      ),
      linear-gradient(var(--gray) 100%, transparent 0),
      linear-gradient(var(--white) 100%, transparent 0),
      radial-gradient(6.7em 2.5em at 154% 8%, var(--black) 30%, transparent 33%),
      radial-gradient(6.7em 2.5em at -53% 8%, var(--black) 30%, transparent 33%),
      linear-gradient(var(--orange) 100%, transparent 0),
      linear-gradient(var(--orange) 100%, transparent 0),
      linear-gradient(var(--yellow) 100%, transparent 0),
      linear-gradient(var(--l-yellow) 100%, transparent 0),
      linear-gradient(var(--d-blue) 100%, transparent 0),
      radial-gradient(circle at 124% 39%, var(--d-blue) 60%, transparent 64%),
      radial-gradient(circle at -44% 39%, var(--d-blue) 60%, transparent 64%),
      radial-gradient(13.2em 2em at 50% 59%, var(--l-gray) 96%, transparent 100%),
      radial-gradient(1.6em 1.6em at 75% -9%, var(--l-gray) 60%, transparent 64%),
      radial-gradient(1.6em 1.6em at 15% -9%, var(--l-gray) 60%, transparent 64%),
      linear-gradient(var(--d-blue) 100%, transparent 0),
      radial-gradient(6.9em 4.6em at 295% 3%, var(--d-blue) 30%, transparent 31%),
      radial-gradient(6.9em 4.6em at -189% 3%, var(--d-blue) 30%, transparent 31%);
    background-size: 61.5% 20%, 5% 6%, 0.4% 39%, 60% 30%, 60% 30%, 16% 16%,
      16% 16%, 2.4% 2%, 2.4% 2.3%, 2.4% 2.3%, 2.4% 2.3%, 91% 12%, 93.9% 17%,
      12% 17.5%, 12% 17.5%, 38% 1.1%, 77% 25%, 9% 30%, 9% 30%, 8.4% 3%, 8.4% 3%,
      33% 6.5%, 36% 9%, 87% 30%, 10% 12%, 10% 12%, 78% 35%, 11% 8%, 11% 8%, 68% 8%,
      5% 7%, 5% 7%;
    background-position: 50.5% 0, 90% 37%, 88% 1.2%, 0 11.7%, 100% 11.7%, 5% 63%,
      95% 63%, 4.1% 55.7%, 4.1% 65.9%, 95.8% 55.7%, 95.8% 65.8%, center 62%,
      49% 63.6%, 3.4% 46.2%, 96.5% 46.2%, center 40.9%, center 50.3%, 5.7% 48.6%,
      95% 48.6%, 5% 75.2%, 95% 75.2%, 51% 86%, 51.5% 87.3%, center 71.9%,
      -0.8% 77.8%, 101.7% 77.8%, center 80.2%, 4% 85.9%, 97% 85.9%, center 92.5%,
      11.7% 92.6%, 88.3% 92.6%;
}

@keyframes line {
    100% {
      background-position: center 100%;
    }
}

@keyframes car {
    15%,
    23% {
      transform: translate3d(-2.3em, 0, 0);
    }
    36%,
    42% {
      transform: translate3d(-0.8em, 0, 0);
    }
    61%,
    71.5% {
      transform: translate3d(2.8em, 0, 0);
    }
    81%,
    88% {
      transform: translate3d(1.5em, 0, 0);
    }
}

@keyframes move-road {
    5.5% {
      transform: perspective(311px) rotateX(83deg)
        translate3d(var(--n-road), -11.975em, 0);
    }
    27%,
    51% {
      transform: perspective(311px) rotateX(83deg)
        translate3d(var(--p-road), -11.975em, 0);
    }
    73%,
    100% {
      transform: perspective(311px) rotateX(83deg)
        translate3d(var(--n-road), -11.975em, 0);
    }
}

@keyframes light {
    0%,
    37% {
      --light: #fbfbfb;
    }
    50% {
      --light: #f1f1f1;
    }
    62% {
      --light: #fbfbfb;
    }
    65% {
      --light: #f1f1f1;
    }
    95% {
      --light: #fbfbfb;
    }
    100% {
      --light: #f1f1f1;
    }
}

@keyframes shake {
    5%,
    26% {
      transform: rotate(-1.5deg);
    }
    33%,
    41% {
      transform: rotate(-0.5deg);
    }
    48%,
    69% {
      transform: rotate(1.5deg);
    }
    80%,
    95% {
      transform: rotate(0.5deg);
    }
}

input.error,
textarea.error,
select.error {
    border-color: #EF4444;
    background-color: #FEF2F2;
}

/* Progress bar smooth transition */
.progress__bar {
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Step indicators */
.step {
    transition: all 0.3s ease;
}

.step.active {
    background: var(--primary-color);
    color: white;
}

.step.completed {
    background: var(--success);
}

.hero__svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(30, 64, 175, 0.15));
  animation: float 6s ease-in-out infinite;
}

/* ===== Services Section ===== */
.services {
  background-color: var(--white);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--spacing-xl);
  position: relative;
  padding-top: 16px;
}

.service__card {
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.service__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--transition-base);
  z-index: -1;
}

.service__card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary-color);
  z-index: 100;
}

.service__card:hover::before {
  transform: scaleX(1);
}

.service__card--featured {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  color: var(--white);
  border: none;
}

.service__card--featured .service__title,
.service__card--featured .service__description {
  color: var(--white);
}

.service__card--featured .service__list li {
  color: rgba(255, 255, 255, 0.9);
}

.service__card--featured .service__list li::before {
  background-color: rgba(255, 255, 255, 0.3);
}

.service__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.375rem 0.75rem;
  background-color: var(--warning);
  color: var(--white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
}

.service__icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-lg);
}

.service__card--featured .service__icon {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
}

.service__icon svg {
  color: var(--white);
}

.service__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--spacing-md);
  color: var(--text-dark);
}

.service__description {
  font-size: var(--font-size-base);
  color: var(--text-gray);
  margin-bottom: var(--spacing-lg);
  line-height: 1.7;
}

.service__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.service__list li {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-gray);
  position: relative;
  padding-left: 1.5rem;
}

.service__list li::before {
  content: '';
  position: absolute;
  left: 0;
  width: 6px;
  height: 6px;
  background-color: var(--primary-color);
  border-radius: 50%;
}

/* ===== Testimonials Section ===== */
.testimonials {
  background: var(--white);
  padding: var(--spacing-3xl) 0;
}

.testimonials__container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-2xl);
  margin-top: var(--spacing-2xl);
}

.testimonial__card {
  background: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 100%);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  border: 2px solid transparent;
}

.testimonial__card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary-color);
}

.testimonial__rating {
  display: flex;
  gap: 4px;
  margin-bottom: var(--spacing-lg);
}

.testimonial__text {
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--text-gray);
  margin-bottom: var(--spacing-xl);
  font-style: italic;
}

.testimonial__author {
  border-top: 2px solid #E5E7EB;
  padding-top: var(--spacing-lg);
}

.testimonial__name {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: var(--spacing-xs);
}

.testimonial__location {
  font-size: var(--font-size-sm);
  color: var(--text-light);
}

/* ===== Why Choose Us Section ===== */
.why {
  background: linear-gradient(135deg, #F9FAFB 0%, #EEF2FF 100%);
}

.why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-xl);
  position: relative;
  padding-top: 16px;
}

/* Force 3-column layout for 6 cards on large screens */
@media screen and (min-width: 1024px) {
  .why__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.why__card {
  background-color: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.why__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  opacity: 0;
  transition: var(--transition-base);
  z-index: -1;
}

.why__card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-2xl);
  color: var(--white);
  z-index: 100;
}

.why__card:hover::before {
  opacity: 1;
}

.why__card:hover .why__number {
  color: rgba(255, 255, 255, 0.3);
}

.why__card:hover .why__title,
.why__card:hover .why__description {
  color: var(--white);
}

.why__number {
  font-size: var(--font-size-6xl);
  font-weight: var(--font-extrabold);
  color: var(--primary-color);
  opacity: 0.1;
  line-height: 1;
  margin-bottom: var(--spacing-md);
  transition: var(--transition-base);
}

.why__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--spacing-md);
  color: var(--text-dark);
  transition: var(--transition-base);
}

.why__description {
  font-size: var(--font-size-base);
  color: var(--text-gray);
  line-height: 1.7;
  transition: var(--transition-base);
}

/* ===== Airports Section ===== */
.airports {
  background-color: var(--white);
}

.airports__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-xl);
  position: relative;
  padding-top: 16px;
}

/* Force 3-column layout for 6 cards on large screens */
@media screen and (min-width: 1024px) {
  .airports__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.airport__card {
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  transition: all var(--transition-base);
  cursor: pointer;
  display: block;
  text-decoration: none;
  position: relative;
  isolation: isolate;
}

.airport__card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary-color);
  z-index: 100;
}

.airport__icon {
  width: 70px;

/* ======================================
   Apply Glassmorphism to Card Elements
   ====================================== */
/* Apply glass style to most card-like components while preserving
   special featured card gradients. Using !important ensures this
   overrides earlier solid background declarations. */
.service__card:not(.service__card--featured),
.why__card,
.airport__card,
.area__card,
.contact__card,
.landmark__card,
.contact__card .contact__card-content,
.areas__grid .area__card,
.services__grid .service__card,
.airports__grid .airport__card {
  background-color: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  box-shadow: var(--glass-glow) !important;
}

/* Accessibility fallback: remove blur/transparent effects for reduced-transparency */
@media (prefers-reduced-transparency: reduce) {
  .service__card:not(.service__card--featured),
  .why__card,
  .airport__card,
  .landmark__card,
  .area__card,
  .contact__card,
  .areas__grid .area__card,
  .services__grid .service__card,
  .airports__grid .airport__card {
    background-color: rgba(255,255,255,0.97) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--border-color) !important;
  }
}
  height: 70px;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-lg);
  transition: var(--transition-base);
}

.airport__card:hover .airport__icon {
  transform: scale(1.1) rotate(5deg);
}

.airport__icon svg {
  color: var(--white);
}

.airport__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-bold);
  color: var(--text-dark);
  margin-bottom: var(--spacing-xs);
}

.airport__subtitle {
  font-size: var(--font-size-sm);
  color: var(--primary-color);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-md);
}

.airport__description {
  font-size: var(--font-size-base);
  color: var(--text-gray);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

.airport__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-semibold);
  color: var(--primary-color);
  transition: var(--transition-base);
}

.airport__card:hover .airport__link {
  gap: var(--spacing-sm);
}

/* ===== Local Areas Section ===== */
.areas {
  background: linear-gradient(135deg, #EEF2FF 0%, #F9FAFB 100%);
}

.areas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  position: relative;
  padding-top: 16px;
}

/* Force 3-column layout for areas grid on large screens */
@media screen and (min-width: 1024px) {
  .areas__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.landmarks__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  position: relative;
  padding-top: 16px;
}

/* Force 3-column layout for landmarks grid on large screens */
@media screen and (min-width: 1024px) {
  .landmarks__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.landmark__card {
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  transition: all var(--transition-base);
  cursor: pointer;
  display: block;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.area__card {
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  transition: all var(--transition-base);
  cursor: pointer;
  display: block;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.landmark__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  background: linear-gradient(180deg, var(--primary-color), var(--accent-color));
  transition: var(--transition-base);
  z-index: -1;
}

.area__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  background: linear-gradient(180deg, var(--primary-color), var(--accent-color));
  transition: var(--transition-base);
  z-index: -1;
}

.landmark__card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary-color);
  z-index: 100;
}

.area__card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary-color);
  z-index: 100;
}

.landmark__card:hover::before {
  height: 100%;
}

.area__card:hover::before {
  height: 100%;
}

.area__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-bold);
  color: var(--text-dark);
  margin-bottom: var(--spacing-sm);
  transition: var(--transition-base);
}

.area__card:hover .area__title {
  color: var(--primary-color);
}

.area__description {
  font-size: var(--font-size-sm);
  color: var(--text-gray);
  line-height: 1.6;
  margin-bottom: 0;
}

/* ===== Contact Section ===== */
.contact {
  background-color: var(--white);
}

.contact__container {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--spacing-3xl);
  margin-top: var(--spacing-3xl);
}

.contact__info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.contact__card {
  display: flex;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  background-color: var(--light-bg);
  border-radius: var(--radius-xl);
  transition: var(--transition-base);
}

.contact__card:hover {
  background-color: var(--primary-color);
  transform: translateX(8px);
  box-shadow: var(--shadow-lg);
}

.contact__card:hover .contact__card-icon {
  background-color: var(--white);
}

.contact__card:hover .contact__card-icon svg {
  color: var(--primary-color);
}

.contact__card:hover .contact__card-title,
.contact__card:hover .contact__card-link,
.contact__card:hover .contact__card-note,
.contact__card:hover .contact__card-info {
  color: var(--white);
}

.contact__card-icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  background-color: var(--white);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-base);
}

.contact__card-icon svg {
  color: var(--primary-color);
  transition: var(--transition-base);
}

.contact__card-content {
  flex: 1;
}

.contact__card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-bold);
  margin-bottom: var(--spacing-xs);
  color: var(--text-dark);
  transition: var(--transition-base);
}

.contact__card-link {
  display: inline-block;
  font-size: var(--font-size-xl);
  font-weight: var(--font-semibold);
  color: var(--primary-color);
  margin-bottom: var(--spacing-xs);
  transition: var(--transition-base);
}

.contact__card-note,
.contact__card-info {
  font-size: var(--font-size-sm);
  color: var(--text-gray);
  transition: var(--transition-base);
}

.contact__form-wrapper {
  position: relative;
  min-height: 500px; /* Ensure wrapper has height for absolute positioned overlay */
}

  .contact__form {
  display: block;
  padding: var(--spacing-2xl);
  background-color: var(--light-bg);
  border-radius: var(--radius-xl); /* Keep rounded corners */
  position: relative; /* Required for absolute positioned success overlay */
  min-height: 500px; /* Prevent layout shift */
}

  /* Remove the glass 1px border specifically for the contact form to keep
     rounded corners but no visible thin border line. This overrides the
     shared glass rule that applies a 1px border. */
  .contact__form-wrapper {
    border: none;
  }

/* Multi-Step Form */
.form__progress {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-2xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 2px solid var(--border-color);
}

.form__step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  flex: 1;
  position: relative;
  opacity: 0.5;
  transition: var(--transition-base);
}

.form__step-indicator.active {
  opacity: 1;
}

.form__step-indicator.completed .step__number {
  background: var(--primary-color);
  color: var(--white);
}

.step__number {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--light-bg);
  border: 2px solid var(--border-color);
  font-weight: var(--font-bold);
  color: var(--text-gray);
  transition: var(--transition-base);
}

.form__step-indicator.active .step__number {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white);
}

.step__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-semibold);
  color: var(--text-gray);
  text-align: center;
}

.form__step-indicator.active .step__label {
  color: var(--primary-color);
}

.form__step {
  display: none;
}

.form__step.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form__navigation {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
}

.form__navigation .button {
  flex: 1;
}

.button--next svg {
  margin-left: var(--spacing-xs);
}

.button--prev svg {
  margin-right: var(--spacing-xs);
}

.form__group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: var(--spacing-md);
}

.form__group--full {
  grid-column: 1 / -1;
}

.form__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-semibold);
  color: var(--text-dark);
  margin-bottom: 0.25rem;
}

.form__input,
.form__textarea {
  padding: 0.875rem 1rem;
  font-size: var(--font-size-base);
  color: var(--text-dark);
  background-color: var(--white);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: var(--transition-base);
}

.form__input:focus,
.form__textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.form__textarea {
  resize: vertical;
  min-height: 120px;
}

.form__submit-options {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.form__submit-options .button {
  flex: 1;
  min-width: 200px;
  justify-content: center;
  position: relative;
}

.button--email {
  background: var(--primary-color);
}

.button--email:hover {
  background: var(--primary-dark);
}

.button--whatsapp {
  background: #25D366;
  color: white;
  border: none;
  position: relative;
}

.button--whatsapp:hover {
  background: #20BA5A;
  transform: translateY(-2px);
}

.button__badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--accent-color);
  color: white;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 12px;
  font-weight: var(--font-bold);
  white-space: nowrap;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.form__note {
  font-size: var(--font-size-xs);
  color: var(--text-gray);
  margin-top: var(--spacing-sm);
  text-align: center;
}

/* Inline form status messages (success / error) */
.form__status,
.form__success,
.form__error {
  display: none !important;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  margin-top: var(--spacing-md);
}

/* Modern status messages (index.html) - flex layout */
.form__status {
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  background: #FFF4F4;
  border: 1px solid #FEE2E2;
  color: #8B1E1E;
}

.form__status.show {
  display: flex !important;
}

/* Legacy success/error messages (district pages) - block layout with centered content */
.form__success,
.form__error {
  text-align: center;
  padding: 2rem 1.5rem;
}

.form__success.show {
  display: block !important;
}

.form__error.show {
  display: block !important;
}

.form__success svg,
.form__error svg {
  margin: 0 auto 1rem;
  display: block;
}

.form__success h3,
.form__error h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
}

.form__success p,
.form__error p {
  margin: 0;
}

/* Status color variants */
.form__status--error,
.form__error {
  background: #FFF4F4;
  border-color: #FECACA;
  color: #991B1B;
}

.form__status--success,
.form__success {
  background: #ECFDF5;
  border-color: #BBF7D0;
  color: #065F46;
}

.form__status--error {
  border: 1px solid #FECACA;
}

.form__status--success {
  border: 1px solid #BBF7D0;
}

.form__success {
  border: 2px solid #BBF7D0;
}

.form__error {
  border: 2px solid #FECACA;
}

.form__status-content {
  flex: 1;
}

.form__status-title {
  display: block;
  font-weight: var(--font-bold);
  margin-bottom: 0.25rem;
}

.form__status-message {
  margin: 0;
  font-size: var(--font-size-sm);
}

.form__status-close {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0 0.25rem;
  cursor: pointer;
}

/* Input error styling (used when a required field is empty on step navigation) */
.form__input.error {
  border-color: #DC2626;
  background-color: #FFF1F1;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.06);
}

/* Date/time split layout — use grid so both fields share width equally */
.form__group--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* two equal columns */
  gap: 0.75rem;
  align-items: start;
}
.form__group--split .form__subgroup {
  display: flex;
  flex-direction: column; /* label above input */
  min-width: 0; /* allow proper shrinking without overflow */
}

/* Ensure inputs fill their column */
.form__group--split .form__input {
  width: 100%;
  box-sizing: border-box;
  text-align: left; /* placeholders aligned like other inputs */
}

/* Stack on smaller screens */
@media (max-width: 640px) {
  .form__group--split {
    grid-template-columns: 1fr; /* stack vertically */
  }
}

/* Stack on smaller screens */
@media (max-width: 640px) {
  .form__group--split { flex-direction: column; }
  .form__group--split .form__subgroup:first-child,
  .form__group--split .form__subgroup:last-child {
    flex: 1 1 100%;
  }
  .form__group--split input#time.form__input {
    max-width: 100%;
  }
}

/* ===== Footer ===== */
.footer {
  background-color: var(--text-dark);
  color: var(--white);
  padding: var(--spacing-4xl) 0 var(--spacing-xl);
}

.footer__container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xl);
}

.footer__content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--spacing-3xl);
}

.footer__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-extrabold);
  color: var(--white);
  margin-bottom: var(--spacing-md);
}

.footer__description {
  font-size: var(--font-size-base);
  color: var(--text-light);
  line-height: 1.7;
  margin-bottom: var(--spacing-lg);
}

.footer__social {
  display: flex;
  gap: var(--spacing-md);
}

.footer__social-link {
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-base);
}

.footer__social-link:hover {
  background-color: var(--primary-color);
  transform: translateY(-4px);
}

.footer__subtitle {
  font-size: var(--font-size-lg);
  font-weight: var(--font-bold);
  color: var(--white);
  margin-bottom: var(--spacing-lg);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.footer__list li {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.footer__list svg {
  color: var(--primary-color);
  flex-shrink: 0;
}

.footer__link {
  font-size: var(--font-size-base);
  color: var(--text-light);
  transition: var(--transition-base);
}

.footer__link:hover {
  color: var(--primary-color);
  padding-left: var(--spacing-xs);
}

.footer__text {
  font-size: var(--font-size-base);
  color: var(--text-light);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--spacing-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__copy {
  font-size: var(--font-size-sm);
  color: var(--text-light);
  align-items: center;
  margin-bottom: 0%;
}

.footer__bottom-links {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.footer__bottom-link {
  font-size: var(--font-size-sm);
  color: var(--text-light);
  transition: var(--transition-base);
}

.footer__bottom-link:hover {
  color: var(--primary-color);
}

.footer__separator {
  color: var(--text-light);
}

/* ===== Scroll Up Button ===== */
.scrollup {
  position: fixed;
  right: 2rem;
  bottom: -20%;
  width: 50px;
  height: 50px;
  background-color: var(--primary-color);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-fixed);
  transition: var(--transition-base);
}

.scrollup:hover {
  background-color: var(--primary-dark);
  transform: translateY(-4px);
}

.scrollup.show-scroll {
  bottom: 2rem;
}

/* ===== Animations ===== */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* ===== Responsive Design ===== */

/* Large Tablets */
@media screen and (max-width: 1024px) {
  :root {
    --font-size-6xl: 3rem;
    --font-size-5xl: 2.5rem;
    --font-size-4xl: 2rem;
    --font-size-3xl: 1.75rem;
  }

  /* Show hamburger menu and hide desktop menu for tablets */
  .nav__menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    max-width: 400px;
    height: 100vh;
    /* Increased opacity for better readability - was too transparent */
    background-color: rgba(255, 255, 255, 0.95);
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    padding: var(--spacing-3xl) var(--spacing-xl);
    transition: var(--transition-base);
    overflow-y: auto;
    z-index: var(--z-fixed);
  }

  .nav__menu.show-menu {
    right: 0;
  }

  .nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }

  .nav__item {
    width: 100%;
  }

  .nav__link {
    padding: var(--spacing-md) var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-base);
    font-weight: var(--font-semibold);
    color: var(--text-dark);
    transition: var(--transition-base);
    position: relative;
  }

  .nav__link:hover {
    color: var(--primary-color);
  }

  .nav__link.active-link {
    color: var(--primary-color);
    position: relative;
  }

  .nav__link.active-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 3px;
    background: var(--primary-color);
    border-radius: 3px;
  }

  .nav__dropdown {
    width: 100%;
  }

  /* Enforce a consistent item size in the sidebar / mobile menu: 336 x 56 */
  /* Enforce fixed size for nav items while keeping mobile-safe max-width */
  .nav__item {
    width: 336px; /* desired width */
    max-width: 100%; /* don't overflow smaller screens */
    padding: 0; /* prevent extra space from li itself */
    box-sizing: border-box;
    display: block; /* ensure width/height apply predictably */
    height: 56px; /* force exact height on li */
  }

  /* Make sure the mobile-only CTA gets a little more breathing room on
     tablet-sized sidebars so its rounded button doesn't sit on top of the
     nav link underline. */
  .nav__menu .nav__item--mobile-only {
    display: block;
    margin-top: calc(var(--spacing-md) * 1.5);
    padding-top: var(--spacing-sm);
  }

  /* Make the link fill the li and center its content */
  .nav__link {
    height: 100%; /* fill parent li height */
    padding-left: 1rem;
    padding-right: 1rem;
    display: flex;
    align-items: center; /* center label & icon vertically */
    justify-content: space-between;
    box-sizing: border-box;
  }

  /* Ensure dropdown parent behaves the same as other items */
  .nav__item.nav__dropdown,
  .nav__item.nav__dropdown > .nav__link {
    height: 56px;
  }

  /* When a dropdown is opened in the mobile sidebar, allow the list item
     to expand so the submenu flows into the document and pushes following
     items down instead of overlapping them. This fixes issues where the
     submenu would appear on top of other content. */
  .nav__item.nav__dropdown.active {
    height: auto; /* let the li grow to contain its submenu */
    padding-bottom: var(--spacing-sm);
  }

  /* Prevent icons from forcing extra height */
  .nav__link svg,
  .dropdown-icon svg {
    height: 20px;
    width: auto;
    flex-shrink: 0;
    display: block;
  }

  .nav__actions {
    display: flex;
  }

  .nav__close {
    display: block;
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--light-bg);
    transition: var(--transition-base);
  }

  .nav__close:hover {
    background: var(--primary-light);
    color: var(--primary-color);
  }

  .nav__toggle {
    display: block;
  }

  /* Reduced-transparency fallback for the mobile sidebar */
  @media (prefers-reduced-transparency: reduce) {
    .nav__menu {
      background-color: rgba(255,255,255,0.98) !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      box-shadow: none !important;
      border-left: 1px solid var(--border-color) !important;
    }
  }

  /* Mobile Dropdown Styles for tablets */
  .dropdown__menu {
    position: static;
    /* start collapsed */
    max-height: 0;
    padding: 0; /* animate padding so opening doesn't jump */
    opacity: 0;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background-color: var(--light-bg);
    margin: 0;
    border-radius: var(--radius-md);
    overflow-y: auto; /* allow scrolling when open */
  -webkit-overflow-scrolling: touch;
  /* Disable animations on mobile dropdowns to remove lag; open/close should be instant */
  transition: none !important;
    margin-top: var(--spacing-xs);
  }

  .nav__dropdown.active .dropdown__menu {
    /* Allow the submenu to expand up to the available viewport space
       and become scrollable if it exceeds that space. This prevents
       children from being clipped in the mobile/sidebar menu. */
    max-height: calc(100vh - var(--header-height) - 4rem);
    padding: var(--spacing-sm);
    opacity: 1;
    /* keep overflow-y available for scroll when content is long */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
  }

  /* Improve visual separation between the parent link and its open submenu */
  .nav__item.nav__dropdown .dropdown__menu {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border-left: 2px solid transparent;
  }

  .dropdown__link {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-xs);
    /* No transition on mobile touch targets - keep interactions immediate */
    transition: none !important;
    display: block;
    /* Allow wrapping on narrow screens so long labels don't get hidden */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .dropdown__link:hover {
    background-color: var(--white);
    padding-left: 1.25rem;
    color: var(--primary-color);
  }

  .dropdown__link:last-child {
    margin-bottom: 0;
  }

  .dropdown-icon {
    /* Remove icon rotation animation on mobile to avoid lag */
    transition: none !important;
  }

  .nav__dropdown.active .dropdown-icon {
    transform: none !important;
  }

  /* Prevent hover-based rotation on touch devices — ensure chevrons remain static */
  .nav__dropdown:hover .dropdown-icon {
    transform: none !important;
  }

  .nav__item--desktop-only {
    display: none;
  }

  .hero__container {
    gap: var(--spacing-2xl);
  }

  .services__grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }

  .contact__container {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }

  .contact__form-wrapper {
    order: -1;
  }

  .form__progress {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--spacing-xs);
  }

  .form__step-indicator {
    flex-direction: column;
    align-items: center;
    width: auto;
  }

  .step__number {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-sm);
  }

  .step__label {
    font-size: var(--font-size-xs);
    text-align: center;
  }

  .form__navigation .button {
    font-size: var(--font-size-sm);
    padding: 0.75rem 1rem;
  }

  .footer__content {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile Phones */
@media screen and (max-width: 768px) {
  :root {
    --header-height: 4rem;
    --font-size-6xl: 2.5rem;
    --font-size-5xl: 2rem;
    --font-size-4xl: 1.75rem;
    --spacing-4xl: 4rem;
    --spacing-3xl: 3rem;
  }

  .section {
    padding: var(--spacing-3xl) 0;
  }

  .nav__menu {
    width: 80%;
  }

  /* Mobile CTA Button - Always Round */
  .nav__cta {
    border-radius: var(--radius-full);
    width: 100%;
    text-align: center;
  }

  /* Show mobile-only CTA */
  .nav__item--mobile-only {
    display: block;
    /* Give the CTA extra vertical spacing on small screens so the rounded
       button doesn't overlap the active/hover underline on the menu items. */
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);

  }

  .hero__container {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  .hero__image {
    order: -1;
  }

  .hero__image-wrapper {
    min-height: 300px;
  }

  /* Car animation responsive adjustments */
  .car-animation::before {
    width: 11em;
  }
  
  .car-animation {
    --n-road: -4em;
    --p-road: 4em;
  }

  .hero__title {
    font-size: var(--font-size-5xl);
  }

  .city-rotator {
    height: 1.3em;
  }

  .hero__buttons {
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .services__grid {
    grid-template-columns: 1fr;
  }

  .why__grid {
    grid-template-columns: 1fr;
  }

  .contact__form {
    grid-template-columns: 1fr;
  }

  .footer__content {
    grid-template-columns: 1fr;
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--spacing-md);
    text-align: center;
  }

  .scrollup {
    width: 45px;
    height: 45px;
  }
}

/* Mobile - Carousel/Slider Layout */
@media screen and (max-width: 768px) {
  /* Enable horizontal scrolling for grids on mobile */
  .services__grid,
  .why__grid,
  .airports__grid,
  .areas__grid,
  .landmarks__grid {
    display: flex !important;
    overflow-x: auto !important;
    grid-template-columns: unset !important;
  }

  /* Ensure carousel/scrolled cards are visible on mobile even when ScrollReveal is used
     ScrollReveal can set inline opacity/transform which prevents horizontally scrolled
     cards from becoming visible when they are scrolled into view. These rules
     override SR on small screens. */
  .services__grid .service__card,
  .why__grid .why__card,
  .airports__grid .airport__card,
  .areas__grid .area__card,
  .landmarks__grid .landmark__card {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  .services__grid,
  .why__grid,
  .airports__grid,
  .areas__grid,
  .landmarks__grid {
    scroll-snap-type: x mandatory;
    gap: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
    margin-left: calc(var(--spacing-md) * -1);
    margin-right: calc(var(--spacing-md) * -1);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--light-bg);
  }

  .services__grid::-webkit-scrollbar,
  .why__grid::-webkit-scrollbar,
  .airports__grid::-webkit-scrollbar,
  .areas__grid::-webkit-scrollbar,
  .landmarks__grid::-webkit-scrollbar {
    height: 8px;
  }

  .services__grid::-webkit-scrollbar-track,
  .why__grid::-webkit-scrollbar-track,
  .airports__grid::-webkit-scrollbar-track,
  .areas__grid::-webkit-scrollbar-track,
  .landmarks__grid::-webkit-scrollbar-track {
    background: var(--light-bg);
    border-radius: 10px;
    margin: 0 var(--spacing-md);
  }

  .services__grid::-webkit-scrollbar-thumb,
  .why__grid::-webkit-scrollbar-thumb,
  .airports__grid::-webkit-scrollbar-thumb,
  .areas__grid::-webkit-scrollbar-thumb,
  .landmarks__grid::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    border-radius: 10px;
  }

  /* Cards in carousel - fixed width */
  .service__card {
    min-width: 85%;
    max-width: 85%;
    scroll-snap-align: center;
    flex-shrink: 0;
  }

  .why__card,
  .airport__card {
    min-width: 85%;
    max-width: 85%;
    scroll-snap-align: center;
    flex-shrink: 0;
    margin-right: var(--spacing-lg);
  }

  .why__card:last-child,
  .airport__card:last-child {
    margin-right: 0;
  }

  .area__card {
    min-width: 85%;
    max-width: 85%;
    scroll-snap-align: center;
    flex-shrink: 0;
    margin-right: var(--spacing-lg);
  }

  .area__card:last-child {
    margin-right: 0;
  }

  .landmark__card {
    min-width: 85%;
    max-width: 85%;
    scroll-snap-align: center;
    flex-shrink: 0;
    margin-right: var(--spacing-lg);
  }

  .landmark__card:last-child {
    margin-right: 0;
  }

  /* Featured service card same width for consistency */
  .service__card--featured {
    min-width: 85%;
    max-width: 85%;
  }

  /* Section header gets a scroll indicator only for scrollable sections */
  .services .section__header::after,
  .why .section__header::after,
  .airports .section__header::after,
  .areas .section__header::after,
  .landmarks .section__header::after {
    content: '← Swipe →';
    display: block;
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--primary-color);
    margin-top: var(--spacing-sm);
    font-weight: var(--font-semibold);
    letter-spacing: 0.05em;
    opacity: 0.8;
  }
}

/* Mobile */
@media screen and (max-width: 480px) {
  :root {
    --font-size-6xl: 2rem;
    --font-size-5xl: 1.75rem;
    --font-size-4xl: 1.5rem;
    --font-size-3xl: 1.375rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.5rem;
    --spacing-2xl: 2rem;
  }

  .container {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  .hero__features {
    flex-direction: column;
  }

  .feature-badge {
    width: 100%;
    justify-content: center;
  }

  /* Additional car animation scaling for very small screens */
  .car-animation {
    transform: scale(0.7);
  }

  /* Adjust card widths for smaller screens */
  .service__card,
  .why__card,
  .airport__card {
    min-width: 90%;
    max-width: 90%;
  }

  .area__card {
    min-width: 80%;
    max-width: 80%;
  }

  .service__card--featured {
    min-width: 90%;
    max-width: 90%;
  }

  .contact__form {
    padding: var(--spacing-xl);
  }

  .scrollup {
    right: 1rem;
  }

  .scrollup.show-scroll {
    bottom: 1rem;
  }
}

/* Extra Small Mobile */
@media screen and (max-width: 360px) {
  .nav__menu {
    width: 90%;
  }

  .hero__title {
    font-size: 1.625rem;
  }

  .city-rotator {
    height: 1.4em;
  }

  .section__title {
    font-size: 1.375rem;
  }

  /* Form buttons stacked on mobile */
  .form__submit-options {
    flex-direction: column;
  }

  .form__submit-options .button {
    width: 100%;
    min-width: unset;
  }

  .button__badge {
    font-size: 9px;
    padding: 3px 6px;
  }
}

/* Print Styles */
@media print {
  .header,
  .nav__toggle,
  .scrollup,
  .contact__form {
    display: none;
  }

  body {
    color: #000;
  }

  .section {
    page-break-inside: avoid;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
  /* Dark mode can be implemented here if needed */
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .button--primary {
    border: 2px solid var(--white);
  }

  .service__card {
    border: 2px solid var(--text-dark);
  }
}

/* ===============================================
   FAQ SECTION
   =============================================== */

.faq {
  background: var(--light-bg);
  position: relative;
  overflow: hidden;
}

.faq__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-2xl);
}

.faq__item {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq__item:hover {
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.1);
  transform: translateY(-2px);
}

.faq__item[open] {
  border-color: var(--primary-color);
  box-shadow: 0 4px 16px rgba(30, 64, 175, 0.15);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  font-size: var(--font-size-lg);
  font-weight: var(--font-semibold);
  color: var(--text-dark);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: all 0.3s ease;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question:hover {
  color: var(--primary-color);
}

.faq__item[open] .faq__question {
  color: var(--primary-color);
  border-bottom: 1px solid var(--border-color);
}

.faq__icon {
  flex-shrink: 0;
  margin-left: var(--spacing-md);
  color: var(--primary-color);
  transition: transform 0.3s ease;
}

.faq__item[open] .faq__icon {
  transform: rotate(180deg);
}

.faq__answer {
  padding: var(--spacing-lg);
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--text-gray);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile Optimization */
@media screen and (max-width: 768px) {
  .faq__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .faq__question {
    padding: var(--spacing-md);
    font-size: var(--font-size-base);
  }

  .faq__answer {
    padding: var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  .faq__icon {
    width: 18px;
    height: 18px;
  }
}

/* Tablet */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .faq__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop - 3 columns for better readability */
@media screen and (min-width: 1200px) {
  .faq__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Accessibility - Focus States */
.faq__question:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Print Styles */
@media print {
  .faq__item {
    page-break-inside: avoid;
    border: 1px solid #ddd;
  }
  
  .faq__item[open] .faq__answer {
    display: block;
  }
}

/* Footer Social Media Links */
.footer__social {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  transition: all 0.3s ease;
}

.footer__social-link:hover {
  background: var(--white);
  color: var(--primary-color);
  transform: translateY(-3px);
}

/* Specifieke kleuren voor hover */
.footer__social-link--whatsapp:hover {
  background: #25D366;
  color: var(--white);
}

.footer__social-link--messenger:hover {
  background: #0084FF;
  color: var(--white);
}

.footer__social-link svg {
  width: 20px;
  height: 20px;
}

.linking {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}