.hero {
    background:
        linear-gradient(115deg, rgba(229, 170, 30, 0.9) 0%, rgba(192, 189, 21, 0.82) 45%, rgba(188, 181, 17, 0.76) 100%),
        linear-gradient(0deg, rgba(24, 24, 24, 0.16), rgba(24, 24, 24, 0.16)),
        url("../img/dump_truck.jpg") center center / cover no-repeat;
    color: #342f26;
    padding: 150px 20px 100px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    animation: fadeInUp 1s;
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.18);
}

.hero p {
    font-size: 1.3rem;
    margin-bottom: 30px;
    opacity: 0.98;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 6px rgba(255, 255, 255, 0.16);
}

.hero .container {
    position: relative;
    z-index: 1;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 232, 149, 0.22), transparent 34%),
        radial-gradient(circle at 82% 70%, rgba(255, 249, 214, 0.18), transparent 30%);
    pointer-events: none;
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: 2rem;
    }

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