.team-blokken {
position: relative; /* noodzakelijk voor pseudo-element positionering */
max-width: 1400px;
margin: 0 auto;
text-align: center;
padding: 160px 35px 0;
}

@media (max-width: 786px) {
    .team-blokken {
        padding: 80px 35px 0;
    }
}

/*Alleen op over ons pagina*/
.page-id-19 .team-blokken::before {
    content: "";
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 1200px;
    background-image: url('/wp-content/uploads/2025/11/achtergrond_lijnen.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none; 
    z-index: -1;
}

.team-titels {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    margin-bottom: 45px;
}

.team-span-titel {
    font-size: 40px;
    font-weight: 400;
    font-family: 'Josefin Sans', sans-serif;
    color: #fff;
}

.team-titel {
    font-size: 40px;
    font-weight: 700;
    font-family: 'Josefin Sans', sans-serif;
    color: #fff;
    margin: 0;
}

/* flex container voor kaarten */
.team-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    margin-top: 30px;
}

@media (max-width: 1300px) {
    .team-cards {
        justify-content: space-between;
        gap: 14px;
        width: 90%;
        margin: 0 auto;
    }
    
    .team-titels {
        width: 90%;
        margin: 0 auto;
    }
    
    .team-card {
        flex: 0 0 calc(33.333% - 14px);
        max-width: calc(33.333% - 14px);
    }
}

@media (max-width: 768px) {
    .team-card {
        flex: 0 0 calc(33.333% - 14px);
        max-width: calc(33.333% - 14px);
    }

    .team-afbeelding img {
        height: auto;
    }
}

/* elke kaart */
.team-card {
    flex: 1 1 224px;
    max-width: 224px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* afbeelding in de kaart */
.team-afbeelding img {
    width: 100%;
    height: 345px;
    border-radius: 20px;
    object-fit: cover;
    transition: box-shadow 0.3s ease; /* animatie voor smooth effect */
}

.team-afbeelding img:hover {
    box-shadow: 0 0 20px 5px #607D5C;
}



/* info onder afbeelding */
.team-info {
    text-align: start;
    width: 100%;
}

.team-naam {
    font-size: 20px;
    font-weight: 700;
    font-family: 'Josefin Sans', sans-serif;
    margin-top: 15px;
    color: #fff;
}

.team-functie {
    font-size: 17px;
    font-weight: 400;
    font-family: 'Josefin Sans', sans-serif;
    margin-top: 5px;
    color: #fff;
}

/* Responsive: kaarten schalen mee */
@media (max-width: 1200px) {
    .team-card {
        flex: 1 1 180px;
    }
}

@media (max-width: 768px) {
    .team-card {
        flex: 1 1 140px;
        max-width: 180px;
    }

    .team-afbeelding img {
        height: auto;
    }
}

@media (max-width: 699px) {
    .team-span-titel,
    .team-titel {
        font-size: 30px;
    }
}

@media (max-width: 529px){
    .team-cards {
        justify-content: space-between;
    }
}

@media (max-width: 480px) {
    .team-cards {
        justify-content: center;
    }
}

@media (max-width: 396px) {
    .team-card {
        max-width: 100%;
    }

    .team-titels {
        flex-direction: column;
        align-items: start;
        gap: 0;
        line-height: 40px;
    }
}