/* ── Mobile vertical menu — centre-align nav items ── */
.vertical-menu-container-wrapper .navbar-offcanvas,
.vertical-menu-container-wrapper .navbar-offcanvas ul,
.vertical-menu-container-wrapper .navbar-offcanvas li,
.vertical-menu-container-wrapper .navbar-offcanvas li a {
    text-align: center;
}

/*
 * Utility entrance animations.
 *
 * Usage: add the CSS class to any Elementor container via its
 * "Advanced → Additional CSS Class(es)" field.
 *
 * animate-buttons — staggered slide-up for every .elementor-widget-button
 *                   child inside the container.
 */

/* ── animate-buttons ── */

.animate-buttons .elementor-widget-button {
    opacity: 0;
    transform: translateY(var(--animate-distance, 36px));
    transition:
        opacity   var(--animate-duration, 600ms) ease,
        transform var(--animate-duration, 600ms) ease;
    transition-delay: calc(
        var(--animate-stagger, 150ms) * 0.3 +
        var(--col-index, 0) * var(--animate-stagger, 150ms)
    );
}

.animate-buttons.is-animated .elementor-widget-button {
    opacity: 1;
    transform: translateY(0);
}

/* Always visible in the Elementor editor */
.elementor-editor-active .animate-buttons .elementor-widget-button {
    opacity: 1;
    transform: none;
    transition: none;
}

/*
 * JS-controlled background parallax system.
 *
 * How it works:
 *   1. Elements that need parallax get --boxcar-parallax-bg: 1 via CSS.
 *      This works for BOTH inline-style cases (Elementor sets the attribute)
 *      and class-based cases (Elementor emits it in its generated stylesheet).
 *   2. background-attachment is overridden to scroll here so the browser
 *      renders the image at element size (not viewport size) on all devices.
 *   3. parallax-about-image.js reads --boxcar-parallax-bg and animates
 *      background-position on every scroll tick to reproduce the effect.
 *   background-position is NOT set here so JS can animate it freely.
 */

/* ── Inline-style case (Elementor emits background-attachment: fixed inline) ── */
.elementor-section[style*="background-attachment: fixed"],
.e-con[style*="background-attachment: fixed"],
.elementor-column[style*="background-attachment: fixed"],
.elementor-element[style*="background-attachment: fixed"] {
    --boxcar-parallax-bg: 1;
    background-attachment: scroll !important;
}

/* ── Class-based case: element 945036c (service-process section) ── */
/* Elementor sets background-attachment: fixed via its generated stylesheet,
   not as an inline style, so the [style*=...] selector above misses it. */
.elementor-element-945036c {
    --boxcar-parallax-bg: 1;
}

/* ── Mobile: explicit SVG sizing for the 945036c background ── */
@media (max-width: 1300px) {
    .elementor-8373 .elementor-element.elementor-element-945036c:not(.elementor-motion-effects-element-type-background),
    .elementor-8373 .elementor-element.elementor-element-945036c > .elementor-motion-effects-container > .elementor-motion-effects-layer {
        background-position: top center;
        background-size: 785px auto;
        background-attachment: fixed; /* overridden to scroll by the rule above */
    }
}