@media (max-width: 1200px) {
    body {
        font-size: 14px;
    }

    .container {
        padding: 10px;
    }

    header {
        font-size: 18px;
    }

    .hero3 {
        height: 50vh;
    }

    .banner {
        padding: 10px 15px 20px 15px;
        /* Verminder de hoogte van de banner */
        height: 200px;
    }

    .banner .container h1 {
        margin-top: 20px;
        font-size: 20px;
        /* Verklein de koptekst */
    }

    .banner .container p {
        margin-bottom: -20px;
        font-size: 28px;
        /* Verklein de ondertitel */
    }

    .banner a i {
        font-size: 0.8em;
        margin-bottom: 10px;
    }

    .team-container {
        display: block;
        /* Zet de container om naar een block layout */
        gap: 20px;
        /* Ruimte tussen de teamleden */
        padding: 0px 100px;
        /* Ruimte aan de zijkanten van de container */
        /* Maak de container wat smaller */
        max-width: 700px;
        /* Beperk de maximale breedte van de container */
        margin-left: auto;
        /* Centreer de container horizontaal */
        margin-right: auto;
        /* Centreer de container horizontaal */
    }


    .team-member {
        display: flexbox;
        /* Zorg ervoor dat de afbeelding en tekst naast elkaar blijven staan */
        flex-direction: row;
        /* De afbeelding en tekst blijven naast elkaar */
        padding: 15px;
        /* Voeg padding toe rond de teamleden */
        border: 1px solid #ebebeb;
        border-radius: 8px;
        background-color: #fff;
        margin-bottom: 15px;
        /* Ruimte onder elke kaart */
        width: 450px;
    }

    .team-member img {
        width: 150px;
        /* Maak de afbeelding kleiner */
        height: 150px;
        /* Zorg ervoor dat de afbeelding vierkant blijft */
        object-fit: cover;
        /* Zorg ervoor dat de afbeelding niet vervormt */
    }

    .member-info {
        display: flex;
        flex-direction: column;
        /* Zet de tekst verticaal */
        justify-content: flex-start;
        /* Zorg ervoor dat de tekst bovenaan begint */
        height: auto;
        /* Laat de hoogte zich aanpassen aan de tekst */
    }

    .member-info h3 {
        font-size: 18px;
        /* Naam iets kleiner */
        margin-bottom: 5px;
        /* Ruimte onder de naam */
    }

    .member-info h4.expertise-title {
        font-size: 14px;
        /* Expertise ondertitel */
        margin-top: 0;
        /* Verwijder de extra marge boven de expertise */
        margin-bottom: 10px;
        /* Voeg wat marge toe onder de expertise */
    }

    .member-info ul {
        align-self: flex-start;
        /* Zet de lijst links uitgelijnd */
        padding-left: 0;
        /* Verwijder extra padding */
        margin: 0;
        /* Verwijder marges */
        margin-top: 0;
        /* Verwijder topmarge */
    }

    .member-info ul li {
        font-size: 14px;
        /* Maak de lijst-items iets kleiner */
        margin-bottom: 5px;
        /* Ruimte tussen de lijst-items */
    }

    .member-info a {
        margin-top: 10px;
        /* Voeg wat ruimte toe boven de link */
        color: black;
        /* Standaard kleur voor de link */
        text-decoration: none;
    }

    .member-info a:hover {
        margin-top: 10px;
        color: #FF8A00;
        /* Kleur bij hover */
    }

    figure {
        width: 150px;
        /* Maak de cirkel kleiner */
        height: 150px;
        /* Zorg ervoor dat de cirkel vierkant blijft */
    }

    .appointment-overlay {
        position: relative;
        /* Maak de overlay een positioning context */
        width: 100%;
        margin-top: 0;
        overflow: hidden;
        /* Zorg ervoor dat niets buiten deze container valt */
    }

    .appointment-overlay .full-width-img {
        width: 100%;
        height: 400px;
        /* Maak de afbeelding kleiner */
        object-fit: cover;
        opacity: 0.5;
    }

    .appointment-overlay .overlay-content {
        position: absolute;
        /* Positioneer de overlay-inhoud binnen de bounds */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        /* Centreer horizontaal */
        align-items: center;
        /* Centreer verticaal */
        padding: 10px;
        /* Zorg voor wat ruimte rondom */
        box-sizing: border-box;
        /* Inclusief padding in totale breedte en hoogte */
        overflow: hidden;
        /* Beperk inhoud tot binnen de overlay */
    }

    .appointment-overlay {
        position: relative;
        /* Maak de overlay een positioning context */
        width: 100%;
        margin-top: 0;
        overflow: hidden;
        /* Beperk alles binnen de overlay */
    }

    .appointment-overlay .full-width-img {
        width: 100%;
        height: 400px;
        /* Hoogte van de afbeelding */
        object-fit: cover;
        opacity: 0.5;
        /* Transparante afbeelding */
    }

    .appointment-overlay .overlay-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        /* Centreer de inhoud horizontaal */
        align-items: center;
        /* Centreer de inhoud verticaal */
        padding: 10px;
        box-sizing: border-box;
    }

    .appointment-overlay .overlay-content .treatment-details {
        background-color: rgba(44, 108, 94, 0.5);
        /* Opaque achtergrond */
        padding: 15px;
        /* Padding rond de tekst */
        max-width: 80%;
        /* Beperk de breedte van de container */
        max-height: 90%;
        /* Beperk de hoogte van de container */
        display: flex;
        flex-direction: column;
        /* Zet de inhoud verticaal */
        justify-content: space-between;
        /* Verspreid inhoud gelijkmatig */
        gap: 15px;
        /* Ruimte tussen elementen */
        box-sizing: border-box;
    }

    .appointment-overlay .overlay-content .treatment-details .text-column {
        display: flex;
        flex-direction: column;
        gap: 10px;
        /* Ruimte tussen de tekstonderdelen */
    }

    .appointment-overlay .overlay-content .treatment-details .text-column h2 {
        font-size: 20px;
        margin: 0;
    }

    .appointment-overlay .overlay-content .treatment-details .text-column p {
        font-size: 14px;
        margin: 0;
    }

    .appointment-overlay .overlay-content .treatment-details .text-column .btn {
        align-self: flex-end;
        /* Zorg ervoor dat de knop altijd aan de rechterkant blijft */
        padding: 10px 20px;
        font-size: 14px;
        max-width: 200px;
        text-align: center;
        margin-top: 10px;
        transition: all 0.3s ease;
        /* Voor een soepele overgang bij formaatwijziging */
    }

    .btn {
        font-size: 16px;
        /* Verklein de tekst */
        min-width: 150px;
        /* Maak de knop smaller */
        min-height: 40px;
        /* Maak de knop minder hoog */
        padding-left: 15px;
        /* Verklein de padding */
        border-radius: 40px 25px 40px 25px;
        /* Pas de hoeken aan */
    }

    i {
        font-size: 0.9em;
        /* Verklein het icoontje */
    }
}

