.diensten-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.dienst-blok {
   
    text-align: center;
    padding: 20px;
   
}

.dienst-blok .icon img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 25px;
}

.dienst-blok .content h2 {
    font-size: 1.2em;
    margin-bottom: 10px;
}
.dienst-blok .content h2 a {
    color: #000;
    text-decoration: none; /* optioneel: verwijdert de onderstreping */
}


.dienst-blok .content p {
    font-size: 1em;
    color: #444;
}

/* Responsive: op mobiel maar 1 per rij, tablet 2 */
@media (max-width: 991px) {
    .diensten-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .diensten-grid {
        grid-template-columns: 1fr;
    }
}
.ml-4 {
  font-weight: bold; color: black; text-decoration: none;
}

.d-flex.align-items-start {
  display: flex;               /* Voor het geval 'd-flex' niet van Bootstrap is */
  align-items: flex-start;     /* Zelfde als 'align-items-start' */
  gap: 1.5rem;                 /* Ruimte tussen afbeelding en tekstblok */
  margin-bottom: 1.5rem;       /* Ruimte tussen de items onder elkaar */
}

.d-flex.align-items-start img {
  border-radius: 0.25rem;      /* Zelfde als class 'rounded' */
  display: block;              /* Voorkomt kleine inline spacing issues */
  max-width: 180px;            /* Bij benadering, of zet dit in Twig */
  height: auto;
}

.d-flex.align-items-start .flex-grow-1 a {
  font-weight: bold;
  color: black;
  text-decoration: none;
  display: block;              /* Maak link blokniveau voor betere klikbaarheid */
  margin: 0;                   /* Zorg dat er geen ongewenste margin is */
  padding: 0;                  /* Zelfde hier */
}

/* Optioneel: als je nog een hover effect wil */
.d-flex.align-items-start .flex-grow-1 a:hover {
  color: #0056b3;
  text-decoration: underline;
}
.wpo-page-title .wpo-breadcumb-wrap ol li {
    display: inline-block;
    padding: 0px 5px;
    padding-right: 20px;
    color: #fff;
    position: relative;
    font-size: 20px;
    font-family: "DM Sans", serif;
}
.pagecolor {
background-color: #FCF1E8;

}
.blog-sidebar2 {
  position: relative; 
  top: 120px;
}
.quote-bron {
    color: #000; /* zwart */
    font-style: normal; /* optioneel, maakt de tekst niet cursief */
}
.over-ons{
margin-bottom: 20px;
    display: flex
;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    text-align: right;
}

@media (max-width: 1399px) {
    .service-section .wraper, .service-section-s2 .wraper {
        padding: 20px;
    }
}

@media (max-width: 1499px) {
    .service-section .wraper, .service-section-s2 .wraper {
        padding: 20px;
    }
}

.colorWrapper {
    border-radius: 40px;
    background: #FCF1E8;
    padding: 80px;
    padding-bottom: 70px;
    max-width: 1720px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
}