/* Retro Kleuren */
body {
    background-color: #fcf9f2;
    color: #f8f9fa;
    font-family: 'Arial', sans-serif;
}

/* ✅ Standaard transparante navbar */
.navbar {
    background-color: rgba(211, 198, 21, 0); /* Volledig transparant */
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    padding: 15px 20px; /* Ruimte voor inhoud */
}

/* ✅ Transparante navbar bovenaan */
.navbar-transparent {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
}

/* ✅ Navbar wordt zwart bij scrollen */
.navbar.scrolled {
    background-color: #000 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 8px 18px; /* Verkleinde padding voor de gescrollde staat */
}

/* ✅ Navbar wordt zwart bij openen op mobiel */
.navbar-expanded {
    background-color: #000 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ✅ Mobiele navbar en scroll-fix */
.navbar.scrolled,
.navbar-expanded {
    background-color: #000 !important;
}

/* ✅ Logo styling */
.navbar-brand {
    margin-left: 15px;
    padding: 0;
}

.navbar-brand img {
    max-height: 50px;
    width: auto;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease;
}

.navbar-brand img:hover {
    transform: scale(1.1);
    opacity: 0.9;
}

/* ✅ Navbar toggler (voor mobiel) */
.navbar-toggler {
    border-color: white;
    background-color: rgba(164, 250, 26, 0.199);
    padding: 8px;
    border-radius: 5px;
    transition: background-color 0.3s ease-in-out;
}

.navbar-toggler:hover {
    background-color: rgba(164, 250, 26, 0.226);
}

/* NIEUW: Streepjes van de navbar toggler smokey white maken */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28245, 245, 245, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; /* Smokey white (#F5F5F5) streepjes */
}

/* ✅ Navigatie link styling */
.navbar-nav .nav-link {
    color: white !important;
    font-weight: 600; /* Dikker lettertype */
    font-size: 1rem; /* Grotere tekst */
    transition: all 0.3s ease-in-out;
    padding: 12px 18px; /* Iets meer ruimte */
    position: relative; /* Voor de actieve indicator */
}

/* ✅ Extra ruimte tussen de navigatielinks */
.navbar-nav .nav-item {
    margin-right: 25px;
}

/* ✅ Hover effect navigatielinks */
.navbar-nav .nav-link:hover {
    color: #f1e07a !important; /* Gele kleur bij hover */
    text-shadow: 0px 0px 8px rgba(255, 204, 0, 0.7);
}

/* ✅ Verbeterde styling voor actieve navigatie-items */
.navbar-nav .nav-item.active .nav-link {
    color: #f1e07a !important; /* Zelfde gele kleur als hover voor consistentie */
    font-weight: 700; /* Extra vet voor actieve items */
    text-shadow: 0px 0px 10px rgba(255, 204, 0, 0.8); /* Iets sterkere glow */
}

/* ✅ Moderne actieve indicator met animatie */
.navbar-nav .nav-item .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: #f1e07a; /* Gele kleur voor indicator */
    transition: all 0.3s ease;
    transform: translateX(-50%);
    opacity: 0;
    border-radius: 3px; /* Afgeronde hoeken voor de indicator */
}

.navbar-nav .nav-item.active .nav-link::after {
    width: 70%; /* Niet de volledige breedte voor een subtiel effect */
    opacity: 1;
    box-shadow: 0px 0px 8px rgba(255, 204, 0, 0.6); /* Subtiele glow voor de indicator */
}

/* ✅ Speciale stijl voor de Offerte-knop wanneer actief */
/* AANGEPAST: Selector specifieker gemaakt (.nav-link.btn-offerte) voor betere prioriteit tekstkleur */
.navbar-nav .nav-item.active .nav-link.btn-offerte {
    background-color: #f1e07a; /* Consistent met de kleur */
    color: #000 !important; /* Zwarte tekst voor contrast, !important om andere regels te overrulen */
    border-color: #f1e07a;
    box-shadow: 0 0 15px rgba(241, 224, 122, 0.5); /* Glow effect */
    transform: translateY(-2px); /* Subtiel lift effect */
}

