.testimonials {
	position: relative;
	background-color: rgba(26, 26, 43, 1);
	overflow-x: clip;
	overflow-y: visible;
	/* Dark UA chrome (incl. scrollbars) where ::-webkit-scrollbar is ignored (e.g. iOS Safari). */
	color-scheme: dark;
}

.testimonials__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.testimonials__bg-img {
	position: absolute;
	bottom: 0;
	width: auto;
	height: auto;
	max-height: 100%;
	opacity: 0.3;
}

.testimonials .container,
.testimonials-wrapper {
	position: relative;
	z-index: 1;
}

.testimonials.bg-has-dark-background .btn-secondary {
	color: var(--color-text-inverse);
	background-color: transparent;
	border-color: var(--color-white);
}

.testimonials.bg-has-dark-background .btn-secondary:hover {
	background-color: var(--color-secondary);
	border-color: var(--color-secondary);
}

.testimonials__cards {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.testimonial-card {
	width: 100%;
}
.testimonial-card__inner {
	width: 100%;
	padding: 32px;
	border-radius: 50px 0 0 0;
	background: #2A2A3A;
}

.testimonial-quote-icon {
	color: var(--color-primary);
	font-size: 64px;
}

.testimonial-card__text {
	margin-top: 5px;
	margin-bottom: 10px;
	padding-right: 10px;
	font-size: 15px;
	color: var(--color-white);
	max-height: 230px;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--color-white) 20%, transparent) transparent;
}

.testimonial-card__text:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.testimonial-card__text::-webkit-scrollbar {
	width: 8px;
}

.testimonial-card__text::-webkit-scrollbar-track {
	background: transparent;
}

.testimonial-card__text::-webkit-scrollbar-thumb {
	background-color: color-mix(in srgb, var(--color-white) 20%, transparent);
	border-radius: 4px;
}

.testimonial-card__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--button-gap, 10px);
	row-gap: 8px;
	width: 100%;
}

.testimonial-card__author-initials {
	margin: 0;
	font-family: var(--sub-heading-family);
	font-size: var(--font-size-subheading);
	font-weight: 700;
	line-height: var(--line-height-subheading);
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--color-text-inverse);
	white-space: nowrap;
}

.testimonial-card__rating {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 5px;
}

.testimonial-card__star.wc-star {
	display: inline-block;
	font-size: 17px;
	line-height: 1em;
	text-align: center;
	vertical-align: middle;
}

.testimonial-card__star--filled {
	color: var(--color-secondary);
}

.testimonial-card__star--empty {
	color: color-mix(in srgb, var(--color-white) 35%, transparent);
}

@media (min-width: 768px) {
	.testimonials__cards {
		gap: 32px;
	}

	.testimonial-card__text {
		font-size: 16px;
		margin-bottom: 25px;
	}
}

@media (min-width: 1200px) {
	.testimonial-card__text {
		font-size: 18px;
	}
}

.testimonials__intro-col {
	margin-bottom: 40px;
}

.testimonials__intro {
	margin-bottom: 0;
}

.testimonials--stack {
	.testimonials-wrapper {
		padding-left: var(--bs-gutter-x, 22px);
		padding-right: var(--bs-gutter-x, 22px);
	}
}

.testimonials--stack {
	padding-top: var(--section-margins);
}

@media (min-width: 768px) {
	.testimonials--stack {
		.testimonials-wrapper {
			padding-left: var(--bs-gutter-x, 52px);
			padding-right: var(--bs-gutter-x, 52px);
		}
	}
}

