#hero1 {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  min-height: 800px;

  --hero-top-shadow: linear-gradient(
    180deg,
    rgba(37, 37, 37, 0.82) 0%,
    rgba(37, 37, 37, 0.62) 18%,
    rgba(37, 37, 37, 0.28) 38%,
    rgba(37, 37, 37, 0) 62%
  );

  --hero-diagonal-overlay: linear-gradient(
    135deg,
    rgba(37, 37, 37, 0.98) 0%,
    rgba(37, 37, 37, 0.92) 24%,
    rgba(37, 37, 37, 0.72) 48%,
    rgba(37, 37, 37, 0.42) 72%,
    rgba(37, 37, 37, 0.22) 100%
  );

  background-image:
    var(--hero-top-shadow),
    var(--hero-diagonal-overlay),
    url("/wp-content/uploads/2026/06/hero1.jpg") !important;

  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
}

#hero1::before,
#hero1::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;

  opacity: 0;
  pointer-events: none;
}

#hero1::before {
  background-image:
    var(--hero-top-shadow),
    var(--hero-diagonal-overlay),
    url("/wp-content/uploads/2026/06/hero2.jpg");

  animation: heroFadeSecond 18s infinite linear;
}

#hero1::after {
  background-image:
    var(--hero-top-shadow),
    var(--hero-diagonal-overlay),
    url("/wp-content/uploads/2026/06/hero3.jpg");

  animation: heroFadeThird 18s infinite linear;
}

#hero1 > * {
  position: relative;
  z-index: 2;
}

@keyframes heroFadeSecond {
  0% {
    opacity: 0;
  }

  16.666% {
    opacity: 0;
  }

  33.333% {
    opacity: 1;
  }

  66.666% {
    opacity: 1;
  }

  66.667% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes heroFadeThird {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  66.666% {
    opacity: 1;
  }

  83.333% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@media (max-width: 767px) {
  #hero1 {
    min-height: 620px;

    --hero-top-shadow: linear-gradient(
      180deg,
      rgba(37, 37, 37, 0.94) 0%,
      rgba(37, 37, 37, 0.82) 28%,
      rgba(37, 37, 37, 0.58) 58%,
      rgba(37, 37, 37, 0.38) 100%
    );

    --hero-diagonal-overlay: linear-gradient(
      145deg,
      rgba(37, 37, 37, 0.96) 0%,
      rgba(37, 37, 37, 0.86) 38%,
      rgba(37, 37, 37, 0.62) 72%,
      rgba(37, 37, 37, 0.46) 100%
    );

    background-image:
      var(--hero-top-shadow),
      var(--hero-diagonal-overlay),
      url("/wp-content/uploads/2026/06/hero1.jpg") !important;
  }

  #hero1::before {
    background-image:
      var(--hero-top-shadow),
      var(--hero-diagonal-overlay),
      url("/wp-content/uploads/2026/06/hero2.jpg");
  }

  #hero1::after {
    background-image:
      var(--hero-top-shadow),
      var(--hero-diagonal-overlay),
      url("/wp-content/uploads/2026/06/hero3.jpg");
  }
}