@charset "utf-8";
/* CSS Document */

.pakket, .addon, .content {
    ul {
        list-style:none;
        margin:0;
        padding:0;
        .content & {
            margin:1em 0;
        }
        li {
            padding-left:1em;
            position:relative;
            &::before {
                content:'✓';
                position:absolute;
                left:0;
                color:var(--sec-color);

                content:'•';
                font-size:2em;
                transform:translateY(-.1em);
            }
        }
    }
}

.imgwrap-1 {
    position:relative;
    width:100%;
    height:auto;
    aspect-ratio:2/3;
    aspect-ratio:5/7;
    overflow: visible;
    margin-bottom:1rem;
    img {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        object-fit:cover;
        object-position: center;
        display: block;
        border-bottom-right-radius: 400px;
    }
    &::after {
        content:'';
        display:block;
        width:97%;
        height:auto;
        aspect-ratio: 5/6;
        border:2px solid var(--sec-color);
        z-index: 5;
        position: absolute;
        bottom:-1rem;
        right:-1rem;
        border-bottom-right-radius: 400px;
    }
}

.cta-block-wrap {
    position:relative;
}
.cta-block {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: auto auto;
    grid-column-gap: 1rem;
    grid-row-gap: 0px;
    width:100%;
}
.cta-block-bg { 
    grid-area: 2 / 1 / 3 / 11;
    background-color:var(--sec-color); 
    border-radius:var(--border-radius);
}
.cta-block-content { 
    grid-area: 2 / 1 / 3 / 7;
    color:white;
    padding:2rem 1.5rem;
    align-content:center;
}
.cta-block-img { 
    grid-area: 1 / 7 / 3 / 11;
    align-content:flex-end;
    padding:0 .5em;
    img {
        display:block;
        width:100%;
        margin-left:auto;
    }
}
@media screen and (max-width:767px) {
    .cta-block {
        display:flex;
        flex-direction:column;
    }
    .cta-block-bg {
        display:none;
    }
    .cta-block-content {
        background-color:var(--sec-color); 
        border-radius:var(--border-radius);
    }
    .cta-block-img {
        margin:0 auto;
        padding:0;
        width:360px;
        max-width:100%;
        order:-1;
    }
}

.project-slider {
    overflow:visible;
    .slick-list {
        overflow:visible;
    }
    .project-slide {
        width:100%;
        position:relative;
        &::before {
            content:'';
            display:block;
            width:60%;
            height:90%;
            position:absolute;
            bottom:0;
            left:1rem;
            z-index:10;
            background:var(--main-color);
            opacity:.32;
            border-top-left-radius: 100%;
            border-top-right-radius: 100%;
        }
        &::after {
            content:'';
            display:block;
            width:25%;
            height:40%;
            position:absolute;
            bottom:50%;
            left:0;
            z-index:10;
            border:2px solid var(--sec-color);
            border-top-left-radius: 100%;
            transform:TranslateY(-1rem);
        }
        .project-image {
            display:block;
            width:60%;
            aspect-ratio:1/1.17;
            aspect-ratio:1/1;
            border-top-left-radius: 1000px;
            border-top-right-radius: 1000px;
            object-fit:cover;
            object-position: center;
            margin-left:auto;
        }
        .project-logo {
            width:230px;
            max-width:80%;
            height:auto;
            display:block;
            margin-bottom:1rem;
            filter:brightness(0) invert(1);
        }
        .project-tag {
            font-weight:600;
        }
        .project-content {
            display:block;
            position:absolute;
            z-index:15;
            left:2rem;
            top:60%;
            top:auto;
            bottom:1.5rem;
            .button, .altbutton {
                margin-top:0;
            }
        }
    }
}
@media screen and (max-width:767px) {
    .project-slider {
        .project-slide {
            &::before {
                display:none;
            }
            &::after {
                width:50%;
                height:auto;
                aspect-ratio:1/1;
                top:2rem;
                left:1rem;
            }
            .project-content {
                position:relative;
                left:auto;
                top:auto;
                bottom:auto;
                padding:1rem;
                background:#a1a1a1;
            }
            .project-image {
                width:100%;
            }
        }

    }
}
.case-intro {
    padding-bottom:4rem;
    position:relative;
}
.arrows {
    z-index:15;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.32rem;
    font-size:.8rem;
    font-weight:600;
    align-content:center;
    color:var(--sec-color);
    .case-intro & {
        position:absolute;
        bottom:1.5rem;
        right:.5rem;
    }
    .hero-content-2 & {
        margin-left:auto;
    }
    .slick-prev, .slick-next {
        display:inline-block;
        width:2rem;
        height:2rem;
        background:url('img/icons/pointer_orange.svg') center / 1rem no-repeat;
        cursor:pointer;
    }
    .slick-prev {
        transform:rotate(180deg);
    }
    &:has(.slick-prev.slick-hidden):has(.slick-next.slick-hidden) {
        display:none;
    }
}

