.hero-wrap {
  width: 100%;
  height: 100vh;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

.hero-wrap .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  opacity: 0.3;
  background: #000000;
}

.hero-wrap.hero-wrap-2 .overlay {
  width: 100%;
}

@media (max-width: 768px) {
  .hero-wrap .overlay {
    opacity: 0.4;
  }
}

@media (max-width: 576px) {
  .hero-wrap .overlay {
    opacity: 0.4;
  }

  .hero-wrap {
    height: 100%;
    background-attachment: scroll;
  }
}