@font-face {
    font-family: 'Host Grotesk';
    src: url('regular.woff2') format('woff2');
         font-weight: 400;
         font-style: normal;
         font-display: swap;     
}
@font-face {
    font-family: 'Host Grotesk';
    src: url('700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
html, body {
  margin: 0;
}
.animation_video_row img {
  vertical-align: top;
  height: auto;
}

.animation_video_row {
  max-width: 1200px;
  position: relative;
  font-family: 'Host Grotesk', sans-serif;
  color: #1A263C;
  margin: 0 auto;
  
  overflow: hidden;
  
}
.animation_video_wrapper {
  width: 100%;
  height: auto;
  aspect-ratio: 2 ;
  background: #d1f3f6;
}
.animation_video_row * {
  
  pointer-events: none;
  
}
  
.animation_video_animation_scalable {
  transform-origin: left top;
      width: 1200px;
    position: absolute;
    left: 0;
    top: 0;
}
.animation_v_hidden {
  opacity: 0;
}
.animation_abs {
  position: absolute;
}

.animation_tr_rb {
  transform-origin: right bottom;
}
.animation_tr_lb {
  transform-origin: left bottom;
}
.animation_tr_lt {
  transform-origin: left top;
}
.animation_tr_rt {
  transform-origin: right top;
}

.animation_v_hand {
  width: 533px;
  height: auto;
  
}
.animation_screen_2 {
  transform:  scale(1.4);
  left: 97px; 
  top:18px
}
.animation_value {
  border-radius: 10%;
  background: #21EBFF;
  box-shadow: -0.95em 0.95em 3.1em rgba(0, 201, 221, 0.32);
  padding: 1.3em 1.25em;
  white-space: nowrap;
  color: #19263C;
}
.animation_value_subheading {
  line-height: 1em;
}
.animation_value_heading  {
  font-size: 1.9em;
  font-weight: bold;
  line-height: 1em;
  margin-top: 0.2em;
}


.animation_value2 .animation_value_subheading {
  font-size: 20.29px;
}
.animation_value2 .animation_value_heading {
  font-size: 38px;
}
.animation_value1 {
  padding: 1.00em 1.25em;
}
.animation_value1 .animation_value_heading {
  font-size: 2.1em;
}
.animation_value1 .animation_value_subheading {
  font-size: 17px;
}
.animation_value3 {
  padding: 1.11em 1.25em;
}
.animation_value3 .animation_value_subheading {
  font-size: 17px;
}
.animation_value4 .animation_value_subheading {
  font-size: 14px;
}
.animation_value4 {
  padding: 0.95em 1.25em;
}
.animation_value4 .animation_value_heading {
  font-size: 25px;
}
.animation_v_phone1 {
  width: 210px;
    left: 235px;
    top: 93px;
    height: auto;
}
.animation_v_finger {
  left: 100px;
    top: 530px;
  transform-origin: left bottom;
  width: 382px;
  height: auto;
  transform-style: preserve-3d;
}
.animation_v_hand_with_phone {
  left: 260px; 
  top: 10px;
  perspective: 800px;
  transform-style: preserve-3d;
}
.animation_v_info {
  width: 210px;
    left: 235px;
    top: 80px;
    height: auto;
}
.animation_v_chart1{
  left: 113px;
  top: 183px;
  overflow: inherit;
}
.animation_v_chart2 {
  left:406px;
  top: 185px;
  overflow: inherit;
}
.animation_v_chart3 {
  left:123px;
  top: 366px;
  overflow: inherit;
}

.animation_v_replay {
  left: 30px;
    top: 30px;
    width: 300px;
    height: 40px;
    left: 253px;
    top: 421px;
    width: 174px;
    height: 31px;
    visibility: hidden;
    opacity: 0;
    cursor: pointer;
    pointer-events: all !important;
    border: 1px solid transparent;
    box-sizing: border-box;
    border-radius: 6px;
}