header {
	.navbar {
		padding: 0;
		.navbar-toggler {
			border: none;
			&:focus {
				box-shadow: none;
			}
		}
		.navbar-brand {
			display: flex;
			img {
				max-height: calc(var(--header-heigh) - 10px); /*  2*5px padding */
			}
		}
		.navbar-collapse {
			padding-bottom: 1rem;
			@media (min-width: 768px){
				height: stretch;
				padding-bottom: 0;
			}
		}
		&.navbar-dark {
			&.bg-dark {
				background-color: var(--secondary-bg-color)!important;
				border-bottom: 1px solid #ffffff25;
			}
			.navbar-nav {
				@media (min-width: 768px){
					height: 100%;
					align-items: center;
				}
				max-height: calc(100vh - 60px);
				margin-left: auto;
				gap: 1rem;

				.nav-item {

					@media (min-width: 768px){
						height: 100%;
					}


					.nav-link {
						@media (min-width: 768px){
							display: flex;
							align-self: center;
							padding-top: 0.4rem;
							padding-top: 0.6rem !important;
                            height: 100%;
							&.dropdown-toggle {
								height: 100%;
								&:after {
									height: min-content;
    								margin-top: 0.6rem;
								}
							}
						}
					}
					.nav-link.dropdown-toggle.show,
					.nav-link.active {
						font-weight: 600;
					}
					&:hover {
						background-color: var(--primary-bg-color-50);
					}
					.nav-link {
						border-left: 2px solid transparent;
						padding-left: 1rem;
						font-weight: 400;

						@media (max-width: 767.98px){
							width: -webkit-fill-available;
    						text-align: left;
						}
						&.active {
							border-left-color: rgba(255, 255, 255, 0.5);
						}

						@media (min-width: 768px){
							border-left: none;
							padding-left: 0;
							border-bottom: 2px solid transparent;
							padding: 0 .4rem;
							color: #fff;
							&.active {
								border-bottom-color: rgba(255, 255, 255, 0.5);
							}
						}
					}

					.dropdown {
						position: unset; /* Ensures the dropdown is positioned relative to the nav item */
						height: 100%;
						.dropdown-menu {
							max-width: 100vw;
							max-height: calc(100vh - 60px - 4 * 50px - 3 * 1rem);
							overflow-y: auto;
							overflow-x: hidden;
							background-color: var(--secondary-bg-color);
							border-color: rgba(255, 255, 255, .25);
							li {
								.dropdown-item {
									text-wrap: auto;
									font-size: .875rem;
									line-height: 1.1rem;
									color: var(--secondary-color);
									&:hover {
										background-color: var(--primary-bg-color);
										background-image: red;
									}
								}
							}
						}
					}

					@media (min-width: 768px){
						&#dd_paintings {
							.dropdown-menu {
								width: 100vw;
								left: -2px;
								margin-top: 0px;
                                margin-left: -5px;
								column-count: 4;
								column-gap: 2rem;
							}
						}
						&#dd_collections {
							.dropdown {
								position: relative;

								.dropdown-menu {
									left: unset;
									right: 0;
									width: max-content;
								}
							}
						}
					}
				}
			}
		}
	}
}