@import "../../var";

/*header:start*/ 
header{
    display: flex;
    width: 100%;
    padding:0 16px;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    height: 80px;
    background: $bright_gray;
    &.header-fixed{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }
    .logo{
        width: 90px;
        display: none;
    }
    .header-wrap{
        width: 100%;
        display: flex;
        position: relative;
        z-index: 999;
        .hamburger,
        .close-menu{
            position: relative;
        }
        .close-menu{
            transform: rotate(180deg);
        }
    }
}

.menu{
    width: 100%;
    position: fixed;
    left: -100%;
    top: 0;
    transition: 0.5s;
    opacity: 0;
    z-index: 998;
    background: $bright_gray;
    height: 100vh;
    padding-top: 80px;
    ul{
        width: 100%;
        li{
            width: 100%;
            margin-top: 10px;
            a{
                display: flex;
                padding: 13px 30px;
                width: 100%;
                &.active,
                &:hover{
                    background-color: $color_gold_drop;
                }
            }
        }
    }
    .section-two{
        margin-top: 20px;
    }
    .section-three{
        margin-top: 60px;
    }
    &.menu-open{
        left: 0;
        opacity: 1;
    }
}
body.active{
    overflow: hidden;
}
body.active{
    .menu{
        left: 0;
        opacity: 1;
    }
}
/*header:end*/