*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  box-sizing: border-box;
  background: #080B22;
  font-family: 'Moderat', sans-serif;
  font-weight: 400;
  color: #fff;
  width: 100%;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

.intro-img {
  min-width: 600px;
  height: 520px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (max-width: 1800px) {
  .intro-img {
    min-width: 600px;
    height: 520px;
  }
}
@media screen and (max-width: 1200px) {
  .intro-img {
    min-width: 526px;
    height: 476px;
  }
}

@media screen and (max-width: 580px) {
  .intro-img {
    min-width: 326px;
    height: 350px;
  }
}

.intro-anim__main {
  min-width: 715px;
  height: 100%;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
  transform: translate(-50%, -50%) scale(0.65);
}
.intro-anim__main .main-anim-screen {
  position: absolute;
  top: calc(50% - 104px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
  height: 308px;
  background: linear-gradient(259.17deg, #FE4A57 3.25%, #3D42ED 96.12%);
  border-radius: 12px;
}
.intro-anim__main .scheme-anim {
  position: absolute;
  top: calc(50% + 176px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 48px;
}
.intro-anim__main .scheme-anim svg {
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.intro-anim__main .scheme-anim .triple-scheme {
  display: flex;
  gap: 20px;
  width: 100%;
}
.intro-anim__main .scheme-anim .scheme-item {
  width: 100%;
  text-align: center;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 400;
  color: #848592;
  border: 1px solid #848592;
  padding: 18px;
  border-radius: 12px;
  position: relative;
  z-index: 2;
}
.intro-anim__main .scheme-anim .scheme-item img {
  position: relative;
  transform: scale(0.8);
}
.intro-anim__main .scheme-anim .scheme-item.main-scheme {
  font-size: 24px;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 27px;
}
.intro-anim__main .scheme-anim .scheme-item.main-scheme img {
  width: 44px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.5;
}
.intro-anim__main .scheme-anim .scheme-item::before, .intro-anim__main .scheme-anim .scheme-item::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  width: 0;
  height: 0;
  z-index: -1;
  background: linear-gradient(95.86deg, rgba(254, 74, 87, 0.5) -1.02%, rgba(94, 129, 255, 0.5) 100.53%);
}
.intro-anim__main .scheme-anim .scheme-item:after {
  opacity: 1;
  background: #292A5F;
}
.intro-anim__main .anim-mini-container:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background: #292A5F;
  z-index: 0;
  border-radius: 12px;
}
.intro-anim__main .anim-mini-container .main-anim-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  object-fit: cover;
  border-radius: 12px;
  z-index: 1;
}
.intro-anim__main .anim-mini-container .main-anim-img::before, .intro-anim__main .anim-mini-container .main-anim-img::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 100%;
  height: 100%;
  background: linear-gradient(95.86deg, rgba(254, 74, 87, 0.5) -1.02%, rgba(94, 129, 255, 0.5) 100.53%);
  border-radius: 12px;
  z-index: 0;
  transition: 1s;
}
.intro-anim__main .anim-mini-container .main-anim-img::after {
  background: linear-gradient(180deg, rgba(254, 74, 87, 0.5) -1.02%, rgba(94, 129, 255, 0.5) 100.53%);
  transition: 0.75s;
}
.intro-anim__main .anim-mini-container .main-anim-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  transition: 0.5s;
  opacity: 0;
  transform: scale(0.5);
  position: relative;
  z-index: 2;
}
.intro-anim__main .icon-item {
  cursor: pointer;
  width: 88px;
  height: 88px;
  border-radius: 12px;
  border: 1px solid #848592;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.5s;
  z-index: 3;
}
.intro-anim__main .icon-item:before, .intro-anim__main .icon-item:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background: #292A5F;
  border-radius: 50%;
  transition: 0.5s;
  z-index: 0;
}
.intro-anim__main .icon-item img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  object-fit: contain;
  transition: 0.3s;
  z-index: 2;
}
.intro-anim__main .icon-item img:nth-child(2) {
  transform: translate(-50%, -50%) scale(0.5) rotate(-360deg);
  opacity: 0;
}
.intro-anim__main .icon-item .path-svgs {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.intro-anim__main .icon-item .path-svgs svg path:nth-child(2) {
  stroke-dasharray: 124;
  stroke-dashoffset: 124;
  transition: 1s;
}
.intro-anim__main .icon-item.active {
  border: 1px solid transparent;
}
.intro-anim__main .icon-item.active:before {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(95.86deg, rgba(254, 74, 87, 0.5) -1.02%, rgba(94, 129, 255, 0.5) 100.53%);
}
.intro-anim__main .icon-item.active:after {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border-radius: 12px;
}
.intro-anim__main .icon-item.active img {
  transform: translate(-50%, -50%) scale(0.5) rotate(360deg);
  opacity: 0;
  transition: 0.2s;
}
.intro-anim__main .icon-item.active img:nth-child(2) {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
}
.intro-anim__main .icon-item.active .path-svgs svg path:nth-child(2) {
  stroke-dashoffset: 0;
  transition-delay: 0.5s;
}
.intro-anim__main .icon-item:hover {
  border: 1px solid transparent;
}
.intro-anim__main .icon-item:hover > img:first-child {
  filter: brightness(0) saturate(100%) invert(81%) sepia(99%) saturate(2%) hue-rotate(313deg) brightness(109%) contrast(101%);
}
.intro-anim__main .icon-item:hover:before {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(95.86deg, rgba(254, 74, 87, 0.5) -1.02%, rgba(94, 129, 255, 0.5) 100.53%);
}
.intro-anim__main .icon-item.active ~ .main-anim-img {
  opacity: 1;
  z-index: 2;
}
.intro-anim__main .anim-mini-container-1 .icon-item {
  transform: translate(-433%, 100%);
}
.intro-anim__main .anim-mini-container-1 .icon-item .path-svgs {
  top: -44%;
  left: 86%;
}
.intro-anim__main .anim-mini-container-2 .icon-item {
  transform: translate(-429%, -326%);
}
.intro-anim__main .anim-mini-container-2 .icon-item .path-svgs {
  top: 205%;
  left: 80%;
}
.intro-anim__main .anim-mini-container-2 .icon-item .path-svgs svg path:nth-child(2) {
  stroke-dasharray: 230;
  stroke-dashoffset: 230;
  transition: 1s;
}
.intro-anim__main .anim-mini-container-2 .icon-item.active .path-svgs svg path:nth-child(2) {
  stroke-dashoffset: 0;
}
.intro-anim__main .anim-mini-container-3 .icon-item {
  transform: translate(-215%, -400%);
}
.intro-anim__main .anim-mini-container-3 .icon-item .path-svgs {
  top: 138%;
  left: 126%;
}
.intro-anim__main .anim-mini-container-3 .icon-item .path-svgs svg path:nth-child(2) {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: 1s;
}
.intro-anim__main .anim-mini-container-3 .icon-item.active .path-svgs svg path:nth-child(2) {
  stroke-dashoffset: 0;
}
.intro-anim__main .anim-mini-container-4 .icon-item {
  transform: translate(75%, -365%);
}
.intro-anim__main .anim-mini-container-4 .icon-item .path-svgs {
  top: 118%;
  left: -19%;
}
.intro-anim__main .anim-mini-container-4 .icon-item .path-svgs svg path:nth-child(2) {
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  transition: 1s;
}
.intro-anim__main .anim-mini-container-4 .icon-item.active .path-svgs svg path:nth-child(2) {
  stroke-dashoffset: 0;
}
.intro-anim__main .anim-mini-container-5 .icon-item {
  transform: translate(270%, -400%);
}
.intro-anim__main .anim-mini-container-5 .icon-item .path-svgs {
  top: 165%;
  left: 25%;
}
.intro-anim__main .anim-mini-container-5 .icon-item .path-svgs svg path:nth-child(2) {
  stroke-dasharray: 150;
  stroke-dashoffset: 450;
  transition: 1s;
}
.intro-anim__main .anim-mini-container-5 .icon-item.active .path-svgs svg path:nth-child(2) {
  stroke-dashoffset: 600;
}
.intro-anim__main .anim-mini-container-6 .icon-item {
  transform: translate(370%, -215%);
}
.intro-anim__main .anim-mini-container-6 .icon-item .path-svgs {
  top: 146%;
  left: 0%;
}
.intro-anim__main .anim-mini-container-6 .icon-item .path-svgs svg path:nth-child(2) {
  stroke-dasharray: 175;
  stroke-dashoffset: 175;
  transition: 1s;
}
.intro-anim__main .anim-mini-container-6 .icon-item.active .path-svgs svg path:nth-child(2) {
  stroke-dashoffset: 0;
}
.intro-anim__main .anim-mini-container-7 .icon-item {
  transform: translate(345%, 100%);
}
.intro-anim__main .anim-mini-container-7 .icon-item .path-svgs {
  top: -43%;
  left: 11%;
}
.intro-anim__main .anim-mini-container-7 .icon-item .path-svgs svg path:nth-child(2) {
  stroke-dasharray: 175;
  stroke-dashoffset: 175;
  transition: 1s;
}
.intro-anim__main .anim-mini-container-7 .icon-item.active .path-svgs svg path:nth-child(2) {
  stroke-dashoffset: 0;
}
@media (max-width: 1200px) {
  .intro-anim__main {
    transform: translate(-50%, -50%) scale(0.6);
  }
}
@media (max-width: 580px) {
  .intro-anim__main {
    left: 50%;
    transform: translate(-50%, -50%) scale(0.4);
  }
}

.scheme-anim path:first-child {
  stroke-dasharray: 114;
  stroke-dashoffset: 180;
}
.scheme-anim .main-line {
  stroke-dasharray: 114;
  stroke-dashoffset: 114;
}
.scheme-anim .line-2 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
}
.scheme-anim .line-3 {
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
}
.scheme-anim .line-4 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
}

