.main-menu {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
  }
  
  .main-menu.expanded {
    max-height: 500px; /* Enough height for all menu items */
  }
  
  @media (min-width: 769px) {
    .menu-toggle {
      display: none;
    }
  
    .main-menu {
      max-height: none !important;
      overflow: visible;
    }
  }
  
  .menu-toggle {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    display: block;
  }