@import "https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap";

.container {
    max-width: 120rem;
    height: 100%;
    margin: 0 auto;
    padding: 0 2rem
}

@media only screen and (max-width: 75em) {
    .container {
        max-width: 100rem
    }
}

@media only screen and (max-width: 56.25em) {
    .container {
        max-width: 90rem
    }
}

@media only screen and (min-width: 112.5em) {
    .container {
        font-size: 75%
    }
}

.mb-40 {
    margin-bottom: 40px !important
}

.slick-slide {
    margin-right: 10px;
    box-sizing: border-box
}

.slick-list {
    padding: 0 10px
}

.slick-track {
    margin-left: -10px
}

:root {
    --primary-color: #2C6BE5;
    --secondary-color: #021936;
    --light-color: #EAF0FC;
    --dark-color: #062148;
    --input-border-color: #ccc
}

.beeldmerk-wit {
    color: #062148
}

.btn {
    font-family: Plus Jakarta Sans, sans-serif;
    font-weight: 600;
    padding: 1rem 2rem;
    font-size: 1.6rem;
    color: #fff;
    border-radius: 0;
    text-decoration: none;
    display: flex;
    align-items: center
}

.btn.btn-primary {
    background-color: var(--primary-color);
    border: none;
    cursor: pointer
}

.btn.btn-primary:hover {
    transition: .2s ease-in-out;
    background-color: color-mix(in srgb, var(--primary-color) 80%, white)
}

.btn.btn-primary.large {
    padding: 16px 32px;
    font-size: 1.2em
}

.btn.btn-outline {
    background-color: transparent;
    border: .5px solid white
}

.btn.btn-outline:hover {
    transition: .2s ease-in-out;
    background-color: #2c6be5
}

.btn.btn-outline-dark {
    color: #062148;
    background-color: transparent;
    border: .5px solid #062148
}

.btn.btn-outline-dark:hover {
    color: #fff;
    transition: .2s ease-in-out;
    background-color: #2c6be5
}

.btn.btn-secondary {
    background-color: #fff;
    border: none;
    cursor: pointer;
    color: #062148
}

.btn.btn-secondary:hover {
    transition: .2s ease-in-out;
    background-color: color-mix(in srgb, var(--secondary-color) 10%, white)
}

.btn.btn-tertiary {
    background-color: #062148;
    border: none;
    cursor: pointer;
    color: #fff
}

.btn.btn-tertiary:hover {
    transition: .2s ease-in-out;
    background-color: color-mix(in srgb, #062148 90%, white)
}

.icon {
    background-size: contain;
    display: inline-block;
    vertical-align: middle
}

.icon.icon-arrow, .icon.icon-arrow-dark-blue {
    width: 24px;
    height: 24px;
    margin-left: 5px
}

.icon.icon-check {
    width: 32px;
    height: 32px;
    margin-bottom: 15px
}

.icon.icon-check-box {
    width: 40px;
    height: 40px;
    margin-right: 10px
}

.icon.icon-arrow-left, .icon.icon-arrow-right {
    width: 50px;
    height: 50px
}

.icon.icon-arrow-box-groen {
    height: 45px;
    width: 45px
}

.icon.icon-star {
    height: 25px;
    width: 25px
}

.icon.icon-arrow-box-wit {
    height: 35px;
    width: 35px
}

.points-wrapper {
    margin-top: 2rem;
    font-size: 1.6rem
}

.points-wrapper .point {
    font-family: Inter, sans-serif;
    font-weight: 600;
    display: flex;
    gap: 1rem;
    margin-left: .5rem;
    margin-bottom: 1rem
}

.points-wrapper .point .icon-wrapper {
    font-size: 1.4rem;
    background: #2c6be5;
    color: #fff;
    border-radius: 50%;
    height: 2rem;
    min-width: 2rem;
    margin-right: 1rem;
    text-align: center
}

.about-section {
    position: relative;
    overflow-x: hidden
}

.about-section .wrapper {
    display: flex;
    padding: 80px 0;
    justify-content: space-between;
    align-items: center
}

.about-section .wrapper .content {
    width: 50%
}

.about-section .wrapper .content .btn-container {
    display: flex
}

.about-section .wrapper .content .subtitle {
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    color: #2c6be5;
    padding-bottom: 1rem
}

.about-section .wrapper .content .title {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 4.8rem;
    color: #0d2b29;
    font-weight: 700;
    padding-bottom: 1rem;
    line-height: 4.5rem
}

.about-section .wrapper .content .text {
    margin-bottom: 20px;
    font-size: 1.6rem
}

.about-section .wrapper .content .ksp-wrapper {
    display: flex;
    margin-bottom: 20px;
    align-items: center
}

.about-section .wrapper .content .ksp-wrapper .icon-wrapper {
    font-size: 1.4rem;
    background: #2c6be5;
    color: #fff;
    border-radius: 50%;
    min-height: 2rem;
    min-width: 2rem;
    margin-right: 1rem;
    text-align: center
}

.about-section .wrapper .content .ksp-wrapper .ksp-title {
    font-weight: 700
}

.about-section .wrapper .content .btn {
    margin-top: 40px
}

.about-section .wrapper .image-container {
    position: relative;
    width: 45%;
    height: 100%;
    overflow: hidden;
    border-radius: 0
}

.about-section .wrapper .image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block
}

@media all and (max-width: 1024px) {
    .about-section {
        overflow: hidden
    }
}

@media all and (max-width: 768px) {
    .about-section .wrapper {
        flex-direction: column-reverse
    }

    .about-section .wrapper .content {
        width: 100%
    }

    .about-section .wrapper .image-container {
        width: 100%;
        max-height: 250px;
        margin-bottom: 20px
    }
}

@media all and (max-width: 540px) {
    .about-section .wrapper {
        padding: 40px 0 60px
    }

    .about-section .wrapper .content .title {
        font-size: 40px
    }
}

.blogs {
    background: #eaf0fc;
    padding: 6rem 0
}

.blogs .title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4rem
}

.blogs .title-wrapper .title {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 4.8rem
}

.blogs .blogs-wrapper {
    display: grid;
    grid-template-columns:1fr 1fr 1fr;
    gap: 3rem
}

.blogs .blogs-wrapper .blog .img-wrapper {
    display: block;
    position: relative;
    height: 30rem;
    width: 100%;
    margin-bottom: 2rem;
    overflow: hidden;
    border-radius: 0
}

