.hero-copy{
  width:50%;
}

.hero-copy > .acf-innerblocks-container{
  padding: 0 var(--wp--preset--spacing--section-small) 0 calc((100vw - var(--wp--style--global--content-size)) / 2); 
 
}
.hero-container {
  display: flex;
  align-items: center;
  background: var(--wp--preset--color--ivory);
 
}


.hero-container .wp-block-button__link:before{
  background-color: white!important;
}

.hero-container .wp-block-button__link:hover{
 color: black;
}

.scroll-wrapper {
  width: 50%;
  overflow: hidden;
  position: relative;
  height: 90vh;
 
}

.running-line-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.running-line {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  width: 100%;
  height: 100%;
}

.scroll-track {
  display: flex;
  flex-direction: column;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.scroll-track img {
  width: 100%;
  height: auto;
  display: block;
}

/* Animation for scrolling UP */
.scroll-up {
  animation-name: scroll-up;
  animation-duration: 20s; /* adjust speed */
}

/* Animation for scrolling DOWN */
.scroll-down {
  animation-name: scroll-down;
  animation-duration: 20s; /* adjust speed */
}



@media (prefers-reduced-motion: reduce) {
  .scroll-track {
    animation: none !important;
  }
}

.scroll-track:hover {
  animation-play-state: paused;
}

@media only screen and (min-width: 768px) {
  .hero-container .running-line.mobile {display: none;}
  .hero-container .running-line.desktop{display: flex;} 
      @keyframes scroll-up {
      0% {
        transform: translateY(0%);
      }
      100% {
    transform: translateY(calc(-1 * var(--scroll-height)));
      }
    }

    @keyframes scroll-down {
      0% {
    transform: translateY(calc(-1 * var(--scroll-height)));
      }
      100% {
        transform: translateY(0%);
      }
    }
  
  
  
}

@media only screen and (max-width: 1024px) {
  
  .hero-container{
    max-height: 650px;
  }
  
}


@media only screen and (max-width: 1024px) {
  
  .hero-container{flex-direction: column-reverse;  }
  .hero-container .hero-copy{width:100%; max-width: var(--wp--style--global--content-size); padding: var(--wp--preset--spacing--section-small) 0; }
  .hero-container .hero-copy > * {padding:0;}
  .hero-container .running-line.mobile {display: flex;}
  .hero-container .running-line.desktop{display: none;} 
  .hero-container .running-line {flex-direction: row;}

  .hero-container .scroll-wrapper{width:100%; height:auto }
  .hero-container .scroll-track {flex-direction: row;  width: max-content;}
  .hero-container .scroll-up { animation-duration: 10s; /* adjust speed */}
  
  .hero-container .scroll-track img{aspect-ratio: 376 / 297; object-fit: cover; max-width: 375px;}
  
  
    @keyframes scroll-up {
      0% {
        transform: translateX(0%);
      
      }
      100% {
    transform: translateX(calc(-1 * var(--scroll-width)));
      }
    }

    /*@keyframes scroll-down {
      0% {
        transform: translateX(-50%);
      }
      100% {
        transform: translateX(0%);
      }
    }*/
  
  
}




@media only screen and (min-width: 1900px) {
  .hero-copy > .acf-innerblocks-container{
    padding: 0 15%;
  }
}
@media only screen and (min-width: 2000px) {
  .hero-copy > .acf-innerblocks-container{
    padding: 0 20%;
  }
}