/* Voeg de Google Fonts link toe aan het begin van je CSS-bestand */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

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

/* Zorg ervoor dat het lettertype 'Ubuntu' overal wordt toegepast */
body {
    font-family: 'Ubuntu', sans-serif;
    background-color: #F7FAFC; /* Moderne lichte achtergrondkleur */
    color: #333333; /* Bijna zwart voor tekst */
}

/* Basis styling voor teksten met Ubuntu lettertype */
body {
    font-family: 'Ubuntu', sans-serif;
    line-height: 1.6;
    padding: 20px; /* Voeg eventueel extra padding toe voor de hele pagina */
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 20px;  /* Bovenruimte voor kopjes */
    margin-bottom: 10px; /* Onderkopje wat minder ruimte */
    line-height: 1.3; /* Maak kopjes iets compacter */
}

p {
    margin: 10px 0 15px 0; /* Marges tussen paragrafen: bovenzijde iets minder, onderkant iets ruimer */
}

.main, .sidebar {
    padding: 10px; /* Zorg voor voldoende ruimte in de bodytekst */
}

/* Styling voor opsommingen */
ul, ol {
    margin: 10px 0 15px 20px; /* Voeg ruimte tussen lijsten en andere elementen toe, en laat ze inspringen */
    padding-left: 20px; /* Laat de tekst binnen de lijst inspringen */
}

li {
    margin-bottom: 5px; /* Voeg een kleine marge tussen items toe */
    line-height: 1.5; /* Zorg dat de tekst van de items prettig leesbaar is */
}



/* Styling voor de header */
header {
    background-color: #2C3E50;
    color: white;
    padding: 15px 10%; 
    display: flex;
    justify-content: space-between; 
    align-items: center;
    width: 100%; 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 15px; 
    text-decoration: none; 
}

.logo {
    width: 160px; 
    height: auto;
    cursor: pointer;
}

.slogan {
    font-size: 1rem;
    color: #ECF0F1; 
    font-weight: 300;
    white-space: nowrap; 
    margin-top: 5px; 
    margin-left: 10px; 
}

.hamburger {
    display: none;
    font-size: 24px;
    cursor: pointer;
    color: white;
}

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

nav ul li a {
    color: #ECF0F1; 
    text-decoration: none;
    font-weight: 500;
}

nav ul li a:hover {
    color: #1ABC9C;
}

nav ul li a.active {
    font-weight: bold;
    text-decoration: underline;
}

/* Container voor hoofdinhoud */
.container {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 10%; 
}

.main {
    width: 66.66%; 
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.sidebar {
    width: 30%; 
    padding: 20px;
    background-color: #ECF0F1;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.sidebar h3 {
    margin-bottom: 10px;
    font-size: 1.2em;
    color: #2C3E50;
}

.sidebar p {
    margin-bottom: 20px;
    color: #333333; 
}

/* Styling voor de cirkelvormige afbeelding */
.profile-picture {
    width: 200px; 
    height: 200px;
    border-radius: 50%; /* Zorgt ervoor dat de afbeelding cirkelvormig is */
    object-fit: cover; 
    display: block;
    margin: 0 auto 20px auto;
}

/* Hero-sectie */
.hero {
    background: url('images/hero-background.jpg') no-repeat center center/cover;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-top: -10px;
    position: relative; /* Zorgt ervoor dat het witte vlak zich binnen de hero-sectie bevindt */
}

.hero-content {
    background-color: white; /* Witte achtergrond voor de tekst */
    padding: 20px; /* Ruimte rondom de tekst */
    border-radius: 8px; /* Optioneel: ronde hoeken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optioneel: schaduweffect */
    color: #333; /* Tekstkleur */
    max-width: 80%; /* Beperkt de breedte van het witte vlak */
    text-align: center; /* Centraal uitlijnen van de tekst */
}


/* Standaard styling voor de hero-content */
.hero-content h1 {
    font-size: 2.5rem; /* Huidige grootte voor grotere schermen */
    margin-bottom: 10px;
}

.hero-content p {
    font-size: 1.2rem; /* Huidige grootte voor grotere schermen */
    line-height: 1.5; /* Zorg voor voldoende regelafstand */
}

/* Pas de tekstgrootte aan voor kleinere schermen */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 1.8rem; /* Kleinere titelgrootte voor mobiele apparaten */
    }

    .hero-content p {
        font-size: 1rem; /* Kleinere paragraafgrootte voor mobiele apparaten */
        line-height: 1.4; /* Verklein de regelafstand iets */
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 1.5rem; /* Nog kleinere titelgrootte voor zeer kleine schermen */
    }

    .hero-content p {
        font-size: 0.9rem; /* Nog kleinere paragraafgrootte voor zeer kleine schermen */
        line-height: 1.3; /* Verklein de regelafstand nog iets meer */
    }
}

