.fade-in-up {
    opacity: 0; /* set the element to be invisible initially */
    animation-name: fade-in-up;
    animation-duration: 1s; /* adjust duration as desired */
    animation-timing-function: ease-out; /* adjust timing function as desired */
    animation-fill-mode: forwards; /* keep the element visible at the end of the animation */
  }
  
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translate3d(0, 50%, 0); /* move the element down 50% of its height */
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0); /* move the element back to its original position */
    }
  }  
  .your-section-class {
    position: relative;
}
.your-section-class::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: rgba(0,0,0,0.5);
    opacity: 0.5;
}