/* CSS Variabelen voor kleuren, aangepast naar uptmz stijl */
:root {
    --primary: #333; /* Donkergrijs/zwart voor titels en hoofdtekst */
    --secondary: #e95490; /* Roze/paars voor accenten en knoppen */
    --light: #f8f9fa; /* Lichtgrijs, vergelijkbaar met uptmz achtergrond */
    --dark: #343a40; /* Donkergrijs voor tekst */
    --grey: #6c757d; /* Grijs voor subtiele tekst */
    --light-grey: #e9ecef; /* Zeer lichtgrijs */
    --background-grey: #f5f5f5; /* Lichtere achtergrond voor secties */
    --border-color: #dee2e6; /* Randkleur */
    --success: #28a745; /* Groen voor vinkjes (standaard) */
    --warning: #ffc107; /* Geel voor waarschuwingen (standaard) */
    --warning-light: #fff3cd; /* Licht geel */
    --info: #17a2b8; /* Blauw/groen voor info boxen (standaard) */
    --info-light: #d1ecf1; /* Licht blauw/groen */
    --accent-pink: #f72585; /* Roze accent kleur */
}

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

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--dark);
    background-color: #fff;
    padding-top: 70px; /* Hersteld */
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Overige debug stijlen ook verwijderd waar nodig */
.onze-diensten-page .service-item {
    /* ... bestaande stijlen ... */
    /* eventuele debug achtergrond verwijderd */
}

.over-ons-page .company-info-card,
.over-ons-page .mission-vision-section {
    /* ... bestaande stijlen ... */
    /* eventuele debug achtergrond verwijderd */
}

.kwaliteitsgarantie-page .quality-points-grid,
.kwaliteitsgarantie-page .how-we-ensure-quality {
    /* ... bestaande stijlen ... */
    /* eventuele debug achtergrond verwijderd */
}
.kwaliteitsgarantie-page .quality-point-card,
.kwaliteitsgarantie-page .quality-assurance-item {
    /* ... bestaande stijlen ... */
    /* eventuele debug outline verwijderd */
}

/* Visually hidden class voor accessibility */
.visually-hidden {
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* Voorkom dat screenreaders de tekst over meerdere regels uitspreken */
}

/* Header styles */
header {
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 10px 0;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--primary);
    font-size: 20px;
    font-weight: 700;
}

.logo img {
    height: 32px; /* Was 40px, then 35px, now 32px */
    margin-right: 10px;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--primary);
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li {
    margin-left: 25px;
}

nav ul li a {
    text-decoration: none;
    color: var(--dark);
    font-weight: 500;
    transition: color 0.3s ease;
    padding: 5px 0;
    position: relative;
}

nav ul li a:hover {
    color: var(--primary);
}

nav ul li a.active {
    color: var(--primary);
    font-weight: 600;
}

nav ul li a.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--secondary);
}

/* Hero section */
.hero {
    background-color: white;
    color: var(--primary);
    padding: 80px 0 100px; /* Boven 80px, onder 100px */
    text-align: center;
    display: flex; /* Toegevoegd voor verticale centrering */
    flex-direction: column; /* Zodat hero-content onder elkaar blijft */
    justify-content: center; /* Verticaal centreren */
    min-height: 300px; /* Minimale hoogte, aanpasbaar */
}

.hero-content {
    max-width: 900px;
    margin: 0 auto;
}

.hero-text h1, /* Algemeen voor h1 in hero-text */
.hero-text h2 { /* Voor index.php specifiek */
    font-size: 48px;
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--primary);
}

.hero-text p {
    font-size: 20px;
    margin-bottom: 40px;
    opacity: 0.9;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: var(--dark);
}

.hero-ctas {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cta-button {
    display: inline-block;
    background-color: var(--secondary);
    color: white;
    padding: 14px 30px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: 2px solid transparent; /* Voor consistentie met .secondary */
}

.cta-button:hover {
    background-color: #d44513; /* Donkerdere tint secundaire kleur */
    transform: translateY(-2px);
}

.cta-button.secondary {
    background-color: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.cta-button.secondary:hover {
    background-color: var(--light-grey);
    transform: translateY(-2px);
}

.cta-button.white {
    background-color: white;
    color: var(--secondary);
}

.cta-button.white:hover {
    background-color: var(--light-grey);
    color: var(--secondary);
}

/* Nieuwe class voor donkere CTA knop */
.cta-button.primary-bg {
    background-color: var(--primary);
    color: white;
    /* padding, font-size, etc. worden geërfd van .cta-button */
}

.cta-button.primary-bg:hover {
    background-color: #23272b; /* Iets donkerder dan var(--primary) */
    transform: translateY(-2px);
}

/* Cookie consent */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--light);
    padding: 20px 0; /* Meer padding */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: block; /* Standaard zichtbaar, JS kan verbergen */
}

.cookie-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.cookie-text {
    flex: 1;
    min-width: 300px;
    font-size: 15px;
    color: var(--dark);
}

.cookie-text a {
    color: var(--primary);
    text-decoration: underline;
}
  .cookie-text a:hover {
      text-decoration: none;
  }

.cookie-buttons {
    display: flex;
    gap: 10px;
}

.cookie-btn {
    padding: 10px 18px; /* Iets meer padding */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600; /* Duidelijker */
    transition: background-color 0.3s ease;
    font-size: 15px;
}

.accept-cookies {
    background-color: var(--secondary); /* Secundaire kleur voor accepteren */
    color: white;
}

.accept-cookies:hover {
    background-color: #d44513; /* Donkerdere tint */
}

.reject-cookies {
    background-color: var(--light-grey);
    color: var(--dark);
    border: 1px solid var(--border-color);
}

.reject-cookies:hover {
    background-color: var(--border-color);
}


/* Page Header (voor subpagina's) */
.page-header {
    background-color: var(--background-grey); /* Lichte achtergrond */
    color: var(--dark);
    padding: 60px 0 60px; /* Boven 60px, onder 60px */
    margin-bottom: 40px; /* Extra ruimte onder de page-header */
    text-align: center;
    display: flex; /* Toegevoegd voor verticale centrering */
    flex-direction: column; /* Zodat content onder elkaar blijft */
    justify-content: center; /* Verticaal centreren */
    min-height: 200px; /* Minimale hoogte, aanpasbaar */
}

.page-header h1, /* Gebruik h1 voor de hoofditel van de pagina */
.page-header h2 { /* Behoud h2 als fallback indien nodig, maar h1 is beter voor SEO */
    font-size: 38px;
    margin-bottom: 15px;
    font-weight: 700;
    color: var(--primary); /* Primaire kleur voor titel */
}

.page-header p {
    font-size: 18px;
    opacity: 0.9;
    max-width: 700px;
    margin: 0 auto;
    color: var(--dark);
}

/* Section Title */
.section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title h2, /* Gebruik h2 voor sectietitels */
.section-title h3 { /* Behoud h3 als fallback indien nodig */
    font-size: 32px;
    color: var(--primary);
    margin-bottom: 15px;
    font-weight: 700;
}

.section-title p {
    font-size: 18px;
    color: var(--grey);
    max-width: 700px;
    margin: 0 auto;
}

/* Features section (gebruikt op Home) */
.features {
    padding: 80px 0;
    background-color: var(--background-grey);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature-card {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    text-align: center;
    border: 1px solid var(--border-color);
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-icon {
    font-size: 48px;
    color: var(--secondary);
    margin-bottom: 20px;
    line-height: 1; /* Betere uitlijning voor emoji's */
}

.feature-card h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: var(--primary);
}

.feature-card p {
    color: var(--dark);
    font-size: 16px;
}

/* Pricing section (gebruikt op Home en Prijzen) */
.pricing {
    padding: 80px 0;
}

.price-box {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 40px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px;
}

.price-box h3 {
    font-size: 28px;
    color: var(--primary);
    margin-bottom: 20px;
}

.price-details {
    margin: 20px 0;
    padding: 20px;
    background-color: var(--light);
    border-radius: 8px;
}

.price-tag {
    font-size: 36px;
    font-weight: 700;
    color: var(--secondary);
    margin: 15px 0;
}
 .price-tag span {
    font-size: 18px; 
    font-weight: 400;
    color: var(--dark);
}

.price-details p {
    font-size: 18px;
    color: var(--dark);
    margin-bottom: 0;
}

.price-description {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: left;
    color: var(--dark);
}

.price-description ul {
    list-style: none;
    padding-left: 0;
    margin-top: 10px;
}

.price-description li {
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.price-description li::before {
    content: '-';
    position: absolute;
    left: 0;
    color: var(--secondary);
}

.price-warning {
    background-color: var(--warning-light);
    border-left: 4px solid var(--warning);
    padding: 15px;
    margin: 20px 0;
    text-align: left;
    border-radius: 0 4px 4px 0;
    font-size: 15px;
    color: #856404;
}

.price-warning h4 {
    color: #856404;
    margin-bottom: 10px;
    font-size: 16px;
    display: flex;
    align-items: center;
}

.price-warning h4::before {
    content: '⚠️';
    margin-right: 10px;
}

.price-warning p {
    margin-bottom: 5px;
}

.price-warning p:last-child {
    margin-bottom: 0;
}

.price-example {
    background-color: var(--light);
    padding: 20px;
    border-radius: 8px;
    margin-top: 25px;
    text-align: left;
    font-size: 15px;
}

.price-example h4 {
    margin-bottom: 10px;
    font-size: 17px;
    color: var(--primary);
}

.example-calculation {
    background-color: #e9ecef;
    padding: 10px;
    border-radius: 4px;
    margin-top: 10px;
    font-family: monospace;
    color: var(--dark);
    overflow-x: auto; /* Voor kleine schermen */
}

.example-result {
    font-weight: 700;
    color: var(--primary);
    margin-top: 10px;
    font-size: 16px;
}

/* FAQ Section (Algemeen) */
.faq {
    padding: 80px 0;
    background-color: var(--background-grey);
}
/* Specifiek voor contact pagina */
.contact-page .faq-section {
    margin: 60px 0;
    padding-top: 40px;
    border-top: 1px solid var(--border-color); 
    background-color: transparent; /* Reset achtergrond */
}
.contact-page .faq-section h3 {
    font-size: 28px;
    color: var(--primary);
    margin-bottom: 30px;
    text-align: center;
}


.faq-container { /* Gebruikt op Affiliate, Contact */
    margin-top: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.faq-item {
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.faq-question {
    background-color: white;
    padding: 15px 20px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 17px;
    color: var(--primary);
    transition: background-color 0.3s ease, color 0.3s ease; /* Voeg color toe aan transitie */
}

.faq-question:hover {
    background-color: var(--light);
}

.faq-question svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease, color 0.3s ease; /* Voeg color toe */
    color: var(--grey);
}
/* Voor de + / - span variant (gebruikt in sommige HTMLs) */
.faq-question span:last-child {
    transition: transform 0.3s ease, color 0.3s ease;
    font-size: 24px; /* Maak + / - groter */
    line-height: 1;
}

.faq-answer {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    background-color: var(--background-grey);
    color: var(--dark);
    font-size: 16px;
}
.faq-answer .faq-answer-inner { /* Voor extra div in affiliate.html */
    padding: 0; /* Reset padding indien nodig */
}

.faq-answer.active {
    padding: 20px; /* Meer padding voor antwoord */
    max-height: 500px; /* Voldoende hoogte */
}

.faq-answer p {
    margin-bottom: 0;
}

/* Styling voor lijsten binnen FAQ antwoorden */
.faq-answer ul {
    list-style-type: disc; /* Standaard bolletjes */
    padding-left: 20px;    /* Inspringen van de lijst zelf */
    margin-top: 15px;      /* Ruimte boven de lijst (als er een <p> boven staat) */
    margin-bottom: 10px;   /* Ruimte onder de lijst */
}

.faq-answer li {
    margin-bottom: 10px; /* Ruimte tussen de list items */
    padding-left: 5px;  /* Kleine extra padding als de bullet te dichtbij de tekst staat */
    line-height: 1.5;   /* Betere verticale ruimte voor leesbaarheid */
}

.faq-answer li strong {
    font-weight: 600; /* Zorgt dat strong ook echt wat dikker is */
    /* color: var(--primary); */ /* Optioneel: maak de strong tekst de primaire kleur */
}

.faq-item.active .faq-question svg {
    transform: rotate(180deg);
    color: var(--secondary); 
}

.faq-item.active .faq-question {
    color: var(--secondary);
}

.faq-item.active .faq-question span:last-child { 
    transform: rotate(45deg); /* Maak een X van de + */
    color: var(--secondary);
}

/* Footer */
footer {
    background-color: var(--primary);
    color: var(--light-grey); /* Default text color for footer */
    padding: 50px 0 20px;
    margin-top: 50px;
}

/* Ensure all direct paragraph children of footer elements are light */
footer p,
.footer-column p,
.footer-bottom p {
    color: var(--light-grey) !important; /* Use !important as a last resort if needed, but prefer specificity */
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.footer-column h3 {
    margin-bottom: 20px;
    font-size: 18px;
    color: white !important; /* Ensure headings in footer are white, added !important */
}
.footer-column p {
    color: #adb5bd; /* Lichtere tekst voor paragraaf in footer */
    font-size: 15px;
    margin-bottom: 20px; /* Ruimte onder paragraaf */
}

.footer-links {
    list-style: none;
    padding-left: 0; /* Ensure no inherited padding */
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: var(--light-grey) !important; /* Ensure links are light */
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: white !important; /* Ensure hover is also light */
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #495057;
    font-size: 14px;
    /* color: #adb5bd;  Covered by footer p, .footer-bottom p */
}

.footer-bottom p { /* Ensure paragraph in footer-bottom is light */
    color: var(--light-grey);
    font-size: 14px;
    text-align: center;
}

/* Social links in footer (specifiek voor affiliate pagina) */
.social-links {
    display: flex;
    /* justify-content: center; */ /* Verwijderd voor links uitlijnen in kolom */
    margin-top: 20px;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #495057;
    color: white;
    margin-right: 10px; /* Alleen margin rechts voor normale stroom */
    transition: background-color 0.3s ease, transform 0.3s ease;
}
 .social-links a:last-child {
     margin-right: 0;
 }

.social-links a:hover {
    background-color: var(--secondary);
    transform: translateY(-3px);
}

.social-links svg {
    width: 20px;
    height: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    body {
        padding-top: 60px;
    }

    header {
        padding: 10px 0;
    }

    .header-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 20px;
    }

    .logo {
        margin-bottom: 10px;
    }

    .logo img {
        height: 35px;
    }

    .mobile-menu-btn {
        display: block;
        position: absolute;
        right: 20px;
        top: 15px;
    }

    nav {
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
    }

    nav.active {
        max-height: 500px; /* Meer ruimte voor menu items */
    }

    nav ul {
        flex-direction: column;
        padding: 10px 0;
        align-items: flex-start;
    }

    nav ul li {
        margin: 10px 0;
        margin-left: 0;
        width: 100%; /* Laat links de volledige breedte innemen */
    }
    nav ul li a {
        padding: 10px 15px; /* Groter klikgebied */
        display: block; /* Volledige breedte */
        border-radius: 4px; /* Optioneel: voor look & feel */
    }
    nav ul li a.active::after {
        display: none; /* Verberg underscore op mobiel, active class is genoeg */
    }
    nav ul li a:hover {
        background-color: var(--light-grey); /* Achtergrond op hover */
    }
    nav ul li a.active {
        background-color: var(--secondary); /* Accentkleur voor actieve link */
        color: white;
    }


    .hero {
        padding: 60px 0;
    }

    .hero-text h1,
    .hero-text h2 {
        font-size: 32px; /* Aangepaste grootte */
    }

    .hero-text p {
        font-size: 17px; /* Aangepaste grootte */
    }

    .hero-ctas {
        flex-direction: column;
        gap: 15px;
    }

    .cta-button {
        width: 100%;
        text-align: center;
        padding: 12px 25px; /* Aangepaste padding */
        font-size: 17px; /* Aangepaste grootte */
    }

    .page-header h1,
    .page-header h2 {
        font-size: 30px;
    }
    .page-header p {
        font-size: 16px;
    }

    .section-title {
        margin-bottom: 40px;
    }

    .section-title h2,
    .section-title h3 {
        font-size: 26px; /* Aangepaste grootte */
    }

    .section-title p {
        font-size: 16px;
    }

    .features {
        padding: 60px 0;
    }

    .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
    }

    .feature-card {
        padding: 25px;
    }

    .feature-card h3 {
        font-size: 20px;
    }

    .feature-card p {
        font-size: 15px;
    }

    .pricing {
        padding: 60px 0;
    }

    .price-box {
        padding: 30px 20px; /* Meer horizontale padding */
    }

    .price-box h3 {
        font-size: 24px;
    }

    .price-tag {
        font-size: 30px;
    }
    .price-tag span {
        font-size: 16px;
    }

    .price-details p {
        font-size: 16px;
    }

    .price-description {
        font-size: 15px;
    }

    .faq {
        padding: 60px 0;
    }

    .faq-container {
        margin-top: 30px;
    }

    .faq-item {
        margin-bottom: 10px;
    }

    .faq-question {
        padding: 15px;
        font-size: 16px;
    }

    .faq-answer {
        font-size: 15px;
    }

    .faq-answer.active {
        padding: 15px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-column h3 {
        margin-bottom: 10px;
    }
    .footer-column p {
        margin-bottom: 15px;
    }

    .footer-links {
        margin-bottom: 20px;
    }

    .footer-links li {
        margin-bottom: 5px;
    }

    .social-links {
        justify-content: center; /* Centreer social icons op mobiel */
    }

    .social-links a {
        margin: 0 5px; /* Ruimte tussen icons */
    }
}

/* Specifieke styling voor Affiliate pagina */
.affiliate-page .hero h1 { /* Gebruik h1 op affiliate pagina */
    font-size: 48px;
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--primary);
}

.benefits {
    padding: 80px 0;
    background-color: white;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.benefit-card {
    background-color: var(--background-grey);
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    border: 1px solid var(--border-color);
}

.benefit-card:hover {
    transform: translateY(-5px);
}

.benefit-card-icon {
    width: 60px;
    height: 60px;
    background-color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto; /* Centreer het icoon */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.benefit-card-icon svg {
    width: 30px;
    height: 30px;
    color: var(--secondary);
}

.benefit-card h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: var(--primary);
    text-align: center;
}

.benefit-card p {
    color: var(--dark);
    font-size: 16px;
    text-align: center;
}

.how-it-works {
    padding: 80px 0 40px; /* Was 80px 0 80px */
    background-color: var(--background-grey);
}

.steps-container {
    margin-top: 50px;
    position: relative;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.steps-container::before {
    content: '';
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 50%;
    width: 4px;
    background-color: var(--light-grey);
    margin-left: -2px;
    z-index: 1;
}

.step {
    display: flex;
    align-items: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.step:nth-child(even) {
    flex-direction: row-reverse;
}

.step:last-child {
    margin-bottom: 0;
}

.step-number {
    width: 50px;
    height: 50px;
    background-color: var(--secondary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    flex-shrink: 0;
    position: relative;
    z-index: 3;
    margin: 0 20px; /* Behoud deze voor de timeline layout */
}

.steps-container .step-content {
    background-color: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    max-width: calc(50% - 45px); 
    width: 100%;
    border: 1px solid var(--border-color);
    position: relative;
}

.steps-container .step:nth-child(odd) .step-content::after {
    content: " ";
    position: absolute;
    top: 20px;
    right: -16px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent transparent white;
}

.steps-container .step:nth-child(even) .step-content::after {
    content: " ";
    position: absolute;
    top: 20px;
    left: -16px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent white transparent transparent;
}

.steps-container .step:nth-child(odd) .step-content::before {
    content: " ";
    position: absolute;
    top: 20px;
    right: -17px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent transparent var(--border-color);
}

.step:nth-child(even) .step-content::before {
    content: " ";
    position: absolute;
    top: 20px;
    left: -17px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent var(--border-color) transparent transparent;
}

.step-content h3 {
    margin-bottom: 15px;
    font-size: 22px;
    color: var(--primary);
}

.step-content p {
    color: var(--dark);
    margin-bottom: 0;
    font-size: 16px;
}

.commission {
    padding: 80px 0;
    background-color: white;
}

.commission-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 40px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--border-color);
}

.commission-table th,
.commission-table td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.commission-table th {
    background-color: var(--primary);
    color: white;
    font-weight: 600;
    font-size: 17px;
}

.commission-table tr:last-child td {
    border-bottom: none;
}

.commission-table tr:nth-child(even) {
    background-color: var(--background-grey);
}

.commission-table td {
    color: var(--dark);
    font-size: 16px;
}

.commission-table td:last-child {
    font-weight: 600;
    color: var(--secondary);
}

.testimonials {
    padding: 80px 0;
    background-color: var(--background-grey);
}

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

.testimonial-card {
    background-color: white;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    border: 1px solid var(--border-color);
}

.testimonial-card::before {
    content: '"';
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 80px;
    color: var(--light-grey);
    line-height: 0.5;
    z-index: 0;
    font-family: Georgia, serif;
}

.testimonial-content {
    position: relative;
    z-index: 1;
}

.testimonial-text {
    margin-bottom: 20px;
    font-style: italic;
    color: var(--dark);
    font-size: 16px;
}

.testimonial-author {
    display: flex;
    align-items: center;
}

.testimonial-author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--light-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: var(--primary);
    font-weight: bold;
    font-size: 18px;
    flex-shrink: 0;
}

.testimonial-author-info h4 {
    margin: 0;
    font-size: 16px;
    color: var(--primary);
}

.testimonial-author-info p {
    margin: 0;
    font-size: 14px;
    color: var(--grey);
}

.cta-section {
    padding: 80px 0;
    background-color: var(--secondary);
    color: white;
    text-align: center;
}

.cta-section h2 {
    font-size: 36px;
    margin-bottom: 20px;
    color: white;
}

.cta-section p {
    max-width: 700px;
    margin: 0 auto 30px;
    opacity: 0.9;
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
}

@media (max-width: 768px) {
    .affiliate-page .hero h1 {
        font-size: 36px;
    }
    .benefits {
        padding: 60px 0;
    }
    .benefits-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
    }
    .benefit-card {
        padding: 25px;
    }
    .benefit-card h3 {
        font-size: 20px;
    }
    .benefit-card p {
        font-size: 15px;
    }
    .how-it-works {
        padding: 60px 0;
    }
    .steps-container::before {
        left: 25px; /* Keep the line, content will flow next to/over it */
        top: 0;
        bottom: 0;
    }
    .affiliate-page .step { /* Specific to affiliate page steps */
        flex-direction: column !important; /* Stack number and content vertically */
        align-items: flex-start; 
        margin-bottom: 30px; /* Reduced margin slightly */
        padding-left: 45px; /* Indent step to align with timeline, roughly step-number width + desired offset */
        position: relative; /* Needed for absolute positioning of step-number if desired */
    }
    .affiliate-page .step-number { /* Specific to affiliate page step-number */
        margin-left: -45px; /* Position number to the left of the indented content, aligned with main timeline */
        margin-right: 0; 
        margin-bottom: 10px; /* Space between number and content */
        width: 40px;
        height: 40px;
        font-size: 16px;
        position: relative; /* Or absolute if you want it precisely over the line */
        left: -2px; /* Fine-tune to center on the line which is at 25px, number width is 40px, so 25 - 20 + a bit for border */

    }
    .affiliate-page .step-content { /* Specific to affiliate page step-content */
        max-width: 100%; 
        width: 100%; /* Make content block take full available width */
        padding: 20px;
        margin-left: 0; /* Reset margin if any was pushing it */
    }
    .affiliate-page .step .step-content::after,
    .affiliate-page .step .step-content::before {
        display: none; /* Hide arrows on mobile as they may not make sense */
    }

    .commission {
        padding: 60px 0;
    }
    .commission-table {
        /* padding: 0 10px; Laat container padding dit regelen */
    }
    .commission-table th, .commission-table td {
        padding: 12px 15px;
        font-size: 15px;
    }
    .commission-table th {
        font-size: 16px;
    }
    .testimonials {
        padding: 60px 0;
    }
    .testimonial-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .testimonial-card {
        padding: 25px;
    }
    .testimonial-card::before {
        font-size: 60px;
        top: 15px;
        left: 15px;
    }
    .testimonial-text {
        font-size: 15px;
    }
    .testimonial-author-avatar {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    .testimonial-author-info h4 {
        font-size: 15px;
    }
    .testimonial-author-info p {
        font-size: 13px;
    }

    .affiliate-page .faq-section h2, /* Target h2 if used */
    .affiliate-page .faq-section h3 { /* Target h3 if used */
        font-size: 28px;
    }
    .affiliate-page .faq-section p {
        font-size: 16px;
    }

    .cta-section {
        padding: 60px 20px; /* Padding voor container op mobiel */
    }
    .cta-section h2 {
        font-size: 30px;
    }
    .cta-section p {
        font-size: 16px;
    }
}

/* Specifieke styling voor Contact pagina */
.contact-page .contact-content {
    padding: 60px 0;
}

.contact-page .contact-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
    font-size: 18px;
    color: var(--grey);
}

.contact-page .contact-intro p {
    margin-bottom: 20px;
}

.contact-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-bottom: 60px;
    margin-top: 60px; /* Toegevoegd voor extra ruimte boven deze sectie */
}

.contact-option {
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    background-color: white;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s ease;
    border: 1px solid var(--border-color);
}

.contact-option:hover {
    transform: translateY(-5px);
}

.contact-icon {
    font-size: 48px;
    color: var(--secondary);
    margin-bottom: 20px;
    line-height: 1;
}

.contact-option h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: var(--primary);
}