/*iPad Pro*/
@media (max-width: 1024px) {
    .gmap_canvas {
        overflow: hidden;
        width: 100%;
        height: 200px;
    }

    .gmap_iframe {
        height: 200px;
    }

    .hero-content-container {
        max-width: 1200px;
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .hero3 {
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
        height: 85vh;
        position: relative;
    }

    .contact-container {
        background-color: rgba(44, 108, 94, 0.8);
        /* Groenblauwe achtergrondkleur met opacity */
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 80%;
        /* Adjust the width */
        max-width: 1000px;
        /* Maximum width */
        margin: 0 auto;
        /* Center the container */
    }


    .hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        /* Adjust the opacity as needed */
    }

    .hero-content {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        /* Verticaal centreren van de inhoud */
        position: relative;
        z-index: 1;
    }
}

@media (max-width: 1004px) {
    .banner {
        padding: 30px 10px;
        /* Nog minder hoogte voor mobiel */
    }

    .banner .container h1 {
        font-size: 18px;
        /* Nog kleinere koptekst */
    }

    .banner .container p {
        font-size: 22px;
        /* Nog kleinere ondertitel */
    }

    .banner a i {
        font-size: 0.8em;
        margin-bottom: 10px;
    }

    .gmap_canvas {
        width: 100%;
        height: 200px;
    }

    .footer {
        background-color: #2C6C5E;
        color: white;
        margin-top: -1px;
    }
}

