.fancy-card-widget {
	/* -----------------------------------------
	   COLOR SYSTEM
	   Base accent: #840000
	----------------------------------------- */

	--fancy-red-900: #4f0000;
	--fancy-red-800: #650000;
	--fancy-red-700: #840000;
	--fancy-red-600: #9a1c1c;
	--fancy-red-100: #f6e7e7;

	--fancy-accent: #840000;
	--fancy-accent-soft: #c98f8f;

	--fancy-ink: #221313;
	--fancy-muted: #8a7c7c;
	--fancy-muted-2: #c9bcbc;

	--fancy-paper: #fffdfb;
	--fancy-line: #ece2e0;
	--fancy-panel: #650000;
	--fancy-panel-dark: #4f0000;

	--fancy-ease: cubic-bezier(.22, 1, .36, 1);
	--fancy-ease-soft: cubic-bezier(.16, .84, .44, 1);

	box-sizing: border-box;
	width: 100%;

	font-family: "SST Arabic", sans-serif !important;
	color: var(--fancy-ink);
}


/* -----------------------------------------
   GLOBAL BOX SIZING
----------------------------------------- */

.fancy-card-widget *,
.fancy-card-widget *::before,
.fancy-card-widget *::after {
	box-sizing: border-box;
}


/* -----------------------------------------
   SHOWCASE
----------------------------------------- */

.fancy-card-showcase {
	display: grid;
	grid-template-columns: 408px 1fr;
	gap: 0;

	width: 100%;

	border-radius: 34px;
	overflow: hidden;

	box-shadow:
		0 48px 96px -48px rgba(79, 0, 0, .35),
		0 2px 0 rgba(0, 0, 0, .02);

	opacity: 1;
	transform: translateY(0);
}


/* -----------------------------------------
   SELECTOR LIST
----------------------------------------- */

.fancy-card-list {
	background: var(--fancy-paper) !important;

	border: 1px solid var(--fancy-line) !important;
	border-left: none !important;

	padding: 17px !important;

	display: flex;
	flex-direction: column;
}


/* -----------------------------------------
   SELECTOR ITEM
----------------------------------------- */

.fancy-card-item,
.fancy-card-item:hover,
.fancy-card-item:focus,
.fancy-card-item:focus-visible,
.fancy-card-item:active {
	all: unset;

	appearance: none !important;
	-webkit-appearance: none !important;

	box-sizing: border-box !important;

	cursor: pointer !important;

	display: flex !important;
	flex-direction: column !important;

	gap: 12px !important;

	width: 100% !important;
	min-height: 0 !important;
	height: auto !important;

	margin: 0 !important;

	padding: 19px !important;

	border: 0 !important;
	border-width: 0 !important;
	border-style: none !important;
	border-color: transparent !important;
	border-radius: 17px !important;

	outline: none !important;

	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;

	box-shadow: none !important;

	color: inherit !important;

	font-family: "SST Arabic", sans-serif !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;

	text-align: right !important;
	text-decoration: none !important;

	transform: none !important;

	transition:
		background .35s var(--fancy-ease),
		color .35s var(--fancy-ease) !important;
}


.fancy-card-item:hover {
	background: var(--fancy-red-100) !important;
	background-color: var(--fancy-red-100) !important;
}


.fancy-card-item.active {
	background: var(--fancy-red-100) !important;
	background-color: var(--fancy-red-100) !important;
}


.fancy-card-item.active:hover,
.fancy-card-item.active:focus,
.fancy-card-item.active:focus-visible {
	background: var(--fancy-red-100) !important;
	background-color: var(--fancy-red-100) !important;
}


/* Prevent Elementor/theme pseudo-button effects */

.fancy-card-item::before,
.fancy-card-item::after {
	display: none !important;
	content: none !important;

	width: auto !important;
	height: auto !important;

	margin: 0 !important;
	padding: 0 !important;

	background: none !important;
	border: 0 !important;
	box-shadow: none !important;

	transform: none !important;
}


/* -----------------------------------------
   ITEM SPACING
----------------------------------------- */

