/* Mobile Fixes for Professional Experience */



@media (max-width: 768px) {

  /* Better spacing between sections */

  section {

    padding: 2rem 0;

    margin-bottom: 1rem;

  }

  

  /* Improved text sizes and vertical rhythm */

  .section-title {

    font-size: 1.75rem;

    margin-bottom: 1.5rem;

  }

  

  p {

    font-size: 1rem;

    line-height: 1.6;

  }

  

  /* Enhanced hero section */

  .hero-section {

    min-height: 550px;

    padding-bottom: 120px; /* Increased space for sticky button */

  }

  

  .hero-content {

    padding: 1rem;

    margin-bottom: 2rem;

    display: flex;

    flex-direction: column;

    height: 100%;

  }

  

  .hero-title {

    font-size: clamp(1.5rem, 5vw, 2.2rem);

    margin-bottom: 1.25rem;

  }

  

  .hero-subtitle {

    font-size: clamp(0.9rem, 4vw, 1.1rem);

  }

  

  .hero-cta-buttons {

    margin: 1.5rem 0;

  }

  

  .hero-cta-buttons a {

    padding: 0.875rem 1.5rem;

    font-size: 1rem;

  }

  

  /* Hero Feature Items Fixes */

  .hero-features {

    margin: 2rem 0;

    gap: 1.5rem;

  }

  

  .feature-item {

    padding: 0.75rem 1.25rem;

    border-radius: 25px;

    background-color: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.2);

    backdrop-filter: blur(5px);

    -webkit-backdrop-filter: blur(5px);

  }

  

  /* Video controls - prevent overlap */

  .video-controls {

    position: fixed;

    bottom: 160px; /* Well above sticky button */

    right: 20px;

    z-index: 95; /* Below sticky button */

  }

  

  .video-btn {

    width: 44px;

    height: 44px;

  }


  /* Service cards improvements */

  .services-grid {

    gap: 1.25rem;

  }

  

  .service-card {

    padding: 1.5rem;

  }

  

  /* Better vehicle selection grid */

  .vehicle-grid {

    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));

    gap: 1rem;

  }

  

  /* Form improvements */

  .form-grid {

    grid-template-columns: 1fr;

  }

  

  input, select, textarea {

    font-size: 16px; /* Prevent iOS zoom */

    padding: 0.875rem;

  }

  

  /* Sticky booking button */

  .sticky-book-button {

    position: fixed !important;

    bottom: 0 !important;

    left: 0 !important;

    right: 0 !important;

    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%) !important;

    color: white !important;

    padding: 1rem 1.5rem !important;

    text-align: center !important;

    font-weight: 600 !important;

    box-shadow: 0 -4px 20px rgba(0,0,0,0.25) !important;

    z-index: 999 !important; /* Highest z-index */

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 0.5rem !important;

    font-size: 1rem !important;

    min-height: 60px !important;

    text-decoration: none !important;

    border: none !important;

    outline: none !important;

  }

  

  /* Adjust floating social position */

  .floating-social {

    bottom: 80px !important; /* Well above sticky button */

    right: 1rem !important;

    flex-direction: column;

    gap: 0.75rem;

    z-index: 98 !important; /* Below sticky button */

  }

  

  .floating-social a {

    width: 2.5rem;

    height: 2.5rem;

    background-color: white;

    border-radius: 50%;

    box-shadow: 0 2px 10px rgba(0,0,0,0.15);

    display: flex;

    align-items: center;

    justify-content: center;

  }

  

  .floating-social a img {

    width: 1.5rem;

    height: 1.5rem;

  }

  

  /* Reviews section improvements */

  .reviews-header {

    flex-direction: column;

    align-items: flex-start;

    gap: 1rem;

  }

  

  .reviews-overview {

    flex-direction: column;

    gap: 1.5rem;

  }

  

  .rating-summary, .rating-breakdown {

    width: 100%;

  }

  

  /* Footer improvements */

  .footer-container {

    flex-direction: column;

    gap: 2rem;

  }

  

  .footer-section {

    width: 100%;

  }

  

  /* Smooth scrolling */

  html {

    scroll-behavior: smooth;

  }

  

  body {

    -webkit-overflow-scrolling: touch;

    padding-bottom: 80px !important; /* Essential space for sticky button */

  }

}



/* Additional fixes for smaller phones */

@media (max-width: 480px) {

  .hero-section {

    padding-bottom: 140px; /* Even more space at the bottom */

  }

  

  .hero-content {

    padding-bottom: 5rem;

  }

  

  /* Specifically target feature buttons to prevent overlap */

  .hero-features {

    gap: 1.25rem; /* Even more space between items */

  }

  

  .feature-item {

    margin-bottom: 1rem;

    min-height: 44px; /* Ensure touchable size */

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50px;

    background-color: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.2);

    backdrop-filter: blur(5px);

    -webkit-backdrop-filter: blur(5px);

  }

  

  .feature-item i {

    margin-right: 0.5rem;

    font-size: 1rem;

  }

  

  .feature-item span {

    font-size: 0.95rem;

  }

  

  /* Ensure sticky booking button is properly displayed */

  .sticky-book-button {

    padding: 0.95rem 1.25rem !important;

    font-size: 0.95rem !important;

    min-height: 58px !important;

  }

  

  /* Fix floating social position on small screens */

  .floating-social {

    bottom: 75px !important;

    right: 0.75rem !important;

    gap: 0.5rem;

  }

  

  /* Video button adjustments */

  .video-controls {

    bottom: 150px !important;

  }

  

  .video-btn {

    width: 40px;

    height: 40px;

  }

}



/* Very small devices fixes */

@media (max-width: 360px) {

  .hero-section {

    padding-bottom: 160px; /* Maximum space to prevent any overlap */

  }

  

  .hero-features {

    margin-top: 2.5rem;

    gap: 1.5rem;

  }

  

  .feature-item {

    padding: 0.625rem 0.875rem;

    margin-bottom: 1.25rem;

  }

  

  /* Simpler layout for the smallest screens */

  .feature-item i {

    font-size: 0.9rem;

  }

  

  .feature-item span {

    font-size: 0.9rem;

  }

  

  /* Optimized sticky button for very small screens */

  .sticky-book-button {

    padding: 0.9rem 1rem !important;

    font-size: 0.9rem !important;

    min-height: 56px !important;

  }

  

  /* Floating social adjustments for tiny screens */

  .floating-social {

    bottom: 70px !important;

    right: 0.5rem !important;

  }

  

  /* Video controls for tiny screens */

  .video-controls {

    bottom: 140px !important;

    right: 15px;

  }

  

  .video-btn {

    width: 36px;

    height: 36px;

  }

  

  /* Fix spacing in sections */

  section {

    padding: 2.5rem 0;

  }

  

  .section-title {

    font-size: 1.5rem;

  }

}