/* =========================

   AUSTIN ICON LIMO - CLEAN STYLE.CSS

   Cleaned version with responsive fixes

========================= */



/* =========================

   GLOBAL

========================= */



* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

  max-width: 100%;

  overflow-x: hidden;

}



body {

  font-family: 'Montserrat', Arial, sans-serif;

  background: #0b0b0b;

  color: #fff;

  padding-top: 90px;

  max-width: 100%;

  overflow-x: hidden;

}



a {

  transition: 0.3s ease;

}



/* =========================

   HEADER / NAVIGATION

========================= */



.header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 18px 7%;

  background: rgba(0,0,0,0.55);

  backdrop-filter: blur(8px);

  position: fixed;

  width: 100%;

  top: 0;

  z-index: 1000;

  transition: all 0.35s ease;

}



.header.scrolled {

  background: rgba(0,0,0,0.92);

  padding: 8px 7%;

  box-shadow: 0 8px 30px rgba(0,0,0,0.55);

}



.logo img {

  height: 95px;

  width: auto;

  object-fit: contain;

  transition: 0.35s ease;

}



.header.scrolled .logo img {

  height: 70px;

}



#nav-menu {

  display: flex;

  align-items: center;

  gap: 35px;

  transition: opacity 0.35s ease, transform 0.35s ease;

}



#nav-menu.closing {

  opacity: 0;

  transform: translateY(-15px);

}



#nav-menu > a,

.dropdown > a {

  color: #fff;

  text-decoration: none;

  font-size: 18px;

  font-weight: 700;

  position: relative;

}



#nav-menu > a:hover,

.dropdown > a:hover {

  color: #d4af37;

}



#nav-menu > a::after,

.dropdown > a::after {

  content: "";

  position: absolute;

  width: 0;

  height: 2px;

  background: #d4af37;

  left: 0;

  bottom: -6px;

  transition: 0.3s;

}



#nav-menu > a:hover::after,

.dropdown > a:hover::after {

  width: 100%;

}



.phone {

  color: #d4af37;

  text-decoration: none;

  font-weight: bold;

  font-size: 18px;

}



.menu-toggle {

  display: none;

  color: #d4af37;

  font-size: 34px;

  cursor: pointer;

}

/* =========================

   MEGA MENU ICONS

========================= */



.mega-links i{

    width:24px;

    text-align:center;

    font-size:18px;

    color:#111;

}

/* =========================

   MEGA MENU

========================= */



.dropdown {

  position: relative;

}



.mega-menu {

  display: none;

  position: absolute;

  top: 45px;

  left: -180px;

  width: 850px;

  background: #f5f1e8;

  border-radius: 20px;

  overflow: hidden;

  z-index: 9999;

  box-shadow: 0 25px 55px rgba(0,0,0,0.45);

  transition: opacity 0.35s ease, transform 0.35s ease;

}



.mega-menu.active {

  display: block;

}



.mega-menu.closing {

  opacity: 0;

  transform: translateY(-15px);

}



.mega-section {

  border-bottom: 1px solid rgba(0,0,0,0.06);

}



.mega-section:last-child {

  border-bottom: none;

}



.mega-heading {

  background: #e8dfc8;

  padding: 12px 24px;

  font-size: 18px;

  font-weight: 700;

  color: #111;

  letter-spacing: 0.5px;

  border-bottom: 1px solid rgba(0,0,0,0.08);

}



.mega-links {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 12px;

  padding: 22px 24px;

}



.mega-links a {

  display: flex;

  align-items: center;

  gap: 12px;

  color: #111 !important;

  text-decoration: none;

  font-size: 16px;

  font-weight: 600;

}



.mega-links a i {

  width: 20px;

  font-size: 16px;

  text-align: center;

}



.mega-links a:hover {

  color: #d4af37 !important;

  transform: translateX(8px);

}



.mega-links a::after {

  display: none !important;

}



/* =========================

   HERO

========================= */



