.elementor .e-32a096e-c8fc494{width:auto;height:auto;flex-direction:column;align-items:center;}.elementor .e-564bc3c9-ad6c31b{height:240px;background-image:linear-gradient(#0000004d, #0000004d),url("https://dunya.nl/wp-content/uploads/2026/05/edit_22-819x1024.jpg");background-repeat:repeat;background-attachment:scroll;background-size:auto auto,cover;background-position:0% 0%,0px 30%;justify-content:space-between;align-items:start;/* 1. De Dropdown standaard verbergen */
.menu-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px); /* Iets omhoog geschoven */
  transition: all 0.3s ease-in-out;
  pointer-events: none; /* Zorgt dat je niet per ongeluk klikt als hij onzichtbaar is */
}

/* 2. De Dropdown tonen als hij de class 'is-open' heeft */
.menu-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: all;
}

/* 3. De animatie voor de tekst-items */
/* Standaard staat de tekst onzichtbaar en iets naar links */
.menu-item-anim {
  opacity: 0;
  transform: translateX(-20px);
  transition: none; /* Geen transitie bij het sluiten */
}

/* Als het menu open is, speel de animatie af */
.menu-dropdown.is-open .menu-item-anim {
  animation: slideInLeft 0.5s forwards;
  /* Zorg dat de animatie pas begint als het menu een beetje open is */
}

/* De keyframes voor het binnenschuiven */
@keyframes slideInLeft {
  0% {
      opacity: 0;
      transform: translateX(-30px);
  }
  100% {
      opacity: 1;
      transform: translateX(0);
  }
}

/* 4. (Optioneel) Stagger Effect: Items komen één voor één binnen */
/* Dit maakt het écht 'ludiek' en professioneel */
.menu-dropdown.is-open .menu-item-anim:nth-child(1) { animation-delay: 0.1s; }
.menu-dropdown.is-open .menu-item-anim:nth-child(2) { animation-delay: 0.2s; }
.menu-dropdown.is-open .menu-item-anim:nth-child(3) { animation-delay: 0.3s; }
.menu-dropdown.is-open .menu-item-anim:nth-child(4) { animation-delay: 0.4s; }
.menu-dropdown.is-open .menu-item-anim:nth-child(5) { animation-delay: 0.5s; }

/* 1. De container moet relatief zijn voor de positionering 
.menu-dropdown {
  position: relative; Belangrijk! */


/* 2. Het zwevende biertje */
.beer-cursor {
  position: absolute;
  left: 20px; /* Afstand vanaf links */
  top: 20px; /* Startpositie (wordt overschreven door JS) */
  width: 40px; /* Pas aan naar wens */
  z-index: 10;
  margin-top: 10px;
  pointer-events: none; /* Zorg dat de muis er 'doorheen' klikt */
  
  /* De Bouncy Animatie instellingen */
  transition: top 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
}

/* 3. De Menu Items Styling */
.menu-item-anim {
  padding-left: 40px; /* Ruimte maken zodat het biertje niet DOOR de tekst gaat */
  cursor: pointer;
  transition: color 0.3s ease;
  /* Zorg dat de container breed genoeg is om de hover te vangen */
  width: 100%; 
  display: flex;
  align-items: center; /* Verticaal centreren */
  min-height: 50px; /* Zorgt voor consistentie */
}

@media (max-width: 768px) {
  .menu-item-anim {
      min-height: 30px
  }
}\n}