.blogs .blogs-wrapper .blog .img-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform .2s ease, filter .2s ease
}

.blogs .blogs-wrapper .blog .img-wrapper img:hover {
    transition: .2s;
    transform: scale(1.05);
    cursor: pointer;
    filter: brightness(.9)
}

.blogs .blogs-wrapper .blog--title {
    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: 2.4rem;
    margin-bottom: 1rem
}

.blogs .blogs-wrapper .blog--text {
    margin-bottom: 2rem;
    font-size: 1.6rem
}

.blogs .blogs-wrapper .blog .btn-wrapper {
    display: flex
}

@media all and (max-width: 540px) {
    .blogs .title-wrapper {
        flex-direction: column;
        align-items: flex-start
    }

    .blogs .title-wrapper .title {
        margin-bottom: 2rem
    }

    .blogs .blogs-wrapper {
        grid-template-columns:1fr
    }
}

.cta {
    padding-top: 1rem;
    background-color: #062148
}

.cta .cta-block {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    border-radius: 0;
    gap: 4rem;
    margin-top: -30rem
}

.cta .cta-block .text-wrapper {
    color: #fff;
    width: 40%;
    background: #2c6be5
}

.cta .cta-block .text-wrapper .img-wrapper {
    position: relative;
    width: 100%
}

.cta .cta-block .text-wrapper .img-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 0
}

.cta .cta-block .text-wrapper .img-wrapper .img-text {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #fff;
    color: #062148;
    padding: 1rem 2rem;
    text-align: right
}

.cta .cta-block .text-wrapper .img-wrapper .img-text .name {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 1.8rem
}

.cta .cta-block .text-wrapper .img-wrapper .img-text .function {
    font-size: 1.4rem;
    color: #7fa6ef
}

.cta .cta-block .text-wrapper .text-content {
    padding: 3rem 2rem;
    font-size: 1.6rem
}

.cta .cta-block .text-wrapper .text-content .title {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 3rem;
    margin-bottom: 1rem
}

.cta .cta-block .text-wrapper .text-content .text {
    margin-bottom: 2rem
}

.cta .cta-block .text-wrapper .text-content .phone, .cta .cta-block .text-wrapper .text-content .email {
    font-family: Inter, sans-serif;
    font-weight: 600;
    display: inline-block;
    font-size: 1.6rem;
    color: #062148;
    padding: 1rem 2rem;
    border: 1px solid white
}

.cta .cta-block .text-wrapper .text-content .phone a, .cta .cta-block .text-wrapper .text-content .email a {
    font-family: Public Sans, sans-serif;
    font-weight: 500;
    text-decoration: none;
    color: #fff
}

.cta .cta-block .text-wrapper .phone {
    margin-bottom: 1rem
}

.cta .cta-block .text-wrapper .phone, .cta .cta-block .text-wrapper .email {
    display: flex;
    align-items: center;
    font-size: 2.4rem;
    font-weight: 500
}

.cta .cta-block .text-wrapper .phone .icon-arrow-box-wit, .cta .cta-block .text-wrapper .email .icon-arrow-box-wit {
    border-radius: 0
}

.cta .cta-block .text-wrapper .phone a, .cta .cta-block .text-wrapper .email a {
    margin: 0 0 0 2rem;
    transition: .2s
}

.cta .cta-block .text-wrapper .phone a:hover, .cta .cta-block .text-wrapper .email a:hover {
    color: color-mix(in srgb, var(--primary-color) 40%, white)
}

.cta .cta-block .form-wrapper {
    color: #fff;
    width: 60%;
    padding: 4rem;
    background: #021936;
    font-size: 1.6rem
}

.cta .cta-block .form-wrapper .title {
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 3.6rem;
    margin-bottom: 3rem
}

.cta .cta-block .form-wrapper .text {
    margin-bottom: 3rem
}

.cta .cta-block .form-wrapper .flex-inputs {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    width: 100%
}

.cta .cta-block .form-wrapper .flex-inputs input {
    width: 100%;
    padding: 2rem;
    border: none;
    background-color: #062148;
    color: #fff;
    border-radius: 0
}

.cta .cta-block .form-wrapper .flex-inputs input::placeholder {
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    color: #fff
}

.cta .cta-block .form-wrapper .flex-inputs input:focus {
    outline: none
}

.cta .cta-block .form-wrapper select, .cta .cta-block .form-wrapper textarea {
    font-family: Inter, sans-serif;
    font-weight: 400;
    width: 100%;
    padding: 2rem;
    border: none;
    background-color: #062148;
    color: #fff;
    margin-bottom: 2rem;
    resize: none;
    border-radius: 0
}

.cta .cta-block .form-wrapper select::placeholder, .cta .cta-block .form-wrapper textarea::placeholder {
    color: #fff
}

.cta .cta-block .form-wrapper select:focus, .cta .cta-block .form-wrapper textarea:focus {
    outline: none
}

.cta .cta-block .form-wrapper .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff
}

.cta .cta-block .form-wrapper .bottom .agreement {
    display: flex;
    align-items: center
}

.cta .cta-block .form-wrapper .bottom .agreement a {
    text-decoration: underline;
    transition: .2s
}

.cta .cta-block .form-wrapper .bottom .agreement a:hover {
    color: color-mix(in srgb, var(--primary-color) 40%, white)
}

.cta .cta-block .form-wrapper .bottom .agreement input[type=checkbox] {
    width: 2rem;
    height: 2rem;
    border: none;
    margin-right: 1rem
}

.cta-long {
    background: #2c6be5;
    padding: 6rem 0
}

.cta-long .cta-block-long {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 2rem 8rem
}

.cta-long .text-wrapper {
    display: flex;
    flex-direction: column;
    color: #fff;
    gap: 1rem;
    font-size: 1.6rem
}

.cta-long .text-wrapper .title {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 3.6rem
}

.cta-long .button-wrapper {
    display: flex;
    gap: 2rem
}

@media all and (max-width: 1024px) {
    .cta .form-wrapper .bottom {
        flex-direction: column
    }

    .cta .form-wrapper .bottom .agreement {
        width: 100%;
        margin-bottom: 1rem
    }

    .cta .form-wrapper .bottom a.btn {
        max-width: 20rem;
        text-align: center;
        align-self: flex-end
    }

    .cta-long {
        padding: 5rem 0
    }

    .cta-long .cta-block-long {
        flex-direction: column;
        align-items: center;
        margin: 0
    }

    .cta-long .cta-block-long .text-wrapper {
        margin-bottom: 2rem
    }
}

