:root {
    --scrolling-duration:60s;
    --testimonial-gap:5px;
    --testimoniail-column:2;
}

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

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

@media (prefers-reduced-motion: reduce) { animation: none; }

.animate-scroll-t2b {
  animation: scroll-top-to-bottom var(--scrolling-duration) linear infinite;
}

.animate-scroll-b2t {
  animation: scroll-bottom-to-top var(--scrolling-duration) linear infinite;
} 

.testimonials {
    margin-top:50px;
}

.testimonials .title {
    text-align: center;
    font-size:36px;
}

.testimonial-section {
    display:flex;
    --columns:2;
    overflow:hidden;
    position:relative;
    gap:var(--testimonial-gap);
    padding:0 var(--pad-left-right);
    height:300px;
}

.testimonial-section:before {
    content: "";
    background: linear-gradient(0deg, transparent 0%, #05033A 100%);
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    width:100%;
    height:100px;
}
.testimonial-section:after {
    content: "";
    background: linear-gradient(180deg, transparent 0%, #05033A 100%);
    position:absolute;
    bottom:0;
    left:0;
    z-index:1;
    width:100%;
    height:100px;
}

.testimonial-section ul {
    width: calc((100% / var(--testimoniail-column)) - var(--testimonial-gap) + (var(--testimonial-gap) / var(--testimoniail-column)));
    list-style: none;
    padding:0;
    display:flex;
    flex-direction: column;    
    gap:var(--testimonial-gap);
    height: max-content;
    --column-height: calc(100% / 2);    
}

.testimonial-section ul:nth-last-of-type(2),
.testimonial-section ul:last-of-type {
    display:none;
}

.testimonial-section ul li {
    display:flex;
    flex-direction: column;
    border-radius: 18.213px;
    background: #121073;
    backdrop-filter: blur(2px);    
    padding:15px;
    color: #FFF;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: "Chakra Petch";
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 14px */
    letter-spacing: -0.25px;
}

.testimonial-section ul li .ratings {
    padding-bottom:15px;
}

.testimonial-section ul li .ratings img {
    aspect-ratio: 10/10;
}

.testimonial-section ul li .name {
    text-align: end;
    color: #476FB5;
    text-align: right;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 160%; /* 19.2px */
    letter-spacing: -0.379px;
    text-transform: capitalize;  
    margin:0;
}

@media (min-width:768px) {
    :root {
        --testimoniail-column:4;
    }

    .testimonial-section ul:nth-last-of-type(2),
    .testimonial-section ul:last-of-type {
        display:flex;
    }    

    .testimonials {
        margin-top:100px;
    }    
}

@media (min-width:1024px) {
    .testimonial-section ul li {
        font-size:15px;
    }

    .testimonial-section ul li .name {
        font-size:15px;
    }
}

@media (min-width:1200px) {
    .testimonials .title {
        font-size: 46px;
        margin-bottom: 30px;
    }
}