/* Scroll-linked 3D motion for the hero phone mockup. */
.hero4-section-area .header-images-area .img1 {
  perspective: 1400px;
  perspective-origin: 50% 45%;
}

.hero4-section-area .header-images-area .img1 .cp-scroll-phone {
  --cp-phone-y: 0px;
  --cp-phone-ry: -16deg;
  --cp-phone-rx: 4deg;
  --cp-phone-rz: -2.5deg;
  --cp-phone-scale: .975;
  transform:
    translate3d(0, var(--cp-phone-y), 0)
    rotateX(var(--cp-phone-rx))
    rotateY(var(--cp-phone-ry))
    rotateZ(var(--cp-phone-rz))
    scale(var(--cp-phone-scale));
  transform-origin: 50% 55%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
  transition: filter .35s ease;
}

/* A subtle depth cue without changing the existing composition. */
.hero4-section-area .header-images-area .img1 .cp-scroll-phone.is-scroll-active {
  filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .32));
}

@media (max-width: 991px), (prefers-reduced-motion: reduce) {
  .hero4-section-area .header-images-area .img1 .cp-scroll-phone {
    transform: none !important;
    will-change: auto;
    filter: none;
  }
}