.srv-bx {
	--srv-c:var(--uicolor);
	position:relative;
	min-width:0;
	flex:1 1 calc(34% - 14px);
	display:flex;
	direction:rtl;
	overflow:hidden;
	min-height:218px;
	border:1px solid var(--diver);
	border-radius:15px;
	background:var(--surface-color);
	box-shadow:0 8px 20px color-mix(
		in srgb,
		var(--primary-text) 5%,
		transparent
	);
	transition:
		transform var(--transition),
		border-color var(--transition),
		box-shadow var(--transition);
}

.srv-bx.is-pop {
	border-color:var(--srv-c);
	box-shadow:0 12px 28px color-mix(
		in srgb,
		var(--uicolor) 10%,
		transparent
	);
}

.srv-bx .srv-pop {
	position:absolute;
	top:17px;
	inset-inline-end:0;
	z-index:3;
	min-width:104px;
	min-height:33px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding: 5px 27px;
	border-start-start-radius: 5px;
	border-end-start-radius: 5px;
	color: #ffffff;
	background: var(--uicolor2);
	font-size: 16px;
	font-weight: 900;
	line-height:1.35;
	text-align:center;
}

.srv-bx .srv-im {
	position:relative;
	width:48%;
	flex:0 0 48%;
	display:flex;
	align-items:center;
	justify-content:center;
	max-height:250px;
	background:var(--media-placeholder);
	overflow:hidden;
}

.srv-bx .srv-im picture {
	width:100%;
	height:100%;
	display:block;
}

.srv-bx .srv-im img {
	width:100%;
	height:100%;
	max-width:none;
	display:block;
	object-fit:cover;
}

.srv-bx .srv-ph {
	width:100%;
	height:100%;
	min-height:218px;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--srv-c);
	background:color-mix(
		in srgb,
		var(--srv-c) 8%,
		var(--surface-color)
	);
	font-size:48px;
}

.srv-bx .srv-cn {
	position:relative;
	flex:1;
	min-width:0;
	display:flex;
	align-items:flex-start;
	flex-direction:column;
	direction:rtl;
	padding:18px 16px 12px;
}

.srv-bx .srv-cn::after {
	content:"";
	position:absolute;
	inset-block:0;
	inset-inline-end:-63px;
	z-index:1;
	width:64px;
	pointer-events:none;
	background:linear-gradient(
		270deg,
		var(--surface-color) 8%,
		transparent
	);
}

.srv-bx .srv-cn > * {
	position:relative;
	z-index:2;
}

.srv-bx .srv-ic {
	width:48px;
	height:48px;
	flex:0 0 48px;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-block-end:8px;
	border-radius:50%;
	color:var(--on-color);
	background: var(--positive);
	font-size:23px;
}

.srv-bx .srv-ic svg {
	width:auto;
	height:auto;
	max-width:25px;
	max-height:25px;
}

.srv-bx .srv-cn h3 {
	width:100%;
	min-width:0;
	margin:0 0 11px;
	color:var(--section-title,var(--primary-text));
	font-size: 25px;
	font-weight: 800;
	line-height:1.35;
	overflow-wrap:anywhere;
}

.srv-bx .srv-cn h3 a {
	display:block;
	color:inherit;
}

.srv-bx .srv-cn p {
	width:100%;
	min-width:0;
	margin:0 0 7px;
	color:var(--secondarytext);
	font-size:14px;
	font-weight:700;
	line-height:1.55;
	overflow-wrap:anywhere;
}

.srv-bx .srv-pr {
	width:100%;
	min-width:0;
	display:flex;
	align-items:flex-end;
	flex-wrap:wrap;
	gap:4px;
	margin-block-start:auto;
	color:var(--secondarytext);
	font-size:14px;
	font-weight:700;
	line-height:1.3;
}

.srv-bx .srv-pr strong {
	color:var(--srv-c);
	font-family:var(--f-number);
	font-size:19px;
	font-weight:900;
	line-height:1;
}

.srv-bx .srv-pr b {
	color:var(--srv-c);
	font-size:12px;
	font-weight:900;
}

.srv-bx .srv-pr .srv-req {
	font-family:var(--font-family);
	font-size:17px;
	line-height:1.35;
}

.srv-bx .srv-btn {
	width:100%;
	margin-block-start:12px;
}

.srv-bx .srv-btn > a {
	width:100%;
	min-height:41px;
	gap:8px;
	padding-inline:12px;
	border-radius:7px;
	background:var(--srv-c);
	box-shadow:none;
	color: #fff;
	font-size:16px;
	text-align:center;
	white-space:normal;
}

.srv-bx :is(
	.srv-im,
	.srv-cn h3 a,
	.srv-btn > a
):focus-visible {
	outline:2px solid var(--srv-c);
	outline-offset:-2px;
}

/* =========================
   LTR Support
========================= */

html[dir="ltr"] .srv-bx,
html[dir="ltr"] .srv-bx .srv-cn {
	direction:ltr;
}

html[dir="ltr"] .srv-bx .srv-cn::after {
	background:linear-gradient(
		90deg,
		var(--surface-color) 8%,
		transparent
	);
}

