#NavDropdown {
	font-size: 1rem;
	padding: 0;

	@include media-breakpoint-up(xl) {
		align-items: center;
		justify-content: flex-end;
		text-align: center;
	}

	@include media-breakpoint-down(xl) {
		background-color: #ffffff;
		height: 100%;
		right: -$header-width-mobile;
		width: $header-width-mobile;
		transition-property: left;
		transition-duration: 0.4s;
		transition-delay: 0.1s;
		transition-timing-function: ease-in-out;
		position: relative;
		transition-property: right;
		transition-duration: 0.4s;
		transition-delay: 0.1s;

		&.show {
			right: 0;
		}
	}

	@include media-breakpoint-down(sm) {
		right: -120vw;
		width: 100vw;
	}

	ul.nav {
		margin: 0;
		justify-content: end;
		align-items: stretch;
		flex-flow: row nowrap;
		column-gap: 20px;

		transition-property: align-items;
		transition-duration: 0.2s;
		transition-timing-function: ease-in-out;

		@include media-breakpoint-down(xl) {
			flex-flow: nowrap column;
			width: 100%;
			row-gap: 15px;
		}

		> li,
		> li.open {
			float: none;
			display: flex;
			align-items: center;
			flex: 1 auto;
			left: 0;
			position: relative;
			vertical-align: middle;

			@include media-breakpoint-up(xl) {
				&:hover,
				&:focus,
				&:active {
					a::after {
						opacity: 1;
						width: 100%;
					}

					a::before {
						opacity: 1;
					}
				}
			}

			@include media-breakpoint-down(xl) {
				&.dropdown {
					// min-height: 50px;
					padding-right: 50px;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;

					a {
						padding: 10px 0px 10px 0px;
					}
				}
			}

			&:last-child {
				ul.dropdown-menu {
					transform: translate(0, 0) !important;
					right: 0;
					left: unset !important;
				}
			}

			&.active > a {
				background: transparent;
				transition: all 0.2s ease;
				color: $ui-background-tertiary !important;

				@include media-breakpoint-up(xl) {
					&::after {
						opacity: 1;
						width: 100%;
					}

					&::before {
						opacity: 1;
					}
				}

				&:hover,
				&:focus,
				&:active {
					text-decoration: none;
				}
			}

			a {
				@include font-heading;
				background: transparent;
				border-radius: 0;
				border: none;
				color: $ui-foreground-primary-text-body-text-menu-parent-color;
				font-size: px-to-rem(
					$ui-foreground-primary-text-body-text-menu-parent-size
				);
				font-stretch: normal;
				font-style: normal;
				font-weight: $ui-foreground-primary-text-body-text-menu-parent-font-weight;
				letter-spacing: $ui-foreground-primary-text-body-text-menu-parent-spacing;
				line-height: 1.2;
				position: relative;
				text-align: left;
				text-shadow: none;
				text-transform: uppercase;
				transition: all 0.2s ease;
				white-space: normal;

				display: flex;
				align-items: center;

				@include media-breakpoint-up(xl) {
					padding: 20px 0px;

					&::before {
						content: "";
						background-color: $ui-foreground-primary-text-body-text;
						border-radius: 50%;
						bottom: 8px;
						height: 5px;
						left: 0;
						opacity: 0;
						margin: 0 auto;
						position: absolute;
						right: 0;
						transition: all 0.2s ease;
						width: 5px;
					}

					&::after {
						content: "";
						background: $ui-foreground-primary-text-body-text;
						border-radius: 0;
						border: none;
						bottom: 0;
						left: 0;
						margin: 0 auto;
						max-width: 100%;
						opacity: 0;
						position: absolute;
						right: 0;
						top: unset;
						transition-delay: 0.2s, 0s;
						transition-duration: 0.2s, 0s;
						transition-property: width, opacity;
						transition-timing-function: ease-in-out;
						width: 0;
						height: 2px;
						z-index: 5;
					}
				}

				&:hover,
				&:focus,
				&:active {
					outline: none;
					text-decoration: none;
				}
			}

			&.menu-hide {
				display: none;
			}

			&.menu-item-has-children {
				.dropdown-menu {
					top: 65px;

					&.menu-item-has-children {
						position: relative;
						top: unset;

						.dropdown-menu {
							position: absolute;
							left: unset;
							top: auto;
							right: -260px;
						}
					}
				}
			}

			&.cta-menu-1 {
				padding: 6px 0;

				> a {
					@extend .cta;
					@extend .cta--cta-dark;
				}
			}

			&.cta-menu-2 {
				position: relative;

				@include media-breakpoint-up(lg) {
					width: 130px;
				}

				> a {
					padding-right: 0;
					padding-left: 30px;

					@include media-breakpoint-down(lg) {
						padding-top: 10px;
						padding-bottom: 10px;
					}
				}

				&::before {
					content: "";
					background-image: url("data:image/svg+xml,%3Csvg width='15' height='19' viewBox='0 0 15 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.8418 2.30584C12.1605 1.5919 11.3445 1.02046 10.441 0.624652C9.53762 0.228842 8.56472 0.0165274 7.57875 1.40721e-05C5.57862 -0.00382144 3.65645 0.776539 2.22364 2.17408C1.51721 2.87075 0.95668 3.70156 0.574862 4.61786C0.193045 5.53416 -0.00238286 6.51754 2.19265e-05 7.51041C2.19265e-05 11.595 2.72363 15.4161 4.99988 17.8932C5.31969 18.2415 5.70811 18.5197 6.14064 18.7102C6.57318 18.9007 7.04045 18.9994 7.51297 19C7.97228 19.0004 8.42672 18.9058 8.84783 18.7221C9.26895 18.5385 9.64766 18.2697 9.96026 17.9327C12.2234 15.4688 14.9338 11.7004 14.9996 7.66852C15.0099 6.67644 14.8246 5.69208 14.4543 4.77185C14.084 3.85162 13.536 3.0136 12.8418 2.30584V2.30584ZM7.49981 9.57906C7.09124 9.57906 6.69186 9.45774 6.35215 9.23043C6.01244 9.00313 5.74767 8.68005 5.59132 8.30205C5.43497 7.92405 5.39406 7.50812 5.47377 7.10684C5.55348 6.70556 5.75022 6.33696 6.03912 6.04765C6.32801 5.75835 6.69609 5.56133 7.0968 5.48151C7.49752 5.40169 7.91287 5.44265 8.29033 5.59922C8.66779 5.7558 8.99041 6.02094 9.2174 6.36113C9.44439 6.70132 9.56554 7.10127 9.56554 7.51041C9.56618 7.78225 9.51319 8.05154 9.4096 8.30281C9.30602 8.55408 9.15388 8.78238 8.96193 8.9746C8.76998 9.16682 8.542 9.31917 8.29109 9.42291C8.04017 9.52664 7.77126 9.57971 7.49981 9.57906V9.57906Z' fill='%23211F1F'/%3E%3C/svg%3E%0A");
					background-repeat: no-repeat;
					background-position: center;
					background-size: contain;
					width: 20px;
					height: 20px;
					transform: translate(0%, -50%);
					position: absolute;
					bottom: unset;
					left: 0%;
					top: 50%;
				}
			}

			&.cta-menu-1,
			&.cta-menu-2 {
				background-color: transparent;
				border-radius: $cta_border_radius;
				padding: 0 !important;
				transition: all 0.4s ease;

				> a {
					@include font-heading;
					border: none;
					font-size: px-to-rem(14px);
					font-stretch: normal;
					font-style: normal;
					font-weight: 600;
					letter-spacing: px-to-rem(2.1px);
					line-height: 1.1;
					max-width: inherit;
					text-transform: uppercase;
					transition: all 0.4s ease;

					&::after,
					&::before {
						content: none !important;
					}
				}
			}

			ul {
				background: $bg-menu-child;
				border-radius: 0;
				border: none;
				display: none;
				height: unset;
				left: 0;
				min-height: 0;
				padding: 0 !important;
				text-align: left;

				@include media-breakpoint-down(xl) {
					background: transparent;
				}

				li {
					display: block;
					margin: 0 !important;
					width: 260px;

					&.dropdown-menu {
						position: relative !important;
						padding: 0px !important;
						border: none !important;

						@include media-breakpoint-up(xl) {
							&::after {
								content: "";
								position: absolute;
								top: calc(50% - 4px);
								right: 30px;
								width: 6px;
								height: 10px;
								background-image: url('data:image/svg+xml,<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1.5L4.5 5L1 8.5" stroke="%23676CC4" stroke-width="1.5"/></svg>');
							}
						}
					}

					&.dropdown {
						> a {
							&::before {
								// content: "" !important;
								// //background: transparent url('../img/icons/dropdown-arrow-menu.svg') no-repeat center;
								// background-size: contain;
								// border: none;
								// height: 8px;
								// opacity: 1;
								// position: absolute;
								// top: 45%;
								// right: 14px;
								// transition: 0.4s;
								// width: 10px;
							}

							// &:hover{
							//   &::before{
							//     background: transparent url('../img/icons/dropdown-arrow-menu-white.svg') no-repeat center !important;
							//   }
							// }
						}
					}

					&::before {
						content: none !important;
					}

					&:first-child a {
						border-top-left-radius: 0 !important;
						border-top-right-radius: 0 !important;
						border-bottom-right-radius: 0px;
						border-bottom-left-radius: 0px;
					}

					.menu-item-has-children {
						position: relative;
						border: none;

						&::before {
							content: "";
							position: absolute;
							top: 0;
							left: 0;
							width: 6px;
							height: 10px;
							background-image: url('data:image/svg+xml,<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1.5L4.5 5L1 8.5" stroke="%23676CC4" stroke-width="1.5"/></svg>');
						}
					}

					&:last-child {
						a {
							border-top-left-radius: 0;
							border-top-right-radius: 0;
							border-bottom-right-radius: 0 !important;
							border-bottom-left-radius: 0 !important;

							&::before {
								content: none !important;
							}
						}
					}

					&.active > a {
						background: $ui-background-tertiary;
						color: $ui-base-white !important;

						&::after {
							opacity: 1;
							width: 11px;
							height: 11px;
							flex-basis: 11px;
						}

						&::before {
							content: none !important;
						}
					}

					a {
						align-items: center;
						border: none;
						color: $ui-foreground-primary-text-body-text-menu-child-color !important;
						display: flex;
						font-stretch: normal;
						font-style: normal;
						letter-spacing: normal !important;
						line-height: 1.1;
						margin-top: 0;
						font-weight: 500 !important;
						font-size: px-to-rem(15px);
						padding: 16px 23px 17px !important;
						position: relative;
						text-align: left;
						text-decoration: none;
						text-transform: none;

						@media (max-width: 1299.98px) {
							padding: 14px 30px 14px;
						}

						&::before,
						&:after {
							content: none !important;
						}

						&:hover,
						&:focus,
						&:active {
							text-decoration: none;
							background-color: $ui-background-tertiary !important;
							color: $ui-base-white !important;
						}
					}

					&:last-child {
						ul {
							left: 100%;
							top: 0;
							right: auto;
						}
					}

					ul {
						background-color: $bg-menu-grandchild;
						margin-top: 0;
						border-radius: 0;

						//box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.05);
						li {
							a {
								//font-family: 'Montserrat', sans-serif !important;
								font-weight: 500;
								font-size: px-to-rem(15px);
								padding: 16px 23px 17px !important;
								text-align: left;
								color: $ui-background-tertiary;
								text-transform: none;

								&:hover,
								&:focus,
								&:active {
									text-decoration: none;
									background-color: rgba(
										$color: $ui-background-tertiary,
										$alpha: 0.8
									) !important;
									color: $ui-background-tertiary !important;
								}
							}
						}
					}
				}
			}
		}
	}

	/*
  * Dropdown Button
  */

	// .dropdown-btn{
	//   display: none;
	// }

	@include media-breakpoint-up(xl) {
		.dropdown-btn {
			border: none;
			background-color: transparent;
			position: absolute;
			display: none;
		}
	}

	@include media-breakpoint-down(xl) {
		.dropdown-btn {
			background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L4 4L7 1' stroke='%23211F1F'/%3E%3C/svg%3E%0A");
			background-color: transparent;
			background-position: center;
			background-repeat: no-repeat;
			background-size: px-to-rem(14px);
			border: var(--elev-border-width) solid
				$navbar-dark-toggler-border-color;
			border-radius: $navbar-toggler-border-radius;
			flex: 0 0 45px;
			height: 45px;
			padding: 0;
			position: absolute;
			right: 0;
			top: 0;
			width: 45px;

			&::after {
				content: none;
			}
		}
	}

	.dropdown-toggle {
		&::after {
			content: none;
		}

		.dropdown-menu {
			&::before {
				content: "" !important;
				//background: transparent url('../images/icons/dropdown-arrow-menu.svg') no-repeat center;
				background-size: contain;
				border: none;
				height: 8px;
				opacity: 1;
				position: absolute;
				top: 40%;
				right: 6px;
				transition: 0.4s;
				width: 6px;
			}
		}
	}
}