@media (max-width: 912px) {
    .contact-form .form-group.text-right {
        text-align: right;
    }

    .contact-btn {
        padding-right: 17px;
        position: relative;
        overflow: hidden;
    }

    i {
        font-size: 1em;
        padding: 0 10px;
        transition: all 0.1s linear;
    }

    @keyframes moveChevron {

        0%,
        100% {
            transform: translateX(0);
        }

        50% {
            transform: translateX(10px);
        }
    }

    .contact-btn:hover i {
        animation: moveChevron 0.9s infinite;
    }

    .contact-btn::before,
    .contact-btn::after {
        content: "";
        position: absolute;
        width: 200%;
        height: 200%;
        top: -100%;
        left: -100%;
        z-index: -1;
        transition: all 0.5s ease;
    }

    .contact-btn::before {
        background-color: var(--main-clr);
        opacity: 0.3;
    }

    .contact-btn::after {
        background: linear-gradient(135deg, transparent 50%, var(--main-clr) 50%);
        transform: translateX(-100%) translateY(100%);
    }

    .contact-btn {
        background-color: #FF8A00;
        border: 3px solid #FF8A00;
        color: white;
        transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
    }

    .contact-btn:hover {
        background-color: white;
        color: #2C6C5E;
        border-color: #FF8A00;
        /* Change border color instead of border width */
    }

    .contact-btn:hover::before {
        top: 0;
        left: 0;
    }

    .contact-btn:hover::after {
        transform: translateX(0) translateY(0);
    }

    .appointment-overlay {
        position: relative;
        width: 100%;
        margin-top: 0;
        /* Remove any margin between the banner and the image */
    }

    .appointment-overlay .full-width-img {
        width: 100%;
        height: 400px;
        /* Set the desired height */
        object-fit: cover;
        /* Ensure the image maintains its aspect ratio */
        opacity: 0.5;
        /* Slightly transparent image */
        margin-bottom: -3px;
        /* Remove any margin at the bottom of the image */
    }

    .appointment-overlay .overlay-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .appointment-overlay .overlay-content .treatment-details {
        background-color: rgba(44, 108, 94, 0.5);
        /* Slightly opaque background for the form */
        padding: 20px;
        border-radius: 8px;
    }

    .appointment-overlay .overlay-content .treatment-details .text-column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        /* Align items to the start by default */
    }

    .appointment-overlay .overlay-content .treatment-details .text-column .btn {
        align-self: flex-end;
        /* Move the button to the right */
        position: relative;
        overflow: hidden;
        background-color: #FF8A00;
        border: 3px solid #FF8A00;
        color: white;
        transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
    }

    .appointment-overlay .overlay-content .treatment-details .text-column .btn:hover {
        background-color: white;
        color: #2C6C5E;
        border-color: #FF8A00;
        /* Change border color instead of border width */
    }

    .appointment-overlay .overlay-content .treatment-details .text-column .btn::before,
    .appointment-overlay .overlay-content .treatment-details .text-column .btn::after {
        content: "";
        position: absolute;
        width: 200%;
        height: 200%;
        top: -100%;
        left: -100%;
        z-index: -1;
        transition: all 0.5s ease;
    }

    .appointment-overlay .overlay-content .treatment-details .text-column .btn::before {
        background-color: var(--main-clr);
        opacity: 0.3;
    }

    .appointment-overlay .overlay-content .treatment-details .text-column .btn::after {
        background: linear-gradient(135deg, transparent 50%, var(--main-clr) 50%);
        transform: translateX(-100%) translateY(100%);
    }

    .appointment-overlay .overlay-content .treatment-details .text-column .btn:hover::before {
        top: 0;
        left: 0;
    }

    .appointment-overlay .overlay-content .treatment-details .text-column .btn:hover::after {
        transform: translateX(0) translateY(0);
    }

    .gmap_canvas {
        width: 100%;
        height: 200px;
    }
    .footer {
        background-color: #2C6C5E;
        color: white;
        margin-top: -1px;
    }
}

/*Asus Zenbook Fold*/
@media (max-width: 853px) {

    .behandelingen-btn {
        width: 20px;
    }

    .behandelingen-btn i {
        padding-right: 20px;
    }
}

/*iPad Air*/
@media (max-width: 820px) {
    .behandelingen-btn {
        padding-left: 15px;
    }
}

/*iPad Mini*/
@media (max-width: 768px) {
    body {
        max-width: 768px;
    }

    .behandelingen-btn {
        padding-left: 12px;
    }

    .text-column .btn {
        font-size: 20px;
    }

        .navbar {
            flex-direction: column;
            align-items: flex-start;
            padding: 10px 20px;
        }
    
        .nav-links {
            display: none;
            flex-direction: column;
            width: 100%;
        }
    
        .hamburger {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 30px;
            height: 27px;
            border-radius: 15px;
            position: absolute;
            right: 20px;
            /* Zorgt ervoor dat de hamburgerknop in de rechterhoek staat */
            cursor: pointer;
        }
    
        .hamburger div {
            width: 100%;
            height: 10px;
            background-color: black;
            /* Kleur van de lijnen */
            margin: 3px 0;
            transition: background-color 0.3s ease;
        }
    
        .hamburger:hover .hamburger-line {
            background-color: #FF8A00;
            /* Kleur van de hamburger lijnen bij hover */
        }
    
        .hamburger .dropdown-content {
            display: none;
            position: absolute;
            top: 35px;
            /* Plaats de dropdown direct onder de hamburgerknop */
            right: 0;
            z-index: 1;
            width: 100px;
        }
    
        .hamburger:hover .dropdown-content {
            display: block;
            /* Toont het dropdown-menu bij hover */
        }
    
        .dropdown-content a {
            width: 100px;
            color: black;
            /* Kleur van de keuzes in eerste instantie */
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            transition: color 0.3s ease, background-color 0.3s ease;
            background-color: white;
        }
    
        .dropdown-content a:hover {
            color: #FF8A00;
            /* Tekstkleur bij hoveren */
        }
}

