:root {
    --button-color: #CEA69D; /* #3498db  #50737C */
    --secondary-color: #2ecc71;
    --accent-color: #e74c3c;
    --background-color: #f9f9f9;
    --text-color: #333;
}

@font-face {
    font-family: 'Galvji';
    src: url('/Galvji.ttc') format('truetype'); /* gebruik hier je TTC-bestand */
}

@font-face {
    font-family: 'Playwrite';
    src: url('/PlaywriteCU-VariableFont_wght.ttf') format('truetype'); /* gebruik hier je TTC-bestand */
    
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Galvji', sans-serif;
    -webkit-font-smoothing: antialiased; /* Voor Webkit-browsers */
    -moz-osx-font-smoothing: grayscale; /* Voor Firefox op macOS */
    line-height: 1.6;
    box-sizing: border-box;

}

a   {
    text-decoration: none;
    color: black;
}

header {
    position: fixed; /* Zorg ervoor dat de header vast is */
    top: 0; /* Plaats de header aan de bovenkant van de pagina */
    left: 0; /* Zorg ervoor dat de header aan de linkerkant begint */
    right: 0; /* Zorg ervoor dat de header aan de rechterkant eindigt */
    z-index: 99; /* Zorg ervoor dat de header boven andere elementen verschijnt */
    padding: 10px 50px; /* Verminder de padding om ruimte te besparen */
    background: white; /* Zorg ervoor dat de achtergrondkleur zichtbaar blijft */
    display: flex; /* Flexbox voor uitlijning */
    justify-content: space-between; /* Ruimte tussen elementen */
    align-items: center; /* Verticaal centreren */
    max-width: 100%; /* Zorg ervoor dat de header nooit breder is dan het scherm */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

main {
    margin-top: 120px; /* Geef ruimte aan de bovenkant voor de vaste header */
    min-height: calc(100vh - 120px); /* Vul het scherm, minus de hoogte van de header en eventuele andere elementen */
    max-width: 1800px; /* Max width for large screens */
    padding-left: 150px; /* Keep left padding for large screens */
    padding-right: 150px; /* Keep right padding for large screens */
}

/* header h1 {
    font-size: 1.2em;
    font-family: 'Caveat', cursive;
    font-weight: 500;
} */

header h1 {
    font-size: 2em;
    font-family: 'Caveat', cursive;
    font-weight: 500;
    margin-top: -5px;
}

.footer-logo h1 {
    font-size: 2em;
    font-family: 'Caveat', cursive;
    font-weight: 500;
}

.subtitle {
    font-size: .5em;
    font-weight: 200;
    margin-top: -10px;
}

nav {
    display: flex;
    justify-content: center;
    flex-grow: 1; /* Allows nav to take available space */
}

nav a {
    font-size: 0.9em;
    margin: 0 15px;
    text-decoration: none;
    color: black;
    font-weight: 200;
    transition: 0.3s;
}

nav a:hover {
    opacity: 0.3;
}

.nav-button  {
    border-radius: 35px;
    background-color: var(--button-color);
    border: none;
    color: #FFFFFF;
    text-align: center;
    padding: 15px;
    width: 200px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
}

.nav-button  span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
  }
  
  .nav-button  span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: -2px;
    right: -20px;
    transition: 0.5s;
  }
  
  .nav-button:hover span {
    padding-right: 15px;
  }
  
  .nav-button:hover span:after {
    opacity: 1;
    right: 0;
  }

.hero-button {
    border-radius: 35px;
    background-color: var(--button-color);
    border: none;
    color: #FFFFFF;
    text-align: center;
    padding: 20px;
    width: 200px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
}

.hero-button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
  }
  
  .hero-button span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: -2px;
    right: -20px;
    transition: 0.5s;
  }
  
  .hero-button:hover span {
    padding-right: 15px;
  }
  
  .hero-button:hover span:after {
    opacity: 1;
    right: 0;
  }

  .hero-button-last {
    border-radius: 35px;
    background-color: var(--button-color);
    border: none;
    color: #FFFFFF;
    text-align: center;
    padding: 15px;
    width: 200px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
}

.hero-button-last span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
  }
  
  .hero-button-last span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: -2px;
    right: -20px;
    transition: 0.5s;
  }
  
  .hero-button-last:hover span {
    padding-right: 15px;
  }
  
  .hero-button-last:hover span:after {
    opacity: 1;
    right: 0;
  }


 

.hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 50px;
    padding-left: 50px;
    padding-right: 50px;
    max-width: 1800px; /* Limiteer de maximale breedte van de sectie voor grotere schermen */
    margin: 0 auto; /* Centreer de sectie */
    gap: 30px; /* Ruimte tussen de afbeelding en de tekstinhoud */
}

