@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    box-sizing: border-box;
}

:root {
    --accent-color: #CA5478;
    --font-primary-color: #2D2943;
    --font-secondary-color: #FFFFFF;
    --surface-secondary-color: #F4F5F9;
    --font-checkbox-color: #738CA5;
    --light-border: #F4F5F9;
    --card-back-bg-color: #2D2943;
    --light-bg-color: #FAFAFA;
    --gradient-diagonal: linear-gradient(45deg, #2B2960 0%, #894BB3 100%);
    --black: #0D0D0D;
    --black-transparent-03: rgba(0,0,0,.3);
    --spacer-x1: 1rem;
    --spacer-x025: calc(var(--spacer-x1) * .25);
    --spacer-x05: calc(var(--spacer-x1) * .5);
    --spacer-x075: calc(var(--spacer-x1) * .75);
    --spacer-x2: calc(var(--spacer-x1) * 2);
    --spacer-x3: calc(var(--spacer-x1) * 3);
    --spacer-x4: calc(var(--spacer-x1) * 4);
    --spacer-x6: calc(var(--spacer-x1) * 6);
    --spacer-x8: calc(var(--spacer-x1) * 8);
    --spacer-x12: calc(var(--spacer-x1) * 12);
    --section-margin-btm: var(--spacer-x6);
    --site-margin: var(--spacer-x4);
    --max-width: 1350px;
    --border-radius-border-only: 6px;
    --border-radius: 4px;
    --border-radius-m: 8.41px;
    --border-radius-l: 20px;
    --border-radius-secondary: 16px;
}

html {
    font-size: 18px;
}

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.4;
    color: var(--black);
}

fieldset {
    border: none;
    padding: unset;
}

.site-width {
    margin: 0 auto;
    max-width: var(--max-width);
}

.site-margins {
    margin: 0 var(--site-margin);
}
.color-error {
    color: #DE0000;
}
.color-success {
    color: #00DE09;
}
.flex {
    display: flex;
}

.flex-even {
    display: flex;
}

    .flex-even > * {
        flex: 1;
    }

    .flex-column {
        display: flex;
        flex-direction: column;
    }

    .gap-xs {
        gap: var(--spacer-x05);
    }

    .gap-s {
        gap: var(--spacer-x1);
    }

    .gap-m {
        gap: 2rem;
    }

    .gap-l {
        gap: var(--spacer-x4);
    }


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

.align-items-center {
    align-items: center;
}

.align-items-end {
    align-items: end;
}

.text-align-center {
    text-align: center;
}

.font-bold {
    font-weight: bold;
}

.section-margin-btm {
    margin-bottom: var(--section-margin-btm);
}

.white-border-btn {
    background-color: transparent;
    border: 1px solid var(--font-secondary-color);
    color: var(--font-secondary-color);
    padding: var(--spacer-x05) var(--spacer-x1) var(--spacer-x025) var(--spacer-x1);
    font-weight: 500;
    /*    position: relative;
    top: -.15rem;*/
    border-radius: var(--border-radius-border-only);
}

.light-bg-color {
    background-color: var(--light-bg-color);
}

.surface-secondary-color {
    background-color: var(--surface-secondary-color);
}

.half-width-text {
    width: 60%;
}

.image-and-text {
    display: flex;
    gap: var(--spacer-x1);
}

.image-and-text img {
    width: 40%;
    height: fit-content;
    margin-top: auto;
}

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

.margin-center {
    margin: 0 auto;
}

@media (min-width: 1200.0001px) {
    .solutions-container > div:nth-child(3n+2) {
        position: relative;
        top: var(--spacer-x3);
    }
}

.surface-secondary-color {
    background-color: var(--surface-secondary-color);
}

.header-label {
    color: var(--accent-color);
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: var(--spacer-x1);
}

.image-container > img,
.image-container > video {
    width: 100%;
}

.image-container-with-tab {
    position: relative;
    height: fit-content;
}

    .image-container-with-tab > img {
        display: block;
        border-radius: var(--border-radius);
    }

.image-container .header-logo {
    width: 12rem;
}

.icon {
    width: 1rem;
    /*height: auto;*/
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

    p:not(:last-child) {
        margin-bottom: var(--spacer-x05);
    }

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2;
    margin-bottom: var(--spacer-x1);
}

h1, .big-text-with-images {
    font-size: 3.5rem;
}

h2, .center-text.citat, .case-testimonal-text > span,
h2 > span, .case-testimonal-text {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

a:hover {
    text-decoration: underline;
}

header > nav {
    position: absolute;
    top: 0;
    padding: var(--spacer-x2) var(--site-margin);
    width: 100%;
    max-width: var(--max-width);
    z-index: 1;
}



@media (max-width: 1000px) {
    header > nav {
        padding: var(--spacer-x1) var(--site-margin);
    }
}

@media (min-width: 1200px) {
    header:not(.static) > nav {
        left: 50%;
        transform: translateX(-50%);
    }
}

header > nav ul {
    margin: 0;
    display: flex;
    gap: var(--spacer-x2);
    list-style: none;
}

header > nav > div > div .image-container {
    max-width: 80%;
}

header > nav > div > div:last-child {
    white-space: nowrap;
    align-items: center;
}

header > nav a {
    text-decoration: none;
    color: var(--font-secondary-color);
}

header.no-hero > nav {
    position: relative;
    color: var(--font-primary-color);
}

header.no-hero .white-border-btn {
    border-color: var(--font-primary-color);
    color: var(--font-primary-color);
}

.cases-hero {
    background-color: var(--card-back-bg-color);
    /*padding-bottom: 18rem;*/
}

#menu-icon,
#close-icon {
    width: 2rem;
    display: block;
}

header {
    z-index: 10;
    width: 100%;
}

.sticky {
    position: sticky;
    top: 0;
}

#mobile-header,
#nav-close {
    display: none;
}

#nav-close {
    background-color: var(--accent-color);
    color: var(--color-on-primary);
    padding: var(--spacer-x1) var(--site-margin);
    justify-content: space-between;
}

#mobile-header {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    padding: var(--spacer-x1) var(--site-margin);
    justify-content: space-between;
    top: 0;
    width: 100%;
}

    #mobile-header:not(.static) #mobile-header {
        position: absolute;
    }

#main-nav {
    display: flex;
    justify-content: space-between;
}

    #main-nav ul {
        margin: 0;
        list-style-type: none;
        padding: 0;
    }

    #main-nav > ul {
        display: flex;
        align-items: center;
    }

        #main-nav > ul > li {
            position: relative;
        }

            #main-nav > ul > li > ul {
                position: absolute;
                background-color: #ddd;
            }

.menu-linkedin-link {
    flex: 1;
    align-items: flex-end;
    margin-bottom: 2rem;
    display: none;
}

.menu-linkedin-link img {
    height: 1.4rem;
}

.touch #main-nav > ul > li.active > ul,
.no-touch #main-nav > ul > li.visible > ul {
    display: block;
}

#main-nav > ul ul {
    display: none;
}

#main-nav > ul > li:hover ul.show-child-links {
    display: block;
    border-radius: var(--border-radius);
    background-color: var(--card-back-bg-color);
}

#main-nav > ul ul.show-child-links a {
    padding: var(--spacer-x05);
}

#main-nav > ul ul.show-child-links a:hover {
    background-color: var(--accent-color);
    border-radius: var(--border-radius);
}

#main-nav ul a {
    text-decoration: none;
    display: block;
    white-space: nowrap;
}

    /*.menu-active #main-nav ul a {
    padding: var(--spacer-x1) var(--spacer-x2);
}
*/
    #main-nav ul a.visible,
    #main-nav ul a.active {
        background-color: #aaa;
    }