.contact-option p {
    color: var(--dark);
    margin-bottom: 20px;
    font-size: 16px;
}

.contact-button {
    display: inline-block;
    background-color: var(--secondary); /* Roze achtergrond */
    color: white; /* Witte tekst */
    padding: 12px 25px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 17px;
    transition: background-color 0.3s ease;
    border: none; /* Verwijder eventuele standaard rand */
}

.contact-button:hover {
    background-color: #d43a7d; /* Iets donkerder roze voor hover, pas aan indien nodig */
}

.benefits-section { /* Voor contact pagina */
    background-color: var(--background-grey);
    padding: 60px 20px; /* Padding voor container */
    margin-bottom: 60px;
    border-radius: 8px;
}

.benefits-title {
    text-align: center;
    margin-bottom: 40px;
}

.benefits-title h3 {
    font-size: 28px;
    color: var(--primary);
    margin-bottom: 15px;
    font-weight: 700;
}

.benefits-title p {
    font-size: 18px;
    color: var(--grey);
    max-width: 700px;
    margin: 0 auto;
}

.contact-page .benefits-grid { /* Specifiek voor contact pagina */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.benefit-item { /* Voor contact pagina */
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s ease;
    border: 1px solid var(--border-color);
}

.benefit-item:hover {
    transform: translateY(-5px);
}

.benefit-icon {
    font-size: 48px;
    color: var(--secondary);
    margin-bottom: 20px;
    line-height: 1;
}

.benefit-item h4 {
    font-size: 20px;
    color: var(--primary);
    margin-bottom: 15px;
}

.benefit-item p {
    color: var(--dark);
    font-size: 16px;
}

.form-section { /* Voor contact pagina */
    background-color: white;
    border-radius: 8px;
    padding: 40px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    margin: 0 auto 60px;
    border: 1px solid var(--border-color);
}

.form-section h3 {
    text-align: center;
    margin-bottom: 30px;
    color: var(--primary);
    font-size: 28px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--dark);
}
 .form-group input[type="checkbox"] + label {
    display: inline-block; 
    margin-left: 10px;
    font-weight: normal; /* Normaal gewicht voor checkbox label */
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 16px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 86, 179, 0.25); /* Bootstrap-achtige focus */
}

textarea.form-control {
    min-height: 150px;
    resize: vertical;
}

.form-submit {
    background-color: var(--secondary);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: block;
    width: auto; /* Niet altijd volle breedte */
    min-width: 200px; /* Minimale breedte */
    margin: 20px auto 0;
}

.form-submit:hover {
    background-color: #d44513;
}
.contact-page .form-group input[type="checkbox"] {
    width: auto; /* Zorg dat checkbox niet 100% breed is */
    margin-right: 5px;
    vertical-align: middle;
}


.location-section { /* Voor contact pagina */
    margin: 60px 0;
    padding-top: 40px;
    border-top: 1px solid var(--border-color);
}

.location-section h3 {
    font-size: 28px;
    color: var(--primary);
    margin-bottom: 30px;
    text-align: center;
}

.location-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
    align-items: stretch; /* Zorg dat kaarten even hoog zijn */
}

.address-container {
    flex: 1;
    min-width: 300px;
    padding: 30px; /* Meer padding */
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
}

.address-container h4 {
    font-size: 22px;
    margin-bottom: 20px;
    color: var(--primary);
}

.address-container p {
    margin-bottom: 10px;
    font-size: 16px;
    color: var(--dark);
}

.address-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.address-icon {
    margin-right: 15px;
    color: var(--secondary);
    font-size: 24px;
    min-width: 24px;
    text-align: center;
    line-height: 1;
}

.map-container {
    flex: 1;
    min-width: 300px;
    height: 400px;
    background-color: var(--light-grey);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
}

.map-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.location-cta {
    margin-top: 25px;
    text-align: center;
}

@media (max-width: 768px) {
    .contact-page .contact-options {
        flex-direction: column;
        align-items: center;
    }
    .contact-page .contact-option {
        width: 100%;
        max-width: none;
    }
    .contact-page .benefits-section {
        padding: 40px 0;
    }
    .contact-page .benefits-title h3 {
        font-size: 24px;
    }
    .contact-page .benefits-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Aangepast */
        gap: 20px;
    }
    .contact-page .benefit-item {
        padding: 25px;
    }
    .contact-page .benefit-item h4 {
        font-size: 18px;
    }
    .contact-page .benefit-item p {
        font-size: 15px;
    }
    .contact-page .form-section {
        padding: 30px 20px;
    }
    .contact-page .form-section h3 {
        font-size: 24px;
    }
    .contact-page .form-submit {
        width: 100%; /* Volle breedte op mobiel */
    }

    .contact-page .faq-section {
        padding: 40px 0;
    }
    .contact-page .faq-section h3 {
        font-size: 24px;
    }

    .contact-page .location-section {
        padding: 40px 0;
    }
    .contact-page .location-section h3 {
        font-size: 24px;
    }
    .contact-page .location-container {
        flex-direction: column;
        gap: 20px;
    }
    .contact-page .address-container {
        padding: 25px;
    }
    .contact-page .address-container h4 {
        font-size: 20px;
    }
    .contact-page .address-item p {
        font-size: 15px;
    }
}

/* Specifieke styling voor Handsfree pagina */
.handsfree-page .main-content {
    padding: 60px 0;
}

.handsfree-page .content-section {
    max-width: 900px; /* Iets breder voor two-column */
    margin: 0 auto 60px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
}
.handsfree-page .content-section:first-of-type {
    border-top: none;
    padding-top: 0;
}

.handsfree-page .content-section h3 {
    font-size: 28px;
    color: var(--primary);
    margin-bottom: 25px;
    text-align: center;
}

.handsfree-page .content-section p {
    margin-bottom: 20px;
    font-size: 17px;
    color: var(--dark);
    max-width: 800px; /* Max breedte voor leesbaarheid */
    margin-left: auto;
    margin-right: auto;
}