@media (min-width: 1450px) {

    .hero .text-content {
        max-width: 800px; /* Zorg ervoor dat de tekstinhoud een breedte heeft die geschikt is voor grotere schermen */
    }

    .hero h2.hero-text {
        font-size: 6em; /* Verhoog de tekstgrootte voor grotere schermen */
    }

    .hero .image-content img {
        width: 450px; /* Vergroot de afbeelding voor betere weergave op grotere schermen */
    }

    main {
margin-top: 120px;
}
}

@media (min-width: 1900px) {

main {
    margin-top: 150px;
    }

}

.no-bullets {
    list-style-type: none;
    padding-left: 0;
  }

  .hidden {
    display: none;
  }

  .expanded .hidden {
    display: list-item;
  }

.text-content {
    max-width: 650px;
}

.hero-subtitle {
font-size: 1.2em;
}

.text-content h2 {
    font-size: 5em;
    font-family: "Caveat", cursive;
    /* font-feature-settings: 'ss19', 'ss01'; */ /* Activeert ss19 en ss01 variants */
    font-weight: 500;
    letter-spacing: 0.03em; /* Of gebruik een specifieke waarde zoals '0.05em' */
    line-height: 1;
}

.text-content p {
    margin: 30px 0;
}

.image-content img {
    width: 350px; /* Set a fixed width for the image */
    height: auto; /* Maintain aspect ratio */
    border-radius: 25px; /* Round the corners */
    margin-left: 50px; /* Optional: adjust margin for alignment */
}

.image-content-boek img {
    width: 350px; /* Set a fixed width for the image */
    height: auto; /* Maintain aspect ratio */
    border-radius: 0px; /* Round the corners */
    margin-left: 50px; /* Optional: adjust margin for alignment */
}

    /* Stijl voor de cookie melding */
    #cookie-consent {
        position: fixed;
        bottom: 20px;
        left: 20px;
        right: 20px;
        padding: 15px;
        background-color: #f6f6f6;
        color: black;
        border-radius: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 1000;
        box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
    }

      #cookie-consent button#accept-btn {
        background-color: var(--button-color);
        color: white;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        border-radius: 25px;
      }

      .cookie-buttons {
        display: flex;
        gap: 10px; /* Ruimte tussen de knoppen */
    }
    
    #view-btn {
        background-color: transparent; /* Maak de achtergrond transparant */
        border: 2px solid var(--button-color); /* Stel de border kleur in */
        border-width: 1px; /* Stel de border dikte in */
        border-radius: 25px;
        color: var(--button-color);
        padding: 10px 20px;
        cursor: pointer;
    }

    footer {
        background: #f1f1f1;
    }
    
    .footer-container {
        display: flex;
        justify-content: space-between;
        /* align-items: center; */
        max-width: 1200px;
        margin: 0 auto;
        padding: 40px 20px 20px;
    }
    
    .footer-logo img {
        max-width: 150px;
        height: auto;
    }
    
    .footer-info {
        text-align: left;
    }
    
    .footer-info p {
        margin: 5px 0;
    }
    
    .footer-info a {
        color: #0066cc;
        text-decoration: none;
    }
    
    .footer-info a:hover {
        text-decoration: underline;
    }
    
    .footer-menu nav {
        text-align: right;
    }
    
    .footer-menu ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    
    .footer-menu ul li {
        /* margin: 10px 0; */
    }
    
    .footer-menu ul li a {
        text-decoration: none;
        color: #000;
    }
    
    .footer-menu ul li a:hover {
        opacity: 0.3;
    }
    
    .footer-bottom {
        background: #e1e1e1;
        padding: 10px 0;
        margin-top: 20px;
        text-align: center;
    }
    
    .footer-bottom p {
        margin: 0;
        font-size: 12px;
        color: #333;
    }
    
    @media screen and (max-width: 768px) {
        .footer-container {
            flex-direction: column;
            text-align: center;
        }
    
        .footer-menu ul li {
            margin: 5px 0;
        }

        .hero {
            gap: 0px;
        }

    .footer-logo, .footer-info, .footer-menu {
        margin: 20px 0;
    }

    .footer-info {
        text-align: center;
    }

    .footer-menu nav {
        text-align: center;
    }
    }
    

/* Media Query for screens smaller than 1080px */
/* @media (max-width: 1080px) {
    header {
        margin: 20px 30px; 
        padding-left: 30px; 
        padding-right: 30px; 
    }

    main {
        margin: 0 30px; 
        padding-left: 30px;
        padding-right: 30px; 
    }

    .image-section {
        margin: 0 30px; 
        padding-left: 30px; 
        padding-right: 30px; 
    }
} */

/* Media Query for even smaller screens */
/* @media (max-width: 768px) {
    header {
        margin: 20px 20px; 
        padding-left: 20px; 
        padding-right: 20px; 
    }

    main {
        margin: 0 20px; 
        padding-left: 20px; 
        padding-right: 20px; 
    }

    .image-section {
        margin: 0 20px; 
        padding-left: 20px; 
        padding-right: 20px; 
    }
} */

