.hero-banner .banner-wrapper {
  position: relative;
}
.hero-banner h1, .hero-banner h2, .hero-banner h3, .hero-banner h4, .hero-banner h5, .hero-banner h6 {
  margin-bottom: 30px !important;
  text-shadow: 1px 1px 15px rgba(0, 0, 0, 0.2);
}
.hero-banner .sustainability .HeadlineIcon {
  color: var(--green);
}
.hero-banner .video_wrapper, .hero-banner .image_wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}
.hero-banner .video_wrapper video, .hero-banner .video_wrapper img, .hero-banner .image_wrapper video, .hero-banner .image_wrapper img {
  z-index: 1;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
}
.hero-banner .hero-banner-content {
  position: absolute;
  top: 40%;
  left: 5%;
  z-index: 799;
  color: var(--white);
  max-width: 1000px;
}
.hero-banner .hero-banner-content h1, .hero-banner .hero-banner-content h2, .hero-banner .hero-banner-content h3, .hero-banner .hero-banner-content h4, .hero-banner .hero-banner-content h5, .hero-banner .hero-banner-content h6 {
  color: var(--white);
}
.hero-banner .hero-banner-content h1 {
  font-size: 90px;
  font-weight: 900;
  line-height: 100px;
}
.hero-banner .hero-banner-content p {
  font-size: 2.5rem;
}
.hero-banner .hero-banner-content .HeadlineIcon {
  color: var(--secondary);
  font-size: 120px;
  font-weight: 900;
  position: absolute;
  left: -80px;
  top: -20px;
}

@media screen and (max-width: 47.9375em) {
  .hero-banner .hero-banner-content {
    position: absolute;
    top: 40%;
    left: 5%;
  }
  .hero-banner .hero-banner-content h1 {
    font-size: 50px;
    line-height: 50px;
  }
  .hero-banner .hero-banner-content p {
    font-size: 1.5rem;
    line-height: 1.8rem;
  }
  .hero-banner .hero-banner-content .HeadlineIcon {
    font-size: 60px;
    left: -30px;
    top: -15px;
  }
}