@keyframes move-main-line {
  0%, 100% {
    stroke-dashoffset: 114;
  }
  20%, 80% {
    stroke-dashoffset: 180;
  }
}
@keyframes active-btn-item-1 {
  0%, 10%, 90%, 100% {
    color: #848592;
    border: 1px solid #848592;
  }
  20%, 80% {
    color: #fff;
    border: 1px solid transparent;
  }
}
@keyframes active-btn-item-1-before {
  0%, 10%, 90%, 100% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  20%, 80% {
    width: 100%;
    height: 100%;
    opacity: 1;
  }
}
@keyframes active-btn-item-1-after {
  0%, 10%, 90%, 100% {
    opacity: 0;
    width: 0;
    height: 0;
  }
  20%, 80% {
    opacity: 1;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
  }
}
@keyframes active-btn-item-1-img {
  0%, 10%, 90%, 100% {
    opacity: 0.5;
    transform: scale(0.8);
    filter: grayscale(100%);
  }
  20%, 80% {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1);
  }
}
@keyframes move-line-2 {
  0%, 20%, 80%, 100% {
    stroke-dashoffset: 300;
  }
  30%, 70% {
    stroke-dashoffset: 600;
  }
}
@keyframes active-btn-item-2 {
  0%, 30%, 75%, 100% {
    color: #848592;
    border: 1px solid #848592;
  }
  40%, 65% {
    color: #fff;
    border: 1px solid transparent;
  }
}
@keyframes active-btn-item-2-before {
  0%, 30%, 75%, 100% {
    opacity: 0;
    width: 0;
    height: 0;
  }
  40%, 65% {
    opacity: 1;
    width: 100%;
    height: 100%;
  }
}
@keyframes active-btn-item-2-after {
  0%, 30%, 75%, 100% {
    opacity: 0;
    width: 0;
    height: 0;
  }
  40%, 65% {
    opacity: 1;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
  }
}
@keyframes move-line-3 {
  0%, 20%, 80%, 100% {
    stroke-dashoffset: 150;
  }
  30%, 70% {
    stroke-dashoffset: 300;
  }
}
@keyframes active-btn-item-3 {
  0%, 30%, 75%, 100% {
    background: transparent;
    color: #848592;
    border: 1px solid #848592;
  }
  40%, 65% {
    background: linear-gradient(95.86deg, rgba(254, 74, 87, 0.5) -1.02%, rgba(94, 129, 255, 0.5) 100.53%);
    color: #fff;
    border: 1px solid transparent;
  }
}
@keyframes active-btn-item-3-before {
  0%, 30%, 75%, 100% {
    opacity: 0;
    width: 0;
    height: 0;
  }
  40%, 65% {
    opacity: 1;
    width: 100%;
    height: 100%;
  }
}
@keyframes active-btn-item-3-after {
  0%, 30%, 75%, 100% {
    opacity: 0;
    width: 0;
    height: 0;
  }
  40%, 65% {
    opacity: 1;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
  }
}
@keyframes move-line-4 {
  0%, 20%, 80%, 100% {
    stroke-dashoffset: 300;
  }
  30%, 70% {
    stroke-dashoffset: 600;
  }
}
@keyframes active-btn-item-4 {
  0%, 30%, 75%, 100% {
    background: transparent;
    color: #848592;
    border: 1px solid #848592;
  }
  40%, 65% {
    background: linear-gradient(95.86deg, rgba(254, 74, 87, 0.5) -1.02%, rgba(94, 129, 255, 0.5) 100.53%);
    color: #fff;
    border: 1px solid transparent;
  }
}
@keyframes active-btn-item-4-before {
  0%, 30%, 75%, 100% {
    opacity: 0;
    width: 0;
    height: 0;
  }
  40%, 65% {
    opacity: 1;
    width: 100%;
    height: 100%;
  }
}
@keyframes active-btn-item-4-after {
  0%, 30%, 75%, 100% {
    opacity: 0;
    width: 0;
    height: 0;
  }
  40%, 65% {
    opacity: 1;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
  }
}
.main-anim-screen.active ~ .scheme-anim .main-line {
  animation: move-main-line 3s linear infinite;
}
.main-anim-screen.active ~ .scheme-anim .line-2 {
  animation: move-line-2 3s linear infinite;
}
.main-anim-screen.active ~ .scheme-anim .line-3 {
  animation: move-line-3 3s linear infinite;
}
.main-anim-screen.active ~ .scheme-anim .line-4 {
  animation: move-line-4 3s linear infinite;
}
.main-anim-screen.active ~ .scheme-anim .scheme-item {
  animation: active-btn-item-1 3s ease-in-out infinite;
}
.main-anim-screen.active ~ .scheme-anim .scheme-item::before {
  animation: active-btn-item-1-before 3s ease-in-out infinite;
}
.main-anim-screen.active ~ .scheme-anim .scheme-item::after {
  animation: active-btn-item-1-after 3s ease-in-out infinite;
}
.main-anim-screen.active ~ .scheme-anim .scheme-item img {
  animation: active-btn-item-1-img 3s ease-in-out infinite;
}
.main-anim-screen.active ~ .scheme-anim .triple-scheme .scheme-item:nth-child(1) {
  animation: active-btn-item-2 3s ease-in-out infinite;
}
.main-anim-screen.active ~ .scheme-anim .triple-scheme .scheme-item:nth-child(1)::after {
  animation: active-btn-item-2-after 3s ease-in-out infinite;
}
.main-anim-screen.active ~ .scheme-anim .triple-scheme .scheme-item:nth-child(1)::before {
  animation: active-btn-item-2-before 3s ease-in-out infinite;
}
.main-anim-screen.active ~ .scheme-anim .triple-scheme .scheme-item:nth-child(2) {
  animation: active-btn-item-2 3s ease-in-out infinite;
}
.main-anim-screen.active ~ .scheme-anim .triple-scheme .scheme-item:nth-child(2)::after {
  animation: active-btn-item-2-after 3s ease-in-out infinite;
}
.main-anim-screen.active ~ .scheme-anim .triple-scheme .scheme-item:nth-child(2)::before {
  animation: active-btn-item-2-before 3s ease-in-out infinite;
}
.main-anim-screen.active ~ .scheme-anim .triple-scheme .scheme-item:nth-child(3) {
  animation: active-btn-item-2 3s ease-in-out infinite;
}
.main-anim-screen.active ~ .scheme-anim .triple-scheme .scheme-item:nth-child(3)::after {
  animation: active-btn-item-2-after 3s ease-in-out infinite;
}
.main-anim-screen.active ~ .scheme-anim .triple-scheme .scheme-item:nth-child(3)::before {
  animation: active-btn-item-2-before 3s ease-in-out infinite;
}

.content-screen__test {
  margin: 0 auto;
  max-width: 560px;
  width: 100%;
  height: 308px;
  border-radius: 12px;
  border: 2px solid #292A5F;
}

