:root {

    /* Colours */
    --color-white: #fff;
    --color-black: #000;
    --color-primary-blue: #1d2e45;
    --color-primary-green: #62ffad;
    --color-secondary-blue: #182940;
    --color-secondary-green: #4cd88f;
    --color-secondary-green-variant: #4DD88F;
    --color-accent: #f9f9f9;
    --color-border: #eaeaea;
    --color-gray: #707070;
    --color-gray-dark: #969696;
    --color-blue: #121e2e;
    --color-dark-blue: #192940;
    --color-text: var(--color-black);

    /* Containers */
    --container-padding: 20px;
    --container-padding-tablet: 20px;
    --container-padding-mobile: 8px;
    --container-max-width: calc(1400px + calc(var(--container-padding) * 2));
    --container-max-width-tablet: calc(1400px + calc(var(--container-padding-tablet) * 2));
    --container-max-width-mobile: calc(1400px + calc(var(--container-padding-mobile) * 2));
    --container-medium-max-width: calc(1280px + calc(var(--container-padding-tablet) * 2));
    --container-medium-max-width-tablet: calc(1280px + calc(var(--container-padding-tablet) * 2));
    --container-medium-max-width-mobile: calc(1280px + calc(var(--container-padding-mobile) * 2));
    --container-small-max-width: calc(850px + calc(var(--container-padding) * 2));
    --container-small-max-width-tablet: calc(850px + calc(var(--container-padding-tablet) * 2));
    --container-small-max-width-mobile: calc(850px + calc(var(--container-padding-mobile) * 2));

    /* Font */
    --font-almarena: 'Almarena Neue Display', sans-serif;
    --font-strawford: 'Strawford', sans-serif;
    --font-family-icon: 'icomoon';
    --font-family: var(--font-almarena);
    --font-heading: var(--font-strawford);
    --font-icon: var(--font-family-icon);
    --font-size: 16px;
    --h1-font-size: 2.25rem;
    --h2-font-size: 2rem;
    --h3-font-size: 1.75rem;
    --h4-font-size: 1.5rem;
    --h5-font-size: 1.25rem;
    --h6-font-size: 1.125rem;
    --body-text-font-size: calc(16px / var(--font-size) * 1rem);

    /* review stars */
    --star-size: 12px;
    --star-color: rgba(77,216,143,.2);
    --star-background: var(--color-secondary-green-variant);
}

@media (min-width: 768px) {
    :root {
        --h1-font-size: 5.625rem;
        --h2-font-size: 3rem;
        --h3-font-size: 2.25rem;
        --h4-font-size: 1.75rem;
        --h5-font-size: 1.5rem;
        --h6-font-size: 1.25rem;
    }
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--body-text-font-size);
    color: var(--color-black);
    background-color: var(--color-white);
}

/* Paragraphs */
p {
    font-family: var(--font-family);
    font-size: var(--body-text-font-size);
    font-weight: 400;
    line-height: 2;
    color: var(--color-text);
}

/* Input */
input,
select,
textarea {
    width: 100%;
    height: 64px;
    font-family: var(--font-strawford);
    font-size: var(--body-text-font-size);
    font-weight: 500;
    color: var(--color-black);
    border: 1px solid rgba(112, 112, 112, 0.1);
    border-radius: 10px;
    padding-block-start: 7px;
    padding-block-end: 4px;
    padding-inline: 19px;
}

input::placeholder,
textarea::placeholder {
    color: rgba(0, 0, 0, 0.15);
}

textarea:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: inherit;
    border: 1px solid var(--color-secondary-green);
}

.select-arrow {
    background: url('../images/arrow-down.png') no-repeat center right 23px;
}

input[type='checkbox'] {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background-color: transparent;
    cursor: pointer;
    -webkit-appearance: none;
}

input[type='checkbox']:checked:before {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background-color: var(--color-secondary-green);
    content: '';
}

input[type='radio'] {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background-color: transparent;
    cursor: pointer;
    -webkit-appearance: none;
}

input[type='radio']:checked:before {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background-color: var(--color-secondary-green);
    content: '';
}

input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

.type-2 {
    p {
        font-family: var(--font-family);
        font-size: 1.125rem;
        font-weight: 500;
        line-height: 1.778;
        color: var(--color-text);
    }
}

/* review stars */
.stars {
    --percent: calc(var(--rating) / 5 * 100%);
    display: inline-block;
    font-size: var(--star-size);
    line-height: 1;
    font-family: var(--font-family-icon);

    &::before {
        content: '\e90b\e90b\e90b\e90b\e90b';
        letter-spacing: 3px;
        background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

/* Rich text editor fields */
.rte {
    h2,
    .h2 {
        font-family: var(--font-strawford);
        font-size: 1.25rem;
        font-weight: 500;
        line-height: 2;
        margin-bottom: 40px;
    }

    h3,
    .h3 {
        font-family: var(--font-strawford);
        font-size: 1.125rem;
        font-weight: 500;
        line-height: 1.33;
        margin-bottom: 35px;
    }

    h4,
    .h4 {
        font-family: var(--font-strawford);
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.313;
        margin-bottom: 30px;
    }

    h5,
    .h5 {
        font-family: var(--font-strawford);
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.78;
        margin-bottom: 1rem;
    }

    ul {
        margin: 0;
        padding: 0;
        position: relative;

        + a {
            margin-top: 39px;
        }

        li {
            padding-left: 26px;
            position: relative;
            font-family: var(--font-family);
            font-size: 1rem;
            font-weight: 400;
            line-height: 2;
            color: var(--color-text);
            list-style: none;
            font-family: 'Strawford';

            &:before {
                left: 0;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: var(--color-secondary-green);
                content: '';
                display: block;
                position: absolute;
                top: 8px;
            }
        }
    }

    p {
        font-family: var(--font-strawford);
        font-size: var(--body-text-font-size);
        font-weight: 400;
        line-height: 2;
        color: var(--color-text);

        a {
            color: var(--color-secondary-green-variant);
        }
    }
}

.container {
    margin: 0 auto;
    max-width: var(--container-max-width);
    padding-inline: var(--container-padding);

    @media (max-width: 1024px) {
        max-width: var(--container-max-width-tablet);
        padding-inline: var(--container-padding-tablet);
    }

    @media (max-width: 768px) {
        max-width: var(--container-max-width-mobile);
        padding-inline: var(--container-padding-mobile);
    }
}

.container-medium {
    margin: 0 auto;
    max-width: var(--container-medium-max-width);
    padding-inline: var(--container-padding);

    @media (max-width: 1024px) {
        max-width: var(--container-medium-max-width-tablet);
        padding-inline: var(--container-padding-tablet);
    }

    @media (max-width: 768px) {
        max-width: var(--container-medium-max-width-mobile);
        padding-inline: var(--container-padding-mobile);
    }
}

.container-small {
    margin: 0 auto;
    max-width: var(--container-small-max-width);
    padding-inline: var(--container-padding);

    @media (max-width: 1024px) {
        max-width: var(--container-small-max-width-tablet);
        padding-inline: var(--container-padding-tablet);
    }

    @media (max-width: 768px) {
        max-width: var(--container-small-max-width-mobile);
        padding-inline: var(--container-padding-mobile);
    }
}

h1,
.h1 {
    font-family: var(--font-almarena);
    font-size: var(--h1-font-size);
    font-weight: 600;
}

h2,
.h2 {
    font-family: var(--font-almarena);
    font-size: var(--h2-font-size);
    font-weight: 600;
}

h3,
.h3 {
    font-family: var(--font-almarena);
    font-size: var(--h3-font-size);
    font-weight: 600;
}

h4,
.h4 {
    font-family: var(--font-almarena);
    font-size: var(--h4-font-size);
    font-weight: 600;
}

h5,
.h5 {
    font-family: var(--font-almarena);
    font-size: var(--h5-font-size);
    font-weight: 600;
}

h6,
.h6 {
    font-family: var(--font-almarena);
    font-size: var(--h6-font-size);
    font-weight: 600;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

.animate-text {
    .mask {
        overflow: hidden;
    }

    .line {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }

    &.y-pop-up {
        .mask {
            .line {
                transition: all ease-in;
                opacity: 0;
                transform: translateY(100px);
            }
        }
    }
}

/* Buttons */
.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-strawford);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--color-white);
    border: 0;
    border-radius: 20px;
    background-color: var(--color-secondary-green);
    transition: all 0.25s;
    padding-block: 11px;
    padding-inline: 34px 38px;
    overflow: hidden;
    cursor: pointer;

    &.back {

        &:after {
            right: unset;
            left: 6px;
            transform: translateY(-50%) scale(0) rotate(180deg);
        }

        span {

        }

        &:hover, &:focus {
            span {
                transform: translateX(17px);
            }

            &:after {
                transform: translateY(-50%) scale(1) rotate(180deg);
            }
        }
    }
}

.button .icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    font-size: 0.563rem;
    color: var(--color-secondary-green);
    border-radius: 30px;
    background-color: var(--color-white);
    transition: all 0.25s;
    margin-inline-start: 16px;
    overflow: hidden;
}

.button .icon:before {
    position: absolute;
    top: 50%;
    left: -100%;
    font-family: var(--font-icon);
    font-size: 0.688rem;
    transform: translate(-50%, -50%);
    transition: all 0.5s;
    content: '\e90c';
}

li .icon {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    font-size: 0.438rem;
    color: var(--color-white);
    border-radius: 30px;
    background-color: var(--color-secondary-green);
    transition: all 0.25s;
    margin-inline-start: 16px;
    overflow: hidden;
    right: 0;
}

li .icon:before {
    position: absolute;
    top: 50%;
    left: -100%;
    font-family: var(--font-icon);
    font-size: 0.455rem;
    transform: translate(-50%, -50%);
    transition: all 0.5s;
    content: '\e90c';
    font-weight: 900;
}

header .header-menu li .icon i {
    transition: all 0.5s;
    font-size: 0.455rem;
    font-weight: 900;
}

a:focus .icon i,
a:hover .icon i {
    transform: translateX(50px);
}

a:focus .icon:before,
a:hover .icon:before {
    left: 50%;
}

.button span {
    display: inline-block;
    transition: all 0.3s;
}

.button:after {
    position: absolute;
    top: 50%;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    font-family: var(--font-icon);
    font-size: 0.688rem;
    color: var(--color-secondary-green);
    border-radius: 30px;
    background-color: var(--color-white);
    transform: translateY(-50%) scale(0);
    transition: all 0.3s;
    content: '\e90c';
}

.button:hover span,
.button:focus span {
    transform: translateX(-17px);
}

.button:hover:after,
.button:focus:after {
    transform: translateY(-50%) scale(1);
}

.button .icon i {
    transition: all 0.5s;
}

.button:focus .icon i,
.button:hover .icon i {
    transform: translateX(50px);
}

.button:focus .icon:before,
.button:hover .icon:before {
    left: 50%;
}

.button.arrow {
    padding-block: 5px;
    padding-inline-start: 16px;
    padding-inline-end: 5px;
}

.button.arrow:after {
    display: none;
}

.button.secondary {
    color: var(--color-white);
    background-color: var(--color-primary-blue);
}

.button.secondary:after {
    color: var(--color-primary-blue);
}

.button.outline {
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background-color: transparent;
}

.button.outline:after {
    color: var(--color-blue);
}

.no-button {
    position: relative;
    display: inline-block;
    font-family: var(--font-strawford);
    font-weight: 500;
    text-decoration: none;
    color: var(--color-white);
    transition: all .6s;
    padding-inline-start: 67px;
}

.no-button span {
    position: absolute;
    top: 49%;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: var(--color-white);
    border-radius: 40px;
    background-color: var(--color-secondary-green);
    overflow: hidden;
    transform: translateY(-50%);
}

.no-button span:before {
    position: absolute;
    top: -50%;
    left: 50%;
    font-family: var(--font-icon);
    transform: translate(-50%, -50%);
    transition: all 0.6s;
    content: '\e901';
}

.no-button i {
    transition: all 0.3s;
}

.no-button:focus,
.no-button:hover {
    padding-inline-start: 60px;
}

.no-button:focus span:before,
.no-button:hover span:before {
    top: 50%;
}

.no-button:focus i,
.no-button:hover i {
    transform: translateY(50px);
}

.button-link {
    position: relative;
    display: inline-block;
    font-family: var(--font-strawford);
    font-weight: 500;
    text-decoration: none;
    color: var(--color-black);
    transition: all 0.3s;
    padding-inline-end: 47px;
}

.button-link span {
    display: inline-block;
    transition: all 0.3s;
}

.button-link samp {
    position: absolute;
    top: 49%;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    font-size: 0.75rem;
    border: 1px solid rgba(112, 112, 112, 0.1);
    border-radius: 30px;
    overflow: hidden;
    transform: translateY(-50%);
}

.button-link samp i {
    transition: all 0.3s;
}

.button-link samp:before {
    position: absolute;
    top: 50%;
    left: -50px;
    font-family: var(--font-icon);
    transform: translate(-50%, -50%);
    transition: all 0.3s;
    content: '\e90c';
}

.button-link:focus samp:before,
.button-link:hover samp:before {
    left: 50%;
}

.button-link:focus i,
.button-link:hover i {
    transform: translateX(50px);
}

.button-link:focus span,
.button-link:hover span {
    transform: translateX(5px);
}

/* Container paddings */
.padding-148 {
    padding-block: 148px;
}

.padding-top-148 {
    padding-top: 148px;
}

.padding-bottom-148 {
    padding-bottom: 148px;
}

.padding-100 {
    padding-block: 100px;
}

.padding-top-100 {
    padding-top: 100px;
}

.padding-bottom-100 {
    padding-bottom: 100px;
}

.padding-80 {
    padding-block: 80px;
}

.padding-top-80 {
    padding-top: 80px;
}

.padding-bottom-80 {
    padding-bottom: 80px;
}

.padding-64 {
    padding-block: 64px;
}

.padding-top-64 {
    padding-top: 64px;
}

.padding-bottom-64 {
    padding-bottom: 64px;
}

.padding-60 {
    padding-block: 60px;
}

.padding-top-60 {
    padding-top: 60px;
}

.padding-bottom-60 {
    padding-bottom: 60px;
}

.padding-54 {
    padding-block: 54px;
}

.padding-top-54 {
    padding-top: 54px;
}

.padding-bottom-54 {
    padding-bottom: 54px;
}

.padding-48 {
    padding-block: 48px;
}

.padding-top-48 {
    padding-top: 48px;
}

.padding-bottom-48 {
    padding-bottom: 48px;
}

