/*====================================
        MENU FINAL CSS
====================================*/

nav{
    width:100%;
	 position:relative;
    z-index:99999;
    overflow:visible;
}

nav .wrapper{
    display:flex;
    align-items:center;
     height:90px;
    position:relative;
     z-index:99999;
     align-items:center;
    justify-content:space-between;
}

/*------------------------
    MENU
-------------------------*/

.nav-links{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    list-style:none;
    margin:0;   /* only 20px from logo */
    padding:0;
    flex-wrap:nowrap;
 }

.nav-links li{

    position:relative;
}

.nav-links li a{

 display:flex;
    align-items:center;
    white-space:nowrap;
    gap:5px;
    padding:12px 12px;

    color:#222;

    text-decoration:none;

    font-size:15px;

    font-weight:500;

    transition:.3s;
	
}

.nav-links li a:hover{

    background:#0b2d83;
    color:#fff;
}

/*------------------------
    DROPDOWN
-------------------------*/

.drop-menu{

    position:absolute;

    left:0;
    top:100%;

    width:230px;

    background:#0b2d83;

    opacity:0;
    visibility:hidden;

    transform:translateY(10px);

    transition:.30s;

    z-index:999999;}

.nav-links li:hover>.drop-menu{

    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.drop-menu li{

    width:100%;
}

.drop-menu li a{

    color:#fff;
    padding:12px 15px;
}

.drop-menu li a:hover{

    background:#ffffff;
    color:#000;
}

/*------------------------
     BUTTONS
-------------------------*/

.wrapper .btn{

    display:none;

    font-size:30px;

    cursor:pointer;

    color:#0b2d83;
}

.menu-btn{

    position:absolute;

    right:0;

    top:50%;

    transform:translateY(-50%);
}

.close-btn{

    display:none;
}

nav input{

    display:none;
}

.mobile-item{

    display:none;
}

/*====================================
        1400
====================================*/

@media(max-width:1400px){

.nav-links li a{

    padding:10px 8px;
    font-size:14px;
}

}

/*====================================
        1200
====================================*/

@media(max-width:1200px){

.nav-links li a{

    padding:9px 8px;
    font-size:12px;
}

}

/*====================================
        TABLET
====================================*/

/*====================================
        TABLET & MOBILE
====================================*/

@media (max-width:991px){

nav .wrapper{
    height:70px;
    padding:0 15px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.wrapper .btn{
    display:block;
    font-size:30px;
    color:#0b2d83;
    cursor:pointer;
    z-index:99999;
}

.menu-btn{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
}

.nav-links{
    position:fixed;
    top:-40px;
    left:-190vw;
    width:100vw;
    max-width:100vw;
    height:calc(100dvh - 70px);

    background:#1f1f1f;

    display:block;

    margin:0;
    padding:10px 0 30px;

    overflow-y:auto;
    overflow-x:hidden;

    transition:left .35s ease;

    z-index:999999;
}

#menu-btn:checked ~ .nav-links{
    left:-45vw;
	
}
.nav-links li{
    display:block;
    width:100%;
}

.nav-links li a,
.mobile-item{
    display:flex;
    align-items:center;
    justify-content:space-between;

    width:100%;
    padding:16px 20px;

    color:#fff;
    font-size:16px;
    font-weight:500;

    text-decoration:none;

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

    white-space:normal;
}

.nav-links li a:hover,
.mobile-item:hover{
    background:#0b2d83;
    color:#fff;
}

.mobile-item{
    display:flex;
    position:relative;
}

.mobile-item::after{
    content:"+";
    font-size:20px;
    font-weight:bold;
}

.desktop-item{
    display:none !important;
}

.close-btn{
    display:block;
    position:absolute;
    right:18px;
    top:12px;
    color:#fff;
    font-size:30px;
}

.drop-menu{
    position:static;
    width:100%;

    background:#333;

    opacity:1;
    visibility:visible;
    transform:none;

    max-height:0;
    overflow:hidden;

    transition:max-height .35s ease;
}

#showDrop1:checked ~ .drop-menu,
#showDrop2:checked ~ .drop-menu,
#showDrop3:checked ~ .drop-menu,
#showDrop4:checked ~ .drop-menu{
    max-height:600px;
}

.drop-menu li a{
    padding:14px 40px;
    color:#ddd;
    border:none;
}
}
/*====================================
        MOBILE
====================================*/

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

@media (max-width:768px){

nav .wrapper{
    height:65px;
}

.nav-links{
    top:-40px;
    width:100vw;
    max-width:100vw;
    height:calc(100dvh - 65px);
    left:-150vw;
}

.nav-links li a,
.mobile-item{
    padding:16px 18px;
    font-size:15px;
}

}
@media (max-width:480px){

nav .wrapper{
    height:60px;
}

.nav-links{
    top:-30px;
    width:100vw;
    max-width:100vw;
    height:calc(100dvh - 60px);
    left:-150vw;
	
}

.nav-links li a,
.mobile-item{
    font-size:16px;
    padding:18px;
}

.drop-menu li a{
    padding-left:30px;
}

}