/**************************************** Start MegaMenu ***************************************/
/* :root {
	--CatMenuHeight: 26rem
} */
/* .ecommerceNav {
	margin-left: 0rem;
	padding: 0.8rem 0;
	position: relative;
	
	

	.MenuButton {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		color: var(--Black);
		margin-left: 1rem;
		cursor: pointer;
		font-weight: bold;
		border-radius: var(--radius-5);

		.MenuIcon {
			width: 15px;
			height: 12px;
			position: relative;
			display: inline-block;
			vertical-align: middle;
			font-size: 16px;
			-webkit-transition: -webkit-transform .3s cubic-bezier(.65, .05, .36, 1);
			transition: transform .3s cubic-bezier(.65, .05, .36, 1);
			cursor: pointer;

			i {
				position: absolute;
				width: 15px;
				border-radius: 18px;
				left: 0;
				border-bottom: 2px solid;
				display: block;
				-webkit-transition: .3s cubic-bezier(.49, .49, .51, .51);
				transition: 150ms cubic-bezier(.13, .1, .93, .96)
			}

			.l_2 {
				top: 5px
			}

			.l_3 {
				bottom: 0;
				top: auto
			}


		}

		&.active {
			.l_1 {
				-webkit-transform: rotate(-45deg);
				transform: rotate(-45deg);
				top: 5px;
				left: 0;
				width: 15px;
			}

			.MenuIcon {
				i {
					position: absolute;
					width: 15px;
					border-radius: 18px;
					left: 0;
					border-bottom: 2px solid;
					display: block;
					-webkit-transition: .3s cubic-bezier(.49, .49, .51, .51);
					transition: 150ms cubic-bezier(.13, .1, .93, .96)
				}

				.l_1 {
					-webkit-transform: rotate(-45deg);
					transform: rotate(-45deg);
					top: 5px;
					left: 0;
					width: 15px
				}

				.l_3 {
					-webkit-transform: rotate(45deg);
					transform: rotate(45deg);
					bottom: 5px;
					left: 0;
					width: 15px
				}

				.l_2 {
					opacity: 0;
					width: 0;
					right: 10px;
					-webkit-transform: rotate(45deg);
					transform: rotate(45deg)
				}

				.MenuText {
					transform: translatey(100px);
					font-size: 0
				}
			}
		}
	}

	.CategoriesMenu {
		display: none;
		position: absolute;
		top: calc(100% + 1rem);
		right: 0;
		box-shadow: 0px 0px 5px -3px #a1a1a1;
		border-radius: 0 0 0.8rem 0.8rem;
		background: var(--White);
		overflow: hidden;
		

		&.active {
			display: block;

			&:before {
				opacity: 0.8;
			}

		}

		.megamenu-holder {
			position: relative;
			width: 47rem;
			display: flex;
			align-items: start;
			justify-content: start;
			z-index: 10;
		}


		:where(ul, li) {
			list-style-type: none;
			margin: 0;
			cursor: pointer;
			line-height: normal;
			white-space: normal;
		}

		.navbar-nav {
			position: relative;
			display: flex;
			min-width: 13rem;
			height: var(--CatMenuHeight);
			flex-direction: column;
			align-items: flex-start;
			gap: 4px;
			overflow-y: auto;
			background: var(--bg-1);
		}

		.submenu-box {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 100%;
			height: var(--CatMenuHeight);
			padding: 0.8rem 2rem 0.8rem 0.5rem;
			background: var(--White);
			.holder {
				display: flex;
				white-space: nowrap;
				overflow: auto;
				height: calc(100% - 3rem);

				>.dropdown-menu {
					display: none;
					width: 100%;

					&.active {
						display: grid;
						grid-template-columns: repeat(3, 1fr);
						gap: .5rem; 
						list-style: none;
						align-items: center;
						direction: rtl;
					}

					.dropdown {
						display: inline-block;
						vertical-align: top;
						transition: all ease-in-out 0.4s;
						height: auto;
						padding: 0;
						margin-left: 4.7rem;
						width: 12rem;
						max-width: 100%;

						>a {
							border-right: solid 1px var(--secondary-color-dark-1);
							color: var(--secondary-color-dark-1);
							padding: 0 0.5rem 0 0;
							margin-bottom: 1rem;
							display: block;
							line-height: 1.3rem;
							white-space: normal;
						}
					}

					.dropdown-menu {

						li {
							a {
								display: block;
								color: var(--texture-color-2);
								padding: 0.2rem 0;
								margin: 0.35rem 0;
								white-space: normal;
							}
						}
					}
				}
			}
			.view-all {
				display: block;
				color: var(--accent-color-dark-1);
			}
		}
		.main-items {
			width: 100%;
			transition: all 0.3s ease;
			padding: 0.65rem 0.6rem;
			border-bottom: 1px solid var(--accent-color-7);
			.dropdown-toggle {
				display: block;
				font-size: 1rem;
				color: var(--texture-color-1);
				white-space: normal;
			}
			&.active,
			&:hover {
				background: var(--White);
			}
			ul {
				li {
					a {
						color: #000;

						&:hover {
							font-weight: bold;
						}
					}
				}
			}
		}
	}
} */

/**************************************** End MegaMenu ***************************************/