.bookADemoHero {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    .background {
        width: 100%;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        display: grid;
        grid-template-columns: 33.33% 33.33% 33.34%;
        grid-template-rows: 1fr;
        z-index: 1;
        overflow: hidden;
        .col {
            height: 100%;
            grid-row: 1;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                width: 1px;
                height: 100%;
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 10%, transparent 100%);
            }
        }
    }
    .container {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 33.33% 33.33% 33.34%;
        grid-template-rows: 20% 5% 75%;
        margin: 0 auto;
        position: relative;
        .section-title-tablet {
            display: none;
            justify-content: space-between;
            .title {
                color: #FFF;
                font-family: 'Manrope';
                font-size: 56px;
                font-style: normal;
                font-weight: 500;
                line-height: 110%; /* 61.6px */
                letter-spacing: -1.12px;
            }
            .description {
                padding-left: 40px;
                padding-right: 40px;
                color: #FFF;
                font-family: 'Manrope';
                font-size: 18px;
                font-style: normal;
                font-weight: 500;
                line-height: 150%; /* 27px */
                max-width: 300px;
                border-left: 2px solid #fff;
            }
        }
        .section-title {
            position: relative;
            z-index: 3;
            width: 100%;
            grid-column: 1;
            grid-row: 1;
            color: #FFF;
            font-family: 'Manrope';
            font-size: 56px;
            font-style: normal;
            font-weight: 500;
            line-height: 110%; /* 61.6px */
            letter-spacing: -1.12px;
            align-self: flex-end;
            margin-left: max(32px, calc((100vw - 1439px) / 2 + 32px));
        }
        .desc {
            position: relative;
            z-index: 3;
            width: 100%;
            grid-column: 3;
            grid-row: 1;
            padding-left: 40px;
            padding-right: 40px;
            align-self: flex-end;
            color: #FFF;
            font-family: 'Manrope';
            font-size: 18px;
            font-style: normal;
            font-weight: 500;
            line-height: 150%; /* 27px */
            max-width: 300px;
            border-left: 2px solid #fff;
        }
        .book-a-demo-form-container {
            //position: relative;
            grid-column: 1/3;
            grid-row: 3;
            margin-left: max(32px, calc((100vw - 1439px) / 2 + 32px));
            background-color: #fff;
            margin-right: 24px;
            padding: 32px;
            height: fit-content;
            z-index: 5;
            .book-a-demo-form {
                width: 100%;
                display: flex;
                flex-direction: column;
                //gap: 32px;
                h2 {
                    color: #474747;
                    font-family: 'Manrope';
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 150%; /* 27px */
                }
                .custom-select-wrapper {
                    position: relative;
                    width: 100%;
                    .custom-select-trigger {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        cursor: pointer;
                        padding-bottom: 8px;
                        border-bottom: 0.5px solid #C2C2C2;
                        .trigger-text {
                            color: #858585;
                            font-family: 'Manrope';
                            font-size: 14px;
                            font-weight: 500;
                            line-height: 130%;
                            letter-spacing: -0.42px;
                            &.has-value {
                                color: #141414;
                            }
                        }
                        svg {
                            flex-shrink: 0;
                            transition: transform 0.2s ease;
                        }
                    }
                    &.open .custom-select-trigger svg {
                        transform: rotate(180deg);
                    }
                    .custom-select-options {
                        display: none;
                        position: absolute;
                        top: calc(100% + 2px);
                        left: 0;
                        width: 100%;
                        background: #fff;
                        border: 1px solid #E2E2E2;
                        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
                        z-index: 50;
                        .custom-option {
                            padding: 7px 8px;
                            cursor: pointer;
                            font-family: 'Manrope';
                            font-size: 14px;
                            font-weight: 500;
                            line-height: 130%;
                            letter-spacing: -0.42px;
                            color: #141414;
                            &:hover {
                                background-color: #F0F5FF;
                            }
                            &.selected {
                                background-color: #F0F5FF;
                            }
                        }
                    }
                    &.open .custom-select-options {
                        display: block;
                    }
                }
                .form-columns-2 {
                    max-width: unset;
                    display: flex;
                    gap: 24px;
                    align-items: flex-start;
                    .hs-form-field {
                        width: 50%;
                        position: relative;
                        margin-bottom: 32px;
                        .input {
                            width: 100%;
                            &.required-field {
                                position: relative;
                                &::before {
                                    content: '*';
                                    color: #ef6b51;
                                    position: absolute;
                                    left: -8px;
                                    bottom: 8px;
                                    font-family: 'Manrope';
                                    font-size: 14px;
                                    font-weight: 500;
                                    visibility: visible;
                                }
                                &.has-value::before {
                                    visibility: hidden;
                                }
                            }
                            input, select, textarea {
                                width: 100%;
                                border: none;
                                outline: none;
                                padding-bottom: 8px;
                                border-bottom: 0.5px solid #C2C2C2;
                                color: #141414;
                                font-family: 'Manrope';
                                font-size: 14px;
                                font-style: normal;
                                font-weight: 500;
                                line-height: 130%;
                                letter-spacing: -0.42px;
                                background-color: #fff;
                                &::placeholder {
                                    color: #858585;
                                }
                            }
                            select {
                                &:invalid {
                                    color: #858585;
                                }
                                option[disabled] {
                                    color: #858585;
                                }
                            }
                            &.focused {
                                input, select, textarea {
                                    border-bottom-color: #1075DC;
                                }
                                .custom-select-trigger {
                                    border-bottom-color: #1075DC;
                                }
                            }
                            &.error-border:not(.focused) {
                                input, textarea {
                                    border-bottom-color: #E32D2D;
                                }
                                .custom-select-trigger {
                                    border-bottom-color: #E32D2D;
                                }
                            }
                        }
                        // .hs-error-placeholder {
                        //     height: 21px;
                        // }
                        .hs-error-msgs {
                            margin-top: 8px;
                            width: 100%;
                            li {
                                list-style-type: none;
                                label {
                                    display: block;
                                    a {
                                        font-size: 10px;
                                        font-family: 'Manrope';
                                        font-style: normal;
                                        font-weight: 400;
                                        line-height: 150%;
                                        color: #E32D2D;
                                    }
                                }
                                .hs-error-msg {
                                    font-size: 10px;
                                    font-family: 'Manrope';
                                    font-style: normal;
                                    font-weight: 400;
                                    line-height: 150%;
                                    color: #E32D2D;
                                }
                            }
                        }
                        label {
                            display: none;
                        }
                    }
                }
                .form-columns-1 {
                    max-width: unset;
                    .hs-form-field {
                        width: 100%;
                        position: relative;
                        margin-bottom: 32px;
                        .input {
                            width: 100%;
                            input, select, textarea {
                                width: 100%;
                                border: none;
                                outline: none;
                                padding-bottom: 8px;
                                border-bottom: 0.5px solid #C2C2C2;
                                color: #141414;
                                font-family: 'Manrope';
                                font-size: 14px;
                                font-style: normal;
                                font-weight: 500;
                                line-height: 130%;
                                letter-spacing: -0.42px;
                                background-color: #fff;
                                &::placeholder {
                                    color: #858585;
                                }
                            }
                        }
                        .hs-error-msgs {
                            li {
                                list-style-type: none;
                                label {
                                    display: block;
                                    a {
                                        font-size: 10px;
                                        font-family: 'Manrope';
                                        font-style: normal;
                                        font-weight: 400;
                                        line-height: 150%;
                                        color: #E32D2D;
                                    }
                                }
                                .hs-error-msg {
                                    font-size: 10px;
                                    font-family: 'Manrope';
                                    font-style: normal;
                                    font-weight: 400;
                                    line-height: 150%;
                                    color: #E32D2D;
                                }
                                
                            }

                        }
                        label {
                            color: #858585;
                            font-family: 'Manrope';
                            font-size: 14px;
                            font-style: normal;
                            font-weight: 500;
                            line-height: 130%; /* 18.2px */
                            letter-spacing: -0.42px;
                            text-transform: capitalize;
                        }
                    }
                }
                .btn_submit_book_call_form {
                    width: 100%;
                    padding: 12px 0;
                    text-align: center;
                    background: #1075DC;
                    color: #FFF;
                    text-align: center;
                    font-family: 'Manrope';
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: 150%; /* 24px */
                    border: none;
                    outline: none;
                    cursor: pointer;
                    &.disabled {
                        opacity: 0.3;
                        background: #1075DC;
                        backdrop-filter: blur(13.5px);
                        cursor: not-allowed;
                    }
                }
                .hs_error_rollup {
                    display: none;
                }
                .hs_recaptcha {
                    margin-bottom: 32px;
                    .grecaptcha-badge {
                        transform: scale(0.75);
                        transform-origin: left top;
                        margin-bottom: -15px;
                    }
                }
                .legal-consent-container {
                    margin-bottom: 10px;
                    .hs-richtext {
                        color: #141414;
                        font-family: "Manrope";
                        font-size: 14px;
                        font-weight: 500;
                        line-height: 130%;
                        a {
                            color: #1075DC;
                        }
                    }
                }
            }
            .submitted-message {
                display: none;
            }
            .form-title {
                color: #474747;
                font-family: 'Manrope';
                font-size: 18px;
                font-style: normal;
                font-weight: 500;
                line-height: 150%; /* 27px */
                margin-bottom: 32px;
            }
        }
        .book-a-demo-thankyou {
            position: relative;
            z-index: 3;
            grid-column: 1/3;
            grid-row: 3;
            margin-left: max(32px, calc((100vw - 1439px) / 2 + 32px));
            background-color: #fff;
            margin-right: 24px;
            padding: 32px;
            height: 500px;
            display: none;
            .top-messsage {
                width: 100%;
                color: #141414;
                font-family: 'Manrope';
                font-size: 32px;
                font-style: normal;
                font-weight: 500;
                line-height: 120%; /* 38.4px */
                letter-spacing: -0.64px;
            }
            .bottom-message {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-top: 24px;
                border-top: 1px solid #858585;
                .small-message {
                    color: #141414;
                    font-family: 'Manrope';
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 130%; /* 20.8px */
                    letter-spacing: -0.48px;
                    max-width: 220px;
                }
                .illustration {
                    width: 100%;
                    svg {
                        width: 100%;
                    }
                }
            }
            &.active {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
        }
        .case-study-quote {
            position: relative;
            z-index: 3;
            grid-column: 3;
            grid-row: 3;
            display: flex;
            flex-direction: column;
            gap: 88px;
            padding: 48px 40px;
            background-color: #E7D6C2;
            margin-right: 24px;
            height: fit-content;
            max-width: 450px;
            .illustration {
                position: absolute;
                bottom: -50px;
                left: 0;
                width: 50px;
                height: 50px;
            }
            .quote {
                color: #141414;
                font-family: 'Manrope';
                font-size: 32px;
                font-style: normal;
                font-weight: 500;
                line-height: 120%; /* 38.4px */
                letter-spacing: -0.64px;
            }
            .info {
                display: flex;
                gap: 24px;
                .photo-and-company {
                    display: flex;
                    gap: 4px;
                    align-items: flex-end;
                    .photo {
                        width: 72px;
                        height: 72px;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .company {
                        width: 48px;
                        height: 48px;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                .info-text {
                    display: flex;
                    flex-direction: column;
                    .name {
                        color: #141414;
                        font-family: 'Manrope';
                        font-size: 18px;
                        font-style: normal;
                        font-weight: 700;
                        line-height: 150%; /* 27px */
                    }
                    .jobtitle {
                        color: #141414;
                        font-family: 'Manrope';
                        font-size: 14px;
                        font-style: normal;
                        font-weight: 300;
                        line-height: 150%;
                        span {
                            font-weight: 500;
                        }
                    }
                }
            }

        }
        .hero-image {
            width: 100%;
            grid-column: 1 / 4;
            grid-row: 1 / 4;
            img {
                width: 100%;
                height: 100%;
            }
            .mobile {
                display: none;
            }
            .tablet {
                display: none;
            }
        }
    }
    @media screen and (max-width: 600px) {
        .background {
            display: none;
        }
        .container {
            display: flex;
            flex-direction: column;
            height: 100%;
            padding: 86px 0 100px;
            gap: 24px;
            .section-title {
                margin-left: 0;
                width: 100%;
                font-size: 36px;
                padding: 0 16px;
            }
            .desc {
                font-size: 16px;
                padding: 0 24px;
                align-self: flex-start;
                margin-left: 16px;
                max-width: unset;
            }
            .book-a-demo-form-container {
                padding: 24px;
                margin-top: 80px;
                margin: 40px 16px 0 16px;
                .form-title {
                    font-size: 16px;
                    margin-bottom: 16px;
                }
                .book-a-demo-form {
                    .form-columns-2, .form-columns-1 {
                        .hs-form-field .hs-error-msgs li .hs-error-msg, .hs-form-field .hs-error-msgs li label a {
                            font-size: 8px;
                        }
                        .hs-error-msgs li label a {
                            font-size: 8px;
                        }
                    }
                }
            }
            .book-a-demo-thankyou {
                padding: 24px;
                margin-top: 80px;
                margin: 60px 16px 0 16px;
                height: 350px;
            }
            .case-study-quote {
                padding: 30px;
                margin-left: 16px;
                margin-right: 16px;
                max-width: unset;
                .quote {
                    font-size: 24px;
                }
                .info .info-text .name {
                    font-size: 18px;
                }
            }
            .hero-image {
                width: 100%;
                display: flex;
                position: absolute;
                top: 0;
                .desktop {
                    display: none;
                }
                .mobile {
                    display: block;
                    height: 100%;
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                .tablet {
                    display: none;
                }
            }
        }
    }
    @media screen and (min-width: 600px) and (max-width: 1023px) {
        .background {
            display: none;
        }
        .container {
            display: flex;
            flex-direction: column;
            height: 100%;
            padding: 86px 0 100px;
            gap: 40px;
            .section-title-tablet {
                display: flex;
                z-index: 3;
                .title {
                    font-size: 36px;
                    padding: 0 16px;
                }
                .description {
                    font-size: 16px;
                    padding: 0 20px;
                    max-width: 220px;
                }
            }
            .section-title {
                display: none;
            }
            .desc {
                display: none;
            }
            .book-a-demo-form-container {
                padding: 24px;
                margin: 0 auto;
                max-width: 750px;
                width: 95%;
                z-index: 5;
                .form-title {
                    font-size: 16px;
                    margin-bottom: 32px;
                }
            }
            .book-a-demo-thankyou {
                padding: 24px;
                margin-top: 80px;
                margin: 0 auto;
                grid-row: 2;
                max-width: 750px;
                width: 95%;
                grid-column: 1/4;
            }
            .case-study-quote {
                display: flex;
                margin: 0 auto;
                max-width: 750px;
                width: 95%;
                .quote {
                    font-size: 24px;
                }
                .info .info-text .name {
                    font-size: 18px;
                }
            }
            .hero-image {
                width: 100%;
                display: flex;
                position: absolute;
                top: 0;
                .desktop, .mobile {
                    display: none;
                }
                .tablet {
                    display: block;
                    height: 100%;
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }
        }
    }
    @media screen and (min-width: 1024px) and (max-width: 1200px) {
        overflow: unset;
    }
}