@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}

:root {
--primary-color: #298B99; /* Turquoise */
--secondary-color: #B2C9C7; /* Lichtblauw/grijs */
--dark-color: #0C0C0C; /* Zwart */
--light-color: #f8f7f6; /* Lichtere beige achtergrondkleur */
--accent-color-1: #B2C9C7; /* Lichtblauw */
--accent-color-2: #656839; /* Donker olijfgroen */
--accent-color-3: #73683B; /* Olijfgroen/bruin  */
--white-color: #FFFFFF; /* Wit */
--background-color: var(--white-color); /* Gewijzigd naar wit */
--info-block-bg: rgba(41, 138, 153, 0.438); /* Aangepast naar primary-color met meer transparantie */
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="favicon.png" type="image/png">
<link rel="shortcut icon" href="favicon.png" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

/* TYPOGRAFIE BASIS */
h1, h2, h3, .logo-text, .section-title, .module-subheading, .nav-menu a, 
.site-title a, .info-button, .button, .timeline-section h2, .footer-section h3 {
font-family: 'Grandview Display', 'Open Sans', sans-serif;
}

h1, h2, h3, .section-title {
font-weight: 600;
}

p, .info-text, .module-info p {
font-weight: 400;
}

body, p, .module-info p, .info-text, .location-description, .praktisch-info p {
line-height: 1.8;
}

p {
margin-bottom: 20px;
font-size: 16px;
}

h4 {
font-family: 'Grandview Display', 'Open Sans', sans-serif;
font-weight: 500; /* Iets minder dik dan h1-h3 */
font-size: 1.5rem; /* Groter dan standaard, kleiner dan h1-h3 */
color: black; /* Zwarte tekst */
margin-bottom: 15px;
}

/* HEADER & NAVIGATIE */
body {
margin-top: -20px; 
background-color: var(--white-color);
color: var(--dark-color);
line-height: 1.6;
}

.top-bar {
display: none;
}

header {
background-color: transparent;
width: 100%;
position: absolute;
top: 0;
z-index: 1000;
border-top: none;
border-bottom: none;
height: auto;
padding: 10px 0;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}

.navbar {
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
}

/* Logo styling */
.logo-container {
display: flex;
align-items: center;
}

.logo {
position: relative;
display: flex;
align-items: center;
margin-top: 12px;
}

.logo-image {
width: 190px;
height: auto;
margin: 0;
padding: 0;
}

.logo-text {
color: var(--primary-color);
font-size: 20px;
font-weight: normal;
letter-spacing: 0.5px;
margin-left: 10px;
}

.site-title {
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align: center;
}

/* Navigatie menu */
.nav-menu {
display: flex;
list-style: none;
margin-left: auto;
align-items: center;
}

.nav-menu li {
margin-left: 0;
margin-right: 20px;
}

.nav-menu li:last-child {
margin-right: 0;
}

.site-title-item {
margin-right: 20px;
}

.nav-menu a, .site-title a {
color: white;
text-decoration: none;
font-weight: 600;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
text-transform: uppercase;
letter-spacing: 0.5px;
transition: color 0.3s;
}

.nav-menu a:hover {
color: white;
}

.nav-menu a::after {
background: white;
}

.nav-menu a:hover::after {
width: 100%;
}

/* Hamburger menu voor mobiel */
.hamburger {
display: none;
cursor: pointer;
}

.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
background-color: #FFFFFF;
transition: all 0.3s;
}

/* HERO SECTION */
main {
margin-top: -20px;
padding: 0 0 40px;
}

.hero {
display: flex;
flex-direction: column;
justify-content: flex-end; /* Tekst naar de onderkant duwen */
align-items: flex-start; /* Tekst links uitlijnen */
height: 100vh; /* Volledige hoogte van het scherm */
position: relative;
padding: 20px; /* Ruimte aan de onderkant en links */
box-sizing: border-box;

}
.hero-text {
color: white;
font-size: 2rem;
margin-bottom: 20px; /* Extra ruimte vanaf de onderkant */
}