/* Diensten / Services sectie styling */
.services {
    padding: 40px 10%;
    background-color: #fff;
    display: flex; /* Gebruik flexbox om de items naast elkaar te zetten */
    justify-content: space-between; /* Ruimte tussen de items */
    flex-wrap: wrap; /* Laat de items op een nieuwe regel vallen als er niet genoeg ruimte is */
}

.services-header {
    text-align: center;
    width: 100%; /* Zorg ervoor dat de header over de volledige breedte gaat */
    margin-bottom: 30px;
}

.services-header h2 {
    font-size: 2rem;
    color: #333333;
    margin-bottom: 10px;
}

.services-header .subtitle {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 20px;
}

/* Styling voor individuele service items */
.service-item {
    background-color: #f9f9f9; /* Optioneel: achtergrondkleur voor de items */
    flex: 1 1 calc(33.333% - 20px); /* Laat elk item 1/3 van de ruimte innemen */
    box-sizing: border-box; /* Houd rekening met padding en marges */
    padding: 20px;
    margin: 10px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Voeg een licht schaduweffect toe */
}

.service-item img {
    max-width: 100px; 
    margin-bottom: 10px;
}

.service-item h2 {
    font-size: 1.5rem;
    color: #2C3E50;
    margin-bottom: 10px;
}

.service-item p {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
}

/* Converterende tekst styling */
.services-conversion {
    text-align: center;
    width: 100%;
    margin-top: 40px;
}

.services-conversion .conversion-text {
    font-size: 1.2rem;
    color: #333333;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Media query voor grotere schermen */
@media (min-width: 768px) {
    .services-conversion {
        padding-left: 20%; /* Pas alleen padding toe op grotere schermen */
        padding-right: 20%; 
    }
}

/* Responsieve aanpassingen */
@media (max-width: 768px) {
    .services {
        padding: 20px 5%;
        flex-direction: column; /* Zet de service items onder elkaar op kleinere schermen */
    }

    .service-item {
        flex: 1 1 100%; /* Zorg dat de items de volledige breedte innemen op kleinere schermen */
    }

    .service-item img {
        max-width: 80px; /* Maak de iconen kleiner op kleine schermen */
    }
}


/* Projectenoverzicht */
.projects {
    padding: 40px 10%;
    background-color: #f1f1f1;
}

.projects h2 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 2rem;
}

.project-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
}

.project-item img {
    width: 150px;
    height: auto;
    margin-right: 20px;
    border-radius: 4px;
}

.project-item h3 {
    margin: 0;
    font-size: 1.2rem;
}

.project-item p {
    color: #666;
}


@media (max-width: 480px) {
    .hero {
        height: 30vh; /* Nog kleinere hoogte voor zeer kleine schermen */
    }

    .hero-content {
        padding: 10px; /* Nog kleinere padding */
    }

    .hero-content h1 {
        font-size: 1.2rem; /* Nog kleinere titel */
    }

    .hero-content p {
        font-size: 0.9rem; /* Nog kleinere beschrijving */
    }
}

