/* === Custom Block Styling === */
.servicesScroller {
    height: auto;
    overflow: visible !important;
    position: relative;
  }
  .servicesScroller__wrapper {
    height: 100vh;
    z-index: 1;
    position: sticky;
    top: 0;
  }
  .servicesScroller__bg_container {
    position: absolute;
    inset: 0;
    height: 100%;
  }
  
  .servicesScroller__bg_container .row > div {
    max-height: 100%;
  }
  .servicesScroller__solidBg {
    max-height: 100% !important;
  }
  .servicesScroller__imageWrapper {
    overflow: hidden;
    height: 100%;
    position: relative;
  }
  .servicesScroller__imageWrapper img {
    height: 100%;
    width: 100%;
    position: absolute;
    transform: translateY(101%);
    object-fit: cover;
    object-position: center;
  }
  .servicesScroller__imageWrapper img:nth-child(1) {
    transform: translateY(0%);
  }
  .servicesScroller__wrapper {
    padding-top: 128px;
    padding-left: 64px;
  }
  .servicesScroller__serviceTitle {
    color: var(--SC-default-text-color);
    transform: translateY(48px);
    transition: 0.155s ease-out;
    opacity: 0;
	cursor: pointer;
	width: fit-content;
  }
  .servicesScroller__serviceTitle.show {
    transform: translateY(0px);
    opacity: 1;
  }
  .servicesScroller__serviceTitle.active {
    color: var(--SC-active-text-color);
  }
  
  .serviceScroller__arrowWrapper {
    background-color: var(--FC-green);
    height: 128px;
    width: 64px;
    position: absolute;
    right: 64px;
    bottom: -64px;
  }
  .serviceScroller__arrow {
    animation: serviceArrowAnim 1.55s infinite;
  }


  .servicesScroller__serviceText{
    transform: translateY(48px);
    transition: 0.155s ease-out;
    opacity: 0;
    height: 0;
  }
  .servicesScroller__serviceText.show{
    transform: translateY(0px);
    opacity: 1;
    height: auto;
  }


  @media screen and (max-width: 991.98px) {
    .servicesScroller__bg_container > .row:nth-child(1) {
      position: absolute;
      height: 100%;
      width: 100%;
      opacity: .3;
    }
    .servicesScroller__solidBg {
      display: none;
    }
    .serviceScroller__imageContainer {
      position: absolute;
      height: 100%;
      width: 100%;
      inset: 0;
    }
    .servicesScroller__wrapper {
      padding-left: 32px;
      background: #000 !important;
    }
  }
  @media screen and (max-width: 767.98px) {
    .servicesScroller__wrapper {
      padding-top: 64px;
      padding-left: 0px;
    }
    .serviceScroller__arrowWrapper {
      right: calc(calc(100vw - var(--FC-container-width)) / 2);
    }
  }
  
  @keyframes serviceArrowAnim {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-32px);
    }
    100% {
      transform: translateY(0);
    }
  }