/* Mobile Performance Optimizations */

/* Video optimizations for mobile */
@media (max-width: 768px) {
  /* Optimize video for mobile performance */
  .hero-video-container video {
    display: block;
    /* Ensure proper video sizing on mobile */
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Enable hardware acceleration for smoother playback */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
  
  .hero-video-container {
    /* Keep background image as fallback */
    background-image: url('../images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    /* Ensure container is properly sized */
    position: relative;
    overflow: hidden;
  }
  
  /* Mobile-specific video optimizations */
  #hero-video {
    /* Ensure video doesn't cause layout issues on mobile */
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%) translateZ(0);
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0);
    object-fit: cover;
    /* Optimize for mobile performance */
    will-change: auto;
    /* Ensure video plays inline on iOS */
    -webkit-playsinline: true;
  }
  
  /* Reduce image sizes on mobile */
  .children-teens .about-image img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }
  
  /* Optimize testimonial avatars */
  .testimonial-avatar img {
    width: 60px;
    height: 60px;
  }
  
  /* Reduce logo sizes */
  .about-logo img {
    max-width: 200px;
  }
  
  .footer-logo img {
    height: 100px;
  }
}

/* Lazy loading styles */
.lazy-load {
  opacity: 0;
  transition: opacity 0.3s;
}

.lazy-load.loaded {
  opacity: 1;
}

/* Reduce animations on mobile for better performance */
@media (max-width: 768px) {
  .modality-item:hover,
  .testimonial-card:hover,
  .btn:hover {
    transform: none;
  }
  
  /* Keep smooth scrolling for navigation but optimize performance */
  @media (max-width: 480px) {
    html {
      scroll-behavior: smooth;
    }
  }
}

/* Critical CSS for above-the-fold content - maintain consistency with desktop */
@media (max-width: 768px) {
  .hero {
    height: 100vh; /* Keep same height as desktop for consistency */
    min-height: 600px; /* Maintain minimum height */
    /* Ensure proper positioning for overlay content */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  
  /* Ensure video container stays in background */
  .hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Keep video behind content */
  }
  
  /* Ensure overlay stays above video */
  .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 0; /* Above video but below content */
  }
  
  /* Ensure hero content is properly positioned above video */
  .hero-content {
    position: relative;
    z-index: 1; /* Above overlay and video */
    max-width: 90%; /* Allow more width on mobile */
    padding: 0 15px;
    color: white; /* Ensure text is visible over video */
  }
  
  /* Adjust text sizes for mobile readability while keeping proportions */
  .hero-title {
    font-size: 2.2rem; /* Slightly smaller than desktop but still prominent */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Ensure readability over video */
  }
  
  .hero-subtitle {
    font-size: 1.2rem; /* Maintain good readability */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Ensure readability over video */
  }
  
  /* Optimize button layout for mobile */
  .hero-buttons {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }
  
  .hero-buttons .btn {
    width: 100%;
    max-width: 280px; /* Prevent buttons from being too wide */
  }
}

@media (max-width: 576px) {
  .hero {
    height: 100vh; /* Still maintain full height on small screens */
    min-height: 500px; /* Slightly smaller minimum for very small screens */
  }
  
  .hero-title {
    font-size: 1.8rem; /* Adjust for very small screens */
  }
  
  .hero-subtitle {
    font-size: 1rem;
  }
}

/* Optimize form performance on mobile */
@media (max-width: 768px) {
  .form-control {
    font-size: 16px; /* Prevent zoom on iOS */
  }
}

/* Reduce memory usage */
@media (max-width: 768px) {
  .section {
    padding: 20px 0;
  }
  
  .container {
    padding: 0 10px;
  }
}