/* Estilos para los íconos de redes sociales */
#social-icons {
    display: flex; /* Utiliza flexbox para alineación */
    justify-content: flex-end; /* Alinea los íconos a la derecha */
    margin-bottom: 10px; /* Espaciado inferior entre los íconos y el menú */
    padding-right: 125px; /* Ajusta el espacio a la derecha del contenedor de íconos */
}

#social-icons a {
    margin: 0 10px; /* Espaciado horizontal entre los íconos */
    display: inline-block;
}

#social-icons img {
    width: 30px; /* Ajusta el tamaño de los íconos según sea necesario */
    height: auto; /* Mantiene la proporción del ícono */
}

/* Menú de navegación */
#main-nav {
    background-color: #333; /* Color de fondo del menú */
    overflow: hidden; /* Asegura que el contenido no desborde el contenedor */
}

#main-nav ul {
    list-style-type: none; /* Elimina los puntos de lista predeterminados */
    margin: 0;
    padding: 0;
    display: flex; /* Alinea los elementos horizontalmente */
}

#main-nav ul li {
    flex: 1; /* Asegura que los elementos se distribuyan equitativamente */
}

#main-nav ul li a {
    display: block;
    color: white; /* Color del texto */
    text-align: center;
    padding: 14px 20px; /* Espaciado interno */
    text-decoration: none; /* Elimina el subrayado */
    background-color: #444; /* Color de fondo de los elementos */
    transition: background-color 0.3s; /* Transición suave del color de fondo */
}

#main-nav ul li a:hover {
    background-color: #555; /* Color de fondo al pasar el ratón */
}

#main-nav ul li:first-child a {
    border-radius: 5px 0 0 5px; /* Bordes redondeados para el primer elemento */
}

#main-nav ul li:last-child a {
    border-radius: 0 5px 5px 0; /* Bordes redondeados para el último elemento */
}