/* Elementor wrappers often clip sticky descendants — keep the stack visible. */
.elementor-widget-ababil-sticky-cards,
.elementor-widget-ababil-sticky-cards > .elementor-widget-container {
	overflow: visible !important;
}

/*
 * Defaults live on the Elementor widget wrapper only.
 * Do NOT redeclare these on `.ababil-sticky-cards` or editor Stack
 * controls (set on {{WRAPPER}}) get overridden and appear broken.
 */
.elementor-widget-ababil-sticky-cards {
	--ababil-sticky-cards-brand: #ffcc00;
	--ababil-sticky-cards-overlap: 1.25rem;
	--ababil-sticky-cards-overlap-lg: 1.5rem;
	--ababil-sticky-cards-base-top: 5rem;
	--ababil-sticky-cards-step: 4.5rem;
	--ababil-sticky-cards-peek-count: 3;
	--ababil-sticky-cards-card-width: 72%;
	--ababil-sticky-cards-fan-angle: 3deg;
	--ababil-sticky-cards-hand-height: auto;
	--ababil-sticky-cards-scroll-per-card: 160px;
}

.ababil-sticky-cards {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: visible;
	isolation: isolate;
}

/* Invisible room so short pages / end-of-page stacks can still reach every card. */
.ababil-sticky-cards__end-spacer {
	display: block;
	width: 100%;
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	pointer-events: none;
	flex-shrink: 0;
}

.ababil-sticky-cards *,
.ababil-sticky-cards *::before,
.ababil-sticky-cards *::after {
	box-sizing: border-box;
}

.ababil-sticky-cards__card {
	--ababil-sticky-card-scale: 0.945;
	--ababil-sticky-card-lift: 0px;
	position: sticky;
	top: var(--ababil-sticky-card-top, var(--ababil-sticky-cards-base-top));
	z-index: var(--ababil-sticky-card-z, 1);
	display: block;
	width: 100%;
	will-change: transform, top, box-shadow, opacity;
	transform: translate3d(0, var(--ababil-sticky-card-lift), 0) scale(var(--ababil-sticky-card-scale));
	transform-origin: center top;
	transition:
		top 0.62s cubic-bezier(0.25, 0.8, 0.25, 1),
		transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.35s ease,
		border-color 0.4s ease,
		background-color 0.4s ease,
		filter 0.45s ease;
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.12);
	border-radius: 1.75rem;
	padding: 1.5rem;
	box-shadow:
		0 10px 15px -3px rgba(15, 23, 42, 0.08),
		0 4px 6px -4px rgba(15, 23, 42, 0.08);
	text-decoration: none;
	color: inherit;
	backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
}

.ababil-sticky-cards__card + .ababil-sticky-cards__card {
	margin-top: calc(var(--ababil-sticky-cards-overlap) * -1);
}

@media (min-width: 640px) {
	.ababil-sticky-cards__card {
		padding: 2rem;
	}

	.ababil-sticky-cards__card + .ababil-sticky-cards__card {
		margin-top: calc(var(--ababil-sticky-cards-overlap-lg) * -1);
	}
}

.ababil-sticky-cards__card.is-stack-peek {
	--ababil-sticky-card-scale: 0.955;
	--ababil-sticky-card-lift: 0px;
	filter: saturate(0.97) brightness(0.995);
}

.ababil-sticky-cards__card.is-active {
	--ababil-sticky-card-scale: 1;
	--ababil-sticky-card-lift: -3px;
	z-index: 999 !important;
	border-color: color-mix(in srgb, var(--ababil-sticky-cards-brand) 35%, rgba(15, 23, 42, 0.12));
	box-shadow:
		0 20px 36px -12px rgba(15, 23, 42, 0.16),
		0 8px 14px -8px rgba(15, 23, 42, 0.1);
}

