
.nav {
    background: $white;
    .navbar-inner {
        padding: 0 calc(var(--bs-gutter-x, .75rem) * 2);
    }
    .search-text{
        input{
            margin-bottom: 0;
            height: 48px;
            border-color: transparent;
        }
    }
    .search-device-sm {       
        display: none;
    } 
    .header-address {
        background: $body-bg;
        padding: 10px 24px;
        margin-right: 15px;
    }
    .location-device-sm {
        display: none;
    }
    .top-menu {
        .nav-item {
            display: inline-flex;
            align-items: center;
            .nav-link {
                padding: 0 30px 0 0;
                position: relative;
                font-weight: 500;
                color: $dark;
                text-transform: uppercase;
                letter-spacing: 3px;
                font-size: 0.875rem;  
                line-height: 24px;          
                &.active{
                    color: $primary;
                }
                
                &:hover {
                    color: $primary;
                }
                &.iq-dropdown-btn{
                    &:hover {   
                        &:before {
                            opacity: 0;
                        }
                    }
                }
            }
            &.btn-nav-link{
                padding-left: 30px;
            }
            &:first-child{
                padding-left:30px;
            }
        }
        .user-dropdown{
            top: 100%;
            .dropdown-item{
                transition: all 0.5s ease-in-out;
                &:hover{ 
                    color:$white;
                    background-color: $primary;
                }                
            }
        }
    }
    &.navbar-scroll{
        &.menu-sticky{
            box-shadow: $box-shadow-lg;
        }
    }
    .navbar-brand{
        display: flex;
        align-items: center;
        padding-top: 10px;
        padding-bottom: 10px;
        width: 150px;
        .logo-title{
            margin-left: $spacer;
            color: $dark;
            margin-bottom: 0;
            z-index: 1;
        }
    } 
    .sidebar-toggle {
        height: 26px;
        width: 26px;
        line-height: 19px;
        text-align: center;
        position: absolute;
        left: 20px;
        right: auto;
        top: auto;
        cursor: pointer;
        background: $primary;
        color: $white;
        z-index: $zindex-general + 11;
        display: none;
        padding: 0.2rem;
        @if $enable-rounded == true {
            border-radius: $border-radius-lg;
        }
        @if $enable-shadows == true {
            box-shadow: $component-active-shadow;
        }
    }
    .navbar-toggler {
        .navbar-toggler-icon {
            background-image: none;
            line-height: 0;
            .navbar-toggler-bar {
                display: inline-block;
                position: relative;
                width: 26px;
                height: 4px;
                border-radius: 1px;
                background: $body-color;
                transition: all 400ms ease;
                margin: 0 auto;
            }
            .navbar-toggler-bar{
                &.bar2, &.bar3 {
                    margin-top: 3px;
                }
            }

            // .navbar-toggler-bar.bar3 {
            //     margin-top: 7px;
            // }
        }
    }
    .navbar-toggler[aria-expanded=true] {
        .navbar-toggler-bar.bar1 {
            transform: rotate( 45deg );
            transform-origin: 22% 177%;
            margin-top: 4px;
        }
        .navbar-toggler-bar.bar2 {
            opacity: 0;
        }
        .navbar-toggler-bar.bar3 {
            transform: rotate( -45deg );
            transform-origin: 18% -90%;
            margin-top: 0px;
        }
    }
    
       
}
.bottom-menu {
    position: relative;
    overflow: hidden;
    .menu-item {
        .menu-link {
            padding: 1rem 1.25rem;
            color: $body-color;
            &:hover {
                color: $primary;
            }
            &.active {
                color: $primary;
            }
        }
    }
}
//navbar color
.iq-navbar.navs-color {
	background: $primary;
    .navbar-nav{
		.nav-item{           
			.nav-link{
				color: $white;
            }
        }
    }
}
.iq-navbar {
    z-index: $zindex-general - 10;
    transform: translate3d(0,0,0);
    transition: transform 0.5s ease-in;
    &.nav-glass{
        background:linear-gradient(120deg, rgba($white, 0.5) -8%, rgba($white, 0.01) 120%);
        backdrop-filter: blur(10px);
        border-bottom: $border-width solid $white;
        .navbar-nav {
            @include top-nav-link;
        }
    }
    &.navbar-expand-lg {
        &.navs-transparent {
            background: transparent;
            @include top-nav-link;
        }
    }
    &.navs-sticky {
        position: sticky;
        top: 0;
        width: 100%;
    }
    &.menu-sticky {
        position: fixed;
        top: 0;
        left:0;
        right: 0;
        animation: slideInDown 1.25s;
        transition: all 400ms ease;
    }
    .dropdown {
        .dropdown-menu {
            top: 110%;
            -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
            animation: fade-in-bottom 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
        }
        .dropdown-menu {
            &.sub-drop {
                width: 300px;
                border-radius: $border-radius;
                -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
                animation: fade-in-bottom 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
                li {
                    a {
                        color: $body-color;
                    }
                }

                .iq-sub-card {
                    cursor: pointer;
                    padding: .75rem 1.25rem !important;
                    display: inline-block;
                    width: 100%;
                    color: $body-color;
                    transition: all 400ms ease;
                    &:hover{
                        background: tint-color($primary, 90%)
                    }
                    &:not(:last-child) {
                        border-bottom: $border-width solid $border-color;
                    }
                    &:last-child {
                        border-bottom-left-radius: $border-radius;
                        border-bottom-right-radius: $border-radius;
                    }
                }
            }
        }
    }
}
.iq-navbar-header {
    .iq-header-img {
        overflow: hidden;
        border-radius: $border-radius-lg;
        img {
            object-fit: cover;
        }
    }
    &.navs-bg-color {
        .iq-header-img {
            background: $primary;
            img {
                display: none;
            }
        }
    }
    
}