/* Media queries voor responsieve lay-out */
@media (max-width: 768px) {
    .logo {
        width: 80px;
    }
    .slogan {
        display: none;
    }

    .hero {
        height: 40vh; /* Verklein de hoogte van de Hero-sectie */
        padding: 10px;
    }

    .hero-content {
        padding: 15px; /* Verklein de padding van het witte vlak */
        max-width: 90%; /* Laat het witte vlak wat breder worden */
    }

    .hero-content h1 {
        font-size: 1.5rem; /* Verklein de titel */
    }

    .hero-content p {
        font-size: 1rem; /* Verklein de beschrijving */
    }

    .hamburger {
        display: block;
    }

    #nav-menu {
        display: none;
        flex-direction: column;
        background-color: #2C3E50;
        position: absolute;
        top: 60px;
        right: 10%; 
        width: 80%; 
        padding: 15px;
        z-index: 999;
    }

    #nav-menu.show {
        display: flex;
    }

    #nav-menu ul {
        flex-direction: column;
        gap: 10px;
    }

    #nav-menu ul li a {
        color: #ECF0F1;
    }

    .container {
        flex-direction: column; /* Zet de kolommen onder elkaar */
    }
    
    .main, .sidebar {
        width: 100%; /* Zorg ervoor dat beide kolommen de volledige breedte innemen */
    }
}

/* Styling voor het contactformulier */
form {
    display: flex;
    flex-direction: column; /* Zet de velden onder elkaar */
    gap: 15px; /* Ruimte tussen de velden */
    max-width: 600px; /* Maximale breedte van het formulier */
    margin: 0 auto; /* Centraal uitlijnen */
    padding: 20px; /* Voeg wat padding toe voor binnenmarges */
    background-color: #fff; /* Witte achtergrond voor het formulier */
    border-radius: 8px; /* Ronde hoeken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Licht schaduweffect */
}

form label {
    margin-top: 10px; /* Ruimte boven elk formulierlabel */
    font-weight: bold; /* Maak de labels iets opvallender */
    color: #2C3E50; /* Donkerblauwe kleur voor de labels */
}

input[type="text"], input[type="email"], textarea {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc; /* Lichte grijze rand */
    border-radius: 5px;
    width: 100%; /* Zorg ervoor dat de velden de volledige breedte innemen */
    box-sizing: border-box;
}

textarea {
    resize: vertical; /* Sta toe dat het tekstvak wordt vergroot */
    height: 100px; /* Standaard hoogte voor meerdere regels */
}

button {
    padding: 15px;
    font-size: 18px;
    background-color: #1ABC9C; /* Moderne turquoise kleur voor de knop */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%; /* Zorg ervoor dat de knop de volledige breedte inneemt */
    margin-top: 20px; /* Ruimte boven de verzendknop */
}

button:hover {
    background-color: #16A085; /* Donkergroene tint bij hover */
}

button:active {
    background-color: #0E6655; /* Nog donkerdere tint bij klikken */
}

form p {
    margin-bottom: 10px; /* Ruimte onder de inleidende tekst boven het formulier */
    color: #333; /* Tekstkleur */
    font-size: 1rem; /* Zorg voor een goede leesbaarheid */
}

/* Ruimte toevoegen tussen de titel en bodytekst binnen de main-sectie */
.main h2 {
    margin-bottom: 15px; /* Voeg 15 pixels ruimte toe onder de titel */
}

.main p {
    margin-top: 10px; /* Voeg 10 pixels ruimte toe boven de eerste paragraaf */
}

/* Kleinere lettergrootte voor de tekst in de rechterkolom (sidebar) */
.sidebar {
    font-size: 0.9rem; /* Pas de lettergrootte aan naar wens, bijvoorbeeld 0.9rem */
    line-height: 1.4;  /* Optioneel: lijnhoogte aanpassen voor betere leesbaarheid */
}

/* Standaard grootte van de social media icoontjes */
.social-icons img {
    width: 40px;  /* Standaard breedte */
    height: 40px; /* Standaard hoogte */
    filter: invert(1); /* Optioneel: maak de icoontjes wit */
}

