@media (max-width: 768px) {
    .hero {
      background:
        linear-gradient(
          180deg,
          rgba(13,20,87,0.42) 0%,
          rgba(13,20,87,0.70) 48%,
          rgba(13,20,87,0.90) 100%
        ),
        url("/assets/images/home-hero2.webp") center top / cover no-repeat !important;
    }

    .hero-slider {
      display: none !important;
    }

    .hero-overlay {
      background:
        linear-gradient(
          180deg,
          rgba(13,20,87,0.22) 0%,
          rgba(13,20,87,0.58) 52%,
          rgba(13,20,87,0.88) 100%
        ) !important;
    }

    .hero-content {
      text-shadow: 0 16px 36px rgba(0,0,0,0.26);
    }
  }