/* Mobile Optimized Performance CSS */
/* This file should be loaded after main CSS to override heavy properties on mobile */

@media (max-width: 768px) {
  /* Reduce animations on mobile */
  * {
    animation-duration: 0.2s !important;
    transition-duration: 0.15s !important;
  }

  /* Disable expensive animations */
  .category-card,
  .stat,
  .education-item,
  .feature-box,
  .testimonial,
  .expertise-category {
    animation: none !important;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out !important;
  }

  /* Reduce shadow depth on mobile for better performance */
  .card,
  .modal-content,
  .category-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  }

  /* Optimize font sizes for mobile readability */
  html {
    font-size: 13px;
  }

  h1 {
    font-size: 24px !important;
  }

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

  h3 {
    font-size: 18px !important;
  }

  h4 {
    font-size: 16px !important;
  }

  h5 {
    font-size: 14px !important;
  }

  /* Optimize form elements for touch */
  input,
  textarea,
  select {
    min-height: 44px;
    font-size: 16px !important;
    padding: 12px 10px !important;
  }

  button {
    min-height: 44px;
    min-width: 44px;
  }

  /* Optimize images for mobile */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Reduce padding and margins on mobile */
  .container {
    padding: 0 12px !important;
  }

  .hero-section,
  .why_choose_us,
  .services-preview {
    padding: 2rem 0 !important;
  }

  /* Optimize modal for mobile */
  .modal {
    padding: 12px !important;
  }

  .modal-content {
    width: 95vw !important;
    max-height: 90vh !important;
    border-radius: 12px !important;
  }

  .modal-body {
    max-height: calc(90vh - 120px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }

  /* Optimize button sizes for touch */
  .cta-button,
  .cta-buttons-ungal,
  .cta-button-modal {
            min-height: 30px;
        font-size: 10px !important;
        padding: 3px 14px !important;
  }

  /* Reduce gap between elements */
  .row {
    --bs-gutter-x: 0.75rem !important;
    --bs-gutter-y: 0.75rem !important;
  }

  /* Optimize service cards for mobile */
  .category-card {
    margin-bottom: 12px !important;
  }

  /* Reduce border radius on low-end devices for performance */
  body {
    border-radius: 0;
  }

  /* GPU acceleration for better scrolling */
  .category-card,
  .modal,
  .modal-content {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: auto;
  }

  /* Optimize scroll performance */
  html {
    scroll-behavior: auto !important; /* Disable smooth scroll on mobile for better perf */
  }

  /* Text rendering optimization */
  body {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeSpeed;
  }

  /* Prevent layout shifts */
  input:focus,
  textarea:focus,
  select:focus {
    outline: 2px solid #1fb8cd;
    outline-offset: 2px;
  }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* High DPI optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Use lighter text rendering on high DPI devices */
  body {
    -webkit-font-smoothing: subpixel-antialiased;
  }
}

/* Battery saver mode */
/*@media (prefers-color-scheme: dark) {*/
  /* Reduce brightness on dark mode for battery saving */
/*  body {*/
/*    background-color: #0d0d0d;*/
/*  }*/
/*}*/

/* Optimize for slow networks */
@media (prefers-reduced-data: reduce) {
  img,
  video {
    display: none;
  }

  .category-card::before,
  .category-card::after {
    display: none !important;
  }
}