.image-section {
    margin: 0 auto; /* Center main with auto margins */
    max-width: 1800px; /* Max width for large screens */
    padding-top: 50px;
    padding-bottom: 50px;
}

.image-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Align items side by side */
    max-width: 1800px;
    margin: 0 auto; /* Center the container */    
}

.video-thumbnail {
    position: relative; /* Positioning for the play button */
    width: 500px; /* Set width similar to the previous image */
    height: auto; /* Maintain aspect ratio */
    border-radius: 25px; /* Rounded corners */
    overflow: hidden; /* Hide overflow for rounded corners */
}

.video-thumbnail video {
    width: 500px;
    height: auto;
    border-radius: 25px; /* Consistent with the image styling */
}

.text-content-image-section {
    max-width: 500px; /* Limit text width */
    margin-left: 50px; /* Space between video and text */
}

.text-content-image-section h3 {
    font-size: 4em;
    font-family: "Caveat", cursive;
    font-feature-settings: 'ss19', 'ss01'; /* Activeert ss19 en ss01 variants */
    letter-spacing: 0.03em; /* Of gebruik een specifieke waarde zoals '0.05em' */
}

.text-content-image-section p {
    margin: 15px 0; /* Spacing between paragraphs */
}

.button-image-section   {
    background-color: transparent; /* Maak de achtergrond transparant */
    border: 2px solid var(--button-color); /* Stel de border kleur in */
    border-width: 1px; /* Stel de border dikte in */
    border-radius: 25px;
    color: var(--button-color);
    text-align: center;
    padding: 14px;
    width: 200px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
}

@media (max-width: 1350px) {
    .image-section {
        padding-left: 20px;
        padding-right: 20px;
        flex-direction: column;
        text-align: center;
    }

    .image-container {
        flex-direction: column;
        align-items: center;
    }

    .video-thumbnail {
        width: 100%;
        max-width: 600px;
    }

    .text-content-image-section {
        max-width: 100%;
        margin-left: 0;
        margin-top: 20px;
    }
    
    .text-content-image-section {
        max-width: 600px;
    }

    .video-thumbnail video {
        width: 600px;
    }

    .video-thumbnail {
        width: 600px;
    }

    .text-content h2 {
        font-size: 4em;
    }

    .hero {
        padding-left: 0px;
        padding-right: 0px;
    }

}

@media (min-width: 1450px) {
    .text-content-image-section {
        max-width: 600px;
    }

    .video-thumbnail video {
        width: 600px;
    }

    .video-thumbnail {
        width: 600px;
    }
}

@media (min-width: 1900px) {
    .text-content-image-section {
        max-width: 600px;
    }

    .video-thumbnail video {
        width: 700px;
    }

    .video-thumbnail {
        width: 700px;
    }
}



/* content: '\203A';
position: absolute;
opacity: 0;
top: -9px;
right: -20px;
transition: 0.5s;
font-size: 24px; 
font-weight: 100; */

.button-image-section span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
  }
  
  .button-image-section span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: -2px;
    right: -20px;
    transition: 0.5s;
  }
  
  .button-image-section:hover span {
    padding-right: 15px;
  }
  
  .button-image-section:hover span:after {
    opacity: 1;
    right: 0;
  }



.GDPR-content p {
margin: 15px 0;
}

#last-text {
    margin-top: 15px;
    margin-bottom: 150px; /* Verwijder de onderste marge van de laatste tekst */
  }

.pain-section {
    padding-top: 50px; /* Padding rondom de inhoud */
    padding-bottom: 50px; /* Padding rondom de inhoud */
    background-color: white; /* Achtergrondkleur voor de sectie */
    margin: 0 auto; /* Center main with auto margins */
    max-width: 1800px; /* Max width for large screens */
    display: flex; /* Flexbox voor uitlijning */
    justify-content: center; /* Horizontaal centreren */
    align-items: center; /* Verticaal centreren */
    min-height: 100vh; /* Minimale hoogte van de sectie */
}

.content {
    display: flex; /* Gebruik flexbox voor layout */
    justify-content: space-between; /* Ruimte tussen linkerkant en rechterkant */
    align-items: flex-start; /* Align items naar de start */
    max-width: 100%; /* Zorg ervoor dat het niet breder is dan de sectie */
}

.text-content {
    flex: 1; /* Neem beschikbare ruimte in */
    padding-right: 20px; /* Ruimte tussen tekst en beschrijving */
}

.description-content {
    flex: 1; /* Neem beschikbare ruimte in */
}

.pain-section h2 {
    font-family: 'Caveat', cursive;
    font-size: 4em; /* Grootte van de heading */
    font-weight: 900; /* Vet lettertype */
    letter-spacing: -0.5px; /* Of een andere waarde die goed werkt */
    line-height: 1;
    margin-bottom: 20px; /* Ruimte onder de heading */
}