@media all and (max-width: 768px) {
    .cta .cta-block {
        flex-direction: column
    }

    .cta .cta-block .text-wrapper {
        width: 100%;
        margin-bottom: 3rem
    }

    .cta .cta-block .text-wrapper .img-wrapper img {
        height: 30rem
    }

    .cta .cta-block .form-wrapper {
        width: 100%
    }

    .cta .cta-block .form-wrapper .bottom {
        flex-direction: row
    }

    .cta .cta-block .form-wrapper .bottom a.btn {
        max-width: 30rem
    }

    .cta-long .cta-block-long {
        margin: 0
    }
}

@media all and (max-width: 540px) {
    .cta .cta-block .title {
        font-size: 3.2rem
    }

    .cta .cta-block .form-wrapper .bottom {
        flex-direction: column
    }

    .cta-long {
        padding: 4rem 0
    }

    .cta-long .cta-block-long {
        flex-direction: column
    }

    .cta-long .cta-block-long .text-wrapper {
        padding-bottom: 2rem
    }
}

.customers {
    background: #eaf0fc;
    padding: 6rem 0
}

.customers .scroller-container {
    display: flex;
    position: relative;
    overflow: hidden
}

.customers .scroller-container:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to right, #EAF0FC 0%, transparent 10%, transparent 90%, #EAF0FC 100%);
    z-index: 2
}

.customers .scroller-container .scroller-inner {
    display: flex;
    flex-shrink: 0;
    animation: scroll 20s linear infinite
}

.customers .scroller-container .scroller-inner img {
    margin: 0 5rem
}

@keyframes scroll {
    0% {
        transform: translate(0)
    }
    to {
        transform: translate(-100%)
    }
}

.faq {
    padding: 6rem 0
}

.faq .content {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 3rem
}

.faq .content .subtitle {
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    color: #2c6be5;
    margin-bottom: 1rem
}

.faq .content .title {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 4.8rem;
    color: #0d2b29;
    font-weight: 700;
    margin-bottom: 2rem;
    line-height: 4.5rem
}

.faq .content .text {
    margin-bottom: 2rem;
    font-size: 1.6rem
}

.faq .content .btn-wrapper {
    display: flex
}

.faq .content .question {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid lightgrey
}

.faq .content .question .question-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    cursor: pointer
}

.faq .content .question--title {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 1.8rem
}

.faq .content .question--button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3.5rem;
    width: 3.5rem;
    background: #062148;
    color: #fff;
    font-size: 2rem;
    transition: all .3s ease
}

.faq .content .question--text {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity .3s ease-in-out;
    padding: 0 1rem;
    font-size: 1.6rem
}

.faq .content .question .faq-toggle:checked ~ .question-wrapper > .question--button {
    transform: rotate(45deg);
    background-color: transparent;
    color: #062148
}

.faq .content .question .faq-toggle:checked ~ .question--text {
    opacity: 1;
    max-height: 100rem;
    margin-top: 1rem
}

@media all and (max-width: 540px) {
    .faq .content {
        grid-template-columns:1fr
    }
}

.footer {
    background-color: #062148;
    z-index: -1
}

.footer hr {
    border: 1px solid grey
}

.footer .mobile-logo {
    display: none
}

.footer .wrapper {
    display: grid;
    align-items: flex-start;
    grid-template-columns:1fr 1fr 1fr 1fr;
    padding: 8rem 0;
    color: #fff
}

.footer .wrapper .logo {
    font-family: Inter, sans-serif;
    font-weight: 600;
    display: flex;
    align-items: center;
    font-size: 3.6rem;
    margin-bottom: 2rem;
    text-decoration: none;
    color: #fff;
    gap: 1.5rem
}

.footer .wrapper .links {
    font-size: 1.6rem
}

.footer .wrapper .links .title {
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 1.5rem
}

.footer .wrapper .links .link {
    list-style: none;
    margin-bottom: 1rem
}

.footer .wrapper .links .link a {
    color: #fff;
    text-decoration: none
}

.footer .wrapper .links .link a:hover {
    transition: .2s;
    color: #2c6be5
}

.footer .wrapper .links .link a.active {
    color: #2c6be5;
    border-bottom: 1px solid #2C6BE5
}

.footer .wrapper .address {
    font-size: 1.6rem
}

.footer .wrapper .address .title {
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 1.5rem
}

.footer .wrapper .address--header {
    margin-bottom: .5rem
}

.footer .wrapper .address--header, .footer .wrapper .address .phone--header, .footer .wrapper .address .email--header {
    font-family: Inter, sans-serif;
    font-weight: 600;
    margin-top: 2rem
}

.footer .wrapper .address .line, .footer .wrapper .address .phone, .footer .wrapper .address .email, .footer .wrapper .address .phone div, .footer .wrapper .address .email div {
    margin-bottom: .5rem
}

.footer .wrapper .address .phone a, .footer .wrapper .address .email a {
    color: #fff;
    text-decoration: none
}

.footer .wrapper .address .phone a:hover, .footer .wrapper .address .email a:hover {
    color: color-mix(in srgb, var(--primary-color) 80%, white)
}

.footer .wrapper .contact {
    font-size: 1.6rem
}

.footer .wrapper .contact .title {
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 1.5rem
}

.footer .wrapper .contact--text {
    line-height: 2.5rem
}

.footer .wrapper .contact .socials {
    display: flex;
    gap: 1rem;
    margin-top: 2rem
}

.footer .wrapper .contact .socials--item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    height: 4rem;
    width: 4rem;
    border-radius: 50%;
    background: #fff;
    padding: 1rem;
    color: #062148;
    transition: .3s ease-in-out;
    text-decoration: none
}

.footer .wrapper .contact .socials--item:hover {
    background: transparent;
    color: #fff
}

.footer .bottom-bar {
    padding: 2rem 0;
    color: #fff;
    display: flex;
    justify-content: space-between;
    font-size: 1.4rem
}

.footer .bottom-bar .links {
    display: flex
}

.footer .bottom-bar .links a {
    color: #fff;
    transition: .2s
}

.footer .bottom-bar .links a:hover {
    color: color-mix(in srgb, var(--primary-color) 80%, white)
}

.footer .bottom-bar .links .divider {
    margin: 0 2rem
}