.hero h1 {
font-weight: 600;
color: #FFFFFF; /* Pure wit voor beter contrast */
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), 0 4px 15px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 10;
font-size: 4rem;
font-family: 'Grandview Display', 'Arial', sans-serif;
letter-spacing: 0.08em;
text-transform: none;
line-height: 1.1;
padding-bottom: 20px;
opacity: 1;
transform: none; /* Geen transform, start in normale positie */
animation: none;
text-align: left;
margin: 0; /* Geen marges op de h1 zelf */
width: auto; /* Auto breedte in plaats van 100% */
}
.hero .container {
position: relative;
z-index: 5;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: flex-start;
}

@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

h1 {
margin-bottom: 20px;
font-size: 16px;
font-weight: normal;
line-height: 1.8;
/* Neem eventuele andere stijlen over van je p element */
}

h1 strong {
font-weight: bold;
/* Behoud andere stijlen die je op strong hebt toegepast */
}

.hero h1 strong {
font-weight: bold;
color: #FFFFFF;
}

.video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}

#hero-video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
object-fit: cover;
max-height: 100vh;
}

.video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: none;
z-index: 1;
}

.hero-content {
position: relative;
z-index: 5;
text-align: left;
width: auto;
margin-left: 10%; /* Marge naar links */
margin-bottom: 50px; /* Marge naar beneden */
}
.hero-arrow {
position: absolute;
bottom: 20px; /* Aanpassen aan gewenste positie */
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid white;
z-index: 30; /* Moet hoger zijn dan andere z-indices in hero */
}

.hero::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 60px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%2060%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M0%2C60%20L1200%2C60%20L1200%2C0%20L600%2C60%20L0%2C0%20L0%2C60%20Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%0A%3C%2Fsvg%3E");
background-size: 100% 100%;
background-position: center;
z-index: 20;
}

.hero::before {
content: none; /* Dit verwijdert het pseudo-element volledig */
display: block;
position: absolute;
left: 0;
bottom: 70px;
width: 100px;
height: 4px;
background-color: #FFFFFF;
z-index: 15;
}
.arrow-container {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 30px;
z-index: 30;
}

.arrow-line {
position: absolute;
width: 25px;
height: 2px;
background-color: white;
}

.arrow-line-left {
left: 0;
transform: rotate(45deg);
transform-origin: left center;
}

.arrow-line-right {
right: 0;
transform: rotate(-45deg);
transform-origin: right center;
}

/* INFO SECTIONS */
.info-section {
background-color: var(--white-color);
padding: 80px 0 80px;
position: relative;
margin-top: -20px;
}

.program-section {
background-color: var(--light-color);
padding: 80px 0 120px;
position: relative;
margin-bottom: 120px;
}

.info-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 30px;
}

.main-content {
flex: 1;
min-width: 300px;
}

.main-content h2:not(:first-child) {
margin-top: 60px;
}

h2 {
font-size: 32px;
margin-bottom: 25px;
color: var(--primary-color);
font-weight: 500;
position: relative;
padding-bottom: 15px;
}

h2::after {
content: '';
display: block;
width: 60px;
height: 3px;
background-color: var(--secondary-color);
position: absolute;
bottom: 0;
left: 0;
}

.section-title {
text-align: left;
margin-bottom: 30px;
position: relative;
}

.timeline-section .section-title::after {
left: 0;
transform: none; /* Verwijdert de centrerende transform */
}
.section-divider {
margin-top: 60px;
}

.section-title::after {
content: '';
display: block;
width: 60px;
height: 3px;
background-color: var(--secondary-color);
position: absolute;
bottom: -15px;
left: 0; /* Verander van 50% naar 0 */
transform: none; /* Verwijder de transform die voor centrering zorgt */
}


/* SEO optimalisatieblok onderaan */
.seo-block {
background-color: var(--light-color);
padding: 60px 0;
margin-top: 40px;
font-size: 16px;
line-height: 1.8;
}

.seo-block h2 {
font-size: 26px;
font-weight: 600;
color: var(--primary-color);
margin-bottom: 20px;
}


/* Specifiek voor trainers-section, als je dat apart wilt behandelen */
.trainers-section .section-title::after {
content: '';
display: block;
width: 60px;
height: 3px;
background-color: var(--secondary-color);
position: absolute;
bottom: -15px;
left: 0;
transform: none;
opacity: 1;
visibility: visible;
margin-bottom: 0px;
}
.tagline {
font-size: 20px;
font-weight: 500;
margin-bottom: 25px;
color: var(--accent-color-1);
}

