const hoverAreas = document.querySelectorAll('.hover-area');

    hoverAreas.forEach(area => {
      const menuPopup = area.querySelector('.popup');
      const menuTriangle = area.querySelector('.triangle');

      area.addEventListener('mouseenter', () => {
        menuPopup.classList.add('visible');
        menuTriangle.classList.add('visible');
      });

      area.addEventListener('mouseleave', () => {
        menuPopup.classList.remove('visible');
        menuTriangle.classList.remove('visible');
      });
    });