.hero {
position: relative;
width: 100%;
height: 400px;
border-radius: 16px;
overflow: hidden;
margin-bottom: 3rem;
box-shadow: 0 10px 50px rgba(15, 163, 90, 0.3);
}

.hero-image {
width: 100%;
height: 100%;
object-fit: cover;
}

.content-section {
margin-bottom: 3rem;
}

.section-title {
font-size: 2rem;
font-weight: 700;
color: var(--white);
margin-bottom: 1rem;
padding-left: 1rem;
border-left: 4px solid var(--forest-green);
text-shadow: 0 0 20px rgba(15, 163, 90, 0.3);
}

@media (max-width: 768px) {
.hero {
height: 250px;
}

.hero-title {
font-size: 2rem;
}

.hero-tagline {
font-size: 1rem;
}

.section-title {
font-size: 1.5rem;
}
}