/* ===================== RESET & BASIS ===================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Verberg alle lege externe widget-knoppen voor SEO crawlers */
.pj-pricebuddy-ico, 
.pj-fb-ico, 
#pj-bar-form-cancel-link, 
#pj-bar-hide-btn, 
#pj-alert-hide-btn {
    display: none !important;
}

/* Geef de knoppen die wel zichtbaar moeten zijn (zoals de groene/rode/grijze btns) 
   toch een onzichtbare tekst voor screenreaders */
.pj-btn::after {
    content: "Action";
    font-size: 0;
    speak: none;
}



body, html {
    height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
    color: #fff;
	background-color: transparent;	
}

@media (max-width: 768px) {
    /* De hoofdtitel op mobiel */
    .section h1.section-panel {
        display: block !important;    /* Vult de breedte van de container */
        width: 100% !important;       /* Neemt de volledige breedte in */
        max-width: 400px;             /* Optioneel: zorgt dat het paneel niet té breed wordt op tablets */
        margin-left: auto;            /* Centreert het paneel */
        margin-right: auto;           /* Centreert het paneel */
        padding: 1.2rem 1rem !important; /* Comfortabele witruimte binnen het paneel */
        font-size: 1.3rem !important;  /* Tekstgrootte die altijd past */
        box-sizing: border-box;       /* Zorgt dat padding de breedte niet breekt */
    }
}

.section h1, 
.section h1.section-panel,
.contact-container-wrapper h1 { 
    color: #ffd700 !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5); /* Voor betere leesbaarheid op video */
}


/* ===================== VIDEO BACKGROUND ===================== */
.video-bg-layout {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Fullscreen video */
.fullscreen-video-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -2;
	background-color: #000000;
}

.fullscreen-video-wrap video {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Altijd scherm vullen, snijdt af waar nodig */
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* Semi-transparante overlay */
.video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Verhoog van 0.4 naar 0.6 voor meer contrast */
    z-index: -1;
}

/* ===================== HEADER ===================== */
.main-nav {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    z-index: 10;
}

.main-nav .logo img {
    height: 50px;
}

.nav-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-container ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}

.nav-container ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-container ul li a:hover {
    color: #ffd700;
}

/* Hamburger menu */
.hamburger {
    display: none;
    font-size: 2rem;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
}

#nav-list.show {
    display: block !important;
}

.lang-switch-fixed {
    display: flex;
    gap: 0.5rem;
}

/* ===================== MENU-ITEMS SCHEIDINGSTEKEN (DESKTOP) ===================== */

@media (min-width: 769px) {
    /* Het teken tussen de vlaggen en het menu */
    .lang-switch-fixed::after {
        content: " ";
        color: rgba(255, 255, 255, 0.5); /* Semi-transparant wit */
        margin-left: 1.2rem;
        margin-right: 1.2rem;
        font-weight: 300;
    }

    /* Het teken tussen de menu-links zelf */
    .nav-container ul li:not(:last-child)::after {
        content: "•"; /* Een bolletje staat vaak sjieker tussen tekst */
        color: rgba(255, 255, 255, 0.5); /* Semi-transparant wit */
        margin-left: 1.2rem;
        font-size: 0.8rem;
        pointer-events: none; /* Zorgt dat je niet per ongeluk op het bolletje klikt */
    }

    /* Zorg dat de lijst-items goed uitlijnen */
    .nav-container ul li {
        display: flex;
        align-items: center;
    }
}

/* Verberg de tekens op mobiel in het hamburger menu */
@media (max-width: 768px) {
    .nav-container ul li::after {
        display: none !important;
    }
}

/* Op mobiel verbergen we de scheiding om de layout strak te houden */
@media (max-width: 768px) {
    .lang-switch-fixed::after {
        display: none;
    }
}

/* ===================== MAIN CONTENT ===================== */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 6rem; /* ruimte voor header */
}

/* Algemene secties */
.section {
    max-width: 1100px;
    margin: 4rem auto;
    padding: 0 1rem;
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.7);
}

.section h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
}