.content-image {
    border-radius: 8px;
    overflow: hidden;
    margin: 30px auto;
    max-width: 700px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

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

.two-column {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin: 40px auto;
    max-width: 900px;
    align-items: stretch; /* Maak boxen even hoog */
}

.column {
    flex: 1;
    min-width: 300px;
    display: flex; /* Om instruction-box 100% hoogte te laten gebruiken */
}

.instruction-box {
    background-color: white;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
    width: 100%; /* Neem volledige breedte van .column */
}

.instruction-box h3 {
    color: var(--primary);
    margin-bottom: 20px;
    font-size: 22px;
    text-align: left; /* Titel links voor instructies */
}

.instruction-box ol {
    padding-left: 0;
    list-style: none;
    counter-reset: step-counter;
}

.instruction-box ol li {
    margin-bottom: 20px;
    position: relative;
    padding-left: 45px; /* Meer ruimte voor nummer */
    font-size: 16px;
    color: var(--dark);
    line-height: 1.4; /* Zodat tekst niet tegen cirkel komt */
}

.instruction-box ol li::before {
    content: counter(step-counter);
    counter-increment: step-counter;
    background-color: var(--secondary);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
    position: absolute;
    left: 0;
    top: 0;
}

.highlight-box {
    background-color: var(--info-light);
    border-left: 4px solid var(--info);
    padding: 25px; /* Meer padding */
    margin: 30px auto;
    max-width: 800px;
    border-radius: 0 4px 4px 0;
    color: #0c5460;
}

.highlight-box h4 {
    color: #0c5460;
    margin-bottom: 15px; /* Meer ruimte */
    font-size: 20px; /* Grotere titel */
}

.highlight-box p {
    margin-bottom: 10px;
    font-size: 16px;
    color: #0c5460;
}
.highlight-box p:last-child {
    margin-bottom: 0;
}

.highlight-box ul {
    list-style: none;
    padding-left: 0;
    margin-top: 15px;
}
.highlight-box li {
    margin-bottom: 10px; /* Meer ruimte */
    padding-left: 25px;
    position: relative;
    font-size: 16px;
}
.highlight-box li::before {
    content: '✓';
    color: var(--info);
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 18px;
    line-height: 1.6;
}

.benefits-list {
    list-style: none;
    padding-left: 0;
    margin: 30px auto; /* Meer verticale ruimte */
    max-width: 800px;
}

.benefits-list li {
    margin-bottom: 15px;
    padding-left: 30px;
    position: relative;
    font-size: 17px;
    color: var(--dark);
}

.benefits-list li::before {
    content: '✓';
    color: var(--secondary);
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.6;
}

.handsfree-page .cta-section {
    text-align: center;
    margin: 50px auto; /* Centreren en ruimte */
    padding-top: 40px;
    border-top: 1px solid var(--border-color);
    max-width: 800px; /* Consistent met content secties */
}

.handsfree-page .cta-section p {
    font-size: 18px;
    color: var(--grey);
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .handsfree-page .content-section h3 {
        font-size: 24px;
    }
    .handsfree-page .two-column {
        flex-direction: column;
        gap: 30px;
    }
    .handsfree-page .column {
        min-width: auto;
    }
    .handsfree-page .instruction-box {
        padding: 25px;
    }
    .handsfree-page .instruction-box ol li {
        padding-left: 40px;
    }
    .handsfree-page .instruction-box ol li::before {
        width: 25px;
        height: 25px;
        font-size: 14px;
    }
    .handsfree-page .highlight-box {
        padding: 20px;
    }
    .handsfree-page .highlight-box h4 {
        font-size: 18px;
    }
    .handsfree-page .highlight-box p, .highlight-box li {
        font-size: 15px;
    }
    .handsfree-page .highlight-box li::before {
        font-size: 16px;
    }
    .handsfree-page .benefits-list li {
        font-size: 16px;
    }
    .handsfree-page .cta-section p {
        font-size: 16px;
    }
}

/* Specifieke styling voor Prijzen pagina */
.prijzen-page .main-content {
    padding: 60px 0;
}

.prijzen-page .content-section {
    margin-bottom: 60px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
}
.prijzen-page .content-section:first-of-type {
    border-top: none;
    padding-top: 0;
}

.prijzen-page .section-title h3 {
    font-size: 32px;
    color: var(--primary);
    margin-bottom: 15px;
    font-weight: 700;
}

.prijzen-page .section-title p {
    font-size: 18px;
    color: var(--grey);
    max-width: 700px;
    margin: 0 auto;
}

.prijzen-page .price-card-header {
    background-color: var(--primary);
    color: white;
    padding: 20px 20px 30px; /* Bottom padding verhoogd naar 30px */
    text-align: center;
}

.prijzen-page .price-amount {
    font-size: 42px;
    font-weight: 700;
    color: var(--secondary);
    margin-top: 30px; /* Toegevoegd voor ruimte boven */
    margin-bottom: 20px;
    text-align: center;
}

.prijzen-page .price-amount span {
    font-size: 16px;
    font-weight: 400;
    color: var(--dark);
}

.prijzen-page .price-features {
    list-style: none;
    padding-left: 0;
    margin-bottom: 30px;
    /* max-width: 500px; Verwijderd */
    /* margin-left: auto; Verwijderd */
    /* margin-right: auto; Verwijderd */
}

.prijzen-page .price-features li {
    margin-bottom: 12px;
    padding-left: 20px; /* Verlaagd van 40px naar 20px */
    position: relative;
    font-size: 17px;
    color: var(--dark);
}

.prijzen-page .price-features li::before {
    content: "✓";
    color: var(--secondary);
    position: absolute;
    left: 0px; /* Teruggezet naar 0px */
    font-weight: bold;
    font-size: 20px;
    line-height: 1.6;
}

.prijzen-page .info-box {
    background-color: var(--info-light);
    border-left: 4px solid var(--info);
    padding: 20px;
    margin: 20px auto; /* Centreren */
    max-width: 660px; /* Zelfde breedte als price card body content */
    border-radius: 0 4px 4px 0;
    color: #0c5460;
}

.prijzen-page .info-box h4 {
    color: #0c5460;
    margin-bottom: 10px;
    font-size: 18px;
    display: flex;
    align-items: center;
}
.prijzen-page .info-box h4::before {
    content: "ℹ️";
    margin-right: 10px;
}

.prijzen-page .info-box p {
    margin-bottom: 10px;
    font-size: 16px;
    color: #0c5460;
}
.prijzen-page .info-box p:last-child {
    margin-bottom: 0;
}

.examples {
    background-color: var(--background-grey);
    padding: 40px;
    border-radius: 8px;
    margin-top: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.examples h3 {
    margin-bottom: 30px;
    color: var(--primary);
    font-size: 28px;
    text-align: center;
}

.example-card {
    background-color: white;
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
}

.example-card h4 {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    color: var(--primary);
    font-size: 18px;
}

.example-card h4::before {
    content: "📝";
    margin-right: 10px;
}

/* Al gedefinieerd: .example-calculation, .example-result */

.prijzen-page .faq-section {
    margin: 60px auto; /* Centreren */
    padding-top: 40px;
    border-top: 1px solid var(--border-color);
    max-width: 800px; /* Consistent met andere secties */
    background-color: transparent; /* Reset achtergrond indien nodig */
}

.prijzen-page .faq-section h3 {
    font-size: 28px;
    color: var(--primary);
    margin-bottom: 30px;
    text-align: center;
}

.prijzen-page .cta-section {
    text-align: center;
    background-color: var(--secondary); /* Roze achtergrond */
    color: white; /* Witte tekst voor alles binnen deze sectie */
    padding: 60px 0 80px; /* Padding aangepast, bottom verhoogd naar 80px */
    margin: 60px 0 0; /* TODO: Check of deze margin nog nodig is, waarschijnlijk niet? Verwijderd voor nu */
    border-top: none; /* Verwijder de border-top */
    max-width: none; /* Laat het de volledige breedte innemen */
}

.prijzen-page .cta-section .container p { /* Target p binnen de .container van .cta-section specifiek voor prijzenpagina */
    color: white; 
    opacity: 0.9; 
    margin-bottom: 20px;
    font-size: 18px;
}

.prijzen-page .cta-section .container .cta-button { /* Target button binnen de .container specifiek */
    background-color: white;
    color: var(--secondary);
    padding: 14px 30px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: 2px solid transparent; /* Voor consistentie met .secondary */
}

.prijzen-page .cta-section .cta-button:hover {
    background-color: var(--light-grey);
    color: var(--secondary);
}

@media (max-width: 768px) {
    .prijzen-page .section-title h3 {
        font-size: 28px;
    }
    .prijzen-page .section-title p {
        font-size: 16px;
    }
    .prijzen-page .price-card-header {
        font-size: 24px;
    }
    .prijzen-page .price-amount {
        font-size: 36px;
    }
    .prijzen-page .price-amount span {
        font-size: 16px;
    }
    .prijzen-page .price-features li {
        font-size: 16px;
    }
    .prijzen-page .price-features li::before {
        font-size: 18px;
    }
    .prijzen-page .info-box {
        padding: 15px;
    }
    .prijzen-page .info-box h4 {
        font-size: 16px;
    }
    .prijzen-page .info-box p {
        font-size: 15px;
    }
    .prijzen-page .examples {
        padding: 30px 15px;
    }
    .prijzen-page .examples h3 {
        font-size: 24px;
    }
    .prijzen-page .example-card {
        padding: 20px;
    }
    .prijzen-page .example-card h4 {
        font-size: 16px;
    }
    .prijzen-page .example-calculation {
        font-size: 14px;
    }
    .prijzen-page .example-result {
        font-size: 16px;
    }
    .prijzen-page .faq-section {
        padding: 30px 0;
    }
    .prijzen-page .faq-section h3 {
        font-size: 24px;
    }
    .prijzen-page .cta-section p {
        font-size: 16px;
    }
    /* Verwijderde foute regel: .prijzen-page .price-card-header { font-size: 24px; } */
    /* Herstelde correcte regel voor H4 op mobiel indien nodig, anders weglaten */
    .prijzen-page .price-card-header h4 {
        font-size: 20px; /* Aangepaste font-size voor mobiel */
    }
    .prijzen-page .price-amount {
        font-size: 36px;
    }
    .prijzen-page .price-amount span {
        font-size: 16px;
    }
}

/* Specifieke styling voor Klachtenprocedure pagina */
.klachtenprocedure-page .complaint-content {
    padding: 60px 0;
}

.klachtenprocedure-page .complaint-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
    font-size: 18px;
    color: var(--grey);
}

.klachtenprocedure-page .complaint-section {
    max-width: 800px;
    margin: 0 auto 60px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
}
.klachtenprocedure-page .complaint-section:first-of-type {
    border-top: none;
    padding-top: 0;
}
.klachtenprocedure-page .complaint-section h3 {
    font-size: 28px;
    color: var(--primary);
    margin-bottom: 25px;
    text-align: center;
}

.klachtenprocedure-page .promise-list {
    list-style: none;
    padding-left: 0;
    margin-top: 20px;
}
.klachtenprocedure-page .promise-list li {
    padding-left: 30px;
    position: relative;
    margin-bottom: 15px;
    font-size: 17px;
    line-height: 1.6;
}
.klachtenprocedure-page .promise-list li::before {
    content: "✓";
    color: var(--success);
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.6;
}

.klachtenprocedure-page div.complaint-process {
    background-color: var(--background-grey);
    border-radius: 8px;
    padding: 30px;
    margin: 30px 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.klachtenprocedure-page div.complaint-process .complaint-step {
    margin-bottom: 25px;
}
.klachtenprocedure-page div.complaint-process .complaint-step:last-child {
    margin-bottom: 0;
}
.klachtenprocedure-page div.complaint-process .step-content h4 {
    font-size: 20px;
    margin-bottom: 10px;
    color: var(--primary);
}
.klachtenprocedure-page div.complaint-process .step-content p {
    font-size: 16px;
    margin-bottom: 0;
}

.klachtenprocedure-page ol.complaint-process {
    list-style: none;
    padding-left: 0;
    counter-reset: step-counter;
    margin: 30px 0;
}
.klachtenprocedure-page ol.complaint-process li {
    padding-left: 45px;
    position: relative;
    margin-bottom: 20px;
    font-size: 17px;
    line-height: 1.6;
}
.klachtenprocedure-page ol.complaint-process li:last-child {
    margin-bottom: 0;
}
.klachtenprocedure-page ol.complaint-process li::before {
    content: counter(step-counter);
    counter-increment: step-counter;
    background-color: var(--primary);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
    position: absolute;
    left: 0;
    top: 0;
}

.klachtenprocedure-page .complaint-form-section {
    background-color: white;
    border-radius: 8px;
    padding: 40px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color);
    margin: 40px auto 60px;
}
.klachtenprocedure-page .complaint-form-section h3 {
    text-align: center;
    margin-bottom: 30px;
    color: var(--primary);
    font-size: 28px;
}
.klachtenprocedure-page .form-submit {
    background-color: var(--secondary);
    color: white;
    max-width: 250px;
    margin: 20px auto 0;
}
.klachtenprocedure-page .form-submit:hover {
    background-color: #d44513;
}
.klachtenprocedure-page .form-message {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 0 4px 4px 0;
}
.klachtenprocedure-page .form-message.success {
    background-color: var(--info-light);
    color: #0c5460;
    border-left: 4px solid var(--info);
}
.klachtenprocedure-page .form-message.error {
    background-color: var(--warning-light);
    color: #856404;
    border-left: 4px solid var(--warning);
}

.klachtenprocedure-page .complaint-section:has(> .complaint-notice) ul {
    list-style: disc;
    margin: 20px 0 20px 20px;
}
.klachtenprocedure-page .complaint-section:has(> .complaint-notice) ul li {
    font-size: 17px;
    padding-left: 10px;
    margin-bottom: 10px;
}
.klachtenprocedure-page .complaint-notice {
    background-color: var(--info-light);
    border-left: 4px solid var(--info);
    padding: 20px;
    margin-top: 30px;
    border-radius: 0 4px 4px 0;
}
.klachtenprocedure-page .complaint-notice h4 {
    color: #0c5460;
    margin-bottom: 10px;
    font-size: 18px;
}
.klachtenprocedure-page .complaint-notice p {
    margin-bottom: 10px;
    font-size: 16px;
}
.klachtenprocedure-page .complaint-notice p:last-child {
    margin-bottom: 0;
}

.klachtenprocedure-page .complaint-contact {
    margin: 60px 0;
    text-align: center;
    border-top: 1px solid var(--border-color);
    padding-top: 40px;
}
.klachtenprocedure-page .complaint-contact h3 {
    font-size: 28px;
    color: var(--primary);
    margin-bottom: 20px;
}
.klachtenprocedure-page .complaint-contact p {
    font-size: 18px;
    color: var(--grey);
    margin-bottom: 30px;
}
.klachtenprocedure-page .contact-methods {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}
.klachtenprocedure-page .contact-method {
    flex: 1;
    min-width: 250px;
    max-width: 300px;
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    border: 1px solid var(--border-color);
}
.klachtenprocedure-page .contact-method:hover {
    transform: translateY(-5px);
}
.klachtenprocedure-page .contact-method .contact-icon {
    font-size: 40px;
    color: var(--primary);
    margin-bottom: 20px;
}
.klachtenprocedure-page .contact-method h4 {
    margin-bottom: 10px;
    font-size: 20px;
    color: var(--dark);
}
.klachtenprocedure-page .contact-method p {
    font-size: 16px;
    color: var(--grey);
    margin-bottom: 0;
}

.klachtenprocedure-page .faq-section {
    margin: 60px auto;
    border-top: 1px solid var(--border-color);
    padding-top: 40px;
    max-width: 800px;
}
.klachtenprocedure-page .faq-section h3 {
    font-size: 28px;
    color: var(--primary);
    margin-bottom: 30px;
    text-align: center;
}

.klachtenprocedure-page .cta-section {
    text-align: center;
    margin: 50px auto 0;
    padding-top: 40px;
    border-top: 1px solid var(--border-color);
    max-width: 800px;
}
.klachtenprocedure-page .cta-section p {
    font-size: 18px;
    color: var(--grey);
    margin-bottom: 20px;
}
.klachtenprocedure-page .cta-section .cta-button {
    background-color: var(--secondary);
}
.klachtenprocedure-page .cta-section .cta-button:hover {
    background-color: #d44513;
}

@media (max-width: 768px) {
    .klachtenprocedure-page .complaint-section h3,
    .klachtenprocedure-page .complaint-form-section h3,
    .klachtenprocedure-page .complaint-contact h3,
    .klachtenprocedure-page .faq-section h3 {
        font-size: 24px;
    }

    .klachtenprocedure-page .complaint-process ol li {
        padding-left: 35px; /* Pas padding aan voor kleinere nummers */
    }

    .klachtenprocedure-page .complaint-process ol li::before {
        width: 25px; /* Kleinere cirkel */
        height: 25px;
        font-size: 14px;
    }

    .klachtenprocedure-page .complaint-form-section {
        padding: 30px 20px;
    }

    .klachtenprocedure-page .contact-methods {
        flex-direction: column;
        align-items: center;
    }

    .klachtenprocedure-page .contact-method {
        width: 100%; /* Volle breedte op mobiel */
        max-width: none; /* Verwijder max-width */
    }
    
    .klachtenprocedure-page .cta-section p {
        font-size: 17px; /* Iets kleiner op mobiel */
    }
}

/* Einde Klachtenprocedure Pagina Specifieke Stijlen */

/* Specifieke styling voor Over Ons pagina */
.over-ons-page .about-content {
    padding: 60px 0;
}

.about-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    margin-bottom: 60px;
}

.about-text {
    flex: 1;
    min-width: 300px;
}

.about-text h3 {
    font-size: 32px;
    color: var(--primary);
    margin-bottom: 20px;
    font-weight: 700;
}

.about-text p {
    margin-bottom: 20px;
    font-size: 17px;
    color: var(--dark);
}

.about-image {
    flex: 1;
    min-width: 300px;
    text-align: center;
}

.about-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.over-ons-page .about-section h3 {
    font-size: 28px;
    color: var(--primary);
    margin-bottom: 25px;
    text-align: center;
}