.nav-underline{
    .nav-link{
        text-transform: uppercase;
        letter-spacing: 3px;
    }
}

  
  @-webkit-keyframes fade-in-bottom {
    0% {
      -webkit-transform: translateY(50px);
      transform: translateY(50px);
      -webkit-opacity: 0;
      -moz-opacity: 0;
      -ms-opacity: 0;
      -o-opacity: 0;
      opacity: 0; }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-opacity: 1;
      -moz-opacity: 1;
      -ms-opacity: 1;
      -o-opacity: 1;
      opacity: 1; } }
  
  @keyframes fade-in-bottom {
    0% {
      -webkit-transform: translateY(50px);
      transform: translateY(50px);
      -webkit-opacity: 0;
      -moz-opacity: 0;
      -ms-opacity: 0;
      -o-opacity: 0;
      opacity: 0; }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-opacity: 1;
      -moz-opacity: 1;
      -ms-opacity: 1;
      -o-opacity: 1;
      opacity: 1; } }
@include media-breakpoint-down(xl) {
    .nav {
        .sidebar-toggle {
            display: block;
        }
    }
}

@include media-breakpoint-down(lg){
    .iq-navbar {
            .navbar-collapse {
                &:not(.offcanvas-collapse) {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                flex-grow: unset;
                background: $white;
                z-index: 1;
                box-shadow: $box-shadow-sm;
                transition: all 400ms ease;
            }
           
        }
    }
}

//UI kit Navbars
.header{
    background-size: cover;
    background-repeat: no-repeat;
    height: 18.75rem;
    .navbar-light{
        .navbar-toggler{
            .navbar-toggler-icon{
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280,0,0,0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
            }
        }
        .navbar-nav{
            .nav-item{
                .nav-link{
                    color: $gray-600;
                    @include hover-focus-active {
                    color: $primary;
                    }
                }
            }
        }
    }
}

.search-device-sm,.search-device-lg{
    top-width.dropdown-menu {
        width: 100%;
    }
}

.sidebar+.main-content{
    .iq-navbar.navs-sticky{
        &.menu-sticky {
            width: calc(100% - 16.2rem);
        }
    }
}
.sidebar.sidebar-mini+.main-content{
    .iq-navbar.navs-sticky{
        &.menu-sticky {
            width: calc(100% - 4.8rem);
        }
    }
}

@include media-breakpoint-down(lg) {
    .iq-navbar.navs-sticky{
        &.menu-sticky {
            width: 100% !important;
        }
    }
}

@include media-breakpoint-down(sm) {
    .iq-navbar {
        .navbar-collapse{
            .navbar-nav{
                li{
                    position: static;
                    .sub-drop{
                        &.dropdown-menu{
                            margin: auto;
                            left: 0;
                            right: 0;
                        }
                    }
                }
            }
        }
    }
}

