/* ========================================
                Hero
                [START]
========================================= */

.frontpage-hero {
    position: relative;
    width: 100%;
    min-height: 90vh;
    min-height: calc(90vh - var(--header-height));
    min-height: calc(90svh - var(--header-height));
    margin-bottom: 3.75rem;
}

.frontpage-hero__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    min-height: calc((90svh - var(--header-height)) - 40px);
    padding-top: 1.75rem;
    padding-bottom: 1.25rem;
}

.frontpage-hero__left {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    flex-grow: 1;
    width: 90%;
    height: 100%;
    min-height: fit-content;
    margin-top: 1rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 12%);
    border-radius: var(--border-radius);
    backdrop-filter: blur(4px);
    /* background-color: #ffffff4d; */
    background-color: var(--color-surface-darker);
}

.frontpage-hero__top {
    margin-top: 40px;
}

.frontpage-hero__statement {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: .5rem;
    width: fit-content;
    margin-bottom: .5rem;
    padding-top: .125rem;
    padding-bottom: .125rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: var(--border-radius);
    box-shadow: 0 0 2px 1px rgb(2 90 96 / 35%);
    background-color: var(--color-surface);
}

.frontpage-hero-statement__label {
    font-size: .875rem;
    color: var(--color-on-surface);
}

.frontpage-hero-statement__icon {
    fill: var(--color-on-surface);
}

.frontpage-hero__title {
    margin-bottom: 1rem;
    /* text-shadow: 2px 2px rgb(0, 0, 0, 0.2); */
    font-size: 1.75rem;
    color: var(--color-on-surface-darker);
}

.frontpage-hero__text {
    line-height: 1.9;
    word-spacing: 1px;
    color: var(--color-on-surface-darker);
}

.frontpage-hero__button-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 2rem;
    row-gap: 1rem;
    margin-top: 1.25rem;
}

.frontpage-hero__bottom {
    margin-top: auto;
}

@keyframes frontpage-hero-button {
    from {
        opacity: 0;
        transform: translateX(-120px);
    }
    to {
        opacity: 100%;
        transform: translateX(0);
    }
}

.frontpage-hero__button {
    animation: frontpage-hero-button 2s ease both;
}

.frontpage-hero__button:nth-of-type(2) {
    animation-delay: .6s;
}

.frontpage-hero__button--appointment {
    border-radius: 12px;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    background-color: transparent;
}

.frontpage-hero__button--appointment:hover {
    color: var(--color-on-primary);
    background-color: var(--color-primary-darker);
}

.frontpage-hero__button--workplace {
    color: var(--button-text-color);
    background-color: var(--button-bg-color);
}

@keyframes frontpage-hero-services-title {
    from {
        opacity: 0;
    }
    to {
        opacity: 100%;
    }
}

.frontpage-hero__services-title {
    display: none;
    margin-bottom: 12px;
    font-size: 1.25rem;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 2px rgb(0, 0, 0, 30%);
    animation: frontpage-hero-services-title 2s ease both;
    animation-delay: 1.6s;
}

.frontpage-hero__service-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 20px;
    justify-content: space-between;
    padding: 0;
}

@keyframes frontpage-hero-service {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 100%;
        transform: translateY(0);
    }
}

.frontpage-hero__service-card {
    display: flex;
    flex-direction: column;
    max-width: max(calc((100% / 3) - 8px), 14.375rem);
    width: fit-content;
    animation: frontpage-hero-service 2s ease both;
}

.frontpage-hero__service-card:nth-child(2) {
    animation-delay: .6s;
}

.frontpage-hero__service-card:nth-child(3) {
    animation-delay: .9s;
}

.frontpage-hero-service-card__header {
    font-size: 2.5rem;
    font-weight: 900;
}

.frontpage-hero-service-card__header svg {
    fill: var(--color-primary);
}

@keyframes frontpage-hero-service-footer {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 100%;
        transform: translateY(0);
    }
}

.frontpage-hero-service-card__footer {
    color: var(--color-primary);
    animation: frontpage-hero-service-footer 1.4s ease both;
    animation-delay: 1.6s;
}

.frontpage-hero__service-card:nth-child(2) .frontpage-hero-service-card__footer {
    animation-delay: 2.2s;
}

