/* --------------------------
   Responsive Testimonials Slider
   Replaces your previous slider CSS
   -------------------------- */

.ts-slider-wrapper {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 40px 20px;
    background: #0a2a83; /* blue background */
    border-radius: 0;
    text-align: center;
    position: relative; /* for arrows */
    box-sizing: border-box;
}

.ts-slider-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* each slide */
.ts-slide {
    padding: 20px;
    box-sizing: border-box;
    outline: none;
}

/* content: responsive sizing using clamp()
   - minimum 1rem, preferred relative to viewport, max 1.6rem */
.ts-content,
.ts-slider-wrapper .slick-slide .ts-content {
    font-size: clamp(1rem, 4.2vw, 1.6rem);
    line-height: 1.6;
    color: #fff; /* changed text color to white for contrast */
    margin-bottom: 20px;
    font-style: italic;
    position: relative;
    box-sizing: border-box;
}

/* quote marks sized in em so they scale with .ts-content */
.ts-content::before,
.ts-content::after {
    content: '"';
    position: absolute;
    color: #a3c4ff; /* lighter blue for quotes */
    font-size: 1.25em; /* scales with .ts-content */
    line-height: 1;
    pointer-events: none;
}

/* position using em so it moves with text size */
.ts-content::before {
    left: -0.6em;
    top: -0.45em;
}
.ts-content::after {
    right: -0.6em;
    bottom: -0.45em;
}

/* name & image responsive */
.ts-name {
    font-weight: bold;
    font-size: clamp(0.85rem, 2.5vw, 1rem);
    color: #d1d9f0; /* lighter text color */
    margin-top: 10px;
}

.ts-image img {
    border-radius: 50%;
    width: clamp(48px, 8.5vw, 80px);
    height: clamp(48px, 8.5vw, 80px);
    object-fit: cover;
    margin-top: 10px;
}

/* Slick arrows (left/right) - responsive sizes */
.slick-prev,
.slick-next {
    z-index: 10;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    box-sizing: border-box;
}

/* arrow icon size adapt */
.slick-prev:before,
.slick-next:before {
    font-size: clamp(18px, 4vw, 30px);
    color: #a3c4ff;
}

/* default arrow positions for desktop */
.slick-prev { left: -30px; }
.slick-next { right: -30px; }

/* dots */
.slick-dots li button:before {
    font-size: clamp(8px, 2vw, 12px);
    color: #a3c4ff;
    opacity: 0.5;
}
.slick-dots li.slick-active button:before {
    opacity: 1;
    color: #a3c4ff;
}

/* -------- Mobile / Tablet tweaks -------- */
@media (max-width: 1024px) {
    .ts-slider-wrapper {
        padding: 30px 18px;
        border-radius: 0;
    }
    .ts-slide { padding: 16px; }
    /* move arrows inside the wrapper on narrower screens */
    .slick-prev { left: 6px; }
    .slick-next { right: 6px; }
}

@media (max-width: 768px) {
    .ts-slider-wrapper {
        padding: 24px 14px;
        max-width: 100%;
        border-radius: 0;
    }

    /* make absolutely sure slider text shrinks on small phones (override other CSS) */
    .ts-content,
    .ts-slider-wrapper .slick-slide .ts-content {
        font-size: clamp(0.95rem, 4.5vw, 1.2rem) !important;
        line-height: 1.45 !important;
    }

    .ts-content::before,
    .ts-content::after {
        font-size: 1.15em;
    }

    .ts-name { font-size: 0.9rem; color: #d1d9f0; }
    .ts-image img { width: 60px; height: 60px; }
}

@media (max-width: 480px) {
    .ts-slider-wrapper {
        padding: 18px 12px;
        border-radius: 0;
    }

    .ts-slide { padding: 12px; }

    .ts-content,
    .ts-slider-wrapper .slick-slide .ts-content {
        /* stronger override for very small screens */
        font-size: clamp(0.9rem, 5.5vw, 1rem) !important;
        line-height: 1.4 !important;
        margin-bottom: 14px;
    }

    .ts-content::before,
    .ts-content::after {
        font-size: 1.05em;
        left: -0.45em;
        right: -0.45em;
    }

    .ts-name { font-size: 0.85rem; color: #d1d9f0; }
    .ts-image img { width: 48px; height: 48px; }

    /* place arrows inside the box so they don't disappear off-canvas */
    .slick-prev { left: 8px; }
    .slick-next { right: 8px; }
}