.padding-38 {
    padding-block: 38px;
}

.padding-top-38 {
    padding-top: 38px;
}

.padding-bottom-38 {
    padding-bottom: 38px;
}

.padding-32 {
    padding-block: 32px;
}

.padding-top-32 {
    padding-top: 32px;
}

.padding-bottom-32 {
    padding-bottom: 32px;
}

.padding-24 {
    padding-block: 24px;
}

.padding-top-24 {
    padding-top: 24px;
}

.padding-bottom-24 {
    padding-bottom: 24px;
}

.padding-21 {
    padding-block: 21px;
}

.padding-top-21 {
    padding-top: 21px;
}

.padding-bottom-21 {
    padding-bottom: 21px;
}

.padding-18 {
    padding-block: 18px;
}

.padding-top-18 {
    padding-top: 18px;
}

.padding-bottom-18 {
    padding-bottom: 18px;
}

.padding-16 {
    padding-block: 16px;
}

.padding-top-16 {
    padding-top: 16px;
}

.padding-bottom-16 {
    padding-bottom: 16px;
}

/* Wrapper */
.wrapper {
    position: relative;
    width: 100%;
    min-height: 100%;
    overflow: clip;

    &:after{
        position: absolute;
        top: 0;
        left: 0;
        width:100%;
        height: 100%;
        content: '';
        z-index: -1;
    }

    &:has(.header-menu ul li:hover > ul, .header-menu ul li:focus > ul), &:has(.header-menu.active) {
        background: rgb(211,211,211, .7);
        z-index: 2;
    }
}

/* Header */
.header {
    position: fixed;
    top: 20px;
    z-index: 9;
    width: 100%;
}

.header-sticky {
    position: relative;
}

.header-row {
    margin-inline: 8px;
    padding-block: 26px;
    padding-inline: 22px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    transition: all 0.3s;
}

.header-logo img {
    transition: all 0.25s;
}

.header-logo img:nth-child(2) {
    margin-top: -24px;
    opacity: 0;
    visibility: hidden;
}

.header-search {
    display: none;
}

.header-search .search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    font-size: 0.875rem;
    text-decoration: none;
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 40px;
    background-color: rgba(255, 255, 255, 0.07);
    transition: all 0.3s;
    margin-inline-end: 10px;
}

.header-menu-title {
    font-family: var(--font-strawford);
    font-size: 18px;
    font-weight: 500;
    margin-block-end: 20px;
}

.header-menu.active:has(+ + .mobileMenu.active) {
    max-height: 70vh;
}

.header.sticky .search-icon {
    background: var(--color-secondary-green);

    i {
        filter: brightness(0) invert(1);
    }
}

.header.sticky .header-row {
    border-bottom: 0;
    border-radius: 40px;
    background-color: var(--color-white);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.16);
}

.header.sticky .header-logo img:nth-child(1) {
    opacity: 0;
    visibility: hidden;
}

.header.sticky .header-logo img:nth-child(2) {
    opacity: 1;
    visibility: visible;
}

.header-inner.sticky .button.outline {
    border: 1px solid var(--color-secondary-green);
    background-color: var(--color-secondary-green);
}

.header-inner.sticky .button.outline:after {
    color: var(--color-secondary-green);
}

.header-inner .button.outline {
    display: none;
}

/* header-menu */
.header-menu {
    position: absolute;
    top: 100%;
    left: 0;
    opacity: 0;
    visibility: hidden;
    width: 100%;
    height: calc(90vh - 110px);
    border-radius: 20px;
    background-color: var(--color-white);
    transition: all 0.3s;
    margin-block-start: 3px;
    margin-inline: 1px;
    padding-block: 24px;
    padding-inline: 24px;
    overflow-y: scroll;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.16);
}

.header-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;

    &.d-nav-hidden {
        margin-top: 44px;
    }

    &.d-nav-hidden .header-menu-title {
        margin-top: 25px;
    }
}

.header-menu ul + .header-menu-title {
    padding-block-start: 42px;
}

.header-menu ul > li {
    position: relative;
    margin-block-end: 18px;
    transition: .3s ease-in-out;
}

.header-menu ul > li:last-of-type {
    margin-bottom: 0;
}

.header-menu ul > li.is-hidden {
    display: none;
}

.header-menu ul > li:after {
    position: absolute;
    bottom: -1px;
    left: 0;
    display: none;
    width: 0;
    height: 2px;
    background-color: var(--color-secondary-green);
    transition: all 0.25s;
    content: '';
}

.header-menu ul > li:hover:after {
    width: 100%;
}

.header-menu ul > li > a {
    font-family: var(--font-strawford);
    font-size: 1.125rem;
    text-decoration: none;
    color: var(--color-black);
    transition: all 0.25s;
}

.header-menu ul > li > a:focus,
.header-menu ul > li > a:hover {
    font-weight: 500;
}

.header-menu ul > li > a i {
    display: inline-block;
    font-size: 0.313rem;
    vertical-align: middle;
    margin-inline-start: 3px;
}

.header-menu ul > li > ul {
    position: absolute;
    top: 79%;
    left: -73px;
    z-index: 1;
    display: none;
    opacity: 0;
    visibility: hidden;
    width: 253px;
    border-radius: 20px;
    background-color: var(--color-white);
    transition: all 0.25s;
    padding-block: 23px;
    padding-inline: 24px;
}

.header-menu ul > li > ul > li {
    margin-inline-end: 0;
    margin-block-end: 20px;
    padding-block: 0;
}

.header-menu ul > li > ul > li:last-of-type {
    margin-block-end: 0;
}

.header-menu ul > li > ul > li:after {
    display: none;
}

.header-menu ul > li > ul > li > a {
    position: relative;
    display: block;
    color: var(--color-black);
}

/*.header-menu ul > li > ul > li > a:after {*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    right: 0;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    width: 23px;*/
/*    height: 23px;*/
/*    font-family: var(--font-icon);*/
/*    font-size: 0.438rem;*/
/*    color: var(--color-white);*/
/*    border-radius: 25px;*/
/*    background-color: var(--color-secondary-green);*/
/*    transform: translateY(-50%);*/
/*    content: '\e902';*/
/*}*/

.header-menu.active {
    opacity: 1;
    visibility: visible;
}

.header-menu .d-phone {
    padding-top: 48px;
}

.header-menu .search {
    position: relative;
}

.header-menu .search input {
    padding-right: 45px;
    height: 42px;
    border-radius: 21px;
    background: var(--color-white);
}

.header-menu .search button {
    position: absolute;
    top: 50%;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    color: var(--color-white);
    border: 0;
    border-radius: 30px;
    background-color: var(--color-secondary-green);
    transform: translateY(-50%);
}

.header-menu .d-phone .button {
    justify-content: center;
    width: 100%;
    margin-block-end: 10px;
}

/* MobileMenu */
.mobileMenu {
    position: absolute;
    top: 50%;
    right: 15px;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50px;
    background-color: var(--color-secondary-green);
    transform: translateY(-50%);
}

.mobileMenu span {
    position: relative;
    width: 23px;
}

.mobileMenu span:before,
.mobileMenu span:after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 20px;
    background-color: var(--color-white);
    transition: all 0.3s;
    content: '';
}

.mobileMenu span:before {
    top: -6px;
}

.mobileMenu span:after {
    bottom: -7px;
    left: 50%;
    width: 15px;
    transform: translateX(-50%);
}

.mobileMenu.active span:before {
    top: 0;
    transform: rotate(45deg);
}

.mobileMenu.active span:after {
    bottom: -2px;
    left: 0;
    width: 100%;
    transform: translateX(0) rotate(-45deg);
}

/* Hero */
.hero {
    padding-block: 8px;
    padding-inline: 8px;
    position: relative;
}

.hero-holder {
    position: relative;
    display: flex;
    align-items: flex-end;
    /*max-width: 1400px;*/
    max-width: unset;
    min-height: 517px;
}

.hero .container-medium {
    width: 100%;
    max-width: var(--container-max-width);

    @media (max-width: 767px) {
        display: flex;
    }

    @media (max-width: 1200px) {
        .card-advise {
            display: none;
        }
    }
}

.hero-text {
    position: relative;
    z-index: 2;
    max-width: 640px;
    color: var(--color-white);
    padding-block-end: 37px;
    padding-inline: 8px;

    i {
        font-weight: 600;
    }
}

.hero-text h1 {
    font-weight: 500;
    line-height: 1.05;
    color: inherit;
    margin-block-start: 0;
    margin-block-end: 36px;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.hero-bg:before {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.15;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(29, 46, 69, 1) 0%, rgba(27, 43, 66, 0) 50%, rgba(29, 46, 69, 1) 100%);
    content: '';
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero .card-advise {
    /*display: none;*/
}

/* Usp */
.usp {
    padding-block-start: 19px;
    padding-block-end: 17px;
    position: relative;
    text-align: center;

    .js-usp-slider {
        position: relative;
        left: -14px;
    }
}

.usp:after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    height: 1px;
    background-color: rgba(112, 112, 112, 0.1);
    transform: translateX(-50%);
    content: '';
    margin-inline: 8px;
}

.usp .swiper {
    margin: 0 auto;
    max-width: 1110px;
}

.usp p {
    font-family: var(--font-strawford);
}

.usp p i {
    margin-inline-end: 1px;
    display: inline-block;
    color: var(--color-secondary-green);
}

/* choose */
.choose {
    margin-bottom: 64px;
    padding-top: 64px;
    padding-inline: 9px;
}

.choose h2 {
    margin-block-end: 48px;
    font-size: var(--h2-font-size);
}

.choose-text {
    margin-block-end: 32px;
}

.choose-tab-handle {
    display: flex;
    align-items: center;
}

.choose-tab-handle span {
    display: block;
    flex: 0 0 auto;
    font-family: var(--font-strawford);
    color: var(--color-gray-dark);
    margin-inline-end: 14px;
}

/* tabs */
.tabs {
    margin: 0;
    padding: 9px;
    display: flex;
    list-style: none;
    border: 1px solid rgba(112, 112, 112, 0.1);
    border-radius: 33px;
}

.tabs li {
    display: inline-block;
    font-family: var(--font-strawford);
    font-weight: 500;
    text-decoration: none;
    color: var(--color-black);
    border-radius: 23px;
    transition: all 0.6s;
    padding-block-start: 14px;
    padding-block-end: 13px;
    padding-inline: 32px;
    cursor: pointer;
}

.tabs li.active,
.tabs li:focus,
.tabs li:hover {
    color: var(--color-white);
    background-color: var(--color-primary-blue);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* card-choose */
.card-choose {
    display: flex;
    flex-direction: column;
    min-height: 258px;
    text-decoration: none;
    color: var(--color-black);
    border: 1px solid rgba(112, 112, 112, 0.1);
    border-radius: 20px;
    background-color: var(--color-white);
    margin-block-end: 16px;
    padding-block-start: 27px;
    padding-block-end: 22px;
    padding-inline: 27px;
    cursor: pointer;
    scale: 1;
    transition: all 0.3s;
}

.card-choose-icons {
    margin-block-end: 20px;
    display: flex;
    justify-content: space-between;
}

.card-choose-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 49px;
    height: 49px;
    font-size: 1.313rem;
    color: var(--color-white);
    border-radius: 8px;
    background-color: var(--color-secondary-green);
}

.card-choose-icon i.icon-money {
    font-size: 1.125rem;
}

.card-choose-arrow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    font-size: 0.688rem;
    color: var(--color-primary-blue);
    border-radius: 23px;
    background-color: var(--color-accent);
    overflow: hidden;
}

.card-choose-arrow i {
    transition: all 0.3s;
}

.card-choose-arrow:before {
    position: absolute;
    top: 100%;
    left: -50px;
    font-family: var(--font-icon);
    font-size: 0.813rem;
    transform: translate(-50%, -50%);
    transition: all 0.3s;
    content: '\e902';
}

.card-choose-text {
    margin-top: auto;
}

.card-choose-title {
    margin-block-end: 9px;
    font-size: 1.313rem;
    font-weight: 600;
    line-height: 1.2;
}

.card-choose-text p {
    font-family: var(--font-strawford);
    line-height: 1.7;
    color: rgba(0, 0, 0, 0.8);
}

.card-choose-text p:last-of-type {
    margin-bottom: 0;
}

.card-choose:hover {
    scale: 0.98;
}

.card-choose:hover .card-choose-arrow i {
    transform: translateX(50px) translateY(-50px);
}

.card-choose:hover .card-choose-arrow:before {
    left: 50%;
    top: 23px;
}

/* working */
.working-bg {
    padding-block-start: 47px;
    padding-block-end: 32px;
    padding-inline: 32px;
    border-radius: 20px;
    background-color: var(--color-accent);
}

.working-text h2 {
    margin-block-end: 5px;
    font-size: var(--h3-font-size);
    line-height: 1.21;
}

.working-text p {
    font-family: var(--font-strawford);
    line-height: 1.75;
    color: rgba(0, 0, 0, 0.8);
    margin-block-end: 33px;
}

.working-text {
    margin-block-end: 54px;
}

.working .js-working-slider {
    overflow: visible;
}

.working-slider .swiper-slide {
    height: auto;
}

.working-slider .js-logo-slider {
    padding-block-start: 15px;
    overflow: visible;
}

.working-slider .js-logo-slider:before,
.working-slider .js-logo-slider:after {
    position: absolute;
    top: 0;
    z-index: 2;
    width: 53px;
    height: 100%;
    content: '';
    pointer-events: none;
}

.working-slider .js-logo-slider:before {
    left: -25px;
    background: linear-gradient(to right, rgba(24, 38, 58, .4) 0%, rgba(24, 38, 58, 0) 100%);
}

.working-slider .js-logo-slider:after {
    right: -25px;
    background: linear-gradient(to right, rgba(24, 38, 58, 0) 0%, rgba(27, 44, 67, 1) 100%);
}

.working-arrows {
    padding-block-start: 32px;
    display: flex;
    position: relative;
    z-index: 1;
}

.working-button-prev {
    left: auto;
}

.working-button-prev,
.working-button-next {
    margin-top: 0;
    position: unset;
    top: auto;
}

.working-button-next {
    margin-inline-start: 10px;
    right: auto;
}

