header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: top .5s ease-in-out;
    z-index: 9;
    &.affix{
        position: fixed;
        -webkit-animation: fix 0.5s;
        animation: fix 0.5s;
        @include media-breakpoint-up(lg){
            .logo-blk{
                display: none;
            }
        }
    }
    @-webkit-keyframes fix {
        from {top: -100px;}
        to {top: 0px;}
    }
    @keyframes fix {
        from {top: -100px;}
        to {top: 0px;}
    }
    @include media-breakpoint-down(md){
        padding: 5px 0;
    }
    .logo-blk{
        min-width: 130px;
        .logo-inner-blk{
            z-index: 1;
            top: 10px;
        }
        @include media-breakpoint-down(sm) {
            min-width: 100px;
            .logo-inner-blk{
                width: calc(100% - 30px);
            }
        }
        @include media-breakpoint-down(xs) {
            min-width: 80px;
            .logo-inner-blk{
                width: calc(100% - 30px);
            }
        }
    }
    .main-menu{
        font-size: 14px;
            @include media-breakpoint-up(xl){
                li{
                    &:first-child{
                        a{
                            html[dir="ltr"] &{padding-left: 0;}
                            html[dir="rtl"] &{padding-right: 0;}
                        }
                    }
                }
            }
            @include media-breakpoint-up(lg){
                li{
                    height: 50px;
                    line-height: 50px;
                    display: inline-block;
                    a, span{
                        color: $white;
                        display: inline-block;
                        width: 100%;
                        height: 100%;
                        padding: 0 10px;
                    }
                    &.find-location{
                        a{
                            img{
                                html[dir="ltr"] &{margin-right: 5px;}
                                html[dir="rtl"] &{margin-left: 5px;}
                            }
                        }
                    }
                }
            }
        
        @include media-breakpoint-down(md){
            position: fixed;
            width: 100%;
            height: 100vh;
            top: 0;
            z-index: 9;
            background: $gray-100;
            transition: all 0.5s ease-in-out;
            display: flex !important;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            min-height: 100vh;
            min-height: -webkit-fill-available;
            html[dir="ltr"] &{left: -100%;}
            html[dir="rtl"] &{right: -100%;}
            &.active{
                html[dir="ltr"] &{left: 0;}
                html[dir="rtl"] &{right: 0;}
                .icon-close{
                    transform: rotate(90deg);
                }
            }
            li{
                &.find-location{
                    html[dir="ltr"] &{border-right: 1px solid $gray-200; padding-right: 10px;}
                    html[dir="rtl"] &{border-left: 1px solid $gray-200; padding-left: 10px;}
                    line-height: 20px;
                    a{
                        img{
                            display: none;
                        }
                    }
                }
            }
            .main-navigation{
                @include media-breakpoint-down(md){
                    padding: 0px 5px !important;
                }
                & > li{
                    &:first-child{
                        display: none;
                    }
                    margin-bottom: 20px;
                    font-size: 15px;
                }
            }
        }
        .lang-btn{
            line-height: 50px;
            padding: 0 10px;
            &:hover, &:focus, &:active{
                text-decoration: none;
            }
            @include media-breakpoint-down(md){
                color: $secondary !important;
                padding-left: 15px;
                line-height: initial;
            }
            &.en{
                html[dir="ltr"] &{
                    display: none;
                }
            }
            &.ar{
                font-family: $font-family-arabic;
                html[dir="rtl"] &{
                    display: none;
                }
            }
        }
        li{
            a, span{
                color: $secondary;
                font-weight: 700;
                cursor: pointer;
                &:hover, &:focus, &:active{
                    text-decoration: none;
                }
            }
            &.mega-menu{
                transition: all 0.3s ease-in-out;
                ul{
                    list-style-type: none;
                }
                li{
                    height: auto;
                    line-height: initial;
                }
                & > ul{
                    position: absolute;
                    width: 100%;
                    padding: 0;
                    left: 0;
                    right: 0;
                    z-index: 99;
                    display: none;
                    @include media-breakpoint-up(lg){
                        box-shadow: 0 3px 4px rgba(0, 0, 0, 0.20);
                    }
                    @include media-breakpoint-down(md){
                        position: relative;
                        & > li{
                            &.menu-container{
                                padding: rem(10) 0;
                                background: transparent !important;
                            }
                        }
                    }
                    & > li{
                        height: auto;
                        line-height: initial;
                        &.menu-container{
                            width: 100%;
                            padding: rem(24) rem(30);
                            ul{
                                padding: 0;
                            }
                            .submenu-tab-blk{
                                height: auto;
                                line-height: initial;
                                width: 100%;    
                                margin-bottom: 20px; 
                                @include media-breakpoint-down(md){
                                    margin-bottom: 0; 
                                }
                                ul{
                                    width: 100%;
                                    max-width: 73%;
                                    border-bottom: 1px solid $border-color;
                                    @include media-breakpoint-down(md){
                                        max-width: 100%;
                                        border-bottom: 0;
                                    }
                                    li{
                                        font-weight: 700;
                                        font-size: rem(16);
                                        text-transform: uppercase;
                                        color: $grey-400;
                                        border-bottom: 3px solid transparent;
                                        margin-right: rem(20);
                                        padding: 10px 0;
                                        cursor: pointer;
                                        display: inline-block;
                                        span{
                                            color: $grey-400;
                                        }
                                        &.active{
                                            color: $secondary;
                                            border-bottom: 3px solid $primary;
                                            span{
                                                color: $secondary;
                                            }
                                        }
                                        @include media-breakpoint-down(md){
                                            font-size: 12px;
                                            border-bottom: 0px !important;
                                            color: $grey-400 !important;
                                            span{
                                                color: $grey-400 !important;
                                            }
                                        }
                                    }
                                }                           
                            }
                            .sub-menu-tab-blk{
                                height: auto;
                                line-height: initial;
                                width: 100%;
                                .tab-listing{
                                    width: 100%;
                                    & > ul{
                                        width: 100%;
                                        display: flex;
                                        height: auto;
                                        line-height: initial;
                                        & > li{
                                            flex: 1;
                                            height: auto;
                                            line-height: initial;
                                            img{
                                                max-width: 100%;
                                            }
                                            &.menu-listing-container{
                                                height: auto;
                                                line-height: initial;
                                                max-width: 75%;
                                                flex: 0 0 75%;
                                                max-height: 390px;
                                                .mCSB_container{
                                                    margin: 0px !important;
                                                    html[dir="ltr"] &{padding-right: 25px;}
                                                    html[dir="rtl"] &{padding-left: 25px;}
                                                }
                                                .mCSB_scrollTools{
                                                    html[dir="ltr"] &{right: 20px;}
                                                    html[dir="rtl"] &{left: 20px;}
                                                }
                                                ul{
                                                    display: flex;
                                                    flex-wrap: wrap;
                                                    li{
                                                        height: auto;
                                                        line-height: initial;
                                                        span, a{
                                                            display: flex;
                                                            flex-direction: column;
                                                            width: 100%;
                                                            max-width: 100%;
                                                            align-items: center;
                                                            padding: rem(20) rem(15);
                                                            font-weight: 700;
                                                            font-size: rem(16);
                                                            color: $text-color;
                                                            cursor: pointer;
                                                            text-align: center;
                                                            font-family: $font-family-sans-serif !important;
                                                            img{
                                                                margin-bottom: 10px;
                                                            }
                                                            &:hover{
                                                                background-color: $white;
                                                                box-shadow: 0 2px 9px rgba($dark, 0.06);
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                            @include media-breakpoint-down(md){
                                                &.menu-ad{
                                                    display: none;
                                                }
                                                &.menu-listing-container{
                                                    max-width: 100%;
                                                    flex: 0 0 100%;
                                                    li{
                                                        background: $white;
                                                        border: 1px solid #fafafa;
                                                        a{
                                                            padding: 10px 0px !important;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                &:hover{
                    background: $gray-100;
                    span{
                        color: $secondary;
                    }
                    ul{
                        display: block;
                    }
                }
                @include media-breakpoint-up(lg){
                    &.skip-menubanner{
                        & > ul{
                                width: 85%;
                                .menu-listing-container{
                                    max-width: 100%;
                                    -webkit-box-flex: 0;
                                    -webkit-flex: 0 0 100%;
                                    -moz-box-flex: 0;
                                    -ms-flex: 0 0 100%;
                                    flex: 0 0 100%;
                                }
                                li.menu-container .sub-menu-tab-blk .tab-listing>ul>li.menu-listing-container{
                                        max-width: 100%;
                                        -webkit-box-flex: 0;
                                        -webkit-flex: 0 0 100%;
                                        -moz-box-flex: 0;
                                        -ms-flex: 0 0 100%;
                                        flex: 0 0 100%;
                                
                                }
                                li.menu-container .submenu-tab-blk ul{
                                    max-width: 100%;
                                    
                                }
                                
                            }
                        }
                }
            }
        }
    }
    .menu-icon{
        font-size: 22px;
    }
    .menu-close{
        font-size: 16px;
        .icon-close{
            transform: rotate(0deg);
            transition: transform 0.7s ease-in-out;
        }
    }
}
#main{
    padding-top: 50px;
    @include media-breakpoint-down(md){
        padding-top: 45px;
    }
}