/* ✅ Hover effect voor de offerte knop */
/* AANGEPAST: Selector specifieker gemaakt (.nav-link.btn-offerte) voor consistentie */
.navbar-nav .nav-item .nav-link.btn-offerte:hover {
    background-color: rgba(241, 224, 122, 0.9);
    transform: translateY(-1px);
    color: #000 !important; /* Zorg dat tekst zwart blijft/wordt bij hover */
    border-color: #e0c റ; /* Optioneel: pas border kleur aan bij hover */
}
/* ✅ Social media iconen */
.social-icons a {
    color: white;
    margin: 0 10px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.social-icons {
    display: flex;
    align-items: center;
}

.social-icons a:hover {
    transform: scale(1.2);
    color: #f1e07a;
}

.google-review-navbar {
    height: 32px;
    width: auto;
    margin-left: 12px;
    vertical-align: middle;
    transition: transform 0.3s ease;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.google-review-navbar:hover {
    transform: scale(1.08);
}


.navbar-mobile-controls {
    display: flex;
    align-items: center;
}

/* Opvallende styling voor mobiele offerte knop */
.navbar-mobile-controls {
    display: flex;
    align-items: center;
}


/* Opvallende styling voor mobiele offerte knop - Nu gelijk aan .mobile-acties-btn */
.mobile-offerte-btn {
    background: linear-gradient(135deg, #ffd900bd, #FFA500);
    color: white;
    border: none; /* Verwijder de border */
    border-radius: 20px; /* Rondere hoeken */
    padding: 6px 12px; /* Kleinere padding */
    font-size: 0.85rem; /* Kleinere lettergrootte */
    font-weight: 500; /* Standaard font-weight */
    text-decoration: none;
    display: inline-flex; /* Gebruik flexbox voor uitlijning icoon en tekst */
    align-items: center;
    gap: 5px; /* Ruimte tussen icoon en tekst */
    transition: all 0.3s ease; /* Snellere en vloeiendere overgang */
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3); /* Oranje-getinte schaduw */
    white-space: nowrap; /* Behoud deze als je wilt dat de tekst niet over meerdere regels loopt */
    /* Verwijder text-transform en letter-spacing, tenzij je die specifiek wilt behouden */
    text-transform: none; /* Terug naar normale tekst, tenzij 'uppercase' gewenst is */
    letter-spacing: normal; /* Terug naar normale letterafstand */
}

.mobile-offerte-btn:hover,
.mobile-offerte-btn:focus {
    background: linear-gradient(135deg, #e55a2b, #e0851a); /* Donkerdere oranje gradient */
    color: white; /* Blijft wit */
    transform: translateY(-1px); /* Gelijk aan acties knop */
    box-shadow: 0 3px 12px rgba(255, 107, 53, 0.4); /* Intensere oranje-getinte schaduw */
}

/* Zorg ervoor dat het icoon ook goed uitlijnt in de .mobile-offerte-btn, mocht je een icoon gebruiken */
.mobile-offerte-btn i {
    margin-right: 5px; /* Voeg ruimte toe aan de rechterkant van het icoon */
}
/* Zorg ervoor dat de icoon-specifieke stijl ook van toepassing is op de mobiele offerte knop */
.mobile-offerte-btn i {
    /* Gebruik flexbox om zeker te zijn dat het icoon getoond wordt */
    display: inline-block; /* Zorgt ervoor dat het icoon zijn eigen box krijgt */
    margin-right: 5px; /* Voeg ruimte toe aan de rechterkant van het icoon */
    /* Zorg ervoor dat de kleur wit is, net zoals de tekst */
    color: inherit; /* Erft de kleur van de parent (.mobile-offerte-btn) */
    font-size: inherit; /* Erft de lettergrootte van de parent */
}

/* En voor de algemene .btn-offerte, zorg dat het icoon overal werkt */
.btn-offerte i {
    display: inline-block;
    margin-right: 5px;
    color: inherit;
    font-size: inherit;
}


@media (max-width: 1200px) and (min-width: 992px) {
    .highlight-heading {
      font-size: 2rem; /* Iets kleiner dan default 2.4rem */
    }
  
    .retro-list li {
      font-size: 16px; /* Iets kleiner dan 17px */
    }
  
    .section-title {
      font-size: 20px;
    }
  
    .navbar .nav-link {
      font-size: 15px;
    }
  }

/* Achtergrond en schaduw voor de uitgeklapte navigatie */
.navbar-collapse {
    background-color: rgba(0, 0, 0, 0.9); /* Donkere achtergrond met lichte transparantie */
    border-radius: 0 0 15px 15px; /* Afgeronde hoeken onderaan */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Subtiele schaduw */
    padding: 10px 0;
    margin-top: 10px; /* Ruimte tussen navbar en uitgeklapte menu */
}

/* Styling voor de navigatie-items in mobiele weergave */
@media (max-width: 991px) {
    /* Mooiere achtergrond en padding voor navigatie items */
    .navbar-nav .nav-item {
        margin: 5px 15px;
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    
    /* Link styling voor mobiel */
    .navbar-nav .nav-link {
        padding: 12px 20px;
        font-weight: 500;
        border-left: 3px solid transparent; /* Voorbereiden voor actieve indicator */
        transition: all 0.2s ease;
    }
    
    /* Actieve link styling voor mobiel */
    .navbar-nav .nav-item.active {
        background-color: rgba(241, 224, 122, 0.15); /* Subtiele gele achtergrond */
    }
    
    .navbar-nav .nav-item.active .nav-link {
        border-left: 3px solid #f1e07a; /* Gele lijn links als indicator */
        color: #f1e07a !important;
        text-shadow: 0 0 10px rgba(241, 224, 122, 0.4);
    }
    
    /* Vervang de actieve indicator lijn (onder) door een zij-indicator voor mobiel */
    .navbar-nav .nav-item .nav-link::after {
        display: none;
    }
    
    /* Hover effect op mobiel */
    .navbar-nav .nav-item:hover {
        background-color: rgba(255, 255, 255, 0.05);
        transform: translateX(5px); /* Subtiel schuif-effect bij hover */
    }
    
    /* Speciale styling voor de offerte-knop */
    .btn-offerte {
        /* Pas de styling aan om overeen te komen met .mobile-acties-btn */
        border-radius: 20px !important; /* Iets minder afgerond */
        padding: 6px 12px !important;   /* Kleinere padding */
        font-size: 0.85rem !important;  /* Kleinere lettergrootte */
        /* display: inline-flex; en align-items: center; en gap: 5px; zijn al hierboven gedefinieerd en blijven geldig */
        box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3) !important; /* Kleinere schaduw */
        margin-right: 0 !important; /* Verwijder eventuele rechtermarge op mobiel, tenzij gewenst */
    }
    
    .btn-offerte:hover {
        /* Pas de hover-styling aan voor mobiel */
        transform: translateY(-1px) !important; /* Minder ver omhoog */
        box-shadow: 0 3px 12px rgba(255, 107, 53, 0.4) !important; /* Minder intense schaduw */
    }
    
    /* Subtiele scheidingslijnen tussen menu-items */
    .navbar-nav .nav-item:not(:last-child) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    /* Social media iconen in mobiele navigatie */
    .social-icons {
        justify-content: center;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .social-icons a {
        margin: 0 15px;
        font-size: 1.2rem;
    }
}

/* Banner ---------------------------------------------------------------------------------------------------------------- */
.hero {
    position: relative;
   background-image: 
        /* Aangepaste horizontale gradient: minder zwart, snellere overgang */
        linear-gradient(to right, 
            rgba(0, 0, 0, 0.9) 10%,  /* Iets minder donker (0.9 ipv 0.95) */
            rgba(0, 0, 0, 0.6) 25%,  /* Begint eerder met vervagen (25% ipv 35%) */
            rgba(0, 0, 0, 0.3) 40%,  /* Nog lichter op 40% */
            rgba(0, 0, 0, 0.1) 60%,  /* Bijna transparant op 60% (ipv 85%) */
            rgba(0, 0, 0, 0) 80%     /* Volledig transparant op 80% (ipv 100%) */
        ),
        /* Aangepaste radiaal gradient voor het midden-onderaan */
        radial-gradient(
            ellipse at 50% 100%,
            rgba(0, 0, 0, 0.8) 15%,
            rgba(0, 0, 0, 0.5) 30%,
            rgba(0, 0, 0, 0.2) 40%,
            rgba(0, 0, 0, 0) 50%
        ),
        url('/media/navpicture.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    padding: 80px 50px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 55vh;
    /* Verwijder de clip-path eigenschap om de golfvormige lijn weg te halen */
}

/* Logo onder de banner positioneren met animatie */
.banner-bottom-logo {
    position: absolute;
    bottom: -200px; /* Startpositie blijft hetzelfde */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    max-width: 400px;
    height: auto;
    opacity: 0; /* Start onzichtbaar */
    animation: fadeUpLogo 1.5s ease forwards;
    animation-delay: 0.5s; /* Verschijnt na de lijnen */
}

/* Animatie voor het logo - beweegt omhoog en fade in */
@keyframes fadeUpLogo {
    0% {
        bottom: -250px; /* Start iets lager dan de uiteindelijke positie */
        opacity: 0;
    }
    100% {
        bottom: -200px; /* Eindpositie zoals oorspronkelijk */
        opacity: 1;
    }
}

/* ✅ Logo in de hero-sectie links uitlijnen */
.hero .navbar-brand {
    align-self: flex-start; /* Logo blijft links */
    margin-bottom: 20px; /* Ruimte tussen logo en tekst */
}

/* ✅ Titel volledig links met animatie */
.hero h1 {
    font-family: 'Lobster', cursive;
    color: #f1e07a; 
    font-size: 9rem;
    font-weight: 580;
    margin-bottom: 10px; /* Ruimte onder de titel */
    align-self: flex-start; /* Links uitgelijnd */
    opacity: 0; /* Start onzichtbaar */
    transform: translateX(-100px); /* Start links buiten positie */
    animation: slideInFromLeft 1.2s ease forwards;
    animation-delay: 0.4s; /* Verschijnt na de lijnen en logo begint te animeren */
}

/* ✅ Paragraaf volledig links met animatie */
.hero p {
    font-style: italic;
    font-size: 2rem;
    max-width: 600px;
    line-height: 1.5;
    margin-bottom: 20px;
    align-self: flex-start; /* Helemaal links */
    opacity: 0; /* Start onzichtbaar */
    transform: translateX(-100px); /* Start links buiten positie */
    animation: slideInFromLeft 1.2s ease forwards;
    animation-delay: 1s; /* Verschijnt na de titel */
}
/* Animatie voor tekst van links naar rechts */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ✅ Knop volledig links */
.btn-offerte {
    background: linear-gradient(135deg, #ffd900bd, #FFA500);
    color: white !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 10px rgba(255, 107, 53, 0.3) !important;
    margin-right: 10px !important; /* Optioneel: pas deze aan als je de spacing anders wilt */
}

.hero-logo {
    height: 90px; /* Pas dit aan naar wens */
    width: auto;
    object-fit: contain;
}

/* ✅ Hover-effect voor de knop */
.btn-offerte:hover {
    background: linear-gradient(135deg, #e55a2b, #e0851a) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4) !important;
}

/* Responsive Design voor GSM-formaat (max-width: 768px) */
@media (max-width: 768px) {
    .hero {
        padding: 40px 20px; /* Minder padding voor kleine schermen */
        min-height: 50vh; /* Iets hoger voor betere zichtbaarheid */
        /* Verwijder de clip-path eigenschap */
    }

    .hero h1 {
        font-size: 3rem; /* Kleinere titel voor mobiele apparaten */
    }

    .hero p {
        font-size: 1.2rem; /* Kleinere tekst voor mobiele apparaten */
        max-width: 100%; /* Volledige breedte gebruiken */
    }

    

    /* Achtergrondgradiënt aanpassen voor mobiele apparaten */
    .hero {
        background-image: linear-gradient(to right, 
            rgba(0, 0, 0, 0.9) 10%,  /* Donkerder aan de linkerkant */
            rgba(0, 0, 0, 0.6) 30%,   /* Minder gradatie */
            rgba(0, 0, 0, 0.3) 60%,   /* Sneller naar lichter */
            rgba(0, 0, 0, 0.1) 80%,   /* Bijna helder aan de rechterkant */
            rgba(0, 0, 0, 0) 100%     /* Helemaal transparant rechts */
        ), 
        url('/media/navpicture.jpg');
    }
    
    /* Pas de logo positie en animatie aan voor mobiele apparaten */
    .banner-bottom-logo {
        bottom: -115px;
        max-width: 290px; /* Vergroot van 80px naar 120px */
    }
    
    /* Aangepaste animatie voor mobiele apparaten */
    @keyframes fadeUpLogo {
        0% {
            bottom: -200px; /* Start lager */
            opacity: 0;
        }
        100% {
            bottom: -115px; /* Eindigt op de mobiele positie */
            opacity: 1;
        }
    }
}

/* Voor grote schermen (groter dan laptop) */
@media (min-width: 1440px) {
    .hero {
        min-height: 80vh;
        background-color: #000; /* Zwarte achtergrond om kleurbalken te voorkomen */
        background-size: cover; /* Toch cover gebruiken in plaats van contain */
        background-position: center 33%; /* Focussen op het midden-boven deel van de afbeelding */
        /* Verwijder de clip-path eigenschap */
    }
    
    /* Pas de logo positie aan voor grote schermen */
    .banner-bottom-logo {
        bottom: -205px;
        max-width: 550px; /* Vergroot van 150px naar 220px */
    }
}

/* Voor tablet-schermen (tussen 768px en 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .hero h1 {
        font-size: 5rem; /* Iets grotere titel voor tablets */
    }
    
    /* Pas de logo positie aan voor tablet */
    .banner-bottom-logo {
        bottom: -160px;
        max-width: 400px;
    }
    
    /* Specifieke animatie voor tablet-formaat */
    @keyframes fadeUpLogo {
        0% {
            bottom: -230px; /* Start lager */
            opacity: 0;
        }
        100% {
            bottom: -160px; /* Eindigt op de juiste tablet-positie */
            opacity: 1;
        }
    }
}








/* intro (checklist + tekst + bakwagen afbelding   ----------------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Bebas+Neue&family=Roboto:wght@400;700&family=DM+Serif+Display&family=Archivo+Narrow&display=swap');


.retro-button-container {
    margin-top: 2rem;
    text-align: center;
  }
  
  .retro-button-container a {
    font-family: 'Special Elite', cursive;
    display: inline-block;
    padding: 1.20rem 2rem;
    background-color: #000000c2;
    color: #ffeb3b;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Orbitron', sans-serif; /* retro-futuristisch */
    text-decoration: none;
    border: 2px solid #e6bc21;
    border-radius: 12px;
    box-shadow:
    0 0 3px #e6bc21aa,
    0 0 7px #e6bc21aa,
    0 0 50px #e6bc2155,
    0 0 20px #e6bb2188;
  transition: transform 0.2s, box-shadow 0.2s;
}

.retro-button-container a:hover {
  transform: scale(1.03);
  box-shadow:
    0 0 5px #e6bc21aa,
    0 0 10px #e6bc21aa,
    0 0 150px #e6bc2144,
    0 0 30px #e6bc2177;
}
  


.retro-content-flex {
    border: 4px solid #333;
    box-shadow: 40px 40px 0 #72962aa4;
    border-radius: 6px;
    padding: 70px;
  }


.custom-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative; /* Voor positionering van pseudo-elementen */
    padding: 0 100px; /* Ruimte voor langere lijnen */
    overflow: hidden; /* Voorkomt dat animaties buiten de header zichtbaar zijn */

  }
  
  .centered-image {
    width: 10cm; /* Basisbreedte */
    max-width: 90%; /* Zorgt dat het niet buiten kleine schermen valt */
    height: auto;
    /* Geen box-shadow */
    position: relative;
    z-index: 1; /* Zorgt dat de afbeelding boven de lijnen ligt */
  }
  
/* Horizontale retro-lijn links */
.custom-header::before {
    content: '';
    position: absolute;
    top: 50%; /* Centreert verticaal t.o.v. de afbeelding */
    transform: translateY(-50%); /* Compenseert voor de hoogte */
    left: -350px; /* Start buiten het zichtbare gebied */
    width: 350px; /* Langere horizontale lijn */
    height: 5px; /* Dikte van de lijn */
    background: linear-gradient(
      to right,
      #6b8e23,
      rgb(248, 211, 4)
    );
    opacity: 0; /* Start onzichtbaar */
    animation: slideInLeft 1.6s ease forwards; /* Animatie toepassen */
  }
  
  /* Horizontale retro-lijn rechts */
  .custom-header::after {
    content: '';
    position: absolute;
    top: 50%; /* Centreert verticaal t.o.v. de afbeelding */
    transform: translateY(-50%); /* Compenseert voor de hoogte */
    right: -350px; /* Start buiten het zichtbare gebied */
    width: 350px; /* Langere horizontale lijn */
    height: 5px; /* Dikte van de lijn */
    background: linear-gradient(
      to right,
      rgb(248, 211, 4),
      #6b8e23 
    );
    opacity: 0; /* Start onzichtbaar */
    animation: slideInRight 1.2s ease forwards; /* Snellere animatie */
    animation-delay: 0.1s; /* Kleinere vertraging */
  }

/* Animatie voor de linkerlijn */
@keyframes slideInLeft {
    0% {
      left: -350px;
      opacity: 0;
    }
    100% {
      left: 10px;
      opacity: 1;
    }
  }
  
  /* Animatie voor de rechterlijn */
  @keyframes slideInRight {
    0% {
      right: -350px;
      opacity: 0;
    }
    100% {
      right: 10px;
      opacity: 1;
    }
  }
  
  /* Media query voor kleine schermen */
  @media screen and (max-width: 600px) {
    .centered-image {
      width: 80%; /* Kleiner op mobiele apparaten */
      max-width: 80%;
    }
  
    .custom-header {
      padding: 0; /* Geen padding nodig, want lijnen zijn weg */
    }
  
    .custom-header::before,
    .custom-header::after {
      display: none; /* Verwijdert de lijnen op kleine schermen */
    }
    .retro-description {
        font-family: 'DM Serif Display', serif;
        font-size: 20px;
        line-height: 1.6;
        color: #161718;
        margin: 0;
        padding: 0 1rem;
        font-style: italic;
        font-weight: 100;
    }
  }


.retro-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background-color: transparent;
    box-shadow: none;
    position: relative;
    overflow: hidden;
    padding-top: 90px;
  }
  
  .header-section {
    text-align: center;
    margin-bottom: 2.5rem;
    position: relative;
  }
  
  .retro-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3.2rem;
    color: #d67315;
    letter-spacing: 2px;
    margin: 0;
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
    position: relative;
    display: inline-block;
  }
  
  .retro-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.5rem 0 2.5rem;
  }
  
  .divider-star {
    font-size: 1.8rem;
    color: #0f0801;
    position: relative;
    margin: 0 10px;
  }
  
  .divider-star:first-child::before,
  .divider-star:last-child::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 70px;
    height: 2px;
    background: linear-gradient(to right, transparent, #130a02, transparent);
  }
  
  .divider-star:first-child::before {
    right: 30px;
  }
  
  .divider-star:last-child::after {
    left: 30px;
  }
  
  /* Nieuwe flexbox layout voor tekst en lijst naast elkaar */
  .retro-content-flex {
    display: flex;
    margin-bottom: 2.5rem;
    align-items: stretch;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    position: relative; /* Voor absolute positionering van de separator */
}
  