@media only screen and (max-width: 75em) {
    .footer .container .wrapper a img {
        width: 55px
    }
}

@media all and (max-width: 768px) {
    .footer .container .wrapper {
        grid-template-columns:repeat(2, 1fr);
        justify-content: center
    }

    .footer .container .wrapper .logo, .footer .container .wrapper .links, .footer .container .wrapper .address, .footer .container .wrapper .contact {
        margin-left: 3rem
    }

    .footer .container .wrapper .links {
        margin-bottom: 4rem
    }
}

@media all and (max-width: 540px) {
    .footer .container .mobile-logo {
        font-family: Inter, sans-serif;
        font-weight: 600;
        display: flex;
        padding-top: 4rem;
        justify-content: center;
        align-items: center;
        font-size: 3.6rem;
        margin-bottom: 2rem;
        text-decoration: none;
        color: #fff;
        gap: 1.5rem
    }

    .footer .container .wrapper {
        padding: 6rem 0 4rem
    }

    .footer .container .wrapper .logo {
        display: none
    }

    .footer .container .wrapper .links, .footer .container .wrapper .address, .footer .container .wrapper .contact {
        margin-left: 2rem
    }

    .footer .container .wrapper .links {
        margin-bottom: 4rem
    }

    .footer .container .bottom-bar {
        flex-direction: column;
        text-align: center
    }

    .footer .container .bottom-bar .copyright {
        padding-bottom: 1rem
    }

    .footer .container .bottom-bar .links {
        flex-direction: column
    }

    .footer .container .bottom-bar .links a:first-child {
        margin-bottom: 1rem
    }

    .footer .container .bottom-bar .links .divider {
        display: none
    }
}

.hero {
    display: flex;
    position: relative;
    min-height: 90rem;
    align-items: center;
    justify-content: flex-start
}

.hero.small {
    min-height: 60rem
}

.hero.small .container {
    width: 120rem
}

.hero.small .hero-content {
    width: 100%;
    margin-top: 10rem
}

.hero-image {
    position: absolute;
    top: 0;
    width: 100%;
    left: 50%;
    transform: translate(-50%);
    height: 100%;
    overflow: hidden
}

.hero-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.hero-image:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #062148, #06214800 50%);
    z-index: 2
}

.hero-content {
    position: relative;
    z-index: 3;
    color: #fff;
    width: 70%;
    margin-left: 0 !important;
    margin-right: auto !important
}

.hero-content .buttons {
    display: flex;
    margin-top: 3rem
}

.hero-content h1 {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 7.2rem;
    line-height: 6rem;
    margin: 2rem 0
}

.hero-content .lead {
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 1.6rem;
    margin-bottom: 3rem;
    max-width: 70rem
}

.hero-content .points-wrapper {
    font-size: 1.6rem
}

.hero-content .btn {
    margin-right: 1rem
}

@media only screen and (max-width: 75em) {
    .hero {
        margin-top: 0;
        min-height: 70rem
    }
}

@media only screen and (max-width: 56.25em) {
    .hero {
        margin-top: 25px
    }
}

@media all and (max-width: 540px) {
    .hero .hero-content {
        width: 100%
    }

    .hero .hero-content h1 {
        font-size: 45px;
        line-height: 45px
    }

    .hero .hero-content .buttons {
        display: flex;
        text-align: center
    }
}

.ksp, .ksp-big {
    background-color: #021936;
    color: #fff;
    font-weight: 400
}

.ksp.light-blue, .ksp-big.light-blue {
    background-color: #eaf0fc;
    color: #062148
}

.ksp .ksp-wrapper, .ksp-big .ksp-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 3rem 0;
    height: 100%
}

.ksp .ksp-wrapper .ksp-content, .ksp-big .ksp-wrapper .ksp-content {
    display: flex;
    align-items: center
}

.ksp .ksp-wrapper .ksp-content i, .ksp-big .ksp-wrapper .ksp-content i {
    font-size: 4rem;
    margin-right: 2rem;
    color: #2c6be5
}

.ksp .ksp-wrapper .title, .ksp-big .ksp-wrapper .title {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 1.8rem;
    margin-bottom: 1rem
}

.ksp .ksp-wrapper .text, .ksp-big .ksp-wrapper .text {
    font-size: 1.6rem
}

.ksp-big .ksp-wrapper {
    padding: 8rem 0
}

.ksp-big .ksp-wrapper .ksp-content {
    flex-direction: column;
    text-align: center;
    padding: 0 2rem
}

.ksp-big .ksp-wrapper .ksp-content i {
    margin-right: 0;
    margin-bottom: 2rem
}

@media all and (max-width: 768px) {
    .ksp {
        height: 100%
    }

    .ksp .ksp-wrapper {
        grid-template-columns:repeat(2, 1fr);
        gap: 3rem
    }

    .ksp-big .ksp-wrapper {
        padding: 4rem 0
    }
}

@media all and (max-width: 540px) {
    .ksp .ksp-wrapper .ksp-content {
        flex-direction: column;
        text-align: center
    }

    .ksp .ksp-wrapper .ksp-content i {
        margin-bottom: 1rem;
        margin-left: 2rem
    }

    .ksp-big .ksp-wrapper {
        flex-direction: column;
        gap: 2rem
    }
}

.navbar-container {
    position: absolute;
    z-index: 1000;
    width: 100%;
    transition: top .2s ease-in-out, max-width .2s ease-out;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 3rem;
    height: inherit
}

.navbar-container .navbar-wrapper {
    position: relative
}

.navbar-container .navbar-wrapper .navbar {
    min-height: 9.5rem;
    background-color: #021936;
    padding: 2rem 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: #00000029 0 3px 6px;
    border-radius: 0
}

.navbar-container .navbar-wrapper .navbar .logo {
    font-family: Inter, sans-serif;
    font-weight: 600;
    display: flex;
    align-items: center;
    font-size: 3.6rem;
    text-decoration: none;
    color: #fff;
    gap: 1.5rem
}

.navbar-container .navbar-wrapper .navbar .burger-menu {
    display: none
}

.navbar-container .navbar-wrapper .navbar .links {
    display: flex;
    gap: 4rem;
    align-items: center;
    color: #fff;
    font-size: 1.6rem
}

.navbar-container .navbar-wrapper .navbar .links .has-sub-menu {
    position: relative;
    list-style: none
}

.navbar-container .navbar-wrapper .navbar .links .has-sub-menu:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease-in, visibility 0s linear 0s
}