/* card-working */
.card-working {
    padding-block: 16px;
    padding-inline: 15px;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(#121e2e 0%, #172539 45.81%, #1d2e45 100%);
    overflow: hidden;
}

.card-working-image {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.card-working-image img {
    width: 100%;
}

.card-working-image span {
    position: absolute;
    bottom: 0;
    left: 0;
    font-family: var(--font-strawford);
    font-size: 14px;
    font-weight: 500;
    border-radius: 0 10px;
    background-color: var(--color-white);
    padding-block: 8px;
    padding-inline: 14px;
}

.card-working-text {
    padding-block-start: 32px;
    padding-inline: 10px;
    padding-block-end: 16px;
    color: var(--color-white);
}

.card-working-title {
    margin-block-end: 8px;
    font-size: 1.313rem;
    font-weight: 600;
}

.card-working-text p {
    font-family: var(--font-strawford);
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    margin-block-end: 28px;
}

/* video-block */
.video-block {
    margin-block-end: 62px;
    padding-block-start: 64px;
}

.video-block-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    /*position: relative;*/
    /*overflow: hidden;*/
    padding-top: 56.25%;

    @media (max-width: 767px) {
        padding-top: 107.25%;
    }

    iframe {
        width: 100%;
        height: 100%;
        object-fit: cover;

        @media (max-width: 767px) {
            width: 200% !important;
        }
    }
}

.video-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 404px;
}

.video-block-image:before {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.15;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(29, 46, 69, 1) 0%, rgba(27, 43, 66, 0) 50%, rgba(29, 46, 69, 1) 100%);
    content: '';
}

.video-block-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: var(--font-strawford);
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    color: var(--color-white);
    transform: translate(-50%, -50%);
    transition: all 0.3s;
}

.video-block-play-btn span {
    margin-block-end: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    font-size: 1.188rem;
    border-radius: 50%;
    background-color: rgba(77, 216, 143, 0.58);
}

.video-block-play-btn span:after {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 80px;
    height: 80px;
    border-radius: 50px;
    background-color: var(--color-secondary-green);
    content: '';
}

.video-block-play-btn i {
    position: relative;
    z-index: 1;
}

.video-block-play-btn:hover {
    transform: translate(-50%, -50%) scale(0.9);
}

/* insight */
.insight {
    margin-block-end: 68px;
    margin-block-start: 50px;
}

.insight-block {
    padding-inline-start: 8px;
    padding-inline-end: 8px;
    margin-block-end: 41px;
}

.insight-heading h2 {
    font-size: var(--h2-font-size);
    margin-block-end: 15px;
    line-height: 1.09;
}

.insight-text p {
    font-family: var(--font-strawford);
    color: rgba(0, 0, 0, 0.8);
    margin-block-end: 0;
}

.insight-holder {
    padding-inline-start: 9px;
    padding-inline-end: 8px;
}

/* card-insight */
.card-insight {
    position: relative;
    display: block;
    width: 100%;
    margin-block-end: 28px;
    scale: 1;
    transition: all 0.3s;

    &:hover, &:focus {
        scale: 0.98;
    }
}

.card-insight-image {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.card-insight-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-insight-info {
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: 170px;
    line-height: 1.1;
    padding-block-end: 30px;
    padding-inline-start: 33px;
}

.card-insight-info h3 {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-white);
    transition: all 0.25s;
}

.card-insight-image:before {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.35;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    content: '';
    pointer-events: none;
}

/* blog */
.blog {
    margin-block-end: 42px;
}

.blog-heading {
    padding-inline-start: 9px;
    margin-block-end: 18px;
    display: block;
    text-decoration: none;
    color: inherit;
}

.blog-heading h2 {
    font-size: var(--h2-font-size);
}

.blog-heading h2 .icon {
    position: relative;
    top: -5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 0.688rem;
    color: var(--color-white);
    border-radius: 30px;
    background-color: var(--color-secondary-green);
    transition: all 0.25s;
    margin-inline-start: 16px;
    overflow: hidden;
}

.blog-heading h2 .icon:before {
    position: absolute;
    top: 150%;
    left: -100%;
    font-family: var(--font-icon);
    font-size: 0.688rem;
    transform: translate(-50%, -50%);
    transition: all 0.5s;
    content: '\e902';
}

.blog-heading h2 .icon i {
    transition: all 0.5s;
}

.blog-heading h2:focus .icon,
.blog-heading h2:hover .icon {
    width: 34px;
    height: 34px;
}

.blog-heading h2:focus .icon i,
.blog-heading h2:hover .icon i {
    transform: translate(30px, -30px);
}

.blog-heading h2:focus .icon:before,
.blog-heading h2:hover .icon:before {
    left: 50%;
    top: 50%;
}

/* card-blog */
.card-blog {
    position: relative;
    display: flex;
    width: 100%;
    text-decoration: none;
    border-radius: 15px;
    transition: all 0.3s;
    padding-block: 6px;
    padding-inline: 10px;
}

.card-blog-image {
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    margin-inline-end: 16px;
}

.card-blog-info {
    width: 64%;
    font-family: var(--font-strawford);
    color: var(--color-black);
    padding-block-start: 8px;
}

.card-blog-info span {
    display: none;
    font-size: 0.938rem;
    font-weight: 500;
    color: var(--color-secondary-green);
    margin-block-end: 6px;
}

.card-blog-info .h5 {
    font-family: var(--font-strawford);
    font-size: 1rem;
    font-weight: 500;
    margin-block-end: 6px;
}

.card-blog-info p {
    font-family: var(--font-strawford);
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.7);
}

.card-blog i {
    position: absolute;
    top: 32px;
    right: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    width: 28px;
    height: 28px;
    font-size: 0.625rem;
    color: var(--color-black);
    border-radius: 50%;
    background-color: var(--color-accent);
    transition: all 0.3s;
}

.card-blog:focus,
.card-blog:hover {
    background-color: var(--color-accent);
}

.card-blog:focus i,
.card-blog:hover i {
    opacity: 1;
    visibility: visible;
}

/* content-block */
.content-block {
    margin-block-end: 80px;

    @media (max-width: 1024px) {
        margin-block: 40px;
    }

    .content-info.small-content {
        margin-block-start: 44px;
        max-width: 525px;
        width: 100%;
        margin-inline-end: 107px;

        @media (max-width: 1024px) {
            margin-inline-end: 0;
            width: 50%;
        }

        @media (max-width: 767px) {
            width: 100%;
            margin-block-start: 20px;
        }

        p {
            font-size: 1.125rem;
            font-weight: 400;
            line-height: 1.778;
        }
    }
}

.content-heading h2 {
    font-size: var(--h2-font-size);
    line-height: 1.33;
}

.content-info {
    margin-block-start: 30px;
}

.content-info h3 {
    font-family: var(--font-strawford);
    font-weight: 500;
    margin-block-end: 17px;
    font-size: 1rem;
}

.content-info p {
    font-family: var(--font-strawford);
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.8);
    margin-block-end: 26px;
}

.content-info p:last-of-type {
    margin-block-end: 41px;
}

.content-btn {
    position: relative;
    font-family: var(--font-strawford);
    font-weight: 500;
    text-decoration: none;
    color: var(--color-black);
    transition: all 0.3s;
}

.content-btn:focus,
.content-btn:hover {
    padding-left: 7px;
}

.content-btn .icon {
    position: absolute;
    top: -6px;
    left: 157px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    font-size: 0.75rem;
    border: 1px solid rgba(112, 112, 112, 0.1);
    border-radius: 50%;
    overflow: hidden;
    margin-inline-start: 12px;
}

.content-btn .icon i {
    transition: all 0.5s;
}

.content-btn:focus .icon i,
.content-btn:hover .icon i {
    transform: translateX(50px);
}

.content-btn:focus .icon:before,
.content-btn:hover .icon:before {
    left: 50%;
}

.content-btn .icon:before {
    position: absolute;
    top: 50%;
    left: -100%;
    font-family: var(--font-icon);
    font-size: 0.688rem;
    transform: translate(-50%, -50%);
    transition: all 0.5s;
    content: '\e90c';
}

/* photo-block */
.photo-block {
    margin-block-end: 35px;
}

.photo-block-column {
    margin-block-end: 20px;
}

.photo-block-column img {
    /*width: 100%;*/
    /*height: 100%;*/
    /*object-fit: cover;*/
    border-radius: 10px;
    overflow: hidden;
}

.photo-block-column.large img {
    border-radius: 20px;
}

/* system */
.system {
    margin-block-end: 120px;
}

.system-block {
    margin-block-end: 70px;
}

.system-heading {
    margin-block-end: 10px;
}

.system-heading h2 {
    font-size: var(--h2-font-size);
    line-height: 1.34;
}

.system-text p {
    font-family: var(--font-strawford);
    line-height: 1.75;
    color: rgba(0, 0, 0, 0.8);
}

.system .swiper {
    overflow: visible;
}

.system .swiper-button-prev,
.system .swiper-button-next {
    width: 39px;
    height: 39px;
    font-size: 10px;
    color: var(--color-black);
    border: 1px solid rgba(112, 112, 112, 0.1);
    border-radius: 100%;
}

.system-controller {
    margin-left: auto;
    position: relative;
    top: 53px;
    right: -10px;
    width: 100%;
    max-width: 108px;
}

/*.system .system-prev {*/
/*    transform: rotate(180deg);*/
/*}*/

/* card system */
.card-system {
    position: relative;
    display: block;
    width: 100%;
    text-decoration: none;
    border-radius: 20px;
    background-color: var(--color-accent);
    scale: 1;
    transition: all 0.3s;

    &:hover, &:focus {
        scale: 0.95;
    }
}

.card-system-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: #020202;
    padding-block-start: 15px;
    padding-inline-start: 15px;
}

.card-system-info span {
    display: block;
    font-family: var(--font-strawford);
    font-size: 0.938rem;
    color: rgba(2, 2, 2, 0.8);
    margin-block-end: 7px;
}

.card-system-info .h5 {
    font-size: 1.125rem;
    transition: all 0.3s;
}

.card-system-info .icon {
    position: relative;
    top: -2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    font-size: 0.563rem;
    color: var(--color-white);
    vertical-align: middle;
    border-radius: 30px;
    background-color: var(--color-secondary-green);
    transition: all 0.25s;
    margin-inline-start: 9px;
    overflow: hidden;
}

.card-system-info .icon:before {
    position: absolute;
    top: 50%;
    left: -100%;
    font-family: var(--font-icon);
    font-size: 0.688rem;
    transform: translate(-50%, -50%);
    transition: all 0.5s;
    content: '\e90c';
}

.card-system-info .icon i {
    transition: all 0.5s;
}

.card-system-info:focus .icon i,
.card-system-info:hover .icon i {
    transform: translateX(50px);
}

.card-system-info:focus .icon:before,
.card-system-info:hover .icon:before {
    left: 50%;
}

.card-system-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-system:focus h5,
.card-system:hover h5 {
    color: var(--color-secondary-green);
}

/* text-block */
.text-block {
    margin-block-end: 65px;
}

.text-block-column {
    position: relative;
    margin-block-end: 50px;
}

.text-block-column:not(:last-of-type):after {
    position: absolute;
    top: 0;
    right: -40px;
    width: 1px;
    height: 100%;
    border-right: 1px solid rgba(112, 112, 112, 0.1);
    content: '';
}

.text-block-column:last-of-type:after {
    @media(max-width: 767px) {
        position: absolute;
        top: -30px;
        width: 100%;
        height: 1px;
        border-bottom: 1px solid rgb(112 112 112 / 15%);
        content: '';
    }
}

.text-block h2 {
    font-size: var(--h2-font-size);
    margin-block-end: 20px;
}

.text-block h3 {
    font-family: var(--font-strawford);
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.8);
    margin-block-end: 2px;
}

.text-block p {
    font-family: var(--font-strawford);
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.8);
    margin-block-end: 26px;

    &:has(+ ul) {
        margin-bottom: 22px;
    }
}

.text-block p strong {
    display: block;
    font-weight: 700;
}

.text-block ul {
    list-style: none;
    padding-inline-start: 0;
    /*margin-block-start: 30px;*/
    margin-block-end: 0;
}

.text-block ul > li {
    position: relative;
    font-family: var(--font-strawford);
    color: rgba(0, 0, 0, 0.8);
    padding-inline-start: 22px;
    margin-block-end: -3px;
}

.text-block ul > li:last-of-type {
    margin-block-end: 0;
}

.text-block ul > li:before {
    position: absolute;
    top: 8px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: var(--color-secondary-green);
    content: '';
}

/* contact */
.contact {
    margin-block-end: 70px;
}

.contact-left {
    margin-block-end: 40px;
}

.contact-left h2 {
    font-size: var(--h2-font-size);
    line-height: 1.12;
    margin-block-end: 15px;
}

.contact-left p {
    font-family: var(--font-strawford);
    font-size: 1.125rem;
    line-height: 1.52;
    margin-block-end: 30px;
}

.contact-column {
    font-family: var(--font-strawford);
    font-size: 1rem;
    margin-block-end: 25px;
}

.contact-column .h6 {
    font-family: var(--font-strawford);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-secondary-green);
    margin-block-end: 15px;
}

.contact-links {
    list-style: none;
}

.contact-links li {
    margin-block-end: 9px;
}

.contact-links li a {
    display: inline-flex;
    text-decoration: none;
    color: var(--color-black);
    transition: all 0.3s;
}

.contact-links li a:focus,
.contact-links li a:hover {
    color: var(--color-secondary-green);
}

.contact-links .icon {
    position: relative;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    font-size: 0.438rem;
    color: var(--color-white);
    vertical-align: middle;
    border-radius: 30px;
    background-color: var(--color-secondary-green);
    transition: all 0.25s;
    margin-inline-start: 10px;
    overflow: hidden;
}

.contact-column address {
    margin-top: -6px;
    font-style: normal;
    line-height: 1.58;
}

.contact-right {
    border: 1px solid rgba(112, 112, 112, 0.1);
    border-radius: 20px;
    padding-block: 30px;
    padding-inline: 15px;
    padding-block-end: 47px;
}

/* brand */
.brand {
    margin-block-end: 37px;

    .brand-container {
        display: flex;
        gap: 20px;
        justify-content: space-between;

        @media (max-width: 767px) {
            justify-content: center;
            align-items: center;
            div {
                /*flex: 0 0 auto;*/
                /*max-width: 150px;*/
            }
        }
    }
}

.brand-image {
    display: flex;
    justify-content: center;
}

.brand .swiper-wrapper {
    align-items: center;
}

.brand .swiper-slide:last-of-type {
    display: flex;
    justify-content: flex-end;
}

/* card-advise */
.card-advise {
    text-align: left;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background-color: var(--color-white);
    margin-block-end: 18px;
    padding-block: 37px;
    overflow: hidden;
    width: 100%;
    margin: 0;
    position: relative;
}

