div:has(.swipe) {
  position: relative;
}

.swipe {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0;
  right: 0;
  z-index: 1;
  margin: 0 !important;
}

.path {
    width: 20px;
    height: 20px;
    position: absolute;
    background: #D9F6F7;
    border-radius: 40px;
    top: 0;
    right: 0;
    /* visibility: hidden; */
}

.hand-icon {
    position: relative;
    background-image: url('hand.svg');
    background-repeat: no-repeat;
    background-position: center;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 8px;
    transform-origin: 52% 62%;
}

@keyframes swipe-hand {
    25% { transform: translate(20px) rotate(30deg); }
    50% { transform: translate(-20px) rotate(-15deg); }
    100% { transform: translate(0px) rotate(0); }
}

@keyframes swipe-dot {
  12% {
    /* visibility: visible; */
    width: 40px;
  }
  25% {
    /* visibility: visible; */
    transform: translate(-27px);
    width: 20px;
  }
  26% {
    /* visibility: hidden;  */
  }
}

@media (min-width: 1025px) {
  .path,
  .hand-icon {
    display: none;
  }
}