/* using 101vw and not just 100vw because there was a small visual bug in, at least firefox, where this wouldn't quite fill the screen */
.hero-image img{
    width: 101vw;
    max-width: 101vw;
    transform: translateX(-50%);
    left: 50%;
    position: relative;
    margin-bottom: 0;
}
.hero-image{
    margin-bottom: 0;
    margin-top: -3rem;
}
.hero-bottom{
    background: url(../../images/green-bg.webp) center center repeat;
    color: #fff;
    width: 101vw;
    max-width: 101vw;
    transform: translateX(-50%);
    left: 50%;
    position: relative;
    padding: 7rem 4rem 14rem 4rem;
    margin-bottom: 0;
}
.hero-bottom > .wpb_wrapper{
    max-width: 90rem;
    margin: 0 auto;
}
.hero-bottom *{
    color: #fff;
}
.hero-bottom:after{
    content: " ";
    background-image: url('data:image/svg+xml,<svg fill="%23f4f4f4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1192 100" preserveAspectRatio="none"><path d="M1192.91,15.11c-70.34.58-160.42-16.57-349.67-15S541.11,20.46,361.07,21.94,0,7.05,0,7.05V148.18l1192.9-9.8Z"></path></svg>');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 7rem;
    display: block;
    position: absolute;
    width: 100%;
    left: 0;
    /* remove a small gap in a working but ugly way */
    bottom: -1px;
}