/* Mobile-specific fixes */
:root {
    --vh: 1vh;
  }
  
  @media (max-width: 767px) {
    /* Use the custom viewport height variable */
    .hero-section,
    .hero-slider {
      height: calc(var(--vh, 1vh) * 100) !important;
      min-height: calc(var(--vh, 1vh) * 100) !important;
      max-height: calc(var(--vh, 1vh) * 100) !important;
    }
  
    /* Fix for iOS Safari */
    @supports (-webkit-touch-callout: none) {
      .hero-section,
      .hero-slider {
        height: -webkit-fill-available !important;
        min-height: -webkit-fill-available !important;
      }
    }
  
    /* Ensure content is properly centered */
    .hero-content {
      padding: 0 15px !important;
      justify-content: center !important;
    }
  
    /* Fix for any section that comes after the hero */
    .hero-section + *,
    .hero-slider + * {
      margin-top: 0 !important;
    }
  }