.navbar-container .navbar-wrapper .navbar .links .has-sub-menu .sub-menu {
    display: flex;
    min-width: 15rem;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    padding: 1rem 2rem;
    top: 3rem;
    left: 0;
    background-color: color-mix(in srgb, #021936 80%, black);
    box-shadow: #00000029 6px 6px 6px;
    transition: opacity .3s ease-out, visibility 0s linear .3s
}

.navbar-container .navbar-wrapper .navbar .links .has-sub-menu .sub-menu:before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 55px;
    width: 0;
    height: 0;
    border-left: 1rem solid transparent;
    border-right: 1rem solid transparent;
    border-bottom: 1rem solid color-mix(in srgb, #021936 80%, black);
    transform: translateY(1px)
}

.navbar-container .navbar-wrapper .navbar .links .has-sub-menu .sub-menu:after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 55px;
    width: 0;
    height: 0;
    border-left: 1rem solid transparent;
    border-right: 1rem solid transparent;
    border-bottom: 1rem solid color-mix(in srgb, #021936 80%, black);
    transform: translateY(2px)
}

.navbar-container .navbar-wrapper .navbar .links .has-sub-menu .sub-menu li {
    list-style: none;
    padding-bottom: 1rem
}

.navbar-container .navbar-wrapper .navbar .links .has-sub-menu .sub-menu li:last-child {
    padding-bottom: 0
}

.navbar-container .navbar-wrapper .navbar .links a {
    transition: .2s;
    text-decoration: none;
    color: #fff
}

.navbar-container .navbar-wrapper .navbar .links a:hover {
    color: #2c6be5
}

.navbar-container .navbar-wrapper .navbar .links a.active:not(.btn) {
    color: #2c6be5;
    border-bottom: 1px solid #2C6BE5
}

.navbar-container .navbar-wrapper .navbar .links .btn {
    padding: 1rem 2rem
}

.navbar-container .navbar-wrapper .navbar .links .btn:hover {
    color: #fff
}

.navbar-container .navbar-wrapper .navbar .mobile-links {
    display: flex;
    opacity: 0;
    visibility: hidden;
    margin: 0;
    padding: 2rem;
    width: 100%;
    top: 9.4rem;
    left: 0;
    right: 0;
    list-style: none;
    flex-direction: column;
    position: absolute;
    background-color: #444;
    box-shadow: 0 4px 8px #0003;
    z-index: 9;
    font-size: 2rem;
    text-align: left;
    transition: opacity .3s ease-out, visibility 0s linear .3s
}

.navbar-container .navbar-wrapper .navbar .mobile-links .has-sub-menu {
    display: flex;
    flex-direction: column
}

.navbar-container .navbar-wrapper .navbar .mobile-links .has-sub-menu .link {
    display: flex;
    align-items: center;
    color: #fff;
    justify-content: space-between
}

.navbar-container .navbar-wrapper .navbar .mobile-links .has-sub-menu .sub-menu {
    display: none;
    font-size: 1.8rem;
    text-align: left;
    transition: .2s
}

.navbar-container .navbar-wrapper .navbar .mobile-links .has-sub-menu .sub-menu.active {
    display: block
}

.navbar-container .navbar-wrapper .navbar .mobile-links .has-sub-menu .sub-menu-arrow {
    height: 4rem;
    width: 4rem
}

.navbar-container .navbar-wrapper .navbar .mobile-links.active {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease-in, visibility 0s linear 0s
}

.navbar-container .navbar-wrapper .navbar .mobile-links a {
    color: #fff;
    text-decoration: none;
    padding: 2rem 0;
    display: block
}

.navbar-container .navbar-wrapper .navbar .mobile-links a:hover {
    color: #2c6be5
}

@media all and (max-width: 1200px) {
    .navbar-container .navbar-wrapper .navbar .links {
        gap: 3rem
    }
}

@media all and (max-width: 1024px) {
    .navbar-container {
        max-width: 100%;
        padding: 0;
        margin-top: 0
    }

    .navbar-container .navbar-wrapper {
        position: inherit;
        width: 100%
    }

    .navbar-container .navbar-wrapper .navbar {
        margin-top: 0
    }

    .navbar-container .navbar-wrapper .navbar:before {
        display: none
    }

    .navbar-container .navbar-wrapper .navbar:after {
        display: none
    }

    .navbar-container .navbar-wrapper .navbar .mobile-links {
        flex-direction: column;
        width: auto;
        background-color: color-mix(in srgb, #021936 80%, black);
        box-shadow: none
    }

    .navbar-container .navbar-wrapper .navbar .has-sub-menu li {
        margin: 0 15px
    }
}

@media all and (max-width: 768px) {
    .navbar-container .navbar-wrapper .navbar .links {
        display: none
    }

    .navbar-container .navbar-wrapper .navbar .burger-menu {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 5rem;
        height: 5rem;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1001
    }

    .navbar-container .navbar-wrapper .navbar .burger-menu.active span:nth-child(1) {
        transform: translateY(15px) rotate(45deg)
    }

    .navbar-container .navbar-wrapper .navbar .burger-menu.active span:nth-child(2) {
        opacity: 0
    }

    .navbar-container .navbar-wrapper .navbar .burger-menu.active span:nth-child(3) {
        transform: translateY(-17px) rotate(-45deg)
    }

    .navbar-container .navbar-wrapper .navbar .burger-menu span {
        display: block;
        width: 100%;
        height: 5px;
        background-color: #fff;
        border-radius: 5px;
        transition: all .3s ease
    }
}

.projects {
    background-color: #062148;
    padding: 8rem 0;
    height: 37rem;
    z-index: 3;
    position: relative
}

.projects .title {
    color: #fff;
    font-size: 3.6rem;
    margin-bottom: 1rem
}

.projects .title.no-margin {
    margin-bottom: 0
}

.projects .top-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 3rem
}

.projects .top-wrapper .text-wrapper .subtitle {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #2c6be5;
    font-size: 1.4rem
}

.projects .top-wrapper .buttons {
    display: flex;
    justify-content: flex-end;
    width: 33.3%
}

.projects .top-wrapper .buttons a.btn {
    padding: 1rem 2rem
}

.projects .top-wrapper .buttons .icon:hover {
    transition: .5s;
    background-color: #2c6be5
}

.projects .top-wrapper .buttons .icon-arrow-left {
    margin-right: 1rem
}

.projects .projects-wrapper {
    display: flex;
    gap: 2rem
}

.projects .projects-wrapper .project {
    position: relative
}

.projects .projects-wrapper .project .img-wrapper {
    display: block;
    position: relative;
    height: 40rem;
    width: 100%;
    margin-bottom: 2rem;
    overflow: hidden;
    border-radius: 0
}

.projects .projects-wrapper .project .img-wrapper:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20rem;
    background: linear-gradient(to top, #062148, #0d2b2900);
    opacity: 1;
    z-index: 1
}

.projects .projects-wrapper .project .img-wrapper .project-image {
    width: 100%;
    object-fit: cover;
    transition: transform .2s ease, filter .2s ease
}

.projects .projects-wrapper .project .img-wrapper img:hover {
    transition: .2s;
    transform: scale(1.05);
    cursor: pointer;
    filter: brightness(.9)
}

.projects .projects-wrapper .project .icon-wrapper {
    position: absolute;
    top: 2rem;
    right: 0;
    padding: 0 1rem;
    background-color: var(--icon-background);
    border-radius: 0
}

.projects .projects-wrapper .project .icon-wrapper .icon.work {
    position: relative;
    height: 4rem;
    width: 4rem
}

.projects .projects-wrapper .project .bottom {
    position: absolute;
    bottom: 4rem;
    left: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    z-index: 10;
    padding: 0 2rem;
    width: 100%
}

.projects .projects-wrapper .project .bottom .bottom-text-wrapper .title {
    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: 2.4rem;
    width: 70%;
    margin-bottom: 1rem
}

.projects .projects-wrapper .project .bottom .bottom-text-wrapper .text {
    color: #fff;
    font-size: 1.6rem
}

.projects .projects-wrapper .project .bottom .icon.icon-arrow-box-wit {
    background-repeat: no-repeat;
    background-size: cover;
    transition: .5s;
    border-radius: 0;
    height: 4rem;
    width: 4rem
}

.projects .projects-wrapper .project .bottom .icon.icon-arrow-box-wit:hover {
    filter: brightness(120%) contrast(100%)
}

@media all and (max-width: 1024px) {
    .projects .top-wrapper .buttons {
        width: 40%
    }
}

@media all and (max-width: 768px) {
    .projects .top-wrapper .text {
        width: 100%;
        margin-bottom: 2rem
    }

    .projects .projects-wrapper .project .bottom .title {
        font-size: 1.8rem
    }
}

@media all and (max-width: 540px) {
    .projects {
        padding: 4rem 0
    }

    .projects .title {
        line-height: 4.5rem;
        margin-bottom: 2rem
    }

    .projects .projects-wrapper .project .bottom .title {
        width: 90%
    }
}

@media all and (max-width: 375px) {
    .projects .top-wrapper {
        flex-direction: column;
        align-items: flex-start
    }

    .projects .top-wrapper .buttons {
        width: 100%
    }
}

.reviews {
    background-color: #062148;
    padding: 8rem 0
}

.reviews .title-wrapper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
    color: #fff;
    align-items: flex-end;
    font-size: 1.6rem
}

