@keyframes colorWave {
    0%, 100% {
        background-color: #fae582; /* Begin en eindig met geel */
    }
    50% {
        background-color: #FFC0CB; /* Halverwege naar roze */
    }
}

.btn-peiling {
    background-color: #ffffff; /* De gele achtergrondkleur */
    color: #000000; /* Zwart voor de tekst */
    padding: 3px 12px; /* Ruimte binnen de knop */
    border: 2px solid #000000; /* Zwart randje */
    border-radius: 20px; /* Ronde hoeken */
    font-size: 16px; /* Grootte van de tekst */
    text-decoration: none; /* Geen onderstreping */
    font-weight: bold; /* Dikgedrukte tekst */
    display: inline-block; /* Zorgt dat de knop correct wordt weergegeven */
    box-shadow: 0px 8px 0px 0px #000000; /* Brede zwarte rand onder de knop */
    transition: box-shadow 0.3s; /* Vloeiende overgangseffecten voor de schaduw */
    vertical-align: middle; /* Zorgt dat de knop verticaal gecentreerd wordt */
    margin-top: -4px; /* Pas dit aan om de verticale positie te perfectioneren */
    margin-left: 10px; /* Ruimte aan de linkerkant */
    margin-right: 10px; /* Ruimte aan de rechterkant */
}

.btn-peiling:hover {
    
    /* Verwijder de achtergrondkleur animatie op hover als je dat effect wilt stoppen */
    animation: none;
}

.btn-demo-aanvragen {
    background-color: #fae582; /* De gele achtergrondkleur */
    color: #000000; /* Zwart voor de tekst */
    padding: 3px 12px; /* Ruimte binnen de knop */
    border: 2px solid #000000; /* Zwart randje */
    border-radius: 20px; /* Ronde hoeken */
    font-size: 16px; /* Grootte van de tekst */
    text-decoration: none; /* Geen onderstreping */
    font-weight: bold; /* Dikgedrukte tekst */
    display: inline-block; /* Zorgt dat de knop correct wordt weergegeven */
    box-shadow: 0px 8px 0px 0px #000000; /* Brede zwarte rand onder de knop */
    transition: box-shadow 0.3s; /* Vloeiende overgangseffecten voor de schaduw */
    vertical-align: middle; /* Zorgt dat de knop verticaal gecentreerd wordt */
    margin-top: -4px; /* Pas dit aan om de verticale positie te perfectioneren */
    margin-left: 10px; /* Ruimte aan de linkerkant */
    margin-right: 10px; /* Ruimte aan de rechterkant */
    animation: colorWave 6s ease-in-out infinite; /* De kleurveranderende animatie */
}

.btn-demo-aanvragen:hover {
    
    /* Verwijder de achtergrondkleur animatie op hover als je dat effect wilt stoppen */
    animation: none;
}

/* Basis styling voor het Contact Form 7 formulier */
.wpcf7-form {
    max-width: 500px;
    background: #ffffff;
    margin: 10px auto;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0);
}

/* Labels zijn nu inline-blocks voor een uniforme uitlijning met de invoervelden */
label {
    font-weight: bold; /* Maakt de tekst vetgedrukt */
    font-size: 1.6em; /* Maakt de tekst iets groter */
    display: inline-block; /* Zorgt ervoor dat labels naast invoervelden kunnen staan */
    margin-bottom: 0.25em; /* Verkleint de ruimte onder het label */
    vertical-align: top; /* Zorgt dat de labels uitgelijnd zijn met de bovenkant van de invoervelden */
    margin-right: 10px; /* Voegt ruimte toe tussen label en invoerveld */
}

/* Aanpassingen voor wanneer labels boven de invoervelden staan */
@media (max-width: 520px) {
    label {
        display: block; /* Labels nemen de volledige breedte in en staan boven de velden */
        margin-right: 0; /* Verwijdert de ruimte rechts van het label */
        margin-bottom: 5px; /* Kleinere ruimte onder het label voor strakke uitlijning */
    }
}

/* Stijlen voor de input en textarea elementen */
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-textarea {
    width: calc(100% - 20px); /* Verbreed de velden om rekening te houden met padding */
    font-size: 20px;
    margin-bottom: 10px;
    padding: 15px;
    border: 2px solid #000000;
    border-radius: 16px;
    box-sizing: border-box;
}

/* Stijl voor de 'Verzenden' knop */
.wpcf7-form-control.wpcf7-submit {
    width: calc(100% - 20px); /* Knop breedte aangepast */
    padding: 14px;
    border: 2px solid #000000;
    border-radius: 18px;
    background-color: #fae582;
    color: #000000;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 0 6px 0px rgba(0, 0, 0, 1);
}

.wpcf7-form-control.wpcf7-submit:hover {
    background-color: #f388a8;
}

/* Responsiviteit: zorg ervoor dat het formulier schaalt op kleinere apparaten */
@media (max-width: 520px) {
    .wpcf7-form {
        width: 100%;
        box-sizing: border-box;
    }
    .wpcf7-form-control.wpcf7-submit {
        width: 100%; /* Zorgt ervoor dat de verzendknop volledige breedte neemt op kleine schermen */
    }
}