/* Container */
.ctg-testimonials-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0px;
    overflow: hidden;
    /* Hide overflow for carousel */
    position: relative;
    cursor: grab;
}

.ctg-testimonials-container:active {
    cursor: grabbing;
}

/* Track Layout */
.ctg-grid {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
    /* Will hold items */
}

/* Testimonial Block */
.ctg-testimonial-block {
    flex: 0 0 33.333%;
    /* 3 items visible */
    box-sizing: border-box;
    padding: 15px;
    /* Half of gap */

    background: #fff;
    border-right: 0px solid transparent;
    /* quick gap hack if we don't use gap property with flex transition sometimes issues */
    border-left: 0px solid transparent;
    background-clip: padding-box;
    line-height: 2.0em;
    text-align: left;
    /* transition removed, controlled by track */
    display: block !important;
    /* Always display, we handle visibility via overflow */
    opacity: 1 !important;
}

/* Typography */
.ctg-quote {
    font-size: 20px;
    margin-bottom: 20px;
    color: #333;
    padding: 50px 20px;
    /* inner spacing */
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    height: 100%;
}

/* Alternate background colors among 5 colors 
.ctg-grid .ctg-testimonial-block:nth-child(5n+1) .ctg-quote {
    background-color: #c8dadc;
}

.ctg-grid .ctg-testimonial-block:nth-child(5n+2) .ctg-quote {
    background-color: #fcf8c6;
}

.ctg-grid .ctg-testimonial-block:nth-child(5n+3) .ctg-quote {
    background-color: #c2e5df;
}

.ctg-grid .ctg-testimonial-block:nth-child(5n+4) .ctg-quote {
    background-color: #76cfe2;
}

.ctg-grid .ctg-testimonial-block:nth-child(5n+5) .ctg-quote {
    background-color: #daf0f8;
}
*/

/* Responsive: 1 column on mobile */
@media (max-width: 768px) {
    .ctg-testimonial-block {
        flex: 0 0 100%;
    }
}

.ctg-quote p {
    margin: 0;
}

.ctg-author {
    font-weight: bold;
    color: #555;
    font-size: 16px !important;
}

/* Animation */
@keyframes ctgFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}