/* Responsieve aanpassing voor schermen kleiner dan 600px */
@media (max-width: 600px) {
    .social-icons img {
        width: 32px;  /* Maak de icoontjes iets kleiner op kleinere schermen */
        height: 32px;
    }
}

.footer-image {
    width: 350px; /* Pas deze waarde aan voor de gewenste breedte */
    height: auto; /* Zorg ervoor dat de hoogte zich proportioneel aanpast */
    border-radius: 5px; /* Optioneel: afronden van de hoeken van de afbeelding */
}

/* Styling voor de afbeelding in de main sectie van about.php */
.about-image {
    max-width: 100%; /* Zorg ervoor dat de afbeelding niet groter wordt dan de kolom */
    height: auto;    /* Behoud de verhoudingen */
    margin-top: 15px; /* Voeg 15px marge boven de afbeelding toe */
    border-radius: 5px; /* Optioneel: maak de hoeken van de afbeelding afgerond */
}

/* Dunne rand toevoegen aan de profielfoto */
.profile-picture {
    width: 200px; /* Huidige grootte van de afbeelding */
    height: 200px;
    border-radius: 50%; 
    object-fit: cover; 
    display: block;
    margin: 0 auto 20px auto; 
    border: 2px solid #ccc; /* Dunne grijze rand van 2px, pas de kleur aan indien gewenst */
}

/* Flexbox voor de footer-content */
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 10%;
    background-color: #2C3E50; /* Donkerblauwe achtergrondkleur */
    color: #ECF0F1; /* Lichte kleur voor de tekst */
    flex-wrap: wrap; /* Zorgt ervoor dat de kolommen op kleinere schermen onder elkaar komen */
}

/* Footer kolom styling */
.footer-column {
    flex: 1;
}

/* Contactgegevens styling */
.footer-column h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.footer-column p {
    font-size: 1rem;
    margin: 5px 0;
}

/* Styling voor e-mail link */
.footer-column a {
    color: #ECF0F1;
    text-decoration: none;
}

.footer-column a:hover {
    text-decoration: underline;
}

/* Zorg ervoor dat de kolommen de volledige breedte innemen op kleinere schermen */
@media (max-width: 768px) {
    .footer-column {
        width: 100%;
        text-align: left; /* Zorg ervoor dat de tekst links uitlijnt */
        margin: 0; /* Verwijder eventuele marges */
        padding: 0; /* Verwijder eventuele padding */
    }
}

    .footer-image {
        width: 100%; /* Afbeelding wordt aangepast aan de vensterbreedte */
        height: auto; /* Behoud de verhoudingen */
    }


/* Pas de grootte van de service-afbeeldingen aan */
.service-item img {
    max-width: 100%; /* Zorg ervoor dat de afbeelding niet groter wordt dan de container */
    height: auto; /* Houd de verhouding van de afbeelding intact */
    width: 250px; /* Stel een vaste breedte in, pas deze waarde aan zoals gewenst */
    object-fit: cover; /* Zorg dat de afbeelding zich aanpast zonder vervorming */
    border-radius: 8px; /* Optioneel: maak de hoeken afgerond */
    margin: 10px 0; /* Voeg wat marge toe om ruimte rond de afbeelding te creëren */
}

/* Media query for small screens */
@media (max-width: 768px) {
    .services {
        flex-direction: column; /* Arrange service items in a column */
        align-items: center;    /* Center the items */
    }

    .service-item {
        width: 100%; /* Ensure each service item takes full width */
        margin-bottom: 20px; /* Add some spacing between items */
    }
}

/* Media query for small screens */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column; /* Arrange footer columns in a column */
        align-items: center;    /* Center the columns */
        gap: 20px;              /* Add space between the columns */
    }

    .footer-column {
        width: 100%; /* Ensure each column takes the full width */
        text-align: center; /* Center the text within each column */
    }
}

/* Stijl voor de hyperlinks in de hero-content */
.hero-content a {
    color: #1ABC9C; /* Groene kleur */
    font-weight: 600; /* Maak de tekst iets vetter */
    text-decoration: none; /* Verwijdert de onderstreping */
}

