/* Responsive CSS for Basical Demand website */

/* Mobile First Approach */
@media (max-width: 576px) {
  /* Fix for oversized header on mobile */
  .site-header {
    padding: 0 !important;
    min-height: auto !important;
  }
  
  /* Reduce logo size dramatically for mobile */
  .logo-container {
    padding: 2px !important;
  }
  
  .logo-container img {
    height: 50px !important;
    max-width: 90px !important;
  }
  
  /* Make nav items smaller */
  .nav-link {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.9rem !important;
  }
  
  /* Make Apply Now button smaller */
  .nav-item .btn {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.9rem !important;
  }
  
  /* Make language selector smaller */
  .language-selector {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .language-selector .btn {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.8rem !important;
  }
  
  /* Mobile header spacing is handled by dynamic-header.js */
  
  /* Remove all extra spacing from sections on mobile */
  section {
    padding-top: 0px !important;
  }
  
  /* Adjust spacing after header */
  .hero-section {
    text-align: center;
    margin-top: 0px !important;
    padding-top: 10px !important;
  }
  
  /* Featured cars section */
  .featured-cars-section {
    margin-top: 0 !important;
    padding-top: 1rem !important;
  }
  
  /* Why choose section */
  .why-choose-section {
    margin-top: 0 !important;
    padding-top: 1rem !important;
  }
  
  /* Testimonials section */
  .testimonials-section {
    margin-top: 0 !important;
    padding-top: 1rem !important;
  }
  
  /* CTA section */
  .cta-section {
    margin-top: 0 !important;
    padding-top: 1rem !important;
  }
  
  /* Smaller hero title on mobile */
  .hero-title {
    font-size: 1.8rem;
  }
  
  /* Smaller page headers on mobile - no extra margin */
  .page-header {
    padding: 5px 0 !important;
    margin-top: 0 !important;
  }
  
  .page-title {
    font-size: 1.5rem !important;
    margin-bottom: 0 !important;
  }
  
  .page-subtitle {
    font-size: 0.9rem !important;
    margin-top: 0 !important;
  }
  
  /* Stack buttons for better mobile layout */
  .hero-buttons {
    flex-direction: column;
    gap: 1rem;
    margin-top: 20px;
    padding: 0 15px;
  }
  
  .hero-buttons .btn {
    width: 100%;
    margin: 0 !important;
    display: block !important;
  }
  
  /* Add space between image and buttons - same as button gap */
  .hero-image {
    margin-bottom: 1rem;
    margin-top: 1rem;
  }
  
  /* Ensure the image column has proper spacing on mobile */
  .col-lg-6:has(.hero-image),
  .col-lg-6 .hero-image {
    margin-top: 1rem !important;
  }
  
  /* Reduce spacing between hero section and next section on mobile */
  .hero-section {
    margin-bottom: 0.5rem !important;
    padding-bottom: 0 !important;
  }
  
  /* Reduce top spacing of deals section on mobile */
  .deals-section,
  .cars-section,
  section:not(.hero-section) {
    margin-top: 0 !important;
    padding-top: 0.5rem !important;
  }
  
  /* Add spacing between CTA sections and footer on mobile */
  .faq-cta,
  .text-center.mt-5,
  section:last-of-type {
    margin-bottom: 1rem !important;
    padding-bottom: 1rem !important;
  }
  
  /* Reduce spacing between page header and FAQ content on mobile */
  .page-header {
    margin-bottom: 0.5rem !important;
    padding-bottom: 0rem !important;
  }
  
  .faq-section {
    padding-top: 0rem !important;
    margin-top: 0rem !important;
  }
  
  /* Target the specific FAQ page elements */
  .faq-section .container {
    padding-top: 0rem !important;
  }
  
  .faq-filter {
    margin-bottom: 1rem !important;
  }
  
  /* Ensure buttons are properly aligned */
  .hero-buttons a {
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Other mobile adjustments */
  .feature-box {
    margin-bottom: 2rem;
  }
  
  .testimonial-card {
    margin-bottom: 1.5rem;
  }
  
  .navbar-nav {
    text-align: center;
  }
  
  .language-selector {
    justify-content: center;
    margin: 1rem 0;
  }
  
  /* Make car cards more mobile-friendly */
  .car-card {
    margin-bottom: 20px;
  }
  
  /* Improve tap targets for mobile */
  .car-card a.btn {
    padding: 12px;
    display: block;
    text-align: center;
    margin-top: 10px;
  }
}

/* Tablet */
@media (min-width: 577px) and (max-width: 768px) {
  .hero-title {
    font-size: 2.2rem;
  }
  
  .feature-box {
    margin-bottom: 1.5rem;
  }
}

/* Desktop */
@media (min-width: 769px) {
  .hero-section {
    min-height: 70vh;
    display: flex;
    align-items: center;
  }
  
  .hero-buttons {
    display: flex;
    gap: 1rem;
  }
}

/* Large Desktop */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
  
  .hero-title {
    font-size: 3rem;
  }
}