:root { --header-offset: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-offset); }
:where([id]) { scroll-margin-top: var(--header-offset); }

.emsite {
    --bs-body-color: var(--bs-dark);
    --transition: all 0.3s ease-in-out;

    @media (max-width: 480px) {
        --bs-body-font-size: 0.9375rem;
    }

    .maxwidth-150rem {
        max-width: 150rem;
    }
    .maxwidth-120rem {
        max-width: 120rem;
    }
    .maxwidth-105rem {
        max-width: 105rem;
    }
    .maxwidth-75rem {
        max-width: 75rem;
    }
    .maxwidth-60rem {
        max-width: 60rem;
    }
    .maxwidth-55rem {
        max-width: 55rem;
    }
    .maxwidth-48rem {
        max-width: 48rem;
    }
    .maxwidth-30rem {
        max-width: 30rem;
    }

    .svgfilter-dark {
        filter: invert(4%) sepia(45%) saturate(898%) hue-rotate(153deg) brightness(95%) contrast(95%);
    }

    h1,
    .h1,
    h2,
    .h2,
    h3,
    .h3,
    h4,
    .h4,
    h5,
    .h5 {
        text-wrap: balance;
        line-height: 1.2;
        font-weight: 600;
    }

    h1,
    .h1 {
        font-size: 2rem;

        @media (min-width: 481px) {
            font-size: 2.25rem;
        }

        @media (min-width: 992px) {
            font-size: 2.75rem;
        }

        .subtitle {
            font-weight: 300;
            font-size: 1.25rem;

            @media (max-width: 480px) {
                font-size: 1.125rem;
            }
        }
    }
    h2,
    .h2 {
        font-weight: 200;
        font-size: 1.75rem;

        @media (min-width: 481px) {
            font-size: 2rem;
        }
        @media (min-width: 992px) {
            font-size: 2.5rem;
        }


        .subtitle {
            font-weight: 600;
            font-size: 1.125rem;
        }
    }
    h3,
    .h3 {
        font-size: 1.375rem;

        @media (min-width: 481px) {
            font-size: 1.5rem;
        }
    }
    h4,
    .h4 {
        font-size: 1.25rem;

        @media (min-width: 481px) {
            font-size: 1.375rem;
        }
    }

    .btn-gradient-icon-arrow {
        span {
            cursor: pointer;
            border-radius: 50%;
            width: 2rem;
            height: 2rem;
            border: 0;
            position: relative;
            overflow: hidden;
            background: linear-gradient(180deg, rgba(43, 222, 201, 1) 0%, rgba(52, 197, 254, 1) 100%);
            transition: var(--transition);
            left: 0;

            i {
                position: absolute;
                left: 1px;
                top: 1px;
                background: var(--bs-white);
                width: 1.875rem;
                height: 1.875rem;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
                color: var(--bs-dark);
            }


        }
        @media (min-width: 992px) {
            &:hover {
                span {
                    left: 0.5rem;
                }
            }
        }
    }

    .min-windowheight {
        min-height: calc(100vh - 80px);

        @media (min-width: 992px) {
            min-height: calc(100vh - 100px);
        }
    }

    .border-dashed {
        --bs-border-style: dashed;
    }
    .border-darker {
        --bs-border-color: var(--bs-gray-400);
    }

    .link-dark {
        border-color: var(--bs-dark);

        @media (min-width: 992px) {
            &:hover {
                border-color: transparent;
                color: var(--bs-link-color) !important;
            }
        }
    }

    .imgFloat {
        animation: float 8s ease-in-out infinite;
    }

    .imgFloatSmall {
        animation: floatSmall 6s ease-in-out infinite;
    }
    .imgFloatSmallReverse {
        animation: floatSmallReverse 6s ease-in-out infinite;
    }

    .border-shadow {
        border-bottom: 4px solid var(--bs-border-color);
        border-right: 4px solid var(--bs-border-color);
    }

    .bg-em-gradient {
        background: #FFFFFF;
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 12%, rgba(43, 222, 201, 0.22) 72%, rgba(52, 197, 254, 0.22) 100%);
    }

    .rounded-card {
        border-radius: 1.5rem;
    }
    .card-shadow {
        box-shadow: 0px 8px 40px 0px rgba(20, 25, 16, 0.08);
        -webkit-box-shadow: 0px 8px 40px 0px rgba(20, 25, 16, 0.08);
        -moz-box-shadow: 0px 8px 40px 0px rgba(20, 25, 16, 0.08);
    }

    .btn-dark:has(.svgfilter-white) {
        svg {
            transition: var(--transition);
        }
        @media (min-width: 992px) {
            &:hover {
                .svgfilter-white {
                    filter: invert(4%) sepia(45%) saturate(898%) hue-rotate(153deg) brightness(95%) contrast(95%);
                    transition: var(--transition);
                }
            }
        }
    }

    .dlist-data {
        display: grid;
        grid-template-columns: 7rem auto;
        grid-gap: 0.625rem 0;
        line-height: 1.25;

        dt,
        dd {
            font-weight: 400;
            padding: 0;
            border-top: 1px solid var(--bs-border-color);
            padding-top: 0.75rem;
        }
        dt {
            font-size: 0.875rem;
        }
        dd {
            margin: 0;
            padding-left: 0.5rem;
        }
    }

    .accordion {
        .accordion-item {
            border: 0;

            .accordion-button {
                background: var(--bs-white);
                font-size: 1.125rem;
                font-weight: 600;
                color: var(--bs-dark);
                padding-inline: 0;
                padding-block: 1.75rem;
                box-shadow: unset;
                border-top: 1px solid var(--bs-border-color);

                &::after {
                    width: 1.25rem;
                    height: 1.25rem;
                    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='currentColor' d='M23 11v2H13v10h-2V13H1v-2h10V1h2v10z'/></svg>");
                    background-size: 1.25rem;
                    filter: invert(4%) sepia(45%) saturate(898%) hue-rotate(153deg) brightness(95%) contrast(95%);
                }
                &:not(.collapsed) {
                    &::after {
                        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='currentColor' d='M4 11h16v2H4z'/></svg>");

                    }
                }

                @media (max-width: 480px) {
                    font-size: 1rem;
                }
            }
            .accordion-body {
                background: var(--bs-white);
                padding-inline: 0;
                padding-top: 0;
                padding-bottom: 2rem;
            }

            &:last-of-type {
                border-bottom: 1px solid var(--bs-border-color);
            }
        }
    }

    .cta-block {
        background: #2BDEC9;
        background: linear-gradient(87deg, rgba(43, 222, 201, 1) 0%, rgba(52, 197, 254, 1) 100%);

        @media (min-width: 992px) {
            padding: 4rem !important;
        }
        @media (min-width: 1200px) {
            padding: 3.75rem !important;
        }

        h3 {
            line-height: 1.65;
            text-wrap: unset;

            @media (max-width: 575.98px) {
                line-height: 1.5;
            }

            .subtitle {
                line-height: 1.2;

                @media (max-width: 575.98px) {
                    font-size: 1.125rem !important;
                }
            }


        }

        .cta-login-block {
            width: 100%;
            border: 10px solid rgba(var(--bs-white-rgb), 0.5);
            border-radius: 3.125rem;
            line-height: 1.5;

            @media (min-width: 1200px) {
                max-width: 28.75rem;
            }
        }
    }

    .card-contactform {
        width: 100%;

        @media (min-width: 1200px) {
            max-width: 35rem;
        }
    }


    .header {
        position: relative;
        z-index: 1000;
        transition: var(--transition);
        transform: translateY(0);

        will-change: transform;

        .header-main {

        }
        &.header--visible {
            transform: translateY(-100%);
        }

        .header-actions {
            .actions-wrapper {
                .btn-primary {
                    @media (max-width: 767px) {
                        padding: 0.625rem 1.125rem;
                        font-size: 1rem;
                        margin-right: 0.5rem;
                    }
                    @media (max-width: 480px) {
                        display: none;
                    }

                }
            }
        }
        .header-acc-actions {
            font-size: 0.9375rem;
        }

        &.header-fixed {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            /* optioneel: achtergrond en schaduw als hij fixed is */
            background: var(--bs-white);
            height: 5rem;

            transform: translateY(0);          /* start buiten beeld */
            transition: transform .35s ease;



            .header-main {
                height: 5rem;
            }

            .brand-logo {
                img {
                    @media (min-width: 768px) {
                        height: 2.5rem;
                        transition: var(--transition);
                    }
                }
            }
        }

        &.header-login {
            font-size: 0.9375rem;
        }
    }

    .footer {
        &.footer-notauth {
            border-top: 0.25rem solid var(--bs-brand-1);
            line-height: 2;
            position: relative;

            &::before {
                content: '';
                width: 50%;
                height: 0.25rem;
                position: absolute;
                top: -0.25rem;
                right: 0;
                background: var(--bs-brand-2);
            }

            .footer-nav {
                h3 {
                    font-size: 0.9375rem;
                    padding-bottom: 0.5rem;
                }
                li {
                    a {
                        display: block;
                        padding-block: 0.25rem;
                        font-weight: 500;
                    }
                }
                .footer-contactinfo {
                    line-height: 1.5;

                    a {
                        font-weight: 400;

                        small {
                            font-size: 0.8125rem;
                        }
                    }
                }


            }
            .footer-copyright {
                position: relative;
                font-size: 0.75rem;

                &::before {
                    content: '';
                    width: 100%;
                    height: 1px;
                    position: absolute;
                    top: 0;
                    left: 0;
                    background: #2BDEC9;
                    background: linear-gradient(87deg, rgba(43, 222, 201, 1) 0%, rgba(52, 197, 254, 1) 100%);
                }
            }
        }
    }

    .main-nav {
        a {
            font-weight: 500;
            color: var(--bs-dark);

            @media (min-width: 992px) {
                &:hover {
                    color: var(--bs-link-color);
                }
            }

        }

        ul {
            li {
                border-bottom: 1px solid var(--bs-border-color);
                padding-block: 0.75rem;
                margin: 0;

                @media (min-width: 768px) {
                    padding-block: 1rem;
                }
            }
        }
    }

    #body-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: none;
        background: var(--bs-dark);
        opacity: .6;
        z-index: 2;
    }

    /*  Off Canvas */
    .sidebar-offcanvas {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: all .3s ease-out;
        -o-transition: all .3s ease-out;
        transition: all .3s ease-out;

        position: fixed;
        top: 0;
        bottom: 0;
        overflow-y: auto;
        overflow-x: hidden;
        width: 100%;
        z-index: 5;

        @media (min-width: 992px) {
            width: 50%;
        }

        @media (min-width: 1200px) {
            -webkit-transition: all .6s ease-out;
            -o-transition: all .6s ease-out;
            transition: all .6s ease-out;
        }

        &.offcanvas-right {
            right: -1400px;
            left: auto;

            box-shadow: inset 1px 0 0 rgba( 0, 0, 0, .1 );

            @media (min-width: 1200px) {
                right: -2000px;
            }
            @media (min-width: 1400px) {
                right: -4000px;
            }

            @media (max-width: 991px) {
                right: -1200px;
            }
        }
    }

    #mobile-menu {
        background: var(--bs-white);
    }
    .nav-trigger {
        width: 2.5rem;
        height: 5rem;
        z-index: 1001;
        display: flex;

        .trigger-area {
            cursor: pointer;
            display: flex;
            width: 100%;
            height: 100%;
            justify-content: center;
            align-items: center;

            position: relative;
            z-index: 9999;
            pointer-events: auto;
            cursor: pointer;

            .trigger-area-inner {
                position: relative;
                width: 100%;
                height: 2.5rem;
                margin-top: -0.375rem;

            }

            i {
                display: block;
                height: 2px;
                background: var(--bs-dark);
                margin: 0.625rem 0;
                -webkit-transition: all .2s;
                transition: all .2s;

                position: relative;
            }
        }
    }

    .modal-contact {

        &.showModal {
            box-shadow: 0px 8px 40px 0px rgba(20, 25, 16, 0.16);
            -webkit-box-shadow: 0px 8px 40px 0px rgba(20, 25, 16, 0.16);
            -moz-box-shadow: 0px 8px 40px 0px rgba(20, 25, 16, 0.16);
        }
        .card-modalcontact {
            border-radius: 1.5rem;

            box-shadow: 0px 8px 40px 0px rgba(20, 25, 16, 0.16);
            -webkit-box-shadow: 0px 8px 40px 0px rgba(20, 25, 16, 0.16);
            -moz-box-shadow: 0px 8px 40px 0px rgba(20, 25, 16, 0.16);
            border: 0;

            @media (max-width: 767px) {
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
            }
        }
    }

    .img-container {
        border-radius: 3rem;
        overflow: hidden;
        box-shadow: 0px 8px 40px 0px rgba(20, 25, 16, 0.08);
        -webkit-box-shadow: 0px 8px 40px 0px rgba(20, 25, 16, 0.08);
        -moz-box-shadow: 0px 8px 40px 0px rgba(20, 25, 16, 0.08);
    }

    .contact-form-container {
        height: 100%;
        font-size: 0.9375rem;

        >div {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        form {
            div:not(:has(input[required])) {
                label {
                    position: relative;

                    &::after {
                        content: '(optioneel)';
                        font-size: 0.75rem;
                        color: var(--bs-gray);
                        font-weight: 400;
                        margin-left: 0.25rem;
                    }
                }
            }
            .mb-3:has(button) {
                margin-bottom: 0 !important;
            }
        }

        .dlist-data {
            @media (max-width: 480px) {
                grid-template-columns: 1fr;

                dd {
                    border: 0;
                    padding: 0 0 0.25rem;
                }
            }
            @media (min-width: 992px) and (max-width: 1399.98px) {
                grid-template-columns: 1fr;

                dd {
                    border: 0;
                    padding: 0 0 0.25rem;
                }
            }
        }
    }

    .hero {
        min-height: 45rem;
        height: 48.75rem;

        @media (max-width: 991px) {
            height: auto;
            min-height: 45rem;
        }
        @media (max-width: 767px) {
            min-height: 40rem;
        }
        @media (max-width: 480px) {
            min-height: 35rem;
        }


        .hero-contentbox {
            h1 {

                @media (min-width: 1200px) {
                    font-size: 2.75rem;
                }
            }
            .hero-content {
                text-shadow: unset;
                padding-top: 6.25rem;

                @media (max-width: 991px) {
                    padding-bottom: 10rem;
                }

                @media (max-width: 767px) {
                    padding-top: 5rem;
                }
                @media (max-width: 480px) {
                    font-size: 1rem;
                    padding-top: 3.75rem;
                }
            }
        }
    }

    .dashboard-sample {
        position: relative;
        margin-top: -25rem;

        @media (max-width: 991px) {
            margin-top: -30%;
        }
        @media (max-width: 767px) {
            margin-top: -25%;
        }

        @media (max-width: 575px) {
            margin-top: -27%;
        }
        @media (max-width: 480px) {
            margin-top: -32%;
        }

        img {
            animation: float 8s ease-in-out infinite;
        }
    }

    .usp-section {
        h3 {
            font-size: 1.5rem;
            font-weight: 700;

            @media (min-width: 481px) {
                font-size: 1.75rem;
            }

            span {
                font-size: 1.25rem;
                font-weight: 600;

                @media (min-width: 481px) {
                    font-size: 1.375rem;
                }
            }
        }
    }

    .solution-section {
        .sol-image-container {
            position: relative;
            padding-bottom: 2.5rem;

            @media (min-width: 992px) {
                padding-block: 2.5rem;
            }
            @media (max-width: 480px) {
                padding-bottom: 2.5rem;
            }

            .sol-db-sample {
                position: absolute;
                bottom: -2rem;

                &.sol-db-sample-left {
                    left: -2rem;

                    @media (max-width: 480px) {
                        left: 50%;
                    }
                }
                &.sol-db-sample-right {
                    right: -2rem;

                    @media (max-width: 480px) {
                        right: auto;
                    }
                }

                @media (max-width: 480px) {
                    bottom: -5rem;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 100%;
                }

                img {
                    @media (min-width: 481px) and (max-width: 767px) {
                        scale: 0.9;
                    }
                }
            }

            .sol-image {
                width: 100%;
                height: 25rem;

                @media (min-width: 481px) {
                    width: 80%;
                }

                @media (min-width: 100rem) {
                    width: 35rem;
                }
            }
        }
        .sol-usp {
            h3 {
                line-height: 1.35;

                @media (min-width: 992px) {
                    text-wrap: unset;
                }
            }
            h4 {
                @media (min-width: 992px) and (max-width: 1199.98px) {
                    font-size: 1.25rem;
                }
            }
        }
    }

    .testimonial-section {
        position: relative;

        @media (min-width: 1200px) {
            min-height: 55rem;
        }


        .testimonial-bg-image {
            position: relative;
            width: 100%;
            height: 25rem;
            overflow: hidden;

            @media (min-width: 576px) {
                height: 30rem;
            }

            @media (min-width: 768px) {
                height: 35rem;
            }

            @media (min-width: 1200px) {
                position: absolute;
                height: 100%;
                width: 50%;
                top: 0;
                right: 0;
            }

            img {
                border-top-left-radius: 3rem;
                border-top-right-radius: 3rem;

                @media (min-width: 1200px) {
                    border-top-right-radius: unset;
                    border-bottom-left-radius: 3rem;
                }
            }


        }

        .testimonial-slider {
            max-width: 60rem;
            margin: 0 auto;
            outline: none;

            @media (min-width: 1200px) {
                max-width: 37.5rem;
                margin: 0;
            }
            @media (max-width: 1199.98px) {
                position: relative;
            }

            &:has(.slider-buttons) {
                @media (max-width: 1199.98px) {
                    padding-bottom: 5rem;
                }
            }

            .testimonial {
                padding-left: 3.75rem;
                position: relative;

                @media (min-width: 1200px) and (max-width: 1399.98px) {
                    padding-right: 2.5rem;
                }
                @media (max-width: 480px) {
                    padding-left: 3rem;
                }

                &::before {
                    content: '"';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 2.5rem;
                    font-size: 6.5rem;
                    color: var(--bs-brand-2);
                    background: -webkit-linear-gradient(180deg, rgba(43, 222, 201, 0.8) 0%, rgba(52, 197, 254, 0.8) 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    font-style: italic;
                    line-height: 1;

                    @media (max-width: 480px) {
                        font-size: 5rem;
                        width: 2rem;
                    }
                }

                blockquote {
                    font-size: 1.125rem;
                    line-height: 2;

                    @media (max-width: 480px) {
                        font-size: 1rem;
                    }
                }
            }
        }
        .slider-viewport {
            overflow: hidden;
            touch-action: pan-y;
        }
        .slides {
            display: flex;
            transition: transform 0.4s ease;
            will-change: transform;
        }
        .slide {
            flex: 0 0 100%;
            padding: 0;
        }

        .slider-buttons {
            position: absolute;
            bottom: 7.5rem;
            height: 2.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;

            button.prev,
            button.next {
                cursor: pointer;
                border-radius: 50%;
                width: 2.5rem;
                height: 2.5rem;
                border: 0;
                position: relative;
                overflow: hidden;
                background: linear-gradient(180deg, rgba(43, 222, 201, 0.5) 0%, rgba(52, 197, 254, 0.5) 100%);
                transition: var(--transition);

                span {
                    position: absolute;
                    left: 1px;
                    top: 1px;
                    background: var(--bs-dark);
                    width: 2.375rem;
                    height: 2.375rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 50%;

                }

                @media (min-width: 992px) {
                    &:hover {
                        background: linear-gradient(180deg, rgba(43, 222, 201, 1) 0%, rgba(52, 197, 254, 1) 100%);
                    }
                }

            }

            @media (max-width: 1199.98px) {
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
            }

        }

        /* optioneel: tijdens drag animatie uitschakelen */
        .slides.is-dragging {
            transition: none !important;
            cursor: grabbing;
        }
    }

    .main-login {
        height: 100%;
        min-height: calc(100vh - 5rem);

        @media (min-width: 992px) {
            min-height: calc(100vh - 6.25rem);
        }

        .btn-viewpassword-toggle {
            background: none;
            border: 0;
            min-width: 3.5rem;

            i {
                font-size: 1.25rem;
            }
        }

        .login-reset {
            .form-input-password {
                .mb-3 {
                    margin-bottom: 0.25rem !important;
                }

                &:has(.btn-viewpassword-toggle) {
                    .was-validated .form-control:invalid, .form-control.is-invalid {
                        background-position: right calc(3em + 0.1875rem) center;
                    }
                }
            }
            .btn-viewpassword-toggle {
                top: 24px;
                height: 49px;
            }
        }


    }



    &.page-thankyou {
        .content-section {
            @media (min-width: 767px) {
                min-height: 600px;
            }
            @media (min-width: 992px) {
                min-height: 800px;
            }
        }
    }

    &.side-navigation-active {
        overflow-y: hidden;
        @media (min-width: 992px) {
            .header {
                position: relative;
            }
            .nav-trigger {
                position: absolute;
                right: 2.5rem;
            }
        }

        .offcanvas-right {
            right: 0;
        }

        .trigger-area {

            .trigger-area-inner {
                margin-top: 1.25rem;
                margin-left: -0.5rem;

                @media (min-width: 992px) {
                    margin-top: 0.625rem !important;
                }

                &::before {
                    top: -1.825rem;
                    left: -1rem;
                }
            }

            i {


                &:nth-child(1) {
                    visibility: hidden;
                }

                position: absolute;
                top: auto;
                width: 3rem;
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
                transition-delay: 100ms;

                &:nth-child(3) {
                    -webkit-transform: rotate(-45deg);
                    -moz-transform: rotate(-45deg);
                    -o-transform: rotate(-45deg);
                    -ms-transform: rotate(-45deg);
                    transform: rotate(-45deg);
                    transition-delay: 100ms;
                }
            }
        }
        #body-overlay {
            display: block;
        }
    }
}

@keyframes float {
    0% {
        transform: translatey(0px);
    }
    50% {
        transform: translatey(-24px);
    }
    100% {
        transform: translatey(0px);
    }
}
@keyframes floatSmall {
    0% {
        transform: translatey(0px);
    }
    50% {
        transform: translatey(-16px);
    }
    100% {
        transform: translatey(0px);
    }
}
@keyframes floatSmallReverse {
    0% {
        transform: translatey(0px);
    }
    50% {
        transform: translatey(16px);
    }
    100% {
        transform: translatey(0px);
    }
}