/* ==========================================================================
   1. DYNAMISCHE KLEUR-VARIABELEN (Licht & Donker Contrast)
   ========================================================================= */
:root {
    --bg-color-primary: #FEFBEA;    /* Warme creme basis */
    --bg-color-secondary: #FFFFFF;  /* Wit voor contrastkaarten */
    --text-color-main: #1C5253;     /* Diep groen */
    --text-color-muted: #555555;    /* Grijs leestekst */
    --accent-color: #7CB091;        /* Zacht groen accent */
    --navbar-bg: #FFFFFF;
    --card-bg: #FEFBEA;
    --form-container-bg: #FEFBEA;   
    --shadow-opacity: 0.05;
}

[data-theme="dark"] {
    --bg-color-primary: #121212;    /* Gitzwart tegen glare */
    --bg-color-secondary: #1E1E1E;  /* Donker antraciet */
    --text-color-main: #F5F5F5;     /* Helder gebroken wit */
    --text-color-muted: #CCCCCC;    /* Lichtgrijs */
    --accent-color: #99C7AD;        /* Opgelicht contrastgroen */
    --navbar-bg: #1A1A1A;
    --card-bg: #1E1E1E;
    --form-container-bg: #1E1E1E;   
    --shadow-opacity: 0.3;
}

/* ==========================================================================
   2. GLOBALE INSTELLINGEN
   ========================================================================= */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--bg-color-primary);
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text-color-main);
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

*, *:before, *:after {
    box-sizing: inherit;
}

.about-image {
    filter: none !important;
}


/* ==========================================================================
   3. NAVIGATIEBALK & THEMA-KNOP
   ========================================================================= */
.navbar {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100px;
    background-color: var(--navbar-bg);
    box-shadow: 0 2px 15px rgba(0, 0, 0, var(--shadow-opacity));
    z-index: 3000;
    display: flex; align-items: center;
    transition: background-color 0.3s ease;
}

.nav-container {
    width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 40px;
    display: flex; justify-content: space-between; align-items: center;
}