.card-advise-text {
    margin-block-end: 41px;
    padding-inline-start: 23px;
    padding-inline-end: 22px;
}

.card-advise-text span {
    margin-block-end: 9px;
    display: block;
    font-family: var(--font-strawford);
    font-weight: 500;
    color: var(--color-secondary-green);
}

.card-advise-title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.15;
}

.card-advise-wrap {
    margin-inline-end: -11px;
    padding-inline-start: 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-advise-wrap:before,
.card-advise-wrap:after {
    position: absolute;
    top: 0;
    width: 57px;
    height: 100%;
    content: '';
}

.card-advise-wrap:before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.card-advise-wrap:after {
    right: 11px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}

/* plan */
.plan {
    margin-block-end: 65px;
}

.plan-block {
    margin-inline: 8px;
    max-width: 848px;
    padding-block-start: 28px;
    padding-block-end: 33px;
    padding-inline: 32px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(77, 216, 143, 1) 0%, rgba(99, 255, 173, 1) 100%);
}

.plan-heading {
    margin-block-end: 27px;
}

.plan-heading h2 {
    font-size: var(--h3-font-size);
    line-height: 1.35;
    color: var(--color-white);
}

.plan .button {
    margin-block-start: 10px;
}

/* review */
.review {
    margin-block-end: 64px;
    @media(max-width: 767px) {
        margin-block-end: 40px;
    }
}

.review-title {
    margin-block-end: 24px;
    padding-inline: 17px;
    display: block;
    color: inherit;
}

.review-title h2 {
    display: inline-block;
    font-size: var(--h2-font-size);
}

.review-title h2 .icon {
    position: relative;
    top: -5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 0.688rem;
    color: var(--color-white);
    border-radius: 30px;
    background-color: var(--color-secondary-green);
    transition: all 0.25s;
    margin-inline-start: 7px;
    overflow: hidden;
}

.review-title h2 .icon:before {
    position: absolute;
    top: 100%;
    left: -50%;
    font-family: var(--font-icon);
    font-size: 0.688rem;
    transform: translate(-50%, -50%);
    transition: all 0.5s;
    content: '\e902';
}

.review-title h2 .icon i {
    transition: all 0.5s;
}

.review-title h2:focus .icon,
.review-title h2:hover .icon {
    width: 34px;
    height: 34px;
}

.review-title h2:focus .icon i,
.review-title h2:hover .icon i {
    transform: translate(30px, -30px);
}

.review-title h2:focus .icon:before,
.review-title h2:hover .icon:before {
    left: 50%;
    top: 50%;
}

.review .swiper {
    overflow: visible;
}

.review-nav-buttons {
    .swiper-button-prev, .swiper-button-next {
        opacity: 0;
    }

    .swiper-button-next {
        right: -100px;
    }

    .swiper-button-prev {
        left: -100px;
    }
}

.js-review-slider {
    &.hover-left {
        .swiper-button-prev {
            left: var(--swiper-navigation-sides-offset, 10px);
            opacity: 1;
        }
    }

    &.hover-right {
        .swiper-button-next {
            right: var(--swiper-navigation-sides-offset, 10px);
            opacity: 1;
        }
    }
}

/* card-review */
.card-review {
    border-radius: 10px;
    background-color: var(--color-accent);
    overflow: hidden;
    transition: all 0.3s;
}

.card-review-image img {
    width: 100%;
    height: 215px;
    object-fit: cover;
}

.card-review-content {
    padding-block: 25px;
    padding-inline: 25px;
}

.card-review-rating {
    margin-block-end: 48px;
    padding-block-start: 6px;
    padding-block-end: 1px;
    padding-inline: 9px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 133px;
    border-radius: 12px;
    background-color: var(--color-white);
    @media(max-width: 767px) {
        margin-block-end: 18px;
    }
}

.card-review-rating span {
    display: inline-block;
    font-family: var(--font-strawford);
    font-size: 14px;
    font-weight: 500;
    transform: translateY(-3px);
    padding-inline-start: 3px;
}

.card-review-text q {
    margin-block-end: 18px;
    font-size: 1.25rem;
    line-height: 1.4;
    font-weight: 600;
    display: inline-block;
}

.card-review-text span {
    display: block;
    font-family: var(--font-strawford);
    font-weight: 500;
    color: var(--color-secondary-green);
}

/* steps */
.steps {
    margin-block-end: 44px;
    padding-block: 8px;
    padding-inline: 8px;

    .form-input {
        margin-bottom: 24px;
    }
}

.steps-bg {
    margin: 0 auto;
    max-width: 1400px;
    border-radius: 20px;
    background-color: var(--color-blue);
    padding-block-start: 149px;
    padding-block-end: 65px;
}

.steps-column {
    margin-block-end: 40px;
}

.steps-column:last-of-type {
    margin-block-end: 0;
}

.steps-left {
    color: var(--color-white);
}

.steps-left h1 {
    font-size: var(--h2-font-size);
    font-weight: 500;
    line-height: 1.32;
    color: inherit;
    margin-block-end: 12px;
}

.steps-left p {
    font-family: var(--font-strawford);
    font-size: 1.125rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-block-end: 25px;
}

/* card-steps */
.card-step {
    padding-block: 20px;
    padding-inline: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
}

.card-step-image {
    margin-block-end: 48px;
    position: relative;
}

.card-step-image img {
    width: 100%;
    border-radius: 10px;
}

.card-step-price {
    position: absolute;
    right: 14px;
    bottom: -40px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 97px;
    height: 98px;
    font-family: var(--font-strawford);
    font-size: 0.875rem;
    text-align: center;
    color: var(--color-white);
    border-radius: 50%;
    background-color: rgba(76, 216, 143, 0.25);
}

.card-step-price .price {
    position: relative;
    z-index: 1;
}

.card-step-price:before {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 87px;
    height: 88px;
    border-radius: 50%;
    background-color: var(--color-secondary-green);
    content: '';
}

.card-step-price strong {
    padding-block-start: 2px;
    display: block;
    font-size: 1.25rem;
}

.card-step-title {
    font-family: var(--font-strawford);
    font-size: 1.563rem;
    font-weight: 500;
    color: var(--color-white);
    margin-block-end: 33px;
}

.card-step-text ul {
    margin-block-end: 41px;
    position: relative;
    list-style: none;
}

.card-step-text ul:before,
.card-step-text ul:after {
    position: absolute;
    top: 0;
    left: 16px;
    width: 4px;
    height: 100%;
    border-radius: 10px;
    background-color: rgba(112, 112, 112, 0.1);
    transition: all 0.3s;
    content: '';
}

.card-step-text ul:after {
    height: 22%;
    background-color: var(--color-secondary-green);
}

.card-step-text li {
    padding-left: 53px;
    position: relative;
    font-family: var(--font-strawford);
    font-size: 18px;
    color: rgba(255, 255, 255, 0.6);
    margin-block-end: 36px;
}

.card-step-text li span {
    position: absolute;
    top: -6px;
    left: 1px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-family: var(--font-strawford);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-white);
    border-radius: 23px;
    background-color: var(--color-dark-blue);
    transition: all 0.3s;
}

.card-step-text li:last-of-type {
    margin-bottom: 0;
}

.card-step-text li.active {
    font-weight: 500;
    color: var(--color-white);
}

.card-step-text li.active span {
    top: -9px;
    left: 0;
    width: 36px;
    height: 36px;
    background-color: var(--color-secondary-green);
}

/* steps-form */
.form {
    padding-block: 25px;
    padding-inline: 20px;
    border-radius: 20px;
    background-color: var(--color-white);
}

.form ul {
    margin-block-end: 28px;
    list-style: none;
}

.form li {
    margin-block-end: 10px;
}

.form li > a {
    position: relative;
    display: inline-block;
    width: 100%;
    font-family: var(--font-strawford);
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    color: var(--color-black);
    border: 1px solid rgba(112, 112, 112, 0.1);
    border-radius: 25px;
    transition: all 0.3s;
    padding-block: 11px;
    padding-inline-start: 50px;
    padding-inline-end: 23px;
}

.form li > a.active,
.form li > a:focus,
.form li > a:hover {
    color: var(--color-white);
    border: 1px solid var(--color-secondary-green);
    background-color: var(--color-secondary-green);
}

.form li > a span {
    position: absolute;
    top: 50%;
    left: 6px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    font-family: var(--font-strawford);
    font-weight: 500;
    color: var(--color-white);
    border-radius: 23px;
    background-color: var(--color-dark-blue);
    transform: translateY(-50%);
    transition: all 0.3s;
}

.form li > a:hover span,
.form li > a:focus span,
.form li > a.active span {
    color: var(--color-secondary-green);
    background-color: var(--color-white);
}

.form-title {
    margin-block-start: 32px;
    margin-block-end: 25px;
    font-family: var(--font-strawford);
    font-weight: 500;
    font-size: 1rem;

    &:first-child {
        margin-block-start: 0;
    }
}

.form-field {
    margin-top: -3px;
}

.form-submit {
    text-align: right;
}

/* footer */
.footer {
    padding-inline: 8px;
}

.footer-holder {
    padding-inline: 8px;
}

.footer-bg {
    max-width: unset;
    border-radius: 20px;
    background: linear-gradient(#121e2e 0%, #172539 45.81%, #1d2e45 100%);
    margin-inline: auto;
    padding-block-start: 29px;
    padding-block-end: 25px;
    overflow: hidden;
}

.footer-top {
    padding-block-end: 29px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-logo {
    margin-block-start: 3px;
    margin-block-end: 48px;
    display: inline-block;
}

.footer-tel {
    margin-block-end: 16px;
}

.footer-mail,
.footer-tel {
    display: inline-flex;
    font-family: var(--font-strawford);
    font-size: 1.25rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--color-white);
}

.footer-mail span,
.footer-tel span {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    font-size: 0.563rem;
    color: var(--color-white);
    border-radius: 30px;
    background-color: var(--color-secondary-green);
    transform: translateY(-3px);
    transition: all 0.3s;
    margin-inline-start: 16px;
    overflow: hidden;
}

.footer-mail span:before,
.footer-tel span:before {
    position: absolute;
    top: 50px;
    left: -50%;
    font-family: var(--font-icon);
    transform: translate(-50%, -50%);
    transition: all 0.3s;
    content: '\e902';
}

.footer-mail i,
.footer-tel i {
    transition: all 0.3s;
}

.footer-mail:focus i,
.footer-mail:hover i,
.footer-tel:focus i,
.footer-tel:hover i {
    transform: translateY(-40px) translateX(40px);
}

.footer-tel:focus span:before,
.footer-tel:hover span:before,
.footer-mail:focus span:before,
.footer-mail:hover span:before {
    top: 50%;
    left: 50%;
}

.footer-tel:focus span,
.footer-tel:hover span,
.footer-mail:focus span,
.footer-mail:hover span {
    transform: scale(0.9) translateY(-3px);
}

.footer-left {
    margin-block-end: 31px;
    padding-block-start: 27px;
}

.footer-column:last-of-type .footer-title {
    padding-block-start: 29px;
    padding-block-end: 8px;
}

.footer-column:last-of-type .footer-title:after {
    display: none;
}

.footer-text p {
    font-family: var(--font-strawford);
    line-height: 1.75;
    color: var(--color-white);
    margin-block-end: 28px;
}

.footer-title {
    position: relative;
    width: calc(100% + 48px);
    font-family: var(--font-strawford);
    font-weight: 500;
    color: var(--color-white);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-inline-start: -24px;
    padding-block: 19px;
    padding-inline: 24px;
}

.footer-title:after {
    position: absolute;
    top: 50%;
    right: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-family: var(--font-icon);
    font-size: 0.688rem;
    color: var(--color-white);
    border-radius: 25px;
    background-color: var(--color-secondary-green);
    transform: translateY(-50%);
    content: '\e908';
}

.footer-hidden {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.footer-nav {
    padding-block-end: 19px;
}

.footer-nav ul {
    list-style: none;
}

.footer-nav li {
    margin-block-end: 10px;
}

.footer-nav li:last-of-type {
    margin-block-end: 0;
}

.footer-nav li a {
    display: inline-block;
    font-family: var(--font-strawford);
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
    vertical-align: middle;
    transition: all 0.3s;
}

.footer-nav li a:focus,
.footer-nav li a:hover {
    color: var(--color-white);
}

.footer-location address {
    font-family: var(--font-strawford);
    font-style: normal;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.8);
    margin-block-end: 20px;
}

.footer-linkedin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 41px;
    height: 41px;
    text-decoration: none;
    color: var(--color-white);
    border-radius: 10px;
    background-color: var(--color-secondary-green);
    transition: all 0.3s;
}

.footer-linkedin:focus,
.footer-linkedin:hover {
    transform: scale(0.9);
}

/* copyright */
.copyright {
    padding-block: 23px;
    text-align: center;
}

.copyright p {
    font-family: var(--font-strawford);
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.8);
    margin-block-end: 0;
}

.copyright p a {
    display: inline-block;
    font-size: 1rem;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.8);
    transform: translateY(3px);
}

.copyright p a:after {
    display: inline-block;
    width: 1px;
    height: 10px;
    vertical-align: middle;
    background-color: rgba(112, 112, 112, 0.1);
    content: '';
    margin-block-start: -8px;
    margin-inline-start: 17px;
    margin-inline-end: 12px;
}

.copyright ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin-block-end: 17px;
}

.copyright li {
    margin-inline-end: 24px;
}

.copyright li:last-of-type {
    margin-inline-end: 0;
}

.copyright li a {
    display: inline-block;
    font-family: var(--font-strawford);
    font-size: 0.875rem;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.8);
    transition: all 0.3s;
}

.copyright li a:hover {
    color: var(--color-secondary-green);
}

/* Swiper */
.swiper-button-prev,
.swiper-button-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    font-size: 0.625rem;
    color: var(--color-blue);
    border: 1px solid rgba(112, 112, 112, 0.1);
    border-radius: 40px;
    background-color: var(--color-white);
    scale: 1;
    transition: all 0.3s ease-in-out;

    &:hover, &:focus {
        scale: 0.98;
    }
}

.swiper-button-prev:after,
.swiper-button-next:after {
    display: none;
}

.swiper-button-prev i {
    display: block;
    transform: rotate(180deg);
}

