.eb-circle-info {
	--eb-circle-left-width: 44%;
	--eb-circle-size: 620px;
	--eb-circle-item-orbit-ratio: 86;
	--eb-circle-node-size: 72px;
	--eb-circle-inner-size: 78%;
	--eb-circle-ring-width: 2px;
	display: grid;
	grid-template-columns: minmax(0, var(--eb-circle-left-width)) minmax(0, 1fr);
	align-items: center;
	gap: 40px;
}

.eb-circle-info__left {
	min-width: 0;
}

.eb-circle-info.eb-circle-info--right-only {
	grid-template-columns: 1fr;
}

.eb-circle-info.eb-circle-info--content-right {
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--eb-circle-left-width));
}

.eb-circle-info.eb-circle-info--content-right .eb-circle-info__left {
	order: 2;
}

.eb-circle-info.eb-circle-info--content-right .eb-circle-info__visual {
	order: 1;
}

.eb-circle-info.eb-circle-info--right-only .eb-circle-info__visual {
	margin-left: auto;
	margin-right: auto;
}

.eb-circle-info__heading {
	margin: 0 0 18px;
	font-size: clamp(28px, 3vw, 56px);
	line-height: 1.15;
	font-weight: 600;
	letter-spacing: 0;
	color: #202738;
}

.eb-circle-info__description {
	margin: 0;
	font-size: 25px;
	line-height: 1.7;
	color: #7b8497;
}

.eb-circle-info__description + .eb-circle-info__description {
	margin-top: 20px;
}

.eb-circle-info__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 36px;
	padding: 14px 36px;
	border-radius: 999px;
	background: #5f6570;
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}

.eb-circle-info__button:hover {
	background: #3f4652;
	color: #ffffff;
	transform: translateY(-2px);
}

.eb-circle-info__visual {
	position: relative;
	display: block;
	width: min(100%, var(--eb-circle-size));
	aspect-ratio: 1 / 1;
	margin-left: auto;
	margin-right: auto;
}

.eb-circle-info__ring {
	position: absolute;
	left: 50%;
	top: 50%;
	border: var(--eb-circle-ring-width) solid #eceef4;
	border-radius: 999px;
	transform: translate(-50%, -50%);
}

.eb-circle-info__ring--outer {
	width: 100%;
	height: 100%;
}

.eb-circle-info__ring--inner {
	width: var(--eb-circle-inner-size);
	height: var(--eb-circle-inner-size);
}

.eb-circle-info__center {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: min(68%, 440px);
	padding: 24px 26px;
	text-align: center;
	transform: translate(-50%, -50%);
}

.eb-circle-info__center-title {
	margin: 0;
	font-size: clamp(20px, 2.1vw, 44px);
	line-height: 1.2;
	font-weight: 700;
	color: #2d3444;
}

.eb-circle-info__center-description {
	margin: 18px 0 0;
	font-size: clamp(18px, 1.1vw, 26px);
	line-height: 1.7;
	color: #8f96a8;
}

.eb-circle-info-center-align-left .eb-circle-info__center {
	align-items: flex-start;
}

.eb-circle-info-center-align-center .eb-circle-info__center {
	align-items: center;
}

.eb-circle-info-center-align-right .eb-circle-info__center {
	align-items: flex-end;
}

.eb-circle-info__nodes {
	position: absolute;
	inset: 0;
}

.eb-circle-info__node {
	position: absolute;
	left: 50%;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--eb-circle-node-size);
	height: var(--eb-circle-node-size);
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #ffffff;
	color: #aeb5c5;
	cursor: pointer;
	box-shadow: 0 5px 16px rgba(30, 38, 56, 0.08);
	transform: translate(-50%, -50%);
	transition: background-color 220ms ease, color 220ms ease, box-shadow 220ms ease;
}

.eb-circle-info__node-icon,
.eb-circle-info__node-icon i,
.eb-circle-info__node-icon svg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	font-size: 26px;
	fill: currentColor;
}

.eb-circle-info__node.is-active {
	background: #1a8dff;
	color: #ffffff;
	box-shadow: 0 12px 30px rgba(26, 141, 255, 0.34);
}

.eb-circle-info__node-icon svg {
	max-width: none;
	max-height: none;
}

.eb-circle-info__node:focus-visible {
	outline: 2px solid #1a8dff;
	outline-offset: 3px;
}

@media (max-width: 1024px) {
	.eb-circle-info {
		--eb-circle-left-width: 100%;
		grid-template-columns: 1fr;
	}

	.eb-circle-info__left {
		text-align: center;
	}
}

@media (max-width: 767px) {
	.eb-circle-info {
		--eb-circle-size: 420px;
		--eb-circle-item-orbit-ratio: 82;
		--eb-circle-node-size: 58px;
	}

	.eb-circle-info__description {
		font-size: 17px;
	}

	.eb-circle-info__center {
		width: min(80%, 320px);
		padding: 12px 14px;
	}

	.eb-circle-info__center-description {
		margin-top: 10px;
		line-height: 1.55;
	}
}