.pakketten {
    overflow:visible;
}
.pakket {
    width:270px;
    background-color:var(--tert-color);
    padding:4rem .75rem 2rem .75rem;
    border-radius: 1000px 1000px 0 0;
    color:white;
    border-bottom:8px solid var(--sec-color);
    margin-bottom:32px;
    &.meestgekozen {
        position:relative;
        margin-bottom:3rem;
        &::after {
            content:'MEEST GEKOZEN';
            display:block;
            position:absolute;
            top:100%;
            left:0;
            right:0;
            background:var(--sec-color);
            color:white;
            text-align:center;
            padding:.5rem 1rem;
            border-bottom-right-radius: var(--border-radius);
        }
    }
    .pakket-title {
        text-align:center;
        font-weight:700;
        font-size:1.4em;
        font-family:var(--font-sec);
    }
}

.addons {
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    gap:2rem 1rem;
    align-items:flex-start;
    align-items:stretch;
    .addon {
        width:280px;
        max-width:100%;
        background:var(--tint-color);
        border-radius:var(--border-radius);
        padding:2rem 1rem 1rem 1rem;
        transition:.3s ease;
        position: relative;
        .grayback & {
            background:white;
        }
        .addon-header {
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            justify-content:flex-start;
            width:100%;
            gap:1rem;
            margin-bottom:1rem;
            img {
                display:block;
                width:32px;
                height:32px;
                object-fit:contain;
                object-position:center;
            }
            span {
                font-weight:800;
                flex:1 1 0px;
            }
        }
        ul, p {
            margin:0;
        }
        .addon-content-2 {
            display:none;
        }
        &.active .addon-content-2 {
            display:block;
        }
        .addon-open {
            display:block;
            width:32px;
            height:32px;
            background:url('img/icons/pointer_orange.svg') center / 1rem no-repeat;
            margin-top:1rem;
            transform:rotate(90deg);
            cursor:pointer;
            justify-self: center;
            .active & {
                transform:rotate(-90deg);
            }
        }
        .addon-arrow {
            width:2.5rem;height:auto;display:block;margin-left:auto;
            position:absolute;
            bottom:1em;
            right:1em;
            padding:1em 0 0 1em;
        }
    }
}

.teamlid {
    position:relative;
    margin-bottom:3rem;
    .teamlid-img {
        display:block;
        width:100%;
        aspect-ratio:9/10;
        height:auto;
        object-fit:cover;
        object-position:center;
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
        border-bottom:6px solid var(--sec-color);
    }
    .teamlid-content {
        background:var(--tint-color);
        padding:1rem;
        border-bottom-left-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
    }
    .teamlid-naam {
        display:block;
        margin-top:0;
    }
    .teamlid-email, .teamlid-tel {
        text-decoration:none;
    }
    .teamlid-li {
        position:absolute;
        z-index:5;
        top:.75rem;
        right:.75rem;
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        justify-content: center;
        width:2rem;
        height:2rem;
        border-radius:100px;
        background:var(--sec-color);
        margin-top:.25em;
        box-shadow:0 0 8px 0 rgba(0,0,0,0.16);
        img {
            display:block;
            width:1.15rem;
            height:1.15rem;
            object-fit:contain;
            object-position:center;
            filter:brightness(0) invert(1);
        }
    }
}



.footer-logos {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    align-content:center;
    justify-content: space-between;
    gap:1rem;
    img {
        display:block;
        width:128px;
        height:auto;
        max-height:90px;
        object-fit:contain;
        object-position:center;
    }
    &.footer-logos-s img {
        width:90px;
        max-height:65px;
    }
}
footer {
    background:var(--main-color);
    color:white;
    padding:4rem 0 2rem 0;
    margin-top:32px;
    b {
        color:var(--sec-color);
    }
    ul {
        margin:0;
        padding:0;
        list-style:none;
        li {
            a {
                text-decoration:none;
            }
        }
    }
    .footer-logo img {
        display:block;
        width:64px;
    }
    .footer-main {
        gap:2rem 0;
    }
    .footer-bottom {
        align-items:center;
        align-content:center;
        font-size:.9rem;
    }
    .footer-socials {
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        justify-content:flex-start;
        margin-top:3em;
        gap:.5em;
        a {
            display:inline-block;
        }
        img {
            display:block;
            width:1.35rem;
            height:1.35rem;
            object-fit:contain;
            object-position:center;
        }
    }
}