header{
    display: flex;
    z-index:999;
   /* position: fixed;*/
    top:0;
    left:0;
    width: 100%;   
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-white);
  /*  background: var(--main-black-color);
    background: linear-gradient(rgba(0, 0, 0, 0.948),rgba(0, 0, 0, 0.172) );
    box-shadow: 0 5px 25px rgb(0 0 0 / 20% ); */
    padding: 0 100px;
    transition: 0.6s;
}

header .logo{
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
   
}

header .logo img {
    margin:1.2rem 0;
    max-width: 100%;
    width: 180px;  
}

header .navigation{
    position: relative;
    line-height: 75px;
}

header .navigation .menu{
    position: relative;
    display: flex;
    justify-content: center;
    list-style: none;
    user-select: none;
    /*margin-top: 18px;*/


}

.menu-item > a{
    color:var(--text-yellow);
    font-weight: bold;
    font-size:1em;
    text-decoration: none;
    margin:20px;
    padding:25px 0;

}

.menu-item > a:hover{
    color:rgb(217, 35, 45)!important;
    transition: 200ms;
  
 
}


.menu-item .sub-menu{
    position: absolute;
    background: rgb(217, 35, 45);
    top:74px;
    line-height: 40px;
    list-style:none;
    border-radius: 4px; 
    box-shadow: 0 5px 25px rgb(0 0 0 / 25%);
    pointer-events: none;
    transform:translate(4px , 6px);
    opacity:0;
    transition: 0.3s;
    transition-property: transform, opacity;
     margin-left: 1.3rem;

    white-space: nowrap;

 
}






.menu-item:hover .sub-menu{
    pointer-events: all;
    transform:translate(0);
    opacity:1;
    z-index: 1;
  
}


.menu-item .sub-menu .sub-item{
    position:relative;
    padding: 1px 0;
    cursor: pointer;

    box-shadow: inset 0px -30px 5px -30px rgba(255,255,255,0.2);
}

.menu-item .sub-menu .sub-item a{

  

    color:#fff;
    font-size: 0.9rem;
    text-decoration: none;
    padding:15px;
    font-weight:bold;


}

.menu-item .sub-menu .sub-item a:hover{

    color: var(--text-dark);
    transition:0.2s


}


.menu-item .sub-menu .sub-item:last-child:hover{
  /*  border-radius: 0 0 8px 8px; */


}

.more .more-menu{
    position: absolute;
    background: var(--main-black-color);
    list-style: none;
    top:0;
    left:100%;
    white-space: nowrap;
    border-radius: 0 8px 8px 8px;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(10px);
    opacity: 0;
    transition: 0.2s;
    transition-property: transform, opacity;
}

.more:hover .more-menu{
    pointer-events: all;
    transform: translateY(0px);
    opacity:1 ;
}

.more .more-menu .more-item{
    padding:7px 0;
    box-shadow: inset 0px -30px 5px -30px rgba(255,255,255,0.2);
    transition:0.2s
}

.more .more-menu .more-item:hover{
    background: var(--main-yellow);
    transition:0.2s
}
.menu-btn{
    display: none;
}

.close-btn{

    
    color:transparent
    
   

}





@media ( max-width:1200px ){
    
    header{
    
        background: var(--main-black-color);

        box-shadow: 0 5px 25px rgb(0 0 0 / 20% );
    
        transition: 0.6s;
    }

    header .navigation{
        z-index: 1000;
        
        line-height: 40px;
    }

    header .navigation .menu{

        position: fixed;
        display: block;
        background:rgb(34, 31, 31);
        min-width: 350px;
        height: 100vh;
        top:0;
        right: -100%;
        padding:70px 30px;
        visibility: hidden;
        overflow-y: auto;
        transition: 0.4s;
        transition-property:right,visibility;


    }

    header .navigation .menu.active{
        right:0;
        visibility: visible;
    }

    header .logo img {

        width: 120px;  
        transition: 0.4s;
    }



    .menu-item{
        position: relative;
    }
    .menu-item > a{
        color:var(--text-light);
                  
    }

    .menu-item > a:hover{

        color:var(--main-extra-dark);
        
    }

    .menu-item .sub-menu{
        opacity:1;
        position: relative;
        top:0;
        transform: translateX(10px);
        background:rgb(217, 35, 45)!important;
        border-radius: 5px;
        overflow: hidden;
        display: none

    }
    .menu-item:hover .sub-menu{
    
        transform: translateX(10px);
 

    }

    .menu-item .sub-menu .sub-item {
  
        box-shadow: none;
    }

    .menu-item .sub-menu .sub-item:hover{

        background: none
    }
    .menu-item .sub-menu .sub-item a:hover{

        color:var(--main-yellow);
        transition:0.2s
    }

    .more .more-menu{

        opacity: 1;
        position: relative;
        left:0;
        transform: translateY(0);
        background: rgba(255,255,255,0.1);
        border-radius:5px;
        display: none;

    }

    .more .more-menu .more-item{

        box-shadow: none;
    }
    .more .more-menu .more-item:hover{
        background:none;
        color:var(--main-extra-dark);

    }

    .more .more-menu .more-item a{
        margin-left: 20px
    }
    
    .close-btn{

        position:absolute;
        color:#fff;
        font-size: 1.5rem;
   
        width:40px;
        height:40px;

        top: 0;
        left: 0;
        margin: 25px;
        cursor: pointer;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;

    }

    .menu-btn{
        color:rgb(217, 35, 45);
        width:40px;
        height:40px;
        cursor: pointer;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
      
    }

    header{

        padding: 15px 20px
    }



}