.over-ons-page .about-section p {
    margin-bottom: 15px;
    font-size: 17px;
    color: var(--dark);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.mission-box {
    background-color: var(--info-light);
    border-left: 4px solid var(--info);
    padding: 25px;
    margin: 30px auto;
    max-width: 800px;
    border-radius: 0 4px 4px 0;
    color: #0c5460;
}

.mission-box h4 {
    margin-bottom: 15px;
    font-size: 20px;
    color: #0c5460;
}

.mission-box p {
    margin-bottom: 0;
    font-size: 16px;
    color: #0c5460;
}

.timeline {
    position: relative;
    max-width: 800px;
    margin: 40px auto;
    padding: 0 10px;
}

.timeline::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: var(--background-grey);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
    z-index: -1;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
    margin-bottom: 30px;
}
.timeline-item:last-child {
    margin-bottom: 0;
}


.timeline-item::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -14.5px;
    background-color: white;
    border: 4px solid var(--secondary);
    border-radius: 50%;
    z-index: 1;
    top: 15px;
}

.timeline-item.left {
    left: 0;
}

.timeline-item.right {
    left: 50%;
}

.timeline-item.right::after {
    left: -14.5px;
}

.timeline-content {
    padding: 25px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    border: 1px solid var(--border-color);
}

.timeline-item.left .timeline-content::after {
    content: " ";
    position: absolute;
    top: 20px;
    right: -16px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent transparent white;
}

.timeline-item.right .timeline-content::after {
    content: " ";
    position: absolute;
    top: 20px;
    left: -16px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent white transparent transparent;
}

.timeline-item.left .timeline-content::before {
    content: " ";
    position: absolute;
    top: 20px;
    right: -17px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent transparent var(--border-color);
}

.timeline-item.right .timeline-content::before {
    content: " ";
    position: absolute;
    top: 20px;
    left: -17px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent var(--border-color) transparent transparent;
}

.timeline-content h4 {
    font-size: 18px;
    color: var(--primary);
    margin-bottom: 10px;
}

.timeline-content p {
    margin-bottom: 0;
    font-size: 16px;
    color: var(--dark);
}

.about-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.about-card {
    background-color: white;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    text-align: center;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-card:hover {
    transform: translateY(-5px);
}

.about-card-icon {
    font-size: 48px;
    color: var(--secondary);
    margin-bottom: 20px;
    line-height: 1;
}

.about-card h4 {
    font-size: 20px;
    margin-bottom: 15px;
    color: var(--primary);
}

.about-card p {
    color: var(--dark);
    font-size: 16px;
    flex-grow: 1;
}

.unique-points-list {
    list-style: none;
    padding-left: 0;
    margin: 30px auto;
    max-width: 800px;
}

.unique-points-list li {
    margin-bottom: 15px;
    padding-left: 30px;
    position: relative;
    font-size: 17px;
    color: var(--dark);
}

.unique-points-list li::before {
    content: '✓';
    color: var(--secondary);
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.6;
}

.company-stats {
    background-color: var(--background-grey);
    border-radius: 8px;
    padding: 50px 20px;
    margin: 40px auto;
    text-align: center;
    max-width: 900px;
}

.stats-header {
    margin-bottom: 40px;
}

.stats-header h3 {
    font-size: 28px;
    color: var(--primary);
    margin-bottom: 15px;
}

.stats-header p {
    font-size: 18px;
    color: var(--grey);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 30px;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 42px;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 10px;
}

.stat-label {
    color: var(--dark);
    font-size: 16px;
    font-weight: 500;
}

.over-ons-page .cta-section {
    text-align: center;
    margin: 50px auto;
    padding-top: 40px;
    border-top: 1px solid var(--border-color);
    max-width: 800px;
}

.over-ons-page .cta-section p {
    font-size: 18px;
    color: var(--grey);
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .over-ons-page .about-intro {
        flex-direction: column;
        gap: 30px;
    }
    .over-ons-page .about-text h3 {
        font-size: 28px;
    }
    .over-ons-page .about-section h3 {
        font-size: 24px;
    }
    .over-ons-page .timeline::after {
        left: 20px;
    }
    .over-ons-page .timeline-item {
        width: 100%;
        padding-left: 50px;
        padding-right: 10px;
    }
    .over-ons-page .timeline-item.right {
        left: 0;
    }
    .over-ons-page .timeline-item::after {
        left: 7.5px;
        right: auto;
    }
    .over-ons-page .timeline-item.left .timeline-content::after,
    .over-ons-page .timeline-item.left .timeline-content::before,
    .over-ons-page .timeline-item.right .timeline-content::after,
    .over-ons-page .timeline-item.right .timeline-content::before {
        right: auto;
        left: -16px;
        border-color: transparent white transparent transparent;
    }
    .over-ons-page .timeline-item.left .timeline-content::before,
    .over-ons-page .timeline-item.right .timeline-content::before {
        border-color: transparent var(--border-color) transparent transparent;
        left: -17px;
    }
    
    .over-ons-page .about-cards {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    .over-ons-page .about-card {
        padding: 25px;
    }
    .over-ons-page .about-card h4 {
        font-size: 18px;
    }
    .over-ons-page .about-card p {
        font-size: 15px;
    }
    .over-ons-page .unique-points-list li {
        font-size: 16px;
    }
    .over-ons-page .company-stats {
        padding: 30px 15px;
    }
    .over-ons-page .stats-header h3 {
        font-size: 24px;
    }
    .over-ons-page .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 20px;
    }
    .over-ons-page .stat-number {
        font-size: 36px;
    }
    .over-ons-page .stat-label {
        font-size: 15px;
    }
    .over-ons-page .cta-section p {
        font-size: 16px;
    }
}

/* Blog pagina specifieke styles (van blog.html) */
.blog-page .blog-content {
    padding: 60px 0;
}

.blog-page .blog-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
    font-size: 18px;
    color: var(--grey);
}

.blog-page .blog-intro p {
    margin-bottom: 20px;
}

.blog-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.blog-main {
    flex: 1;
}

.blog-sidebar {
    width: 300px;
    flex-shrink: 0;
}

.sidebar-widget {
    background-color: white;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
}

.sidebar-widget h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: var(--primary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.search-form {
    display: flex;
}

.search-input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px 0 0 4px;
    font-size: 16px;
    transition: border-color 0.3s ease;
    min-width: 0;
}
.search-input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 86, 179, 0.25);
}

.search-button {
    background-color: var(--primary);
    color: white;
    border: none;
    padding: 0 20px;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 16px;
    font-weight: 600;
}

.search-button:hover {
    background-color: #004494;
}

.categories-list {
    list-style: none;
    padding-left: 0;
}

.categories-list li {
    margin-bottom: 10px;
}

.categories-list a {
    text-decoration: none;
    color: var(--dark);
    transition: color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
}

.categories-list a:hover {
    color: var(--primary);
}

.category-count {
    background-color: var(--background-grey);
    color: var(--primary);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 13px;
    font-weight: 600;
}

.popular-posts {
}

