.container {
    position: relative;
    z-index: 1; /* Asegura que el contenido esté por encima del fondo */
    background-color: #686967; /* Añade un fondo semitransparente al contenedor para mejor legibilidad */
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px; /* Añade espacio entre los contenedores */
}

 .card, h1, p {
    background-color: #2f3640; /* Fondo negro para el encabezado y las tarjetas */
    color: white; /* Texto blanco */
}

.card-body {
    background-color: #2f3640; /* Fondo negro para el cuerpo de las tarjetas */
    color: white; /* Texto blanco */
}

.nav-link {
    color: white; /* Texto blanco para los enlaces de navegación */
}

.nav-link:hover {
    color: #2f3640; /* Color gris para los enlaces de navegación al pasar el ratón */
}