/* deze code zorgt ervoor dat het middendeel tussen de header en de footer scrolbaar is */

/* In de code waarin dit gebruikt wordt ziet dit er zo uit:
<div class="scrollable-content container">
  TEKST
 </div>
*/
:root {
    --header-height: 0px;
    --footer-height: 0px;
}

body, html {
    height: 100%;
    margin: 0;
    /* overflow: hidden;  <-- Deze NIET meer! */
}

/* Zorgt ervoor dat het scrollbare gedeelte tussen header en footer zit */
.scrollable-content {
    position: relative;
    top: var(--header-height);
    bottom: var(--footer-height);
    height: calc(100vh - var(--header-height) - var(--footer-height));
    overflow-y: auto;
    padding-top: 1rem;     
    padding-bottom: 100px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scrollable-content::-webkit-scrollbar {
    display: none;
}

.scrollable-content p:last-child {
    padding-bottom: 2rem;
}

@media (max-width: 768px) {
    .scrollable-content {
        padding-bottom: 2rem;
    }
}

.main-middle {
    min-height: calc(100vh - var(--header-height, 100px) - var(--footer-height, 60px));
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}


 /* CSS voor het centreren van de tekst */
        .center-content {
            display: flex;
            justify-content: center;
            align-items: center;
            height: calc(100vh - var(--header-height) - var(--footer-height));
            text-align: center;
        }
        
.custom-green { color: #1E6E68; !important }
.custom-blue-btn { background-color: #007bff; color: white; !important }