header.static:not(.no-margin-btm) {
    margin-bottom: calc(var(--section-margin-btm) / 2);
}

    header.static > nav {
        position: static;
    }

html:not(.menu-active) header.static > nav a {
    color: var(--font-primary-color);
}

html:not(.menu-active) header.static .white-border-btn {
    border-color: var(--font-primary-color);
}

@media (max-width: 1000px) {
    #main-nav {
        background-color: var(--card-back-bg-color);
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        transform: translateX(-100%);
        transition: transform .2s ease-in;
        display: block;
        z-index: 2;
        padding: 0;
    }

    #desktop-logo {
        display: none;
    }

    .menu-active #main-nav {
        transform: translateX(0);
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .menu-active .menu-linkedin-link {
        display: flex;
    }

    #mobile-header {
        display: flex;
        align-items: center;
        /*position: absolute;*/
        z-index: 1;
    }

    header:not(.static) #mobile-header {
        position: absolute;
    }

    #nav-close {
        display: block;
        margin-bottom: var(--spacer-x2);
    }

    #main-nav > ul {
        flex-direction: column;
        margin-bottom: auto;
        flex: 1;
    }

        #main-nav > ul > li > ul {
            position: relative;
        }
}

.full-image-container {
    position: relative;
    height: 80vh;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgb(0, 0, 0, 0.5);
    width: 100%;
}

.full-image-container > img,
.full-image-container > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.full-image-text {
    color: var(--font-secondary-color);
    position: absolute;
    top: 50%;
    text-align: center;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: calc(var(--max-width) - var(--spacer-x4));
    width: 55%;
}

    .full-image-text p {
        font-weight: 500;
    }

.full-image-container.text-left .full-image-text {
    text-align: left;
    left: inherit;
    transform: translate(0, -50%);
    top: 55%;
    max-width: calc(var(--max-width) - var(--site-margin) * 2);
    width: 75%;
}

.nav-back-link {
    display: flex;
    gap: var(--spacer-x1);
    align-items: center;
    width: fit-content;
}

    .nav-back-link::before {
        content: "";
        background-image: url('/imagesTemp/left-arrow.svg');
        background-repeat: no-repeat;
        background-size: 100%;
        display: block;
        width: 2rem;
        height: 1rem;
    }

    .nav-back-link,
    .nav-back-link:visited,
    .nav-back-link:hover {
        margin-bottom: var(--spacer-x2);
        color: var(--font-secondary-color);
        text-decoration: none;
    }

.about-section {
    gap: var(--spacer-x8);
    margin-bottom: var(--spacer-x3);
}

    .about-section h2 {
        margin-bottom: 0;
    }

    .about-section > div {
        width: 50%;
    }

    .about-section > p {
        width: 50%;
    }

.about-section-media > img,
.about-section-media > video {
    border-radius: var(--border-radius);
}

.solution-section > div:first-child,
.collaborators-section > div:first-child {
    width: 65%;
    margin-bottom: var(--spacer-x3);
}

.solutions-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacer-x1);
}

.solution {
    background-repeat: no-repeat;
    width: 100%;
    color: var(--font-secondary-color);
    background-size: 100%;
    background-position: center center;
}

    .solution > div {
        width: 100%;
        position: relative;
        padding-bottom: 100%;
    }

        .solution > div > p {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            font-weight: bold;
        }

    .solution a {
        text-decoration: none;
        color: var(--font-secondary-color);
    }

    .solution p {
        padding: var(--spacer-x1);
    }

@media screen and (max-width: 1200px) {
    .solutions-container {
        grid-template-columns: 1fr 1fr;
    }

    .solution-section > div:first-child {
        margin-bottom: var(--spacer-x2);
    }

    .panel .back {
        padding: var(--spacer-x4) var(--spacer-x2);
    }

    .solutions-container > a:nth-child(3n+2) {
        position: inherit;
    }

    .back-title {
        font-size: 1.1rem;
    }

    .panel .back p {
        font-size: 1rem;
    }
}

@media screen and (max-width: 1000px) {
    .panel .back {
        padding: var(--spacer-x3) var(--spacer-x2);
    }
}

@media screen and (max-width: 950px) {
    .back-title {
        font-size: 1rem;
    }

    .panel .back p {
        font-size: .9rem;
    }
}

@media screen and (max-width: 875px) {
    .panel .back {
        padding: var(--spacer-x2) var(--spacer-x1);
    }
}

.collaborators {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--spacer-x4);
    width: 90%;
    margin: 0 auto;
    align-items: center;
}

.collaborators-section > div:first-child {
    padding-top: var(--spacer-x3);
}

.collaborators img {
    filter: grayscale(100%);
    transition: filter .2s ease;
}

.collaborators img:hover {
    filter: unset;
}

html {
    scroll-behavior: smooth;
}

.contact-section {
    padding: var(--spacer-x4) 0;
}

    .contact-section > div:first-child {
        width: 60%;
        margin: 0 auto;
        margin-bottom: var(--spacer-x3);
    }

input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 1.2rem;
    width: 1.2rem;
    border: none;
    background-color: transparent;
    transition: background .15s ease-in-out;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../design/checkbox-standard.svg);
}

input[type="checkbox"]:hover {
    background-image: url(../design/checkbox-hover.svg);
}

input[type="checkbox"]:checked {
    background-image: url(../design/checkbox-checked.svg);
}

.price-calculator-checkbox input[type="checkbox"] {
    width: 1.3rem;
    height: 1.3rem;
    border: 1px solid white;
    border-radius: 4px;
    background: unset;
}

.price-calculator-checkbox input[type="checkbox"]:hover {
    background-color: white;
}

.price-calculator-checkbox input[type="checkbox"]:checked {
    background-color: white;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../design/checkbox-checked-V2.svg);
}

.login-form input[type=text],
.login-form input[type=password] {
    border: 1px solid #8f8f8f;
}

.form-text.field-validation-error {
    font-size: .8rem;
}

.login-form > form {
    display: grid;
    gap: 1rem;
}

.login-form button[type=submit] {
    width: fit-content;
}
/* contact form */
.contact-form {
    width: 90%;
    margin: 0 auto;
}

.umbraco-forms-field-wrapper button,
.umbraco-forms-field-wrapper input[type=submit] {
    -webkit-appearance: none;
    background-color: var(--accent-color);
    color: var(--font-secondary-color);
    font-weight: 400;
    padding: var(--spacer-x075) var(--spacer-x4);
    cursor: pointer;
    font-size: 1.1rem;
    border: none;
    border-radius: var(--border-radius);
    transition: all 200ms cubic-bezier(0.480, -0.600, 0.535, 1.650);
    transform: scale(1);
}

    .umbraco-forms-field-wrapper button:disabled,
    .umbraco-forms-field-wrapper input[type="submit"]:disabled {
        background-color: #aaa;
        transform: scale(.85);
        cursor: not-allowed;
    }

    .umbraco-forms-field-wrapper div label {
        line-height: normal;
        color: var(--font-checkbox-color);
        font-size: 0.9rem;
        cursor: pointer;
    }

#kontakt .umbraco-forms-field-wrapper input[type=text],
#kontakt .umbraco-forms-field-wrapper input[type=tel],
#kontakt .umbraco-forms-field-wrapper input[type=email],
#kontakt .umbraco-forms-field-wrapper textarea {
    max-width: none !important;
    padding: var(--spacer-x075) var(--spacer-x1) var(--spacer-x05) var(--spacer-x1) !important;
    width: 100% !important;
    border: none !important;
    font-family: 'Hind', sans-serif;
    font-size: 1rem !important;
    font-weight: 500;
    margin: 0 !important;
    margin-top: var(--spacer-x1) !important;
    margin-bottom: 0.2rem !important;
    border-radius: var(--border-radius);
}