.retro-text-column {
    flex: 5.5;
    display: flex;
    align-items: center;
    padding-right: 2.5rem;
    margin-left: -1cm; /* Added this line to move the text 1cm to the left */
}
  
.retro-description {
    font-family: 'DM Serif Display', serif;
    font-size: 1.50rem;
    line-height: 1.6;
    color: #071806;
    margin: 0;
    padding: 0 1.5rem;
    font-style: italic;
    font-weight: 400;
}
  
  /* Verticale separator tussen tekst en lijst */
  .retro-separator {
    width: 2px;
    background: repeating-linear-gradient(
      to bottom,
      #6b8e23,
      #6b8e23 12px,
      transparent 12px,
      transparent 20px
    );
    margin: 0;
    position: absolute;
    left: calc(55% - 1.25cm); /* De separator wordt 1cm naar links verschoven */
    top: 0;
    bottom: 0;
    margin-top: 1rem;
  }
  
  .retro-list-column {
    flex: 4.5; /* Iets vergroot ten opzichte van vorige versie */
    padding-left: 2.5rem; /* Extra ruimte aan de linkerkant van de lijst */
    margin-top: 2rem;
  }
  
  .retro-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.8rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px dashed rgba(29, 53, 87, 0.2);
  }
  
  .retro-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
  }
  
  .retro-checkmark {
    flex: 0 0 28px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #6b8e23; /* Olijfgroene checkmarks */
    color: white;
    border-radius: 50%;
    margin-right: 0.8rem;
    font-size: 1.20rem;
    font-weight: bold;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  }
  
  .item-text {
    font-family: 'Archivo Narrow', sans-serif;
    font-size: 1.10rem;
    font-weight: 700;
    color: #0d2b0c;
    letter-spacing: 0.5px;
  }
  
/* Afbeelding mooi gecentreerd */
.retro-image-container {
    position: relative;
    max-width: 1200px;
    width: 100%;
    margin: 80px auto;
    padding: 80px;
    overflow: visible;
  }
  
  .retro-image {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
    position: relative;
    z-index: 1;
    filter: saturate(0.95) contrast(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    /* Nieuwe rand direct tegen de afbeelding */
    border: 4px solid #e6bc21;
    padding: 3px; /* Kleine binnenruimte voor een dubbele rand effect */
    background-color: #fff; /* Witte achtergrond voor de binnenruimte */
  }
  
  /* Optioneel: innerlijke schaduw voor extra diepte */
  .retro-image {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(230, 188, 33, 0.3);
  }
  
  /* Primaire gele rand met textuur - nu veel verder van de afbeelding */
  .retro-image::before {
    content: "";
    position: absolute;
    top: -60px;
    left: -60px;
    right: -60px;
    bottom: -60px;
    background: linear-gradient(45deg, #f2d94e, #e6bc21, #f9e287, #f2d94e);
    border-radius: 20px;
    z-index: -1;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
    background-size: 100px 100px;
    background-image: 
      linear-gradient(45deg, #f2d94e, #e6bc21, #f9e287, #f2d94e),
      repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 20px);
  }
  
  
  
  /* Extra decoratieve elementen in de hoeken */
  .retro-image-container::before,
  .retro-image-container::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 300px;
    border: 10px solid #e6bc21;
    z-index: 2;
  }
  
  /* Aangepaste positionering voor meer ruimte links */
  .retro-image-container::before {
    top: -20px;
    left: -20px;
    border-right: none;
    border-bottom: none;
    border-radius: 40px 0 0 0;
  }
   /* Aangepaste positionering voor meer ruimte rechts */
  .retro-image-container::after {
    bottom: -20px;
    right: -20px;
    border-left: none;
    border-top: none;
    border-radius: 0 0 40px 0;
  }
  

  
 /* Kleine laptop media query (nieuw) */
@media (max-width: 1024px) {
    .retro-image-container {
      margin: 60px auto;
      padding: 60px;
    }
    
    .retro-image {
      border-width: 8px;
    }
    
    /* Dichter bij de afbeelding */
    .retro-image::before {
      top: -15px;
      left: -15px;
      right: -15px;
      bottom: -15px;
      border-radius: 15px;
    }
    
    .retro-image::after {
      top: -25px;
      left: -25px;
      right: -25px;
      bottom: -25px;
      border-radius: 20px;
    }
    
    /* Kortere lijnen en dichter bij de afbeelding */
    .retro-image-container::before,
    .retro-image-container::after,
    .retro-image-container .corner-accent-top-right,
    .retro-image-container .corner-accent-bottom-left {
      width: 100px;
      height: 200px;
      border-width: 9px;
    }
    
    /* Aangepaste positionering - dichter bij */
    .retro-image-container::before {
      top: -10px;
      left: -10px;
      border-radius: 30px 0 0 0;
    }
    
    .retro-image-container::after {
      bottom: -10px;
      right: -10px;
      border-radius: 0 0 30px 0;
    }
  }
  
  /* Tablet media query - verder aangepast */
  @media (max-width: 768px) {
    .retro-image-container {
      margin: 30px auto;
      padding: 30px;
    }
    
    .retro-image {
      border-width: 6px;
    }
    .retro-description{
        font-size: 20px;
    }
    
    /* Nog dichter bij de afbeelding */
    .retro-image::before {
      top: -5px;     /* nog kleiner gemaakt */
      left: -5px;    /* nog kleiner gemaakt */
      right: -5px;   /* nog kleiner gemaakt */
      bottom: -5px;  /* nog kleiner gemaakt */
      border-radius: 10px;
    }
    
    /* Kortere lijnen en dichter bij de afbeelding */
    .retro-image-container::before,
    .retro-image-container::after,
    .retro-image-container .corner-accent-top-right,
    .retro-image-container .corner-accent-bottom-left {
      width: 50px;   /* nog korter */
      height: 80px;  /* nog korter */
      border-width: 7px;
    }
    
    /* Aangepaste positionering - nog dichter bij */
    .retro-image-container::before {
      top: -3px;    /* nog dichter bij */
      left: -3px;   /* nog dichter bij */
      border-radius: 20px 0 0 0;
    }
    
    .retro-image-container::after {
      bottom: -3px; /* nog dichter bij */
      right: -3px;  /* nog dichter bij */
      border-radius: 0 0 20px 0;
    }
  }
  
  /* Mobiele telefoon media query - maximaal aangepast */
  @media (max-width: 480px) {
    .retro-image-container {
      margin: 15px auto;
      padding: 15px;
    }
    
    .retro-image {
      border-width: 3px;
      padding: 2px;
    }
    
    /* Minimale ruimte tussen rand en afbeelding */
    .retro-image::before {
      top: -2px;     /* extreem dicht bij */
      left: -2px;    /* extreem dicht bij */
      right: -2px;   /* extreem dicht bij */
      bottom: -2px;  /* extreem dicht bij */
      border-radius: 7px;
      background-size: 50px 50px;
    }
    
    /* Verwijder de buitenste border voor mobiel */
    .retro-image::after {
      display: none;
    }
    
    /* Extra korte lijnen, direct bij de afbeelding */
    .retro-image-container::before,
    .retro-image-container::after,
    .retro-image-container .corner-accent-top-right,
    .retro-image-container .corner-accent-bottom-left {
      width: 30px;  /* nog korter */
      height: 50px; /* nog korter */
      border-width: 4px;
    }
    
    /* Aangepaste positionering - vrijwel tegen de rand */
    .retro-image-container::before {
      top: -1px;    /* minimale ruimte */
      left: -1px;   /* minimale ruimte */
      border-radius: 12px 0 0 0;
    }
    
    .retro-image-container::after {
      bottom: -1px; /* minimale ruimte */
      right: -1px;  /* minimale ruimte */
      border-radius: 0 0 12px 0;
    }
  }




  /* Responsive aanpassingen */
  @media (max-width: 768px) {
    .retro-container {
      padding: 1.5rem;
    }
    
    .retro-title {
      font-size: 2.5rem;
    }
    
    .retro-content-flex {
      flex-direction: column;
    }
    
    .retro-separator {
        position: static;
        width: 100%;
        height: 2px;
        margin: 1.5rem 0;
        background: repeating-linear-gradient(
          to right,
          #6b8e23,
          #6b8e23 12px,
          transparent 12px,
          transparent 20px
        );
      }
    
    .retro-text-column,
    .retro-list-column {
      padding: 0;
    }
  }



  .custom-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
    padding: 0 80px;
  }
  

  /* Media query voor tablets */