/* Check items styling */
.check-item {
margin-bottom: 10px;
line-height: 1.8;
padding-left: 5px;
display: flex;
align-items: flex-start;
}

.check-item::before {
content: "✓";
margin-right: 10px;
flex-shrink: 0;
}

.check-list {
list-style: none;
padding-left: 0;
margin-bottom: 30px;
}

.check-list .check-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}

.check-list .check-item::before {
content: "✔️";
margin-right: 10px;
flex-shrink: 0;
}

/* SIDEBAR */
.info-sidebar {
flex: 0 0 350px;
background-color: var(--secondary-color);
color: #2A3132; /* Antraciet/donkergrijs */
padding: 30px;
position: relative;
height: auto;
max-height: fit-content;
margin-top: 0;
align-self: flex-start;
z-index: 10;
margin-bottom: 60px;
}
.info-sidebar::after {
content: none; 
}
.info-sidebar h2 {
font-size: 23px;
margin-bottom: 25px;
color: #2A3132; 
border-bottom: none;
padding-bottom: 0;
}

.info-sidebar h2::after {
display: none;
}

.info-item {
display: flex;
align-items: flex-start;
margin-bottom: 25px;
}

.info-icon {
flex: 0 0 32px;
height: 32px;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: flex-start;
color: #2A3132; /* Antraciet kleur */
font-size: 24px;
align-self: flex-start;
padding-top: 3px;
}

.price-icon {
padding-top: 25px;
}

.info-text {
flex: 1;
}

.info-text a {
color: #2A3132; /* Antraciet kleur */
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
transition: border-color 0.3s;
}

.info-text a:hover {
border-color: white;
}

.notice-box {
margin: 30px 0;
padding: 20px;
border-left: 3px solid white;
background-color: rgba(255, 255, 255, 0.1);
font-style: italic;
}

.info-button {
display: inline-block;
background-color: var(--primary-color);
color: #FFFFFF; /* Volledig wit */
padding: 12px 25px;
text-decoration: none;
font-weight: 500;
margin-top: 20px;
transition: all 0.3s;
text-align: center;
width: 100%;
}

.info-button:hover {
background-color: #FFFFFF; /* Volledig wit */
color: var(--primary-color);
border: 0.3px solid #FFFFFF; /* Witte rand voor definitie */
}

.info-divider {
height: 1px;
background-color: rgba(255, 255, 255, 0.3);
margin: 40px 0;
width: 100%;
}

/* INFO BLOCKS */
.info-block, .praktisch-info {
background-color: var(--light-color);
padding: 30px;
margin: 40px 0;
border-left: 3px solid var(--primary-color);
box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.praktisch-info h3, .info-block h3 {
font-weight: 500;
color: var(--primary-color);
margin-bottom: 15px;
background-color: transparent;
display: block;
padding: 0;
margin-top: 0;
}

.praktisch-info p {
margin-bottom: 15px;
line-height: 1.8;
}

.praktisch-info p:last-child {
margin-bottom: 0;
}
.praktisch-info h3 {
font-family: 'Grandview Display', 'Arial', sans-serif;
/* behoud de rest van de bestaande styling */
}   

/* Container en sectie zoals in meetup.html */
.info-section {
background-color: #fff;
padding: 60px 20px;
text-align: left;
}

.info-section h2 {
font-size: 28px;
font-weight: 700;
margin-bottom: 20px;
color: #000;
}

/* Formuliercontainer */
#mc_embed_signup {
max-width: 600px;
margin: 0 auto;
}

/* Inputgroepen */
.mc-field-group {
margin-bottom: 20px;
}

.mc-field-group label {
display: block;
margin-bottom: 5px;
font-weight: 600;
}

.mc-field-group input {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #999;
border-radius: 4px;
box-sizing: border-box;
}

/* Submitknop */
.button {
background-color: #20707c;
color: #fff;
padding: 12px 24px;
font-size: 16px;
border: none;
border-radius: 6px;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.button:hover {
background-color: #15525b;
}

/* Voetregel in formulier */
.foot {
margin-top: 30px;
}

/* Popup specifieke aanvulling */
.popup-overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
}