/*Surface Duo*/
@media (max-width: 540px) {
    .team-container {
        display: block;
        /* Zet de container om naar een block layout */
        gap: 20px;
        /* Ruimte tussen de teamleden */
        padding: 0px 0px;
        /* Ruimte aan de zijkanten van de container */
        /* Maak de container wat smaller */
        max-width: 400px;
        /* Beperk de maximale breedte van de container */
        margin-left: auto;
        /* Centreer de container horizontaal */
        margin-right: auto;
        /* Centreer de container horizontaal */
    }


    .team-member {
        display: flexbox;
        /* Zorg ervoor dat de afbeelding en tekst naast elkaar blijven staan */
        flex-direction: row;
        /* De afbeelding en tekst blijven naast elkaar */
        padding: 15px;
        /* Voeg padding toe rond de teamleden */
        border: 1px solid #ebebeb;
        border-radius: 8px;
        background-color: #fff;
        margin-bottom: 15px;
        /* Ruimte onder elke kaart */
        width: 400px;
    }

    .team-member img {
        width: 150px;
        /* Maak de afbeelding kleiner */
        height: 150px;
        /* Zorg ervoor dat de afbeelding vierkant blijft */
        object-fit: cover;
        /* Zorg ervoor dat de afbeelding niet vervormt */
    }

    .member-info {
        display: flex;
        flex-direction: column;
        /* Zet de tekst verticaal */
        justify-content: flex-start;
        /* Zorg ervoor dat de tekst bovenaan begint */
        height: auto;
        /* Laat de hoogte zich aanpassen aan de tekst */
    }

    .member-info h3 {
        font-size: 18px;
        /* Naam iets kleiner */
        margin-bottom: 5px;
        /* Ruimte onder de naam */
    }

    .member-info h4.expertise-title {
        font-size: 14px;
        /* Expertise ondertitel */
        margin-top: 0;
        /* Verwijder de extra marge boven de expertise */
        margin-bottom: 10px;
        /* Voeg wat marge toe onder de expertise */
    }

    .member-info ul {
        align-self: flex-start;
        /* Zet de lijst links uitgelijnd */
        padding-left: 0;
        /* Verwijder extra padding */
        margin: 0;
        /* Verwijder marges */
        margin-top: 0;
        /* Verwijder topmarge */
    }

    .member-info ul li {
        font-size: 14px;
        /* Maak de lijst-items iets kleiner */
        margin-bottom: 5px;
        /* Ruimte tussen de lijst-items */
    }

    .member-info a {
        margin-top: 10px;
        /* Voeg wat ruimte toe boven de link */
        color: black;
        /* Standaard kleur voor de link */
        text-decoration: none;
    }

    .member-info a:hover {
        margin-top: 10px;
        color: #FF8A00;
        /* Kleur bij hover */
    }

    figure {
        width: 150px;
        /* Maak de cirkel kleiner */
        height: 150px;
        /* Zorg ervoor dat de cirkel vierkant blijft */
    }

    .contact-container {
        background-color: rgba(44, 108, 94, 0.8);
        /* Groenblauwe achtergrondkleur met opacity */
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        /* Zorg ervoor dat de inhoud verticaal wordt gestapeld */
        justify-content: space-between;
        align-items: flex-start;
        width: 80%;
        /* Adjust the width */
        max-width: 1000px;
        /* Maximum width */
        margin: 0 auto;
        /* Center the container */
    }

    .contact-info,
    .contact-form {
        flex: 1 1 100%;
        /* Zorg ervoor dat beide secties de volledige breedte gebruiken */
        padding: 10px;
    }

    .contact-info {
        margin-top: -100px;
        margin-left: -40px;
        order: 2;
        /* Zet de contactinformatie onderaan */
    }

    .contact-info h2 {
        display: none;
    }

    .contact-form {
        order: 1;
        /* Zet het formulier bovenaan */
    }

    .appointment-overlay {
        position: relative;
        width: 100%;
        margin-top: 0;
        /* Remove any margin between the banner and the image */
    }

    .appointment-overlay .full-width-img {
        width: 100%;
        height: 600px;
        /* Stel de gewenste hoogte in */
        object-fit: cover;
        /* Zorg ervoor dat de afbeelding zijn verhoudingen behoudt */
        opacity: 0.5;
        /* Licht doorzichtige afbeelding */
        margin-bottom: -3px;
        /* Verwijder eventuele marge aan de onderkant van de afbeelding */
    }

    .appointment-overlay .overlay-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .appointment-overlay .overlay-content .treatment-details {
        background-color: rgba(44, 108, 94, 0.5);
        /* Slightly opaque background for the form */
        padding: 20px;
        border-radius: 8px;
    }

    .appointment-overlay .overlay-content .treatment-details .text-column {
        display: flex;
        flex-direction: column;
        height: 100%;
        align-items: flex-start;
        /* Align items to the start by default */
    }

    .appointment-overlay .overlay-content .treatment-details .text-column .btn {
        align-self: flex-end;
        /* Move the button to the right */
        font-size: 14px;
        margin-top: 15px;
    }
}
@media (max-width: 480px) {
    .hero {
        height: 50vh;
        background-position: top;
    }

    .banner {
        padding: 10px;
        font-size: 14px;
    }

    .btn {
        font-size: 14px;
        padding: 5px 10px;
    }

    .team-member {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Zorg ervoor dat de inhoud gecentreerd is */
    }

    .team-member img {
        width: 200px;
        height: 200px;
    }

    .member-info {
        padding-left: 130px;
    }

    .member-info,
    .member-info h3,
    .member-info h4,
    .member-info ul,
    .member-info a {
        font-size: 14px;
        text-align: left;
        /* Centreer de tekst */
        width: 100%;
        /* Zorg ervoor dat de info de volledige breedte inneemt */
    }

    .member-info h3,
    .member-info h4,
    .member-info ul,
    .member-info a {
        margin: 0 auto;
        /* Centreer de elementen */
    }

    .member-info ul {
        padding: 0;
        margin: 10px 0;
        /* Voeg wat marge toe tussen de lijst en andere elementen */
    }

    .member-info ul li {
        margin-bottom: 5px;
    }
}
/*iPhone 14 Pro Max*/
@media (max-width: 430px) {}