.nav-branding { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.nav-logo-img { height: 70px; width: auto; display: block; object-fit: contain; transition: all 0.3s ease; }
.nav-logo-text { font-family: 'Merriweather', serif; font-size: 26px; font-weight: 700; color: var(--text-color-main); letter-spacing: -0.5px; }

.nav-right-wrapper { display: flex; align-items: center; gap: 35px; }
.nav-links { display: flex; gap: 30px; }
.nav-item { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 600; color: var(--text-color-main); text-decoration: none; }
.nav-item:hover { color: var(--accent-color); }

.theme-toggle-btn {
    background: none; border: 2px solid var(--text-color-main); color: var(--text-color-main);
    width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
    transition: all 0.3s ease;
}
.theme-toggle-btn:hover { background-color: var(--text-color-main); color: var(--bg-color-secondary); transform: scale(1.05); }

.mode-icon-light { display: none; }
.mode-icon-dark { display: block; }
[data-theme="dark"] .mode-icon-light { display: block; color: #FFD700; }
[data-theme="dark"] .mode-icon-dark { display: none; }
[data-theme="dark"] .nav-logo-img { background-color: rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 4px; }


/* ==========================================================================
   4. GEAVANCEERDE HERO SECTIE (Video-Achtergrond & Overlay)
   ========================================================================= */
.hero {
    position: relative;
    padding-top: 100px;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden; /* Zorgt dat video niet buiten de banner treedt */
    background-image: linear-gradient(135deg, #1C5253 0%, #2C6C6D 100%); /* Mobiele Fallback */
    color: #FFFFFF;
}

[data-theme="dark"] .hero {
    background-image: linear-gradient(135deg, #0f2d2e 0%, #153536 100%);
}

/* De video-laag zelf */
.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 1;
}

/* De diepgroene contrast-sluier voor perfecte leesbaarheid */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(28, 82, 83, 0.55); 
    z-index: 2;
    transition: background-color 0.3s ease;
}

[data-theme="dark"] .hero-overlay {
    background-color: rgba(18, 18, 18, 0.75); /* Extra rust aan de ogen in het donker */
}

/* De tekstcontainer die veilig bovenop de video zweeft */
.hero-container {
    position: relative;
    max-width: 950px;
    padding: 0 20px;
    z-index: 3;
}

.hero-title { font-family: 'Merriweather', serif; font-size: 50px; font-weight: 700; line-height: 1.3; margin: 0 0 20px 0; color: #FFFFFF; }
.hero-subtitle { font-size: 20px; opacity: 0.9; margin: 0 0 40px 0; color: #FFFFFF; }

.hero-buttons { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.btn-hero {
    display: inline-block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 17px;
    font-weight: 600; text-decoration: none; padding: 18px 36px; border-radius: 100px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-phone { color: #1C5253; background-color: #FFFFFF; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); }
.btn-appointment { color: #FFFFFF; background-color: #7CB091; box-shadow: 0 8px 20px rgba(124, 176, 145, 0.2); }
.btn-hero:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15); filter: brightness(1.05); }


/* ==========================================================================
   5. BEHANDELINGEN SECTIE
   ========================================================================= */
.treatments-section {
    background-color: var(--bg-color-secondary);
    padding: 100px 0; width: 100%; position: relative; z-index: 10;
}
.section-title { font-family: 'Merriweather', serif; font-size: 38px; font-weight: 700; text-align: center; margin: 0 0 12px 0; }
.section-subtitle-hint { text-align: center; font-size: 15px; color: var(--text-color-muted); margin: 0 0 60px 0; opacity: 0.8; }

.treatments-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; }
.treatment-card {
    background-color: var(--card-bg); padding: 35px 30px; border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, var(--shadow-opacity)); border: 1px solid rgba(28, 82, 83, 0.04);
    cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; min-height: 340px;
    position: relative; z-index: 20; pointer-events: auto;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}
.treatment-card:hover { transform: translateY(-8px); border-color: var(--accent-color); }
.card-icon { font-size: 34px; color: var(--accent-color); margin-bottom: 20px; }
.card-title { font-family: 'Merriweather', serif; font-size: 20px; font-weight: 700; margin: 0 0 12px 0; }
.card-text { font-size: 14px; line-height: 1.6; color: var(--text-color-muted); margin: 0 0 20px 0; }
.read-more-hint { font-size: 14px; font-weight: 700; color: var(--accent-color); display: flex; align-items: center; gap: 6px; }


/* ==========================================================================
   6. MODAL ARCHITECTUUR
   ========================================================================= */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px);
    z-index: 4000; display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.4s ease; padding: 20px;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-content {
    background-color: var(--bg-color-secondary); color: var(--text-color-main);
    width: 100%; max-width: 750px; max-height: 85vh; overflow-y: auto;
    border-radius: 24px; padding: 50px; position: relative;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3); transform: scale(0.95) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-overlay.active .modal-content { transform: scale(1) translateY(0); }
.modal-close { position: absolute; top: 25px; right: 25px; background: none; border: none; font-size: 24px; color: var(--text-color-muted); cursor: pointer; }
.modal-content-icon { font-size: 40px; color: var(--accent-color); margin-bottom: 20px; }
.modal-content-title { font-family: 'Merriweather', serif; font-size: 32px; margin: 0 0 30px 0; }
.modal-body-text h4 { font-family: 'Merriweather', serif; font-size: 18px; margin: 25px 0 12px 0; }
.modal-body-text p { font-size: 15px; line-height: 1.7; color: var(--text-color-muted); margin: 0 0 15px 0; }
.modal-list { list-style: none; padding: 0; margin: 0 0 25px 0; display: flex; flex-direction: column; gap: 12px; }
.modal-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--text-color-muted); font-size: 15px; }
.list-arrow { color: var(--accent-color); padding-top: 4px; }
.modal-cta { display: inline-block; text-align: center; text-decoration: none; margin-top: 30px; width: 100%; }


/* ==========================================================================
   7. WERKWIJZE, OVER MIJ & REVIEWS
   ========================================================================= */
.process-section, .reviews-section { background-color: var(--bg-color-primary); padding: 100px 0; width: 100%; position: relative; z-index: 10; }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 50px; }
.process-step { background-color: var(--bg-color-secondary); padding: 40px 30px; border-radius: 20px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,var(--shadow-opacity)); }
.step-number { width: 54px; height: 54px; background-color: var(--text-color-main); color: var(--bg-color-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; margin: 0 auto 24px auto; }

.about-section { background-color: var(--bg-color-secondary); padding: 100px 0; width: 100%; }
.about-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; }

