/* dev. www.rubic-on.com */
/*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */
@layer theme {
	:root,
	:host {
		--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
			"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
		--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
			"Liberation Mono", "Courier New", monospace;
		--color-black: #000;
		--color-white: #fff;
		--spacing: 0.25rem;
		--font-weight-medium: 500;
		--font-weight-bold: 700;
		--radius-lg: 0.5rem;
		--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
		--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
		--default-transition-duration: 0.15s;
		--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		--default-font-family: var(--font-sans);
		--default-font-feature-settings: var(--font-sans--font-feature-settings);
		--default-font-variation-settings: var(
			--font-sans--font-variation-settings
		);
		--default-mono-font-family: var(--font-mono);
		--default-mono-font-feature-settings: var(
			--font-mono--font-feature-settings
		);
		--default-mono-font-variation-settings: var(
			--font-mono--font-variation-settings
		);
	}
}

@layer base {
	*,
	:after,
	:before,
	::backdrop {
		box-sizing: border-box;
		border: 0 solid;
		margin: 0;
		padding: 0;
	}

	::file-selector-button {
		box-sizing: border-box;
		border: 0 solid;
		margin: 0;
		padding: 0;
	}

	html,
	:host {
		-webkit-text-size-adjust: 100%;
		tab-size: 4;
		line-height: 1.5;
		font-family: var(
			--default-font-family,
			ui-sans-serif,
			system-ui,
			sans-serif,
			"Apple Color Emoji",
			"Segoe UI Emoji",
			"Segoe UI Symbol",
			"Noto Color Emoji"
		);
		font-feature-settings: var(--default-font-feature-settings, normal);
		font-variation-settings: var(--default-font-variation-settings, normal);
		-webkit-tap-highlight-color: transparent;
	}

	body {
		line-height: inherit;
		margin: 0 auto;
		background: #dddbd6;
		overflow: hidden;
	}
	section {
		height: 100dvh !important;
	}
	hr {
		height: 0;
		color: inherit;
		border-top-width: 1px;
	}

	abbr:where([title]) {
		-webkit-text-decoration: underline dotted;
		text-decoration: underline dotted;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-size: inherit;
		font-weight: inherit;
	}

	a {
		color: inherit;
		-webkit-text-decoration: inherit;
		-webkit-text-decoration: inherit;
		-webkit-text-decoration: inherit;
		text-decoration: inherit;
	}

	b,
	strong {
		font-weight: bolder;
	}

	code,
	kbd,
	samp,
	pre {
		font-family: var(
			--default-mono-font-family,
			ui-monospace,
			SFMono-Regular,
			Menlo,
			Monaco,
			Consolas,
			"Liberation Mono",
			"Courier New",
			monospace
		);
		font-feature-settings: var(--default-mono-font-feature-settings, normal);
		font-variation-settings: var(
			--default-mono-font-variation-settings,
			normal
		);
		font-size: 1em;
	}

	small {
		font-size: 80%;
	}

	sub,
	sup {
		vertical-align: baseline;
		font-size: 75%;
		line-height: 0;
		position: relative;
	}

	sub {
		bottom: -0.25em;
	}

	sup {
		top: -0.5em;
	}

	table {
		text-indent: 0;
		border-color: inherit;
		border-collapse: collapse;
	}

	:-moz-focusring {
		outline: auto;
	}

	progress {
		vertical-align: baseline;
	}

	summary {
		display: list-item;
	}

	ol,
	ul,
	menu {
		list-style: none;
	}

	img,
	svg,
	video,
	canvas,
	audio,
	iframe,
	embed,
	object {
		vertical-align: middle;
		display: block;
	}

	img,
	video {
		max-width: 100%;
		height: auto;
	}

	button,
	input,
	select,
	optgroup,
	textarea {
		font: inherit;
		font-feature-settings: inherit;
		font-variation-settings: inherit;
		letter-spacing: inherit;
		color: inherit;
		opacity: 1;
		background-color: #0000;
		border-radius: 0;
	}

	::file-selector-button {
		font: inherit;
		font-feature-settings: inherit;
		font-variation-settings: inherit;
		letter-spacing: inherit;
		color: inherit;
		opacity: 1;
		background-color: #0000;
		border-radius: 0;
	}

	:where(select:is([multiple], [size])) optgroup {
		font-weight: bolder;
	}

	:where(select:is([multiple], [size])) optgroup option {
		padding-inline-start: 20px;
	}

	::file-selector-button {
		margin-inline-end: 4px;
	}

	::placeholder {
		opacity: 1;
		color: color-mix(in oklab, currentColor 50%, transparent);
	}

	textarea {
		resize: vertical;
	}

	::-webkit-search-decoration {
		-webkit-appearance: none;
	}

	::-webkit-date-and-time-value {
		min-height: 1lh;
		text-align: inherit;
	}

	::-webkit-datetime-edit {
		display: inline-flex;
	}

	::-webkit-datetime-edit-fields-wrapper {
		padding: 0;
	}

	::-webkit-datetime-edit {
		padding-block: 0;
	}

	::-webkit-datetime-edit-year-field {
		padding-block: 0;
	}

	::-webkit-datetime-edit-month-field {
		padding-block: 0;
	}

	::-webkit-datetime-edit-day-field {
		padding-block: 0;
	}

	::-webkit-datetime-edit-hour-field {
		padding-block: 0;
	}

	::-webkit-datetime-edit-minute-field {
		padding-block: 0;
	}

	::-webkit-datetime-edit-second-field {
		padding-block: 0;
	}

	::-webkit-datetime-edit-millisecond-field {
		padding-block: 0;
	}

	::-webkit-datetime-edit-meridiem-field {
		padding-block: 0;
	}

	:-moz-ui-invalid {
		box-shadow: none;
	}

	button,
	input:where([type="button"], [type="reset"], [type="submit"]) {
		appearance: button;
	}

	::file-selector-button {
		appearance: button;
	}

	::-webkit-inner-spin-button {
		height: auto;
	}

	::-webkit-outer-spin-button {
		height: auto;
	}

	[hidden]:where(:not([hidden="until-found"])) {
		display: none !important;
	}

	:root {
		--font-beaufort-lol: "BeaufortforLOL", sans-serif;
	}
}

@layer components;

