.flex-layout.contact_formulier {
    padding-block: var(--row-padding-top) var(--row-padding-bottom-full);
}

.flex-layout.contact_formulier .pk-grid-container {
    align-items: flex-start;
}

.flex-layout.contact_formulier .contact-cta-col {
    display: flex;
    flex-direction: column;
    gap: max(1rem, calc(1 * var(--su)));
}

.flex-layout.contact_formulier .contact-cta-card {
    border-radius: 16px 0 16px 16px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.10);
    padding: max(1.75rem, calc(2.5 * var(--su)));
    display: flex;
    flex-direction: column;
    gap: max(0.875rem, calc(1 * var(--su)));
}

.flex-layout.contact_formulier .cta-card-socials svg,
.flex-layout.contact_formulier .cta-card-socials path{
    fill:#0A0A44;
}

.flex-layout.contact_formulier .contact-cta-card.variant-yellow {
    background: var(--color-bright-yellow);
    color: #0A0A44 !important;
}
.flex-layout.contact_formulier .contact-cta-card.variant-yellow .cta-card-titel,
.flex-layout.contact_formulier .contact-cta-card.variant-yellow .cta-card-tekst,
.flex-layout.contact_formulier .contact-cta-card.variant-yellow .cta-card-tekst p,
.flex-layout.contact_formulier .contact-cta-card.variant-yellow .cta-card-link,
.flex-layout.contact_formulier .contact-cta-card.variant-yellow .cta-card-socials a {
    color: #0A0A44 !important;
}

.flex-layout.contact_formulier .contact-cta-card.variant-midnight {
    background: var(--color-midnight-blue);
    color: var(--color-icy-white);
}
.flex-layout.contact_formulier .contact-cta-card.variant-midnight .cta-card-titel,
.flex-layout.contact_formulier .contact-cta-card.variant-midnight .cta-card-tekst,
.flex-layout.contact_formulier .contact-cta-card.variant-midnight .cta-card-tekst p,
.flex-layout.contact_formulier .contact-cta-card.variant-midnight .cta-card-socials a {
    color: var(--color-icy-white);
}
.flex-layout.contact_formulier .contact-cta-card.variant-midnight .cta-card-link {
    color: var(--color-bright-yellow);
}

.flex-layout.contact_formulier .contact-cta-card.variant-sky {
    background: var(--color-sky-blue);
    color: #0A0A44 !important;
}
.flex-layout.contact_formulier .contact-cta-card.variant-sky .cta-card-titel,
.flex-layout.contact_formulier .contact-cta-card.variant-sky .cta-card-tekst,
.flex-layout.contact_formulier .contact-cta-card.variant-sky .cta-card-tekst p,
.flex-layout.contact_formulier .contact-cta-card.variant-sky .cta-card-link,
.flex-layout.contact_formulier .contact-cta-card.variant-sky .cta-card-socials a {
    color: #0A0A44 !important;
}

.flex-layout.contact_formulier .cta-card-titel {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.flex-layout.contact_formulier .cta-card-tekst p {
    margin: 0;
    font-size: var(--desktop-body-md);
    font-weight:400;
}

.flex-layout.contact_formulier .cta-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--desktop-body);
    font-weight: 500;
    text-decoration: none;
    transition: gap 0.2s ease;
    margin-top: auto;
}
.flex-layout.contact_formulier .cta-card-link:hover {
    gap: 0.75rem;
}

.flex-layout.contact_formulier .cta-card-socials {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0.875rem;
    flex-wrap: wrap;
}
.flex-layout.contact_formulier .cta-card-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}
.flex-layout.contact_formulier .cta-card-socials a:hover {
    opacity: 0.7;
}
.flex-layout.contact_formulier .cta-card-socials svg {
    width: 22px;
    height: 22px;
    display: block;
}

.flex-layout.contact_formulier .contact-form-card {
    border-radius: 20px;
    border: 1px solid var(--color-midnight-blue-a12);
    background: var(--color-icy-white) !important;
    box-shadow: 4px 4px 24px 0 rgba(0, 0, 0, 0.06);
    padding: max(2rem, calc(3.5 * var(--su)));
    display: flex;
    flex-direction: column;
    gap: max(1rem, calc(1.25 * var(--su)));
}

.flex-layout.contact_formulier .contact-form-card .pk-heading,
.flex-layout.contact_formulier .contact-form-card h1,
.flex-layout.contact_formulier .contact-form-card h2,
.flex-layout.contact_formulier .contact-form-card h3,
.flex-layout.contact_formulier .contact-form-card h4,
.flex-layout.contact_formulier .contact-form-card h5,
.flex-layout.contact_formulier .contact-form-card h6 {
    color: #0A0A44 !important;
}

.flex-layout.contact_formulier .contact-form-card .contact-intro p {
    color: var(--color-midnight-blue-60);
    font-size: max(0.875rem, calc(0.9375 * var(--su)));
    margin: 0;
}

