.logo {
    display: block;
    margin: auto;
    max-width: 100%;
    height: auto;
}

body {
    /*De kleur van alle tekstvelden en kaders*/
    color: #004225;
}

/* De contact knop rechtsboven aan de pagina */
.contact-button {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 0.5em 1em;
    /* De kleur van de knop */
    background-color: #004225;
    /* De kleur van de tekst in de knop */
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: background-color 0.2s ease;
    z-index: 10;
}


.contact-button:hover {
    /* De kleur van de knop als je er met de muis overheen gaat */
    background-color: #002615;
}

/* De groep hyperlinks bovenaan die voor extra informatie zorgen */
.services {
    display: flex;
    justify-content: center;
    gap: 2vw;
    margin-top: 1.5rem;
    padding: 0;
    list-style: none;
}

/* Elk hyperlink item apart */
.service-item {
    cursor: pointer;
    font-weight: bold;
    padding: 0.25rem 0.5rem;
    transition: color 0.2s;
}

/* De kleur als een hyperlink uitgeklapt is */
.service-item.active {
    color: #09714c;
}

@keyframes popIn {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}

/* De extra informatie die uitgeklapt wordt */
#service-info {
    max-height: 0;
    opacity: 0;
    /* De maximale breedte van de tekst */
    max-width: 600px;
    overflow: hidden;
    margin: 0 auto;
    padding: 0 1rem;
    border-radius: 4px;
    text-align: center;
    transition:
            max-height 0.3s ease-out,
            opacity     0.3s ease-out,
            padding     0.3s ease-out,
            margin      0.3s ease-out;
    font-family: inherit;
}

#service-info.visible {
    /* De maximale hoogte van de tekst */
    max-height: 200px;
    opacity: 1;
    margin: 1rem auto;
}

#service-info.pop-in {
    display: block;
    animation: popIn 0.3s ease-out forwards;
}

/* Het contact kaartje onderaan de pagina */
.contact-card {
    /* De maximale breedte van het contact kaartje */
    max-width: 600px;
    margin: 2rem auto;
    padding: 1rem;
    /* De rand van het contact kaartje. Als eerste "2px", dit is hoe breed de rand is, daarna "solid",
    dat het een doorlopende lijn is (en dus niet gestippeld o.i.d.), en als laatste de kleur. */
    border: 2px solid #004225;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 1rem;
    /* De achtergrond van het contact kaartje */
    background: #F6F5F0;
}
.contact-details {
    flex: 1;
    line-height: 1.4;
    color: #004225;
}
.contact-details h3 {
    margin: 0 0 .5rem;
    font-size: 1.1rem;
}
.contact-details p {
    margin: .2rem 0;
}
.contact-details a {
    text-decoration: underline;

}
.contact-details a[href^="mailto:"] {
    color: inherit;
}
.contact-details a[href^="tel:"] {
    color: inherit;
}

.contact-photo {
    object-fit: cover;
    border-radius: 4px;
    /* De breedte van de foto */
    width: 100px;
    height: auto;
}

.outer {
    width: max(75%, min(100%, 400px));
    margin: 0 auto;
}

.grid {
    margin: 0 auto;
}
.grid-item {
    float: left;
    margin: 1px;
}

.grid-item img {
    display: block;
    /* De breedte van elke foto */
    width: 400px;
    height: auto;
}