.hero { 
  isolation: isolate;    
  width: 100%;                   /* put background layers behind content */
            /* optional but makes stacking predictable */
}

.hero::before,
.hero::after {
  z-index: -1;  
}

.hero > .contact-section {
  position: relative;
  z-index: 2;    
margin: 0 auto;
padding: 20px;
}

@media (max-width: 1000px) {
  .hero > .contact-section {
    width: 80%;
  }
}