.popular-post {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.popular-post:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.popular-post-image {
    width: 80px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 15px;
    flex-shrink: 0;
}

.popular-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popular-post-info {
    flex: 1;
    overflow: hidden;
}

.popular-post-info h4 {
    font-size: 16px;
    margin-bottom: 5px;
    line-height: 1.4;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.popular-post-info h4 a {
    text-decoration: none;
    color: var(--dark);
    transition: color 0.3s ease;
}

.popular-post-info h4 a:hover {
    color: var(--primary);
}

.popular-post-info p.post-date {
    font-size: 14px;
    color: var(--grey);
    margin-bottom: 0;
}

.cta-box-sidebar {
    background-color: var(--secondary);
    color: white;
    border-radius: 8px;
    padding: 25px;
    text-align: center;
}

.cta-box-sidebar h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: white;
    border-bottom: none;
    padding-bottom: 0;
}

.cta-box-sidebar p {
    margin-bottom: 20px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
}

.cta-box-button {
    display: inline-block;
    background-color: white;
    color: var(--secondary);
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: 16px;
}

.cta-box-button:hover {
    background-color: var(--light-grey);
    color: var(--secondary);
}

.blog-articles {
    display: grid;
    gap: 30px;
    margin-bottom: 40px;
}

.blog-page .blog-articles {
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.blog-article {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.blog-article:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.article-image {
    height: 200px;
    overflow: hidden;
    position: relative;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.blog-article:hover .article-image img {
    transform: scale(1.05);
}

.article-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.article-meta {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 14px;
    color: var(--grey);
}

.meta-category {
    display: inline-block;
    background-color: var(--background-grey);
    color: var(--primary);
    padding: 4px 12px;
    border-radius: 20px;
    margin-right: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: 13px;
}

.meta-category:hover {
    background-color: var(--secondary);
    color: white;
}

.meta-date {
    display: flex;
    align-items: center;
}

.article-content h3 {
    font-size: 20px;
    margin-bottom: 10px;
    line-height: 1.3;
}

.article-content h3 a {
    text-decoration: none;
    color: var(--primary);
    transition: color 0.3s ease;
}

.article-content h3 a:hover {
    color: var(--secondary);
}

.article-excerpt {
    color: var(--dark);
    margin-bottom: 20px;
    font-size: 16px;
    flex-grow: 1;
}

.read-more {
    display: inline-block;
    color: var(--secondary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
    margin-top: auto;
}
.read-more:hover {
    color: #d44513;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    gap: 8px;
}

.pagination a, .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--primary);
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    font-weight: 500;
    min-width: 40px;
    height: 40px;
}
.pagination span {
    color: var(--grey);
    border-color: transparent;
}

.pagination a:hover {
    background-color: var(--secondary);
    color: white;
    border-color: var(--secondary);
}

.pagination .active {
    background-color: var(--primary);
    color: white;
    border-color: var(--primary);
}
.pagination .active:hover {
    background-color: var(--primary);
    border-color: var(--primary);
}

@media (max-width: 768px) {
    .blog-page .blog-layout {
        flex-direction: column;
        gap: 30px;
    }
    .blog-page .blog-main {
        min-width: auto;
    }
    .blog-page .blog-sidebar {
        width: 100%;
    }
    .blog-page .sidebar-widget {
        padding: 20px;
    }
    .blog-page .sidebar-widget h3 {
        font-size: 18px;
    }
    .blog-page .search-input, .search-button {
        font-size: 15px;
    }
    .blog-page .popular-post-image {
        width: 70px;
        height: 50px;
    }
    .blog-page .popular-post-info h4 {
        font-size: 15px;
    }
    .blog-page .popular-post-info p.post-date {
        font-size: 13px;
    }
    .blog-page .cta-box-sidebar h3 {
        font-size: 18px;
    }
    .blog-page .cta-box-sidebar p {
        font-size: 14px;
    }
    .blog-page .cta-box-button {
        padding: 8px 15px;
        font-size: 15px;
    }
    .blog-page .blog-articles {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .blog-page .article-image {
        height: 180px;
    }
    .blog-page .article-content {
        padding: 20px;
    }
    .blog-page .article-meta {
        font-size: 13px;
    }
    .blog-page .meta-category {
        padding: 3px 10px;
        font-size: 12px;
    }
    .blog-page .article-content h3 {
        font-size: 18px;
    }
    .blog-page .article-excerpt {
        font-size: 15px;
    }
    .blog-page .read-more {
        font-size: 15px;
    }
    .blog-page .pagination a, .pagination span {
        padding: 8px 12px;
        font-size: 15px;
        min-width: 36px;
        height: 36px;
    }
} 

/* CTA Section on Prijzen Pagina - NIEUWE REGELS */
.cta-section-prijzen .container p {
    color: white;
    opacity: 0.9;
    margin-bottom: 30px;
    font-size: 18px;
}

.cta-section-prijzen .container .cta-button {
    background-color: white;
    color: var(--secondary);
    padding: 14px 30px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    border: 2px solid transparent;
    display: inline-block;
}

.cta-section-prijzen .container .cta-button:hover {
    background-color: var(--light-grey);
    color: var(--secondary);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .cta-section-prijzen .container .cta-button {
        width: 100%;
        text-align: center;
        padding: 12px 25px;
        font-size: 17px;
    }
} 

/* Nieuwe regel om .price-card op prijzenpagina smaller te maken en te centreren */
.prijzen-page .price-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin: 0 auto 40px;
    max-width: 700px;
    border: 1px solid var(--border-color);
}

/* --- START ALGEMENE STYLING VOOR PAGINABREDE ROZE CTA --- */
.cta-section-fullwidth-pink {
    background: var(--accent-pink, #f72585);
    color: #fff;
    width: 100%;
    padding: 80px 0 80px 0;
    box-shadow: 0 8px 32px rgba(247, 37, 133, 0.08);
    z-index: 2;
    overflow: hidden;
    max-width: 100% !important;
    margin: 0 !important;
    border-top: none !important;
}
.cta-section-fullwidth-pink .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}
.cta-section-fullwidth-pink h2 {
    color: #fff;
    font-size: 36px;
    margin-bottom: 20px;
    font-weight: 700;
}
.cta-section-fullwidth-pink p {
    color: rgba(255,255,255,0.9);
    font-size: 18px;
    margin: 0 auto 30px;
    max-width: 700px;
}
.cta-section-fullwidth-pink .cta-button {
    display: inline-block;
    background-color: #fff;
    color: var(--accent-pink, #f72585);
    padding: 14px 30px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    border: 2px solid #fff;
    margin: 0 10px 0 0;
    transition: background 0.3s, color 0.3s, border 0.3s, transform 0.2s;
}
.cta-section-fullwidth-pink .cta-button:last-child {
    margin-right: 0;
}
.cta-section-fullwidth-pink .cta-button:hover {
    background: var(--light-grey);
    color: var(--accent-pink, #f72585);
    border-color: var(--light-grey);
    transform: translateY(-2px);
}
.cta-section-fullwidth-pink .cta-button:not(.white) {
    background: var(--accent-pink, #f72585);
    color: #fff;
    border: 2px solid #fff;
}
.cta-section-fullwidth-pink .cta-button:not(.white):hover {
    background: #fff;
    color: var(--accent-pink, #f72585);
    border-color: var(--accent-pink, #f72585);
}
.cta-section-fullwidth-pink .cta-button.secondary {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}
.cta-section-fullwidth-pink .cta-button.secondary:hover {
    background: #fff;
    color: var(--accent-pink, #f72585);
    border-color: var(--accent-pink, #f72585);
}
@media (max-width: 768px) {
    .cta-section-fullwidth-pink {
        padding: 50px 0 50px 0;
    }
    .cta-section-fullwidth-pink h2 {
        font-size: 28px;
    }
    .cta-section-fullwidth-pink p {
        font-size: 16px;
    }
    .cta-section-fullwidth-pink .cta-button {
        display: block;
        width: 100%;
        max-width: 320px;
        margin: 0 auto 15px auto;
    }
    .cta-section-fullwidth-pink .cta-button:last-child {
        margin-bottom: 0;
    }
}
/* --- EINDE UNIFORME CTA STYLING --- */


@media (max-width: 768px) {
    .over-ons-page .company-stats {
        padding: 30px 15px;
    }
    .over-ons-page .stats-header h3 {
        font-size: 24px;
    }
    .cta-section-fullwidth-pink .container .cta-button {
        display: block;
        width: calc(100% - 40px);
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 15px;
    }
    .cta-section-fullwidth-pink .container .cta-button:last-child {
        margin-bottom: 0;
    }
}

/* Specifieke styling voor Wat Doen We (Onze Diensten) pagina */
.wat-doen-we-page .generic-content {
    padding-bottom: 80px; /* Ruimte toevoegen onder de content voor de footer */
}

/* Algemene styling voor generic-content */
.generic-content {
    padding-bottom: 80px; /* Ruimte toevoegen onder de content voor de footer */
}

.site-content { /* Zorgt ervoor dat de main content wrapper de volle breedte probeert te nemen */
    width: 100%;
    box-sizing: border-box; /* Is al gedekt door *, maar voor de zekerheid */
}

/* Herstelde regels voor H4 en P in price-card-header */
.prijzen-page .price-card-header h4 {
    font-size: 24px;
    margin-bottom: 5px;
    font-weight: 600;
    color: white;
}

.prijzen-page .price-card-header p {
    font-size: 16px;
    opacity: 0.9;
    color: white;
}

.prijzen-page .price-card-header {
    background-color: var(--primary);
    color: white;
    padding: 20px; /* Teruggezet naar originele padding */
    text-align: center;
}

/* Nieuwe regel voor padding in price-card-body */
.prijzen-page .price-card-body {
    padding: 0 20px; /* Horizontale padding toegevoegd */
}

/* Styling specifiek voor Onze Diensten pagina */
.onze-diensten-page .hero-diensten {
    background-color: var(--background-grey);
    color: var(--primary);
    padding: 70px 0;
    text-align: center;
}

.onze-diensten-page .hero-diensten-content {
     max-width: 800px;
     margin: 0 auto;
}

.onze-diensten-page .hero-diensten-content h1 {
    font-size: 44px;
    margin-bottom: 15px;
    font-weight: 700;
    color: var(--primary);
}

.onze-diensten-page .hero-diensten-content p {
    font-size: 18px;
    margin-bottom: 0;
    color: var(--grey);
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.onze-diensten-page .services-section {
    padding: 80px 0;
    background-color: #fff; /* Witte achtergrond voor de hele sectie */
}

/* .section-title is algemeen, niet overschrijven tenzij specifiek nodig */
/* .onze-diensten-page .services-section .section-title h2 { ... } */
/* .onze-diensten-page .services-section .section-title p { ... } */


.onze-diensten-page .service-item {
    display: flex;
    flex-direction: column; /* Start met kolom voor mobiel eerst */
    align-items: center;
    text-align: center;
    gap: 30px;
    margin-bottom: 60px; /* Verhoogd van 30px */
    padding: 30px;
    background-color: var(--light); /* Achtergrond per item */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    /* border: 1px solid var(--border-color); Verwijderd, niet in voorbeeld */
    /* width: 100%; max-width: none; Verwijderd, waren tests */
}

.onze-diensten-page .service-item:last-child {
    margin-bottom: 0;
}

.onze-diensten-page .service-icon {
    font-size: 50px; /* Vergroot van 32px */
    color: var(--secondary);
    margin-bottom: 10px; /* Voor mobiele layout (column) */
    flex-shrink: 0;
    line-height: 1;
    /* Verwijder specifieke styling zoals background-color, border-radius, width, height, box-shadow voor icoon zelf */
    /* Deze kwamen uit een eerdere versie en zijn niet in het voorbeeld */
}

.onze-diensten-page .service-content h3 {
    font-size: 24px; /* Vergroot van 22px */
    color: var(--primary);
    margin-top: 0; /* Reset, was al 0 */
    margin-bottom: 15px;
}

.onze-diensten-page .service-content p {
    margin-bottom: 15px;
    line-height: 1.7;
    color: var(--dark);
}

.onze-diensten-page .service-content ul {
    list-style: none;
    padding-left: 0;
    margin-top: 15px;
    margin-bottom: 20px;
    text-align: left; /* Zorg dat lijstitems links uitlijnen, zelfs als parent center is */
}

.onze-diensten-page .service-content ul li {
    margin-bottom: 10px; /* Verhoogd van 8px */
    position: relative;
    padding-left: 25px;
}

.onze-diensten-page .service-content ul li::before {
    content: '\2713'; /* Vinkje (✓) */
    color: var(--success);
    position: absolute;
    left: 0;
    font-weight: bold;
    /* font-size: 16px; Verwijderd, laat het erven */
}

/* Styling voor de "Meer over..." linkjes - .btn-outline-primary wordt behouden */


/* Hoe werkt het sectie specifiek voor onze-diensten */
/* .onze-diensten-page .how-it-works { ... } */
/* .onze-diensten-page .steps-grid { ... } */
/* .onze-diensten-page .step-card { ... } */
/* .onze-diensten-page .step-number { ... } */


@media (min-width: 768px) {
    .onze-diensten-page .service-item {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
    }
    .onze-diensten-page .service-icon {
        margin-bottom: 0; /* Geen margin-bottom meer op desktop */
        margin-right: 30px; /* Ruimte rechts van icoon */
    }
    .onze-diensten-page .service-content ul {
        margin-left: 0; /* Zekerstellen dat er geen onnodige indent is */
    }
}

/* ... overige CSS ... */

/* Hero section voor Diensten */
.hero-diensten {
    background-color: var(--background-grey);
    color: var(--primary);
    padding: 70px 0;
    text-align: center;
}

.hero-diensten-content {
     max-width: 800px;
     margin: 0 auto;
}

.hero-diensten h1 {
    font-size: 44px;
    margin-bottom: 15px;
    font-weight: 700;
    color: var(--primary);
}

.hero-diensten p {
    font-size: 18px;
    margin-bottom: 0;
    color: var(--grey);
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

/* Services Section */
.services-section {
    padding: 80px 0;
    background-color: #fff; /* In het voorbeeld was dit #fff */
}

/* .section-title is al generiek gedefinieerd, mogelijk kleine aanpassingen nodig als die niet overeenkomt */
/* De .section-title in het voorbeeld had:
.section-title {
    text-align: center;
    margin-bottom: 60px;
}
.section-title h2 {
    font-size: 32px;
    color: var(--primary);
    margin-bottom: 15px;
    font-weight: 700;
}
.section-title p {
    font-size: 18px;
    color: var(--grey);
    max-width: 700px;
    margin: 0 auto;
}
Ik ga ervan uit dat de bestaande .section-title voldoende is of later wordt verfijnd.
*/

.service-item {
    display: flex;
    flex-direction: column; /* Standaard voor mobiel */
    align-items: center; /* Standaard centreren voor mobiel */
    text-align: center; /* Standaard centreren voor mobiel */
    gap: 20px; /* Iets minder gap dan in voorbeeld (30px) voor compacter beeld initieel */
    margin-bottom: 40px; /* Iets minder margin dan in voorbeeld (60px) */
    padding: 25px; /* Iets minder padding dan in voorbeeld (30px) */
    background-color: var(--light);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.service-item:last-child {
    margin-bottom: 0;
}

.service-icon {
    font-size: 40px; /* Iets kleiner dan voorbeeld (50px) */
    color: var(--secondary);
    margin-bottom: 10px;
    flex-shrink: 0;
    line-height: 1;
}

.service-content h3 {
    font-size: 22px; /* Iets kleiner dan voorbeeld (24px) */
    color: var(--primary);
    margin-bottom: 10px; /* Iets minder dan voorbeeld (15px) */
}

.service-content p {
    font-size: 16px;
    color: var(--dark);
    line-height: 1.7;
}

.service-content ul {
    list-style: none;
    padding-left: 0; /* Belangrijk voor centreren if text-align center is op parent */
    margin-top: 15px;
    /* text-align: left; /* Wordt in media query gezet voor desktop */
}

.service-content ul li {
    margin-bottom: 10px;
    padding-left: 25px; /* Ruimte voor vinkje */
    position: relative;
    text-align: left; /* Zorg dat list items altijd links uitgelijnd zijn */
}

.service-content ul li::before {
    content: '✓';
    color: var(--success);
    position: absolute;
    left: 0;
    font-weight: bold;
}

@media (min-width: 768px) {
    .service-item {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
        gap: 30px; /* Meer gap op desktop, zoals voorbeeld */
        padding: 30px; /* Meer padding op desktop */
    }
    .service-icon {
        font-size: 50px; /* Terug naar voorbeeldgrootte */
        margin-bottom: 0;
        margin-right: 30px;
    }
     .service-content h3 {
        font-size: 24px; /* Terug naar voorbeeldgrootte */
    }
    .service-content ul {
        /* margin-left: 0; /* Was in voorbeeld, niet strikt nodig als padding-left: 0 op ul zelf staat */
    }
}

/* How it Works Section - van voorbeeld onze-diensten.html */
.how-it-works {
    padding: 80px 0 40px; /* Was 80px 0 80px */
    background-color: var(--background-grey);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.step-card {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    /* text-align: center; */ /* Verwijderd */
    display: flex;
    align-items: flex-start; /* Lijn bovenkant nummer en tekstblok uit */
    gap: 20px; /* Ruimte tussen nummer en tekstblok */
    text-align: left; /* Standaard tekstuitlijning voor de kaart */
}

/* Overruled de algemene .step-number (L951) die "margin: 0 20px;" had */
.step-card .step-number {
    margin: 0; /* Reset marges, de gap op .step-card regelt de spacing */
    /* Overige styling (size, color, etc.) wordt geërfd van de algemene .step-number regel */
}

.step-card-content {
    flex-grow: 1; /* Laat de tekstinhoud de resterende ruimte innemen */
    /* text-align: left; is geërfd van .step-card */
}

.step-card h3 {
    font-size: 20px;
    color: var(--primary);
    margin-bottom: 10px;
}

.step-card p {
    font-size: 15px;
    color: var(--dark);
}

/* CTA section - was al generiek, maar check of die van onze-diensten.html specifieker was */
/* De .cta-section in onze-diensten.html was:
.cta-section {
    background-color: var(--primary);
    color: white;
    padding: 60px 0;
    text-align: center;
}
.cta-section h2 { font-size: 30px; margin-bottom: 15px; font-weight: 700; }
.cta-section p { font-size: 18px; margin-bottom: 30px; opacity: 0.9; max-width: 600px; margin-left: auto; margin-right: auto; }
.cta-button { ... } (generiek)
.cta-button.secondary { background-color: transparent; border: 2px solid white; color: white; }
De bestaande .cta-section en .cta-button styling zou grotendeels moeten werken. Ik voeg de specifieke context voor .cta-section binnen .onze-diensten-page niet toe,
omdat dit generiek moet zijn. De secondary button styling moet wellicht globaal zijn.
*/


/* Zorg ervoor dat de algemene .section-title styling overeenkomt met die in het voorbeeld */
.section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title h2 {
    font-size: 32px;
    color: var(--primary);
    margin-bottom: 15px;
    font-weight: 700;
}

.section-title p { /* Let op: p binnen .section-title */
    font-size: 18px;
    color: var(--grey);
    max-width: 700px;
    margin: 0 auto; /* Zorgt voor centrering van de paragraaf zelf */
}

/* Specifieke styling voor Over Ons pagina */
.over-ons-page .hero-overons {
    padding: 60px 0 30px; /* Onderkant padding verminderd */
    background-color: var(--light-grey);
    text-align: center;
}

.over-ons-page .hero-overons-content {
     max-width: 850px;
     margin: 0 auto;
}

.over-ons-page .hero-overons h1 {
    font-size: 44px;
    margin-bottom: 15px;
    font-weight: 700;
    color: var(--primary);
}

.over-ons-page .hero-overons p {
    font-size: 18px;
    margin-bottom: 0;
    color: var(--grey);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.over-ons-page .content-section { /* Algemeen voor over-ons content secties */
    padding: 60px 0;
}

.over-ons-page .content-section:first-of-type { /* Specifiek voor de EERSTE content sectie op over-ons */
    padding-top: 30px; /* Bovenkant padding verminderd */
}

.over-ons-page .content-section.bg-grey {
    background-color: var(--background-grey);
}

/* Bedrijfsinformatie Kaart */
.over-ons-page .company-info-card {
    background-color: white;
    padding: 30px 40px; /* Meer padding voor formele info */
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
    max-width: 700px;
    margin: 0 auto 40px auto;
    border-left: 5px solid var(--secondary);
}

.over-ons-page .company-info-card h3 {
    font-size: 24px;
    color: var(--primary);
    margin-bottom: 20px;
    text-align: center;
}

.over-ons-page .info-item {
    display: flex;
    margin-bottom: 15px;
    font-size: 17px;
}
.over-ons-page .info-item strong {
    flex-basis: 180px; /* Vaste breedte voor labels */
    color: var(--primary);
    font-weight: 600;
}
.over-ons-page .info-item span {
    flex-grow: 1;
    color: var(--dark);
}

/* Missie/Visie Sectie */
.over-ons-page .mission-vision-section {
    display: grid;
    grid-template-columns: 1fr; /* Standaard 1 kolom */
    gap: 30px;
    margin-top: 40px;
}

@media (min-width: 768px) {
    .mission-vision-section {
        grid-template-columns: 1fr 1fr; /* 2 kolommen op desktop */
    }
}

.mission-vision-card {
    background-color: var(--light);
    padding: 30px;
    border-radius: 8px;
}
.mission-vision-card h3 {
    font-size: 22px;
    color: var(--secondary);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
.mission-vision-card h3::before { /* Icoontjes voor missie/visie */
    font-size: 24px;
    margin-right: 10px;
}
.mission-vision-card.mission h3::before { content: '🎯'; }
.mission-vision-card.vision h3::before { content: '🔭'; }

.mission-vision-card p {
    font-size: 16px;
    line-height: 1.7;
}

/* Waarom Kiezen Voor Ons - Grid */
.why-choose-us-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 30px;
}
.why-card {
    background: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.why-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.why-card .icon {
    font-size: 36px;
    color: var(--secondary);
    margin-bottom: 15px;
    line-height: 1;
}
.why-card h4 {
    font-size: 20px;
    color: var(--primary);
    margin-bottom: 10px;
    font-weight: 600;
}
.why-card p {
    font-size: 15px;
    color: var(--grey);
    line-height: 1.6;
}

/* Call To Action (indien aanwezig op Over Ons, anders generiek) */
/* .cta-section is waarschijnlijk generiek */

/* Team Sectie (indien van toepassing) */
.team-section .team-member {
    text-align: center;
    margin-bottom: 30px;
}
.team-member img {
    max-width: 180px;
    height: auto;
    border-radius: 50%;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.team-member h4 {
    font-size: 18px;
    color: var(--primary);
    margin-bottom: 5px;
}
.team-member span {
    font-size: 15px;
    color: var(--secondary);
    display: block;
}

/* Responsive aanpassingen specifiek voor Over Ons (indien nodig en niet al gedekt) */
@media (max-width: 767px) {
    .hero-overons h1 {
        font-size: 32px;
    }
    .hero-overons p {
        font-size: 16px;
    }
    .company-info-card {
        padding: 20px;
    }
    .info-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .info-item strong {
        margin-bottom: 5px;
        flex-basis: auto;
    }
    .mission-vision-section {
        grid-template-columns: 1fr;
    }
}

/* Contact prompt / CTA aan einde pagina */
.contact-prompt {
    background-color: var(--secondary);
    color: white;
    padding: 50px 0;
    text-align: center;
}
.contact-prompt h2 {
    font-size: 28px;
    margin-bottom: 15px;
    font-weight: 600;
}
.contact-prompt p {
    font-size: 17px;
    margin-bottom: 25px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}
.contact-prompt .btn-primary-outline {
    background-color: white;
    color: var(--secondary);
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
    border: 2px solid white; /* Zorg dat de rand initieel overeenkomt */
}
.contact-prompt .btn-primary-outline:hover {
    background-color: transparent; /* Maak achtergrond transparant */
    color: white; /* Tekstkleur wit */
    border-color: white; /* Randkleur wit */
}

/* Broodkruimelnavigatie */
.breadcrumb-container {
    background-color: #f8f9fa; /* Lichte achtergrond voor broodkruimels */
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
}

.breadcrumb {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    font-size: 15px;
}

.breadcrumb li {
    margin-right: 8px;
}

.breadcrumb li a {
    text-decoration: none;
    color: var(--secondary);
}

.breadcrumb li a:hover {
    text-decoration: underline;
}

.breadcrumb li+li::before {
    content: "/";
    margin-right: 8px;
    color: var(--grey);
}

.breadcrumb li.active {
    color: var(--primary); /* Actieve pagina in broodkruimel */
}

/* Stijlen voor de Over Ons pagina content secties */
#over-ons-intro .content-section,
#bedrijfsinformatie .content-section, /* ID was niet in HTML, maar structuur wel */
#missie-visie .content-section, /* ID was niet in HTML, maar structuur wel */
#waarom-ons .content-section { /* ID was niet in HTML, maar structuur wel */
    /* Eventuele specifieke padding/margin overrides hier, indien nodig */
}

/* Zorg ervoor dat .site-content de wrapper is zoals in de PHP structuur */
.site-content {
    /* Eventuele algemene styling voor .site-content, zoals padding-top als header fixed is, etc. */
    /* Dit is al aanwezig, dus hier geen herhaling */
}

/* Aanvullende specifieke styling voor elementen binnen .over-ons-page als die class wordt gebruikt */
.over-ons-page .section-title h2 {
    /* Specifieke overrides voor H2 in .over-ons-page */
}

.over-ons-page .info-item strong {
    /* Misschien een andere flex-basis of kleur specifiek voor deze pagina */
}

/* Specifieke styling voor Kwaliteitsgarantie pagina */
.kwaliteitsgarantie-page .hero-kwaliteit {
    background-color: var(--background-grey);
    color: var(--primary);
    padding: 70px 0;
    text-align: center;
}

.kwaliteitsgarantie-page .hero-kwaliteit-content {
     max-width: 850px;
     margin: 0 auto;
}

.kwaliteitsgarantie-page .hero-kwaliteit h1 {
    font-size: 44px;
    margin-bottom: 15px;
    font-weight: 700;
    color: var(--primary);
}

.kwaliteitsgarantie-page .hero-kwaliteit p {
    font-size: 18px;
    margin-bottom: 0;
    color: var(--grey);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.kwaliteitsgarantie-page .content-section {
    padding: 80px 0;
}

.kwaliteitsgarantie-page .content-section.bg-light {
    background-color: var(--light);
}
.kwaliteitsgarantie-page .content-section.bg-grey {
    background-color: var(--background-grey);
}

/* .section-title is generiek */

/* Kwaliteitspunten Grid */
.kwaliteitsgarantie-page .quality-points-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.kwaliteitsgarantie-page .quality-point-card {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    text-align: center;
    transition: transform 0.3s ease;
}
.kwaliteitsgarantie-page .quality-point-card:hover {
    transform: translateY(-5px);
}

.kwaliteitsgarantie-page .quality-icon {
    font-size: 48px;
    color: var(--secondary);
    margin-bottom: 20px;
    line-height: 1;
}

.kwaliteitsgarantie-page .quality-point-card h3 {
    font-size: 22px;
    color: var(--primary);
    margin-bottom: 15px;
}

.kwaliteitsgarantie-page .quality-point-card p {
    font-size: 16px;
    color: var(--dark);
}

/* Hoe wij kwaliteit waarborgen - Lijst stijl */
.kwaliteitsgarantie-page .how-we-ensure-quality {
    max-width: 900px;
    margin: 0 auto;
}
.kwaliteitsgarantie-page .quality-assurance-item {
    display: flex;
    align-items: flex-start; /* Icoon bovenaan uitlijnen */
    gap: 20px;
    margin-bottom: 30px;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
.kwaliteitsgarantie-page .quality-assurance-item:last-child {
    margin-bottom: 0;
}

.kwaliteitsgarantie-page .quality-assurance-icon {
    font-size: 28px;
    color: var(--success);
    margin-top: 5px; /* Kleine aanpassing voor uitlijning */
    flex-shrink: 0;
}
.kwaliteitsgarantie-page .quality-assurance-content h3 {
    font-size: 20px;
    color: var(--primary);
    margin-bottom: 8px;
}
.kwaliteitsgarantie-page .quality-assurance-content p {
    font-size: 16px;
    color: var(--dark);
    line-height: 1.7;
}


/* ITU Standaarden Sectie */
.kwaliteitsgarantie-page .itu-standards-section {
    background-color: var(--primary);
    color: white;
    padding: 60px 0;
    text-align: center;
    border-radius: 8px; /* Afgeronde hoeken voor deze sectie */
    margin-top: 40px; /* Ruimte boven deze sectie */
}
.kwaliteitsgarantie-page .itu-standards-section .container {
    max-width: 800px; /* Iets smaller voor focus */
}
.kwaliteitsgarantie-page .itu-standards-section h2 {
    font-size: 28px;
    margin-bottom: 15px;
    font-weight: 700;
    color: white;
}
.kwaliteitsgarantie-page .itu-standards-section p {
    font-size: 17px;
    margin-bottom: 25px;
    line-height: 1.7;
    opacity: 0.9;
}
.kwaliteitsgarantie-page .itu-standards-section .cta-button.white {
    background-color: white;
    color: var(--primary);
    border-color: white;
}
.kwaliteitsgarantie-page .itu-standards-section .cta-button.white:hover {
    background-color: var(--light-grey);
    color: var(--primary);
    border-color: var(--light-grey);
}

/* Geschillencommissie Sectie */
.kwaliteitsgarantie-page .disputes-committee-section {
    padding: 60px 0;
    background-color: var(--background-grey);
}
.kwaliteitsgarantie-page .disputes-committee-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.kwaliteitsgarantie-page .disputes-committee-content img {
    max-width: 150px; /* Aanpassen indien nodig */
    margin-bottom: 20px;
}
.kwaliteitsgarantie-page .disputes-committee-content h3 {
    font-size: 24px;
    color: var(--primary);
    margin-bottom: 15px;
}
.kwaliteitsgarantie-page .disputes-committee-content p {
    font-size: 16px;
    color: var(--dark);
    margin-bottom: 20px;
}

/* Responsive aanpassingen specifiek voor Kwaliteitsgarantie */
@media (max-width: 767px) {
    .kwaliteitsgarantie-page .hero-kwaliteit h1 {
        font-size: 32px;
    }
    .kwaliteitsgarantie-page .hero-kwaliteit p {
        font-size: 16px;
    }
    .kwaliteitsgarantie-page .content-section {
        padding: 60px 0;
    }
    .kwaliteitsgarantie-page .quality-points-grid {
        grid-template-columns: 1fr; /* 1 kolom op mobiel */
    }
    .kwaliteitsgarantie-page .quality-point-card {
        padding: 25px;
    }
    .kwaliteitsgarantie-page .quality-icon {
        font-size: 40px;
    }
    .kwaliteitsgarantie-page .quality-point-card h3 {
        font-size: 20px;
    }
    .kwaliteitsgarantie-page .quality-assurance-item {
        flex-direction: column; /* Onder elkaar op mobiel */
        align-items: center; /* Centreren voor mobiel */
        text-align: center;
        padding: 25px;
    }
    .kwaliteitsgarantie-page .quality-assurance-icon {
        margin-top: 0;
        margin-bottom: 15px; /* Ruimte onder icoon */
    }
    .kwaliteitsgarantie-page .itu-standards-section {
        padding: 40px 20px; /* Minder padding op mobiel */
    }
    .kwaliteitsgarantie-page .itu-standards-section h2 {
        font-size: 24px;
    }
    .kwaliteitsgarantie-page .disputes-committee-content h3 {
        font-size: 20px;
    }
}

/* Kwaliteit CTA (indien gebruikt op kwaliteitsgarantie.php) */
.kwaliteitsgarantie-page .cta-section {
    /* Generieke .cta-section stijlen zouden moeten gelden */
    /* Specifieke overrides hier indien nodig voor kwaliteitsgarantie */
}

/* --- EINDE ALGEMENE STYLING VOOR PAGINABREDE ROZE CTA --- */

/* Specifieke styling voor knoppen binnen .cta-section-fullwidth-pink */
.cta-section-fullwidth-pink .container .cta-button:not(.white) {
    background-color: var(--secondary); /* Roze achtergrond */
    color: white; /* Witte tekst */
    border: 2px solid var(--secondary); /* Roze rand, matcht achtergrond */
}

.cta-section-fullwidth-pink .container .cta-button:not(.white):hover {
    background-color: white; /* Witte achtergrond bij hover */
    color: var(--secondary); /* Roze tekst bij hover */
    border-color: var(--secondary); /* Roze rand bij hover */
}

@media (max-width: 768px) {
    .affiliate-page .hero h1 {
        font-size: 36px;
    }
}

/* Nieuwe padding voor affiliate hero */
.affiliate-page .hero {
    padding-top: 100px; /* Verhoogd van de standaard 80px uit .hero */
    /* padding-bottom en andere padding blijft van .hero geërfd of kan hier gespecificeerd worden */
}

/* Specifieke styling voor Wat Doen We (Onze Diensten) pagina */
.wat-doen-we-page .generic-content {
    padding-bottom: 80px; /* Ruimte toevoegen onder de content voor de footer */
}

/* Verwijder vorige padding aanpassing voor affiliate hero */
/* .affiliate-page .hero {
    padding-top: 100px; 
} */

/* Nieuwe margin-top voor de CTA knoppen in de affiliate hero */
.affiliate-page .hero .hero-ctas {
    margin-top: 60px; /* Verhoogde margin-top, standaard is impliciet door margin-bottom van p erboven */
}

/* Specifieke styling voor Wat Doen We (Onze Diensten) pagina */

/* Specifieke styling voor Nummerinformatie pagina */
.nummerinformatie-page .page-header {
    /* De .page-header styling is al generiek, specifieke hero-nummerinfo styling uit voorbeeld is al gedekt door .page-header */
}

.nummerinformatie-page .info-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 30px; /* Uit voorbeeld nummerinformatie.html */
    margin-bottom: 60px; /* Extra padding onder de grid toegevoegd */
}

.nummerinformatie-page .info-card {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    text-align: center;
    border-left: 4px solid var(--secondary); /* Uit voorbeeld nummerinformatie.html */
}

.nummerinformatie-page .info-icon {
    font-size: 40px; /* Uit voorbeeld nummerinformatie.html */
    color: var(--secondary);
    margin-bottom: 15px;
    line-height: 1;
}

.nummerinformatie-page .info-card h3 {
    font-size: 22px;
    color: var(--primary);
    margin-bottom: 10px;
}

.nummerinformatie-page .info-card p {
    font-size: 16px;
    color: var(--dark);
    line-height: 1.7;
}
.nummerinformatie-page .info-card ul {
    list-style: none;
    padding-left: 0;
    margin-top: 15px;
    text-align: left;
}
.nummerinformatie-page .info-card ul li {
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}
.nummerinformatie-page .info-card ul li::before {
    content: '›'; /* Specifiek voor nummerinformatie info cards */
    color: var(--secondary);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Benefits List Styling voor nummerinformatie pagina */
.nummerinformatie-page .benefits-list {
    max-width: 900px; /* Uit voorbeeld nummerinformatie.html */
    margin: 0 auto;
}
.nummerinformatie-page .benefit-item {
    /* display: flex; align-items: flex-start; Is niet meer nodig met nieuwe HTML structuur */
    gap: 0; /* Was 20px, niet meer nodig */
    margin-bottom: 25px;
    /* We kunnen padding toevoegen als de blokken te dicht op elkaar komen, of op .benefit-content */
    background-color: white; /* Achtergrond uit .quality-assurance-item voorbeeld */
    padding: 20px; /* Padding uit .quality-assurance-item voorbeeld */
    border-radius: 8px; /* Afronding uit .quality-assurance-item voorbeeld */
    border: 1px solid var(--border-color); /* Rand uit .quality-assurance-item voorbeeld */
}

/* Oude .benefit-icon styling kan hier weg of aangepast worden indien elders nog gebruikt */
.nummerinformatie-page .benefit-icon {
    /* font-size: 24px; 
    color: var(--success); 
    margin-top: 5px; 
    flex-shrink: 0; */
    /* Deze klasse wordt niet meer gebruikt in de .benefit-item op nummerinformatie.php */
    display: none; /* Verberg de oude als die per ongeluk nog ergens staat */
}

.nummerinformatie-page .benefit-content h3 {
    font-size: 20px;
    color: var(--primary);
    margin-bottom: 10px; /* Iets meer ruimte onder de titel */
    display: flex; /* Om vinkje en tekst op één lijn te krijgen */
    align-items: center; /* Verticaal centreren van vinkje en tekst */
    text-align: left; /* Expliciet links uitlijnen */
}

.nummerinformatie-page .benefit-content h3 .benefit-icon-inline {
    color: var(--success); /* Kleur voor het vinkje */
    font-size: 1.2em; /* Maak vinkje iets groter dan de h3 tekst, of specifieke px waarde */
    margin-right: 10px; /* Ruimte tussen vinkje en titeltekst */
    line-height: 1; /* Zorgt voor betere verticale uitlijning */
}

.nummerinformatie-page .benefit-content p {
    font-size: 16px;
    color: var(--dark);
    padding-left: calc(1.2em + 10px); /* Inspringen van paragraaf gelijk aan vinkje + margin */
    text-align: left; /* Expliciet links uitlijnen */
}

/* How it works simple (als die specifiek op nummerinformatie.php gebruikt wordt met deze klassen) */
.nummerinformatie-page .how-it-works-simple {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}
.nummerinformatie-page .step-simple {
    background-color: var(--light);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    flex-basis: calc(33.333% - 20px); /* Drie per rij, met gap */
    min-width: 250px; /* Minimale breedte voor kleinere schermen */
    box-shadow: 0 3px 10px rgba(0,0,0,0.03);
}
.nummerinformatie-page .step-simple-number {
    display: inline-block;
    background-color: var(--secondary);
    color: white;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}
.nummerinformatie-page .step-simple h4 {
    font-size: 18px;
    color: var(--primary);
    margin-bottom: 8px;
}
.nummerinformatie-page .step-simple p {
    font-size: 15px;
    color: var(--dark);
}

/* Responsive aanpassingen voor info cards en benefits list op nummerinformatie pagina */
@media (max-width: 767px) {
    .nummerinformatie-page .info-card {
        padding: 25px;
    }
    .nummerinformatie-page .info-card h3 {
        font-size: 20px;
    }
    .nummerinformatie-page .info-card p {
        font-size: 15px;
    }
    .nummerinformatie-page .benefit-item {
        gap: 15px;
    }
    .nummerinformatie-page .benefit-content h3 {
        font-size: 18px;
    }
    .nummerinformatie-page .benefit-content p {
        font-size: 15px;
    }
    .nummerinformatie-page .step-simple {
        flex-basis: calc(100% - 20px); /* Volle breedte op mobiel */
    }
    .nummerinformatie-page .benefit-content p {
        font-size: 15px;
        padding-left: calc(1.1em + 8px); /* Aanpassen aan mobiele vinkje grootte */
        text-align: left; /* Ook expliciet links uitlijnen voor mobiel */
    }
}

/* Einde specifieke styling voor Nummerinformatie pagina */

.nummerinformatie-page .faq-section {
    margin-bottom: 60px; /* Extra ruimte onder FAQ voor CTA */
}

/* Specifieke styling voor SMS Service pagina */
.sms-service-page .on-request-section { /* Styling uit sms-service.html voorbeeld */
    background-color: var(--info-light, var(--light-grey));
    border-left: 5px solid var(--info);
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 40px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.sms-service-page .on-request-section h3 {
    font-size: 24px;
    color: var(--info);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
.sms-service-page .on-request-section h3::before {
    content: '💬'; /* SMS icoon */
    font-size: 28px;
    margin-right: 10px;
}
.sms-service-page .on-request-section p {
    font-size: 16px;
    color: var(--dark);
    line-height: 1.7;
}

.sms-service-page .steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px; /* Behoud of pas aan indien nodig */
    margin-top: 30px;
}

.sms-service-page .step-card {
    background-color: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    text-align: center; /* Voor centreren icoon en tekst, zoals in voorbeeld */
}

.sms-service-page .step-card .step-icon { /* Specifiek voor SMS pagina */
    font-size: 36px; /* Uit sms-service.html voorbeeld */
    color: var(--secondary); /* Roze kleur voor het cijfer/icoon, zoals in voorbeeld */
    margin: 0 auto 15px auto; /* Centreren en margin onder */
    background-color: var(--light-grey); /* Lichtgrijze achtergrond cirkel, zoals in voorbeeld */
    width: 70px;
    height: 70px;
    line-height: 70px; /* Voor verticale centrering van emoji/tekst */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sms-service-page .step-card h4 { /* Was h4 in sms-service.php */
    font-size: 20px;
    color: var(--primary);
    margin-bottom: 10px;
}

.sms-service-page .step-card p {
    font-size: 15px;
    color: var(--dark);
}

.sms-service-page .benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px; /* Teruggezet naar 30px */
    margin-top: 30px;
    margin-bottom: 60px; /* Extra ruimte onder de hele grid sectie */
}

.sms-service-page .benefit-card {
    background-color: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    border-top: 4px solid var(--success); /* Uit sms-service.html voorbeeld */
    text-align: center; /* Belangrijk voor centreren van icon, h3/h4, p */
}

/* Styling voor het icoon boven de titel (nieuwe klasse of target de div) */
.sms-service-page .benefit-card .benefit-card-icon, /* Als je deze klasse gebruikt */
.sms-service-page .benefit-card .benefit-icon-sms, /* Of deze als je die nog hebt */
.sms-service-page .benefit-card > div:first-child { /* Generieke selector voor de eerste div als icoon-container */
    font-size: 32px; /* Voorbeeld grootte */
    color: var(--success); /* Voorbeeld kleur (of var(--secondary) afhankelijk van icoon) */
    margin-bottom: 15px;
    line-height: 1; /* Zorgt dat emoji's goed staan */
}

/* Huidige .benefit-icon-inline even uitschakelen voor deze pagina, of specifiek maken */
.sms-service-page .benefit-card h4 .benefit-icon-inline {
    display: none; /* Niet tonen als we het icoon erboven willen */
}

.sms-service-page .benefit-card h4, /* Als je h4 gebruikt */
.sms-service-page .benefit-card h3 { /* Als je naar h3 verandert */
    font-size: 20px;
    color: var(--primary);
    margin-bottom: 10px;
    /* display: flex; en align-items: center; zijn hier niet meer nodig */
    text-align: center; /* Zekerstellen dat titel ook centreert */
}

.sms-service-page .benefit-card p {
    font-size: 15px;
    color: var(--dark);
    padding-left: 0; /* Reset padding, centreren doet de rest */
    text-align: center; /* Zekerstellen dat paragraaf ook centreert */
}

/* Responsive voor SMS service benefits - checken we later als basis niet goed is */
@media (max-width: 767px) {
    .sms-service-page .benefit-card h4, /* Als je h4 gebruikt */
    .sms-service-page .benefit-card h3 { /* Als je naar h3 verandert */
        font-size: 18px;
    }
    /* .sms-service-page .benefit-card p { padding-left: 0; } /* Al gereset */
}

/* Einde specifieke styling voor SMS Service pagina */

/* Ruimte tussen FAQ en CTA op SMS pagina */
.sms-service-page .faq-section .faq-container {
    margin-bottom: 60px; /* Extra ruimte onder de FAQ items, voor de CTA */
}

/* Specifieke styling voor Doorverbinden pagina */
.doorverbinden-page .acm-rules-section { /* Gebaseerd op voorbeeld */
    background-color: var(--warning-light);
    border-left: 5px solid var(--warning);
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 40px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.doorverbinden-page .acm-rules-section h3 { /* h3 wordt gebruikt in doorverbinden.php */
    font-size: 24px;
    color: #856404; /* Donkergeel voor contrast */
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
.doorverbinden-page .acm-rules-section h3::before {
    content: '📜'; /* Of een ander passend icoon, matcht voorbeeld */
    font-size: 28px;
    margin-right: 10px;
}
.doorverbinden-page .acm-rules-section p, 
.doorverbinden-page .acm-rules-section ul li {
    font-size: 16px;
    color: #533f03; /* Donkerdere tekst voor leesbaarheid */
    line-height: 1.7;
    text-align: left; /* Zekerstellen dat tekst links uitlijnt */
}
.doorverbinden-page .acm-rules-section ul {
    list-style: none;
    padding-left: 0;
    margin-top: 15px;
}
.doorverbinden-page .acm-rules-section ul li {
    padding-left: 30px; /* Ruimte voor het vinkje */
    position: relative;
    margin-bottom: 10px;
}
.doorverbinden-page .acm-rules-section ul li::before {
    content: '✅'; /* Vinkje zoals in voorbeeld */
    color: var(--success);
    position: absolute;
    left: 0;
    font-size: 18px; /* Grootte van vinkje */
    top: 2px; /* Fijn-afstelling verticale positie */
}

/* Styling voor Hoe Werkt Het sectie op Doorverbinden pagina */
.doorverbinden-page .steps-detailed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 60px; /* Extra ruimte onder de "Hoe werkt het" stappen */
}

.doorverbinden-page .step-detailed-card {
    background-color: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.doorverbinden-page .step-detailed-card .step-detailed-icon { 
    font-size: 28px; /* Aangepast voor cijfers, voorbeeld had 36px voor emoji's */
    font-weight: 600; /* Maak cijfers iets dikker */
    color: var(--secondary); 
    margin: 0 auto 15px auto; 
    background-color: var(--light-grey); 
    width: 60px; /* Iets kleiner dan sms-pagina voor strakkere look met cijfers */
    height: 60px;
    line-height: 60px; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.doorverbinden-page .step-detailed-card h4 { 
    font-size: 20px;
    color: var(--primary);
    margin-bottom: 10px;
}

.doorverbinden-page .step-detailed-card p {
    font-size: 15px;
    color: var(--dark);
    flex-grow: 1; 
}
.doorverbinden-page .step-detailed-card strong {
    color: var(--primary);
}

/* Styling voor Voordelen sectie op Doorverbinden pagina */
.doorverbinden-page .benefits-list-section { /* Wrapper sectie */
    /* padding: 80px 0; /* Generieke .content-section padding */
}
.doorverbinden-page .benefits-list {
    max-width: 900px;
    margin: 30px auto 0 auto; /* Van voorbeeld */
    list-style: none; /* Zorg dat ul geen standaard list style heeft */
    padding-left: 0; /* Reset padding op ul */
}

.doorverbinden-page .benefit-item { /* Dit is een <li> element */
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
    background-color: white;
    padding: 20px; /* Iets meer padding dan voorbeeld (15px) voor uitlijning */
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.doorverbinden-page .benefit-item .benefit-icon { /* Dit is de div met de emoji */
    font-size: 24px; 
    color: var(--success); /* Kleur van de emoji zelf */
    margin-top: 5px; 
    flex-shrink: 0;
    line-height: 1; /* Voor goede emoji weergave */
}

.doorverbinden-page .benefit-item .benefit-content h3 {
    font-size: 20px;
    color: var(--primary);
    margin-bottom: 5px;
    text-align: left;
}

.doorverbinden-page .benefit-item .benefit-content p {
    font-size: 16px;
    color: var(--dark);
    text-align: left;
}

/* Einde specifieke styling voor Doorverbinden pagina */

/* Reset voor vinkjes specifiek op doorverbinden pagina voordelenlijst - AAN EINDE BESTAND */
.benefits-list-doorverbinden li::before {
    content: none !important; 
    display: none !important;
}

/* Styling voor CTA knoppen op Affiliate pagina in roze sectie */
.affiliate-page .cta-section .cta-button:not(.primary-bg):not(.white) {
    background-color: var(--secondary); /* Roze achtergrond */
    color: white; /* Witte tekst */
    border: 2px solid var(--secondary); /* Roze rand, matcht achtergrond */
}

.affiliate-page .cta-section .cta-button:not(.primary-bg):not(.white):hover {
    background-color: white; /* Witte achtergrond bij hover */
    color: var(--secondary); /* Roze tekst bij hover */
    border-color: var(--secondary); /* Roze rand bij hover */
}

/* Behoud styling voor de primaire donkere knop indien die .primary-bg gebruikt */
.affiliate-page .cta-section .cta-button.primary-bg {
    /* Styling wordt geërfd van de algemene .cta-button.primary-bg regel */
    /* Zonodig hier specifieke overrides */
}

/* Styling voor Juridische Pagina's (Algemene Voorwaarden, Privacy, Cookies) */
.algemene-voorwaarden-page .main-content .container,
.privacybeleid-page .main-content .container,
.cookiebeleid-page .main-content .container {
    max-width: 900px; /* Goede leesbreedte voor tekstuele content */
    padding-top: 40px; /* Ruimte onder de page-header */
    padding-bottom: 60px; /* Ruimte boven de footer */
}


/* Specifieke styling voor 'Laatst bijgewerkt' datum bovenaan */
.terms-last-updated,
.privacy-last-updated,
.cookies-last-updated {
    font-size: 14px;
    color: var(--grey);
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}

/* Styling for form messages (success/error) */
.form-message {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    font-size: 16px;
    text-align: center;
}

.form-message.success {
    background-color: var(--info-light);
    color: var(--info);
    border: 1px solid var(--info);
}

.form-message.error {
    background-color: var(--warning-light);
    color: var(--warning); /* Using warning color for error text for better contrast */
    border: 1px solid var(--warning);
}

/* Enhanced styling for privacy checkbox area */
.contact-page .form-group input[type="checkbox"] {
    width: auto; /* Zorg dat checkbox niet 100% breed is */
    margin-right: 5px;
    vertical-align: middle;
}

.form-message.success {
    background-color: var(--info-light);
    color: var(--info);
    border: 1px solid var(--info);
    padding: 15px; /* Ensure padding is present */
    margin-bottom: 20px; /* Ensure margin is present */
    border-radius: 4px; /* Ensure radius is present */
    font-size: 16px; /* Ensure font-size is present */
    text-align: center; /* Ensure alignment is present */
}

.form-message.error {
    background-color: var(--warning-light);
    color: var(--warning); /* Using warning color for error text for better contrast */
    border: 1px solid var(--warning);
    padding: 15px; /* Ensure padding is present */
    margin-bottom: 20px; /* Ensure margin is present */
    border-radius: 4px; /* Ensure radius is present */
    font-size: 16px; /* Ensure font-size is present */
    text-align: center; /* Ensure alignment is present */
}

.contact-page .form-group input[type="checkbox"] {
    width: auto; /* Zorg dat checkbox niet 100% breed is */
    margin-right: 5px;
    vertical-align: middle;
}

.algemene-voorwaarden-page .legal-text p, /* Scoped to .legal-text */
.privacybeleid-page .legal-text p, /* Scoped to .legal-text */
.cookiebeleid-page .legal-text p { /* Scoped to .legal-text */
    font-size: 16px;
    line-height: 1.7;
    color: var(--dark); /* Consistent met body text */
    margin-bottom: 20px;
}

.algemene-voorwaarden-page .legal-text ul, /* Scoped to .legal-text */
.privacybeleid-page .legal-text ul, /* Scoped to .legal-text */
.cookiebeleid-page .legal-text ul { /* Scoped to .legal-text */
    list-style: disc; /* Standaard opsommingstekens */
    margin-left: 20px; /* Inspringen van de lijst */
    margin-bottom: 20px;
    padding-left: 15px; /* Extra padding voor de list items */
}

.algemene-voorwaarden-page .legal-text ul li, /* Scoped to .legal-text */
.privacybeleid-page .legal-text ul li, /* Scoped to .legal-text */
.cookiebeleid-page .legal-text ul li { /* Scoped to .legal-text */
    margin-bottom: 10px;
    line-height: 1.7;
    color: var(--dark); /* Zorgt ervoor dat li tekstkleur overeenkomt */
}

.algemene-voorwaarden-page .legal-text strong, /* Scoped to .legal-text */
.privacybeleid-page .legal-text strong, /* Scoped to .legal-text */
.cookiebeleid-page .legal-text strong { /* Scoped to .legal-text */
    font-weight: 600; /* Iets duidelijker dan browser default bold */
    color: var(--primary); /* Donkerder voor belangrijke termen */
}

.algemene-voorwaarden-page .main-content ul, /* ADDED .main-content */
.algemene-voorwaarden-page .main-content ol, /* ADDED .main-content */
.privacybeleid-page .main-content ul, /* ADDED .main-content */
.privacybeleid-page .main-content ol, /* ADDED .main-content */
.cookiebeleid-page .main-content ul, /* ADDED .main-content */
.cookiebeleid-page .main-content ol, /* ADDED .main-content */
.algemene-voorwaarden-page .legal-text ul, 
.privacybeleid-page .legal-text ul, 
.cookiebeleid-page .legal-text ul {
    margin-bottom: 20px;
    padding-left: 25px; 
    list-style: disc !important; /* Ensure content lists get bullets, and override any general ul style */
}

.algemene-voorwaarden-page .main-content ul li, /* ADDED .main-content */
.algemene-voorwaarden-page .main-content ol li, /* ADDED .main-content */
.privacybeleid-page .main-content ul li, /* ADDED .main-content */
.privacybeleid-page .main-content ol li, /* ADDED .main-content */
.cookiebeleid-page .main-content ul li, /* ADDED .main-content */
.cookiebeleid-page .main-content ol li, /* ADDED .main-content */
.algemene-voorwaarden-page .legal-text ul li, 
.privacybeleid-page .legal-text ul li, 
.cookiebeleid-page .legal-text ul li {
    font-size: 16px;
    line-height: 1.7;
    color: var(--dark);
    margin-bottom: 10px;
    /* list-style-type: disc !important; Redundant if ul/ol has it */
}

.cookiebeleid-page .main-content h3 {
    font-size: 22px;
    color: var(--primary);
    margin-top: 25px;
    margin-bottom: 15px;
}

/* Scoped p tags */
.algemene-voorwaarden-page .main-content p,
.privacybeleid-page .main-content p,
.cookiebeleid-page .main-content p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--dark);
    margin-bottom: 20px;
}

/* Scoped ul and ol tags */
.algemene-voorwaarden-page .main-content ul,
.algemene-voorwaarden-page .main-content ol,
.privacybeleid-page .main-content ul,
.privacybeleid-page .main-content ol,
.cookiebeleid-page .main-content ul,
.cookiebeleid-page .main-content ol {
    margin-bottom: 20px;
    padding-left: 25px; 
    list-style: disc; 
}
/* Also ensure .legal-text ul is present if it was separate */
.algemene-voorwaarden-page .legal-text ul,
.privacybeleid-page .legal-text ul,
.cookiebeleid-page .legal-text ul {
    list-style: disc; /* Or ensure it inherits correctly */
    margin-left: 20px; /* As per one of the previous versions */
    margin-bottom: 20px;
    padding-left: 15px;
}


/* Scoped li tags */
.algemene-voorwaarden-page .main-content ul li,
.algemene-voorwaarden-page .main-content ol li,
.privacybeleid-page .main-content ul li,
.privacybeleid-page .main-content ol li,
.cookiebeleid-page .main-content ul li,
.cookiebeleid-page .main-content ol li {
    font-size: 16px;
    line-height: 1.7;
    color: var(--dark);
    margin-bottom: 10px;
}
/* Also ensure .legal-text ul li is present */
.algemene-voorwaarden-page .legal-text ul li,
.privacybeleid-page .legal-text ul li,
.cookiebeleid-page .legal-text ul li {
    margin-bottom: 10px;
    line-height: 1.7;
    color: var(--dark);
}

/* Scoped strong tags - RESTORING these */
.algemene-voorwaarden-page .main-content strong,
.privacybeleid-page .main-content strong,
.cookiebeleid-page .main-content strong,
.algemene-voorwaarden-page .legal-text strong,
.privacybeleid-page .legal-text strong,
.cookiebeleid-page .legal-text strong {
    font-weight: 600;
    color: var(--primary);
}

.cta-section-fullwidth-pink .container .cta-button:not(.white):hover {
    background-color: transparent; /* Witte tekst op roze achtergrond */
    color: white;
    border-color: white; /* Witte rand op hover */
}

/* Specifieke CSS voor Algemene Voorwaarden, Privacybeleid, Cookiebeleid */
/* Dit zorgt ervoor dat de styling alleen van toepassing is binnen de .legal-text div op deze specifieke pagina's */

/* Algemene Voorwaarden Pagina */
.algemene-voorwaarden-page #main-content .legal-text h2,
.privacybeleid-page #main-content .legal-text h2,
.cookiebeleid-page #main-content .legal-text h2 {
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--primary);
}

.algemene-voorwaarden-page #main-content .legal-text h2:first-of-type,
.privacybeleid-page #main-content .legal-text h2:first-of-type,
.cookiebeleid-page #main-content .legal-text h2:first-of-type {
    margin-top: 0;
    border-top: none;
}

.algemene-voorwaarden-page #main-content .legal-text h3,
.privacybeleid-page #main-content .legal-text h3,
.cookiebeleid-page #main-content .legal-text h3 {
    font-size: 20px;
    margin-top: 25px;
    margin-bottom: 10px;
    color: var(--primary);
}

.algemene-voorwaarden-page #main-content .legal-text p,
.privacybeleid-page #main-content .legal-text p,
.cookiebeleid-page #main-content .legal-text p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--dark); /* Gebruik var(--dark) voor de hoofdtekst */
    margin-bottom: 15px;
}

.algemene-voorwaarden-page #main-content .legal-text ul,
.algemene-voorwaarden-page #main-content .legal-text ol,
.privacybeleid-page #main-content .legal-text ul,
.privacybeleid-page #main-content .legal-text ol,
.cookiebeleid-page #main-content .legal-text ul,
.cookiebeleid-page #main-content .legal-text ol {
    margin-left: 20px;
    margin-bottom: 15px;
    padding-left: 15px; /* Zorgt voor inspringing van de lijst zelf */
}

.algemene-voorwaarden-page #main-content .legal-text ul li,
.algemene-voorwaarden-page #main-content .legal-text ol li,
.privacybeleid-page #main-content .legal-text ul li,
.privacybeleid-page #main-content .legal-text ol li,
.cookiebeleid-page #main-content .legal-text ul li,
.cookiebeleid-page #main-content .legal-text ol li {
    margin-bottom: 10px;
    line-height: 1.7;
    font-size: 16px;
    color: var(--dark);
}

.algemene-voorwaarden-page #main-content .legal-text ul,
.privacybeleid-page #main-content .legal-text ul,
.cookiebeleid-page #main-content .legal-text ul {
    list-style-type: disc;
}
.algemene-voorwaarden-page #main-content .legal-text ol {
    list-style-type: decimal;
}
.privacybeleid-page #main-content .legal-text ul {
    list-style-type: disc;
}
.cookiebeleid-page #main-content .legal-text ul {
    list-style-type: disc;
}


.algemene-voorwaarden-page #main-content .legal-text strong,
.privacybeleid-page #main-content .legal-text strong,
.cookiebeleid-page #main-content .legal-text strong {
    font-weight: 600;
    color: var(--primary);
}

.algemene-voorwaarden-page #main-content .legal-text .last-updated,
.privacybeleid-page #main-content .legal-text .last-updated,
.cookiebeleid-page #main-content .legal-text .last-updated {
    font-size: 14px;
    color: var(--grey);
    margin-bottom: 25px;
    text-align: right;
}

/* Verwijder de oude, minder specifieke regels indien ze nog bestaan */
/* Bijvoorbeeld, regels die er zo uitzagen: */
/* .algemene-voorwaarden-page h2 { ... } */
/* .cookiebeleid-page p { ... } */
/* Deze zouden nu overbodig moeten zijn of conflicteren. */


/* Contact formulier message styling */
.form-message {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px; /* Consistent met .klachtenprocedure-page .form-message */
    font-size: 16px; /* Consistent */
    text-align: center; /* Consistent */
}

/* Consistent success/error messages like on klachtenprocedure page */
.form-message.success {
    background-color: var(--info-light); /* Was --success-light, but info seems more appropriate for general messages */
    color: var(--info); /* Darker text for info */
    border: 1px solid var(--info); /* Border for definition */
    /* border-left was 4px, making it 1px all around for consistency or removing if not standard */
}

.form-message.error {
    background-color: var(--warning-light);
    color: #856404; /* Explicit dark yellow from var(--warning) context */
    border: 1px solid var(--warning); /* Border for definition */
    /* border-left was 4px, making it 1px all around or removing */
}

/* Styling for checkbox alignment in contact form, was misplaced inside .form-message */
.contact-page .form-group input[type="checkbox"] {
    width: auto; /* Zorg dat checkbox niet 100% breed is */
    margin-right: 5px;
    vertical-align: middle;
}

/* Styling voor Juridische Pagina's (Algemene Voorwaarden, Privacy, Cookies) */
/* Ensure this is the primary, clean block for these pages. */
/* Any previous, less specific, or duplicated rules for these should have been removed or be reviewed. */

.algemene-voorwaarden-page #main-content .legal-text .container,
.privacybeleid-page #main-content .legal-text .container,
.cookiebeleid-page #main-content .legal-text .container {
    max-width: 900px;
    padding-top: 40px;
    padding-bottom: 60px;
}

.algemene-voorwaarden-page #main-content .legal-text h2,
.privacybeleid-page #main-content .legal-text h2,
.cookiebeleid-page #main-content .legal-text h2 {
    font-size: 24px; /* Reduced from 28px for less aggressive headings */
    margin-top: 30px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--primary);
}

.algemene-voorwaarden-page #main-content .legal-text h2:first-of-type,
.privacybeleid-page #main-content .legal-text h2:first-of-type,
.cookiebeleid-page #main-content .legal-text h2:first-of-type {
    margin-top: 0;
    border-top: none; /* Ensure no double border if there was a top border from somewhere else */
}

.algemene-voorwaarden-page #main-content .legal-text h3,
.privacybeleid-page #main-content .legal-text h3,
.cookiebeleid-page #main-content .legal-text h3 {
    font-size: 20px; /* Reduced from 22px */
    margin-top: 25px;
    margin-bottom: 10px;
    color: var(--primary);
}

.algemene-voorwaarden-page #main-content .legal-text p,
.privacybeleid-page #main-content .legal-text p,
.cookiebeleid-page #main-content .legal-text p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--dark);
    margin-bottom: 15px; /* Reduced from 20px for tighter text */
}

.algemene-voorwaarden-page #main-content .legal-text ul,
.algemene-voorwaarden-page #main-content .legal-text ol,
.privacybeleid-page #main-content .legal-text ul,
.privacybeleid-page #main-content .legal-text ol,
.cookiebeleid-page #main-content .legal-text ul,
.cookiebeleid-page #main-content .legal-text ol {
    margin-left: 20px; /* Consistent indent for lists */
    margin-bottom: 15px;
    padding-left: 15px; 
}

.algemene-voorwaarden-page #main-content .legal-text ul li,
.algemene-voorwaarden-page #main-content .legal-text ol li,
.privacybeleid-page #main-content .legal-text ul li,
.privacybeleid-page #main-content .legal-text ol li,
.cookiebeleid-page #main-content .legal-text ul li,
.cookiebeleid-page #main-content .legal-text ol li {
    margin-bottom: 10px;
    line-height: 1.7;
    font-size: 16px;
    color: var(--dark);
}

