/* Algemene stijlen */
@font-face {
    font-family: 'Bentham';
    src: url('fonts/Bentham-regular.woff2') format('woff2'),
         url('fonts/Bentham-regular.woff') format('woff'),
         url('fonts/Bentham-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

h1, h2, h3, h4, h5, h6, p, li {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    padding-left: 100px;
    padding-right: 100px;
    font-family: 'Bentham', sans-serif;
    color: white;
}

body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    display: flex; /* Belangrijk voor footer positionering */
    flex-direction: column;
    min-height: 100vh;
    background-color: #000;
}

main {
    flex: 1;
    padding-bottom: 60px; /* Ruimte voor de footer */
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.whatsapp-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #25D366;
    color: white;
    text-decoration: none;
    border-radius: 20px;
    font-family: 'Bentham', sans-serif;
    margin-top: 10px; /* Ruimte boven de knop */
}

/* Responsieve aanpassing (indien nodig) */
@media (max-width: 768px) {
    .whatsapp-link {
        flex-direction: column; /* Icoon en tekst onder elkaar op kleine schermen */
        text-align: center;
    }
}

#privacy {
    background-color: #000;
    padding: 20px;
    margin: 20px auto;
    max-width: 800px;
    line-height: 1.6;
}

#privacy h2, #privacy h3 {
    margin-top: 20px;
}

#privacy ul {
    list-style-type: disc;
    margin-left: 20px;
}
#contact {
    padding: 10px;
    text-align: center;

}
@media (max-width: 767px) {
    header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .logo {
        margin: 0 0 10px 0;
        max-height: 60px;
    }

    nav {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .menu {
        display: none; /* Menu standaard verborgen */
        flex-direction: column;
        width: 100%;
        text-align: center;
    }

    .menu.active {
        display: flex;
    }

    .menu-toggle {
        display: block; /* Hamburger tonen */
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .menu-toggle.active .bar:nth-child(1) {
        transform: rotate(-45deg) translate(-6px, 6px);
    }

    .menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active .bar:nth-child(3) {
        transform: rotate(45deg) translate(-6px, -6px);
    }
}

/* Voor schermen tussen 768px en 1023px (meestal tablets in landschap) */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Specifieke stijlen voor tablets in landschap */
    #hero {
        padding: 30px;
    }
}

/* Voor schermen groter dan 1024px (desktops) */
@media (min-width: 1024px) {
    /* Stijlen voor desktops */
    #hero {
        padding: 50px;
    }
}

@font-face {
    font-family: 'Bentham'; /* Kies een naam voor je lettertype */
    src: url('fonts/Bentham-regular.woff2') format('woff2'),
         url('fonts/Bentham-regular.woff') format('woff'),
         url('fonts/Bentham-regular.ttf') format('truetype'),
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Belangrijk voor performance */
}

h1,h2,h3,p,li {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    padding-left: 20px;
    padding-right: 20px;
    font-family: 'Bentham', sans-serif;
    color: white;
}

body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

main {
    background-color: #000;
    flex: 1; /* Laat de main sectie de beschikbare ruimte innemen */
    padding-bottom: 100px; /* Ruimte onderaan de main content, gelijk aan of groter dan de footer hoogte */
    box-sizing: border-box; /* padding en border worden meegenomen in de breedte/hoogte berekening */
}

/* Header en Navigatie Stijlen */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: #000;
    color: white;
    border-bottom: 2px solid #333;
}

.logo-link {
    display: block;
}

.logo {
    max-height: 120px;
    width: auto;
}

nav {
    display: flex;
    align-items: center;
}

.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

.menu a {
    text-decoration: none;
    color: white;
    padding: 5px 10px;
}

.menu-toggle {
    display: none;
    cursor: pointer;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 5px 0;
    transition: 0.4s;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

nav a {
    margin: 0 10px;
    text-decoration: none;
    color: white;
    font-family: 'Bentham', sans-serif;
}

#hero {
    position: relative; /* Belangrijk voor absolute positionering van de video */
    width: 100%;       /* Volledige breedte van het scherm */
    height: 90vh;      /* Volledige hoogte van het scherm (viewport height) */
    overflow: hidden;   /* Voorkomt dat de video buiten het hero-gedeelte steekt */
    display: flex;       /* Gebruik flexbox voor centrering van de content */
    flex-direction: column; /* Content verticaal uitlijnen */
    justify-content: center; /* Verticaal centreren */
    align-items: center; /* Horizontaal centreren */
    text-align: center; /* Tekst centreren */
    color: white;
}

