/* Mobile first - booking form appears right after hero on mobile */
@media (max-width: 768px) {
  /* Reorder sections on mobile using flex */
  .mobile-first-form {
    order: -1;
  }

  /* Hero adjustments */
  .hero-text { padding: 0 0 20px; }
  .hero-badge { font-size: 12px; }

  /* Booking form mobile */
  .booking-section { padding: 30px 0; }
  .booking-section h2 { font-size: 26px; }
  .tab-btn { font-size: 13px; }

  /* Route cards mobile */
  .routes-grid { grid-template-columns: 1fr 1fr; }

  /* Contact form mobile - show form first then info */
  .contact-form-content { 
    grid-template-columns: 1fr;
    flex-direction: column-reverse;
  }
  .contact-form-side { 
    border-radius: 16px 16px 0 0;
    order: 1;
  }
  .contact-info-side { 
    order: 2;
    padding: 30px 24px;
  }

  /* Car cards */
  .cars-grid { grid-template-columns: 1fr; }
  
  /* Route detail page */
  .route-detail > .container > div { grid-template-columns: 1fr!important; }
  
  /* Footer */
  .footer-grid { grid-template-columns: 1fr!important; gap: 28px; }
  
  /* About stats */
  .about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  
  /* Why grid mobile */
  .why-grid { grid-template-columns: 1fr 1fr; }
  
  /* Hero slider mobile img */
  .hero-slide:nth-child(1) { background-position: center center; }
  
  /* Service cards mobile */
  .service-cards { grid-template-columns: 1fr; }
  
  /* Page hero */
  .page-hero { padding: 50px 0 40px; }
  .page-hero h1 { font-size: 32px; }
  
  /* Fare table scroll */
  .fare-table { font-size: 13px; }
  .fare-table th, .fare-table td { padding: 10px 12px; }

  /* Testi grid mobile */
  .testi-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .routes-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: 1fr 1fr; }
  .nav-call-btn { display: none!important; }
}