@media (max-width: 767px) {
    /* Hide the separate old mobile artwork, and its old HTML widget. */
    .elementor-30 .elementor-element.elementor-element-735d41d,
    .elementor-30 .elementor-element.elementor-element-120b8a9 {
        display: none !important;
    }

    /* Override Elementor's mobile hiding of the DESKTOP artwork. */
    .elementor-30 .elementor-element.elementor-element-f07bc08 {
        display: flex !important;
        --display: flex;
        --width: 100%;
        --min-height: 500px;
        width: 100% !important;
        height: 500px !important;
        min-height: 500px !important;
        max-width: 100%;
        flex: 0 0 100% !important;
        margin: 0 0 50px !important;
        transform-origin: center center;
        transform: perspective(2000px)
            rotateY(var(--wdp-hero-angle, 0deg))
            rotateX(var(--wdp-hero-angle, 0deg)) !important;
    }

    /* Freeze the existing entrance and mouse effects on this artwork only.
       CSS !important also overrides Elementor's inline mouse transforms. */
    .elementor-30 .elementor-element-f07bc08,
    .elementor-30 .elementor-element-f07bc08 .e-con {
        animation: none !important;
        transition: none !important;
        visibility: visible !important;
        opacity: 1;
        transform-style: preserve-3d;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* These are the six existing nested image layers, not new images. */
    .elementor-30 .elementor-element-f07bc08 .e-con {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        left: 0 !important;
        bottom: 0 !important;
        transform: translate3d(
            var(--wdp-hero-shift, 0px),
            calc(-1 * var(--wdp-hero-shift, 0px)),
            0px
        ) !important;
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .elementor-30 .elementor-element-f07bc08,
    .elementor-30 .elementor-element-f07bc08 .e-con {
        transform: none !important;
    }
}

/* Mobile entrance: individual translate keeps scroll rotation independent. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
 .elementor-30 .elementor-element-f07bc08 {
  animation: wdpHeroEntrance 1200ms cubic-bezier(.22,1,.36,1) both !important;
  --wdp-entrance-offset: 24px;
 }
 .elementor-30 .elementor-element-f07bc08 .e-con {
  animation: wdpHeroEntrance 1200ms cubic-bezier(.22,1,.36,1) both !important;
  --wdp-entrance-offset: 8px;
 }
 .elementor-30 .elementor-element-f07bc08 .elementor-element-5afd987 { animation-delay: 100ms !important; }
 .elementor-30 .elementor-element-f07bc08 .elementor-element-493245f { animation-delay: 200ms !important; }
 .elementor-30 .elementor-element-f07bc08 .elementor-element-fbad765 { animation-delay: 300ms !important; }
 .elementor-30 .elementor-element-f07bc08 .elementor-element-6ee795f { animation-delay: 400ms !important; }
 .elementor-30 .elementor-element-f07bc08 .elementor-element-a758578 { animation-delay: 500ms !important; }
 .elementor-30 .elementor-element-f07bc08 .elementor-element-d58eff0 { animation-delay: 600ms !important; }
 @keyframes wdpHeroEntrance {
  from { opacity: 0; translate: 0 var(--wdp-entrance-offset, 8px); }
  to { opacity: 1; translate: 0 0; }
 }
}
