/* Additional responsive fixes */
html {
    max-width: 100%;
    overflow-x: hidden;
  }
  
  body {
    max-width: 100%;
    overflow-x: hidden;
    /* Remove any fixed positioning that prevents scrolling */
    position: relative;
    overflow-y: auto;
    height: auto;
  }
  
  /* Fix for iOS Safari - MODIFIED to allow scrolling */
  @supports (-webkit-touch-callout: none) {
    body {
      /* The hack for Safari */
      width: 100%;
      /* REMOVED position: fixed which was preventing scrolling */
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
  }
  
  /* Fix for contact section on mobile */
  @media (max-width: 768px) {
    .contact-section-wrapper {
      width: 100vw;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      padding-left: 20px;
      padding-right: 20px;
      box-sizing: border-box;
    }
  
    .contact-content {
      width: 100%;
    }
  
    .contact-info,
    .contact-form-container {
      width: 100%;
    }
  
    /* Fix for social icons wrapping */
    .contact-social-icons {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
  
    /* Fix for form inputs */
    .input-with-icon {
      width: 100%;
    }
  }
  
  /* Fix for very small screens */
  @media (max-width: 360px) {
    .hero-content h1 {
      font-size: 28px;
    }
  
    .section-title {
      font-size: 24px;
    }
  
    .stat-item h2 {
      font-size: 36px;
    }
  }
  
  /* Fix for footer on mobile */
  @media (max-width: 576px) {
    .footer-content,
    .footer-links,
    .footer-links-column {
      width: 100%;
    }
  }
  
  /* Ensure all sections allow scrolling */
  main,
  section,
  div {
    overflow: visible;
  }
  
  /* Fix any height constraints that might prevent scrolling */
  html,
  body {
    height: auto;
    min-height: 100%;
  }