.dda-scroll-icon-scroll{ 
  border-style: solid;
  border-radius: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.scroll-icon-size-lg{
  width: 40px;
  height: 60px; 
  border-width: 4px;
}

.scroll-icon-size-sm{
  width: 16.5px;
  height: 24px; 
  border-width: 2px;
}

.scroll-icon-color-black{
  border-color: #000;
}

.scroll-icon-color-white{
  border-color: #ffffff;
}

.dda-scroll-icon-scroll-dot {
  border-radius: 50%;
}

.scroll-icon-color-black .dda-scroll-icon-scroll-dot{
  background: #000;
}

.scroll-icon-color-white .dda-scroll-icon-scroll-dot{
  background: #fff;
}

.scroll-icon-size-lg .dda-scroll-icon-scroll-dot{
  width: 12px;
  height: 12px;
  animation: scrollAnimation var(--animation-duration, 1.5s) infinite;
}

@keyframes scrollAnimation {
  0% {
    transform: translateY(5px);
  }
  50% {
    transform: translateY(24px);
  }
  100% {
    transform: translateY(5px);
  }
}

.scroll-icon-size-sm .dda-scroll-icon-scroll-dot{
  width: 4.5px;
  height: 4.5px;
  animation: scrollAnimationsmall var(--animation-duration, 1.8s) infinite;
}

@keyframes scrollAnimationsmall {
  0% {
    transform: translateY(2px);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(2px);
  }
}