#hero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Zorgt ervoor dat de video het hele hero-gedeelte bedekt */
    z-index: -1;      /* Plaats de video achter de content */
}

.content {
    position: relative; /* Zorgt ervoor dat de tekst boven de video blijft */
    z-index: 1; /* Zorgt ervoor dat de tekst boven de video blijft */
    padding: 20px; /* Optioneel: Padding voor de tekst */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparante achtergrond voor de tekst */
    border-radius: 10px;
    width: 90%; /* Breedte van de content op grotere schermen */
    max-width: 1200px; /* Maximale breedte van de content */
    margin: 0 auto;
}

#hero h2,
#hero p {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    color: white;
}

.whatsapp-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #25D366; /* WhatsApp groen */
    color: white;
    text-decoration: none;
    border-radius: 20px;
    font-family: 'Bentham', sans-serif;
}

/* Footer Stijlen */
footer {
    border-top: 2px solid #333;
    background-color: #000;
    color: white;
    padding: 10px;
    text-align: center;
    width: 100%;
}

.swiper-slide {
    position: relative; /* Belangrijk voor positionering van de tekst */
}

.slide-content {
    position: absolute; /* Positioneer de tekst bovenop de afbeelding */
    top: 20px; /* Plaats de tekst bovenaan de slide */
    left: 20px;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparante achtergrond */
    color: white;
    padding: 10px;
    width: calc(100% - 40px);
    box-sizing: border-box;
}

#reviews {
    padding: 20px;
    background-color: #000; /* Achtergrondkleur voor de sectie */
    text-align: center;
}

.review-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 gelijke kolommen */
    grid-gap: 20px; /* Ruimte tussen de kolommen en rijen */
    max-width: 1200px; /* Maximale breedte van de grid */
    margin: 0 auto; /* Grid centreren op de pagina */
}

.review {
    border: 1px solid #ddd; /* Rand om elke review */
    padding: 20px;
    border-radius: 5px;
    text-align: left; /* Tekst links uitlijnen in de reviews */
}

.rating {
    display: flex; /* Zorg ervoor dat het cijfer en de sterren naast elkaar staan */
    align-items: center; /* Verticale centrering */
    margin-top: 10px;
}

.rating span {
    color: white;
    margin-right: 10px; /* Ruimte tussen het cijfer en de sterren */
    font-weight: bold;
    font-size: 1.2em;
}

.stars {
    font-size: 1.5em; /* Grotere sterren */
    color: gold; /* Gouden kleur voor de sterren */
}

.star.filled {
    /* Stijl voor gevulde sterren (★) */
}

.star {
    /* Stijl voor lege sterren (☆) */
    color: #ccc;
}

.tantra-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 kolommen */
}

/* Responsieve aanpassingen */
@media (max-width: 900px) { /* Voor kleinere schermen (tablets) */
    .review-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 kolommen */
    }
    .tantra-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 kolommen */
    }
}

@media (max-width: 600px) { /* Voor nog kleinere schermen (smartphones) */
    .review-grid {
        grid-template-columns: 1fr; /* 1 kolom */
    }
    .tantra-grid {
        grid-template-columns: 1fr; /* 1 kolom */
    }
}

#watistantra {
    padding: 20px; /* Padding rondom de sectie */
    background-color: #000; /* Achtergrondkleur (optioneel) */
    text-align: center; /* Tekst centreren op de sectie */
}

#watistantra h2 {
    margin-bottom: 20px; /* Ruimte onder de titel */
}

.tantra-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 gelijke kolommen */
    grid-gap: 20px; /* Ruimte tussen de kolommen */
    max-width: 960px; /* Maximale breedte van de grid (optioneel) */
    margin: 0 auto; /* Grid centreren op de pagina (optioneel) */
    text-align: left; /* Tekst links uitlijnen binnen de grid */
}

