.mouse-scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    position: absolute;
    bottom: 0;
    z-index: 25;
    width: 100%;
  }
  .mouse-scroll p a {
    font-family: 'Lato', sans-serif;
font-size:10px;
text-transform:uppercase;
    text-align: center;
    color: #ffffff;text-decoration:none;display:block;
    animation: colorText 5s ease-out infinite, nudgeText 5s ease-out infinite;
  }
.mouse-scroll p::before {
    content: "";
    width: 2px;
    height: 11px;
    display: block;
    margin: 8px auto;
    background-color: #fff;
    animation:nudgeMouse 5s ease-out infinite;
}
  
  .mouse-scroll .mouse {
    background:transparent;
    border:1px solid #fff;
    position: relative;
    width: 20px;
    height: 34px;
    background-size: 100% 100%;
    border-radius: 100px;
    background-size: 225%;
    animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite;
  }
  .mouse-scroll .mouse:before, .mouse:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
  .mouse-scroll .mouse:before {
    width: 20px;
    height: 34px;
    border-radius: 100px;
  }
  .mouse-scroll .mouse:after {
    background-color: #ffffff;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    animation: trackBallSlide 5s linear infinite;
  }
  
  @keyframes colorSlide {
    0% {background-position: 0% 100%;}
    20% {background-position: 0% 0%;}
    21% {background-color: #4e5559;}
    29.99% {background-color: transparent;background-position: 0% 0%;}
    30% {background-color: #4e5559;background-position: 0% 100%;}
    50% {background-position: 0% 0%;}
    51% {background-color: #4e5559;}
    59.99% {background-color: transparent;background-position: 0% 0%;}
    60% {background-color: #4e5559;background-position: 0% 100%;}
    80% {background-position: 0% 0%;}
    81% {background-color: #4e5559;}
    89.99%, 100% {background-color: transparent;}
  }
  @keyframes trackBallSlide {
    0% {opacity: 1;transform: scale(1) translateY(-10px);}
    6% {opacity: 1;transform: scale(0.9) translateY(5px);}
    14% {opacity: 0;transform: scale(0.4) translateY(30px);}
    15%, 19% {opacity: 0;transform: scale(0.4) translateY(-20px);}
    28%, 29.99% {opacity: 1;transform: scale(1) translateY(-10px);}
    30% {opacity: 1;transform: scale(1) translateY(-10px);}
    36% {opacity: 1;transform: scale(0.9) translateY(5px);}
    44% {opacity: 0;transform: scale(0.4) translateY(30px);}
    45%, 49% {opacity: 0;transform: scale(0.4) translateY(-20px);}
    58%, 59.99% {opacity: 1;transform: scale(1) translateY(-10px);}
    60% {opacity: 1;transform: scale(1) translateY(-10px);}
    66% {opacity: 1;transform: scale(0.9) translateY(5px);}
    74% {opacity: 0;transform: scale(0.4) translateY(30px);}
    75%, 79% {opacity: 0;transform: scale(0.4) translateY(-20px);}
    88%, 100% {opacity: 1;transform: scale(1) translateY(-10px);}
  }
  @keyframes nudgeMouse {
    0% {transform: translateY(0);}
    20% {transform: translateY(8px);}
    30% {transform: translateY(0);}
    50% {transform: translateY(8px);}
    60% {transform: translateY(0);}
    80% {transform: translateY(8px);}
    90% {transform: translateY(0);}
  }
  @keyframes nudgeText {
    0% {transform: translateY(0);}
    20% {transform: translateY(2px);}
    30% {transform: translateY(0);}
    50% {transform: translateY(2px);}
    60% {transform: translateY(0);}
    80% {transform: translateY(2px);}
    90% {transform: translateY(0);}
  }
  @keyframes colorText {
    21% {color: #83bf41;}
    30% {color: #ffffff;}
    51% {color: #83bf41;}
    60% {color: #ffffff;}
    81% {color: #83bf41;}
    90% {color: #ffffff;}
  }