.header {
    box-shadow: 0px 6px 7px 0px #0000001A;
    background: $bg-light;
    position: relative;

    .m-header {
        .head-item {
            background: $light-blue;
            padding: $space10 $space20;
            @include flex;

            .toggle-bar {
                border-radius: 10px;
                padding: 8px;
                display: inline-block;

                img {
                    display: block;
                }

                &.menu-btn {
                    background: $primary-color;
                }

                &.user-btn {
                    background: #066AC91A;
                }
            }

            .logo {
                width: 120px;
            }

            .toggle-bar,
            .logo {
                img {
                    width: auto;
                    height: auto;
                }
            }
        }
    }

    .d-header {
        .top-header {

            .logo,
            .user-section {
                display: none;
            }
        }
    }

    .sidebar {
        position: fixed;
        background: $white;
        top: 0;
        left: -110%;
        right: 0;
        bottom: 0;
        width: 68%;
        height: 100vh;
        z-index: 2;
        padding: $space25 $space20 $space10;

        .user {
            display: flex;
            align-items: center;
            margin-bottom: $space25;

            .user-name {
                @include font-size(18px);
                line-height: 22px;
                font-family: $robotomedium;
                color: $title-color;
                margin-left: 7px;
            }
        }

        .nav-list1 .single-link,
        .nav-list2 .single-link,
        .logout-btn {
            img {
                width: auto;
                height: auto;
            }
        }

        .nav-list1,
        .nav-list2 {
            .single-link {
                @include font-size(16px);
                line-height: 16px;
                color: $title-color;
            }
        }

        .nav-list1 {
            display: flex;
            flex-wrap: wrap;

            .single-link {
                width: 39%;
                background: $light-blue;
                border-radius: 10px;
                padding: $space10;
                margin-bottom: 13px;

                &:nth-of-type(odd) {
                    margin-right: 13px;
                }

                &:nth-of-type(n+3) {
                    margin-bottom: 0;
                }

                img {
                    display: block;
                    margin-bottom: 7px;
                }
            }

        }

        .small-head {
            @include font-size(16px);
            line-height: 16px;
            font-family: $robotomedium;
            color: $subtitle-color;
            text-transform: uppercase;
            margin: $space25 0 $space15;
        }

        .nav-list2 {
            .single-link {
                display: flex;
                align-items: center;
                margin-bottom: $space15;

                img {
                    margin-right: 8px;
                }

                &:nth-last-of-type(1) {
                    margin-bottom: 0;
                }
            }

        }

        .dropdown {
            &.support {
                display: none;
            }
        }

        .logout-btn {
            @include flex;
            padding: $space15;
            background: $light-blue;
            @include font-size(18px);
            line-height: 22px;
            font-family: $robotomedium;
            color: $title-color;
            border-radius: 10px;
            margin-top: $space35 - 1;
        }

        .d-link {
            display: none;
        }
    }

    .search-popup {
        position: fixed;
        top: 0;
        bottom: 0;
        left: -110%;
        width: 100%;
        height: 100vh;
        background: $white;
        z-index: 13;

        .search-form {
            @include flex;
            position: relative;
            border-bottom: $common-border;
            padding: $space15 $space20;

            .search-field {
                width: 100%;
                @include font-size(14px);
                line-height: 18px;
                color: $title-color;

                &::placeholder {
                    color: $placeholder-color;
                }
            }

            .search-btn {
                padding: 0;
                background: transparent;
                width: fit-content;
                margin-right: $space10;

                img {
                    width: 18px;
                    height: 18px;
                }
            }

            .search-btn,
            .close-popup {
                display: inline-flex;
            }
        }

        .search-body {
            padding: $space15 $space20 0;

            .clist {
                display: flex;
                flex-wrap: wrap;
                margin-bottom: $space25;

                .clink {
                    @include font-size(14px);
                    line-height: 14px;
                    background: $white;
                    border: $common-border;
                    padding: 7px;
                    border-radius: 5px;
                    margin-right: $space10;
                    margin-bottom: $space10;

                    img {
                        vertical-align: sub;
                        margin-right: $space10;
                    }
                }
            }
        }

        .head {
            @include font-size(15px);
            line-height: 16px;
            color: $title-color;
            margin-bottom: $space15;
            user-select: none;

            img {
                margin-right: $space10 - 2;
                vertical-align: text-top;
            }

            .clear {
                @include font-size(14px);
                line-height: 16px;
                color: $primary-color;
                font-family: $robotomedium;
                text-decoration: underline;
                margin-left: $space25;

                &:hover {
                    color: $primary-hover;
                }
            }
        }

        .trending-search,
        .recent-search {
            .head {
                margin-bottom: 0;
            }

            .search-list {
                .slink {
                    @include font-size(13px);
                    line-height: 16px;
                    color: $subtitle-color;
                }
            }
        }

        .trending-search {
            .head {
                padding: 0 $space15;
                margin-bottom: $space5+2;
            }

            .search-list {
                display: flex;
                flex-direction: column;

                .slink {
                    border-bottom: $common-border;
                    padding: 8px $space20;

                    &:nth-last-of-type(1) {
                        border-bottom: none;
                    }
                }
            }
        }

        .recent-search {
            margin-bottom: $space15;

            .head {
                @include flex;
            }

            .search-list {
                .slink {
                    display: inline-block;
                    padding: $space15 0;

                    &::after {
                        content: ',';
                        display: inline-block;
                        margin: 0 2px;
                    }

                    &:nth-last-of-type(1) {
                        &::after {
                            content: '.';
                        }
                    }
                }
            }
        }

        @keyframes searchSlideIn {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }

            0% {
                opacity: 0;
            }
        }

        &.show {
            display: block;
            animation-duration: 0.3s;
            animation-fill-mode: both;
            animation-name: searchSlideIn;
        }
    }
}

