.heroImg.active .arrowAnimation2{
    animation: arrowAnimation 8s ease-out infinite;
    -webkit-animation: arrowAnimation 8s ease-out infinite;
}

@keyframes arrowAnimation {
    0%,100%{
        top: 100%;
    }
    10%,90%{
        top: 0;
    }
}
 
.heroImg.active .mainImage2 img{
    animation: arrowAnimation 4s ease-out infinite;
    -webkit-animation: arrowAnimation 4s ease-out infinite;
}

/* Container styling */
.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 1rem;
    height: 30px;
    margin: 0 auto;
  }
  
  /* Bar styling */
  .bar {
    width: 7%;
    height: .6vw;
    background-color: #444;  
    opacity: 0.3;
    animation: blink 1s infinite ease-in-out;
  }
   
  @keyframes blink {
    0%, 50%, 100% {
      opacity: 0.3;
    }
    25% {
      opacity: 1;
    }
  }
  
  @media screen and (max-width:768px) {
    .bar {
        width: 30px;
        height: 6px; 
      }
  }