/* --- 1. VARIABELEN & RESET (Luxe, Aardse Kleuren) --- */
:root {
    --primary-color: #ffffff;      /* Diep Smaragdgroen */
    --secondary-color: #d6b38c;    /* Zacht Goud Beige */
    --accent-color: #083c34;       /* Helder groen voor focuspunten */
    --bg-light: #fdfcf9;           /* Crèmekleurige achtergrond */
    --bg-pale: #f2f7f5;            /* Zeer lichtgroen/grijs */
    --text-color: #ffffff;
    --text-light: #666666;
    --white: #ffffff;
    --nav-height: 80px;
    --border-radius: 18px;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: 'Lato', sans-serif; 
    line-height: 1.75;
    color: var(--accent-color);
    background: var(--bg-light);
    overflow-x: hidden;
}

.hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding-top: var(--nav-height);
    
    /* Nieuwe instellingen voor de foto */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Geeft een mooi parallax effect bij scrollen */
}

h1, h2, h3, h4 {
    font-family: 'Gilda Display', serif; 
    color: var(--secondary-color);
    font-weight: 400; 
    letter-spacing: 1.5px;
}

h1 { font-size: 4.5rem; margin-bottom: 1rem; line-height: 1.1;  }
h2 { font-size: 3rem; margin-bottom: 1.8rem; font-weight: 300; }
h4 { text-transform: uppercase; font-size: 0.95rem; font-weight: 700; letter-spacing: 3px; color: var(--secondary-color); }

p { margin-bottom: 1.2rem; max-width: 750px; }
a { text-decoration: none; color: inherit; transition: 0.4s ease-in-out;}

/* Utilities */
.container { width: 90%; max-width: 1280px; margin: 0 auto; }
.text-center { text-align: center; }
.section-pale { background-color: var(--bg-pale); }
.hidden { display: none !important; }
.push-top { margin-top: 2rem; }
.subtitle { color: var(--text-light); font-size: 1.3rem; margin-bottom: 4rem; font-weight: 300; }

/* --- 2. KNOPPEN --- */
.btn {
    display: inline-block;
    padding: 1.1rem 2.5rem;
    border-radius: 50px; 
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 2px solid transparent;
}

.btn-primary { background: var(--primary-color); color: var(--white); box-shadow: 0 4px 10px rgba(12, 74, 62, 0.3); }
.btn-primary:hover { 
    background: var(--secondary-color); 
    color: var(--primary-color); 
    box-shadow: 0 8px 20px rgba(214, 179, 140, 0.4);
    transform: translateY(-3px) scale(1.02);
}

.btn-secondary { background: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); }
.btn-secondary:hover { 
    background: var(--primary-color); 
    color: var(--white); 
    transform: scale(1.05);
}

.btn-accent { background: var(--secondary-color); color: var(--primary-color); box-shadow: 0 5px 15px rgba(214, 179, 140, 0.5); }
.btn-accent:hover { background: #c6a37e; transform: translateY(-4px); }


/* --- 3. NAVIGATIE & HAMBURGER (Gecorrigeerd en Compleet) --- */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--nav-height);
    padding: 0 5%;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 1px 15px rgba(0,0,0,0.05);
}

/* Flexibiliteit voor Links */
.nav-section {
    display: flex;
    align-items: center;
    flex-grow: 1; /* Zorgt ervoor dat deze secties de ruimte innemen */
}

/* Left links duwen naar rechts (richting logo) */
.left-links { 
    justify-content: flex-end; 
}
/* Right links duwen naar links (richting logo) */
.right-links { 
    justify-content: flex-start; 
}

/* Verwijder de bullet points en zet links naast elkaar op desktop */
.nav-links-list { 
    display: flex;
    gap: 2rem;
    padding: 0;
    list-style: none; /* VERWIJDERT DE BULLET POINTS */
}

.nav-links-list a { 
    font-family: 'Lato', sans-serif; 
    font-weight: 700; 
}
.nav-links-list a.active,
.nav-links-list a:hover { 
    color: var(--secondary-color); 
}

/* --- CENTRALE LOGO STIJLEN FIX --- */
.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 0; 
    width: auto; /* Laat de breedte bepalen door de content (logo + tekst) */
    padding: 0 15px; /* Geef wat horizontale ademruimte */
}

/* Combineert logo en tekst en lijnt ze verticaal perfect uit */
.navlogo {
    display: flex;
    align-items: center; 
    gap: 10px; /* Ruimte tussen logo en tekst */
}

.center-logo {
    height: 70px; 
    object-fit: contain;
    transition: all 0.3s;
}
.center-logo:hover {
    opacity: 0.8;
}

.logo-text {
    font-size: 1.5rem; 
    font-family: 'Gilda Display', serif; 
    color: var(--accent-color);
    line-height: 1.2; 
    letter-spacing: 2px;
    white-space: nowrap; /* Zorgt ervoor dat de tekst niet breekt */
}

/* Stijl voor de highlight link/knop */
.highlight-link {
    padding: 0.6rem 1.4rem;
    border-radius: 30px;
    background: var(--secondary-color);
    color: var(--primary-color) !important;
    transition: all 0.3s;
}
.highlight-link:hover { 
    background: var(--primary-color); 
    color: var(--white) !important; 
}

