.primary-navigation {
	.menu-wrapper {
		@media (min-width: 992px) {
			display: flex;
			flex-wrap: wrap;
		}
		list-style: none;
		margin: 0;
		padding-left: 0;

		li {
			display: flex;
			position: relative;

			@media (max-width: 992px) {
				flex-wrap: wrap;

				.sub-menu-toggle {
					&[aria-expanded="true"] {
						.icon-minus {
							display: block;
						}

						.icon-plus {
							display: none;
						}
					}
				}
			}

			> a {
				display: block;
				padding: 13px;
				color: $black;

				@media (min-width: 992px) {
					width: 100%;
				}

				@media (max-width: 992px) {
					flex: auto;
					width: auto;
				}

				+ .sub-menu-toggle {
					margin-left: -25px;
				}
			}

			&.menu-item-has-children {
				&:hover {
					@media (min-width: 992px) {
						> .sub-menu-toggle {
							.icon-minus {
								display: block;
							}

							.icon-plus {
								display: none;
							}
						}
					}

					> ul {
						@media (min-width: 992px) {
							opacity: 1;
							transform: translateY(0);
							transition: opacity 0.15s linear, transform 0.15s linear;
							pointer-events: auto;
						}
					}
				}
			}

			.sub-menu {
				> li {
					> a {
						&:hover {
							background-color: #f5f5f5;
						}
					}
				}
			}

			.sub-menu-toggle {
				display: flex;
				height: 52px;
				width: 44px;
				padding: 0;
				justify-content: center;
				align-items: center;
				background: transparent;
				color: currentColor;
				border: none;
				font-size: 18px;
				cursor: pointer;
				transition: all 0.4s ease;

				.icon-minus {
					display: none;
				}

				@media (max-width: 991px) {
					margin-left: auto;
				}
			}
		}

		.sub-menu {
			margin: 0;
			min-width: 220px;
			z-index: 88888;
			background-color: $white;
			padding: 0;
			list-style: none;

			@media (max-width: 991px) {
				display: none;
				width: 100%;
				padding-left: 15px;

			}

			@media (min-width: 992px) {
				left: 0;
				position: absolute;
				opacity: 0;
				top: 100%;
				transition: opacity 0.15s linear, transform 0.15s linear, right 0s 0.15s;
				transform: translateY(0.6rem);
				pointer-events: none;
			}

			.menu-item-has-children {
				display: flex;

				> a {
					@media (min-width: 992px) {
						width: 100%;
					}

					@media (max-width: 992px) {
						flex: auto;
						width: auto;
					}
				}

				&:hover {
					background-color: #f5f5f5;

					.sub-menu-toggle {
						background-color: #f5f5f5;
					}
				}

				.sub-menu-toggle {
					margin-left: auto;
					height: auto;
				}
			}

			.sub-menu {
				left: 100%;
				top: 0;
			}
		}
	}

	.menu-button-container {
		@media (min-width: 992px) {
			display: none;
		}
		padding: 15px;
	}
}

.site-branding {
	> .custom-logo-link {
		display: inline-block;
		color:rgba($secondary, 1);

		> img {
			max-width: 160px;
		}
	}

	.bajaar-site-title{
		margin-top: 0;
		margin-bottom: 8px;
		line-height: 1;
		color: rgba($primary, 1);
	}

	.bajaar-site-tagline{
		margin: 0;
		line-height: 1;
		color: rgba($secondary, 1);
	}

	@media (max-width: 991px) {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	@media (min-width: 992px) {
		align-self: center;
	}
}

.header-row {
	@media (min-width: 992px) {
		display: flex;

		.primary-navigation-wraper {
			margin-left: auto;
			display: flex;
			align-items: center;
		}
	}
}

.primary-menu-wraper {
	padding: 15px 0;
}

@media (min-width: 991px) {
	.menu-button-container {
		display: none;
	}
}

@media (max-width: 991px) {
	.primary-navigation {
		position: fixed;
		left: -100%;
		top: 0;
		height: 100vh;
		width: 290px;
		max-width: 100%;
		background-color: #fff;
		z-index: 90;
		transition: left 0.5s ease-in-out 0s;
		overflow-y: auto;
	}

	.nav_menu_open {
		.primary-navigation,
		.nav-menu-backdrop {
			left: 0;
		}
		.primary-navigation {
			transition-delay: 0.2s;
		}
		.nav-menu-backdrop {
			transition-delay: 0s;
		}
	}
	.primary-menu-container {
		padding: 50px 0;
		position: relative;
		overflow-y: auto;
	}
	.nav-toggle-button {
		border: none;
		outline: none;
		line-height: 1;
		background-color: transparent;
		width: 20px;
		display: block;
		padding: 0;

		&.toggle {
			.dropdown-icon {
				&:nth-child(1) {
					transform: rotate(45deg) translateX(4px) translateY(4px);
				}

				&:nth-child(2) {
					transform: scaleX(0);
					transform-origin: left;
				}

				&:nth-child(3) {
					transform: rotate(-45deg) translateX(4px) translateY(-5px);
				}
			}
		}
		.dropdown-icon {
			height: 1px;
			width: 100%;
			display: block;
			background-color: $black;
			transition: all 0.4s ease;

			&:not(:last-child) {
				margin-bottom: 5px;
			}
		}
	}
	.nav-menu-backdrop {
		position: fixed;
		top: 0;
		left: -100%;
		height: 100%;
		width: 100%;
		overflow: hidden;
		background-color: rgba($color: #000000, $alpha: 0.4);
		transition: left 0.5s ease-in-out 0.2s;
		z-index: 89;
	}
}