.sidebar-overlay,
.overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
    cursor: pointer;
}

.noscroll {
    overflow: hidden;
}

.h-fixed {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: unset;
    z-index: 1;
    animation: smoothScroll 0.3s forwards;
    box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.1019607843);
}

@keyframes smoothScroll {
    0% {
        transform: translateY(-40px);
    }

    100% {
        transform: translateY(0px);
    }
}

@media screen and (min-width:385px) {
    .header {
        .sidebar {
            .nav-list1 {
                .single-link {
                    width: 39.8%;
                }
            }
        }

        .search-popup {
            .search-body {
                .clist {
                    .clink {
                        padding: $space10;
                    }
                }
            }
        }
    }
}

@media screen and (min-width:412px) {
    .header {
        .sidebar {
            .nav-list1 {
                .single-link {
                    width: 40.5%;
                }
            }
        }
    }
}

@media screen and (min-width:768px) {
    .header {
        margin-bottom: $space30;

        .sidebar {
            width: 50%;
        }

        .search-popup {
            .head {
                @include font-size(16px);
                line-height: 18px;
            }

            .search-body {
                .clist {
                    .clink {
                        margin-right: $space15;
                        margin-bottom: 0;
                    }
                }
            }

            .trending-search,
            .recent-search {
                .search-list {
                    .slink {
                        @include font-size(14px);
                        line-height: 18px;
                    }
                }
            }
        }
    }

    .overlay {
        z-index: 12;
    }
}

@media only screen and (max-width:768px) {
    .footer {
        position: unset;
    }
}

