/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
}

/* Navbar */
.navbar {
  background: transparent;
  transition: background 0.3s ease;
  z-index: 1000;
  position: fixed;
  width: 100%;
}

.navbar.scrolled {
  background: rgba(0, 0, 64, 0.9);
}

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url('https://www.tusktravel.com/blog/wp-content/uploads/2021/07/Tosh-Village-Kasol-Himachal.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Overlay */
.hero .overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* semi-transparent black */
  z-index: 1;
}

/* Hero Content */
.hero .hero-content {
  position: relative;
  z-index: 2; /* Above overlay */
  color: white;
  text-align: center;
}

/* Hero Text */
.hero .hero-content h1 {
  font-size: 3rem;
  margin-bottom: 15px;
}

.hero .hero-content p.lead {
  font-size: 1.5rem;
  margin-bottom: 20px;
}

/* Buttons */
.hero .hero-buttons a {
  margin: 0 10px;
}

/* Responsive */
@media (max-width: 768px) {
  .hero .hero-content h1 {
    font-size: 2rem;
  }
  .hero .hero-content p.lead {
    font-size: 1.2rem;
  }
  .hero .hero-buttons a {
    margin: 5px;
    font-size: 0.9rem;
  }
}


/* Vehicles Section */
#vehicles .card-img-top {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Tours Section */
#tours h2 {
  color: #002b5b;
}

/* About Section */
#about p {
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Footer */
footer {
  background: #002b5b;
  color: white;
}

footer a {
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* Floating WhatsApp Button */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  border-radius: 50%;
  background-color: #25D366;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg');
  background-size: 60% 60%;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

.whatsapp-float::after {
  content: "Chat with us";
  position: absolute;
  right: 70px;
  background-color: #25D366;
  color: white;
  padding: 6px 10px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  font-size: 14px;
}

.whatsapp-float:hover::after {
  opacity: 1;
}

/* Responsive Hero Text */
@media (max-width: 768px) {
  .hero .hero-content h1 {
    font-size: 2rem;
  }
  .hero .hero-content p {
    font-size: 1rem;
  }
  .hero .hero-buttons a {
    min-width: 120px;
    margin-bottom: 10px;
  }
}
/* Popular Himachal Tours */
#tours {
  background-color: #f8f9fa;
}

#tours h2 {
  color: #002b5b;
}

#tours .card {
  border: none;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

#tours .card-img-top {
  height: 200px;
  object-fit: cover;
}

#tours .card-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 10px;
}

#tours .card p {
  font-size: 0.95rem;
  margin: 5px 0;
}

#tours .btn {
  margin-top: 10px;
}

#gallery img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

#gallery img:hover {
  transform: scale(1.05);
  box-shadow: 0px 8px 20px rgba(0,0,0,0.3);
}

.btn-success {
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-success:hover {
    background-color: #1da851; /* slightly darker green */
    transform: scale(1.05);
}
.hero.about-hero {
    height: 300px; /* smaller than full screen */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* About page hero smaller */
.hero.about-hero {
    height: 300px;           /* reduced height */
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero.about-hero .hero-content h1 {
    font-size: 2.5rem;      /* slightly smaller text */
}

.hero.about-hero .hero-content p.lead {
    font-size: 1.2rem;
}
/* Team Section */
#team .card {
    border: none;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

#team .card-img-top {
    height: 250px;
    object-fit: cover;
}

#team .card-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 10px;
}

#team .card-text {
    font-size: 0.95rem;
    margin: 5px 0;
}
/* Gallery Styling */
.gallery-img {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}

.gallery-img:hover {
  transform: scale(1.08);
  box-shadow: 0px 10px 25px rgba(0,0,0,0.4);
}
.page-header {
  background: url("images/galarybackgroung.jpg") center/cover no-repeat;
  color: #fff;
  padding: 100px 0;
  text-align: center;
  position: relative;
}

<!-- ==================== CSS Styling ==================== -->
<style>
.airport-rates {
  background: linear-gradient(135deg, #f8f9fa, #eef3f8);
}
.rate-card {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(6px);
  transition: all 0.3s ease;
  border: 1px solid rgba(200, 200, 200, 0.3);
}
.rate-card h5 {
  color: #0d6efd;
  font-weight: 600;
  margin-bottom: 8px;
}
.rate-card p {
  color: #333;
  margin: 0;
}
.rate-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.9);
}
</style>

<!-- ==================== CSS Styling ==================== -->
<style>
.trade-union {
  background: linear-gradient(135deg, #f8f9fa, #eef3f8);
}
.certificate-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(200,200,200,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.certificate-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.certificate-card h5 {
  color: #0d6efd;
}
.certificate-card p {
  color: #555;
  line-height: 1.5;
}
</style>



<!-- CSS -->
<style>
.vehicle-card {
  transition: all 0.4s ease;
  border: 1px solid #f1f1f1;
}
.vehicle-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.vehicle-card img {
  transition: transform 0.4s ease;
}
.vehicle-card:hover img {
  transform: scale(1.05);
}
.price-bar {
  background-color: #fcb900;
  color: #000;
  font-weight: 600;
}
.btn-primary {
  background: linear-gradient(45deg, #007bff, #00b4d8);
  border: none;
  transition: 0.3s;
}
.btn-primary:hover {
  background: linear-gradient(45deg, #00b4d8, #007bff);
  transform: scale(1.05);
}
.navbar-brand img {
  border-radius: 50%; /* makes logo circular if desired */
  object-fit: cover;
}
/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 60px;
  height: 60px;
  background-color: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 34px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 10000;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* Tooltip text */
.whatsapp-tooltip {
  position: absolute;
  right: 70px;
  background-color: #333;
  color: #fff;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: all 0.25s ease;
  pointer-events: none;
}

/* Tooltip arrow */
.whatsapp-tooltip::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -6px;
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent #333;
}

#mainCarousel .carousel-caption {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 90%;
  text-align: center;
  color: #fff;
  z-index: 20 !important; /* 👈 RAISED ABOVE EVERYTHING */
  pointer-events: auto;
}

#mainCarousel .carousel-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 10; /* 👈 BELOW CAPTION */
}

#mainCarousel .carousel-item img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Make sure parent allows caption to appear above overlays */
#mainCarousel .carousel-item {
  position: relative;
  overflow: visible !important; /* 👈 fixes clipping issue */
}

/* === FINAL HERO CAROUSEL (CLEAN + RESPONSIVE) === */

/* Default / Desktop view */
#mainCarousel,
#mainCarousel .carousel-inner,
#mainCarousel .carousel-item {
  height: 90vh !important;
  overflow: visible !important;
  position: relative;
}

#mainCarousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

/* Dark overlay for readability */
#mainCarousel .carousel-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 2;
}

/* Caption styling */
#mainCarousel .carousel-caption {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 90%;
  text-align: center;
  color: #fff !important;
  z-index: 5 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

#mainCarousel .carousel-caption h1,
#mainCarousel .carousel-caption p {
  color: #fff !important;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.8);
}

/* Buttons */
#mainCarousel .carousel-caption .btn {
  margin: 6px;
  background-color: rgba(0, 128, 0, 0.9);
  border: none;
  color: #fff;
  font-size: 1rem;
  z-index: 6 !important;
}

