body, .faq-question, .faq-answer p, .ul-compact, .li-compact {
    font-family: 'arial', sans-serif;
}

.container {
    max-width: 500px;
    margin: 40px auto;
    /* text-align: center; */
}

.faq-item .faq-question {
    text-align: left !important;
}

.page-title {
    font-family: 'arial', sans-serif;
    font-weight: 300;
    font-size: 24px;
    text-align: center;
    color: #66b2ff;
    margin-bottom: 5px;
}

.entry-title {
    font-family: 'arial', sans-serif;
    font-size: 21px;
    font-weight: bold;
    margin-bottom: 20px;
}

/* specifiek voor FAQ */

.faq-item {
    border: 1px solid #ddd;
    margin-bottom: -1px; /* Zorgt ervoor dat de onderste border overlapt met de bovenste van de volgende vraag */
    background-color: #eee;
}

.faq-question {
    font-size: 18px;
    cursor: pointer;  /* Maak de vraag klikbaar */
}

.faq-toggle-icon i {
    transition: transform 0.3s ease;
}

.faq-toggle-icon i.fa-times-circle {
    transform: rotate(180deg);
}

.faq-answer {
    display: none;
}

/* De eerste vraag krijgt afgeronde hoeken bovenaan */
.faq-item:first-of-type {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* De laatste vraag krijgt afgeronde hoeken onderaan */
.faq-item:last-of-type {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Verwijder de extra ruimte tussen de vragen */
.faq-item + .faq-item {
    margin-top: 0;
}


/* specifiek voor Contact */

.contact-list {
    margin: 20px auto;
}

.contact-item {
    display: flex;
    align-items: left;
    margin-bottom: 30px; /* Ruimte tussen de regels */
    font-size: 16px;
    color: #555;
}

.contact-item i {
    font-size: 25px;
    margin-right: 15px;
}

.phone-icon {
    color: #1A4A8E;
}

.envelope-icon {
    color: #1A4A8E;
}

.home-icon {
    color: #1A4A8E; 
}


/* Knoppen onderaan FAQ en Contactpagina en andere knoppen */
.btn-outline-blue {
    color: #66b2ff; /* Blauwe tekst */
    border: 2px solid #66b2ff; /* Blauwe rand */
}

.btn-outline-blue i {
    color: #66b2ff; /* Blauwe iconen */
}

/* Hover effect: blauwe achtergrond met witte tekst en icon */
.btn-outline-blue:hover {
    background-color: #66b2ff;
    color: white;
}

.btn-outline-blue:hover i {
    color: white; /* Witte iconen bij hover */
}

.faq-answer p {
    text-align: left;
    /* Zorgt ervoor dat de uitgeklapte tekst links wordt uitgelijnd */
}

.ul-compact {
    line-height: 16px;
    /* Exacte regelhoogte */
    text-align: left;
    padding-left: 20px;
    margin: 0;
}

.li-compact {
    line-height: 21px;
    /* Exacte regelhoogte */
    text-align: left;
}

/* Standaard linkjes (zonder class 'btn') */
a:not(.btn) {
    color: #66b2ff;
    text-decoration: none;
    position: relative;
    display: inline-block;
}

a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px; /* Afstand van de tekst */
    width: 0;
    height: 2px; /* Dikte van de lijn */
    background-color: currentColor; /* Zelfde kleur als de tekst */
    transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
}

a:not(.btn):hover::after {
    width: 100%;
    left: 0;
}

/* Animatie bij het verlaten van hover */
a:not(.btn):not(:hover)::after {
    width: 0;
    right: 100%;
}
/* Einde Lijntje bij hover */