.fancy-card-item + .fancy-card-item {
	margin-top: 2px !important;
}


/* -----------------------------------------
   ITEM ROW
----------------------------------------- */

.fancy-card-row {
	display: flex;
	align-items: baseline;
	gap: 14px;

	width: 100%;
}


/* -----------------------------------------
   ITEM NUMBER
----------------------------------------- */

.fancy-card-num {
	display: inline-block;

	margin: 0 !important;
	padding: 0 !important;

	font-family: "SST Arabic", sans-serif !important;
	font-size: 14.4px !important;
	font-weight: 800 !important;
	line-height: normal !important;

	color: var(--fancy-muted-2) !important;

	letter-spacing: .04em;

	transition:
		color .35s var(--fancy-ease) !important;

	min-width: 24px;
}


.fancy-card-item.active .fancy-card-num {
	color: var( --e-global-color-accent ) !important;
}


/* -----------------------------------------
   ITEM TITLE
----------------------------------------- */

.fancy-card-title {
	display: inline-block;

	margin: 0 !important;
	padding: 0 !important;

	font-family: "SST Arabic", sans-serif !important;
	font-size: 17.4px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;

	color: var(--fancy-ink) !important;

	text-decoration: none !important;

	transition:
		color .35s var(--fancy-ease) !important;
}


.fancy-card-item.active .fancy-card-title {
	color: var(--fancy-red-800) !important;
}


/* -----------------------------------------
   PROGRESS TRACK
----------------------------------------- */

.fancy-card-track {
	display: block;

	height: 2px !important;
	min-height: 2px !important;
	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	background: var(--fancy-line) !important;
	background-color: var(--fancy-line) !important;
	background-image: none !important;

	border: 0 !important;
	border-radius: 3px !important;

	box-shadow: none !important;

	overflow: hidden;
}


.fancy-card-fill {
	display: block;

	height: 100% !important;
	min-height: 0 !important;
	width: 0;

	margin: 0 !important;
	padding: 0 !important;

	background:
		linear-gradient(
			90deg,
			var( --e-global-color-accent ),
			var( --e-global-color-accent )
		)  !important;

	border: 0 !important;
	border-radius: 3px !important;

	box-shadow: none !important;
}


.fancy-card-item.active .fancy-card-fill.run {
	animation:
		fancy-card-fillbar
		var(--fancy-autoplay-duration, 4.6s)
		linear
		forwards;
}


@keyframes fancy-card-fillbar {
	from {
		width: 0%;
	}

	to {
		width: 100%;
	}
}


/* -----------------------------------------
   LARGE PANEL
----------------------------------------- */

.fancy-card-panel {
	position: relative;

	background:
		linear-gradient(
			155deg,
			var(--fancy-panel),
			var(--fancy-panel-dark) 70%
		) !important;

	padding: 67px 62px !important;

	display: flex;
	flex-direction: column;
	justify-content: center;

	overflow: hidden;

	min-height: 456px;
}


/* -----------------------------------------
   ACCENT GLOW
----------------------------------------- */

.fancy-card-glow {
	position: absolute;

	width: 504px;
	height: 504px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			color-mix(
				in srgb,
				var(--fancy-accent) 35%,
				transparent
			),
			transparent 70%
		) !important;

	filter: blur(12px);

	transition:
		transform 1.1s var(--fancy-ease-soft),
		opacity .6s var(--fancy-ease);

	pointer-events: none;
}


/* -----------------------------------------
   GRAIN
----------------------------------------- */

.fancy-card-grain {
	position: absolute;
	inset: 0;

	background-image:
		radial-gradient(
			rgba(255, 255, 255, .05) 1px,
			transparent 1px
		) !important;

	background-size: 26px 26px !important;

	opacity: .5;

	pointer-events: none;
}


/* -----------------------------------------
   PANEL CONTENT
----------------------------------------- */


.fancy-card-panel-inner {
	position: relative;
	z-index: 2;

	max-width: 550px;

	font-family: "SST Arabic", sans-serif !important;

	/*
	 * 1.1x additional visual emphasis
	 */
	transform-origin: right center;
}


