/* Service Carousel for Elementor — front-end styles */

.sce-carousel {
	--sce-columns: 3;
	--sce-gap: 24px;
	--sce-content-gap: 14px;
	--sce-align: left;
	position: relative;
}

/* ---------- head / nav row ---------- */
.sce-carousel__head {
	display: flex;
	margin-bottom: 18px;
}
.sce-arrows--top-right .sce-carousel__head { justify-content: flex-end; }
.sce-arrows--top-left .sce-carousel__head { justify-content: flex-start; }

.sce-carousel__foot-nav {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

.sce-nav {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sce-counter {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	white-space: nowrap;
	margin-right: 4px;
}
.sce-counter b { font-weight: 700; }

.sce-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1.5px solid #D9DEE9;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.sce-arrow svg { width: 40%; height: 40%; }
.sce-arrow:active { transform: scale(.94); }
.sce-arrow[disabled] { opacity: .35; cursor: default; }
.sce-arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ---------- viewport / track ---------- */
.sce-carousel__viewport {
	position: relative;
}

.sce-arrows--sides .sce-carousel__viewport {
	display: flex;
	align-items: center;
	gap: 12px;
}
.sce-arrows--sides .sce-carousel__viewport > .sce-arrow { flex: 0 0 auto; }

.sce-track {
	display: flex;
	gap: var(--sce-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
	flex: 1 1 auto;
	min-width: 0;
	padding-bottom: 4px;
}
.sce-track::-webkit-scrollbar { display: none; }
.sce-track.is-dragging { scroll-behavior: auto; cursor: grabbing; scroll-snap-type: none; }

.sce-slide {
	flex: 0 0 calc((100% - (var(--sce-gap) * (var(--sce-columns) - 1))) / var(--sce-columns));
	max-width: calc((100% - (var(--sce-gap) * (var(--sce-columns) - 1))) / var(--sce-columns));
	scroll-snap-align: start;
	display: flex;
}

/* ---------- card ---------- */
.sce-card {
	display: flex;
	flex-direction: column;
	gap: var(--sce-content-gap);
	width: 100%;
	background: #FFFFFF;
	border-radius: 20px;
	padding: 24px;
	transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.sce-equal-height-yes .sce-slide > .sce-card { height: 100%; }

.sce-card__media {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	aspect-ratio: 1 / .75;
	background: #EAF1FF;
}
.sce-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}
.sce-image-zoom-yes .sce-card:hover .sce-card__media img { transform: scale(1.06); }

.sce-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sce-content-gap);
	flex: 1 1 auto;
}

.sce-card__number {
	display: inline-block;
	background: #FFC53D;
	color: #0B1E3F;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 5px 9px;
	border-radius: 8px;
	align-self: flex-start;
}
.sce-card__number--badge {
	position: absolute;
	top: 12px;
	left: 12px;
	align-self: auto;
}
.sce-card__number--inline {
	margin-inline-end: 8px;
	vertical-align: middle;
}

.sce-card__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
	color: #0F1D33;
	transition: color .2s ease;
}

.sce-card__desc {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #5B6B85;
	flex: 1 1 auto;
}
.sce-card__desc p:last-child { margin-bottom: 0; }

.sce-card__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	background: #2A5CD6;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1.5px solid transparent;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.sce-card__button:hover,
.sce-card__button:focus { text-decoration: none; }
.sce-card__button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.sce-card__button-icon {
	width: 15px;
	height: 15px;
	transition: transform .2s ease;
}
.sce-card__button:hover .sce-card__button-icon { transform: translateX(3px); }

/* alignment helpers (prefix class set by the widget) */
.sce-card { align-items: stretch; }
.sce-card__body { align-items: flex-start; }
.sce-align-center .sce-card__body { align-items: center; }
.sce-align-right .sce-card__body { align-items: flex-end; }
.sce-align-center .sce-card__number:not(.sce-card__number--badge) { align-self: center; }
.sce-align-right .sce-card__number:not(.sce-card__number--badge) { align-self: flex-end; }
.sce-card__media { width: 100%; }

/* ---------- footer: progress + dots ---------- */
.sce-carousel__footer {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 18px;
}

.sce-progress {
	flex: 1 1 auto;
	height: 4px;
	border-radius: 999px;
	background: #E7EAF1;
	overflow: hidden;
}
.sce-progress__fill {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: #2A5CD6;
	transition: width .3s ease;
}

.sce-dots {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}
.sce-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #D9DEE9;
	cursor: pointer;
	transition: width .25s ease, border-radius .25s ease, background-color .25s ease;
}
.sce-dot.is-active {
	width: 22px;
	border-radius: 4px;
	background: #2A5CD6;
}
.sce-dot:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
	.sce-track { scroll-behavior: auto; }
	.sce-card,
	.sce-card__media img,
	.sce-card__button,
	.sce-card__button-icon,
	.sce-arrow { transition: none; }
}

/* ---------- editor safety ---------- */
.elementor-editor-active .sce-track { cursor: default; }