.signature-pad {
    cursor: crosshair;
    border: 1px solid #CCCCCC;
    width:300px;
}
.end-alignment {
    text-align: end;
}
.person {
    border: 2px dashed #ccc;
}
.display-4 {
    font-size: calc(1.475rem + 2.7vw);
    font-weight: 300;
    line-height: 1.2;
}

.add-customer-link i {
    font-size: 2rem; /* Grootte van het icoon */
    color: #fff; /* Kleur van het icoon */
}

.register-page .container {
    z-index: 100!important;
}

.app-container {
    height: 850px!important;
}
#app {
    height: 800px!important;
}

main {
    margin-top:100px;
}

main > .container, main > .container-fluid
{
    padding: 70px 15px 20px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
}

main > .container, main > .container-fluid.bg-floralwhite
{
    padding: 70px 15px 20px;
    box-shadow: none!important;
}

.footer {
    position:relative;
    background-color: #fff;
    font-size: .9em;
}

.footer > .container, .footer > .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    content: '';
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
    background: transparent;
}

a.asc:after {
    border-bottom: solid 7px #212529;
    border-top-width: 0;
}

a.desc:after {
    border-top: solid 7px #212529;
    border-bottom-width: 0;
}

.grid-view th,
.grid-view td:last-child {
    white-space: nowrap;
}

.grid-view .filters input,
.grid-view .filters select {
    min-width: 50px;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}
.navbar {
    display: flex;
    align-items: center;
    padding: 0.2rem;
}
.navbar>.container {
    display:flex!important;
    min-height:2.5rem;
}

/* align the logout "link" (button in form) of the navbar */
.navbar form > button.logout {
    padding-top: 7px;
    color: rgba(255, 255, 255, 0.5);
}

@media(max-width:767px) {
    .navbar form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 0;
    }
}

.navbar form > button.logout:focus,
.navbar form > button.logout:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.75);
}

.navbar form > button.logout:focus {
    outline: none;
}

.navbar img {
    max-height:35px;
}

/* style breadcrumb widget as in previous bootstrap versions */
.breadcrumb {
    background-color: var(--bs-gray-200);
    border-radius: .25rem;
    padding: .75rem 1rem;
}

.breadcrumb-item > a
{
    text-decoration: none;
}

/* Specifieke styling voor de contactpagina */
.contact-page .card-contact {
    box-shadow: none;
}

.contact-page .card-contact .card-body {
    padding: 1.5rem;
}

.contact-page form .form-group select.form-control {
    width:100%;
}

.contact-page .info-horizontal {
    padding: 20px 0;
    display: flex;
    align-items: center;
}

.contact-page .info-horizontal .icon {
    flex-shrink: 0;
    margin-right: 20px;
    margin-top:-20px;
}

.contact-page .info-horizontal .icon i {
    font-size: 2.5rem;
    color: #999;
}

.contact-page .info-horizontal .description {
    flex-grow: 1;
}

.contact-page .info-horizontal .description h5 {
    margin-bottom: 5px;
    font-weight: 500;
}

.contact-page .info-horizontal .description a {
    color: #3C4858;
    text-decoration: none;
}

.contact-page .info-horizontal .description a:hover {
    color: #00bcd4; /* info color */
}

.contact-page .map-container {
    position: relative;
    overflow: hidden;
    padding-top: 75%; /* 4:3 Aspect Ratio */
    border-radius: 6px;
    box-shadow: 0 5px 15px -8px rgba(0, 0, 0, .24), 0 8px 10px -5px rgba(0, 0, 0, .2);
}

.contact-page .map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* =============================================== */
/* HERO SECTIE STYLING */
/* =============================================== */

/* Verberg de standaard jumbotron/header als die er is */
.jumbotron {
    display: none;
}

.hero-section {
    clip-path: ellipse(90% 100% at TOP);
    position: relative;
    height: 60vh; /* Maakt de sectie schermvullend hoog */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    overflow: hidden; /* Zorgt ervoor dat er niks buiten de sectie valt */
    background-image: url('https://poelenburgh.nl/wp-content/uploads/2023/08/STRAND-NINA.jpg');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed; /* Geeft een mooi parallax-effect bij het scrollen */
}

.hero-section img {
    height:250px;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35); /* Donkere overlay voor leesbaarheid */
    z-index: 1;
}

