/* custom.css */

/* --- Estilos personalizados para el menú de navegación principal (Header) --- */

/* 1. Establece el color del texto por defecto a --light (blanco)
   Esto ya debería estar cubierto por una regla anterior o por `header-nav-light-text`,
   pero lo incluimos para asegurar la base si hay conflictos con otras reglas generales de la plantilla. */
#header .header-nav-main #mainNav .nav-link {
    color: var(--light) !important;
}

/* 2. Cambia el color del texto a --secondary (gris-azul) al pasar el ratón (hover) en escritorio */
@media (min-width: 992px) {
    #header .header-nav.header-nav-links .header-nav-main nav>ul>li>a:hover {
        color: var(--secondary) !important;
        /* Establece el color de texto a tu gris-azul */
    }

    /* 3. Cambia el color del texto a --secondary (gris-azul) para el elemento activo en escritorio */
    #header .header-nav.header-nav-links .header-nav-main nav>ul>li.active>a {
        color: var(--secondary) !important;
        /* Establece el color de texto a tu gris-azul */
    }

    /* 4. Cambia el color del texto a --secondary (gris-azul) cuando el padre (li) está 'open' (ej. dropdowns) */
    #header .header-nav.header-nav-links .header-nav-main nav>ul>li.open>a {
        color: var(--secondary) !important;
        /* Establece el color de texto a tu gris-azul */
    }

    /* Opcional: Si los elementos activos o en hover también cambian el *fondo* a primary y quieres evitarlo,
       puedes añadir estas reglas para hacer el fondo transparente o del color del header.
       La plantilla tiene `#header .header-nav-main nav > ul:not(:hover) > li > a.active { background-color: var(--primary); }`
       Si quieres que sea transparente o sin cambio de fondo:
    */
    #header .header-nav-main nav>ul>li.active>a,
    #header .header-nav-main nav>ul>li.open>a,
    #header .header-nav-main nav>ul>li:hover>a {
        background-color: transparent !important;
        /* Mantiene el fondo del header */
    }
}


/* --- Estilos para el menú de navegación en dispositivos móviles (< 992px) --- */
@media (max-width: 991px) {

    /* 1. Asegura que el color de texto por defecto en móvil sea --light (blanco)
       Ya que el fondo del menú móvil es `var(--dark)` (oscuro), el texto blanco es legible. */
    #header .header-nav-main.header-nav-main-mobile-dark nav>ul>li>a {
        color: var(--secondary) !important;
    }

    /* 2. Cambia el color del texto a --secondary (gris-azul) al pasar el ratón (hover) en móvil */
    #header .header-nav-main.header-nav-main-mobile-dark nav>ul>li>a:hover {
        color: var(--secondary) !important;
    }

    /* 3. Cambia el color del texto a --secondary (gris-azul) para el elemento activo en móvil */
    #header .header-nav-main.header-nav-main-mobile-dark nav>ul>li.active>a {
        color: var(--secondary) !important;
    }

    /* Opcional: Si el fondo del elemento activo en móvil es --primary y quieres cambiarlo a transparente
       o a tu --secondary, puedes añadir esta regla.
       La plantilla tiene `#header .header-nav-main.header-nav-main-mobile-dark nav > ul > li > a.active { background: var(--primary); }`
       Si quieres un fondo transparente para el activo:
    */
    #header .header-nav-main.header-nav-main-mobile-dark nav>ul>li.active>a {
        background-color: transparent !important;
        /* Fondo transparente para el activo en móvil */
    }

    /* Si quisieras que el fondo activo en móvil fuera --secondary: */
    /*
    #header .header-nav-main.header-nav-main-mobile-dark nav > ul > li.active > a {
        background-color: var(--secondary) !important;
        color: var(--light) !important; // Mantenemos el texto blanco para contraste
    }
    */
}

#footer {
    background-color: #212529 !important;
}

.our-services {
    padding: 4rem;
}