/* ==========================================================================
   Rustmoment in de klas - decoratieve vormen in de hero

   Eenzelfde organische vorm als de gele op De 2-daagse en de saliegroene op
   Op Locatie, nu ook op de creme hero's onder Kennis & Inspiratie en de
   blauwe hero's onder Platform.

   .hero-kennis   creme hero, lichte vorm rechtsboven
   .hero-platform blauwe hero, lichte vorm linksonder

   Aangemaakt 09-09-2026.
   ========================================================================== */

.hero-kennis,
.hero-platform {
  position: relative;
  overflow: hidden;
}

.hero-kennis::before,
.hero-platform::before {
  content: "";
  position: absolute;
  border-radius: 58% 42% 55% 45% / 45% 55% 42% 58%;
  pointer-events: none;
  z-index: 0;
}

/* Kop, tekst en beeld blijven boven de vorm staan. */
.hero-kennis > .e-con-inner,
.hero-kennis > .e-con,
.hero-kennis > .e-child,
.hero-kennis > .elementor-widget,
.hero-platform > .e-con-inner,
.hero-platform > .e-con,
.hero-platform > .e-child,
.hero-platform > .elementor-widget {
  position: relative;
  z-index: 1;
}

/* ---------- Kennis & Inspiratie: rechtsboven ---------- */

.hero-kennis::before {
  top: -150px;
  right: -140px;
  width: 400px;
  height: 400px;
  background: rgba(255, 255, 255, 0.5);
}

@media (max-width: 1024px) {
  .hero-kennis::before {
    width: 320px;
    height: 320px;
    top: -130px;
    right: -120px;
  }
}

@media (max-width: 767px) {
  .hero-kennis::before {
    width: 240px;
    height: 240px;
    top: -110px;
    right: -100px;
  }
}

/* ---------- Platform: linksonder ---------- */

.hero-platform::before {
  bottom: -220px;
  left: -170px;
  width: 540px;
  height: 540px;
  background: rgba(255, 255, 255, 0.07);
}

@media (max-width: 1024px) {
  .hero-platform::before {
    width: 420px;
    height: 420px;
    bottom: -180px;
    left: -140px;
  }
}

@media (max-width: 767px) {
  .hero-platform::before {
    width: 300px;
    height: 300px;
    bottom: -140px;
    left: -110px;
  }
}