.hero-content {
    /*background-image: url('https://poelenburgh.nl/wp-content/uploads/2025/10/Achtergrondverwijderaar-afbeelding-1.png');*/
    position: relative;
    /*background-position: center;
    background-size: cover;
    padding: 6.5rem !important;*/
    padding: 20px;
    z-index: 2;
}

.hero-content h1 {
    text-align: left;
    font-weight: 700;
    font-size: 4.5rem;
    /*text-shadow: 2px 2px 8px rgba(0,0,0,0.6);*/
}

.hero-content h2 {
    text-align: left;
    font-weight: 100;
    margin-bottom:-10px;
    font-size: 3.3rem;
    /*text-shadow: 2px 2px 8px rgba(14, 195, 227, 0.4);*/
}

.hero-content h2 span {
    font-weight: 100!important;
}

.hero-content .lead {
    font-size: 1.5rem;
    margin-bottom: 30px;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
}

.hero-content .btn-primary {
    background-color: rgb(14, 195, 227); /* Voorbeeldkleur, pas aan naar je eigen merkkleur */
    border-color: rgb(14, 195, 227);
    padding: 12px 30px;
    font-size: 1.2rem;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.hero-content .btn-primary:hover {
    background-color: rgb(14, 195, 227);
    border-color: rgb(14, 195, 227);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.hero-button-group {
    display: flex;
    justify-content: center;
    gap: 15px; /* Ruimte tussen de knoppen */
    flex-wrap: wrap; /* Zorgt dat knoppen onder elkaar springen op kleine schermen */
}

.btn-hero {
    background-color: rgba(255, 255, 255, 0.1); /* Semi-transparante achtergrond */
    border: 2px solid white;
    color: white;
    padding: 12px 25px;
    font-size: 1.1rem;
    font-weight: 500;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.hero-content .btn-info {
    color: #fff;
    background-color: rgb(14, 195, 227);
    border-color: rgb(14, 195, 227);
    box-shadow: none;
}

.text-poelenburgh {
    color:rgb(14, 195, 227)!important;
}

.text-shadow-poelenburgh {
    text-shadow: 2px 2px 8px #17a2b887;
}

.no-text-shadow {
    text-shadow: none;
}

.bg-poelenburgh {
    background-color: #002f56!important;
    /*background-color:rgb(14, 195, 227)!important;*/
}

.btn-hero {
    box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 188, 212, 0.4);
}

.btn-hero:hover {
    background-color: rgba(255, 255, 255, 0.25); /* Iets minder transparant bij hover */
    color: white;
    transform: translateY(-2px);
}

#niveau-pills-filtered, #niveau-pills-default {
    width: 90%;
    display: inline-flex; /* Gebruik inline-flex ipv inline-block voor betere interne uitlijning */
    flex-direction: column; /* Standaard onder elkaar */
    text-align: left;
}

#niveau-pills-filtered .nav-item, #niveau-pills-default .nav-item {
    width: 100%; /* Neemt volledige breedte in verticale modus */
}

#niveau-pills-filtered .nav-link, #niveau-pills-default .nav-link {
    display: flex;
    font-size:1rem;
    align-items: center;
    width: 100%;
    justify-content: center;
    text-align: left;
    white-space: nowrap;
    margin-bottom: 5px; /* Beetje ruimte onder elkaar */
}

#niveau-pills-filtered .nav-link i, #niveau-pills-default .nav-link i {
    margin-right: 10px;
    flex-shrink: 0;
}

#niveau-pills-filtered .nav-link .text-wrapper, #niveau-pills-default .nav-link .text-wrapper {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

#niveau-pills-filtered .nav-link .text-wrapper span.bold, #niveau-pills-default .nav-link .text-wrapper span.bold {
    font-weight: 500;
}

#niveau-pills-filtered .nav-link .text-wrapper span:last-child, #niveau-pills-default .nav-link .text-wrapper span:last-child {
    font-size: 0.8em;
    opacity: 0.8;
}

