.logo{
    display: flex;
    flex-direction: column !important;
}

.logo-title-area{
    color: #F7F8FA;
    /* font-weight: 700;; */
}

.logo-box{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.logo-title{
    text-decoration: underline var(--primary-color);
    text-underline-offset: 2px;
    font-size: 20px !important;
    margin-bottom: 2px;
}

.logo-title-area{
    text-align: center;
    letter-spacing: 1px;
    margin-left: 5px;
    /* margin-bottom: -5px; */
}

.logo-sub-title{
    font-size: 12px;
    margin-top: -5px;
}

.logo-menu{
    font-size: 18px !important;
    color: #F7F8FA !important;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
}

#logo{
    background-color: #161616 !important;
}

.logo-menu.logo-menu-header-scrolled{
    color: white !important;
    font-weight: 600;
}

.header-font{
    line-height:25.05px;
    vertical-align:baseline;
    letter-spacing:0.3px;
    font-weight:600;
}

.nav-opt{
    color:#F7F8FA !important;
    font-weight: bold;
}

.opt,.opt-scrolled{
    transition: 0.2s;
    border-radius: 5px;
}

.opt:hover, .opt-scrolled:hover{
    background-color: #D9D9D9;
}

.nav-opt:hover{
    color:#161616 !important;   
}

.nav-opt.nav-header-scrolled{
    /* color: white !important; */
    font-weight: 600;
    font-size:15px;
}

#header {
    z-index: 997;
    padding: 2px 0;
    background: #353535;
    width: 100%;
}

#header.header-scrolled {
    /* background: var(--primary-color); */
    /* background: linear-gradient(160deg, var(--primary-color), #d1ed02); */
    /* background: linear-gradient(183deg, #ff8700,#ff500f); */
    background: #353535;
    padding: 5px 0;
    top:0;
    animation-name: upToDown;
    animation-duration: 0.3s;
    position: fixed;
}

.btn-simu-area{
    padding: 0px 20px;
    margin-left: 20px;
}

.menu-btn {
    position: relative;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.bars {
    width: 35px;
    height: 3px;
    background-color: #F7F8FA;
    margin: 3px 0;
    transition: 0.4s;
}

.navbar{
    padding: 0px !important;
}

.bars-scrolled{
    background-color: white;
}
  
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-6px, -6px);
    transform: rotate(45deg) translate(-6px, -6px);
}

.logo-header{
    width: 40px;
}



/* #logo-header-white{
    display: none;
} */

@keyframes upToDown {
    from {
        top:-200px;
    }
    to {
        top: 0;
    }
}

@media (max-width: 991px){
    .menu-btn{
        display: flex !important;
    }

    .btn-simu-area{
        padding: 0px;
        margin-left:0px;
    }

    .opt, .opt-scrolled{
        padding-left: 10px;
        margin-bottom: 10px;
    }
}

@media (max-width: 767px){
    .menu-box{
        padding: 5px 0px;
    }
}