.main-navigation {
	li.is-mega-menu {
		position: static;

		&.has-width {
			position: relative;
		}
		&.align-right {
			.dropdown-submenu {
				left: auto;
				right: 0;
			}
		}

		&.align-center {
			.dropdown-submenu {
				left: 50%;
			}
			&:hover > ul {
				transform: translateX(-50%) scaleX(1);
			}
		}

		.dropdown-submenu {
			padding: 32px;
			left: 0;
		}

		.mega-menu-content {
			padding: 0;
		}

		.menu-item-mega {
			margin-bottom: 20px;
			a {
				pointer-events: auto;

				&.is-label {
					margin: 28px 0 20px;
				}
			}

			a.is-label,
			> a {
				font-size: 16px;
				font-weight: 500;
				margin-bottom: 10px;
			}

			ul {
				border: none;
				padding: 20px 0;
				position: relative;
				left: 0;
				top: 0;
				box-shadow: none;
				transform: none;
				background-color: transparent;
				opacity: 1;

				li {
					padding: 0;
					float: initial;
					margin-bottom: 9px;
				}
			}
		}
	}

	li {
		a.has-icon {
			display: flex;
			align-items: center;

			img {
				width: 20px;
			}

			img,
			> .razzi-svg-icon {
				margin-right: 7px;
			}
		}


	}

	& > ul > li {
		&.dropdown {
			> a {
				.razzi-menu-badges {
					position: absolute;
					right: auto;
					bottom: 22px;
				}

				&.has-icon {
					.razzi-menu-badges {
						left: calc( 100% - 23px );
					}
				}
			}
		}
	}
}

.header-center-items {
	.main-navigation li.is-mega-menu.has-custom-width {
		position: static;
	}
}

.razzi-menu-badges {
	--rz-badges-bg-color: #dd3333;
	white-space: nowrap;
    font-weight: 600;
    font-size: 9px;
	line-height: 12px;
	padding: 2px 4px;
	bottom: 15px;
    right: -5px;
	background-color: var(--rz-badges-bg-color);
	color: var(--rz-color-lighter);
	position: relative;

	&:before {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		border: 4px solid;
		border-right-color: transparent !important;
		border-bottom-color: transparent !important;
		border-right-width: 7px;
		border-left-width: 0;
		border-color: var(--rz-badges-bg-color);
	}
}

.razzi-mega-menu-banner {
	padding: 42px 20px;
	background-size: cover;
	background-position: center;
	text-align: center;
	.razzi-button{
		color: #fff;
		background-color: transparent;
		padding: 0;
	}
}

.razzi-mega-menu-banner-title {
	font-size: 20px;
	color: #fff;
	font-weight: 500;
	text-transform: uppercase;
	margin: 0 0 10px 0;
}