#hero {
    min-height: 900px;
    height: 900px;
}

#hero .wp {
    display: flex;
    align-items: center;
    min-height: 100%;
}

#hero .wp .hero-text {
    height: 100%;
    z-index: 3;
    transform: translateY(-80px);
}

#hero .wp .hero-text h1 {
    font-size: 80px;
    line-height: 65px;
    letter-spacing: -3.2px;
    margin-left: 100px;
    width: 100%;
}

#hero .wp .hero-image {
    height: auto;
}

#hero .green-path {
    position: absolute;
    transform: translate(320px, 35px);
    z-index: 2;
}

#hero .hero-background {
    clip-path: url(#hero-secondary-mask);
    height: 100%;
}

#hero .hero-background img {
    max-height: 1080px;
    height: auto;
}

#hero-secondary-mask path {
    transform: translateY(-70px);
}

@media (max-width: 1800px) {
    #hero-secondary-mask path {
        scale: .9;
        transform: translateY(0px);
    }
}

@media (max-width: 1700px) {
    #hero .wp {
        max-width: 1400px;
    }

    #hero-secondary-mask path {
        scale: .75;
        transform: translateY(110px);
    }
}

@media (max-width: 1440px) {
    #hero .wp {
        max-width: 1100px;
        padding: 0;
    }

    #hero .wp .hero-text h1 {
        font-size: 70px;
        line-height: 55px;
        margin-left: 0;
        width: calc(100% + 20px);
    }

    #hero .green-path {
        transform: translate(166px, 35px);
        scale: .85;
    }
}

@media (max-width: 1150px) {
    #hero {
        height: 1080px;
    }

    #hero .wp {
        max-width: 900px;
    }

    #hero .wp .hero-text {
        transform: translateY(-220px);
    }

    #hero .wp .hero-text h1 {
        font-size: 60px;
        line-height: 50px;
    }

    #hero .green-path {
        transform: translate(140px, -140px);
    }

    #hero-secondary-mask path {
        scale: .75;
        transform: translate(-430px, 330px);
    }
}

@media (max-width: 960px) {
    #hero .wp .hero-text {
        transform: translateY(-220px);
    }

    #hero .green-path {
        transform: translate(140px, -140px);
    }

    #hero .wp .hero-text {
        transform: translateY(-220px);
        margin-left: 60px;
    }

    #hero-secondary-mask path {
        scale: .65;
        transform: translate(-500px, 460px);
    }
}

@media (max-width: 800px) {
    #hero-secondary-mask path {
        scale: .65;
        transform: translate(-650px, 470px);
    }
}

@media (max-width: 660px) {
    #hero .wp {
        flex-direction: column;
    }

    #hero .wp .hero-text {
        transform: translateY(250px);
        margin-left: 0;
    }

    #hero .green-path {
        transform: translate(70px, 415px);
        scale: .65;
    }

    #hero-secondary-mask path {
        scale: .55;
        transform: translate(800px, 470px);
    }
}

@media (max-width: 550px) {
    #hero-secondary-mask path {
        scale: .45;
        transform: translate(1040px, 620px);
    }
}