/* Start custom CSS for html, class: .elementor-element-df37b4d */.rubina-animation {
    width: 100%;
    max-width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
}

.rubina-animation img {
    max-width: 100%;
    height: auto;
}

.rubina-animation .animation-container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    transform-origin: center center;
} 

.scene {
    position: relative;
    width: min(1536px, 100vw - 48px);
    aspect-ratio: 1536 / 1024;
    overflow: hidden;
    isolation: isolate;
    background: transparent;
}

  .layer {
    position: absolute;
    display: block;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-style: preserve-3d;
  }

  .bg {
    z-index: 1;
    left: -0.13%; top: -0.29%; width: 100.26%; height: 100.29%;
    object-fit: fill;
  }

  /* Base PSD placement */
  .laptop { z-index: 5; left: 15.4%; top: 14.0%; width: 56.8%; }
.shop {
    z-index: 4;
    left: 0px;
    top: 28.42%;
    width: 17.38%;
}  .person-left { z-index: 7; left: 4.95%; top: 49.71%; width: 6.05%; }
  .person-cart { z-index: 8; left: 13.80%; top: 55.57%; width: 17.38%; }
  .woman-cart { z-index: 9; left: 35.48%; top: 56.54%; width: 17.97%; }
  .couple { z-index: 10; left: 55.21%; top: 50.29%; width: 13.61%; }
  .truck { z-index: 11; left: 70.44%; top: 50.78%; width: 28.52%; }

  /*
    One complete cycle = 31s.
    Entrance sequence finishes around 23s, then EVERYTHING stays still for ~7s.
    The last ~1s is only a soft reset/fade so the loop never hard-cuts.
  */
  .laptop      { animation: laptop 31s linear infinite; }
  .shop        { animation: shop 31s linear infinite; }
  .person-left { animation: person-left 31s linear infinite; transform-origin: 50% 100%; }
  .person-cart { animation: person-cart 31s linear infinite; transform-origin: 50% 100%; }
  .woman-cart  { animation: woman-cart 31s linear infinite; transform-origin: 50% 100%; }
  .couple      { animation: couple 31s linear infinite; transform-origin: 50% 100%; }
  .truck       { animation: truck 31s linear infinite; transform-origin: 45% 100%; }

  /*
    The movement itself uses carefully shaped keyframes instead of one long
    easing curve. This keeps the objects moving naturally without making them
    artificially slow. The final 7s are completely static.
  */
  @keyframes laptop {
    0%, 1% { opacity: 0; transform: translate3d(0, 7%, 0) scale(.985); }
    3.2% { opacity: 1; transform: translate3d(0, -1.0%, 0) scale(1.002); }
    4.2% { opacity: 1; transform: translate3d(0, .18%, 0) scale(.9995); }
    5.2%, 93% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    96.5% { opacity: 0; transform: translate3d(0, -1%, 0) scale(.998); }
    100% { opacity: 0; transform: translate3d(0, 7%, 0) scale(.985); }
  }

  @keyframes shop {
    0%, 12.5% { opacity: 0; transform: translate3d(-3%, 2%, 0) scale(.99); }
    15.8% { opacity: 1; transform: translate3d(.5%, -.35%, 0) scale(1.001); }
    17.2% { opacity: 1; transform: translate3d(0, .1%, 0) scale(.9995); }
    18.5%, 93% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    96.5% { opacity: 0; transform: translate3d(-.5%, .5%, 0) scale(.998); }
    100% { opacity: 0; transform: translate3d(-3%, 2%, 0) scale(.99); }
  }

  @keyframes person-left {
    0%, 22.0% { opacity: 0; transform: translate3d(-38%, 5%, 0) rotate(-1.2deg); }
    24.5% { opacity: 1; transform: translate3d(-20%, 1.2%, 0) rotate(.55deg); }
    26.0% { opacity: 1; transform: translate3d(-3%, -.35%, 0) rotate(-.25deg); }
    27.2%, 93% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
    96.5% { opacity: 0; transform: translate3d(0, -.3%, 0) rotate(0); }
    100% { opacity: 0; transform: translate3d(-38%, 5%, 0) rotate(-1.2deg); }
  }

  @keyframes person-cart {
    0%, 31.0% { opacity: 0; transform: translate3d(-30%, 4%, 0) rotate(-.8deg); }
    33.7% { opacity: 1; transform: translate3d(-15%, .9%, 0) rotate(.45deg); }
    35.4% { opacity: 1; transform: translate3d(-2%, -.25%, 0) rotate(-.2deg); }
    36.7%, 93% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
    96.5% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); }
    100% { opacity: 0; transform: translate3d(-30%, 4%, 0) rotate(-.8deg); }
  }

  @keyframes woman-cart {
    0%, 40.0% { opacity: 0; transform: translate3d(-25%, 3.5%, 0) rotate(-.65deg); }
    42.6% { opacity: 1; transform: translate3d(-12%, .7%, 0) rotate(.35deg); }
    44.3% { opacity: 1; transform: translate3d(-1.5%, -.2%, 0) rotate(-.15deg); }
    45.6%, 93% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
    96.5% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); }
    100% { opacity: 0; transform: translate3d(-25%, 3.5%, 0) rotate(-.65deg); }
  }

  @keyframes couple {
    0%, 49.0% { opacity: 0; transform: translate3d(25%, 3.5%, 0) rotate(.7deg); }
    51.7% { opacity: 1; transform: translate3d(12%, .7%, 0) rotate(-.35deg); }
    53.4% { opacity: 1; transform: translate3d(1.5%, -.2%, 0) rotate(.15deg); }
    54.8%, 93% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
    96.5% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); }
    100% { opacity: 0; transform: translate3d(25%, 3.5%, 0) rotate(.7deg); }
  }

  @keyframes truck {
    0%, 60.0% { opacity: 0; transform: translate3d(27%, 0, 0) scale(.99); }
    63.0% { opacity: 1; transform: translate3d(13%, 0, 0) scale(.998); }
    65.3% { opacity: 1; transform: translate3d(2%, 0, 0) scale(1.001); }
    67.0%, 93% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    96.5% { opacity: 0; transform: translate3d(0, 0, 0) scale(1); }
    100% { opacity: 0; transform: translate3d(27%, 0, 0) scale(.99); }
  }

  @media (prefers-reduced-motion: reduce) {
    .layer { animation: none !important; opacity: 1 !important; transform: none !important; }
  }/* End custom CSS */