header {
    margin: 20px 10px 10px 10px;
}

.navbar {
    background-color: #022d55; /* Establece el color de fondo de la barra de navegación */
    overflow: hidden; /* Asegura que el contenido flotante dentro de la barra de navegación esté contenido correctamente */
    border-radius: 10px;
    box-shadow: 0 0 15px #03427d;
    display: flex;
    justify-content: space-between; /* Distribuye el espacio sobrante entre los elementos */
    align-items: center; /* Alinea verticalmente los elementos en el centro */
    padding: auto;
}

.navbar .logo img {
    height: 50px; /* Establece la altura de la imagen del logo */
}

.navbar .nav-links {
    list-style-type: none; /* Elimina los puntos de la lista */
    padding: 0; /* Elimina el relleno predeterminado de la lista */
    margin: 0; /* Elimina los márgenes predeterminados de la lista */
    display: flex; /* Utiliza el modelo de caja flexible para alinear los elementos horizontalmente */
    align-items: center; /* Alinea verticalmente los elementos de la lista en el centro */
    text-shadow: 0 0 10px black;
}

.navbar .nav-links li {
    margin: 0; /* Elimina los márgenes predeterminados de los elementos de la lista */
}

.navbar .nav-links a {
    display: block; /* Hace que los enlaces sean elementos de bloque para que ocupen toda el área del contenedor */
    color: white; /* Establece el color del texto de los enlaces en blanco */
    text-align: center; /* Centra el texto dentro de los enlaces */
    padding: 14px 20px; /* Agrega relleno alrededor del texto de los enlaces (14px arriba y abajo, 20px a los lados) */
    text-decoration: none; /* Elimina el subrayado predeterminado de los enlaces */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease; /* Agrega una transición suave al cambiar el color de fondo, la sombra y el radio de los bordes de los enlaces */
}

.navbar .nav-links a:hover {
    border-radius: 10px;
    box-shadow: 0 0 10px #0007;
    background-color: #033e75; /* Cambia el color de fondo de los enlaces a gris claro cuando el usuario pasa el cursor sobre ellos */
}

@media (max-width: 768px) {
    .navbar {
        flex-direction: column; /* Cambia la dirección de los elementos flexibles a una columna en pantallas pequeñas */
        align-items: center; /* Alinea todos los elementos al centro */
    }
    .navbar .logo {
        margin-bottom: 10px; /* Agrega un margen inferior para separar el logo de los enlaces */
    }
    .navbar .nav-links {
        flex-direction: row; /* Cambia la dirección de los enlaces de navegación a una columna en pantallas pequeñas */
        align-items: center; /* Alinea los enlaces al centro */
    }
    .navbar .nav-links a {
        padding: 10px; /* Ajusta el relleno de los enlaces para pantallas pequeñas */
        text-align: center; /* Alinea el texto de los enlaces al centro en pantallas pequeñas */
        flex: none; /* Permite que los enlaces se ajusten y distribuyan el espacio equitativamente */
    }
}