.contact-form input::placeholder, .contact-form textarea::placeholder {
    font-weight: 400;
    font-size: 1rem;
}

.contact-form .umbraco-forms-container a {
    color: var(--font-primary-color);
}
.contact-form .umbraco-forms-field.dataconsent {
    margin: var(--spacer-x1) 0 0;
}

.umbraco-forms-field-wrapper textarea {
    -webkit-appearance: none;
    appearance: none;
    height: 250px;
    width: 100%;
    resize: none;
    font-size: 1rem;
}

    .contact-form .confirmation {
        margin: var(--spacer-x05) 0 var(--spacer-x1) 0;
        text-align: center;
    }

    .checkbox-label {
        display: inline-flex;
        gap: var(--spacer-x05);
    }

.contact-form .umbraco-forms-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: var(--spacer-x1);
}

.umbraco-forms-container > div:nth-child(5) {
    display: grid;
    grid-column: 1 / -1;
}

    .umbraco-forms-container > div:nth-child(6) {
        display: grid;
        grid-column: 1 / -1;
        margin: var(--spacer-x05) 0 var(--spacer-x1) 0;
    }

    .umbraco-forms-container > div:nth-child(6) > div {
        display: flex;
        gap: var(--spacer-x05);
        justify-content: center;
        cursor:pointer;
    }

.umbraco-forms-navigation {
    display: grid;
    grid-column: 1 / -1;
    text-align: center;
}

.contact-form.umbraco-forms-form .umbraco-forms-navigation {
    padding: 0;
}


    .contact-form button,
    .contact-form input[type=submit] {
        -webkit-appearance: none;
        background-color: var(--accent-color);
        color: var(--font-secondary-color);
        font-weight: 400;
        padding: var(--spacer-x075) var(--spacer-x4);
        cursor: pointer;
        font-size: 1.1rem;
        border: none;
        border-radius: var(--border-radius);
        transition: all 200ms cubic-bezier(0.480, -0.600, 0.535, 1.650);
        transform: scale(1);
    }

        .contact-form button:disabled,
        .contact-form input[type="submit"]:disabled {
            background-color: #aaa;
            transform: scale(.85);
            cursor: not-allowed;
        }

    .contact-form div label {
        line-height: normal;
        color: var(--font-checkbox-color);
        font-size: 0.9rem;
        cursor: pointer;
    }

    .contact-form input[type=text],
    .contact-form input[type=email],
    .contact-form textarea {
        padding: var(--spacer-x075) var(--spacer-x1) var(--spacer-x05) var(--spacer-x1);
        width: 100%;
        border: none;
        font-family: 'Hind', sans-serif;
        font-size: 1rem;
        font-weight: 500;
        margin: 0;
        margin-top: var(--spacer-x1);
        margin-bottom: 0.2rem;
        border-radius: var(--border-radius);
    }

    .contact-form textarea {
        -webkit-appearance: none;
        appearance: none;
        height: 250px;
        width: 100%;
        resize: none;
        font-size: 1rem;
    }

    .contact-form .confirmation {
        margin: var(--spacer-x05) 0 var(--spacer-x1) 0;
        text-align: center;
    }

.checkbox-label {
    display: inline-flex;
    gap: var(--spacer-x05);
    cursor: pointer;
    font-weight: lighter;
    align-items: center;
}

    .checkbox-label > div {
        white-space: nowrap;
        display: grid;
        place-content: center;
    }

.contact-form-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: var(--spacer-x1);
}

.contact-form a {
    color: var(--black);
}

@media (max-width: 700px) {
    .contact-form-container, .umbraco-forms-container {
        gap: 0;
        display: block;
    }

    .contact-form input[type=text],
    .contact-form input[type=email],
    .contact-form textarea {
        margin-top: var(--spacer-x1);
    }
}

@media (max-width: 500px) {
    .checkbox-label > div {
        white-space: initial;
    }
}

/* case page */
.case-introduction-section {
    gap: var(--spacer-x4);
}

    .case-introduction-section h2 {
        margin-bottom: var(--spacer-x1);
    }

.highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacer-x2);
    background-color: var(--surface-secondary-color);
    padding: var(--spacer-x4);
    box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
    max-width: 996px;
    margin: 0 auto;
}