/* Breakpoints */
@media (min-width: 768px) {
    .header-row {
        margin-inline: 20px;
    }

    .hero-holder {
        min-height: 600px;
    }

    .header-menu-scroll {
        height: auto;
        overflow-y: inherit;
    }

    .hero {
        padding-block: 20px;
        padding-inline: 20px;
    }

    .hero-text {
        padding-block-end: 77px;
        padding-inline: 0;
    }

    .hero-text h1 {
        margin-block-end: 65px;
        font-size: 3.75rem;
    }

    .usp {
        padding-block-start: 7px;
        padding-block-end: 24px;

        @media (max-width: 1200px) {
            padding-block-start: 24px;
        }
    }

    .usp:after {
        margin-inline: 20px;
        max-width: 1440px;
    }

    .text-block {
        margin-block-end: 118px;
    }

    .text-block-holder {
        display: grid;
        grid-column-gap: 80px;
        grid-template-columns: repeat(2, 1fr);
    }

    .text-block-column {
        margin-block-end: 0;
    }

    .text-block h2 {
        font-size: var(--h3-font-size);
        margin-block-end: 47px;
    }

    .photo-block {
        margin-block-end: 118px;
        display: flex;
        justify-content: space-between;
        /*align-items: baseline;*/
    }

    .photo-block-column {
        width: 20.8%;
        margin-block-end: 0;
        /*flex: 1;*/
        height: fit-content;
    }

    .photo-block-column.large {
        width: 60.9%;
    }

    .photo-block-column.small {
        /*align-self: self-end;*/
        width: 13.4%;
    }

    /*.photo-block-column img {*/
    /*    width: auto;*/
    /*    height: auto;*/
    /*}*/
    .system {
        margin-block-end: 174px;
    }

    .system-block {
        display: flex;
        justify-content: space-between;
        max-width: 989px;
        margin-block-end: 56px;
    }

    .system-heading {
        width: 39%;
        margin-block-end: 0;
    }

    .system-heading h2 {
        font-size: var(--h3-font-size);
    }

    .system-text {
        width: 45.4%;
        margin-block-start: 2px;
    }

    .brand {
        margin-block-end: 64px;
    }

    .insight-block {
        display: flex;
        justify-content: space-between;
        max-width: 882px;
        margin-block-end: 76px;
        padding-inline-start: unset;
        padding-inline-end: unset;
    }

    .insight-heading {
        width: 30%;
    }

    .insight-heading h2 {
        font-size: var(--h3-font-size);
        margin-block-end: 0;
        line-height: 1.1;
    }

    .insight-text {
        width: 51%;
    }

    .insight-text p {
        margin-block-start: -2px;
        line-height: 1.75;
    }

    .insight-holder {
        display: grid;
        grid-column-gap: 15px;
        grid-template-columns: repeat(3, 1fr);
        max-width: 1270px;
        padding-inline-start: unset;
        padding-inline-end: unset;
    }

    .card-insight {
        margin-block-end: unset;
    }

    .choose {
        margin-bottom: 124px;
        padding-top: 107px;
        padding-inline: 0;
    }

    .choose h2 {
        margin-block-end: 32px;
        font-size: var(--h3-font-size);
    }

    .choose-text {
        margin-block-end: 47px;
        text-align: center;
    }

    .choose-tab-handle {
        margin: 0 auto;
        max-width: 359px;
    }

    .card-choose {
        margin-bottom: 0;
        padding-block: 27px;
        padding-inline: 31px;
        min-height: 292px;
    }

    .card-choose-arrow {
        margin-right: -4px;
    }

    .card-choose-title {
        margin-block-end: 7px;
        font-size: 1.625rem;
    }

    .tab-content-holder {
        display: grid;
        grid-row-gap: 20px;
        grid-column-gap: 20px;
        grid-template-columns: repeat(2, 2fr);
    }

    .working-bg {
        padding-block: 80px;
        padding-inline: 82px;
    }

    .working-text h2 {
        margin-block-end: 28px;
    }

    .working-text p {
        margin-block-end: 33px;
    }

    .working-slider {
        margin-right: -80px;
        padding-inline-start: 101px;
        position: relative;
        width: calc(100% + 80px);
    }

    .working .js-working-slider {
        overflow: hidden;
    }

    .working-arrows {
        position: absolute;
        top: 50%;
        left: 0;
        display: block;
        width: 39px;
        height: 88px;
        transform: translateY(-50%);
        padding-block-start: 0;
    }

    .working-button-next {
        margin-block-start: 10px;
        margin-inline-start: 0;
    }

    .video-block {
        margin-block-end: 100px;
        padding-block-start: 100px;
    }

    .blog {
        margin-block-end: 139px;
        display: flex;
        flex-wrap: wrap;
    }

    .blog-heading {
        width: 45%;
        padding-inline-start: 0;
    }

    .blog-heading h2 {
        font-size: var(--h3-font-size);
    }

    .blog-heading h2 .icon {
        margin-inline-start: 7px;
        top: -7px;
    }

    .blog-right {
        width: 55%;
    }

    .card-blog {
        margin-block-end: 10px;
        padding-block: 10px;
        padding-inline: 11px;
    }

    .card-blog-image {
        width: 100px;
        height: 100px;
        margin-inline-end: 19px;
    }

    .card-blog-info {
        padding-block-start: 17px;
    }

    .card-blog-info span {
        display: block;
    }

    .card-blog-info .h5 {
        font-size: 1.125rem;
        margin-block-end: 0;
    }

    .card-blog-info p {
        display: none;
    }

    .card-blog i {
        top: 49px;
        right: 23px;
        opacity: 0;
        visibility: hidden;
        font-size: 0.688rem;
        background-color: var(--color-white);
    }

    .content-block {
        display: flex;
        justify-content: space-between;
    }

    .content-heading {
        width: 41%;
    }

    .content-heading h2 {
        font-size: var(--h3-font-size);
    }

    .content-info {
        width: 49.4%;
        margin-block-start: 59px;
    }

    .content-info h3 {
        margin-block-end: 25px;
    }

    .plan {
        margin-block-end: 100px;
    }

    .plan-block {
        margin: 0 auto;
        padding-block-start: 56px;
        padding-block-end: 49px;
        padding-inline: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .plan-heading {
        width: 60%;
        margin-block-end: 0;
    }

    .plan-heading h2 {
        line-height: 1.25;
    }

    .review {
        margin-block-end: 100px;
    }

    .review-title {
        margin-block-end: 59px;
        text-align: center;
        min-height: 50px;
    }

    .review-title h2 {
        font-size: var(--h3-font-size);
    }

    .card-review {
        display: flex;
        flex-wrap: wrap;
        border-radius: 20px;
    }

    .card-review-content {
        padding-block: 32px;
        padding-inline: 32px;
        display: flex;
        flex-direction: column;
        order: 1;
        width: 50%;
    }

    .card-review-image {
        order: 2;
        width: 50%;
    }

    .card-review-image img {
        height: 100%;
    }

    .card-review-text {
        margin-block-start: auto;
        margin-inline-start: 8px;
        margin-block-end: 2px;
        max-width: 321px;
    }

    .card-review-rating {
        margin-block-end: 6px;
        padding-block-start: 6px;
        padding-block-end: 1px;
        padding-inline: 10px;
        max-width: 142px;
    }

    .card-review-text q {
        line-height: 1.3;
    }

    .contact {
        margin-block-end: 102px;
    }

    .contact-left h2 {
        font-size: var(--h3-font-size);
        margin-block-end: 38px;
    }

    .contact-left p {
        font-size: 1.125rem;
        margin-block-end: 41px;
    }

    .contact-block {
        display: grid;
        grid-column-gap: 44px;
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-column {
        font-size: 1.125rem;
        margin-block-end: 0;
    }

    .contact-column .h6 {
        margin-block-end: 24px;
    }

    .contact-right {
        padding-block-start: 40px;
        padding-block-end: 41px;
        padding-inline: 48px;
        margin-top: 2px;
    }

    .contact-form-block {
        display: grid;
        grid-column-gap: 24px;
        grid-template-columns: repeat(2, 1fr);
    }

    .form-submit {
        display: flex;
        align-items: center;
        justify-content: end;

        &:has(a + button) {
            justify-content: space-between;
        }
    }

    .form-input.upload .file-up {
        width: unset;
        margin-block-end: 0;
    }

    .steps {
        padding-block: 20px;
        padding-inline: 20px;
    }

    .steps-left h1 {
        font-size: var(--h3-font-size);
    }

    .steps-left p {
        margin-block-end: 48px;
    }

    .card-step {
        padding-block: 37px;
        padding-inline: 37px;
    }

    .form {
        padding-block: 32px;
        padding-inline: 32px;
    }

    .form ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .form li {
        margin-inline-end: 26px;
    }

    .form li:last-of-type {
        margin-right: 0;
    }

    .form li > a {
        width: auto;
    }

    .footer {
        padding-inline: 20px;
    }

    .footer-bg {
        padding-block-start: 62px;
        padding-block-end: 64px;
    }

    .footer-holder {
        padding-inline: 0;
    }

    .footer-top {
        padding-block-end: 47px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .footer-logo {
        margin-block-end: 0;
    }

    .footer-tel {
        margin-block-end: 12px;
    }

    .footer-mail,
    .footer-tel {
        font-size: 1.75rem;
    }

    .footer-mail span,
    .footer-tel span {
        width: 33px;
        height: 33px;
        font-size: 0.625rem;
        transform: translateY(0);
    }

    .footer-tel:focus span,
    .footer-tel:hover span,
    .footer-mail:focus span,
    .footer-mail:hover span {
        transform: scale(0.9) translateY(0);
    }

    .footer-text p {
        margin-block-end: 28px;
    }

    .footer-location address {
        margin-block-end: 13px;
    }

    .review .swiper-wrapper {
        align-items: center;
    }

    .review .swiper-slide .card-review {
        border-radius: 10px;
    }

    .review .swiper-slide-active .card-review {
        border-radius: 20px;
    }

    .copyright {
        padding-block: 16px;
    }

    .copyright-holder {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .copyright ul {
        margin-bottom: 0;
        justify-content: inherit;
        order: 2;
    }

    .copyright p {
        order: 1;
    }

    .photo-block .photo-block-column.small img {
        margin-top: 200%;
    }
    .logo-block-container {
        min-height: 582px;
    }
}

@media (max-width: 768px) {
    main {
        padding-inline: 16px;
    }
    .photo-block-column.small img {
        margin-left: auto;
    }
}

@media (min-width: 1024px) {
    .hero-holder {
        min-height: 767px;
    }

    .hero-text h1 {
        font-size: var(--h1-font-size);
    }

    .text-block-holder {
        grid-column-gap: 201px;
    }

    .text-block-column:not(:last-of-type):after {
        right: -102px;
    }

    .content-block {
        margin-block-end: 154px;
        margin-block-start: 120px;
    }

    .brand-image {
        display: block;
    }

    .tab-content-holder {
        grid-template-columns: repeat(3, 3fr);
    }

    .working-bg {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .working-text {
        margin-block-end: 6px;
        padding-right: 20px;
        width: 32%;
    }

    .working-slider {
        width: calc(68% + 80px);
    }

    .working-arrows {
        left: 19px;
    }

    .video-block {
        margin-block-end: 170px;
        padding-block-start: 124px;
    }

    .insight {
        margin-block-end: 159px;
        margin-block-start: 110px;
    }

    .card-system-info {
        padding-block-start: 34px;
        padding-inline-start: 31px;
    }

    .card-system-info .h5 {
        font-size: 1.438rem;
    }

    .review .swiper-slide {
        width: 840px;
    }

    .review .swiper-slide-active {
        width: 960px;
    }

    .review .swiper-slide .card-review-text q {
        font-size: 1.188rem;
    }

    .review .swiper-slide .card-review-text span {
        font-size: 0.813rem;
    }

    .review .swiper-slide-active .card-review-text q {
        font-size: 1.5rem;
    }

    .review .swiper-slide-active .card-review-text span {
        font-size: 1rem;
    }

    .review .swiper-slide .card-review-rating span {
        font-size: 0.75rem;
    }

    .review .swiper-slide-active .card-review-rating span {
        font-size: 0.875rem;
    }

    .card-review-text q {
        font-size: 1.5rem;
    }

    .steps-holder {
        display: flex;
        flex-wrap: wrap;
    }

    .steps-column {
        margin-block-end: 0;
        padding-inline-end: 15px;
        width: 49%;
    }

    .steps-column:last-of-type {
        padding-block-start: 6px;
        padding-inline-start: 5px;
        padding-inline-end: 0;
        width: 51%;
    }

    .steps-left {
        max-width: 524px;
    }

    .card-step-price {
        bottom: -48px;
        width: 127px;
        height: 128px;
    }

    .card-step-price:before {
        width: 117px;
        height: 118px;
    }

    .contact {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .contact-left {
        width: 40%;
        margin-block-end: 0;
    }

    .contact-right {
        width: 50.6%;
    }

    .footer-bottom {
        padding-block-start: 44px;
        display: flex;
        flex-wrap: wrap;
    }

    .footer-column:last-of-type .footer-title {
        padding: 0;
    }

    .footer-title {
        margin-block-end: 8px;
        margin-inline-start: 0;
        padding: 0;
        width: 100%;
        border-top: 0;
    }

    .footer-title:after {
        display: none;
    }

    .footer-left {
        margin-block-end: 0;
        padding-block-start: 0;
        width: 45%;
    }

    .footer-text {
        max-width: 349px;
    }

    .footer-right {
        padding-block-start: 4px;
        padding-inline-start: 21px;
        display: flex;
        flex-wrap: wrap;
        width: 55%;
    }

    .footer-column {
        width: 33.33%;
    }

    .footer-column:nth-child(2) {
        padding-inline-start: 6px;
    }

    .footer-column:nth-child(3) {
        padding-inline-start: 11px;
    }

    .footer-hidden {
        max-height: 100% !important;
        overflow: unset;
    }

    .footer-nav {
        padding-block-start: 4px;
        padding-block-end: 0;
    }
}

@media (min-width: 1200px) {
    .header-row {
        padding-block: 0;
        position: inherit;
    }

    .header-sticky {
        transition: all 0.3s;
    }

    .header-sticky:after {
        position: absolute;
        bottom: 0;
        left: -40px;
        width: calc(100% + 80px);
        height: 1px;
        background-color: rgba(255, 255, 255, 0.1);
        transition: all 0.25s;
        content: '';
    }

    .header.sticky .header-sticky:after {
        opacity: 0;
        visibility: hidden;
    }

    .header-logo {
        width: 24%;
    }

    .header-menu {
        position: inherit;
        opacity: 1;
        visibility: visible;
        width: 52%;
        height: calc(100vh - 110px);
        height: auto;
        background-color: transparent;
        margin-block-start: 0;
        margin-inline: 0;
        padding-block: 0;
        padding-inline: 0;
        overflow-y: inherit;
        box-shadow: none;
    }

    .header-menu ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .header-menu ul.d-nav-hidden {
        display: none;
    }

    .header-menu ul > li {
        margin-block-end: 0;
        margin-inline-end: 20px;
        padding-block: 35px;
        position: relative;
    }

    .header-menu ul > li.is-hidden {
        display: block;
    }

    .header-menu ul > li:after {
        display: block;
    }

    .header-menu ul > li:last-of-type {
        margin-inline-end: 0;
    }

    .header-menu ul > li:hover ul {
        opacity: 1;
        visibility: visible;
    }

    .header-menu ul > li > a {
        font-size: 1rem;
        color: var(--color-white);
    }

    .header-menu ul > li > a:focus,
    .header-menu ul > li > a:hover {
        font-weight: 400;
    }

    .header-menu ul > li > ul {
        display: block;
    }

    .header.sticky .header-menu .header-menu-scroll > ul > li {
        padding-block: 25px;
    }

    .header-menu-title {
        display: none;
    }

    .header.sticky .header-menu ul > li > a {
        color: var(--color-primary-blue);
    }

    .header-search {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 24%;
    }

    .mobileMenu {
        display: none;
    }

    .header-menu .d-phone {
        display: none;
    }

    .header-inner .header-menu {
        display: none;
    }

    .header-inner .button.outline {
        display: inline-block;
    }

    .header-inner .header-row {
        padding-block-start: 22px;
        padding-block-end: 26px;
        justify-content: space-between;
    }

    .hero .container-medium {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
    }

    .hero .card-advise {
        /*position: relative;*/
        z-index: 1;
        /*display: block;*/
        max-width: 416px;
        border: 0;
        /*margin-block-end: 63px;*/
        margin-block-start: 0;
        padding-block-start: 32px;
        padding-block-end: 39px;
        /*position: absolute;*/
        bottom: 64px;
        right: 60px;
        display: block;
    }

    .hero .card-advise-text {
        margin-block-end: 28px;
        padding-inline-start: 33px;
        padding-inline-end: 30px;
    }

    .hero .card-advise-wrap:after {
        right: 0;
    }

    .hero .card-advise-text span {
        margin-block-end: 6px;
    }

    .hero .card-advise-wrap {
        margin-inline-end: 0;
        padding-inline-start: 28px;
        padding-inline-end: 9px;
    }

    .hero .card-advise-title {
        line-height: 1.45;
    }

    .usp {
        padding-block-start: 9px;
    }

    .usp .card-advise {
        display: none;
    }

    .tab-content-holder {
        grid-column-gap: 33px;
    }

    .card-choose-title {
        font-size: 1.75rem;
    }

    .blog-heading {
        width: 33.6%;
    }

    .blog-right {
        display: grid;
        grid-column-gap: 16px;
        grid-template-columns: repeat(2, 1fr);
        width: 66.3%;
        margin-block-start: -11px;
    }

    .form {
        padding-block: 48px;
        padding-inline: 48px;
    }

    .footer-info {
        padding-inline-end: 106px;
    }

    .footer-left {
        width: 49%;
    }

    .footer-right {
        width: 51%;
    }

    .card-blog-info .h5 {
        max-width: 85%;
    }
}

@media (min-width: 1360px) {
    .header.sticky .header-row {
        border-radius: 0;
        background-color: transparent;
        box-shadow: none;
    }

    .header-row {
        margin: 0;
        padding-inline: 0;
        position: inherit;
    }

    .header.sticky .header-sticky {
        border-radius: 40px;
        background-color: var(--color-white);
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.16);
    }

    .header-menu ul > li {
        margin-inline-end: 32px;
    }

    .insight-holder {
        grid-column-gap: 26px;
        position: relative;
        left: -5px;
    }

    .card-insight-info {
        max-width: 200px;
        line-height: 1.01;
        padding-block-end: 33px;
        padding-inline-start: 38px;
    }

    .card-insight-info h3 {
        font-size: 1.75rem;
    }

    .contact-left {
        width: 32%;
    }
}


.banner {
    padding-block: 20px 8px;
    padding-inline: 8px;
    position: relative;

    .banner-holder {
        position: relative;
        display: flex;
        flex-direction: column;
        /*align-items: flex-end;*/
        justify-content: space-between;
        max-width: unset;
        min-height: 511px;
        @media(max-width: 767px) {
            min-height: 251px;
        }
    }

    .container-medium {
        width: 100%;
    }

    .banner-text {
        position: relative;
        z-index: 2;
        max-width: 640px;
        color: var(--color-white);
        padding-block-end: 22px;
        /*padding-inline: 8px;*/

        h1 {
            font-weight: 500;
            line-height: 1.333;
            color: inherit;
            margin-block-start: 0;
            margin-block-end: 29px;
            font-size: var(--h3-font-size);
            max-width: 416px;
        }
    }

    .banner-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 20px;
        overflow: hidden;

        &::before {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.15;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(29, 46, 69, 1) 0%, rgba(27, 43, 66, 0) 50%, rgba(29, 46, 69, 1) 100%);
            content: '';
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    + usp {
        @media (min-width: 1200px) {
            padding-block-start: 16px;
        }
    }

    &.landingspagina {
        .banner-holder {
            min-height: 511px;
        }

        .banner-bg {
            &:before {
                background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(29, 46, 69, 0.55) 100%);
                opacity: 1;
            }
        }

        .banner-text {
            padding-block-end: 48px;

            h1 {
                /*font-size: ;*/
                max-width: 500px;
                margin-bottom: 0;
            }
        }

        .breadcrumb + .container-medium {
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 30px;
        }

        .banner-button {
            z-index: 2;
            padding-block-end: 48px;

            .button {
                &:after {
                    right: unset;
                    left: 6px;
                    rotate: 180deg;
                    top: 5px;
                    transform: translateY(0) scale(0);
                }

                &:hover, &:focus {
                    &:after {
                        transform: translateY(0) scale(1);
                    }

                    span {
                        transform: translateX(17px);
                    }
                }
            }
        }
    }

    &.small-image {
        .banner-holder {
            min-height: 413px;
        }

        .banner-bg {
            &:before {
                background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(29, 46, 69, 0.55) 100%);
                opacity: 1;
            }
        }

        .banner-text {
            padding-block-end: 48px;

            h1 {
                /*font-size: ;*/
                max-width: 500px;
                margin-bottom: 0;
            }
        }

        .breadcrumb + .container-medium {
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 30px;

            @media (max-width: 768px) {
                flex-direction: column;
                align-items: unset;
                gap: 0;
            }
        }

        .banner-button {
            z-index: 2;
            padding-block-end: 48px;

            .button {
                &:after {
                    right: unset;
                    left: 6px;
                    rotate: 180deg;
                    top: 5px;
                    transform: translateY(0) scale(0);
                }

                &:hover, &:focus {
                    &:after {
                        transform: translateY(0) scale(1);
                    }

                    span {
                        transform: translateX(17px);
                    }
                }
            }
        }
    }
}

.breadcrumb {
    padding-top: 139px;
    z-index: 1;
    @media (max-width: 768px) {
        padding-top: 80px;
    }
    nav {
        ul {
            list-style: none;
            display: flex;
            gap: 34px;

            li {
                position: relative;

                &:before {
                    content: '';
                    height: 100%;
                    width: 1px;
                    background-color: rgba(255, 255, 255, 0.14);
                    position: absolute;
                    top: 0;
                    left: -16px;
                }

                &:first-child:before {
                    display: none;
                }
            }

            a {
                font-size: 1rem;
                font-family: var(--font-strawford);
                color: var(--color-white);
                font-weight: 400;
                text-decoration: none;

                &:hover, &:focus {
                    text-decoration: underline;
                }
            }

            span {
                font-size: 1rem;
                font-family: var(--font-strawford);
                color: var(--color-white);
                font-weight: 700;
            }
        }
    }
}

.page-intro {
    margin-block: 92px;
    gap: 25px;
    display: flex;

    @media (max-width: 767px) {
        flex-wrap: wrap;
        margin-block: 30px;
    }

    .content-heading {
        max-width: 532px;
        width: 100%;

    }

    .content-info {
        max-width: 632px;
        width: 100%;
        margin: 0;
        margin-inline-end: 0;

        p {
            line-height: 1.778;
            font-size: 1.125rem;
        }
    }

    + .video-block {
        margin-top: 103px;
        padding-top: 0;
        margin-block-end: 142px;

        @media (max-width: 767px) {
            margin-block: 30px 60px;
        }
    }
}

.banner {
    + .content-block {
        margin-block-start: 87px;
        margin-block-end: 127px;

        @media (max-width: 767px) {
            margin-block: 30px;
        }
    }
}

.insight.text-center {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding-block-start: 27px;
    margin-block-end: 145px;

    @media (max-width: 767px) {
        padding-block-start: 30px;
        margin-block-end: 30px;
    }

    .insight-block {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 416px;
        text-align: center;
    }

    .insight-heading {
        width: 100%;
        margin-bottom: 24px;
    }

    .insight-text {
        width: 100%;
    }
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    width: 100%;
    /*max-width: var(--container-max-width);*/
}

.employee-overview {
    padding-top: 0px;

    .employee-overview-title {

        @media (max-width: 768px) {
            display: block;
        }

        h2 {
            grid-column: 1/6 span;
            line-height: 1.333;
            text-wrap: balance;
            max-width: 432px;

            @media (max-width: 768px) {
                max-width: unset;
                margin-block-end: 25px;
            }

        }

        .text {
            grid-column: 8/3 span;
            font-size: 1.25rem;
            position: relative;
            top: -5px;

            @media (max-width: 1024px) {
                grid-column: 8/5 span;
            }

            p {
                line-height: 1.4;
            }
        }
    }

    .employee-overview-items {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 48px 33px;
        margin-top: 81px;
        margin-bottom: 150px;

        @media (max-width: 1024px) {
            grid-template-columns: 1fr 1fr;
            margin-block: 50px;
        }

        @media (max-width: 480px) {
            grid-template-columns: 1fr;
            margin-block: 30px;
        }

        .employee-overview-item {
            display: flex;
            flex-direction: column;
            transform: scale(1);
            transition: all 0.3s;
            text-decoration: unset;
            color: #020202;

            &:hover, &:focus {
                transform: scale(0.97);
            }

            .employee-overview-links {
                position: relative;
                margin-bottom: 32px;
                border-radius: 32px;

                ul {
                    list-style: none;
                    position: absolute;
                    display: flex;
                    gap: 20px;
                    right: 15px;
                    bottom: 15px;

                    .footer-linkedin {
                        width: 36px;
                        height: 36px;
                        transform: unset;

                        &:focus, &:hover {
                            transform: unset;
                        }
                    }
                }
            }

            h3 {
                font-size: 1.25rem;
                font-weight: 600;
                margin-bottom: 8px;
            }

            span {
                font-family: var(--font-strawford);
                font-size: 1rem;
            }
        }

        .employee-cta {
            max-height: 486px;
            height: 100%;
            background: linear-gradient(135deg, rgba(18, 30, 46, 1) 0%, rgba(23, 37, 57, 1) 50%, rgba(29, 46, 69, 1) 100%);
            border-radius: 20px;
            padding: 48px 48px 48px 48px;
            transition: unset;
            transform: unset;

            &:hover, &:focus {
                transform: unset;
            }

            h3 {
                color: var(--color-white);
                font-size: 2.25rem;
                font-weight: 600;
                line-height: 1.11;
                margin-bottom: 18px;
            }

            p, ul {
                font-family: var(--font-strawford);
                line-height: 1.5;
                color: rgba(255, 255, 255, 0.8);

            }

            ul {
                margin-top: 12px;
                list-style: none;

                li {
                    position: relative;
                    padding-left: 25px;
                    padding-bottom: 8px;

                    &:before {
                        background-color: rgba(255, 255, 255, 0.1);
                        width: 9px;
                        height: 9px;
                        border-radius: 50%;
                        content: '';
                        position: absolute;
                        top: 8px;
                        left: 0;
                        /*transform: translateY(-50%);*/
                    }
                }
            }

            a.button {
                margin-top: 10px;
                align-self: baseline;
                @media (min-width: 767px) {
                    margin-top: 63px;
                }

            }
        }

    }
}

.logo-block {
    margin-block: 100px 105px;
    @media(max-width: 767px) {
        margin-block: 60px;
    }
    .container-medium {
        display: flex;
        justify-content: space-between;

    }

    .logo-block-container {
        border-radius: 20px;
        border: 1px solid rgba(112, 112, 112, 0.1);
        width: 100%;
        display: flex;

        @media (max-width: 767px) {
            flex-direction: column;
        }

        .text-content {
            max-width: 632px;
            width: 100%;
            padding: 60px 48px 37px 48px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            @media (max-width: 767px) {
                padding: 30px 20px;
            }

            h2, .text {
                max-width: 476px;
            }

            h2 {
                line-height: 1.33;
            }
        }

        .logo-block-holder {
            display: grid;
            grid-template-columns: 1fr 1fr;
            max-width: 648px;
            width: 100%;

            @media (max-width: 768px) {
                max-width: unset;
            }

            .swiper-slide {
                display: flex;
                justify-content: center;
                align-items: center;
                border-left: 1px solid rgb(112, 112, 112, .1);
                border-bottom: 1px solid rgb(112, 112, 112, .1);

                @media (max-width: 768px) {
                    margin-bottom: 25px;
                    &:nth-child(1), &:nth-child(2) {
                        border-top: 1px solid rgb(112, 112, 112, .1);
                    }

                    &:nth-child(odd) {
                        border-right: 1px solid rgb(112, 112, 112, .1);
                    }
                }

                @media (max-width: 420px) {
                    img {
                        width: 60%;
                    }
                }
            }

            /*.logo-block-slider {*/
            /*    width: 100%;*/

            /*    .swiper-slide {*/
            /*        display: flex;*/
            /*        justify-content: center;*/
            /*        align-items: center;*/
            /*        width: 100% !important;*/
            /*        height: 192px;*/
            /*    }*/
            /*}*/
        }
    }
}

.small-banner {
    padding-block: 20px 8px;
    padding-inline: 8px;
    position: relative;

    .container-medium {
        width: 100%;
        display: flex;
        justify-content: space-between;

        @media (max-width: 767px) {
            gap: 25px;
            flex-wrap: wrap;
        }

        @media (max-width: 480px) {
            flex-direction: column-reverse;
        }
    }

    .small-banner-holder {
        position: relative;
        display: flex;
        /*flex-direction: column;*/
        /*align-items: flex-end;*/
        justify-content: space-between;
        max-width: unset;
        /*min-height: 511px;*/
        border-radius: 20px;
        overflow: hidden;
        background: linear-gradient(135deg, rgba(18, 30, 46, 1) 0%, rgba(23, 37, 57, 1) 50%, rgba(29, 46, 69, 1) 100%);
        padding-block: 141px 40px;
        @media (max-width: 768px) {
            padding-block: 80px 40px;
        }
    }

    h1 {
        color: var(--color-white);
    }

    .breadcrumb {
        padding-top: 6px;
    }


    + .content-block {
        @media (min-width: 1024px) {
            margin-block-start: 66px;
            margin-block-end: 120px;
        }
    }
}

.step-block {
    padding-block: 0 22px;

    .container-medium {
        display: flex;
        justify-content: space-between;
        gap: 48px;
        width: 100%;
    }

    .progress-bar {
        border-radius: 20px;
        border: 1px solid rgba(112, 112, 112, 0.1);
        padding: 21px 39px 32px 38px;
        position: relative;
        max-width: 168px;
        width: 100%;

        @media (max-width: 767px) {
            display: none;
        }

        .week {
            padding-block: 10px;
            background-color: var(--color-white);
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;

            span {
                display: block;
                background-color: var(--color-secondary-green-variant);
                color: var(--color-white);
                font-family: var(--font-strawford);
                font-weight: 500;
                font-size: 1rem;
                text-align: center;
                border-radius: 23px;
                line-height: 1;
                padding: 7.5px 20px;
            }
        }

        .bar {
            width: 4px;
            height: calc(100% - 64px);
            background-color: rgba(112, 112, 112, 0.1);
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            z-index: -1;
        }

        .bar-filler {
            background-color: var(--color-secondary-green-variant);
            width: 100%;
            height: 3%;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 23px;
        }
    }

    .step-block-holder {
        display: flex;
        gap: 38px;
        flex-direction: column;

        @media (max-width: 767px) {
            width: 100%;
        }

        .step-block-item {
            border-radius: 20px;
            border: 1px solid rgba(112, 112, 112, 0.1);
            padding: 32px 32px 32px 48px;
            position: relative;
            display: flex;
            gap: 69px;

            @media (max-width: 1200px) {
                gap: 30px;
            }

            @media (max-width: 767px) {
                flex-direction: column;
                gap: 30px;
                padding: 20px;
            }

            .step-block-text {
                max-width: 426px;
                padding-block: 18px;

                @media (max-width: 1200px) {
                    width: 100%;
                }

                .week span {
                    display: none;
                    background-color: var(--color-secondary-green-variant);
                    color: var(--color-white);
                    font-family: var(--font-strawford);
                    font-weight: 500;
                    font-size: 1rem;
                    text-align: center;
                    border-radius: 23px;
                    line-height: 1;
                    padding: 7.5px 20px;
                    width: fit-content;
                    margin-bottom: 20px;
                    @media (max-width: 768px) {
                        display: block;
                    }
                }

                &:has(.step-block-logo-slider-container) {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }

                h3 {
                    font-size: 1.56rem;
                    font-weight: 600;
                    margin-bottom: 16px;

                    @media (max-width: 767px) {
                        font-size: 1.2rem;
                    }
                }

                p {
                    font-family: var(--font-strawford);
                    line-height: 1.5;
                    padding-bottom: 23px;
                }

                li {
                    padding-left: 22px;
                    list-style: none;
                    position: relative;
                    font-family: var(--font-strawford);
                    margin-bottom: 10px;

                    &:before {
                        content: '';
                        width: 8px;
                        height: 8px;
                        border-radius: 50%;
                        background-color: var(--color-secondary-green-variant);
                        position: absolute;
                        top: 4px;
                        left: 0;
                    }

                }

                a.button {
                    margin-top: 28px;
                }
            }

            picture {
                line-height: 0;
                display: block;
                border-radius: 10px;
            }

            .price-block {
                position: absolute;
                top: -31px;
                right: -12px;
                width: 117px;
                height: 118px;
                border-radius: 50%;
                background-color: var(--color-secondary-green-variant);
                text-align: center;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                @media (max-width: 767px) {
                    top: -60px;
                }

                &::before {
                    width: 127px;
                    height: 128px;
                    border-radius: 50%;
                    background-color: rgba(76, 216, 143, 0.25);
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    content: '';
                    z-index: -1;
                }

                span {
                    font-size: 0.875rem;
                    font-weight: 500;
                    line-height: 1.4375;
                    color: white;
                    display: block;
                    opacity: 80%;
                    font-family: var(--font-strawford);

                    &.bold {
                        font-weight: 700;
                        font-size: 1.25rem;
                        opacity: 1;
                    }
                }
            }
        }
    }

    .step-block-logo-slider-container {
        h4 {
            font-size: 1rem;
            font-weight: 600;
            line-height: 1.5;
            margin-bottom: 25px;
        }
    }

    .step-block-logo-slider {
        position: relative;
        overflow: hidden;

        &:before {
            content: '';
            height: 100%;
            width: 57px;
            background: linear-gradient(260deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            z-index: 2;
        }

        &:after {
            content: '';
            height: 100%;
            width: 57px;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 2;
        }
    }
}


.vacancies-block {
    padding-block: 30px 100px;

    .vacancies-holder {
        display: grid;
        gap: 15px;
        grid-template-columns: repeat(1, 1fr);

        @media (min-width: 480px) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (min-width: 768px) {
            display: grid;
            gap: 15px;
            grid-template-columns: repeat(3, 1fr);
            max-width: 1270px;
            padding-inline-start: unset;
            padding-inline-end: unset;
        }

        @media (min-width: 1360px) {
            gap: 26px;
            position: relative;
            left: -5px;
        }
    }

    .vacancies-block-item {
        position: relative;
        display: block;
        width: 100%;
        scale: 1;
        transition: all 0.3s;
        text-decoration: none;

        &:hover, &:focus {
            transform: scale(0.97);
        }

        h2 {
            font-size: 1.75rem;
            font-weight: 500;
            line-height: 1.03;
            color: var(--color-white);
            position: absolute;
            left: 40px;
            bottom: 40px;
        }

        .vacancies-arrow {
            width: 46px;
            height: 46px;
            background-color: var(--color-white);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 2;
        }
    }

    .vacancies-block-item-image {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 20px;
        overflow: hidden;

        &::before {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.35;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
            content: '';
            pointer-events: none;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

.file-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-strawford);
    font-weight: 500;
    color: var(--color-black);
    border: 1px solid var(--color-border) !important;
    border-radius: 21px;
    background: transparent;
    margin-block-end: 15px;
    padding-block-start: 12px;
    padding-block-end: 9px;
    padding-inline-end: 48px;
    padding-inline-start: 14px;
    cursor: pointer;
    width: unset;
    margin-block-end: 0;
    font-size: 1rem;

    i {
        rotate: 45deg;
        background-color: red !important;
    }
}

.file-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: baseline;
}


.kennisbank {
    padding-block: 72px 50px;
    scroll-margin-top: 200px;

    .kennisbank-filter {
        display: flex;
        justify-content: space-between;
        gap: 30px;
        flex-wrap: wrap;

        .filter {
            display: flex;
            align-items: center;

            @media (max-width: 768px) {
                flex-direction: column;
                align-items: start;
                gap: 15px;
            }
        }

        label {
            font-family: var(--font-strawford);
            font-weight: 500;
            line-height: 1.18;
            color: var(--color-black);
            padding-right: 24px;
            white-space: nowrap;
        }

        .sort {
            display: flex;
            align-items: center;

            select {
                border-radius: 21px;
                height: auto;
                padding: 12px 40px 12px 24px;
                font-family: var(--font-strawford);
                font-size: 1rem;
                font-weight: 400;
                line-height: 1;
                color: var(--color-black);
                border: 1px solid rgba(112, 112, 112, 0.1);
                appearance: none;
                width: auto;
                max-width: unset;
            }

            .select {
                position: relative;

                &:after {
                    content: '';
                    width: 9px;
                    height: 5px;
                    background: url("/assets/templates/images/icon-select-caret.svg");
                    background-size: contain;
                    position: absolute;
                    top: 50%;
                    right: 24px;
                    transform: translateY(-50%);
                }
            }
        }

        .filter-options {
            display: flex;
            gap: 16px;
            align-items: center;

            @media (max-width: 768px) {
                flex-wrap: wrap;
            }

            label {
                background-color: var(--color-white);
                scale: 1;
                text-decoration: none;
                font-family: var(--font-strawford);
                font-size: 1rem;
                font-weight: 400;
                color: var(--color-black);
                line-height: 1;
                border: 1px solid rgba(112, 112, 112, 0.1);
                padding: 12px 24px 12px 24px;
                border-radius: 21px;
                cursor: pointer;
                transition: .3s all ease;

                &:hover, &:focus {
                    background-color: rgba(29, 46, 69, 0.03);
                    transition: .3s all ease;
                }

                &:has(input:checked) {
                    background-color: var(--color-primary-blue);
                    color: var(--color-white);
                }

                input {
                    appearance: none;
                    width: 0;
                    height: 0;
                    opacity: 0;
                    position: absolute;
                    pointer-events: none;
                    border: unset;
                }
            }
        }
    }

    .kennisbank-overview {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 43px 32px;
        padding-top: 68px;

        @media (max-width: 1024px) {
            grid-template-columns: 1fr 1fr;
        }

        @media (max-width: 600px) {
            grid-template-columns: 1fr;
            gap: 25px;
        }

        .kennisbank-item {
            border-radius: 20px;
            overflow: hidden;
            scale: 1;
            transition: all 0.3s;
            text-decoration: none;


            &:hover, &:focus {
                transform: scale(0.97);
            }

            .kennisbank-item-image {
                position: relative;

                @media (max-width: 600px) {
                    img {
                        width: 100%;
                    }
                }
            }

            .kennisbank-arrow {
                position: absolute;
                bottom: 21px;
                right: 18px;
            }

            .author {
                background-color: var(--color-white);
                padding: 7px 9px 1px 8px;
                border-top-right-radius: 9px;
                position: absolute;
                bottom: 0;
                left: 0;

                picture {
                    line-height: 0;
                    display: block;
                    overflow: hidden;
                    border-radius: 9px;
                }
            }

            .category {
                background-color: var(--color-secondary-green-variant);
                font-size: 0.875rem;
                color: var(--color-white);
                padding: 10px 16px;
                border-radius: 18px;
                display: block;
                line-height: 1;
                margin-bottom: 10px;
                font-family: var(--font-strawford);
                font-weight: 500;
                position: absolute;
                top: 24px;
                left: 24px;
            }

            .kennisbank-item-text {
                padding: 31px 28px 24px;
                background-color: var(--color-white);
                border: 1px solid rgba(112, 112, 112, 0.1);
                border-top: 0;
                border-bottom-left-radius: 20px;
                border-bottom-right-radius: 20px;

                .date {
                    font-size: 1rem;
                    font-family: var(--font-strawford);
                    color: #CCCCCC;
                    margin-bottom: 7px;
                    display: block;
                }

                h2 {
                    font-size: 1.25rem;
                    line-height: 1.3;
                    font-weight: 600;
                    color: #020202;
                }
            }
        }

    }

    .pagination {
        padding-top: 95px;

        @media (max-width: 767px) {
            padding-top: 40px;
        }
    }
}

.pagination {
    display: flex;
    justify-content: space-between;
    gap: 10px;

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        gap: 8px;

        li {

            a, span {
                width: 42px;
                height: 42px;
                border-radius: 50px;
                border: 1px solid rgba(112, 112, 112, 0.1);
                display: flex;
                justify-content: center;
                align-items: center;
                /*cursor: pointer;*/
                transition: all 0.3s;
                background-color: var(--color-white);
                scale: 1;
                text-decoration: none;
                font-family: var(--font-strawford);
                font-size: 1rem;
                font-weight: 400;
                color: var(--color-black);
                line-height: 1;

                &.active {
                    background-color: var(--color-primary-blue);
                    color: var(--color-white);
                }
            }

            a {
                &:hover, &:focus {
                    background-color: rgba(29, 46, 69, 0.03);
                }
            }
        }
    }
}

.pagination-arrow {
    width: 42px;
    height: 42px;
    border-radius: 50px;
    border: 1px solid rgba(112, 112, 112, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
    overflow: hidden;
    background-color: var(--color-white);
    position: relative;
    scale: 1;

    &:hover, &:focus {
        scale: 0.9;
        background-color: var(--color-primary-blue);
    }

    &:before, &:after {
        transition: all 0.3s;
    }

    &.prev {
        &:before {
            content: '';
            width: 14px;
            height: 12px;
            background: url('/assets/templates/images/icon-pagination-arrow-left-black.svg') no-repeat center;
            background-size: contain;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        &:after {
            content: '';
            width: 14px;
            height: 12px;
            background: url('/assets/templates/images/icon-pagination-arrow-left-white.svg') no-repeat center;
            background-size: contain;
            position: absolute;
            left: 150%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        &:hover, &:focus {
            &:before {
                left: -50%;
            }

            &:after {
                left: 50%;
            }
        }
    }

    &.next {
        &:before {
            content: '';
            width: 14px;
            height: 12px;
            background: url('/assets/templates/images/icon-pagination-arrow-right-black.svg') no-repeat center;
            background-size: contain;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        &:after {
            content: '';
            width: 14px;
            height: 12px;
            background: url('/assets/templates/images/icon-pagination-arrow-right-white.svg') no-repeat center;
            background-size: contain;
            position: absolute;
            left: -50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        &:hover, &:focus {
            &:before {
                left: 150%;
            }

            &:after {
                left: 50%;
            }
        }
    }
}


.cta-block {
    margin-block: 50px 100px;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    width: 100%;

    @media(max-width: 767px) {
        margin-block: 50px;
    }

    @media (max-width: 480px) {
        flex-direction: column;
    }

    .cta-block-content {
        background: var(--color-accent);
        padding: 54px 54px 54px 54px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 24px;
        flex: 1 1 auto;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;

        @media (max-width: 767px) {
            padding: 30px;
        }

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

        h2 {
            margin-bottom: 22px;
        }

        p {
            max-width: 471px;
            line-height: 1.5;
        }
    }

    .cta-block-image {
        position: relative;
        /*flex: 1 0 auto;*/

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

        picture {
            > img {
                height: 100%;
                width: 100%;
                object-fit: cover;
            }
        }

        > img {
            position: absolute;
            top: 20px;
            right: 20px;
        }

    }

}

.author-bar {
    padding-block: 17px 0;

    .container {
        border-bottom: 1px solid rgba(112, 112, 112, 0.1);
        padding-bottom: 24px;
    }

    .container-medium {
        display: flex;
        justify-content: space-between;
        width: 100%;
        gap: 30px;

        @media (max-width: 768px) {
            flex-direction: column;
            gap: 15px;
        }
    }

    .author {
        display: flex;
        gap: 17px;
        align-items: center;

        picture {
            line-height: 1;
            display: block;
        }

        span {
            font-size: 1rem;
            font-family: var(--font-strawford);
            color: var(--color-black)
        }
    }

    .info {
        display: flex;
        gap: 49px;
        align-items: center;
    }

    .date {
        font-size: 1rem;
        font-family: var(--font-strawford);
        color: #CCCCCC;
        display: block;
        position: relative;

        &:after {
            content: '';
            background-color: #CCC;
            height: 100%;
            width: 1px;
            right: -24px;
            top: 0;
            position: absolute;
            display: block;
        }
    }

    .category {
        background-color: var(--color-secondary-green-variant);
        font-size: 0.875rem;
        color: var(--color-white);
        padding: 10px 16px;
        border-radius: 18px;
        display: block;
        line-height: 1;
        font-family: var(--font-strawford);
        font-weight: 500;
    }
}

.blog-content {
    padding-block: 74px 138px;

    @media (max-width: 767px) {
        padding-block: 50px;
    }

    .container-medium {
        display: flex;
        justify-content: space-between;
        gap: 30px;
        width: 100%;

        @media (max-width: 767px) {
            flex-direction: column;
        }
    }

    article {
        max-width: 740px;

        p {
            font-family: var(--font-strawford);
            padding-bottom: 19px;

            &:first-child {
                font-weight: 500;
                line-height: 1.7788;
                font-size: 1.125rem;
                padding-bottom: 16px;
            }
        }

        h2 {
            font-size: 1.75rem;
            padding-block: 21px 14px;
            font-weight: 600;
            line-height: 1.714;
            margin-bottom: 0;

            @media (max-width: 767px) {
                font-size: 1.35rem;
            }
        }

        ul {
            margin: 0;
            padding: 0;
            position: relative;

            li {
                padding-left: 26px;
                position: relative;
                list-style: none;
                font-family: var(--font-family);
                font-size: 1rem;
                font-weight: 400;
                line-height: 2;
                color: var(--color-text);
                margin-bottom: 2px;
                font-family: 'Strawford';

                &:before {
                    left: 0;
                    width: 10px;
                    height: 10px;
                    top: 8px;
                    border-radius: 50%;
                    background-color: var(--color-secondary-green);
                    content: '';
                    display: block;
                    position: absolute;
                }
            }
        }
    }

    aside {
        padding-top: 6px;
        max-width: 417px;

        h2 {
            font-size: 1.125rem;
            font-weight: 500;
            line-height: 1.16;
            color: black;
            padding-bottom: 24px;
        }

        .share-list {
            margin-bottom: 48px;

            ul {
                list-style: none;
                display: flex;
                gap: 10px;

                li {
                    a {
                        scale: 1;
                        transition: all 0.3s;
                        display: block;

                        &:hover, &:focus {
                            scale: 0.9;
                        }
                    }

                }
            }
        }

        .other-articles {
            ul {
                list-style: none;
            }
        }
    }
}


.contact-banner {
    padding-bottom: 64px;

    .small-banner-holder {
        flex-direction: column;
        @media(max-width: 480px) {
            padding-block: 80px 40px;
        }
    }

    h1 {
        font-weight: 500;
    }

    picture {
        display: block;
        line-height: 1;
        position: absolute;
        left: 0;
        bottom: 0;
        pointer-events: none;
    }

    .contact {
        padding-top: 54px;
        @media (min-width: 768px) {
            margin-block-end: 23px;
        }

        .contact-left {
            color: var(--color-white);

            p, .contact-links a {
                color: var(--color-white);
            }

            .contact-links a {
                &:hover, &:focus {
                    color: var(--color-secondary-green-variant);
                }
            }
        }

        .contact-right {
            background-color: var(--color-white);

            .form-input {
                margin-bottom: 8px;
            }

            .form-submit {
                margin-block-start: 13px;
            }
        }
    }
}

.ervaringen {
    padding-block: 56px 80px;

    .pagination {
        padding-top: 80px;

        @media (max-width: 767px) {
            padding-top: 40px;
        }
    }

    .rating {
        border-radius: 16px;
        border: 1px solid rgba(112, 112, 112, 0.1);
        padding: 7px 14px 7px 14px;
        display: flex;
        align-items: center;
        background-color: var(--color-white);

        .rating-number {
            margin-left: 3px;
            font-family: var(--font-strawford);
            font-weight: 500;
            line-height: 1.214;
            font-size: 0.875rem;
            width: auto;
        }
    }

    .name {
        border-radius: 16px;
        border: 1px solid rgba(112, 112, 112, 0.1);
        padding: 7px 18px 7px 14px;
        background-color: var(--color-white);
        font-family: var(--font-strawford);
        font-weight: 500;
        line-height: 1.214;
        font-size: 0.875rem;
    }

    .ervaringen-title {
        display: flex;
        gap: 24px;
        align-items: center;
        justify-content: center;
        margin-bottom: 54px;

        @media (max-width: 768px) {
            flex-direction: column;
            gap: 10px;
            text-align: center;
        }

        h2 {
            font-size: 1.25rem;
            font-weight: 600;
            /*line-height: 1.5;*/
        }
    }

    .ervaringen-overview {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .ervaringen-overview-item {
        border: 1px solid rgba(112, 112, 112, 0.1);
        border-radius: 20px;
        display: flex;
        justify-content: space-between;

        @media (max-width: 767px) {
            flex-direction: column;
        }

        .rating {
            padding: 3px 14px 4px 14px;
        }

        .ervaringen-overview-item-image {
            margin: 24px 32px 38px 32px;
            position: relative;
            border-radius: 20px;
            flex: 0 0 auto;

            @media (max-width: 1024px) {
                margin: 20px;
                flex: 1 0 30%;
            }

            @media (max-width: 767px) {
                img {
                    width: 100%;
                }
            }
        }

        .ervaringen-overview-item-image-content-container {
            position: relative;
        }

        .ervaringen-overview-item-image-content {
            position: absolute;
            bottom: 18px;
            left: 16px;
            align-items: baseline;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .ervaringen-overview-item-text {
            max-width: 410px;
            padding-block: 42px 56px;
            position: relative;
            left: -24px;

            @media (max-width: 1200px) {
                left: 0;
            }

            @media (max-width: 1024px) {
                padding-block: 20px;
                padding-inline: 20px;
            }

            @media (max-width: 767px) {
                max-width: unset;
            }

            h2 {
                font-family: var(--font-strawford);
                font-size: 1.125rem;
                font-weight: 500;
                line-height: 1.33;
                margin-bottom: 10px
            }

            blockquote {
                p {
                    font-family: var(--font-strawford);
                    line-height: 1.5;

                    &:not(:last-child) {
                        margin-bottom: 25px;
                    }
                }
            }
        }

        .ervaringen-overview-item-logo {
            border-left: 1px solid rgba(112, 112, 112, 0.1);
            padding-inline: 43px 44px;
            display: flex;
            flex-direction: column;

            @media (max-width: 1024px) {
                padding-inline: 15px;
            }

            @media (max-width: 767px) {
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                border-top: 1px solid rgba(112, 112, 112, 0.1);
                border-left: unset;
                flex-wrap: wrap;
                padding: 15px;
            }

            @media (max-width: 480px) {
                flex-direction: column;
                picture img {
                    border-bottom: 1px solid rgba(112, 112, 112, 0.1);
                    padding-bottom: 35px;
                }
            }

            picture {
                max-width: 220px;
                max-height: 183px;
                height: 50vh;
                width: 100vw;
                display: flex;
                justify-content: center;
                align-items: center;
                border-bottom: 1px solid rgba(112, 112, 112, 0.1);

                @media (max-width: 767px) {
                    border-bottom: unset;
                    /*padding-inline: 15px;*/
                }
            }

            .button-container {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%;
            }
        }

    }
}

.form-input {
    margin-bottom: 16px;
}

.form-input.has-error, .form-input.error {
    label {
        color: red;
    }

    p {
        color: red;
        margin-block: 12px;
    }
}

.form-input label {
    position: relative;
    top: 9px;
    left: 17px;
    font-family: var(--font-strawford);
    font-size: 0.875rem;
    color: var(--color-secondary-green);
    background: var(--color-white);
    padding-block: 5px;
    padding-inline-end: 9px;
    padding-inline-start: 7px;
    padding-block-end: 6px;
}

.form-input.select {
    margin-block-start: 12px;
    margin-block-end: 16px;
}

.form-input.select select {
    color: rgba(0, 0, 0, 0.15);
    appearance: none;
    padding-block-start: 8px;
}

.form-input.textarea textarea {
    height: 175px;
    resize: none;
    padding-block-start: 23px;
}

.form-input.text {
    width: 100%;
    display: block;
    @media (min-width: 767px) {
        width: calc(50% - 15px);
        display: inline-block;

        &:nth-child(odd) {
            margin-left: 12px;
        }

        &:nth-child(even) {
            margin-right: 12px;
        }
    }
}

.form-submit {
    margin-block-start: 32px;
}

.form-submit button {
    border: none;
    cursor: pointer;
}

.form-input textarea {
    padding-top: 15px;
    min-height: 183px;
}

.form-input.upload {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    gap: 15px;

    &:has( + .form-submit) {
        width: calc(50% - 15px);
        margin-right: 12px;
        display: inline-block;

        @media (max-width: 480px) {
            width: 100%;
            margin-right: 0;
        }

        + .form-submit {
            width: calc(50% - 15px);
            margin-left: 12px;
            display: inline-block;

            @media (max-width: 480px) {
                width: 100%;
                margin-left: 0;
            }
        }
    }
}

.form-input.upload .file-up {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: auto;
    font-family: var(--font-strawford);
    font-weight: 500;
    font-size: 1rem;
    color: var(--color-black);
    border: 1px solid var(--color-border);
    border-radius: 21px;
    background: transparent;
    padding-block-start: 12px;
    padding-block-end: 9px;
    padding-inline-end: 48px;
    padding-inline-start: 14px;
    margin-block-end: 15px;
    cursor: pointer;
    top: unset;
    left: 0;
}

.form-input.upload i {
    position: absolute;
    top: 7px;
    right: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 0.688rem;
    color: var(--color-white);
    border-radius: 50%;
    background-color: var(--color-secondary-green);
}

.form-input.upload .input-file {
    position: absolute;
    z-index: -1;
    opacity: 0;
    width: unset;
    height: unset;
    overflow: hidden;
}

.form-input.checkbox {
    margin-block-end: 11px;
    display: flex;
    flex-direction: column;
    gap: 14px;

    label {
        padding-inline-start: 32px;
        position: relative;
        /*display: inline-block;*/
        font-family: var(--font-strawford);
        font-size: 0.875rem;
        display: block;
        color: var(--color-black);
        top: unset;
        left: unset;
        padding-block: 0;
        line-height: 1.43;
    }

    input[type="checkbox"] {
        position: absolute;
        top: -1px;
        left: 0;
    }

    + .form-input.text {
        display: none;
    }

    &:has(label:last-child input[type="checkbox"]:checked) + .form-input.text {
        display: block;
        width: 100%;
    }
}

.form-input.radio {
    margin-block-end: 17px;
    display: flex;
    flex-direction: column;
    gap: 16px;

    label {
        padding-inline-start: 32px;
        position: relative;
        /*display: inline-block;*/
        font-family: var(--font-strawford);
        font-size: 0.875rem;
        display: block;
        color: var(--color-black);
        top: unset;
        left: unset;
        padding-block: 0;
        line-height: 1.43
    }

    input[type="radio"] {
        position: absolute;
        top: -1px;
        left: 0;
    }

    + .form-input.text {
        display: none;
    }

    &:has(label:last-child input[type="radio"]:checked) + .form-input.text {
        display: block;
        width: 100%;
    }
}

.form-step {
    display: none;

    &.step-active {
        display: block;
    }
}

.card-advise-container {
    margin-top: 10px;
    @media (min-width: 1200px) {
        display: none;
    }
}

.template-landingspagina {
    .usp {
        @media (min-width: 1200px) {
            padding-top: 14px;
        }

        + .content-block {
            margin-block-start: 124px;
            margin-block-end: 100px;

            @media (max-width: 1024px) {
                margin-block: 60px;
            }

            @media (max-width: 767px) {
                margin-block: 30px;
            }
        }
    }

    .content-block {
        & .content-info.small-content {
            max-width: 632px;
            margin-inline-end: 0;

            h2 {
                font-size: 1rem;
                margin-bottom: 20px;
            }

            p {
                font-size: 1rem;
                line-height: 1.5;
            }
        }
    }

    .insight {
        + .content-block {
            @media (min-width: 1200px) {
                margin-block-end: 139px;
            }
        }
    }
}

.template-werkwijze {
    @media (min-width: 1200px) {
        .video-block {
            margin-bottom: 142px;
        }
    }
}

.template-vacature-detail {
    @media (min-width: 1200px) {
        .photo-block {
            margin-top: 120px;
        }
    }
}

.template-zoeken {
    .search {
        position: relative;

        input {
            padding-right: 45px;
            height: 42px;
            border-radius: 21px;
        }

        button {
            position: absolute;
            top: 50%;
            right: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 31px;
            height: 31px;
            color: var(--color-white);
            border: 0;
            border-radius: 30px;
            background-color: var(--color-secondary-green);
            transform: translateY(-50%);
        }
    }
}

.template-contact {
    .container-medium {
        z-index: 1;
    }
}

.template-content {
    .blog-content {
        padding-block: 94px 97px;

        @media(width < 1024px) {
            padding-block: 40px 40px;
        }
    }
    .blog-content-text {
        margin: 0 auto;
    }
}

.template-kennisbank-detail .breadcrumb ul li:last-child {
    @media (max-width: 768px) {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        filter: brightness(0) invert(1);
    }
}

.js-logo-slider.swiper-free-mode > .swiper-wrapper, .js-brand-slider.swiper-free-mode > .swiper-wrapper {
    transition-timing-function: linear !important;
}

.grecaptcha-badge { visibility: hidden; opacity: 0; }