.section p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Intro Hero */
.intro p.subtitle {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

/* Commitment cards */
.commitment-cards {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.commitment .card {
    background: rgba(0,0,0,0.4);
    padding: 1.5rem;
    border-radius: 10px;
    flex: 1 1 250px;
    min-width: 250px;
    max-width: 300px;
    text-align: left;
}

/* Concept & Experience side-by-side */
.concept-experience {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
    justify-content: center;
    text-align: left;
}

.concept-experience .concept,
.concept-experience .experience {
    flex: 1 1 400px;
    min-width: 300px;
    background: rgba(0,0,0,0.3);
    padding: 1.5rem;
    border-radius: 10px;
}

/* Values grid */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    list-style: none;
    padding: 0;
    text-align: left;
}

.values-grid li {
    background: rgba(0,0,0,0.35);
    padding: 1rem;
    border-radius: 8px;
}

/* Responsibility + CTA */
.responsibility p {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.cta-button {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: #ffd700;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 1rem;
    transition: background 0.3s;
}

.cta-button:hover {
    background: #e6c200;
}

/* --- FOOTER --- */
/* Basis footer styling (voor beide) */
.footer-desktop, .footer-mobile {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    padding: 1.5rem 2rem;
    margin-top: auto;
    color: #fff;
}

.footer-container {
    max-width: 100%;
    margin: 0 auto;
}

/* --- DESKTOP SPECIFIEK --- */
.footer-desktop {
    display: block; /* Zichtbaar op desktop */
}

.footer-desktop .footer-container {
    display: flex;
    justify-content: space-between; /* Links en Rechts uit elkaar */
    align-items: center;
}

.footer-left {
    text-align: left;
}

.footer-left p {
    margin: 0.2rem 0;
    font-size: 0.9rem;
}

.footer-desktop .socials_voetnoot {
    display: flex;
    gap: 1rem;
}

/* --- MOBILE SPECIFIEK --- */
.footer-mobile {
    display: none; /* Standaard verborgen */
    text-align: center;
    padding: 1.5rem 1rem;
}

.footer-mobile .socials_voetnoot {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    margin-top: 1rem;
}

.socialvoet {
    width: 30px;
    height: 30px;
}

/* --- RESPONSIVE SWITCH --- */
@media (max-width: 768px) {
    .footer-desktop {
        display: none !important; /* Verberg desktop op mobiel */
    }
    .footer-mobile {
        display: block !important; /* Toon mobiel op mobiel */
    }
}

/* --- LINKS RESET IN FOOTER --- */
.footer-desktop a, 
.footer-mobile a {
    color: #fff;             /* Altijd witte tekst */
    text-decoration: none;   /* Geen onderlijning (dus ook geen paars) */
    transition: color 0.3s ease;
}

.footer-desktop a:visited, 
.footer-mobile a:visited {
    color: #fff;             /* Voorkomt dat bezochte links paars worden */
}

.footer-desktop a:hover, 
.footer-mobile a:hover {
    color: #ffd700;          /* Wordt goud als je eroverheen gaat */
    text-decoration: none;   /* Houdt het strak zonder lijntjes */
}
/* ===================== RESPONSIVE ===================== */
@media (max-width: 768px) {
    /* Hamburger menu tonen */
    .nav-container ul {
        display: none;
        flex-direction: column;
        background: rgba(0, 0, 0, 0.95); /* Donkere, solide achtergrond */
        backdrop-filter: blur(10px);
        position: absolute;
        top: 100%;
        right: 0;
        width: 100vw;                 /* Volledige breedte van het scherm */
        padding: 1.5rem 0;            /* Ruimte boven en onder */
        border-radius: 0;             /* Geen afgeronde hoeken voor een strakke balk */
        border-bottom: 2px solid #ffd700; /* PDA Goud accent onderaan */
    }

    /* Maak de klikbare items groot en duidelijk */
    .nav-container ul li {
        width: 100%;
        text-align: center;
    }

    .nav-container ul li a {
        display: block;
        padding: 1.2rem;              /* Veel ruimte om makkelijk te klikken */
        font-size: 1.3rem;            /* Grotere tekst */
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: 1px;
    }

    .hamburger {
        display: block;
        font-size: 2.2rem;            /* Iets groter hamburger icoon */
        padding: 0.5rem;
    }

    /* Secties aanpassen voor mobiel */
    .section h2 {
        font-size: 1.5rem;
    }
    .section p, .values-grid li, .commitment .card, .concept-experience .concept, .concept-experience .experience {
        font-size: 1rem;
    }
    .concept-experience {
        flex-direction: column;
        text-align: center;
    }
    .concept-experience .concept,
    .concept-experience .experience {
        text-align: left;
    }


}

/* ===================== FLEXBOX & CARDS MOBIEL ===================== */
@media (max-width: 768px) {

    /* Commitment cards: stapel onder elkaar */
    .commitment-cards {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .commitment .card {
        flex: 1 1 auto;
        min-width: auto;
        max-width: 90%;
        text-align: center;
    }

    /* Concept & Experience: stapel verticaal */
    .concept-experience {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    .concept-experience .concept,
    .concept-experience .experience {
        flex: 1 1 auto;
        min-width: auto;
        max-width: 90%;
        text-align: center;
    }

    /* Values grid: 1 kolom */
    .values-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Algemeen padding/margins */
    main {
        padding-top: 5rem; /* iets minder voor mobiel */
    }

    .section {
        margin: 2rem auto;
        padding: 0 1rem;
    }

    /* CTA knop centreren */
    .cta-button {
        width: 80%;
        padding: 1rem;
    }
}

/* ===================== INDEX PAGE LAYOUT ===================== */

/* Hero */
.home-hero {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.home-hero h1 {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.home-hero .subtitle {
    font-size: 1.4rem;
    opacity: 0.9;
    max-width: 700px;
}

/* Section background panels */
.section-panel {
    background: rgba(0,0,0,0.35);
    border-radius: 16px;
    padding: 3rem 2rem;
    backdrop-filter: blur(8px);
}

/* Commitment */
.commitment-cards {
    margin-top: 2rem;
}

/* Split section */
.split-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

/* Values */
.values-grid li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.values-grid li::before {
    color: #ffd700;
    font-weight: bold;
}

/* CTA block */
.cta-block {
    background: linear-gradient(
        to right,
        rgba(255,215,0,0.15),
        rgba(255,215,0,0.05)
    );
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
}

/* ===================== DESKTOP REFINEMENT ===================== */

@media (min-width: 1024px) {

    .section {
        margin: 5rem auto;
    }

    .home-hero h1 {
        font-size: 3.5rem;
    }

    .commitment-cards {
        gap: 2.5rem;
    }

    .commitment .card {
        padding: 2rem;
    }
}

/* ===================== INDEX MOBILE ===================== */
@media (max-width: 768px) {

    /* 1. Fix voor de Hero sectie */
    .home-hero {
        width: 100% !important;
        max-width: 100vw;      /* Voorkomt horizontaal scrollen */
        padding: 4rem 1rem;    /* Iets meer ademruimte boven/onder, minder opzij */
        box-sizing: border-box;
        overflow: hidden;      /* Zorgt dat tekst nooit buiten de container duwt */
    }

    .home-hero h1 {
        font-size: 1.8rem !important; /* Iets kleiner zodat lange woorden niet uitbreken */
        word-wrap: break-word;
        width: 100%;
    }

    /* 2. Fix voor de CTA / Responsibility blok */
    .cta-block.responsibility {
        width: 100% !important;
        max-width: 100% !important;
        margin: 2rem 0 !important; /* Haalt de marges aan de zijkant weg op mobiel */
        padding: 2rem 1rem !important; /* Compactere padding */
        border-radius: 0;          /* Staat strakker op mobiel als het schermvullend is */
        box-sizing: border-box;
    }

    .cta-block h2 {
        font-size: 1.5rem !important;
    }

    /* Extra check voor alle section-panels op mobiel */
    .section-panel {
        width: 100% !important;
        padding: 2rem 1rem !important;
        box-sizing: border-box;
        border-radius: 0; /* Optioneel: verwijdert ronde hoeken op mobiel voor meer ruimte */
    }
}

/* =============================================================================
   PAGE: WHY CHOOSE US - VOLLEDIGE FIX
   ============================================================================= */

/* 1. Split Sectie (Stats links, Tekst rechts) */
.split-section {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 3rem;
    text-align: left;
}

/* 2. De Troeven Grid (Desktop: 3 kolommen) */
.troeven-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 2rem;
    margin-top: 2rem;
}

.troef-card {
    background: rgba(0, 0, 0, 0.3);
    padding: 2.5rem 2rem;
    border-radius: 12px;
    border-top: 3px solid rgba(255, 215, 0, 0.2);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: left;
}

/* TITEL STYLING - NU GEGARANDEERD GEEL OP ELK SCHERM */
.troef-card strong {
    color: #ffd700 !important;
    display: block;
    margin-bottom: 1rem;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: bold;
    min-height: 3.5rem; /* Zorgt voor uitlijning op desktop */
}

.troef-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
    opacity: 0.9;
    color: #ffffff;
}

.troef-card:hover {
    background: rgba(255, 215, 0, 0.08);
    border-top: 3px solid #ffd700;
    transform: translateY(-8px);
}

/* ===================== RESPONSIVE UPDATES ===================== */

/* Tablet (2 kolommen) */
@media (max-width: 1100px) {
    .troeven-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobiel (1 kolom) */
@media (max-width: 768px) {
    /* Overschrijf de te brede paddings van de section-panels op why.php */
    .approach-left-container .section-panel,
    .approach-right.section-panel,
    .section .section-panel {
        padding: 1.5rem 1rem !important; /* Forceert een smallere padding op mobiel */
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Fix voor de tabel met iconen (stats) */
    .stats-table img {
        width: 40px; /* Iets kleinere iconen op mobiel */
    }

    .stats-table strong {
        font-size: 18px !important;
    }

    /* Zorg dat de split-section niet meer naast elkaar probeert te staan */
    .split-section {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    /* Fix voor de markten lijst (2 kolommen naar 1 op mobiel) */
    .values-grid {
        grid-template-columns: 1fr !important;
    }

    /* De troeven kaarten in why.php */
    .troeven-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* ===================== INDEX SPECIFIEK ===================== */

/* Titels in het Goud */
.gold-title {
    color: #ffd700 !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
}

/* Hero aanpassing */
.home-hero h1 {
    color: #ffd700;
    font-size: 3.5rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.home-hero .subtitle {
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 2rem;
}

/* Commitment Cards op Index */
.commitment-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.commitment .card {
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid #ffd700; /* Gouden accent aan de zijkant */
    padding: 1.5rem;
    border-radius: 8px;
    text-align: left;
    color: #fff;
    line-height: 1.6;
}

/* Split section op Index */
.split-section .concept, 
.split-section .experience {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Mobiele aanpassingen voor Index */
@media (max-width: 768px) {
    .commitment-cards {
        grid-template-columns: 1fr;
    }
    
    .home-hero h1 {
        font-size: 2.2rem;
    }
    
    .gold-title {
        font-size: 1.4rem;
    }
}

/* ===================== REFERENCES PAGE ===================== */

.ref-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.ref-card {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid rgba(255, 215, 0, 0.1);
    transition: transform 0.3s ease, border 0.3s ease;
}

.ref-card:hover {
    transform: translateY(-10px);
    border-color: #ffd700;
}

.ref-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-bottom: 3px solid #ffd700;
    
}

.ref-content {
    padding: 1.5rem;
    text-align: left;
}

.ref-content strong {
    color: #ffd700; /* PDA GOUD */
    display: block;
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ref-content p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #fff;
    opacity: 0.85;
}

/* ===================== REFERENCES VIDEO DESKTOP ALIGNMENT ===================== */

.video-grid {
    display: grid;
    /* Op desktop dwingen we 3 kolommen af als er ruimte is */
    grid-template-columns: repeat(3, 1fr); 
    gap: 2rem;
    margin-top: 2rem;
}

.ref-video {
    width: 100%;
    height: 250px; /* Zelfde hoogte als de foto-sectie */
    object-fit: cover;
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 0; /* Geen afgeronde hoeken */
    background-color: #000;
    transition: all 0.3s ease;
}

.ref-video:hover {
    border-color: #ffd700;
    transform: translateY(-5px);
}

.video-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centreert de video en titel */
}

.video-caption {
    display: block;
    margin-top: 1rem;
    color: #ffd700; /* PDA Geel */
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: 1px;
    text-align: center;
}

/* Zorg dat de video binnen de video-item div de volle breedte pakt */
.ref-video {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 0;
    transition: all 0.3s ease;
}

/* ===================== RESPONSIVE VIDEO ===================== */

/* Tablet: 2 naast elkaar */
@media (max-width: 1100px) {
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobiel: 1 per rij */
@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: 1fr;
    }
    
    .ref-video {
        height: 220px;
    }
}

/* ===================== CONTACT SECTION ===================== */

.contact-container {
    display: flex;
    justify-content: space-around;
    gap: 3rem;
    text-align: left;
    margin-top: 2rem;
}

.contact-info, .contact-hours {
    flex: 1;
}

.contact-info h3, .contact-hours h3 {
    color: #ffd700;
    text-transform: uppercase;
    font-size: 1.1rem;
    margin-bottom: 1.2rem;
    letter-spacing: 1px;
}

.contact-info p, .contact-hours p {
    margin-bottom: 0.8rem;
    line-height: 1.6;
    opacity: 0.9;
}

.contact-info a {
    color: #ffd700;
    text-decoration: none;
    font-weight: bold;
}

/* ===================== RESPONSIVE CONTACT ===================== */

@media (max-width: 768px) {
    .contact-container {
        flex-direction: column; /* Stapelen op mobiel */
        gap: 2.5rem;
        text-align: center; /* Alles centreren voor betere look op mobiel */
    }

    .contact-info h3, .contact-hours h3 {
        border-bottom: 1px solid rgba(255, 215, 0, 0.3);
        padding-bottom: 0.5rem;
        display: inline-block;
    }
}

/* expertise */
/* Styling voor de klikbare lijst items in het zijpaneel */
.values-grid li {
    padding: 0 !important; /* Reset padding zodat de link het hele vlak vult */
    overflow: hidden;
}

.values-grid li a {
    display: flex;
    align-items: center;
    padding: 1rem; /* Verplaats de padding naar de link voor een groter klikvlak */
    width: 100%;
    height: 100%;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.values-grid li a::before {
    content: "✔";
    color: #ffd700;
    font-weight: bold;
    margin-right: 0.7rem;
}

/* Hover effect: tekst wordt goud en achtergrond iets lichter */
.values-grid li:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: #ffd700;
}

.values-grid li a:hover {
    color: #ffd700;
}

/* Voorkom paarse bezochte links */
.values-grid li a:visited {
    color: #fff;
}

/* festivals */

.d-b-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem;
    border-radius: 16px;
    text-align: center;
}

/* Zorgt dat de split-section op mobiel weer netjes stapelt */
@media (max-width: 768px) {
    .split-section {
        flex-direction: column;
        gap: 1.5rem;
    }
}

/* ===================== SERVICES LIST FIX ===================== */
.services-panel {
    padding: 3rem 2rem !important;
}

.services-list {
    list-style: none;
    padding: 0;
    margin: 2rem auto 0;
    max-width: 800px; /* Houdt de tekst leesbaar en gecentreerd */
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.services-list li {
    background: rgba(255, 255, 255, 0.05);
    padding: 1.2rem 1.5rem;
    border-radius: 10px;
    border-left: 3px solid #ffd700; /* Gouden accentlijn aan de zijkant */
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.05rem;
    line-height: 1.4;
    transition: transform 0.3s ease;
}

.services-list li::before {
    content: "✔";
    color: #ffd700;
    font-weight: bold;
    font-size: 1.2rem;
    flex-shrink: 0; /* Zorgt dat het vinkje niet wordt platgedrukt bij lange tekst */
}

.services-list li:hover {
    transform: translateX(10px); /* Subtiele beweging bij hover */
    background: rgba(255, 215, 0, 0.1);
}

/* Mobiele aanpassing */
@media (max-width: 768px) {
    .services-list li {
        font-size: 0.95rem;
        padding: 1rem;
    }
}

/* ===================== MOBILE VINKJES FIX ===================== */
@media (max-width: 768px) {
    /* Voor de algemene values-grid (in de zijpanelen) */
    .values-grid li a::before, 
    .values-grid li::before {
        color: #ffd700 !important;
        opacity: 1 !important;
    }

    /* Voor de specifieke services-list op de festival pagina */
    .services-list li::before {
        color: #ffd700 !important;
    }
    
    /* Zorg dat de tekst ernaast goed leesbaar blijft */
    .services-list li {
        border-left-color: #ffd700;
        background: rgba(255, 215, 0, 0.08); /* Iets meer diepte op mobiel */
    }
}

/* Cookie*/

#rejectCookies {
    background: rgba(255, 255, 255, 0.1); 
    border: 1px solid #fff;
    color: #fff;
    text-shadow: 1px 1px 2px #000; /* Voeg een schaduw toe voor contrast op de video */
}

.cookie-popup {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    max-width: 500px;
    background: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid #ffd700;
    padding: 2rem;
    z-index: 9999;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.cookie-content h2 {
    color: #ffd700;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.cookie-content p {
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.cookie-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Mobiel: knoppen onder elkaar */
@media (max-width: 480px) {
    .cookie-buttons {
        flex-direction: column;
    }
}

/* Styling voor de link in de cookie popup */
.cookie-content p a {
    color: #ffd700; /* Goudgeel */
    text-decoration: underline;
    font-weight: bold;
    transition: color 0.3s ease;
}

.cookie-content p a:hover {
    color: #fff; /* Wordt wit bij hover voor betere interactie */
    text-decoration: none;
}

/* Zorg dat bezochte links ook goud blijven */
.cookie-content p a:visited {
    color: #ffd700;
}

/* De troebele laag */
.cookie-blur-active #blur-wrapper {
    filter: blur(8px);
    pointer-events: none;
    transition: filter 0.5s ease;
}

/* De popup staat buiten de wrapper, dus deze regel is nu extra veiligheid */
#cookiePopup {
    z-index: 100000;
    filter: none !important;
}