.hero {

  min-height: 85vh;

  display: flex;

  align-items: center;

  padding: 0 8%;

  position: relative;

}

/* AIRPORT TRANSFER */

.airport-hero {

  background:

    linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7)),

    url("images/heroes/airport-transfer.jpg") center/cover no-repeat;

}



/* CORPORATE */

.corporate-hero {

  background:

    linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7)),

    url("images/heroes/corporate-transportation.jpg") center/cover no-repeat;

}



/* EXECUTIVE SPRINTER */

.sprinter-hero {

  background:

    linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7)),

    url("images/heroes/executive-sprinter.jpg") center/cover no-repeat;

}



/* WEDDING */

.wedding-hero {

  background:

    linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7)),

    url("images/heroes/wedding-transportation.jpg") center/cover no-repeat;

}



/* PRIVATE AVIATION */

.private-hero {

  background:

    linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7)),

    url("images/heroes/private-aviation.jpg") center/cover no-repeat;

}



/* CITY TO CITY */

.city-hero {

  background:

    linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7)),

    url("images/heroes/city-to-city.jpg") center/cover no-repeat;

}

/* POINT TO POINT HERO */



.point-hero {

  background:

    linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7)),

    url("images/heroes/point-to-point.png") center/cover no-repeat;

}



/* MEETING & OFFSITE EVENTS HERO */



.meeting-hero {

  background:

    linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7)),

    url("images/heroes/meeting-offsite-events.png") center/cover no-repeat;

}



/* PARTNERSHIP PROGRAM HERO */



.partnership-hero {

  background:

    linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7)),

    url("images/heroes/partnership-program.png") center/cover no-repeat;

}



/* CITY TOURS HERO */



.city-tours-hero {

  background:

    linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7)),

    url("images/heroes/city-tours.png") center/cover no-repeat;

}



/* LIMO SERVICE HERO */



.limo-hero {

  background:

    linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7)),

    url("images/heroes/limo-service.png") center/cover no-repeat;

}



/* SPECIAL EVENTS HERO */



.events-hero {

  background:

    linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7)),

    url("images/heroes/special-events.png") center/cover no-repeat;

}

/* CLIENT & PARTNER TRAVEL HERO */



.partner-hero {

  background:

    linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7)),

    url("images/heroes/client-partner-travel.png") center/cover no-repeat;

}

/* HOME HERO */



.home-hero {

  background:

    linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7)),

    url("images/heroes/hero.jpg") center/cover no-repeat;

}

/* HOURLY RIDE */



.hourly-hero {

  background:

    linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7)),

    url("images/heroes/hero.jpg") center/cover no-repeat;

}



.hero-content {

  max-width: 850px;

  padding-top: 90px;

  z-index: 2;

  position: relative;

}



.hero-content h1 {

  font-size: clamp(48px, 5.2vw, 78px);

  line-height: 1.08;

  margin-bottom: 22px;

  font-weight: 800;

  color: #fff;

  word-break: normal;

  overflow-wrap: normal;

}



.hero-content p {

  font-size: clamp(20px, 2vw, 26px);

  line-height: 1.55;

  max-width: 900px;

  margin-bottom: 35px;

  color: #fff;

}



.btn,

button {

  background: #d4af37;

  color: #000;

  padding: 16px 34px;

  text-decoration: none;

  border: none;

  font-weight: bold;

  border-radius: 6px;

  cursor: pointer;

  transition: 0.3s;

  display: inline-block;

}



.btn:hover,

button:hover {

  background: #fff;

  color: #000;

  transform: translateY(-3px);

}



/* =========================

   SECTIONS / TITLES

========================= */



.section {

  padding: 70px 8%;

}



.section-title {

  text-align: center;

  margin-bottom: 50px;

}



.section-title h2,

.booking-box h2,