.buttons {
    margin: 20px 0; /* Ruimte rond knoppen */
    display: flex;
    flex-direction: column; /* Zorgt ervoor dat knoppen onder elkaar staan */
    gap: 5px; /* Ruimte tussen de knoppen */
}

.appointment-button,
.contact-button {
    display: block; /* Zorg ervoor dat de knoppen blokelementen zijn */
    width: 100%; /* Optioneel: maak ze 100% breed */
    border: none; /* Geen rand */
    border-radius: 25px; /* Afgeronde hoeken */
    padding: 15px 30px; /* Padding rond knoppen */
    color: white; /* Tekstkleur */
    font-size: 1em; /* Lettergrootte */
    cursor: pointer; /* Pointer cursor bij hover */
    margin: 0 10px; /* Marges tussen knoppen */
}

.appointment-button {
    background-color: #333; /* Achtergrondkleur voor afspraakknop */
}

.contact-button {
    background-color: transparent; /* Transparante achtergrond voor contactknop */
    border: 2px solid #333; /* Rand voor contactknop */
    color: #333; /* Tekstkleur voor contactknop */
}

.appointment-button:hover,
.contact-button:hover {
    opacity: 0.8; /* Licht vervagen bij hover */
}

.pain-section p {
    font-size: 1em; /* Lettergrootte voor paragraaf */
    line-height: 1.6; /* Regelhoogte voor leesbaarheid */
    margin-top: 20px; /* Ruimte boven de paragraaf */
}


@media (min-width: 1450px) {

    .pain-section h2 {
        font-size: 5em; /* Grootte van de heading */
    }

    .text-content {
        max-width: 750px;
    }

    .pain-section p {
        font-size: 1.3em;
    }

}

@media (min-width: 1900px) {

    .pain-section h2 {
        font-size: 5em; /* Grootte van de heading */
    }

    .text-content {
        max-width: 750px;
    }

    .pain-section p {
        font-size: 1.3em;
    }
}