/* -----------------------------------------
   ICON
----------------------------------------- */

.fancy-card-icon {
	width: 79px !important;
	height: 79px !important;

	min-width: 79px;
	min-height: 79px;

	margin: 0 0 34px !important;
	padding: 0 !important;

	border-radius: 18px !important;

	background: rgba(255, 255, 255, .08) !important;
	background-image: none !important;

	border: 1px solid rgba(255, 255, 255, .14) !important;

	display: flex;
	align-items: center;
	justify-content: center;

	color: var(--fancy-accent-soft) !important;

	box-shadow: none !important;

	transition:
		opacity .4s var(--fancy-ease),
		transform .5s var(--fancy-ease-soft);
}


.fancy-card-icon svg {
	display: block;

	width: 37px !important;
	height: 37px !important;

	margin: 0 !important;
	padding: 0 !important;
}


/* -----------------------------------------
   PANEL TITLE
----------------------------------------- */

.fancy-card-panel-title {
	margin: 0 0 18px !important;
	padding: 0 !important;

	font-family: "SST Arabic", sans-serif !important;
	font-size: 34.3px !important;
	font-weight: 800 !important;
	line-height: 1.4 !important;

	color: #fff !important;

	background: transparent !important;

	border: 0 !important;
	box-shadow: none !important;

	transition:
		opacity .4s var(--fancy-ease),
		transform .5s var(--fancy-ease-soft);
}


/* -----------------------------------------
   PANEL DESCRIPTION
----------------------------------------- */

.fancy-card-panel-description {
	margin: 0 !important;
	padding: 0 !important;

	font-family: "SST Arabic", sans-serif !important;
	font-size: 19.8px !important;
	font-weight: 400 !important;
	line-height: 2 !important;

	color: rgba(255, 255, 255, .72) !important;

	background: transparent !important;

	border: 0 !important;
	box-shadow: none !important;

	transition:
		opacity .4s var(--fancy-ease),
		transform .5s var(--fancy-ease-soft);
}


/* -----------------------------------------
   CONTENT TRANSITION STATE
----------------------------------------- */

.fancy-card-widget .fade-swap {
	opacity: 0 !important;
	transform: translateY(10px);
}


/* -----------------------------------------
   TABLET
----------------------------------------- */

@media (max-width: 860px) {

	.fancy-card-showcase {
		grid-template-columns: 1fr;
		border-radius: 27px;
	}


	/* -----------------------------------------
	   HORIZONTAL SELECTOR
	----------------------------------------- */

	.fancy-card-list {
		border-left: 1px solid var(--fancy-line) !important;
		border-bottom: none !important;

		flex-direction: row;

		overflow-x: auto;
		overflow-y: hidden;

		gap: 7px;

		padding: 17px !important;

		scrollbar-width: none;
	}


	.fancy-card-list::-webkit-scrollbar {
		display: none;
	}


	/*
	 * LOCK THE BUTTON WIDTH.
	 *
	 * Elementor frequently applies width: 100%,
	 * flex-grow, align-self, or button sizing
	 * rules at tablet/mobile breakpoints.
	 *
	 * The selector therefore gets an explicit
	 * fixed flex basis + width + max-width.
	 */

	.fancy-card-item,
	.fancy-card-item:hover,
	.fancy-card-item:focus,
	.fancy-card-item:focus-visible,
	.fancy-card-item:active,
	.fancy-card-item.active {
		flex: 0 0 252px !important;

		width: 252px !important;
		min-width: 252px !important;
		max-width: 252px !important;

		align-self: flex-start !important;

		margin: 0 !important;

		transform: none !important;
	}


	.fancy-card-item + .fancy-card-item {
		margin-top: 0 !important;
	}


	/* -----------------------------------------
	   TALLER PREVIEW PANEL
	----------------------------------------- */

	.fancy-card-panel {
		padding: 52px 36px !important;

		min-height: 480px;

		display: flex;
		align-items: flex-start;
		justify-content: center;
	}


	.fancy-card-panel-inner {
		width: 100%;
		max-width: none;

		transform-origin: right center;
	}


	.fancy-card-icon {
		width: 76px !important;
		height: 76px !important;

		min-width: 76px;
		min-height: 76px;
	}


	.fancy-card-panel-title {
		font-size: 32px !important;
	}


	.fancy-card-panel-description {
		font-size: 18px !important;
	}
}