.reviews .title-wrapper .title {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 4.8rem;
    margin-bottom: 2rem
}

.reviews .title-wrapper .buttons {
    display: flex
}

.reviews .title-wrapper .buttons .btn-outline {
    margin-right: 1rem;
    padding: 1rem 2rem
}

.reviews .title-wrapper .buttons .icon-left {
    margin-right: 1rem
}

.reviews .title-wrapper .buttons .icon-left, .reviews .title-wrapper .buttons .icon-right {
    width: 45px;
    height: 45px;
    display: block;
    position: relative;
    overflow: hidden;
    background-color: transparent;
    transition: background-color .3s ease
}

.reviews .title-wrapper .buttons .icon-left a, .reviews .title-wrapper .buttons .icon-right a {
    position: absolute;
    width: 45px;
    height: 45px;
    object-fit: contain;
    transition: opacity .3s ease
}

.reviews .title-wrapper .buttons .icon-left .default-icon, .reviews .title-wrapper .buttons .icon-right .default-icon {
    opacity: 1
}

.reviews .title-wrapper .buttons .icon-left .hover-icon, .reviews .title-wrapper .buttons .icon-right .hover-icon {
    opacity: 0
}

.reviews .title-wrapper .buttons .icon-left:hover, .reviews .title-wrapper .buttons .icon-right:hover {
    background-color: #2c6be5
}

.reviews .title-wrapper .buttons .icon-left:hover .default-icon, .reviews .title-wrapper .buttons .icon-right:hover .default-icon {
    opacity: 0
}

.reviews .title-wrapper .buttons .icon-left:hover .hover-icon, .reviews .title-wrapper .buttons .icon-right:hover .hover-icon {
    opacity: 1
}

.reviews .reviews-wrapper {
    display: flex;
    gap: 3rem;
    color: #fff
}

.reviews .reviews-wrapper .review {
    background-color: #08244d;
    padding: 4rem 3rem;
    box-shadow: #0d2b291a 0 6px 12px;
    border-radius: 0
}

.reviews .reviews-wrapper .review .reviewer {
    display: flex;
    gap: 2rem;
    margin-bottom: 3rem
}

.reviews .reviews-wrapper .review .reviewer .reviewer-text .name {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 2.4rem;
    margin-bottom: .5rem
}

.reviews .reviews-wrapper .review .reviewer .reviewer-text .company {
    font-family: Inter, sans-serif;
    font-weight: 300;
    font-size: 1.4rem;
    color: #96b5f2
}

.reviews .reviews-wrapper .review .text {
    margin-bottom: 2rem;
    font-size: 1.6rem
}

.reviews .reviews-wrapper .review .review-bottom {
    display: flex;
    justify-content: space-between
}

.reviews .reviews-wrapper .review .review-bottom .read-more {
    color: #2c6be5;
    text-decoration: underline;
    cursor: pointer;
    font-size: 1.6rem
}

