/* =========================================================================
   ANIMATED TESTIMONIALS (React UI Replica in Pure CSS)
   ========================================================================= */
.testimonial-mask {
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    max-height: 740px !important;
    overflow: hidden !important;
    position: relative !important;
    padding: 10px 0;
}

.marquee-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    animation: scroll-vertical 15s linear infinite;
    width: 320px;
}

.marquee-col:hover {
    animation-play-state: paused !important;
}

.marquee-col.dur-15 { animation-duration: 15s; }
.marquee-col.dur-19 { animation-duration: 19s; }
.marquee-col.dur-17 { animation-duration: 17s; }

@keyframes scroll-vertical {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

.testimonial-card-ui {
    padding: 2rem !important;
    border-radius: 1.5rem !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 10px 15px -3px rgba(224, 101, 6, 0.1), 0 4px 6px -2px rgba(224, 101, 6, 0.05) !important; 
    background: #ffffff !important;
    width: 100% !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 200px;
}

.testimonial-card-ui .role-text {
    opacity: 0.6;
    font-size: 13px;
    letter-spacing: -0.01em;
}

.testimonial-card-ui .name-text {
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.01em;
}