.section h2 {

  text-align: center;

  margin-bottom: 22px;

  color: #d4af37;

  font-size: clamp(38px, 4vw, 56px);

  line-height: 1.15;

  font-weight: 800;

}



.section-title p {

  color: #ccc;

  font-size: 20px;

  line-height: 1.7;

}



.section p {

  margin-top: 0;

}



/* =========================

   BOOKING

========================= */



.booking-box {

  background: rgba(20,20,20,0.92);

  margin: -70px auto 80px;

  padding: 50px;

  width: 85%;

  position: relative;

  border-radius: 18px;

  backdrop-filter: blur(10px);

  border: 1px solid rgba(212,175,55,0.2);

  text-align: center;

}



.booking-text {

  color: #ccc;

  text-align: center;

  font-size: 18px;

  line-height: 1.7;

  margin-bottom: 35px;

}



.booking-frame {

  margin-top: 40px;

  border-radius: 18px;

  overflow: hidden;

  border: 1px solid rgba(212,175,55,0.25);

}



.booking-frame iframe {

  background: #fff;

}



/* =========================

   COUNTERS

========================= */



.counter-section {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 25px;

  padding: 60px 6%;

  background: #0d0d0d;

}



.counter-box {

  background: #171717;

  padding: 45px 20px;

  text-align: center;

  border-radius: 18px;

  border: 1px solid rgba(212,175,55,0.15);

  transition: 0.3s;

  min-height: 210px;

}



.counter-box:hover {

  transform: translateY(-8px);

  border-color: #d4af37;

}



.counter-box h2 {

  font-size: 60px;

  color: #d4af37;

  margin-bottom: 12px;

}



.counter-box p {

  color: #ccc;

  font-size: 18px;

}



/* =========================

   WHY US

========================= */



.why-us {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 25px;

  padding: 45px 8% 70px;

  background: #0d0d0d;

  margin-top: 0;

}



.why-box {

  background: #171717;

  padding: 35px;

  border-radius: 16px;

  text-align: center;

  transition: 0.3s;

  border: 1px solid rgba(212,175,55,0.15);

}



.why-box:hover {

  transform: translateY(-8px);

  border-color: #d4af37;

}



.why-box h3 {

  color: #d4af37;

  margin-bottom: 15px;

  font-size: 24px;

}



.why-box p {

  color: #ccc;

  line-height: 1.7;

}



/* =========================

   SERVICES / CARDS

========================= */



.service-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 25px;

  margin-top: 60px !important;

}



.service-card {

  background: #161616;

  padding: 35px;

  border-radius: 14px;

  border: 1px solid rgba(212,175,55,0.25);

  transition: 0.3s;

}



.service-card:hover {

  transform: translateY(-8px);

  border-color: #d4af37;

}



.service-card h3 {

  color: #d4af37;

  margin-bottom: 15px;

  font-size: 22px;

}



.service-card p {

  color: #ccc;

  line-height: 1.65;

  font-size: 16px;

}



/* =========================

   FLEET

========================= */



.fleet-section {

  padding: 100px 8%;

  background: #111;

}



.fleet-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 35px;

}



.fleet-card {

  background: #181818;

  border-radius: 18px;

  overflow: hidden;

  transition: 0.4s;

  border: 1px solid rgba(212,175,55,0.15);

}



.fleet-card:hover {

  transform: translateY(-10px);

  border-color: #d4af37;

}



.fleet-card img {

  width: 100%;

  height: 260px;

  object-fit: cover;

  transition: transform 0.6s ease;

}



.fleet-card:hover img {

  transform: scale(1.08);

}



.fleet-content {

  padding: 30px;

}



.fleet-content h3 {

  color: #d4af37;

  margin-bottom: 20px;

  font-size: 28px;

}



.fleet-details {

  display: flex;

  gap: 15px;

  margin-bottom: 20px;

  flex-wrap: wrap;

}



.fleet-details span {

  background: rgba(212,175,55,0.12);

  color: #d4af37;

  padding: 8px 14px;

  border-radius: 30px;

  font-size: 14px;

}



