.ecommerceNav {
	margin-left: 2rem;
	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;
		}

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

	.CategoriesMenu {
		display: none;
		position: absolute;
		top: calc(100% + 1px);
		right: 0;
		box-shadow: 0px 0px 5px -3px #a1a1a1;
		border-radius: 0 0 0.8rem 0.8rem;
		background: var(--White);
		overflow: hidden;
        li{
            line-height: 2.93rem;
            position: relative;
           
            .dropdown-toggle{
                position: relative;
                
                &::before{
                    content:"";
                    background-image:url('/DesktopModules/eCommerce/images/arrow-menu.svg');
                    width:0.8rem;
                    height: 0.85rem;
                    background-position:center;
                    background-repeat: no-repeat;
                    background-size: contain;
                    position: absolute;
                    right: -1.3rem;
					top:1.1rem;
                }
            }
          
        }
		&:before {
			content: '';
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			background: var(--texture-color-1);
			z-index: -1;
			opacity: 0;
			transition: all 1s ease;
			-webkit-transition: all 1s ease;
			-moz-transition: all 1s ease;
			-ms-transition: all 1s ease;
			-o-transition: all 1s ease;
		}

		&.active {
			display: block;

			&:before {
				opacity: 0.8;
			}

		}

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


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

		.navbar-nav {
			position: relative;
			display: flex;
			min-width: 19rem;
			height: var(--CatMenuHeight);
			flex-direction: column;
			align-items: flex-start;
			gap: 4px;
			overflow-y: auto;
			background: var(--primary-light-color-5);
            ul{
                li{
                    line-height: 2.93rem;
                    padding:0.5rem 2rem 0.5rem 0.5rem;
                }
                li.active{
                    background-color: var(--accent-color4);
                }
            }
		}

		.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: flex;
                        flex-direction: column;
					}

					.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(--text-color-4) !important;
							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(--text-color-4) !important;
								padding: 0.2rem 0;
								margin: 0.35rem 0;
								white-space: normal;
							}
						}
					}
				}
			}

			.view-all {
				display: block;
				color: var(--accent-color-dark-1);
			}
            a{
                color: var(--text-color-4) !important;
            }
		}
    }
}
.banner-menu{
    img{
        border-radius: var(--b-radius);
    }
}
.MenuButton{
    svg{
        stroke: var(--Acolor);
    }
}