/* Ensure correct list styles */
.algemene-voorwaarden-page #main-content .legal-text ul,
.privacybeleid-page #main-content .legal-text ul,
.cookiebeleid-page #main-content .legal-text ul {
    list-style-type: disc;
}
.algemene-voorwaarden-page #main-content .legal-text ol,
.privacybeleid-page #main-content .legal-text ol,
.cookiebeleid-page #main-content .legal-text ol {
    list-style-type: decimal;
}

.algemene-voorwaarden-page #main-content .legal-text strong,
.privacybeleid-page #main-content .legal-text strong,
.cookiebeleid-page #main-content .legal-text strong {
    font-weight: 600;
    color: var(--primary);
}

.algemene-voorwaarden-page #main-content .legal-text .last-updated,
.privacybeleid-page #main-content .legal-text .last-updated,
.cookiebeleid-page #main-content .legal-text .last-updated {
    font-size: 14px;
    color: var(--grey);
    margin-bottom: 25px;
    text-align: left; /* Changed from right to left for consistency */
    border-bottom: 1px solid var(--border-color); /* Added border like other examples */
    padding-bottom: 15px; /* Added padding like other examples */
}

/* Remove any duplicated .algemene-voorwaarden-page etc. styling blocks that might exist below this point */
/* Ensure there are no remnants of old, over-generalized rules like '.algemene-voorwaarden-page p' without #main-content .legal-text */