.fleet-content p {

  color: #ccc;

  line-height: 1.7;

}



/* =========================

   FLEET SLIDER

========================= */



.fleet-slider-section {

  padding: 100px 8%;

  background: #0d0d0d;

}



.fleet-slider {

  position: relative;

  width: 100%;

  height: 650px;

  overflow: hidden;

  border-radius: 25px;

}



.fleet-slide {

  position: absolute;

  width: 100%;

  height: 100%;

  opacity: 0;

  transition: opacity 1s ease;

}



.fleet-slide.active {

  opacity: 1;

  z-index: 2;

}



.fleet-slide img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.fleet-overlay {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  padding: 50px;

  background: linear-gradient(transparent, rgba(0,0,0,0.88));

}



.fleet-overlay h3 {

  font-size: 42px;

  color: #d4af37;

  margin-bottom: 12px;

}



.fleet-overlay p {

  font-size: 22px;

  color: #fff;

}



.slider-btn {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 60px;

  height: 60px;

  border-radius: 50%;

  border: none;

  background: rgba(0,0,0,0.45);

  color: #d4af37;

  font-size: 42px;

  cursor: pointer;

  z-index: 5;

  transition: 0.3s;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  line-height: 1 !important;

  padding: 0 !important;

}



.slider-btn:hover {

  background: #d4af37;

  color: #000;

}



.prev-btn {

  left: 25px;

}



.next-btn {

  right: 25px;

}



/* =========================

   CONTACT

========================= */



.contact-section {

  display: grid;

  grid-template-columns: 1fr 1.3fr;

  gap: 40px;

  padding: 100px 8%;

  background: #0d0d0d;

}



.contact-info {

  background: #161616;

  padding: 45px;

  border-radius: 20px;

  border: 1px solid rgba(212,175,55,0.18);

}



.contact-info h2 {

  color: #d4af37;

  font-size: 42px;

  margin-bottom: 20px;

}



.contact-info p {

  color: #ccc;

  font-size: 18px;

  line-height: 1.8;

  margin-bottom: 14px;

}



.contact-info i {

  color: #d4af37;

  margin-right: 10px;

}



/* CONTACT LINKS */



.contact-info a {

  color: #ccc;

  text-decoration: none;

}



.contact-info a:hover {

  color: #d4af37;

}



.contact-map {

  overflow: hidden;

  border-radius: 20px;

  border: 1px solid rgba(212,175,55,0.18);

}



/* =========================

   TOP CITIES SECTION

========================= */



.top-cities-section {

  padding: 100px 8%;

  background: #000;

  color: #fff;

}



.top-cities-section .section-title h2 {

  color: #fff;

}



.top-cities-section .section-title p {

  color: #bbb;

  margin-top: 15px;

}



.city-tabs {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 12px;

  margin: 40px 0 55px;

}



.city-tab {

  background: transparent;

  border: 1px solid #444;

  border-radius: 40px;

  padding: 13px 28px;

  color: #fff;

  font-weight: 700;

  cursor: pointer;

}



.city-tab.active,

.city-tab:hover {

  background: #d4af37;

  border-color: #d4af37;

  color: #000;

}



.city-content {

  display: none;

  grid-template-columns: 1fr 1fr;

  gap: 45px;

  align-items: start;

}



.city-content.active {

  display: grid;

}



.city-left img {

  width: 100%;

  height: 260px;

  object-fit: cover;

  border-radius: 18px;

  margin-bottom: 25px;

}



.city-left h3,

.city-right h3 {

  font-size: 34px;

  margin-bottom: 15px;

  color: #fff;

}



.city-left p {

  font-size: 18px;

  line-height: 1.8;

  margin-bottom: 22px;

  color: #bbb;

}



.city-left a,

