/* MagicKit - Advanced Heading */
.mk-heading {
	position: relative;
	--mk-hl-color: var(--mk-primary);
	--mk-hl-color-2: var(--mk-secondary);
	--mk-hl-angle: 90deg;
	--mk-hl-stroke: 2px;
	--mk-sep-color: var(--mk-primary);
	--mk-sep-width: 80px;
	--mk-sep-height: 4px;
}

.mk-heading__title {
	position: relative;
	z-index: 1;
	margin: 0 0 16px;
}

.mk-heading__title a {
	color: inherit;
	text-decoration: none;
}

.mk-heading__subtitle {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin-bottom: 12px;
	color: var(--mk-primary);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.mk-heading--hl-color .mk-heading__highlight {
	color: var(--mk-hl-color);
}

.mk-heading--hl-gradient .mk-heading__highlight {
	background-image: linear-gradient(var(--mk-hl-angle), var(--mk-hl-color), var(--mk-hl-color-2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.mk-heading--hl-outline .mk-heading__highlight {
	color: transparent;
	-webkit-text-stroke: var(--mk-hl-stroke) var(--mk-hl-color);
}

.mk-heading--hl-marker .mk-heading__highlight {
	background-image: linear-gradient(120deg, var(--mk-hl-color), var(--mk-hl-color-2));
	background-repeat: no-repeat;
	background-size: 100% 35%;
	background-position: 0 88%;
	padding: 0 4px;
}

.mk-heading__separator {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: var(--mk-heading-align, center);
	margin-bottom: 16px;
}

.mk-heading__separator--line span {
	display: block;
	width: var(--mk-sep-width);
	height: var(--mk-sep-height);
	border-radius: var(--mk-sep-height);
	background: var(--mk-sep-color);
}

.mk-heading__separator--dots span {
	display: block;
	width: var(--mk-sep-height);
	height: var(--mk-sep-height);
	border-radius: 50%;
	background: var(--mk-sep-color);
	box-shadow: calc(var(--mk-sep-height) * 2) 0 0 var(--mk-sep-color), calc(var(--mk-sep-height) * 4) 0 0 var(--mk-sep-color);
	margin-right: calc(var(--mk-sep-height) * 4);
}

.mk-heading__description {
	position: relative;
	z-index: 1;
	color: var(--mk-text);
}

.mk-heading__bg-text {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	z-index: 0;
	transform: translateY(-50%);
	color: rgba(123, 47, 247, 0.07);
	font-size: 120px;
	font-weight: 900;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
}