@media (min-width: 1450px) {

.line-break {
    display: block; /* Zorgt ervoor dat de span op een nieuwe regel begint */
}
    
    }

    .help-offers {
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    
    .help-offers__container {
        max-width: 1200px;
        margin: auto;
    }
    
    .help-offers__title {
        font-family: sans-serif;
        font-size: 2.5rem;
        margin-bottom: 10px;
        letter-spacing: 0.5px;
    }
    
    .help-offers__description {
        font-size: 1.2rem;
        margin-bottom: 30px;
    }
    
    .help-offers__cards {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        align-items: flex-start; /* Zorgt ervoor dat alle cards aan de bovenkant uitgelijnd blijven */
    }
    
    .help-offers__card {
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        text-align: center;
        margin: 15px;
        padding: 20px;
        width: 300px;
    }

/*     border-radius: 20px;
    border-style: solid;
    border-width: thin;
    border-color: #dadada; */
    
    .help-offers__card-image {
        border-radius: 50%;
        width: 100px; /* Pas grootte aan indien nodig */
        height: 100px; /* Pas grootte aan indien nodig */
        object-fit: cover;
    }



    .scroll-to-top {
        position: fixed;
        bottom: 20px; 
        right: 20px; 
        background-color: var(--button-color); /* Gebruik de gewenste achtergrondkleur */
        color: white;
        border-radius: 50%; /* Maak het rond */
        padding: 10px; /* Padding rond de SVG */
        cursor: pointer; 
        display: none; /* Start verborgen */
        z-index: 99; 
        transition: opacity 0.3s; /* Soepele overgang */
        width: 50px; /* Optionele breedte van de knop */
        height: 50px; /* Optionele hoogte van de knop */
        display: none; /* Flexbox voor centreren */
        align-items: center; /* Verticaal centreren */
        justify-content: center; /* Horizontaal centreren */
    }

    .scroll-to-top svg {
        width: 30px; /* Breedte van de SVG */
        height: 30px; /* Hoogte van de SVG */
        fill: white; /* Kleur van de SVG */
    }
    
    .scroll-to-top:hover {
        opacity: 0.8; /* Effect bij hover */
    }

    .hero-button-last-help {
        border-radius: 35px;
        background-color: var(--button-color);
        border: none;
        color: #FFFFFF;
        text-align: center;
        padding: 15px;
        width: 200px;
        transition: all 0.5s;
        cursor: pointer;
        margin-top: 15px;
        margin-bottom: 5px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .hero-button-last-help:hover {
        opacity: 0.8; /* Effect bij hover */
    }
    
    .tarieven {
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        border-radius: 10px;
        max-width: 1800px; /* Max width for large screens */
        display: flex; /* Flexbox voor uitlijning */
        justify-content: center; /* Horizontaal centreren */
        align-items: center; /* Verticaal centreren */
        min-height: 100vh; /* Minimale hoogte van de sectie */
    }

    .tarieven-wrapper {
        display: flex;
        flex-direction: column; /* Zorgt ervoor dat de elementen verticaal worden gestapeld */
        align-items: center; /* Centreert de inhoud horizontaal */
        justify-content: center; /* Centreert de inhoud verticaal */
        text-align: center; /* Zorgt ervoor dat de tekst in het midden staat */
        background-color: #fff;
        border-radius: 10px;
        max-width: 1800px;
    }
    
    h1.titel {
        font-size: 2em;
    }

    .beschrijving, .annulering, .dringend {
        margin: 20px 0;
    }
    
    .tarieven-content, 
    .prijs-container {
        display: flex;
        flex-direction: column; /* Stapel de elementen verticaal */
        align-items: center; /* Centreert de inhoud horizontaal */
        max-width: 600px; /* Zorgt ervoor dat de content niet te breed wordt */
    }
    
    .tarieven-content {
        margin-bottom: 20px; /* Ruimte tussen tarieven-content en prijs-container */
    }
    
    .prijs {
        font-size: 36px;
        font-weight: bold;
        color: #333;
    }
    
    .betaalwijze {
        margin: 10px 0;
    }
    
    .button {
        display: inline-block;
        padding: 10px 20px;
        background-color: #333;
        color: #fff;
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.3s;
    }
    
    .button:hover {
        background-color: #555;
    }
    


    .faq-container {
    margin: 0 auto; /* Center main with auto margins */
    max-width: 1800px; /* Max width for large screens */
        background: white;
        border-radius: 5px;
    }
    
    h1.faq-head {
        font-size: 2em;
        text-align: center;
        padding: 20px;
    }
    
    .faq-item {
        border-bottom: 1px solid #ccc;
    }
    
    .faq-question {
        padding: 15px;
        cursor: pointer;
        transition: background 0.3s;
        font-size: 18px;
    }

    .faq-question:hover {
        background: #f9f9f9;
    }
    
    .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out, padding-bottom 0.5s ease-in-out; /* Added transition for padding-bottom */
        padding: 0 15px 0 15px; /* Padding to match the question */
    }

    .faq-answer p {
        margin: 15px 0;
    }

    .osteopathie-wachtdienst {
        text-decoration: underline;
    }

    .contact-container {
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 100vh; /* Zorgt ervoor dat de container minimaal 100vh is */
        justify-content: center; /* Zorgt ervoor dat de inhoud verticaal gecentreerd is */
    }
    
    .address-wrapper {
        background-color: white;
        padding: 20px;
        border-radius: 8px;
    }

    .address-wrapper p{
color: black;
    }

    .address-wrapper h2{
        color: black;
            }

    .contact-header {
        font-size: 2em;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .contact-section-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: flex-start; /* Align items to the top */
        background-image: url('maps.jpg'); /* Set the background image */
        background-size: cover; /* Make the image cover the entire section */
        background-position: center; /* Center the image */
        padding: 20px;
        border-radius: 8px;
        width: 100%;
        max-width: 1200px; /* Increase the max width for better layout */
        color: white; /* Change text color to white for contrast */
    }

    .form-wrapper, .thank-you-message {
        width: 100%;
        max-width: 500px;
    }
    
    .form-wrapper {
        flex: 1;
        margin-right: 30px;
        max-width: 400px;
        background: white;
        padding: 20px;
        border-radius: 8px;
        min-height: 500px;
        position: relative;
    }
    
    .user-contact-form {
        display: flex;
        flex-direction: column; /* Stack elements vertically */
    }
    
    label {
        display: block;
        margin-bottom: 5px;
        color: black;
    }
    
    input, textarea {
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 0px;
        padding-right: 0px;
        margin-bottom: 15px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    
    
    textarea {
        min-height: 100px; /* Minimum height for the message box */
        resize: none; /* Disable resizing of the textarea */
    }
    

    .button-form {
        border-radius: 35px;
        background-color: var(--button-color);
        border: none;
        color: #FFFFFF;
        text-align: center;
        padding: 15px;
        width: 200px;
        transition: all 0.5s;
        cursor: pointer;
        margin: 5px auto; /* Zorgt voor automatische marge links en rechts */
        display: block; /* Zorg ervoor dat de button als een block-element wordt weergegeven */
    }

    .button-form:hover {
        opacity: 0.8; /* Effect bij hover */
    }

    
    .map-wrapper {
        flex: 0 0 400px; /* Fixed width for the map */
        display: flex;
        justify-content: flex-end; /* Align map to the right */
    }
    
    .map img {
        width: 100%;
        height: auto;
        border-radius: 8px;
    }
    
    /* Voeg deze regels toe aan je bestaande CSS */
input:focus, textarea:focus {
    outline: 2px solid var(--button-color); /* Gebruik de gewenste variabele voor de kleur */
}

header .menu-container {
    display: flex;
    justify-content: space-between; /* Zorgt ervoor dat het logo en het hamburger menu naast elkaar staan */
    align-items: center; /* Verticale uitlijning van logo en hamburger menu */
    width: 100%;
    position: relative; /* Zorg ervoor dat de header invloed heeft op het menu */
}

/* Hamburger icon hidden by default */
.hamburger-icon {
    display: none;
    font-size: 2em; /* Maak het hamburger-icoon groter */
    cursor: pointer;
}

/* Hide the nav by default on mobile */
#nav-menu {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}

/* On mobile, the button should be hidden */
.nav-button {
    display: block;
}

@media (max-width: 768px) {

    header {
        padding: 10px 20px; /* Pas de padding aan voor kleinere schermen */
        background: white; /* Zorg ervoor dat de header vast en wit blijft op mobiel */
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
    }

    .faq-container {
        padding-left: 0px; /* Reduce padding for mobile screens */
        padding-right: 0px; /* Reduce padding for mobile screens */
    }

    .form-wrapper {
        margin-right: 0; /* Remove margin for mobile screens */
    }

    .contact-section-wrapper {
        display: block; /* Reduce padding for mobile screens */
    }

    .hamburger-icon {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 24px;
        height: 18px;
        cursor: pointer;
        position: relative;
        z-index: 1001; /* Zorg ervoor dat de hamburger zichtbaar is boven andere elementen */
    }
    
    .hamburger-icon span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #333;
        border-radius: 2px;
        transition: all 0.3s ease-in-out;
        position: relative;
    }
    
    /* Animatie voor wanneer het menu actief is (de klik op het hamburgericoon) */
    .hamburger-icon.open span:nth-child(1) {
        transform: rotate(45deg);
        top: 8px;
        position: absolute;
    }
    
    .hamburger-icon.open span:nth-child(2) {
        opacity: 0; /* Verberg het middelste streepje */
    }
    
    .hamburger-icon.open span:nth-child(3) {
        transform: rotate(-45deg);
        top: 8px;
        position: absolute;
    }
    

    /* Hide the normal nav menu until the hamburger is clicked */
    #nav-menu {
        opacity: 0; /* Start hidden */
        visibility: hidden; /* Hide the element */
        flex-direction: column;
        position: fixed; /* Maak het menu fixed zodat het het hele scherm bedekt */
        top: 0; /* Zorg dat het menu vanaf de bovenkant begint */
        left: 0;
        right: 0;
        bottom: 0; /* Zorg dat het menu het hele scherm bedekt */
        width: 100vw;
        height: 100vh; /* Zorg dat het menu de volledige hoogte heeft */
        background: white; /* Voeg een lichte achtergrondkleur met een beetje transparantie toe */
        padding: 20px;
        z-index: 999; /* Zorg dat het menu boven andere elementen staat */
        transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; /* Soepele overgang */
        align-items: center; /* Centreer de links in het midden van het scherm */
        justify-content: center; /* Zorg dat de links verticaal gecentreerd worden */
    }

    /* Show the menu when the hamburger is clicked */
    #nav-menu.active {
        opacity: 1;
        visibility: visible;    
        gap: 20px;
        top: -30px;
    }

    /* Hide the 'Maak een afspraak' button on mobile */
    .nav-button {
        display: none;
    }


    /* Increase the font size of the links in the mobile menu */
    #nav-menu a {
        font-size: 1em; /* Make the links larger */
        display: block;
        text-align: center; /* Center align the links */
        color: var(--text-color); /* Use the text color variable */
        margin: 0 0px; /* Add margin between the links */
        padding: 15px 0px; /* Add padding to the links */
    }

        /* Verhoog de grootte van h1 en h2 op mobiel voor meer zichtbaarheid */
        header h1 {
            font-size: 2em; /* Verhoog de grootte van h1 op mobiel */
        }
    
        header h2.subtitle {
            font-size: 0.7em; /* Verhoog de grootte van h2 (subtitle) op mobiel */
        }

        main {
            padding-left: 0px;
            padding-right: 0px;
            margin-top: 0px;
        }

        .hero {
            flex-direction: column; /* Zet afbeelding en tekst onder elkaar */
            align-items: center;
            text-align: center;
            padding: 0px;
        }
    
        /* Zorg ervoor dat de afbeelding boven de tekst staat */
        .hero .image-content {
            order: -1; /* Plaats de afbeelding boven de tekst */
            margin-bottom: 20px;
        }

                /* Zorg ervoor dat de afbeelding boven de tekst staat */
                .hero .image-content-boek {
                    order: -1; /* Plaats de afbeelding boven de tekst */
                    margin-bottom: 20px;
                }
    
        .hero .image-content img {
            width: 100vw; /* Laat de afbeelding de volledige breedte van het scherm gebruiken */
            height: 30vh; /* Behoud de aspectratio */
            object-fit: cover;
            border-radius: 10% 10% 10% 10%; /* Onderste hoeken afgerond voor halve cirkel onderaan */
            overflow: hidden;
            margin-left: 0px;
            margin-top: 90px;
            object-position: center 30%;
        }
        
        .hero .image-content-boek img {
            width: 80vw; /* Laat de afbeelding de volledige breedte van het scherm gebruiken */
            height: 60vh; /* Behoud de aspectratio */
            object-fit: cover;
            overflow: hidden;
            margin-left: 0px;
            margin-top: 90px;
        }

        #hero-home-boek {
            padding: 20px;
        }
    
        .hero .text-content {
            max-width: 100%; /* Laat de tekst de volledige breedte gebruiken */
        }
    
        .image-section {
            padding-left: 20px;
            padding-right: 20px;
            flex-direction: column;
            text-align: center;
        }
    
        .image-container {
            flex-direction: column;
            align-items: center;
        }
    
        .video-thumbnail {
            width: 100%;
            max-width: 500px;
        }
    
        .text-content-image-section {
            max-width: 100%;
            margin-left: 0;
            margin-top: 20px;
        }

        .text-content h2 {
/*             padding-top: 20px;
 */            font-size: 4em; /* Verhoog de grootte van h2 op mobiel */
            line-height: 1; /* Verhoog de regelhoogte voor leesbaarheid */
        }


        .text-content h2.hero-text-boek {
            /*             padding-top: 20px;
             */            font-size: 3.5em; /* Verhoog de grootte van h2 op mobiel */
                        line-height: 1; /* Verhoog de regelhoogte voor leesbaarheid */
                    }

}

