/* =============================================================================
   Services Carousel — Widget Styles
   ============================================================================= */

/* ── Wrapper ────────────────────────────────────────────────────────────────── */

.services-carousel-widget {
	width: 100%;
	/* clip slides that overflow on the x-axis while allowing the card-lift on y */
	overflow-x: clip;
}

/* ── Swiper Container ────────────────────────────────────────────────────────── */

.services-carousel-swiper {
	overflow: visible !important; /* needed so translateY(-8px) lift is not clipped */
	/* extra top padding gives the lifted card room to breathe above its bounds */
	padding-top: 12px !important;
}

/* ── Card ──────────────────────────────────────────────────────────────────── */

.sc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-height: 380px;
	padding: 40px 30px;
	background-color: #ffffff;
	border-radius: 20px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
	cursor: pointer;

	/* Smooth transitions for all hover changes */
	transition:
		transform          0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		box-shadow         0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		background-color   0.42s ease;

	/* Hardware acceleration */
	will-change: transform, box-shadow;
}

/* Reset link styles when the card is an <a> */
a.sc-card {
	text-decoration: none;
	color: inherit;
}

/* Lift effect ─────────────────────────────────────────────────────────────── */

.sc-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

/* ── Title ─────────────────────────────────────────────────────────────────── */

.sc-card .sc-title {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	color: #1a1a4e;
	margin: 0;
	width: 100%;
	transition: color 0.42s ease;
}

.sc-card:hover .sc-title {
	color: #ffffff;
}

/* ── Icon Wrapper ──────────────────────────────────────────────────────────── */

.sc-card .sc-icon-wrapper {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 24px 0 28px;
	/* Establishes 3-D perspective for the rotateX animation on the icon */
	perspective: 900px;
}

/* ── Icon Circle ──────────────────────────────────────────────────────────── */

.sc-card .sc-icon-circle {
	width: 104px;
	height: 104px;
	border-radius: 50%;
	background-color: #eef1fb;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;

	/* Subtle scale animation on hover */
	transition:
		transform        0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
		background-color 0.42s ease;
}

.sc-card:hover .sc-icon-circle {
	transform: scale(1.12);
	background-color: rgba(255, 255, 255, 0.15);
}

/* ── Icon ──────────────────────────────────────────────────────────────────── */

/* Both Font Awesome <i> and SVG icons */
.sc-card .sc-icon-circle i,
.sc-card .sc-icon-circle svg {
	font-size: 34px;
	color: #1a1a4e;
	fill: #1a1a4e;
	display: block;
	line-height: 1;

	/*
	 * 3-D X-axis rotation on hover.
	 * Start at 0° so the browser can interpolate to 360° on hover,
	 * and back to 0° on mouse-leave — both directions look premium.
	 */
	transform: rotateY(0deg);
	transition:
		transform 0.8s ease-in-out,
		color      0.42s ease,
		fill       0.42s ease;

	/* Force GPU layer for the 3-D transform */
	will-change: transform;
	backface-visibility: visible;
}

/* The 3-D spin fires on card hover, not just icon hover, for a wider trigger area */
.sc-card:hover .sc-icon-circle i,
.sc-card:hover .sc-icon-circle svg {
	transform: rotateY(360deg);
	color: #ffffff;
	fill: #ffffff;
}

/* ── Description ─────────────────────────────────────────────────────────── */

.sc-card .sc-description {
	font-size: 15px;
	line-height: 1.72;
	color: #666666;
	margin: 0;
	width: 100%;
	transition: color 0.42s ease;
}

.sc-card:hover .sc-description {
	color: rgba(255, 255, 255, 0.82);
}

/* ── Pagination ──────────────────────────────────────────────────────────── */

.sc-pagination-wrapper {
	margin-top: 32px; /* default; overridden by Elementor spacing control */
	display: flex;
	justify-content: center;
}

/*
 * Pagination lives outside the swiper so no position override is needed.
 * Just lay the bullets out as a centred flex row.
 */
.services-carousel-widget .swiper-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0;
}

.services-carousel-widget .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #d0d4e8;
	opacity: 1;
	margin: 0 !important; /* override Swiper inline margins */
	transition:
		transform        0.3s ease,
		background-color 0.3s ease;
}

.services-carousel-widget .swiper-pagination-bullet-active {
	background-color: #1a1a4e;
	transform: scale(1.4);
}

/* ── Slide ───────────────────────────────────────────────────────────────── */

/* Ensure each slide fills the swiper height cleanly */
.services-carousel-widget .swiper-slide {
	height: auto;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.sc-card .sc-title {
		font-size: 20px;
	}

	.sc-card .sc-description {
		font-size: 14px;
	}
}