.arrow-container {
    left: 50%;
    top: 75%;
    transform: translate(-50%);
    position: absolute;
    opacity: 1;
    transition:all 2s ease-in-out;
}

  .arrow {
    background-color: #fff;
    /* width: 5px;
    height: 10px; */
    border-radius: 30px;
    margin-top: 10px;
    position: relative;
    transition: all 1s ease-in-out;

  }
  
  .arrow::before {
    position: absolute;
    content: '';
    width: 15px;
    height: 15px;
    border: none;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    transform: translateY(-10px) rotate(135deg);
    left: -6px;
    margin-top: 10px;
    opacity: 0;
    animation: ani 1.8s infinite linear;
    transition: all 1s ease-in-out;
  }
  
  .arrow::after {
    position: absolute;
    content: '';
    width: 15px;
    height: 15px;
    border: none;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    transform: translateY(-10px) rotate(135deg);
    left: -6px;
    margin-top: 10px;
    opacity: 0;
  
    animation: ani 1.8s linear infinite;
    animation-delay: 0.8s;
    transition: all 1s ease-in-out;
  }
  
  @keyframes ani {
    0% {
        margin-top: 10px;
        opacity: 0;
    }
  
    50% {
        margin-top: 25px;
        opacity: 1;
    }
  
    100% {
        margin-top: 40px;
        opacity: 0;
    }
  }

  .hidden::after {
    animation: hide 0.5s linear;
    animation-iteration-count: 1;
  }

  .hidden::before {
    animation: hide 0.5s linear;
    animation-iteration-count: 1;
  }

  @keyframes hide {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
  }