/* ================================
   GLOBAL
================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  color: #222;
  background: #fff;
}

.container {
  width: 90%;
  max-width: 1300px;
  margin: auto;
}

html {
  scroll-behavior: smooth;
}



.search-hero {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('images/airports-min.jpg') center center/cover no-repeat;
  position: relative;
  padding: 200px 0 60px 0;
  /* Padding increased to clear header */
  color: #fff;
}

.search-overlay {
  padding: 50px 0;
}

.search-summary {
  text-align: center;
  margin-bottom: 18px;
}

.search-summary h2 {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #fff;
}


/* ====== Search Section ====== */
.search-section .search-form-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 420ms cubic-bezier(.2, .9, .2, 1);
  margin-top: 10px;
}

/* expanded state (you can toggle this with JS) */
.search-section.expanded .search-form-wrap {
  max-height: 1000px;
}


/* form container */
.search-section .search-form {
  background: #059669;
  /* Theme Green */
  padding: 20px;
  border-radius: 18px;
  color: #fff;
  border: 1px solid #34d399;
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
  margin-bottom: 40px;
}

/* grid inside form */
.search-section .search-form .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
}

/* single form group */
.search-section .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.search-section .form-group label {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.search-section .form-group input,
.search-section .form-group select {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid #E5E7EB;
  min-height: 48px;
  /* Taller inputs */
  background-color: #fff;
  color: #1F2937;
  font-size: 15px;
  outline: none;
  transition: all 0.2s ease;
}

.search-section .form-group input:focus,
.search-section .form-group select:focus {
  border-color: #059669;
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.1);
}

/* action button area */
.search-section .form-actions {
  text-align: center;
  margin-top: 16px;
}

.search-section .quote-btn {
  background: #F59E0B;
  /* Gold/Amber for contrast on Green */
  border: none;
  color: #fff;
  padding: 14px 28px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  transition: background 0.18s, transform 0.1s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.search-section .quote-btn:hover {
  background: #d97706;
  transform: translateY(-2px);
}


/* ============================
   Airport Intro Section
============================= */
/* Shared container for alignment */
.align-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Airport Intro Section */
.airport-intro {
  padding: 40px 0 20px;
  background: #fff;
  text-align: left;
}

/* Title and description */
.airport-intro-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #222;
}

.airport-intro-title span {
  color: #059669;
}

.airport-intro-desc {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.airport-intro-desc strong,
.airport-intro-desc b {
  font-weight: 700;
  color: #059669;
}

/* ==============================
   Why Parking Section Styles
============================== */
.why-parking {
  padding: 60px 0;
  background: #ecfdf5;
  color: #222;
  text-align: left;
}

.why-parking-title {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 24px;
  letter-spacing: -0.5px;
  color: #111827;
}

.why-parking-title span {
  color: #059669;
  /* Theme Green */
  position: relative;
  display: inline-block;
}

.why-parking-desc {
  font-size: 18px;
  /* Larger text */
  line-height: 1.8;
  /* Better readability */
  margin-bottom: 50px;
  color: #374151;
  /* Softer dark gray */
  max-width: 800px;
  font-weight: 400;
}

.why-parking-desc strong {
  font-weight: 700;
  color: #065f46;
  background-color: #d1fae5;
  /* Green Highlighter Pill */
  padding: 2px 6px;
  border-radius: 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

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

/* 3D FLIP CARD STYLES */
.feature-card {
  background-color: transparent;
  width: 100%;
  min-height: 280px;
  /* Fixed height for flip */
  perspective: 1000px;
  border: none;
  box-shadow: none;
  padding: 0;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
  border-radius: 20px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.feature-card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  top: 0;
  left: 0;
}

/* Front Side */
.card-front {
  background-color: #fff;
  color: #111827;
  border: 1px solid #e5e7eb;
}

/* Back Side */
.card-back {
  background: linear-gradient(135deg, #059669 0%, #34d399 100%);
  color: #fff;
  transform: rotateY(180deg);
  border: none;
  padding: 30px;
}

/* Front Content Styling */
.card-front .feature-icon {
  width: 70px;
  height: 70px;
  background: #ecfdf5;
  color: #059669;
  font-size: 32px;
  border-radius: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-front h3 {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

/* Back Content Styling */
.card-back p {
  font-size: 16px;
  line-height: 1.6;
  color: #fff;
  margin: 0;
  font-weight: 500;
}


/* Responsive container alignment (same as search section) */
.align-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ==============================
   Parking Services Section
============================== */
.parking-services {
  padding: 100px 0;
  /* Increased from 60px */
  background: #f3f4f6;
  /* Light Grey (contrast) */
  color: #222;
  text-align: left;
}

.services-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
}

.services-title span {
  color: #059669;
  /* theme green */
}

.parking-services .why-parking-desc {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 40px;
}

/* Services grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* Service cards - Gradient Reveal */
.services-card {
  background: #fff;
  padding: 30px;
  border-radius: 24px;
  border: none;
  text-align: left;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.services-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #059669 0%, #34d399 100%);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s ease;
}

.services-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px -10px rgba(5, 150, 105, 0.3);
}

.services-card:hover::before {
  opacity: 1;
}

.card-icon {
  width: 60px;
  height: 60px;
  background: #ecfdf5;
  /* Light green pill */
  color: #059669;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.services-card:hover .card-icon {
  background: #fff;
  color: #059669;
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.services-card h3 {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 12px;
  transition: color 0.3s ease;
}

.services-card:hover h3 {
  color: #fff;
}

.services-card p {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.6;
  transition: color 0.3s ease;
}

.services-card:hover p {
  color: #f0fdf4;
}

/* ==============================
   Standout Section
============================== */
.standout-section {
  padding: 100px 0;
  /* Increased from 60px */
  background: #f0fdf4;
  text-align: center;
}

/* Purple boxed heading */
.standout-title {
  display: inline-block;
  background: #059669;
  /* theme green */
  color: #ffffff;
  font-size: 30px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 14px;
  margin-bottom: 45px;
  text-align: center;
}

/* Yellow highlighted span */
.standout-title span {
  color: #fdc008;
  /* theme yellow */
}

/* Grid */
.standout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
}

/* Cards */
.standout-card {
  background: #f8f8fc;
  padding: 30px 22px;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
}

.standout-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.14);
}

/* Icons */
.standout-icon {
  width: 50px;
  height: 50px;
  background: #059669;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 15px;
}

/* Text */
.standout-card h3 {
  font-size: 20px;
  color: #059669;
  margin-bottom: 10px;
}

.standout-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}





