/* @@@@@@@@@@@@@  Mobile Menu Section Start Here  @@@@@@@@@@@@@@ */
.mobile-menu {
    @include breakpoint(xl) {
        display: none;
    }
    .mobile-header {
        padding: 5px 15px;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 99;
        align-items: center;
        justify-content: space-between;
        background: $white-color;
        @extend %flex;
        box-shadow: 0 0 3px rgba(0,0,0,0.1);
        .header-bar {
            @extend %rel;
            width: 25px;
            height: 25px;
            cursor: pointer;
            span {
                background: $theme-color;
                width: 100%;
                height: 3px;
                display: block;
                left: 0;
                top: 50%;
                margin-top: -1px;
                transform-origin: center;
                @include transition($transition);
                @extend %abs;
                &:nth-child(1) {
                    margin-top: -9px;
                }
                &:nth-child(2) {
                    opacity: 1;
                }
                &:nth-child(3) {
                    margin-top: 7px;
                }
            }
            &.close {
                opacity: 1;
                span:nth-child(1) {
                    transform: rotate(-45deg);
                    margin-top: -1px;
                }
                span:nth-child(2) {
                    opacity: 0;
                }
                span:nth-child(3) {
                    transform: rotate(45deg);
                    margin-top: -1px;
                }
            }
        }
        &.menu-fixed {
            background: $white-color;
        }
    }
    .mobile-menu {
        position: fixed;
        top: 70px;
        left: 0;
        z-index: 99;
        background: $white-color;
        width: 100%;
        transform: scaleY(0);
        transform-origin: top;
        height: 100vh;
        overflow-y: scroll;
        padding: 0 20px;
        padding-bottom: 60px;
        @include transition($transition);
        @include breakpoint(sm) {
            width: 50%;
            transform: scaleX(0);
            transform-origin: left;
        }
        &.open {
            transform: scaleY(1);
            @include breakpoint(sm) {
                transform: scaleX(1);
            }
            @include breakpoint(xl) {
                display: none;
            }
        }
        .mobile-menu-area {
            .mobile-menu-area-inner {
                @extend %flex;
                justify-content: center;
                align-items: center;
                padding: 20px 0;
                ul {
                    text-align: center;
                    margin: 0;
                    padding: 30px 0;
                    width : 100%;
                    li {
                        list-style: none;
                        padding: 0;
                        @extend %rel;
                        &.active {
                            > a {
                                color: $theme-color;
                            }
                        }
                        &:last-child {
                            >a {
                                border-bottom: none;
                            }
                        }
                        a {
                            display: block !important;
                            padding: 10px 0;
                            color: $title-color;
                            text-transform: capitalize;
                            margin: 2px 0;
                            text-align: left;
                            outline: none;
                            font-weight: 500;
                            width: 100%;
                            border-bottom: 1px solid $border-color;
                            &::after {
                                right: 0;
                            }
                            &.active {
                                color: $theme-color;
                                &.dd-icon-down {
                                    &::after, &::before {
                                        background: $theme-color;
                                    }
                                }
                            }
                        }
                        ul {
                            display: none;
                            margin: 0;
                            padding: 0;
                            li{
                                padding-left: 20px;
                                a {
                                    margin: 0;
                                    outline: none;
                                    font-size: 96%;
                                }
                            }
                        }
                        &.menu-item-has-children {
                            position: relative;
                            >a {
                                @extend %rel;
                                &::after {
                                    @extend %abs;
                                    top: 50%;
                                    right: 0;
                                    transform: translateY(-50%);
                                    font-weight: 400;
                                    content: "\ea99" !important;
                                    font-family: IcoFont !important;
                                }
                            }
                        }
                    }
                }
                .social-link-list {
                    width : 100%;
                }
                .mobile-search {
                    @extend %rel;
                    width: 100%;
                    input {
                        border: none;
                        border-bottom: 1px solid $border-color;
                        height: 60px;
                        margin: 0;
                        padding-right: 35px;
                        font-style: italic;
                        @include border-radius(0);
                        &:focus,
                        &::placeholder {
                            color: $title-color;
                        }
                    }
                    button {
                        @extend %abs;
                        top: 0;
                        right: 0;
                        background-color: transparent;
                        color: $title-color;
                        width: 30px;
                        height: 60px;
                        outline: none;
                        border: none;
                        font-size: $fs-h6;
                        text-align: center;
                    }
                }
            }
        }
    }
}