@media(max-width:1199px){
    .navbar-toggler{
        position: relative;
        z-index: 99;
        padding: 0;
        height: 40px;
        width: 40px;
        line-height: 40px;
        margin-left: 15px;
        background: $body-bg;
    }
    .nav{
        padding:0;
        .navbar-brand{
            width: 130px;
            margin-right: 0;
            padding: 0;
            .logo{
                max-width: 100%;
            }
        }
        
        .top-menu {         
            .nav-item {
                display: block;
                .nav-link{
                    text-align: left;
                    padding: 0; 
                    line-height: normal;                  
                }
            }
        }

    } 
  

    header{        
        .iq-navbar{
            .navbar-collapse:not(.offcanvas-collapse){
                .navbar-nav{
                    flex-direction: column;
                    float: none;
                    align-items: flex-start;
                    justify-content: flex-start;
                    li{
                        padding:0 0 0 0 !important;
                        margin-bottom: 30px;
                    }
                }
            } 
        } 
    }
    
    .navbar-collapse {
        position: fixed;
        top: 0;
        right: 0;
        line-height: 0;
        left: auto;
        display: inline-block;
        width: 300px;
        height: 100vh;
        z-index: 1;
        box-shadow: 0 10px 30px 0 rgba(23,28,37,0.1);
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        transition: transform .3s ease-in;
        background: $white;
        padding: 70px 30px 30px;
        &.show{
            transform: translateX(0);
            -webkit-transform: translateX(0);
            -moz-transform: translateX(0);
        }
    }
}

.search-text{
    .search-icon{
        top:50%;
        transform: translateY(-50%);
    }
}

@media(max-width: 1550px) {
    .nav{       
        .search-device-lg{
            display: none;
        }
        .search-device-sm {
            display: block;
            height: 40px;
            width: 40px;
            line-height: 40px;
            text-align: center;
            background: $body-bg;
            .search-icon {                    
                vertical-align: middle;
            }
            .search-content{
                position: absolute;
                top:60px;
                left:auto;
                right: 0;
                width:300px;
                margin: auto;
                z-index: 999;
                opacity: 0;
                transition: opacity 0.5s ease-in-out;
                pointer-events: none;
                visibility: hidden;
                input{
                    border-radius: 0 !important;
                    height: 50px;
                }                
            }
             &.search-open{
                .search-content{
                    opacity: 1;  
                    pointer-events: auto;
                    visibility: visible;                  
                }
             }
        }
        .location-device-lg{
            display: none;
        }
        .location-device-sm{
            display: block;
            -moz-transform: translateY(3px);
            -webkit-transform: translateY(3px);
            -o-transform: translateY(3px);
            -ms-transform: translateY(3px);
            transform: translateY(3px);
            .header-address{
                background: transparent;
                padding: 0;
                height: 40px;
                width: 40px;
                line-height: 40px;
                text-align: center;
                background: $body-bg;
                svg{
                    width: 14px;
                    stroke: var(--bs-body-color);
                }
            }
            .location-content {
                position: absolute;
                top: 60px;
                left: auto;
                right: 0;
                width: 300px;
                margin: auto;
                z-index: 999;
                opacity: 0;
                padding: 10px 15px;
                background-color: $body-bg;
                -webkit-transition: opacity 0.5s ease-in-out;
                -o-transition: opacity 0.5s ease-in-out;
                transition: opacity 0.5s ease-in-out;
                pointer-events: none;
                visibility: hidden;
            }
        }
        .location-device-sm{
            .location-content.open {
                opacity: 1;
                pointer-events: auto;
                visibility: visible;
            }
        }
    }    
}

@media (max-width: 1199px){
    .nav{
    .location-device-sm{
        -moz-transform: translateY(0);
        -webkit-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    }
}

@media (max-width: 479px) {
    .nav {
        .search-device-sm {
            .search-content{
                width: 200px;
            }
        }
        .location-device-sm {
            .location-content {
                width: 160px;
            }
        }
    }
}

@keyframes slideInDown {
    0% {
        transform: translate3d(0,-100%,0);
        visibility: visible;
    }
    100% {
        transform: translate3d(0,0,0);
    }
}

@media (max-width: 850px){
.nav{
     ul.dropdown-menu.user-dropdown.show {
        width: 100%;
        position: relative;
        top: -2px;
        float: left;
    }
}
}

@media (max-width: 480px){
    .nav{
        .search-device-sm{
            .search-content {
                width: 100%;
                position: fixed;
                top: 78px;
                form {
                    margin: 0 1em;
                }
            }
        }
    }
}

@media (max-width: 400px){
    .nav{
        .navbar-brand{
            width: 80px;
        }
    }
}