@media (max-width: 1024px) {
    .custom-header::before,
    .custom-header::after {
      width: 250px; /* Kortere lijnen voor tablets */
    }
  }
  
  /* Media query voor kleine laptops */
  @media (max-width: 1366px) {
    .custom-header::before,
    .custom-header::after {
      width: 300px; /* Iets kortere lijnen voor kleine laptops */
    }
  }
  
  /* Media query voor kleinere tablets */
  @media (max-width: 768px) {
    .custom-header::before,
    .custom-header::after {
      width: 150px; /* Nog kortere lijnen voor kleinere tablets */
    }
  }
  
  /* Media query voor mobiele apparaten */
  @media (max-width: 480px) {
    .custom-header::before,
    .custom-header::after {
      width: 100px; /* Heel korte lijnen voor mobiele apparaten */
    }
  }



  
  /* Media query voor kleine schermen */
@media screen and (max-width: 600px) {
    .centered-image {
      width: 80%; /* Kleiner op mobiele apparaten */
      max-width: 80%;
    }
  
    .custom-header {
      padding: 0; /* Geen padding nodig, want lijnen zijn weg */
    }
  
    .custom-header::before,
    .custom-header::after {
      display: none; /* Verwijdert de lijnen op kleine schermen */
    }
    
    .retro-content-flex {
      flex-direction: column;
      padding: 1rem; /* minder padding */
    }
      
    .retro-text-column {
      padding: 0;
      margin-left: 0;
    }
      
    .retro-description {
      padding: 0.5rem;
      text-align: center;
      font-size: 1.2rem; /* iets kleiner voor leesbaarheid */
    }
      
    .retro-separator {
      display: none; /* verwijder verticale lijn op mobiel */
    }
      
    .retro-list-column {
      padding-left: 0;
      margin-top: 1.5rem;
    }
}

  







/* ✅ tittel voor de lijn ------------------------------------------------ */
.intro-text {
    font-size: 35px;
    color: black; 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    font-family: 'Press Start 2P', cursive;

    /* Fade-in effect */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-out forwards;
}

/* losse zinnen -------------------------------------------------------*/
.extra-text {
    font-size: 24px; /* Kleinere tekst */
    color: #333; /* Donkergrijs in plaats van zwart */
    
    font-family: 'Arial', sans-serif; /* Eenvoudig en modern font */

    /* Fade-in effect */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-out forwards;
}





/* cards index    --------------------------------------------------------------------------------------------------*/

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

.containerwagens {
    width: 100%;
    max-width: none;
    margin-top: 0; /* Geen ruimte boven */
    background-color:#1a1a1a7e;
    overflow: hidden; /* Zorgt ervoor dat de inhoud niet buiten de container valt */
}




/* Rest van de CSS blijft hetzelfde */
.food-services-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin: 40px 0;
}

.food-service-card {
    width: 380px;
    color: whitesmoke;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    background-color: #424344;
    box-shadow: 
        0 6px 18px rgba(241, 240, 234, 0.582);
    border: #000;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    transform: translateY(30px);
    animation: cardAppear 0.8s forwards;
}

.food-service-card:nth-child(1) {
    animation-delay: 0.2s;
}

.food-service-card:nth-child(2) {
    animation-delay: 0.4s;
}

.card-media {
    position: relative;
    padding-top: 66.67%; /* 3:2 Aspect Ratio */
    overflow: hidden;
}

.card-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(51, 50, 50, 0) 0%,
        rgba(0, 0, 0, 0.4) 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card-content {
    padding: 25px;
    position: relative;
}

.card-title {
    color: whitesmoke;
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 12px 0;
}

.card-description {
    color: whitesmoke;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

.card-icon {
    position: absolute;
    top: -30px;
    right: 25px;
    width: 60px;
    height: 60px;
    background: #6b8e23;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
   
    transition: transform 0.3s ease;
}

.card-icon i {
    color: white;
    font-size: 24px;
}

/* Hover Effects */
.food-service-card:hover {
    transform: translateY(-10px);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.12),
        0 8px 20px rgba(211, 84, 0, 0.1);
}

.food-service-card:hover .card-media img {
    transform: scale(1.05);
}

.food-service-card:hover .card-overlay {
    opacity: 1;
}

.food-service-card:hover .card-icon {
    transform: rotate(15deg);
}

@keyframes cardAppear {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    /* Tablet Layout */
    .food-service-card {
        width: calc(50% - 20px); /* Twee kaarten naast elkaar met ruimte ertussen */
        max-width: none; /* Geen maximale breedte */
        margin: 0 0 20px; /* Ruimte onder de kaarten */
    }

    .food-services-row {
        gap: 20px; /* Ruimte tussen de kaarten */
    }

    .card-title {
        font-size: 22px; /* Kleinere titel voor tablets */
    }

    .card-description {
        font-size: 14px; /* Kleinere tekst voor tablets */
    }
}

/* Mobile Layout: specifiek voor telefoons (tot 767px breed) */
@media (max-width: 767px) {
    .food-service-card {
        width: calc(100% - 80px); /* Nog smaller: 40px marge aan elke kant */
        margin: 0 auto 20px;
    }

    .food-services-row {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 0 20px;
    }

    /* Overige stijlen blijven hetzelfde */
    .card-title {
        font-size: 20px;
    }

    .card-description {
        font-size: 12px;
    }

    .card-icon {
        top: -20px;
        right: 15px;
        width: 50px;
        height: 50px;
    }

    .card-icon i {
        font-size: 20px;
    }
}



/* Desktop/Laptop Layout */
@media (min-width: 1025px) {
    .food-service-card {
        width: 380px; /* Fixed width for desktop */
    }
}

/* Tablet Layout - specifically targeting iPad and similar devices */
@media (min-width: 768px) and (max-width: 1024px) {
    .food-services-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 15px;
        padding: 0 10px;
    }
    
    .food-service-card {
        width: calc(33.33% - 10px);
        min-width: 230px;
        margin: 0;
    }
    
    .card-content {
        padding: 15px;
    }
    
    .card-title {
        font-size: 18px;
        margin-bottom: 8px;
    }
    
    .card-description {
        font-size: 13px;
        line-height: 1.4;
    }
    
    .card-icon {
        width: 50px;
        height: 50px;
        top: -25px;
        right: 15px;
    }
}










/* ✅ Owl Carousel - Basisstijl----------------------------------------------------------------- */

.swipe-indicator {
    display: none;
    text-align: center;
    margin-bottom: 15px;
    
}

.swipe-icon {
    display: inline-flex;
    align-items: center;
    background-color: rgba(0,0,0,0.1);
    padding: 5px 15px;
    border-radius: 20px;
}

.swipe-text {
    margin: 0 8px;
    font-size: 14px;
}

@keyframes pulse {
    0% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.6;
    }
}

/* Toon de swipe indicator alleen op kleine schermen */
@media (max-width: 768px) {
    .swipe-indicator {
        display: block;
    }
}


.events-section {
    padding: 60px 0;
    background: #fff;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-title {
    font-size: 36px;
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
}