.frontpage-hero__service-card:nth-child(3) .frontpage-hero-service-card__footer {
    animation-delay: 2.5s;
}

.frontpage-hero__right {
    display: none;
    position: absolute;
    z-index: -1;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.l-frontpage-hero__img {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.frontpage-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(40%) blur(2px);
    transform: scale(1.01);
}

/* ========================================
                Hero
                [END]
========================================= */




/* ========================================
                USP
                [START]
========================================= */

.frontpage-usp {
    width: 100%;
    margin-bottom: 6.25rem;
}

.frontpage-usp__inner {
    display: flex;
    flex-direction: column;
    row-gap: 2.5rem;
    width: var(--page-width);
    margin-left: auto;
    margin-right: auto;
}

.frontpage-usp__card {
    width: 100%;
    padding: 1.75rem;
    box-shadow: 0 0 3px 1px rgb(1 144 153 / 15%);
    border-radius: var(--border-radius);
    background-color: #fff;
}

.frontpage-usp-card__icon {
    width: fit-content;
    margin-bottom: 1rem;
    padding: .75rem;
    box-shadow: 0 0 1px 1px #01909966;
    border-radius: 1rem;
    background-color: #0190991a;
}

.frontpage-usp-card__icon svg {
    width: 24px;
    height: 24px;
    fill: var(--color-secondary);
}

.frontpage-usp-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-on-surface);
}

.frontpage-usp-card__subtext {
    font-size: .875rem;
    font-weight: 300;
    color: var(--color-on-surface);
}

/* ========================================
                USP
                [END]
========================================= */




/* ========================================
                Video
                [START]
========================================= */

.frontpage-video {
    width: 100%;
    margin-bottom: 8.75rem;
}

.frontpage-video__inner {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    align-items: center;
    width: var(--page-width);
    margin-left: auto;
    margin-right: auto;
}

.frontpage-video__media-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.frontpage-video__media {
    max-width: min(50rem, 100%);
    padding: 1.25rem;
    border-radius: .75rem;
    box-shadow: 0 0 1px 3px rgb(0, 0, 0, 4%);
    background-color: var(--color-surface);
}

.frontpage-video video {
    border-radius: .75rem;
}

.frontpage-video__content {
    max-width: 80ch;
}

.button.frontpage-video__cta {
    margin-top: 1.25rem;
    border-radius: .5rem;
    color: var(--color-on-secondary);
    background-color: var(--color-secondary);
}

.button.frontpage-video__cta:hover {
    color: var(--color-on-secondary-darker);
    background-color: var(--color-secondary-darker);
}

/* ========================================
                Video
                [END]
========================================= */




/* ========================================
                Banner
                [START]
========================================= */

.frontpage-banner {
    width: 100%;
    margin-bottom: 8.75rem;
}

.frontpage-banner__inner {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
    width: var(--page-width);
    margin-left: auto;
    margin-right: auto;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: 0 0 4px 4px rgb(0, 0, 0, 8%);
    background-color: var(--color-secondary);
}

.frontpage-banner__title {
    font-size: 1.5rem;
    color: var(--color-on-secondary);
}

.frontpage-banner__subtext {
    margin-top: -8px;
    color: var(--color-on-secondary);
}

.frontpage-banner__buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: .75rem;
    row-gap: .5rem;
    margin-left: auto;
}

.button.frontpage-banner__button {
    padding-top: .75rem;
    padding-bottom: .75rem;
    border-radius: var(--border-radius);
}

/* ========================================
                Banner
                [END]
========================================= */




/* ========================================
                Partner
                [START]
========================================= */

.frontpage-partner {
    width: 100%;
    margin-bottom: 11.25rem;
}

.frontpage-partner__inner {
    display: flex;
    flex-direction: column;
    row-gap: 2.5rem;
    width: var(--page-width);
    margin-left: auto;
    margin-right: auto;
}

.frontpage-partner__info {
    width: 100%;
}

.frontpage-partner-info__img {
    width: 12.5rem;
    margin-bottom: .5rem;
}

.frontpage-partner-info__title {
    font-size: 2rem;
    font-weight: 700;
}

.button.frontpage-partner-info__button {
    position: relative;
    margin-top: .5rem;
    padding: 0;
    border: none;
    font-weight: 600;
    color: var(--color-primary);
    background-color: transparent;
}