/* Zorg dat de flex-column class werkt op md schermen in actieve staat */
@media (min-width: 768px) {
    #niveau-pills-filtered, #niveau-pills-default {
        flex-direction: row; /* Pills naast elkaar */
        width: 100%; /* Neem volledige breedte van de container */
        justify-content: center; /* Centreer de items in de beschikbare ruimte */
    }

    #niveau-pills-filtered .nav-item, #niveau-pills-default .nav-item {
        flex-grow: 1; /* Laat elk item meegroeien om de ruimte te vullen */
        width: auto; /* Reset de breedte */
        margin-right: 5px; /* Optioneel: ruimte tussen de pills */
        margin-left: 5px;  /* Optioneel: ruimte tussen de pills */
    }
    #niveau-pills-filtered .nav-item:first-child, #niveau-pills-default .nav-item:first-child {
        margin-left: 0; /* Geen marge links voor de eerste */
    }
    #niveau-pills-filtered .nav-item:last-child, #niveau-pills-default .nav-item:last-child {
        margin-right: 0; /* Geen marge rechts voor de laatste */
    }

    #niveau-pills-filtered .nav-link, #niveau-pills-default .nav-link {
        justify-content: center; /* Centreer inhoud binnen de pil */
        margin-bottom: 0; /* Geen marge onderaan in horizontale modus */
        padding: 0.75rem 1.25rem;
    }

    /* In de staat waar de content ernaast staat */
    .niveau-check-row.results-active .niveau-pills-col ul#niveau-pills-filtered,
    .niveau-check-row.results-active .niveau-pills-col ul#niveau-pills-default {
        /* Override de justify-content center als je wilt dat het links begint */
        /* justify-content: flex-start; */
        /* Of laat het gecentreerd in de col-md-3, wat meestal mooier is */
        justify-content: center;
        flex-direction: column; /* Forceer terug naar kolom in de sidebar-modus */
        width: auto; /* Reset naar auto breedte */
    }
    .niveau-check-row.results-active .niveau-pills-col ul#niveau-pills-filtered .nav-item,
    .niveau-check-row.results-active .niveau-pills-col ul#niveau-pills-default .nav-item {
        flex-grow: 0; /* Niet meer laten groeien */
        width: 100%; /* Weer volledige breedte */
        margin-left: 0;
        margin-right: 0;
    }
    .niveau-check-row.results-active .niveau-pills-col ul#niveau-pills-filtered .nav-link,
    .niveau-check-row.results-active .niveau-pills-col ul#niveau-pills-default .nav-link {
        justify-content: flex-start; /* Weer links uitlijnen */
        margin-bottom: 5px; /* Weer ruimte onder elkaar */
    }

    /* Styling voor de niveau check sectie */
    .niveau-check-row .niveau-pills-col {
        transition: all 0.5s ease-in-out; /* Vloeiende overgang */
        display: flex; /* Maakt centreren mogelijk */
        justify-content: center; /* Centreert de ul horizontaal */
    }

    /* Zorg dat de ul niet onnodig breed wordt in gecentreerde staat */
    .niveau-check-row .niveau-pills-col ul {
        width: auto;
        margin-bottom: 2rem; /* Voeg wat ruimte toe onder de pills in start state */
        gap: 1.5rem;
    }

    /* Stijl voor de content kolom */
    .niveau-check-row .niveau-content-col {
        transition: opacity 0.5s ease-in-out; /* Fade-in effect */
        opacity: 0; /* Start onzichtbaar */
    }

    /* Actieve staat: wanneer een niveau is gekozen */
    .niveau-check-row.results-active .niveau-pills-col {
        /* Wordt col-md-3 */
        flex: 0 0 25%;
        max-width: 25%;
        justify-content: flex-start; /* Lijn links uit */
        align-items: center; /* Centreer verticaal naast content (optioneel) */
        padding-bottom: 0; /* Reset padding indien nodig */
    }
    /* Pas ook de uitlijning van de ul aan */
    .niveau-check-row.results-active .niveau-pills-col ul {
        margin-bottom: 0; /* Verwijder extra ruimte */
    }

    /* Maak content zichtbaar in actieve staat */
    .niveau-check-row.results-active .niveau-content-col {
        opacity: 1; /* Maak zichtbaar */
    }

    .niveau-check-row.results-active .niveau-pills-col ul {
        /* Behoud flex-column als je dat wilt, of verander naar flex-row */
        flex-direction: column !important;
    }
}

@media (min-width: 992px) {

    #niveau-pills-default .nav-link,
    #niveau-pills-filtered .nav-link {
        min-width:265px;
    }

}

#calendar-container {
    display:none;
}