/*iPhone XR*/
@media (max-width: 414px) {}

/*Pixel 7*/
/*Samsung Galaxy S20 Ultra*/
/*Samsung Galaxy A51/71*/
@media (max-width: 412px) {
    .hero-content {
        padding: 10px;
    }

    .hero-container {
        padding: 60px;
    }

    .hero-left {
        display: none;
    }

    .hero-right {
        width: 100%;
    }

    .team-container {
        display: flex;
        flex-direction: column;
        /* Zorg ervoor dat de kaarten onder elkaar staan */
        align-items: center;
        /* Centreer de kaarten in de container */
    }

    .team-member {
        display: flex;
        flex-direction: column;
        /* Zorg ervoor dat de afbeelding en tekst onder elkaar staan */
        align-items: center;
        /* Centreer de inhoud */
        padding: 10px;
        /* Verminder de padding voor kleinere schermen */
        width: 60%;
        /* Zorg ervoor dat de kaart een breedte van 80% van de container heeft */
        box-sizing: border-box;
        /* Inclusief padding en border in de totale breedte */
        margin: 10px 0;
        /* Voeg wat marge toe boven en onder de kaart */
    }

    .team-member img {
        padding: 10px;
        aspect-ratio: 1 / 1;
        /* Zorg ervoor dat de afbeelding vierkant blijft */
    }

    figure {
        width: 160px;
        height: 160px;
    }

    .member-info {
        width: 100%;
        /* Zorg ervoor dat de tekstcontainer de volledige breedte van de kaart vult */
        margin-left: 80px;
        text-align: left;
        /* Zorg ervoor dat de tekst gecentreerd is */
    }

    .member-info h3,
    .member-info h4.expertise-title,
    .member-info ul,
    .member-info p {
        margin: 0;
        /* Verwijder de marge om de tekst beter uit te lijnen */
    }

    /**/
    /*overons*/
    .overons-container {
        position: relative;
        flex-direction: column;
        padding: 5px;

        max-width: 1200px;
        margin: 0 auto;
        /* Center the container */
    }

    .overons-section {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 0;
    }

    .overons-text {
        position: relative;
        z-index: 2;
        /* Zorg ervoor dat de tekst boven de afbeelding staat */
        color: #2C6C5E;
        padding: 20px;
        margin: 20px;
    }

    .overons-text h2 {
        color: #FF8A00;
        margin-bottom: 5px;
        padding-left: 15px;
    }

    .overons-text h3 {
        margin-bottom: 5px;
        color: #2C6C5E;
        padding: 15px;
    }

    .overons-text p {
        margin-bottom: 10px;
        line-height: 1.6;
        padding: 15px;
    }

    .overons-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 100px;
        z-index: 1;
        opacity: 0.2;
    }

    .overons-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 100px !important;
        padding: 15px 15px;
        margin-right: 15px;
        position: relative;
        z-index: 1;
        /* Zorg ervoor dat de afbeelding onder de tekst staat */
    }

    .overons-image-belofte {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        border-radius: 100px;
        z-index: 1;
        opacity: 0.2;
    }

    .overons-image-belofte img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 100px !important;
        position: relative;
        z-index: 1;
        /* Zorg ervoor dat de afbeelding onder de tekst staat */
    }

    /*behandelingen*/
    .treatment-section {
        position: relative;
        flex-direction: column;
        padding: 0;
    }

    .treatment-text p {
        color: #2C6C5E;
        font-size: 16px;
        width: 70%;
        padding-left: 60px;
    }

    .treatment-text h3 {
        padding-top: 20px;
        color: #2C6C5E;
        padding-left: 60px;
    }

    .treatment-text h2 {
        color: #FF8A00;
        padding-left: 60px;
    }

    .treatment-image {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
        opacity: 0.2;
    }

    .treatment-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 100px !important;
        position: relative;
        z-index: 3;
        /* Verhoog de z-index van de afbeelding */
    }

    .button-container {
        justify-content: center;
        /* Center the button */
        margin: 10px 5px 2px 20px;
    }

    .behandelingen-btn {
        min-width: 60px;
        min-height: 40px;
        font-size: 20px;
        padding-left: 15px;
    }

    .appointment-overlay {
        position: relative;
        width: 100%;
        margin-top: 0;
        /* Remove any margin between the banner and the image */
    }

    .appointment-overlay .full-width-img {
        width: 100%;
        height: 600px;
        /* Stel de gewenste hoogte in */
        object-fit: cover;
        /* Zorg ervoor dat de afbeelding zijn verhoudingen behoudt */
        opacity: 0.5;
        /* Licht doorzichtige afbeelding */
        margin-bottom: -3px;
        /* Verwijder eventuele marge aan de onderkant van de afbeelding */
    }

    .appointment-overlay .overlay-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .appointment-overlay .overlay-content .treatment-details {
        background-color: rgba(44, 108, 94, 0.5);
        /* Slightly opaque background for the form */
        padding: 20px;
        border-radius: 8px;
    }

    .appointment-overlay .overlay-content .treatment-details .text-column {
        display: flex;
        flex-direction: column;
        height: 100%;
        align-items: flex-start;
        /* Align items to the start by default */
    }

    .appointment-overlay .overlay-content .treatment-details .text-column .btn {
        align-self: flex-end;
        /* Move the button to the right */
        margin-top: 15px;
    }

    /*contact form*/
    .contact-container {
        background-color: rgba(44, 108, 94, 0.8);
        /* Groenblauwe achtergrondkleur met opacity */
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        /* Zorg ervoor dat de inhoud verticaal wordt gestapeld */
        justify-content: space-between;
        align-items: flex-start;
        width: 80%;
        /* Adjust the width */
        max-width: 1000px;
        /* Maximum width */
        margin: 0 auto;
        /* Center the container */
    }

    .contact-info,
    .contact-form {
        flex: 1 1 100%;
        /* Zorg ervoor dat beide secties de volledige breedte gebruiken */
        padding: 10px;
    }

    .contact-info {
        margin-top: -100px;
        margin-left: -40px;
        order: 2;
        /* Zet de contactinformatie onderaan */
    }

    .contact-info h2 {
        display: none;
    }

    .contact-form {
        order: 1;
        /* Zet het formulier bovenaan */
    }

    /*end contact form*/
    .footer ul li i.fa-map-marker-alt {
        position: relative;
        /* Maak het mogelijk om het icoon te verplaatsen */
        top: -18px;
        /* Verplaats het icoon iets omhoog */
    }
}