/* 📱 Mobile fix - HALF SCREEN HEIGHT with smaller text/buttons */
@media (max-width: 768px) {
  #mainCarousel,
  #mainCarousel .carousel-inner,
  #mainCarousel .carousel-item {
    height: 50vh !important; /* ✅ Half of the mobile screen */
  }

  #mainCarousel .carousel-caption {
    top: 55% !important;
  }

  #mainCarousel .carousel-caption h1 {
    font-size: 1.0rem !important;  /* smaller main heading */
    line-height: 1.3;
  }

  #mainCarousel .carousel-caption p {
    font-size: 0.6rem !important; /* smaller paragraph */
  }

  #mainCarousel .carousel-caption .btn {
    font-size: 0.50rem !important;  /* smaller buttons */
    padding: 5px 10px !important;  /* smaller padding */
    margin: 4px !important;
  }
}

/* Extra small phones */
@media (max-width: 480px) {
  #mainCarousel,
  #mainCarousel .carousel-inner,
  #mainCarousel .carousel-item,
  #mainCarousel .carousel-item img {
    height: 45vh !important; /* slightly smaller on very small phones */
  }

  #mainCarousel .carousel-caption {
    top: 55% !important;
  }

  #mainCarousel .carousel-caption h1 {
    font-size: 1.1rem !important;
  }
}
/* ================================
   📱 FIX HEADER / NAVBAR ON MOBILE
   ================================ */
@media (max-width: 768px) {
  .navbar {
    padding: 4px 10px !important; /* reduce vertical padding */
  }

  .navbar-brand {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .navbar-brand img {
    max-height: 36px !important; /* smaller logo */
    width: auto;
  }

  .navbar-brand span,
  .navbar-brand h1,
  .navbar-brand h2 {
    font-size: 1rem !important; /* smaller brand text */
    line-height: 1.1;
  }

  .navbar-nav .nav-link {
    font-size: 0.85rem !important; /* smaller links in dropdown */
    padding: 6px 10px !important;
  }

  .navbar-toggler {
    padding: 4px 6px !important;
    font-size: 0.9rem !important;
  }
}
/* ================================
   📱 FIX WIDE HEADER (INLINE VERSION)
   ================================ */
@media (max-width: 768px) {
  .navbar {
    padding: 4px 10px !important;
  }

  .navbar-brand {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .navbar-brand img {
    max-height: 30px !important; /* smaller logo */
    width: auto;
  }

  .navbar-brand span,
  .navbar-brand h1,
  .navbar-brand h2 {
    font-size: 0.5rem !important; /* smaller business name */
    line-height: 1.1;
    white-space: nowrap; /* prevent wrapping */
  }

  .navbar-nav .nav-link {
    font-size: 0.85rem !important;
    padding: 6px 10px !important;
  }

  .navbar-toggler {
    padding: 3px 6px !important;
  }
}
.navbar {
  background-color: rgba(255, 255, 255, 0.95); /* optional: subtle transparency */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* ===================================
   📱 MOBILE POPUP OPTIMIZATION FIX
   =================================== */
@media (max-width: 768px) {
  /* Shrink modal container */
  #enquiryModal .modal-dialog {
    max-width: 85% !important;
    margin: 0 auto;
  }

  /* Limit popup height and make it scrollable if content overflows */
  #enquiryModal .modal-content {
    max-height: 75vh !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
  }

  /* Header text adjustments */
  #enquiryModal .modal-header h5 {
    font-size: 1rem !important;
    white-space: normal !important;
    line-height: 1.0;
    text-align: center;
  }

  /* Form input fields */
  #enquiryModal input.form-control {
    font-size: 0.7rem !important;
    padding: 8px 12px !important;
  }

  /* Buttons inside the form */
  #enquiryModal button.btn {
    font-size: 0.8rem !important;
    padding: 8px 14px !important;
  }

  /* Bottom call/whatsapp buttons */
  #enquiryModal .d-flex a.btn {
    font-size: 0.85rem !important;
    padding: 6px 10px !important;
    margin: 4px !important;
  }

  /* Footer close button */
  #enquiryModal .modal-footer .btn {
    font-size: 0.85rem !important;
    padding: 6px 14px !important;
  }

  /* Reduce overall padding inside popup */
  #enquiryModal .modal-body {
    padding: 16px 12px !important;
  }
}
/* ===================================
   🚀 FINAL CENTERED POPUP - NO SHIFT
   =================================== */
#enquiryModal {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6) !important;
  z-index: 9999 !important;
  overflow-y: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* Prevent scrollbar shift on body */
html,
body {
  width: 100% !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.modal-open {
  overflow: hidden !important;
  padding-right: 0 !important; /* No shift */
}

/* Keep modal perfectly centered */
#enquiryModal .modal-dialog {
  margin: 0 auto !important;
  transform: none !important;
  width: 95%;
  max-width: 600px;
}

/* Mobile sizing */
@media (max-width: 768px) {
  #enquiryModal .modal-content {
    width: 90vw !important;
    margin: auto;
  }
}


/* ============================================================
   📱 MOBILE OPTIMIZATION FOR AIRPORT PICK & DROP (3 per row)
   ============================================================ */
@media (max-width: 768px) {

  /* Section spacing */
  .airport-rates {
    padding: 25px 8px !important;
  }

  /* Three-column grid for mobile */
  .airport-rates .row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }

  /* Force cards to 31% width side-by-side */
  .airport-rates .row > div[class*="col"] {
    flex: 0 0 31% !important;
    max-width: 31% !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  /* Card appearance */
  .airport-rates .rate-card {
    width: 100% !important;
    padding: 8px 6px !important;
    text-align: center !important;
    border-radius: 8px !important;
    font-size: 0.75rem !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    background: #fff !important;
  }

  /* Card text */
  .airport-rates h5 {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
    margin-bottom: 3px !important;
    color: #0056d2 !important;
  }

  .airport-rates p {
    font-size: 0.7rem !important;
    margin-bottom: 0 !important;
  }

  /* Section heading */
  .airport-rates h2 {
    font-size: 1.2rem !important;
    margin-bottom: 8px !important;
  }

  .airport-rates .text-muted {
    font-size: 0.75rem !important;
  }

  /* View Full List Button */
  .airport-rates .modern-btn {
    font-size: 0.75rem !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
  }

  /* Modal adjustments */
  .custom-modal-content {
    width: 90% !important;
    height: 80vh !important;
    overflow-y: auto !important;
  }

  .custom-table th,
  .custom-table td {
    font-size: 0.8rem !important;
    padding: 6px !important;
  }

  .modal-footer-buttons .whatsapp-btn,
  .modal-footer-buttons .close-btn {
    font-size: 0.75rem !important;
    padding: 6px 8px !important;
  }
}
/* ============================================================
   📱 CLEANER COMPACT TEXT INSIDE 3-PER-ROW CARDS
   ============================================================ */
@media (max-width: 768px) {
  /* Airport Pick & Drop cards */
  .airport-rates .rate-card {
    padding: 6px 4px !important;
    font-size: 0.68rem !important;
    border-radius: 6px !important;
  }

  .airport-rates h5 {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    margin-bottom: 2px !important;
    line-height: 1.1 !important;
  }

  .airport-rates p {
    font-size: 0.65rem !important;
    color: #333 !important;
    line-height: 1.2 !important;
    margin-bottom: 0 !important;
  }

  /* Tighter section header */
  .airport-rates h2 {
    font-size: 1rem !important;
    margin-bottom: 5px !important;
  }

  .airport-rates .text-muted {
    font-size: 0.7rem !important;
    margin-bottom: 10px !important;
  }

  /* View Full List button smaller */
  .airport-rates .modern-btn {
    font-size: 0.7rem !important;
    padding: 5px 8px !important;
    border-radius: 4px !important;
  }
}


