/* Alle icon-col beginnen onzichtbaar en iets naar beneden verschoven */
.icon-row .icon-col {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Wanneer de slide 'active' is, verschijnen de icon-col elementen om de beurt */
.slide.active .icon-row .icon-col:nth-child(1) {
  transition-delay: 0.2s;
  opacity:1; transform: translateY(0);
}
.slide.active .icon-row .icon-col:nth-child(2) {
  transition-delay: 0.4s;
  opacity:1; transform: translateY(0);
}
.slide.active .icon-row .icon-col:nth-child(3) {
  transition-delay: 0.6s;
  opacity:1; transform: translateY(0);
}
.slide.active .icon-row .icon-col:nth-child(4) {
  transition-delay: 0.8s;
  opacity:1; transform: translateY(0);
}
.slide.active .icon-row .icon-col:nth-child(5) {
  transition-delay: 1.0s;
  opacity:1; transform: translateY(0);
}
.slide.active .icon-row .icon-col:nth-child(6) {
  transition-delay: 1.2s;
  opacity:1; transform: translateY(0);
}
/* Alle li-items zijn eerst ondoorzichtig en iets verschoven */
.slide .verdienmodel ul li {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Wanneer de slide 'active' is, worden de li's zichtbaar met vertraging via nth-child */
.slide.active .verdienmodel ul li:nth-child(1) {
transition-delay: 0.2s;
opacity:1; transform: translateY(0);
}
.slide.active .verdienmodel ul li:nth-child(2) {
transition-delay: 0.4s;
opacity:1; transform: translateY(0);
}
.slide.active .verdienmodel ul li:nth-child(3) {
transition-delay: 0.6s;
opacity:1; transform: translateY(0);
}
.slide.active .verdienmodel ul li:nth-child(4) {
transition-delay: 0.8s;
opacity:1; transform: translateY(0);
}
.slide.active .verdienmodel ul li:nth-child(5) {
transition-delay: 1.0s;
opacity:1; transform: translateY(0);
}
.slide.active .verdienmodel ul li:nth-child(6) {
transition-delay: 1.2s;
opacity:1; transform: translateY(0);
}
.slide.active .verdienmodel ul li:nth-child(7) {
transition-delay: 1.4s;
opacity:1; transform: translateY(0);
}

/* Herhaal hetzelfde voor het tweede ul, of gebruik langere delays voor de tweede lijst */
.slide.active .verdienmodel ul:nth-of-type(2) li:nth-child(1) {
transition-delay: 1.4s;
opacity:1; transform: translateY(0);
}
.slide.active .verdienmodel ul:nth-of-type(2) li:nth-child(2) {
transition-delay: 1.6s;
opacity:1; transform: translateY(0);
}
.slide.active .verdienmodel ul:nth-of-type(2) li:nth-child(3) {
transition-delay: 1.8s;
opacity:1; transform: translateY(0);
}
.slide.active .verdienmodel ul:nth-of-type(2) li:nth-child(4) {
transition-delay: 2.0s;
opacity:1; transform: translateY(0);
}
.slide.active .verdienmodel ul:nth-of-type(2) li:nth-child(5) {
transition-delay: 2.2s;
opacity:1; transform: translateY(0);
}
.slide.active .verdienmodel ul:nth-of-type(2) li:nth-child(6) {
transition-delay: 2.4s;
opacity:1; transform: translateY(0);
}
.slide.active .verdienmodel ul:nth-of-type(2) li:nth-child(7) {
transition-delay: 2.6s;
opacity:1; transform: translateY(0);
}

.slide.investering ul li {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Wanneer de slide 'active' is, worden de li's zichtbaar met vertraging via nth-child */
.slide.active.investering ul li:nth-child(1) {
transition-delay: 0.2s;
opacity:1; transform: translateY(0);
}
.slide.active.investering ul li:nth-child(2) {
transition-delay: 0.4s;
opacity:1; transform: translateY(0);
}
.slide.active.investering ul li:nth-child(3) {
transition-delay: 0.6s;
opacity:1; transform: translateY(0);
}
.slide.active.investering ul li:nth-child(4) {
transition-delay: 0.8s;
opacity:1; transform: translateY(0);
}
.slide.active.investering ul li:nth-child(5) {
transition-delay: 1.0s;
opacity:1; transform: translateY(0);
}
.slide.active.investering ul li:nth-child(6) {
transition-delay: 1.2s;
opacity:1; transform: translateY(0);
}



/* Alle p in highlight-stats beginnen onzichtbaar en iets naar beneden verschoven */
.highlight-stats li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Als de slide active wordt, verschijnen de p-elementen om de beurt */
.slide.active .highlight-stats li:nth-child(1) {
  transition-delay: 0.5s;
  opacity:1; transform: translateY(0);
}
.slide.active .highlight-stats li:nth-child(2) {
  transition-delay: 0.8s;
  opacity:1; transform: translateY(0);
}
.slide.active .highlight-stats li:nth-child(3) {
  transition-delay: 1.1s;
  opacity:1; transform: translateY(0);
}
.slide.active .highlight-stats li:nth-child(4) {
  transition-delay: 1.4s;
  opacity:1; transform: translateY(0);
}

.donut-container {
  text-align:center;
  width:200px;
  font-family: Arial, sans-serif;
}

.donut-wrapper {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto 10px auto;
}

.donut {
  transform: rotate(-90deg);
  width:100%;
  height:auto;
}

.donut-ring {
  fill:transparent;
  stroke:#eee;
  stroke-width:10;
}

.donut-segment {
  fill:transparent;
  stroke:#3b7f38;
  stroke-width:10;
  stroke-dasharray: 282.743; /* omtrek van cirkel met r=45 ~ 2πr */
  stroke-dashoffset: 282.743; /* start: geen segment zichtbaar */
  transition: stroke-dashoffset 2s ease;
}

.donut-text {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  font-weight:bold;
  font-size:16px;
  line-height:1.2em;
  color:#333;
}

.donut-subtext {
  font-size:0.9em;
  color:#666;
}

/* Als de slide active wordt, verminderen we de dashoffset naar 90% (10% reductie) */
.slide.active .donut-segment {
  stroke-dashoffset: calc(282.743 - (282.743 * 0.1));
}