/* Testimonial — i2t3 component styles
 * Bootstrap provides the carousel; rules below port the look of the original
 * Bootstrap theme team-slider (_team-slider.scss): grey band, centred slider
 * with responsive widths, brand-coloured caption lines, decorative quote marks,
 * round indicator dots and large coloured chevron arrows.
 */

/* Grey section band (original inner <section class="team-slider-section gray-bg">). */
.i2t3-testimonial-section {
    background-color: var(--i2t3-gray-bg, #f5f6f9);
    padding: 20px 0;
    position: relative;
}

/* Centred slider with breakpoint-stepped width (original .teamslider). */
.i2t3-testimonial-section .carousel {
    margin: 0 auto;
    max-width: 600px;
    position: relative;
}

.i2t3-testimonial-section .carousel-item {
    height: auto;
    max-width: 100%;
}

/* Slide content (original .team-slide-content). */
.i2t3-testimonial-section .testimonial-slide {
    margin: 0 auto;
    max-width: 85%;
    padding: 2rem 1rem 20px;
    text-align: center;
}
.i2t3-testimonial-section .testimonial-slide img {
    border-radius: 50%;
    height: 96px;
    margin: 0 auto 10px;
    object-fit: cover;
    width: 96px;
}

/* Decorative typographic quotes around the citation (original blockquote
 * ::before / ::after { content: '"' }). */
.i2t3-testimonial-section .testimonial-slide blockquote {
    background-color: transparent;
    border-left: 0;
    font-size: 1.125rem;
    font-style: italic;
    margin: 0 auto 1rem;
    max-width: 720px;
    padding: 0;
}
.i2t3-testimonial-section .testimonial-slide blockquote::before {
    content: '"';
    font-size: 20px;
    padding-right: 2px;
}
.i2t3-testimonial-section .testimonial-slide blockquote::after {
    content: '"';
    font-size: 20px;
    padding-left: 2px;
}

/* Caption lines: original colours BOTH <p> (name AND designation) in the brand
 * colour. Reuse the shared accent var, fall back to Bootstrap primary. */
.i2t3-testimonial-section .testimonial-slide .h4,
.i2t3-testimonial-section .testimonial-slide h4,
.i2t3-testimonial-section .testimonial-slide p {
    color: var(--i2t3-primary, var(--bs-primary, #0d6efd));
}
.i2t3-testimonial-section .testimonial-slide .h4,
.i2t3-testimonial-section .testimonial-slide h4 {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* Round indicator dots (original .carousel-indicators li, 11px circles). The
 * BS5 markup uses <button>, so the dot styling is applied to the buttons. */
.i2t3-testimonial-section .carousel-indicators {
    bottom: -10px;
}
.i2t3-testimonial-section .carousel-indicators [data-bs-target] {
    background-color: var(--i2t3-indicator, #dbdee6);
    border: 0;
    border-radius: 50%;
    height: 11px;
    margin: 0 4px;
    opacity: 1;
    width: 11px;
}
.i2t3-testimonial-section .carousel-indicators [data-bs-target].active {
    background-color: var(--i2t3-text-color, #212529);
}

/* Prev/next: original uses large coloured chevron glyphs without a circle
 * (background-image:none; font-size:40px; color:$secondary-light-color). We keep
 * the BS5 SVG chevron but drop the round backdrop and recolour/enlarge it. */
.i2t3-testimonial-section .carousel-control-prev,
.i2t3-testimonial-section .carousel-control-next {
    opacity: 1;
    width: 5%;
}
.i2t3-testimonial-section .carousel-control-prev-icon,
.i2t3-testimonial-section .carousel-control-next-icon {
    background-color: transparent;
    background-size: 100%;
    filter: none;
    height: 40px;
    width: 40px;
}
.i2t3-testimonial-section .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%236c757d' viewBox='0 0 16 16'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
.i2t3-testimonial-section .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%236c757d' viewBox='0 0 16 16'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Responsive slider / content widths (original media-breakpoint rules). */
@media (max-width: 575.98px) {
    .i2t3-testimonial-section .testimonial-slide blockquote {
        padding: 0 15px;
    }
}
@media (min-width: 768px) {
    .i2t3-testimonial-section .carousel {
        max-width: 900px;
    }
    .i2t3-testimonial-section .testimonial-slide {
        max-width: 469px;
        padding-bottom: 40px;
    }
}
@media (min-width: 992px) {
    .i2t3-testimonial-section .testimonial-slide {
        max-width: 600px;
    }
}