.highlights h3 {
    grid-column: 1/4;
    text-align: center;
}

    .highlights > div {
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .highlights .header-label {
        font-size: 3rem;
        margin-bottom: 0;
        display: flex;
        justify-content: center;
    }

.block-wrapper {
    position: relative;
}

.block-surface {
    background-color: var(--card-back-bg-color);
    color: var(--font-secondary-color);
    padding: var(--spacer-x4);
    text-align: center;
    position: relative;
}

.block-image-block {
    display: flex;
    margin: 0 var(--spacer-x4);
}

    .block-image-block > div {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .block-image-block > .image-container {
        justify-content: center;
    }

.block-image-text-block {
    padding: var(--spacer-x1);
    flex: 1;
    display: flex;
    align-items: center;
}

    .block-image-text-block:nth-child(2n+1) {
        background-color: var(--surface-secondary-color);
    }

    .block-image-text-block:nth-child(2n+2) {
        background-color: var(--card-back-bg-color);
        color: var(--font-secondary-color);
    }

.block-background {
    background-color: var(--card-back-bg-color);
    width: 100%;
    height: var(--spacer-x12);
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
}

.case-testimonial {
    padding: 0 var(--spacer-x4);
    text-align: center;
}

.case-testimonal-text {
    /*font-size: 3rem;*/
}

    .case-testimonal-text > span,
    h2 > span {
        /*font-size: 3rem;*/
        font-weight: bold;
        color: var(--accent-color);
    }

    h3 > span {
        color: var(--accent-color);
    }

p.case-testimonial-name {
    font-weight: bold;
    margin-bottom: 0;
}

.case-projects-image > img {
    display: block;
}

@media (max-width: 1150px) {
    .block-image-block {
        margin: 0;
    }
}

@media (max-width: 1024px) {
    .block-image-block {
        flex-direction: column;
    }

    .block-image-text-block {
        padding: var(--spacer-x2);
    }

    .highlights {
        grid-template-columns: 1fr;
        gap: var(--spacer-x4);
    }

    .highlights h3 {
        grid-column: 1;
    }

    .case-introduction-section {
        flex-direction: column;
    }

        .case-introduction-section > div {
            width: 100%;
        }

    .case-testimonial {
        padding: var(--spacer-x2);
    }
}

@media (max-width: 768px) {
    .block-surface {
        padding: var(--spacer-x3);
    }

    .case-testimonial {
        padding: var(--spacer-x1);
    }
}

@media (max-width: 480px) {
    .block-surface {
        padding: var(--spacer-x2);
    }

    .block-image-text-block {
        padding: var(--spacer-x1);
    }

    .highlights {
        padding: var(--spacer-x2);
    }
}

/* footer */
footer {
    background: var(--black);
    color: var(--font-secondary-color);
}

    footer a {
        text-decoration: none;
        color: var(--font-secondary-color);
    }

.footer-section {
    gap: var(--spacer-x8);
    padding: var(--spacer-x4) 0;
}

    .footer-section > div:first-child {
        max-width: 40%;
        font-weight: 500;
        font-size: 1.1rem;
    }

        .footer-section > div:first-child .image-container {
            width: 50%;
            display: block;
        }

        .footer-section > div:first-child > *:not(:last-child) {
            margin-bottom: var(--spacer-x1);
        }

    .footer-section .footer-contact-us .image-container {
        width: 1rem;
    }

.footer-section .footer-contact-us nav a {
    text-decoration: none;
    color: var(--font-secondary-color);
    gap: var(--spacer-x05);
    align-items: center;
    font-weight: 500;
    font-size: 1.1rem;
}

.footer-section .footer-contact-us nav address {
    font-style: normal;
}

.footer-section .footer-contact-us nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.footer-section .footer-contact-us nav li:not(:last-child) {
    margin-bottom: var(--spacer-x05);
}

    .footer-links > ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .footer-icon {
        height: 1rem;
    }

    footer .certificate {
        max-height: 4rem;
    }

footer .certificates-wrapper {
    display: flex;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1rem;
}

footer .company-info p {
    margin: 0 0 .25rem 0;
    font-weight: bold;
}

footer .company-info img {
    height: 1.5em;
    width: auto;
}

.panel {
    float: left;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
    font-size: .8em;
    -webkit-perspective: 600px;
    perspective: 600px;
}

    .panel .front {
        float: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 900;
        width: inherit;
        height: inherit;
        box-shadow: 0 1px 5px rgb(0 0 0 / 90%);
        -webkit-transform: rotateX(0) rotateY(0);
        transform: rotateX(0) rotateY(0);
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
        font-size: 1.1rem;
    }

    .panel.flip .front {
        z-index: 900;
        box-shadow: 0 15px 50px rgb(0 0 0 / 20%);
        -webkit-transform: rotateY(179deg);
        transform: rotateY(179deg);
    }

.panel .back {
    float: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 800;
    width: 100%;
    height: 100%;
    -webkit-transform: rotateY(-179deg);
    transform: rotateY(-179deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    background-color: var(--card-back-bg-color);
    color: var(--font-secondary-color);
    padding: var(--spacer-x2) var(--spacer-x1);
    border-radius: var(--border-radius);
}

.panel .back ul {
    list-style: none;
    padding: 0;
    /*margin: 0;*/
}

.panel .back li {
    display: flex;
    gap: 0.5rem;
    margin: .2rem 0;
    align-items: center;
}

.panel .back a.btn {
    font-size: inherit;
}

.panel .back p {
    font-size: .9rem;
}

.panel.flip .back {
    z-index: 1000;
    -webkit-transform: rotateX(0) rotateY(0);
    transform: rotateX(0) rotateY(0);
}

.back-title {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: var(--spacer-x05);
}

.back-card-tab {
    background-color: var(--accent-color);
    width: 33%;
    height: 9%;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0 var(--border-radius) 0 var(--border-radius);
}

.hover.panel .back,
.hover.panel .front article {
    border-radius: var(--border-radius);
}

@media (max-width: 1200px) {
    .panel .back {
        padding: var(--spacer-x3) var(--spacer-x1);
    }
}

@media screen and (max-width: 1000px) {
    h1, .big-text-with-images {
        font-size: 3.5rem;
    }

    .full-image-text {
        width: 70%;
    }

    .footer-section > div:first-child .image-container {
        width: 70%;
    }
    .case-testimonal-text,
    .case-testimonal-text > span {
        font-size: 2.8rem;
    }

    .panel .back p {
        font-size: .8rem;
    }
}

@media (max-width: 900px) {
    .panel .back {
        padding: var(--spacer-x2) var(--spacer-x1);
    }
}

@media screen and (max-width: 850px) {
    header > nav > div > div .image-container {
        max-width: 80%;
    }

    html,
    .contact-form input[type=text], .contact-form input[type=email], .contact-form textarea {
        font-size: 2vw;
    }

    .about-section {
        gap: var(--spacer-x4);
    }

    .solution-section > div:first-child,
    .collaborators-section > div:first-child,
    .contact-section > div:first-child,
    .contact-form,
    .half-width-text {
        width: 100%;
    }

    .image-and-text {
        flex-direction: column;
    }

    .image-and-text img {
        margin: 0 auto;
    }

        .contact-form input[type="submit"] {
            width: 100%;
        }

            .contact-form input[type="submit"]:disabled {
                transform: scale(.9);
            }

    .collaborators {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .footer-section > div:first-child .image-container {
        width: 80%;
    }

    .footer-section {
        gap: var(--spacer-x4);
    }
}

@media (max-width: 768px) {
    .panel .back p {
        font-size: 1rem;
    }
}

@media screen and (max-width: 750px) {
    .footer-section > div:first-child .image-container {
        width: 100%;
    }

    html {
        font-size: 2.2vw;
    }

    h1, .big-text-with-images {
        font-size: 7vw;
    }

    h2,
    h2 > span {
        font-size: 6vw;
    }

    .case-testimonal-text,
    .case-testimonal-text > span {
        font-size: 5.5vw;
    }

    h3 {
        font-size: 4vw;
    }

}

@media screen and (max-width: 700px) {
    :root {
        --section-margin-btm: var(--spacer-x4);
        --site-margin: var(--spacer-x2);
    }

    html,
    .contact-form input[type=text],
    .contact-form input[type=email],
    .contact-form textarea {
        font-size: 2.7vw;
    }

    .panel .front {
        font-size: 5vw;
    }

    .back-title {
        font-size: 6vw;
    }

    .panel .back p {
        font-size: 2.8vw;
    }

    .panel .back {
        padding: var(--spacer-x6) var(--spacer-x3);
    }

    .site-margins {
        margin: 0 var(--spacer-x2);
    }

    .full-image-text {
        width: 80%;
    }

    .about-section {
        flex-direction: column;
        gap: var(--spacer-x1);
        margin-bottom: var(--spacer-x2);
    }

        .about-section > div,
        .about-section > p {
            width: 100%;
        }

    .solutions-container {
        grid-template-columns: 1fr;
    }

    .collaborators-section > div:first-child,
    .contact-section > div:first-child {
        margin-bottom: var(--spacer-x2);
    }

    .collaborators {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacer-x2);
    }

        .collaborators .image-container {
            padding: var(--spacer-x05) var(--spacer-x2);
        }

    .collaborators-section > div:first-child {
        padding-top: 0;
    }

    .contact-form {
        grid-template-columns: 1fr;
    }

        .contact-form > input {
            grid-column: 1 / 3;
        }

    .footer-section {
        flex-direction: column;
    }

        .footer-section > div:first-child {
            max-width: none;
        }

            .footer-section > div:first-child .image-container {
                max-width: 40%;
            }
}

@media screen and (max-width: 500px) {
    :root {
        --site-margin: var(--spacer-x1);
    }

    html,
    .contact-form input[type=text],
    .contact-form input[type=email],
    .contact-form textarea {
        font-size: 3.4vw;
    }

    h1, .big-text-with-images {
        font-size: 8vw;
    }

    h2,
    h2 > span {
        font-size: 6.5vw;
    }

    .case-testimonal-text,
    .case-testimonal-text > span {
        font-size: 6vw;
    }

    h3 {
        font-size: 5vw;
    }

    .site-margins {
        margin: 0 var(--spacer-x2);
    }

    .full-image-text {
        width: 90%;
    }

    .full-image-container.text-left .full-image-text {
        width: 90%;
    }

    .collaborators .image-container {
        padding: var(--spacer-x05) var(--spacer-x1);
    }

    .footer-section {
        padding: var(--spacer-x2) 0;
    }

    .panel .back {
        padding: var(--spacer-x4) var(--spacer-x3);
    }

    .back-title {
        font-size: 8vw;
    }

    .panel .back p {
        font-size: 3.3vw;
    }
}

@media screen and (max-width: 400px) {
    html {
        font-size: 4.3vw;
    }

    h1, .big-text-with-images {
        font-size: 8.5vw;
    }

    h2,
    h2 > span {
        font-size: 8vw;
    }

    .case-testimonal-text,
    .case-testimonal-text > span {
        font-size: 6.5vw;
    }

    h3 {
        font-size: 6.5vw;
    }

    header > nav > div > div .image-container {
        max-width: 80%;
    }

    .footer-section > div:first-child .image-container {
        max-width: 60%;
    }
    .panel .back {
        padding: var(--spacer-x3) var(--spacer-x2);
    }
    .back-title {
        font-size: 7vw;
    }
    .panel .back p {
        font-size: 4vw;
    }
}

.textpage .site-width {
    margin: 0 auto;
    max-width: var(--max-width);
    padding: 0 var(--spacer-x8) var(--spacer-x8) var(--spacer-x8);
}

.textpage h1 {
    margin-top: var(--spacer-x8);
    margin-bottom: var(--spacer-x1);
}

.textpage h3 {
    margin-top: var(--spacer-x2);
    margin-bottom: var(--spacer-x1);
}

.textpage h4 {
    margin-top: var(--spacer-x2);
}

.textpage a {
    color: var(--font-primary-color);
}

.btn.primary {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--font-secondary-color);
    font-weight: 400;
    padding: var(--spacer-x075) var(--spacer-x4);
    cursor: pointer;
    font-size: 1.1rem;
    border: none;
    border-radius: var(--border-radius);
    text-decoration: none;
    z-index: 1;
    min-width: 14rem;
    text-align: center;
}
.btn.btn-icon {
    display: flex;
    gap: .5rem;
    align-items: center;
    width:fit-content;
    min-width: 5rem;
    white-space: nowrap;
}
.btn:hover {
    text-decoration: none;
}

.btn.btn-s {
    padding: var(--spacer-x05) var(--spacer-x075);
    font-size: .8rem !important;
}

/*.btn.btn-l {
    padding: var(--spacer-x075) var(--spacer-x6);
}*/

.textpage a.btn.primary {
    margin-top: var(--spacer-x2);
}

.umbraco-forms-container a {
    color: #738ca5;
}

.umbraco-forms-submitmessage {
    display: block;
    text-align: center;
}

@media (max-width: 700px) {
    .textpage .site-width {
        margin: 0 auto;
        max-width: var(--max-width);
        padding: 0 var(--spacer-x2) var(--spacer-x8) var(--spacer-x2);
    }
}


/* Job og karriere */

.job-intro {
    text-align: center;
    max-width: 80ch;
    margin: 0 auto;
}

.office-carousel {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    overflow-x: hidden;
}

    .office-carousel img {
        width: 32.5%;
        object-fit: cover;
        border-radius: var(--border-radius);
    }

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-33vw * 3));
    }
}

