/* Estilos para el menú de navegación */

nav.navbar {
    background: linear-gradient(135deg, #1a5c4a 0%, #2d8b6f 50%, #187C68 100%) !important;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

nav .nav-link {
    color: white !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5) !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
    position: relative !important;
}

nav .nav-link::after {
    content: ''; 
    position: absolute !important;
    left: 0 !important;
    bottom: -2px !important;
    width: 100% !important;
    height: 2px !important;
    background-color: rgba(64, 64, 64, 0.9) !important;
    transform: scaleX(0) !important;
    transition: transform 0.3s ease !important;
}

nav .nav-link:hover {
    color: rgba(220, 220, 220, 1) !important;
    transform: scale(1.05) !important;
}

nav .nav-link:hover::after {
    transform: scaleX(1) !important;
}

nav .nav-link.active {
    color: #4ade80 !important;
}


/* Ajustes adicionales para dispositivos móviles */
@media screen and (max-width: 599px) {
    .nav-item {
        font-size: small !important;
        margin-left: 1% !important;
    }
}


/* Ajustes para pantallas más grandes (PC de escritorio) */
@media screen and (min-width: 1024px) {
    .nav-item {
        font-size: larger !important;
    }
}



/* Estilo del fondo del menú al hacer scroll */
.navbar.scrolled {
    background-color:rgba(24, 124, 104, 0.993) !important;
    color: rgba(24, 124, 104, 0.9) !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}

/* Cambia el color del ícono de la hamburguesa en móvil */
.navbar-toggler-icon {
    color: white !important;
}

/* Estilo del fondo del menú cuando está abierto */
.menu-open {
    background-color:rgba(24, 124, 104, 0.993) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}

/* Estilo para el menú desplegable */
.nav-item .dropdown-menu {
    background-color: #b6b4b4f5 !important; /* Fondo oscuro */
    border-color: #555 !important; /* Borde ligeramente más claro */
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
    backdrop-filter: blur(8px);
}

/* Estilo para los enlaces del menú desplegable */
.dropdown-item {
    color: rgba(24, 124, 104, 0.9) !important;
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease !important; /* Transición suave para el color */
    padding: 0.5rem 1rem !important;
}

/* Estilo para los enlaces del menú desplegable cuando se pasa el cursor sobre ellos */
.dropdown-item:hover {
    color: #ffffff !important; /* Color blanco al pasar el ratón */
    background-color: rgba(24, 124, 104, 0.993) !important; /* Fondo más claro al pasar el ratón */
    transform: translateX(4px);
}