.hero-content a:hover {
    color: #16A085; /* Kleur bij hover */
    text-decoration: none; /* Zorgt ervoor dat er bij hover geen streepje verschijnt */
}

/* Voeg marge boven het contactformulier toe */
form {
    margin-top: 30px; /* Pas de waarde aan naar de gewenste ruimte */
}

/* Styling voor de succesmelding */
.success-message {
    background-color: #DFF2BF; /* Lichte groene achtergrond voor succes */
    color: #4F8A10; /* Donkergroene tekstkleur */
    border: 1px solid #4F8A10; /* Donkergroene rand */
    padding: 15px;
    margin: 20px 0; /* Ruimte boven en onder de melding */
    border-radius: 5px; /* Afgeronde hoeken */
    font-weight: bold; /* Vetgedrukte tekst */
    text-align: center; /* Centreren van de tekst */
}

/* Styling voor de foutmelding */
.error-message {
    background-color: #FFBABA; /* Lichte rode achtergrond voor fouten */
    color: #D8000C; /* Donkerrode tekstkleur */
    border: 1px solid #D8000C; /* Donkerrode rand */
    padding: 15px;
    margin: 20px 0; /* Ruimte boven en onder de melding */
    border-radius: 5px; /* Afgeronde hoeken */
    font-weight: bold; /* Vetgedrukte tekst */
    text-align: center; /* Centreren van de tekst */
}

/* Portfolio container styling */
.portfolio-container {
    padding: 20px;
    text-align: center;
    background-color: #f9f9f9;
}

/* Stripverhaal grid layout met max 5 tegels */
.portfolio-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Max 5 kolommen, maar flexibel */
    gap: 10px;
    justify-content: center; /* Centreert de tegels in de container */
    max-width: 1200px; /* Max breedte van de galerij container */
    margin: 0 auto; /* Centreer de gehele galerij */
}

/* Stijl voor de stripafbeeldingen */
.portfolio-item {
    position: relative;
    transition: transform 0.3s;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    aspect-ratio: auto 1 / 1; /* Automatische verhouding aanpassen */
}

.portfolio-item img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Zorgt ervoor dat de afbeelding zich aanpast zonder te vervormen */
    display: block;
}

/* Bij hover lichte vergroting van de tegel */
.portfolio-item:hover {
    transform: scale(1.05);
}

/* Lightbox styling */
.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.lightbox-content {
    max-width: 80%;
    max-height: 80%;
    border-radius: 8px;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 3rem;
    cursor: pointer;
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 24px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Responsieve styling */
@media (max-width: 1200px) {
    .portfolio-gallery {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Aanpassen bij kleinere schermen */
    }
}

@media (max-width: 768px) {
    .portfolio-gallery {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Nog kleinere tegels bij smallere schermen */
    }
}

@media (max-width: 480px) {
    .portfolio-gallery {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Kleinere tegels voor mobiele schermen */
    }
}



/* Styling voor de body-text sectie met een kader */
.body-text {
    max-width: 1000px; /* Bepaalde breedte om tekst leesbaar te houden */
    margin: 0 auto 40px; /* Centreer de container en voeg marge onderaan toe */
    padding: 20px;
    background-color: #ffffff; /* Achtergrondkleur voor de gehele sectie */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Schaduw voor de gehele sectie */
    text-align: center; /* Centreert de h2-titel */
}

.body-text h2 {
    margin-bottom: 20px; /* Ruimte onder de gecentreerde titel */
    font-size: 2em;
    font-weight: bold;
}

/* Container voor de paragrafen zonder kader */
.paragraaf-content {
    text-align: left; /* Zorg dat de paragraaftekst links uitgelijnd is */
}

/* Styling voor de individuele paragraaf items */
.paragraaf-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px; /* Ruimte tussen de paragraaf items voor leesbaarheid */
    padding: 10px 0; /* Voeg eventueel padding toe, maar geen kader of schaduw */
}