.about-image-container { display: flex; flex-direction: column; gap: 20px; }
.about-image { width: 100%; max-width: 450px; height: auto; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); display: block; }
.btn-kp-register { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 450px; background-color: var(--text-color-main); color: var(--bg-color-primary); text-decoration: none; padding: 16px 25px; border-radius: 14px; font-weight: 600; box-shadow: 0 6px 18px rgba(0,0,0,0.15); transition: all 0.3s ease; }
.btn-kp-register:hover { transform: translateY(-2px); filter: brightness(1.1); }
.btn-kp-content { display: flex; align-items: center; gap: 12px; }
.badge-icon { color: var(--accent-color); font-size: 18px; }
.arrow-icon { font-size: 14px; opacity: 0.7; }

.about-title { font-family: 'Merriweather', serif; font-size: 34px; margin: 0 0 30px 0; }
.about-text { font-size: 16px; line-height: 1.7; margin: 0 0 20px 0; }
.about-features { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 15px; margin-top: 25px;}
.about-features li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.feature-check { color: var(--accent-color); font-size: 18px; }

.review-carousel-container { position: relative; max-width: 1200px; margin: 0 auto; z-index: 30; }
.reviews-carousel-window { width: 100%; overflow: hidden; padding: 10px 0; }
.reviews-track { display: flex; gap: 30px; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.review-card { background-color: var(--bg-color-secondary); padding: 40px; border-radius: 18px; width: calc((100% - 60px) / 3); flex-shrink: 0; box-shadow: 0 4px 15px rgba(0,0,0,var(--shadow-opacity)); }
.review-heading { font-family: 'Merriweather', serif; font-size: 18px; margin: 0 0 15px 0; }
.review-text { font-size: 15px; line-height: 1.6; color: var(--text-color-muted); font-style: italic; margin: 0 0 20px 0; }
.review-author { font-size: 14px; font-weight: 700; margin: 0; }

.carousel-btn {
    position: absolute; top: 52%; transform: translateY(-50%); background-color: var(--text-color-main); 
    color: var(--bg-color-primary); border: none; width: 46px; height: 46px; border-radius: 50%; 
    cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 100; pointer-events: auto;
    transition: all 0.3s ease;
}
.carousel-btn:hover { background-color: var(--accent-color); transform: translateY(-50%) scale(1.05); }
.btn-left { left: -20px; }
.btn-right { right: -20px; }
.privacy-disclaimer { font-size: 13px; color: var(--text-color-muted); text-align: center; margin-top: 40px; opacity: 0.7; }


/* ==========================================================================
   8. CONTACT EN INFO SECTIE
   ========================================================================= */
.contact-section { background-color: var(--bg-color-secondary); padding: 100px 0; width: 100%; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: stretch; }
.contact-subtitle { font-size: 16px; margin: 0 0 40px 0; }
.contact-details { display: flex; flex-direction: column; gap: 24px; }
.detail-item { display: flex; align-items: flex-start; gap: 20px; text-align: left; }
.icon-box { width: 40px; height: 40px; background-color: var(--bg-color-primary); color: var(--accent-color); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.detail-text { display: flex; flex-direction: column; justify-content: center; }
.detail-item h4 { font-size: 16px; font-weight: 700; margin: 0 0 4px 0; }
.detail-item p { font-size: 15px; color: var(--text-color-muted); margin: 0; line-height: 1.6; }
.hours-text { margin-bottom: 4px !important; }
.detail-item a { color: var(--text-color-main); text-decoration: none; font-weight: 600; transition: color 0.3s ease; }
.detail-item a:hover { color: var(--accent-color); }

.contact-form-container { 
    background-color: var(--form-container-bg); padding: 45px; border-radius: 24px; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, var(--shadow-opacity)); border: 1px solid rgba(28, 82, 83, 0.05);
    display: flex; flex-direction: column; justify-content: center; transition: background-color 0.3s ease;
}
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label { font-size: 14px; font-weight: 600; }
.form-group input, .form-group textarea { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; padding: 14px 18px; border-radius: 10px; border: 1px solid rgba(28, 82, 83, 0.15); color: var(--text-color-main); background-color: var(--bg-color-secondary); transition: background-color 0.3s ease, color 0.3s ease; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--accent-color); }
.btn-submit { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 700; color: var(--bg-color-primary); background-color: var(--text-color-main); border: none; padding: 16px; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; }
.btn-submit:hover { transform: translateY(-2px); filter: brightness(1.1); }


