#scrollIndicator {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 9999;
  pointer-events: none;
  transition: opacity 1s;
  color: #61baaf;
}

.arrow-container {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
}

.arrow {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: solid ;
  border-width: 0 6px 6px 0;
  transform: rotate(45deg);
  animation: scrollAnimation 2s linear infinite;
}

.reversed .arrow {
  transform: rotate(-135deg);
}

@keyframes scrollAnimation {
  0% {
    opacity: 0;
    transform: translateY(30px) rotate(45deg);
  }
  50% {
    opacity: 1;
    transform: translateY(0) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px) rotate(45deg);
  }
}