/* Zorg ervoor dat de afbeelding aan de linkerkant of rechterkant wisselt */
.paragraaf-item:nth-child(even) {
    flex-direction: row-reverse; /* Afbeelding rechts, tekst links */
}

.paragraaf-item:nth-child(odd) {
    flex-direction: row; /* Afbeelding links, tekst rechts */
}

.paragraaf-text {
    width: 50%;
    padding: 20px;
}

.paragraaf-text h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.5em;
    text-align: left; /* Houd de h3 titels links uitgelijnd binnen de paragraaf */
    color: #333
    ; /* Zorg dat de kleur bij de stijl van de website past */
}

.paragraaf-image {
    width: 50%;
    display: flex;
    justify-content: center;
}

.paragraaf-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.paragraaf-button {
    background-color: #f1d600;
    border: none;
    padding: 10px 20px;
    margin-top: 10px;
    cursor: pointer;
    color: #000;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none; /* Verwijdert de onderstreping */
    display: inline-block; /* Zorgt ervoor dat de knop zich als een blok gedraagt */
    text-align: center; /* Centreert de tekst in de knop */
    width: fit-content; /* Zorgt ervoor dat de knop zich aanpast aan de inhoud zonder te breed te worden */
}

.paragraaf-button:hover {
    background-color: #e1c600;
    text-decoration: none; /* Zorg dat de tekst niet onderstreept wordt bij hover */
}

@media (max-width: 768px) {
    .paragraaf-item {
        flex-direction: column !important; /* Stapel de items onder elkaar */
    }

    .paragraaf-text, .paragraaf-image {
        width: 100% !important; /* Neem de volledige breedte van het scherm in */
        text-align: center !important; /* Centreer de inhoud voor een mooiere lay-out */
    }

    .paragraaf-text h3 {
        text-align: center !important; /* Centreer de h3 titels op kleine schermen */
    }

    .paragraaf-image {
        margin-top: 10px !important; /* Voeg wat ruimte toe boven de afbeelding */
    }
}

/* Voeg extra marge toe tussen de secties */
.services {
    margin-bottom: 40px; /* Voeg marge aan de onderkant van de services-sectie toe */
}

.body-text {
    margin-top: 40px; /* Voeg marge aan de bovenkant van de body-text-sectie toe */
}

/* Styling voor de subtitel onder de h2-titel */
.subtitle {
    font-size: 1.2em; /* Maak de tekst iets groter dan de standaard paragraaftekst */
    color: #666; /* Een lichtere kleur om te onderscheiden van de h2-titel */
    margin: -10px 0 20px 0; /* Ruimte boven en onder de subtitel aanpassen */
    text-align: center; /* Centreer de tekst */
}

/* Styling voor de quote */
.quote {
    font-family: 'Georgia', serif; /* Of 'Merriweather', serif als je dat wilt gebruiken */
    font-style: italic;
    font-size: 1.1rem;
    color: #2C3E50;
    margin-top: 20px;
    margin-bottom: 25px; /* Voeg extra ruimte onder de quote toe */
    padding-left: 30px;
    position: relative;
}

.quote::before {
    content: "“"; /* Beginquote */
    font-size: 3rem; /* Maak de apostrof groter */
    color: #1ABC9C;
    position: absolute;
    left: 5px;
    top: -20px;
}

/* Zorg ervoor dat de Instagram-afbeelding goed past binnen de .body-text sectie */
.instagram-feed {
    text-align: center; /* Centreer de afbeelding binnen de sectie */
}

.instagram-feed img {
    max-width: 100%; /* Zorg ervoor dat de afbeelding zich aanpast aan de breedte van de container */
    height: auto; 
    border-radius: 5px; /* Afronding van de hoeken */
    margin: 10px 0; /* Voeg wat witruimte rond de afbeelding toe */
}