/* Responsive aanpassingen specifiek voor Over Ons (indien nodig en niet al gedekt) */
@media (max-width: 767px) {
    .over-ons-page .hero-overons h1 {
        font-size: 32px;
    }
    .over-ons-page .hero-overons p {
        font-size: 16px;
    }

    /* Reduce top padding for the first content section on mobile */
    .over-ons-page .content-section:first-of-type {
        padding-top: 40px; /* Was 80px, reduce for mobile */
        padding-bottom: 60px; /* Keep bottom padding or adjust as needed */
    }
    /* Subsequent content sections can retain their original padding or be adjusted if needed */
    .over-ons-page .content-section {
        padding-top: 60px; /* Adjust default for mobile if 80px is too much generally */
        padding-bottom: 60px;
    }
     /* Ensure first-of-type is still more specific if needed */
    .over-ons-page .content-section:first-of-type {
        padding-top: 40px; 
    }


    .over-ons-page .company-info-card {
        padding: 20px;
    }
    .over-ons-page .info-item { /* Target info-item under over-ons-page specifically */
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 10px; /* Reduced from 15px to decrease space between items */
    }
    .over-ons-page .info-item strong { /* Target strong under over-ons-page specifically */
        margin-bottom: 3px; /* Slightly reduce from 5px if needed, or keep at 5px */
        flex-basis: auto;
    }
    .over-ons-page .info-item span { /* Target span under over-ons-page specifically */
        line-height: 1.5; /* Adjust line-height if text within span is too tall */
    }

    .over-ons-page .mission-vision-section {
        grid-template-columns: 1fr;
    }
}

