/* ==========================
   NAVBAR
========================== */

.navbar-vivexa{

    background:#0B1F3A;

    transition:.35s;

    padding:8px 0;

    z-index:999;

}

.navbar-vivexa.scrolled{

    background:#0B1F3A;

    padding:8px 0;

    box-shadow:0 8px 25px rgba(0,0,0,.20);

}

.navbar-brand img{

    height:100px;

    width:auto;

    transition:.3s;

}

.nav-link{

    color:#fff;

    font-weight:500;

    margin:0 10px;

}

.nav-link:hover{

    color:#F68B1F;

}

.dropdown-menu{

    border:none;

    border-radius:12px;

    box-shadow:0 15px 40px rgba(0,0,0,.15);

}

.dropdown-item{

    padding:12px 18px;

}

.dropdown-item:hover{

    background:#0B1F3A;

    color:white;

}


/* =====================================================
   VIVEXA - MENÚ MÓVIL PREMIUM
===================================================== */


/* =====================================================
   BOTÓN HAMBURGUESA
===================================================== */

.navbar-toggler{

    width:48px;

    height:48px;

    padding:0;

    border:0 !important;

    border-radius:12px;

    background:#ffffff !important;

    display:none;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:5px;

    box-shadow:
        0 6px 18px rgba(0,0,0,.12);

    transition:.25s;

}


.navbar-toggler:focus{

    box-shadow:
        0 0 0 3px rgba(246,139,31,.30);

}


.navbar-toggler span{

    display:block;

    width:21px;

    height:2px;

    background:#081A38;

    border-radius:10px;

    transition:.25s;

}


.navbar-toggler:hover{

    transform:translateY(-1px);

}


/* =====================================================
   MENÚ DESKTOP
===================================================== */

.mobile-services-menu{

    display:none;

}


.navbar-vivexa .dropdown-menu{

    border:0;

    border-radius:14px;

    padding:8px;

    box-shadow:
        0 15px 40px rgba(8,26,56,.15);

}


.navbar-vivexa
.dropdown-item{

    display:flex;

    align-items:center;

    gap:10px;

    padding:11px 13px;

    border-radius:9px;

    color:#081A38;

    font-size:13px;

    transition:.2s;

}


.navbar-vivexa
.dropdown-item i{

    width:18px;

    color:#F68B1F;

}


.navbar-vivexa
.dropdown-item:hover{

    background:#FFF1E3;

    color:#081A38;

}


/* =====================================================
   LOGIN DESKTOP
===================================================== */

.vivexa-login .btn{

    display:flex;

    align-items:center;

    gap:7px;

    border-radius:10px;

    padding:10px 16px;

}


.vivexa-login
.dropdown-menu{

    min-width:190px;

}