/* =====================================================
   📱 MOBILE OPTIMIZATION – Popular Himachal Tours (Compact)
   ===================================================== */
@media (max-width: 768px) {

  /* Section title & paragraph */
  #tours h2 {
    font-size: 1.1rem !important;
    margin-bottom: 6px !important;
  }

  #tours p {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
  }

  /* Two cards per row */
  #tours .col-md-6.col-lg-3 {
    flex: 0 0 48% !important;
    max-width: 48% !important;
    margin: 1% !important;
    padding: 0 !important;
  }

  /* Card style */
  #tours .card {
    border-radius: 10px !important;
    padding: 6px !important;
    text-align: center !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  }

  #tours .card img {
    height: 90px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    margin-bottom: 4px !important;
  }

  /* Titles smaller */
  #tours .card-title {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
    margin-bottom: 3px !important;
  }

  /* Paragraphs smaller */
  #tours .card-body p {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
    margin-bottom: 3px !important;
  }

  /* Buttons compact */
  #tours .btn {
    font-size: 0.65rem !important;
    padding: 3px 6px !important;
    border-radius: 14px !important;
  }

  #tours .btn i {
    font-size: 0.7rem !important;
    margin-right: 3px !important;
  }

  /* Reduce gap between buttons */
  #tours .d-flex.gap-2 {
    gap: 4px !important;
  }
}
/* =====================================================
   📱 FIX: Prevent overlap of section title & cards
   ===================================================== */
@media (max-width: 768px) {
  #tours {
    margin-top: 20px !important;
  }

  #tours h2 {
    font-size: 1.2rem !important;
    margin-bottom: 8px !important;
  }

  #tours > .container > p {
    font-size: 0.8rem !important;
    margin-bottom: 16px !important;
  }

  /* Give space before grid starts */
  #tours .row {
    margin-top: 10px !important;
  }
}

/* ==============================
   OUR FLEET — CLEAN RESPONSIVE FIX
   ============================== */

/* 🖥️ Desktop (default Bootstrap 3 per row) */
#fleet .row.g-4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* 📱 Mobile — exactly 2 per row */
@media (max-width: 768px) {
  #fleet .row.g-4 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  #fleet .col-md-4,
  #fleet .col-sm-6 {
    flex: 0 0 48%;
    max-width: 48%;
  }

  #fleet .vehicle-card {
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    font-size: 12px;
  }

  #fleet .vehicle-card img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 8px;
  }

  #fleet .price-bar {
    background: #ffc107;
    font-size: 13px;
    padding: 5px 0;
    border-radius: 6px;
    margin-bottom: 6px;
  }

  #fleet .vehicle-card ul {
    font-size: 11px;
    line-height: 1.3;
    text-align: left;
    margin-bottom: 6px;
  }

  #fleet .vehicle-card .btn {
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 20px;
  }

  /* Keep “View All” button below cards */
  #fleet .text-center.mt-5 {
    width: 100%;
    display: block;
    text-align: center;
    margin-top: 20px !important;
  }

  #fleet .text-center.mt-5 a {
    font-size: 13px;
    padding: 8px 20px;
    border-radius: 25px;
  }
}

/* 📱 Very small screens (single column) */
@media (max-width: 420px) {
  #fleet .col-md-4,
  #fleet .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* === Fix Our Fleet Layout on Mobile === */
@media (max-width: 768px) {
  #fleet .row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
  }

  #fleet .col-md-4,
  #fleet .col-sm-6 {
    flex: 0 0 48% !important;
    max-width: 48% !important;
    margin-bottom: 12px !important;
  }

  #fleet .vehicle-card {
    font-size: 12px !important;
    padding: 10px !important;
  }

  #fleet .vehicle-card img {
    width: 100% !important;
    height: auto !important;
  }

  #fleet .price-bar {
    font-size: 13px !important;
    padding: 4px 0 !important;
  }

  #fleet .vehicle-card ul {
    font-size: 12px !important;
    margin-bottom: 5px !important;
  }

  #fleet .vehicle-card .btn {
    font-size: 11px !important;
    padding: 6px 8px !important;
  }

  #fleet h2 {
    font-size: 20px !important;
  }

  #fleet p {
    font-size: 14px !important;
    margin-bottom: 20px !important;
  }
}

/* ✅ Force 3 equal columns centered only on desktop */
@media (min-width: 992px) {
  #fleet .container {
    max-width: 1400px !important; /* widen container for 3 cards */
  }

  #fleet .row {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 1.5rem !important; /* slightly smaller gap to fit all 3 */
  }

  #fleet .row > div[class*="col-"] {
    flex: 0 0 calc(33.333% - 1.5rem) !important;
    max-width: calc(33.333% - 1.5rem) !important;
  }

  #fleet .vehicle-card {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }
}


/* 📱 Mobile-only: Compact Explore section */
@media (max-width: 768px) {
  #explore {
    background-color: #0062cc !important; /* same light blue */
    padding: 30px 0 20px 0 !important; /* reduce top/bottom spacing */
  }

  #explore .container {
    background-color: #0062cc !important;
    padding: 0 !important;
  }

  #explore .btn {
    font-size: 0.85rem !important; /* smaller text */
    padding: 6px 16px !important;  /* smaller button */
    border-radius: 25px !important;
  }

  #explore .text-center {
    margin-top: 0 !important;
  }

  /* reduce overall height if section inside uses a carousel or image */
  #explore .carousel,
  #explore .carousel-inner,
  #explore img {
    max-height: 160px !important;
  }
}
/* 📱 Mobile-only: Compact About section */
@media (max-width: 768px) {
  #about {
    padding: 30px 0 !important; /* reduce top & bottom padding */
  }

  #about .container {
    padding: 0 15px !important;
  }

  #about h2 {
    font-size: 1.4rem !important; /* smaller heading */
    margin-bottom: 10px !important;
  }

  #about p {
    font-size: 0.9rem !important; /* smaller paragraph text */
    line-height: 1.4 !important;
    margin-bottom: 15px !important;
  }

  #about img {
    max-height: 180px !important; /* smaller image */
    object-fit: cover !important;
    border-radius: 10px !important;
  }

  #about .btn {
    font-size: 0.85rem !important; /* smaller button text */
    padding: 6px 16px !important;  /* smaller button size */
    border-radius: 25px !important;
  }
}

/* 📱 Mobile-only: Compact, Half-Height Footer */
@media (max-width: 768px) {
  footer {
    padding: 15px 0 !important;
  }

  footer .container {
    padding: 0 10px !important;
  }

  /* Headings smaller */
  footer h5,
  footer h4,
  footer h3 {
    font-size: 0.9rem !important;
    margin-bottom: 5px !important;
  }

  /* Paragraphs and links smaller and tighter */
  footer p,
  footer li,
  footer a {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
    margin-bottom: 3px !important;
  }

  /* Social icons smaller */
  footer .social-icons a {
    font-size: 0.9rem !important;
    margin: 0 4px !important;
  }

  /* Logo smaller */
  footer img {
    max-width: 60px !important;
    height: auto !important;
  }

  /* Each column spacing */
  footer .row > div {
    margin-bottom: 5px !important;
  }

  /* Reduce map size */
  footer iframe {
    height: 120px !important;
    border-radius: 6px;
  }

  /* WhatsApp button smaller */
  footer .btn,
  footer .btn-success {
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
    border-radius: 8px !important;
  }

  /* Copyright or bottom text smaller */
  footer small,
  footer .copyright {
    font-size: 0.65rem !important;
    margin-top: 5px !important;
  }
}
/* ==========================================
   📱 ABOUT PAGE NAVBAR OPTIMIZATION (MOBILE)
   ========================================== */
