elementor scroll down arrow

<div class="mouse">  
  <div class="mouse-icon">
    <span class="mouse-wheel"></span>
  </div>
  
</div>
<style>
  .mouse {
  margin: 50px auto;
  width: 100px;
}

.mouse-icon {
   width: 25px;
   height: 45px;
   border: 2px solid white; /*you can change 'white' to a hex color*/
   border-radius: 15px;
   cursor: pointer;
   position: relative;
   text-align: center;
}
.mouse-wheel {
  height: 6px;
  margin: 2px auto 0;
  display: block;
  width: 3px;
  background-color: white; /*you can change 'white' to a hex color*/
  border-radius: 50%;
  -webkit-animation: 1.6s ease infinite wheel-up-down;
 -moz-animation: 1.6s ease infinite wheel-up-down;
  animation: 1.6s ease infinite wheel-up-down;
}
@-webkit-keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}
@-moz-keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}@keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}
</style>

<i class="scroll fas fa-arrow-down">
<style>
.scroll-wrapper {text-align:center;}
.scroll {

    font-size: 50px;
    color: #000;

    -webkit-animation: scrolling 3s ease infinite;
    -moz-animation: scrolling 3s ease infinite;
    -o-animation: scrolling 3s ease infinite;
    animation: scrolling 3s ease infinite;
}

@keyframes scrolling {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(0,40px);
}
  100% {
    transform: translate(0);
  }
}
</style></div>