/* Smooth transition for the header */
#header {
transition: transform 0.4s ease-in-out, position 0s !important;
}
/* State when scrolling down: Hidden above the screen */
#header.header-hidden {
position: fixed !important;
transform: translateY(-100%) !important;
}
/* State when scrolling up: Fixed and slid down into view */
#header.header-visible {
position: fixed !important;
transform: translateY(0) !important;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05); /* Optional shadow when scrolling up */
}