@media (max-width: 768px) {
  /* Reduce navbar padding */
  nav.navbar {
    padding: 6px 10px !important;
  }

  /* Make logo smaller and align better */
  nav.navbar .navbar-brand img {
    max-height: 30px !important; /* smaller logo height */
    width: auto !important;
    margin-right: 6px;
  }

  /* Make brand text smaller */
  nav.navbar .navbar-brand {
    font-size: 0.6rem !important;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap; /* prevent wrapping */
  }

  /* Fix spacing between logo and text */
  nav.navbar .d-flex.align-items-center {
    gap: 6px;
  }

  /* Toggler button adjustments */
  .navbar-toggler {
    padding: 4px 6px !important;
    font-size: 0.9rem;
  }

  /* Fix collapse background (optional) */
  .navbar-collapse {
    background-color: #020b35 !important;
    padding: 10px 0 !important;
  }

  /* Reduce menu font size in dropdown */
  .navbar-nav .nav-link {
    font-size: 0.85rem !important;
    padding: 6px 10px !important;
  }
}
/* ==========================================
   📱 ABOUT PAGE NAVBAR INLINE FIX (MOBILE)
   ========================================== */
@media (max-width: 768px) {
  /* Ensure brand and toggler are on one line */
  nav.navbar .container,
  nav.navbar .container-fluid {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }

  /* Adjust brand and toggler alignment */
  nav.navbar .navbar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  /* Smaller logo */
  nav.navbar .navbar-brand img {
    max-height: 30px !important;
    width: auto !important;
  }

  /* Smaller brand text */
  nav.navbar .navbar-brand span {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  /* Inline toggler (three lines) */
  .navbar-toggler {
    order: 2;
    margin-left: auto !important;
    padding: 4px 6px !important;
  }
}
/* ==========================================
   📱 ABOUT PAGE HERO OPTIMIZATION (MOBILE)
   ========================================== */
@media (max-width: 768px) {

  /* Make hero section shorter */
  .hero.about-hero {
    height: 25vh !important; /* only 25% of screen height */
    background-size: cover !important;
    background-position: center !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* Overlay fix (if used) */
  .hero.about-hero .overlay {
    background: rgba(0, 0, 0, 0.5);
  }

  /* Reduce About Us heading size */
  .hero.about-hero h1 {
    font-size: 1.4rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.3rem !important;
  }

  /* Reduce subheading text size */
  .hero.about-hero p.lead {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    margin: 0 auto;
    max-width: 90%;
  }
}
/* ==========================================
   📱 MANAGEMENT SECTION — 3 IN ONE ROW (MOBILE)
   ========================================== */
@media (max-width: 768px) {
  #team .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important; /* allows horizontal scroll */
    gap: 10px !important;
    justify-content: flex-start;
    scrollbar-width: none; /* hide scrollbar in Firefox */
  }

  #team .row::-webkit-scrollbar {
    display: none; /* hide scrollbar in Chrome/Safari */
  }

  #team .col-md-4 {
    flex: 0 0 80% !important; /* each card takes 80% of screen width */
    max-width: 80% !important;
  }

  /* Make card smaller and compact */
  #team .card {
    transform: scale(0.9);
    font-size: 0.85rem !important;
  }

  /* Reduce image size slightly */
  #team .card img {
    height: 180px !important;
    object-fit: cover;
  }

  /* Reduce text and spacing */
  #team .card-body h5 {
    font-size: 1rem !important;
    margin-bottom: 4px !important;
  }

  #team .card-body p {
    font-size: 0.8rem !important;
    margin-bottom: 3px !important;
  }

  /* Center section title and reduce space */
  #team h2 {
    font-size: 1.3rem !important;
    margin-bottom: 1rem !important;
  }

  #team {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
}
/* ==========================================
   📱 MANAGEMENT SECTION — FIX IMAGE CROPPING + FIT 3 CARDS
   ========================================== */
@media (max-width: 768px) {
  #team {
    overflow-x: auto; /* allow horizontal scroll if needed */
    overflow-y: hidden;
    white-space: nowrap;
    padding: 20px 5px;
  }

  #team h2 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    text-align: center;
  }

  /* Row behaves like a horizontal slider */
  #team .row {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: flex-start;
  }

  #team .col-md-4 {
    flex: 0 0 31%; /* fit three in one row */
    max-width: 31%;
  }

  /* Card styling */
  #team .card {
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }

  /* ✅ Keep full image visible (no crop) */
  #team .card img {
    width: 100%;
    height: auto;
    object-fit: contain !important;
    background-color: #fff;
    padding: 4px;
  }

  /* Text sizing */
  #team .card-body h5 {
    font-size: 0.85rem;
    margin-bottom: 3px;
  }

  #team .card-body p {
    font-size: 0.7rem;
    margin-bottom: 2px;
  }
}
/* ==========================================
   📱 OUR JOURNEY SECTION — MOBILE OPTIMIZATION
   ========================================== */
@media (max-width: 768px) {
  #our-journey {
    padding: 30px 15px !important;
    text-align: center;
  }

  #our-journey h2 {
    font-size: 1.2rem !important;
    margin-bottom: 8px !important;
  }

  #our-journey p {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
  }

  /* Reorder layout — text first, image after */
  #our-journey .row {
    flex-direction: column-reverse !important;
  }

  #our-journey .col-md-7,
  #our-journey .col-md-5 {
    width: 100% !important;
    padding: 0 !important;
  }

  /* Image styling */
  #our-journey img {
    width: 90% !important;
    max-width: 320px !important;
    height: auto !important;
    margin: 10px auto !important;
    display: block;
    border-radius: 10px;
  }

  /* Subheading (Driving comfort...) */
  #our-journey .text-muted {
    font-size: 0.9rem !important;
  }
}
/* ==========================================
   📱 OUR JOURNEY SECTION — CLEANER TEXT LAYOUT
   ========================================== */