/* ==========================================================================
   9. JURIDISCHE FOOTER & FLOATING BUTTONS
   ========================================================================= */
.site-footer { background-color: #1C5253; color: #FEFBEA; padding: 30px 0; width: 100%; font-size: 14px; }
[data-theme="dark"] .site-footer { background-color: #0d2627; }
.footer-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.footer-links { display: flex; gap: 25px; }
.footer-links a { color: inherit; text-decoration: none; opacity: 0.8; transition: opacity 0.3s ease;}
.footer-links a:hover { opacity: 1; text-decoration: underline; }

.floating-container { position: fixed; bottom: 30px; right: 30px; display: flex; flex-direction: column; gap: 15px; z-index: 5000; }
.float-btn { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #FFFFFF; text-decoration: none; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); transition: 0.3s; }
.float-btn:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); }
.float-whatsapp { background-color: #25D366; }
.float-linkedin { background-color: #0077B5; }


/* ==========================================================================
   10. RESPONSIVITEIT
   ========================================================================= */
@media (min-width: 1100px) { .treatments-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1000px) {
    .hero-video { display: none; } /* Mobiele Fallback: verberg video op kleinere schermen voor snelheid */
    .review-card { width: calc((100% - 30px) / 2); }
    .carousel-btn { display: none; }
    .process-grid { grid-template-columns: repeat(2, 1fr); gap: 25px; }
    .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 700px) {
    .navbar { height: 90px; } .nav-container { padding: 0 20px; } .nav-logo-img { height: 50px; } .nav-logo-text { font-size: 18px; }
    .nav-links { display: none; } .nav-right-wrapper { gap: 15px; }
    .hero { height: auto; padding: 140px 20px 60px 20px; } .hero-title { font-size: 32px; }
    .about-grid, .process-grid, .footer-container { grid-template-columns: 1fr; flex-direction: column; text-align: center; }
    .footer-links { justify-content: center; } .about-image, .btn-kp-register, .contact-form-container { max-width: 100%; }
    .review-card { width: 100%; } .floating-container { bottom: 20px; right: 20px; }
    .modal-content { padding: 35px 25px; }
}

/* ==========================================================================
   11. GEREEDSCHAPSKIST & FOOTER AANVULLINGEN
   ========================================================================= */

/* Verzekeraars balk - Gecorrigeerd */
.insurance-footer {
    text-align: center !important;
    padding: 40px 20px !important;
    background-color: #f9f9f9 !important;
    border-top: 1px solid #eee !important;
    margin-top: 50px !important;
    width: 100% !important;
}

.insurance-footer p {
    font-weight: 600 !important;
    margin-bottom: 20px !important;
    color: #1C5253 !important;
}

/* De container dwingen in een rij */
.logo-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 30px !important; 
    flex-wrap: wrap !important;
}

/* De afbeeldingen dwingen in formaat en grijs */
.ins-logo {
    height: 45px !important;       /* DIT IS DE HOOGTE: pas aan als je ze groter/kleiner wilt */
    width: auto !important;        /* Behoudt verhouding */
    object-fit: contain !important;
    filter: grayscale(100%) !important; /* Dwingt grijs */
    opacity: 0.6 !important;
    transition: all 0.3s ease !important; 
    display: block !important;
}

/* Animatie */
.ins-logo:hover {
    filter: grayscale(0%) !important; /* Wordt kleur */
    opacity: 1 !important;
    transform: scale(1.1) !important; 
    cursor: pointer !important;
}

/* Gereedschapskist CTA Blok (toegevoegd onder reviews op homepage) */
.toolkit-cta-section { 
    padding: 80px 20px; 
    background-color: var(--text-color-main); 
    color: white; 
    text-align: center; 
}

.toolkit-cta-content { 
    max-width: 800px; 
    margin: 0 auto; 
}

.toolkit-cta-content h2 { 
    color: white; 
    font-family: 'Merriweather', serif; 
    font-size: 32px; 
    margin-bottom: 20px; 
}

.toolkit-cta-content p { 
    color: #e0e0e0; 
    font-size: 1.1rem; 
    margin-bottom: 30px; 
    line-height: 1.6; 
}

/* Oude Hulpwijzer Kaarten (indien nog ergens in gebruik) */
.page-header {
    text-align: center;
    padding: 60px 20px;
    background-color: #f9f9f9;
}

.page-header h1 {
    color: #1C5253; /* Deep Teal */
    font-size: 2.5rem;
}

.hulpwijzer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 50px 10%;
    max-width: 1200px;
    margin: 0 auto;
}

.tool-card {
    background: white;
    border-radius: 12px;
    padding: 30px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-left: 5px solid #7CB091; /* Sage Green accent */
    text-align: center;
}

.tool-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.click-hint {
    font-size: 0.8rem;
    color: #1C5253;
    opacity: 0.6;
    font-style: italic;
}

.card-info {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

/* Samengevoegde en opgeschoonde Download knop */
.btn-download {
    display: inline-block;
    background-color: #7CB091;
    color: white;
    padding: 12px 25px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}

.btn-download:hover {
    background-color: #1C5253;
}

/* ==========================================================================
   12. EDITORIAL PORTRAIT GRID (Vernieuwde Praktijk in Beeld)
   ========================================================================= */

.practice-section {
    background-color: var(--bg-color-secondary);
    padding: 100px 0;
    width: 100%;
}

.practice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 35px;
    margin-top: 50px;
}

/* Styling voor de verticale kaarten */
.practice-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 3/4; /* Dwingt een prachtig, langwerpig portretformaat af */
    box-shadow: 0 10px 30px rgba(0,0,0,var(--shadow-opacity));
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    cursor: pointer;
}

.practice-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* Afbeeldingen in de kaarten */
.practice-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
    image-rendering: high-quality;
    transform: translateZ(0); 
}

.practice-card:hover img {
    transform: scale(1.06); 
}

/* Tekst / Caption onderin de kaart */
.practice-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 50px 30px 30px 30px; /* Extra padding bovenaan voor een zachte overloop */
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    color: white;
}

.practice-tag {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent-color);
    margin-bottom: 12px;
    font-weight: 700;
}

.practice-title {
    font-family: 'Merriweather', serif;
    font-size: 1.4rem;
    margin: 0;
    line-height: 1.4;
    color: #FFFFFF;
}

@media (max-width: 700px) {
    .practice-card {
        aspect-ratio: 4/5; /* Iets minder lang op mobiel zodat het op kleine schermen past */
    }
}