/* -----------------------------------------
   MOBILE
----------------------------------------- */

@media (max-width: 767px) {

	.fancy-card-showcase {
		border-radius: 23px;
	}


	.fancy-card-list {
		padding: 14px !important;

		gap: 6px;

		overflow-x: auto;
		overflow-y: hidden;
	}


	/*
	 * Slightly narrower than tablet, but STILL
	 * explicitly fixed so Elementor cannot stretch
	 * the selected button.
	 */

	.fancy-card-item,
	.fancy-card-item:hover,
	.fancy-card-item:focus,
	.fancy-card-item:focus-visible,
	.fancy-card-item:active,
	.fancy-card-item.active {
		flex: 0 0 235px !important;

		width: 235px !important;
		min-width: 235px !important;
		max-width: 235px !important;

		align-self: flex-start !important;

		margin: 0 !important;
		padding: 19px !important;

		transform: none !important;
	}


	/* -----------------------------------------
	   LONGER MOBILE PREVIEW
	----------------------------------------- */

	.fancy-card-panel {
		padding: 54px 28px !important;

		min-height: 520px;

		align-items: flex-start;
		justify-content: center;
	}


	.fancy-card-panel-inner {
		width: 100%;
		max-width: none;

		transform-origin: right center;
	}


	.fancy-card-icon {
		width: 72px !important;
		height: 72px !important;

		min-width: 72px;
		min-height: 72px;

		margin-bottom: 30px !important;
	}


	.fancy-card-icon svg {
		width: 34px !important;
		height: 34px !important;
	}


	.fancy-card-panel-title {
		font-size: 30px !important;
		line-height: 1.4 !important;

		margin-bottom: 17px !important;
	}


	.fancy-card-panel-description {
		font-size: 17px !important;
		line-height: 2 !important;
	}
}


/* -----------------------------------------
   VERY SMALL MOBILE
----------------------------------------- */

@media (max-width: 480px) {

	.fancy-card-item,
	.fancy-card-item:hover,
	.fancy-card-item:focus,
	.fancy-card-item:focus-visible,
	.fancy-card-item:active,
	.fancy-card-item.active {
		flex-basis: 220px !important;

		width: 220px !important;
		min-width: 220px !important;
		max-width: 220px !important;
	}


	.fancy-card-panel {
		min-height: 540px;

		padding: 50px 24px !important;
	}


	.fancy-card-panel-inner {
		transform-origin: right center;
	}
}


/* -----------------------------------------
   REDUCED MOTION
----------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.fancy-card-widget *,
	.fancy-card-widget *::before,
	.fancy-card-widget *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}


/* -----------------------------------------
   TAB TYPOGRAPHY
----------------------------------------- */

.fancy-card-title {
	font-family: "SST Arabic", sans-serif !important;

	font-size: 17.4px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;

	color: var(--fancy-ink) !important;
}

@media (max-width: 1024px) {
	.fancy-card-title {
		white-space: nowrap !important;
	}
}

.fancy-card-num {
	font-weight: 500 !important;
	white-space: nowrap !important;
}


/* -----------------------------------------
   TABLET
----------------------------------------- */

