.relay-scroller {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 80px 0;
  }
  .state-radio { display: none; } 

  .relay-window {
    position: relative;
    width: 75vw; 
    margin: 0 auto;
    display: flex;
  }

  .loop-1, .loop-2 {
    display: flex;
    width: 100%;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    position: relative;
  }

  .relay-item {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    opacity: 0.5;
    transition: opacity 0.5s ease-out, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
     transform: rotate(-5deg) scale(0.9);
  
  }  
  /* Wrapper to position buttons relative to the list */
  .scrolling-container-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }

  /* The List container now handles the scrolling */
  .scrolling-content-banner--no-list {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; /* Makes items snap into place */
    gap: 20px;
    padding: 20px 0;
    list-style: none;
    scrollbar-width: none; /* Hides scrollbar for Firefox */
  }

  /* Hide scrollbar for Chrome/Safari */
  .scrolling-content-banner--no-list::-webkit-scrollbar {
    display: none;
  }

  /* Individual Items */
  .scrolling-content-banner__item {
    flex: 0 0 auto; /* Prevents shrinking */
    scroll-snap-align: center; /* Snaps to center of the view */
    display: flex;
    align-items: center;
  }

  .scrolling-content-banner__item img {
    height: 100px; /* Adjust as needed */
    width: auto;
    display: block;
  }

  /* Basic Navigation Styling */
  .scroller-nav {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none; /* Allows clicking through the div to the images */
    z-index: 10;
  }

  .nav-button {
    pointer-events: all; /* Re-enables clicking for buttons */
    background: rgba(255,255,255,0.8);
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  }
  
  /* Disable the old animation styles */
  .scrolling-content-banner__content {
    animation: none !important;
  }
/* Static Structural CSS */
.scrolling-content-banner--no-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.manual-scroller {
  user-select: none;
  -webkit-overflow-scrolling: touch;
}


  /* --- NAV VISIBILITY --- */
  .controls { display: none; position: absolute; top: 50%; width: 92%; left: 50%; justify-content: space-between; transform: translate(-51%,-50%) rotate(2deg); pointer-events: none; padding: 0 5%; }
  .arrow { pointer-events: all; background: #fff; color: #000; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }


  /* importing old styling */
  .single-post-wrapper {
  position:relative;
}
.single-post-wrapper .overlay {
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
}

.individual-testimonial {
    padding:40px;
    margin: 0 {#40#}0px;
  border-radius:6px;
}
.slick-next:before, .slick-prev:before {
  display:none;
}

.slick-list {
overflow:visible !important;;
}

.slick-prev, .slick-next {
  z-index:100;
  width: 80px !important;
}

button.slick-arrow svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.single-post-wrapper {
  width: 100%;
  margin-right: 10px;
  border-radius: 5px;
  counter-increment: single-post-wrapper;
  position:relative;
}
.absolute-scroller {
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
  z-index:10;
  cursor:grab;
}
.next-please {
  pointer-events:none;
}

.is-loaded .single-post-wrapper {
  height:100%;
}


.slick-list.draggable {
    margin: 0 auto;
    width: 50%;
}

.slick-prev {
    left: 25% !important;
    transform: translateY(-50%) translateX(-50%);
}

.slick-next {
    right: 25% !important;
   transform: translateY(-50%) translateX(50%);
}

.position-holder {
  overflow:hidden;
}


.overlay {
    opacity: 1;
    background-image: linear-gradient(90deg, transparent 0%, #d3ecf1 40%);
    transition: opacity 1s ease, background-image 1s ease;
}
.left-off .overlay {
   background-image: linear-gradient(270deg, transparent 0%, #d3ecf1 40%);
   transition: opacity 1s ease, background-image 1s ease;
}
.is-selected .overlay {
    opacity:0;
}

.individual-testimonial {
    clip-path: polygon(
        /* Top Edge - Micro-fluctuations */ 
        0% 0.8%, 3% 0.2%, 6% 0.6%, 11% 0.1%, 17% 0.4%, 22% 0%, 28% 0.5%, 33% 0.2%, 39% 0.7%, 45% 0.1%, 51% 0.4%, 58% 0%, 64% 0.6%, 71% 0.2%, 78% 0.5%, 84% 0.1%, 91% 0.4%, 96% 0%, 100% 0.7%, 
        
        /* Right Edge - Your Fixed Micro-tearing */ 
        99.9% 5%, 100% 11%, 99.8% 18%, 99.7% 24%, 99.9% 31%, 99.7% 38%, 99.9% 46%, 100% 53%, 99.8% 61%, 99.7% 68%, 99.9% 75%, 99.8% 83%, 99.9% 91%, 99.6% 96%, 100% 100%, 
        
        /* Bottom Edge - Tightened fluctuations */ 
        95% 99.8%, 89% 99.7%, 82% 99.9%, 76% 99.7%, 70% 99.8%, 63% 99.6%, 57% 99.8%, 50% 99.7%, 44% 99.8%, 38% 99.7%, 31% 99.8%, 25% 99.6%, 18% 99.8%, 12% 99.7%, 6% 99.9%, 0% 100%, 
        
        /* Left Edge - Mirroring your Right Edge logic (0% to 0.4% range) */ 
        0.1% 95%, 0.3% 88%, 0.1% 81%, 0.2% 74%, 0.1% 67%, 0.4% 60%, 0.2% 53%, 0.1% 46%, 0.3% 39%, 0.1% 32%, 0.2% 25%, 0.4% 18%, 0.1% 11%, 0.3% 5%
    );
}
.single-post-wrapper {
    opacity:1;
    transition:ease opacity 1s;
}

.single-post-wrapper.is-selected {
  opacity:1;
    transition:ease opacity 0.25s;
}

.testimonial {
    margin: 1rem 0;
}


.person-name {
 font-weight:bold;
}

.person-name, .person-position {
 font-size: .85rem;
}

.slick-list.draggable {
position:relative;
}
    
    .slick-list.draggable:after {
    content: '';
    width:100%;
   background-image:linear-gradient(90deg, transparent 0%, #FFF 50%);
    height:100%;
    position:absolute;
    left:100%;
    top:0;
}

  .slick-list.draggable:before {
    content: '';
    width:100%;
    background-image:linear-gradient(90deg, #FFF 0%, transparent 50%);
    height:100%;
    position:absolute;
    left:-100%;
    top:0;
      z-index:3;
}

.slick-track
{
    display: flex !important;
}



.individual-testimonial {
    height:100%;
}

.flickity-prev-next-button.previous {
    left: 19%;
}

.flickity-prev-next-button.next {
    right: 19%;
}

.individual-testimonial {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.quotation-marks {
    margin-bottom: auto;
}

.person-name {
    margin-top: auto;
}

@media only screen and (orientation: portrait) {
  .relay-window {
    width: 100%;
  }
  .relay-item {
    align-self: flex-start;
    height:0;
    overflow:hidden;
        transform: rotate(0deg) scale(1) !important;
  }
  .controls {
    top:80px;
  }
  .single-post-wrapper {
  width: 100%;
  margin:0;
  }
  .individual-testimonial {
    margin: 0 10px;
  }
.slick-list.draggable {
    margin: 0 auto;
    width: 100%;
}
  #wrapper .slick-next {
    right: 5% !important;
  }
  #wrapper .slick-prev {
    left: 5% !important;
  }
}