.header-category {
	position: relative;
	width: 100%;
	.title{
		border-radius: 6px;
		background: #EF5D28;
		color: #fff;
		border: 1px solid transparent;
		height: 38px;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		font-weight: 600;
		font-size: 16px;
		svg{
			margin-right: 8px;
			path{
				stroke: #fff;
			}
		}
		&:hover{
			border: 1px solid var(--primary-color);
			//color: var(--primary-color);
			//background: transparent;
			path{
				stroke: var(--primary-color);
			}
		}
	}

}
@media (min-width: 991px){
	.categories{
		position: absolute;
		width: 100%;
		left: 0;
		z-index: 99;
		visibility: hidden;
		opacity: 0;
		transition-property: opacity,visibility;
		transition-duration: 0.4s;
		transition-delay: 0.2;
		transition-timing-function: ease;
		&.show{
			visibility: visible;
			opacity: 1;
		}
		.inner{
			background: #edf0f3;
			position: relative;
			z-index: 99;
		}
		.backdrop-categories {
			background-color: #363636;
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0 !important;
			left: 0 !important;
			opacity: 0.5;
		}
		.nav-cate{
			background: #fff;
			width: 300px;
			position: relative;
			z-index: 9;
			@media (max-width: 1199px) and (min-width: 991px){
				width: 220px;
			}
			ul{
				width: 100%;
				//min-height: 428.5px;
				overflow: visible;
				border-top: none;
				li {
					display: block;
					overflow: visible;
					cursor: pointer;

					.nd-categories-a{
						label{
							margin-bottom: 0;
						}
						span{
							overflow: hidden;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}
						position: relative;
						display: block;
						color: #000;
						padding: 9px 15px 9px 40px;
						border-bottom: 1px dotted #e1e1e1;
						margin: 0;
						font-size: 14px;
						.icon{
							position: absolute;
                            top: 6px;
                            height: 24px;
                            width: 24px;
                            left: 9px;
						}
						svg{
							width: 10px;
							height: 10px;
							position: absolute;
							top: 15px;
							right: 10px;
							path, rect{
								fill: #000;
							}
						}
						&:hover, &:focus{
							color: #fff;
							background: var(--primary-color);
							svg{
								path{
									fill: #fff;
								}
							}
						}
					}
					.icon-down{
						position: absolute;
						right: 0;
						top: 0;
						height: 40px;
						display: flex;
						align-items: center;
						width: 30px;
						justify-content: center;
						svg{
							width: 10px;
							height: 10px;
							path, rect{
								fill: #000;
							}
						}
					}
					&:last-child{
						.nd-categories-a{
							border-bottom:none;
						}
					}
					&.dropdown{
						position: relative;
						&.active{
							position: static;
							.nd-categories-a{
								color: #fff;
								background: var(--primary-color);
								svg{
									path{
										fill: #fff;
									}
								}
							}
						}
						.nd-categories-a{
							padding-right: 30px;
						}
						/*
						@media(min-width: 992px){
						&:hover{
						.subcate{
						display:block;
					}
					}
					}
						*/
						&.active{
							.subcate{
								display:block;
							}
						}
					}
					.subcate{
						display: none;
						cursor: default;
						//overflow: hidden;
						position: absolute;
						top: 0;
						left: 100%;
						//min-height: 100% !important;
						padding: 15px;
						width: 880px;
						background: #edf0f3;
						@media (max-width: 1199px) and (min-width: 991px){
							width: 720px;
						}
						.margin{
							margin-right: -5px;
							margin-left: -5px;
						}
						.item {
							padding: 0 5px;
							margin-bottom: 10px;
							font-size: 14px;
							.nd-categories-main-sub{
								display: flex;
								align-items: center;
								//font-family: 'font-500';
								font-weight: 700;
								color: var(--text-color);
								&:hover, &:focus{
									color: var(--secondary-color);
								}

							}
							.list-nd-categories-main-sub{
								margin-top: 5px;
								//font-family: 'font-300';
								.nd-categories-main-sub-a{
									color: var(--text-color);
									&:hover, &:focus{
										color: var(--primary-color);
									}
								}
								.view-all {
									position: relative;
									display: block;
									color: var(--primary-color);
									margin-top: 5px;
									&:hover{
										color: #231f20;
									}
									svg{
										width: 10px;
										height: 10px;
										position: relative;
										top: -1px;
									}
								}
							}

						}

					}
				}
			}
		}

	}
}