/* Testimonial Carousel Tilt — frontend styles */

.tct-widget-wrap {
	--tct-color-a: #DCEEFF;
	--tct-color-b: #FFF3D1;
	--tct-accent: #F5A623;
	--tct-radius: 28px;
	--tct-tilt: 8deg;
	--tct-side-scale: 0.88;
	--tct-side-opacity: 0.75;

	position: relative;
	width: 100%;
	padding: 20px 10px 56px;
	box-sizing: border-box;
}

.tct-swiper {
	width: 100%;
	overflow: visible;
	padding: 30px 0 10px;
}

/* Structural fallback: guarantees a horizontal row of columns even in the
   brief moment before Swiper's JS finishes initializing (or in the rare
   case its own stylesheet fails to load), so the layout never collapses
   into a single stacked column. Swiper overrides these with inline
   widths/transforms once it boots. */
.tct-swiper .swiper-wrapper {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	box-sizing: content-box;
}

.tct-slide {
	height: auto;
	flex-shrink: 0;
	width: calc(100% / var(--tct-cols-mobile, 1));
	display: flex;
	align-items: stretch;
	box-sizing: border-box;
	transition: transform 0.45s ease, opacity 0.45s ease;
	transform-origin: center bottom;
	will-change: transform;
}

@media (min-width: 768px) {
	.tct-slide { width: calc(100% / var(--tct-cols-tablet, 2)); }
}

@media (min-width: 1024px) {
	.tct-slide { width: calc(100% / var(--tct-cols-desktop, 3)); }
}

/* Card */
.tct-card {
	position: relative;
	width: 100%;
	background: var(--tct-color-a);
	border-radius: var(--tct-radius);
	padding: 32px 28px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: transform 0.45s ease, opacity 0.45s ease;
}

.tct-slide.tct-color-1 .tct-card {
	background: var(--tct-color-b);
}

.tct-quote-icon {
	position: absolute;
	bottom: 16px;
	right: 22px;
	font-size: 34px;
	line-height: 1;
	font-weight: 700;
	color: var(--tct-accent);
	opacity: 0.9;
}

/* Header: avatar + name/designation */
.tct-header {
	display: flex;
	align-items: center;
	gap: 12px;
}

.tct-avatar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.tct-meta {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.tct-name {
	font-weight: 700;
	font-size: 15px;
	color: #1B3B5F;
}

.tct-designation {
	font-size: 12.5px;
	color: #5B7A99;
}

.tct-rating {
	color: var(--tct-accent);
	font-size: 14px;
	letter-spacing: 2px;
}

.tct-content {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: #2E3A46;
	padding-right: 20px;
}

/* -------- Tilt / coverflow effect --------
   Swiper automatically applies swiper-slide-active / -prev / -next
   classes to the currently centered slide and its neighbours. */
.tct-slide .tct-card {
	transform: rotate(0deg) scale(1);
	opacity: 1;
	z-index: 3;
}

.swiper-slide-prev .tct-card {
	transform: rotate(calc(var(--tct-tilt) * -1)) scale(var(--tct-side-scale));
	opacity: var(--tct-side-opacity);
	z-index: 1;
}

.swiper-slide-next .tct-card {
	transform: rotate(var(--tct-tilt)) scale(var(--tct-side-scale));
	opacity: var(--tct-side-opacity);
	z-index: 1;
}

.swiper-slide-active .tct-card {
	transform: rotate(0deg) scale(1.04);
	opacity: 1;
	z-index: 3;
}

/* Arrows */
.tct-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	color: #1B6FC9;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	z-index: 10;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.tct-arrow:hover {
	background: var(--tct-accent);
	color: #fff;
	transform: translateY(-50%) scale(1.08);
}

.tct-arrow-prev { left: -6px; }
.tct-arrow-next { right: -6px; }

/* Dots */
.tct-pagination.swiper-pagination {
	position: absolute;
	bottom: 12px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.tct-widget-wrap .swiper-pagination-bullet {
	width: 9px;
	height: 9px;
	background: #D8E6F5;
	opacity: 1;
	border-radius: 50%;
	transition: background 0.2s ease, transform 0.2s ease;
}

.tct-widget-wrap .swiper-pagination-bullet-active {
	background: var(--tct-accent);
	transform: scale(1.25);
}

/* Responsive tweaks */
@media (max-width: 1024px) {
	.tct-arrow { display: none; }
}

@media (max-width: 767px) {
	.tct-card { padding: 24px 20px; }
	.tct-content { font-size: 13.5px; padding-right: 0; }
	.swiper-slide-prev .tct-card,
	.swiper-slide-next .tct-card {
		opacity: 0.5;
	}
}