.city-left a.btn {

  display: inline-block;

  border: 1px solid #d4af37 !important;

  padding: 12px 28px;

  border-radius: 40px;

  color: #000 !important;

  background: #d4af37 !important;

  text-decoration: none;

  font-weight: 700;

}



.city-left a:hover,

.city-left a.btn:hover {

  background: #fff !important;

  color: #000 !important;

}



.airport-row,

.route-row {

  border-top: 1px solid #333;

  padding: 15px 10px;

  font-size: 17px;

}



.route-row {

  display: grid;

  grid-template-columns: 1.7fr .7fr .7fr;

  gap: 15px;

}



.route-row:nth-child(even) {

  background: #111;

}



.route-row i {

  color: #d4af37;

  margin-right: 6px;

}



/* =========================

   CAR SEAT SECTION

========================= */



.car-seat-section {

  padding-top: 50px;

  padding-bottom: 90px !important;

  text-align: center;

  display: flex;

  flex-direction: column;

  align-items: center;

}



.car-seat-section .section-title {

  margin-bottom: 15px;

}



.car-seat-section h2 {

  margin-bottom: 10px;

}



.car-seat-section p {

  color: #ccc;

  line-height: 2.1;

  font-size: 18px;

  max-width: 1050px;

  margin: 0 auto 40px !important;

  text-align: center;

}



/* =========================

   TESTIMONIALS

========================= */



.testimonials {

  padding: 100px 8%;

  background: #111;

}



/* =========================

   FOOTER

========================= */



.footer {

  background: #000;

  color: #ccc;

  padding: 45px 6%;

  display: grid;



  grid-template-columns:

    minmax(240px, 1.15fr)

    minmax(135px, 0.70fr)

    minmax(430px, 1.85fr)

    minmax(220px, 1fr);



  gap: 28px;

  text-align: center;

  align-items: flex-start;

}



.footer-box {

  min-width: 0;

  padding: 0;

}



.footer-box:first-child {

  max-width: 340px;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  justify-self: center;

}



.footer-logo {

  width: 175px !important;

  max-width: 175px !important;

  height: auto !important;

  display: block;

  object-fit: contain;

  margin: 0 auto 20px !important;

}



.footer h3,

.footer h4 {

  color: #d4af37;

  margin-bottom: 14px;

}



.footer p {

  color: #ccc;

  margin-bottom: 8px;

  line-height: 1.55;
  /* changes done */
  display: flex;
  justify-content: center;
  gap: 5px;

}



.footer-box:first-child p {

  max-width: 340px;

}



.footer-box a {

  display: block;

  margin-bottom: 8px;

  color: #ccc !important;

  text-decoration: none;

  line-height: 1.45;

}



.footer-box a:hover {

  color: #d4af37 !important;

}



.footer-links-two {

  display: grid;

  grid-template-columns: repeat(2, minmax(175px, 1fr));

  gap: 8px 28px;

  align-items: start;

  justify-content: center;

}



.footer-links-two > div {

  display: flex;

  flex-direction: column;

  min-width: 0;

}



.footer-links-two a {

  margin: 0 0 7px;

  white-space: normal;

}



.footer-bottom {

  border-top: 1px solid rgba(255,255,255,0.1);

  padding: 18px 6%;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-wrap: wrap;

  gap: 30px;

  text-align: center;

  background: #000;

}



.footer-copy {

  color: #aaa;

  font-size: 14px;

}



.footer-legal {

  display: flex;

  gap: 24px;

  flex-wrap: wrap;

  justify-content: center;

}



.footer-legal a {

  color: #fff;

  text-decoration: none;

}



.footer-legal a:hover {

  color: #d4af37;

}



.footer-social {

  display: flex;

  gap: 14px;

  justify-content: center;

}



.footer-social a {

  color: #ccc !important;

  font-size: 22px !important;

  margin: 0 6px;

  text-decoration: none;

}



.footer-social a:hover {

  color: #d4af37 !important;

}



/* Keep the four-column footer comfortable on smaller desktop screens. */