/* Scroll down indicator */
.scroll-down-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.scroll-down-indicator a {
    display: block;
    width: 30px;
    height: 50px;
    border: 2px solid white;
    border-radius: 25px;
    position: relative;
}

.scroll-down-indicator a span {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 4px;
    height: 10px;
    background: white;
    margin-left: -2px;
    border-radius: 2px;
    animation: scroll-animation 2s infinite;
}

@keyframes scroll-animation {
    0% { opacity: 1; top: 10px; }
    100% { opacity: 0; top: 30px; }
}

/* Zorg voor wat ruimte onder de hero sectie */
#page-content {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

#niveau-check-sectie {
    /* Volledige schermhoogte */
    height: 100vh;

    /* Parallax achtergrond instellingen */
    background-image: url('https://poelenburgh.nl/wp-content/uploads/2023/08/STRAND-NINA.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    /* Flexbox om de inhoud verticaal te centreren */
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-floralwhite {
    background-color: floralwhite;
}
.bg-poelenburgh-contrast {
    background-color: #002f56!important;
    border-color: #002f56!important;
}

.text-poelenburgh-contrast {
    color: #002f56!important;
}

.nav-pills.nav-pills-poelenburgh .nav-item .nav-link.active, .nav-pills.nav-pills-poelenburgh .nav-item .nav-link.active:focus, .nav-pills.nav-pills-poelenburgh .nav-item .nav-link.active:hover {
    background-color: #002f56!important;
    box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 188, 212, 0.4);
    color: #fff;
}

/* =============================================== */
/* HERO KNOPPEN ANIMATIE */
/* =============================================== */

/* Keyframe-animatie definiëren */
@keyframes fadeInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-33px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* De animatie toepassen op de knoppen */
.hero-button-group .btn-hero {
    /* Begin met de knoppen onzichtbaar te maken */
    opacity: 0;

    /* Animatie-eigenschappen */
    animation-name: fadeInFromLeft;
    animation-duration: 0.8s; /* Duur van de animatie */
    animation-timing-function: ease-out; /* Zorgt voor een soepel einde */

    /* Zorgt dat de knop zichtbaar blijft na de animatie */
    animation-fill-mode: forwards;
}

/* Vertraging per knop */
.hero-button-group .btn-hero:nth-child(1) {
    animation-delay: 0.5s; /* Start na 0.5s */
}

.hero-button-group .btn-hero:nth-child(2) {
    animation-delay: 0.7s; /* Start na 0.7s */
}

.hero-button-group .btn-hero:nth-child(3) {
    animation-delay: 0.9s; /* Start na 0.9s */
}

/* =============================================== */
/* HERO SECTIE - RESPONSIVE STYLES VOOR MOBIEL */
/* =============================================== */