.button.frontpage-partner-info__button span::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 0px;
    height: 3px;
    background-color: #0160662e;
    transition: all .3s ease;
}

.button.frontpage-partner-info__button:hover span::after {
    width: 80%;
}

.frontpage-partner-info__bullets {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-top: 1rem;
}

.frontpage-partner-info__bullet {
    display: flex;
    flex-direction: row;
    column-gap: .5rem;
    align-items: center;
    padding-top: .25rem;
    padding-bottom: .25rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: var(--border-radius);
    box-shadow: 0 0 3px 1px rgb(2 90 96 / 26%);
    font-size: .875rem;
    background-color: var(--color-surface);
}

.frontpage-partner-info-bullet__label {
    color: var(--color-on-surface);
}

.frontpage-partner-info-bullet__icon {
    fill: var(--color-on-surface);
}

.frontpage-partner__visual {
    flex-grow: 1;
}

.frontpage-partner-visual__img {
    width: 100%;
    height: 300px;
    border-radius: var(--border-radius);
    box-shadow: 0 0 3px 2px rgb(2 90 96 / 40%);
    object-fit: cover;
}

/* ========================================
                Partner
                [END]
========================================= */




/* ========================================
                Rates
                [START]
========================================= */

.frontpage-rates {
    margin-bottom: 0;
}

.frontpage-rates__inner {
    width: var(--page-width);
    margin-left: auto;
    margin-right: auto;
}

.frontpage-rates__title {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
}

.frontpage-rates__subtitle {
    font-size: .875rem;
    font-weight: 300;
}

.frontpage-rates__inner .rate-list {
    margin-top: 1.5rem;
}

.frontpage-rates__inner .rate-list__card {
    opacity: 0;
    filter: blur(4px);
}

.frontpage-rates__inner .rate-list__card.animated-item.visible {
    animation: frontpage-rates-card 1s ease both;
}

.frontpage-rates__inner .rate-list__card.animated-item.visible:nth-of-type(2) {
    animation-delay: .6s;
}

.frontpage-rates__inner .rate-list__card.animated-item.visible:nth-of-type(3) {
    animation-delay: 1.2s;
}

@keyframes frontpage-rates-card {
    to {
        opacity: 100%;
        filter: blur(0px);
    }
}

/* ========================================
                Rates
                [END]
========================================= */




/* ========================================
                Flyer
                [START]
========================================= */

.frontpage-flyer {
    position: relative;
    padding-top: 12rem;
    padding-bottom: 10rem;
    overflow: hidden;
}

