{# ORIGINAL MODULE TEST #}

.main-hero__background-image-wrapper-inner {
    display: flex;
    height: 100%;
}
.main-hero__background-image-wrapper.black-curve:after {
    content: url('https://8993966.fs1.hubspotusercontent-na1.net/hubfs/8993966/Onecom_April2021/Pages/Samsung%20microsite/desktop-shape-curve-black.svg');
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 0;
    left: -5px;
}
.main-hero__background-image-wrapper.white-curve:before {
    content: url('https://8993966.fs1.hubspotusercontent-na1.net/hubfs/8993966/Onecom_April2021/Pages/Samsung%20microsite/desktop-white-curve.svg');
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 0;
    left: 0px;
}
.main-hero__background-image-wrapper.image-front {
    width: auto;
}
.main-hero__background-image-wrapper.image-front img {
    position: relative;
    object-fit: cover;
    z-index: 1;
}
.main-hero__content {
    z-index: 3;
}
.main-hero__text-content ul {
    margin-left: 0;
}
.main-hero__text-content ul:is(:last-child, :only-child) {
    margin-bottom: 0;
}
.main-hero__text-content li {
    position: relative;
    list-style-type: none;
}
.main-hero__text-content li:before {
    content: url('https://8993966.fs1.hubspotusercontent-na1.net/hubfs/8993966/Onecom_April2021/Pages/OneContact/checkmark-icon.svg');
    position: absolute;
    top: 3px;
    left: -35px;
}
.main-hero__text-content li:not(:last-child) {
    margin-bottom: 5px;
}

@media only screen and (max-width: 1325px) {
    .main-hero__background-image-wrapper.image-front {
        right: -10% !important;
    }
}

@media only screen and (max-width: 1139px) {
    .main-hero__background-image-wrapper.image-front {
        right: -20% !important;
    }
}
@media only screen and (max-width: 1029px) {
    .main-hero__background-image-wrapper.image-front {
        right: -30% !important;
    }
}
@media only screen and (min-width: 992px) {
    .main-hero__text-content h1 {
        font-size: 57px;
        font-weight: bold;
        letter-spacing: 0;
        line-height: 74px;
    }
    .main-hero__text-content p {
        font-size: 24px;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 36px;
        max-width: 572px;
    }
    .mobile-image {
        display: none;
    }
}
@media only screen and (max-width: 991px) {
    .main-hero__background-image-wrapper.image-front {
        right: -10% !important;
    }
    .main-hero__background-image-wrapper.white-curve {
        right: -10% !important;
    }
}
@media only screen and (max-width: 767px) {
    .main-hero__logo {
        max-width: 130px;
    }
    .main-hero__background-image-wrapper {
        width: 100%;
    }
    .main-hero__background-image-wrapper:before {
        background: rgba(0, 0, 0, 0.5);
    }
    .main-hero__background-image-wrapper.image-front {
        right: -20% !important;
    }
}
@media only screen and (max-width: 679px) {
    .main-hero__background-image-wrapper.image-front {
        right: -30% !important;
    }
}
@media only screen and (min-width: 630px) {
    .main-hero__background-image-wrapper:before {
        content: '';
        position: absolute;
        inset: 0;
        height: 100%;
        width: 100%;
        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.43) 0%,
            rgba(0, 0, 0, 0.18) 39.1%,
            rgba(0, 0, 0, 0) 52.16%,
            rgba(0, 0, 0, 0) 100%
        );
        z-index: 2;
    }
}
@media only screen and (max-width: 629px) {
    .main-hero {
        display: flex;
        flex-direction: column-reverse;
    }
    .main-hero .content-block {
        width: 100%;
    }
    .desktop-image {
        display: none;
    }
    .mobile-image {
        display: block;
        height: 100%;
    }
    .main-hero__background-image-wrapper.image-front,
    .main-hero__background-image-wrapper.black-curve,
    .main-hero__background-image-wrapper.white-curve {
        position: relative !important;
        right: 0 !important;
    }
    .main-hero__background-image-wrapper.black-curve:after {
        content: '';
        background-image: url('https://8993966.fs1.hubspotusercontent-na1.net/hubfs/8993966/Onecom_April2021/Pages/Samsung%20microsite/mobile-shape-curve.svg');
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: bottom;
        left: 0;
        bottom: -10px;
    }
    .main-hero__background-image-wrapper.white-curve:before {
        content: '';
        background-image: url('https://8993966.fs1.hubspotusercontent-na1.net/hubfs/8993966/Onecom_April2021/Pages/Samsung%20microsite/mobile-white-shape-curve.svg');
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: bottom;
    }
}