.popup-content {
background: white;
padding: 40px;
border-radius: 10px;
width: 90%;
max-width: 700px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
position: relative;
}

.close-button {
position: absolute;
top: 10px;
right: 15px;
font-size: 28px;
cursor: pointer;
font-weight: bold;
}


/* IMAGES */
.image-container {
margin: 30px 0;
border-radius: 8px;
overflow: hidden;
}

.image-container img {
width: 100%;
height: auto;
display: block;
}

.image-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 40px 0;
}

.image-grid img {
width: 100%;
height: 250px;
object-fit: cover;
display: block;
transition: transform 0.5s;
}

.image-grid div:hover img {
transform: scale(1.05);
}

/* BUTTONS */
.button {
display: inline-block;
background-color: var(--primary-color);
color: var(--light-color);
padding: 12px 30px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s;
margin-top: 20px;
letter-spacing: 1px;
border: none;
position: relative;
overflow: hidden;
}

.button:hover {
background-color: #1e6e7a;
}

/* TRAINERS SECTION */
.trainers-section {
padding: 120px 0;
background-color: var(--secondary-color);
margin: 120px 0;
}

.trainers-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
margin-top: 50px; /* Dit voegt ruimte toe tussen de titel/streep en de trainerskaarten */
}

.trainer-card {
background-color: var(--white-color);
border-radius: 5px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
}

.trainer-image {
height: 300px;
overflow: hidden;
}

.trainer-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}

.trainer-card:hover .trainer-image img {
transform: scale(1.05);
}

.trainer-info {
padding: 25px;
flex-grow: 1;
display: flex;
flex-direction: column;
}

.trainer-name {
font-size: 24px;
margin-bottom: 10px;
color: var(--primary-color);
}

.trainer-title {
font-size: 16px;
color: var(--accent-color-1);
margin-bottom: 20px;
font-weight: 500;
}

.trainer-bio {
margin-bottom: 20px;
flex-grow: 1;
}

.trainer-contact {
margin-top: auto;
display: flex;
align-items: center;
}

.trainer-contact a {
color: var(--primary-color);
text-decoration: none;
margin-right: 15px;
font-weight: 500;
transition: color 0.3s;
}

.trainer-contact a:hover {
color: var(--dark-color);
}

/* TIMELINE AND MODULE STYLING */
.timeline-content p,
.module-detail-item {
display: flex;
align-items: flex-start;
margin-bottom: 10px;
font-family: 'Open Sans', sans-serif;
}

.timeline-item {
margin-bottom: 40px;
}

.timeline-date, .module-date {
color: var(--primary-color);
font-weight: 700;
display: block;
margin-bottom: 15px;
font-size: 18px;
}

.timeline-content h3 {
font-weight: 400;
color: var(--dark-color);
margin-bottom: 12px;
}

.module-detail-icon {
color: var(--primary-color);
margin-right: 12px;
flex-shrink: 0;
margin-top: 3px;
}

.module-subheading {
color: var(--primary-color);
margin-bottom: 15px;
font-weight: 600;
}

.module-location {
margin-top: 25px;
padding-top: 15px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
font-style: italic;
}

.location-description {
margin-bottom: 25px;
line-height: 1.8;
}

.sub-heading {
color: var(--primary-color);
font-size: 24px;
margin-top: 40px;
margin-bottom: 15px;
position: relative;
}

/* ACCORDION STYLING */
.modules-section {
padding: 30px 0;
background-color: var(--white-color);
}

.accordion-container {
width: 100%;
margin: 0 0 60px;
}

.accordion-item {
margin-bottom: 8px;
border-radius: 4px;
background-color: #ffffff;
border: 1px solid #e5e5e5;
transition: all 0.3s ease;
overflow: hidden;
}

.accordion-item.active {
background-color: #ffffff;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
border-left: 4px solid var(--secondary-color);
}

.accordion-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 25px;
cursor: pointer;
border-left: 0;
transition: all 0.3s ease;
background-color: #ffffff;
border-bottom: 1px solid rgba(41, 139, 153, 0.1);
}