.frontpage-flyer__bg {
    position: absolute;
    z-index: -2;
    inset: 0;
    mask-composite: intersect;
    mask-image: linear-gradient(0deg, #000 80%, transparent),
                linear-gradient(180deg, #000 60%, transparent);
    background-color: var(--color-surface);
}

.frontpage-flyer__inner {
    display: flex;
    flex-direction: column-reverse;
    row-gap: 2.5rem;
    width: var(--page-width);
    margin-left: auto;
    margin-right: auto;
}

.frontpage-flyer__content {
    display: flex;
    flex-direction: column;
    flex-basis: 50%;
}

.frontpage-flyer__title {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: .5rem;
    row-gap: .25rem;
    font-size: 1.75rem;
    font-weight: 800;
}

.frontpage-flyer__icon {
    fill: currentColor;
}

.frontpage-flyer__subtitle {
    font-size: 1rem;
    font-weight: 300;
    margin-bottom: 1.25rem;
}

.frontpage-flyer .flyer {
    display: none;
}

/* ========================================
                Flyer
                [END]
========================================= */




/* ========================================
                Reviews
                [START]
========================================= */

.frontpage-reviews {
    width: 100%;
    margin-bottom: 11.25rem;
}

.frontpage-reviews__inner {
    width: var(--page-width);
    margin-left: auto;
    margin-right: auto;
}

.frontpage-reviews__title {
    margin-bottom: 1rem;
    font-size: 1.75rem;
    font-weight: 800;
}

.glide.glide-uninit .frontpage-reviews__slider {
    display: flex;
    flex-direction: row;
    column-gap: 1.5rem;
    padding: .25rem;
    overflow: hidden;
}

.glide .frontpage-reviews__slider {
    padding-top: .25rem;
    padding-bottom: .25rem;
}

.glide.glide-uninit .frontpage-reviews-slider__item {
    flex-basis: 100%;
    flex-shrink: 0;
    margin: 0;
    list-style: none;
}

.frontpage-reviews-slider__item {
    padding: 1.75rem;
    border-radius: var(--border-radius);
    box-shadow: 0 0 2px 1px rgb(2 90 96 / 20%);
    background-color: var(--color-surface);
}

.frontpage-reviews-slider-item__title {
    margin-bottom: .25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-on-surface);
}

.frontpage-reviews-slider-item__text {
    font-size: .875rem;
    font-weight: 300;
    line-height: 1.4;
    word-spacing: 1px;
    color: var(--color-on-surface);
}

/* ========================================
                Reviews
                [END]
========================================= */




/* ========================================
                Software
                [START]
========================================= */

.frontpage-software {
    width: 100%;
    margin-bottom: 11.25rem;
}

.frontpage-software__inner {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    width: var(--page-width);
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    transform: translateY(1.875rem);
}

.frontpage-software__inner.animated-item.visible {
    animation: frontpage-software-inner 1.4s ease both;
}

@keyframes frontpage-software-inner {
    to {
        opacity: 100%;
        transform: translateY(0);
    }
}

.frontpage-software__logo-link {
    display: block;
    width: fit-content;
}

.frontpage-software__inner .app__button {
    opacity: 0;
    transform: scale(.9);
    filter: blur(4px);
}

.frontpage-software__inner .app__button.animated-item.visible {
    animation: frontpage-software-button 1.4s ease both;
    animation-delay: .4s;
}

.frontpage-software__inner .app__button.animated-item.visible:nth-of-type(2) {
    animation-delay: .8s;
}

@keyframes frontpage-software-button {
    to {
        opacity: 100%;
        transform: scale(1);
        filter: blur(0px);
    }
}

.frontpage-software__visual {
    width: 100%;
    max-width: 15rem;
    object-fit: contain;
}

.frontpage-software__content {
    width: 100%;
}

.frontpage-software__title {
    font-size: 1.75rem;
    font-weight: 800;
}

.frontpage-software__subtext {
    font-size: .875rem;
    font-weight: 300;
}

.frontpage-software-download {
    margin-top: 2.5rem;
}

.frontpage-software-download__title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
}

.frontpage-software-download__subtitle {
    font-size: .875rem;
    font-weight: 300;
}

.frontpage-software-download__buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: .5rem;
    row-gap: .5rem;
    margin-top: .75rem;
}

/* ========================================
                Software
                [END]
========================================= */



.frontpage-contact {
    width: 100%;
    margin-bottom: 7.5rem;
}

.frontpage-contact__inner {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    width: var(--page-width);
    margin-left: auto;
    margin-right: auto;
    padding: 1.75rem;
    border-radius: var(--border-radius);
    box-shadow: 0 0 2px 1px #01909930;
    background-color: var(--color-surface);
}

.frontpage-contact-map {
    flex-grow: 1;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.frontpage-contact-map iframe {
    min-height: 18.75rem;
}

.frontpage-contact-details {
    display: flex;
    flex-direction: column;
    row-gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.frontpage-contact__title {
    font-size: 1.75rem;
    font-weight: 800;
}

.frontpage-contact-details__column {
    display: flex;
    flex-direction: row;
    column-gap: 1rem;
}

.frontpage-contact-details-column__icon svg {
    width: 24px;
    height: 24px;
    fill: var(--color-secondary);
}

.frontpage-contact-details-column__content {
    display: flex;
    flex-direction: column;
    font-size: .875rem;
    color: var(--color-on-surface);
}

.frontpage-contact-details-column__title {
    font-weight: 600;
}

.button.frontpage-contact__button {
    padding-top: .75rem;
    padding-bottom: .75rem;
    border-radius: var(--border-radius);
    color: var(--color-on-secondary);
    background-color: var(--color-secondary);
}





/* Sign in (Stalling Zeker) */
.frontpage-signin__inner {
    width: var(--page-width);
    margin-left: auto;
    margin-right: auto;
}