#topNavigation {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 50px;
		transition: height 0.5s ease, all 0.6s ease; /* Combine transitions */
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 1000;
		-webkit-backdrop-filter: var(--banner-blur);
		backdrop-filter: var(--banner-blur);
	}

body.no-scroll {
  overflow: hidden !important;
  width: 100% !important;
}

	#topNavigation #logo {
		position: absolute;
		
		left: 10px;
		
		width: 120px;
		height: auto;
		filter: invert(1);
		transition: all 0.3s ease;
	}

	#topNavigation #logo:hover,
	#topNavigation #logo.active {
		filter: invert(76%) sepia(100%) saturate(1000%) hue-rotate(-45deg) brightness(110%) contrast(100%);
	}

	#topNavigation #navigationButtons {
		display: flex;
		width: 100%; /* Allow buttons to use full width */
		justify-content: flex-end; /* Align buttons to the right */
		padding-right: 20px; /* Add some spacing from the edge */
	}

	#topNavigation button {
		font-family: var(--font-family);
		font-size: var(--main-button-font-size);
		color: var(--secondary-color);
		padding: 8px;
		margin: 0 20px; /* Adjust horizontal spacing between buttons */
		cursor: pointer;
		border: none;
		background: none;
		text-decoration: none;
		transition: all 0.3s ease;
	}

	#topNavigation button:hover,
	#topNavigation button.active {
		font-weight: bold;
		text-decoration: underline;
		color: var(--tertiary-color);
	}

	#navigationLinks {
		display: flex;
	}

@media only screen and (max-width: 1259px) {
    @keyframes slideInFromTop {
        from {
            transform: translateY(-120%);
        }
        to {
            transform: translateY(0);
        }
    }

    @keyframes slideOutToTop {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-120%);
        }
    }
	
	@keyframes fadeIn {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	@keyframes fadeOut {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}

    #topNavigation.active {
        position: fixed;
		top: 0;
		left: 0;
		right: 0;
        height: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding-top: 20px;
        background: rgba(0, 0, 0, 0.8);
        z-index: 1000;
        -webkit-backdrop-filter: var(--banner-blur);
        backdrop-filter: var(--banner-blur);
    }
	
	#topNavigation #logo {
		/* Overrides for active/mobile state */
		top: 10px;
		left: 5px; /* Changed from margin-left */
		width: 80px;
		margin-top: 10px;
		height: auto;
		filter: invert(1);
		/* margin-right: 20px; removed */
		/* transition: all 0.3s ease; is on the base, should be fine */
	}
	

    #topNavigation:not(.active) #navigationButtons {
        display: flex;
		flex-direction: column; /* Display buttons in a column */
		transform: translateY(-150%);
		transition: all 0.8s ease;
		animation: fadeOut 0.3s;
		margin-left: 0;
    }

    #topNavigation.active #navigationButtons {
        display: flex; /* Show buttons in hamburger menu view */
        flex-direction: column; /* Display buttons in a column */
        align-items: center; /* Center items horizontally */
        animation: slideInFromTop 0.8s ease, fadeIn 0.3s ease;
		margin-left: 0;
    }
	
	#topNavigation:not(.active) button {
		padding-top: 60px;
		font-size: 2rem;
	}
	
	#topNavigation.active button {
		padding-top: 60px;
		font-size: 2rem;
	}
	
    #hamburgerMenu {
        display: block;
        cursor: pointer;
        /* margin-right: 15px; removed */
        width: 30px;
        height: 30px;
        /* position: relative; removed */
        position: absolute;
        top: 10px;
        right: 15px;
        margin-top: 10px;
    }

    #hamburgerMenu .bar {
        box-sizing: border-box; /* Ensure consistent sizing */
        width: 100%;
        height: 2px;
        background-color: var(--secondary-color);
        margin: 0; /* Positioned by transform */
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: center;
        transition: transform 0.5s, opacity 0.5s;
    }

    /* Initial hamburger positions */
    #hamburgerMenu .bar:nth-child(1) {
        transform: translate(-50%, -50%) translateY(-8px);
    }
    #hamburgerMenu .bar:nth-child(2) {
        transform: translate(-50%, -50%); /* Center bar */
        opacity: 1; /* Ensure it's visible initially */
    }
    #hamburgerMenu .bar:nth-child(3) {
        transform: translate(-50%, -50%) translateY(8px);
    }

    /* Common active bar styles removed as base .bar and specific active transforms handle positioning and appearance */

    #topNavigation.active #hamburgerMenu .bar:nth-child(1) {
        transform: translate(-50%, -50%) rotateZ(-45deg);
        opacity: 1; /* Ensure visibility */
    }

    #topNavigation.active #hamburgerMenu .bar:nth-child(2) {
		transform: translate(-50%, -50%) rotateZ(45deg);
        opacity: 1; /* Hide the middle bar */
    }
}