.hero-section {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* opcional: agregar un overlay oscuro */
    position: relative;
}
.hero-section::after {
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.5);   /* overlay grisáseo */
}
.hero-section .container {
    position:relative;    /* para que el contenido quede sobre el overlay */
}