@layer utilities {
	.collapse {
		visibility: collapse;
	}

	.visible {
		visibility: visible;
	}

	.absolute {
		position: absolute;
	}

	.relative {
		position: relative;
	}

	.inset-0 {
		inset: calc(var(--spacing) * 0);
	}

	.top-0 {
		top: calc(var(--spacing) * 0);
	}

	.container {
		width: 100%;
	}

	@media (width >= 40rem) {
		.container {
			max-width: 40rem;
		}
	}

	@media (width >= 48rem) {
		.container {
			max-width: 48rem;
		}
	}

	@media (width >= 64rem) {
		.container {
			max-width: 64rem;
		}
	}

	@media (width >= 80rem) {
		.container {
			max-width: 80rem;
		}
	}

	@media (width >= 96rem) {
		.container {
			max-width: 96rem;
		}
	}

	.block {
		display: block;
	}

	.flex {
		display: flex;
	}

	.grid {
		display: grid;
	}

	.hidden {
		display: none;
	}

	.inline {
		display: inline;
	}

	.-translate-x-1\/2 {
		--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
		translate: var(--tw-translate-x) var(--tw-translate-y);
	}

	.-translate-x-\[calc\(50\%\+35px\)\] {
		--tw-translate-x: calc(calc(50% + 35px) * -1);
		translate: var(--tw-translate-x) var(--tw-translate-y);
	}

	.-translate-y-1\/2 {
		--tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
		translate: var(--tw-translate-x) var(--tw-translate-y);
	}

	.transform {
		transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z)
			var(--tw-skew-x) var(--tw-skew-y);
	}

	.animate-pulse {
		animation: var(--animate-pulse);
	}

	.resize {
		resize: both;
	}

	.grid-cols-1 {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.flex-col {
		flex-direction: column;
	}

	.items-center {
		align-items: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-center {
		justify-content: center;
	}

	.gap-\[10px\] {
		gap: 10px;
	}

	.gap-\[24px\] {
		gap: 24px;
	}

	.gap-x-\[15px\] {
		column-gap: 15px;
	}

	.gap-x-\[17px\] {
		column-gap: 17px;
	}

	.gap-x-\[18px\] {
		column-gap: 18px;
	}

	.gap-y-\[5px\] {
		row-gap: 5px;
	}

	.overflow-hidden {
		overflow: hidden;
	}

	.rounded-\[10px\] {
		border-radius: 10px;
	}

	.rounded-\[20px\] {
		border-radius: 20px;
	}

	.rounded-\[50px\] {
		border-radius: 50px;
	}

	.border-\[2px\] {
		border-style: var(--tw-border-style);
		border-width: 2px;
	}

	.border-\[\#307F85\] {
		border-color: #307f85;
	}

	.bg-\[\#2C6358\] {
		background-color: #2c6358;
	}

	.bg-\[\#6BA4AB\] {
		background-color: #6ba4ab;
	}

	.bg-\[\#328E95\] {
		background-color: #328e95;
	}

	.bg-\[\#432C63\] {
		background-color: #432c63;
	}

	.bg-\[\#26373A\] {
		background-color: #26373a;
	}

	.bg-\[\#263538\] {
		background-color: #263538;
	}

	.bg-\[\#263538\]\/70 {
		background-color: oklab(31.6886% -0.017516 -0.0106298 / 0.7);
	}

	.bg-gradient-to-r {
		--tw-gradient-position: to right in oklab;
		background-image: linear-gradient(var(--tw-gradient-stops));
	}

	.bg-\[radial-gradient\(100\%_100\%_at_50\%_50\%\,\#0D1C21_0\%\,\#2A5054_100\%\)\] {
		background-image: radial-gradient(100% 100%, #0d1c21 0%, #2a5054 100%);
	}

	.from-transparent {
		--tw-gradient-from: transparent;
		--tw-gradient-stops: var(
			--tw-gradient-via-stops,
			var(--tw-gradient-position),
			var(--tw-gradient-from) var(--tw-gradient-from-position),
			var(--tw-gradient-to) var(--tw-gradient-to-position)
		);
	}

	.via-\[\#338E94\] {
		--tw-gradient-via: #338e94;
		--tw-gradient-via-stops: var(--tw-gradient-position),
			var(--tw-gradient-from) var(--tw-gradient-from-position),
			var(--tw-gradient-via) var(--tw-gradient-via-position),
			var(--tw-gradient-to) var(--tw-gradient-to-position);
		--tw-gradient-stops: var(--tw-gradient-via-stops);
	}

	.to-transparent {
		--tw-gradient-to: transparent;
		--tw-gradient-stops: var(
			--tw-gradient-via-stops,
			var(--tw-gradient-position),
			var(--tw-gradient-from) var(--tw-gradient-from-position),
			var(--tw-gradient-to) var(--tw-gradient-to-position)
		);
	}

	.bg-clip-text {
		-webkit-background-clip: text;
		background-clip: text;
	}

	.object-cover {
		object-fit: cover;
	}

	.px-\[10px\] {
		padding-inline: 10px;
	}

	.px-\[12px\] {
		padding-inline: 12px;
	}

	.px-\[15px\] {
		padding-inline: 15px;
	}

	.px-\[20px\] {
		padding-inline: 20px;
	}

	.px-\[25px\] {
		padding-inline: 25px;
	}

	.py-\[2px\] {
		padding-block: 2px;
	}

	.py-\[8px\] {
		padding-block: 8px;
	}

	.pt-\[10px\] {
		padding-top: 10px;
	}

	.pt-\[100px\] {
		padding-top: 100px;
	}

	.pb-\[30px\] {
		padding-bottom: 30px;
	}

	.pb-\[80px\] {
		padding-bottom: 80px;
	}

	.text-center {
		text-align: center;
	}

	.text-\[14px\] {
		font-size: 14px;
	}

	.text-\[16px\] {
		font-size: 16px;
	}

	.text-\[18px\] {
		font-size: 18px;
	}

	.text-\[20px\] {
		font-size: 20px;
	}

	.font-bold {
		--tw-font-weight: var(--font-weight-bold);
		font-weight: var(--font-weight-bold);
	}

	.font-medium {
		--tw-font-weight: var(--font-weight-medium);
		font-weight: var(--font-weight-medium);
	}

	.text-\[\#6D8C8C\] {
		color: #6d8c8c;
	}

	.text-\[\#263538\] {
		color: #263538;
	}

	.text-transparent {
		color: #0000;
	}

	.text-white {
		color: var(--color-white);
	}

	.uppercase {
		text-transform: uppercase;
	}

	.underline {
		text-decoration-line: underline;
	}

	.opacity-5 {
		opacity: 0.05;
	}

	.opacity-10 {
		opacity: 0.1;
	}

	.opacity-15 {
		opacity: 0.15;
	}

	.opacity-60 {
		opacity: 0.6;
	}

	.opacity-80 {
		opacity: 0.8;
	}

	.shadow-\[0_0_10\.9px_\#172627\] {
		--tw-shadow: 0 0 10.9px var(--tw-shadow-color, #172627);
		box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
			var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
	}

	.blur-\[1px\] {
		--tw-blur: blur(1px);
		filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
			var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
			var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
	}

	.blur-\[2px\] {
		--tw-blur: blur(2px);
		filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
			var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
			var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
	}

	.blur-\[3px\] {
		--tw-blur: blur(3px);
		filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
			var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
			var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
	}

	.blur-\[5px\] {
		--tw-blur: blur(5px);
		filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
			var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
			var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
	}

	.drop-shadow-\[0_2px_0px_\#AEF2F8\] {
		--tw-drop-shadow: drop-shadow(0 2px 0px #aef2f8);
		filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
			var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
			var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
	}

	.filter {
		filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
			var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
			var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
	}

	.backdrop-blur-\[10px\] {
		--tw-backdrop-blur: blur(10px);
		-webkit-backdrop-filter: var(--tw-backdrop-blur)
			var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
			var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
			var(--tw-backdrop-invert) var(--tw-backdrop-opacity)
			var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
		backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
			var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
			var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
			var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
			var(--tw-backdrop-sepia);
	}

	.transition {
		transition-property: color, background-color, border-color, outline-color,
			text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via,
			--tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate,
			filter, -webkit-backdrop-filter, backdrop-filter;
		transition-timing-function: var(
			--tw-ease,
			var(--default-transition-timing-function)
		);
		transition-duration: var(--tw-duration, var(--default-transition-duration));
	}

	.transition-colors {
		transition-property: color, background-color, border-color, outline-color,
			text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via,
			--tw-gradient-to;
		transition-timing-function: var(
			--tw-ease,
			var(--default-transition-timing-function)
		);
		transition-duration: var(--tw-duration, var(--default-transition-duration));
	}

	.duration-200 {
		--tw-duration: 0.2s;
		transition-duration: 0.2s;
	}

	.duration-300 {
		--tw-duration: 0.3s;
		transition-duration: 0.3s;
	}

	.select-none {
		-webkit-user-select: none;
		user-select: none;
	}

	.select-text {
		-webkit-user-select: text;
		user-select: text;
	}

	@media (width >= 435px) {
		.min-\[435px\]\:block {
			display: block;
		}

		.min-\[435px\]\:w-\[350px\] {
			width: 350px;
		}

		.min-\[435px\]\:text-\[16px\] {
			font-size: 16px;
		}
	}

	@media (width >= 580px) {
		.min-\[580px\]\:flex-row {
			flex-direction: row;
		}

		.min-\[580px\]\:items-start {
			align-items: flex-start;
		}
	}

	@media (width >= 1210px) {
		.min-\[1210px\]\:\!w-\[678px\] {
			width: 678px !important;
		}
	}

	@media (width >= 1430px) {
		.min-\[1430px\]\:mx-0 {
			margin-inline: calc(var(--spacing) * 0);
		}

		.min-\[1430px\]\:grid-cols-2 {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.min-\[1430px\]\:pb-\[134px\] {
			padding-bottom: 134px;
		}
	}

	@media (width >= 1530px) {
		.min-\[1530px\]\:h-\[55px\] {
			height: 55px;
		}

		.min-\[1530px\]\:w-\[310px\] {
			width: 310px;
		}

		.min-\[1530px\]\:w-\[423px\] {
			width: 423px;
		}
	}

	@media (width >= 48rem) {
		.md\:mt-\[35px\] {
			margin-top: 35px;
		}

		.md\:h-\[3px\] {
			height: 3px;
		}
	}

	@media (width >= 64rem) {
		.lg\:mt-\[56px\] {
			margin-top: 56px;
		}

		.lg\:mt-\[95px\] {
			margin-top: 95px;
		}

		.lg\:block {
			display: block;
		}

		.lg\:hidden {
			display: none;
		}

		.lg\:h-\[740px\] {
			height: 740px;
		}

		.lg\:w-auto {
			width: auto;
		}

		.lg\:justify-center {
			justify-content: center;
		}

		.lg\:gap-x-\[37px\] {
			column-gap: 37px;
		}

		.lg\:rounded-\[100px\] {
			border-radius: 100px;
		}

		.lg\:px-\[23px\] {
			padding-inline: 23px;
		}

		.lg\:px-\[35px\] {
			padding-inline: 35px;
		}

		.lg\:px-\[41px\] {
			padding-inline: 41px;
		}

		.lg\:px-\[57px\] {
			padding-inline: 57px;
		}

		.lg\:py-\[10px\] {
			padding-block: 10px;
		}

		.lg\:pt-\[150px\] {
			padding-top: 150px;
		}

		.lg\:pb-\[160px\] {
			padding-bottom: 160px;
		}

		.lg\:text-\[20px\] {
			font-size: 20px;
		}

		.lg\:text-\[24px\] {
			font-size: 24px;
		}
	}
	.main {
		max-width: 3840px;
		margin: 0 auto;
		position: relative;
	}
	.font-beaufort-lol {
		font-family: var(--font-beaufort-lol);
	}

	.animate-gradient:hover {
		background-size: 200% 100%;
		animation: 3s infinite gradient-flow;
	}

	.starlight-a {
		animation: 10s starlighta infinite;
	}
	.starlight-b {
		animation: 16s starlighta infinite;
	}
	.starlight-c {
		animation: 12s starlighta infinite;
	}

	@keyframes starlighta {
		0% {
			transform: scale(1) rotate(0deg);
		}
		30% {
			transform: scale(0.5) rotate(0deg);
			opacity: 0.8;
		}
		60% {
			transform: scale(0.8) rotate(80deg);
			opacity: 0.4;
		}
		100% {
			transform: scale(1) rotate(0deg);
			opacity: 1;
		}
	}

	.primary-button {
		cursor: pointer;
		--tw-gradient-position: to right in oklab;
		background-image: linear-gradient(var(--tw-gradient-stops));
		--tw-gradient-from: #fff;
		--tw-gradient-stops: var(
			--tw-gradient-via-stops,
			var(--tw-gradient-position),
			var(--tw-gradient-from) var(--tw-gradient-from-position),
			var(--tw-gradient-to) var(--tw-gradient-to-position)
		);
		--tw-gradient-via: #abf1f7;
		--tw-gradient-via-stops: var(--tw-gradient-position),
			var(--tw-gradient-from) var(--tw-gradient-from-position),
			var(--tw-gradient-via) var(--tw-gradient-via-position),
			var(--tw-gradient-to) var(--tw-gradient-to-position);
		--tw-gradient-to: #fff;
		transition-property: box-shadow;
		transition-timing-function: var(
			--tw-ease,
			var(--default-transition-timing-function)
		);
		transition-duration: var(--tw-duration, var(--default-transition-duration));
		--tw-duration: 0.3s;
		-webkit-user-select: none;
		user-select: none;
		border-radius: 50px;
		justify-content: space-between;
		align-items: center;
		padding-inline: 30px;
		transition-duration: 0.3s;
		display: flex;
	}

	@media (hover: hover) {
		.primary-button:hover {
			--tw-shadow: 0 0 20px var(--tw-shadow-color, #abf1f780);
			box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
				var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
		}
	}

	.bordered-button {
		cursor: pointer;
		--tw-gradient-position: to right in oklab;
		background-image: linear-gradient(var(--tw-gradient-stops));
		--tw-gradient-from: #263538;
		--tw-gradient-stops: var(
			--tw-gradient-via-stops,
			var(--tw-gradient-position),
			var(--tw-gradient-from) var(--tw-gradient-from-position),
			var(--tw-gradient-to) var(--tw-gradient-to-position)
		);
		--tw-gradient-via: #2b5a5f;
		--tw-gradient-via-stops: var(--tw-gradient-position),
			var(--tw-gradient-from) var(--tw-gradient-from-position),
			var(--tw-gradient-via) var(--tw-gradient-via-position),
			var(--tw-gradient-to) var(--tw-gradient-to-position);
		--tw-gradient-to: #263538;
		--tw-font-weight: var(--font-weight-medium);
		height: 50px;
		font-size: 16px;
		font-weight: var(--font-weight-medium);
		--tw-shadow: 0 0 10.9px var(--tw-shadow-color, #172627);
		box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
			var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
		transition-property: transform, translate, scale, rotate;
		transition-timing-function: var(
			--tw-ease,
			var(--default-transition-timing-function)
		);
		transition-duration: var(--tw-duration, var(--default-transition-duration));
		--tw-duration: 0.2s;
		border-radius: 50px;
		align-items: center;
		padding-inline: 20px;
		transition-duration: 0.2s;
		display: flex;
		position: relative;
		transition: 0.4s;
	}

	.bordered-button:before {
		content: var(--tw-content);
		content: var(--tw-content);
		top: calc(var(--spacing) * 0);
		content: var(--tw-content);
		content: var(--tw-content);
		content: var(--tw-content);
		content: var(--tw-content);
		--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
		width: 60%;
		height: 1.5px;
		translate: var(--tw-translate-x) var(--tw-translate-y);
		content: var(--tw-content);
		--tw-gradient-position: to right in oklab;
		background-image: linear-gradient(var(--tw-gradient-stops));
		content: var(--tw-content);
		--tw-gradient-from: transparent;
		--tw-gradient-stops: var(
			--tw-gradient-via-stops,
			var(--tw-gradient-position),
			var(--tw-gradient-from) var(--tw-gradient-from-position),
			var(--tw-gradient-to) var(--tw-gradient-to-position)
		);
		content: var(--tw-content);
		--tw-gradient-via: #0ff;
		--tw-gradient-via-stops: var(--tw-gradient-position),
			var(--tw-gradient-from) var(--tw-gradient-from-position),
			var(--tw-gradient-via) var(--tw-gradient-via-position),
			var(--tw-gradient-to) var(--tw-gradient-to-position);
		content: var(--tw-content);
		--tw-gradient-to: transparent;
		content: var(--tw-content);
		opacity: 0.6;
		position: absolute;
		left: 50%;
	}

	.bordered-button:after {
		content: var(--tw-content);
		content: var(--tw-content);
		bottom: calc(var(--spacing) * 0);
		content: var(--tw-content);
		content: var(--tw-content);
		content: var(--tw-content);
		content: var(--tw-content);
		--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
		width: 60%;
		height: 2px;
		translate: var(--tw-translate-x) var(--tw-translate-y);
		content: var(--tw-content);
		--tw-gradient-position: to right in oklab;
		background-image: linear-gradient(var(--tw-gradient-stops));
		content: var(--tw-content);
		--tw-gradient-from: transparent;
		--tw-gradient-stops: var(
			--tw-gradient-via-stops,
			var(--tw-gradient-position),
			var(--tw-gradient-from) var(--tw-gradient-from-position),
			var(--tw-gradient-to) var(--tw-gradient-to-position)
		);
		content: var(--tw-content);
		--tw-gradient-via: #0ff;
		--tw-gradient-via-stops: var(--tw-gradient-position),
			var(--tw-gradient-from) var(--tw-gradient-from-position),
			var(--tw-gradient-via) var(--tw-gradient-via-position),
			var(--tw-gradient-to) var(--tw-gradient-to-position);
		content: var(--tw-content);
		--tw-gradient-to: transparent;
		content: var(--tw-content);
		opacity: 0.6;
		position: absolute;
		left: 50%;
	}

	@media (hover: hover) {
		.bordered-button:hover {
			filter: contrast(1.2);
			transform: scale(1.05);
		}
	}

	.bordered-button:active {
		--tw-scale-x: 95%;
		--tw-scale-y: 95%;
		--tw-scale-z: 95%;
		scale: var(--tw-scale-x) var(--tw-scale-y);
	}

	.title {
		--tw-font-weight: var(--font-weight-bold);
		width: fit-content;
		font-size: 32px;
		font-weight: var(--font-weight-bold);
		--tw-tracking: 1px;
		letter-spacing: 0px;
		text-transform: uppercase;
		margin-inline: auto;
		position: relative;
		z-index: 1;
		text-align: center;
	}

	.title:before {
		content: var(--tw-content);
		content: var(--tw-content);
		content: var(--tw-content);
		content: var(--tw-content);
		z-index: 20;
		content: var(--tw-content);
		content: var(--tw-content);
		--tw-translate-x: calc(calc(1 / 8 * 100%) * -1);
		height: 2px;
		translate: var(--tw-translate-x) var(--tw-translate-y);
		content: var(--tw-content);
		--tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
		translate: var(--tw-translate-x) var(--tw-translate-y);
		content: var(--tw-content);
		content: var(--tw-content);
		--tw-gradient-position: to right in oklab;
		background-image: linear-gradient(var(--tw-gradient-stops));
		content: var(--tw-content);
		--tw-gradient-from: transparent;
		--tw-gradient-stops: var(
			--tw-gradient-via-stops,
			var(--tw-gradient-position),
			var(--tw-gradient-from) var(--tw-gradient-from-position),
			var(--tw-gradient-to) var(--tw-gradient-to-position)
		);
		content: var(--tw-content);
		--tw-gradient-via: #6d8c8c;
		--tw-gradient-via-stops: var(--tw-gradient-position),
			var(--tw-gradient-from) var(--tw-gradient-from-position),
			var(--tw-gradient-via) var(--tw-gradient-via-position),
			var(--tw-gradient-to) var(--tw-gradient-to-position);
		content: var(--tw-content);
		--tw-gradient-via-position: 100%;
		content: var(--tw-content);
		--tw-gradient-to: #1c3a34;
		border-radius: 40px;
		position: absolute;
		top: 50%;
		right: 100%;
	}

	.title:after {
		content: var(--tw-content);
		content: var(--tw-content);
		content: var(--tw-content);
		content: var(--tw-content);
		z-index: 20;
		content: var(--tw-content);
		content: var(--tw-content);
		--tw-translate-x: calc(1 / 8 * 100%);
		height: 2px;
		translate: var(--tw-translate-x) var(--tw-translate-y);
		content: var(--tw-content);
		--tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
		translate: var(--tw-translate-x) var(--tw-translate-y);
		content: var(--tw-content);
		content: var(--tw-content);
		--tw-gradient-position: to left in oklab;
		background-image: linear-gradient(var(--tw-gradient-stops));
		content: var(--tw-content);
		--tw-gradient-from: transparent;
		--tw-gradient-stops: var(
			--tw-gradient-via-stops,
			var(--tw-gradient-position),
			var(--tw-gradient-from) var(--tw-gradient-from-position),
			var(--tw-gradient-to) var(--tw-gradient-to-position)
		);
		content: var(--tw-content);
		--tw-gradient-via: #6d8c8c;
		--tw-gradient-via-stops: var(--tw-gradient-position),
			var(--tw-gradient-from) var(--tw-gradient-from-position),
			var(--tw-gradient-via) var(--tw-gradient-via-position),
			var(--tw-gradient-to) var(--tw-gradient-to-position);
		content: var(--tw-content);
		--tw-gradient-via-position: 100%;
		content: var(--tw-content);
		--tw-gradient-to: #1c3a34;
		border-radius: 40px;
		position: absolute;
		top: 50%;
		left: 100%;
	}

	@media (width >= 410px) {
		.title:before,
		.title:after {
			content: var(--tw-content);
			width: 40px;
		}
	}

	@media (width >= 670px) {
		.title:before,
		.title:after {
			content: var(--tw-content);
			width: 140px;
		}
	}

	@media (width >= 1300px) {
		.title:before,
		.title:after {
			content: var(--tw-content);
			width: 320px;
		}
	}

	@media (width >= 1670px) {
		.title:before,
		.title:after {
			content: var(--tw-content);
			width: 440px;
		}
	}

	@media (width >= 48rem) {
		.title {
			--tw-tracking: 5px;
			letter-spacing: 5px;
			font-size: 36px;
		}
	}

	@media (width >= 64rem) {
		.title {
			--tw-tracking: 8px;
			letter-spacing: 8px;
			font-size: 40px;
		}
	}

	.subtitle {
		--tw-font-weight: var(--font-weight-bold);
		width: fit-content;
		font-size: 16px;
		font-weight: var(--font-weight-bold);
		color: var(--color-white);
		text-transform: uppercase;
		margin-inline: auto;
		background-color: #263538;
		border-radius: 50px;
		margin-top: 5px;
		padding-block: 9px;
		padding-inline: 10px;
		text-align: center;
	}

	@media (width >= 625px) {
		.subtitle {
			padding-inline: 140px;
		}
	}

	@media (width >= 48rem) {
		.subtitle {
			padding-inline: 135px;
			font-size: 20px;
		}
	}

	.divider {
		inset: calc(var(--spacing) * 0);
		z-index: 10;
		--tw-gradient-position: to right in oklab;
		background-image: linear-gradient(var(--tw-gradient-stops));
		--tw-gradient-from: transparent;
		--tw-gradient-stops: var(
			--tw-gradient-via-stops,
			var(--tw-gradient-position),
			var(--tw-gradient-from) var(--tw-gradient-from-position),
			var(--tw-gradient-to) var(--tw-gradient-to-position)
		);
		--tw-gradient-via: #93cfd3;
		--tw-gradient-via-stops: var(--tw-gradient-position),
			var(--tw-gradient-from) var(--tw-gradient-from-position),
			var(--tw-gradient-via) var(--tw-gradient-via-position),
			var(--tw-gradient-to) var(--tw-gradient-to-position);
		--tw-gradient-to: transparent;
		--tw-blur: blur(0.5px);
		width: 100%;
		height: 3px;
		filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
			var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
			var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
		position: absolute;
	}

	.divider-small {
		--tw-gradient-position: to right in oklab;
		background-image: linear-gradient(var(--tw-gradient-stops));
		--tw-gradient-from: transparent;
		--tw-gradient-stops: var(
			--tw-gradient-via-stops,
			var(--tw-gradient-position),
			var(--tw-gradient-from) var(--tw-gradient-from-position),
			var(--tw-gradient-to) var(--tw-gradient-to-position)
		);
		--tw-gradient-via: #338e94;
		--tw-gradient-via-stops: var(--tw-gradient-position),
			var(--tw-gradient-from) var(--tw-gradient-from-position),
			var(--tw-gradient-via) var(--tw-gradient-via-position),
			var(--tw-gradient-to) var(--tw-gradient-to-position);
		--tw-gradient-to: transparent;
		width: 80%;
		max-width: 400px;
		height: 2px;
	}

	@media (width >= 48rem) {
		.divider-small {
			height: 3px;
			margin-top: 39px;
		}
	}

	.starlight {
		z-index: 40;
		display: none;
		position: absolute;
	}

	@media (width >= 64rem) {
		.starlight {
			display: block;
		}
	}
}
.bgstar_a {
	width: 130px;
	height: 130px;
	background-size: cover;
	position: absolute;
	left: 5%;
	top: 20%;
}
.bgstar_b {
	width: 80px;
	height: 80px;
	background-size: cover;
	position: absolute;
	right: 10%;
	bottom: 20%;
}
.bgstar_c {
	width: 80px;
	height: 80px;
	background-size: cover;
	position: absolute;
	right: 10%;
	bottom: 20%;
}
.star_a {
	top: 20%;
	left: 2%;
	width: 160px;
	height: 160px;
	background-size: cover;
}
.star_b {
	top: 12%;
	right: 10%;
	width: 120px;
	height: 120px;
	background-size: cover;
}
.star_c {
	bottom: 14%;
	right: 4%;
	width: 150px;
	height: 150px;
	background-size: cover;
}
.pagestar_a {
	top: 8%;
	left: 5%;
	width: 100px;
	height: 100px;
	background-size: cover;
}
@font-face {
	font-family: BeaufortforLOL;
	font-weight: 300;
	font-style: normal;
	src: url("../fonts/BeaufortForLOL-OTF/beaufortforlol-light.otf")
		format("opentype");
}

@font-face {
	font-family: BeaufortforLOL;
	font-weight: 400;
	font-style: normal;
	src: url("../fonts/BeaufortForLOL-OTF/beaufortforlol-regular.otf")
		format("opentype");
}

@font-face {
	font-family: BeaufortforLOL;
	font-weight: 500;
	font-style: normal;
	src: url("../fonts/BeaufortForLOL-OTF/beaufortforlol-medium.otf")
		format("opentype");
}

@font-face {
	font-family: BeaufortforLOL;
	font-weight: 700;
	font-style: normal;
	src: url("../fonts/BeaufortForLOL-OTF/beaufortforlol-bold.otf")
		format("opentype");
}

@font-face {
	font-family: BeaufortforLOL;
	font-weight: 900;
	font-style: normal;
	src: url("../fonts/BeaufortForLOL-OTF/beaufortforlol-heavy.otf")
		format("opentype");
}

@font-face {
	font-family: BeaufortforLOL;
	font-weight: 300;
	font-style: italic;
	src: url("../fonts/BeaufortForLOL-OTF/beaufortforlol-lightitalic.otf")
		format("opentype");
}

@font-face {
	font-family: BeaufortforLOL;
	font-weight: 400;
	font-style: italic;
	src: url("../fonts/BeaufortForLOL-OTF/beaufortforlol-italic.otf")
		format("opentype");
}

@font-face {
	font-family: BeaufortforLOL;
	font-weight: 500;
	font-style: italic;
	src: url("../fonts/BeaufortForLOL-OTF/beaufortforlol-mediumitalic.otf")
		format("opentype");
}

@font-face {
	font-family: BeaufortforLOL;
	font-weight: 700;
	font-style: italic;
	src: url("../fonts/BeaufortForLOL-OTF/beaufortforlol-bolditalic.otf")
		format("opentype");
}

@font-face {
	font-family: BeaufortforLOL;
	font-weight: 900;
	font-style: italic;
	src: url("../fonts/BeaufortForLOL-OTF/beaufortforlol-heavyitalic.otf")
		format("opentype");
}

.header {
	position: absolute;
	z-index: 65;
	width: 100%;
}
.header_container {
	top: calc(var(--spacing) * 0);
	left: 50%;
	transform: translate(-50%, 0%);
	z-index: 50;
	border-bottom-style: var(--tw-border-style);
	background-color: #18262a;
	border-bottom-width: 4px;
	border-bottom-color: #263538;
	align-items: center;
	height: 66px;
	padding-inline: 8px;
	display: flex;
	position: absolute;
	margin: 0 auto;
	width: 100%;
}
@media (width >= 1024px) {
	.header_container {
		border-radius: 50px;
		margin-top: 15px !important;
		width: 98%;
	}
}

.header__logo-link {
	cursor: default;
}

.header__logo-button {
	cursor: pointer;
	--tw-ease: var(--ease-in-out);
	width: 120px;
	height: 56px;
	transition-timing-function: var(--ease-in-out);
	background-color: #263538;
	border-radius: 40px;
	align-items: center;
	padding-block: 2px;
	display: flex;
}

@media (hover: hover) {
	.header__logo-button:hover {
		background-color: oklab(31.6886% -0.017516 -0.0106298 / 0.5);
	}
}

@media (width >= 1355px) {
	.header__logo-button {
		width: 150px;
	}
}

.header__logo-image {
	min-width: 50px;
	min-height: 50px;
	transition-property: transform, translate, scale, rotate;
	transition-timing-function: var(
		--tw-ease,
		var(--default-transition-timing-function)
	);
	transition-duration: var(--tw-duration, var(--default-transition-duration));
	--tw-duration: 0.3s;
	--tw-ease: var(--ease-in-out);
	transition-duration: 0.3s;
	transition-timing-function: var(--ease-in-out);
	margin-inline: auto;
}

@media (hover: hover) {
	.header__logo-image:is(:where(.group):hover *) {
		--tw-scale-x: 90%;
		--tw-scale-y: 90%;
		--tw-scale-z: 90%;
		scale: var(--tw-scale-x) var(--tw-scale-y);
	}
}

.header__nav {
	--tw-font-weight: var(--font-weight-medium);
	font-size: 16px;
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
	text-transform: uppercase;
	margin-left: 15px;
	display: none;
}

@media (width >= 1495px) {
	.header__nav {
		margin-left: 34px;
	}
}

@media (width >= 64rem) {
	.header__nav {
		display: block;
	}
}

.header__nav-list {
	align-items: center;
	gap: 2px;
	display: flex;
}

@media (width >= 1495px) {
	.header__nav-list {
		gap: 18px;
	}
}

.header__nav-item {
	align-items: center;
	gap: 5px;
	display: flex;
	padding: 2px 10px 2px 5px;
	transition: 0.4s;
}
.header__nav-item:hover {
	background: #ffffff08;
	border-radius: 10px;
}
.header__nav-icon {
	transition: transform 0.5s;
}

.header__nav-icon--rotated {
	transform: rotate(180deg);
}

.header__nav-link,
.header__donation-link {
	transition-property: color, background-color, border-color, outline-color,
		text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via,
		--tw-gradient-to;
	transition-timing-function: var(
		--tw-ease,
		var(--default-transition-timing-function)
	);
	transition-duration: var(--tw-duration, var(--default-transition-duration));
	--tw-duration: 0.2s;
	transition-duration: 0.2s;
}
.header__donation-icon {
	transition: 0.6s;
}
.header__donation:hover .header__donation-icon {
	transform: rotate(360deg);
}
@media (hover: hover) {
	:is(.header__nav-link, .header__donation-link):hover {
		color: #53cbcb;
	}
}

.header__right {
	--tw-font-weight: var(--font-weight-medium);
	width: 100%;
	font-size: 13px;
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
	text-transform: uppercase;
	justify-content: flex-end;
	align-items: center;
	gap: 20px;
	margin-left: auto;
	margin-right: 10px;
	display: flex;
}

@media (width >= 1024px) {
	.header__right {
		justify-content: flex-start;
		width: auto;
		margin-right: 2px;
	}
}

@media (width >= 1495px) {
	.header__right {
		gap: 35px;
	}
}

.header__lang-selector {
	cursor: pointer;
	align-items: center;
	gap: 10px;
	margin-right: -2px;
	display: flex;
	position: relative;
	padding: 2px 3px;
	border-radius: 20px;
	transition: 0.4s;
}
.header__lang-selector:hover {
	background: #2a5b61;
}

@media (width >= 1024px) {
	.header__lang-selector {
		/*display: none;*/
	}
}

@media (width >= 1610px) {
	.header__lang-selector {
		display: flex;
	}
}

.header__lang-flag {
	width: 24px;              /* можно изменить под нужный размер */
	height: 24px;
	border-radius: 50%;       /* делает изображение круглым */
	object-fit: cover;        /* обрезает лишнее, если изображение не квадратное */
	border: 2px solid #ccc;   /* опционально: рамка */
}


.header__lang-dropdown {
	top: 100%;
	right: calc(var(--spacing) * 0);
	z-index: 70;
	margin-top: calc(var(--spacing) * 2);
	width: 150px;
	padding-block: calc(var(--spacing) * 2);
	--tw-backdrop-blur: blur(10px);
	-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
		var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
		var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
		var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
		var(--tw-backdrop-sepia);
	backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
		var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
		var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
		var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
		var(--tw-backdrop-sepia);
	visibility: hidden;
	opacity: 0;
	background-color: oklab(31.6886% -0.017516 -0.0106298 / 0.9);
	border-radius: 10px;
	transition: none;
	position: absolute;
	transform: translateY(10px);
}

.header__lang-dropdown.lang-dropdown-initialized {
	transition-property: all;
	transition-timing-function: var(
		--tw-ease,
		var(--default-transition-timing-function)
	);
	transition-duration: var(--tw-duration, var(--default-transition-duration));
	--tw-duration: 0.2s;
	transition-duration: 0.2s;
}

.header__lang-selector:hover .header__lang-dropdown.lang-dropdown-initialized {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.header__lang-option {
	cursor: pointer;
	align-items: center;
	gap: calc(var(--spacing) * 3);
	padding-inline: calc(var(--spacing) * 4);
	padding-block: calc(var(--spacing) * 2);
	color: var(--color-white);
	transition-property: color, background-color, border-color, outline-color,
		text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via,
		--tw-gradient-to;
	transition-timing-function: var(
		--tw-ease,
		var(--default-transition-timing-function)
	);
	transition-duration: var(--tw-duration, var(--default-transition-duration));
	--tw-duration: 0.2s;
	transition-duration: 0.2s;
	display: flex;
}

@media (hover: hover) {
	.header__lang-option:hover {
		background-color: oklab(59.6173% -0.0788417 -0.0323573 / 0.2);
	}
}

.header__lang-option-flag {
	width: 20px;
	height: 20px;
}

.header__lang-option-text {
	--tw-font-weight: var(--font-weight-medium);
	font-size: 14px;
	font-weight: var(--font-weight-medium);
}

.header__donation {
	align-items: center;
	gap: 7px;
	display: flex;
}

.header__donation-icon {
	min-width: 46px;
	min-height: 46px;
	display: none;
}

@media (width >= 64rem) {
	.header__donation-icon {
		display: block;
	}
}

.header__donation-link {
	font-size: 16px;
	display: none;
}

@media (width >= 1220px) {
	.header__donation-link {
		display: block;
	}
}

.header__cabinet-button {
	width: 150px;
	display: none;
}

@media (width >= 1355px) {
	.header__cabinet-button {
		width: 217px;
	}
}

@media (width >= 64rem) {
	.header__cabinet-button {
		display: block;
	}
}

.header__cabinet-text {
	--tw-font-weight: var(--font-weight-medium);
	width: 100%;
	height: 100%;
	font-size: 16px;
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
	text-transform: uppercase;
	justify-content: center;
	align-items: center;
	display: flex;
}

.header__burger-button {
	background-color: #263538;
	border-radius: 8px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	min-width: 40px;
	min-height: 40px;
	margin-left: auto;
	padding: 8px;
	display: flex;
	cursor: pointer;
}
.header__burger-line {
	transition: 0.2s;
}
.header__burger-button:hover .header__burger-line {
	margin: 1px;
}
@media (width >= 64rem) {
	.header__burger-button {
		display: none;
	}
}

.header__burger-line {
	background-color: var(--color-white);
	width: 100%;
	height: 2px;
	transition-property: all;
	transition-timing-function: var(
		--tw-ease,
		var(--default-transition-timing-function)
	);
	transition-duration: var(--tw-duration, var(--default-transition-duration));
	--tw-duration: 0.3s;
	transition-duration: 0.3s;
}

.header__burger-button--active .header__burger-line:first-child {
	--tw-translate-y: 8px;
	translate: var(--tw-translate-x) var(--tw-translate-y);
	rotate: 45deg;
}

.header__burger-button--active .header__burger-line:nth-child(2) {
	opacity: 0;
}

.header__burger-button--active .header__burger-line:nth-child(3) {
	--tw-translate-y: calc(8px * -1);
	translate: var(--tw-translate-x) var(--tw-translate-y);
	rotate: -45deg;
}

.mobile-menu {
	top: calc(var(--spacing) * 0);
	left: calc(var(--spacing) * 0);
	z-index: 100;
	--tw-translate-x: 100%;
	width: 100%;
	height: 100vh;
	translate: var(--tw-translate-x) var(--tw-translate-y);
	background-color: #18262a;
	position: fixed;
}

.mobile-menu.mobile-menu--initialized {
	transition-property: transform, translate, scale, rotate;
	transition-timing-function: var(
		--tw-ease,
		var(--default-transition-timing-function)
	);
	transition-duration: var(--tw-duration, var(--default-transition-duration));
	--tw-duration: 0.3s;
	transition-duration: 0.3s;
}

.mobile-menu--open {
	--tw-translate-x: calc(var(--spacing) * 0);
	translate: var(--tw-translate-x) var(--tw-translate-y);
}

.mobile-menu__container {
	padding: 20px;
	flex-direction: column;
	height: 100%;
	padding-top: 10px;
	display: flex;
}

.mobile-menu__header {
	justify-content: space-between;
	align-items: center;
	display: flex;
}

.mobile-menu__logo {
	width: 50px;
	height: 50px;
}

.mobile-menu__close-button {
	background-color: #263538;
	border-radius: 8px;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	display: flex;
}

.mobile-menu__nav {
	flex: 1;
	margin-top: 40px;
}

.mobile-menu__nav-list {
	flex-direction: column;
	gap: 20px;
	display: flex;
}

.mobile-menu__nav-item {
	background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
	border-radius: 12px;
	align-items: center;
	gap: 10px;
	padding: 10px;
	display: flex;
	cursor: pointer;
	transition: 0.2s;
}
.mobile-menu__nav-item:hover {
	background-color: color-mix(in oklab, var(--color-white) 5%, #22f5ff26);
}

.mobile-menu__nav-icon {
	width: 24px;
	height: 24px;
}

.mobile-menu__nav-link {
	--tw-font-weight: var(--font-weight-medium);
	font-size: 18px;
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
	text-transform: uppercase;
}

.mobile-menu__footer {
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding-top: 40px;
	display: flex;
}

.mobile-menu__donation {
	align-items: center;
	gap: 10px;
	display: flex;
}

.mobile-menu__donation-icon {
	width: 46px;
	height: 46px;
}

.mobile-menu__donation-link {
	--tw-font-weight: var(--font-weight-medium);
	font-size: 20px;
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
	transition: 0.2s;
}
.mobile-menu__donation-link:hover {
	transform: scale(1.1);
}
.mobile-menu__cabinet-button {
	width: 100%;
}

.mobile-menu__cabinet-text {
	--tw-font-weight: var(--font-weight-medium);
	width: 100%;
	height: 100%;
	font-size: 16px;
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
	text-transform: uppercase;
	justify-content: center;
	align-items: center;
	display: flex;
}
.countdown_info {
	height: 80px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}
.header__countdown-container {
	position: relative;
	--tw-backdrop-blur: blur(10px);
	width: 325px;
	height: 105px;
	-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
		var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
		var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
		var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
		var(--tw-backdrop-sepia);
	backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
		var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
		var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
		var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
		var(--tw-backdrop-sepia);
	padding-inline: 25px;
	background-color: oklab(31.6886% -0.017516 -0.0106298 / 0.7);
	border-bottom-right-radius: 50px;
	border-bottom-left-radius: 50px;
}

.header__countdown {
	position: absolute;
	top: calc(100% + 80px);
	left: 83px;
	transition: 0.3s;
}

@media (width >= 64rem) {
	.header__countdown {
		display: block;
	}
}

.header__countdown-title-container {
	align-items: center;
	column-gap: 12px;
	display: flex;
}

.header__countdown-title {
	--tw-font-weight: var(--font-weight-bold);
	font-size: 20px;
	font-weight: var(--font-weight-bold);
	color: var(--color-white);
}

.header__countdown-date {
	--tw-font-weight: var(--font-weight-bold);
	font-size: 16px;
	font-weight: var(--font-weight-bold);
	color: var(--color-white);
	background-color: #328e95;
	border-radius: 50px;
	padding-block: 2px;
	padding-inline: 12px;
	-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
	animation: heartbeat 1.5s ease-in-out infinite both;
}

.header__countdown-timer {
	justify-content: center;
	align-items: center;
	column-gap: 11px;
	margin-top: 12px;
	display: flex;
}

.header__countdown-unit {
	--tw-font-weight: var(--font-weight-medium);
	font-size: 14px;
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
	background-color: #263538;
	border-radius: 100px;
	padding-block: 2px;
	padding-inline: 12px;
	position: relative;
}

.header__countdown-days:before {
	content: var(--tw-content);
	content: var(--tw-content);
	content: var(--tw-content);
	content: var(--tw-content);
	--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
	translate: var(--tw-translate-x) var(--tw-translate-y);
	content: var(--tw-content);
	--tw-content: "ДН";
	content: var(--tw-content);
	position: absolute;
	top: 100%;
	left: 50%;
}

.header__countdown-hours:before {
	content: var(--tw-content);
	content: var(--tw-content);
	content: var(--tw-content);
	content: var(--tw-content);
	--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
	translate: var(--tw-translate-x) var(--tw-translate-y);
	content: var(--tw-content);
	--tw-content: "Ч";
	content: var(--tw-content);
	position: absolute;
	top: 100%;
	left: 50%;
}

.header__countdown-minutes:before {
	content: var(--tw-content);
	content: var(--tw-content);
	content: var(--tw-content);
	content: var(--tw-content);
	--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
	translate: var(--tw-translate-x) var(--tw-translate-y);
	content: var(--tw-content);
	--tw-content: "МИН";
	content: var(--tw-content);
	position: absolute;
	top: 100%;
	left: 50%;
}

.header__countdown-seconds:before {
	content: var(--tw-content);
	content: var(--tw-content);
	content: var(--tw-content);
	content: var(--tw-content);
	--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
	translate: var(--tw-translate-x) var(--tw-translate-y);
	content: var(--tw-content);
	--tw-content: "СЕК";
	content: var(--tw-content);
	position: absolute;
	top: 100%;
	left: 50%;
}

.header__countdown-toggle {
	width: 35px;
	height: 14px;
	cursor: pointer;
	--tw-duration: 0.2s;
	background-color: #307f85;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	justify-content: center;
	align-items: center;
	transition-duration: 0.2s;
	display: flex;
	position: absolute;
	top: 100%;
	left: 50%;
}

@media (hover: hover) {
	.header__countdown-toggle:hover {
		background-color: oklab(55.1036% -0.0705443 -0.028801 / 0.5);
	}
}

.header__countdown-toggle-icon {
	margin-bottom: 3px;
}

.header__server-info-container {
	z-index: calc(50 * -1);
	--tw-backdrop-blur: blur(10px);
	width: 248px;
	height: 80px;
	-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
		var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
		var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
		var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
		var(--tw-backdrop-sepia);
	backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
		var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
		var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
		var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
		var(--tw-backdrop-sepia);
	padding-inline: 17px;
	background-color: oklab(31.6886% -0.017516 -0.0106298 / 0.7);
	border-bottom-right-radius: 50px;
	border-bottom-left-radius: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.header__server-info {
	position: absolute;
	top: calc(100% + 3.5px);
	right: 150px;
	z-index: 90;
}

@media (width >= 64rem) {
	.header__server-info {
		display: block;
	}
}

.header__server-info-content {
	align-items: flex-start;
	column-gap: 17px;
	display: flex;
}

.header__server-info-players {
	border-style: var(--tw-border-style);
	width: 86px;
	height: 58px;
	color: var(--color-white);
	background-color: #26373a;
	border-width: 2px;
	border-color: #307f85;
	border-radius: 10px 10px 10px 40px;
	justify-content: center;
	align-items: center;
	font-size: 18px;
	display: flex;
}

.header__server-info-players-count {
	margin-bottom: 5px;
	margin-left: 8px;
}

.header__server-info-details {
	flex-direction: column;
	display: flex;
}

.header__server-info-name-container {
	align-items: center;
	column-gap: 6px;
	display: flex;
}

.header__server-info-name {
	--tw-font-weight: var(--font-weight-bold);
	font-size: 20px;
	font-weight: var(--font-weight-bold);
	color: var(--color-white);
}

.header__server-info-rate {
	--tw-font-weight: var(--font-weight-medium);
	font-size: 12px;
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
	background-color: #c8af6a;
	border-radius: 50px;
	padding-block: 2px;
	padding-inline: 12px;
}

.header__server-info-type {
	--tw-font-weight: var(--font-weight-medium);
	font-size: 12px;
	font-weight: var(--font-weight-medium);
	color: #c8af6a;
	margin-top: -8px;
}

.header__server-info-rating {
	margin-top: -1px;
	margin-left: -2px;
	display: flex;
}

.header__server-info-toggle {
	--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
	width: 35px;
	height: 14px;
	translate: var(--tw-translate-x) var(--tw-translate-y);
	cursor: pointer;
	--tw-duration: 0.2s;
	background-color: #307f85;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	justify-content: center;
	align-items: center;
	transition-duration: 0.2s;
	display: flex;
	position: absolute;
	top: 100%;
	left: 50%;
}

@media (hover: hover) {
	.header__server-info-toggle:hover {
		background-color: oklab(55.1036% -0.0705443 -0.028801 / 0.5);
	}
}

.header__server-info-toggle-icon {
	margin-bottom: 3px;
}

.section-nav {
	z-index: 50;
	--tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
	translate: var(--tw-translate-x) var(--tw-translate-y);
	flex-direction: column;
	row-gap: 20px;
	display: none;
	position: fixed;
	top: 50%;
	margin-left: 20px;
}

@media (width >= 64rem) {
	.section-nav {
		display: flex;
	}
}

.section-nav__item {
	cursor: pointer;
	align-items: center;
	column-gap: 19px;
	display: flex;
}
.section-nav__item:hover .section-nav__icon {
	transition: 0.2s;
	transform: scale(1.1);
}

.section-nav__icon {
	fill: none;
	filter: drop-shadow(0px 0px 2px rgb(38 53 56 / 40%));
}
.section-nav__item--active .section-nav__icon {
	fill: var(--color-white);
}
.section-nav__item--active .section-nav__text {
	transform: scale(1.06);
	color: #ffe6a1;
}

.section-nav__icon {
	fill: none;
	filter: drop-shadow(0px 0px 1px #263538);
}

.section-nav__text {
	--tw-font-weight: var(--font-weight-medium);
	font-size: 14px;
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
	text-transform: uppercase;
	transition: 0.4s;
	text-shadow: 0px 0px 4px rgb(38 53 56 / 40%);
}
.section-nav:hover .section-nav__text {
	opacity: 1;
}
.hero {
	height: 100%;
	width: 100%;
	background: url(../firstbg.jpg) no-repeat;
	background-size: cover;
	background-position: top;
	position: relative;
}
.home_art {
	height: 100%;
	width: 100%;
	background: url(../pers.png);
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0px);
}
.hero__social-nav-container {
	top: calc(var(--spacing) * 0);
	right: calc(var(--spacing) * 0);
	height: 100%;
	position: absolute;
}

.hero__social-nav {
	z-index: 10;
	transform: translate(0, -50%);
	position: absolute;
	top: 50%;
	right: 30px;
}

.hero__social-icon {
	--tw-duration: 0.2s;
	min-width: 75px;
	min-height: 75px;
	transition-duration: 0.2s;
}

@media (hover: hover) {
	.hero__social-icon:hover {
		--tw-scale-x: 110%;
		--tw-scale-y: 110%;
		--tw-scale-z: 110%;
		scale: var(--tw-scale-x) var(--tw-scale-y);
	}
}

.hero__background {
	inset: calc(var(--spacing) * 0);
	object-fit: cover;
	width: 100%;
	height: 100%;
	position: absolute;
}

.hero__cta {
	--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
	width: 300px;
	height: 60px;
	translate: var(--tw-translate-x) var(--tw-translate-y);
	position: absolute;
	bottom: 3%;
	left: 50%;
}

@media (width >= 680px) {
	.hero__cta {
		width: 350px;
	}
}

.hero__cta-text {
	--tw-font-weight: var(--font-weight-bold);
	font-size: 18px;
	font-weight: var(--font-weight-bold);
	color: #0000;
	text-transform: uppercase;
	--tw-drop-shadow: drop-shadow(0 2px 0px #aef2f8);
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
		var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
		var(--tw-sepia) var(--tw-drop-shadow);
	background-image: radial-gradient(100% 100%, #0d1c21 0%, #2a5054 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

.features {
	padding-inline: calc(var(--spacing) * 4);
	padding-top: 20px;
	padding-bottom: 150px;
	position: relative;
	background: url(../informer.jpg) top;
	width: 100%;
	height: 100%;
	background-size: cover;
}

@media (width >= 40rem) {
	.features {
		padding-inline: calc(var(--spacing) * 6);
	}
}

@media (width >= 48rem) {
	.features {
		padding-inline: calc(var(--spacing) * 8);
	}
}
.features_blocks {
	display: flex;
	flex-direction: column;
	height: calc(100% - 70px);
	align-items: center;
	justify-content: center;
	position: relative;
}
.features_content {
	margin-top: 20px;
}
.features__background {
	inset: calc(var(--spacing) * 0);
	z-index: calc(20 * -1);
	object-fit: cover;
	background-color: #263538;
	width: 100%;
	height: 100%;
	position: absolute;
}

.features__decoration {
	inset: calc(var(--spacing) * 0);
	width: 100%;
	height: 100%;
	position: absolute;
}

.features__title {
	color: var(--color-white);
}

.features__subtitle {
	width: fit-content;
	color: var(--color-white);
	text-transform: uppercase;
	margin-inline: auto;
	font-size: 24px;
}

@media (width >= 48rem) {
	.features__subtitle {
		margin-top: 64px;
		font-size: 28px;
	}
}

@media (width >= 64rem) {
	.features__subtitle {
		font-size: 32px;
	}
}

.features__divider-small {
	margin-inline: auto;
	margin-top: 39px;
}

.features__description {
	text-align: center;
	max-width: 970px;
	min-height: 120px;
	color: var(--color-white);
	-webkit-user-select: text;
	user-select: text;
	margin-inline: auto;
	margin-top: 15px;
	font-size: 16px;
	position: relative;
	align-content: center;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-height: calc(1.2em * 4);
	line-height: 1.2em;
}

@media (width >= 40rem) {
	.features__description {
		font-size: 16px;
	}
}

@media (width >= 48rem) {
	.features__description {
		margin-top: 40px;
		font-size: 18px;
	}
}

.features__items {
	margin-inline: auto;
	justify-content: center;
	align-items: center;
	column-gap: 0;
	width: 100%;
	margin-top: 20px;
	display: flex;
}

@media (width >= 670px) {
	.features__items {
		column-gap: 15px;
	}
}

@media (width >= 48rem) {
	.features__items {
		column-gap: 30px;
		margin-top: 23px;
	}
}

.features__item {
	flex-shrink: 0;
	width: fit-content;
	position: relative;
}

.futures__item-arrow {
	cursor: pointer;
	min-width: 50px;
}

@media (width >= 930px) {
	.futures__item-arrow {
		min-width: 76px;
	}
}

.features__item--hidden {
	flex-shrink: 0;
	width: fit-content;
	display: none;
	position: relative;
}

@media (width >= 930px) {
	.features__item--hidden {
		display: block;
	}
}

.features__item--small-hidden {
	flex-shrink: 0;
	width: fit-content;
	display: none;
	position: relative;
}

@media (width >= 430px) {
	.features__item--small-hidden {
		display: block;
	}
}

.features__item--active {
	flex-shrink: 0;
	width: fit-content;
	position: relative;
}

.features__item-icon {
	--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
	translate: var(--tw-translate-x) var(--tw-translate-y);
	--tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
	translate: var(--tw-translate-x) var(--tw-translate-y);
	position: absolute;
	top: 50%;
	left: 50%;
}

.features__button {
	margin-inline: auto;
	width: 250px;
	margin-top: 20px;
	font-size: 13px;
	margin-bottom: 120px;
	min-height: 50px;
}

@media (width >= 440px) {
	.features__button {
		width: 310px;
	}
}

@media (width >= 680px) {
	.features__button {
		margin-top: 46px;
	}
}

@media (width >= 48rem) {
	.features__button {
		font-size: 16px;
		width: 350px;
		height: 60px;
	}
}

.features__button-icon {
	width: 10px;
	height: 10px;
}

.features__button-text {
	--tw-font-weight: var(--font-weight-medium);
	width: 100%;
	height: 100%;
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
	text-transform: uppercase;
	justify-content: center;
	align-items: center;
	display: flex;
}

.bonus-section {
	background-color: #263538;
	padding-top: 40px;
	padding-bottom: 30px;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

.bonus-section__container {
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 13px;
	width: fit-content;
	margin-inline: auto;
	display: flex;
}

@media (width >= 48rem) {
	.bonus-section__container {
		flex-wrap: wrap;
		grid-template-columns: none;
	}
}

.bonus-section__card {
	justify-content: center;
	align-items: center;
	gap: calc(var(--spacing) * 0);
	border-top-style: var(--tw-border-style);
	background-color: var(--color-white);
	opacity: 0.8;
	border-color: #6d8c8c;
	border-top-width: 5px;
	border-radius: 100px;
	flex-direction: column;
	width: 130px;
	height: 74px;
	display: flex;
}

.bonus-section__value {
	--tw-font-weight: var(--font-weight-bold);
	font-size: 24px;
	font-weight: var(--font-weight-bold);
	color: #263538;
}

.bonus-section__label {
	--tw-font-weight: var(--font-weight-medium);
	font-size: 14px;
	font-weight: var(--font-weight-medium);
	color: #6d8c8c;
	margin-top: -10px;
}

.bonus-section__star {
	display: none;
}

@media (width >= 1005px) {
	.bonus-section__star {
		display: block;
	}
}

.news {
	padding-top: 20px;
	position: relative;
}

.news__container {
	position: relative;
}

.news__background {
	inset: calc(var(--spacing) * 0);
	width: 100%;
	height: 1222px;
	background: url(../bg_sect.png) bottom;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
}

.starlight {
	z-index: 40;
	display: none;
	position: absolute;
}

@media (width >= 64rem) {
	.starlight {
		display: block;
	}
}

.news__title {
	color: #263538;
}

.news__carousel {
	justify-content: center;
	align-items: center;
	margin-top: 40px;
	padding-inline: 5px;
	display: flex;
}

@media (width >= 1725px) {
	.news__carousel {
		justify-content: space-between;
	}
}

@media (width >= 48rem) {
	.news__carousel {
		padding-inline: calc(var(--spacing) * 0);
		margin-top: 74px;
	}
}

.news__carousel-container {
	flex-direction: column;
	justify-content: center;
	gap: 20px 50px;
	display: flex;
}

@media (width >= 1725px) {
	.news__carousel-container {
		flex-direction: row;
	}
}

.event-card {
	z-index: 40;
	border-top-style: var(--tw-border-style);
	border-color: #2b5a5e;
	border-top-width: 15px;
	border-radius: 20px;
	max-width: 663px;
	height: 530px;
	position: relative;
}

@media (width >= 800px) {
	.event-card {
		border-radius: 100px;
	}
}

.event-card__background {
	inset: calc(var(--spacing) * 0);
	z-index: calc(10 * -1);
	object-fit: cover;
	background-color: #263538;
	border-radius: 20px;
	width: 100%;
	height: 100%;
	margin-top: -11.5px;
	position: absolute;
}

@media (width >= 800px) {
	.event-card__background {
		border-radius: 100px;
	}
}

.event-card__image-container {
	position: relative;
}

.event-card__tag {
	z-index: 10;
	--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
	width: 130px;
	height: 30px;
	translate: var(--tw-translate-x) var(--tw-translate-y);
	--tw-font-weight: var(--font-weight-medium);
	font-size: 15px;
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
	border-radius: 50px;
	justify-content: center;
	align-items: center;
	display: flex;
	position: absolute;
	top: 4px;
	left: 50%;
}

@media (width >= 800px) {
	.event-card__tag {
		top: 11px;
	}
}

.event-card__tag--promo {
	background-color: #432c63;
}

.event-card__tag--info {
	background-color: #2c6358;
}

.event-card__image {
	--tw-shadow: inset 0px -50px 50px var(--tw-shadow-color, #26353880);
	width: 93%;
	box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
		var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
	--tw-drop-shadow: drop-shadow(0px 5px 0px #0000001a);
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
		var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
		var(--tw-sepia) var(--tw-drop-shadow);
	border-radius: 20px;
	margin-inline: auto;
	display: block;
}

@media (width >= 800px) {
	.event-card__image {
		border-radius: 100px;
		margin-top: -23px;
	}
}

.event-card__date {
	--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
	translate: var(--tw-translate-x) var(--tw-translate-y);
	--tw-font-weight: var(--font-weight-medium);
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
	align-items: center;
	column-gap: 10px;
	display: flex;
	position: absolute;
	bottom: 14px;
	left: 50%;
}

.event-card__title {
	text-align: center;
	--tw-font-weight: var(--font-weight-medium);
	font-size: 24px;
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
	margin-top: 18px;
}

.event-card__divider {
	--tw-gradient-position: to right in oklab;
	background-image: linear-gradient(var(--tw-gradient-stops));
	--tw-gradient-from: transparent;
	--tw-gradient-stops: var(
		--tw-gradient-via-stops,
		var(--tw-gradient-position),
		var(--tw-gradient-from) var(--tw-gradient-from-position),
		var(--tw-gradient-to) var(--tw-gradient-to-position)
	);
	--tw-gradient-via: #338e94;
	--tw-gradient-via-stops: var(--tw-gradient-position),
		var(--tw-gradient-from) var(--tw-gradient-from-position),
		var(--tw-gradient-via) var(--tw-gradient-via-position),
		var(--tw-gradient-to) var(--tw-gradient-to-position);
	--tw-gradient-to: transparent;
	margin-inline: auto;
	width: 100px;
	height: 1px;
	margin-top: 18px;
}

.event-card__description {
	text-align: center;
	color: var(--color-white);
	-webkit-user-select: text;
	user-select: text;
	margin-inline: auto;
	margin-top: 10px;
	padding-inline: 10px;
	font-size: 18px;
}

@media (width >= 800px) {
	.event-card__description {
		padding-inline: 51px;
	}
}

.event-card__button-container {
	--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
	translate: var(--tw-translate-x) var(--tw-translate-y);
	justify-content: center;
	display: flex;
	position: absolute;
	bottom: 35px;
	left: 50%;
}

.event-card__button {
	width: 260px;
}

@media (width >= 800px) {
	.event-card__button {
		width: 310px;
	}
}

.news__pagination {
	z-index: 10;
	justify-content: center;
	align-items: center;
	column-gap: 20px;
	margin-top: 43px;
	display: flex;
	position: relative;
}

.forum {
	margin-top: 44px;
	position: relative;
}
.forum_block {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: calc(100% - 50px);
}

.forum__title {
	color: #263538;
}

.forum__posts {
	background-color: #263538;
	border-color: #6d8c8c;
	row-gap: 20px;
	max-width: 92%;
	margin-top: 0px;
	display: grid;
	z-index: 41;
	position: relative;
	border-top-style: var(--tw-border-style);
	border-top-width: 5px;
	border-radius: 40px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 25px;
	margin-inline: auto;
	padding-block: 40px;
	padding-inline: 40px;
}

.forum-post__content {
	background-color: var(--color-white);
	color: #263538;
	transition-property: color, background-color, border-color, outline-color,
		text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via,
		--tw-gradient-to;
	transition-timing-function: var(
		--tw-ease,
		var(--default-transition-timing-function)
	);
	transition-duration: var(--tw-duration, var(--default-transition-duration));
	border-radius: 20px;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	padding: 6px;
	transition-duration: 0.3s;
	display: flex;
	border: 2px solid transparent;
	box-sizing: border-box;
}

.forum-post:hover .forum-post__content {
	color: var(--color-white);
	background-color: #263538;
	border: 2px solid #fff;
}
.forum-post:hover .forum-post__author {
	color: #263538;
	background-color: #fff;
}
.forum-post:hover .forum-post__author .forum-post__author-name {
	color: #263538;
}
.forum-post:hover .forum-post__topic img {
	-webkit-animation: vibrate-1 0.6s linear infinite both;
	animation: vibrate-1 0.6s linear infinite both;
}

@-webkit-keyframes vibrate-1 {
	0% {
		-webkit-transform: translate(0);
		transform: translate(0);
	}
	20% {
		-webkit-transform: translate(-2px, 2px);
		transform: translate(-2px, 2px);
	}
	40% {
		-webkit-transform: translate(-2px, -2px);
		transform: translate(-2px, -2px);
	}
	60% {
		-webkit-transform: translate(2px, 2px);
		transform: translate(2px, 2px);
	}
	80% {
		-webkit-transform: translate(2px, -2px);
		transform: translate(2px, -2px);
	}
	100% {
		-webkit-transform: translate(0);
		transform: translate(0);
	}
}
@keyframes vibrate-1 {
	0% {
		-webkit-transform: translate(0);
		transform: translate(0);
	}
	20% {
		-webkit-transform: translate(-2px, 2px);
		transform: translate(-2px, 2px);
	}
	40% {
		-webkit-transform: translate(-2px, -2px);
		transform: translate(-2px, -2px);
	}
	60% {
		-webkit-transform: translate(2px, 2px);
		transform: translate(2px, 2px);
	}
	80% {
		-webkit-transform: translate(2px, -2px);
		transform: translate(2px, -2px);
	}
	100% {
		-webkit-transform: translate(0);
		transform: translate(0);
	}
}

@media (width >= 64rem) {
	.forum-post__content {
		border-radius: 100px;
		flex-direction: row;
	}
}

.forum-post__topic {
	align-items: center;
	column-gap: 10px;
	margin-left: 15px;
	display: flex;
	white-space: nowrap;
	overflow: hidden;
	max-width: 100%;
}

.forum-post__topic-text {
	--tw-font-weight: var(--font-weight-medium);
	font-size: 16px;
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.forum-post__author {
	background-color: #263538;
	border-radius: 100px;
	align-items: center;
	column-gap: 10px;
	width: 100%;
	height: 50px;
	padding-inline: 12px;
	display: flex;
	transition: 0.3s;
}

@media (width >= 48rem) {
	.forum-post__author {
		min-width: 180px;
	}
}

@media (width >= 64rem) {
	.forum-post__author {
		width: fit-content;
	}
}

.forum-post__author-name {
	text-align: center;
	--tw-font-weight: var(--font-weight-medium);
	font-size: 16px;
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	transition: 0.3s;
}

.forum-post__date-container {
	justify-content: flex-end;
	margin-top: 6px;
	margin-right: 14px;
	display: flex;
}

.forum-post__date {
	--tw-font-weight: var(--font-weight-medium);
	font-size: 16px;
	font-weight: var(--font-weight-medium);
	color: #6d8c8c;
}

.forum__button {
	--tw-font-weight: var(--font-weight-bold);
	width: 310px;
	height: 65px;
	font-size: 18px;
	font-weight: var(--font-weight-bold);
	margin-inline: auto;
	margin-top: 40px;
	margin-bottom: 60px;
}

@media (width >= 580px) {
	.forum__button {
		width: 500px;
	}
}

.rating {
	padding-top: 36px;
	padding-bottom: 43px;
	position: relative;
	background: url(../rating_sect.jpg) top;
	background-size: cover;
}

.rating__title {
	color: var(--color-white);
}

.rating__tabs {
	margin-inline: auto;
	align-items: center;
	column-gap: 50px;
	width: fit-content;
	margin-top: 10px;
	display: flex;
}

.rating__tab {
	cursor: pointer;
	align-items: center;
	display: flex;
}

.rating__tab-icon {
	flex-shrink: 0;
	width: fit-content;
	position: relative;
	z-index: 1;
}

.rating__tab-icon-img {
	--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
	min-width: 40px;
	translate: var(--tw-translate-x) var(--tw-translate-y);
	--tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
	translate: var(--tw-translate-x) var(--tw-translate-y);
	position: absolute;
	top: 50%;
	left: 50%;
}
.rating__tab-text {
	transition: 0.4s;
}
.rating__tab:hover .rating__tab-text {
	filter: drop-shadow(0px 1px 10px rgb(109 140 140));
}

@media (width >= 48rem) {
	.rating__tab-icon-img {
		width: auto;
	}
}

.rating__tab-text {
	--tw-font-weight: var(--font-weight-medium);
	width: 270px;
	height: 50px;
	font-size: 18px;
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
	text-transform: uppercase;
	transition-property: all;
	transition-timing-function: var(
		--tw-ease,
		var(--default-transition-timing-function)
	);
	transition-duration: var(--tw-duration, var(--default-transition-duration));
	--tw-duration: 0.3s;
	--tw-ease: var(--ease-in-out);
	transition-duration: 0.3s;
	transition-timing-function: var(--ease-in-out);
	border-top-right-radius: 100px;
	border-bottom-right-radius: 100px;
	justify-content: center;
	align-items: center;
	margin-left: -40px;
	display: flex;
}

.rating__tab-text--active {
	--tw-gradient-position: to right in oklab;
	background-image: linear-gradient(var(--tw-gradient-stops));
	--tw-gradient-from: #263538;
	--tw-gradient-stops: var(
		--tw-gradient-via-stops,
		var(--tw-gradient-position),
		var(--tw-gradient-from) var(--tw-gradient-from-position),
		var(--tw-gradient-to) var(--tw-gradient-to-position)
	);
	--tw-gradient-to: #359ea6;
}

.rating__tab-text--inactive {
	background-color: oklab(61.6492% -0.0335176 -0.00978959 / 0.2);
}

.tab-shell {
	transition-property: all;
	transition-timing-function: var(
		--tw-ease,
		var(--default-transition-timing-function)
	);
	transition-duration: var(--tw-duration, var(--default-transition-duration));
	--tw-duration: 0.3s;
	--tw-ease: var(--ease-in-out);
	transition-duration: 0.3s;
	transition-timing-function: var(--ease-in-out);
}

.rating__over {
  display: grid; /* заменяем flex на grid */
  grid-template-columns: repeat(3, 1fr); /* 3 столбца */
  gap: 12px; /* расстояние между карточками */

  opacity: 1;
  margin-inline: auto;
  margin-top: 20px;
  transition: opacity 0.3s ease-in-out;

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.rating_container {
	margin-inline: auto;
	margin-top: 40px;
	padding-inline: 10px;
	position: relative;
	width: -webkit-fill-available;
}

.hidden {
	opacity: 0;
	pointer-events: none;
}

.rating__player {
  width: 100%;
  max-width: 390px; /* ограничим максимум */
  flex: 1 1 auto;

  justify-content: space-between;
  align-items: center;
  display: flex;
  background: rgb(255 255 255 / 2%);
  padding: 10px 20px;
  border-radius: 50px;
  margin: 10px;
  box-sizing: border-box;
}

@media (width >= 48rem) {
	.rating__player:last-child {
		display: none;
	}
}

@media (width >= 64rem) {
	.rating__player:last-child {
		display: flex;
	}
}

.rating__player-info {
	align-items: center;
	column-gap: 12px;
	display: flex;
}

.rating__player-name {
	--tw-font-weight: var(--font-weight-medium);
	font-size: 18px;
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
	align-items: center;
	column-gap: 8px;
	display: flex;
	overflow: hidden;
	width: 165px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rating__player-score {
	background-color: var(--color-white);
	border-radius: 100px;
	align-items: center;
	column-gap: 12px;
	min-width: 110px;
	padding-block: 6px;
	padding-inline: 16px;
	display: flex;
}

.rating__player-score-value {
	--tw-font-weight: var(--font-weight-medium);
	font-size: 21px;
	font-weight: var(--font-weight-medium);
}

.rating__link {
	justify-content: center;
	align-items: center;
	column-gap: 12px;
	display: flex;
	padding: 15px 40px;
	position: absolute;
	bottom: 190px;
	left: 50%;
	transform: translate(-50%, 0px);
	transition: 0.3s;
}

.rating__link-text {
	--tw-font-weight: var(--font-weight-bold);
	font-size: 16px;
	color: var(--color-white);
	text-transform: uppercase;
	transition-property: color, background-color, border-color, outline-color,
		text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via,
		--tw-gradient-to;
	transition-timing-function: var(
		--tw-ease,
		var(--default-transition-timing-function)
	);
	transition-duration: var(--tw-duration, var(--default-transition-duration));
	transition-duration: 0.3s;
}
.rating__link:hover {
	background-color: oklab(61.6492% -0.0335176 -0.00978959 / 0.2);
	border-radius: 50px;
}
.rating__link:hover .rating__link-text {
	color: #fff;
}

.footer {
	padding-inline: 46px;
	background-color: #263538;
	padding-bottom: 10px;
	position: relative;
}
.footer_container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	row-gap: 5px;
}
.footer__logo {
	transition: 0.4s;
}
.footer__logo:hover {
	transform: scale(0.95);
}
.footer__dev-logo {
	transition: 0.4s;
	width: 65px;
}
.footer__dev-logo:hover {
	transform: scale(0.95) rotate(360deg);
}
@media (width >= 64rem) {
	.footer_container {
		flex-direction: row;
	}
}

.footer__content {
	justify-content: center;
	align-items: center;
	display: flex;
	top: 50%;
	left: 50%;
}

@media (width >= 64rem) {
	.footer__content {
		--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
		translate: var(--tw-translate-x) var(--tw-translate-y);
		--tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
		translate: var(--tw-translate-x) var(--tw-translate-y);
		position: absolute;
	}
}

.footer__text-container {
	text-align: center;
	flex-direction: column;
	font-size: 16px;
	display: flex;
}

.footer__text {
	color: var(--color-white);
}

.footer__copyright {
	color: #6d8c8c;
}

.footer__links {
	color: var(--color-white);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	column-gap: 25px;
	margin-top: 10px;
	text-decoration-line: underline;
	display: flex;
}

@media (width >= 64rem) {
	.footer__links {
		flex-direction: row;
	}
}

.footer__link {
	transition-property: color, background-color, border-color, outline-color,
		text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via,
		--tw-gradient-to;
	transition-timing-function: var(
		--tw-ease,
		var(--default-transition-timing-function)
	);
	transition-duration: var(--tw-duration, var(--default-transition-duration));
	--tw-duration: 0.2s;
	transition-duration: 0.2s;
}

@media (hover: hover) {
	.footer__link:hover {
		color: #328e95;
	}
}

.news-swiper {
	border-radius: var(--radius-lg);
	margin-inline: auto;
	max-width: 663px;
	margin-top: 30px;
	padding-inline: 10px;
	overflow: hidden;
}

@media (width >= 680px) {
	.news-swiper {
		padding-inline: calc(var(--spacing) * 0);
	}
}

@media (width >= 1480px) {
	.news-swiper {
		max-width: 1376px;
	}
}

.news__swiper-container {
	z-index: 1;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	display: flex;
	position: relative;
	align-items: center;
}

.swiper-slide {
	align-items: center;
	display: flex;
}

.news-swiper__wrapper {
	padding-block: 21px;
}

.news-swiper__slide {
	background-color: #263538;
	border-color: #2b5a5e;
	border-radius: 40px;
	flex-direction: column;
	flex-grow: 1;
	height: auto;
	display: flex;
	position: relative;
}

@media (width >= 510px) {
	.news-swiper__slide {
		border-top-style: var(--tw-border-style);
		border-top-width: 10px;
		border-radius: 100px;
	}
}

.news-swiper__background {
	inset: calc(var(--spacing) * 0);
	object-fit: cover;
	border-radius: 40px;
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
}

@media (width >= 510px) {
	.news-swiper__background {
		border-radius: 100px;
	}
}

.news-swiper__event-image-container {
	position: relative;
}

.news-swiper__image-tag {
	z-index: 10;
	--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
	translate: var(--tw-translate-x) var(--tw-translate-y);
	--tw-font-weight: var(--font-weight-medium);
	font-size: 14px;
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
	border-radius: 50px;
	padding: 4px 35px 6.5px 34px;
	display: block;
	position: absolute;
	top: 20px;
	left: 50%;
}

@media (width >= 510px) {
	.news-swiper__image-tag {
		top: -11px;
	}
}

.news-swiper__event-image {
	object-fit: cover;
	width: 600px;
	min-height: 250px;
	border-radius: 40px;
	margin-top: 10px;
	padding-inline: 10px;
	display: block;
	overflow: hidden;
	position: relative;
	border-bottom: 5px solid rgb(0 0 0 / 10%);
}
.news-swiper__event-image-container:before {
	content: "";
	width: 100%;
	height: calc(100% + 20px);
	bottom: 0;
	left: 0;
	position: absolute;
	background: linear-gradient(to top, rgb(34 44 47 / 50%), transparent);
	z-index: 1;
	border-radius: 100px;
}
@media (width >= 510px) {
	.news-swiper__event-image {
		padding-inline: calc(var(--spacing) * 0);
		border-radius: 100px;
		margin-top: -21px;
	}
}

.news-swiper__event-date {
	--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
	translate: var(--tw-translate-x) var(--tw-translate-y);
	--tw-font-weight: var(--font-weight-medium);
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
	align-items: center;
	column-gap: 9px;
	display: flex;
	position: absolute;
	bottom: 14px;
	left: 50%;
	z-index: 2;
}

.news-swiper__event-title {
	text-align: center;
	font-size: 24px;
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
	margin-top: 18px;
	white-space: nowrap;
	clip-path: fill-box;
	max-width: 98%;
	text-overflow: ellipsis;
	display: block;
}

.news-swiper__event-divider {
	--tw-gradient-position: to right in oklab;
	background-image: linear-gradient(var(--tw-gradient-stops));
	--tw-gradient-from: transparent;
	--tw-gradient-stops: var(
		--tw-gradient-via-stops,
		var(--tw-gradient-position),
		var(--tw-gradient-from) var(--tw-gradient-from-position),
		var(--tw-gradient-to) var(--tw-gradient-to-position)
	);
	--tw-gradient-via: #338e94;
	--tw-gradient-via-stops: var(--tw-gradient-position),
		var(--tw-gradient-from) var(--tw-gradient-from-position),
		var(--tw-gradient-via) var(--tw-gradient-via-position),
		var(--tw-gradient-to) var(--tw-gradient-to-position);
	--tw-gradient-to: transparent;
	min-width: 100px;
	min-height: 2px;
	margin-top: 18px;
}

.news-swiper__event-description {
	text-align: center;
	--tw-font-weight: var(--font-weight-medium);
	font-size: 16px;
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
	-webkit-user-select: text;
	user-select: text;
	margin-inline: 20px;
	margin-top: 10px;
}

@media (width >= 680px) {
	.news-swiper__event-description {
		margin-left: 35px;
		margin-right: 35px;
	}
}

.news-swiper__button-wrapper {
	justify-content: center;
	align-items: flex-end;
	width: 100%;
	height: 100%;
	margin-top: 32px;
	margin-bottom: 27px;
	display: flex;
}

.news-swiper__button {
	width: 310px;
	color: var(--color-white);
}

.swiper-button-next,
.swiper-button-prev {
	opacity: 0.7;
}

.news__arrow {
	z-index: 10;
	cursor: pointer;
	transition-property: opacity;
	transition-timing-function: var(
		--tw-ease,
		var(--default-transition-timing-function)
	);
	transition-duration: var(--tw-duration, var(--default-transition-duration));
	--tw-duration: 0.3s;
	fill: #abf1f7;
	transition-duration: 0.3s;
	display: none;
	margin: 20px;
}

@media (hover: hover) {
	.news__arrow:hover {
		opacity: 0.8;
	}
}

@media (width >= 1050px) {
	.news__arrow {
		display: block;
	}
}

.news__arrow--left {
	rotate: none;
}

.news__arrow--right {
	rotate: 180deg;
}

.swiper-pagination-bullet {
	cursor: pointer;
	opacity: 0.7;
	display: inline-block;
}

.news-swiper__pagination {
	z-index: 10;
	justify-content: center;
	align-items: center;
	column-gap: 20px;
	margin-top: 30px;
	margin-bottom: 20px;
	display: flex;
	position: relative;
}

.news-swiper__pagination .swiper-pagination-bullet {
	background-color: #0000;
	width: 25px;
	height: 25px;
	margin-inline: 5px;
	opacity: 1 !important;
}

.news-swiper__pagination .swiper-pagination-bullet-active {
	opacity: 1 !important;
}

.news-swiper__pagination svg {
	width: 25px;
	height: 25px;
	transition-property: transform, translate, scale, rotate;
	transition-timing-function: var(
		--tw-ease,
		var(--default-transition-timing-function)
	);
	transition-duration: var(--tw-duration, var(--default-transition-duration));
	--tw-duration: 0.3s;
	transition-duration: 0.3s;
}

.news-swiper__pagination .swiper-pagination-bullet:hover svg {
	--tw-scale-x: 110%;
	--tw-scale-y: 110%;
	--tw-scale-z: 110%;
	scale: var(--tw-scale-x) var(--tw-scale-y);
	transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z)
		var(--tw-skew-x) var(--tw-skew-y);
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
	justify-content: center;
	margin-top: 30px;
	display: flex;
	position: static !important;
}

.custom-pagination {
	z-index: 10;
	justify-content: center;
	align-items: center;
	column-gap: 20px;
	margin-top: 10px;
	margin-bottom: 20px;
	display: flex;
	position: relative;
}

@media (width >= 755px) {
	.custom-pagination {
		margin-top: 30px;
	}
}

.custom-pagination-bullet {
	cursor: pointer;
	transition-property: transform, translate, scale, rotate;
	transition-timing-function: var(
		--tw-ease,
		var(--default-transition-timing-function)
	);
	transition-duration: var(--tw-duration, var(--default-transition-duration));
	--tw-duration: 0.3s;
	transition-duration: 0.3s;
}

.custom-pagination-bullet:hover {
	--tw-scale-x: 110%;
	--tw-scale-y: 110%;
	--tw-scale-z: 110%;
	scale: var(--tw-scale-x) var(--tw-scale-y);
	transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z)
		var(--tw-skew-x) var(--tw-skew-y);
}

.custom-pagination-bullet svg {
	width: 25px;
	height: 25px;
}

.news-swiper__pagination {
	display: none;
}

.features-swiper {
	border-radius: var(--radius-lg);
	margin-inline: auto;
	width: 320px;
	margin-top: 23px;
	overflow: hidden;
}

@media (width >= 825px) {
	.features-swiper {
		width: 590px;
	}
}

.features__swiper-container {
	z-index: 40;
	justify-content: center;
	align-items: center;
	gap: 15px;
	max-width: 750px;
	margin: 0 auto;
	display: flex;
	position: relative;
}

.features-swiper__slide {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 108px;
	height: 108px;
	display: flex;
	position: relative;
}

.swiper-slide__background {
	--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
	translate: var(--tw-translate-x) var(--tw-translate-y);
	--tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
	translate: var(--tw-translate-x) var(--tw-translate-y);
	object-fit: contain;
	position: absolute;
	top: 50%;
	left: 50%;
}

.swiper-slide__icon {
	--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
	min-width: 22px;
	min-height: 22px;
	translate: var(--tw-translate-x) var(--tw-translate-y);
	--tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
	translate: var(--tw-translate-x) var(--tw-translate-y);
	position: absolute;
	top: 50%;
	left: 50%;
}

.active-shell {
	opacity: 0;
	min-width: 108px;
	min-height: 108px;
}

.inactive-shell {
	width: 94px;
	height: 94px;
}

.features__swiper-arrow-left {
	cursor: pointer;
	flex-shrink: 0;
	width: 50px;
	margin-top: 23px;
	opacity: 0.4;
	transition: 0.2s;
}

.features__swiper-arrow-right {
	cursor: pointer;
	flex-shrink: 0;
	width: 50px;
	margin-top: 23px;
	rotate: 180deg;
	opacity: 0.4;
	transition: 0.2s;
}

@media (width >= 930px) {
	.features__swiper-arrow-left,
	.features__swiper-arrow-right {
		width: 60px;
	}
}
.features__swiper-arrow-left:hover,
.features__swiper-arrow-right:hover {
	opacity: 1;
}
.features__metasection {
	display: none;
}

.features__metasection-active {
	display: block;
	-webkit-animation: text-focus-in 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53)
		both;
}

@-webkit-keyframes text-focus-in {
	0% {
		-webkit-filter: blur(12px);
		filter: blur(12px);
		opacity: 0;
	}
	100% {
		-webkit-filter: blur(0px);
		filter: blur(0px);
		opacity: 1;
	}
}
@keyframes text-focus-in {
	0% {
		-webkit-filter: blur(12px);
		filter: blur(12px);
		opacity: 0;
	}
	100% {
		-webkit-filter: blur(0px);
		filter: blur(0px);
		opacity: 1;
	}
}

.knowledge {
	--tw-shadow: 0 0 20px 4px var(--tw-shadow-color, #26353840);
	max-width: 1820px;
	box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
		var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
	margin-inline: 50px;
	background-color: #263538;
	border-radius: 100px;
	margin-top: 103px;
	display: flex;
}

.knowledge__tabs {
	min-width: 333px;
	margin-top: 57px;
	margin-bottom: 51px;
	margin-left: 25px;
	padding-top: 9px;
	padding-right: 33px;
	position: relative;
}

:where(.knowledge__tabs > :not(:last-child)) {
	--tw-space-y-reverse: 0;
	margin-block-start: calc(10px * var(--tw-space-y-reverse));
	margin-block-end: calc(10px * calc(1 - var(--tw-space-y-reverse)));
}

.knowledge__tab {
	cursor: pointer;
	width: 100%;
	height: 45px;
	color: var(--color-white);
	text-transform: uppercase;
	border-radius: 100px;
	align-items: center;
	column-gap: 12px;
	padding-inline: 18px;
	font-size: 16px;
	display: flex;
}

@media (hover: hover) {
	.knowledge__tab:hover {
		background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
	}
}

.knowledge__tab--active {
	background-color: var(--color-white);
	color: #263538;
}

@media (hover: hover) {
	.knowledge__tab--active:hover {
		background-color: var(--color-white);
	}
}

.knowledge__tabs-divider {
	top: calc(var(--spacing) * 0);
	right: calc(var(--spacing) * 0);
	--tw-gradient-position: to bottom in oklab;
	background-image: linear-gradient(var(--tw-gradient-stops));
	--tw-gradient-from: oklab(0% 0 0 / 0);
	--tw-gradient-stops: var(
		--tw-gradient-via-stops,
		var(--tw-gradient-position),
		var(--tw-gradient-from) var(--tw-gradient-from-position),
		var(--tw-gradient-to) var(--tw-gradient-to-position)
	);
	--tw-gradient-via: #338e94;
	--tw-gradient-via-stops: var(--tw-gradient-position),
		var(--tw-gradient-from) var(--tw-gradient-from-position),
		var(--tw-gradient-via) var(--tw-gradient-via-position),
		var(--tw-gradient-to) var(--tw-gradient-to-position);
	--tw-gradient-to: oklab(0% 0 0 / 0);
	width: 2px;
	height: 100%;
	position: absolute;
}

.knowledge__content-container {
	width: 100%;
}

.knowledge__content {
	width: 100%;
	margin-top: 59px;
	padding-bottom: 73px;
	padding-left: 42px;
	padding-right: 51px;
	display: none;
}

.knowledge__content--active {
	display: block;
}

.knowledge__title {
	--tw-gradient-position: to right in oklab;
	background-image: linear-gradient(var(--tw-gradient-stops));
	--tw-gradient-from: #359ea6;
	--tw-gradient-stops: var(
		--tw-gradient-via-stops,
		var(--tw-gradient-position),
		var(--tw-gradient-from) var(--tw-gradient-from-position),
		var(--tw-gradient-to) var(--tw-gradient-to-position)
	);
	--tw-gradient-to: #263538;
	--tw-font-weight: var(--font-weight-bold);
	min-width: 100%;
	height: 62px;
	font-size: 24px;
	font-weight: var(--font-weight-bold);
	color: var(--color-white);
	text-transform: uppercase;
	border-radius: 100px;
	align-items: center;
	margin-bottom: 37px;
	padding-inline: 37px;
	display: flex;
}

:where(.knowledge__text-container > :not(:last-child)) {
	--tw-space-y-reverse: 0;
	margin-block-start: calc(18px * var(--tw-space-y-reverse));
	margin-block-end: calc(18px * calc(1 - var(--tw-space-y-reverse)));
}

.knowledge__text {
	color: var(--color-white);
	-webkit-user-select: text;
	user-select: text;
	font-size: 16px;
}

.knowledge__warn-block {
	margin-top: 10px;
	margin-bottom: 10px;
}

.knowledge__warn-block.warn-block {
	margin-top: 10px;
	margin-bottom: 10px;
}

.knowledge__warn-block.warn-block--collapsed {
	margin-bottom: 0;
}

.warn-block__title {
	cursor: pointer;
	background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
	--tw-font-weight: var(--font-weight-bold);
	height: 46px;
	font-size: 20px;
	font-weight: var(--font-weight-bold);
	color: var(--color-white);
	align-items: center;
	column-gap: 11px;
	padding-inline: 21px;
	display: flex;
	align-items: center;
}

.warn-block__icon--expanded {
	transform: rotate(90deg);
}

.warn-block__content {
	background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
	color: var(--color-white);
	-webkit-user-select: text;
	user-select: text;
	padding: 23px 24px 24px 20px;
	font-size: 16px;
}

.warn-block__content--collapsed {
	display: none;
}

.knowledge__subtitle {
	--tw-font-weight: var(--font-weight-bold);
	font-size: 20px;
	font-weight: var(--font-weight-bold);
	color: var(--color-white);
	text-transform: uppercase;
	align-items: center;
	column-gap: 14px;
	margin-top: 28px;
	display: flex;
}

.knowledge__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	width: 100%;
	margin-top: 34px;
	display: grid;
}

.knowledge__grid-title {
	text-align: center;
	--tw-font-weight: var(--font-weight-bold);
	font-size: 16px;
	font-weight: var(--font-weight-bold);
	color: #c8af6a;
	text-transform: uppercase;
	padding-top: 26px;
	padding-bottom: 29px;
}

.knowledge__grid-item {
	text-align: center;
	color: var(--color-white);
	padding-block: 6px;
	font-size: 16px;
}

.knowledge__grid > div:nth-child(4n + 1),
.knowledge__grid > div:nth-child(4n + 2) {
	background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
}

@media (max-width: 2400px) {
  .knowledge {
    margin-inline: 10px;
    border-radius: 10px;
    margin-top: 20px;
  }
}

	.knowledge__tabs {
		min-width: 300px;
		margin-top: 45px;
		margin-bottom: 40px;
		margin-left: 20px;
		padding-top: 7px;
		padding-right: 25px;
	}

	:where(.knowledge__tabs > :not(:last-child)) {
		--tw-space-y-reverse: 0;
		margin-block-start: calc(8px * var(--tw-space-y-reverse));
		margin-block-end: calc(8px * calc(1 - var(--tw-space-y-reverse)));
	}

	.knowledge__tab {
		column-gap: 10px;
		height: 40px;
		padding-inline: 16px;
	}

	.knowledge__content {
		margin-top: 45px;
		padding-bottom: 60px;
		padding-left: 35px;
		padding-right: 40px;
	}

	.knowledge__title {
		border-radius: 80px;
		height: 55px;
		margin-bottom: 30px;
		padding-inline: 30px;
		font-size: 22px;
	}

	:where(.knowledge__text-container > :not(:last-child)) {
		--tw-space-y-reverse: 0;
		margin-block-start: calc(16px * var(--tw-space-y-reverse));
		margin-block-end: calc(16px * calc(1 - var(--tw-space-y-reverse)));
	}

	.warn-block__title {
		column-gap: 9px;
		height: 40px;
		padding-inline: 18px;
		font-size: 18px;
	}

	.warn-block__content {
		padding: 20px 20px 20px 18px;
	}

	.knowledge__subtitle {
		column-gap: 12px;
		font-size: 18px;
	}

	.knowledge__grid {
		margin-top: 28px;
	}

	.knowledge__grid-title {
		padding-top: 22px;
		padding-bottom: 25px;
	}

	.knowledge__grid-item {
		padding-block: 5px;
	}
}

@media (width <= 1280px) {
	.knowledge {
		margin-inline: 20px;
		border-radius: 30px;
		margin-top: 30px;
	}

	.knowledge__tabs {
		min-width: 300px;
		margin-top: 35px;
		margin-bottom: 30px;
		padding-top: 5px;
		padding-right: 20px;
	}

	:where(.knowledge__tabs > :not(:last-child)) {
		--tw-space-y-reverse: 0;
		margin-block-start: calc(6px * var(--tw-space-y-reverse));
		margin-block-end: calc(6px * calc(1 - var(--tw-space-y-reverse)));
	}

	.knowledge__tab {
		column-gap: 8px;
		height: 36px;
		padding-inline: 12px;
	}

	.knowledge__content {
		margin-top: 35px;
		padding-bottom: 50px;
		padding-left: 25px;
		padding-right: 30px;
	}

	.knowledge__title {
		border-radius: 60px;
		height: 50px;
		margin-bottom: 25px;
		padding-inline: 25px;
		font-size: 20px;
	}

	:where(.knowledge__text-container > :not(:last-child)) {
		--tw-space-y-reverse: 0;
		margin-block-start: calc(12px * var(--tw-space-y-reverse));
		margin-block-end: calc(12px * calc(1 - var(--tw-space-y-reverse)));
	}

	.warn-block__title {
		column-gap: 8px;
		height: 36px;
		padding-inline: 16px;
		font-size: 16px;
	}

	.warn-block__content {
		padding: 18px 18px 18px 16px;
	}

	.knowledge__subtitle {
		column-gap: 10px;
		font-size: 16px;
	}

	.knowledge__grid {
		margin-top: 24px;
	}

	.knowledge__grid-title {
		padding-top: 18px;
		padding-bottom: 20px;
	}

	.knowledge__grid-item {
		padding-block: 4px;
	}
}

@media (width <= 980px) {
	.knowledge {
		margin-inline: 16px;
		border-radius: 40px;
		flex-direction: column;
		margin-top: 50px;
	}

	.knowledge__tabs {
		margin-top: 30px;
		margin-bottom: 20px;
		margin-left: calc(var(--spacing) * 0);
		width: 100%;
		min-width: calc(var(--spacing) * 0);
		flex-wrap: wrap;
		justify-content: center;
		padding-top: 5px;
		padding-left: 16px;
		padding-right: 16px;
		display: flex;
	}

	:where(.knowledge__tabs > :not(:last-child)) {
		--tw-space-y-reverse: 0;
		--tw-space-x-reverse: 0;
		margin-block-start: calc(
			calc(var(--spacing) * 0) * var(--tw-space-y-reverse)
		);
		margin-block-end: calc(
			calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse))
		);
		margin-inline-start: calc(8px * var(--tw-space-x-reverse));
		margin-inline-end: calc(8px * calc(1 - var(--tw-space-x-reverse)));
	}

	.knowledge__tabs-divider {
		display: none;
	}

	.knowledge__tab {
		column-gap: 6px;
		width: auto;
		height: 34px;
		margin-bottom: 8px;
		padding-inline: 10px;
		font-size: 16px;
	}

	.knowledge__tab-text {
		white-space: nowrap;
	}

	.knowledge__content {
		margin-top: 0;
		padding-bottom: 40px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.knowledge__title {
		border-radius: 40px;
		height: 45px;
		margin-bottom: 20px;
		padding-inline: 20px;
		font-size: 18px;
	}

	:where(.knowledge__text-container > :not(:last-child)) {
		--tw-space-y-reverse: 0;
		margin-block-start: calc(10px * var(--tw-space-y-reverse));
		margin-block-end: calc(10px * calc(1 - var(--tw-space-y-reverse)));
	}

	.warn-block__title {
		column-gap: 6px;
		height: 32px;
		padding-inline: 12px;
		font-size: 16px;
	}

	.warn-block__content {
		padding: 16px 16px 16px 12px;
		font-size: 16px;
	}

	.knowledge__subtitle {
		column-gap: 8px;
		font-size: 16px;
	}

	.knowledge__grid {
		margin-top: 20px;
	}

	.knowledge__grid-title {
		padding-top: 16px;
		padding-bottom: 16px;
		font-size: 16px;
	}

	.knowledge__grid-item {
		padding-block: 3px;
		font-size: 16px;
	}
}

@media (width <= 768px) {
	.knowledge {
		border-radius: 10px;
		margin-inline: 5px;
	}

	.knowledge__tabs {
		flex-direction: column;
		margin-top: 16px;
	}

	.knowledge__tab {
		border-radius: 10px;
	}

	.knowledge__title {
		height: 40px;
		font-size: 16px;
	}
}

@keyframes gradient-flow {
	0% {
		background-position: 0%;
	}

	50% {
		background-position: 100%;
	}

	100% {
		background-position: 0%;
	}
}

@keyframes light-glow {
	0% {
		opacity: 0.4;
		filter: drop-shadow(0 0 8px #abf1f766) brightness(0.9);
		transform: scale(0.95);
	}

	50% {
		opacity: 1;
		filter: drop-shadow(0 0 25px #abf1f7e6) brightness(1.2);
		transform: scale(1.05);
	}

	100% {
		opacity: 0.4;
		filter: drop-shadow(0 0 8px #abf1f766) brightness(0.9);
		transform: scale(0.95);
	}
}

@property --tw-translate-x {
	syntax: "*";
	inherits: false;
	initial-value: 0;
}

@property --tw-translate-y {
	syntax: "*";
	inherits: false;
	initial-value: 0;
}

@property --tw-translate-z {
	syntax: "*";
	inherits: false;
	initial-value: 0;
}

@property --tw-rotate-x {
	syntax: "*";
	inherits: false;
	initial-value: rotateX(0);
}

@property --tw-rotate-y {
	syntax: "*";
	inherits: false;
	initial-value: rotateY(0);
}

@property --tw-rotate-z {
	syntax: "*";
	inherits: false;
	initial-value: rotateZ(0);
}

@property --tw-skew-x {
	syntax: "*";
	inherits: false;
	initial-value: skewX(0);
}

@property --tw-skew-y {
	syntax: "*";
	inherits: false;
	initial-value: skewY(0);
}

@property --tw-border-style {
	syntax: "*";
	inherits: false;
	initial-value: solid;
}

@property --tw-gradient-position {
	syntax: "*";
	inherits: false;
}

@property --tw-gradient-from {
	syntax: "<color>";
	inherits: false;
	initial-value: #0000;
}

@property --tw-gradient-via {
	syntax: "<color>";
	inherits: false;
	initial-value: #0000;
}

@property --tw-gradient-to {
	syntax: "<color>";
	inherits: false;
	initial-value: #0000;
}

@property --tw-gradient-stops {
	syntax: "*";
	inherits: false;
}

@property --tw-gradient-via-stops {
	syntax: "*";
	inherits: false;
}

@property --tw-gradient-from-position {
	syntax: "<length-percentage>";
	inherits: false;
	initial-value: 0%;
}

@property --tw-gradient-via-position {
	syntax: "<length-percentage>";
	inherits: false;
	initial-value: 50%;
}

@property --tw-gradient-to-position {
	syntax: "<length-percentage>";
	inherits: false;
	initial-value: 100%;
}

@property --tw-font-weight {
	syntax: "*";
	inherits: false;
}

@property --tw-shadow {
	syntax: "*";
	inherits: false;
	initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
	syntax: "*";
	inherits: false;
}

@property --tw-inset-shadow {
	syntax: "*";
	inherits: false;
	initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
	syntax: "*";
	inherits: false;
}

@property --tw-ring-color {
	syntax: "*";
	inherits: false;
}

@property --tw-ring-shadow {
	syntax: "*";
	inherits: false;
	initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
	syntax: "*";
	inherits: false;
}

@property --tw-inset-ring-shadow {
	syntax: "*";
	inherits: false;
	initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
	syntax: "*";
	inherits: false;
}

@property --tw-ring-offset-width {
	syntax: "<length>";
	inherits: false;
	initial-value: 0;
}

@property --tw-ring-offset-color {
	syntax: "*";
	inherits: false;
	initial-value: #fff;
}

@property --tw-ring-offset-shadow {
	syntax: "*";
	inherits: false;
	initial-value: 0 0 #0000;
}

@property --tw-blur {
	syntax: "*";
	inherits: false;
}

@property --tw-brightness {
	syntax: "*";
	inherits: false;
}

@property --tw-contrast {
	syntax: "*";
	inherits: false;
}

@property --tw-grayscale {
	syntax: "*";
	inherits: false;
}

@property --tw-hue-rotate {
	syntax: "*";
	inherits: false;
}

@property --tw-invert {
	syntax: "*";
	inherits: false;
}

@property --tw-opacity {
	syntax: "*";
	inherits: false;
}

@property --tw-saturate {
	syntax: "*";
	inherits: false;
}

@property --tw-sepia {
	syntax: "*";
	inherits: false;
}

@property --tw-drop-shadow {
	syntax: "*";
	inherits: false;
}

@property --tw-backdrop-blur {
	syntax: "*";
	inherits: false;
}

@property --tw-backdrop-brightness {
	syntax: "*";
	inherits: false;
}

@property --tw-backdrop-contrast {
	syntax: "*";
	inherits: false;
}

@property --tw-backdrop-grayscale {
	syntax: "*";
	inherits: false;
}

@property --tw-backdrop-hue-rotate {
	syntax: "*";
	inherits: false;
}

@property --tw-backdrop-invert {
	syntax: "*";
	inherits: false;
}

@property --tw-backdrop-opacity {
	syntax: "*";
	inherits: false;
}

@property --tw-backdrop-saturate {
	syntax: "*";
	inherits: false;
}

@property --tw-backdrop-sepia {
	syntax: "*";
	inherits: false;
}

@property --tw-duration {
	syntax: "*";
	inherits: false;
}

@property --tw-ease {
	syntax: "*";
	inherits: false;
}

@property --tw-scale-x {
	syntax: "*";
	inherits: false;
	initial-value: 1;
}

@property --tw-scale-y {
	syntax: "*";
	inherits: false;
	initial-value: 1;
}

@property --tw-scale-z {
	syntax: "*";
	inherits: false;
	initial-value: 1;
}

@property --tw-content {
	syntax: "*";
	inherits: false;
	initial-value: "";
}

@property --tw-space-y-reverse {
	syntax: "*";
	inherits: false;
	initial-value: 0;
}

@property --tw-space-x-reverse {
	syntax: "*";
	inherits: false;
	initial-value: 0;
}

@property --tw-tracking {
	syntax: "*";
	inherits: false;
}

@keyframes pulse {
	50% {
		opacity: 0.5;
	}
}
@-webkit-keyframes heartbeat {
	from {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transform-origin: center center;
		transform-origin: center center;
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	10% {
		-webkit-transform: scale(0.91);
		transform: scale(0.91);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	17% {
		-webkit-transform: scale(0.98);
		transform: scale(0.98);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	33% {
		-webkit-transform: scale(0.87);
		transform: scale(0.87);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	45% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}
@keyframes heartbeat {
	from {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transform-origin: center center;
		transform-origin: center center;
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	10% {
		-webkit-transform: scale(0.91);
		transform: scale(0.91);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	17% {
		-webkit-transform: scale(0.98);
		transform: scale(0.98);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	33% {
		-webkit-transform: scale(0.87);
		transform: scale(0.87);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	45% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}
.forum {
	padding-top: 20px;
}

.footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

.wripper {
	padding-left: 200px;
	padding-right: 200px;
	margin: 0 auto;
}
.hero__social-link {
	padding: 10px 0px;
	display: block;
}
.page {
	background: url(../bg_sect.png) top no-repeat;
	min-height: 1200px;
	width: 100%;
	height: 100%;
	margin-bottom: 100px;
}
.page .title {
	color: #263538;
}
.page_content {
	padding-top: 30px;
}
.startgame {
	display: flex;
	justify-content: center;
	margin-top: 10px;
	gap: 20px;
}
.startgame_block {
  width: 100%;            /* занимает всю ширину родителя */
  max-width: 600px;       /* максимальная ширина */
  padding: 40px;
  border-radius: 50px;
  background: #263538;
  box-shadow: 0 0 20px 5px rgba(38, 53, 56, 0.3);
  margin: 20px auto;      /* отступ сверху и снизу, центрирование по горизонтали */
}
.startgame_block2 {
	background: #263538;
	width: calc(50% - 80px);
	padding: 40px;
	border-radius: 50px;
	box-shadow: 0 0 20px 5px rgb(38 53 56 / 30%);
}
.startgame_steps {
	display: flex;
	justify-content: center;
	align-items: center;
}
.startgame_steps_num {
	background: #6ba4ab;
	color: #263538;
	width: 100px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	border-radius: 40px;
}
.startgame_steps_name {
	margin-left: 20px;
	font-size: 24px;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
}
.startgame_container {
	color: #fff;
	font-size: 16px;
	margin-top: 10px;
}
.startgame_container2 {
	color: #fff;
	font-size: 16px;
	margin-top: 30px;
}
.startgame_btn {
	height: 50px;
	width: 300px;
	justify-content: center;
	margin-top: 20px;
	margin-bottom: 20px;
}
.startgame_btn {
	height: 55px;
	max-width: 380px;
	width: -webkit-fill-available;
	justify-content: space-between;
	margin-top: 30px;
	margin-bottom: 30px;
}
.startgame_btn-text {
	font-size: 16px;
	font-weight: var(--font-weight-bold);
	color: #0000;
	text-transform: uppercase;
	--tw-drop-shadow: drop-shadow(0 2px 0px #aef2f8);
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
		var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
		var(--tw-sepia) var(--tw-drop-shadow);
	background-image: radial-gradient(100% 100%, #0d1c21 0%, #2a5054 100%);
	-webkit-background-clip: text;
	background-clip: text;
}
.primary_names {
	font-size: 20px;
	color: #fff;
	margin-bottom: 5px;
}
.primary_names h5 {
	margin-left: 20px;
}
.startgame_links {
	margin-top: 20px;
}
.startgame_links a {
	display: block;
}
.primary_dectext {
	color: #6d8c8c;
}
.startgame_btns {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 20px 0px;
}
.startgame_secondbtn {
	width: 300px;
	justify-content: space-between;
	text-transform: uppercase;
	font-size: 16px;
}
.startgane_item {
	margin-top: 30px;
	margin-bottom: 30px;
}
.startgane_item img {
	width: 24px;
	height: 24px;
}
@media (height < 800px) {
	body {
		overflow: auto;
	}
	section {
		height: auto !important;
	}
	.hero {
		min-height: 1080px;
	}
	.forum {
		margin-bottom: 40px;
		min-height: 800px;
	}
	.features {
		min-height: 800px;
	}
	.news {
		min-height: 800px;
	}
	.rating {
		min-height: 800px;
	}
	.forum_block {
		height: auto;
		padding-bottom: 50px;
	}
	.forum__posts {
		margin-top: 64px;
	}
	.rating_block {
		height: auto;
	}
	.footer {
		position: relative;
	}
	.home_art {
		height: 90%;
		background-position: bottom;
	}
	.forum__posts {
		margin-top: 50px;
	}
	.forum-post:nth-child(8) {
		display: none;
	}
	.forum-post:nth-child(7) {
		display: none;
	}
	.rating__link {
		bottom: 50px;
	}
}
@media (width < 1630px) {
	body {
		overflow: auto;
	}
	section {
		height: auto !important;
	}
	.hero {
		min-height: 1080px;
	}
	.forum {
		min-height: max-content;
	}
	.features {
		min-height: 800px;
	}
	.news {
		min-height: 800px;
	}
	.rating {
		min-height: 860px;
	}
	.forum_block {
		height: auto;
		padding-bottom: 0px;
	}
	.footer {
		position: relative;
	}
	.home_art {
		height: 90%;
		width: 100%;
		background-position: bottom;
	}
	.forum__posts {
		margin-top: 50px;
	}
	.forum-post:nth-child(8) {
		display: none;
	}
	.forum-post:nth-child(7) {
		display: none;
	}
	.rating__link {
		bottom: 50px;
	}
	.forum-post__author {
		min-width: 150px;
		font-size: 14px;
	}
	.startgame {
		flex-wrap: wrap;
	}
	.startgame_block {
		width: 50%;
		border-radius: 10px;
	}
	.startgame_block2 {
		width: 90%;
		border-radius: 50px;
	}
	.news-swiper__event-title {
		font-size: 21px;
	}
}
@media (width < 1280px) {
	.section-nav__text {
		display: none;
	}
	.wripper {
		padding-left: 50px;
		padding-right: 50px;
	}
}
@media (width < 1024px) {
	.header_container {
		position: fixed;
	}
	.forum__posts {
		display: grid;
		width: 100%;
		grid-template-columns: repeat(1, minmax(0, 1fr));
		padding-block: 40px;
		padding-inline: 20px;
	}
	.forum-post__content {
		border-radius: 30px;
		gap: 10px;
		padding: 10px;
	}
	.title:before,
	.title:after {
		display: none;
	}
	.forum {
		margin-top: 10px;
		padding-top: 0px;
	}
	.rating__player {
		width: 100%;
		margin: 5px;
	}
	.rating {
		min-height: 1060px;
	}
	.rating__tabs {
		column-gap: 10px;
	}
	.header__countdown-title-container {
		justify-content: center;
	}
	.header__server-info {
		right: 40px;
	}
	.header__countdown {
		left: 40px;
		top: calc(100% + 66px);
	}
	.wripper {
		padding-left: 0;
		padding-right: 0;
	}
}
@media (width < 768px) {
	.home_art {
		height: 70%;
		width: 100%;
	}
	.hero {
		min-height: auto;
	}
	.hero__cta {
		bottom: 1%;
		transform: scale(0.8);
	}
	.bonus-section__card {
		width: 125px;
		height: 60px;
		border-radius: 50px;
		display: flex;
	}

	.bonus-section__value {
		font-size: 24px;
	}
	.bonus-section__label {
		font-size: 14px;
	}
	.hero__social-nav {
		display: none;
	}

	.header__server-info {
		right: 50%;
		transform: translate(50%, 0);
	}
	.header__countdown {
		left: 50%;
		transform: translate(-50%, 100px);
	}
	.header__countdown {
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.header__countdown-container {
		background: transparent;
		width: auto;
	}
	.header__server-info-container {
		background-color: oklab(31.6886% -0.017516 -0.0106298 / 0.9);
	}
	.header__countdown-title {
		font-size: 28px;
		text-transform: uppercase;
		text-shadow: 0 0 20px black;
	}
	.header__countdown-date {
		font-size: 24px;
	}
	.header__countdown-unit {
		font-size: 21px;
		padding-block: 2px;
		padding-inline: 20px;
	}
	.header__countdown-unit:before {
		font-size: 16px;
	}
	.header__countdown-toggle {
		display: none;
	}
	.startgame_secondbtn {
		width: 240px;
	}
	.startgame_steps_name {
		margin-left: 10px;
		font-size: 21px;
	}
	.startgame_steps_num {
		width: 90px;
		height: 40px;
		font-size: 18px;
	}
}
@media (width < 480px) {
	.features__swiper-arrow-left {
		display: none;
	}

	.features__swiper-arrow-right {
		display: none;
	}
	.rating__tabs {
		column-gap: 10px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.rating__over {
		margin-top: 5px;
	}
	.rating__player:nth-child(n + 6):nth-child(-n + 9) {
		display: none;
	}
	.rating__link {
		width: 90%;
		padding: 10px 10px;
	}
	.rating__over {
		margin-top: 5px;
		flex-wrap: wrap;
		padding-inline: 0;
	}
	.rating__player {
		margin: 2px;
		display: flex;
		flex-wrap: wrap;
	}
	.rating__player-score {
		border-radius: 40px;
		column-gap: 12px;
		padding-block: 2px;
		padding-inline: 16px;
		display: flex;
		width: 100%;
		justify-content: center;
		margin-top: 5px;
	}
	.rating__player {
		border-radius: 40px;
	}
	.rating__tab-text {
		display: none;
	}
	.rating {
		min-height: 920px;
	}
	.news-swiper__event-description {
		font-size: 16px;
	}
	.news-swiper__event-image {
		width: 600px;
		min-height: 200px;
	}
	.forum__posts {
		padding-block: 20px;
		padding-inline: 10px;
	}
	.forum-post__date {
		font-size: 14px;
	}
	.features__description {
		min-height: auto;
	}
	.hero__social-nav {
		display: none;
	}
	.header__countdown-container {
		padding: 0;
	}
	.header__countdown-title-container {
		flex-wrap: wrap;
	}
	.header__countdown-unit {
		font-size: 18px;
		padding-block: 2px;
		padding-inline: 15px;
	}
	.header__countdown-title {
		font-size: 32px;
	}
	.header__countdown {
		left: 50%;
		transform: translate(-50%, 115px);
	}
	.startgame_secondbtn {
		width: 220px;
		font-size: 14px;
	}
	.startgame_block {
		padding: 10px;
	}
	.startgame_block2 {
		padding: 20px;
	}
}