.section-divider {
    width: 80px;
    height: 3px;
    background: #d35400;
    margin: 0 auto;
}

.event-card {
    background: white;
    border-radius: 12px;
    padding: 30px;
    margin: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.event-icon {
    width: 60px;
    height: 60px;
    background: #6b8e23;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.event-icon i {
    color: white;
    font-size: 24px;
}

.event-title {
    font-size: 22px;
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
}

.event-description {
    color: #666;
    line-height: 1.6;
    font-size: 16px;
}

/* Owl Carousel Custom Styling */
.owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: white !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease;
}

.owl-nav button:hover {
    background: #d35400 !important;
}

.owl-nav button i {
    font-size: 18px;
    color: #d35400;
    transition: color 0.3s ease;
}

.owl-nav button:hover i {
    color: white;
}

.owl-prev {
    left: -22px;
}

.owl-next {
    right: -22px;
}

.owl-dots {
    margin-top: 30px;
}

.owl-dot span {
    background: #ddd !important;
    transition: all 0.3s ease;
}

.owl-dot.active span {
    background: #d35400 !important;
}










/*Onderlijning --------------------------------------------------------------------*/
.retro-line {
    width: 50%; /* Maak de lijn korter */
    margin: 10px auto 30px auto; /* Gecentreerd, met ruimte erboven en onder */
    border: none;
    height: 3px; /* Dikte van de lijn */
    background: #d35400; /* Retro-oranje kleur */
    opacity: 0; /* Start onzichtbaar */
    transform: scaleX(0); /* Begin volledig ingeklapt */

    /* Animatie */
    animation: fadeInExpand 1s ease-out forwards;
    animation-delay: 0.5s;
}

@keyframes fadeInExpand {
    from {
        opacity: 0;
        transform: scaleX(0);
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}













/* Afbeelding waaier ------------------------------------------------------------------------*/
.afbeeldingen-waaier {
    width: 100%;
    padding: 20px 2cm;
    position: relative; /* Nodig voor de ::before positionering */
    box-sizing: border-box;
}

/* Achtergrondafbeelding met blur in een pseudo-element */
.afbeeldingen-waaier::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)),
        url('/media/frietjes.jpg') center/cover no-repeat;
    
    z-index: 0;
}


/* Zorg dat de inhoud boven de achtergrond blijft */
.carousel-container {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    z-index: 1; /* Boven de achtergrond */
}

.carousel-item .row {
    --bs-gutter-x: 0;
    justify-content: space-between;
}

/* Responsive aanpassingen */
.carousel-item .col {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 5px;
}

@media (min-width: 576px) {
    .carousel-item .col {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 768px) {
    .carousel-item .col {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
}

@media (min-width: 992px) {
    .carousel-item .col {
        flex: 0 0 24%;
        max-width: 24%;
    }
}

.carousel-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.carousel-control-prev,
.carousel-control-next {
    width: 40px;
    height: 40px;
    background-color: red;
    border-radius: 20%;
    top: 50%;
    transform: translateY(-30%);
}

.carousel-control-prev { left: 1.5cm; }
.carousel-control-next { right: 1.5cm; }

@media (max-width: 767px) {
    .afbeeldingen-waaier {
        padding: 10px 1cm;
    }
    .carousel-control-prev { left: 0.5cm; }
    .carousel-control-next { right: 0.5cm; }
}



/*------------------------------------------------------------------------------------*/
.footer {
    background-color: #1a1a1ae1;
    color: #ffffff;
    padding: 4rem 0 2rem 0;
    margin-top: auto;
}

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

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12rem;
    margin-bottom: 3rem;
}

.footer-section {
    padding: 0 1rem;
}

.footer-logo {
    margin-bottom: 1.5rem;
}

.footer-logo img {
    max-width: 180px;
    height: auto;
}

.footer-heading {
    color: #ffffff;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.footer-contact p {
    margin: 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #cccccc;
}

.footer-contact a {
    color: #cccccc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact a:hover {
    color: #ffffff;
}

.social-icons-footer {
    display: flex;
    gap: 1rem;
}

.social-icons-footer a {
    color: #ffffff;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.social-icons-footer a:hover {
    color: #4267B2; /* Facebook blue */
}

.social-icons-footer a:hover:nth-child(2) {
    color: #E1306C; /* Instagram pink */
}

.footer-bottom {
    border-top: 1px solid #f1ebeb;
    padding-top: 2rem;
    text-align: center;
}

.footer-copyright {
    color: #888888;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.footer-link {
    color: #cccccc;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #ffffff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .footer {
        padding: 3rem 0 1.5rem 0;
    }

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

    .footer-contact p {
        justify-content: center;
    }

    .social-icons-footer {
        justify-content: center;
    }

    .footer-links {
        flex-direction: column;
        gap: 1rem;
    }
}


/* ✅ voorwaarde ---------------------------------------------------------------------------*/


.terms-container h3 {
    color: black;
    margin-top: 20px;
    font-weight: bold;
}

.terms-container p, .terms-container ul {
    font-size: 18px;
    color: #000000;
}

.terms-container ul {
    list-style: none;
    padding-left: 0;
}

.terms-container ul li::before {
    content: "✔ ";
    color: black; /* Retro-geel checkmark */
    font-weight: bold;
}








/* Over Ons - Algemene styling------------------------------- */
.overons-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

.overons-title {
    font-size: 28px;
    color: #333;
    margin-bottom: 20px;
}

/* Fixed content layout */
.overons-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
    justify-content: center; /* Center the content horizontally */
    margin: 0 auto; /* Center the container */
    width: 100%; /* Ensure full width */
}

/* Adjusted image container */
.overons-image-container {
    flex: 1; /* Reduced from 1.5 to balance better */
    max-width: 350px; /* Slightly reduced max width */
    position: relative;
    overflow: visible;
    margin: 0; /* Remove any margin */
}

.overons-image {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: block; /* Ensures proper block display */
}

/* Improved corner logo positioning */
.overons-corner-logo {
    position: absolute;
    top: -20px;
    left: -15px;
    width: 125px;
    height: auto;
    transform: rotate(-15deg);
    filter: drop-shadow(2px 3px 5px rgba(0, 0, 0, 0.3));
    z-index: 2;
    transition: transform 0.3s ease-in-out;
}

.overons-corner-logo:hover {
    transform: rotate(-15deg) scale(1.05);
}

/* Added space for logo without affecting layout */
.overons-image-container {
    padding-top: 25px;
    padding-left: 20px;
    box-sizing: border-box; /* Ensure padding doesn't add to width */
}

/* Fixed text block */
.overons-text-block {
    flex: 2;
    text-align: left;
    overflow-wrap: break-word; /* Prevent text from overflowing */
    width: 100%; /* Ensure it takes available space */
    max-width: 650px; /* Limit maximum width */
}

.overons-text {
    font-size: 16px;
    color: #0a0404;
    font-weight: 300;
    line-height: 1.6;
    margin: 0;
}

/* Improved responsive layout */
@media (max-width: 768px) {
    .overons-content {
        flex-direction: column;
        align-items: center;
        gap: 30px; /* Reduced gap on mobile */
    }

    .overons-image-container {
        max-width: 90%; /* Use percentage instead of 100% to give some margin */
        padding-top: 20px;
        padding-left: 15px;
    }

    .overons-corner-logo {
        width: 100px;
        top: -15px;
        left: -10px;
    }

    .overons-text-block {
        text-align: center;
        padding: 0 15px; /* Add some padding on mobile */
        max-width: 100%; /* Full width on mobile */
    }

    .overons-title {
        font-size: 24px;
    }
}


/* ✅ Contact Form Section Styling--------------------------------------------------------------------------------- */
/* Wrapper om het formulier in het midden van de pagina te plaatsen */
.center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh; /* Iets minder hoogte, zodat het niet volledig de pagina vult */
    margin-top: -20px; /* Optioneel: negatieve margin om het verder naar boven te trekken */
}


/* Contactformulier blijft zoals het is, zonder extra centrering van de inhoud */
.contact-form-wrapper {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    width: 100%;
    animation: fadeIn 1s ease-in-out;
    margin: auto;
}
/* Titel van het formulier */
.contact-form-title {
    color: #d35400;
    margin-bottom: 1.5rem;
    font-weight: bold;
    text-align: center;
}

/* Stijl voor formulierlabels */
.form-label-custom {
    font-weight: 600;
    color: #555;
}

/* Stijl voor formulierinputs */
.form-input-custom {
    border-radius: 10px;
    border: 1px solid #ddd;
    padding: 10px;
    transition: all 0.3s ease;
}

.form-input-custom:focus {
    border-color: #007bff;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.25);
}

/* Stijl voor de verzendknop */
.submit-button-custom {
    background: #d35400;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: 600;
    transition: all 0.3s ease;
    width: 100%;
    color: white;
}

.submit-button-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
}

/* Container voor de succespagina */
.success-message-wrapper {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    width: 100%;
    text-align: center;
    animation: fadeIn 1s ease-in-out;
}

/* Titel van de succespagina */
.success-title-custom {
    color: #333;
    margin-bottom: 1.5rem;
    font-weight: bold;
}

/* Tekst van de succespagina */
.success-text-custom {
    color: #555;
    font-size: 1.1rem;
}

/* Terugknop op de succespagina */
.back-button-custom {
    background: linear-gradient(135deg, #007bff, #0056b3);
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-top: 1rem;
    color: white;
    text-decoration: none;
    display: inline-block;
}

.back-button-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
}

/* Fade-in animatie */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .contact-form-wrapper,
    .success-message-wrapper {
        padding: 1.5rem;
    }

    .submit-button-custom,
    .back-button-custom {
        padding: 8px 16px;
    }
}

/* ✅ Algemene succes page -------------------------------------------------- */
.succes-container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Zorgt ervoor dat het vanaf de top start */
    height: 100vh; 
    background-color: #f8f9fa; 
    padding: 20px;
}