.slider {
    overflow: hidden;
    position: relative;
}

    .slider .slide-track {
        animation: scroll 25s linear infinite;
        display: flex;
        max-height: 25rem;
        width: calc((33vw + .75rem * 2) * 6);
    }


    .slider .slide img {
        width: 100%;
        object-fit: cover;
        height: 100%;
        display: block;
        border-radius: var(--border-radius);
    }

.slide {
    padding: 0 .75rem;
    width: 33vw;
    flex-shrink: 0;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

.why-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    margin-top: var(--spacer-x3);
    gap: var(--spacer-x3);
}

    .why-list > div {
        display: flex;
        flex-direction: column;
    }

.testimonial-carousel {
    margin-top: var(--spacer-x2);
    display: flex;
    overflow-x: hidden;
}

    .testimonial-carousel > div {
        display: flex;
        transition: .4s transform ease-out;
    }

.testimonial {
    display: flex;
    gap: var(--spacer-x3);
    width: 100%;
    flex: 0 0 100%;
}

@media (max-width: 1024px) {
    .slider .slide-track {
        width: calc((50vw + .75rem * 2) * 6);
    }

    .slide {
        width: 50vw;
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-50vw * 3));
        }
    }
}

@media (max-width: 480px) {
    .slider .slide-track {
        width: calc((75vw + .75rem * 2) * 6);
    }

    .slide {
        width: 75vw;
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-75vw * 3));
        }
    }

    .testimonial-carousel {
        margin-top: var(--spacer-x2);
    }
}

.why-list h3,
.testimonial h3 {
    font-size: 1.3rem;
}

.why-list h3 {
    margin-bottom: var(--spacer-x05);
}

.testimonial .image-container {
    position: relative;
    background-color: var(--surface-secondary-color);
    border-radius: var(--border-radius);
    display: flex;
}

.testimonial img {
    border-radius: var(--border-radius);
    display: block;
    height: 95%;
    object-fit: contain;
    margin-top: auto;
}

.testimonial .back-card-tab {
    width: 6.5rem;
    height: 1.5rem;
}

.testimonial > div:last-of-type > div:first-of-type > p:last-of-type {
    margin-top: var(--spacer-x1);
}

.carousel-arrows {
    display: flex;
    gap: var(--spacer-x2);
    margin-top: var(--spacer-x2);
}

.arrow-icon {
    display: block;
    background-image: url('../design/icon-arrow.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    user-select: none;
}

.arrow-icon-left {
    transform: rotate(180deg);
}

.disabled-arrow {
    opacity: .5;
    cursor: not-allowed;
}

.links-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    max-width: 80%;
    margin: 0 auto;
    margin-top: var(--spacer-x3);
}

    .links-container a {
        text-decoration: none;
        padding: 1.5rem;
        padding-right: calc(1.5rem + 1.5rem + 1rem);
        color: var(--font-primary-color);
        border-bottom: 1px solid var(--black-transparent-03);
        background-image: url('../design/icon-arrow.svg');
        background-repeat: no-repeat;
        background-size: .7rem;
        background-position: right 1.5rem center;
        font-size: 1.1rem;
        font-weight: bold;
        display: flex;
        align-items: center;
    }

        .links-container a:first-of-type {
            border-top: 1px solid var(--black-transparent-03);
        }

@media (max-width: 850px) {
    .why-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonial {
        flex-direction: column;
        gap: var(--spacer-x2);
    }

    .links-container {
        max-width: 100%;
    }
}

@media (max-width: 500px) {
    .why-list {
        display: flex;
        flex-direction: column;
        gap: var(--spacer-x2);
        margin-top: var(--spacer-x2);
    }

    .testimonial {
        gap: var(--spacer-x1);
    }
}

@media (max-width: 480px) {
    .links-container {
        margin-top: var(--spacer-x2);
    }
}

.more-cases {
    overflow-x: hidden;
    position: relative;
}

    .more-cases .case-block {
        /*background-image: url(/imagesTemp/header-image.png);*/
        background-repeat: no-repeat;
        background-size: cover;
        background-color: black;
        color: var(--font-secondary-color);
        padding: var(--spacer-x2);
        border-radius: var(--border-radius);
        min-width: calc((100% - (var(--spacer-x2) * 2)) / 3);
        min-height: 34vw;
        display: flex;
        flex-direction: column;
        position: relative;
        border-radius: var(--border-radius-m);
        transition: transform .2s ease-out;
    }

.more-cases-left-arrow,
.more-cases-right-arrow {
    position: absolute;
    top: 50%;
    left: var(--spacer-x1);
    background-color: rgba(255,255,255,.75);
    padding: var(--spacer-x1);
    border-radius: 50%;
    z-index: 2;
    background-size: .55rem;
    opacity: 0.6;
    transition: opacity .1s ease-in;
}

.more-cases-right-arrow {
    left: unset;
    right: var(--spacer-x1);
}

    .more-cases-left-arrow:hover,
    .more-cases-right-arrow:hover {
        opacity: 1;
    }

.more-cases .case-block > .overlay {
    left: 0;
    border-radius: var(--border-radius-m);
}

.case-teaser-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: var(--spacer-x2);
    display: flex;
    flex-direction: column;
}

.more-cases .btn {
    font-weight: bold;
    margin-top: auto;
    width: fit-content;
}

.more-cases-move {
    display: flex;
    column-gap: var(--spacer-x2);
    transition: transform .2s ease-out;
}