@keyframes anim-1-bg {
  0%, 5% {
    opacity: 0;
    border-radius: 50%;
  }
  15%, 90% {
    opacity: 1;
    border-radius: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes anim-1-point {
  0%, 15% {
    transform: scale(0);
    opacity: 0;
  }
  20%, 30.01%, 40%, 50.01%, 90% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(53, 66, 245, 0.2823529412), 0 0 0 0 rgba(53, 66, 245, 0.1450980392);
  }
  30%, 50% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 15px rgba(53, 66, 245, 0), 0 0 0 30px rgba(53, 66, 245, 0);
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}
@keyframes anim-1-path {
  0%, 20% {
    stroke-dashoffset: 100;
    opacity: 1;
  }
  30%, 90% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes anim-1-point-move {
  0%, 20%, 50.1%, 60%, 90.1%, 100% {
    opacity: 0;
    transform: scale(0.5);
    left: 0;
  }
  20.1%, 60.1% {
    opacity: 1;
    transform: scale(0.5);
    left: 0;
  }
  50%, 90% {
    transform: scale(1.5);
    left: 100px;
  }
}
@keyframes anim-2-point {
  0%, 17% {
    transform: scale(0);
    opacity: 0;
  }
  25%, 35.01%, 45%, 55.01%, 90% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(124, 225, 157, 0.2823529412), 0 0 0 0 rgba(124, 225, 157, 0.1450980392);
  }
  35%, 55% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 15px rgba(124, 225, 158, 0), 0 0 0 30px rgba(124, 225, 158, 0);
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}
@keyframes anim-2-path {
  0%, 20% {
    stroke-dashoffset: 300;
    opacity: 1;
  }
  60%, 90% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes anim-2-point-move {
  0%, 30%, 60.01%, 100% {
    opacity: 0;
    transform: scale(0.5);
    top: 52px;
    left: 0;
  }
  31% {
    opacity: 1;
    transform: scale(0.8);
    top: 52px;
    left: 0;
  }
  40% {
    opacity: 1;
    transform: scale(1);
    top: 52px;
    left: 33px;
  }
  43% {
    opacity: 1;
    transform: scale(1.1);
    top: 41px;
    left: 44px;
  }
  50% {
    opacity: 1;
    transform: scale(1);
    top: 11px;
    left: 44px;
  }
  53% {
    opacity: 0.5;
    transform: scale(1);
    top: -2px;
    left: 57px;
  }
  60% {
    opacity: 0;
    transform: scale(1.5);
    top: -2px;
    left: 102px;
  }
}
@keyframes show-table-item {
  0%, 25% {
    opacity: 0;
    transform: translateY(-9px);
  }
  35%, 90% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-9px);
  }
}
@keyframes show-table-item-alt {
  0%, 35% {
    opacity: 0;
    transform: translateY(-9px);
  }
  45%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fast-show-option {
  0%, 60% {
    opacity: 0;
    transform: scale(0.4);
  }
  65%, 100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes timing-anim {
  0%, 50% {
    content: "15";
  }
  60% {
    content: "16";
  }
  70% {
    content: "17";
  }
  80% {
    content: "18";
  }
  90% {
    content: "19";
  }
  100% {
    content: "20";
  }
}
@keyframes timing-anim-2 {
  0%, 50% {
    content: "03";
  }
  60% {
    content: "04";
  }
  70% {
    content: "05";
  }
  80% {
    content: "06";
  }
  90% {
    content: "07";
  }
  100% {
    content: "08";
  }
}
.intro-anim__main .icon-item.active ~ .main-anim-img .img-container > img {
  animation: anim-1-bg 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .img-container .point-1 {
  animation: anim-1-point 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .img-container .path-1 path {
  animation: anim-1-path 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .img-container .path-1:before, .intro-anim__main .icon-item.active ~ .main-anim-img .img-container .path-1:after {
  animation: anim-1-point-move 7.2s linear infinite;
  animation-fill-mode: both;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .img-container .path-1:after {
  animation-delay: 1s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .img-container .point-2 {
  animation: anim-2-point 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .img-container .path-2 path {
  animation: anim-2-path 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .img-container .path-2:before, .intro-anim__main .icon-item.active ~ .main-anim-img .img-container .path-2:after {
  animation: anim-2-point-move 7.2s linear infinite;
  animation-fill-mode: both;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .img-container .path-2:after {
  animation-delay: 2s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .img-container .table {
  animation: show-table-item 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .img-container .table > p {
  animation: show-table-item 7.2s linear infinite;
  animation-fill-mode: both;
  animation-delay: 1s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .img-container .table .row {
  animation: show-table-item 7.2s linear infinite;
  animation-fill-mode: both;
  animation-delay: 1.5s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .img-container .table .row .call-timing:after {
  animation: timing-anim 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .img-container .table .row:nth-child(3) {
  animation-name: show-table-item-alt;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .img-container .table .row:nth-child(3) .call-timing:after {
  animation: timing-anim-2 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .img-container .table .option-table .item {
  animation: fast-show-option 7.2s linear infinite;
  animation-fill-mode: both;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .img-container .table .option-table .item:nth-child(1) {
  animation-delay: 0.05s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .img-container .table .option-table .item:nth-child(6) {
  animation-delay: 0.1s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .img-container .table .option-table .item:nth-child(2) {
  animation-delay: 0.15s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .img-container .table .option-table .item:nth-child(7) {
  animation-delay: 0.2s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .img-container .table .option-table .item:nth-child(3) {
  animation-delay: 0.25s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .img-container .table .option-table .item:nth-child(8) {
  animation-delay: 0.3s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .img-container .table .option-table .item:nth-child(4) {
  animation-delay: 0.35s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .img-container .table .option-table .item:nth-child(9) {
  animation-delay: 0.4s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .img-container .table .option-table .item:nth-child(5) {
  animation-delay: 0.45s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .img-container .table .option-table .item:nth-child(10) {
  animation-delay: 0.5s;
}

.img-container {
  width: 556px;
  height: 304px;
  background: #080B22;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.img-container > img {
  width: 100%;
  height: 100%;
  opacity: 1;
}
.img-container .point-1 {
  position: absolute;
  top: 40px;
  left: 55px;
  border-radius: 50%;
  width: 75px;
  height: 75px;
  background: #3542F5;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}
.img-container .point-1 img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.img-container .path-1 {
  position: absolute;
  top: 62px;
  left: 130px;
}
.img-container .path-1 path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
}
.img-container .path-1:before, .img-container .path-1:after {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 8px;
  height: 8px;
  background: #3542F5;
  border-radius: 50%;
  opacity: 0;
}
.img-container .point-2 {
  position: absolute;
  top: 187px;
  left: 43px;
  border-radius: 50%;
  width: 75px;
  height: 75px;
  background: #7CE19D;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}
.img-container .point-2 img {
  width: 40px;
  height: 40px;
  filter: invert(1);
  object-fit: contain;
}
.img-container .path-2 {
  position: absolute;
  top: 169px;
  left: 118px;
}
.img-container .path-2 path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  opacity: 0;
}
.img-container .path-2:before, .img-container .path-2:after {
  content: "";
  position: absolute;
  top: 52px;
  left: 0;
  width: 8px;
  height: 8px;
  background: #7CE19D;
  border-radius: 50%;
  opacity: 0;
}
.img-container .table {
  position: absolute;
  top: 9px;
  right: 12px;
  width: 336px;
  height: 282px;
  border-radius: 8px;
  border: 1px solid #1c1f74;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  padding: 14px 8px 8px;
  align-items: center;
  opacity: 0;
}
.img-container .table > p {
  font-size: 11px;
  line-height: 1.2;
  color: #fff;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 5px;
  text-transform: uppercase;
  margin-bottom: 14px;
  opacity: 0;
  position: relative;
}
.img-container .table > p .num {
  font-size: 15px;
  line-height: 1.2;
  width: 20px;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #E61428;
  text-align: center;
}
.img-container .table > p .dot {
  width: 4px;
  height: 4px;
  min-height: 4px;
  border-radius: 50%;
  background: #D9D9D9;
}
.img-container .table .row {
  display: flex;
  align-items: center;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #232F63;
  background: #0F183F;
  padding: 8px;
  padding-right: 12px;
  justify-content: space-between;
  margin-bottom: 4px;
  opacity: 0;
  position: relative;
}
.img-container .table .row:nth-child(3) {
  opacity: 0;
}
.img-container .table .row .left {
  display: flex;
  align-items: center;
}
.img-container .table .row .right {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-right: 10px;
}
.img-container .table .row .call-icon {
  min-width: 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #3542F5;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 12px;
}
.img-container .table .row .call-icon.green {
  background: #7CE19D;
}
.img-container .table .row .call-icon.green img {
  filter: invert(1);
}
.img-container .table .row .call-icon img {
  width: 16px;
  height: 16px;
}
.img-container .table .row .contact {
  display: flex;
  flex-direction: column;
}
.img-container .table .row .contact p {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  margin-bottom: 0;
}
.img-container .table .row .contact span {
  display: block;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  opacity: 0.5;
}
.img-container .table .row .call-timing {
  font-size: 12px;
  line-height: 1.2;
  opacity: 0.5;
  max-width: 30px;
  white-space: nowrap;
}
.img-container .table .row .call-timing::before {
  content: "00";
}
.img-container .table .row .call-timing::after {
  content: "";
}
.img-container .table .option-table {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  overflow: hidden;
  border-radius: 4px;
  margin-top: 5px;
}
.img-container .table .option-table .item {
  width: calc(20% - 1.6px);
  height: 49px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #191A38;
  gap: 3px;
  position: relative;
  opacity: 0;
}
.img-container .table .option-table .item:first-child {
  background: #E61428;
}
.img-container .table .option-table .item img {
  width: 20px;
  height: 20px;
}
.img-container .table .option-table .item span {
  font-weight: 500;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  color: #fff;
}

.intro-anim__main .icon-item.active ~ .main-anim-img .anim-2 > img {
  animation: anim-1-bg 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-2 .green-ped {
  animation: anim-2-green-ped 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-2 .red-point {
  animation: anim-2-red-point 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-2 .point-path path {
  animation: anim-2-point-path 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-2 .point-path:before, .intro-anim__main .icon-item.active ~ .main-anim-img .anim-2 .point-path:after {
  animation: anim-2-point-path-dot 7.2s linear infinite;
  animation-fill-mode: both;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-2 .point-path::after {
  animation-delay: 2s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-2 .paper {
  animation: show-paper-item-2 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-2 .paper .loc {
  animation: show-paper-item-2 7.2s linear infinite;
  animation-fill-mode: both;
  animation-delay: 1s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-2 .paper .loc .shadow {
  animation: pulse-shadow 1s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-2 .paper p {
  animation: show-paper-item-2 7.2s linear infinite;
  animation-fill-mode: both;
  animation-delay: 2s;
}

@keyframes anim-2-green-ped {
  0%, 15% {
    top: 75px;
    left: 253px;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    top: 170px;
    left: 230px;
    transform: rotate(-13deg);
    opacity: 0.5;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: 244px;
    left: 225px;
    transform: rotate(-25deg);
    opacity: 0;
  }
}
@keyframes anim-2-red-point {
  0%, 20%, 100% {
    opacity: 0;
    transform: scale(0.5);
    box-shadow: 0 0 0 rgba(233, 59, 72, 0), 0 0 0 rgba(233, 59, 72, 0);
  }
  28% {
    opacity: 1;
    transform: scale(1.5);
    box-shadow: 0 0 0 rgba(233, 59, 72, 0.5), 0 0 0 rgba(233, 59, 72, 0.25);
  }
  30%, 40.01%, 50%, 60.01%, 70%, 80.01%, 90% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 rgba(233, 59, 72, 0.5), 0 0 0 rgba(233, 59, 72, 0.25);
  }
  40%, 60%, 80% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 15px rgba(233, 59, 72, 0), 0 0 0 30px rgba(233, 59, 72, 0);
  }
}
@keyframes anim-2-point-path {
  0%, 20% {
    stroke-dashoffset: 420;
  }
  50%, 90% {
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes anim-2-point-path-dot {
  0%, 20% {
    opacity: 0;
    left: 0;
    top: -3px;
  }
  21% {
    opacity: 1;
    left: 0;
    top: -3px;
  }
  28% {
    opacity: 1;
    top: -3px;
    left: 39px;
  }
  30% {
    opacity: 1;
    top: 10px;
    left: 55px;
  }
  38% {
    opacity: 1;
    top: 84px;
    left: 55px;
  }
  40% {
    opacity: 1;
    top: 98px;
    left: 67px;
  }
  48% {
    opacity: 1;
    top: 98px;
    left: 209px;
  }
  50% {
    opacity: 1;
    top: 87px;
    left: 219px;
  }
  56% {
    opacity: 0;
    transform: scale(1.5);
    top: 59px;
    left: 219px;
  }
}
@keyframes show-paper-item-2 {
  0%, 45%, 100% {
    opacity: 0;
    transform: translateY(-9px);
  }
  50%, 90% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes pulse-shadow {
  0%, 100% {
    opacity: 1;
    filter: blur(0);
  }
  50%, 90% {
    opacity: 0;
    filter: blur(15px);
  }
}
.img-container.anim-2 .green-ped {
  position: absolute;
  top: 75px;
  left: 253px;
  opacity: 0;
}
.img-container.anim-2 .red-point {
  position: absolute;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #E93B48;
  top: 144px;
  left: 174px;
  opacity: 0;
}
.img-container.anim-2 .point-path {
  position: absolute;
  top: 156px;
  left: 200px;
  z-index: 2;
}
.img-container.anim-2 .point-path path {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
}
.img-container.anim-2 .point-path:before, .img-container.anim-2 .point-path:after {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  width: 8px;
  height: 8px;
  background: #E93B48;
  border-radius: 50%;
  opacity: 0;
}
.img-container.anim-2 .paper {
  opacity: 0;
  width: 165px;
  height: 155px;
  position: absolute;
  top: 57px;
  right: 53px;
  border-radius: 8px;
  border: 1px solid #1c1f74;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  padding: 15px 21px 8px;
  align-items: center;
  box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.5019607843);
}
.img-container.anim-2 .paper .loc {
  display: flex;
  gap: 16px;
  align-items: center;
  position: relative;
  font-size: 11px;
  line-height: 1.2;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
.img-container.anim-2 .paper .loc .shadow {
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0.5;
  filter: blur(10px);
}
.img-container.anim-2 .paper p {
  font-size: 16px;
  line-height: 1.35;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}

.intro-anim__main .icon-item.active ~ .main-anim-img .anim-3 .anim-3-point-1 {
  animation: anim-3-point-1 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-3 .anim-3-point-2 {
  animation: anim-3-point-2 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-3 .anim-3-path-1 path {
  animation: anim-3-path-1 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-3 .anim-3-path-1:before, .intro-anim__main .icon-item.active ~ .main-anim-img .anim-3 .anim-3-path-1:after {
  animation: anim-3-path-1-dot 7.2s linear infinite;
  animation-fill-mode: both;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-3 .anim-3-path-1::after {
  animation-delay: 1s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-3 .anim-3-path-2 path {
  animation: anim-3-path-2 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-3 .anim-3-path-2:before, .intro-anim__main .icon-item.active ~ .main-anim-img .anim-3 .anim-3-path-2:after {
  animation: anim-3-path-2-dot 7.2s linear infinite;
  animation-fill-mode: both;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-3 .anim-3-path-2::after {
  animation-delay: 0.75s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-3 .paper-video {
  animation: anim-3-show-poster-1 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-3 .paper-video img, .intro-anim__main .icon-item.active ~ .main-anim-img .anim-3 .paper-video video {
  animation: anim-3-show-poster-1 7.2s linear infinite;
  animation-fill-mode: both;
  animation-delay: 0.5s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-3 .paper-camera-info {
  animation: anim-3-show-poster-2 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-3 .paper-camera-info .camera-info {
  animation: anim-3-show-poster-2 7.2s linear infinite;
  animation-fill-mode: both;
  animation-delay: 0.5s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-3 .paper-camera-info .camera-info .info-icon {
  animation: anim-3-pulse-info 1s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-3 .paper-camera-info .show-order-1,
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-3 .paper-camera-info .show-order-2,
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-3 .paper-camera-info .show-order-3 {
  animation: anim-3-show-poster-2 7.2s linear infinite;
  animation-fill-mode: both;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-3 .paper-camera-info .show-order-1 {
  animation-delay: 0.5s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-3 .paper-camera-info .show-order-2 {
  animation-delay: 1s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-3 .paper-camera-info .show-order-3 {
  animation-delay: 1.5s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-3 .paper-camera-info .numbers:after {
  content: "";
  animation: show-3-numbers 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-3 .paper-camera-info .address-1:after {
  content: "";
  animation: show-3-address-1 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-3 .paper-camera-info .address-2:after {
  content: "";
  animation: show-3-address-2 7.2s linear infinite;
}

@keyframes anim-3-point-1 {
  0%, 15% {
    transform: scale(0);
    opacity: 0;
  }
  20%, 30.01%, 40%, 50.01%, 90% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(53, 66, 245, 0.2823529412), 0 0 0 0 rgba(53, 66, 245, 0.1450980392);
  }
  30%, 50% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 15px rgba(53, 66, 245, 0), 0 0 0 30px rgba(53, 66, 245, 0);
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}
@keyframes anim-3-path-1 {
  0%, 20% {
    stroke-dashoffset: 120;
    opacity: 1;
  }
  30%, 90% {
    stroke-dashoffset: 240;
    opacity: 1;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 240;
  }
}
@keyframes anim-3-path-1-dot {
  0%, 20% {
    opacity: 0;
    left: 27px;
    top: -2px;
    transform: scale(1);
  }
  21%, 50.01% {
    opacity: 1;
    left: 27px;
    top: -2px;
  }
  27%, 57% {
    left: 5px;
    top: -2px;
  }
  30%, 60% {
    opacity: 1;
    transform: scale(1);
    left: -3px;
    top: 11px;
  }
  40%, 50%, 70%, 100% {
    opacity: 0;
    transform: scale(1.5);
    top: 77px;
    left: -3px;
  }
}
@keyframes anim-3-path-2 {
  0%, 30% {
    stroke-dashoffset: 120;
    opacity: 1;
  }
  40%, 90% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes anim-3-point-2 {
  0%, 20% {
    transform: scale(0);
    opacity: 0;
  }
  30%, 40.01%, 50%, 60.01%, 90% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(124, 225, 157, 0.2823529412), 0 0 0 0 rgba(124, 225, 157, 0.1450980392);
  }
  40%, 60% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 15px rgba(124, 225, 158, 0), 0 0 0 30px rgba(124, 225, 158, 0);
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}
@keyframes anim-3-path-2-dot {
  0%, 30% {
    opacity: 0;
    left: 0;
  }
  31%, 50.01%, 70.01% {
    opacity: 1;
    left: 0;
  }
  40%, 50%, 60%, 70%, 80%, 100% {
    opacity: 0;
    left: 45px;
    transform: scale(1.5);
  }
}
@keyframes anim-3-show-poster-1 {
  0%, 30%, 100% {
    opacity: 0;
    transform: translateY(-9px);
  }
  35%, 90% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes anim-3-show-poster-2 {
  0%, 40%, 100% {
    opacity: 0;
    transform: translateY(-9px);
  }
  45%, 90% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes anim-3-pulse-info {
  0%, 50.01%, 100% {
    box-shadow: 0 0 0 0 rgba(53, 66, 245, 0.2823529412), 0 0 0 0 rgba(53, 66, 245, 0.1450980392);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(53, 66, 245, 0), 0 0 0 15px rgba(53, 66, 245, 0);
  }
}
@keyframes show-3-numbers {
  0%, 50% {
    content: "";
  }
  50.25% {
    content: "F";
  }
  50.5% {
    content: "E";
  }
  50.75% {
    content: "D";
  }
  51% {
    content: "1";
  }
  51.25% {
    content: "1B";
  }
  51.5% {
    content: "1A";
  }
  51.75% {
    content: "1!";
  }
  52% {
    content: "12";
  }
  52.25% {
    content: "12X";
  }
  52.5% {
    content: "12T";
  }
  52.75% {
    content: "12l";
  }
  53% {
    content: "123";
  }
  53.25% {
    content: "123Y";
  }
  53.5% {
    content: "123!";
  }
  53.75% {
    content: "123:";
  }
  54% {
    content: "1236";
  }
  54.25% {
    content: "1236!";
  }
  54.5% {
    content: "1236:";
  }
  54.75% {
    content: "1236$";
  }
  55% {
    content: "12365!";
  }
  55.25% {
    content: "12365:";
  }
  55.5% {
    content: "12365_";
  }
  55.75% {
    content: "123654_";
  }
  56% {
    content: "123654E";
  }
  56.25% {
    content: "123654T";
  }
  56.5% {
    content: "1236549";
  }
  56.75% {
    content: "1236549w";
  }
  57% {
    content: "12365498%";
  }
  57.25% {
    content: "12365498(";
  }
  57.5% {
    content: "123654987";
  }
  60%, 100% {
    content: "123654987";
  }
}
@keyframes show-3-address-1 {
  0%, 60% {
    content: "";
  }
  60.25% {
    content: "%";
  }
  60.5% {
    content: "@";
  }
  60.75% {
    content: "V.";
  }
  61% {
    content: "3";
  }
  61.25% {
    content: "3H";
  }
  61.5% {
    content: "3%";
  }
  61.75% {
    content: "3(";
  }
  62% {
    content: "37";
  }
  62.25% {
    content: "37%";
  }
  62.5% {
    content: "37#";
  }
  62.75% {
    content: "37!";
  }
  63% {
    content: "379";
  }
  63.25% {
    content: "379F";
  }
  63.5% {
    content: "379}";
  }
  63.75% {
    content: "379 ";
  }
  64% {
    content: "379 F";
  }
  64.25% {
    content: "379 H";
  }
  64.5% {
    content: "379 0";
  }
  64.75% {
    content: "379 E";
  }
  65% {
    content: "379 E,";
  }
  65.25% {
    content: "379 E:";
  }
  65.5% {
    content: "379 E'";
  }
  65.75% {
    content: "379 E.";
  }
  66% {
    content: "379 E.F";
  }
  66.25% {
    content: "379 E.:";
  }
  66.5% {
    content: "379 E.D";
  }
  66.75% {
    content: "379 E. ";
  }
  67% {
    content: "379 E. F";
  }
  67.25% {
    content: "379 E. !";
  }
  67.5% {
    content: "379 E. L";
  }
  67.75% {
    content: "379 E. P";
  }
  68% {
    content: "379 E. P#";
  }
  68.25% {
    content: "379 E. PH!";
  }
  68.5% {
    content: "379 E. P%";
  }
  68.75% {
    content: "379 E. Pa";
  }
  69% {
    content: "379 E. PaP";
  }
  69.25% {
    content: "379 E. Pao";
  }
  69.5% {
    content: "379 E. Pa%";
  }
  69.75% {
    content: "379 E. Pac";
  }
  70% {
    content: "379 E. Pac@";
  }
  70.25% {
    content: "379 E. Pac#";
  }
  70.5% {
    content: "379 E. Pac^";
  }
  70.75% {
    content: "379 E. Paci";
  }
  71% {
    content: "379 E. PaciB";
  }
  71.25% {
    content: "379 E. Paci ";
  }
  71.5% {
    content: "379 E. PaciO";
  }
  71.75% {
    content: "379 E. Pacif";
  }
  72% {
    content: "379 E. Pacif#";
  }
  72.25% {
    content: "379 E. Pacif!";
  }
  72.5% {
    content: "379 E. Pacif:";
  }
  72.75% {
    content: "379 E. Pacifi";
  }
  73% {
    content: "379 E. Pacific";
  }
  73.25% {
    content: "379 E. Pacific!";
  }
  73.5% {
    content: "379 E. Pacific:";
  }
  73.75% {
    content: "379 E. Pacific.";
  }
  74% {
    content: "379 E. Pacific ";
  }
  74.25% {
    content: "379 E. Pacific F";
  }
  74.5% {
    content: "379 E. Pacific E";
  }
  74.75% {
    content: "379 E. Pacific Y";
  }
  75% {
    content: "379 E. Pacific S";
  }
  75.25% {
    content: "379 E. Pacific S#";
  }
  75.5% {
    content: "379 E. Pacific S!";
  }
  75.75% {
    content: "379 E. Pacific S:";
  }
  76% {
    content: "379 E. Pacific St";
  }
  76.25% {
    content: "379 E. Pacific St#";
  }
  76.5% {
    content: "379 E. Pacific St^";
  }
  76.75% {
    content: "379 E. Pacific St@";
  }
  77%, 100% {
    content: "379 E. Pacific St.";
  }
}
@keyframes show-3-address-2 {
  0%, 60% {
    content: "";
  }
  60.25% {
    content: "%";
  }
  60.5% {
    content: "@";
  }
  60.75% {
    content: "V.";
  }
  61% {
    content: "N";
  }
  61.25% {
    content: "NH";
  }
  61.5% {
    content: "N%";
  }
  61.75% {
    content: "N(";
  }
  62% {
    content: "Ne";
  }
  62.25% {
    content: "Ne%";
  }
  62.5% {
    content: "Ne#";
  }
  62.75% {
    content: "Ne!";
  }
  63% {
    content: "New";
  }
  63.25% {
    content: "NewF";
  }
  63.5% {
    content: "New}";
  }
  63.75% {
    content: "New ";
  }
  64% {
    content: "New F";
  }
  64.25% {
    content: "New H";
  }
  64.5% {
    content: "New 0";
  }
  64.75% {
    content: "New E";
  }
  65% {
    content: "New Y,";
  }
  65.25% {
    content: "New Y:";
  }
  65.5% {
    content: "New Y'";
  }
  65.75% {
    content: "New Y";
  }
  66% {
    content: "New YoF";
  }
  66.25% {
    content: "New Yo:";
  }
  66.5% {
    content: "New YoD";
  }
  66.75% {
    content: "New Yo ";
  }
  67% {
    content: "New Yor";
  }
  67.25% {
    content: "New Yor!";
  }
  67.5% {
    content: "New YorL";
  }
  67.75% {
    content: "New YorP";
  }
  68% {
    content: "New York#";
  }
  68.25% {
    content: "New YorkH!";
  }
  68.5% {
    content: "New York%";
  }
  68.75% {
    content: "New Yorka";
  }
  69% {
    content: "New York,P";
  }
  69.25% {
    content: "New York,o";
  }
  69.5% {
    content: "New York,%";
  }
  69.75% {
    content: "New York, ";
  }
  70% {
    content: "New York, @";
  }
  70.25% {
    content: "New York, #";
  }
  70.5% {
    content: "New York, N^";
  }
  70.75% {
    content: "New York, Ni";
  }
  71% {
    content: "New York, NiB";
  }
  71.25% {
    content: "New York Ni ";
  }
  71.5% {
    content: "New York, NYO";
  }
  71.75% {
    content: "New York, NYf";
  }
  72% {
    content: "New York, NYf#";
  }
  72.25% {
    content: "New York, NY !";
  }
  72.5% {
    content: "New York, NY :";
  }
  72.75% {
    content: "New York, NY i";
  }
  73% {
    content: "New York, NY 1c";
  }
  73.25% {
    content: "New York, NY 1c!";
  }
  73.5% {
    content: "New York, NY 1c:";
  }
  73.75% {
    content: "New York, NY 1c.";
  }
  74% {
    content: "New York, NY 10 ";
  }
  74.25% {
    content: "New York, NY 10 F";
  }
  74.5% {
    content: "New York, NY 10 E";
  }
  74.75% {
    content: "New York, NY 100Y";
  }
  75% {
    content: "New York, NY 100S";
  }
  75.25% {
    content: "New York, NY 100S#";
  }
  75.5% {
    content: "New York, NY 1002S!";
  }
  75.75% {
    content: "New York, NY 1002S:";
  }
  76%, 100% {
    content: "New York, NY 10027";
  }
}
.img-container.anim-3 .anim-3-point-1 {
  position: absolute;
  top: 26px;
  left: 97px;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: #3542F5;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.img-container.anim-3 .anim-3-point-1 img {
  width: 40px;
  object-fit: contain;
}
.img-container.anim-3 .anim-3-point-2 {
  position: absolute;
  top: 40px;
  left: 208px;
  width: 47px;
  height: 47px;
  border-radius: 50%;
  background: #7CE19D;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.img-container.anim-3 .anim-3-point-2 img {
  width: 24px;
  object-fit: contain;
}
.img-container.anim-3 .anim-3-path-1 {
  position: absolute;
  top: 60px;
  left: 41px;
  z-index: 2;
}
.img-container.anim-3 .anim-3-path-1 path {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
}
.img-container.anim-3 .anim-3-path-1:before, .img-container.anim-3 .anim-3-path-1:after {
  content: "";
  position: absolute;
  left: 5px;
  top: -2px;
  width: 8px;
  height: 8px;
  background: #3542F5;
  border-radius: 50%;
  opacity: 0;
}
.img-container.anim-3 .anim-3-path-1::after {
  animation-delay: 1s;
}
.img-container.anim-3 .anim-3-path-2 {
  position: absolute;
  top: 48px;
  left: 266px;
  z-index: 2;
}
.img-container.anim-3 .anim-3-path-2 path {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
}
.img-container.anim-3 .anim-3-path-2:before, .img-container.anim-3 .anim-3-path-2:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 11px;
  width: 8px;
  height: 8px;
  background: #3542F5;
  border-radius: 50%;
  opacity: 0;
}
.img-container.anim-3 .anim-3-path-2::after {
  animation-delay: 0.75s;
}
.img-container.anim-3 .paper-video {
  position: absolute;
  top: 138px;
  left: 24px;
  width: 242px;
  height: 158px;
  border-radius: 8px;
  border: 1px solid #1c1f74;
  backdrop-filter: blur(10px);
  padding: 8px 7px;
  opacity: 0;
}
.img-container.anim-3 .paper-video img, .img-container.anim-3 .paper-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-container.anim-3 .paper-camera-info {
  position: absolute;
  top: 36px;
  right: 29px;
  width: 207px;
  height: 258px;
  border-radius: 8px;
  border: 1px solid #1c1f74;
  backdrop-filter: blur(10px);
  padding: 16px 15px 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
}
.img-container.anim-3 .paper-camera-info .camera-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 11px;
  text-transform: uppercase;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 22px;
  max-width: 80px;
}
.img-container.anim-3 .paper-camera-info .camera-info .info-icon {
  min-width: 25px;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  background: #3542F5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-container.anim-3 .paper-camera-info .camera-info .info-icon img {
  height: 12px;
  object-fit: contain;
}
.img-container.anim-3 .paper-camera-info .divider {
  width: 100%;
  height: 1px;
  padding: 1px 0;
  margin: 11px 0;
  opacity: 0.5;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #2098FD 49.5%, rgba(255, 255, 255, 0) 100%);
}
.img-container.anim-3 .paper-camera-info p {
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5019607843);
  opacity: 0.5;
  line-height: 1.4;
  margin: 0;
}
.img-container.anim-3 .paper-camera-info span {
  display: block;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
}
.img-container.anim-3 .paper-camera-info span.numbers {
  font-size: 20px;
  line-height: 1.4;
}

.intro-anim__main .icon-item.active ~ .main-anim-img .anim-4 .first-text {
  animation: anim-4-show-first-text 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-4 .first-text span::before {
  content: "";
  animation: type-4-show-first-text 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-4 .text-line-1 path {
  animation: anim-4-show-text-line-1 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-4 .compill-logo {
  animation: compill-anim-4 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-4 .compill-logo::after, .intro-anim__main .icon-item.active ~ .main-anim-img .anim-4 .compill-logo::before {
  animation: compill-anim-4 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-4 .compill-logo::after {
  animation: compill-anim-4 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-4 .compill-logo img {
  animation: rotate-logo-anim-4 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-4 .text-line-2 path {
  animation: anim-4-show-text-line-2 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-4 .second-text {
  animation: anim-4-show-second-text 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-4 .second-text span:before {
  animation: type-4-show-second-text 7.2s linear infinite;
}

@keyframes anim-4-show-first-text {
  0%, 25%, 100% {
    opacity: 0;
    transform: translateX(-100px) scale(0);
  }
  30%, 90% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@keyframes type-4-show-first-text {
  0%, 35% {
    content: "";
  }
  37.5% {
    content: "我";
  }
  40% {
    content: "我家";
  }
  42.5% {
    content: "我家外";
  }
  45% {
    content: "我家外面";
  }
  47.5% {
    content: "我家外面有";
  }
  50%, 100% {
    content: "我家外面有";
  }
}
@keyframes anim-4-show-text-line-1 {
  0%, 40%, 100% {
    stroke-dashoffset: 240;
  }
  50%, 90% {
    stroke-dashoffset: 0;
  }
}
@keyframes compill-anim-4 {
  20%, 50%, 55.01%, 60%, 65.01%, 70% {
    box-shadow: 0 0 0 0 rgba(53, 66, 245, 0.2039215686), 0 0 0 0 #090C26;
    opacity: 1;
  }
  55%, 65%, 75%, 90% {
    box-shadow: 0 0 0 30px rgba(53, 66, 245, 0), 0 0 0 60px rgba(9, 12, 38, 0);
    opacity: 1;
  }
  0%, 15%, 95%, 100% {
    opacity: 0;
  }
}
@keyframes rotate-logo-anim-4 {
  0%, 50%, 55.01%, 60%, 65.01%, 70.01% {
    transform: scale(1);
  }
  52.5%, 62.5%, 72.5% {
    transform: scale(1.2);
  }
  55%, 65%, 75%, 100% {
    transform: scale(1);
  }
}
@keyframes anim-4-show-text-line-2 {
  0%, 55%, 100% {
    stroke-dashoffset: 240;
  }
  65%, 90% {
    stroke-dashoffset: 480;
  }
}
@keyframes anim-4-show-second-text {
  0%, 65%, 100% {
    opacity: 0;
    transform: translateX(100px) scale(0);
  }
  70%, 90% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@keyframes type-4-show-second-text {
  0%, 68% {
    content: "";
  }
  69% {
    content: "W";
  }
  70% {
    content: "We";
  }
  71% {
    content: "We g";
  }
  72% {
    content: "We go";
  }
  73% {
    content: "We got";
  }
  74% {
    content: "We got ";
  }
  75% {
    content: "We got r";
  }
  76% {
    content: "We got ro";
  }
  77% {
    content: "We got rob";
  }
  78% {
    content: "We got robb";
  }
  79% {
    content: "We got robbe";
  }
  80%, 100% {
    content: "We got robbed";
  }
}
.img-container.anim-4 .first-text {
  position: absolute;
  top: 14px;
  left: 9px;
  width: 212px;
  height: 76px;
  background-image: url("../img/mini-anim/anim-4/first-text.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.img-container.anim-4 .first-text span {
  display: block;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
}
.img-container.anim-4 .first-text span::before {
  content: "";
}
.img-container.anim-4 .text-line-1 {
  position: absolute;
  top: 97px;
  left: 115px;
}
.img-container.anim-4 .text-line-1 path {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
}
.img-container.anim-4 .compill-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 138px;
  height: 138px;
  border-radius: 50%;
  background: rgba(53, 66, 245, 0.2039215686);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.img-container.anim-4 .compill-logo::after, .img-container.anim-4 .compill-logo::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: rgba(53, 66, 245, 0.2039215686);
}
.img-container.anim-4 .compill-logo::after {
  width: 76px;
  height: 76px;
  background: #090C26;
}
.img-container.anim-4 .compill-logo img {
  width: 35px;
  object-fit: contain;
  position: relative;
  z-index: 2;
}
.img-container.anim-4 .text-line-2 {
  position: absolute;
  right: 114px;
  bottom: 94px;
}
.img-container.anim-4 .text-line-2 path {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
}
.img-container.anim-4 .second-text {
  position: absolute;
  bottom: 22px;
  right: 20px;
  width: 188px;
  height: 70px;
  background-image: url("../img/mini-anim/anim-4/second-text.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.img-container.anim-4 .second-text span {
  display: block;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
}
.img-container.anim-4 .second-text span:before {
  content: "";
}

.intro-anim__main .icon-item.active ~ .main-anim-img .anim-5 .car-info-image {
  animation: anim-5-show-car-info-image 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-5 .car-info-image::after {
  animation: anim-5-video-line 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-5 .car-info-path path {
  animation: anim-5-car-info-path 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-5 .car-info-path::after, .intro-anim__main .icon-item.active ~ .main-anim-img .anim-5 .car-info-path::before {
  animation: anim-5-car-info-path-dot 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-5 .car-info-path::after {
  animation-delay: 2s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-5 .car-dot-map {
  animation: anim-5-car-dot-map 1s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-5 .car-info-paper {
  animation: anim-3-show-poster-2 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-5 .car-info-paper .car-info {
  animation: anim-3-show-poster-2 7.2s linear infinite;
  animation-fill-mode: both;
  animation-delay: 0.5s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-5 .car-info-paper .car-info .info-icon {
  animation: anim-3-pulse-info 1s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-5 .car-info-paper .car-type:before {
  content: "";
  animation: anim-5-car-type 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-5 .car-info-paper .licanse:before {
  content: "";
  animation: anim-5-licanse 7.2s linear infinite;
  animation-fill-mode: both;
  animation-delay: 0.25s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-5 .car-info-paper .person:before {
  content: "";
  animation: anim-5-person 7.2s linear infinite;
  animation-fill-mode: both;
  animation-delay: 0.5s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-5 .car-info-paper .show-order-1,
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-5 .car-info-paper .show-order-2,
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-5 .car-info-paper .show-order-3 {
  animation: anim-3-show-poster-2 7.2s linear infinite;
  animation-fill-mode: both;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-5 .car-info-paper .show-order-1 {
  animation-delay: 0.5s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-5 .car-info-paper .show-order-2 {
  animation-delay: 1s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-5 .car-info-paper .show-order-3 {
  animation-delay: 1.5s;
}

@keyframes anim-5-show-car-info-image {
  0%, 20%, 100% {
    opacity: 0;
    transform: translateY(-9px);
  }
  25%, 90% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes anim-5-video-line {
  0%, 20% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
    width: 15px;
  }
  90% {
    opacity: 0.5;
    width: 100px;
  }
  100% {
    opacity: 0;
    width: 100px;
  }
}
@keyframes anim-5-car-info-path {
  0%, 35%, 100% {
    stroke-dashoffset: 400;
  }
  50%, 90% {
    stroke-dashoffset: 0;
  }
}
@keyframes anim-5-car-info-path-dot {
  0%, 35% {
    opacity: 0;
    top: 200px;
    left: -5px;
    transform: scale(1);
  }
  35.01% {
    opacity: 0.5;
    top: 200px;
    left: -5px;
    transform: scale(1);
  }
  38% {
    opacity: 0.6;
    top: 200px;
    left: 9px;
    transform: scale(1);
  }
  40% {
    opacity: 0.7;
    top: 190px;
    left: 20px;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    top: 10px;
    left: 20px;
    transform: scale(1);
  }
  52.5% {
    opacity: 1;
    top: -2px;
    left: 33px;
    transform: scale(1.2);
  }
  55% {
    opacity: 0;
    top: -2px;
    left: 55px;
    transform: scale(1.4);
  }
}
@keyframes anim-5-car-dot-map {
  0%, 80.01%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  80% {
    opacity: 0;
    transform: scale(4);
  }
}
@keyframes anim-5-car-type {
  0%, 60% {
    content: "";
  }
  60.25% {
    content: "%";
  }
  60.5% {
    content: "@";
  }
  60.75% {
    content: "V.";
  }
  61% {
    content: "S";
  }
  61.25% {
    content: "SH";
  }
  61.5% {
    content: "S%";
  }
  61.75% {
    content: "S(";
  }
  62% {
    content: "Se";
  }
  62.25% {
    content: "Se%";
  }
  62.5% {
    content: "Se#";
  }
  62.75% {
    content: "Se!";
  }
  63% {
    content: "Sed";
  }
  63.25% {
    content: "SedF";
  }
  63.5% {
    content: "Sed}";
  }
  63.75% {
    content: "Sed ";
  }
  64% {
    content: "Sed F";
  }
  64.25% {
    content: "SedaH";
  }
  64.5% {
    content: "Seda0";
  }
  64.75% {
    content: "SedaE";
  }
  65% {
    content: "SedaE,";
  }
  65.25% {
    content: "Sedan";
  }
  65.5% {
    content: "Sedan";
  }
  65.75% {
    content: "Sedan";
  }
  66% {
    content: "SedanF";
  }
  66.25%, 100% {
    content: "Sedan";
  }
}
@keyframes anim-5-licanse {
  0%, 60% {
    content: "";
  }
  60.25% {
    content: "%";
  }
  60.5% {
    content: "@";
  }
  60.75% {
    content: "V.";
  }
  61% {
    content: "A";
  }
  61.25% {
    content: "AH";
  }
  61.5% {
    content: "A%";
  }
  61.75% {
    content: "A(";
  }
  62% {
    content: "AB";
  }
  62.25% {
    content: "AB%";
  }
  62.5% {
    content: "AB#";
  }
  62.75% {
    content: "AB!";
  }
  63% {
    content: "ABC";
  }
  63.25% {
    content: "ABCF";
  }
  63.5% {
    content: "ABC}";
  }
  63.75% {
    content: "ABC ";
  }
  64% {
    content: "ABC1F";
  }
  64.25% {
    content: "ABC1H";
  }
  64.5% {
    content: "ABC10";
  }
  64.75% {
    content: "ABC1E";
  }
  65% {
    content: "ABC12E,";
  }
  65.25% {
    content: "ABC12E:";
  }
  65.5% {
    content: "ABC12E'";
  }
  65.75% {
    content: "ABC12E.";
  }
  66% {
    content: "ABC12E.F";
  }
  66.25% {
    content: "ABC123:";
  }
  66.5% {
    content: "ABC123D";
  }
  66.75% {
    content: "ABC123 ";
  }
  67% {
    content: "ABC123 F";
  }
  67.25% {
    content: "ABC123 !";
  }
  67.5%, 100% {
    content: "ABC1234";
  }
}
@keyframes anim-5-person {
  0%, 60% {
    content: "";
  }
  60.25% {
    content: "%";
  }
  60.5% {
    content: "@";
  }
  60.75% {
    content: "V.";
  }
  61% {
    content: "R";
  }
  61.25% {
    content: "RH";
  }
  61.5% {
    content: "R%";
  }
  61.75% {
    content: "R(";
  }
  62% {
    content: "Ro";
  }
  62.25% {
    content: "Ro%";
  }
  62.5% {
    content: "Ro#";
  }
  62.75% {
    content: "Ro!";
  }
  63% {
    content: "Ron";
  }
  63.25% {
    content: "RonF";
  }
  63.5% {
    content: "Ron}";
  }
  63.75% {
    content: "Ron ";
  }
  64% {
    content: "RonaF";
  }
  64.25% {
    content: "RonaH";
  }
  64.5% {
    content: "Rona0";
  }
  64.75% {
    content: "RonaE";
  }
  65% {
    content: "RonalE,";
  }
  65.25% {
    content: "RonalE:";
  }
  65.5% {
    content: "RonalE'";
  }
  65.75% {
    content: "RonalE.";
  }
  66% {
    content: "RonaldF";
  }
  66.25% {
    content: "Ronald:";
  }
  66.5% {
    content: "RonaldD";
  }
  66.75% {
    content: "Ronald ";
  }
  67% {
    content: "Ronald F";
  }
  67.25% {
    content: "Ronald !";
  }
  67.5% {
    content: "Ronald L";
  }
  67.75% {
    content: "Ronald P";
  }
  68% {
    content: "Ronald R#";
  }
  68.25% {
    content: "Ronald RH!";
  }
  68.5% {
    content: "Ronald R%";
  }
  68.75% {
    content: "Ronald Ra";
  }
  69% {
    content: "Ronald RiP";
  }
  69.25% {
    content: "Ronald Rio";
  }
  69.5% {
    content: "Ronald Ri%";
  }
  69.75% {
    content: "Ronald Ric";
  }
  70% {
    content: "Ronald Rich@";
  }
  70.25% {
    content: "Ronald Rich#";
  }
  70.5% {
    content: "Ronald Rich^";
  }
  70.75% {
    content: "Ronald Richi";
  }
  71% {
    content: "Ronald RichaB";
  }
  71.25% {
    content: "Ronald Richa ";
  }
  71.5% {
    content: "Ronald RichaO";
  }
  71.75% {
    content: "Ronald Richaf";
  }
  72% {
    content: "Ronald Richar#";
  }
  72.25% {
    content: "Ronald Richar!";
  }
  72.5% {
    content: "Ronald Richar:";
  }
  72.75% {
    content: "Ronald Richari";
  }
  73% {
    content: "Ronald Richard";
  }
  73.25% {
    content: "Ronald Richard!";
  }
  73.5% {
    content: "Ronald Richard:";
  }
  73.75% {
    content: "Ronald Richard.";
  }
  74%, 100% {
    content: "Ronald Richards";
  }
}
.img-container.anim-5 .car-info-image {
  position: absolute;
  width: 242px;
  height: 290px;
  top: 9px;
  left: 9px;
  border-radius: 6px;
  background: #000;
  overflow: hidden;
  opacity: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img-container.anim-5 .car-info-image img, .img-container.anim-5 .car-info-image video {
  width: 229px;
  height: 276px;
  object-fit: cover;
  border-radius: 6px;
}
.img-container.anim-5 .car-info-image .panel {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 226px;
  height: 32px;
  object-fit: cover;
  z-index: 2;
  opacity: 0.5;
}
.img-container.anim-5 .car-info-image::after {
  content: "";
  position: absolute;
  bottom: 22px;
  left: 100px;
  width: 15px;
  height: 2px;
  background-color: #E61428;
  opacity: 0.5;
  z-index: 3;
}
.img-container.anim-5 .car-info-path {
  position: absolute;
  left: 263px;
  top: 63px;
  z-index: 3;
}
.img-container.anim-5 .car-info-path path {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
}
.img-container.anim-5 .car-info-path::after, .img-container.anim-5 .car-info-path::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E93B48;
  z-index: 3;
  opacity: 0;
  top: -2px;
  left: 33px;
}
.img-container.anim-5 .car-dot-map {
  position: absolute;
  width: 10px;
  height: 10px;
  top: 172px;
  left: 308px;
  background: #3542F5;
  border-radius: 50%;
  z-index: 1;
  opacity: 0;
}
.img-container.anim-5 .car-info-paper {
  position: absolute;
  width: 207px;
  height: 287px;
  top: 11px;
  right: 11px;
  border: 1px solid #1c1f74;
  border-radius: 6px;
  z-index: 3;
  backdrop-filter: blur(10px);
  box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.5019607843);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 15px 15px;
  opacity: 0;
}
.img-container.anim-5 .car-info-paper .car-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 11px;
  text-transform: uppercase;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 22px;
  max-width: 80px;
  opacity: 0;
}
.img-container.anim-5 .car-info-paper .car-info .info-icon {
  min-width: 25px;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  background: #3542F5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-container.anim-5 .car-info-paper .car-info .info-icon img {
  height: 12px;
  object-fit: contain;
}
.img-container.anim-5 .car-info-paper .divider {
  width: 100%;
  height: 1px;
  padding: 1px 0;
  margin: 11px 0;
  opacity: 0.5;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #2098FD 49.5%, rgba(255, 255, 255, 0) 100%);
}
.img-container.anim-5 .car-info-paper p {
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5019607843);
  opacity: 0.5;
  line-height: 1.4;
  margin: 0;
}
.img-container.anim-5 .car-info-paper span {
  display: block;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  height: 28px;
}

.intro-anim__main .icon-item.active ~ .main-anim-img .anim-6 > img {
  animation: anim-6-bg 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-6 .user-1 {
  animation: anim-6-user-1 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-6 .user-1-text {
  animation: anim-6-user-1-text 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-6 .user-1-text span:before {
  content: "";
  animation: anim-6-user-1-message 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-6 .user-2 {
  animation: anim-6-user-2 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-6 .user-2-text {
  animation: anim-6-user-2-text 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-6 .user-2-text span:before {
  content: "";
  animation: anim-6-user-2-message 7.2s linear infinite;
}

@keyframes anim-6-bg {
  0%, 20%, 100% {
    opacity: 0;
    transform: scale(0.5);
  }
  25%, 95% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes anim-6-user-1 {
  0%, 25%, 100% {
    opacity: 0;
    transform: scale(0.5) translateY(16px);
  }
  29% {
    opacity: 1;
    transform: scale(1.2) translateY(0);
  }
  30%, 35%, 45.01%, 55%, 65.01%, 95% {
    opacity: 1;
    transform: scale(1) translateY(0);
    box-shadow: 0px 0px 0 0px rgba(53, 66, 245, 0.1450980392), 0px 0px 0 0px rgba(53, 66, 245, 0.2549019608);
  }
  45%, 65% {
    opacity: 1;
    transform: scale(1) translateY(0);
    box-shadow: 0px 0px 0 15px rgba(53, 66, 245, 0), 0px 0px 0 30px rgba(53, 66, 245, 0.0078431373);
  }
}
@keyframes anim-6-user-1-text {
  0%, 30%, 100% {
    opacity: 0;
    transform: scale(0.2);
    left: 46px;
  }
  35%, 95% {
    opacity: 1;
    transform: scale(1);
    left: 146px;
  }
}
@keyframes anim-6-user-1-message {
  0%, 35% {
    content: "";
  }
  36% {
    content: "9";
  }
  37% {
    content: "91";
  }
  38% {
    content: "911";
  }
  39% {
    content: "911 ";
  }
  40% {
    content: "911 W";
  }
  41% {
    content: "911 Wh";
  }
  42% {
    content: "911 Wha";
  }
  43% {
    content: "911 What";
  }
  44% {
    content: "911 What ";
  }
  45% {
    content: "911 What i";
  }
  46% {
    content: "911 What is";
  }
  47% {
    content: "911 What is ";
  }
  48% {
    content: "911 What is y";
  }
  49% {
    content: "911 What is yo";
  }
  50% {
    content: "911 What is you";
  }
  51% {
    content: "911 What is your";
  }
  52% {
    content: "911 What is your ";
  }
  53% {
    content: "911 What is your e";
  }
  54% {
    content: "911 What is your em";
  }
  55% {
    content: "911 What is your eme";
  }
  56% {
    content: "911 What is your emer";
  }
  57% {
    content: "911 What is your emerg";
  }
  58% {
    content: "911 What is your emergen";
  }
  59% {
    content: "911 What is your emergen";
  }
  60% {
    content: "911 What is your emergenc";
  }
  61% {
    content: "911 What is your emergency";
  }
  62%, 100% {
    content: "911 What is your emergency?";
  }
}
@keyframes anim-6-user-2 {
  0%, 45%, 100% {
    opacity: 0;
    transform: scale(0.5) translateY(16px);
  }
  49% {
    opacity: 1;
    transform: scale(1.2) translateY(0);
  }
  50%, 55%, 65.01%, 75%, 85.01%, 95% {
    opacity: 1;
    transform: scale(1) translateY(0);
    box-shadow: 0px 0px 0 0px rgba(53, 66, 245, 0.1450980392), 0px 0px 0 0px rgba(53, 66, 245, 0.2549019608);
  }
  65%, 85% {
    opacity: 1;
    transform: scale(1) translateY(0);
    box-shadow: 0px 0px 0 15px rgba(53, 66, 245, 0), 0px 0px 0 30px rgba(53, 66, 245, 0.0078431373);
  }
}
@keyframes anim-6-user-2-text {
  0%, 65%, 100% {
    opacity: 0;
    transform: scale(0.2);
    right: 46px;
  }
  70%, 95% {
    opacity: 1;
    transform: scale(1);
    right: 158px;
  }
}
@keyframes anim-6-user-2-message {
  0%, 65% {
    content: "";
  }
  66% {
    content: "M";
  }
  67% {
    content: "My";
  }
  68% {
    content: "My ";
  }
  69% {
    content: "My s";
  }
  70% {
    content: "My so";
  }
  71% {
    content: "My son";
  }
  72% {
    content: "My son ";
  }
  73% {
    content: "My son i";
  }
  74% {
    content: "My son is";
  }
  75% {
    content: "My son is ";
  }
  76% {
    content: "My son is c";
  }
  77% {
    content: "My son is ch";
  }
  78% {
    content: "My son is cho";
  }
  79% {
    content: "My son is chok";
  }
  80% {
    content: "My son is choki";
  }
  81% {
    content: "My son is chokin";
  }
  82%, 100% {
    content: "My son is choking";
  }
}
.img-container.anim-6 > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.img-container.anim-6 .user-1 {
  position: absolute;
  width: 75px;
  height: 72px;
  top: 55px;
  left: 41px;
  border-radius: 50%;
  background: #3542F5;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  opacity: 0;
}
.img-container.anim-6 .user-1-text {
  position: absolute;
  left: 146px;
  top: 59px;
  width: 344px;
  height: 63px;
  background: url("../img/mini-anim/anim-6/text-1.svg") no-repeat center center;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.img-container.anim-6 .user-1-text span {
  font-size: 22px;
  line-height: 1.4;
  color: #fff;
  font-weight: 400;
  width: 297px;
}
.img-container.anim-6 .user-2 {
  position: absolute;
  width: 75px;
  height: 72px;
  right: 45px;
  bottom: 41px;
  border-radius: 50%;
  background: #1B1C4F;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  opacity: 0;
}
.img-container.anim-6 .user-2-text {
  position: absolute;
  right: 158px;
  bottom: 39px;
  width: 208px;
  height: 59px;
  background: url("../img/mini-anim/anim-6/text-2.svg") no-repeat center center;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.img-container.anim-6 .user-2-text span {
  font-size: 20px;
  line-height: 1.4;
  color: #fff;
  font-weight: 400;
  width: 162px;
  text-align: right;
}

.intro-anim__main .icon-item.active ~ .main-anim-img .anim-7 > img {
  animation: anim-7-bg 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-7 .drone-point {
  animation: anim-7-drone-point 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-7 .projects {
  animation: anim-7-projects 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-7 .drone-info-paper {
  animation: anim-3-show-poster-2 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-7 .drone-info-paper .drone-info {
  animation: anim-3-show-poster-2 7.2s linear infinite;
  animation-fill-mode: both;
  animation-delay: 0.5s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-7 .drone-info-paper .drone-info .info-icon {
  animation: anim-7-pulse-info 1s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-7 .drone-info-paper .drone-id:before {
  content: "";
  animation: anim-7-drone-id 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-7 .drone-info-paper .date-time:before {
  content: "";
  animation: anim-7-date-time 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-7 .drone-info-paper .drone-address-1:before {
  content: "";
  animation: show-3-address-1 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-7 .drone-info-paper .drone-address-2:before {
  content: "";
  animation: show-3-address-2 7.2s linear infinite;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-7 .drone-info-paper .show-order-1,
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-7 .drone-info-paper .show-order-2,
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-7 .drone-info-paper .show-order-3 {
  animation: anim-3-show-poster-2 7.2s linear infinite;
  animation-fill-mode: both;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-7 .drone-info-paper .show-order-2 {
  animation-delay: 0.5s;
}
.intro-anim__main .icon-item.active ~ .main-anim-img .anim-7 .drone-info-paper .show-order-3 {
  animation-delay: 1s;
}

@keyframes anim-7-bg {
  0%, 20%, 100% {
    opacity: 0;
  }
  25%, 90% {
    opacity: 1;
  }
}
@keyframes anim-7-drone-point {
  0%, 15% {
    top: 50px;
    left: 20px;
    opacity: 0;
    transform: scale(0.5);
  }
  25% {
    opacity: 1;
    transform: scale(0.5);
    top: 100px;
    left: 80px;
  }
  35% {
    opacity: 1;
    transform: scale(0.5);
    top: 125px;
    left: 45px;
  }
  40%, 50.01%, 60%, 70.01%, 90% {
    opacity: 1;
    transform: scale(1);
    top: 156px;
    left: 98px;
    box-shadow: 0px 0px 0 0px rgba(124, 225, 158, 0.3019607843), 0px 0px 0 0px rgba(124, 225, 158, 0.1450980392);
  }
  50%, 70% {
    opacity: 1;
    transform: scale(1);
    top: 156px;
    left: 98px;
    box-shadow: 0px 0px 0 15px rgba(124, 225, 158, 0), 0px 0px 0 30px rgba(124, 225, 158, 0);
  }
  100% {
    opacity: 0;
    transform: scale(0);
    top: 156px;
    left: 98px;
  }
}
@keyframes anim-7-projects {
  0%, 40%, 100% {
    opacity: 0;
    transform: scale(0.5) translate(-100px, 50px);
  }
  45%, 90% {
    opacity: 1;
    transform: scale(1) translate(0);
  }
}
@keyframes anim-7-pulse-info {
  0%, 50.01%, 100% {
    box-shadow: 0 0 0 0 rgba(124, 225, 157, 0.2823529412), 0 0 0 0 rgba(124, 225, 157, 0.1450980392);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(124, 225, 157, 0), 0 0 0 15px rgba(124, 225, 157, 0);
  }
}
@keyframes anim-7-drone-id {
  0%, 55% {
    content: "";
  }
  55.25% {
    content: "%";
  }
  55.5% {
    content: "@";
  }
  55.75% {
    content: "V.";
  }
  56% {
    content: "1";
  }
  56.25% {
    content: "1H";
  }
  56.5% {
    content: "1%";
  }
  56.75% {
    content: "1(";
  }
  57% {
    content: "12";
  }
  57.25% {
    content: "12%";
  }
  57.5% {
    content: "12#";
  }
  57.75% {
    content: "12!";
  }
  58% {
    content: "1239";
  }
  58.25% {
    content: "1239F";
  }
  58.5% {
    content: "1239}";
  }
  58.75% {
    content: "1239 ";
  }
  59% {
    content: "1236F";
  }
  59.25% {
    content: "1236H";
  }
  59.5% {
    content: "12360";
  }
  59.75% {
    content: "1236E";
  }
  59% {
    content: "12365E,";
  }
  59.25% {
    content: "12365E:";
  }
  59.5% {
    content: "12365E'";
  }
  59.75% {
    content: "12365E.";
  }
  60% {
    content: "123654F";
  }
  60.25% {
    content: "123654:";
  }
  60.5% {
    content: "123654D";
  }
  60.75% {
    content: "123654 ";
  }
  61% {
    content: "1236549F";
  }
  61.25% {
    content: "1236549!";
  }
  61.5% {
    content: "1236549L";
  }
  61.75% {
    content: "1236549P";
  }
  62% {
    content: "12365498#";
  }
  62.25% {
    content: "12365498H!";
  }
  62.5% {
    content: "12365498%";
  }
  62.75% {
    content: "12365498a";
  }
  63%, 100% {
    content: "123654987";
  }
}
@keyframes anim-7-date-time {
  0%, 60% {
    content: "";
  }
  60.25% {
    content: "%";
  }
  60.5% {
    content: "@";
  }
  60.75% {
    content: "V.";
  }
  61% {
    content: "0";
  }
  61.25% {
    content: "0H";
  }
  61.5% {
    content: "0%";
  }
  61.75% {
    content: "0(";
  }
  62% {
    content: "01";
  }
  62.25% {
    content: "01%";
  }
  62.5% {
    content: "01#";
  }
  62.75% {
    content: "01!";
  }
  63% {
    content: "01/";
  }
  63.25% {
    content: "01/F";
  }
  63.5% {
    content: "01/}";
  }
  63.75% {
    content: "01/ ";
  }
  64% {
    content: "01/1F";
  }
  64.25% {
    content: "01/1H";
  }
  64.5% {
    content: "01/10";
  }
  64.75% {
    content: "01/1E";
  }
  65% {
    content: "01/10,";
  }
  65.25% {
    content: "01/10:";
  }
  65.5% {
    content: "01/10'";
  }
  65.75% {
    content: "01/10.";
  }
  66% {
    content: "01/10/F";
  }
  66.25% {
    content: "01/10/:";
  }
  66.5% {
    content: "01/10/D";
  }
  66.75% {
    content: "01/10/ ";
  }
  67% {
    content: "01/10/2F";
  }
  67.25% {
    content: "01/10/2!";
  }
  67.5% {
    content: "01/10/2L";
  }
  67.75% {
    content: "01/10/2P";
  }
  68% {
    content: "01/10/20#";
  }
  68.25% {
    content: "01/10/20H!";
  }
  68.5% {
    content: "01/10/20%";
  }
  68.75% {
    content: "01/10/20a";
  }
  69% {
    content: "01/10/202P";
  }
  69.25% {
    content: "01/10/202o";
  }
  69.5% {
    content: "01/10/202%";
  }
  69.75% {
    content: "01/10/202c";
  }
  70% {
    content: "01/10/2025@";
  }
  70.25% {
    content: "01/10/2025#";
  }
  70.5% {
    content: "01/10/2025^";
  }
  70.75% {
    content: "01/10/2025i";
  }
  71% {
    content: "01/10/2025 B";
  }
  71.25% {
    content: "01/10/2025  ";
  }
  71.5% {
    content: "01/10/2025 O";
  }
  71.75% {
    content: "01/10/2025 f";
  }
  72% {
    content: "01/10/2025 1#";
  }
  72.25% {
    content: "01/10/2025 1!";
  }
  72.5% {
    content: "01/10/2025 1:";
  }
  72.75% {
    content: "01/10/2025 1i";
  }
  73% {
    content: "01/10/2025 10c";
  }
  73.25% {
    content: "01/10/2025 10c!";
  }
  73.5% {
    content: "01/10/2025 10c:";
  }
  73.75% {
    content: "01/10/2025 10c.";
  }
  74% {
    content: "01/10/2025 10: ";
  }
  74.25% {
    content: "01/10/2025 10: F";
  }
  74.5% {
    content: "01/10/2025 10: E";
  }
  74.75% {
    content: "01/10/2025 10: Y";
  }
  75% {
    content: "01/10/2025 10:2S";
  }
  75.25% {
    content: "01/10/2025 10:2S#";
  }
  75.5% {
    content: "01/10/2025 10:2S!";
  }
  75.75% {
    content: "01/10/2025 10:2S:";
  }
  76% {
    content: "01/10/2025 10:24t";
  }
  76.25% {
    content: "01/10/2025 10:24t#";
  }
  76.5% {
    content: "01/10/2025 10:24t^";
  }
  76.75% {
    content: "01/10/2025 10:24t@";
  }
  77%, 100% {
    content: "01/10/2025 10:24 AM";
  }
}
.img-container.anim-7 > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.img-container.anim-7 .drone-point {
  position: absolute;
  top: 156px;
  left: 98px;
  min-width: 75px;
  background: #7CE19D;
  border-radius: 50%;
  width: 75px;
  height: 75px;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-container.anim-7 .projects {
  position: absolute;
  left: 108px;
  top: 16px;
  opacity: 0;
}
.img-container.anim-7 .drone-info-paper {
  position: absolute;
  width: 220px;
  height: 287px;
  top: 11px;
  right: 11px;
  border: 1px solid #1c1f74;
  border-radius: 6px;
  z-index: 3;
  backdrop-filter: blur(10px);
  box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.5019607843);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 15px 15px;
  opacity: 0;
}
.img-container.anim-7 .drone-info-paper .drone-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 11px;
  text-transform: uppercase;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 2px;
  max-width: 120px;
  opacity: 0;
}
.img-container.anim-7 .drone-info-paper .drone-info .info-icon {
  min-width: 25px;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  background: #7CE19D;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-container.anim-7 .drone-info-paper .drone-info .info-icon img {
  height: 12px;
  object-fit: contain;
}
.img-container.anim-7 .drone-info-paper .divider {
  width: 100%;
  height: 1px;
  padding: 1px 0;
  margin: 11px 0;
  opacity: 0.5;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #2098FD 49.5%, rgba(255, 255, 255, 0) 100%);
}
.img-container.anim-7 .drone-info-paper p {
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5019607843);
  opacity: 0.5;
  line-height: 1.4;
  margin: 0;
}
.img-container.anim-7 .drone-info-paper span {
  display: block;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.4;
  height: 28px;
}
.img-container.anim-7 .drone-info-paper .drone-address-1:before {
  font-size: 16px;
  height: 20px;
}
.img-container.anim-7 .drone-info-paper .drone-address-2:before {
  font-size: 16px;
  height: 20px;
}