.reviews .reviews-wrapper .review .review-bottom .read-more:hover {
    color: color-mix(in srgb, #2C6BE5 80%, white)
}

.reviews .reviews-wrapper .review .review-bottom .stars {
    display: flex;
    margin-left: -3px
}

@media (max-width: 1024px) {
    .reviews .title-wrapper .title-content {
        width: 60%
    }
}

@media only screen and (max-width: 56.25em) {
    .reviews .title-wrapper .buttons .btn-outline {
        padding: 1.7rem 2rem
    }
}

@media all and (max-width: 540px) {
    .reviews {
        padding: 4rem 0
    }

    .reviews .title-wrapper {
        flex-direction: column;
        align-items: flex-start
    }

    .reviews .title-wrapper .title-content {
        margin-bottom: 2rem;
        width: 100%
    }

    .reviews .title {
        font-size: 32px;
        line-height: 45px;
        flex-direction: column
    }

    .reviews .title .buttons {
        justify-content: end
    }
}

.services {
    padding: 80px 0;
    background-color: #eaf0fc
}

.services.white {
    background-color: #fff
}

.services .title {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 4.8rem;
    margin-bottom: 1rem
}

.services .text {
    max-width: 75%;
    margin-bottom: 40px
}

.services .services-wrapper {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    grid-gap: 20px
}

.services .services-wrapper.columns {
    grid-template-columns:repeat(3, 1fr)
}

.services .services-wrapper .service {
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: #062148;
    color: #fff;
    border-radius: 0
}

.services .services-wrapper .service .img-wrapper {
    display: block;
    position: relative;
    height: 300px;
    width: 100%;
    overflow: hidden
}

.services .services-wrapper .service .img-wrapper:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to top, #0d2b29, #0d2b2900);
    opacity: 1;
    z-index: 1
}

.services .services-wrapper .service .img-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform .2s ease, filter .2s ease
}

.services .services-wrapper .service .img-wrapper img:hover {
    transition: .2s;
    transform: scale(1.05);
    cursor: pointer;
    filter: brightness(.9)
}

.services .services-wrapper .service .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 30px
}

.services .services-wrapper .service .content .title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.services .services-wrapper .service .content .title-wrapper .icon-wrapper {
    position: relative;
    padding: 0 10px;
    top: -7px;
    right: -30px;
    background-color: var(--icon-background);
    border-radius: 0
}

.services .services-wrapper .service .content .title-wrapper .icon-wrapper .icon {
    position: relative;
    height: 40px;
    width: 40px
}

.services .services-wrapper .service .content .title-wrapper .service-title {
    font-size: 30px;
    margin-bottom: 10px
}

.services .services-wrapper .service .content .service-text {
    margin-bottom: 30px
}

.services .services-wrapper .service .content .button {
    padding: 15px 0
}

.services-overview {
    padding: 6rem 0;
    background: #eaf0fc
}

.services-overview .services-wrapper {
    display: grid;
    grid-template-columns:1fr 1fr 1fr;
    gap: 2rem
}

.services-overview .service {
    position: relative
}

.services-overview .service .img-wrapper {
    display: block;
    position: relative;
    height: 40rem;
    width: 100%;
    margin-bottom: 2rem;
    overflow: hidden;
    border-radius: 0
}

.services-overview .service .img-wrapper:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20rem;
    background: linear-gradient(to top, #062148, #0d2b2900);
    opacity: 1;
    z-index: 1
}

.services-overview .service .img-wrapper .service-image {
    width: 100%;
    object-fit: cover;
    transition: transform .2s ease, filter .2s ease
}

.services-overview .service .img-wrapper img:hover {
    transition: .2s;
    transform: scale(1.05);
    cursor: pointer;
    filter: brightness(.9)
}

.services-overview .service .icon-wrapper {
    position: absolute;
    top: 2rem;
    right: 0;
    padding: 0 1rem;
    background-color: var(--icon-background);
    border-radius: 0
}

.services-overview .service .icon-wrapper .icon.work {
    position: relative;
    height: 4rem;
    width: 4rem
}

.services-overview .service .bottom {
    position: absolute;
    bottom: 4rem;
    left: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    z-index: 10;
    padding: 0 2rem;
    width: 100%
}

.services-overview .service .bottom .bottom-text-wrapper .title {
    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: 2.4rem;
    width: 70%;
    margin-bottom: 1rem;
    color: #fff
}

.services-overview .service .bottom .bottom-text-wrapper .text {
    color: #fff;
    font-size: 1.6rem
}

.services-overview .service .bottom .icon.icon-arrow-box-wit {
    background-repeat: no-repeat;
    background-size: cover;
    transition: .5s;
    border-radius: 0;
    height: 4rem;
    width: 4rem
}

.services-overview .service .bottom .icon.icon-arrow-box-wit:hover {
    filter: brightness(120%) contrast(100%)
}

