.hover-text-title {
    color: #fff;
    font-size: 40px;
}
h2.fusion-responsive-typography-calculated {
	margin-bottom:10px;
}
.hover-text-content {color: white;}


.hover-text-title {
  position: relative; /* Zorgt ervoor dat de pseudo-elementen correct gepositioneerd kunnen worden */
  display: inline-block; /* Zorgt ervoor dat de breedte van de titel overeenkomt met de tekst */
}

.hover-text-title::after {
  content: '';
  position: absolute;
  bottom: -15px; /* Aanpassen op basis van hoe ver je de lijn onder de tekst wilt */
  left: 0;
  min-width: 50px; /* Stel een vaste minimale breedte in voor de lijn */
  width: 10%; /* Zorgt ervoor dat de lijn nog steeds kan uitbreiden naar 100% bij hover */
  max-width: 100%; /* Voorkomt dat de lijn breder wordt dan de titel */
  height: 5px; /* Dikte van de lijn */
  background: #5bd87d; /* Kleur van de lijn, pas aan naar wens */
  transition: width 0.4s ease-in-out; /* Animatie-effect */
}

.hover-text-block:hover .hover-text-title::after {
  width: 100%; /* Breedte bij hoveren */
}

/* Contentboxes */
.hover-text-block {
  overflow: hidden; /* Voorkomt dat uitgeklapte content buiten de container valt */
  max-height: 5rem;
  transition: max-height .5s linear;
  margin-bottom: 1rem;
}

.hover-text-content {
  opacity: 0; 
  margin-top: 20px;
  transform: translateY(-20px); 
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Animatie-effect voor zowel de opaciteit als de verschuiving */
  display: block !important; 
}

.hover-text-title:hover + .hover-text-content,
.hover-text-block:hover .hover-text-content { /* Wanneer er gehoverd wordt over de titel of het blok */
  opacity: 1; /* Maakt de content zichtbaar */
  transform: translateY(0px); /* Zet de content terug naar de oorspronkelijke positie */
}

.hover-text-block:hover{
  max-height: 20rem;
}