/* =========================================================
   MOBILE SMOOTHNESS & PERFORMANCE OPTIMIZATIONS
   ========================================================= */

/* 1. Prevent Horizontal Screen Wobble & Stutter */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  -webkit-overflow-scrolling: touch; /* Smooth momentum scrolling for iOS */
  text-rendering: optimizeLegibility;
}

/* 2. Hardware Acceleration for Smooth Scrolling */
* {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* 3. Ensure Images Load Fluidly Without Layout Shifts */
img {
  max-width: 100% !important;
  height: auto !important;
  content-visibility: auto; /* Browsers skip rendering offscreen images until scrolled into view */
}

/* 4. Mobile Screen Adjustments (Phones under 768px) */
@media (max-width: 768px) {
  /* Remove heavy box-shadows on mobile to free up GPU/RAM */
  .shadow, 
  .shadow-sm, 
  .shadow-lg {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
  }

  /* Prevent text reflow lag by optimizing large Bootstrap font sizes */
  h1.display-5 {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }

  h2.section-title {
    font-size: 1.5rem !important;
  }

  .fs-3 {
    font-size: 1.15rem !important;
  }

  .fs-4 {
    font-size: 1rem !important;
  }

  /* Faster Mobile Navigation Collapse */
  .navbar-collapse {
    transition: height 0.2s ease-in-out !important;
  }

  /* Optimize padding for mobile touch targets */
  .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}