.ababil-sticky-cards__card.is-activating {
	animation: ababil-sticky-card-activate 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes ababil-sticky-card-activate {
	0% {
		transform: translate3d(0, 1px, 0) scale(0.97);
	}

	60% {
		transform: translate3d(0, -5px, 0) scale(1.012);
	}

	100% {
		transform: translate3d(0, -3px, 0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ababil-sticky-cards__card.is-activating {
		animation: none;
	}
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.ababil-sticky-cards__card.is-active {
		border-color: rgba(15, 23, 42, 0.16);
	}
}

.ababil-sticky-cards__title,
.ababil-sticky-cards__description,
.ababil-sticky-cards__tag {
	transition:
		opacity 0.4s ease,
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.ababil-sticky-cards__card:not(.is-active) .ababil-sticky-cards__description,
.ababil-sticky-cards__card:not(.is-active) .ababil-sticky-cards__tag {
	opacity: 0.7;
	transform: translateY(2px);
}

.ababil-sticky-cards__card.is-active .ababil-sticky-cards__description,
.ababil-sticky-cards__card.is-active .ababil-sticky-cards__tag {
	opacity: 1;
	transform: translateY(0);
}

/* Past peek-limit: tucked behind the first visible peek. */
.ababil-sticky-cards__card.is-stack-collapsed {
	pointer-events: none;
	user-select: none;
	opacity: 0;
	filter: blur(0);
}

/* Waiting cards peek below the active card. */
.ababil-sticky-cards__card.is-stack-upcoming {
	pointer-events: none;
	--ababil-sticky-card-scale: 0.94;
	filter: saturate(0.96) brightness(0.99);
}

.ababil-sticky-cards--no-motion .ababil-sticky-cards__card,
.ababil-sticky-cards--reduce-motion .ababil-sticky-cards__card {
	transition: none !important;
}

.ababil-sticky-cards--layout-vertical.ababil-sticky-cards--reduce-motion .ababil-sticky-cards__card {
	--ababil-sticky-card-scale: 1;
	--ababil-sticky-card-lift: 0px;
	filter: none;
	opacity: 1;
}

.ababil-sticky-cards__card--link:hover {
	color: inherit;
	text-decoration: none;
}

.ababil-sticky-cards__card--link:focus-visible {
	outline: 2px solid var(--ababil-sticky-cards-brand);
	outline-offset: 3px;
}

.ababil-sticky-cards__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
}

.ababil-sticky-cards--align-left .ababil-sticky-cards__body {
	align-items: flex-start;
	text-align: left;
}

.ababil-sticky-cards--align-center .ababil-sticky-cards__body {
	align-items: center;
	text-align: center;
}

.ababil-sticky-cards--align-right .ababil-sticky-cards__body {
	align-items: flex-end;
	text-align: right;
}

@media (min-width: 640px) {
	.ababil-sticky-cards__body {
		flex-direction: row;
		align-items: center;
		gap: 1.25rem;
		text-align: start;
	}

	.ababil-sticky-cards--align-left .ababil-sticky-cards__body {
		justify-content: flex-start;
		text-align: left;
	}

	.ababil-sticky-cards--align-center .ababil-sticky-cards__body {
		justify-content: center;
		text-align: center;
	}

	.ababil-sticky-cards--align-right .ababil-sticky-cards__body {
		justify-content: flex-end;
		flex-direction: row-reverse;
		text-align: right;
	}
}

.ababil-sticky-cards__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 9999px;
	background: color-mix(in srgb, var(--ababil-sticky-cards-brand) 15%, transparent);
	color: var(--ababil-sticky-cards-brand);
	transition: color 0.3s ease, background-color 0.3s ease;
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.ababil-sticky-cards__icon {
		background: rgba(255, 204, 0, 0.15);
	}
}

@media (min-width: 640px) {
	.ababil-sticky-cards__icon {
		width: 4rem;
		height: 4rem;
	}
}

.ababil-sticky-cards__icon i,
.ababil-sticky-cards__icon svg {
	display: block;
	font-size: 1.75rem;
	width: 1.75rem;
	height: 1.75rem;
	line-height: 1;
}

@media (min-width: 640px) {
	.ababil-sticky-cards__icon i,
	.ababil-sticky-cards__icon svg {
		font-size: 2rem;
		width: 2rem;
		height: 2rem;
	}
}

.ababil-sticky-cards__content {
	min-width: 0;
	flex: 1;
}

.ababil-sticky-cards__title {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: #0f172a;
}

@media (min-width: 640px) {
	.ababil-sticky-cards__title {
		font-size: 1.5rem;
	}
}

.ababil-sticky-cards__description {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
	line-height: 1.625;
	color: #64748b;
}

@media (min-width: 640px) {
	.ababil-sticky-cards__description {
		font-size: 1rem;
	}
}

.ababil-sticky-cards__tag {
	display: inline-flex;
	align-items: center;
	margin-top: 0.25rem;
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	background: #f1f5f9;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: #64748b;
}

/* -------------------------------------------------------------------------
 * Horizontal layout — playing-card hand.
 * Side cards peek as thin edges; the active card sits fully in front.
 * ------------------------------------------------------------------------- */
.elementor-widget-ababil-sticky-cards.ababil-sticky-cards-layout-horizontal,
.elementor-widget-ababil-sticky-cards.ababil-sticky-cards-layout-horizontal > .elementor-widget-container {
	width: 100%;
}

.ababil-sticky-cards--layout-horizontal {
	display: block;
	position: relative;
	width: 100%;
}

/*
 * Same idea as vertical: sticky while the page scrolls (scrollbar / wheel / touch).
 * Hand stays content-sized; scroll distance is handled by root height in JS.
 */
.ababil-sticky-cards--layout-horizontal .ababil-sticky-cards__pin {
	position: sticky;
	top: var(--ababil-sticky-cards-base-top, 0px);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--ababil-sticky-cards-hand-height, auto);
	min-height: var(--ababil-sticky-cards-min-height, 0px);
	overflow: visible;
	isolation: isolate;
	padding: 0.75rem 0;
}

.ababil-sticky-cards--layout-horizontal .ababil-sticky-cards__hand,
.ababil-sticky-cards--layout-horizontal .ababil-sticky-cards__track {
	position: relative;
	display: block;
	width: 100%;
	height: var(--ababil-sticky-cards-hand-height, auto);
	min-height: inherit;
	max-width: 72rem;
	margin: 0 auto;
	transform: none;
	transition: none;
}

.ababil-sticky-cards--layout-horizontal .ababil-sticky-cards__scroll-rail {
	position: absolute;
	inset: 0 auto auto 0;
	width: 1px;
	height: 100%;
	pointer-events: none;
	visibility: hidden;
}

.ababil-sticky-cards--layout-horizontal .ababil-sticky-cards__card {
	--hand-x: 0px;
	--hand-y: 0px;
	--hand-rotate: 0deg;
	--hand-scale: 0.92;
	position: absolute !important;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: var(--ababil-sticky-cards-card-width);
	max-width: min(36rem, calc(100% - 2.5rem));
	margin: 0 !important;
	transform:
		translate3d(calc(-50% + var(--hand-x)), calc(-50% + var(--hand-y)), 0)
		rotate(var(--hand-rotate))
		scale(var(--hand-scale));
	transform-origin: center bottom;
	will-change: transform, opacity, box-shadow, filter;
	transition:
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.4s ease,
		box-shadow 0.45s ease,
		border-color 0.4s ease,
		filter 0.45s ease,
		background-color 0.4s ease;
	/* Peeks stay clickable so users can bring a card to the front. */
	pointer-events: auto;
	cursor: pointer;
}

.ababil-sticky-cards--layout-horizontal .ababil-sticky-cards__card.is-active {
	--hand-x: 0px;
	--hand-y: -6px;
	--hand-rotate: 0deg;
	--hand-scale: 1;
	z-index: 200 !important;
	opacity: 1;
	filter: none;
	cursor: default;
}

.ababil-sticky-cards--layout-horizontal .ababil-sticky-cards__card.is-stack-peek,
.ababil-sticky-cards--layout-horizontal .ababil-sticky-cards__card.is-stack-upcoming {
	opacity: 1;
	filter: saturate(0.92) brightness(0.97);
}

.ababil-sticky-cards--layout-horizontal .ababil-sticky-cards__card.is-stack-collapsed {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

/* Peek cards: only the edge reads like a card in hand; content stays muted. */
.ababil-sticky-cards--layout-horizontal .ababil-sticky-cards__card:not(.is-active) .ababil-sticky-cards__description,
.ababil-sticky-cards--layout-horizontal .ababil-sticky-cards__card:not(.is-active) .ababil-sticky-cards__tag {
	opacity: 0;
	transform: none;
}

.ababil-sticky-cards--layout-horizontal .ababil-sticky-cards__card:not(.is-active) .ababil-sticky-cards__title {
	opacity: 0.55;
}

.ababil-sticky-cards--layout-horizontal .ababil-sticky-cards__card.is-active .ababil-sticky-cards__description,
.ababil-sticky-cards--layout-horizontal .ababil-sticky-cards__card.is-active .ababil-sticky-cards__tag,
.ababil-sticky-cards--layout-horizontal .ababil-sticky-cards__card.is-active .ababil-sticky-cards__title {
	opacity: 1;
	transform: none;
}

.ababil-sticky-cards--layout-horizontal .ababil-sticky-cards__body {
	height: 100%;
}

.ababil-sticky-cards--layout-horizontal.ababil-sticky-cards--no-motion .ababil-sticky-cards__card,
.ababil-sticky-cards--layout-horizontal.ababil-sticky-cards--reduce-motion .ababil-sticky-cards__card {
	transition: none !important;
}

.ababil-sticky-cards--layout-horizontal.ababil-sticky-cards--reduce-motion .ababil-sticky-cards__card {
	--hand-rotate: 0deg;
	filter: none;
}

.ababil-sticky-cards--layout-horizontal.ababil-sticky-cards--reduce-motion .ababil-sticky-cards__card.is-stack-collapsed {
	opacity: 0;
	visibility: hidden;
}

@keyframes ababil-sticky-card-activate-hand {
	0% {
		transform:
			translate3d(calc(-50% + var(--hand-x)), calc(-50% + 8px), 0)
			rotate(var(--hand-rotate))
			scale(0.96);
	}

	60% {
		transform:
			translate3d(calc(-50% + var(--hand-x)), calc(-50% + -10px), 0)
			rotate(0deg)
			scale(1.02);
	}

	100% {
		transform:
			translate3d(calc(-50% + var(--hand-x)), calc(-50% + var(--hand-y)), 0)
			rotate(0deg)
			scale(1);
	}
}

.ababil-sticky-cards--layout-horizontal .ababil-sticky-cards__card.is-activating {
	animation: ababil-sticky-card-activate-hand 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 639px) {
	.elementor-widget-ababil-sticky-cards {
		--ababil-sticky-cards-card-width: 84%;
	}

	.ababil-sticky-cards--layout-horizontal .ababil-sticky-cards__pin {
		padding: 0.5rem 0;
	}

	.ababil-sticky-cards--layout-horizontal .ababil-sticky-cards__card {
		max-width: calc(100% - 1.25rem);
	}
}