/* Hero form card (TGMA, Nov 2026). Only applies when "Show form over hero image?" is on.
   Desktop order: text | form card | image subject, so the card sits over the left of the image and the person stays visible on the right.
   The hero's top and bottom spacers shrink on desktop so the hero stays close to its original height and the image isn't zoomed in. */
.main-hero--has-form .main-hero__form-col {
    position: relative;
    z-index: 4;
}
.main-hero .main-hero__form-card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    color: #002A42;
    border-radius: 16px 40px 16px 40px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
    padding: 22px 24px 10px;
    scroll-margin-top: 120px;
}
.main-hero .main-hero__form-card .main-hero__form-title {
    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
    letter-spacing: 0;
    color: #002A42;
    margin: 0 0 4px;
    max-width: none;
}
.main-hero__form-card .hs-form-frame {
    min-height: 420px;
}
@media only screen and (min-width: 992px) {
    .main-hero--has-form .spacer-top {
        padding-top: 36px !important;
    }
    .main-hero--has-form .spacer-bottom {
        padding-bottom: 36px !important;
    }
    .main-hero--has-form .row {
        flex-wrap: nowrap;
    }
    .main-hero--has-form .content-block {
        flex: 0 1 auto;
        width: 39%;
        max-width: 39%;
    }
    .main-hero--has-form .main-hero__form-col {
        flex: 0 0 440px;
        width: 440px;
        max-width: 440px;
        margin-left: 2%;
    }
    .main-hero--has-form .main-hero__text-content h1 {
        font-size: 50px;
        line-height: 62px;
    }
    .main-hero--has-form .main-hero__text-content p {
        font-size: 20px;
        line-height: 31px;
    }
}
@media only screen and (max-width: 991px) {
    .main-hero--has-form .main-hero__form-col {
        margin-top: 32px;
    }
    .main-hero .main-hero__form-card {
        max-width: 560px;
    }
}
@media only screen and (max-width: 629px) {
    .main-hero--has-form .main-hero__form-col {
        margin-top: 24px;
        margin-bottom: 8px;
    }
    .main-hero .main-hero__form-card {
        padding: 20px 16px 8px;
        border-radius: 12px 28px 12px 28px;
    }
}

/* Desktop: the form floats in a column locked to its resting height (set by module.js), so validation messages extend the card downward over the next section instead of resizing the hero. */
@media only screen and (min-width: 992px) {
    .main-hero.main-hero--has-form,
    .main-hero.main-hero--has-form.overflow-hidden {
        overflow-x: clip !important;
        overflow-y: visible !important;
        z-index: 5;
    }
    .main-hero--has-form .main-hero__background-image-wrapper {
        overflow: hidden;
    }
    .main-hero--has-form .main-hero__form-col.is-floating {
        align-self: center;
        position: relative;
    }
    .main-hero--has-form .main-hero__form-col.is-floating .main-hero__form-card {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
}


/* Hero form: reserve the loaded form's height so the card and hero don't grow when the form arrives (TGMA, Nov 2026).
   Heights measured from the live forms; the longer ones wrap a line at narrow widths. */
.main-hero__form-card .hs-form-frame,
.tgma-form-card .hs-form-frame { min-height: 582px; }
.main-hero__form-card .hs-form-frame[data-form-id^="42e65e1c"],
.tgma-form-card .hs-form-frame[data-form-id^="42e65e1c"],
.main-hero__form-card .hs-form-frame[data-form-id^="5b230124"],
.tgma-form-card .hs-form-frame[data-form-id^="5b230124"] { min-height: 600px; }
@media only screen and (max-width: 991px) {
    .main-hero__form-card .hs-form-frame[data-form-id^="b787cf48"],
    .tgma-form-card .hs-form-frame[data-form-id^="b787cf48"],
    .main-hero__form-card .hs-form-frame[data-form-id^="b1bdad99"],
    .tgma-form-card .hs-form-frame[data-form-id^="b1bdad99"],
    .main-hero__form-card .hs-form-frame[data-form-id^="53355926"],
    .tgma-form-card .hs-form-frame[data-form-id^="53355926"] { min-height: 600px; }
}
@media only screen and (max-width: 360px) {
    .main-hero__form-card .hs-form-frame[data-form-id^="5b230124"],
    .tgma-form-card .hs-form-frame[data-form-id^="5b230124"] { min-height: 618px; }
}