@media (max-width: 1180px) and (min-width: 901px) {

  .footer {

    padding-left: 4%;

    padding-right: 4%;

    grid-template-columns:

      minmax(220px, 1.05fr)

      minmax(120px, 0.65fr)

      minmax(360px, 1.65fr)

      minmax(190px, 0.9fr);

    gap: 20px;

  }



  .footer-box a {

    font-size: 14px;

  }



  .footer-links-two {

    grid-template-columns: repeat(2, minmax(150px, 1fr));

    gap: 6px 18px;

  }

}



/* Stack the main footer columns on tablets and phones. */

@media (max-width: 900px) {

  .footer {

    grid-template-columns: 1fr !important;

    text-align: center !important;

    gap: 30px !important;

    padding: 45px 7% 30px !important;

  }



  .footer-box,

  .footer-box:first-child {

    width: 100% !important;

    max-width: 100% !important;

    padding: 0 !important;

    justify-self: stretch;

  }



  .footer-links-two {

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 8px 24px;

    max-width: 620px;

    margin: 0 auto;

  }

}



/* One services column on narrow phones for easier reading. */

@media (max-width: 560px) {

  .footer-links-two {

    grid-template-columns: 1fr;

    gap: 0;

  }



  .footer-logo {

    width: 175px !important;

    max-width: 175px !important;

  }

}



/* =========================

   FLOATING CONTACT BUTTONS

========================= */



.floating-buttons {

  position: fixed !important;

  right: 25px !important;

  bottom: 30px !important;

  left: auto !important;

  top: auto !important;

  z-index: 9998 !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: flex-end !important;

  gap: 14px !important;

  transform: scale(0.85);

  transform-origin: bottom right;

}



.floating-buttons a {

  position: static !important;

  width: 230px !important;

  height: 58px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 12px !important;

  border-radius: 50px !important;

  text-decoration: none !important;

  font-size: 22px !important;

  font-weight: 700 !important;

  box-shadow: 0 8px 25px rgba(0,0,0,0.4) !important;

}



.call-btn {

  background: #d4af37 !important;

  color: #000 !important;

}



.whatsapp-btn {

  background: #25D366 !important;

  color: #fff !important;

}



.call-btn:hover,

.whatsapp-btn:hover {

  transform: translateY(-3px);

}



/* =========================

   LUXURY LOADER

========================= */



.loader-wrapper {

  position: fixed !important;

  inset: 0 !important;

  width: 100vw !important;

  height: 100vh !important;

  background: #000 !important;

  z-index: 9999999 !important;

  display: flex !important;

  justify-content: center !important;

  align-items: center !important;

  flex-direction: column !important;

  transition: opacity 1s ease, visibility 1s ease;

}



.loader-wrapper.hidden {

  opacity: 0 !important;

  visibility: hidden !important;

  pointer-events: none !important;

}



.loader-logo {

  width: 320px;

  animation: fadeIn 2s ease;

}



.loader-line {

  width: 220px;

  height: 4px;

  background: #d4af37;

  margin-top: 30px;

  border-radius: 50px;

  animation: loading 2s infinite;

}



@keyframes loading {

  0% { transform: scaleX(0); }

  50% { transform: scaleX(1); }

  100% { transform: scaleX(0); }

}



@keyframes fadeIn {

  from {

    opacity: 0;

    transform: translateY(20px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* =========================

   TABLET RESPONSIVE

========================= */



@media (max-width: 900px) {



  .header {

    flex-wrap: wrap;

  }



  .menu-toggle {

    display: block;

  }



  #nav-menu {

    display: none;

    width: 100%;

    flex-direction: column;

    background: #000;

    padding: 25px 0;

    margin-top: 15px;

    text-align: center;

  }



  #nav-menu.active {

    display: flex;

  }



  #nav-menu a {

    margin: 12px 0;

    font-size: 18px;

  }



  .phone {

    display: none;

  }



  .logo img,

  .header.scrolled .logo img {

    height: 70px;

  }



  .mega-menu {

    position: static;

    width: 100%;

    left: 0;

    margin-top: 15px;

  }



  .mega-links {

    grid-template-columns: 1fr;

  }



  .service-grid,

  .fleet-grid,

  .contact-section,

  .city-content.active {

    grid-template-columns: 1fr;

  }



  .why-us {

    grid-template-columns: repeat(2, 1fr);

  }



  .floating-buttons {

    right: 15px !important;

    bottom: 20px !important;

    transform: scale(0.78);

  }

}