html[dir="ltr"] .srv-bx .srv-btn i {
	transform:scaleX(-1);
}

/* =========================
   Desktop Interaction
========================= */

@media (hover:hover) and (pointer:fine) {
	.srv-bx:hover {
		border-color: #00000026;
		box-shadow: 0px 0px 7px #00000024;
		transform:translateY(-4px);
	}

	.srv-bx .srv-btn > a:hover {
		background:var(--uicolor2);
	}
}

/* =========================
   Tablet Responsive
========================= */

@media only screen and (max-width:1220px) {
	.srv-bx {
		flex-basis:calc(50% - 9px);
	}

	.srv-bx .srv-cn {
		padding-inline:18px;
	}
}

/* =========================
   Mobile App Experience
========================= */

@media only screen and (max-width:760px) {
	.srv-bx {
		--srv-mobile-width:min(
			320px,
			calc(
				100vw -
				var(--container-padding--value) -
				var(--container-padding--value)
			)
		);

		width:var(--srv-mobile-width);
		min-width:var(--srv-mobile-width);
		flex:0 0 var(--srv-mobile-width);
		min-height:246px;
		border-radius:16px;
		scroll-snap-align:start;
		scroll-snap-stop:always;
		box-shadow:0 10px 24px color-mix(
			in srgb,
			var(--primary-text) 7%,
			transparent
		);
	}

	.srv-bx .srv-pop {
		top:12px;
		min-width:94px;
		min-height:30px;
		padding:5px 11px;
		border-start-start-radius:13px;
		border-end-start-radius:13px;
		font-size:10px;
	}

	.srv-bx .srv-im {
		width:42%;
		height:auto;
		min-height:100%;
		flex:0 0 42%;
		align-self:stretch;
		max-height:none;
	}

	.srv-bx .srv-im img {
		object-position:center;
	}

	.srv-bx .srv-ph {
		min-height:100%;
		font-size:40px;
	}

	.srv-bx .srv-cn {
		padding:15px 14px 13px;
	}

	.srv-bx .srv-cn::after {
		inset-inline-end:-47px;
		width:48px;
	}

	.srv-bx .srv-ic {
		width:42px;
		height:42px;
		flex-basis:42px;
		margin-block-end:9px;
		font-size:20px;
	}

	.srv-bx .srv-ic svg {
		max-width:22px;
		max-height:22px;
	}

	.srv-bx .srv-cn h3 {
		margin-block-end:8px;
		font-size:17px;
		line-height:1.4;
	}

	.srv-bx .srv-cn p {
		margin-block-end:8px;
		font-size:12px;
		line-height:1.65;
	}

	.srv-bx .srv-pr {
		gap:3px 4px;
		font-size:12px;
		line-height:1.4;
	}

	.srv-bx .srv-pr strong {
		font-size:18px;
	}

	.srv-bx .srv-pr b {
		font-size:11px;
	}

	.srv-bx .srv-pr .srv-req {
		font-size:15px;
	}

	.srv-bx .srv-btn {
		margin-block-start:11px;
	}

	.srv-bx .srv-btn > a {
		min-height:44px;
		padding:7px 10px;
		border-radius:9px;
		font-size:13px;
		line-height:1.35;
	}

	.srv-bx .srv-btn > a:active {
		background:var(--uicolor2);
		transform:translateY(1px);
	}
}

/* =========================
   Small Mobile Adjustments
========================= */

@media only screen and (max-width:390px) {
	.srv-bx {
		min-height:238px;
	}

	.srv-bx .srv-im {
		width:39%;
		flex-basis:39%;
	}

	.srv-bx .srv-pop {
		top:10px;
		min-width:84px;
		min-height:28px;
		padding-inline:9px;
		font-size:9px;
	}

	.srv-bx .srv-cn {
		padding:13px 11px 11px;
	}

	.srv-bx .srv-cn::after {
		inset-inline-end:-39px;
		width:40px;
	}

	.srv-bx .srv-ic {
		width:38px;
		height:38px;
		flex-basis:38px;
		margin-block-end:7px;
		font-size:18px;
	}

	.srv-bx .srv-ic svg {
		max-width:20px;
		max-height:20px;
	}

	.srv-bx .srv-cn h3 {
		margin-block-end:6px;
		font-size:15px;
		line-height:1.4;
	}

	.srv-bx .srv-cn p {
		margin-block-end:6px;
		font-size:11px;
		line-height:1.6;
	}

	.srv-bx .srv-pr {
		font-size:11px;
	}

	.srv-bx .srv-pr strong {
		font-size:16px;
	}

	.srv-bx .srv-pr b {
		font-size:10px;
	}

	.srv-bx .srv-pr .srv-req {
		font-size:14px;
	}

	.srv-bx .srv-btn {
		margin-block-start:9px;
	}

	.srv-bx .srv-btn > a {
		min-height:44px;
		padding-inline:8px;
		font-size:12px;
	}
}

/* =========================
   Reduced Motion
========================= */

@media (prefers-reduced-motion:reduce) {
	.srv-bx,
	.srv-bx .srv-btn > a {
		transition:none;
	}
}