nav
{
    background-color: rgba(0, 0, 0, 0.5)!important;
}
.mega-menu-link
{
    color: #FFF!important;
    text-shadow: 1px 1px 2px #4c4c4c !important;
}

/* ========================================
   NAV SCROLLED - Estilos cuando se hace scroll
   ======================================== */

@keyframes stuckMoveDown 
{
	0% 
	{
		opacity: 0;
		transform: translateY(-20px);
	}
	100% 
	{
		opacity: 1;
		transform: translateY(0);
	}
}

.stuck-move-down-animation 
{
	animation: 0.3s ease 0s 1 normal none running stuckMoveDown;
}

.nav-scrolled 
{
	background-color: #fff !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-scrolled .mega-menu-link
{
	color: #000 !important;
	text-shadow: none !important;
}

.nav-scrolled .mega-menu-link:hover
{
	color: #000 !important;
}

.nav-scrolled .mega-current-menu-item a
{
	color: #0e2723 !important;
	font-weight: bold !important;
	text-decoration: underline !important;
}

.nav-scrolled .custom-logo-link img
{
	width: 150px !important;
}

/* Updated styles for SVG logos when scrolled */
.nav-scrolled .logo-link 
{
	height: 50px;
}

/* Asegurar que el navbar tenga position sticky */
#wrapper-navbar
{
	position: sticky;
	top: 0;
	z-index: 1000;
	transition: transform 0.3s ease-in-out;
	width: 100%;
	max-width: 100%;
	overflow: visible;
}

/* Asegurar que el navbar interno no tenga position fixed */
#wrapper-navbar .navbar,
#wrapper-navbar .navbar.fixed-top,
#wrapper-navbar nav.navbar
{
	position: relative !important;
	top: auto !important;
	width: 100%;
	left: auto !important;
	right: auto !important;
}

/* Asegurar que el navbar no tenga position fixed */
nav.navbar.fixed-top
{
	position: relative !important;
	top: auto !important;
}

/* Asegurar que el mega menu wrap sea visible */
#mega-menu-wrap-primary
{
    display: block !important;
    visibility: visible !important;
}

/* Asegurar que el toggle del mega menu sea visible en móvil */
@media (max-width: 768px)
{
    #mega-menu-wrap-primary .mega-menu-toggle
    {
        display: flex !important;
        visibility: visible !important;
    }
    
    #mega-menu-wrap-primary
    {
        display: block !important;
        visibility: visible !important;
    }
}

@media (max-width: 1200px) and (min-width: 769px)
{
    a.mega-menu-link
    {
        font-size: 0.8rem!important;
        padding: 0 10px!important;
    }
    .custom-logo-link img
    {
        width: 150px!important;
    }
}

/* ========================================
   HEADER DARK STYLE - Encabezado Oscuro
   ======================================== */

/* Cuando body tiene la clase header-dark-style, aplicar estilos oscuros desde el inicio */
body.header-dark-style #wrapper-navbar
{
	background-color: #000 !important;
}

/* Logo: ocultar blanco y mostrar gris/negro desde el inicio */
body.header-dark-style .logo-white
{
	opacity: 0;
	visibility: hidden;
}

body.header-dark-style .logo-grey
{
	opacity: 1;
	visibility: visible;
}

/* Texto del menú en blanco desde el inicio */
body.header-dark-style .mega-menu-link
{
	color: #fff !important;
	font-weight: normal !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

body.header-dark-style .mega-menu-link:hover
{
	color: #fff !important;
	font-weight: normal !important;
	text-decoration: none !important;
	text-shadow: none !important;
	opacity: 0.8;
}

/* Item activo del menú */
body.header-dark-style .mega-current-menu-item a
{
	color: #fff !important;
	font-weight: normal !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

/* Topbar con fondo gris oscuro y texto blanco */
body.header-dark-style #wrapper-topbar
{
	background-color: #333 !important;
	color: #fff !important;
}

body.header-dark-style #wrapper-topbar,
body.header-dark-style #wrapper-topbar *,
body.header-dark-style #topbar-content,
body.header-dark-style #topbar-content *
{
	color: #fff !important;
}

body.header-dark-style #wrapper-topbar a
{
	color: #fff !important;
	text-decoration: none !important;
}

body.header-dark-style #wrapper-topbar a:hover
{
	color: #fff !important;
	opacity: 0.8;
	text-decoration: none !important;
}

/* Iconos de la topbar en blanco */
body.header-dark-style .topbar-icon
{
	color: #fff !important;
}

body.header-dark-style .topbar-icon:hover
{
	color: #fff !important;
	opacity: 0.8;
}

/* Asegurar que el navbar tenga fondo blanco incluso sin scroll */
body.header-dark-style #wrapper-navbar .navbar
{
	background-color: #000 !important;
}

/* Mantener los estilos cuando se hace scroll en modo dark */
body.header-dark-style .nav-scrolled
{
	background-color: #000 !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

body.header-dark-style .nav-scrolled .logo-white
{
	opacity: 0;
	visibility: hidden;
}

body.header-dark-style .nav-scrolled .logo-grey
{
	opacity: 1;
	visibility: visible;
}

body.header-dark-style .nav-scrolled .mega-menu-link
{
	color: #fff !important;
	font-weight: normal !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

body.header-dark-style .nav-scrolled .mega-menu-link:hover
{
	color: #fff !important;
	opacity: 0.8;
}

body.header-dark-style .nav-scrolled .mega-current-menu-item a
{
	color: #fff !important;
	font-weight: normal !important;
	text-decoration: none !important;
}

/* Asegurar que los submenús funcionen correctamente con header-dark-style */
body.header-dark-style #wrapper-navbar
{
	overflow: visible !important;
}

body.header-dark-style .mega-sub-menu
{
	background-color: #000;
	color: #fff;
}

body.header-dark-style .mega-sub-menu a
{
	color: #fff !important;
	font-weight: normal !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

body.header-dark-style .mega-sub-menu a:hover
{
	color: #fff !important;
	font-weight: normal !important;
	text-decoration: none !important;
	opacity: 0.8;
}