/* Speelse styling voor <hr> */
hr {
    border: none; /* Verwijder de standaard rand */
    height: 2px; /* Dikte van de lijn */
    width: 50%; /* Zorg ervoor dat de <hr> niet te breed is */
    background-color: #1BBC9C; /* Vaste kleur in plaats van gradient */
    margin: 40px auto; /* Voldoende ruimte boven en onder, en centreer de <hr> */
    border-radius: 50px; /* Maak de lijn afgerond voor een speelse uitstraling */
}

/* Workshop data styling */
.workshop-data ul {
    list-style: none;
    padding: 0;
    margin: 0; /* Verwijder eventuele marges */
}

.workshop-data ul li {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Zorgt voor volledige linkeruitlijning */
    padding: 0; /* Verwijder alle padding */
}

/* Workshop item styling (icoon + datum/tijd) */
.workshop-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0; /* Zorg dat het links helemaal uitlijnt */
}

.calendar-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.date-info {
    font-size: 1rem;
    line-height: 1.4;
}

/* Styling voor de inschrijfknop */
.inschrijf-link {
    padding: 8px 12px;
    background-color: #1ABC9C;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: bold;
    margin-top: 10px;
    margin-left: 0; /* Geen extra marge links voor uitlijning */
}

.inschrijf-link:hover {
    background-color: #16A085;
}

/* Standaard lightbox stijl, verborgen */
.lightbox {
    display: none; /* Verberg de lightbox */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Donkere achtergrond */
    justify-content: center;
    align-items: center;
    padding: 10px; /* Voeg padding toe voor kleinere schermen */
}

/* Stijl voor de inhoud van de lightbox */
.lightbox-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
    max-height: 90vh; /* Max hoogte zodat het formulier niet buiten het scherm valt */
    overflow-y: auto; /* Scroll als de content te hoog is */
}

/* Sluitknop stijl */
.close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2rem;
    cursor: pointer;
}

/* Formulierstijl binnen de lightbox */
.lightbox-content form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.lightbox-content input, .lightbox-content select {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%; /* Zorg dat de formuliervelden altijd 100% breed zijn */
    box-sizing: border-box; /* Zorg ervoor dat padding en borders worden meegerekend in de breedte */
}

.lightbox-content button {
    padding: 10px;
    font-size: 18px;
    background-color: #1ABC9C;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%; /* Zorg dat de knop altijd 100% breed is */
}

.lightbox-content button:hover {
    background-color: #16A085;
}

/* Media query voor kleinere schermen */
@media (max-width: 600px) {
    .lightbox-content {
        width: 90%; /* Zorg dat de lightbox-content smaller is op mobiele apparaten */
        padding: 15px; /* Iets minder padding voor kleine schermen */
    }

    .close {
        font-size: 1.5rem; /* Maak de sluitknop iets kleiner op mobiele apparaten */
        right: 15px;
    }
}

/* Container voor de reCAPTCHA widget */
.recaptcha-container {
    transform: scale(0.85); /* Pas deze waarde aan voor de schaalgrootte */
    transform-origin: 0 0; /* Zorg ervoor dat de widget vanaf de bovenlinkerhoek schaalt */
    width: 100%; /* Pas de container breedte aan */
    height: auto; /* De hoogte wordt automatisch aangepast */
}

@media (max-width: 480px) {
    .recaptcha-container {
        transform: scale(0.75); /* Nog kleiner schalen voor zeer smalle schermen */
    }
}

/* Algemene styling voor de footer */
footer {
    background-color: #2C3E50; /* Donkerblauwe achtergrondkleur */
    color: #ECF0F1; /* Witte tekstkleur */
    padding: 30px 10%;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    gap: 40px; /* Vergrote ruimte tussen de kolommen */
    max-width: 1200px;
    margin: 0 auto;
}

.footer-column {
    flex: 1;
    text-align: left;
    margin: 0; /* Verwijder marges */
    padding: 0; /* Verwijder padding */
}

/* Styling voor de titels in de footer */
.footer-column h3 {
    margin-bottom: 10px;
    color: #1ABC9C; /* Accentkleur voor de titels */
}

