header{
	// Mega menu
	&.mega_header{
		.megamenu{
			z-index: 3;
			.breadcrumb{
				--bs-breadcrumb-divider: "\f034";
				.breadcrumb-item{
					color: black;
					& + .breadcrumb-item{
					    padding-left: 1rem;
					}
					&.active{
						font-weight: 500;
					}
					&:before{
						font-family: "highbiza";
						font-size: 80%;
						height: 100%;
						display: inline-flex;
						align-items: center;
					    padding-right: 1rem;
					}
					a{
						color: black;
						cursor: pointer;
						text-decoration: underline;
					}
				}
				@include media-breakpoint-down(lg){
					display: flex;
					flex-wrap: wrap;
					gap: .5rem;
					.breadcrumb-item{
						background: $primary;
						padding: .25rem .75rem !important;
						border-radius: $border-radius;
						a{
							color: color-contrast($primary) !important;
							text-decoration: unset;
						}
						&:before{
							display: none;
						}
					}
				}
			}
			.overlay{
				content: "";
				top: 0;
				left: 0;
				position: fixed;
				height: 100%;
				width: 100%;
				background: rgba(0,0,0,.5);
				display: block;
				transition: .3s ease;
				backdrop-filter: blur(5px);
				z-index: -1;
				@include media-breakpoint-up(lg){
					z-index: 999999999;
				}
			}
			.toggler{
				cursor: pointer;
			}
			.outer{
				background: white;
				padding: 2rem;
				padding-bottom: 5.5rem;
				transition: .3s ease;
				@include media-breakpoint-up(lg){
					position: absolute;
					top: 100%;
					left: 50%;
					transform: translateX(-50%) translateY(.5rem);
					min-width: 1000px;
					max-width: 100vw;
					min-height: 275px;
					border-radius: 1rem;
					z-index: 999999999999999;
				}
				@include media-breakpoint-down(lg){
					position: absolute;
					top: 0;
					left: 0;
					height: 100vh;
					width: 100%;
					padding-top: 6.5rem;
					padding-bottom: 5rem;
					display: flex;
					flex-direction: column;
				}
				.inner{
					padding: 0;
					list-style: none;
					display: flex;
					flex-wrap: wrap;
					@include media-breakpoint-down(lg){
						flex: 1;
						overflow: scroll;
						align-items: flex-start;
						flex-direction: column;
						li a{
							color: black !important;
						}
					}
					.category-label{
						background: transparent;
						padding: 0;
						border: 0;
						color: black;
						cursor: pointer;
						margin-bottom: 0;
						position: relative;
						padding-right: .85rem !important;
						transition: padding-right .3s ease !important;
						span{
							display: none !important;
						}
						&:after{
							content: "\f034";
							display: inline;
							position: absolute;
							right: 0rem;
							font-family: "highbiza";
							font-size: 75%;
						}
						&:hover{
							text-decoration: underline;
							padding-right: 1.25rem !important;
						}
					}
					li{
						width: 25%;
						@include media-breakpoint-down(lg){
							width: 100% !important;
						}
					}
					.nav-link{
						display: inline-flex;
						align-items: center;
						height: 3rem;
						font-size: .9rem !important;
					}
					ul{
						list-style: none;
						padding: 0;
						&:not(.active){
							display: none;
						}
					}
				}
				.category-main{
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100% !important;
					transition: unset !important;
					a{
						display: flex !important;
						padding: 0 2rem !important;
						background: var(--bs-light);
						height: 3.5rem !important;
						border-bottom-left-radius: 1rem;
						border-bottom-right-radius: 1rem;
						font-weight: 600;
						opacity: 1;
						width: 100% !important;
					}
					span{
						display: inline-block !important;
						margin-right: .25rem;
						font-weight: 400;
					}
					&:after{
						display: none;
					}
				}
				.chosen{
					& > li{
						display: none !important;
					}
					.grape{
						display: flex !important;
						width: 100% !important;
						& > .category-label{
							display: flex !important;
							position: absolute;
							bottom: 0;
							left: 0;
							width: 100%;
							padding: 0 2rem;
							background: var(--bs-light);
							height: 3.5rem;
							border-bottom-left-radius: 1rem;
							border-bottom-right-radius: 1rem;
							transition: unset !important;
							font-weight: 600;
							opacity: 1;
							@include media-breakpoint-down(lg){
								display: none !important;
							}
							span{
								display: inline-block !important;
								margin-right: .25rem;
								font-weight: 400;
							}
							&:after{
								display: none;
							}
						}
						& > ul{
							width: 100%;
							display: flex;
							flex-wrap: wrap;
							li{
								display: flex;
								width: 25%;
								@include media-breakpoint-down(lg){
									width: 100% !important;
								}
							}
						}
					}
				}
			}
			&:not(.active){
				.outer{
					opacity: 0;
					transform: translateY(-30px) translateX(-50%);
					pointer-events: none;
					user-select: none;
				}
				.overlay{
					opacity: 0;
					pointer-events: none;
				}
			}
		}
	}

	// Big menu
	&.big_header{
		.container{
			position: relative;
			.page-menu-bar > ul{
				gap: 0 !important;
				li.nav-item{
					.nav-link{
						padding-left: .75rem !important;
						padding-right: .75rem !important;
					}
				}
			}
		}
		.navbar-nav{
			align-items: center;
			& > .dropdown:not(.pages-dropdown){
				position: unset;
				& > a{
					@include media-breakpoint-up(lg){
						padding-top: 1.75rem;
						padding-bottom: 1.75rem;
					}
				}
				@include media-breakpoint-up(lg){
					&:hover, &.hover{
						& > .dropdown-menu{
							display: flex !important;
							animation: MenuComeDown .3s ease;
						}
					}
				}
				& > .dropdown-menu{
					top: 100%;
					left: 50%;
					transform: translateX(-50%);
					width: 100%;
					padding: 1rem 2rem;
					padding-bottom: 2rem;
					background: $header-background;
					border: 0;
					border-top-left-radius: 0;
					border-top-right-radius: 0;
					flex-wrap: wrap;
					row-gap: 2rem;
					box-shadow: 0 15px 20px -15px rgba(0,0,0,.25);
					@include media-breakpoint-up(lg){
						&:before{
							content: "";
							position: absolute;
							top: -2rem;
							left: 0;
							width: 100%;
							height: 2rem;
							background: transparent;
						}
					}
					@include media-breakpoint-down(lg){
						display: none !important;
					}
					& > li{
						& > a{
							font-size: 1.1rem;
							display: inline-block;
							color: color-contrast($header-background);
						}
					}
					& > li{
						width: 25%;
						& > .dropdown-menu{
							border: 0;
							position: unset;
							display: flex !important;
							flex-direction: column;
							padding: 0;
							background: transparent;
							li{
								a{
									padding-top: 0;
									padding-bottom: 0;
									font-size: .9rem;
									opacity: .6;
									display: inline-block;
									color: color-contrast($header-background);
								}
							}
						}
					}
					
				}
			}
		}
	}
}

@keyframes MenuComeDown{
	from{ display:flex !important; opacity:0; transform:translateY(-10px) translateX(-50%); }
	to{ display:flex !important; opacity:1; transform:translateY(0px) translateX(-50%); }
}