.nav-dots-wrapper {
    display: flex;
    gap: var(--spacer-x1);
    justify-content: center;
    margin-top: var(--spacer-x2);
}
    .nav-dots-wrapper[data-count="3"],
    .nav-dots-wrapper[data-count="2"],
    .nav-dots-wrapper[data-count="1"] {
        display: none;
    }

.nav-dot {
    width: 1rem;
    height: 1rem;
    background-color: var(--surface-secondary-color);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .1s ease-in;
    /*border: 1px solid var(--accent-color);*/
}

    .nav-dot.active {
        background-color: var(--accent-color);
    }

@media (max-width: 1300px) {
    .more-cases .case-block {
        min-width: calc((100% - (var(--spacer-x2) * 1)) / 2);
        min-height: 50vw;
    }
    .nav-dots-wrapper[data-count="3"] {
        display: flex;
    }
}

@media (max-width: 1100px) {
    .more-cases .case-block {
        min-width: calc((100% - (var(--spacer-x2) * 1)) / 2);
        min-height: 50vw;
    }

    .testimonial-carousel-wrapper-lp .case-block {
        min-height: unset;
    }
}

@media (max-width: 768px) {
    .more-cases .case-block {
        min-width: calc(100%);
        min-height: 90vw;
    }

    .testimonial-carousel-wrapper-lp .case-block {
        min-height: unset;
    }

    .nav-dots-wrapper[data-count="2"] {
        display: flex;
    }
}

@media (max-width: 480px) {
    .more-cases .case-block {
        min-height: 110vw;
    }

    .testimonial-carousel-wrapper-lp .case-block {
        min-height: unset;
    }
}

.contact-us-bg-image {
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto 100%;
}

.contact-us-section {
    padding: var(--spacer-x6) 0;
}

.contact-us-text {
    width: 65%;
}

    .contact-us-text > a.btn {
        margin-top: var(--spacer-x2);
    }

@media (max-width: 1024px) {
    .contact-us-bg-image {
        background-position: right -3rem bottom;
        background-size: auto 70%;
    }

    .contact-us-section {
        padding-bottom: 15rem;
    }
}

@media (max-width: 768px) {
    .contact-us-text {
        width: 100%;
    }

    .contact-us-bg-image {
        background-size: auto 55%;
        background-position: right bottom;
    }

    .contact-us-section {
        padding-top: var(--spacer-x4);
        padding-bottom: 20rem;
    }
}

@media (max-width: 400px) {
    .contact-us-bg-image {
        background-size: auto 50%;
    }

    .contact-us-section {
        padding-top: var(--spacer-x2);
        padding-bottom: 30rem;
    }
}

/* reCAPTCHA v3 styles */

.grecaptcha-badge {
    transition: all .3s ease-in-out !important;
    transform: translateX(-29px) scale(0.5);
}

.grecaptcha-badge:hover {
    transform: translateX(0) scale(1);
} 


/* #region - landing page */
:root {
    --calculator-surface-color: #2C2964;
    --calculator-border-radius: 10px;
}
.box-center-surface {
    background-color: var(--calculator-surface-color);
    border-radius: 15px;
    width: 80%;
    padding: 3rem;
    color: var(--font-secondary-color);
    text-align: center;
    margin: 0 auto;
    margin-top: 2rem;
}

.box-center-surface .btn-gradient {
    margin-top: 1rem;
}
.btn-gradient {
    display: inline-block;
    color: var(--font-secondary-color);
    font-weight: 600;
    padding: var(--spacer-x075) var(--spacer-x2);
    cursor: pointer;
    font-size: 1.2rem;
    border: none;
    border-radius: 20px;
    text-decoration: none;
    background: rgb(174,75,130);
    background: linear-gradient(90deg, rgba(174,75,130,1) 0%, rgba(125,58,149,1) 100%);
    transition: background 2s ease-in;
    font-weight: 600;
    text-align: center;
    min-width: 8rem;
    /*line-height: 1.4;*/
}
.btn-gradient:hover {
    background: rgb(202,84,120);
    background: linear-gradient(90deg, rgba(202,84,120,1) 0%, rgba(125,58,149,1) 100%);
}

.btn-secondary {
    background-color: transparent;
    border: 1px solid white;
    padding: var(--spacer-x075) var(--spacer-x2);
    color: var(--font-secondary-color);
    border-radius: 20px;
    cursor: pointer;
    height: 100%;
    font-size: 1.2rem;
    min-width: 8rem;
    /*line-height: 1.4;*/
}

/*.testimonial-carousel-lp {
    margin-top: 0;
}*/

.testimonial-carousel {
    display: block;
    position: relative;
}

.testimonial-carousel-wrapper {
    width: 80%;
    overflow: hidden;
    margin: 0 auto;
}

.testimonial-carousel .case-testimonial {
    min-width: 100%;
}

.testimonial-carousel-lp .arrow-icon {
    background-size: 1.5rem;
    /*background-image: url(/design/icon-arrow-pink.svg);*/
}

.testimonial-carousel .case-block {
    min-width: 100%;
    align-items: center;
    text-align: center;
    background-color: transparent;
    color: var(--font-primary-color);
}

.job-carousel .testimonial {
    transition: transform .2s ease-out;
}

.four-solutions-container {
    grid-template-columns: repeat(4, 1fr);
    margin-top: var(--spacer-x2);
    padding-bottom: var(--spacer-x3);
}

.four-solutions-container .panel {
    box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
    border-radius: var(--border-radius-l);
}

.four-solutions-container .solution {
    border-radius: var(--border-radius-l);
}

.testimonial-carousel-wrapper-lp .case-block {
    padding-top: 0;
    padding-bottom: 0;
    justify-content: center;
    min-height: unset;
}

.testimonial-carousel-lp .arrow-icon {
    top: calc(50% - 3rem);
}

@media (min-width: 1200.0001px){
    .four-solutions-container > div:nth-child(3n+2) {
        top: unset;
    }
}

@media (min-width: 1000.0001px){
    .four-solutions-container > div:nth-child(2n+2) {
        top: var(--spacer-x3);
    }
}
@media (max-width: 1000px) {
    .four-solutions-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .box-center-surface {
        width: 100%;
    }
}

@media (max-width: 768px){
    .box-center-surface {
        padding: 2rem;
    }

    .testimonial-carousel-lp .arrow-icon {
        background-size: 1rem;
    }

    .testimonial-carousel-wrapper-lp .case-block {
        padding: 0 1rem;
    }
}

@media (max-width: 480px){
    .testimonial-carousel-lp .arrow-icon {
        padding: 0;
    }
}

/* #endregion - landing page */

/* #region - cases */
.cases-hero {
    /*height: 100vh;*/
    height: 40rem;
}
.cases-hero.text-left .full-image-text {
    top: 15rem;
}
.cases-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacer-x2);
    margin-top: -6rem;
}

.case-wrapper {
    position: relative;
}

.cases-grid-container > a:nth-child(2n+1) {
    margin-top: -6rem;
}

.case-wrapper h3 {
    font-size: 1.5rem;
}

.case-wrapper .back-card-tab {
    height: 40px;
    border-radius: 0 var(--border-radius-m) 0 var(--border-radius-m);
}

.case-wrapper .overlay {
    background: rgba(0, 0, 0, .3);
    border-radius: var(--border-radius-m);
}
.case-wrapper img {
    width: 100%;
    display: block;
    border-radius: var(--border-radius-m);
}

.case-wrapper-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: var(--font-secondary-color);
    padding: var(--spacer-x1);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
    border-radius: var(--border-radius-m);
}

@media (max-width: 768px) {
    .cases-grid-container {
        grid-template-columns: 1fr;
        margin-top: -12rem;
    }

    .cases-grid-container > a:nth-child(2n+1) {
        margin-top: 0;
    }
}
/* #endregion */