/* Basisstijl van het hamburger/sluit icoon, standaard verborgen op desktop */
.hamburger-menu, .close-menu { 
    display: none; 
    font-size: 1.8rem; 
    cursor: pointer; 
    color: var(--secondary); 
}

/* === MOBIELE MENU STIJLEN (Onder de 768px) === */
@media (max-width: 768px) {
    /* 1. Zorg dat de elementen goed staan op mobiel */
    .logo-container { order: -1; } 
    
    /* 2. Verberg de desktop links */
    .nav-links-list { 
        display: none; 
    }
    
    /* 3. Maak het hamburger icoon ZICHTBAAR */
    .hamburger-menu { 
        display: block; 
    }
    
    /* 4. Configuratie van het uitschuifbare menu */
    .nav-links-container {
        position: fixed; 
        top: 0; 
        right: -100%; 
        height: 100vh; 
        width: 80%; 
        max-width: 300px;
        background: var(--white); 
        padding: 2rem; 
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        transition: right 0.4s ease-in-out; 
        display: block; 
        z-index: 101; 
    }
    
    /* 5. Wanneer de JS klasse 'nav-active' wordt toegevoegd */
    .nav-links-container.nav-active { 
        right: 0; 
    }
    
    /* 6. Maak het sluit-icoon ZICHTBAAR */
    .close-menu { 
        display: block; 
        margin-bottom: 2rem; 
        text-align: right;
    }
    
    /* 7. Vorm de links om tot een verticale lijst (in de uitschuifbare container) */
    .nav-links-container .nav-links-list { 
        display: flex; 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 0; 
        list-style: none; 
    }
    
    .nav-links-container .nav-links-list li { 
        margin: 1.5rem 0; 
    }
    
    /* Verwijder de styling van de 'Vind een Coach' knop in het mobiele menu */
    .highlight-link { 
        background: transparent; 
        color: var(--secondary-color) !important; 
        padding: 0; 
        border: none; 
    }
    
    /* Zorg dat de linksecties niet meer ruimte innemen dan nodig is op mobiel */
    .left-links, .right-links { flex-grow: 0; }
}


/* --- 4. HEADERS & HERO --- */
.hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding-top: var(--nav-height);
}

.page-header { height: 40vh; background: var(--bg-pale); margin-top: var(--nav-height); padding-top: 2rem; display: flex; flex-direction: column; justify-content: center; align-items: center; }


/* De Adem Aura */
.breath-circle {
    position: absolute;
    width: 400px; height: 400px;
    background: rgba(214, 179, 140, 0.15); 
    border-radius: 50%;
    z-index: -1;
    box-shadow: 0 0 50px rgba(214, 179, 140, 0.8), 0 0 100px rgba(214, 179, 140, 0.5); 
    filter: blur(5px);
    animation: breathe-aura 10s infinite ease-in-out; 
}

.breath-circle::after {
    content: ''; 
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 300px; height: 300px;
    background: rgba(12, 74, 62, 0.05); 
    border-radius: 50%;
    filter: blur(8px);
    animation: breathe-aura 10s infinite ease-in-out 0.8s reverse; 
}

@keyframes breathe-aura {
    0%, 100% { transform: scale(0.9); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 0.9; }
}

.hero-content h1 { text-shadow: 1px 1px 2px rgba(0,0,0,0.1); }
.hero-content p { color: var(--text-color); font-size: 1.4rem; font-weight: 300; }
.hero-btns { display: flex; gap: 1.5rem; justify-content: center; margin-top: 2rem; }


/* --- 5. SECTIES & OPMAAK --- */
section { 
    padding: 8rem 0; 
    position: relative; 
    z-index: 10;
}



.two-column-layout {
    display: flex;
    align-items: center;
    gap: 6rem;
}
.text-column { flex: 1; }
.image-column { flex: 1; }

.image-column img { 
    width: 100%;
    height: auto;
    display: block;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    box-shadow: 0 25px 60px rgba(12, 74, 62, 0.15); 
    transition: all 0.6s ease;
}
.image-column img:hover { 
    border-radius: 50%;
    transform: rotate(2deg) scale(1.03); 
}

/* NIEUW: LOGO/BADGE STIJLEN ONDER IMAGE */
.trust-badges {
    margin-top: 3rem;
    padding: 1.5rem;
    border-top: 2px solid var(--bg-pale);
    text-align: center;
}
.trust-badges h4 {
    margin-bottom: 1rem;
    color: var(--text-light); 
    font-weight: 400;
    letter-spacing: 1px;
}

.badge-logo {
    height: 50px; 
    width: auto;
    margin: 0 15px;
    opacity: 0.7;
    filter: grayscale(100%); 
    transition: all 0.3s;
}

.badge-logo:hover {
    opacity: 1;
    filter: grayscale(0%); 
    transform: scale(1.05);
}
/* EINDE NIEUWE BADGE STIJLEN */