@media (max-width: 768px) {
  #our-journey {
    padding: 25px 12px !important;
    text-align: center;
  }

  /* Title */
  #our-journey h2 {
    font-size: 1.2rem !important;
    margin-bottom: 6px !important;
  }

  /* Subtitle */
  #our-journey .text-muted {
    font-size: 0.85rem !important;
    margin-bottom: 12px !important;
  }

  /* Paragraph text — tighter spacing */
  #our-journey p {
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
  }

  /* Emphasized (green) paragraph */
  #our-journey .fw-semibold {
    font-size: 0.85rem !important;
    margin-top: 10px !important;
    color: #198754 !important; /* Bootstrap success green */
  }

  /* Adjust container for balanced look */
  #our-journey .container {
    max-width: 95% !important;
  }

  /* Ensure image stays well-centered above text */
  #our-journey img {
    display: block;
    margin: 0 auto 12px auto !important;
    width: 85% !important;
    height: auto !important;
    border-radius: 10px;
  }
}
/* 🌐 MOBILE NAVIGATION FIX (no change to desktop) */
@media (max-width: 768px) {
  /* Hamburger button fix */
  .navbar-toggler {
    background: none !important;
    border: none !important;
    outline: none !important;
  }

  .navbar-toggler-icon {
    width: 28px;
    height: 22px;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 6px;
  }

  .navbar-toggler-icon::before,
  .navbar-toggler-icon::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    height: 2px;
    background: white;
  }

  .navbar-toggler-icon::before {
    top: 6px;
  }

  .navbar-toggler-icon::after {
    bottom: 6px;
  }

  /* Mobile menu appearance */
  .navbar-collapse {
    position: absolute;
    top: 60px; /* just below the header */
    right: 0;
    width: 70%;
    background-color: #001f54; /* match header */
    padding: 20px;
    border-radius: 0 0 0 12px;
    text-align: left;
    z-index: 999;
    display: none;
  }

  .navbar-collapse.show {
    display: block !important;
  }

  .navbar-collapse a {
    display: block;
    color: white !important;
    font-weight: 600;
    padding: 10px 0;
    text-decoration: none;
  }

  .navbar-collapse a:hover {
    color: #ffcc00 !important;
  }
}
/* 🌙 MOBILE NAV MENU FIX */
@media (max-width: 768px) {
  /* Make the navbar-toggler (3 lines) visible */
  .navbar-toggler {
    background: transparent !important;
    border: none !important;
  }

  .navbar-toggler-icon {
    background-color: transparent !important;
    filter: invert(1); /* makes it visible on dark background */
  }

  /* Dropdown menu — dark blue box, partial width */
  .navbar-collapse {
    position: absolute;
    top: 60px; /* below header */
    right: 0;
    width: 60%; /* small panel */
    background-color: #001f54; /* same dark blue as header */
    border-radius: 0 0 0 10px;
    padding: 15px 20px;
    z-index: 9999;
  }

  /* Hide background overlay */
  .navbar-collapse.collapse {
    display: none !important;
  }

  .navbar-collapse.show {
    display: block !important;
  }
/* ✅ Desktop - show 3 boxes in a row */
@media (min-width: 992px) {
  #services .row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    flex-wrap: nowrap;
  }

  #services .col-md-4 {
    flex: 0 0 30%;
    max-width: 30%;
  }

  #services .service-card {
    height: 100%;
  }
}

/* 📱 Mobile - stacked with proper spacing */
@media (max-width: 991px) {
  #services .row {
    display: block;
  }

  #services .service-card {
    margin-bottom: 15px;
  }
}
/* ---------- FIX: Services 3-column layout on desktop ---------- */
@media (min-width: 992px) {
  #services .row {
    display: flex !important;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 20px;
  }

  #services .col-md-4 {
    flex: 0 0 30% !important;
    max-width: 30% !important;
  }

  #services .service-card {
    height: 100%;
  }
}

/* ---------- Mobile layout ---------- */
@media (max-width: 991px) {
  #services .row {
    display: block !important;
  }

  #services .col-md-4 {
    max-width: 100% !important;
  }

  #services .service-card {
    margin-bottom: 20px;
  }
}
/* 🌐 Mobile View Only */
@media (max-width: 768px) {
  /* Reduce heading size */
  #services h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  /* Make service section horizontal scroll */
  #services .row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding: 0 10px;
  }

  /* Make each card smaller and scrollable */
  #services .service-card {
    flex: 0 0 75%;
    max-width: 75%;
    scroll-snap-align: start;
    border-radius: 16px;
    padding: 1rem;
  }

  /* Reduce title and text size */
  #services .service-card h5 {
    font-size: 1rem;
  }

  #services .service-card p {
    font-size: 0.85rem;
  }

  /* Smaller button */
  #services .btn {
    font-size: 0.85rem;
    padding: 6px 12px;
  }
}
/* 🌐 Mobile View - Horizontal Scroll + Auto Slide */
@media (max-width: 768px) {
  #services .row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 10px;
  }

  #services .service-card {
    flex: 0 0 80%;
    max-width: 80%;
    scroll-snap-align: start;
    border-radius: 16px;
    transition: transform 0.4s ease;
  }

  /* Optional: small hover effect */
  #services .service-card:hover {
    transform: scale(1.03);
  }

  /* Hide scrollbar for clean look */
  #services .row::-webkit-scrollbar {
    display: none;
  }
}
/* =============================
   📱 Optimize "In Detail" Section (Mobile Only)
   ============================= */
@media (max-width: 768px) {

  /* Reduce extra padding inside each service card */
  #services .service-card {
    padding: 12px 10px !important;
    margin: 0 auto;
    min-height: auto;
    box-sizing: border-box;
  }

  /* Headings smaller for compact layout */
  #services h5 {
    font-size: 1rem !important;
    margin-bottom: 4px !important;
  }

  /* Sub-text ("in detail" section) */
  #services p {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    margin: 0 0 8px 0 !important;
    color: #f1f1f1; /* visible on dark bg */
    text-align: center;
    word-break: break-word;
  }

  /* Adjust button spacing */
  #services .btn {
    font-size: 0.8rem !important;
    padding: 5px 10px !important;
    margin-top: 4px !important;
  }

  /* Reduce top/bottom white space for the whole section */
  #services.services-section {
    padding-top: 20px !important;
    padding-bottom: 25px !important;
  }

  /* Ensure card content fits in view without overflow */
  #services .service-card {
    overflow: visible !important;
  }

  /* Make sure everything fits within one screen scroll area */
  #services .container {
    max-width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
}
/* ======================================================
   MOBILE: Ensure "In Detail" list/text is fully visible
   ====================================================== */
@media (max-width: 768px) {
  /* Target the container that holds the "in detail" list.
     Replace .in-detail-section with your actual selector if different. */
  .in-detail-section,
  #in-detail,
  .detail-list-wrapper,
  #services .service-card .detail {    /* extra fallback selectors */
    box-sizing: border-box !important;
    padding: 8px 10px !important;      /* reduce internal padding */
    margin: 0 !important;
  }

  /* Reduce heading and subtitle so they don't push the list out */
  .in-detail-section h3,
  .in-detail-section h2,
  #in-detail h3,
  #in-detail h2 {
    font-size: 1rem !important;
    margin: 6px 0 !important;
    line-height: 1.1 !important;
  }

  .in-detail-section p.lead,
  .in-detail-section .subtitle,
  #in-detail p.lead,
  #in-detail .subtitle {
    font-size: 0.85rem !important;
    margin: 4px 0 8px 0 !important;
    line-height: 1.15 !important;
  }

  /* Make the list area use the remaining viewport height and scroll internally */
  .in-detail-section .detail-list,
  .in-detail-section ul,
  #in-detail .detail-list,
  #in-detail ul,
  .detail-list-wrapper ul {
    font-size: 0.82rem !important;     /* slightly smaller list font */
    line-height: 1.18 !important;
    margin: 0 !important;
    padding-left: 18px !important;     /* keep bullet indent */
    max-height: calc(100vh -  (/* header height */ 64px) -  (/* other paddings */ 110px));
    /* Explanation: 64px header + ~110px for other fixed content (adjust if needed) */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
  }

  /* Tweak list items spacing to fit */
  .in-detail-section .detail-list li,
  #in-detail .detail-list li,
  .detail-list-wrapper ul li {
    margin-bottom: 6px !important;
    padding: 0 !important;
  }

  /* Buttons in the same area — make them compact */
  .in-detail-section .btn,
  #in-detail .btn,
  .detail-list-wrapper .btn {
    font-size: 0.82rem !important;
    padding: 6px 10px !important;
    margin-top: 8px !important;
  }

  /* If the list heading or extra nodes push things, hide extra whitespace */
  .in-detail-section .spacer,
  #in-detail .spacer {
    display: none !important;
  }
}
/* ================================
   📱 MOBILE FIX — In Detail Section
   ================================ */