/* Deze stijlen worden toegepast op schermen die 768px of smaller zijn (tablets en smartphones) */
@media (max-width: 768px) {

    .hero-section {
        /* We gebruiken min-height in plaats van height voor meer flexibiliteit op mobiel,
           waar browser-balken de schermhoogte kunnen beïnvloeden. */
        height: auto;
        min-height: 75vh;
        padding-top: 40px; /* Voegt ruimte toe zodat content niet tegen de rand plakt */
        padding-bottom: 40px; /* Voegt ruimte toe zodat content niet tegen de rand plakt */
        display: flex;
        align-items: center; /* Zorgt voor verticale centrering */
        justify-content: center;
    }

    .hero-content h1, .hero-content h2 {
        /* Lettergrootte drastisch verkleinen om op het scherm te passen */
        font-size: 2.2rem;
        line-height: 1.2; /* Voorkomt dat de regels te dicht op elkaar staan */
    }

    .hero-content h2 {
        font-size: 1.8rem; /* De H2 iets kleiner maken dan de H1 */
    }

    .hero-content p.lead {
        /* Ook de subtitel verkleinen */
        font-size: 1.1rem;
        margin-left: auto;
        margin-right: auto;
        max-width: 90%; /* Voorkomt dat de tekst te breed wordt */
    }

    .hero-button-group {
        /* Knoppen niet naast, maar onder elkaar plaatsen */
        flex-direction: column;
        align-items: center; /* Centreert de knoppen in de verticale stapel */
        width: 100%;
    }

    .btn-hero {
        /* Geef de knoppen een vaste breedte zodat ze er netjes uitzien */
        margin-bottom: 10px; /* Ruimte tussen de gestapelde knoppen */
    }

    .scroll-down-indicator {
        /* De scroll-indicator is op mobiel vaak niet nodig en kan in de weg zitten */
        display: none;
    }

    /* =============================================== */
    /* BUTTON EFFECTS */
    /* =============================================== */

    .btn:after {
        content: '';
        position: absolute;
        z-index: -1;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }

    /* Button 8 */
    .perspective {
        -webkit-perspective: 800px;
        -moz-perspective: 800px;
        perspective: 800px;
        display: inline-block;
    }

    .btn-8 {
        display: block;
        outline: 1px solid transparent; /* FF jagged edges fix */
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .btn-8:active {
        background: #002f56!important;
    }

    /* Button 8a */
    .btn-8a:after {
        width: 100%;
        height: 42%; /* should be 40% but there's a gap in Chrome Version 34.0.1847.131 */
        left: 0;
        top: -40%;
        -webkit-transform-origin: 0% 100%;
        -webkit-transform: rotateX(90deg);
        -moz-transform-origin: 0% 100%;
        -moz-transform: rotateX(90deg);
        transform-origin: 0% 100%;
        transform: rotateX(90deg);
    }

    .btn-8a:hover {
        -webkit-transform: rotateX(-15deg);
        -moz-transform: rotateX(-15deg);
        -ms-transform: rotateX(-15deg);
        transform: rotateX(-15deg);
    }

    /* Button 8b */
    .btn-8b:after {
        width: 100%;
        height: 40%;
        left: 0;
        top: 100%;
        -webkit-transform-origin: 0% 0%;
        -webkit-transform: rotateX(-90deg);
        -moz-transform-origin: 0% 0%;
        -moz-transform: rotateX(-90deg);
        -ms-transform-origin: 0% 0%;
        -ms-transform: rotateX(-90deg);
        transform-origin: 0% 0%;
        transform: rotateX(-90deg);
    }

    .btn-8b:hover {
        -webkit-transform: rotateX(15deg);
        -moz-transform: rotateX(15deg);
        -ms-transform: rotateX(15deg);
        transform: rotateX(15deg);
    }

    /* Button 8c */
    .btn-8c:after {
        width: 21%; /* should be 20% but there's a gap in Chrome Version 34.0.1847.131 */
        height: 100%;
        left: -20%;
        top: 0;
        -webkit-transform-origin: 100% 0%;
        -webkit-transform: rotateY(-90deg);
        -moz-transform-origin: 100% 0%;
        -moz-transform: rotateY(-90deg);
        -ms-transform-origin: 100% 0%;
        -ms-transform: rotateY(-90deg);
        transform-origin: 100% 0%;
        transform: rotateY(-90deg);
    }

    .btn-8c:hover {
        -webkit-transform: rotateY(15deg);
        -moz-transform: rotateY(15deg);
        -ms-transform: rotateY(15deg);
        transform: rotateY(15deg);
    }

    /* Button 8d */
    .btn-8d:after {
        width: 20%;
        height: 100%;
        left: 100%;
        top: 0;
        -webkit-transform-origin: 0% 0%;
        -webkit-transform: rotateY(90deg);
        -moz-transform-origin: 0% 0%;
        -moz-transform: rotateY(90deg);
        -ms-transform-origin: 0% 0%;
        -ms-transform: rotateY(90deg);
        transform-origin: 0% 0%;
        transform: rotateY(90deg);
    }

    .btn-8d:hover {
        -webkit-transform: rotateY(-15deg);
        -moz-transform: rotateY(-15deg);
        -ms-transform: rotateY(-15deg);
        transform: rotateY(-15deg);
    }

    /* Button 8e */
    .btn-8e {
        -webkit-transform: rotateX(-15deg);
        -moz-transform: rotateX(-15deg);
        -ms-transform: rotateX(-15deg);
        transform: rotateX(-15deg);
    }

    .btn-8e:after {
        width: 100%;
        height: 42%; /* should be 40% but there's a gap in Chrome Version 34.0.1847.131 */
        left: 0;
        top: -40%;
        -webkit-transform-origin: 0% 100%;
        -webkit-transform: rotateX(90deg);
        -moz-transform-origin: 0% 100%;
        -moz-transform: rotateX(90deg);
        -ms-transform-origin: 0% 100%;
        -ms-transform: rotateX(90deg);
        transform-origin: 0% 100%;
        transform: rotateX(90deg);
    }

    .btn-8e:active {
        -webkit-transform: rotateX(0deg);
        -moz-transform: rotateX(0deg);
        -ms-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }

    /* Button 8f */
    .btn-8f {
        -webkit-transform: rotateX(15deg);
        -moz-transform: rotateX(15deg);
        -ms-transform: rotateX(15deg);
        transform: rotateX(15deg);
    }

    .btn-8f:after {
        width: 100%;
        height: 40%;
        left: 0;
        top: 100%;
        -webkit-transform-origin: 0% 0%;
        -webkit-transform: rotateX(-90deg);
        -moz-transform-origin: 0% 0%;
        -moz-transform: rotateX(-90deg);
        -ms-transform-origin: 0% 0%;
        -ms-transform: rotateX(-90deg);
        transform-origin: 0% 0%;
        transform: rotateX(-90deg);
    }

    .btn-8f:active {
        -webkit-transform: rotateX(0deg);
        -moz-transform: rotateX(0deg);
        -ms-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }

    /* Button 8g */
    .btn-8g {
        background: #fff;
        color: #999;
    }

    .btn-8g:active {
        background: #fff;
    }

    .btn-8g:after,
    .btn-8g:before {
        text-transform: uppercase;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        line-height: 70px;
    }

    .btn-8g:after {
        top: -98%; /* should be -100% but there's a gap in Chrome Version 34.0.1847.131 */
        background: #7aca7c;
        color: #358337;
        content: 'It worked!';
        -webkit-transform-origin: 0% 100%;
        -webkit-transform: rotateX(90deg);
        -moz-transform-origin: 0% 100%;
        -moz-transform: rotateX(90deg);
        -ms-transform-origin: 0% 100%;
        -ms-transform: rotateX(90deg);
        transform-origin: 0% 100%;
        transform: rotateX(90deg);
    }

    .btn-8g:before {
        top: 100%;
        background: #e96a6a;
        color: #a33a3a;
        content: 'Error!';
        font-weight: 700;
        font-family: 'Lato', Calibri, Arial, sans-serif;
        -webkit-transform-origin: 0% 0%;
        -webkit-transform: rotateX(-90deg);
        -moz-transform-origin: 0% 0%;
        -moz-transform: rotateX(-90deg);
        -ms-transform-origin: 0% 0%;
        -ms-transform: rotateX(-90deg);
        transform-origin: 0% 0%;
        transform: rotateX(-90deg);
    }

    .btn-8g.btn-success3d {
        background: #aaa;
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: rotateX(-90deg) translateY(100%);
        -moz-transform-origin: 50% 100%;
        -moz-transform: rotateX(-90deg) translateY(100%);
        -ms-transform-origin: 50% 100%;
        -ms-transform: rotateX(-90deg) translateY(100%);
        transform-origin: 50% 100%;
        transform: rotateX(-90deg) translateY(100%);
    }

    .btn-8g.btn-error3d  {
        background: #aaa;
        -webkit-transform-origin: 50% 0%;
        -webkit-transform: rotateX(90deg) translateY(-100%);
        -moz-transform-origin: 50% 0%;
        -moz-transform: rotateX(90deg) translateY(-100%);
        -ms-transform-origin: 50% 0%;
        -ms-transform: rotateX(90deg) translateY(-100%);
        transform-origin: 50% 0%;
        transform: rotateX(90deg) translateY(-100%);
    }
}

/* =============================================== */
/* HERO KNOPPEN - UITKLAP EFFECT (DESKTOP) */
/* =============================================== */

/* Deze stijlen gelden alleen voor schermen breder dan 992px (desktops/laptops) */
@media (min-width: 992px) {
    .btn-hero {
        /* Gebruik flexbox voor perfecte uitlijning van icoon en tekst */
        display: inline-flex;
        align-items: center;
        justify-content: center;

        /* Start-afmeting: een cirkel die net om het icoon past */
        width: 50px;
        padding-left: 0;
        padding-right: 0;
        overflow: hidden; /* Verberg de tekst die er initieel buiten valt */

        /* Vloeiende overgang voor de breedte-verandering */
        transition: width 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    }

    /* De tekst binnen de knop */
    .btn-hero .btn-text {
        display: inline-block;
        white-space: nowrap; /* Voorkom dat tekst op meerdere regels breekt tijdens de animatie */

        /* Verberg de tekst initieel en geef het geen breedte */
        max-width: 0;
        opacity: 0;

        /* Vloeiende overgang voor het verschijnen van de tekst */
        transition: max-width 0.3s ease-in-out 0.1s, opacity 0.2s ease-in-out 0.1s;
    }

    /* Het icoontje binnen de knop */
    .btn-hero .fas {
        /* Soepele overgang voor de ruimte naast het icoon */
        transition: margin-right 0.4s ease-in-out;
    }

    /* Wanneer je met de muis over de knop gaat */
    .btn-hero:hover {
        /* De nieuwe, volledige breedte. Pas dit getal eventueel aan. */
        width: 305px;
    }

    .btn-hero:hover .fas {
        /* Voeg ruimte toe tussen het icoon en de tekst die verschijnt */
        margin-right: 10px;
    }

    .btn-hero:hover .btn-text {
        /* Maak de tekst zichtbaar en geef het ruimte */
        max-width: 240px; /* Moet groot genoeg zijn voor de langste tekst */
        opacity: 1;
    }
}

.animate span {
    display: inline-block;
}

.animate span:nth-of-type(2) {
    animation-delay: .05s;
}
.animate span:nth-of-type(3) {
    animation-delay: .1s;
}
.animate span:nth-of-type(4) {
    animation-delay: .15s;
}
.animate span:nth-of-type(5) {
    animation-delay: .2s;
}
.animate span:nth-of-type(6) {
    animation-delay: .25s;
}
.animate span:nth-of-type(7) {
    animation-delay: .3s;
}
.animate span:nth-of-type(8) {
    animation-delay: .35s;
}
.animate span:nth-of-type(9) {
    animation-delay: .4s;
}
.animate span:nth-of-type(10) {
    animation-delay: .45s;
}
.animate span:nth-of-type(11) {
    animation-delay: .5s;
}
.animate span:nth-of-type(12) {
    animation-delay: .55s;
}
.animate span:nth-of-type(13) {
    animation-delay: .6s;
}
.animate span:nth-of-type(14) {
    animation-delay: .65s;
}
.animate span:nth-of-type(15) {
    animation-delay: .7s;
}
.animate span:nth-of-type(16) {
    animation-delay: .75s;
}
.animate span:nth-of-type(17) {
    animation-delay: .8s;
}
.animate span:nth-of-type(18) {
    animation-delay: .85s;
}
.animate span:nth-of-type(19) {
    animation-delay: .9s;
}
.animate span:nth-of-type(20) {
    animation-delay: .95s;
}

/* Animation Four */
.four span {
    color: #fff;
    opacity: 0;
    font-weight: 900 !important;
    transform: translate(-300px, 0) scale(0);
    animation: sideSlide .5s forwards;
}

@keyframes sideSlide {
    60% {
        transform: translate(20px, 0) scale(1);
        color: #fff;
    }

    80% {
        transform: translate(20px, 0) scale(1);
        color: #fff;
    }

    99% {
        transform: translate(0) scale(1.2);
        color: #002f56!important;
    }

    100% {
        transform: translate(0) scale(1);
        opacity: 1;
        color: #fff;
    }
}

/* =============================================== */
/* RESPONSIVE PADDING FIXES VOOR MOBIEL */
/* =============================================== */

/* De agenda-sectie miste de standaard verticale padding. */
.site-agenda {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Op kleinere schermen (tablets en kleiner), zorgen we ervoor dat alle
   hoofdsecties een veilige marge aan de zijkanten hebben. */
@media (max-width: 991px) {
    #niveau,
    #rijervaring,
    .site-agenda,
    #tarieven,
    #contact {
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box; /* Zorgt ervoor dat padding binnen de sectiebreedte valt */
    }

    /* De .container in Bootstrap heeft al padding. Als een van onze secties
       (die nu ook padding heeft) een .container bevat, halen we de padding
       van de container weg om dubbele marges te voorkomen. */
    #niveau .container,
    #rijervaring .container,
    .site-agenda .container,
    #tarieven .container {
        padding-left: 0;
        padding-right: 0;
    }
}