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

html {
    overflow-x: hidden;
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

/* Lenis Essential Styles */
html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

body {
    overflow-x: visible;
    text-decoration: none;
}

a {
    text-decoration: none;
}

@media (max-width: 900px) {

    .mobile-menu-items,
    .header-title-desktop,
    .nav-cta-desktop,
    .header-subtitle-desktop,
    .header-buttons-desktop,
    .portretfoto-container-desktop,
    .portretfoto-text-desktop,
    .portretfoto-desktop,
    .gemeente-dedicated-desktop,
    .introduction-desktop-container,
    .gradient-desktop,
    .sinds-container,
    .over-desktop,
    .over-desktop-slider-section,
    .line-1-desktop,
    .visie-desktop,
    .line-2-desktop,
    .projecten-desktop,
    .over-desktop-lightbox,
    .leefwereld-desktop,
    .praktisch-desktop,
    .media-desktop {

        display: none;
    }

    section:not(.gradient):not(.gradient-dynamic):not(.gradient-dynamic-blumeneis):not(.gradient-dynamic-schiffepommes):not(.gradient-dynamic-vriendschap):not(.gradient-dynamic-1000diploma):not(.gradient-desktop):not(.gemeente-dedicated):not(.header) {
        background-color: white;
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .projecten-container {
        display: flex;
        /* Changed from grid for mobile to stack vertically */
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 100%;
    }

    body {
        margin: 20px;
    }

    .desktop-container {
        display: none;
    }

    /* Page Transition Overlay */
    .page-transition-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: white;
        z-index: 9999;
        pointer-events: none;
        transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
        opacity: 1;
        visibility: visible;
    }

    @font-face {
        font-family: 'Fredoka-Regular';
        src: url('fonts/Fredoka-Regular.ttf') format('ttf');
        font-weight: 400;
        /* Standard weight for Regular */
        font-style: normal;
    }

    @font-face {
        font-family: 'Fredoka-Light';
        src: url('fonts/Fredoka-Light.ttf') format('ttf');
        font-weight: 300;
        /* Standard weight for Light */
        font-style: normal;
    }

    @font-face {
        font-family: 'Fredoka-Medium';
        src: url('fonts/Fredoka-Medium.ttf') format('ttf');
        font-weight: 500;
        /* Standard weight for Medium */
        font-style: normal;
    }

    @font-face {
        font-family: 'Fredoka-SemiBold';
        src: url('fonts/Fredoka-SemiBold.ttf') format('ttf');
        font-weight: 600;
        /* Standard weight for SemiBold */
        font-style: normal;
    }

    @font-face {
        font-family: 'Fredoka-Bold';
        src: url('fonts/Fredoka-Bold.ttf') format('ttf');
        font-weight: 700;
        /* Standard weight for Bold */
        font-style: normal;
    }

    @font-face {
        font-family: 'Arial-regular';
        src: local('Arial'), local('Arial Regular'), local('ArialMT');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Arial Light';
        src: local('Arial Light'), local('Arial-Light'), local('Arial Light MT'), local('ArialMT');
        font-weight: 300;
        font-style: normal;
        font-display: swap;
    }

    .nav-logo {
        height: 15px;
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0s linear;

    }

    .nav-top-blocker {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px;
        background: linear-gradient(to bottom, white 50px, transparent 100%);
        z-index: 999;
        /* Net onder de nav (1000) maar boven de content */
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        pointer-events: none;
    }

    /* Hide top blocker on project pages for mobile as per request */
    body.page-blumeneis .nav-top-blocker,
    body.page-schiffepommes .nav-top-blocker,
    body.page-vriendschap .nav-top-blocker,
    body.page-1000diploma .nav-top-blocker {
        display: none !important;
    }

    .nav-top-blocker.visible {
        opacity: 1;
    }

    nav {
        background-color: white;
        border: 1px solid rgb(240, 240, 240);
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.03);
        border-radius: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        align-content: flex-start;
        padding: 20px;
        padding-top: 15px;
        position: relative;
        overflow: hidden;
        min-height: 80px;
        max-height: 80px;
        transition: max-height 0.7s cubic-bezier(0.4, 0, 0.2, 1);
        position: fixed;
        top: 16px;
        left: 16px;
        right: 16px;
        z-index: 1000;

    }

    nav.open {
        max-height: 900px;
        border-radius: 20px;
        transition: border-radius 0.7s cubic-bezier(0.4, 0, 0.2, 1);

    }

    body>*:not(nav) {
        filter: blur(0);
        transition: filter 0.4s ease-in-out;
    }

    body.menu-open>*:not(nav) {
        filter: blur(4px);
        pointer-events: none;
        user-select: none;
    }

    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0);
        z-index: 999;
        pointer-events: none;
        transition: background-color 0.4s ease-in-out;
    }

    body.menu-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.2);
        z-index: 999;
        pointer-events: none;
        transition: background-color 0.4s ease-in-out;
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        width: 100%;
        background-color: white;

        margin-top: 0;
        z-index: 10;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, max-height 0.45s ease, margin-top 0.45s ease, visibility 0s linear 0.45s;
        pointer-events: none;
        padding-top: 0;
        gap: 16px;
        max-height: 0;
        overflow: hidden;


    }

    .nav-links.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        margin-top: 64px;
        max-height: 800px;
        transition-delay: 0s;

    }

    .nav-links a {

        text-decoration: none;
        color: black;
        font-family: arial, sans-serif;
    }

    .nav-button {
        background: #FFEDF2;
        height: 48px;
        padding: 0px 16px;
        border: 1px solid #FFEDF2;
        border-radius: 999px;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: background 0.25s ease-in-out, color 0.25s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0s linear;
    }



    .nav-button svg {
        fill: #FF5E85;
        transition: fill 0.25s ease-in-out;
    }

    .nav-button svg rect {
        transform-origin: center;
        transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
    }

    .nav-button:hover svg {
        fill: #FF5E85;
        transition: fill 0.2s ease-in-out;
    }

    .nav-button:hover {
        background: white;
        height: 48px;
        padding: 0px 16px;
        border: 1px solid #FF5E85;
        border-radius: 999px;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: background 0.2s ease-in-out;

    }

    .nav-button p {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 13px;
        color: #FF5E85;
        transition: color 0.25s ease-in-out;
    }

    .nav-button.open p {
        color: #FF5E85;
    }

    .nav-button .icon-close {
        display: none;
        height: 14px;
        width: auto;
    }

    .nav-button.open .icon-hamburger {
        display: none;
    }

    .nav-button.open .icon-close {
        display: block;
    }

    .nav-button:hover p {
        color: #FF5E85;
        transition: color 0.2s ease-in-out;
    }

    .nav-link {
        margin-left: 0px;
        margin-right: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s ease;
        cursor: pointer;
        text-decoration: none;
    }

    .nav-link,
    .nav-link a {
        font-family: arial, sans-serif;
        font-size: 20px;
        color: rgb(39, 39, 39);
    }

    .nav-link svg {
        display: none;
    }

    .nav-links .nav-cta {
        margin-top: 48px;
        text-align: center;
        justify-content: center;
        margin-left: 16px;
        margin-right: 16px;
        background: #FF5E85;
        height: 48px;
        padding: 0px 16px;
        border: 0px solid#FF5E85;
        border-radius: 999px;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: background 0.2s ease-in-out;
        color: white;
        font-family: 'Fredoka-Regular', sans-serif;

    }


    .nav-icons {
        justify-content: center;
        display: flex;
        align-items: center;
        align-content: center;
        gap: 8px;
        margin-top: 0px;
        margin-bottom: 24px;
    }

    /* Scoped blue theme for Blumeneis page */
    .page-blumeneis .nav-button {
        background: #c9dee4;
        border-color: #c9dee4;
    }

    .page-blumeneis .nav-button:hover {
        background: white;
        border-color: #065E79;
    }

    .page-blumeneis .nav-button p,
    .page-blumeneis .nav-button.open p,
    .page-blumeneis .nav-button:hover p {
        color: #065E79;
    }

    .page-blumeneis .nav-button svg,
    .page-blumeneis .nav-button:hover svg {
        fill: #065E79;
    }

    .page-blumeneis .nav-cta {
        background: #065E79;
        border-color: #065E79;
    }

    .page-blumeneis .nav-cta:hover {
        color: #065E79;
        background-color: transparent;
    }

    .page-blumeneis .nav-cta-icon {
        color: #065E79;
    }

    .page-blumeneis .nav-cta:hover .nav-cta-icon {
        background-color: #065E79;
        color: #ffffff;
    }

    /* Optional: Swap to a blue version of the close icon for this theme */
    .page-blumeneis .nav-button.open .icon-close {
        /* content: url('vectors/close-icon-blue.svg'); */
    }

    .page-blumeneis .nav-icon-instagram,
    .page-blumeneis .nav-icon-linkedin {
        fill: #065E79;
    }

    /* Scoped blue theme for Blumeneis page - Leefwereld Slider Nav */
    .page-blumeneis .leefwereld-slider-nav .slider-nav-btn {
        background: #c9dee4;
        border-color: #c9dee4;
        color: #065E79;
    }

    .page-blumeneis .leefwereld-slider-nav .slider-nav-btn:hover {
        background: transparent;
        border-color: #065E79;
        color: #065E79;
    }

    .page-blumeneis .leefwereld-slider-nav .slider-nav-btn svg {
        fill: #065E79;
    }

    /* Base state for logo and menu button (visible) */
    .page-blumeneis .nav-logo,
    .page-blumeneis .nav-button {
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0s linear;
    }

    /* Base hidden state for the "Terug" button */
    .page-blumeneis .nav-terug-button {
        opacity: 0;
        transform: translateY(100%);
        /* Start from below the nav */
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0s linear 0.3s;
        position: absolute;
        left: 20px;
        top: 16px;
        /* Visibility hides after 0.3s */
    }

    /* Scrolled state for logo and menu button (hidden) */
    .page-blumeneis nav.scrolled-mode .nav-logo,
    .page-blumeneis nav.scrolled-mode .nav-button {
        opacity: 0;
        transform: translateY(-100%);
        /* Move up and out */
        visibility: hidden;
        pointer-events: none;
        transition-delay: 0s, 0s, 0.3s;
        /* Visibility hides after 0.3s */
    }

    /* Scrolled state for the "Terug" button (visible) */
    .page-blumeneis nav.scrolled-mode .nav-terug-button {
        opacity: 1;
        transform: translateY(0);
        /* Move to its natural position */
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s, 0s, 0s;
        /* Visibility shows immediately */
    }

    .nav-icon-instagram {
        height: 32px;
        width: auto;
        fill: #FF5E85;
        transition: fill 0.2s ease-in-out;
    }

    .nav-icon-linkedin {
        height: 24px;
        width: auto;
        fill: #FF5E85;
        transition: fill 0.2s ease-in-out;
    }

    .gradient {
        background: linear-gradient(180deg, #ff5e8626 0%, #ff5e8600 100%);
        position: absolute;
        left: -0px;
        right: -0px;
        top: -0px;
        height: 30vh;
        z-index: -1;
    }

    .gradient-dynamic-blumeneis,
    .gradient-dynamic-schiffepommes,
    .gradient-dynamic-vriendschap,
    .gradient-dynamic-1000diploma {
        background: linear-gradient(180deg, #065e7921 0%, #065e7900 100%), url('images/afbeeldingen/projecten/blumeneis/Afbeelding1.jpeg') no-repeat center top / cover;
        position: sticky;
        top: 0px;
        margin-top: -20px;
        width: 100vw;
        margin-left: -20px;
        height: 40vh;
        will-change: filter, transform;
        z-index: -1;
    }

    .gradient-dynamic-vriendschap {
        background: linear-gradient(180deg, #065e7921 0%, #065e7900 100%), url('images/afbeeldingen/projecten/dvdv2024/Afbeelding1.jpg') no-repeat center top / cover;
    }


    .gradient-dynamic-schiffepommes {
        background: linear-gradient(180deg, #065e7921 0%, #065e7900 100%), url('images/afbeeldingen/projecten/schiffepommes/Afbeelding2.jpeg') no-repeat center top / cover;
    }

    .gradient-dynamic-vriendschap {
        background: linear-gradient(180deg, #065e7921 0%, #065e7900 100%), url('images/afbeeldingen/projecten/dvdv2024/Afbeelding1.jpg') no-repeat center top / cover;
    }

    .gradient-dynamic-1000diploma {
        background: linear-gradient(180deg, #065e7921 0%, #065e7900 100%), url('images/afbeeldingen/projecten/1000diploma/Afbeelding5.jpg') no-repeat center top / cover;
    }

    /* Apply shadow only to the first section that slides over the sticky background image */
    .gradient-dynamic-blumeneis+section,
    .gradient-dynamic-schiffepommes+section,
    .gradient-dynamic-vriendschap+section,
    .gradient-dynamic-1000diploma+section {
        box-shadow: 0px -10px 20px -10px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 1;
    }

    .gradient-dynamic-schiffepommes {
        background: linear-gradient(180deg, #065e7921 0%, #065e7900 100%), url('images/afbeeldingen/projecten/schiffepommes/Afbeelding2.jpeg') no-repeat center top / cover;
    }

    .dynamic-backtohome-button {
        color: #065E79;
        background: #c9dee4;
        height: 40px;
        padding: 0px 16px;
        border: 1px solid transparent;
        border-radius: 999px;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        font-size: 16px;
        transition: background 0.25s ease-in-out, color 0.25s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0s linear;
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        text-decoration: none;
        width: fit-content;

    }

    .dynamic-backtohome-button:hover {
        background: transparent;
        height: 48px;
        padding: 0px 16px;
        border: 1px solid #065E79;
        border-radius: 999px;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: background 0.25s ease-in-out, color 0.25s ease-in-out;
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        width: fit-content;
    }



    .dynamic-project-title {
        margin-top: 8px;
        font-family: 'Fredoka-SemiBold';
        font-size: 32px;
        color: #065E79;
        opacity: 0;
        transform: translateY(10px);
        animation: headerFadeUp 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        animation-delay: 0.2s;
    }

    .dynamic-project-jaartal {
        margin-top: 48px;
        font-family: 'Fredoka-Regular';
        font-size: 16px;
        color: #065E79;
        opacity: 0;
        transform: translateY(10px);
        animation: headerFadeUp 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        animation-delay: 0.1s;
    }

    .breadcrumbs {
        margin-top: 48px;
        font-family: 'Arial Light', Arial, Helvetica, sans-serif;
        font-size: 16px;
        color: #afafaf;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .dynamic-projecten-jaartal {
        margin-top: 48px;
        font-family: 'Arial Light', Arial, Helvetica, sans-serif;
        font-size: 16px;
        color: #afafaf;
        display: flex;
        align-items: center;
    }

    .dynamic-project-text {
        margin-top: 24px;
        font-family: 'Arial Light', Arial, Helvetica, sans-serif;
        font-weight: 10;
        font-size: 16px;
        line-height: 1.7em;
        color: #333333;
        transition: max-height 0.35s ease;
        position: relative;
    }

    .breadcrumbs a {
        font-family: 'Arial Light', Arial, Helvetica, sans-serif;
        font-size: 16px;
        color: #afafaf;
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
    }

    .breadcrumb-impact .short-text {
        display: none;
    }

    @media (max-width: 900px) {
        .breadcrumb-impact .full-text {
            display: none;
            width: 0px;
            font-size: 0px;
        }

        .breadcrumb-impact .short-text {
            display: inline;
        }
    }

    .header-projects {
        padding-top: 48px;
        margin-top: -24px;
        border-radius: 20px;
        box-shadow: 0px -15px 30px -15px rgba(0, 0, 0, 0.2);
        position: relative;
        z-index: 1;
    }


    .header {
        margin-top: 164px;
    }

    .header-text {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 48px;
    }

    .header-title {
        text-align: center;
        font-family: 'Fredoka-SemiBold';
        font-size: 32px;
        color: #FF5E85;
        opacity: 0;
        transform: translateY(10px);
        animation: headerFadeUp 1.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        animation-delay: 0.15s;
    }

    .header-subtitle {
        text-align: center;
        font-family: 'Fredoka-Medium';
        font-size: 16px;
        color: #FF5E85;
        opacity: 0;
        transform: translateY(10px);
        animation: headerFadeUp 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        animation-delay: 0.3s;
    }

    .header-buttons {
        opacity: 0;
        transform: translateY(10px);
        animation: headerFadeUp 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        animation-delay: 0.45s;
    }

    @keyframes headerFadeUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .header-cta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        border-radius: 999px;
        border: 1px solid #FF5E85;
        background-color: #FF5E85;
        padding: 0px 0px;
        height: 48px;
        padding-left: 16px;
        padding-right: 8px;
        color: white;
        font-size: 13px;
        font-family: 'Fredoka-Regular', sans-serif;
        width: fit-content;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
        cursor: pointer;
        text-decoration: none;
    }

    .header-cta:hover {
        border: 1px solid #FF5E85;
        background-color: transparent;
        color: #FF5E85;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;

    }

    .header-cta-icon {
        box-sizing: content-box;
        height: 16px;
        width: 16px;
        color: #FF5E85;
        padding: 8px;
        background-color: #ffffff;
        border-radius: 999px;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    }

    .header-cta:hover .header-cta-icon {
        background-color: #FF5E85;
        color: #ffffff;
    }

    .header-buttons {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: fit-content;
        justify-content: center;
        margin: 0 auto;
    }


    .header-cta-secondary {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 999px;
        border: 1px solid #FFEDF2;
        background-color: #FFEDF2;
        padding: 0px 16px;
        height: 48px;
        color: #FF5E85;
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 13px;
        width: auto;
        transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
        cursor: pointer;
        text-decoration: none;
    }

    .header-cta-secondary:hover {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 999px;
        border: 1px solid #FF5E85;
        background-color: white;
        padding: 0px 16px;
        height: 48px;
        color: #FF5E85;
        width: auto;
        transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;


    }

    .portretfoto-container {
        margin-top: 80px;

    }

    .portretfoto-text {
        margin-bottom: 24px;
        margin-left: 0px;
        opacity: 0;
        filter: blur(10px);
        animation: portretfotoBlurIn 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        animation-delay: 0.45s;
    }



    .portretfoto {

        background-color: #E1EFF7;
        border-radius: 16px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        height: 200px;
        overflow: visible;
        opacity: 0;
        filter: blur(10px);
        animation: portretfotoBlurIn 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        animation-delay: 0.5s;
    }

    .portretfoto img {
        width: 220px;
        max-width: 720px;
        transform: none;
        opacity: 0;
        filter: blur(10px);
        animation: portretfotoBlurIn 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        animation-delay: 0.55s;
    }

    @keyframes portretfotoBlurIn {
        from {
            opacity: 0;
            filter: blur(10px);
        }

        to {
            opacity: 1;
            filter: blur(0);
        }
    }

    .gemeente-dedicated {
        margin-top: 16px;
        background-color: #E1EFF7;
        border-radius: 16px;
        padding: 24px;
        padding-top: 32px;
        padding-bottom: 32px;
        z-index: 0;


    }




    .gemeente-title {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    @media (max-width: 360px) {
        .gemeente-title {
            flex-direction: column;
            text-align: center;
        }
    }

    .gemeente-title p {
        font-family: 'Fredoka-Regular';
        font-size: 13px;
        color: #119FEC;
    }

    .gemeente-title img {
        height: 48px;
        width: auto;
    }

    .gemeente-divider {
        height: 1px;
        background-color: #A9CEE3;
        margin-top: 24px;
    }

    .gemeente-text {
        margin-top: 24px;
        font-family: 'Arial Light', Arial, Helvetica, sans-serif;
        font-weight: 10;
        font-size: 16px;
        line-height: 1.7;
        color: #119FEC;
        max-height: 8.5em;
        /* Gemeente visibility: ~5 lines */
        overflow: hidden;
        transition: max-height 0.35s ease;
        position: relative;
    }

    .gemeente-text.collapsed::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 80px;
        /* Individual gradient height for Gemeente */
        background: linear-gradient(to bottom,
                rgba(225, 239, 247, 0) 0%,
                rgba(225, 239, 247, 0.05) 15%,
                rgba(225, 239, 247, 0.2) 35%,
                rgba(225, 239, 247, 0.5) 60%,
                rgba(225, 239, 247, 0.8) 85%,
                rgba(225, 239, 247, 1) 100%);
        pointer-events: none;
    }

    .gemeente-text.expanded {
        max-height: 999px;
    }

    .gemeente-toggle {
        margin-top: 24px;
        border: 1px solid #119FEC;
        background-color: transparent;
        color: #119FEC;
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 13px;
        border-radius: 999px;
        height: 48px;
        padding: 0 20px;
        cursor: pointer;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    }

    .gemeente-toggle:hover {
        border: 1px solid #119FEC;
        background-color: #119FEC;
        color: white;
    }


    .oorsprong {

        padding-top: 80px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        align-items: center;
        justify-content: center;
        align-content: center;

    }

    .oorsprong-title-main {
        font-family: 'Fredoka-Regular';
        font-size: 100px;
        color: #FF5E85;
        margin-bottom: 64px;

    }

    .oorsprong-title-main span {
        display: inline-block;
        opacity: 0;
        transform: translateY(10px);
    }

    .oorsprong-title-main span.animate {
        animation: headerFadeUp 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
    }

    .oorsprong-title-main span.animate:nth-child(1) {
        animation-delay: 0s;
    }

    .oorsprong-title-main span.animate:nth-child(2) {
        animation-delay: 0.1s;
    }

    .oorsprong-title-main span.animate:nth-child(3) {
        animation-delay: 0.2s;
    }

    .oorsprong-title-main span.animate:nth-child(4) {
        animation-delay: 0.3s;
    }

    .oorsprong-title-hoofdstuknmr {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #ffa8c1;
    }


    .oorsprong-title-sub {
        font-family: 'Fredoka-SemiBold';
        font-size: 32px;
        color: #FF5E85;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
        margin-top: 8px;

    }


    .oorsprong-title-sub.reveal {
        opacity: 1;
        transform: translateY(0);
    }


    .oorsprong-text {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(16px);

        transition:
            opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1),
            filter 1s cubic-bezier(0.25, 0.1, 0.25, 1),
            transform 1s cubic-bezier(0.25, 0.1, 0.25, 1);

        will-change: opacity, filter, transform;
    }

    .oorsprong-text.visible {
        opacity: 1;
        filter: blur(0px);
        transform: translateY(0);
    }

    .oorsprong-text p {
        margin-top: 16px;
        font-family: 'Arial-regular', Arial, Helvetica, sans-serif;
        font-size: 16px;
        line-height: 1.7;
        color: #486067;

        filter: blur(10px);
        animation: oorsprongTextFadeIn 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        animation-delay: 0.55s;
    }

    .oorsprong-img-container {
        object-fit: cover;
        margin-top: 24px;
        border-radius: 16px;
        overflow: hidden;
    }

    .oorsprong-img {
        width: 100%;
        height: auto;

    }


    @keyframes oorsprongTextFadeIn {
        from {
            opacity: 0;
            filter: blur(10px);
        }

        to {
            opacity: 1;
            filter: blur(0);
        }
    }

    .oorsprong-bg-title p {
        font-family: fredoka-Regular;
        font-size: 220px;
        color: #FFEDF2;
    }

    .oorsprong-bg-title {
        position: absolute;
        top: 0px;
        left: -16px;
        right: -16px;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        z-index: -1;

    }

    .oorsprong-title-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 80px;
        scroll-margin-top: 120px;
    }



    .oorsprong-text {
        margin-top: 24px;
        font-family: 'Arial Light', Arial, Helvetica, sans-serif;
        font-weight: 10;
        font-size: 16px;
        line-height: 1.7em;
        color: #486067;
        max-height: 8.5em;
        overflow: hidden;
        transition: max-height 0.35s ease;
        position: relative;
        filter: blur(10px);
        animation: oorsprongTextFadeIn 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;

    }

    .oorsprong-text.collapsed::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;


        background: linear-gradient(to bottom,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.05) 15%,
                rgba(255, 255, 255, 0.2) 35%,
                rgba(255, 255, 255, 0.5) 60%,
                rgba(255, 255, 255, 0.8) 85%,
                rgba(255, 255, 255, 1) 100%);
        height: 100px;
        pointer-events: none;
    }

    .oorsprong-text.expanded {
        max-height: 999px;
    }

    .oorsprong-toggle {
        margin-top: 24px;
        border: 1px solid #FF5E85;
        background-color: transparent;
        color: #FF5E85;
        font-family: 'Fredoka-Regular', sans-serif;

        border-radius: 999px;
        height: 40px;
        padding: 0 20px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    }

    .oorsprong-toggle:hover {
        border: 1px solid #FF5E85;
        background-color: #FF5E85;
        color: #ffffff;
    }

    .oorsprong-text-container {}

    .full-width-image-container {
        margin-top: 80px;
        width: 100%;
    }

    .full-width-image-container img {
        width: 100%;
        height: auto;
        border-radius: 16px;
        display: block;
    }


    .oorsprong-textfield2-text {
        margin-top: 16px;
        font-family: 'Arial Light', Arial, Helvetica, sans-serif;
        font-weight: 10;
        font-size: 16px;
        line-height: 1.7em;
        color: #333333;
        transition: max-height 0.35s ease;
        position: relative;


    }

    .oorsprong-textfield2-kop {

        font-family: fredoka-Regular, Arial, Helvetica, sans-serif;
        font-size: 24px;
        line-height: 1.7em;
        color: #FF5E85;
        position: relative;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1), max-height 0.35s ease;
        transition-delay: 0.2s;
        will-change: opacity, transform;

    }

    .oorsprong-textfield2-kop.reveal {
        opacity: 1;
        transform: translateY(0);
    }













    .oorsprong-textfield2-container {
        margin-top: 48px;

    }

    .oorsprong-statement-container {
        margin-top: 64px;

    }

    .oorsprong-statement-title {
        display: flex;
        align-items: center;
        gap: 16px;
        width: 80%;
    }

    .oorsprong-statement-text {
        margin-top: 16px;
        border-radius: 16px;
        z-index: 0;
        background-color: #FFEDF2;
        padding: 24px;
    }

    .oorsprong-statement-title p {
        font-family: 'Fredoka-Regular';
        font-size: 16px;
        color: #FF5E85;
    }

    .oorsprong-statement-text p {
        font-family: 'Arial Light', Arial, Helvetica, sans-serif;
        font-size: 16px;
        color: #FF5E85;
        line-height: 1.7;
        /* font-style: italic; */
    }

    .visie-hoofdstuknmr {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #ffbb0088;
    }

    .visie {
        scroll-margin-top: 120px;
        margin-top: 80px;
    }

    .visie-container {
        margin-top: 48px;
        background-color: #ffffff;
        border-radius: 16px;


    }

    .visie-title {
        font-family: 'Fredoka-SemiBold', sans-serif;
        font-size: 32px;
        color: #ffbb00;
        margin-top: 8px;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
    }

    .visie-title.reveal {
        opacity: 1;
        transform: translateY(0);
    }

    .visie-text {
        font-family: 'Arial Light', sans-serif;
        font-size: 16px;
        line-height: 1.7;
        color: #333333;
        max-width: 800px;
        margin-top: 24px;
    }

    .visie-list-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }

    .visie-list-toggle {
        background: none;
        border: none;
        padding: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }

    .chevron-icon-visielist {
        stroke: #ffbb00;
    }

    .visie-list-checkmark-path {
        fill: #ffbb00;
    }

    .visie-list-toggle .chevron-icon {
        transition: transform 0.3s ease;

    }

    .visie-list-header.active .chevron-icon {
        transform: rotate(180deg);
    }

    .visie-list-label {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #333333;
    }

    .visie-list {

        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 24px;
    }

    .visie-list.collapsed {
        display: none;
    }

    .visie-list-item {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .visie-list-item img {
        height: 18px;
        width: auto;
    }

    .visie-list-item p {
        font-family: 'Arial Light', sans-serif;
        font-size: 16px;
        color: #333333;
        margin: 0;
    }

    .visie-list-container {
        background-color: #fff8e0;
        padding: 24px;
        padding-top: 24px;
        padding-bottom: 24px;
        border-radius: 16px;
        margin-top: 32px;
        border: 1px solid #ffe9ac00;
        transition: background 0.2s ease-in-out;
        cursor: pointer;
    }

    .visie-list-container:hover {
        background-color: transparent;
        padding: 24px;
        padding-top: 24px;
        padding-bottom: 24px;
        border-radius: 16px;
        margin-top: 32px;
        border: 1px solid #ffbb00;
        transition: background 0.2s ease-in-out;
        cursor: pointer;

    }


    .visie-list-container.visie-list-leefwereld {

        border: 1px solid transparent;
    }

    .visie-list-container.visie-list-leefwereld:hover {
        transition: all 0.3s ease;
        border: 1px solid #ffbb00;
    }

    .visie-list-leefwereld .chevron-icon-visielist {
        stroke: #ffbb00;
    }

    .visie-list-leefwereld .visie-list-checkmark-path {
        fill: #ffbb00;
    }


    .leefwereld-line1-container {
        margin-top: 48px;
        height: auto;
        min-height: 10vh;
        margin-bottom: 100px;

    }

    .leefwereld-line1 {
        margin-left: -20px;
        margin-right: -20px;
    }

    .leefwereld-line1-svg {

        width: 100%;
    }


    .leefwereld-line2-container {
        margin-top: 132px;
        height: 10vh;

    }

    .leefwereld-line2 {
        position: absolute;
        left: -20px;
        right: -20px;
    }

    .leefwereld-line2-svg {
        width: 100%;
    }

    /* Ensure the line thickness stays consistent regardless of scaling */
    .leefwereld-line1-path,
    .leefwereld-line2-path {
        vector-effect: non-scaling-stroke;
    }

    .leefwereld-content {
        margin-top: 0px;

    }

    .leefwereld-content-title {

        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 24px;
        color: #ffbb00;
        margin-top: 8px;

        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
    }

    .leefwereld-content-title.reveal {
        opacity: 1;
        transform: translateY(0);
    }

    .leefwereld-content-title-container {
        width: 90%;

    }

    .leefwereld-slider-wrapper {
        max-width: 1152px;
        margin-top: 48px;
    }

    .leefwereld-slider-container {
        width: 100%;
        overflow: hidden;
        border-radius: 16px;
        position: relative;
    }

    .leefwereld-slider-track {
        display: flex;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }

    .leefwereld-slider-track img {
        width: 100%;
        flex-shrink: 0;
        object-fit: cover;
        height: 90vw;
        max-height: 300px;
    }

    .leefwereld-slider-nav {
        display: flex;
        justify-content: right;
        gap: 8px;
        margin-top: 16px;
    }

    .slider-nav-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px;
        border: 1px solid transparent;
        background: #fff8e0;
        color: #ffbb00;
        border-radius: 999px;
        cursor: pointer;
        font-family: 'Fredoka-Medium', sans-serif;
        transition: background 0.3s ease;
    }

    .slider-nav-btn svg {
        width: 16px;
        height: 16px;
        transition: all 0.3s ease;
    }

    .slider-nav-btn:hover {
        background: transparent;
        border: 1px solid #ffbb00;
        color: #ffbb00;
        transition: all 0.3s ease;
    }

    #prev-btn:hover svg {}

    #next-btn:hover svg {}

    .leefwereld-content-description {
        margin-top: 48px;
        font-family: 'Arial Light', Arial, Helvetica, sans-serif;
        font-size: 16px;
        line-height: 1.7em;
        color: #333333;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
    }

    .leefwereld-content-description.reveal {
        opacity: 1;
        transform: translateY(0);
    }

    .leefwereld-cta-container {
        margin-top: 80px;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .leefwereld-cta-text {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 24px;
        color: #ffbb00;
        margin-top: 8px;

        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
    }

    .leefwereld-cta-text.reveal {
        opacity: 1;
        transform: translateY(0);
    }

    .leefwereld-footer-container {
        margin-top: 100px;
        background-color: #ffffff;
        border-radius: 16px;
    }

    .leefwereld-footer-hoofdstuknmr {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #ffbb0088;
    }

    .leefwereld-footer-title {
        font-family: 'Fredoka-SemiBold', sans-serif;
        font-size: 32px;
        color: #ffbb00;
        margin-top: 8px;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
    }

    .leefwereld-footer-title.reveal {
        opacity: 1;
        transform: translateY(0);
    }

    .leefwereld-footer-text {
        font-family: 'Arial Light', sans-serif;
        font-size: 16px;
        line-height: 1.7;
        color: #333333;
        max-width: 800px;
        margin-top: 24px;
    }



    .leefwereld-cta-button {
        background: #ffbb00;
        height: 40px;
        padding: 0 6px 0 16px;
        border: 1px solid transparent;
        border-radius: 999px;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        font-family: 'Fredoka-Regular', sans-serif;
        transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out, border-color 0.25s ease-in-out;
        width: fit-content;
        text-decoration: none;
    }

    .leefwereld-cta-button:hover {
        background-color: transparent;
        border-color: #ffbb00;
    }

    .leefwereld-cta-button p {
        color: #1a1a1a;
        transition: color 0.25s ease-in-out;
        font-size: 13px;
    }

    .leefwereld-cta-button:hover p {
        color: #ffbb00;
    }

    .leefwereld-cta-icon {
        box-sizing: content-box;
        height: 12px;
        width: 12px;
        background-color: #ffffff;
        border-radius: 999px;
        padding: 6px;
        color: #ffbb00;
        transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
    }

    .leefwereld-cta-button:hover .leefwereld-cta-icon {
        background-color: #ffbb00;
        color: #ffffff;
    }





    .projecten-title-hoofdstuknmr {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #a6cade;
    }

    .projecten {
        margin-top: 100px;
        scroll-margin-top: 120px;
    }

    .filter-label {
        font-family: 'Fredoka-Medium', sans-serif;
        color: #006CA6;
        font-size: 16px;
    }

    .filter-buttons {
        display: flex;
        background: #daedf7;
        border-radius: 999px;
        position: relative;
        padding: 4px;
        justify-content: flex-end;
    }

    .filter-active-bg {
        position: absolute;
        background: #006CA6;
        border-radius: 999px;
        z-index: 0;
        height: calc(100% - 8px);
        top: 4px;
        left: 0;
        width: 0;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
        will-change: transform, width;
        transform: translateX(0);
    }

    .project-filter-btn {
        background: transparent !important;
        height: 40px;
        padding: 0px 24px;
        border: none !important;
        border-radius: 999px;
        display: flex;
        align-items: center;
        cursor: pointer;
        position: relative;
        z-index: 1;
    }

    .project-filter-btn p {
        color: #006CA6;
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 13px;
        margin: 0;
        transition: color 0.25s ease-in-out;
    }

    .project-filter-btn.active p {
        color: white;
    }

    .project-filter-btn:hover:not(.active) {
        background: rgba(6, 94, 121, 0.05) !important;
        border-radius: 999px;
    }

    .projecten-title-container {
        margin-top: 48px;
        background-color: #ffffff;
        border-radius: 16px;


    }

    .projecten-title {
        font-family: 'Fredoka-SemiBold', sans-serif;
        font-size: 32px;
        color: #006CA6;
        margin-top: 8px;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
    }

    .projecten-title.reveal {
        opacity: 1;
        transform: translateY(0);
    }

    .projecten-title-text {
        font-family: 'Arial Light', sans-serif;
        font-size: 16px;
        line-height: 1.7;
        color: #333333;
        max-width: 800px;
        margin-top: 24px;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.3s;
        will-change: opacity, transform;
    }

    .projecten-title-text.reveal {
        opacity: 1;
        transform: translateY(0);
    }


    .project-filtermenu-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 48px;
        background-color: white;
        position: sticky;
        top: 80px;
        /* Zorgt dat hij onder de nav blijft plakken */
        z-index: 100;
        padding: 10px 0;
        padding-top: 24px;

    }

    .project-card {
        position: relative;
        width: 100%;
        height: 400px;
        border-radius: 16px;
        overflow: hidden;
        margin-top: 16px;
        cursor: pointer;

        display: block;
        text-decoration: none;
    }

    .project-card>img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .project-card:hover>img {
        transform: scale(1.05);
    }

    .project-card-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0)40%, #000000de 100%);
        pointer-events: none;
        z-index: 1;
    }

    .project-card-link {
        position: absolute;
        top: 16px;
        right: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
        z-index: 2;
        background-color: #ffffff;
        padding: 8px;
        border-radius: 999px
    }


    .pop-up-icon {
        fill: white;
    }

    .project-card-link p {
        color: white;
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 14px;
        margin: 0;
    }

    .project-card-content {
        position: absolute;
        bottom: 32px;
        left: 24px;
        z-index: 2;
        color: white;
        max-width: 85%;


    }

    .project-card-title {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 24px;
        font-weight: 400;
        /* Explicitly set to regular weight */
        margin-bottom: 8px;
    }

    .project-card-excerpt {
        font-family: 'Arial Light', sans-serif;
        font-size: 16px;
        line-height: 1.4;
        opacity: 0.9;
    }

    .praktisch {
        margin-top: 150px;
        scroll-margin-top: 120px;
    }

    .praktisch-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-top: 48px;
        background-color: #ffffff;
        border-radius: 16px;
        cursor: pointer;
    }

    .praktisch-header-button {
        background: none;
        border: none;
        padding: 12px;
        cursor: pointer;
    }

    .praktisch-header .chevron-icon {
        transition: transform 0.4s ease;
    }

    .praktisch-header.active .chevron-icon {
        transform: rotate(180deg);
    }

    .praktisch-collapsible-content.collapsed {
        display: none;
    }


    .praktisch-hoofdstuknmr {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #ff5e8688;
    }

    .praktisch-title {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 32px;
        color: #006CA6;
        margin-top: 8px;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
    }

    .praktisch-title.reveal {
        opacity: 1;
        transform: translateY(0);
    }

    .praktisch-text {
        font-family: 'Arial Light', sans-serif;
        font-size: 16px;
        line-height: 1.7;
        color: #333333;
        max-width: 800px;
        margin-top: 24px;
    }

    .praktisch-list-checkmark-path {
        fill: #FF5E85;
    }

    .praktisch-list-container {
        background-color: #FFEDF2;
        padding: 24px;
        padding-top: 32px;
        padding-bottom: 32px;
        border-radius: 16px;
        margin-top: 32px;

    }

    .praktisch-list-item {
        display: flex;
        align-items: center;
        gap: 16px;
    }


    .praktisch-list-item p {
        font-family: 'Arial Light', sans-serif;
        font-size: 16px;
        color: #333333;
    }


    .praktisch-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .media {
        margin-top: 100px;
    }

    .media-title {
        font-family: 'Fredoka-SemiBold', sans-serif;
        font-size: 32px;
        color: #006CA6;
        /* Or your preferred blue color */
        margin-top: 8px;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
        letter-spacing: 0.8px;
    }

    .media-title.reveal {
        opacity: 1;
        transform: translateY(0);
    }

    .media-hoofdstuknmr {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #a6cade;
    }

    .media-text {
        margin-top: 24px;
        font-family: 'Arial Light', sans-serif;
        font-size: 16px;
        line-height: 1.7;
        color: #333
    }

    .media-container {
        margin-top: 48px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }








    .media-card {
        position: relative;
        width: 100%;
        height: 200px;
        border-radius: 16px;
        overflow: hidden;

        cursor: pointer;
        display: block;
        text-decoration: none;
    }

    .media-card.hidden {
        display: none;
    }

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

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

    .media-card-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgb(0, 0, 0) 0%, #00000057 0%, #000000c4 100%);
        pointer-events: none;
        z-index: 1;
    }

    .media-card-link {
        position: absolute;
        top: 16px;
        right: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
        z-index: 2;
        background-color: #ffffff;
        padding: 8px;
        border-radius: 999px
    }


    .pop-up-icon {
        fill: white;
    }

    .media-card-link p {
        color: white;
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 14px;
        margin: 0;
    }

    .media-card-content {
        position: absolute;
        bottom: 32px;
        left: 24px;
        z-index: 2;
        color: white;
        max-width: 85%;


    }

    .media-card-title {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 24px;
        font-weight: 400;
        /* Explicitly set to regular weight */
        margin-bottom: 8px;
    }

    .media-card-excerpt {
        font-family: 'Arial Light', sans-serif;
        font-size: 16px;
        line-height: 1.4;
        opacity: 0.9;
    }

    .media-load-more-container {
        display: flex;
        justify-content: center;
        margin-top: 32px;
    }

    .reviews {
        margin-top: 100px;
        scroll-margin-top: 120px;
    }

    .reviews-hoofdstuknmr {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #a6cade;
    }

    .reviews-title {
        font-family: 'Fredoka-SemiBold', sans-serif;
        font-size: 32px;
        color: #006CA6;
        margin-top: 8px;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
    }

    .reviews-title.reveal {
        opacity: 1;
        transform: translateY(0);
    }


    .recensies {
        margin-top: 32px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .reviews-content-box {

        background-color: #F5F5F5;
        border-radius: 16px;
        padding: 24px;
    }

    .reviews-content-box.hidden {
        display: none;
    }

    .reviews-intro-header p {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #006CA6;
    }

    .reviews-divider {
        height: 1px;
        background-color: #daedf7;
        margin-top: 24px;
    }

    .reviews-expand-text {
        margin-top: 24px;
        font-family: 'Arial Light', sans-serif;
        font-size: 16px;
        line-height: 1.7;
        color: #333333;
        max-height: 9em;
        overflow: hidden;
        transition: max-height 0.35s ease;
        position: relative;
    }

    .reviews-expand-text.collapsed::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 40px;
        background: linear-gradient(to bottom, rgba(240, 243, 245, 0), #F0F3F5);
        pointer-events: none;
    }

    .reviews-expand-text.expanded {
        max-height: 800px;
    }

    .reviews-expand-toggle {
        margin-top: 24px;
        border: 1px solid #006CA6;
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 13px;
        background-color: transparent;
        color: #006CA6;
        border-radius: 999px;
        height: 40px;
        padding: 0 24px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .reviews-expand-toggle:hover {
        background-color: #006CA6;
        color: white;
    }

    .contact {
        margin-top: 100px;
        scroll-margin-top: 120px;
    }

    .contact-hoofdstuknmr {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #ff5e8688;
    }

    .contact-title {
        font-family: 'Fredoka-SemiBold', sans-serif;
        font-size: 32px;
        color: #FF5E85;
        margin-top: 8px;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
    }

    .contact-title.reveal {
        opacity: 1;
        transform: translateY(0);
    }

    .media-button {
        background: #daedf7;
        height: 40px;
        padding: 0px 16px;
        border: 1px solid transparent;
        border-radius: 999px;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: background 0.25s ease-in-out, color 0.25s ease-in-out;
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 13px;
        color: #006CA6;
        text-decoration: none;
    }

    .media-button:hover {
        background: white;
        height: 40px;
        padding: 0px 16px;
        border: 1px solid #006CA6;
        border-radius: 999px;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: background 0.2s ease-in-out;
        font-size: 13px;

    }

    .contact-container {

        background-color: #FFEDF2;
        padding: 24px;
        padding-top: 48px;
        padding-bottom: 48px;
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 32px;
    }

    .contact-profielfoto {
        width: 50%;
    }

    .contact-name {
        margin-top: 24px;
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 20px;
        color: #333333;
    }

    .contact-phone {
        margin-top: 24px;
        display: flex;
        gap: 8px;
        align-items: center;
    }


    .contact-mail {
        margin-top: 8px;
        display: flex;
        gap: 8px;
        align-items: center;
    }


    .contact-phone-svg,
    .contact-mail-svg {
        width: 20px;
    }


    .contact-phone p,
    .contact-mail p {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #FF5E85;
        text-decoration: none;
    }


    .author {
        display: flex;
        margin-top: 180px;



    }


    .author-container {

        align-items: center;
    }

    .author-sub {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: #333333;
    }

    .author-name {
        margin-top: 8px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        color: #333333;
        text-decoration: none;
    }

    /* Hide existing elements on screens larger than a typical phone while keeping the body visible */
    /* @media (min-width: 600px) {
    body>* {
        display: none !important;
    }
} */


}

@media (min-width: 900px) {



    .gradient-desktop {
        background:
            linear-gradient(180deg, #ff5e8626 0%, #ff5e8600 100%),
            url('vectors/background/icons-bg.png') no-repeat center top / cover;

        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 60vh;
        /* Increased height to give illustrations more space to spread */
        z-index: -1;
        pointer-events: none;
        opacity: 0;
        /* Optional: makes the illustrations more subtle */
        animation: bgSlideInBlur 1.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        animation: bgSlideInBlur 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        animation-delay: 0.2s;
        will-change: transform, opacity, filter;
        contain: paint;
    }

    @keyframes bgSlideInBlur {
        from {
            transform: translateY(40px);
            transform: translate3d(0, 25px, 0);
            filter: blur(10px);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            transform: translate3d(0, 0, 0);
            filter: blur(0);
            opacity: 0.7;
        }
    }

    .introduction-desktop-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        margin-top: 180px;
        position: relative;
    }

    .introduction-label-desktop {
        position: absolute;
        bottom: 100%;

        margin-bottom: 24px;
        height: 60px;
        z-index: 10;

    }

    .porttretfoto-left-desktop {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        grid-column: 1;
        grid-row: 1;
        background-color: #E1EFF7;
        background-color: #E1EFF7;
        border-radius: 16px;
    }

    .porttretfoto-left-desktop::before {
        content: '';
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: #E1EFF7;
        border-radius: 16px;
        z-index: 0;
    }

    .porttretfoto-left-desktop img {
        width: 80%;
        position: relative;
        z-index: 1;
        display: block;
        margin-top: -80px;
    }


    .gemeente-desktop-container {
        background-color: #E1EFF7;
        border-radius: 16px;
        height: auto;
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 48px;
        box-sizing: border-box;
        text-align: left;
    }

    .gemeente-desktop-container img {
        height: 64px;
        width: auto;
        object-fit: contain;
        margin-top: 16px;

    }

    .gemeente-desktop-title {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #119FEC;
        margin-bottom: 16px;
    }


    .gemeente-desktop-text {
        font-family: 'Arial Light', Arial, Helvetica, sans-serif;
        font-size: 16px;
        color: #119FEC;
        line-height: 1.7em;
        margin-top: 32px;
    }

    .sinds-container {
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 120px;
        overflow: hidden;
        /* Prevents large text from causing horizontal scroll */
    }

    .sinds-text {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 40vw;
        color: #FFEDF2;
        line-height: 0.8;
        white-space: nowrap;
        text-align: center;
        pointer-events: none;
        user-select: none;
        display: flex;
        overflow: hidden;
    }

    .sinds-text span {
        display: inline-block;
        transform: translateY(110%);
        transition: transform 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .sinds-text.reveal span {
        transform: translateY(0);
    }

    .sinds-jaartal {
        position: absolute;
        display: flex;
        overflow: hidden;
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 20vw;
        color: #FF5E85;
        z-index: 10;
    }

    .sinds-jaartal span {
        display: inline-block;
        transform: translateY(110%);
        transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .sinds-jaartal.reveal span {
        transform: translateY(0);
    }

    .over-desktop {
        margin-top: 160px;
    }

    .over-desktop-hoofdstuknmr {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 24px;
        color: #ff5e8688;
    }



    .over-desktop-title {
        margin-top: 8px;
        font-family: 'Fredoka-SemiBold', sans-serif;
        font-size: 35px;
        color: #FF5E85;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
        letter-spacing: 0.03em;
    }

    .over-desktop-title.reveal {
        opacity: 1;
        transform: translateY(0);
    }

    .over-desktop-subtitle {
        font-family: 'Fredoka-Medium', sans-serif;
        font-size: 20px;
        color: #FF5E85;
        margin-top: 16px;
        margin-bottom: 8px;
        break-before: column;
    }


    .over-desktop-text {
        margin-top: 32px;
        column-count: 2;
        column-gap: 64px;
        font-family: 'Arial Light', Arial, sans-serif;
        font-size: 16px;
        color: #33414f;
        line-height: 1.7rem;
    }

    .over-desktop-text p {
        margin-bottom: 16px;
    }

    .over-desktop-name {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #FF5E85;
    }

    .over-desktop-statement-container {
        break-inside: avoid;
        /* Prevents the box from splitting across columns */
        background-color: #FFEDF2;
        padding: 32px;
        border-radius: 24px;
        color: #FF5E85;
        font-family: 'Fredoka-Regular', sans-serif;
    }




    /* Banner images for project pages desktop */
    .gradient-dynamic-blumeneis,
    .gradient-dynamic-schiffepommes,
    .gradient-dynamic-vriendschap,
    .gradient-dynamic-1000diploma {
        display: block;
        width: 100%;
        height: 420px;
        margin-top: 120px;
        border-radius: 24px;
        border: 1px solid #DFDFDF;
        z-index: -1;
    }

    .gradient-dynamic-blumeneis {
        background: linear-gradient(180deg, rgba(6, 94, 121, 0.2) 0%, transparent 60%),
            url('images/afbeeldingen/projecten/blumeneis/Afbeelding1.jpeg') no-repeat center center / cover;
    }

    .gradient-dynamic-schiffepommes {
        background: linear-gradient(180deg, rgba(6, 94, 121, 0.2) 0%, transparent 60%),
            url('images/afbeeldingen/projecten/schiffepommes/Afbeelding2.jpeg') no-repeat center center / cover;
    }

    .gradient-dynamic-vriendschap {
        background: linear-gradient(180deg, rgba(6, 94, 121, 0.2) 0%, transparent 60%),
            url('images/afbeeldingen/projecten/dvdv2024/Afbeelding1.jpg') no-repeat center center / cover;
    }

    .gradient-dynamic-1000diploma {
        background: linear-gradient(180deg, rgba(6, 94, 121, 0.2) 0%, transparent 60%),
            url('images/afbeeldingen/projecten/1000diploma/Afbeelding5.jpg') no-repeat center center / cover;
    }

    .page-blumeneis .nav-terug-button {
        display: none !important;
        position: static !important;
        /* Resets absolute positioning from mobile */
        order: -1;
        /* Moves the button to the left of the logo */
        margin-right: 24px;
        background: #c9dee4;
        color: #065E79;
        height: 48px;
        padding: 0 24px;
        border-radius: 999px;
        align-items: center;
        font-family: 'Fredoka-Regular', sans-serif;
        text-decoration: none;
        transition: background 0.2s ease;
    }

    .page-blumeneis .nav-terug-button:hover {
        background: #b5d1da;
        padding: 0 24px;
        border: 1px solid transparent;
    }

    /* Clean up text sections for Blumeneis */
    .page-blumeneis .oorsprong-statement-text,
    .page-blumeneis .visie-desktop-statement-container {
        background-color: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        /* Removes padding now that the background box is gone */
    }

    /* Hide the back button if it exists within the text/content sections */
    .page-blumeneis .oorsprong-statement-container .nav-terug-button,
    .page-blumeneis .visie-desktop-statement-container .nav-terug-button {
        display: none !important;
    }

    .page-blumeneis .mobile-menu-items a {
        color: #065E79;
        text-decoration: none;
    }

    .page-blumeneis .mobile-menu-items a::after {
        background-color: #065E79;
    }

    .page-blumeneis .nav-cta-desktop {
        background: #c9dee4;
        border-color: #c9dee4;
        color: #065E79;
        text-decoration: none;
    }

    .page-blumeneis .nav-cta-desktop:hover {
        border-color: #065E79;
        color: #065E79;
        background-color: transparent;

    }

    .page-blumeneis .nav-cta-desktop svg path {
        fill: #065E79 !important;
    }

    .nav-cta-desktop {
        background: #FFEDF2;
        height: 48px;
        padding: 0px 16px;
        border: 1px solid #FFEDF2;
        border-radius: 999px;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: background 0.25s ease-in-out, color 0.25s ease-in-out, border-color 0.25s ease-in-out;
        font-family: 'Fredoka-Regular';
        font-size: 16px;
        color: #FF5E85;
        text-decoration: none;
    }

    .nav-cta-desktop:hover {
        background-color: transparent;
        border-color: #FF5E85;
    }


    .mobile-menu-items {
        display: flex;
        margin-left: auto;
        gap: 32px;
        align-items: center;
        margin-right: 20px;

    }


    .mobile-menu-items a {
        font-family: 'Fredoka-Regular';
        font-size: 16px;
        color: #FF5E85;
        text-decoration: none;
        position: relative;
        padding-bottom: 4px;
    }

    .mobile-menu-items a::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: #FF5E85;
        transition: width 0.3s ease-in-out;
    }

    .mobile-menu-items a.active::after {
        width: 100%;
    }

    .mobile-menu-items a:hover::after {
        width: 100%;
    }


    body {
        max-width: 1152px;
        margin: 100px auto;
        width: calc(100% - 40px);
    }

    /* Page Transition Overlay */
    .page-transition-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: white;
        z-index: 9999;
        pointer-events: none;
        transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
        opacity: 1;
        visibility: visible;
    }

    .nav-logo {
        height: 15px;
    }

    .nav-top-blocker {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100px;
        background: linear-gradient(to bottom, white 70px, transparent 100%);
        z-index: 999;
        z-index: 999;
        /* Positions blocker above all content but below the nav (1000) */
        /* Net onder de nav (1000) maar boven de content */
        opacity: 1;
        transition: opacity 0.3s ease-in-out;
        pointer-events: none;
    }

    nav {
        background-color: white;
        border: 1px solid rgb(240, 240, 240);
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.03);
        border-radius: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 24px;
        overflow: hidden;

        transition: max-height 0.7s cubic-bezier(0.4, 0, 0.2, 1);
        position: fixed;
        top: 16px;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: calc(100% - 40px);
        max-width: 1152px;
        box-sizing: border-box;
        z-index: 1000;
    }

    body>*:not(nav) {
        filter: blur(0);
        transition: filter 0.4s ease-in-out;
    }

    body.menu-open>*:not(nav) {
        filter: blur(4px);
        pointer-events: none;
        user-select: none;
    }

    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0);
        z-index: 999;
        pointer-events: none;
        transition: background-color 0.4s ease-in-out;
    }

    body.menu-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.2);
        z-index: 999;
        pointer-events: none;
        transition: background-color 0.4s ease-in-out;
    }

    .gradient {
        background: linear-gradient(180deg, #ff5e8626 0%, #ff5e8600 100%);
        position: absolute;
        left: -0px;
        right: -0px;
        top: -0px;
        height: 30vh;
    }

    .gradient-dynamic {
        background: linear-gradient(180deg, #065e7921 0%, #065e7900 100%);
        position: absolute;
        left: -0px;
        right: -0px;
        top: -0px;
        height: 30vh;
    }

    .dynamic-backtohome-button {
        color: #065E79;
        background: #c9dee4;
        height: 48px;
        padding: 0px 16px;
        border: 1px solid transparent;
        border-radius: 999px;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: background 0.25s ease-in-out, color 0.25s ease-in-out;
        font-family: 'Fredoka-Regular';
        font-size: 16px;
        text-decoration: none;
        width: fit-content;
    }

    .dynamic-backtohome-button:hover {
        background: transparent;
        height: 48px;
        padding: 0px 16px;
        border: 1px solid #065E79;
        border-radius: 999px;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: background 0.25s ease-in-out, color 0.25s ease-in-out;
        font-family: 'Fredoka-Regular';
        font-size: 16px;
        text-decoration: none;
        width: fit-content;
    }



    .breadcrumbs {
        margin-top: 16px;
        font-family: 'Arial Light', Arial, Helvetica, sans-serif;
        font-size: 16px;
        color: #8db0ba;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .dynamic-project-jaartal {
        margin-top: 48px;
        font-family: 'Arial Light', Arial, Helvetica, sans-serif;
        font-size: 16px;
        color: #8db0ba;
        display: flex;
        align-items: center;
        opacity: 0;
        transform: translateY(10px);
        animation: headerFadeUp 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        animation-delay: 0.1s;
    }

    .dynamic-project-title {
        margin-top: 8px;
        font-family: 'Fredoka-SemiBold';
        font-size: 32px;
        color: #065E79;
        opacity: 0;
        transform: translateY(10px);
        animation: headerFadeUp 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        animation-delay: 0.2s;
    }

    .dynamic-project-text {
        margin-top: 16px;
        font-family: 'Arial Light', Arial, Helvetica, sans-serif;
        font-weight: 10;
        font-size: 16px;
        line-height: 1.7em;
        color: #333333;
        transition: max-height 0.35s ease;
        position: relative;
        column-count: 2;
        column-gap: 32px;
    }

    .breadcrumbs a {
        font-family: 'Arial Light', Arial, Helvetica, sans-serif;
        font-size: 16px;
        color: #8db0ba;
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
    }

    .breadcrumb-impact .short-text {
        display: none;
    }

    @media (max-width: 500px) {
        .breadcrumb-impact .full-text {
            display: none;
        }

        .breadcrumb-impact .short-text {
            display: inline;
        }
    }

    .header-projects {
        margin-top: 80px;
        position: relative;
        z-index: 1;
    }


    .header {
        margin-top: 160px;
    }

    .header-text {
        display: flex;
        flex-direction: column;
        gap: 16px;

    }

    .header-title-desktop {
        margin-top: 80px;
        text-align: center;
        font-family: 'Fredoka-SemiBold';
        font-size: 56px;
        color: #FF5E85;
        opacity: 0;
        transform: translateY(10px);
        animation: headerFadeUp 1.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        animation-delay: 0.15s;
    }

    .header-subtitle-desktop {
        text-align: center;
        font-family: 'Fredoka-Medium';
        font-size: 24px;
        color: #FF5E85;
        opacity: 0;
        transform: translateY(10px);
        animation: headerFadeUp 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        animation-delay: 0.3s;
        margin-top: 32px;
    }

    .header-buttons-desktop {
        opacity: 0;
        transform: translateY(10px);
        animation: headerFadeUp 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        animation-delay: 0.45s;
    }

    @keyframes headerFadeUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .header-cta-desktop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        border-radius: 999px;
        border: 1px solid #FF5E85;
        background-color: #FF5E85;
        padding: 0px 0px;
        height: 48px;
        padding-left: 16px;
        padding-right: 8px;
        color: white;
        font-family: 'Fredoka-Regular';
        font-size: 16px;
        width: fit-content;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
        cursor: pointer;
        text-decoration: none;
    }

    .header-cta-desktop:hover {
        border: 1px solid #FF5E85;
        background-color: transparent;
        color: #FF5E85;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;

    }

    .header-cta-icon-desktop {
        box-sizing: content-box;
        height: 16px;
        width: 16px;
        color: #FF5E85;
        padding: 8px;
        background-color: #ffffff;
        border-radius: 999px;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    }

    .header-cta-desktop:hover .header-cta-icon-desktop {
        background-color: #FF5E85;
        color: #ffffff;
    }

    .header-buttons-desktop {
        display: flex;
        gap: 8px;
        width: fit-content;
        justify-content: center;
        margin: 0 auto;
        margin-top: 32px;
    }


    .header-cta-secondary-desktop {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 999px;
        border: 1px solid #FFEDF2;
        background-color: #FFEDF2;
        padding: 0px 16px;
        height: 48px;
        color: #FF5E85;
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        width: auto;
        transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
        cursor: pointer;
        text-decoration: none;
    }

    .header-cta-secondary-desktop:hover {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 999px;
        border: 1px solid #FF5E85;
        background-color: white;
        padding: 0px 16px;
        height: 48px;
        color: #FF5E85;
        width: auto;
        transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;


    }

    .portretfoto-container-desktop {
        margin-top: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .portretfoto-text-desktop {
        margin-bottom: 24px;
        margin-left: 0px;
        opacity: 0;
        filter: blur(10px);
        animation: portretfotoBlurIn 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        animation-delay: 0.45s;
    }



    .portretfoto-desktop {
        background-color: #E1EFF7;
        border-radius: 16px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        height: 100%;
        min-height: 300px;
        overflow: visible;
        opacity: 0;
        filter: blur(10px);
        animation: portretfotoBlurIn 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        animation-delay: 0.5s;
    }

    .portretfoto-desktop img {
        width: 220px;
        max-width: 720px;
        transform: none;
        opacity: 0;
        filter: blur(10px);
        animation: portretfotoBlurIn 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        animation-delay: 0.55s;
    }

    @keyframes portretfotoBlurIn {
        from {
            opacity: 0;
            filter: blur(10px);
        }

        to {
            opacity: 1;
            filter: blur(0);
        }
    }

    .gemeente-dedicated-desktop {
        margin-top: 16px;
        background-color: #E1EFF7;
        border-radius: 16px;
        padding: 24px;
        padding-top: 32px;
        padding-bottom: 32px;

        z-index: 0;


    }




    .gemeente-title-desktop {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    @media (max-width: 360px) {
        .gemeente-title-desktop {
            flex-direction: column;
            text-align: center;
        }
    }

    .gemeente-title-desktop p {
        font-family: 'Fredoka-Regular';
        font-size: 13px;
        color: #119FEC;
    }

    .gemeente-title-desktop img {
        height: 48px;
        width: auto;
    }

    .gemeente-divider-desktop {
        height: 1px;
        background-color: #A9CEE3;
        margin-top: 24px;
    }

    .gemeente-text-desktop {
        margin-top: 24px;
        font-family: 'Arial Light', Arial, Helvetica, sans-serif;
        font-weight: 10;
        font-size: 16px;
        line-height: 1.7;
        color: #119FEC;
        max-height: 8.5em;
        /* Gemeente visibility: ~5 lines */
        overflow: hidden;
        transition: max-height 0.35s ease;
        position: relative;
    }

    .gemeente-text-desktop.collapsed::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 80px;
        /* Individual gradient height for Gemeente */
        background: linear-gradient(to bottom,
                rgba(225, 239, 247, 0) 0%,
                rgba(225, 239, 247, 0.05) 15%,
                rgba(225, 239, 247, 0.2) 35%,
                rgba(225, 239, 247, 0.5) 60%,
                rgba(225, 239, 247, 0.8) 85%,
                rgba(225, 239, 247, 1) 100%);
        pointer-events: none;
    }

    .gemeente-text-desktop.expanded {
        max-height: 999px;
    }

    .gemeente-toggle-desktop {
        margin-top: 24px;
        border: 1px solid #119FEC;
        background-color: transparent;
        color: #119FEC;
        font-size: 13px;
        border-radius: 999px;
        height: 48px;
        padding: 0 20px;
        cursor: pointer;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    }

    .gemeente-toggle-desktop:hover {
        border: 1px solid #119FEC;
        background-color: #119FEC;
        color: white;
    }


    .introduction-franzis-desktop-wrapper {
        display: flex;

    }




    .over-desktop-slider-section {
        margin-top: 100px;
        width: 100%;
        position: relative;
    }

    .over-desktop-slider-viewport {
        width: 100%;
        overflow: hidden;
        position: relative;
        border-radius: 20px;
        padding: 0;
    }

    /* Gradient fades for the edges */
    .over-desktop-slider-viewport::before,
    .over-desktop-slider-viewport::after {
        display: none;
        /* Hidden as per request */
    }

    .over-desktop-slider-viewport::before {}

    .over-desktop-slider-viewport::after {}

    .over-desktop-slider-track {
        display: flex;
        transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        /* Smoother animation */
        will-change: transform;
    }

    .over-desktop-slider-slide {
        flex: 0 0 100%;
        /* Makes one image central and others visible on sides */
        height: 500px;
        /* Removed opacity transition as all slides are now 100% opaque */
    }

    .over-desktop-slider-image {
        width: 100%;
        height: 100%;
        object-fit: cover;

        cursor: pointer;
    }

    .over-desktop-slider-nav-container-desktop {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 16px;
        padding: 0 10px;
    }

    .over-desktop-slider-btn-prev,
    .over-desktop-slider-btn-next {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: #fff8e0;
        border: 1px solid transparent;
        color: #ffbb00;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    .over-desktop-slider-btn-prev:hover,
    .over-desktop-slider-btn-next:hover {
        background-color: transparent;
        border-color: #ffbb00;
    }




    .over-desktop-lightbox {
        display: flex;
        position: fixed;
        z-index: 2000;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #FFFFFF;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.4s ease;
    }

    .over-desktop-lightbox.active {
        opacity: 1;
        visibility: visible;
    }

    .over-desktop-lightbox-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-width: 80vw;
        width: fit-content;
    }

    .over-desktop-lightbox-info-container-desktop {
        position: fixed;
        top: 112px;
        /* Positioned under the close button (40px top + 48px height + 24px gap) */
        right: 40px;
        text-align: right;
        width: fit-content;
        max-width: 300px;
        z-index: 2005;
        opacity: 0;
        transition: opacity 0.4s ease 0.2s;
    }

    .over-desktop-lightbox.active .over-desktop-lightbox-info-container-desktop {
        opacity: 1;
    }

    /* Hide lightbox text on viewports <= 900px */
    @media (max-width: 900px) {
        .over-desktop-lightbox-info-container-desktop {
            display: none;
        }
    }

    .over-desktop-lightbox-content {
        height: auto;
        width: auto;
        max-height: 70vh;
        /* Made slightly smaller as requested */
        max-width: 70vw;
        /* Made slightly smaller as requested */
        border-radius: 24px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        transform: scale(0.9);
        transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .over-desktop-lightbox.active .over-desktop-lightbox-content {
        transform: scale(1);
    }

    .over-desktop-lightbox-caption {
        color: #FF5E85;
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 20px;
        margin: 0;
    }

    .over-desktop-lightbox-year {
        color: #ffa8c1;
        /* Lighter pink as requested */
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        margin-top: 4px;
    }

    .over-desktop-lightbox-nav-fixed-bottom-desktop {
        position: fixed;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 16px;
        z-index: 2005;
        opacity: 0;
        transition: opacity 0.4s ease 0.3s;
    }

    .over-desktop-lightbox.active .over-desktop-lightbox-nav-fixed-bottom-desktop {
        opacity: 1;
    }

    .over-desktop-lightbox-close {
        position: fixed;
        top: 40px;
        right: 40px;
        color: #FF5E85;
        cursor: pointer;
        outline: 1px solid #FF5E85;
        border-radius: 999px;
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 24px;
        height: 48px;
        width: fit-content;
        background-color: white;
        transition: 0.3s;
    }

    .over-desktop-lightbox-close:hover {
        color: #ffffff;
        background-color: #FF5E85;
    }




    .over-desktop-lightbox-nav-btn {
        display: flex;
        align-items: center;
        gap: 0;
        padding: 0 16px;
        height: 48px;
        min-width: 48px;
        background-color: #fff8e0;
        border: 1px solid transparent;
        color: #ffbb00;
        cursor: pointer;
        z-index: 10;
        /* Ensure it's above other content but not excessively high */
        z-index: 10;
        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 999px;
        overflow: hidden;
        position: relative;
    }

    .over-desktop-lightbox-nav-btn:hover {
        background-color: transparent;
        border: 1px solid #ffbb00;
    }

    .over-desktop-lightbox-nav {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 16px;
        width: 100%;
    }





    .line-1-desktop {
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        margin-top: -450px;
        /* Default for screens > 900px */
        z-index: -1;
        /* Placed behind other content */
        pointer-events: none;
        opacity: 0.5;
    }

    .line-1-desktop svg {
        width: 100%;
        height: auto;
        display: block;
    }

    #line-1-desktop-path {
        /* Initial state set by JS */
        transition: stroke-dashoffset 2s ease-out;
        /* Animation duration and easing */
    }

    #line-1-desktop-path.draw {
        stroke-dashoffset: 0 !important;
        /* Overrides initial JS setting */
    }









    .visie-desktop {
        margin-top: 160px;
    }

    .visie-desktop-hoofdstuknmr {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 24px;
        color: #ffbb0088;
    }



    .visie-desktop-title {
        margin-top: 8px;
        font-family: 'Fredoka-Semibold', sans-serif;
        font-size: 35px;
        color: #ffbb00;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
        letter-spacing: 0.03em;
    }

    .visie-desktop-title.reveal {
        opacity: 1;
        transform: translateY(0);
    }


    .visie-desktop-text {
        margin-top: 32px;
        display: flex;
        gap: 64px;
        align-items: flex-start;
        font-family: 'Arial Light', Arial, sans-serif;
        font-size: 16px;
        color: #333333;
        line-height: 1.7rem;
    }

    .visie-desktop-text-text {
        margin-top: 24px;
        display: flex;
        gap: 64px;
        align-items: flex-start;
        font-family: 'Arial Light', Arial, sans-serif;
        font-size: 16px;
        color: #333333;
        line-height: 1.7rem;
    }


    .visie-desktop-left {
        flex: 1;
    }

    .visie-desktop-text p {
        margin-bottom: 16px;
    }

    .visie-cta {
        display: flex;
        align-items: center;
        gap: 16px;
        height: 48px;
        padding: 0 8px 0 24px;
        border-radius: 999px;
        background-color: #FF5E85;
        width: fit-content;
        margin-top: 32px;
        cursor: pointer;
        border: 1px solid #FF5E85;
        transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
        color: white;
        text-decoration: none;
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 13px;
    }

    .visie-cta:hover {
        background-color: transparent;
        color: #FF5E85;
    }

    .visie-cta-icon {
        box-sizing: content-box;
        height: 16px;
        width: 16px;
        color: #FF5E85;
        padding: 8px;
        background-color: #ffffff;
        border-radius: 999px;
        transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
    }

    .visie-cta:hover .visie-cta-icon {
        background-color: #FF5E85;
        color: #ffffff;
    }

    .visie-desktop-name {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #FF5E85;
    }

    .visie-desktop-statement-container {
        flex: 1;
        background-color: #FFF8E0;
        padding: 32px;
        border-radius: 24px;
        font-family: 'Arial Light', Arial, sans-serif;
        font-size: 16px;
        color: #333333;
    }

    .visie-desktop-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 24px;
    }

    .visie-desktop-list-item {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .visie-desktop-list-item p {
        margin: 0 !important;
        font-family: 'Arial Light', Arial, sans-serif;
        font-size: 16px;
        color: #333333;
    }





    .leefwereld-desktop {
        margin-top: 0px;
        width: 100%;
    }

    .leefwereld-desktop-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 64px;
    }

    .leefwereld-desktop-left {
        grid-row: 1;
        align-self: center;
    }

    .leefwereld-desktop-right {
        display: contents;
    }

    .leefwereld-desktop-hoofdstuknmr {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 24px;
        color: #ffbb0088;
    }

    .leefwereld-desktop-title {
        margin-top: 8px;
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 32px;
        color: #ffbb00;
        font-weight: 400;
        line-height: 1.2;
        margin-bottom: 24px;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
    }

    .leefwereld-desktop-title.reveal {
        opacity: 1;
        transform: translateY(0);
    }

    .leefwereld-desktop-text {
        font-family: 'Arial Light', Arial, sans-serif;
        font-size: 16px;
        color: #333333;
        line-height: 1.7rem;
        margin-bottom: 32px;
    }

    .leefwereld-desktop-cta-btn {
        background: #ffbb00;
        height: 48px;
        padding: 0 8px 0 16px;
        border: 1px solid #ffbb00;
        border-radius: 999px;
        display: flex;
        align-items: center;
        gap: 16px;
        cursor: pointer;
        font-size: 16px;
        font-family: 'Fredoka-Regular', sans-serif;
        color: #1a1a1a;
        transition: background 0.3s ease, color 0.3s ease;
        width: fit-content;
        text-decoration: none;
    }

    .leefwereld-desktop-cta-btn:hover {
        background: transparent;
        color: #ffbb00;
    }

    .leefwereld-desktop-cta-icon {
        box-sizing: content-box;
        height: 16px;
        width: 16px;
        background-color: #ffffff;
        border-radius: 999px;
        padding: 8px;
        color: #ffbb00;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .leefwereld-desktop-cta-btn:hover .leefwereld-desktop-cta-icon {
        background-color: #ffbb00;
        color: #ffffff;
    }

    .leefwereld-desktop-slider-viewport {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        width: 100%;
        overflow: hidden;
        border-radius: 20px;
        height: 400px;
    }

    .leefwereld-desktop-slider-track {
        display: flex;
        transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        height: 100%;
    }

    .leefwereld-desktop-slide {
        flex: 0 0 100%;
        height: 100%;
    }

    .leefwereld-desktop-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .leefwereld-desktop-slider-nav {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        margin-top: 24px;
    }

    .leefwereld-desktop-nav-btn {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: #fff8e0;
        border: 1px solid transparent;
        color: #ffbb00;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    .leefwereld-desktop-nav-btn:hover {
        background-color: transparent;
        border-color: #ffbb00;
    }


    .projecten-desktop {
        display: block;
        /* Ensure it's visible on desktop */
        margin-top: 100px;
        scroll-margin-top: 120px;
    }



    .projecten-hoofdstuknmr-desktop {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 24px;
        color: #a6cade;
    }

    .projecten-title-desktop {
        font-family: 'Fredoka-SemiBold', sans-serif;
        font-size: 35px;
        color: #006CA6;
        margin-top: 8px;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
    }

    .praktisch-list-checkmark-path-desktop {
        fill: #006CA6;
    }

    .projecten-title-desktop.reveal {
        opacity: 1;
        transform: translateY(0);
    }



    .praktisch-desktop-title {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 32px;
        color: #006CA6;
    }

    .praktisch-desktop-hoofdstuknmr {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 24px;
        color: #ff5e8688;
    }

    .praktisch-desktop {
        margin-top: 180px;
    }

    .praktisch-desktop-grid {
        display: flex;
        gap: 64px;
        align-items: center;
        /* Vertically centers the content of the two columns */
    }

    .praktisch-desktop-left {
        flex: 1;
        /* Allows the left column to take up available space */
        display: flex;
        flex-direction: column;
    }

    .praktisch-desktop-text {
        font-family: 'Arial Light', Arial, sans-serif;
        font-size: 16px;
        line-height: 1.7em;
        color: #333333;
        margin-top: 24px;

    }

    .praktisch-list-title-desktop {
        font-family: 'Arial Light', Arial, sans-serif;
        font-size: 16px;
        line-height: 1.7em;
        color: #333333;
    }

    .praktisch-desktop-right {
        flex: 1;

    }

    .praktisch-desktop-cta {
        background-color: #006CA6;
        height: 48px;
        padding: 0 8px 0 16px;
        border: 1px solid #006CA6;
        border-radius: 999px;
        display: flex;
        align-items: center;
        gap: 16px;
        cursor: pointer;
        font-size: 13px;
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #ffffff;
        transition: all 0.3s ease;
        margin-top: 32px;
        width: fit-content;
        text-decoration: none;
    }

    .praktisch-desktop-cta:hover {
        background-color: transparent;
        color: #006CA6;
    }

    .praktisch-desktop-cta-icon {
        box-sizing: content-box;
        height: 16px;
        width: 16px;
        background-color: #ffffff;
        border-radius: 999px;
        padding: 8px;
        color: #006CA6;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .praktisch-desktop-cta:hover .praktisch-desktop-cta-icon {
        background-color: #006CA6;
        color: #ffffff;
    }


    .praktisch-list-container-desktop {
        background-color: #daedf7;
        padding: 24px;
        border-radius: 20px;
    }

    .praktisch-list-item-desktop {
        display: flex;
        gap: 16px;
        align-items: center;


    }

    .praktisch-list-item-desktop p {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #333333;

    }

    .praktisch-list-desktop {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }




    .media-desktop {
        display: block;
        margin-top: 200px;
        scroll-margin-top: 120px;
    }

    .media-hoofdstuknmr-desktop {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 24px;
        color: #a6cade;

    }

    .media-title-desktop {
        font-family: 'Fredoka-SemiBold', sans-serif;
        font-size: 32px;
        color: #006CA6;
        margin-top: 8px;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
        letter-spacing: 0.8px;
    }

    .media-title-desktop.reveal {
        opacity: 1;
        transform: translateY(0);
    }



































    .oorsprong {

        padding-top: 80px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        align-items: center;
        justify-content: center;
        align-content: center;

    }

    .oorsprong-title-main {
        font-family: 'Fredoka-Regular';
        font-size: 100px;
        color: #FF5E85;
        margin-bottom: 64px;

    }

    .oorsprong-title-main span {
        display: inline-block;
        opacity: 0;
        transform: translateY(10px);
    }

    .oorsprong-title-main span.animate {
        animation: headerFadeUp 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
    }

    .oorsprong-title-main span.animate:nth-child(1) {
        animation-delay: 0s;
    }

    .oorsprong-title-main span.animate:nth-child(2) {
        animation-delay: 0.1s;
    }

    .oorsprong-title-main span.animate:nth-child(3) {
        animation-delay: 0.2s;
    }

    .oorsprong-title-main span.animate:nth-child(4) {
        animation-delay: 0.3s;
    }

    .oorsprong-title-hoofdstuknmr {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #ffa8c1;
    }


    .oorsprong-title-sub {
        font-family: 'Fredoka-SemiBold';
        font-size: 32px;
        color: #FF5E85;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
        margin-top: 8px;

    }


    .oorsprong-title-sub.reveal {
        opacity: 1;
        transform: translateY(0);
    }


    .oorsprong-text {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(16px);

        transition:
            opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1),
            filter 1s cubic-bezier(0.25, 0.1, 0.25, 1),
            transform 1s cubic-bezier(0.25, 0.1, 0.25, 1);

        will-change: opacity, filter, transform;
    }

    .oorsprong-text.visible {
        opacity: 1;
        filter: blur(0px);
        transform: translateY(0);
    }

    .oorsprong-text p {
        margin-top: 16px;
        font-family: 'Arial-regular', Arial, Helvetica, sans-serif;
        font-size: 16px;
        line-height: 1.7;
        color: #486067;

        filter: blur(10px);
        animation: oorsprongTextFadeIn 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        animation-delay: 0.55s;
    }

    .oorsprong-img-container {
        object-fit: cover;
        margin-top: 24px;
        border-radius: 16px;
        overflow: hidden;
    }

    .oorsprong-img {
        width: 100%;
        height: auto;

    }


    @keyframes oorsprongTextFadeIn {
        from {
            opacity: 0;
            filter: blur(10px);
        }

        to {
            opacity: 1;
            filter: blur(0);
        }
    }

    .oorsprong-bg-title p {
        font-family: fredoka-Regular;
        font-size: 220px;
        color: #FFEDF2;
    }

    .oorsprong-bg-title {
        position: absolute;
        top: 0px;
        left: -16px;
        right: -16px;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        z-index: -1;

    }

    .oorsprong-title-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 80px;
        scroll-margin-top: 120px;
    }



    .oorsprong-text {
        margin-top: 24px;
        font-family: 'Arial Light', Arial, Helvetica, sans-serif;
        font-weight: 10;
        font-size: 16px;
        line-height: 1.7em;
        color: #486067;
        max-height: 8.5em;
        overflow: hidden;
        transition: max-height 0.35s ease;
        position: relative;
        filter: blur(10px);
        animation: oorsprongTextFadeIn 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;

    }

    .oorsprong-text.collapsed::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;


        background: linear-gradient(to bottom,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.05) 15%,
                rgba(255, 255, 255, 0.2) 35%,
                rgba(255, 255, 255, 0.5) 60%,
                rgba(255, 255, 255, 0.8) 85%,
                rgba(255, 255, 255, 1) 100%);
        height: 100px;
        pointer-events: none;
    }

    .oorsprong-text.expanded {
        max-height: 999px;
    }

    .oorsprong-toggle {
        margin-top: 24px;
        border: 1px solid #FF5E85;
        background-color: transparent;
        color: #FF5E85;

        border-radius: 999px;
        height: 48px;
        padding: 0 20px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    }

    .oorsprong-toggle:hover {
        border: 1px solid #FF5E85;
        background-color: #FF5E85;
        color: #ffffff;
    }

    .oorsprong-text-container {}

    .full-width-image-container {
        margin-top: 80px;
        width: 100%;
    }

    .full-width-image-container img {
        width: 100%;
        height: auto;
        border-radius: 16px;
        display: block;
    }


    .oorsprong-textfield2-text {
        margin-top: 16px;
        font-family: 'Arial Light', Arial, Helvetica, sans-serif;
        font-weight: 10;
        font-size: 16px;
        line-height: 1.7em;
        color: #333333;
        transition: max-height 0.35s ease;
        position: relative;


    }

    .oorsprong-textfield2-kop {

        font-family: fredoka-Regular, Arial, Helvetica, sans-serif;
        font-size: 24px;
        line-height: 1.7em;
        color: #FF5E85;
        position: relative;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1), max-height 0.35s ease;
        transition-delay: 0.2s;
        will-change: opacity, transform;

    }

    .oorsprong-textfield2-kop.reveal {
        opacity: 1;
        transform: translateY(0);
    }













    .oorsprong-textfield2-container {
        margin-top: 48px;

    }

    .oorsprong-statement-container {
        margin-top: 64px;
        z-index: 2;
        /* Ensure it's above the line elements */

    }

    .oorsprong-statement-title {
        display: flex;
        align-items: center;
        gap: 16px;
        width: 80%;
    }

    .oorsprong-statement-text {
        margin-top: 16px;
        border-radius: 16px;
        z-index: 0;
        background-color: white;
        padding: 24px;
    }

    .oorsprong-statement-title p {
        font-family: 'Fredoka-Regular';
        font-size: 16px;
        color: #FF5E85;
    }

    .oorsprong-statement-text p {
        font-family: 'Arial Light', Arial, Helvetica, sans-serif;
        font-size: 16px;
        color: #FF5E85;
        line-height: 1.7;
        /* font-style: italic; */
    }

    .visie-hoofdstuknmr {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #ffbb0088;
    }

    .visie {
        scroll-margin-top: 120px;
        margin-top: 80px;
    }

    .visie-container {
        margin-top: 48px;
        background-color: #ffffff;
        border-radius: 16px;


    }

    .visie-title {
        font-family: 'Fredoka-SemiBold', sans-serif;
        font-size: 32px;
        color: #ffbb00;
        margin-top: 8px;
        opacity: 0;
        transform: translateX(-50px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
    }

    .visie-title.reveal {
        opacity: 1;
        transform: translateX(0);
    }

    .visie-text {
        font-family: 'Arial Light', sans-serif;
        font-size: 16px;
        line-height: 1.7;
        color: #333333;
        max-width: 800px;
        margin-top: 24px;
    }

    .visie-list-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }

    .visie-list-toggle {
        background: none;
        border: none;
        padding: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }

    .chevron-icon-visielist {
        stroke: #ffbb00;
    }

    .visie-list-checkmark-path {
        fill: #ffbb00;
    }

    .visie-list-toggle .chevron-icon {
        transition: transform 0.3s ease;

    }

    .visie-list-header.active .chevron-icon {
        transform: rotate(180deg);
    }

    .visie-list-label {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #333333;
    }

    .visie-list {

        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 24px;
    }

    .visie-list.collapsed {
        display: none;
    }

    .visie-list-item {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .visie-list-item img {
        height: 18px;
        width: auto;
    }

    .visie-list-item p {
        font-family: 'Arial Light', sans-serif;
        font-size: 16px;
        color: #333333;
        margin: 0;
    }

    .visie-list-container {
        background-color: white;
        padding: 24px;
        padding-top: 24px;
        padding-bottom: 24px;
        border-radius: 16px;
        margin-top: 32px;
        border: 1px solid #ffe9ac00;
        transition: background 0.2s ease-in-out;
        cursor: pointer;
    }

    .visie-list-container:hover {
        background-color: transparent;
        padding: 24px;
        padding-top: 24px;
        padding-bottom: 24px;
        border-radius: 16px;
        margin-top: 32px;
        border: 1px solid #ffbb00;
        transition: background 0.2s ease-in-out;
        cursor: pointer;

    }


    .visie-list-container.visie-list-leefwereld {

        border: 1px solid transparent;
    }

    .visie-list-container.visie-list-leefwereld:hover {
        transition: all 0.3s ease;
        border: 1px solid #ffbb00;
    }

    .visie-list-leefwereld .chevron-icon-visielist {
        stroke: #ffbb00;
    }

    .visie-list-leefwereld .visie-list-checkmark-path {
        fill: #ffbb00;
    }


    .leefwereld-line1-container {
        margin-top: -50px;
        height: auto;
        min-height: 10vh;
        margin-bottom: 100px;
    }

    .leefwereld-line1 {
        margin-left: -20px;
        margin-right: -20px;
    }

    .leefwereld-line1-svg {

        width: 100%;
    }


    .leefwereld-line2-container {
        margin-top: 132px;
        height: 10vh;

    }

    .leefwereld-line2 {
        position: absolute;
        left: -20px;
        right: -20px;
    }

    .leefwereld-line2-svg {
        width: 100%;
    }

    /* Ensure the line thickness stays consistent regardless of scaling */
    .leefwereld-line1-path,
    .leefwereld-line2-path {
        vector-effect: non-scaling-stroke;
    }

    .leefwereld-content {
        margin-top: 0px;

    }

    .leefwereld-content-title {

        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 24px;
        color: #ffbb00;
        margin-top: 8px;

        opacity: 0;
        transform: translateY(20px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
    }

    .leefwereld-content-title.reveal {
        opacity: 1;
        transform: translateY(0);
    }

    .leefwereld-content-title-container {
        width: 90%;

    }

    .leefwereld-slider-wrapper {
        max-width: 1152px;
        margin-top: 80px;


    }

    .leefwereld-slider-container {
        width: 100%;
        overflow: visible;
        position: relative;
    }

    .leefwereld-slider-track {
        display: block;
        column-count: 3;
        column-gap: 24px;
        transform: none !important;
    }

    .leefwereld-slider-track img {
        width: 100%;
        height: auto;
        display: block;
        margin-bottom: 24px;
        break-inside: avoid;
        border-radius: 16px;
    }

    .leefwereld-slider-nav {
        display: none;
    }

    .slider-nav-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px;
        border: 1px solid transparent;
        background: #fff8e0;
        color: #ffbb00;
        border-radius: 999px;
        cursor: pointer;
        font-family: 'Fredoka-Medium', sans-serif;
        transition: background 0.3s ease;
    }

    .slider-nav-btn svg {
        width: 16px;
        height: 16px;
        transition: all 0.3s ease;
    }

    .slider-nav-btn:hover {
        background: transparent;
        border: 1px solid #ffbb00;
        color: #ffbb00;
        transition: all 0.3s ease;
    }

    #prev-btn:hover svg {}

    #next-btn:hover svg {}

    .leefwereld-content-description {
        margin-top: 48px;
        font-family: 'Arial Light', Arial, Helvetica, sans-serif;
        font-size: 16px;
        line-height: 1.7em;
        color: #333333;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
    }

    .leefwereld-content-description.reveal {
        opacity: 1;
        transform: translateY(0);
    }

    .leefwereld-cta-container {
        margin-top: 80px;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .leefwereld-cta-text {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 24px;
        color: #ffbb00;
        margin-top: 8px;

        opacity: 0;
        transform: translateY(20px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
    }

    .leefwereld-cta-text.reveal {
        opacity: 1;
        transform: translateY(0);
    }

    .leefwereld-footer-container {
        margin-top: 100px;
        background-color: #ffffff;
        border-radius: 16px;
    }

    .leefwereld-footer-hoofdstuknmr {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #ffbb0088;
    }

    .leefwereld-footer-title {
        font-family: 'Fredoka-SemiBold', sans-serif;
        font-size: 32px;
        color: #ffbb00;
        margin-top: 8px;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
    }

    .leefwereld-footer-title.reveal {
        opacity: 1;
        transform: translateX(0);
    }

    .leefwereld-footer-text {
        font-family: 'Arial Light', sans-serif;
        font-size: 16px;
        line-height: 1.7;
        color: #333333;
        max-width: 800px;
        margin-top: 24px;
    }



    .leefwereld-cta-button {
        background: #ffbb00;
        height: 48px;
        padding: 0 8px 0 16px;
        border: 1px solid transparent;
        border-radius: 999px;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out, border-color 0.25s ease-in-out;
        width: fit-content;
        text-decoration: none;
    }

    .leefwereld-cta-button:hover {
        background-color: transparent;
        border-color: #ffbb00;
    }

    .leefwereld-cta-button p {
        color: #333333;
        transition: color 0.25s ease-in-out;
        font-size: 16px;
    }

    .leefwereld-cta-button:hover p {
        color: #ffbb00;
    }

    .leefwereld-cta-icon {
        box-sizing: content-box;
        height: 16px;
        width: 16px;
        background-color: #ffffff;
        border-radius: 999px;
        padding: 8px;
        color: #ffbb00;
        transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
    }

    .leefwereld-cta-button:hover .leefwereld-cta-icon {
        background-color: #ffbb00;
        color: #ffffff;
    }





    .projecten-title-hoofdstuknmr {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #a6cade;
    }

    .projecten {
        margin-top: 64px;
        scroll-margin-top: 120px;
    }

    .filter-label {
        font-family: 'Fredoka-Medium', sans-serif;
        color: #006CA6;
        font-size: 16px;
    }

    .filter-buttons {
        display: flex;
        background: #daedf7;
        border-radius: 999px;
        position: relative;
        padding: 4px;
    }

    .filter-active-bg {
        position: absolute;
        background: #006CA6;
        border-radius: 999px;
        z-index: 0;
        height: calc(100% - 8px);
        top: 4px;
        left: 0;
        width: 0;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
        will-change: transform, width;
        transform: translateX(0);
    }

    .project-filter-btn {
        background: transparent !important;
        height: 32px;
        font-size: 13px;
        padding: 0px 24px;
        border: none !important;
        border-radius: 999px;
        display: flex;
        align-items: center;
        cursor: pointer;
        position: relative;
        z-index: 1;
    }

    .project-filter-btn p {

        color: #006CA6;
        font-family: 'Fredoka-regular', sans-serif;
        font-size: 14px;
        margin: 0;
        transition: color 0.25s ease-in-out;
    }

    .project-filter-btn.active p {
        color: white;
    }

    .project-filter-btn:hover:not(.active) {
        background: rgba(6, 94, 121, 0.05) !important;
        border-radius: 999px;
    }

    .projecten-title-container {
        margin-top: 48px;
        background-color: #ffffff;
        border-radius: 16px;


    }

    .projecten-title {
        font-family: 'Fredoka-SemiBold', sans-serif;
        font-size: 32px;
        color: #006CA6;
        margin-top: 8px;
        opacity: 0;
        transform: translateX(-50px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
    }

    .projecten-title.reveal {
        opacity: 1;
        transform: translateX(0);
    }

    .projecten-title-text {
        font-family: 'Arial Light', sans-serif;
        font-size: 16px;
        line-height: 1.7;
        color: #333333;
        max-width: 800px;
        margin-top: 24px;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.3s;
        will-change: opacity, transform;
    }

    .projecten-title-text.reveal {
        opacity: 1;
        transform: translateY(0);
    }


    .project-filtermenu-container {
        display: flex;
        justify-content: right;
        align-items: center;
        background-color: white;
        position: sticky;
        top: 80px;
        padding: 24px;
        padding-left: 0px;
        padding-right: 0px;
        z-index: 100;
        gap: 16px;
        padding-top: 48px;


    }

    .project-card {
        position: relative;
        width: 100%;
        height: 400px;
        border-radius: 16px;
        overflow: hidden;
        margin-top: 16px;
        cursor: pointer;

        display: block;
        text-decoration: none;
    }

    .project-card>img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .project-card:hover>img {
        transform: scale(1.05);
    }

    .project-card-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0)40%, #000000de 100%);
        pointer-events: none;
        z-index: 1;
    }

    .project-card-link {
        position: absolute;
        top: 16px;
        right: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
        z-index: 2;
        background-color: #ffffff;
        padding: 8px;
        border-radius: 999px
    }


    .pop-up-icon {
        fill: white;
    }

    .project-card-link p {
        color: white;
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 14px;
        margin: 0;
    }

    .project-card-content {
        position: absolute;
        bottom: 32px;
        left: 24px;
        z-index: 2;
        color: white;
        max-width: 85%;


    }

    .project-card-title {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 24px;
        font-weight: 400;
        /* Explicitly set to regular weight */
        margin-bottom: 8px;
    }

    .project-card-excerpt {
        font-family: 'Arial Light', sans-serif;
        font-size: 16px;
        line-height: 1.4;
        opacity: 0.9;
    }

    .projecten-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;

    }

    .praktisch {
        margin-top: 150px;
        scroll-margin-top: 120px;
    }

    .praktisch-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-top: 48px;
        background-color: #ffffff;
        border-radius: 16px;
        cursor: pointer;
    }

    .praktisch-header-button {
        background: none;
        border: none;
        padding: 12px;
        cursor: pointer;
    }

    .praktisch-header .chevron-icon {
        transition: transform 0.4s ease;
    }

    .praktisch-header.active .chevron-icon {
        transform: rotate(180deg);
    }

    .praktisch-collapsible-content.collapsed {
        display: none;
    }


    .praktisch-hoofdstuknmr {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #ff5e8688;
    }

    .praktisch-title {
        font-family: 'Fredoka-SemiBold', sans-serif;
        font-size: 32px;
        color: #FF5E85;
        margin-top: 8px;
        opacity: 0;
        transform: translateX(-50px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
    }

    .praktisch-title.reveal {
        opacity: 1;
        transform: translateX(0);
    }

    .praktisch-text {
        font-family: 'Arial Light', sans-serif;
        font-size: 16px;
        line-height: 1.7;
        color: #333333;
        max-width: 800px;
        margin-top: 24px;
    }

    .praktisch-list-checkmark-path {
        fill: #FF5E85;
    }

    .praktisch-list-container {
        background-color: #FFEDF2;
        padding: 24px;
        padding-top: 32px;
        padding-bottom: 32px;
        border-radius: 16px;
        margin-top: 32px;

    }

    .praktisch-list-item {
        display: flex;
        align-items: center;
        gap: 16px;
    }


    .praktisch-list-item p {
        font-family: 'Arial Light', sans-serif;
        font-size: 16px;
        color: #333333;
    }


    .praktisch-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .media {
        margin-top: 0;
    }

    .media-title {
        font-family: 'Fredoka-SemiBold', sans-serif;
        font-size: 32px;
        color: #006CA6;
        /* Or your preferred blue color */
        margin-top: 8px;
        opacity: 0;
        transform: translateX(-50px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
    }

    .media-title.reveal {
        opacity: 1;
        transform: translateX(0);
    }

    .media-hoofdstuknmr {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #a6cade;
    }

    .media-text {
        margin-top: 24px;
        font-family: 'Arial Light', sans-serif;
        font-size: 16px;
        line-height: 1.7;
        color: #333
    }

    .media-container {
        margin-top: 32px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 24px;
    }








    .media-card {
        position: relative;
        width: 100%;
        height: 300px;
        border-radius: 16px;
        overflow: hidden;

        cursor: pointer;
        display: block;
        text-decoration: none;
    }

    .media-card.hidden {
        display: none;
    }

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

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

    .media-card-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
        pointer-events: none;
        z-index: 1;
    }

    .media-card-link {
        position: absolute;
        top: 16px;
        right: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
        z-index: 2;
        background-color: #ffffff;
        padding: 8px;
        border-radius: 999px
    }


    .pop-up-icon {
        fill: white;
    }

    .media-card-link p {
        color: white;
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 14px;
        margin: 0;
    }

    .media-card-content {
        position: absolute;
        bottom: 32px;
        left: 24px;
        z-index: 2;
        color: white;
        max-width: 85%;


    }

    .media-card-title {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 24px;
        font-weight: 400;
        /* Explicitly set to regular weight */
        margin-bottom: 8px;
    }

    .media-card-excerpt {
        font-family: 'Arial Light', sans-serif;
        font-size: 16px;
        line-height: 1.4;
        opacity: 0.9;
    }

    .media-load-more-container {
        display: flex;
        justify-content: center;
        margin-top: 32px;
    }

    .reviews {
        margin-top: 100px;
        scroll-margin-top: 120px;
    }

    .reviews-hoofdstuknmr {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #a6cade;
    }

    .reviews-title {
        font-family: 'Fredoka-SemiBold', sans-serif;
        font-size: 32px;
        color: #006CA6;
        margin-top: 8px;
        opacity: 0;
        transform: translateX(-50px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
        letter-spacing: 0.8px;
    }

    .reviews-title.reveal {
        opacity: 1;
        transform: translateX(0);
    }


    .recensies {
        margin-top: 32px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .reviews-content-box {

        background-color: #F5F5F5;
        border-radius: 16px;
        padding: 24px;
    }

    .reviews-content-box.hidden {
        display: none;
    }

    .reviews-intro-header p {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #006CA6;
    }

    .reviews-divider {
        height: 1px;
        background-color: #daedf7;
        margin-top: 24px;
    }

    .reviews-expand-text {
        margin-top: 24px;
        font-family: 'Arial Light', sans-serif;
        font-size: 16px;
        line-height: 1.7;
        color: #333333;
        max-height: 9em;
        overflow: hidden;
        transition: max-height 0.35s ease;
        position: relative;
    }

    .reviews-expand-text.collapsed::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 40px;
        background: linear-gradient(to bottom, rgba(240, 243, 245, 0), #F0F3F5);
        pointer-events: none;
    }

    .reviews-expand-text.expanded {
        max-height: 800px;
    }

    .reviews-expand-toggle {
        margin-top: 24px;
        border: 1px solid #006CA6;
        background-color: transparent;
        color: #006CA6;
        font-size: 13px;
        border-radius: 999px;
        height: 48px;
        padding: 0 24px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .reviews-expand-toggle:hover {
        background-color: #006CA6;
        color: white;
    }

    .contact {
        margin-top: 100px;
        scroll-margin-top: 120px;
    }

    .contact-hoofdstuknmr {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #ff5e8688;
    }

    .contact-title {
        font-family: 'Fredoka-SemiBold', sans-serif;
        font-size: 32px;
        color: #FF5E85;
        margin-top: 8px;
        opacity: 0;
        transform: translateX(-50px);
        transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.5, 0.5, 0.25, 1);
        transition-delay: 0.2s;
        will-change: opacity, transform;
        letter-spacing: 0.8px;
    }

    .contact-title.reveal {
        opacity: 1;
        transform: translateX(0);
    }

    .media-button {
        background: #daedf7;
        height: 48px;
        padding: 0px 16px;
        border: 1px solid transparent;
        border-radius: 999px;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        font-size: 16px;
        transition: background 0.25s ease-in-out, color 0.25s ease-in-out;
        font-family: 'Arial Light', sans-serif;
        font-size: 13px;
        color: #006CA6;
    }

    .media-button:hover {
        background: white;
        height: 48px;
        padding: 0px 16px;
        border: 1px solid #006CA6;
        border-radius: 999px;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: background 0.2s ease-in-out;

    }

    .contact-container {

        background-color: #FFEDF2;
        padding: 24px;
        padding-top: 48px;
        padding-bottom: 48px;
        border-radius: 16px;
        display: flex;

        align-items: center;
        margin-top: 32px;
        justify-content: center;
    }

    .contact-profielfoto {
        width: 200px;
    }

    .contact-name {

        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 20px;
        color: #333333;
    }

    .contact-phone {
        margin-top: 16px;
        display: flex;
        gap: 8px;
        align-items: center;
    }


    .contact-mail {
        margin-top: 8px;
        display: flex;
        gap: 8px;
        align-items: center;
    }


    .contact-phone-svg,
    .contact-mail-svg {
        width: 20px;
    }


    .contact-phone p,
    .contact-mail p {
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #FF5E85;
    }

    .contact-info-wrapper {
        display: flex;
        flex-direction: column;
        margin-left: 48px;
    }


    .author {
        display: flex;
        margin-top: 180px;



    }


    .author-container {

        align-items: center;
    }

    .author-sub {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: #333333;
    }

    .author-name {
        margin-top: 8px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        color: #333333;
        text-decoration: none;
    }

    /* Hide existing elements on screens larger than a typical phone while keeping the body visible */
    /* @media (min-width: 600px) {
    body>* {
        display: none !important;
    }
} */







    .project-filtermenu-container-desktop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 48px;
        background-color: white;
        position: sticky;
        top: 80px;
        z-index: 100;
        padding: 10px 0;
        padding-top: 24px;
    }

    .filter-label-desktop {
        font-family: 'Fredoka-Medium', sans-serif;
        color: #006CA6;
        font-size: 16px;
    }

    .filter-buttons-desktop {
        display: flex;
        background: #daedf7;
        border-radius: 999px;
        position: relative;
        padding: 4px;
        justify-content: flex-end;
    }

    .filter-active-bg-desktop {
        position: absolute;
        background: #006CA6;
        border-radius: 999px;
        z-index: 0;
        height: calc(100% - 8px);
        top: 4px;
        left: 0;
        width: 0;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
        will-change: transform, width;
    }

    .project-filter-btn-desktop {
        background: transparent !important;
        height: 48px;
        font-size: 13px;
        padding: 0px 24px;
        border: none !important;
        border-radius: 999px;
        display: flex;
        align-items: center;
        cursor: pointer;
        position: relative;
        z-index: 1;
    }

    .project-filter-btn-desktop p {
        font-size: 13px;
        color: #006CA6;
        font-family: 'Arial Light', sans-serif;
        font-size: 13px;
        margin: 0;
        transition: color 0.25s ease-in-out;
    }

    .project-filter-btn-desktop.active p {
        color: white;
    }

    .project-filter-btn-desktop:hover:not(.active) {
        background: rgba(6, 94, 121, 0.05) !important;
        border-radius: 999px;
    }

    .projecten-container-desktop {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        margin-top: 24px;
    }

    .project-desktop-cta {
        background-color: #FF5E85;
        height: 48px;
        padding: 0 8px 0 24px;
        border: 1px solid #FF5E85;
        border-radius: 999px;
        display: flex;
        align-items: center;
        gap: 16px;
        cursor: pointer;
        font-size: 13px;
        font-family: 'Fredoka-Regular', sans-serif;
        font-size: 16px;
        color: #ffffff;
        transition: all 0.3s ease;
        margin-top: 48px;
        width: fit-content;
    }

    .project-desktop-cta:hover {
        background-color: transparent;
        color: #FF5E85;
    }

    .project-desktop-cta-icon {
        background-color: #ffffff;
        border-radius: 999px;
        padding: 8px;
        color: #FF5E85;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .project-desktop-cta:hover .project-desktop-cta-icon {
        background-color: #FF5E85;
        color: #ffffff;
    }

    .nav-button,
    .nav-icons,
    .nav-link,
    .nav-cta,
    .header-title,
    .header-subtitle,
    .header-buttons,
    .portretfoto-container,
    .gemeente-dedicated,
    .gradient,
    .oorsprong,
    .oorsprong-title-container,
    .oorsprong-text-container,
    .full-width-image-container,
    .oorsprong-textfield2-container,
    .oorsprong-statement-container,
    .leefwereld-line1-container,
    .visie,
    .leefwereld-line2-container,
    .leefwereld-content,
    .projecten-title-container,
    .praktisch,
    .media-header-titles {
        display: none;
    }


    .line-2-desktop {
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 0;
        z-index: 1;
        pointer-events: none;
        opacity: 0.5;
    }

    .line-2-desktop svg {
        width: 100%;
        height: auto;
        display: block;
    }

    #line-2-desktop-path {
        transition: stroke-dashoffset 2s ease-out;
    }

    #line-2-desktop-path.draw {
        stroke-dashoffset: 0 !important;
    }




}