/* side-menu.css */
@media only screen and (max-width: 768px) {
  .side-menu {
      position: fixed;
      top: 0;
      left: -70%;
      width: 70%;
      height: 100%;
      background-color: #000;
      overflow-y: auto;
      transition: transform 0.3s ease;
      z-index: 1000;
      padding-top: 2em;
      display: flex;
      flex-direction: column;
  }

  .side-menu.open {
      transform: translateX(70%);
  }

  .side-menu .menu-link {
      color: #ddd;
      padding: 1em 1.5em;
      text-decoration: none;
      font-size: 1rem;
      transition: background 0.3s ease;
  }

  .side-menu .menu-link:hover {
      background-color: #222;
  }
}

/* Hide side menu on desktop */
@media only screen and (min-width: 769px) {
  .side-menu {
      display: none;
  }
}