body {
    padding-top: 80px;
}


h4{
    font-size: 40px; /* Aumenta el tamaño del texto */
    font-weight: 900; /* Grosor máximo de la letra */
    color: rgb(248, 161, 0); /* Color azul con el código RGBA especificado */
    margin-left: 50px; /* Ajusta la separación del borde izquierdo */
    margin-top: 20px; /* Espaciado superior para separarlo de la imagen */
    font-family: 'Poppins', sans-serif; /* Fuente elegante */
    text-transform: uppercase; /* (Opcional) Convierte el texto en mayúsculas */
}


/* -------------------  Imagen debajo del Header  ------------------- */
.header-image {
    width: 80%; /* Reduce el tamaño de la imagen */
    max-width: 1000px; /* Evita que sea demasiado grande */
    height: auto; /* Mantiene la proporción */
    display: block;
    margin: 40px auto 20px; /* Ajusta el margen superior y centra */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para mejor diseño */
}

/* -------------------  Responsividad  ------------------- */
@media (max-width: 1200px) {
    .header-image {
        width: 90%;
        margin-top: 20px; /* Ajusta según sea necesario */
    }
}

@media (max-width: 768px) {
    .header-image {
        width: 95%;
        max-width: 600px;
    }
    h4 {
        margin-left: 20px; /* Mueve más a la izquierda en pantallas pequeñas */
        font-size: 35px; /* Reduce un poco el tamaño */
    }
}

@media (max-width: 480px) {
    .header-image {
        width: 100%;
        max-width: 400px;
    }
    h4 {
        margin-left: 10px; /* Más alineado a la izquierda */
        font-size: 30px; /* Aún más pequeño en móviles */
    }

}