.flex-layout.contact_formulier .gform_wrapper input[type="text"],
.flex-layout.contact_formulier .gform_wrapper input[type="email"],
.flex-layout.contact_formulier .gform_wrapper input[type="tel"],
.flex-layout.contact_formulier .gform_wrapper input[type="url"],
.flex-layout.contact_formulier .gform_wrapper input[type="number"],
.flex-layout.contact_formulier .gform_wrapper input[type="password"],
.flex-layout.contact_formulier .gform_wrapper input[type="search"],
.flex-layout.contact_formulier .gform_wrapper input[type="date"],
.flex-layout.contact_formulier .gform_wrapper select,
.flex-layout.contact_formulier .gform_wrapper textarea {
    border-radius: 6px !important;
    border: 1px solid #0A0A44 !important;
    padding: 12px 10px !important;
    background: var(--color-icy-white) !important;
    color: #0A0A44 !important;
}

.flex-layout.contact_formulier span.gfield_required,
.flex-layout.contact_formulier p.gform_required_legend {
    display: none !important;
}

.flex-layout.contact_formulier .gform_button,
.flex-layout.contact_formulier .gform_next_button,
.flex-layout.contact_formulier .gform_previous_button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5em !important;
    font-size: var(--pk-button-font-size) !important;
    font-family: var(--pk-button-font-family) !important;
    font-weight: var(--pk-button-font-weight) !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    border: 1px solid var(--color-midnight-blue) !important;
    background-color: var(--color-midnight-blue) !important;
    color: var(--Bright-yellow, #EFF757) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}
.flex-layout.contact_formulier .gform_button:hover,
.flex-layout.contact_formulier .gform_next_button:hover,
.flex-layout.contact_formulier .gform_previous_button:hover {
    background-color: var(--color-midnight-blue-80) !important;
    border-color: var(--color-midnight-blue-80) !important;
}

.flex-layout.contact_formulier .gform_wrapper .gfield {
    position: relative;
    height: fit-content;
}
.flex-layout.contact_formulier .gform_wrapper .gfield > label {
    position: absolute;
    left: max(1rem, calc(1 * var(--su)));
    margin-bottom: 0;
    padding-top: 0;
    padding-inline: 0.25em;
    pointer-events: none;
    transition: top 180ms ease-in-out, transform 180ms ease-in-out;
    z-index: 2;
    font-weight: 400;
    background: var(--color-icy-white) !important;
    color: #0A0A44 !important;
}
.flex-layout.contact_formulier .gform_wrapper .gfield:not(.gfield--type-textarea) > label {
    top: 50%;
    transform: translate(0, -50%);
}
.flex-layout.contact_formulier .gform_wrapper .gfield--type-textarea > label {
    top: max(.75rem, calc(.75 * var(--su)));
}
.flex-layout.contact_formulier .gform_wrapper input::placeholder,
.flex-layout.contact_formulier .gform_wrapper textarea::placeholder {
    font-size: 0;
}
.flex-layout.contact_formulier .gform_wrapper .gfield:focus-within > label,
.flex-layout.contact_formulier .gform_wrapper .gfield:has(input:not([type='hidden']):not(:placeholder-shown)) > label,
.flex-layout.contact_formulier .gform_wrapper .gfield:has(option:not(.gf_placeholder):checked) > label,
.flex-layout.contact_formulier .gform_wrapper .gfield:has(textarea):focus-within > label,
.flex-layout.contact_formulier .gform_wrapper .gfield:has(textarea:not(:placeholder-shown)) > label {
    top: 0;
    transform: translate(0, -50%);
}
.flex-layout.contact_formulier .gform_wrapper fieldset .gform-grid-col {
    position: relative;
}
.flex-layout.contact_formulier .gform_wrapper fieldset .gform-grid-col:focus-within label,
.flex-layout.contact_formulier .gform_wrapper fieldset .gform-grid-col:has(input:not(:placeholder-shown)) label {
    top: 0;
    transform: translate(0, -50%);
}

.flex-layout.contact_formulier .gform_wrapper .gfield--type-consent label,
.flex-layout.contact_formulier .gform_wrapper .gfield_checkbox label,
.flex-layout.contact_formulier .gform_wrapper .gfield_radio label {
    position: static;
    transform: none;
    pointer-events: all;
    padding: 0;
    color: #0A0A44 !important;
    font-size: max(0.75rem, calc(0.75 * var(--su)));
}
.flex-layout.contact_formulier .ginput_container.ginput_container_consent {
    display: flex;
    align-items: flex-start;
}

.contact-form-wrap .gform-body * {
    font-family: var(--pk-text-font-family);
}

@media screen and (min-width: 993px) {
.flex-layout.contact_formulier .contact-cta-col{
    margin-right:30%;
}
}


@media screen and (max-width: 992px) {
    .flex-layout.contact_formulier .contact-cta-col,
    .flex-layout.contact_formulier .contact-form-col {
        grid-column: span 8;
    }
    .flex-layout.contact_formulier .contact-form-col {
        order: 1;
    }
    .flex-layout.contact_formulier .contact-cta-col {
        order: 2;
    }
    .flex-layout.contact_formulier .pk-grid-container {
        row-gap: max(2rem, calc(3 * var(--su)));
    }
}

@media screen and (max-width: 767px) {
    .flex-layout.contact_formulier .contact-cta-col,
    .flex-layout.contact_formulier .contact-form-col {
        grid-column: span 5;
    }
    .flex-layout.contact_formulier .pk-grid-container {
        row-gap: max(2rem, calc(2.5 * var(--su)));
    }
}