/* #region - Complio */
.flex-even-container {
    display: flex;
    gap: var(--spacer-x4);
}

.flex-even-container.reverse {
    flex-direction: row-reverse;
}

.flex-even-container > * {
    flex: 1;
}

.flex-even-container img {
    display: block;
}

@media (max-width: 1024px){
    .flex-even-container,
    .flex-even-container.reverse {
        flex-direction: column;
        gap: var(--spacer-x2);
    }

    .text-image-block .image-container img {
        width: 80%;
        margin: 0 auto;
        max-height: 25rem;
    }
}

@media (max-width: 600px){
    .text-image-block .image-container img {
        max-height: unset;
    }
}

.margin-top-x2 {
    margin-top: var(--spacer-x2);
}

.block-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
    color: var(--font-secondary-color);
    text-align: center;
    position: relative;
}

.block-grid > * {
    grid-column: 1 / -1;
}

.block-grid .block-surface {
    grid-row: 1 / 3;
    background-color: var(--calculator-surface-color);
}

.block-grid .block-text {
    grid-row: 1 / 2;
    z-index: 2;
    color: var(--font-secondary-color);
    padding: var(--spacer-x4);
}

.block-grid .image-container {
/*    grid-row: 2 / 4;
    max-width: 57rem;
    margin: 0 auto;
    z-index: 3;*/
}

.light-bg-block-list {
    padding: var(--spacer-x4) 0;
    text-align: center;
}

.light-bg-block-list ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: var(--spacer-x1);
    justify-content: space-between;
    margin-top: var(--spacer-x3);
    color: var(--calculator-surface-color);
    font-weight: bold;
}

.light-bg-block-list li {
    display: flex;
    align-items:center;
    gap: var(--spacer-x05);
}

h2 img,
.flex-even-container h2 img {
    display: inline-block;
    vertical-align: middle;
    height: 1em;
    width: fit-content;
}

.text-image-block .image-container img {
    object-fit: scale-down;
    width: 100%;
}
@media (max-width: 1200px) {
    .light-bg-block-list ul {
        grid-template-columns: repeat(2, auto);
        justify-content: center;
        column-gap: var(--spacer-x4);
    }
}

@media (max-width: 768px){
    .light-bg-block-list ul {
        grid-template-columns: 1fr;
        width: fit-content;
        margin: var(--spacer-x2) auto;
    }

    .block-grid .block-text {
        padding: var(--spacer-x2);
    }
}
/* #endregion */

/* #region - new carousel styling */
.text-image-block .carousel {
    max-width: 50%;
}
.carousel-block-wrapper {
    overflow: hidden;
    display: flex;
}
.carousel-block {
    transition: transform .2s ease-out;
    border-radius: var(--border-radius);
}

.carousel-flex-block {
    min-width: 100%;
    display: flex;
    flex-direction: column;
}

.carousel-flex-block .image-container {
    display: grid;
    place-content: center;
    flex: 1;
    width: fit-content;
    margin: 0 auto;
}

.image-caption {
    background-color: var(--calculator-surface-color);
    color: var(--accent-color);
    padding: var(--spacer-x1);
    text-align: center;
    font-weight: bold;
}

@media (max-width: 1024px) {
    .text-image-block .carousel {
        max-width: 100%;
    }
}
/* #endregion */

.box-highlight-item {
    background-color: var(--surface-secondary-color);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    gap: var(--spacer-x05);
    color: var(--calculator-surface-color);
    font-weight: bold;
    font-size: 1.5rem;
    position: relative;
    box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
    width: 100%;
}

.box-highlight-item:not(:last-child) {
    margin-bottom: var(--spacer-x1);
}

.box-highlight-item .back-card-tab {
    width: 3rem;
    height: 1rem;
}

.box-highlight-item:first-child {
    background-color: var(--card-back-bg-color);
    color: var(--font-secondary-color);
}

.box-highlight-item-text {
    margin-left: auto;
    font-weight: normal;
    font-size: 1rem;
    text-align: end;
    margin-bottom: 0 !important;
}

.box-image-highlights {
    grid-row: 2 / 4;
    max-width: 57rem;
    margin: 0 auto;
    z-index: 3;
    display: flex;
}

.block-grid-with-highlights .box-image-highlights > * {
    flex: 1;
}

.block-grid-with-highlights .box-highlight-wrapper {
    margin-right: -3rem;
}

.block-grid-with-highlights .image-container {
    margin-left: -3rem;
}

@media (max-width: 1024px) {
    .block-grid-with-highlights .box-image-highlights {
        flex-direction: column-reverse;
        display: grid;
    }
    .block-grid.block-grid-with-highlights {
        grid-template-rows: repeat(4, auto);
    }

    .block-grid.block-grid-with-highlights .block-surface {
        grid-row: 1 / 5;
    }

    .block-grid-with-highlights .box-image-highlights {
        grid-row: 2 / 6;
    }

    .box-image-highlights .image-container {
        grid-row: 3 / 5;
    }

    .box-image-highlights .box-highlight-wrapper {
        grid-row: 2 / 3;
    }

    .block-grid-with-highlights .box-highlight-wrapper {
        margin: 0 var(--spacer-x4);
    }

    .block-grid-with-highlights .image-container {
        margin: 0 var(--spacer-x4);
        margin-top: var(--spacer-x2);
    }
}

@media (max-width: 768px) {
    .block-grid-with-highlights .box-highlight-wrapper,
    .block-grid-with-highlights .image-container {
        margin: 0 var(--spacer-x2);
    }

    .block-grid-with-highlights .image-container {
        margin-top: var(--spacer-x2);
    }

    .box-highlight-item {
        padding: var(--spacer-x1);
        font-size: 1.3rem;
    }
    .box-highlight-item-text {
        font-size: .9rem;
    }
}

/* #region - about us */
.big-text-with-images {
    width: fit-content;
    margin: 0 auto;
}

.big-text-with-images a {
    display: inline-block;
}

.big-text-with-images img {
    display: inline-block;
    vertical-align: middle;
    height: 1em;
    width: fit-content;
}

.big-text-with-images .bolig-boost-logo {
    max-width: 100%;
}

.big-text-with-images .bolig-boost-logo img {
    width: auto;
}

.big-text-with-images .text {
    margin-left: var(--spacer-x6);
    display: flex;
    flex-wrap: wrap;
    /*width: min-content;*/
}

.testimonial-bg {
    color: var(--font-secondary-color);
    /*padding: var(--spacer-x4) var(--spacer-x2);*/
    background-color: var(--calculator-surface-color);
    overflow: hidden;
}

.testimonial-bg .testimonial-carousel-lp .arrow-icon {
    background-image: url(/design/icon-arrow-pink.svg);
}

.testimonial-bg .more-cases-left-arrow, .more-cases-right-arrow {
    background-color: transparent;
}

.testimonial-bg .testimonial-carousel .case-block {
    color: var(--font-secondary-color);
}

.testimonial-bg .testimonial-carousel {
    margin-top: 0;
}

.testimonial-bg .site-width {
    position: relative;
}

.testimonial-bg .case-testimonial {
    padding: var(--spacer-x4) var(--spacer-x2);
}

.testimonial-bg .bolig-gif {
    position: absolute;
    bottom: -3rem;
    width: 15rem;
    right: 0;
    margin-right: var(--spacer-x1);
}

.bolig-gif img {
    width: 100%;
    display: block;
}

.budskaber {
    position: relative;
    margin-top: var(--spacer-x4);
    counter-reset: number;
}

.budskaber .number {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-content: center;
    border-radius: 50%;
    background-color: var(--accent-color);
    color: var(--font-secondary-color);
}

