.garis-stage-intro {
    --garis-stage-intro-bg: #f3f3f3;
    position: relative;
    width: 100%;
    background: var(--garis-stage-intro-bg);
    color: #202020;
}

/* Elementor adds widget spacing by default; these two stage widgets must join seamlessly. */
.elementor-widget-garis_stage_intro,
.elementor-widget-garis_stage_cards {
    margin-block-end: 0 !important;
}

/*
 * Elementor applies a 10px top/bottom fallback padding to containers that do
 * not have explicit spacing values. Remove it only from the parent containers
 * used by the two connected stage widgets.
 */
.e-con:has(> .e-con-inner > .elementor-widget-garis_stage_intro),
.e-con:has(> .e-con-inner > .elementor-widget-garis_stage_cards) {
    --padding-top: 0px;
    --padding-bottom: 0px;
    --margin-top: 0px;
    --margin-bottom: 0px;
    --gap: 0px;
}

.garis-stage-intro--full {
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
}

.garis-stage-intro *,
.garis-stage-intro *::before,
.garis-stage-intro *::after {
    box-sizing: border-box;
}

.garis-stage-intro__inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 48px 20px 64px;
}

.garis-stage-intro__content {
    width: 66%;
    margin: 0 auto;
}

.garis-stage-intro__heading {
    margin: 0 0 32px;
    font-size: clamp(36px, 4vw, 62px);
    line-height: 1.15;
}

.garis-stage-intro__description,
.garis-stage-intro__description p {
    margin-top: 0;
    font-size: 20px;
    line-height: 1.6;
}

.garis-stage-intro__description > :last-child {
    margin-bottom: 0;
}

@media (max-width: 960px) {
    .garis-stage-intro__inner {
        padding:
            var(--garis-intro-ipad-padding-top, 72px)
            var(--garis-intro-ipad-padding-right, 40px)
            var(--garis-intro-ipad-padding-bottom, 72px)
            var(--garis-intro-ipad-padding-left, 40px) !important;
    }

    .garis-stage-intro__content {
        width: var(--garis-intro-ipad-content-width, 82%) !important;
        text-align: var(--garis-intro-ipad-alignment, center) !important;
    }

    .garis-stage-intro__heading {
        font-size: var(--garis-intro-ipad-heading-size, 44px) !important;
        margin-bottom: var(--garis-intro-ipad-heading-spacing, 24px) !important;
    }

    .garis-stage-intro__description,
    .garis-stage-intro__description p {
        font-size: var(--garis-intro-ipad-description-size, 18px) !important;
    }
}

@media (max-width: 767px) {
    .garis-stage-intro__inner {
        padding:
            var(--garis-intro-mobile-padding-top, 48px)
            var(--garis-intro-mobile-padding-right, 20px)
            var(--garis-intro-mobile-padding-bottom, 52px)
            var(--garis-intro-mobile-padding-left, 20px) !important;
    }

    .garis-stage-intro__content {
        width: var(--garis-intro-mobile-content-width, 100%) !important;
        text-align: var(--garis-intro-mobile-alignment, center) !important;
    }

    .garis-stage-intro__heading {
        font-size: var(--garis-intro-mobile-heading-size, 34px) !important;
        margin-bottom: var(--garis-intro-mobile-heading-spacing, 20px) !important;
    }

    .garis-stage-intro__description,
    .garis-stage-intro__description p {
        font-size: var(--garis-intro-mobile-description-size, 17px) !important;
    }
}