/*iPhone 12pro*/
@media (max-width: 390px) {}

/*iPhone SE*/
@media (max-width: 375px) {}

/*Galaxy S8*/
/*team kaarten nog aanpassen*/
@media (max-width: 360px) {
    .hero-content {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        /* Verticaal centreren van de inhoud */
    }

    .hero-left {
        width: 0%;
    }

    .hero-right {
        width: 100%;
    }

    .contact-form {
        padding: 0;
    }

    .hero-container {
        width: 95%;
        height: 80%;
        padding: 40px 50px 70px 40px;
        /* Padding van de container */
        background-color: rgba(44, 108, 94, 0.5);
        /* Licht doorschijnende achtergrondkleur */
        border-radius: 90px 180px 90px 180px;
        font-family: 'custom', sans-serif;
        font-size: 20px;
        color: white;
        box-sizing: border-box;
        /* Inclusief padding en border in de totale breedte en hoogte */
    }

    /* team kaarten */
    .team {
        padding: 40px;
        max-width: 360px;
        /* Maximale breedte instellen */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        /* Items centreren */
        margin: 0 auto;
        /* Container centreren */
    }

    .team-member {
        display: flex;
        flex-direction: column;
        /* Zorg ervoor dat de kaart verticaal is opgesteld */
        align-items: center;
        /* Centreer de inhoud horizontaal */
        flex: 1 1 100%;
        /* Zorg ervoor dat de kaarten niet breder zijn dan 360px */
        box-sizing: border-box;
        margin: 10px;
        background-color: #f9f9f9;
        padding: 10px;
        /* Voeg padding toe rond de kaart */
        border-radius: 8px;
        text-align: center;
        /* Zorg ervoor dat de tekst gecentreerd is */
        text-decoration: none;
        color: inherit;
        position: relative;
        /* Nodig voor positionering van de cirkel */
    }

    .team-member img {
        width: 150px;
        /* Stel de breedte in */
        height: 150px;
        /* Stel de hoogte in om de afbeelding vierkant te maken */
        object-fit: cover;
        /* Zorg ervoor dat de afbeelding de container vult zonder vervorming */
        margin-bottom: 20px;
        /* Voeg wat ruimte toe tussen de afbeelding en de tekst */
    }

    .member-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Zorg ervoor dat de tekst gecentreerd is */
        width: 100%;
        /* Zorg ervoor dat de tekstcontainer dezelfde breedte heeft als de afbeelding */
    }

    .member-info h3 {
        margin-bottom: 5px;
        /* Voeg wat ruimte toe onder de titel */
    }

    .member-info h4.expertise-title {
        margin: 0;
        padding: 0;
        margin-top: 5px;
        /* Pas deze waarde aan om de afstand te regelen */
        margin-bottom: 10px;
        /* Voeg wat ruimte toe onder de h4-tag */
    }

    .member-info ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        align-self: center;
        /* Zorg ervoor dat de lijst gecentreerd is */
    }

    .member-info ul li {
        margin-bottom: 5px;
    }

    .member-info p {
        margin: 0;
    }

    .a-tag {
        margin: 0;
        color: black;
        text-decoration: none;
    }

    .a-tag:hover {
        padding-bottom: 10px;
        color: #FF8A00;
    }

    /* Circle */
    figure {
        position: relative;
        width: 50px;
        /* Zorg ervoor dat de figuur dezelfde breedte heeft als de afbeelding */
        height: 50px;
        /* Zorg ervoor dat de figuur dezelfde hoogte heeft als de afbeelding */
        overflow: hidden;
        /* Verberg alles wat buiten de figuur valt */
    }

    figure::before {
        position: absolute;
        z-index: 2;
        display: block;
        content: '';
        width: 50%;
        /* Voeg breedte toe */
        height: 50%;
        /* Voeg hoogte toe */
        background: rgba(255, 255, 255, .2);
        border-radius: 100%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        opacity: 0;
    }

    figure:hover::before {
        -webkit-animation: circle .75s;
        animation: circle .75s;
    }

    @-webkit-keyframes circle {
        0% {
            opacity: 1;
            width: 0;
            height: 0;
        }

        40% {
            opacity: 1;
            width: 200%;
            height: 200%;
        }

        100% {
            width: 200%;
            height: 200%;
            opacity: 0;
        }
    }

    @keyframes circle {
        0% {
            opacity: 1;
            width: 0;
            height: 0;
        }

        40% {
            opacity: 1;
            width: 200%;
            height: 200%;
        }

        100% {
            width: 200%;
            height: 200%;
            opacity: 0;
        }
    }

    /* End Team */

    .behandelingen-btn {
        width: 20px;
        min-width: 60px;
        min-height: 40px;
        font-size: 20px;
        padding-left: 15px;
    }

    .appointment-overlay {
        position: relative;
        width: 100%;
        margin-top: 0;
        /* Remove any margin between the banner and the image */
    }

    .appointment-overlay .full-width-img {
        width: 100%;
        height: 600px;
        /* Stel de gewenste hoogte in */
        object-fit: cover;
        /* Zorg ervoor dat de afbeelding zijn verhoudingen behoudt */
        opacity: 0.5;
        /* Licht doorzichtige afbeelding */
        margin-bottom: -3px;
        /* Verwijder eventuele marge aan de onderkant van de afbeelding */
    }

    .appointment-overlay .overlay-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .appointment-overlay .overlay-content .treatment-details {
        background-color: rgba(44, 108, 94, 0.5);
        /* Slightly opaque background for the form */
        padding: 20px;
        border-radius: 8px;
    }

    .appointment-overlay .overlay-content .treatment-details .text-column {
        display: flex;
        flex-direction: column;
        height: 100%;
        align-items: flex-start;
        /* Align items to the start by default */
    }

    .appointment-overlay .overlay-content .treatment-details .text-column .btn {
        align-self: flex-end;
        /* Move the button to the right */
        font-size: 14px;
        margin-top: 15px;
    }
}