/* =========================

   MOBILE RESPONSIVE

========================= */



@media (max-width: 768px) {



  body {

    padding-top: 110px;

    overflow-x: hidden !important;

  }



  .header {

    padding: 14px 7%;

  }



  .hero {

    min-height: auto;

    padding: 80px 7% 90px !important;

    align-items: center;

  }



  .hero-content {

    padding-top: 20px;

    max-width: 100%;

  }



  .hero-content h1,

  .hero h1 {

    font-size: clamp(38px, 10vw, 54px) !important;

    line-height: 1.08 !important;

    max-width: 100% !important;

    word-break: normal !important;

    overflow-wrap: normal !important;

  }



  .hero-content p,

  .hero p {

    font-size: 20px !important;

    line-height: 1.55 !important;

    max-width: 100% !important;

  }



  .hero-content .btn {

    margin-bottom: 25px !important;

  }



  .hero + .section {

    padding-top: 55px !important;

  }



  .section {

    padding: 55px 7%;

  }



  .section-title {

    margin-bottom: 35px;

  }



  .section-title h2,

  .booking-box h2,

  .section h2 {

    font-size: clamp(34px, 8vw, 42px) !important;

    line-height: 1.15 !important;

  }



  .section-title p {

    font-size: 18px;

  }



  .booking-box {

    width: 92%;

    padding: 30px 20px;

    margin: -35px auto 60px;

  }



  .counter-section {

    grid-template-columns: 1fr !important;

    gap: 25px !important;

    padding: 45px 8% !important;

  }



  .counter-box {

    width: 100% !important;

    min-height: 210px !important;

  }



  .service-grid,

  .services-grid,

  .why-us,

  .contact-section {

    grid-template-columns: 1fr !important;

  }



  .service-card,

  .why-box {

    width: 100% !important;

    max-width: 100% !important;

  }



  .why-us {

    padding: 45px 7% 55px;

  }



  .fleet-slider {

    height: 420px;

  }



  .fleet-overlay {

    padding: 25px;

  }



  .fleet-overlay h3 {

    font-size: 28px;

  }



  .fleet-overlay p {

    font-size: 16px;

  }



  .city-tabs {

    overflow-x: auto;

    justify-content: flex-start;

    flex-wrap: nowrap;

    padding-bottom: 10px;

  }



  .route-row {

    grid-template-columns: 1fr;

  }



  .mega-menu.active {

    max-height: 70vh !important;

    overflow-y: auto !important;

    overflow-x: hidden !important;

    -webkit-overflow-scrolling: touch;

  }



  .floating-buttons {

    transform: scale(0.78) !important;

    right: 10px !important;

    bottom: 20px !important;

  }



  .floating-buttons a {

    width: 185px !important;

    height: 50px !important;

    font-size: 16px !important;

  }



}



/* =========================

   SMALL MOBILE

========================= */



@media (max-width: 480px) {



  .logo img,

  .header.scrolled .logo img {

    height: 62px;

  }



  .hero-content h1,

  .hero h1 {

    font-size: 38px !important;

  }



  .hero-content p,

  .hero p {

    font-size: 18px !important;

  }



  .btn,

  button {

    padding: 14px 24px;

    font-size: 15px;

  }



  .section-title h2,

  .booking-box h2,

  .section h2 {

    font-size: 32px !important;

  }



  .service-card,

  .why-box {

    padding: 28px;

  }



}