@media (min-width: 1200px) {

	.testimonials--stack {
		.testimonials-wrapper {
			padding-left: var(--bs-gutter-x, 32px);
			padding-right: var(--bs-gutter-x, 32px);
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
		}

		.testimonials__intro-col {
			box-sizing: border-box;
            width: calc(50% - 175px);
            padding: 0 95px 0 32px !important;
            margin-left: auto;
            max-width: 495px;
			align-self: flex-start;
		}

		.testimonials__intro {
			width: 100%;
		}

		.testimonials__cards--stack {
			min-height: 0;
			width: calc(50% + 175px);
			max-width: 897px;
			padding-right: 32px;
			margin-right: auto;
			max-height: 568px;
			overflow-y: auto;
			scrollbar-width: thin;
			/* Safari mishandles transparent on scrollbar parts. Idle thumb matches track/section
			   so the thumb is invisible until hover/focus (no layout shift). */
			scrollbar-color: rgba(26, 26, 43, 1) rgba(26, 26, 43, 1);
		}

		.testimonials__cards--stack::-webkit-scrollbar {
			-webkit-appearance: none;
			appearance: none;
			width: 8px;
			background-color: rgba(26, 26, 43, 1);
		}

		.testimonials__cards--stack::-webkit-scrollbar-button {
			display: none;
			width: 0;
			height: 0;
		}

		.testimonials__cards--stack::-webkit-scrollbar-track {
			background-color: rgba(26, 26, 43, 1);
		}

		.testimonials__cards--stack::-webkit-scrollbar-thumb {
			background-color: rgba(26, 26, 43, 1);
			border-radius: 4px;
			transition: background-color 0.2s ease;
		}

		.testimonials__cards--stack::-webkit-scrollbar-corner {
			background-color: rgba(26, 26, 43, 1);
		}

		.testimonials__bg img {
			max-width: calc(50% - 100px);
			height: auto;
		}
	}

}

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
	.testimonials--stack .testimonials__cards--stack:hover,
	.testimonials--stack .testimonials__cards--stack:focus-within {
		scrollbar-color: color-mix(in srgb, var(--color-white) 20%, transparent) rgba(26, 26, 43, 1);
	}

	.testimonials--stack .testimonials__cards--stack:hover::-webkit-scrollbar-track,
	.testimonials--stack .testimonials__cards--stack:focus-within::-webkit-scrollbar-track {
		background-color: rgba(26, 26, 43, 1);
	}

	.testimonials--stack .testimonials__cards--stack:hover::-webkit-scrollbar-thumb,
	.testimonials--stack .testimonials__cards--stack:focus-within::-webkit-scrollbar-thumb {
		background-color: color-mix(in srgb, var(--color-white) 20%, transparent);
	}

	.testimonials--stack .testimonials__cards--stack:hover::-webkit-scrollbar-thumb:hover,
	.testimonials--stack .testimonials__cards--stack:focus-within::-webkit-scrollbar-thumb:hover {
		background-color: color-mix(in srgb, var(--color-white) 35%, transparent);
	}
}

@media (min-width: 1200px) and (hover: none),
	(min-width: 1200px) and (pointer: coarse) {
	.testimonials--stack .testimonials__cards--stack {
		scrollbar-color: color-mix(in srgb, var(--color-white) 20%, transparent) rgba(26, 26, 43, 1);
	}

	.testimonials--stack .testimonials__cards--stack::-webkit-scrollbar-track {
		background-color: rgba(26, 26, 43, 1);
	}

	.testimonials--stack .testimonials__cards--stack::-webkit-scrollbar-thumb {
		background-color: color-mix(in srgb, var(--color-white) 20%, transparent);
	}
}

.testimonials__cards--grid {
	.testimonial-card {
		.testimonial-card__inner {
			height: 100%;
		}
	}
}
@media (min-width: 768px) {
	.testimonials__cards--grid {
		.testimonial-card {
			width: calc(50% - 16px);
		}
	}
}

@media (min-width: 1200px) {
	.testimonials__cards--grid {
		justify-content: center;

		.testimonial-card {
			width: calc(33.33% - 21.33px);
		}
	}
}


.testimonials__intro--slider,
.testimonials__cards-wrapper {
	padding-left: var(--bs-gutter-x, 22px);
	padding-right: var(--bs-gutter-x, 22px);
}

.testimonials--slider{
	.fx-slick-arrow-left, 
	.fx-slick-arrow-right {
		background: #2A2A3A;
	}

	.fx-slick__progress {
		background: #2A2A3A;
	}

	.fx-slick__progress-bar {
		background: color-mix(in srgb, var(--color-white) 20%, transparent);
	}

	.slick-track {
        display: flex !important;
    }

    .slick-slide {
        height: inherit !important;
    }  
    
    .slick-slide > div,
    .testimonial-card,
	.testimonial-card__inner {
        height: 100%;
    }

}

.testimonials__cards--slider {
	padding-top: 40px;
}

@media (min-width: 768px) {
	.testimonials__intro--slider {
		padding-left: var(--bs-gutter-x, 52px);
		padding-right: var(--bs-gutter-x, 52px);
	}

	.testimonials__cards--slider {
		.testimonial-card {
			padding: 0 16px;
		}
	}
}

@media (min-width: 1200px) {
	.testimonials__intro--slider {
		padding-left: var(--bs-gutter-x, 32px);
		padding-right: var(--bs-gutter-x, 32px);
	} 
	
	.testimonials--slider {
		.testimonials-wrapper {
			display: flex;
		}

		.testimonials__cards--slider {
			padding-top: 0;
		}

		.testimonials__intro--slider {
			width: calc(50% - 175px);
            padding: 0 50px 0 32px !important;
            margin-left: auto;
            max-width: 495px;
		}

		.testimonials__cards-wrapper {
            display: flex;
            flex-direction: column;
            align-self: stretch;
            min-height: 0;
            width: calc(50% + 175px);
            padding-left: 0;
            padding-right: 0;
            padding-bottom: 90px;

            .testimonial-card .testimonial-card__inner {
                width: 370px;
            }
        }

		.fx-slick-navigation {
            position: absolute;
            bottom: 0;
            width: 50%;
            padding-left: 16px;
        }

	}
}