nav a {
    touch-action: manipulation;
  }  

  @media (max-width: 768px) {
    nav {
      transition: transform 0.5s ease-in-out;
    }
  
    .header-hidden {
      transform: translateY(-100%);
    }
  
    .header-visible {
      transform: translateY(0);
    }
  }
  
  
  .nav-hidden {
    top: -100%; /* Adjust this value based on your header's height */
  }
  
  .translate-up {
    transform: translateY(-100%); /* Hide the header */
  }
  
  .translate-down {
    transform: translateY(0); /* Show the header */
  }