/* ✅ Kader rondom succesbericht */
.success-box {
    background: white;
    border: 3px solid #d35400; 
    border-radius: 15px;
    padding: 2.5rem; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 100%;
    text-align: center;
    animation: fadeIn 1s ease-in-out;
    margin-top: 30px; /* Voegt ruimte toe bovenaan */
}

/* ✅ Titel styling */
.success-title {
    color: #333;
    margin-bottom: 1.5rem;
    font-weight: bold;
    font-size: 24px;
}

/* ✅ Tekst styling */
.success-text {
    color: #555;
    font-size: 1.2rem;
    line-height: 1.5;
}

/* ✅ Knop styling */
.success-button {
    background: #d35400; 
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-top: 1.5rem;
    color: white;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.success-button:hover {
    background: #b63e00;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(211, 84, 0, 0.3);
}

/* ✅ Animatie */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ✅ Responsive styling */
@media (max-width: 768px) {
    .success-box {
        padding: 1.5rem;
        margin-top: 50px; /* Iets minder marge op kleinere schermen */
    }

    .success-title {
        font-size: 22px;
    }

    .success-text {
        font-size: 1rem;
    }

    .success-button {
        padding: 10px 20px;
        font-size: 14px;
    }
}



/* ✅ Formules ---------------------------------------------------------------------------------- */

.formule-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 50px; /* Extra ruimte bovenaan de sectie */
}

.formule-card {
    width: 100%;
    max-width: 350px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin: 20px;
    padding: 20px;
    background-color: #fff;
    text-align: center;
    
    /* Fade-in effect met een lichte omhoog-beweging */
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Stijlen voor de inhoud van de kaart */
.formule-card h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 15px;
}

.formule-card p {
    font-size: 16px;
    color: #555;
    margin: 10px 0;
}

.formule-card .price {
    font-size: 20px;
    font-weight: bold;
    color: #e67e22;
    margin: 15px 0;
}

.formule-card .btn {
    background-color: #6b8e23;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 16x;
    font-weight: 300;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
}

.formule-card .btn:hover {
    background-color: #d35400;
}

/* Animatie definitie */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Zorg ervoor dat elke kaart iets later verschijnt */
.formule-card:nth-child(1) {
    animation-delay: 0.2s;
}
.formule-card:nth-child(2) {
    animation-delay: 0.4s;
}
.formule-card:nth-child(3) {
    animation-delay: 0.6s;
}
.formule-card:nth-child(4) {
    animation-delay: 0.8s;
}






/* ✅ List Card Styling-------------------------------------------------------------------------- */
.allergenen-img {
    border: 4px solid #d35400; /* Border met de gewenste kleur */
    border-radius: 15px; /* Afgeronde hoeken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow voor een mooi effect */
    padding: 5px; /* Ruimte tussen de afbeelding en de border */
    background-color: #fff; /* Achtergrondkleur voor de padding */
}
.list-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 30px; /* Meer ruimte tussen de kaarten */
}

/* ✅ Title Styling */
.list-title {
    font-size: 2rem;
    font-weight: bold;
    color: #d35400;
    margin-bottom: 15px;
}

/* ✅ Custom List */
.custom-list {
    list-style: none;
    padding-left: 0;
    font-size: 1.2rem;
    color: #333;
}

/* ✅ List Items */
.custom-list li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* ✅ Last item without border */
.custom-list li:last-child {
    border-bottom: none;
}

/* ✅ Veggie Badge */
.veggie {
    color: #28a745;
    font-weight: bold;
}
.row {
    row-gap: 30px; /* Meer ruimte tussen rijen */
    column-gap: 30px; /* Meer ruimte tussen kolommen */
}








/* ✅ Offerte Form Card ----------------------------------------------------------------------- */

.form-section-title {
    color: blue;
    font-size: 16px;
}
.offerte-container {
    max-width: 950px;
    margin: 3rem auto 0;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.offerte-heading {
    color: #e67e22;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
    font-weight: 600;
}

/* Grid Layout */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.full-width {
    grid-column: 1 / -1;
}

/* Section Headers */
h2 {
    grid-column: 1 / -1;
    margin-top: 1.7rem;
    margin-bottom: 0.5rem;
    color: #266117;
    font-weight: 600;
}

/* Form Groups */
.offerte-form-group {
    margin-bottom: 1rem;
}

.offerte-form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #555;
    font-weight: 500;
}

/* Form Controls */
.form-control {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9rem;
}

.form-control:focus {
    outline: none;
    border-color: #d35400;
    box-shadow: 0 0 0 2px rgba(211, 84, 0, 0.1);
}

.small-input {
    max-width: 120px;
}

/* Address Inputs */
.address-inputs {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    gap: 0.5rem;
}

/* Date/Time Group */
.datetime-group {
    display: flex;
    gap: 10px;
}

.datetime-group .form-control {
    flex: 1;
}

/* Radio Buttons */
.offerte-form-check {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    font-weight: 600;
}

.form-check-input {
    margin-right: 10px;
    font-weight: 500;
}

/* Privacy Check */
.privacy-check {
    margin-top: 1rem;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 6px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #333;
}

.privacy-check input[type="checkbox"] {
    margin-top: 3px;
}

.privacy-check label {
    color: #333;
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

/* Textarea */
textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

/* Submit Button */
.offerte-btn-primary {
    background-color: #d35400;
    border: none;
    color: #fff;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: background 0.3s ease;
    width: 100%;
    margin-top: 1rem;
}

.offerte-btn-primary:hover {
    background-color: #e67e22;
}

/* Result Section */
.offerte-resultaat {
    margin-top: 2rem;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    text-align: center;
    color: #333333;
    border-color: #b63e00;
}

.price-header {
    color: #333;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.total-price {
    font-size: 1.8rem;
    color: #d35400;
    font-weight: 600;
    margin: 1rem 0;
}

.price-note {
    color: #666;
    font-size: 0.9rem;
}

/* Beschikbaarheid Section */
.beschikbaarheid-bericht {
    margin-top: 15px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.beschikbaarheid-btn {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.beschikbaarheid-btn:hover {
    background-color: #0056b3;
}




/*snacks -------------------------------------------------------------------------------*/
.snack-card {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #fff;
}

.snack-card img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
}

.snack-card h3 {
    margin-top: 10px;
    font-size: 18px;
    color: #333;
}

.snack-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}





/* ✅ FAQ Container Styling -----------------------------------------------------*/
.faq-container {
    max-width: 1000px;
    margin: 10px auto; /* Verklein de bovenste marge van 50px naar 20px */
    padding: 40px;
    background: whitesmoke;
    border-radius: 15px;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ✅ Accordion Item Styling */
.accordion-item {
    border: none;
    margin-bottom: 20px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.accordion-item:hover {
    transform: translateY(-2px);
    box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.15);
}

/* ✅ Accordion Button Styling */
.accordion-button {
    background: #a5892c;
    color: white; /* Standaard tekstkleur (wit) */
    font-weight: 600;
    font-size: 18px;
    border: none;
    padding: 20px;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Achtergrondkleur veranderen naar geel wanneer de accordion actief is */
.accordion-button:not(.collapsed) {
    background: #9c7903d7;
    color: #000; /* Zwarte tekst voor betere leesbaarheid */
}

/* Hover effect */
.accordion-button:hover {
    background: #d1b226; /* Donkerder geel/oranje voor hover */
}

/* Verwijder Bootstrap standaard icoon */
.accordion-button::after {
    display: none !important;
}

/* ✅ Plus/min teken styling */
.accordion-button span {
    font-size: 24px;
    font-weight: bold;
    margin-left: auto;
    transition: transform 0.3s ease-in-out;
}

/* Roteer naar "-" als de knop geopend is */
.accordion-button[aria-expanded="true"] span {
    transform: rotate(180deg);
}

/* ✅ Accordion Body Styling */
.accordion-body {
    background: #f8f9fa;
    padding: 25px;
    border-top: 2px solid #e9edf1;
    border-radius: 0 0 15px 15px;
    font-size: 18px;
    line-height: 1.6;
    color: #555;
    font-weight: 400;
}

/* Responsive design */
@media (max-width: 768px) {
    .faq-container {
        padding: 20px;
    }
    .accordion-button {
        font-size: 16px;
        padding: 15px;
    }
    .accordion-body {
        padding: 20px;
        font-size: 14px;
    }
}





/*login page ---------------------------------------------------------------*/

.login-card {
    width: 100%;
    max-width: 400px;
    margin: 50px auto;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    text-align: center;
}
.login-card h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
}
.login-card input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}
.login-card input:focus {
    border-color: #d35400;
    outline: none;
}
.login-card .btn {
    width: 100%;
    background-color: #d35400;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 20px;
}
.login-card .btn:hover {
    background-color: #e67e22;
}

.error {
    color: red;
}



/*promo---------------------------------------------------------------------------*/

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

.promo-row {
    display: flex;
    justify-content: space-around;
    gap: 40px;
    flex-wrap: wrap;
}

.promo-card {
    width: 300px;
    background: white;
    border-radius: 15px;
    padding: 30px 20px;
    text-align: center;
    position: relative;
    box-shadow: 
        0 10px 30px rgba(0,0,0,0.1),
        0 15px 40px rgba(211, 84, 0, 0.1);
    border: 2px solid #d35400;
    transform: translateY(30px);
    opacity: 0;
    animation: cardAppear 0.8s ease-out forwards;
}

.promo-card:nth-child(1) {
    animation-delay: 0.2s;
}

.promo-card:nth-child(2) {
    animation-delay: 0.4s;
}

.promo-card:hover {
    transform: translateY(-5px);
    box-shadow: 
        0 15px 40px rgba(0,0,0,0.15),
        0 20px 50px rgba(211, 84, 0, 0.15);
    transition: all 0.3s ease;
}

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

.people-count {
    font-size: 30px;
    font-weight: bold;
    color: #d35400;
    margin-bottom: 15px;
}

.discount-amount {
    font-size: 48px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.discount-text {
    font-size: 18px;
    color: #666;
    font-weight: 500;
}

.promo-ribbon {
    position: absolute;
    top: 20px;
    right: -10px;
    background: #d35400;
    color: white;
    padding: 5px 15px;
    font-size: 14px;
    font-weight: bold;
    transform: rotate(3deg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.promo-ribbon::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid #a04000;
    border-bottom: 10px solid transparent;
}

@keyframes cardAppear {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .promo-row {
        gap: 20px;
    }
    
    .promo-card {
        width: 100%;
        max-width: 300px;
        margin-bottom: 20px;
    }
}





/* Algemene stijlen voor RetroSnacks Privacybeleid --------------------------------------------*/
.privacy-container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    background: #fff9e6;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
}

.privacy-title {
    color: #d35400;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 15px;
}

.privacy-section {
    margin-bottom: 20px;
}

.privacy-section h2 {
    color: #e67e22;
    font-size: 22px;
    border-bottom: 2px solid #e67e22;
    padding-bottom: 5px;
}

.privacy-text {
    color: #333;
    font-size: 16px;
    line-height: 1.6;
}

.privacy-list {
    list-style-type: square;
    padding-left: 20px;
    color: #000;
}

.privacy-contact {
    font-weight: bold;
    color: #c0392b;
}

/* Responsieve aanpassing voor kleinere schermen */
@media (max-width: 600px) {
    .privacy-container {
        padding: 15px;
    }
    .privacy-title {
        font-size: 24px;
    }
    .privacy-section h2 {
        font-size: 20px;
    }
    .privacy-text {
        font-size: 14px;
    }
}



/*cookie popup ----------------------------------------------------------*/
.cookie-popup {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(33, 33, 33, 0.95);
    color: #f5f5f5;
    padding: 0;
    z-index: 1000;
    display: none;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: transform 0.4s ease-in-out;
    transform: translateY(100%);
}

.cookie-popup.show {
    transform: translateY(0);
    display: block;
}

.cookie-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 20px;
    position: relative;
}

.cookie-icon {
    font-size: 2.5rem;
    color: #FFD54F;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cookie-content {
    flex: 1;
}

.cookie-content h3 {
    margin: 0 0 10px 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: #FFD54F;
}

.cookie-content p {
    margin: 0 0 15px 0;
    line-height: 1.5;
    font-size: 0.95rem;
    opacity: 0.9;
}

.cookie-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.cookie-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 120px;
}