/* Mobile-friendly styles */
@media (max-width: 768px) {
    .pain-section {
        padding-left: 20px; /* Reduce padding for mobile screens */
        padding-right: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
        flex-direction: column; /* Stacks the content vertically */
        min-height: auto; /* Adjust the height for mobile */
    }

    .tarieven-wrapper {
        padding-left: 0px; /* Reduce padding for mobile screens */
        padding-right: 0px;
        max-width: 100vw;
    }

    .content {
        flex-direction: column; /* Ensure text and description are stacked */
        text-align: center; /* Center-align the text for better readability */
        justify-content: center;
        align-items: center;
        max-width: 100%; /* Use the full width of the screen */
    }

    .text-content {
        padding-right: 0; /* Remove padding on mobile */
        margin-bottom: 20px; /* Add space between sections */
        max-width: 100%; /* Let the text content use full width */
    }

    .description-content {
        max-width: 100%; /* Let the description content use full width */
    }

    .buttons {
        flex-direction: row; /* Stack the buttons vertically */
        gap: 10px; /* Increase the space between buttons */
        width: 100%; /* Ensure buttons use the full width */
        margin: 20px 0;
        justify-content: space-evenly;
        order: 2; /* Plaats de buttons onderaan */

    }

    .appointment-button, .contact-button {
        width: 100%; /* Make buttons full width on mobile */
    }

    .pain-section h2 {
        font-size: 3em; /* Reduce font size for mobile */
        margin-bottom: 15px;
    }

    .pain-section p {
        font-size: 1em; /* Make the paragraph text smaller for readability */
        line-height: 1.6;
        margin-bottom: 15px;
        margin-top: 0px;
        order: 1;
    }

    .video-thumbnail video {
        width: 100%;
        height: auto;
        border-radius: 25px;
    }
    
}

