.hero-gradient {
    background-image: 
        linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.5) 100%),
        url('../../imgs/hero2.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero-gradient h1, .hero-gradient p{
    color: white;
}

.hero-gradient p{
    color: white;
    font-size: 1.1em;
    font-style: italic;
}

.hero-gradient .green-accent{
    color: #84cc1f;
}

.hero-gradient .green-bg-accent{
    background-color: #84cc1f;
}

.hero-gradient .green-bg-primary{
    background-color: var( --primary-color );
}