@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New&family=Inter:wght@400;600&display=swap');
body {
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}
html, body {
      height: 100%;
    }

    .navbar-hidden {
      transform: translateY(-100%);
    }

    .navbar-visible {
      transform: translateY(0);
    }

    .main-content {
      padding-top: 68px;
    }

    .dropdown-menu {
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.3s ease;
    }

    .dropdown-menu.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .hamburger-menu {
      opacity: 0;
      visibility: hidden;
      transform: translateX(100%);
      transition: all 0.3s ease;
    }

    .hamburger-menu.show {
      opacity: 1;
      visibility: visible;
      transform: translateX(0);
    }

    .menu-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.5);
      opacity: 0;
      visibility: hidden;
      z-index: 40;
      transition: all 0.3s ease;
    }

    .menu-backdrop.show {
      opacity: 1;
      visibility: visible;
    }

    .navigation-scroll-container {
      max-height: calc(100vh - 200px); /* Adjust as needed based on header/footer height */
      overflow-y: auto;
      padding-bottom: 20px; /* Add some padding at the bottom for better scrolling */
    }