.admin-bar{
    .#{$prefix}-mobile-menu-section{
        top: 30px;
        .blook-close-icon-section{
            top: 60px;
        }
    }
}
.#{$prefix}-mobile-menu-section{
    position: fixed;
    top: 0;  
    width: calc(100% - 30px);
    right: -100%;
    height: 100vh;
    background-color: $color_black;
    color: $color_white;
    z-index: 10;
    overflow: scroll;
    padding: 90px 0 30px;
    @include transition();
    &.open{
        right: 0;
        .blook-close-icon-section{
            position: fixed;
            z-index: 11;
            right: calc(100% - 50px);
            @include media(xs){
                right: 330px;
            }
        }
    }
    @include media(xs){
        right: -600px;
        width: 350px;
    }
    a{
        color: $color_white;
        &:visited{
            color: $color_white;
        }
    }
  
    .blook-close-icon-section{
        right: -100%;
        top: 45px;
        @include transition();
    }
  
    .down-arrow,
    .right-arrow{
        position: relative;
        &:after{
            content: '\f273';
            @extend %ionicons;
            display: inline-block;
            position: absolute;
            right: 0;
            top: 0;
            width: 40px;
            text-align: center;
            font-size: 18px;
            opacity: 0.8;
            padding-top: 8px;
            z-index: 1;
        }
        >a{
            margin-right: 40px;
            @include border-right();
            border-color: rgba($color_white,0.63);
        }
       
    }
    ul{
        @extend %reset-ul;
        &.nav-menu,
        &.#{$prefix}-nav-menu{
            font-weight: $font_weight_semi_bold;
            font-size: 16px;
            @include border-bottom();
            border-color: rgba($color_white,0.63);
            .brand-home{
                display: none;
            }
            li{
                @include border-top();
                border-color: rgba($color_white,0.63);
            }
            a{
                padding: 10px 15px;   
                display: block;
                position: relative;
                .menu-description{
                    margin: 0 5px;
                    &:after{
                        content: none;
                    }
                   
                }
            }
            li{
                &:hover,
                &:focus-within{
                    >.children,
                    >.sub-menu{
                       opacity: 1;
                        height: auto;
                        overflow : visible;
                    }
                }
            }
            .children,
            .sub-menu{
                font-weight: $font_weight_normal;
                opacity: 0;
                height: 0;
                overflow: hidden;
                @include transition();
               
            }
        }
    }

}