/* =========================

   CHAT / CALL / WHATSAPP OVERLAP FIX

========================= */



/* Desktop */

.floating-buttons {

  bottom: 110px !important;

  right: 25px !important;

}



/* MOBILE FLOATING BUTTONS - KEEP CHAT VISIBLE */



@media (max-width: 768px) {



  .floating-buttons {

    left: 10px !important;

    right: auto !important;

    bottom: 25px !important;

    transform: scale(0.72) !important;

    transform-origin: bottom left;

    gap: 10px !important;

  }



  .floating-buttons a {

    width: 165px !important;

    height: 45px !important;

    font-size: 14px !important;

  }



}

/* FINAL MOBILE CONTACT + FLOATING BUTTON FIX */



@media (max-width: 768px) {



  .contact-section {

    display: block !important;

    padding: 50px 20px 20px !important;

    width: 100% !important;

    max-width: 100% !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

  }



  .contact-info {

    width: 100% !important;

    max-width: 100% !important;

    padding: 28px 20px !important;

    margin: 0 0 25px 0 !important;

    box-sizing: border-box !important;

  }



  .contact-info h2 {

    font-size: 32px !important;

    line-height: 1.2 !important;

  }



  .contact-info p {

    font-size: 16px !important;

    word-break: break-word !important;

  }



  .contact-info a {

    color: #d4af37 !important;

    text-decoration: none !important;

  }



  .contact-map {

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

    box-sizing: border-box !important;

  }



  .contact-map iframe {

    width: 100% !important;

    height: 340px !important;

    display: block !important;

  }



  .floating-buttons {

    left: 18px !important;

    right: auto !important;

    bottom: 95px !important;

    transform: scale(0.70) !important;

    transform-origin: bottom left !important;

    z-index: 9998 !important;

  }



}



/* CONTACT LINK COLOR FIX */

.contact-card a {

  color: #d4af37 !important;

  text-decoration: none !important;

}



.contact-card a:hover {

  color: #ffffff !important;

}

/* ==========================================

   FAQ - SAFETY & COMPLAINT CONTACT CARDS

   ========================================== */



/* Complaint city cards */

.services-section .service-card {

  position: relative;

}



/* Links inside FAQ/service cards */

.services-section .service-card a {

  color: #d4af37;

  text-decoration: none;

  font-weight: 600;

  transition: all 0.25s ease;

}



/* Hover effect */

.services-section .service-card a:hover {

  color: #ffffff;

  text-decoration: underline;

}



/* Visited links - prevent browser purple/blue */

.services-section .service-card a:visited {

  color: #d4af37;

}



/* City card headings */

.services-section .service-card h3 {

  color: #d4af37;

}



/* Improve spacing inside cards */

.services-section .service-card p {

  line-height: 1.7;

}



/* Make phone/email labels cleaner */

.services-section .service-card strong {

  color: #ffffff;

  font-weight: 600;

}





/* ==========================================

   MOBILE

   ========================================== */



@media (max-width: 768px) {



  .services-section .service-card a {

    overflow-wrap: anywhere;

    word-break: break-word;

  }



}

/* ==========================================

   FAQ SAFETY TOP CARDS

   ========================================== */



.services-section .service-grid:has(+ .section-title) {

  grid-template-columns: repeat(2, 1fr);

}

/* ==========================================

   FAQ COMPLAINT SECTION SPACING

   ========================================== */



.complaint-title {

  margin-top: 120px;

}

/* ==========================================

   FOOTER LEGAL OPERATOR

   ========================================== */



.legal-operator {

  display: block;

  margin-top: 4px;

  font-size: 11px;

  color: #888;

}

/* ==========================================

   SERVICE CARD LINKS

   ========================================== */



.service-card a {

  color: #d4af37;

  text-decoration: none;

  transition: opacity 0.3s ease;

}



.service-card a:hover {

  opacity: 0.8;

  text-decoration: underline;

}