.main-header{
    background:#0e1122;
    padding-top:20px;
    padding-bottom:20px;
}
.header-logo img{
    height:22px;
}
.header-nav ul{
    margin-bottom:0;
}
.header-nav ul li{
    display:inline-block;
}
.header-nav ul li a{
    color:var(--white);
    font:15px 'WorkSans-Medium';
    text-decoration:none;
    transition:all .4s ease;
}
.header-nav ul li:not(:first-child){
    margin-left:40px;
}
.header-nav ul li.active a,.header-nav ul li:hover a{
    background: linear-gradient(138.57deg, #F1E4B7 0%, #F5F1CE 45.63%, #F7C67D 103.06%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-image: linear-gradient(138.57deg, #F1E4B7 0%, #F5F1CE 45.63%, #F7C67D 103.06%);
    border-image-slice: 1;
}
/* light mode header */
.light-mode .main-header{
    background:var(--white);
}
.light-mode .header-nav ul li a{
    color:var(--dark-bg);
}
.light-mode .header-nav ul li.active a,.light-mode .header-nav ul li:hover a{
    background: linear-gradient(138.57deg, #D0B35D 0%, #D0B35D 45.63%, #D0B35D 103.06%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-image: linear-gradient(138.57deg, #D0B35D 0%, #D0B35D 45.63%, #D0B35D 103.06%);
    border-image-slice: 1;
}
.mobile-close,.mobile-menu{
    display:none;
}
@media screen and (max-width:992px){
    .header-nav ul li:not(:first-child){
        margin-left:32px;
    }
}
@media screen and (max-width:767px){
    .header-nav{
        position:fixed;
        width:100%;
        left:0;
        top:0;
        height:100vh;
        overflow:auto;
        background-color:var(--dark-bg);
        padding-top:22px;
        z-index:9999;
        transition:all .6s ease;
        transform: translate(100%);
    }
    .transform00{
        transform:translate(0) !important;
    }
    .header-nav ul{
        padding-top:40px;
    }
    .header-nav ul li{
        display:block;
        margin-top:20px;
        text-align:center;
    }
    .header-nav ul li:not(:first-child){
        margin-left:0;
    }
    .mobile-close{
        margin-left: auto;
        margin-right: 22px;
    }
    .mobile-close,.mobile-menu{
        display:block;
        border:0;
        padding:0;
        background:transparent;
    }
    .header-content{
        justify-content:center !important;
        position:relative;
    }
    .mobile-menu{
        position:absolute;
        position: absolute;
        left: 0;
        top: -3px;
    }
    .light-mode .header-nav{
        background-color:var(--light-bg);
    }
    .light-mode .mobile-close svg path,.light-mode .mobile-menu svg path{
        fill:var(--dark-bg);
    }
}