.pxl-nav-menu {
	/* Menu*/
	.pxl-menu-primary {
		display: inline-flex;
		align-items: center;
		flex-wrap: nowrap;
		width: 100%;
		gap: 4px;
		li > a {
			color: inherit;
		}
		> li {
			position: relative;
			display: inline-block;
			vertical-align: middle;
			color: var(--dark-1);
			> a {
				display: inline-block;
				line-height: 89px;
				padding-inline: 18px;
				@extend .h6;
				color: inherit;
			}
			.pxl-menu-item-text {
				position: relative;
				z-index: 99;
			}
			.sub-menu {
				li {
					padding-inline: 20px;
					position: relative;
					@extend .h6;
					font-size: 15px;
					color: var(--dark-1);
					z-index: -3;
					.sub-menu li {
						z-index: 1;
						.sub-menu li {
							z-index: 2;
							.sub-menu li {
								z-index: 3;
								.sub-menu li {
									z-index: 4;
								}
							}
						}
					}
				}
			}
			&.pxl-megamenu {
				position: static;
				.sub-menu {
					padding-block: 35px;
					padding-inline: 30px;
					background-color: #FFF;
					border-radius: 0;
					border-top: 1px solid #d7d7d7;
				}
			}
		}
	}
	// Menu Hover
	&.menu-hover-default {
		.pxl-menu-primary > li {
			--hover-bg-color: transparent;
			> a {
				--hover-color: var(--primary-color);
				&:hover, &.current-menu-hover {
					color: var(--hover-color);
					background-color: var(--hover-bg-color);
				}
			}
			> a.pxl-onepage-active,
	        &.current_page_item > a,
	        &.current-menu-item > a,
	        &.current_page_ancestor > a,
	        &.current-menu-ancestor > a {
				color: var(--hover-color);
				background-color: var(--hover-bg-color);
		    }
		}
	}
	&.menu-hover-box-green {
		.pxl-menu-primary > li {
			--hover-bg-color: var(--primary-color);
			> a {
				--hover-color: #FFF;
				position: relative; 
				transition-duration: .25s;
				&::after, &::before {
					position: absolute;
					content: '';
					padding-block: 20px;
					background-color: var(--hover-bg-color);
					top: 50%;
					transform: translateY(-50%);
					@include transition(width .3s ease, left .3s ease, right .3s ease); 
				}
				&::after {
					width: var(--afterWidth, 0);
					left: var(--afterLeft, auto);
					right: var(--afterRight, 0);
				}
				&::before {
					width: var(--beforeWidth, 0);
					right: var(--beforeRight, auto);
					left: var(--beforeLeft, 0);
				}
				&:hover, &.current-menu-hover {
					color: var(--hover-color);
				}
			}
			> a.pxl-onepage-active,
	        &.current_page_item > a,
	        &.current-menu-item > a,
	        &.current_page_ancestor > a,
	        &.current-menu-ancestor > a {
				color: var(--hover-color);
				&::after {
					width: 100%;
				}
		    }
		}
	}

	&.menu-hover-devider-below {
		.pxl-menu-primary > li {
			--hover-bg-color: var(--primary-color);
			> a {
				--hover-color: #FFF;
				position: relative; 
				transition-duration: .25s;
				&::after, &::before {
					position: absolute;
					content: '';
					background-color: var(--hover-bg-color);
					bottom: 0;
					height: 4px;
					@include box-shadow(0px 4px 20px 0px rgba(74, 171, 61, 0.60));
					@include transition(width .3s ease, left .3s ease, right .3s ease); 
				}
				&::after {
					width: var(--afterWidth, 0);
					left: var(--afterLeft, auto);
					right: var(--afterRight, 0);
				}
				&::before {
					width: var(--beforeWidth, 0);
					right: var(--beforeRight, auto);
					left: var(--beforeLeft, 0);
				}
				&:hover, &.current-menu-hover {
					color: var(--hover-color);
				}
			}
			> a.pxl-onepage-active,
	        &.current_page_item > a,
	        &.current-menu-item > a,
	        &.current-menu-ancestor > a {
				color: var(--hover-color);
				&::after {
					width: 100%;
				}
		    }
		}
	}


	/* Sub Menu */
	.sub-menu li.menu-item-has-children > a:after {
		content: "\f14d";
		position: absolute;
		top: 50%;
		right: 24px;
		@include transform(translate(0, -50%));
		font-size: 10px;
		font-family: "Caseicon";
		font-weight: 400;
	}

	&.show-effect-fade {
		.pxl-menu-primary .sub-menu {
			margin-top: 0;
		}
	}

	&.show-effect-dropdown {
		.pxl-menu-primary {
			.sub-menu {
				@include transform(scaleY(0));
				transform-origin: 0 0 0;
				-webkit-transform-origin: 0 0 0;
				-ms-transform-origin: 0 0 0;
				-o-transform-origin: 0 0 0;
				margin-top: 0;
			}
			li:hover > .sub-menu, li.focus > .sub-menu {
				@include transform(scaleY(1));
			}
		}
	}
	&.show-effect-slidedown {
		.pxl-menu-primary {
			.sub-menu {
				margin-top: 0;
				transform: perspective(500px) rotateX(-20deg);
				transform-origin: 50% 0%;
			}
			li:hover > .sub-menu, li.focus > .sub-menu {
				transform: perspective(500px) rotateX(0deg);
			}
		}
	}
}

@media #{$min-xl} {
	#pxl-header-default {
		.pxl-menu-primary > li {
			margin: 0 1px;
			> a {
				span {
					line-height: 37px;
					display: inline-flex;
					padding: 0 22px;
					align-items: center;
					position: relative;
					z-index: 1;
					&:before {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						height: 100%;
						width: 100%;
						background-color: $secondary_color;
						z-index: -1;
						@include transition(all .25s cubic-bezier(.645,.045,.355,1));
						transform: scaleY(0);
						transform-origin: bottom center;
					}
				}
			}
			&:hover > a,
	        &.current_page_item > a,
	        &.current-menu-item > a,
	        &.current_page_ancestor > a,
	        &.current-menu-ancestor > a {
	        	color: $primary_color;
	        	span:before {
	        		transform: scaleY(1);
	        	}
		    }
		}
	}
}

body.rtl {
	@media #{$min-xl} {
		.pxl-nav-menu.sub-style-default .sub-menu > li .pxl-menu-item-text::before {
			left: auto;
			right: -10px;
		}
		.pxl-nav-menu.sub-style-default .sub-menu > li > a.pxl-onepage-active .pxl-menu-item-text, .pxl-nav-menu.sub-style-default .sub-menu > li:hover > a .pxl-menu-item-text, .pxl-nav-menu.sub-style-default .sub-menu > li.current_page_item > a .pxl-menu-item-text, .pxl-nav-menu.sub-style-default .sub-menu > li.current-menu-item > a .pxl-menu-item-text, .pxl-nav-menu.sub-style-default .sub-menu > li.current_page_ancestor > a .pxl-menu-item-text, .pxl-nav-menu.sub-style-default .sub-menu > li.current-menu-ancestor > a .pxl-menu-item-text {
			padding-left: 0;
			padding-right: 22px;
			&:before {
				right: 0;
			}
		}
	}
}