@media (max-width: 768px) {

  /* Target your In Detail modal or section */
  #localToursModal .modal-dialog,
  #airportModal .modal-dialog,
  #longTourModal .modal-dialog {
    max-width: 95% !important; /* fit nicely on small screens */
    margin: 10px auto !important;
  }

  /* Make modal body take full available space */
  .modal-content {
    max-height: 85vh !important; /* use most of screen height */
    overflow-y: auto !important; /* scroll inside modal if needed */
    border-radius: 10px !important;
  }

  /* Reduce heading size */
  .modal-title {
    font-size: 1rem !important;
  }

  /* Reduce paragraph & list font size for better fit */
  .modal-body p,
  .modal-body ul li {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
  }

  /* Ensure list items are visible fully and scroll smoothly */
  .modal-body ul {
    max-height: 60vh !important;
    overflow-y: auto !important;
    padding-left: 18px !important;
    margin: 0 !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Shrink button at bottom of modal if exists */
  .modal-footer .btn {
    font-size: 0.8rem !important;
    padding: 6px 10px !important;
  }
}
/* ================================
   📱 MOBILE — Compact "In Detail" View
   ================================ */
@media (max-width: 768px) {
  #services {
    padding: 10px 0 !important;
  }

  #services h2 {
    font-size: 1.1rem !important;
    margin-bottom: 10px !important;
  }

  #services .card.service-card {
    padding: 6px !important;
    margin-bottom: 12px !important;
    border-radius: 8px !important;
  }

  #services .card h3 {
    font-size: 0.9rem !important;
    margin-bottom: 6px !important;
  }

  #services .card p {
    font-size: 0.7rem !important;
    margin-bottom: 6px !important;
    line-height: 1.2 !important;
  }

  #services .card h5 {
    font-size: 0.8rem !important;
    margin-top: 8px !important;
    margin-bottom: 4px !important;
  }

  /* Reduce table size drastically */
  #services .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #ccc;
  }

  #services table {
    font-size: 0.6rem !important;
    width: 600px !important; /* narrower for easier fit */
  }

  #services .table th,
  #services .table td {
    padding: 4px 6px !important;
    white-space: nowrap !important;
  }

  /* Reduce spacing between cards */
  #services .col-12 {
    margin-bottom: 10px !important;
  }

  /* Keep all content visible vertically */
  #services .container {
    max-height: 85vh !important;
    overflow-y: auto !important;
  }
}
/* 🧭 MOBILE OPTIMIZATION FOR MODALS */
@media (max-width: 768px) {
  .modal-dialog {
    max-width: 90% !important;
    margin: 0 auto;
  }

  .modal-content {
    transform: scale(0.85);
    transform-origin: top center;
    padding: 6px !important;
    border-radius: 12px !important;
  }

  .modal-header h5,
  .modal-title {
    font-size: 1rem !important;
  }

  .modal-body {
    font-size: 0.85rem !important;
    padding: 8px !important;
  }

  .table {
    font-size: 0.75rem !important;
  }

  .table th,
  .table td {
    padding: 4px !important;
  }

  .btn-close {
    transform: scale(0.8);
  }
}

/* 📱 Mobile optimization — show 2 fleet cards at once */
@media (max-width: 768px) {
  #fleet {
    padding: 10px 0 !important;
  }

  #fleet h2 {
    font-size: 1.1rem !important;
    margin-bottom: 10px !important;
  }

  /* Fleet Row — compact horizontal scroll */
  #fleet .row.g-4 {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 10px;
    padding: 0 10px;
  }

  /* Fleet Card — smaller so two fit on screen */
  #fleet .card {
    flex: 0 0 48%; /* ~2 per row */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s ease;
  }

  #fleet .card:hover {
    transform: scale(0.95);
  }

  /* Image smaller */
  #fleet .card img {
    height: 70px !important;
    object-fit: contain;
  }

  #fleet .card h5 {
    font-size: 0.85rem !important;
    margin-top: 5px !important;
  }

  #fleet .card p {
    font-size: 0.7rem !important;
    line-height: 1.1rem !important;
    margin-bottom: 8px !important;
  }

  /* Make section height smaller */
  #fleet {
    height: 28vh !important; /* about 25–30% of screen height */
  }
}


/* =============================
   MOBILE: Force 3 driver cards per row
   Only <=768px (desktop stays unchanged)
   ============================= */
@media (max-width: 768px) {
  /* Make the row use flex so we can control card widths tightly */
  .drivers-section .row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Force each bootstrap column to be 3-per-row */
  .drivers-section .row > .col-md-3,
  .drivers-section .row > [class*="col-"] {
    flex: 0 0 31% !important;    /* ~3 per row */
    max-width: 31% !important;
    box-sizing: border-box !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    margin-bottom: 6px !important;
  }

  /* Compact driver card styling */
  .drivers-section .driver-card {
    background: rgba(255,255,255,0.06) !important;
    padding: 6px !important;
    border-radius: 8px !important;
    text-align: center !important;
    color: #fff !important;
    box-shadow: none !important;
    min-height: 0 !important;
  }

  /* Image small & preserve aspect (no huge cropping) */
  .drivers-section .driver-card img {
    width: 100% !important;
    height: 72px !important;           /* adjust smaller or larger as needed */
    object-fit: cover !important;     /* use contain if you want no crop */
    border-radius: 6px !important;
    display: block;
    margin: 4px auto;
  }

  /* Tight text sizes */
  .drivers-section .driver-card h5 {
    font-size: 0.72rem !important;
    margin: 6px 0 2px !important;
    line-height: 1 !important;
  }
  .drivers-section .driver-card p {
    font-size: 0.62rem !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  /* Reduce top/bottom spacing for the whole section */
  .drivers-section {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Make sure the container doesn't add extra side padding */
  .drivers-section .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* If any element still creates extra height, ensure it stays compact */
  .drivers-section .row > .col-md-3 .driver-card {
    display: block;
  }
}
/* =============================
   DRIVERS SECTION — FINAL CLEAN VERSION
   ============================= */
@media (max-width: 768px) {

  /* Reduce heading spacing */
  .drivers-section h2 {
    margin-bottom: 10px !important;
  }

  /* Compact section padding */
  .drivers-section {
    padding-top: 10px !important;
    padding-bottom: 20px !important;
  }

  /* DRIVER BOXES */
  .drivers-section .driver-card {
    background: #FFD60A !important; /* bright yellow background */
    border-radius: 10px !important;
    padding: 6px 4px !important;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }

  /* Image styling */
  .drivers-section .driver-card img {
    width: 100%;
    height: 70px !important;
    object-fit: cover;
    border-radius: 6px !important;
    margin-bottom: 4px !important;
  }

  /* Name */
  .drivers-section .driver-card h5 {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    color: #003566 !important; /* dark blue text for contrast */
    margin: 2px 0 !important;
  }

  /* Other text */
  .drivers-section .driver-card p {
    font-size: 0.55rem !important;
    line-height: 1.1 !important;
    color: #003566 !important;
    margin: 0 !important;
  }

  /* Star line */
  .drivers-section .driver-card p:last-child {
    margin-top: 2px !important;
  }

  /* Reduce gap between boxes */
  .drivers-section .row.g-4 {
    row-gap: 10px !important;
  }
}
/* ✅ Fix overlapping layout and fleet height issues */
@media (max-width: 768px) {
  #fleet {
    position: relative;
    overflow: hidden;
    padding: 20px 0; /* ensures proper spacing above and below */
    height: auto !important; /* let it grow naturally */
  }

  #fleet .fleet-slider {
    display: flex;
    gap: 10px;
    justify-content: center;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 10px 0;
  }

  #fleet .fleet-card {
    flex: 0 0 42%; /* shows 2+ boxes at once */
    scroll-snap-align: center;
    transition: transform 0.3s ease;
  }

  /* smooth scaling effect */
  #fleet .fleet-card:hover {
    transform: scale(1.03);
  }

  /* restore normal stacking for other sections */
  #about,
  #gallery,
  #drivers {
    position: relative;
    margin-top: 20px;
    z-index: 1;
  }

  section {
    overflow: visible !important;
  }
}

