/*******************************************************/
/******************** ## Hero Banner 4 ********************/
/*******************************************************/

.hero-banner-4-title {
    z-index: 2;
    color: var(--light-color);
    font-weight: 700;
    font-size: 200px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}

@media only screen and (max-width: 1599px) {
    .hero-banner-4-title {
        font-size: 150px;
    }
}

@media only screen and (max-width: 1299px) {
    .hero-banner-4-title {
        font-size: 120px;
    }
}

@media only screen and (max-width: 991px) {
    .hero-banner-4-title {
        font-size: 80px;
    }
}

@media only screen and (max-width: 767px) {
    .hero-banner-4-title {
        font-size: 60px;
    }
}

@media only screen and (max-width: 575px) {
    .hero-banner-4-title {
        font-size: 50px;
    }
}

@media only screen and (max-width: 479px) {
    .hero-banner-4-title {
        font-size: 40px;
    }
}

@media only screen and (max-width: 375px) {
    .hero-banner-4-title {
        font-size: 35px;
    }
}

.hero-banner-4-image {
    height: 790px;
    margin-top: -8%;
    position: relative;
    border-radius: 20px;
    aspect-ratio: 2.15 / 1;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

@media only screen and (max-width: 1399px) {
    .hero-banner-4-image {
        height: 555px;
    }
}

@media only screen and (max-width: 991px) {
    .hero-banner-4-image {
        height: 450px;
    }
}

@media only screen and (max-width: 575px) {
    .hero-banner-4-image {
        height: 400px;
    }
}

.hero-banner-4-image:before {
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left top, left bottom, from(var(--forest-green)), to(rgba(29, 35, 31, 0)));
    background: -webkit-linear-gradient(top, var(--forest-green) 0%, rgba(29, 35, 31, 0) 100%);
    background: -o-linear-gradient(top, var(--forest-green) 0%, rgba(29, 35, 31, 0) 100%);
    background: linear-gradient(180deg, var(--forest-green) 0%, rgba(29, 35, 31, 0) 100%);
}