.budskaber .number::before {
    counter-increment: number;
    content: counter(number);
}

.budskaber .line {
    width: 5px;
    position: absolute;
    background: rgb(202,84,120);
    background: linear-gradient(180deg, rgba(202,84,120,1) 0%, rgba(109,53,156,1) 100%);
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    /*    top: 0;
    bottom: 0;*/
}

.budskab-label-container {
    display: flex;
    gap: var(--spacer-x1);
    align-items: center;
    position: absolute;
    top: 0;
    left: -.5rem;
    transform: translateY(-50%);
}

.budskab {
    display: flex;
    flex-direction: column;
    gap: var(--spacer-x1);
    padding: var(--spacer-x2);
    box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
    border-radius: var(--border-radius-l);
    text-align: center;
    position: relative;
    background-color: white;
    width: 75%;
    margin: 0 auto;
    opacity: 0;
    transition: opacity .5s ease-in;
}

.budskab > h3 {
    font-size: 1.7rem;
}

.budskab.active {
    opacity: 1;
}

.budskab:not(:last-child) {
    margin-bottom: var(--spacer-x4);
}

.budskab .header-label {
    margin-bottom: 0;
}

.budskab:nth-child(2n) .budskab-label-container {
    right: -.5rem;
    flex-direction: row-reverse;
}

.budskab:nth-of-type(2) .header-label {
    color: #A84985;
}
.budskab:nth-of-type(2) .number {
    background-color: #A84985;
}
.budskab:nth-of-type(3) .header-label {
    color: #94418D;
}
.budskab:nth-of-type(3) .number {
    background-color: #94418D;
}
.budskab:nth-of-type(4) .header-label {
    color: #7C3995;
}
.budskab:nth-of-type(4) .number {
    background-color: #7C3995;
}
.budskab:nth-of-type(5) .header-label {
    color: #6D359C;
}
.budskab:nth-of-type(5) .number {
    background-color: #6D359C;
}

.budskab .tags {
    color: var(--calculator-surface-color);
    font-weight: 600;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style-position: inside;
    flex-wrap: wrap;
    font-size: .9rem;
    margin-top: var(--spacer-x1);
}

.budskab .tags li {
    list-style-type: none;
    white-space: nowrap;
}

.budskab .tags li:not(:first-child)::before {
    content: '\2022';
    margin: 0 .5rem;
}

.btn-container {
    margin: 0 auto;
    margin-top: var(--spacer-x4);
    width: fit-content;
}

.team-image img {
    display: block;
    width: 100%;
}

@media (max-width: 1200px) {
    .big-text-with-images .text {
        width: min-content;
    }
}

@media (max-width: 768px) {
    .budskab {
        width: 100%;
    }

    .testimonial-bg .case-testimonial {
        padding-bottom: var(--spacer-x8);
    }

    .big-text-with-images .text {
        margin-left: var(--spacer-x4);
    }
}

@media (max-width: 480px) {
    .testimonial-bg .case-testimonial {
        padding: var(--spacer-x3);
        padding-bottom: var(--spacer-x8);
    }

    .testimonial-bg .bolig-gif {
        width: 13rem;
    }
}
/* #endregion */

.longanswer textarea{
    min-height: 120px;
}

/* #region - enkelte lejem�l */
.flexgap {
    gap: .88rem;
}

.center-container {
    width: 55%;
    margin: 0 auto;
}

.small {
    font-size: 0.888rem;
}

.two--column-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3.333rem;
}

.content-wrapper {
    border-radius: var(--border-radius-m);
    background: white;
    /* baggrund for indhold */
    padding: 3.5rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 1.3333rem;
}

.border-grey {
    border: 2px solid var(--light-border);
}

.border-purple {
    border: 2px solid #2B2960;
}
.section-bg {
    background-color: var(--surface-secondary-color);
}
.section-bg .img-container {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}
.section-bg .img-container img {
    max-width: 24rem;
}
.section-bg .text-content {
    margin-bottom: 1.7rem;
}
.section-bg {
    padding-top: 6rem;
}
.section-bg .flex-even-container {
    gap: var(--spacer-x6);
}
.notice-text {
    font-style: italic;
    font-size: .88rem;
    margin-top: 1.3rem;
}
.btn-primary-box {
    background-color: var(--accent-color);
    color: var(--font-secondary-color);
    padding: 1.5rem 1.7rem;
    font-size: 1.3rem;
    font-weight: bold;
    border-radius: var(--border-radius);
}
.benefits-grid {
    margin-top: 4rem;
    padding-inline: 1rem;
}
.center-text-with-bg {
    position: relative;
    display: grid;
    grid-template-columns: 4rem 1fr 4rem;
    grid-template-rows: 4rem 1fr 4rem;
}
.center-text-with-bg .text-container {
    grid-column: 2;
    grid-row: 2;
    z-index: 2;
    background-color: rgba(244, 245, 249, 0.95);
    padding: 2rem 3rem;
    border-radius: var(--border-radius-m);
    width: fit-content;
    margin: 0 auto;
}
.center-text-with-bg .center-text {
    text-align: left;
}
.center-text-with-bg .image-container {
    grid-column: 1 / 4;
    grid-row: 1 / 4;
    height: 100%;
}
.center-text-with-bg .image-container > img {
    height: 100%;
    object-fit: cover;
}
.center-text-with-bg .back-card-tab {
    width: 8rem;
    height: 1rem;
}
.center-text {
    max-width: 33rem;
    margin: 0 auto;
    text-align: center;
}
.center-text.citat {
    /*font-size: 1.7rem;*/
    max-width: 50ch;
}
.contact-us-section-secondary {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.10);
    border-radius: var(--border-radius-secondary);
    background-color: var(--surface-secondary-color);
    align-items: center;
}
.contact-us-section-secondary > img {
    height: 100%;
    object-fit: cover;
    width: 100%;
    border-top-left-radius: var(--border-radius-secondary);
    border-bottom-left-radius: var(--border-radius-secondary);
}
.contact-us-section-secondary .contact-us-text {
    width: 100%;
    padding: var(--spacer-x4);
}
.btns-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacer-x1);
    margin-top: var(--spacer-x2);
}
.form .header-label {
    text-align: center;
}
.surface-secondary-color.form {
    padding: 5rem 0;
}
.surface-secondary-color.form .site-width {
    max-width: 65rem;
}
.center .full-image-container .full-image-text {
    text-align: center;
    width: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 50rem;
}
.grid-1 {
    display: grid;
    gap: 4rem;
    grid-template-columns: 1fr 1.1fr;
}
@media (max-width: 1024px){
    .contact-us-section-secondary {
        grid-template-columns: 1fr;
    }
    .contact-us-section-secondary > img {
        border-top-right-radius: var(--border-radius-secondary);
        border-bottom-left-radius: 0;
        max-height: 70vh;
    }
}
@media (max-width: 768px){
    .section-bg .flex-even-container {
        gap: var(--spacer-x3);
    }
    .two--column-grid {
        grid-template-columns: 1fr;
        gap: var(--spacer-x2);
    }
    .center-text-with-bg {
        grid-template-columns: 3rem 1fr 3rem;
        grid-template-rows: 3rem 1fr 3rem;
    }
    .center-text-with-bg .text-container {
        padding: 2rem;
    }
    .contact-us-section-secondary .contact-us-text {
        padding: 3rem;
    }
}
@media (max-width: 480px) {
    .center-text-with-bg {
        grid-template-columns: 1rem 1fr 1rem;
        grid-template-rows: 3rem 1fr 3rem;
    }
    .center-text-with-bg .text-container {
        padding: 1rem;
    }
    .contact-us-section-secondary .contact-us-text {
        padding: 2rem;
    }
}
/* #endregion - enkelte lejem�l */