/* ====== MOBILE VIEW ====== */
@media (max-width: 768px) {
  .navbar {
    padding: 0.3rem 0;
  }

  .navbar-brand img {
    width: 80px;
    height: auto;
    margin-right: 8px;
  }

  .navbar-brand {
    font-size: 1rem;
    color: #ffcc00 !important;
    text-shadow: 0 0 6px #ffcc00;
  }

  .navbar-toggler {
    border-color: #ffcc00;
  }

  .navbar-toggler-icon {
    background-color: #ffcc00;
    border-radius: 3px;
  }
}
/* =======================
   NAVBAR STYLING
======================= */
.navbar {
  background-color: #020b35 !important;
  padding: 0.4rem 0;
}

.navbar-brand .logo {
  width: 120px;
  height: auto;
  transition: all 0.3s ease;
}

.brand-text {
  color: #ffcc00;
  font-weight: 700;
  font-size: 1.4rem;
  transition: text-shadow 0.3s ease;
}

.brand-text:hover {
  text-shadow: 0 0 8px #ffcc00;
}

.navbar-nav .nav-link {
  color: white !important;
  margin-right: 20px;
  font-weight: 500;
}

.navbar-nav .nav-link:hover {
  color: #ffcc00 !important;
}

/* ===== MOBILE ADJUSTMENTS ===== */
@media (max-width: 768px) {
  .navbar {
    padding: 0.3rem 0;
  }

  .navbar-brand .logo {
    width: 8s0px;
  }

  .brand-text {
    font-size: 1rem;
    text-shadow: 0 0 6px #ffcc00;
  }

  .navbar-toggler {
    border-color: #ffcc00;
  }

  .navbar-toggler-icon {
    background-image: none;
    background-color: #ffcc00;
    width: 24px;
    height: 2px;
    position: relative;
  }

  .navbar-toggler-icon::before,
  .navbar-toggler-icon::after {
    content: "";
    background-color: #ffcc00;
    width: 24px;
    height: 2px;
    position: absolute;
    left: 0;
  }

  .navbar-toggler-icon::before {
    top: -6px;
  }

  .navbar-toggler-icon::after {
    top: 6px;
  }
}
<style>
/* Force override with !important */
.custom-navbar {
  background-color: #020b35 !important;
  padding: 0.3rem 0 !important;
}

/* ✅ Logo */
.custom-logo {
  width: 120px !important;
  height: auto !important;
  transition: all 0.3s ease;
}

/* ✅ Brand Text */
.custom-brand-text {
  color: #ffcc00 !important;
  font-weight: 700;
  font-size: 1.4rem !important;
  transition: text-shadow 0.3s ease;
}

.custom-brand-text:hover {
  text-shadow: 0 0 8px #ffcc00;
}

/* ✅ Navbar Links */
.navbar-nav .nav-link {
  color: white !important;
  margin-right: 20px;
  font-weight: 500;
}

.navbar-nav .nav-link:hover {
  color: #ffcc00 !important;
}

/* ✅ Mobile Adjustments */
@media (max-width: 768px) {
  .custom-logo {
    width: 70px !important;
  }

  .custom-brand-text {
    font-size: 1rem !important;
  }

  .custom-navbar {
    padding: 0.2rem 0 !important;
  }
}
</style>
/* 🌙 Unified Footer Style */
footer {
  background-color: #020b35; /* deep navy background */
  color: #fff;
  padding: 40px 0 20px;
  font-family: 'Poppins', sans-serif;
}

footer h5 {
  color: #FFD700;
  font-weight: 600;
  margin-bottom: 15px;
}

footer p,
footer a {
  color: #ddd;
  font-size: 15px;
  text-decoration: none;
}

footer a:hover {
  color: #FFD700;
  text-decoration: underline;
}

/* Social icons */
footer .social-icon {
  display: inline-block;
  background-color: #FFD700;
  color: #020b35;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  text-align: center;
  line-height: 32px;
  font-size: 16px;
  transition: all 0.3s ease;
}

footer .social-icon:hover {
  background-color: #fff;
  color: #020b35;
}

/* Horizontal divider */
footer hr {
  border-top: 1px solid #444;
  margin-top: 20px;
  margin-bottom: 10px;
}

/* Footer text center alignment for mobile */
@media (max-width: 768px) {
  footer .col-md-4 {
    text-align: center;
  }

  footer iframe {
    height: 250px;
  }

  footer .social-icon {
    margin: 5px;
  }
}
/* ✅ Compact Footer Styling */
footer.footer {
  background: #020b35;
  color: #ffffff;
  padding: 25px 0;
}

footer a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
}
footer a:hover {
  color: #ffcc00;
}

/* Social Icons */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #ffffff;
  color: #020b35;
  font-size: 16px;
  transition: all 0.3s ease;
}
.social-icon:hover {
  background: #25D366;
  color: #ffffff;
  transform: scale(1.1);
}

/* 📱 Mobile — tighter footer layout */
@media (max-width: 768px) {
  footer.footer {
    padding: 15px 0;
  }
  footer h6 {
    font-size: 1rem;
    margin-bottom: 6px;
  }
  footer p, footer a, footer li {
    font-size: 0.85rem;
  }
  .map-container iframe {
    height: 100px;
  }
}

/* ============================
   📱 Reduce Mobile Menu Size
   ============================ */
@media (max-width: 768px) {
  /* Make the mobile dropdown smaller */
  .offcanvas,
  .navbar-collapse {
    width: 75% !important;          /* make it narrower */
    max-height: 70vh !important;    /* only take 70% of the screen height */
    top: 60px !important;           /* start below navbar */
    border-radius: 0 0 16px 16px;   /* smooth rounded bottom corners */
    background-color: #020b35 !important; /* same dark background */
  }

  /* Inner links spacing */
  .offcanvas-body,
  .navbar-collapse ul {
    padding: 10px 16px !important;
  }

  /* Make nav links smaller and tidy */
  .navbar-nav .nav-link {
    font-size: 1rem !important;
    padding: 6px 0 !important;
    text-align: left !important;
  }

  /* Optional: shrink offcanvas header padding */
  .offcanvas-header {
    padding: 8px 12px !important;
  }
}
/* ===============================
   📱 CONTACT PAGE MOBILE HEADER FIX
   =============================== */

/* Hide desktop header on mobile */
@media (max-width:768px){
  .page-header { display:none !important; }
}