.title-container {
display: flex;
align-items: center; /* Verticaal centreren */
gap: 10px; /* Consistente ruimte tussen elementen */
}

.accordion-header:hover {
background-color: #f9f9f9;
}

.accordion-item.active .accordion-header {
border-bottom: none;
background-color: #f9f9f9;
}

.accordion-header h3 {
font-size: 18px;
font-weight: 600;
color: var(--primary-color); /* Behoudt de bestaande kleur voor hoofddeel */
margin: 0;
padding: 0;
display: inline-flex; /* Dit helpt om alles op één lijn te krijgen */
align-items: center;
text-transform: none;
letter-spacing: 0.5px;
transition: color 0.3s;
}
/* Maak modulenummers rood */
.accordion-header h3 span.module-number-text {
color: var(--secondary-color); /* kleur voor modulenummers */
font-weight: 700;   
}

/* Subtitel grijs maken */
.accordion-header h3 span.module-subtitle {
color: #444444; /* Donkergrijze kleur voor subtitels */
font-weight: 500; /* Iets lichter dan hoofdtitel */
}
.accordion-header:hover h3 {
color: var(--primary-color);
}

/* icoon voor accordeonmenu rechts */
.accordion-icon {
width: 45px;
height: 45px;
border-radius: 50%;
background-color: var(--primary-color);
transition: all 0.6s ease;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
overflow: hidden;
}

/* grootte van menuknop gif */
.accordion-icon img {
position: absolute;
width: 90px; /* Vaste pixelwaarde in plaats van percentage */
height: 90px; /* Vaste pixelwaarde in plaats van percentage */
top: 58%;
left: 50%;
transform: translate(-50%, -50%);
}

.accordion-icon::before {

}
.accordion-icon::after {

}
.accordion-item.active .accordion-icon {
transform: rotate(45deg);
background-color: transparent; 
}

.accordion-content {
padding: 0;
max-height: 0;
overflow: hidden;
background-color: white;
transition: all 0.8s ease-in-out;
}

.accordion-item.active .accordion-content {
padding: 30px;
max-height: 2000px;
border-bottom: 1px solid rgba(41, 139, 153, 0.1);
}

.module-info {
opacity: 0;
transform: translateY(10px);
transition: all 0.7s ease;
transition-delay: 0.3s; /* Iets langere vertraging voor een vloeiender effect */
}

.module-info p {
line-height: 1.7;
margin-bottom: 15px;
}

.accordion-item.active .module-info {
opacity: 1;
transform: translateY(0);
}

.module-number {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--primary-color);
color: white;
font-size: 16px;
font-weight: bold;
margin-right: 15px;
flex-shrink: 0;
}

/* Specifiek voor het nummer 1 */
.module-number:contains("1") {
text-indent: 0; /* Verwijder eventuele tekstinspringing */
padding: 0; /* Verwijder eventuele padding */
}

.accordion-item.active .module-number {
background-color: var(--primary-color);
}

@media (max-width: 768px) {
.module-number {
margin-right: 0;
margin-bottom: 10px;
}
}

.module-number-one {
padding-right: 0;
text-align: center;
padding-top: 2px; /* Voeg wat extra padding aan de bovenkant toe */
/* Of alternatief: */
line-height: 40px; /* Dit is gelijk aan de hoogte van de cirkel */
}

/* popup formulier */
.popup-overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
}

.popup-content {
background: white;
padding: 30px;
border-radius: 10px;
width: 90%;
max-width: 500px;
box-shadow: 0 0 20px rgba(0,0,0,0.3);
position: relative;
}

.close-button {
position: absolute;
top: 10px; right: 15px;
font-size: 24px;
cursor: pointer;
}

/* FOOTER */
footer {
background-color: var(--secondary-color);
color: var(--dark-color);
padding: 40px 0 30px;
text-align: center;
}

.footer-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px;
}

.footer-section {
flex: 1;
min-width: 250px;
margin-bottom: 15px;
padding: 0 15px;
text-align: left;
}

.footer-section h3 {
font-size: 18px;
font-weight: 500;
margin-bottom: 15px;
color: var(--primary-color);
}