@media (max-width: 860px) {

/* -----------------------------------------
   SELECTOR ITEM
   CONTENT-FITTING WIDTH
----------------------------------------- */

.fancy-card-item,
.fancy-card-item:hover,
.fancy-card-item:focus,
.fancy-card-item:focus-visible,
.fancy-card-item:active,
.fancy-card-item.active {
	/*
	 * Let the button be as wide as its content requires.
	 * It must never shrink enough to wrap the title.
	 */
	width: max-content !important;
	min-width: max-content !important;
	max-width: max-content !important;

	flex: 0 0 auto !important;

	white-space: nowrap !important;

	/*
	 * Prevent Elementor from stretching the button.
	 */
	align-self: flex-start !important;
}




	.fancy-card-item,
	.fancy-card-item:hover,
	.fancy-card-item:focus,
	.fancy-card-item:focus-visible,
	.fancy-card-item:active,
	.fancy-card-item.active {
		flex: 0 0 auto !important;

		width: max-content !important;
		min-width: max-content !important;
		max-width: max-content !important;

		align-self: flex-start !important;

		white-space: nowrap !important;

		margin: 0 !important;
	}


	.fancy-card-title {
		white-space: nowrap !important;
		font-weight: 500 !important;
	}


	.fancy-card-panel {
		min-height: 450px;
	}
}


/* -----------------------------------------
   MOBILE
----------------------------------------- */

@media (max-width: 767px) {

	.fancy-card-item,
	.fancy-card-item:hover,
	.fancy-card-item:focus,
	.fancy-card-item:focus-visible,
	.fancy-card-item:active,
	.fancy-card-item.active {
		flex: 0 0 auto !important;

		width: max-content !important;
		min-width: max-content !important;
		max-width: max-content !important;

		align-self: flex-start !important;

		white-space: nowrap !important;

		margin: 0 !important;
		padding: 19px !important;
	}


	.fancy-card-title {
		font-size: 17.4px !important;
		font-weight: 500 !important;

		white-space: nowrap !important;
	}


	/*
	 * Reduced from the previous 520px.
	 */
	.fancy-card-panel {
		min-height: 440px;
		padding: 48px 28px !important;
	}
}


/* -----------------------------------------
   VERY SMALL MOBILE
----------------------------------------- */

@media (max-width: 480px) {

	.fancy-card-item,
	.fancy-card-item:hover,
	.fancy-card-item:focus,
	.fancy-card-item:focus-visible,
	.fancy-card-item:active,
	.fancy-card-item.active {
		flex: 0 0 auto !important;

		width: max-content !important;
		min-width: max-content !important;
		max-width: max-content !important;

		white-space: nowrap !important;
	}


	.fancy-card-panel {
		min-height: 420px;
		padding: 44px 24px !important;
	}
}




html[lang^="en"] .fancy-card-showcase {
	direction: ltr;
	grid-template-columns: 408px 1fr;
}

html[lang^="en"] .fancy-card-list {
	direction: ltr;
	border-left: 1px solid var(--fancy-line) !important;
	border-right: none !important;
}

html[lang^="en"] .fancy-card-item,
html[lang^="en"] .fancy-card-item:hover,
html[lang^="en"] .fancy-card-item:focus,
html[lang^="en"] .fancy-card-item:focus-visible,
html[lang^="en"] .fancy-card-item:active {
	direction: ltr;
	text-align: left !important;
}

html[lang^="en"] .fancy-card-panel {
	direction: ltr;
	text-align: left !important;
}

html[lang^="en"] .fancy-card-panel-inner {
	direction: ltr;
	text-align: left !important;
	transform-origin: left center;
}

html[lang^="en"] .fancy-card-panel-title {
	font-weight: 400 !important;
	text-align: left !important;
}

html[lang^="en"] .fancy-card-panel-description {
	text-align: left !important;
}

html[lang^="en"] .fancy-card-title,
html[lang^="en"] .fancy-card-num {
	text-align: left !important;
}

/* Keep the English panel on the right on tablet/mobile as well.
   The existing responsive rules still control the stacked layout. */
@media (max-width: 860px) {
	html[lang^="en"] .fancy-card-showcase {
		grid-template-columns: 1fr;
	}

	html[lang^="en"] .fancy-card-list {
		border-left: 1px solid var(--fancy-line) !important;
		border-right: none !important;
	}

	html[lang^="en"] .fancy-card-panel-inner {
		transform-origin: left center;
	}
}