/* Mobile header */
@media (max-width:768px){
  .contact-header-mobile {
    background: linear-gradient(rgba(0,11,53,0.75), rgba(0,11,53,0.75)),
                url('images/ourfleetbg.jpg') center center/cover no-repeat;
    color: #ffcc00;
    text-align: center;
    padding: 100px 20px 80px;
    position: relative;
    border-bottom: 5px solid #ffcc00;
  }

  .contact-header-mobile h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
  }

  .contact-header-mobile p {
    color: #fff;
    font-size: 1rem;
    opacity: 0.9;
  }
}

/* Hide this header on tablet+desktop */
@media (min-width:769px){
  .contact-header-mobile { display: none !important; }
}
/* Ensure hamburger is clickable */
.navbar-toggler {
  z-index: 2000 !important;
  position: relative !important;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 6px 8px;
}

/* Reduce offcanvas menu coverage */
@media (max-width: 768px) {
  .offcanvas,
  .navbar-collapse {
    width: 75% !important;
    max-height: 70vh !important;
    top: 60px !important;
    border-radius: 0 0 16px 16px;
    background-color: #020b35 !important;
  }
}
/* ================================
   📱 CONTACT PAGE HEADER FIX
   ================================ */

/* General navbar tweaks */
.navbar {
  background-color: #020b35 !important;
  padding: 6px 0 !important;
  z-index: 1050 !important;
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
}

/* Logo & brand text sizing */
.navbar-brand img {
  width: 100px !important;
  height: auto !important;
}

.navbar-brand {
  font-size: 1rem !important;
  font-weight: 700;
  color: #ffcc00 !important;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Navbar links */
.navbar-nav .nav-link {
  color: white !important;
  font-weight: 500;
  margin-right: 12px;
}

.navbar-nav .nav-link:hover {
  color: #ffcc00 !important;
}

/* Make sure the hamburger button works */
.navbar-toggler {
  z-index: 2000 !important;
  position: relative;
  border: none;
  outline: none;
}

/* Body offset for fixed navbar */
body {
  padding-top: 70px !important;
}


/* ===========================
   HEADER FIX — CONTACT PAGE
   =========================== */

/* Navbar styling */
.navbar {
  background-color: #020b35 !important;
  padding: 6px 0 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  z-index: 1000;
}

/* Brand text */
.navbar .brand-text {
  color: #ffcc00 !important;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
}

/* Nav links */
.navbar-nav .nav-link {
  color: white !important;
  font-weight: 500;
  margin-right: 15px;
  font-size: 1rem;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: #ffcc00 !important;
}

/* Adjust for fixed header */
body {
  padding-top: 85px !important;
}

/* ===========================
   MOBILE RESPONSIVE
   =========================== */
@media (max-width: 768px) {

  .navbar {
    padding: 4px 5px !important;
  }

  .navbar-brand img {
    width: 60px !important;
    height: auto !important;
  }

  .navbar .brand-text {
    font-size: 0.8rem !important;
    max-width: 140px;
  }

  .navbar-nav .nav-link {
    font-size: 0.9rem !important;
    padding: 6px 0;
  }

  body {
    padding-top: 65px !important;
  }
}

/* For mobile screens */
@media (max-width: 768px) {
  .navbar .navbar-brand {
    font-size: 0.85rem !important;
  }

  .navbar img {
    width: 90px !important;
    height: auto !important;
  }

  .navbar {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
}

/* ============================
   HEADER FIX — Contact Page
   ============================ */
.navbar {
  background-color: #020b35 !important;
  padding: 6px 0 !important;
}

.navbar .navbar-brand img {
  width: 90px !important;
  height: auto !important;
}

.navbar .brand-text {
  font-size: 1rem !important;     /* smaller text */
  font-weight: 600 !important;
  color: #ffcc00 !important;
  line-height: 1 !important;
}

/* 📱 Mobile header tweaks */
@media (max-width: 768px) {
  .navbar {
    padding: 4px 0 !important;
  }

  .navbar .navbar-brand img {
    width: 65px !important;
  }

  .navbar .brand-text {
    font-size: 0.75rem !important;  /* shrink more for mobile */
    line-height: 1 !important;
  }
}
/* ============================
   REDUCE SIZE — Get in Touch Section
   ============================ */
.contact-section {
  padding: 40px 0 !important; /* reduce vertical spacing */
  background: linear-gradient(to right, #004aad, #ffcc00);
}

.contact-section h2 {
  font-size: 1.5rem !important; /* smaller heading */
  margin-bottom: 10px !important;
}

.contact-section p {
  font-size: 0.9rem !important; /* smaller subtext */
  margin-bottom: 25px !important;
}

.contact-card {
  padding: 20px !important;  /* reduce inner padding */
  border-radius: 10px !important;
}

.contact-card h4 {
  font-size: 1.1rem !important;
  margin-bottom: 15px !important;
}

/* 📱 Mobile tweak */
@media (max-width: 768px) {
  .contact-section {
    padding: 25px 0 !important;
  }

  .contact-section h2 {
    font-size: 1.2rem !important;
  }

  .contact-card {
    padding: 15px !important;
  }

  .contact-card h4 {
    font-size: 1rem !important;
  }

  .contact-section p,
  .contact-card p,
  .form-control {
    font-size: 0.85rem !important;
  }
}
/* ==============================
   Compact Contact Info & Message Cards
   ============================== */
.contact-card {
  padding: 15px 18px !important; /* reduce inner spacing */
  border-radius: 10px !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.contact-card h4 {
  font-size: 1rem !important; /* smaller titles */
  margin-bottom: 10px !important;
}

.contact-info i {
  font-size: 1.2rem !important; /* smaller icons */
  margin-right: 10px !important;
}

.contact-info p {
  font-size: 0.85rem !important; /* smaller text */
  line-height: 1.3 !important;
}

.contact-info small {
  font-size: 0.75rem !important;
}

.form-control {
  font-size: 0.85rem !important;
  padding: 6px 10px !important; /* compact inputs */
}

.btn-custom {
  padding: 6px 15px !important; /* smaller button */
  font-size: 0.85rem !important;
  border-radius: 8px !important;
}

/* 📱 Mobile view adjustments */
@media (max-width: 768px) {
  .contact-card {
    padding: 12px !important;
  }

  .contact-card h4 {
    font-size: 0.95rem !important;
  }

  .contact-info p,
  .form-control {
    font-size: 0.8rem !important;
  }

  .btn-custom {
    font-size: 0.8rem !important;
    padding: 5px 12px !important;
  }
}
/* 📱 MOBILE VIEW OPTIMIZATION FOR INSTAGRAM SECTION */
@media (max-width: 768px) {
  #instagram-profile {
    height: 50vh !important; /* occupy half of the mobile screen height */
    overflow-y: auto !important; /* scroll if needed */
    padding: 10px 0 !important;
  }

  #instagram-profile .container {
    max-width: 95% !important;
  }

  /* Reduce text and button size */
  #instagram-profile h2,
  #instagram-profile .username,
  #instagram-profile .bio,
  #instagram-profile .bio-text,
  #instagram-profile .stats {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
  }

  #instagram-profile .btn,
  #instagram-profile .btn-follow {
    font-size: 0.7rem !important;
    padding: 4px 10px !important;
  }


@media (max-width: 768px) {
  nav.navbar .navbar-brand img {
    display: none !important;
  }
}
@media (max-width: 768px) {
  img[src*="images/logoinsta.jpg"] {
    display: none !important;
  }

  /* Optional: center the text when logo is hidden */
  .navbar-brand {
    justify-content: center !important;
  }
}