@media screen and (min-width:1024px) {
    .header {

        .m-header {
            display: none;
        }

        .d-header {

            padding: $space10 $space30 $space10 0;
            @include font-size(15px);
            line-height: 18px;

            .top-header {
                @include flex;
                position: relative;

                .logo {
                    display: block;
                    width: 12%;
                }

                .user-section {
                    @include flex;
                    width: 12%;

                    img {
                        vertical-align: middle;
                        width: auto;
                        height: auto;
                    }

                    .search {
                        img {
                            width: 20px;
                            height: 20px;
                        }
                    }

                    .notification {
                        position: relative;
                        padding: 0 8px;

                        img {
                            margin-right: 0;
                            height: 25px;
                        }

                        .count {
                            @include font-size(11px);
                            line-height: 10px;
                            position: absolute;
                            top: 1px;
                            right: 5px;
                            color: $white;
                            background: #D03636;
                            width: 15px;
                            height: 9px;
                            border-radius: 50%;
                            text-align: center;
                            padding: 3px 0;

                        }
                    }

                    .user {
                        img {
                            width: 28px;
                            height: 28px;
                        }

                        &::after {
                            content: '';
                            background: url('../images/dropdown-1.svg') no-repeat;
                            display: inline-block;
                            height: 9px;
                            width: 15px;
                            margin-left: $space5;

                        }
                    }

                    .notification,
                    .user,
                    .search {
                        cursor: pointer;
                        transition: 0.3s all ease-in-out;

                        &:hover {
                            opacity: 0.8;
                        }
                    }
                }

            }

        }

        .sidebar {
            position: unset;
            height: unset;
            width: unset;
            z-index: unset;
            background: $bg-light;
            padding: 0;

            .user,
            .logout-btn {
                display: none;
            }

            .nav-list1 {
                display: inline-block;

                .single-link {
                    width: unset;
                    background: transparent;
                    padding: 0;
                    border-radius: unset;

                    img {
                        display: none;
                    }
                }
            }

            .nav-list1 .single-link,
            .small-head,
            .nav-list2 .single-link,
            .d-link {
                @include font-size(14px);
                line-height: 16px;
                font-family: $robotoregular;
                margin: 0 $space5 0 0 !important;
                display: inline-block;
            }

            .nav-list1 .single-link,
            .d-link {
                transition: 0.3s all ease-in-out;
                // border-bottom: 2px solid transparent;

                &.active {
                    color: $primary-color;
                    // border-bottom-color: $primary-color;
                }
            }

            .dropdown {
                position: relative;
                display: inline-block;

                &.support {
                    display: inline-block;
                }

                .nav-head {
                    cursor: pointer;

                    &::after {
                        content: '';
                        background: url('../images/dropdown.svg') no-repeat;
                        display: inline-block;
                        height: 9px;
                        width: 15px;
                        margin-left: 2px;
                        transition: 0.3s all ease-in-out;
                    }

                    &.active {
                        &::after {
                            transform: rotate(180deg);
                        }
                    }
                }

                .nav-list2 {
                    position: absolute;
                    display: none;
                    width: 210px;
                    left: 0;
                    top: 39px;
                    background: $white;
                    border-radius: 5px;
                    border: $common-border;
                    padding: $space10 0;
                    z-index: 1;

                    @keyframes dropdownslideIn {
                        0% {
                            transform: translateY(1rem);
                            opacity: 0;
                        }

                        100% {
                            transform: translateY(0rem);
                            opacity: 1;
                        }

                        0% {
                            transform: translateY(1rem);
                            opacity: 0;
                        }
                    }

                    &.show {
                        display: block;
                        animation-duration: 0.3s;
                        animation-fill-mode: both;
                        animation-name: dropdownslideIn;
                    }

                    .single-link {
                        margin: 0 0 $space10 0 !important;
                        padding: $space5 $space15;
                        display: flex;

                        &:nth-last-of-type(1) {
                            margin: 0 !important;
                        }

                        &:hover {
                            background: #066ac91a;
                        }
                    }
                }

                &:nth-last-of-type(1) {
                    .small-head {
                        margin-right: 0 !important;
                    }
                }

            }

            .small-head {
                color: $title-color;
                text-transform: capitalize;
            }

        }

        .search-popup {
            left: 0;
            bottom: unset;
            right: 0;
            height: fit-content;
            display: none;
            background: $bg-light;

            .search-body {
                padding: $space15 $space15 0;

                .clist {
                    flex-wrap: nowrap;
                }
            }

            .search-form {
                border-bottom: none;
                background: $white;
                padding: $space15+1 $space15;

                .close-popup {
                    cursor: pointer;

                    img {
                        width: 16px;
                        height: 16px;
                    }
                }
            }

            .trending-search {
                .head {
                    margin-bottom: 0;
                }

                .search-list {
                    .slink {
                        padding: $space15;
                    }
                }
            }

            .recent-search {
                .head {
                    display: block;
                }
            }
        }

    }
}

@media screen and (min-width:1366px) {
    .header {
        margin-bottom: $space35;

        .d-header {
            .top-header {
                .logo {
                    width: 12%;
                }
            }
        }

        .sidebar {

            .nav-list1 .single-link,
            .small-head,
            .nav-list2 .single-link,
            .d-link {
                @include font-size(15px);
                line-height: 18px;
                margin: 0 $space20 0 0 !important;
            }

            .dropdown {
                .nav-list2 {
                    width: 278px;
                    top: 46px;
                }

                .nav-head {
                    &::after {
                        margin-left: $space5;
                    }
                }
            }
        }

        .d-header {
            .top-header {

                .user-section {
                    width: 10%;

                    img {
                        width: auto !important;
                        height: auto !important;
                    }


                }
            }

        }
    }
}