/* Mobile-specific styles */
@media (max-width: 768px) {

    .hidden-header {
        transform: translateY(-100%);
        transition: transform 0.3s ease-in-out;
    }

    header {
        transition: transform 0.3s ease-in-out; /* Zorg ervoor dat de transitie op de header soepel verloopt */
    }

    .video-thumbnail {
        margin: 15px 0; /* Ruimte boven en onder de video */
    }


    /* Text content adjustments */
    .text-content,
    .text-content-image-section {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Button adjustments */
    .hero-button,
    .hero-button-last,
    .button-image-section,
    .nav-button {
        width: 100%;
        max-width: 300px;
        margin: 10px auto;
    }

    .tarieven-content, .prijs-container {
display: block;
    }

    /* Navigation menu adjustments */
    #nav-menu {
        left: 0;
        right: 0;
        padding: 0;
    }

    /* Specific section adjustments */
    .image-section, .faq-container {
        width: 100vw;
        max-width: 100%;
        padding: 20px;
        margin: 0;
        box-sizing: border-box;
    }

        /* Specific section adjustments */
        .pain-section {
            width: 100vw;
            max-width: 100%;
            padding: 20px;
            margin-top: 150px;
            margin-bottom: 150px;
            box-sizing: border-box;
        }

.tarieven {
    padding: 20px;
}

    /* Remove any fixed widths */
    [style*="width"] {
        width: auto !important;
        max-width: 100% !important;
    }
}

input, select, textarea {
    font-size: 16px;
}

