body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

h2 {
    text-align: center;
}

.navbar {
    padding: 1rem;
    background-color: #007bff; /* Aangepaste achtergrondkleur */
}

.navbar-brand img {
    max-width: 100%;
    height: auto; /* Houd de verhoudingen van de afbeelding */
    transition: transform 0.2s;
}

.navbar-brand img:hover {
    transform: scale(1.1);
}

.card-container {
    padding: 20px;
    display: flex; /* Flexbox gebruiken voor de lay-out */
    justify-content: center; /* Center de kaart in het midden van de sectie */
    margin: 20px; /* Ruimte rond de sectie */
}

.card {
    display: flex; /* Flexbox voor de card zelf */
    border: 1px solid #ccc; /* Lichte rand om de kaart */
    border-radius: 8px; /* Afgeronde hoeken */
    overflow: hidden; /* Verberg inhoud die buiten de kaart valt */
    width: 100%; /* Maak de kaart breed */
    max-width: 800px; /* Max breedte voor de kaart */
    background: #ffffff; /* Achtergrondkleur */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schaduw voor diepte-effect */
    transition: transform 0.2s, box-shadow 0.2s; /* Overgangseffecten */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.text-container {
    padding: 20px; /* Ruimte binnen de tekstcontainer */
    flex: 1; /* Maak de tekstcontainer flexibel */
}

.image-container {
    flex: 0 0 40%; /* Zorg ervoor dat de afbeelding 40% van de breedte van de kaart neemt */
    display: flex; /* Flexbox voor de afbeelding */
    justify-content: center; /* Center de afbeelding */
    align-items: center; /* Verticale uitlijning */
}

.image-container img {
    max-width: 100%; /* Zorg ervoor dat de afbeelding niet breder is dan de container */
    height: auto; /* Behoud de verhoudingen van de afbeelding */
    border-radius: 8px; /* Rond de hoeken van de afbeelding af */
}

.card-body {
    flex-grow: 1; /* Zorg ervoor dat de tekst uitbreidt naar de beschikbare ruimte */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Zorgt ervoor dat de inhoud gelijkmatig verdeeld is */
    min-height: 300px; /* Zorg ervoor dat alle kaartlichamen dezelfde minimale hoogte hebben */
}

.card-title {
    font-weight: bold;
    color: #333;
    text-align: center; /* Centreren van de titel */
}

.card-text {
    color: #555;
    text-align: left; /* Links uitlijnen van de tekst */
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    transition: background-color 0.3s, transform 0.3s;
}

.btn-primary:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

button {
    background-color: #35424a;
    color: #ffffff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

button:hover {
    background-color: #6c757d;
}

.partner-card {
    height: 100%; /* Zorgt ervoor dat de kaarten de volledige hoogte van de container benutten */
}

.nav-link {
    color: black !important; /* Zwarte tekstkleur */
    font-weight: bold; /* Vetgedrukt */
    margin: 0 15px; /* Ruimte tussen de links */
}

.nav-link:hover {
    text-decoration: underline; /* Onderstreping bij hover */
}

.dropdown-menu {
    background-color: #0056b3; /* Aangepaste achtergrondkleur voor dropdown */
}

.dropdown-item {
    color: black; /* Zwarte tekstkleur voor dropdown-items */
}

.dropdown-item:hover {
    background-color: #004494; /* Donkerdere achtergrondkleur bij hover */
}

.border {
    border: 3px solid green; /* Je kunt de dikte en kleur van de rand aanpassen */
    border-radius: 15px; /* Dit maakt de hoeken van de border ronder */
    padding: 20px; /* Padding aan de binnenkant van de border */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Een schaduw voor een diepte-effect */
    background-color: #fff; /* Achtergrondkleur voor de inhoud van de container */
}

.container {
    padding-left: 20px; /* Links padding */
    padding-right: 20px; /* Rechts padding */
}