/*Galaxy Z Fold 5*/
@media (max-width: 344px) {
    .hero {
        height: 70vh;
        background-position: top;
    }
    
    .banner {
        padding: 10px;
        font-size: 14px;
        height: 260px;
    }
    .team {
        padding: 50px 0;
        /* Voeg wat padding toe aan de boven- en onderkant van de teamsectie */
        background-color: #f0f0f0;
        /* Voeg een achtergrondkleur toe om de sectie te onderscheiden */
    }

    .team-container {
        display: flex;
        flex-direction: column;
        /* Zorg ervoor dat de kaarten onder elkaar staan */
        align-items: center;
        /* Centreer de kaarten horizontaal */
        gap: 10px;
        /* Verminder de ruimte tussen de kaarten */
        max-width: 600px;
        /* Beperk de maximale breedte van de container */
        margin: 0 auto;
        /* Centreer de container */
        padding: 0 5px;
        /* Voeg wat padding toe aan de zijkanten */
        box-sizing: border-box;
        /* Inclusief padding en border in de totale breedte en hoogte */
    }

    .team-member {
        display: flex;
        flex-direction: column;
        /* Zorg ervoor dat de afbeelding bovenaan staat */
        padding: 20px;
        border: 1px solid #ebebeb;
        border-radius: 8px;
        background-color: #fff;
        /* Zorg voor een witte achtergrond voor de kaarten */
        align-items: center;
        /* Centreer de inhoud */
        width: 100%;
        /* Zorg ervoor dat de kaart de volledige breedte van de container gebruikt */
        max-width: 400px;
        /* Beperk de maximale breedte van de kaart */
    }

    .team-member img {
        width: 200px;
        /* Stel de breedte in */
        height: 200px;
        /* Stel de hoogte in om de afbeelding vierkant te maken */
        object-fit: cover;
        /* Zorg ervoor dat de afbeelding de container vult zonder vervorming */
    }

    .member-info {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        /* Zorg ervoor dat de tekst bovenaan begint */
        align-items: center;
        /* Centreer de tekst */
        margin-top: 20px;
        /* Voeg wat ruimte toe tussen de afbeelding en de tekst */
        text-align: center;
        /* Centreer de tekst */
    }

    .member-info h3 {
        margin: 0;
    }

    .member-info h4.expertise-title {
        margin: 0;
        padding: 0;
        margin-top: 10px;
        /* Pas deze waarde aan om de afstand te regelen */
    }

    .member-info ul {
        list-style-type: none;
        padding: 0;
        margin: 10px 0 0 0;
        /* Voeg wat ruimte toe boven de lijst */
    }

    .member-info ul li {
        margin-bottom: 5px;
    }

    .member-info p {
        margin: 0;
    }

    .a-tag {
        margin: 0;
        color: black;
        text-decoration: none;
    }

    .a-tag:hover {
        margin: 0;
        color: #FF8A00;
    }

    /* Circle */
    figure {
        position: relative;
        width: 200px;
        /* Zorg ervoor dat de figuur dezelfde breedte heeft als de afbeelding */
        height: 200px;
        /* Zorg ervoor dat de figuur dezelfde hoogte heeft als de afbeelding */
        overflow: hidden;
        /* Verberg alles wat buiten de figuur valt */
    }

    figure::before {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        display: block;
        content: '';
        width: 100%;
        /* Voeg breedte toe */
        height: 100%;
        /* Voeg hoogte toe */
        background: rgba(255, 255, 255, .2);
        border-radius: 100%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        opacity: 0;
    }

    figure:hover::before {
        -webkit-animation: circle .75s;
        animation: circle .75s;
    }

    @-webkit-keyframes circle {
        0% {
            opacity: 1;
            width: 0;
            height: 0;
        }

        40% {
            opacity: 1;
            width: 200%;
            height: 200%;
        }

        100% {
            width: 200%;
            height: 200%;
            opacity: 0;
        }
    }

    @keyframes circle {
        0% {
            opacity: 1;
            width: 0;
            height: 0;
        }

        40% {
            opacity: 1;
            width: 200%;
            height: 200%;
        }

        100% {
            width: 200%;
            height: 200%;
            opacity: 0;
        }
    }
    .appointment-overlay {
        position: relative;
        width: 100%;
        margin-top: 0;
    }

    .appointment-overlay .full-width-img {
        width: 100%;
        height: 600px;
        object-fit: cover;
        opacity: 0.5;
        margin-bottom: -3px;
    }

    .appointment-overlay .overlay-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 0 5px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .appointment-overlay .overlay-content .treatment-details {
        background-color: rgba(44, 108, 94, 0.5);
        padding: 20px;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        box-sizing: border-box;
    }

    .appointment-overlay .overlay-content .treatment-details .text-column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .appointment-overlay .overlay-content .treatment-details .text-column .btn {
        align-self: flex-start;
        margin-top: 20px;
    }
    .contact-btn {
        background: none;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 80px;
        /* Reduced width */
        min-height: 30px;
        /* Reduced height */
        font-family: 'custom', sans-serif;
        font-size: 14px;
        /* Smaller text size */
        padding-left: 8px;
        border-radius: 50px 30px 50px 30px;
        cursor: pointer;
        position: relative;
        border: 2px solid var(--main-clr);
        color: white;
        background-color: #FF8A00;
        overflow: hidden;
        transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
        margin-left: auto;
        /* Zorgt ervoor dat de knop naar rechts wordt uitgelijnd */
    }

    .contact-btn:hover {
        background-color: white;
        border: 3px solid #FF8A00;
        color: #2C6C5E;
    }

    .contact-btn:hover i {
        animation: moveChevron 0.9s infinite;
    }

    .contact-btn::before,
    .contact-btn::after {
        content: "";
        position: absolute;
        width: 200%;
        height: 200%;
        top: -100%;
        left: -100%;
        z-index: -1;
        transition: all 0.5s ease;
    }

    .contact-btn::before {
        background-color: var(--main-clr);
        opacity: 0.3;
    }

    .contact-btn::after {
        background: linear-gradient(135deg, transparent 50%, var(--main-clr) 50%);
        transform: translateX(-100%) translateY(100%);
    }

    .contact-btn:hover::before {
        top: 0;
        left: 0;
    }

    .contact-btn:hover::after {
        transform: translateX(0) translateY(0);
    }
    .contact-info h2 {
        color: #ffffff;
        margin-bottom: 20px;
        padding-left: 60px;
        font-size: 18px;
        /* Smaller heading size */
    }

    .contact-info ul li {
        margin-bottom: 10px;
        font-size: 14px;
        /* Smaller list item text */
    }

    .contact-info ul li i {
        margin-right: 2px;
        color: white;
        text-decoration: none;
        font-size: 14px;
        /* Smaller icon size */
    }

    .contact-info ul li a {
        display: inline-block;
        font-size: 14px;
        /* Smaller link text */
    }

    .contact-info ul li a br+span {
        display: block;
    }
    .gmap_canvas {
        overflow: hidden;
        width: 100%;
        height: 200px;
    }
    .footer {
        padding: 0;
    }
}