.footer-section p, 
.footer-section a,
.copyright p {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
line-height: 1.6;
margin-bottom: 10px;
}

.footer-section a {
color: var(--dark-color);
text-decoration: none;
transition: color 0.3s;
}

.footer-section a:hover {
color: var(--primary-color);
}

/* NIEUWSBRIEF */
.newsletter-section {
flex: 1.2;
}

.newsletter-input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid rgba(12, 12, 12, 0.2);
background-color: white;
color: var(--dark-color);
font-family: 'Open Sans', sans-serif;
border-radius: 4px;
}

.newsletter-button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
font-family: 'Grandview Display', 'Arial', sans-serif;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: 4px;
transition: background-color 0.3s;
}

.newsletter-button:hover {
background-color: #1e6e7a;
}

.copyright {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 20px;
font-size: 14px;
}

/* RESPONSIVE STYLING */
@media (max-width: 768px) {
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
flex-direction: column;
background-color: rgba(92, 141, 137, 0.9);
width: 100%;
text-align: left !important; /* !important om zeker te zijn dat deze regel prioriteit krijgt */
transition: 0.3s;
box-shadow: 0 10px 10px rgba(0,0,0,0.1);
padding: 20px;
}

/* Verbeterde accordeon styling voor mobiel */
.accordion-header {
padding: 15px 15px; /* Minder padding */
flex-wrap: wrap; /* Staat toe dat elementen naar de volgende regel gaan indien nodig */
}

.accordion-item {
margin-bottom: 15px; /* Meer ruimte tussen items */
}

.title-container {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 5px 0;
}

.module-number {
margin-bottom: 10px;
width: 40px;
height: 40px;
font-size: 18px;
}

.accordion-header h3 {
flex-direction: column;
align-items: flex-start;
line-height: 1.5;
}

.accordion-header h3 span.module-number-text {
font-size: 18px;
margin-bottom: 5px;
display: block;
}

.accordion-header h3 span.module-title {
font-size: 17px;
margin-bottom: 5px;
display: block;
}

.accordion-header h3 span.module-subtitle {
font-size: 16px;
line-height: 1.4;
display: block;
}

.accordion-header h3 {
font-size: 16px; /* Kleinere tekst */
flex-wrap: wrap; /* Staat toe dat tekst omwikkelt indien nodig */
}

.accordion-icon {
margin-left: auto; /* Duwt icoon naar rechts */
width: 35px; /* Iets kleiner icoon */
height: 35px;
}

/* Icoontjes rechts beter positioneren */
.accordion-icon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
width: 35px;
height: 35px;
}

.accordion-header {
position: relative;
padding: 15px;
}

/* Als je spans gebruikt voor module-number-text etc. */
.accordion-header h3 span {
display: inline; /* Zorgt dat spans inline blijven */
}

.nav-menu.active {
left: 0;
}

.nav-menu li {
margin: 15px 0;
padding-left: 15px;
text-align: left !important; /* Extra regel voor de list items */
width: 100%; /* Zorgt ervoor dat de items de volledige breedte gebruiken */
}

.nav-menu a {
text-align: left !important; /* Specifiek voor de links in het menu */
display: block; /* Zorgt ervoor dat de links als blok-elementen worden weergegeven */
width: 100%; /* Volledige breedte voor betere klikbaarheid */
padding: 8px 0; /* Wat extra ruimte boven en onder */

}

.hamburger {
display: block;
}

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

.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}

.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}

.hero {
padding: 80px 0;
}

.hero h1 {
font-size: 32px;
font-size: 3.5rem; /* Kleinere lettergrootte op mobiel */
}

.hero p {
font-size: 18px;
}

.image-grid, .trainers-grid {
grid-template-columns: 1fr;
}

.info-sidebar, .newsletter-section {
flex: 1 1 100%;
}

}
@media (max-width: 480px) {
.hero h1 {
font-size: 2.5rem; /* Nog kleinere lettergrootte op zeer kleine apparaten */
}
}

button#open-programma-form {
background-color: var(--primary-color);
color: white;
padding: 12px 20px;
font-weight: 600;
border: none;
border-radius: 6px;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.5px;
}

button#open-programma-form:hover {
background-color: #226b75;
}