@import url("main.css");

#contact-hero {
    background-image: url('../images/wave-bg.svg'), url('../images/background-images/contact-bg.png');
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, center;
    background-blend-mode: hard-light;

    /* background-image: url('../images/contact-bg-1.svg'), url('../images/contact-bg-2.svg');
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, center 0;
    background-blend-mode: overlay; */
}

/* @media screen and (max-width:992px) {
    #contact-hero{
      height: 100vh;
    }
} */

/* .contact-hero-overlay {
    position: relative;
    overflow: hidden;
}
  
.contact-hero-overlay::before,
.contact-hero-overlay::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 30%;
    pointer-events: none;
    z-index: 2;
}
  
.contact-hero-overlay::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1), transparent);
}
  
.contact-hero-overlay::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), transparent);
}

@media (min-width: 992px) {
    .contact-hero-overlay::before{
      height: 15%;
    }

    .contact-hero-overlay::after {
      height: 45%;
    }
} */