/*
CTC Separate Stylesheet
Updated: 2024-03-19 15:55:55
*/
/* Estilos del menú principal */
.main-navigation {
    background-color: transparent; /* Fondo transparente para el contenedor del menú */
    padding: 0; /* Sin espaciado interno */
}

/* Ajustar el espaciado, la altura y el color de fondo de los enlaces del menú */
.main-navigation .main-header-menu .menu-link {
    background-color: #3cbf90 !important; /* Fondo verde oscuro (color del hover) */
    color: #ffffff !important; /* Texto blanco */
    padding: 8px 15px !important; /* Espaciado interno ajustado */
    border-radius: 10px !important; /* Bordes redondeados menores */
    text-decoration: none !important; /* Sin subrayado */
    font-weight: 700 !important; /* Texto en negrita */
    font-size: 18px !important; /* Tamaño de fuente ajustado */
    line-height: 1.2; /* Ajustar altura de línea */
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important; /* Transición suave */
    margin: 0 8px !important; /* Espaciado entre elementos */
    box-shadow: 8px 8px 10px rgba(0, 0, 0, 1), inset 1px 1px 4px rgba(255, 255, 255, 0.3); /* Efecto 3D más notorio */
    font-family: 'Kanit', sans-serif !important; /* Aplicar la fuente Kanit */

}

/* Cambia el fondo y el color al pasar el mouse */
.main-navigation .main-header-menu .menu-link:hover {
    background-color: rgba(73, 225, 162, 0.8) !important; /* Fondo verde más claro al pasar el mouse */
    color: #49e1a2 !important; /* Texto verde */
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.6), inset 1px 1px 6px rgba(255, 255, 255, 0.4); /* Efecto 3D más pronunciado en hover */
}

/* Ajustar la altura de los elementos del menú */
.main-navigation .main-header-menu {
    display: flex; /* Alineación horizontal */
    align-items: center; /* Alineación vertical */
    height: auto; /* Ajustar altura automáticamente según el contenido */
}