/* De standaard zorgt ervoor dat de telefoonlink zichtbaar is en de web-only knop verborgen is */
.web-only {
    display: none;
  }
  
  /* Voor mobiele apparaten */
  @media (max-width: 768px) {
    /* Toon alleen de telefoonlink op mobiele apparaten */
    .phone-link {
      display: block;
    }
    
    .web-only {
      display: none;
    }
  }
  
  /* Voor desktop */
  @media (min-width: 769px) {
    /* Verberg de telefoonlink en toon de web-only knop op desktop */
    .phone-link {
      display: none;
    }
    
    .web-only {
      display: inline-block;
    }
  }
  
  .grecaptcha-badge {
    display: none !important;
  }
  
  .mobile-link-footer {
    pointer-events: none; /* Link is niet klikbaar standaard */
    color: black; /* Optioneel, zorgt ervoor dat de link er uitziet als normale tekst */
    text-decoration: none; /* Verwijdert de onderstreping van de link */
  }
  
  @media only screen and (max-width: 768px) {
    .mobile-link-footer {
      pointer-events: auto; /* Link wordt klikbaar op mobiele apparaten */
      color: blue; /* Of een andere kleur om de link weer als klikbaar te tonen */
      text-decoration: underline; /* Optioneel, voegt de onderstreping terug voor de link */
    }
  }
  
  @media (max-width: 768px) {
    .address-wrapper {
        margin-top: 20px;
    }
  }

  .content-shower {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
  }
  
  .content-shower.show {
    opacity: 1;
    transform: translateY(0);
  }

  .thank-you-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: none; /* Houd deze verborgen totdat het formulier wordt verzonden */
}

.thank-you-message {
    text-align: center;
}

.checkmark-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #4CAF50;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.checkmark {
    width: 50px;
    height: 50px;
}

.checkmark__circle {
    stroke: #4CAF50;
    stroke-width: 2;
}

.checkmark__check {
    stroke: #fff;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: draw 1.5s ease-in-out forwards;
}

.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    padding: 40px;
    border-radius: 8px;
    z-index: 1000;
}
.popup-header {
    position: relative;
    text-align: center;
    font-weight: bold;
}
.popup-header button {
    background: none;
    border: none;
    font-size: 25px;
    cursor: pointer;
    position: absolute;
    top: -35px;
    right: -30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.popup-content {
    display: flex;
    gap: 15px;
    align-items: center;

}
.popup-text {
    flex: 1;
}
.popup-para {
    padding-top: 20px;
    padding-bottom: 20px;
}
.popup-image img {
    display: flex;
    align-items: center;
    width: 200px;
    height: auto;
}
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}
body.noscroll {
    overflow: hidden;
}

.hero-button-last {
border-radius: 35px;
background-color: var(--button-color);
border: none;
color: #FFFFFF;
text-align: center;
padding: 15px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}

.hero-button-last span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}

.hero-button-last span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: -2px;
right: -20px;
transition: 0.5s;
}

.hero-button-last:hover span {
padding-right: 15px;
}

.hero-button-last:hover span:after {
opacity: 1;
right: 0;
}

h1 {
padding: 0;
margin: 0;
}

.video-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* links uitlijnen */
}

.main-video video {
  width: 100%;
  max-width: 600px;
  border-radius: 10px;
}

.video-thumbnails {
  margin-top: 5px;
  display: flex;
  gap: 10px;
  justify-content: flex-start; /* links uitlijnen */
}

.video-thumbnails video.thumb {
  width: 120px;
  cursor: pointer;
  border-radius: 6px;
  border: 2px solid transparent;
  transition: border-color 0.3s;
}

.video-thumbnails video.thumb:hover {
  border-color: #999;
}

.thumb-wrapper {
  position: relative;
  display: inline-block;
}

.thumb-wrapper video {
  width: 120px;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.3s;
}

.thumb-wrapper video:hover {
  border-color: #999;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* clicks gaan gewoon naar video */
}




@media (max-width: 768px) {
    .popup {
        width: 90%;
        padding: 20px;
    }

    .popup-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .popup-image {
        order: -1; /* Zet de afbeelding boven de tekst */
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }

    .popup-image img {
        width: 100%;
        max-width: 180px;
        height: auto;
    }

    .popup-header button {
        top: -10px;
        right: -5px;
    }

    .hero-button-last {
        width: 100%;
        max-width: 250px;
    }

    .popup-para {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    body.noscroll {
        overflow: visible;
    }
}



@keyframes draw {
    0% {
        stroke-dasharray: 48;
        stroke-dashoffset: 48;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

.thank-you-message p {
    margin-top: 20px;
    color: black;
    font-size: 1.2em;
}


@media (min-width: 1800px) {
    main {
        padding-top: 100px;
      margin: 0 auto;
    }
  }

  h4 {
    padding-top: 5px;
    font-weight: 200;
  }