/* Voordelen Grid */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3.5rem;
    margin-top: 3rem;
    text-align: center;
}
.benefit-item { 
    padding: 3rem 2rem; 
    border-radius: var(--border-radius); 
    background: var(--white);
    border-top: 3px solid var(--secondary-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: all 0.4s ease;
}
.benefit-item:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 15px 40px rgba(0,0,0,0.08); 
}
.accent-icon { 
    font-size: 3rem; 
    color: var(--primary-color);
    margin-bottom: 1rem;
    display: inline-block;
    padding: 15px;
    border-radius: 50%;
    background: var(--bg-pale);
    transition: all 0.4s ease;
}
.benefit-item:hover .accent-icon { 
    background: var(--secondary-color); 
    color: var(--white);
}

/* Testimonials */
.testimonial-grid { display: flex; gap: 2rem; margin-top: 3rem; justify-content: center; flex-wrap: wrap;}
.testimonial-card { 
    padding: 3rem; 
    border-radius: var(--border-radius); 
    max-width: 500px; 
    position: relative; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
    border-left: 6px solid var(--secondary-color);
    background: var(--white);
}
.testimonial-card::before { 
    content: '\201C'; 
    position: absolute; 
    top: 0; left: 15px; 
    font-size: 6rem; 
    color: rgba(12, 74, 62, 0.08); 
    z-index: 0; 
    font-family: 'Gilda Display', serif;
}
.quote { font-style: normal; font-size: 1.15rem; position: relative; z-index: 1; }
.author { display: block; margin-top: 1rem; font-weight: bold; color: var(--secondary-color); }


/* CTA Sectie */
.cta-section { 
    background: var(--primary-color); 
    color: var(--white); 
    padding: 6rem 0;
    border-top: 5px solid var(--secondary-color); 
}
.cta-section h2 { color: var(--white); font-family: 'Lato', sans-serif; font-weight: 700; }
.cta-section p { color: rgba(255,255,255,0.9); font-size: 1.3rem; margin-bottom: 3rem;}

/* --- 6. COACHES GRID & KAARTEN (3D Hover Effect) --- */
.coaches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
    gap: 3rem;
    margin-top: 3rem;
    perspective: 1000px;
}

.coach-card {
    background: var(--white);
    padding: 2.5rem 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    text-align: center;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.27);
}

.coach-card:hover {
    transform: translateY(-15px) rotateX(2deg);
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}

.coach-img {
    width: 120px; height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1.5rem;
    border: 4px solid var(--secondary-color);
    transition: border-color 0.3s;
}

.coach-card:hover .coach-img {
    border-color: var(--primary-color);
}

.coach-name { font-family: 'Gilda Display', serif; font-size: 1.5rem; margin-top: 0.5rem; }
.coach-role { color: var(--secondary-color); font-weight: 700; margin-bottom: 1rem;}
.coach-card p { font-size: 0.95rem; }

#loading-spinner { color: var(--text-light); margin: 4rem 0; }

.load-more-container { margin-top: 4rem; }

/* --- 7. FOOTER --- */
footer { 
    background: #093c33; 
    color: rgba(255,255,255,0.7); 
    padding: 5rem 0 0;
}
.footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem;}
.footer-col h3, .footer-col h4 { color: var(--secondary-color); }
.footer-col a { display: block; margin-bottom: 0.8rem; }
.footer-col a:hover { color: var(--secondary-color); text-decoration: underline; }
.social-icons a { display: inline-block; margin-right: 1rem; font-size: 1.8rem; margin-top: 1rem; color: var(--white);}
.social-icons a:hover { color: var(--accent-color); }
.footer-bottom { background: #072f28; padding: 1.5rem; text-align: center; font-size: 0.9rem; }

.footer-bottom-link{
	color blue;
}

.footer-img {
    width: 150px;
    margin-bottom: 1rem;
   margin-left: -111px;
 margin-top: -244px;
 /* height: ; */
    
    
}

/* --- 8. ANIMATIES & RESPONSIVE --- */
.fade-in-delayed { opacity: 0; animation: fadeIn 1s ease-out 0.8s forwards; }
@keyframes fadeIn { to { opacity: 1; transform: translateY(0); }}

.reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }

@media (max-width: 1024px) {
    h1 { font-size: 3.5rem; }
}
@media (max-width: 768px) {
    h1 { font-size: 2.8rem; }
    h2 { font-size: 2.2rem; }
    .two-column-layout { flex-direction: column; gap: 3rem; }
    .image-column { order: -1; }
    #about { margin-top: 0; clip-path: none; padding-top: 5rem;} 
    .hero { height: 70vh; }
    .footer-content { grid-template-columns: 1fr; text-align: center; }
    
    /* Zorg dat de badges niet te dicht op elkaar staan op mobiel */
    .trust-badges { margin-top: 2rem; }
    .badge-logo { height: 40px; margin: 0 10px; }
    
    /* FIX voor navigatie op mobiel */
    nav { padding: 0 3%; }
}
@media (max-width: 600px) {
    h1 { font-size: 2rem; }
    .btn { padding: 0.8rem 1.5rem; font-size: 0.8rem; }
    .hero-btns { flex-direction: column; gap: 0.8rem; }
    .coach-card { padding: 1.5rem 1rem; }
}