/* Contact prompt / CTA aan einde pagina */
.contact-prompt {
    background-color: var(--secondary);
    color: white;
    padding: 50px 0;
    text-align: center;
}
.contact-prompt h2 {
    font-size: 28px;
    margin-bottom: 15px;
    font-weight: 600;
}
.contact-prompt p {
    font-size: 17px;
    margin-bottom: 25px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}
.contact-prompt .btn-primary-outline {
    background-color: white;
    color: var(--secondary);
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
    border: 2px solid white; /* Zorg dat de rand initieel overeenkomt */
}
.contact-prompt .btn-primary-outline:hover {
    background-color: transparent; /* Maak achtergrond transparant */
    color: white; /* Tekstkleur wit */
    border-color: white; /* Randkleur wit */
}

.affiliate-page .faq-section {
    margin-bottom: 60px; /* Extra ruimte onder FAQ voor CTA op affiliate pagina */
}

.affiliate-page .cta-section {
    padding-top: 80px;
    padding-bottom: 40px; /* Reduced bottom padding */
}

/* Responsive aanpassingen specifiek voor Affiliate pagina CTA sectie */
@media (max-width: 768px) {
    .affiliate-page .cta-section {
        padding-top: 60px;
        padding-bottom: 30px; /* Reduced bottom padding for mobile */
    }
}

/* Overschrijf max-width en margin voor de fullwidth CTA op handsfree pagina */
.handsfree-page .cta-section-fullwidth-pink {
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* --- OVERRIDE: Zorg dat fullwidth roze CTA altijd echt full width is, ongeacht pagina --- */
.cta-section-fullwidth-pink {
    max-width: 100% !important;
    margin: 0 !important;
    border-top: none !important;
    padding-top: 0 !important;
}

/* --- START: UNIVERSELE FULLWIDTH ROZE CTA STYLING --- */
.cta-section-fullwidth-pink {
    background: var(--accent-pink, #f72585);
    color: #fff; /* Default text color for the section */
    width: 100%;
    padding: 80px 0;
    box-shadow: 0 8px 32px rgba(247, 37, 133, 0.08);
    text-align: center;
    overflow: hidden; /* Prevent potential overflow issues */
}

.cta-section-fullwidth-pink .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px; /* Horizontal padding for content */
}

.cta-section-fullwidth-pink h2 {
    color: #fff;
    font-size: 36px;
    margin-bottom: 20px;
    font-weight: 700;
}

.cta-section-fullwidth-pink p {
    color: rgba(255,255,255,0.9);
    font-size: 18px;
    margin: 0 auto 30px;
    max-width: 700px;
}

/* --- CTA Knoppen Algemeen Binnen Roze Sectie --- */
.cta-section-fullwidth-pink .cta-button {
    display: inline-block;
    padding: 14px 30px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    border: 2px solid transparent; /* Basis voor alle knoppen */
    margin: 0 5px 10px 5px; /* Spatiëring als knoppen wrappen */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.2s;
    cursor: pointer;
}

.cta-section-fullwidth-pink .cta-button:hover {
    transform: translateY(-2px);
}

/* Standaard knop (Wit met roze tekst) - dit is .cta-button zonder extra klasse */
.cta-section-fullwidth-pink .cta-button {
    background-color: #fff;
    color: var(--accent-pink, #f72585);
    border-color: #fff;
}
.cta-section-fullwidth-pink .cta-button:hover {
    background-color: var(--light-grey);
    color: var(--accent-pink, #f72585);
    border-color: var(--light-grey);
}

/* Roze knop (Roze met witte tekst) - klasse: .cta-button.pink */
.cta-section-fullwidth-pink .cta-button.pink {
    background-color: var(--accent-pink, #f72585);
    color: #fff;
    border-color: #fff;
}
.cta-section-fullwidth-pink .cta-button.pink:hover {
    background-color: #fff;
    color: var(--accent-pink, #f72585);
    border-color: var(--accent-pink, #f72585);
}

/* Secondary knop (Transparant met witte tekst/rand) - klasse: .cta-button.secondary */
.cta-section-fullwidth-pink .cta-button.secondary {
    background-color: transparent;
    color: #fff;
    border-color: #fff;
}
.cta-section-fullwidth-pink .cta-button.secondary:hover {
    background-color: #fff;
    color: var(--accent-pink, #f72585);
    border-color: #fff;
}

/* --- Responsive CTA --- */
@media (max-width: 768px) {
    .cta-section-fullwidth-pink {
        padding: 60px 0;
    }
    .cta-section-fullwidth-pink h2 {
        font-size: 28px;
    }
    .cta-section-fullwidth-pink p {
        font-size: 16px;
        margin-bottom: 25px;
    }
    .cta-section-fullwidth-pink .cta-button {
        display: block; /* Knoppen onder elkaar */
        width: 100%;
        max-width: 320px;
        margin: 0 auto 15px auto; /* Centreren en spatiëring */
    }
    .cta-section-fullwidth-pink .cta-button:last-child {
        margin-bottom: 0;
    }
}
/* --- EINDE: UNIVERSELE FULLWIDTH ROZE CTA STYLING --- */

/*
INSTRUCTION: THE PREVIOUS ATTEMPTS TO CLEAN UP OLD CTA CSS FAILED.
THIS TIME, WE WILL ADD A NEW, HIGHLY SPECIFIC AND IMPORTANT-FLAGGED CSS BLOCK
TO OVERRIDE ALL EXISTING CONFLICTING STYLES FOR CTAs.

PLACE THIS ENTIRE BLOCK AT THE VERY END OF THE `assets/css/style.css` FILE.
THIS IS INTENDED TO OVERPOWER ANY PREVIOUSLY DEFINED CTA STYLES.
*/

/* --- START: UNIVERSELE FULLWIDTH ROZE CTA STYLING (V4 - IMPORTANT OVERRIDES) --- */
.cta-section-fullwidth-pink {
    background: var(--accent-pink, #f72585) !important;
    color: #fff !important; /* Default text color for the section */
    width: 100% !important;
    padding: 80px 0 !important;
    box-shadow: 0 8px 32px rgba(247, 37, 133, 0.08) !important;
    text-align: center !important;
    overflow: hidden !important; /* Prevent potential overflow issues */
    border: none !important; /* Ensure no old borders are showing */
    margin: 0 !important; /* Reset any old margins */
    max-width: 100vw !important; /* Ensure full viewport width */
}

.cta-section-fullwidth-pink .container {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 20px !important; /* Horizontal padding for content */
}

.cta-section-fullwidth-pink h2 {
    color: #fff !important;
    font-size: 36px !important;
    margin-bottom: 20px !important;
    font-weight: 700 !important;
}

.cta-section-fullwidth-pink p {
    color: rgba(255,255,255,0.9) !important;
    font-size: 18px !important;
    margin: 0 auto 30px !important;
    max-width: 700px !important;
}

/* --- CTA Knoppen Algemeen Binnen Roze Sectie --- */
.cta-section-fullwidth-pink .cta-button {
    display: inline-block !important;
    padding: 14px 30px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    border: 2px solid transparent !important; /* Basis voor alle knoppen */
    margin: 0 5px 10px 5px !important; /* Spatiëring als knoppen wrappen */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.2s !important;
    cursor: pointer !important;
}

.cta-section-fullwidth-pink .cta-button:hover {
    transform: translateY(-2px) !important;
}

/* Standaard knop (Wit met roze tekst) - dit is .cta-button zonder extra klasse */
.cta-section-fullwidth-pink .cta-button {
    background-color: #fff !important;
    color: var(--accent-pink, #f72585) !important;
    border-color: #fff !important;
}
.cta-section-fullwidth-pink .cta-button:hover {
    background-color: var(--light-grey) !important;
    color: var(--accent-pink, #f72585) !important;
    border-color: var(--light-grey) !important;
}

/* Roze knop (Roze met witte tekst) - klasse: .cta-button.pink */
.cta-section-fullwidth-pink .cta-button.pink {
    background-color: var(--accent-pink, #f72585) !important;
    color: #fff !important;
    border-color: #fff !important;
}
.cta-section-fullwidth-pink .cta-button.pink:hover {
    background-color: #fff !important;
    color: var(--accent-pink, #f72585) !important;
    border-color: var(--accent-pink, #f72585) !important;
}

/* Secondary knop (Transparant met witte tekst/rand) - klasse: .cta-button.secondary */
.cta-section-fullwidth-pink .cta-button.secondary {
    background-color: transparent !important;
    color: #fff !important;
    border-color: #fff !important;
}
.cta-section-fullwidth-pink .cta-button.secondary:hover {
    background-color: #fff !important;
    color: var(--accent-pink, #f72585) !important;
    border-color: #fff !important;
}

/* --- Responsive CTA --- */
@media (max-width: 768px) {
    .cta-section-fullwidth-pink {
        padding: 60px 0 !important;
    }
    .cta-section-fullwidth-pink h2 {
        font-size: 28px !important;
    }
    .cta-section-fullwidth-pink p {
        font-size: 16px !important;
        margin-bottom: 25px !important;
    }
    .cta-section-fullwidth-pink .cta-button {
        display: block !important; /* Knoppen onder elkaar */
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto 15px auto !important; /* Centreren en spatiëring */
    }
    .cta-section-fullwidth-pink .cta-button:last-child {
        margin-bottom: 0 !important;
    }
}
/* --- EINDE: UNIVERSELE FULLWIDTH ROZE CTA STYLING (V4 - IMPORTANT OVERRIDES) --- */