.cookie-btn i {
    font-size: 0.8rem;
}

.accept {
    background-color: #5baa5d;
    color: white;
}

.accept:hover {
    background-color: #24a12a;
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(76, 175, 80, 0.3);
}

.decline {
    background-color: transparent;
    color: #f5f5f5;
    border: 1px solid #f5f5f5;
}

.decline:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.cookie-more {
    color: #64B5F6;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cookie-more:hover {
    color: #2196F3;
    text-decoration: underline;
}

.cookie-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    color: #bdbdbd;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s ease;
}

.cookie-close:hover {
    color: white;
}

@media (max-width: 992px) {
    .cookie-icon {
        display: none;
    }
}

@media (max-width: 768px) {
    .cookie-container {
        flex-direction: column;
        padding: 20px 15px 15px;
        text-align: center;
    }
    
    .cookie-content h3 {
        margin-right: 20px;
    }
    
    .cookie-buttons {
        margin-top: 15px;
        justify-content: center;
        width: 100%;
    }
    
    .cookie-close {
        top: 10px;
        right: 10px;
    }
}

/*groot event contact formulier ------------------------------------------------------------------------*/
/* Algemene stijlen */
.section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 1rem;
  }
  
  .section-title:after {
    content: '';
    position: absolute;
    width: 80px;
    height: 3px;
    background-color: #e67e22;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .section-description {
    font-size: 1.3rem;
    line-height: 1.6;
    color: #555;
    max-width: 800px;
    margin: 0 auto;
    font-weight: 600;
  }

  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');

.section-description-image {
    font-family: 'Playfair Display', serif;
    font-size: 1.7rem;
    line-height: 1.6;
    color: #0b250a;
    max-width: 1300px;
    margin: 0 auto;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.05);
    padding: 10px 20px;
    position: relative;
}

.section-description-image::first-letter {
    font-size: 2.2rem;
    font-weight: 700;
    color: #26331c; /* Zelfde kleur als je lijn voor samenhang */
}
/* Media query voor mobiele apparaten */
@media only screen and (max-width: 767px) {
    .section-description-image {
        font-size: 1.3rem;
        padding: 8px 15px;
        letter-spacing: 0.02em;
    }
    
    .section-description-image::first-letter {
        font-size: 1.7rem;
    }
}

/* Extra kleine schermen zoals kleine smartphones */
@media only screen and (max-width: 480px) {
    .section-description-image {
        font-size: 1.1rem;
        padding: 5px 10px;
    }
    
    .section-description-image::first-letter {
        font-size: 1.5rem;
    }
}
  .full-width-container {
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.section-divider {
    height: 3px;
    background-color: #528130;
    width: 100%;
    margin: 0 0 30px 0; /* Alleen marge aan de onderkant */
    border: none;
}
  
  
  /* Features Container */
  .features-container {
    max-width: 1200px;
    margin: 3rem auto;
    padding: 0 20px;
  }
  
  .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
  }
  
/* Feature Cards */
.feature-card {
    display: flex;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    padding: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-left: 4px solid #e67e22;
  }
  
  .feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
  }
  
  .feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: rgba(230, 126, 34, 0.1);
    border-radius: 50%;
    margin-right: 20px;
    flex-shrink: 0;
  }
  
  .feature-icon i {
    font-size: 24px;
    color: #e67e22;
  }
  
  .feature-content {
    flex: 1;
  }
  
  .feature-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
  }
  
  .feature-description {
    font-size: 1rem;
    line-height: 1.6;
    color: #666;
  }
  
  /* Responsive adjustments for smartphones */
  @media (max-width: 600px) {
    .feature-card {
      padding: 15px; /* Reduced padding */
      border-radius: 8px; /* Slightly smaller corners */
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); /* Lighter shadow */
    }
  
    .feature-icon {
      width: 40px; /* Smaller icon container */
      height: 40px;
      margin-right: 15px; /* Reduced margin */
    }
  
    .feature-icon i {
      font-size: 18px; /* Smaller icon */
    }
  
    .feature-title {
      font-size: 1.1rem; /* Smaller title */
      margin-bottom: 8px; /* Reduced spacing */
    }
  
    .feature-description {
      font-size: 0.9rem; /* Smaller description */
      line-height: 1.4; /* Tighter line height */
    }
  
    /* Ensure cards stack vertically if not already handled */
    .features-grid {
      display: flex;
      flex-direction: column;
      gap: 15px; /* Space between stacked cards */
    }
  }
  
  /* Formulier Container */
  .form-container {
    max-width: 1000px;
    margin: 4rem auto;
    padding: 40px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 1;
  }
  
  .form-container:before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background-color: #e67e22;
    border-radius: 10px 10px 0 0;
  }
  
  .form-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.75rem;
    text-align: center;
  }
  
  .form-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 2.5rem;
    font-size: 1.05rem;
  }
  
  /* Form Grid Layout */
  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 30px;
  }
  
  .form-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  /* Form Elements */
  .form-group {
    margin-bottom: 1.5rem;
  }
  
  .form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #444;
    font-size: 0.95rem;
  }
  
  .form-input,
  .form-select,
  .form-textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    color: #333;
    transition: border-color 0.3s, box-shadow 0.3s;
    background-color: #f9f9f9;
  }
  
  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    outline: none;
    border-color: #e67e22;
    box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.1);
    background-color: #fff;
  }
  
  .form-textarea {
    resize: vertical;
    min-height: 120px;
  }
  
  /* Checkbox Styling */
  .checkbox-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 10px;
  }
  
  .custom-checkbox {
    position: relative;
    min-width: 180px;
  }
  
  .custom-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }
  
  .custom-checkbox label {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .custom-checkbox input[type="checkbox"]:checked + label {
    background-color: rgba(230, 126, 34, 0.1);
    border-color: #e67e22;
  }
  
  .check-icon {
    margin-right: 10px;
    font-size: 1.1rem;
    color: #ccc;
    transition: color 0.3s;
  }
  
  .custom-checkbox input[type="checkbox"]:checked + label .check-icon {
    color: #e67e22;
  }
  
  .checkbox-label {
    font-weight: 500;
    color: #555;
  }
  
  /* Form Footer */
  .form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .privacy-notice {
    color: #777;
    flex: 1;
    min-width: 250px;
  }
  
  .link {
    color: #e67e22;
    text-decoration: none;
    transition: color 0.3s;
  }
  
  .link:hover {
    color: #d35400;
    text-decoration: underline;
  }
  
  /* Submit Button */
  .submit-btn {
    background-color: #e67e22;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 14px 30px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(230, 126, 34, 0.3);
  }
  
  .submit-btn:hover {
    background-color: #d35400;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(230, 126, 34, 0.4);
  }
  
  .submit-btn:active {
    transform: translateY(0);
  }
  
  /* Call to Action */
  .cta-text {
    font-size: 1.15rem;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto 1.5rem;
    color: #555;
    text-align: center;
    font-weight: 600;
  }
  
  /* Animations */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .feature-card {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
  }
  
  .feature-card:nth-child(1) {
    animation-delay: 0.2s;
  }
  
  .feature-card:nth-child(2) {
    animation-delay: 0.4s;
  }
  
  .feature-card:nth-child(3) {
    animation-delay: 0.6s;
  }
  
  .form-container {
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.8s;
    opacity: 0;
  }
  
  /* Responsive Styles */
  @media (max-width: 768px) {
    .form-grid {
      grid-template-columns: 1fr;
      gap: 15px;
    }
    
    .form-container {
      padding: 30px 20px;
    }
    
    .checkbox-container {
      flex-direction: column;
      gap: 10px;
    }
    
    .custom-checkbox {
      min-width: auto;
      width: 100%;
    }
    
    .form-footer {
      flex-direction: column;
      text-align: center;
    }
    
    .privacy-notice {
      order: 2;
    }
    
    .submit-btn {
      order: 1;
      width: 100%;
      justify-content: center;
    }
  }




/*klant bedrijven display ---------------------------------------------------------*/

.klant-logo-carousel {
    width: 100%;
    overflow: hidden;
    padding: 50px 0;

    position: relative;

    
  }
  
  .klant-logo-track {
    display: flex;
    animation: scroll 30s linear infinite;
    width: calc(220px * 16); /* Aangepast voor bredere cards */
  }
  
  .klant-logo-slide {
    width: 220px;
    height: 150px;
    padding: 0 20px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .klant-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
   /* filter: grayscale(100%);*/
    opacity: 0.9;
    transition: all 0.3s ease;
    padding: 15px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
  
  .klant-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  }
  
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-220px * 8));
    }
  }
  
  /* Responsive aanpassingen */
  @media (max-width: 768px) {
    .klant-logo-slide {
      width: 180px;
      height: 120px;
      padding: 0 15px;
    }
    
    .klant-logo-track {
      width: calc(180px * 16);
    }
    
    @keyframes scroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(calc(-180px * 8));
      }
    }
  }





  /* Container for the promo cards formulle---------------------------------------------------------- */
