.hero {
    color: #fff;
    text-align: center;
    background: url('/assets/images/new-home/hero-home-banner.jpg') center center no-repeat;
    background-size: cover;
    position: relative;
    padding: 28px 20px 75px;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(90deg, #009574 1%, #003f7c 100%);
        opacity: 0.85;
    }

    .heroHeader {
        position: relative;
        margin-top: 15px;
    }

    h1 {
        font-size: 48px;
        font-weight: 700;
        max-width: 785px;
        margin: 0 auto;
    }
    
    h2 {
        font-size: 32px;
        margin: 22px auto 0;
        max-width: 646px;
        font-weight: 400;
    }
    
    h3 {
        font-size: 32px;
        font-weight: 700;
    }
    
    h4 {
        font-size: 24px;
        margin-top: 19px;
        font-weight: 400;
    }

    .addResearch,
    .discoverResearch {
        display: block;
        width: 90%;
        max-width: 600px;
        margin: 0 auto;
    }

    .getStartedButton {
        margin: 35px auto;
    }

    .searchBar {
        max-width: 540px;
        margin: 35px auto 0;
    }
}

@media(max-width: 768px) {
    .hero {
        min-height: 500px;

        h1 {
            font-size: 36px;
        }
        
        h2 {
            font-size: 24px;
            margin: 22px auto 0;
            max-width: 490px;
        }

        h3 {
            font-size: 24px;
            max-width: 493px;
            margin: 0 auto;
        }

        h4 {
            font-size: 20px;
            max-width: 493px;
            margin: 19px auto;
        }

        .disoverResearch h4 {
            margin-bottom: 25px;
        }
    
        .searchBar {
            max-width: 335px;
        }
    }
}

@media(max-width: 737px) {
    .hero .discoverResearch {
        margin-top: 15px;
    }
}

@media(max-width: 375px) {
    .hero {
        h1 {
            font-size: 32px;
        }

        h2 {
            font-size: 20px;
            margin: 22px 5% 0;
        }

        h3 {
            font-size: 20px;
        }

        h4 {
            font-size: 16px;
        }
    }
}