.vivexa-login
.dropdown-item{

    gap:10px;

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:991px){

    .navbar-vivexa{

        background:#081A38 !important;

    }


    .navbar-vivexa
    .container{

        min-height:86px;

    }


    .navbar-toggler{

        display:flex;

    }


    /* =========================================
       LOGO
    ========================================= */

    .navbar-brand img{

        max-height:48px;

        width:auto;

    }


    /* =========================================
       CONTENEDOR MENÚ
    ========================================= */

    .navbar-collapse{

        position:absolute;

        top:100%;

        left:0;

        right:0;

        width:100%;

        padding:12px 18px 25px;

        background:#081A38;

        border-top:1px solid rgba(255,255,255,.08);

        box-shadow:
            0 20px 40px rgba(0,0,0,.25);

        max-height:calc(100vh - 86px);

        overflow-y:auto;

    }


    /* =========================================
       LINKS
    ========================================= */

    .navbar-vivexa
    .navbar-nav{

        width:100%;

        margin:0 !important;

        padding:5px 0;

    }


    .navbar-vivexa
    .nav-item{

        width:100%;

        border-bottom:
            1px solid rgba(255,255,255,.07);

    }


    .navbar-vivexa
    .nav-link{

        display:flex;

        align-items:center;

        min-height:52px;

        padding:12px 4px !important;

        color:#ffffff !important;

        font-size:15px;

        font-weight:600;

    }


    .navbar-vivexa
    .nav-link:hover{

        color:#F68B1F !important;

    }


    /* =========================================
       OCULTAR DROPDOWN DESKTOP
    ========================================= */

    .desktop-services{

        display:none !important;

    }


    .navbar-vivexa
    .nav-item.dropdown{

        border-bottom:0;

    }


    .navbar-vivexa
    .nav-item.dropdown
    > .dropdown-menu{

        display:none !important;

    }


    /* =========================================
       SERVICIOS MÓVIL
    ========================================= */

    .mobile-services-menu{

        display:block;

        width:100%;

    }


    .mobile-services-toggle{

        width:100%;

        min-height:52px;

        padding:12px 4px;

        display:flex;

        align-items:center;

        justify-content:space-between;

        background:transparent;

        border:0;

        color:#fff;

        font-family:inherit;

        font-size:15px;

        font-weight:600;

        cursor:pointer;

    }


    .mobile-services-toggle i{

        color:#F68B1F;

        font-size:13px;

        transition:.25s;

    }


    .mobile-services-toggle.active i{

        transform:rotate(180deg);

    }


    .mobile-services-toggle:hover{

        color:#F68B1F;

    }


    /* =========================================
       SUBMENÚ
    ========================================= */

    .mobile-services-submenu{

        display:none;

        padding:4px 0 10px 12px;

        margin-bottom:4px;

        border-left:
            2px solid #F68B1F;

    }


    .mobile-services-submenu.active{

        display:block;

        animation:
            vivexaMenuIn .25s ease;

    }


    .mobile-services-submenu a{

        display:flex;

        align-items:center;

        gap:12px;

        min-height:45px;

        padding:8px 12px;

        color:#D7E2ED;

        text-decoration:none;

        border-radius:8px;

        font-size:13px;

        font-weight:500;

        transition:.2s;

    }


    .mobile-services-submenu a i{

        width:20px;

        color:#F68B1F;

        font-size:14px;

        text-align:center;

    }


    .mobile-services-submenu a:hover{

        background:rgba(255,255,255,.07);

        color:#fff;

        padding-left:16px;

    }


    /* =========================================
       LOGIN
    ========================================= */

    .vivexa-login{

        width:100%;

        margin-top:15px;

        padding-top:15px;

        border-top:
            1px solid rgba(255,255,255,.10);

    }


    .vivexa-login .btn{

        width:100%;

        min-height:50px;

        justify-content:center;

        background:#F68B1F;

        border-color:#F68B1F;

        color:#fff;

        font-size:14px;

        font-weight:700;

        border-radius:10px;

    }


    .vivexa-login .btn:hover{

        background:#FF9C32;

        border-color:#FF9C32;

    }


    .vivexa-login
    .dropdown-menu{

        position:static !important;

        width:100%;

        margin-top:8px !important;

        padding:6px;

        background:#10284B;

        border:1px solid rgba(255,255,255,.08);

        box-shadow:none;

        border-radius:10px;

    }


    .vivexa-login
    .dropdown-item{

        min-height:45px;

        color:#fff;

        border-radius:8px;

    }


    .vivexa-login
    .dropdown-item:hover{

        background:rgba(255,255,255,.08);

        color:#fff;

    }


    .vivexa-login
    .dropdown-item i{

        color:#F68B1F;

    }

}


/* =====================================================
   ANIMACIÓN
===================================================== */

@keyframes vivexaMenuIn{

    from{

        opacity:0;

        transform:translateY(-5px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* =====================================================
   TELÉFONOS PEQUEÑOS
===================================================== */

@media(max-width:480px){

    .navbar-vivexa
    .container{

        min-height:78px;

    }


    .navbar-brand img{

        max-height:43px;

    }


    .navbar-toggler{

        width:45px;

        height:45px;

    }


    .navbar-collapse{

        max-height:calc(100vh - 78px);

    }

}