@media all and (max-width: 768px) {
    .services .title {
        line-height: 45px
    }

    .services .services-wrapper.columns {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media all and (max-width: 540px) {
    .services {
        padding: 40px 0
    }

    .services .title {
        margin-bottom: 20px
    }

    .services .services-wrapper, .services .services-wrapper.columns {
        grid-template-columns:repeat(1, 1fr)
    }

    .services-overview .services-wrapper {
        grid-template-columns:1fr 1fr
    }
}

@media all and (max-width: 425px) {
    .services-overview .services-wrapper {
        grid-template-columns:1fr
    }
}

.text-block {
    padding: 6rem 0
}

.text-block .content {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 4rem;
    font-size: 1.6rem;
    align-items: center
}

.text-block .content .title {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 4.8rem;
    width: 100%;
    line-height: 5rem
}

@media all and (max-width: 768px) {
    .text-block .content {
        grid-template-columns:1fr;
        gap: 3rem
    }
}

.workflows {
    position: relative;
    background-color: #eaf0fc;
    padding: 8rem 0
}

.workflows.white {
    background-color: #fff
}

.workflows .workflows-wrapper {
    display: flex;
    grid-gap: 2rem;
    align-items: center
}

.workflows .workflows-wrapper .workflow-item {
    display: flex !important
}

.workflows .workflows-wrapper .workflow-item .image-wrapper {
    position: relative;
    width: 50%
}

.workflows .workflows-wrapper .workflow-item .image-wrapper .image-counter {
    font-family: Inter, sans-serif;
    font-weight: 500;
    position: absolute;
    top: 0;
    left: 0;
    padding: 1rem;
    color: #2c6be5;
    background: #fff;
    font-size: 1.6rem
}

.workflows .workflows-wrapper .workflow-item .image-wrapper img {
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
    border-radius: 0
}

.workflows .workflows-wrapper .workflow-item .text-wrapper {
    color: #000;
    display: flex;
    flex-direction: column;
    width: 50%;
    justify-content: space-between;
    font-size: 1.6rem
}

.workflows .workflows-wrapper .workflow-item .text-wrapper .top-title {
    color: #2c6be5;
    font-size: 1.8rem
}

.workflows .workflows-wrapper .workflow-item .text-wrapper .title {
    font-size: 3.6rem;
    font-weight: 700;
    margin-bottom: 1rem
}

.workflows .workflows-wrapper .workflow-item .text-wrapper .title .loop-counter {
    display: inline-flex;
    color: #2c6be5
}

.workflows .workflows-wrapper .workflow-item .text-wrapper .text {
    margin-bottom: 2rem
}

.workflows .workflows-wrapper .workflow-item .text-wrapper .buttons {
    display: flex;
    margin-top: auto
}

.workflows .workflows-wrapper .workflow-item .text-wrapper .buttons .icon-left {
    margin-right: 1rem
}

.workflows .workflows-wrapper .workflow-item .text-wrapper .buttons .icon-left, .workflows .workflows-wrapper .workflow-item .text-wrapper .buttons .icon-right {
    width: 45px;
    height: 45px;
    display: block;
    position: relative;
    overflow: hidden;
    background-color: transparent;
    transition: background-color .3s ease
}

.workflows .workflows-wrapper .workflow-item .text-wrapper .buttons .icon-left a, .workflows .workflows-wrapper .workflow-item .text-wrapper .buttons .icon-right a {
    position: absolute;
    width: 45px;
    height: 45px;
    object-fit: contain;
    transition: opacity .3s ease
}

.workflows .workflows-wrapper .workflow-item .text-wrapper .buttons .icon-left .default-icon, .workflows .workflows-wrapper .workflow-item .text-wrapper .buttons .icon-right .default-icon {
    opacity: 1
}

.workflows .workflows-wrapper .workflow-item .text-wrapper .buttons .icon-left .hover-icon, .workflows .workflows-wrapper .workflow-item .text-wrapper .buttons .icon-right .hover-icon {
    opacity: 0
}

.workflows .workflows-wrapper .workflow-item .text-wrapper .buttons .icon-left:hover, .workflows .workflows-wrapper .workflow-item .text-wrapper .buttons .icon-right:hover {
    background-color: #2c6be5
}

.workflows .workflows-wrapper .workflow-item .text-wrapper .buttons .icon-left:hover .default-icon, .workflows .workflows-wrapper .workflow-item .text-wrapper .buttons .icon-right:hover .default-icon {
    opacity: 0
}

.workflows .workflows-wrapper .workflow-item .text-wrapper .buttons .icon-left:hover .hover-icon, .workflows .workflows-wrapper .workflow-item .text-wrapper .buttons .icon-right:hover .hover-icon {
    opacity: 1
}

@media all and (max-width: 768px) {
    .workflows .workflow-item {
        gap: 3rem
    }

    .workflows .wrapper {
        grid-template-columns:1fr
    }

    .workflows .wrapper img {
        max-height: 25rem;
        width: 100%;
        object-fit: cover
    }
}

@media all and (max-width: 540px) {
    .workflows {
        padding: 4rem 0 0
    }

    .workflows .workflows-wrapper .workflow-item {
        flex-direction: column;
        gap: 2rem
    }

    .workflows .workflows-wrapper .workflow-item .image-wrapper, .workflows .workflows-wrapper .workflow-item .text-wrapper {
        width: 100%
    }

    .workflows .workflows-wrapper .workflow-item .image-wrapper .buttons, .workflows .workflows-wrapper .workflow-item .text-wrapper .buttons {
        margin-top: 2rem;
        margin-bottom: -6rem
    }
}

* {
    margin: 0;
    padding: 0
}

*, *:before, *:after {
    box-sizing: inherit
}

html {
    box-sizing: border-box;
    font-size: 62.5%
}

@media only screen and (max-width: 75em) {
    html {
        font-size: 56.25%
    }
}

@media only screen and (max-width: 56.25em) {
    html {
        font-size: 50%
    }
}

body {
    font-family: Inter, sans-serif;
    font-weight: 400;
    box-sizing: border-box;
    color: #33455d
}

@charset "UTF-8";
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0
}

.slick-list:focus {
    outline: none
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand
}

.slick-slider .slick-track, .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translateZ(0)
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto
}

.slick-track:before, .slick-track:after {
    display: table;
    content: ""
}

.slick-track:after {
    clear: both
}

.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px
}

[dir=rtl] .slick-slide {
    float: right
}

.slick-slide img {
    display: block
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-loading .slick-slide {
    visibility: hidden
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.slick-arrow.slick-hidden {
    display: none
}

.slick-loading .slick-list {
    background: #fff url(/build/assets/ajax-loader-BcnMEykj.gif) center center no-repeat
}

@font-face {
    font-family: slick;
    font-weight: 400;
    font-style: normal;
    src: url(/build/assets/slick-Bi9J8BMx.eot);
    src: url(/build/assets/slick-Bi9J8BMx.eot?#iefix) format("embedded-opentype"), url(/build/assets/slick-BlUtDIuC.woff) format("woff"), url(/build/assets/slick-DWzRxEMf.ttf) format("truetype"), url(/build/assets/slick-BlzDm7g2.svg#slick) format("svg")
}

.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translateY(-50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent
}

.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
    color: transparent;
    outline: none;
    background: transparent
}

.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before {
    opacity: 1
}

.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
    opacity: .25
}

.slick-prev:before, .slick-next:before {
    font-family: slick;
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.slick-prev {
    left: -25px
}

[dir=rtl] .slick-prev {
    right: -25px;
    left: auto
}

.slick-prev:before {
    content: "←"
}

[dir=rtl] .slick-prev:before {
    content: "→"
}

.slick-next {
    right: -25px
}

[dir=rtl] .slick-next {
    right: auto;
    left: -25px
}

.slick-next:before {
    content: "→"
}

[dir=rtl] .slick-next:before {
    content: "←"
}

.slick-dotted.slick-slider {
    margin-bottom: 30px
}

.slick-dots {
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center
}

.slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent
}

.slick-dots li button:hover, .slick-dots li button:focus {
    outline: none
}

.slick-dots li button:hover:before, .slick-dots li button:focus:before {
    opacity: 1
}

.slick-dots li button:before {
    font-family: slick;
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: "•";
    text-align: center;
    opacity: .25;
    color: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.slick-dots li.slick-active button:before {
    opacity: .75;
    color: #000
}