/*
 * ApeTerra Elementor Media Controls V2
 */

/*
 * Background selected in Elementor.
 * Existing design remains unchanged until an image is selected.
 */
.elementor-widget.apxmc-has-background
> .elementor-widget-container
> *:first-child {
    background-image:
        linear-gradient(
            var(
                --apxmc-bg-overlay,
                rgba(4, 29, 22, .25)
            ),
            var(
                --apxmc-bg-overlay,
                rgba(4, 29, 22, .25)
            )
        ),
        var(
            --apxmc-bg-image
        ) !important;

    background-position:
        center center,
        var(
            --apxmc-bg-position,
            center center
        ) !important;

    background-size:
        cover,
        var(
            --apxmc-bg-size,
            cover
        ) !important;

    background-repeat:
        no-repeat,
        var(
            --apxmc-bg-repeat,
            no-repeat
        ) !important;

    background-attachment:
        scroll,
        var(
            --apxmc-bg-attachment,
            scroll
        ) !important;
}

/*
 * Experience card images.
 */
.elementor-widget-apeterra_exact_experience
.ap-feature-visual.apxmc-has-image {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.elementor-widget-apeterra_exact_experience
.ap-feature-visual.apxmc-has-image
.apxmc-card-image {
    position: absolute !important;
    inset: 0;
    z-index: 2;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: inherit;
    object-fit:
        var(
            --apxmc-card-fit,
            cover
        );
    object-position:
        var(
            --apxmc-card-position,
            center center
        );
}

.elementor-widget-apeterra_exact_experience
.ap-feature-visual.apxmc-has-image
> :not(.apxmc-card-image) {
    opacity: 0 !important;
}

.elementor-widget-apeterra_exact_experience
.ap-feature-visual.apxmc-has-image::before,
.elementor-widget-apeterra_exact_experience
.ap-feature-visual.apxmc-has-image::after {
    opacity: 0 !important;
}

@media (max-width: 767px) {
    .elementor-widget.apxmc-has-background
    > .elementor-widget-container
    > *:first-child {
        background-image:
            linear-gradient(
                var(
                    --apxmc-bg-overlay,
                    rgba(4, 29, 22, .25)
                ),
                var(
                    --apxmc-bg-overlay,
                    rgba(4, 29, 22, .25)
                )
            ),
            var(
                --apxmc-bg-mobile-image,
                var(
                    --apxmc-bg-image
                )
            ) !important;

        background-position:
            center center,
            var(
                --apxmc-bg-mobile-position,
                center center
            ) !important;

        background-size:
            cover,
            var(
                --apxmc-bg-mobile-size,
                cover
            ) !important;

        /*
         * Fixed backgrounds are unreliable on mobile.
         */
        background-attachment:
            scroll,
            scroll !important;
    }
}