/* ============================================================================
NAV 
============================================================================*/

/* Top */
#nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: #FFF;
}
#nav .container-fluid{
    padding: 10px 40px;
}
#nav .btn-nav{
    background: #162656;
    color: #fff;
    font-weight: 300;
    padding-left: 15px;
    padding-right: 15px;
}

#nav .btn-nav i{
    margin-right: 5px;
}

#nav .row{
    align-items: center;
}

#nav .email, #nav .phone{
    display: flex;
    align-items: center;
    padding: 0 10px;
}
#nav .contact {
    display: flex;
}
#nav .email i, #nav .phone i{
    color: var(--dark-blue);
    margin-right: 10px;
    font-size: 20px;
}

#nav .email a, #nav .phone a{
    text-decoration: none;
    font-size: 20px;
    font-weight: 900;
    color: var(--darkBlue);
}

#nav .email a:hover, #nav .phone a:hover{
    color: var(--yellow);
}

#nav .logo img{
    height: 63px;
    width: 176px;
    margin: 0 auto;
    display: block;
}

#nav .search{
    display: flex;
    justify-content: end;
}

#nav .search .btn{
    margin-left: 20px;
}

#nav .search form{
    position: relative;
}

#nav .search button{
    background: none;
    border: none;
    position: absolute;
    top: 5px;
    right: 5px;
}

#nav .search button i{
    color: #111F4A
}

#nav .search input {
    height: 38px;
    border: 1px solid #707070;
    border-radius: 5px;
    padding-left: 20px;
    padding-right: 20px;
}

@media(max-width:1350px){
    #nav .container-fluid{
        padding: 20px 50px;
    }
}
@media(max-width: 1200px){
    #nav .logo img {
        height: 56px;
        width: 160px;
    }
}
@media(max-width:991px){
    #nav .container-fluid{
        padding: 20px 15px;
    }
    
    #nav .email{
        justify-content: end;
    }
    
    #nav .logo img{
        margin: 0;
    }
}
@media(max-width: 767px){
    #nav .logo img {
        height: 48px;
        width: 145px;
    }
}
@media(max-width:576px){
    #nav .email a i{
        color: var(--darkBlue);
        font-size: 25px;
    }
    #nav .contact {
        justify-content: flex-end;
    }
}

/* Menu */


#mega-menu-wrap-menu-1{
    background: #172245!important;
    display: flex!important;
    justify-content: center!important;
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1{
    padding: 5px 0;
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link{
    background: transparent!important;
    color: #fff!important;
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link{
    font-size: 16px!important;
    font-weight: 300!important;
    font-family: 'Open Sans', sans-serif !important;
    padding: 0 20px!important;
    background: transparent!important;
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link:hover{
    background: transparent!important;
    color: var(--yellow)!important;
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link{
    background: #172245!important;
    color: #FFFFFF!important;
    text-align: center!important;
    padding: 10px!important;
    font-family: 'Open Sans', sans-serif !important;
    
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-flyout ul.mega-sub-menu{
    border-bottom: 5px solid #F4BF00 !important;
     box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover{
    background: #172245!important;
    color: var(--yellow)!important
        
}

@media(max-width:1200px){
    #mega-menu-wrap-menu-1{
        background: #172245!important;
        display: block!important;
    }
    #mega-menu-wrap-menu-1 .mega-menu-toggle{
        background: none!important;
    }
    #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner,
    #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::before,
    #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::after{
        width: 32px!important;
    }
    #mega-menu-wrap-menu-1 .mega-menu-toggle + #mega-menu-menu-1{
        background: #172245!important
    }
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link{
        text-align: left!important;
        padding: 0 50px!important;
    }
}