@import url('assets/fonts/fonts.css');

:root {
    /* === Colors === */

    --Black: #1E1E1E;
    --Green: #2CFF8E;
    --Purple: #B880FF;
    --White: #FFF;
    --Yellow: #FFF946;
    --Stroke-Dark: #6A6A6A;
    --Stroke-Light: #BEBEBE;
    --Off-White: #EEE;


    /* === Font family === */
    --font-primary: "General Sans", sans-serif;
}

body {
    overflow-x: hidden;
}

html {
    overflow-x: hidden;
    background-color: var(--Black);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 100vw;
    margin-left: auto;
    margin-right: auto;
    min-height: 100vh;

    margin-top: 0;
    margin-bottom: 0px;


    /* === Base Typography === */

    .title-S {
        /* Title/S */
        font-family: var(--font-primary);
        font-size: 2rem;
        font-style: normal;
        font-weight: 700;
        line-height: 2.25rem;

        padding: 0;
        margin: 0;

        color: var(--Black);
    }

    .title-M,
    .title-MS {
        /* Title/M */
        font-family: var(--font-primary);
        font-size: 2.75rem;
        font-style: normal;
        font-weight: 700;
        line-height: 2.875rem;

        padding: 0;
        margin: 0;

        color: var(--White);
    }

    .title-L {
        /* Title/L */
        font-family: var(--font-primary);
        font-size: 4rem;
        font-style: normal;
        font-weight: 700;
        line-height: 4rem;
        /* 100% */
        padding: 0;
        margin: 0;

        color: var(--White);
    }

    .title-XL {
        /* Title/XL */
        font-family: var(--font-primary);
        font-size: 6.25rem;
        font-style: normal;
        font-weight: 700;
        line-height: 6.25rem;
        padding: 0;
        margin: 0;

        color: var(--White);
    }

    .title-XXL {
        /* Title/XXL */
        font-family: var(--font-primary);
        font-size: 10.625rem;
        font-style: normal;
        font-weight: 700;
        line-height: 10rem;
        padding: 0;
        margin: 0;

        color: var(--Black);
    }

    .body-S {
        /* Body/S */
        font-family: var(--font-primary);
        font-size: 1rem;
        font-style: normal;
        font-weight: 600;
        line-height: 1.375rem;
        padding: 0;
        margin: 0;
    }

    .body-M {
        /* Body/M */
        font-family: var(--font-primary);
        font-size: 1rem;
        font-style: normal;
        font-weight: 600;
        line-height: 1.375rem;
        padding: 0;
        margin: 0;
    }

    .body-L,
    .canvas-cell-text {
        /* Body/L */
        font-family: var(--font-primary);
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 600;
        line-height: 1.375rem;
        padding: 0;
        margin: 0;

        color: var(--White);
    }

    .body-XL {
        /* Body/XL */
        font-family: var(--font-primary);
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 600;
        line-height: 2rem;
        padding: 0;
        margin: 0;
    }

    /* === Extra Wide Typography === */

    @media (min-width: 120rem) {

        .title-XXL {
            font-size: 10.625rem;
            line-height: normal;
            font-weight: 700;
        }

        .title-XL {
            font-size: 7.5rem;
            line-height: 7.5rem;
            font-weight: 700;
        }

        .title-L {
            font-size: 5rem;
            line-height: 5rem;
            font-weight: 700;
        }

        .title-M {
            font-size: 4rem;
            line-height: 4rem;
            font-weight: 700;
        }

        .title-S {
            font-size: 2.75rem;
            line-height: 2.875rem;
            font-weight: 700;
        }

        .body-XL {
            font-size: 2rem;
            line-height: 2.5rem;
            font-weight: 600;
        }

        .body-L {
            font-size: 1.5rem;
            line-height: 2rem;
            font-weight: 600;
        }

        .body-M {
            font-size: 1.5rem;
            line-height: 2rem;
            font-weight: 500;
        }

        .body-S {
            font-size: 1.125rem;
            line-height: 1.5rem;
            font-weight: 600;
        }
    }

    /* === Mobile Typography === */

    @media (max-width: 70rem) {

        .title-XXL {
            font-size: 6.25rem;
            line-height: 6.25rem;
        }

        .title-XL {
            font-size: 2.75rem;
            line-height: 2.875rem;
        }

        .title-L {
            font-size: 2.75rem;
            line-height: 2.875rem;
        }

        .title-M {
            font-size: 2.75rem;
            line-height: 2.875rem;
        }

        .title-S {
            font-size: 1.5rem;
            line-height: 2rem;
            font-weight: 600;
        }

        .body-XL {
            font-size: 1.125rem;
            line-height: 1.375rem;
        }

        .body-L {
            font-size: 1rem;
            line-height: 1.375rem;
        }

        .title-MS {
            font-size: 2rem;
            line-height: 2.25rem;
        }

        .footer-header .title-XL {
            font-size: 2rem;
            line-height: 2.25rem;
        }

        .footer-card .title-S,
        .journey-mode-card .title-S {
            font-size: 1.125rem;
            font-style: normal;
            font-weight: 600;
            line-height: 1.375rem;
        }
    }


    button {
        border: none;
        cursor: pointer;
    }

    .site {
        flex: 1;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    #content {
        flex: 1;
        width: 100%;
    }

    /* === Header === */

    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.25rem 2.5rem;
        color: var(--White);
    }

    .logo {
        display: none;
    }

    .logo img {
        transition: filter 0.3s ease, opacity 0.3s ease;
    }

    /* ========== DESKTOP ========== */
    @media (min-width: 70rem) {

        .header[data-theme="light"] .logo-light:not(.logo-mobile),
        .header[data-theme="dark"] .logo-dark:not(.logo-mobile) {
            display: inline-block;
        }
    }

    /* ========== MOBILE ========== */
    @media (max-width: 70rem) {

        .header[data-theme="light"] .logo-light.logo-mobile,
        .header[data-theme="dark"] .logo-dark.logo-mobile {
            display: inline-block;
        }
    }

    .cta-btn {
        color: var(--Black);
        padding: 0.5rem 0.75rem;
        width: fit-content;
        height: fit-content;
        border-radius: 0.1875rem;
    }


    /* === Landing === */

    .landing-section-wrapper {
        height: 95vh;
        padding: 0 2.5rem 2.5rem 2.5rem;
        display: flex
    }

    /* === Section 1 === */

    .section-container,
    .overlay-container,
    .section-2-container,
    .section-process-main-container {
        gap: 5%;
        padding-top: 8rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex: 1;
    }

    .section_1 .section-container {
        padding-top: 10.5rem;
    }

    .section_1 .section-container .body-XL {
        max-width: 35vw
    }

    .section-left-side {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        height: 100%;
        flex: 1 1 45%;
    }

    .section-journey-right-side,
    .section-risks-right-side,
    .section-right-side {
        width: 40rem;
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        flex: 1 1 45%;
    }

    .section-rocket,
    .section-2-rocket {
        width: 38vw;
        height: auto;
        position: relative;
        overflow: hidden;
    }

    .section-rocket lottie-player {
        width: 100%;
        height: auto;
        display: block;
    }


    .lottie-rocket {
        position: absolute;
        top: 0;
        width: 40vw;
        height: 100%;
    }

    .section-1-text .title-XL {
        max-width: 51vw;
        margin-bottom: 2.5rem;
    }

    .section-1-text .body-XL {
        max-width: 34vw;
    }


    /* === Section The Problem === */

    .label {
        display: inline-flex;
        padding: 0.375rem 1rem 0.5rem 1rem;
        justify-content: center;
        align-items: center;
        gap: 0.625rem;

        border-radius: 3.75rem;

        width: fit-content;
        margin-bottom: 0.75rem;
    }

    .problem-title {
        color: var(--White);
        max-width: 30rem;
    }

    .problem-table,
    .canvas-table {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding-top: 2rem;
        max-width: 35rem;
    }

    .problem-row,
    .canvas-row {
        display: flex;
        align-items: flex-start;
        padding: 1rem;
        border: 1px solid var(--Stroke-Dark, #6A6A6A);
        border-radius: 0.25rem;
        background-color: transparent;
    }

    .problem-row {
        padding: 1rem;
    }

    .problem-row.hovered {
        background-color: var(--Yellow);
    }

    .problem-table-text,
    .canvas-table-text-wrapper p {
        color: var(--Stroke-Dark);
    }

    .problem-row.hovered .problem-table-text,
    .canvas-row.hovered .canvas-table-text-wrapper p {
        color: var(--Black);
    }

    .default-icon,
    .hover-icon {
        width: 1.5rem;
        height: 1.5rem;
        margin-right: 1rem;
        flex-shrink: 0;
        transition: opacity 0.2s ease;
    }

    .hover-icon {
        display: none;
    }

    .problem-row.hovered .default-icon,
    .canvas-row.hovered .default-icon {
        display: none;
    }

    .problem-row.hovered .hover-icon,
    .canvas-row.hovered .hover-icon {
        display: inline;
    }

    .graph-container-desktop,
    .graph-container-mobile {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }

    .graph-container-desktop {
        display: flex;
    }

    .graph-container-mobile {
        display: none;
    }

    .middle-block {
        height: 100%;
        width: 100%;

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .middle-block-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 1rem;

    }

    .middle-block-text p {
        transform: rotate(-90deg);
        white-space: nowrap;
    }

    .graph-block {
        width: 100%;

        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);

        margin: 2rem;
    }

    .graph-block-item {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .axis-label {
        color: var(--Stroke-Dark);
    }

    .axis-label.highlighted {
        color: var(--White);
        transition: color 0.3s ease;
    }

    .quadrant-icon-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .quadrant-icon-wrapper img {
        width: 80%;
        height: 80%;

    }


    .quadrant-icon {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .quadrant-hover-icon {
        display: none;
    }

    .quadrant-default-icon {
        display: block;
    }

    .quadrant-icon-wrapper.hovered .quadrant-default-icon {
        display: none;
    }

    .quadrant-icon-wrapper.hovered .quadrant-hover-icon {
        display: block;
    }

    /* === Section Canvas === */

    .section_canvas {
        flex-direction: column;
        background-color: var(--Black);
        min-height: 50rem;
    }

    .section_canvas .title-M {
        max-width: 30rem
    }

    .section_canvas .body-L {
        max-width: 27rem
    }


    .canvas-row.hovered {
        background-color: var(--Purple);
    }

    .canvas-row img {
        width: 2.5rem;
        height: 2.5rem;
    }

    .canvas-grid-table {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        gap: 0.2rem;
        width: 100%;
        padding: 2rem 0 0 2rem;
        box-sizing: border-box;

        min-height: 0;

    }

    .canvas-grid-column {
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        gap: 0.2rem;
        flex: 1 1 0;
        height: 100%;
    }

    .canvas-grid-cell {
        background-color: var(--Stroke-Dark);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 1rem;
        box-sizing: border-box;
        color: var(--Stroke-Light);
        border-radius: 0.125rem;
        height: 7.8125rem;

    }

    .canvas-grid-cell p {
        color: var(--Stroke-Light);
    }


    .canvas-grid-column.hovered .canvas-grid-cell {
        background-color: var(--Purple);
        color: var(--White);
    }

    .canvas-grid-column.hovered .canvas-grid-cell p {
        background-color: var(--Purple);
        color: var(--White);
    }

    /* === Section Core Process Main === */

    .section-process-main-container {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0%;
        padding-top: 4rem;
    }

    .process-main-header {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .process-main-grid,
    .journey-modes-container,
    .footer-container {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: flex-start;
        box-sizing: border-box;

        min-height: 0;
    }

    .process-main-grid {
        align-items: center;
        flex: 1;
        margin-bottom: 2.5rem;
    }

    .process-main-circle img {
        width: 6rem;
        height: 6rem;
    }

    .process-main-circle {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border-radius: 20rem;
        width: 25%;
        height: auto;
        gap: 1.2rem;
        aspect-ratio: 1/1;
    }

    /* === Section Core Process Single === */

    .fixed-label {
        position: fixed;
        top: 7rem;
        left: 50%;
        transform: translate(-50%, -50%);
    }


    .process-grid {
        display: grid;
        grid-template-columns: 20% 40% 40%;
        padding: 1.5rem 2.5rem;
    }

    .section-process-main-container {
        justify-content: unset;
    }

    .process-middle-section {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: space-between;

        max-width: 27rem;
    }

    .process-middle-section .body-XL {
        margin-bottom: 2rem;
    }

    .process-certainty {
        display: flex;
        justify-content: space-between;
        border-top: 1px solid black;
        padding: 0.5rem 0;
        width: 100%;
    }

    .process-middle-section-icon {
        width: 6rem;
        height: 6rem;
    }

    .node_circle_image {
        width: auto;
        height: 100%;
        aspect-ratio: 1 / 1;
        object-fit: contain;
        display: block;
        max-width: 100%;
    }


    /* === Section Rational Journey === */

    .section-journey-right-side {
        align-items: flex-end;
        width: 60%;
        gap: 2rem;
    }

    .graph-element-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }


    .graph-element-dot {
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 50%;
        display: inline-block;
        background-color: var(--TitleColor);
    }

    .graph-elements-grid {
        display: flex;
        gap: 1.25rem;
    }

    .graph-element {
        display: flex;
        padding: 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        flex: 1 0 0;
        align-self: stretch;

        border-radius: 0.125rem;
        border: 1px solid var(--ActiveColor, var(--Stroke-Dark, #6A6A6A));
    }

    .graph-element-title {
        color: var(--TitleColor, var(--White));
        transition: color 0.2s ease;
    }

    .graph-element.dimmed .graph-element-title {
        color: var(--Stroke-Dark);
    }

    .graph-element.dimmed .graph-element-dot {
        background-color: var(--Stroke-Dark);
    }

    .section_rational_journey_content .section-left-side {
        max-width: 20rem;
    }

    .section_rational_journey_content {
        padding-top: 11rem;
    }

    /* === Section Roles === */

    .section_roles {
        padding-top: 8rem;
        gap: 4rem;
        flex-direction: column;
    }

    .section-roles-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }

    .section-roles-header .title-L {
        max-width: 35rem;
    }


    .section-roles-header .body-XL {
        max-width: 20rem;
    }

    .roles-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        flex: 1;
        scrollbar-width: none;
    }

    .role-card {
        flex: 1 1 0;
        border: 1px solid var(--Stroke-Dark, #6A6A6A);
        padding: 1.875rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: var(--White);
        max-height: 40vh;
    }

    .role-icon {
        width: 60%;
        height: auto;
    }

    .section-risks-image {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-end;
    }

    .risks-image {
        width: 100%;
        height: auto;
    }

    .section-risks-image img {
        max-width: 90%;
    }

    /* === Section Manage Risks === */

    .section_manage_risks .title-M {
        max-width: 28rem
    }

    .section_manage_risks .section-container {
        padding-top: 8rem;
        width: 100%;
    }


    /* === Section Journey Mode === */

    .journey-modes-header {
        max-width: 42rem;
    }

    .journey-mode-card,
    .footer-card {
        padding: 2.5rem;
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 1rem;
        margin: 1rem 0 0 1rem;
        z-index: 1;
        position: relative;
    }

    .journey-mode-card-wrapper,
    .footer-card-wrapper {
        flex: 1 1 0;
        position: relative;
        min-height: 14rem;
        display: flex;
        align-items: flex-end;
    }

    .card-grid-bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 1rem;
        bottom: 1rem;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        z-index: 0;
        pointer-events: none;
    }

    .footer-card {
        background-color: var(--Purple);
    }

    .section_footer .formkit-submit span {
        font-family: var(--font-primary);
        font-size: 1rem;
        font-style: normal;
        font-weight: 600;
        line-height: 1.375rem;
        padding: 0;
        margin: 0;
    }

    .journey-mode-button,
    .footer-button {
        margin-top: auto;
        padding: 0.75rem 1.25rem;
        border: 1px solid var(--Black);
        color: var(--Black);
        cursor: pointer;
        background-color: transparent;
        width: fit-content;
        border-radius: 0.1875rem;
    }

    .footer-button {
        color: var(--White);
        background-color: var(--Black);
    }

    .footer-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .footer-header .title-XL {
        max-width: 60rem;
    }

    .footer-lottie-desktop,
    .footer-lottie-mobile {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    }

    .footer-lottie-mobile {
        display: none;
    }

    .footer-lottie-desktop {
        display: block;
    }

    .section_footer .section-process-main-container {
        padding-top: 11rem;
        z-index: 1;
        gap: 3rem;
        justify-content: center;
    }

    /* === Horizontal Scroll === */

    .horizontal-scroll-inner>* {
        flex: 0 0 100vw;
        max-width: 100vw;
        box-sizing: border-box;
    }

    .horizontal-scroll-wrapper {
        position: relative;
    }

    .horizontal-scroll-inner {
        display: flex;
        align-items: stretch;
        height: 100%;
    }

    .horizontal-slide {
        flex-shrink: 0;
        height: 95vh;
        min-height: 40rem;
        width: 100vw;
    }

    .next-content {
        opacity: 1;
        transform: translateY(30px);
    }

    .footer-subscribe-input {
        padding: 0.5rem 0.75rem;
        align-items: center;
        gap: 0.625rem;
        align-self: stretch;
        color: var(--White);
        border: 1px solid var(--White, #FFF);
        background: transparent;
    }


    .footer-subscribe-input:focus {
        outline: none;
        box-shadow: none;
        border-color: white;
    }

    .footer-card form {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .footer-card .form-cta-btn {
        margin-top: 0;
    }

    .footer-card form p {
        height: fit-content;
        margin: 0;
    }

    .wpcf7-spinner,
    .wpcf7-not-valid-tip,
    .wpcf7-response-output {
        display: none;
    }

    /* === Overlay === */

    .overlay-wrapper {
        position: fixed;
        display: none;
        width: 100vw;
        height: 100vh;
        align-items: center;
        justify-content: center;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;

        background: rgba(30, 30, 30, 0.7);
    }

    .overlay-container {
        opacity: 1;
        max-width: 70%;
        max-height: 90%;
        padding: 5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;

        max-width: fit-content;
        gap: 7.5rem;
    }

    .overlay-form-container {
        display: flex;
        flex-direction: column;
        max-width: 45%;
    }

    .form-cta-btn {
        background-color: var(--Black, #000);
        margin-top: 1.5rem;
        width: 100%;
        box-sizing: border-box;
        padding: 1rem;
        border: none;
        cursor: pointer;
        text-align: center;
        color: var(--White, #fff);
        font-size: 1rem;
        font-family: inherit;
        transition: background-color 0.3s ease;
        appearance: none;
    }



    .close-btn {
        position: absolute;
        top: 2rem;
        right: 5rem;
        padding: 0;
        background: none;
    }

    .form-field {
        margin-top: 0.5rem;
    }

    .form-input {
        all: unset;
        width: 100%;
        height: 2.3rem;
        background: transparent;
        border: 1px solid var(--Black);
        padding: 0.2rem;
        box-sizing: border-box;
    }

    .transition-padding-1,
    .transition-padding-2 {
        height: 700rem;
        width: 100%;
    }

    .transition-padding-3,
    .transition-padding-4 {
        height: 300vh;
        width: 100%;
    }

    .formkit-input {
        background-color: transparent !important;
        color: var(--Black) !important;
        border: 1px solid var(--Black) !important;
    }

    .formkit-submit {
        background-color: var(--Black) !important;
    }

    .formkit-form {
        width: 100% !important;
    }

    .section_footer .formkit-submit {
        flex: none !important;
        margin: 0 !important;
    }

    .section_footer .formkit-fields {
        flex-wrap: nowrap !important;
        margin: 0 !important;
    }

    .section_footer .formkit-form,
    .section_footer .formkit-form [data-style="clean"],
    .section_footer .formkit-field {
        margin: 0 !important;
        padding: 0 !important;
        flex: 1 !important;
    }


    .section_footer .formkit-fields {
        flex: 1 0 0 !important;
        gap: 0.5rem !important;
    }

    .section_footer .formkit-input {
        width: 100% !important;
        border: 1px solid var(--White) !important;
        color: var(--White) !important;
    }


    /* === Extra wide === */

    @media (min-width: 120rem) {


        .header-cta .body-M {
            font-size: 1.25rem;
            line-height: 1.25rem;
            font-weight: 600;
        }

        .horizontal-slide {
            height: 100vh;
        }

        .landing-section-wrapper {
            height: 100vh;

        }

        .transition-padding-3,
        .transition-padding-4 {
            height: 100vh;
        }

        .section-1-text .title-XL {
            max-width: 56rem;
        }

        .section-1-text .body-XL {
            max-width: 38rem;
        }

        .problem-title {
            max-width: 47rem;
            margin-bottom: 4rem;
        }

        .problem-table,
        .canvas-table {
            max-width: 50rem;
        }

        .problem-row,
        .canvas-row {
            max-width: 50rem;
            padding: 1.25rem;
        }

        .section_canvas .title-M {
            max-width: 36rem;
        }

        .section_canvas .body-L {
            max-width: 38rem;
        }

        .process-main-circle img {
            width: 7.5rem;
            height: 7.5rem;
        }

        .process-grid {
            padding-top: 3rem;
        }

        .process-middle-section {
            max-width: 37rem;
        }

        .process-middle-section .body-XL {
            margin-bottom: 4rem;
        }

        .process-middle-section-icon {
            width: 7.5rem;
            height: 7.5rem;
        }

        .section_rational_journey_content .section-left-side {
            max-width: 30rem;
        }

        .section-roles-header .title-L {
            max-width: 40rem;
        }

        .section-roles-header .body-XL {
            max-width: 30rem;
        }

        .section_manage_risks .title-MS {
            max-width: 35rem;
        }

        .journey-modes-header {
            max-width: 60rem;
        }

        .journey-mode-card,
        .footer-card {
            padding: 3.5rem;
        }

        .footer-header .title-XL {
            max-width: 50%;
        }

        .journey-mode-card,
        .footer-card {
            height: 13rem;

        }

        .journey-mode-card-wrapper,
        .footer-card-wrapper {
            min-height: 21rem;
        }

        .graph-container-desktop,
        .graph-container-mobile {
            height: 80%;
        }

        .section_the_problem .section-right-side {
            justify-content: center
        }

        .canvas-grid-table {
            height: 100%;
        }

        .canvas-grid-cell {
            height: 100%;
        }

        .canvas-cell-text {
            font-size: 1.5rem;
        }

        .role-card {
            height: 60%;
            max-height: 60%;
        }

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

        .section_footer .formkit-input,
        .section_footer .formkit-submit span {
            font-size: 1.5rem;
            line-height: 2rem;
            font-weight: 500;
        }

    }

    /* === MOBILE === */

    @media (max-width: 70rem) {

        .lottie-rocket {
            width: 100%;
            height: 100%;
        }

        .section-rocket,
        .section-2-rocket {
            height: 100%;
            width: 100%;
        }

        .section-rocket lottie-player {
            height: inherit;
            max-height: 100%;
        }

        .section_2 {
            display: none;
        }

        .landing-section-wrapper {
            min-height: 95vh;
            height: fit-content;
            padding: 0 1.25rem 4rem 1.25rem;
        }

        .header {
            padding: 1.25rem 1.125rem;
        }

        .section-container {
            flex-direction: column;
            padding-top: 6rem;
        }

        .section-left-side {
            gap: 1rem;
            flex: 0;
        }

        .section_1 .section-container {
            padding-top: 6rem;
        }

        .section_1 .section-container .body-XL {
            max-width: 100%;
        }

        .cta-btn {
            width: 100%;
        }

        .section-1-text .title-XL {
            max-width: 100%;
            margin-bottom: 1rem;
        }

        .section-1 .body-XL {
            max-width: 100%;
        }

        .section-1 .section-container {
            gap: 3rem;
        }

        .section-journey-right-side,
        .section-risks-right-side,
        .section-right-side {
            width: 100%;
        }

        .graph-container-desktop {
            display: none;
        }

        .graph-container-mobile {
            display: flex;
        }

        .problem-table,
        .canvas-table {
            padding-top: 1rem;
            max-width: none;
        }

        .problem-row,
        .canvas-row {
            padding: 0.625rem;
        }

        .canvas-table {
            margin-bottom: 2rem;
        }

        .graph-block {
            margin: 0rem;
            aspect-ratio: 1/1;

        }

        .middle-block {
            padding: 1rem;
        }

        .canvas-grid-table {
            padding: 0.75rem 0 0 0.75rem;
            gap: 0.1rem;

        }

        .canvas-cell-text {
            font-size: 0.75rem;
            line-height: 0.9375rem;
        }

        .canvas-grid-column {
            gap: 0.1rem;

        }

        .canvas-grid-cell {
            height: 3.9175rem;
            padding: 0.5rem;
        }

        .graph-elements-grid {
            flex-direction: column;
        }

        .section-roles-header {
            flex-direction: column;
            gap: 1rem;
        }

        .horizontal-scroll-wrapper {
            padding-bottom: 0rem !important;
        }

        .horizontal-scroll-inner {
            flex-direction: column;
        }

        .section_core_process .label {
            margin-bottom: 0;
        }

        .step-divider {
            display: none;
        }

        .section-process-main-container {
            padding-top: 5rem;
        }

        .process-main-grid {
            margin-bottom: 0;
            padding-top: 0.5rem;
            justify-content: flex-start
        }

        .process-main-circle {
            border-radius: 50rem;
            height: 35%;
            width: auto;
            gap: 0;
            margin-bottom: -2rem;

        }

        .process-main-circle img {
            width: 4rem;
            height: 4rem;
        }

        .process-middle-section {
            max-width: none;
        }

        .process-grid,
        .process-grid-1 {
            display: flex;
            flex-direction: column;
            border-top: 1px solid black;
            padding: 1.5rem 0;
            margin: 0 1.25rem !important;
            border: none;
        }

        .process-grid-1 {
            flex-direction: row;

            gap: 1rem;
        }

        .process-middle-section-icon {
            display: none;
        }

        .node_circle_image {
            width: 100%;
            height: auto;
            margin-top: 2.5rem;
        }

        .process-single-0,
        .process-single-1 {
            margin-bottom: 20rem;
        }

        .next-content {
            padding-top: 4rem !important;
        }

        .roles-grid {
            flex-direction: row;
            flex-wrap: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
            padding: 0 1.25rem 0 1.25rem;
        }

        .role-icon-container {
            flex-grow: 1;
            display: flex;
            align-items: flex-end;
            justify-content: flex-start;
            overflow: hidden;
        }

        .role-icon {
            max-width: 100%;
            max-height: 100%;
            height: auto;
            width: auto;
            object-fit: contain;
            display: block;
        }



        .role-text .title-S {
            font-size: 2rem;
            font-weight: 700;
            line-height: 2.25rem;

            padding-bottom: 1rem;
        }

        .role-text .body-L {
            font-size: 1.125rem;
            font-weight: 600;
            line-height: 1.375rem;
        }

        .role-card {
            padding: 1.5rem;
        }

        .role-icon {
            max-width: 80%;
        }

        .section_roles_wrapper {
            padding: 0 0 4rem 0;
        }

        .section-roles-header-container {
            padding: 0 1.25rem 0 1.25rem
        }

        .role-card {
            min-width: 15rem;
        }

        .section_roles {
            padding-top: 4rem;
            gap: 2.5rem;
            width: 100%;
        }

        .section_manage_risks .section-container {
            padding-top: 6rem;
            width: 100%;
        }

        .section-risks-image {
            width: 100%;
            height: 100%;
            justify-content: center;
        }

        .section-risks-image img {
            width: 100%;
        }

        .process-main-grid,
        .journey-modes-container,
        .footer-container {
            flex-direction: column;
        }

        .journey-modes-container,
        .footer-container {
            align-items: center;
        }

        .journey-mode-card,
        .footer-card {
            padding: 1em;
            margin: 1rem 0 0 0.75rem;
            gap: 0.5rem;
            max-width: 25rem;
        }

        .journey-mode-card-wrapper,
        .footer-card-wrapper {
            min-height: auto;
        }

        .section_footer .formkit-submit span,
        .journey-mode-button,
        .footer-button {
            width: 100%;
            padding: 0.5rem 0.75rem;
        }

        .footer-lottie-mobile {
            display: block;
        }

        .footer-lottie-desktop {
            display: none;
        }

        .section_footer .section-process-main-container {
            padding-top: 6rem;
        }

        .footer-image {
            display: none;
        }

        .role-card {
            max-height: none;
        }

        .close-btn {
            top: 1.5rem;
            right: 1.5rem;
        }

        .overlay-container {
            opacity: 1;
            max-width: 70%;
            max-height: 90%;
            padding: 1.5rem 1.125rem;
            margin: 1.1rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            position: relative;

            max-width: fit-content;
            gap: 1.5rem;
        }

        .overlay-container .body-L {
            margin-bottom: 0.5rem;
        }

        .overlay-image img {
            max-width: 60%;
        }

        .form-field {
            margin-top: none;
        }

        .form-field p {
            margin-top: 0.5rem;
        }

        .overlay-form p {
            padding-top: 0rem;
            margin-top: 0.5rem;
        }

        .form-cta-btn {
            margin-top: 0.5rem;
        }

        .footer-card form {
            flex-direction: column;
            width: 100%;
        }

        .footer-card form input {
            width: 100%;
        }

        .overlay-form-container {
            max-width: 100%;
        }

         .section_footer .formkit-fields {
            flex-direction: column !important;
        }

        .section_footer .formkit-form [data-style="clean"] {
            width: 100% !important;
        }
    }

    /* === Extra Extra wide === */

    @media (min-width: 120rem) {
        .section-risks-image {
            justify-content: center;
        }

        .section-risks-image img {
            max-width: 90%;
        }

        .section-roles-header .title-XL {
            font-size: 6.25rem;
            font-style: normal;
            font-weight: 700;
            line-height: 6.25rem;
        }

        .section_manage_risks .title-MS {
            font-size: 5rem;
            line-height: 5rem;
            max-width: 50rem;

        }
    }
}