/* Styling voor tekst en links in de footer */
.footer-column p,
.footer-column a {
    color: #ECF0F1;
    text-decoration: none;
    margin: 5px 0; /* Zorg voor consistente marges */
}

/* Hover-effect voor links in de footer */
.footer-column a:hover {
    color: #1ABC9C; /* Hover-effect voor de links */
}

/* Styling voor de afbeelding in de footer */
.footer-image {
    width: 100%;
    max-width: 250px;
    height: auto;
    border-radius: 8px; /* Optioneel: maak de hoeken van de afbeelding afgerond */
    margin: 0; /* Verwijder marges rondom de afbeelding */
}

/* Styling voor social media icoontjes */
.social-icons a {
    display: inline-block;
    margin-right: 10px;
}

.social-icons img {
    width: 24px;
    height: 24px;
}

/* Subfooter styling */
.subfooter {
    text-align: center;
    
    padding: 15px 0;
    margin-top: 20px;
}

.subfooter a {
    color: #ECF0F1; /* Witte kleur voor de links */
    text-decoration: none;
    margin: 0 10px;
}

.subfooter a:hover {
    color: #1ABC9C;
}

/* Algemene styling voor de nieuwsbriefsectie */
.newsletter-section {
    background-color: #f6fafd; /* Lichtgrijze achtergrondkleur */
    padding: 50px 0;
    text-align: center;
}

.newsletter-container {
    background-color: #fff; /* Witte achtergrond voor de inschrijfkaart */
    max-width: 800px;
    margin: 0 auto;
    padding: 40px;
    border-radius: 8px; /* Afgeronde hoeken */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Schaduweffect voor het grote vlak */
    text-align: center;
}

.newsletter-image {
    max-width: 100%; /* Zorgt ervoor dat de afbeelding zich aanpast aan de breedte van de container */
    height: auto;
    margin-bottom: 0px; /* Ruimte onder de afbeelding */
}

.newsletter-content h3 {
    font-size: 1.8rem;
    color: #2C3E50; /* Donkerblauw voor de koptekst */
    margin-bottom: 15px;
}

.newsletter-content p {
    font-size: 1rem;
    color: #666;
    margin-bottom: 30px;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Ruimte tussen het invoerveld en de knop */
    max-width: 400px;
    margin: 0 auto;
    box-shadow: none; /* Verwijder schaduw van het formulier */
    border: none; /* Verwijder eventuele randen */
}

.newsletter-form input[type="email"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd; /* Rand om het invoerveld */
    border-radius: 4px;
    font-size: 1rem;
    box-shadow: none; /* Verwijder eventueel schaduw van het invoerveld */
    outline: none; /* Zorg ervoor dat er geen outline verschijnt */
}

.newsletter-form button {
    padding: 10px 20px;
    background-color: #1ABC9C; /* Huisstijl groen */
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    box-shadow: none; /* Verwijder eventueel schaduw van de knop */
    outline: none; /* Zorg ervoor dat er geen outline verschijnt */
}

.newsletter-form button:hover {
    background-color: #16A085; /* Donkerdere tint bij hover */
}

/* Media queries voor responsieve weergave */
@media (max-width: 768px) {
    .newsletter-container {
        padding: 30px;
    }

    .newsletter-content h3 {
        font-size: 1.5rem;
    }

    .newsletter-form {
        max-width: 100%;
    }
}

.not-found {
    text-align: center;
    margin-top: 50px;
}

.not-found-image {
    max-width: 80%;
    height: auto;
    margin-bottom: 20px;
}

.not-found p {
    font-size: 1.5rem;
    color: #333;
}

@media (max-width: 480px) {
    .subfooter a {
        font-size: 0.8rem; /* Pas deze waarde aan voor de gewenste grootte */
    }
}

input, textarea, button {
    font-family: inherit;
    font-size: inherit;
}


.single-column-main {
    width: 80%; /* Maak de enkele kolom breder */
    max-width: 900px; /* Of pas deze waarde aan naar wens */
    margin: 0 auto; /* Centreer de kolom */
}