@media (max-width: 1200px) {
  .search-section .search-form {
    max-width: 100%;
  }

  .align-container {
    padding: 0 16px;
  }
}

@media (max-width: 992px) {

  /* Navbar */
  .nav-content {
    flex-wrap: wrap;
  }

  .nav-links {
    gap: 20px;
  }

  /* Headings */
  .airport-intro-title,
  .why-parking-title,
  .services-title {
    font-size: 28px;
  }

  .standout-title {
    font-size: 26px;
    padding: 12px 22px;
  }

  /* Cards spacing */
  .feature-card,
  .services-card,
  .standout-card {
    padding: 22px 18px;
  }
}


@media (max-width: 768px) {

  /* Navbar mobile */
  .hamburger {
    display: flex;
  }

  .nav-links {
    display: none;
    width: 100%;
    background: #fff;
    padding: 20px 0;
    border-top: 1px solid #eee;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links li {
    width: 100%;
    padding: 10px 20px;
  }

  /* Search hero */
  .search-summary h2 {
    font-size: 28px;
  }

  /* Forms */
  .search-section .search-form .grid {
    grid-template-columns: 1fr;
  }

  /* Sections text */
  .airport-intro,
  .why-parking,
  .parking-services,
  .standout-section {
    text-align: left;
  }

  /* Headings */
  .airport-intro-title,
  .why-parking-title,
  .services-title {
    font-size: 26px;
  }

  .standout-title {
    display: block;
    font-size: 24px;
    text-align: center;
  }

  /* Cards */
  .features-grid,
  .services-grid,
  .standout-grid {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 576px) {
  body {
    font-size: 14px;
  }

  /* Logo */
  .logo-img {
    height: 60px;
  }

  /* Headings */
  .airport-intro-title,
  .why-parking-title,
  .services-title {
    font-size: 24px;
  }

  .standout-title {
    font-size: 22px;
    padding: 10px 18px;
  }

  /* Paragraphs */
  .airport-intro-desc,
  .why-parking-desc,
  .standout-card p,
  .services-card p {
    font-size: 14px;
  }

  /* Icons */
  .standout-icon,
  .card-icon {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  /* Buttons */
  .search-section .update-btn,
  .call-btn {
    width: 100%;
  }

  /* Footer */
  .footer-top {
    flex-direction: column;
  }

  .footer-bottom {
    font-size: 0.8rem;
  }
}


@media (max-width: 400px) {
  .standout-title {
    font-size: 20px;
  }

  .search-summary h2 {
    font-size: 24px;
  }

  .airport-intro-title,
  .why-parking-title {
    font-size: 22px;
  }
}