.text-grid p {
    line-height: 1.6; /* Verbetert de leesbaarheid van de tekst */
    margin-bottom: 1em; /* Ruimte tussen de paragrafen */
}

/* Responsieve aanpassing: 1 kolom op kleinere schermen */
@media (max-width: 768px) {
    .tantra-grid {
        grid-template-columns: 1fr; /* 1 kolom op kleine schermen */
    }
}

#missieenvisie {
    padding: 20px; /* Padding rondom de sectie */
    background-color: #000; /* Achtergrondkleur (optioneel) */
    text-align: center; /* Tekst centreren op de sectie */
}

#missieenvisie h2 {
    margin-bottom: 20px; /* Ruimte onder de titel */
}

.missie-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 gelijke kolommen */
    grid-gap: 20px; /* Ruimte tussen de kolommen */
    max-width: 960px; /* Maximale breedte van de grid (optioneel) */
    margin: 0 auto; /* Grid centreren op de pagina (optioneel) */
    text-align: left; /* Tekst links uitlijnen binnen de grid */
}

.missie-grid p {
    line-height: 1.6; /* Verbetert de leesbaarheid van de tekst */
    margin-bottom: 1em; /* Ruimte tussen de paragrafen */
}

/* Responsieve aanpassing: 1 kolom op kleinere schermen */
@media (max-width: 768px) {
    .missie-grid {
        grid-template-columns: 1fr; /* 1 kolom op kleine schermen */
    }
}

#watgebeurtertijdenseenmassage {
    padding: 20px; /* Padding rondom de sectie */
    background-color: #000; /* Achtergrondkleur (optioneel) */
    text-align: center; /* Tekst centreren op de sectie */
}

#watgebeurtertijdenseenmassage h2 {
    margin-bottom: 20px; /* Ruimte onder de titel */
}

.tijdens-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 gelijke kolommen */
    grid-gap: 20px; /* Ruimte tussen de kolommen */
    max-width: 960px; /* Maximale breedte van de grid (optioneel) */
    margin: 0 auto; /* Grid centreren op de pagina (optioneel) */
    text-align: left; /* Tekst links uitlijnen binnen de grid */
}

.tijdens-grid p {
    line-height: 1.6; /* Verbetert de leesbaarheid van de tekst */
    margin-bottom: 1em; /* Ruimte tussen de paragrafen */
}

/* Responsieve aanpassing: 1 kolom op kleinere schermen */
@media (max-width: 768px) {
    .tijdens-grid {
        grid-template-columns: 1fr; /* 1 kolom op kleine schermen */
    }
}

#missie {
    padding: 20px; /* Padding rondom de sectie */
    background-color: #000; /* Achtergrondkleur (optioneel) */
    text-align: center; /* Tekst centreren op de sectie */
}

#missie h2 {
    margin-bottom: 20px; /* Ruimte onder de titel */
}

.missie-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 gelijke kolommen */
    grid-gap: 20px; /* Ruimte tussen de kolommen */
    max-width: 960px; /* Maximale breedte van de grid (optioneel) */
    margin: 0 auto; /* Grid centreren op de pagina (optioneel) */
    text-align: left; /* Tekst links uitlijnen binnen de grid */
}

.missie-grid p {
    line-height: 1.6; /* Verbetert de leesbaarheid van de tekst */
    margin-bottom: 1em; /* Ruimte tussen de paragrafen */
}

/* Responsieve aanpassing: 1 kolom op kleinere schermen */
@media (max-width: 768px) {
    .missie-grid {
        grid-template-columns: 1fr; /* 1 kolom op kleine schermen */
    }
}
.tantramassage-opties {
    margin-top: 20px; /* Ruimte boven de massage opties */
    text-align: center; /* Tekst centreren binnen de container */
}

.tantramassage-opties h3 {
    margin-bottom: 10px;
}

.optie {
    position: relative; /* Nodig voor positionering van de afbeelding */
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 10px;
    border-radius: 5px;
    overflow: hidden; /* Voorkomt dat de afbeelding buiten de container komt */
}
.optie h4,
.optie p,
.whatsapp-link {
    position: relative; /* Zorgt ervoor dat de tekst bovenop de afbeelding staat */
    z-index: 1;
}