.promo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Space between cards */
    padding: 20px;
    flex-wrap: wrap; /* Allows cards to stack on smaller screens */
    max-width: 1200px; /* Limits width on large screens */
    margin: 0 auto; /* Centers the container */
  }
  
  /* Individual promo card styling */
  .promo-card {
    background: #ffffff; /* White background */
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    width: 100%;
    max-width: 250px; /* Fixed width for cards */
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid #e67e22; /* Orange border for a professional touch */
  }
  
  /* Hover effect for desktop users */
  .promo-card:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Enhanced shadow */
  }
  
  /* Typography */
  .promo-card h3 {
    font-family: 'Arial', sans-serif;
    font-size: 18px;
    color: #333333; /* Dark grey for readability */
    margin-bottom: 10px;
  }
  
  .promo-card p {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #e67e22; /* Orange for emphasis */
    font-weight: bold;
  }
  
  /* Responsive design for smartphones */
  @media (max-width: 600px) {
    .promo-container {
      flex-direction: column; /* Stack cards vertically */
      padding: 15px;
      gap: 15px; /* Reduce gap on smaller screens */
    }
  
    .promo-card {
      max-width: 100%; /* Full width on small screens */
      padding: 15px; /* Slightly less padding */
    }
  
    .promo-card h3 {
      font-size: 16px; /* Slightly smaller text */
    }
  
    .promo-card p {
      font-size: 14px; /* Slightly smaller text */
    }
  }



/*Succes melding -----------------------------------------------------------------------------*/

/* De succeskaart zelf */
.retrosnacks-success-box {
    background-color: #f8c75d; /* Warme gele kleur */
    padding: 20px 30px;
    border-radius: 15px;
    box-shadow: 8px 8px 0 #333;
    border: 4px solid #333;
    text-align: center;
    max-width: 400px;
    width: 90%;
    color: #333;
    font-family: 'Courier New', Courier, monospace;
    box-sizing: border-box;
    margin: 50px auto;
}

.retrosnacks-success-box h2 {
    font-family: 'Bangers', cursive; /* Dikker retro-lettertype */
    font-size: 2em;
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #000; /* Zwart in plaats van koraalrood */
   
}

.retrosnacks-success-box p {
    font-size: 1em;
    line-height: 1.5;
    margin: 0 0 12px;
    font-weight: 700;
    color: #333;
}

.retrosnacks-spam-alert {
    font-style: italic;
    font-size: 1rem;
    color: #555;
    font-weight: 700;
    margin-bottom: 15px;
}

.retrosnacks-back-btn {
    display: inline-block;
    padding: 8px 16px;
    background-color: #8b5c04;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border: 3px solid #333;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.retrosnacks-back-btn:hover {
    background-color: #333;
    color: #f8c75d;
    border-color: #f8c75d;
    box-shadow: 4px 4px 0 #ff6f61;
    transform: translate(-2px, -2px);
}

/* Media queries voor responsiviteit */
@media (max-width: 768px) {
    .retrosnacks-success-box {
        max-width: 350px;
        padding: 15px 25px;
    }

    .retrosnacks-success-box h2 {
        font-size: 1.8em;
    }

    .retrosnacks-success-box p {
        font-size: 0.95em;
    }

    .retrosnacks-spam-alert {
        font-size: 0.85em;
    }

    .retrosnacks-back-btn {
        padding: 7px 14px;
    }
}

@media (max-width: 480px) {
    .retrosnacks-success-box {
        max-width: 300px;
        padding: 10px 20px;
    }

    .retrosnacks-success-box h2 {
        font-size: 1.5em;
    }

    .retrosnacks-success-box p {
        font-size: 0.9em;
    }

    .retrosnacks-spam-alert {
        font-size: 0.8em;
    }

    .retrosnacks-back-btn {
        padding: 6px 12px;
    }
}



/*loadin contact form button -------------------------------------------------*/
.submit-btn.submitting {
    background-color: #cccccc;
    cursor: not-allowed;
  }


/*actie knoppen -----------------------------------------------------------*/
.btn-acties {
            background: linear-gradient(135deg, #ffd900bd, #FFA500) !important;
            color: white !important;
            border: none !important;
            border-radius: 25px !important;
            padding: 8px 16px !important;
            font-weight: 500 !important;
            transition: all 0.3s ease !important;
            box-shadow: 0 2px 10px rgba(255, 107, 53, 0.3) !important;
            margin-right: 10px !important;
        }

        .btn-acties:hover {
            background: linear-gradient(135deg, #e55a2b, #e0851a) !important;
            color: white !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4) !important;
        }

        .btn-acties i {
            margin-right: 5px;
        }

        .mobile-acties-btn {
            background: linear-gradient(135deg, #ffd900bd, #FFA500);
            color: white;
            border: none;
            border-radius: 20px;
            padding: 6px 12px;
            font-size: 0.85rem;
            font-weight: 500;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
        }

        .mobile-acties-btn:hover {
            background: linear-gradient(135deg, #e55a2b, #e0851a);
            color: white;
            transform: translateY(-1px);
            box-shadow: 0 3px 12px rgba(255, 107, 53, 0.4);
        }

        /* Zwevend Actie Icoon */
        .custom-acties-float-btn {
            position: fixed;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1000;
            background: linear-gradient(135deg, #ffd900bd, #FFA500);
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4);
            transition: all 0.3s ease;
            animation: pulse 2s infinite;
        }

        .custom-acties-float-btn:hover {
            transform: translateY(-50%) scale(1.1);
            box-shadow: 0 6px 25px rgba(255, 107, 53, 0.6);
        }

        .custom-acties-float-btn i {
            color: white;
            font-size: 24px;
        }

        @keyframes pulse {
            0% { box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4); }
            50% { box-shadow: 0 4px 30px rgba(255, 107, 53, 0.8); }
            100% { box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4); }
        }

        /* Popup Overlay */
        .custom-acties-popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 1001;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .custom-acties-popup-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        /* Popup Container */
        .custom-acties-popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            background: white;
            border-radius: 15px;
            width: 90%;
            max-width: 800px;
            max-height: 80vh;
            overflow-y: auto;
            z-index: 1002;
            transition: all 0.3s ease;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        }

        .custom-acties-popup-overlay.active .custom-acties-popup {
            transform: translate(-50%, -50%) scale(1);
        }

        /* Popup Header */
        .custom-acties-popup-header {
            background: linear-gradient(135deg, #ffd900bd, #FFA500);
            color: white;
            padding: 20px;
            border-radius: 15px 15px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .custom-acties-popup-title {
            font-size: 1.5rem;
            font-weight: bold;
            margin: 0;
        }

        .custom-acties-close-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s ease;
        }

        .custom-acties-close-btn:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        /* Popup Content */
        .custom-acties-popup-content {
            padding: 20px;
        }

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

        .custom-actie-card {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border-left: 4px solid #ff6b35;
        }

        .custom-actie-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .custom-actie-icon {
            background: linear-gradient(135deg, #ffd900bd, #FFA500);
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
            font-size: 20px;
        }

        .custom-actie-title {
            font-size: 1.2rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }

        .custom-actie-description {
            color: #666;
            line-height: 1.5;
            margin-bottom: 15px;
        }

        .custom-actie-date {
            background: #e9ecef;
            color: #495057;
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 0.85rem;
            display: inline-block;
        }

        .custom-no-acties {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        .custom-no-acties i {
            font-size: 3rem;
            color: #ddd;
            margin-bottom: 15px;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .custom-acties-float-btn {
                width: 50px;
                height: 50px;
                left: 15px;
            }

            .custom-acties-float-btn i {
                font-size: 20px;
            }

            .custom-acties-popup {
                width: 95%;
                max-height: 85vh;
            }

            .custom-acties-popup-header {
                padding: 15px;
            }

            .custom-acties-popup-title {
                font-size: 1.3rem;
            }

            .custom-acties-popup-content {
                padding: 15px;
            }

            .custom-acties-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }
        }

        @media (max-width: 480px) {
            .custom-acties-float-btn {
                width: 45px;
                height: 45px;
            }

            .custom-acties-float-btn i {
                font-size: 18px;
            }
        }