/* Make sure your header is fixed so the translate works */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  /* Optional: add a background and z-index if needed */
  z-index: 50;
}

/* When the header is hidden, slide it upward and fade out */
header.navbar-hidden {
  transform: translateY(-100%);
  opacity: 0;
}