.education-page {
	--card-bg: color-mix(in srgb, var(--bg-1) 80%, transparent);
	--card-bg-light: color-mix(in srgb, var(--bg-1) 60%, transparent);
	margin-bottom: 60px;
	.section-heading {
		display: flex;
		align-items: end;
		justify-content: space-between;
		gap: 40px;
		h2 {
			font-size: 32px;
			line-height: 1;
		}
		> p {
			width: 448px;
			flex-shrink: 0;
			color: var(--textColor2);
			text-align: right;
			text-transform: uppercase;
			span {
				font: inherit;
				color: transparent;
				background: var(--gradient-1);
				background-clip: text;
				-webkit-background-clip: text;
			}
		}
		&.reverse h2 {
			width: 896px;
			text-align: right;
		}
		&.center {
			align-items: center;
			flex-direction: column;
			gap: 10px;
			h2,
			p {
				width: auto;
				text-align: center;
			}
		}
	}
	.bg-title {
		position: absolute;
		top: -66px;
		left: -8px;
		font: 900 158px/1.09 "Unbounded";
		letter-spacing: -10px;
		text-transform: uppercase;
		white-space: nowrap;
		color: color-mix(in srgb, var(--bg-1) 70%, transparent);
		filter: blur(12px);
		pointer-events: none;
	}
	.hero {
		min-height: 674px;
		overflow: hidden;
		padding-bottom: 120px;
		.wrapper {
			position: relative;
			min-height: inherit;
			padding-top: 120px;
		}
		.breadcrumbs {
			position: relative;
			z-index: 2;
			display: flex;
			gap: 6px;
			font-size: 12px;
			text-transform: uppercase;
			* {
				font-size: inherit;
				color: color-mix(in srgb, var(--textColor) 60%, transparent);
			}
		}
		.content {
			position: relative;
			z-index: 2;
			width: 800px;
			margin-top: 140px;
			h1 {
				display: flex;
				flex-direction: column;
				font-size: 48px;
				line-height: 1;
				span {
					font: inherit;
					line-height: 1.1;
					color: transparent;
					background: var(--gradient-1);
					background-clip: text;
					-webkit-background-clip: text;
				}
			}
			strong {
				display: block;
				margin-top: 6px;
				font-size: 24px;
				font-weight: 500;
				line-height: 1.2;
				letter-spacing: -.5px;
				text-transform: none;
				color: var(--textColor);
			}
			p {
				margin-top: 6px;
				line-height: 1.2;
				letter-spacing: -.5px;
				color: color-mix(in srgb, var(--textColor) 60%, transparent);
			}
			.btn {
				height: 70px;
				margin-top: 30px;
				padding-inline: 55px;
				border-radius: 16px;
				background: var(--gradient-1);
			}
		}
		.picture {
			position: absolute;
			top: -410px;
			left: 46.4%;
			width: 1260px;
			max-width: none;
			pointer-events: none;
		}
	}
	.benefits {
		.section-heading {
			align-items: center;
		}
		.cards {
			display: grid;
			grid-template-columns: repeat(6, minmax(0, 1fr));
			gap: 12px;
			margin-top: 40px;
			article {
				position: relative;
				grid-column: span 2;
				min-width: 0;
				min-height: 400px;
				overflow: hidden;
				padding: 40px;
				border: 1px solid transparent;
				border-radius: 16px;
				background: var(--card-bg);
				box-shadow: 0 16px 34px color-mix(in srgb, var(--textColor) 6%, transparent);
				transition: border-color .3s, transform .3s;
				&:nth-last-child(-n + 2) {
					grid-column: span 3;
				}
				.title {
					position: relative;
					z-index: 2;
					display: flex;
					align-items: center;
					gap: 16px;
					i {
						position: relative;
						display: grid;
						width: 60px;
						flex: 0 0 60px;
						aspect-ratio: 1;
						place-items: center;
						border: 1px solid var(--bg-1);
						border-radius: 16px;
						background: var(--bg-1);
						box-shadow: 0 4px 9px color-mix(in srgb, var(--bg-2) 5%, transparent);
						transition: border-color .3s, box-shadow .3s;
						&::before {
							position: relative;
							z-index: 1;
							content: '\e904';
							font: 18px icon;
							color: var(--bg-2);
							transition: color .3s;
						}
						&::after {
							content: '';
							position: absolute;
							inset: 0;
							border-radius: inherit;
							background: var(--gradient-1);
							opacity: 0;
							transition: opacity .3s;
						}
					}
					h3 {
						font-size: 20px;
						line-height: 1;
						background: var(--gradient-1);
						background-clip: text;
						-webkit-background-clip: text;
						transition: color .3s;
					}
				}
				p {
					position: absolute;
					z-index: 2;
					bottom: 40px;
					left: 40px;
					width: 260px;
					font-size: 20px;
					line-height: 1.1;
					color: var(--textColor2);
				}
				img {
					position: absolute;
					right: -50px;
					bottom: -35px;
					width: 355px;
					max-width: none;
				}
				&:nth-last-child(-n + 2) {
					p {
						width: 360px;
					}
					img {
						right: -40px;
						bottom: -80px;
						width: 530px;
					}
				}
			}
		}
	}
	.programs {
		position: relative;
		margin-top: 180px;
		.section-heading > p {
			text-align: left;
		}
		.content {
			display: grid;
			grid-template-columns: 577px minmax(0, 1fr);
			align-items: center;
			gap: 40px;
			margin-top: 40px;
			.tabs {
				display: flex;
				flex-direction: column;
				gap: 52px;
				button {
					position: relative;
					padding: 0 0 9px;
					border: none;
					background: transparent;
					font-size: 24px;
					font-weight: 900;
					line-height: 1;
					text-align: left;
					text-transform: uppercase;
					color: color-mix(in srgb, var(--textColor) 40%, transparent);
					transition: color .3s;
					&.active {
						color: transparent;
						background: var(--gradient-1);
						background-clip: text;
						-webkit-background-clip: text;
						&::after {
							content: '';
							position: absolute;
							bottom: 0;
							left: 0;
							width: 100%;
							height: 2px;
							border-radius: 2px;
							background: var(--gradient-1);
						}
					}
				}
			}
			article {
				position: relative;
				min-height: 508px;
				overflow: hidden;
				border-radius: 16px;
				background: var(--bg-1);
				box-shadow: 0 16px 34px color-mix(in srgb, var(--textColor) 6%, transparent);
				.text {
					position: relative;
					z-index: 2;
					display: flex;
					width: 553px;
					min-height: 508px;
					flex-direction: column;
					justify-content: space-between;
					padding: 60px;
					padding-right: 0;
					.tags {
						display: flex;
						gap: 6px;
						span {
							display: flex;
						 	position: relative;
							padding: 3px 16px 5px;
							border-radius: 8px;
							font-size: 16px;
							color: transparent;
							background: var(--gradient-1);
							background-clip: text;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							opacity: .7;
							&::before {
								content: '';
								position: absolute;
								inset: 0;
								border-radius: 8px;
								padding: 1px;
								background: var(--gradient-1);
								-webkit-mask: 
									linear-gradient(#fff 0 0) content-box, 
									linear-gradient(#fff 0 0);
								-webkit-mask-composite: xor;
								mask-composite: exclude;
								z-index: -1;
							}
						}
					}
					.body {
						display: flex;
						flex-direction: column;
						align-items: start;
						gap: 30px;
					}
					h3 {
						width: 390px;
						font-size: 24px;
						line-height: 1;
					}
					p {
						margin-top: 20px;
						font-size: 20px;
						line-height: 1.2;
						color: var(--textColor2);
					}
					.btn {
						height: 70px;
						padding-inline: 55px;
						border-radius: 16px;
						background: var(--gradient-1);
					}
				}
				> img {
					position: absolute;
					top: 50%;
					right: -40px;
					width: 590px;
					max-width: none;
					transform: translateY(-50%);
				}
				&::after {
					content: '';
					position: absolute;
					inset: 0 45% 0 35%;
					background: linear-gradient(90deg, var(--bg-1), transparent);
				}
			}
		}
	}
	.stack {
		position: relative;
		margin-top: 180px;
		.section-heading small {
			display: block;
			margin-top: 10px;
			color: color-mix(in srgb, var(--textColor) 60%, transparent);
		}
		.section-heading {
			position: relative;
		}
		.cards {
			display: grid;
			grid-template-columns: repeat(4, minmax(0, 1fr));
			gap: 12px;
			margin-top: 40px;
			article {
				position: relative;
				min-height: 252px;
				overflow: hidden;
				padding: 30px 40px;
				border: 1px solid color-mix(in srgb, var(--textColor) 10%, transparent);
				border-radius: 12px;
				background: var(--card-bg-light);
				transition: border-color .3s, transform .3s;
				h3 {
					font-size: 24px;
					font-weight: 700;
					line-height: 1;
					text-transform: none;
					color: var(--textColor2);
					background: var(--gradient-1);
					background-clip: text;
					-webkit-background-clip: text;
					transition: color .3s;
				}
				ul {
					display: flex;
					flex-direction: column;
					gap: 12px;
					margin-top: 58px;
					list-style: none;
					li {
						position: relative;
						padding-left: 20px;
						color: var(--textColor2);
						&::before {
							content: '';
							position: absolute;
							top: 4px;
							left: 0;
							width: 8px;
							aspect-ratio: 1;
							border-radius: 2px;
							background: var(--gradient-1);
						}
					}
				}
			}
		}
	}
	.bonuses {
		position: relative;
		display: grid;
		grid-template-columns: 340px minmax(0, 1fr);
		align-items: start;
		gap: 24px;
		min-height: 412px;
		margin-top: 120px;
		overflow: hidden;
		padding: 76px 56px;
		border: 3px solid var(--bg-2);
		border-radius: 16px;
		background: var(--card-bg-light);
		> img {
			position: absolute;
			bottom: -95px;
			left: -125px;
			width: 632px;
			max-width: none;
		}
		> h2 {
			position: relative;
			z-index: 1;
			font-size: 32px;
			line-height: 1;
			span {
				/* display: ; */
			}
		}
		.cards {
			position: relative;
			z-index: 1;
			display: grid;
			grid-template-columns: repeat(4, minmax(0, 1fr));
			gap: 12px;
			article {
				min-width: 0;
				min-height: 252px;
				padding: 30px;
				border: 1px solid color-mix(in srgb, var(--textColor) 10%, transparent);
				border-radius: 16px;
				background: color-mix(in srgb, var(--bg-1) 70%, transparent);
				i {
					display: block;
					width: 32px;
					aspect-ratio: 1;
					&::before {
						content: '\e904';
						font: 20px icon;
						color: var(--bg-2);
					}
				}
				h3 {
					margin-top: 20px;
					font-size: 20px;
					line-height: 1;
				}
				p {
					margin-top: 10px;
					font-size: 20px;
					line-height: 1.1;
					color: var(--textColor2);
				}
			}
		}
	}
	.prices {
		margin-top: 60px;
		padding-block: 60px;
		background: color-mix(in srgb, var(--bg-1) 40%, transparent);
		.cards {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			align-items: center;
			gap: 12px;
			margin-top: 40px;
			article {
				position: relative;
				display: flex;
				min-height: 336px;
				flex-direction: column;
				gap: 32px;
				padding: 40px;
				border: 1px solid color-mix(in srgb, var(--textColor) 10%, transparent);
				border-radius: 16px;
				background: var(--card-bg);
				h3 {
					font-size: 24px;
					line-height: 1;
					&::before {
						content: '';
						display: inline-block;
						width: 18px;
						aspect-ratio: 1;
						margin: 0 10px 3px 0;
						border: 1px solid transparent;
						border-radius: 6px;
						background: var(--gradient-1) border-box;
						box-shadow: inset 0 0 0 5px var(--bg-1);
					}
					span {
						font: inherit;
						color: transparent;
						background: var(--gradient-1);
						background-clip: text;
						-webkit-background-clip: text;
					}
				}
				p {
					margin-top: 6px;
					color: var(--textColor2);
				}
				.details {
					display: flex;
					flex-direction: column;
					align-items: start;
					gap: 6px;
					.time {
						display: flex;
						gap: 10px;
						align-items: center;
						padding: 10px;
						border: 1px solid color-mix(in srgb, var(--textColor2) 50%, transparent);
						border-radius: 20px;
						font-weight: 500;
						text-transform: uppercase;
						color: var(--textColor2);
						margin-bottom: 6px;
						&::before {
							content: '\e909';
							font-family: 'icon';
							color: #fff;
							font-size: 16px;

						}
					}
					strong {
						display: flex;
						align-items: center;
						gap: 12px;
						font-size: 32px;
						font-weight: 900;
						line-height: 1;
						text-transform: none;
						color: var(--textColor);
						&::before {
							content: '\e908';
							font-family: 'icon';
							color: #000;
							font-size: 19px;

						}
					}
				}
				button {
					height: 50px;
					margin-top: auto;
					border: 1px solid var(--textColor);
					border-radius: 12px;
					background: transparent;
					font-size: 20px;
					font-weight: 900;
					text-transform: uppercase;
				}
				&.accent {
					min-height: 384px;
					padding-block: 70px;
					border-color: var(--bg-2);
					box-shadow: 0 16px 34px color-mix(in srgb, var(--textColor) 6%, transparent);
					.time,
					button {
						border-color: transparent;
						background: var(--gradient-1);
						color: #fff;
					}
					.popular {
						position: absolute;
						top: -11px;
						right: -6px;
						width: 170px;
						height: 105px;
						pointer-events: none;
						img {
							position: absolute;
							top: -5px;
							left: -5px;
							width: 185px;
							height: 115px;
							max-width: none;
						}
						b {
							position: absolute;
							top: 32px;
							left: 52px;
							font-size: 15px;
							font-weight: 900;
							line-height: 1;
							text-transform: uppercase;
							white-space: nowrap;
							color: var(--btn-color);
							transform: rotate(29deg);
						}
					}
				}
			}
		}
	}
	.portfolio {
		margin-top: 120px;
		.info-box h2 {
			margin-top: 60px;
			margin-right: 0;
			font-size: 48px;
		}
	}
	.about-request,
	.seo {
		margin-top: 120px;
	}
	.seo {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		.column {
			&:last-child {
				padding-top: 34px;
			}
			h2 {
				display: flex;
				align-items: center;
				gap: 20px;
				font-size: 16px;
				line-height: 1.2;
				color: var(--textColor2);
				white-space: nowrap;
				&::after {
					content: '\e903';
					font-family: 'icon';
					font-size: 24px;
					transform: rotate(90deg);
				}
			}
			.text {
				display: flex;
				flex-direction: column;
				gap: 4px;
				margin-top: 10px;
				opacity: .6;
				p {
					font-size: 20px;
					line-height: 1.2;
					color: var(--textColor2);
				}
			}
		}
	}
}
.window-modal.education-modal {
	--max-w: 960px;
	.body {
		gap: 30px;
		overflow: hidden auto;
		padding: 40px 50px;
		border-radius: 12px;
		h2 {
			font-size: 28px;
			line-height: 1.3;
		}
	}
	form {
		display: flex;
		flex-direction: column;
		gap: 20px;
		.row {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 20px;
			&.top {
				grid-template-columns: 312fr 528fr;
			}
		}
		.field {
			display: flex;
			min-width: 0;
			flex-direction: column;
			gap: 4px;
			> span:first-child {
				padding-inline: 10px;
				font-weight: 700;
				line-height: 1.2;
			}
			> input,
			.phone-input {
				width: 100%;
				height: 50px;
				border: 1px solid color-mix(in srgb, var(--textColor) 10%, transparent);
				border-radius: 12px;
				background: var(--bg-1);
				transition: border-color .3s;
			}
			> input {
				padding-inline: 16px;
			}
			> input:focus,
			.phone-input:focus-within {
				border-color: var(--bg-2);
			}
		}
		.phone-input {
			display: flex;
			align-items: center;
			.code {
				display: flex;
				align-items: center;
				gap: 8px;
				margin-left: 16px;
				padding-right: 16px;
				border-right: 1px solid color-mix(in srgb, var(--textColor) 10%, transparent);
				img {
					width: 24px;
					height: 18px;
					object-fit: cover;
					box-shadow: 0 4px 6px color-mix(in srgb, var(--textColor) 16%, transparent);
				}
				b {
					font-weight: 400;
				}
			}
			input {
				min-width: 0;
				height: 100%;
				flex: 1;
				padding-inline: 10px;
				border: 0;
				background: transparent;
			}
		}
		.options {
			display: flex;
			min-width: 0;
			flex-direction: column;
			gap: 4px;
			border: 0;
			legend {
				padding-inline: 10px;
				font-weight: 700;
				line-height: 1.2;
			}
			> div {
				display: flex;
				gap: 6px;
			}
			label {
				display: flex;
				min-width: 0;
				align-items: center;
				gap: 8px;
				padding: 10px 15px 10px 10px;
				border: 1px solid color-mix(in srgb, var(--textColor) 10%, transparent);
				border-radius: 12px;
				cursor: pointer;
				background: var(--bg-1);
				transition: border-color .3s, box-shadow .3s, transform .3s;
				input {
					width: 28px;
					aspect-ratio: 1;
					flex-shrink: 0;
					border: 2px solid color-mix(in srgb, var(--textColor) 20%, transparent);
					border-radius: 50%;
					appearance: none;
					background: var(--bg-1);
					transition: border-width .2s, border-color .3s;
					&:checked {
						border: 6px solid transparent;
						background: linear-gradient(var(--bg-1), var(--bg-1)) padding-box, var(--gradient-1) border-box;
					}
				}
				span {
					font-size: 14px;
					font-weight: 500;
					letter-spacing: -.3px;
					text-transform: uppercase;
					white-space: nowrap;
					color: var(--textColor2);
				}
				&:has(input:checked) {
					border-color: transparent;
					background: linear-gradient(var(--bg-1), var(--bg-1)) padding-box, var(--gradient-1) border-box;
					box-shadow: 0 4px 9px color-mix(in srgb, var(--bg-2) 5%, transparent), 0 16px 16px color-mix(in srgb, var(--bg-2) 4%, transparent);
				}
			}
			&.schedule {
				align-items: start;
			}
		}
		.bottom {
			display: flex;
			align-items: center;
			gap: 41px;
			margin-top: 0;
			.agree {
				display: flex;
				min-width: 0;
				flex: 1;
				align-items: center;
				gap: 10px;
				padding-left: 10px;
				label {
					position: relative;
					display: grid;
					width: 20px;
					flex: 0 0 20px;
					aspect-ratio: 1;
					place-items: center;
					&::after {
						content: '\e904';
						position: absolute;
						font: 10px icon;
						color: var(--btn-color);
						opacity: 0;
						pointer-events: none;
						transition: opacity .2s;
					}
					&:has(input:checked)::after {
						opacity: 1;
					}
				}
				input {
					width: 100%;
					aspect-ratio: 1;
					border: 1px solid var(--bg-2);
					border-radius: 4px;
					appearance: none;
					background: var(--bg-1);
					&:checked {
						background: var(--gradient-1);
					}
				}
				p,
				a {
					font-size: 12px;
					line-height: 1.2;
					color: var(--textColor2);
				}
				a {
					color: var(--bg-2);
				}
			}
			.btn {
				--pd-h: 0px;
				width: 391px;
				height: 70px;
				flex-shrink: 0;
				justify-content: center;
				border-radius: 16px;
				background: var(--gradient-1);
				font-size: 20px;
			}
		}
	}
}
@media (max-width: 1600px) {
	.education-page {
		.benefits .cards article {
			padding: 30px;
			p {
				bottom: 30px;
				left: 30px;
				font-size: 18px;
			}
		}
		.programs .content {
			grid-template-columns: 460px minmax(0, 1fr);
			article .text {
				width: 520px;
				padding: 50px;
			}
		}
		.bonuses {
			grid-template-columns: 280px minmax(0, 1fr);
			padding-inline: 40px;
			.cards article {
				padding: 24px;
				p {
					font-size: 17px;
				}
			}
		}
	}
}
@media (max-width: 1280px) {
	.education-page {
		.section-heading {
			h2 {
				font-size: 28px;
			}
			&.reverse h2 {
				width: 720px;
			}
		}
		.bg-title {
			font-size: 120px;
		}
		.hero {
			padding-bottom: 0;
			.content {
				width: 650px;
				h1 {
					font-size: 40px;
				}
				strong {
					font-size: 20px;
				}
			}
			.picture {
				top: -360px;
				left: 48%;
				width: 1100px;
			}
		}
		.benefits .cards {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			article,
			article:nth-last-child(-n + 2) {
				grid-column: span 1;
				&:last-child {
					grid-column: 1 / -1;
				}
			}
		}
		.programs .content {
			grid-template-columns: 330px minmax(0, 1fr);
			.tabs button {
				font-size: 19px;
			}
			article {
				.text {
					width: 55%;
					padding: 35px;
					h3,
					p {
						width: 100%;
					}
					p {
						font-size: 17px;
					}
				}
				> img {
					right: -130px;
				}
			}
		}
		.stack .cards {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
		.bonuses {
			grid-template-columns: 1fr;
			> h2 {
				width: 340px;
			}
			> img {
				display: none;
			}
			.cards {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}
		}
		.prices .cards {
			article {
				padding: 28px;
				h3 {
					font-size: 20px;
				}
				.details strong {
					font-size: 25px;
				}
				button {
					font-size: 16px;
				}
			}
		}
	}
}
@media (max-width: 1024px) {
	.education-page {
		.section-heading {
			align-items: start;
			flex-direction: column;
			gap: 12px;
			> p,
			&.reverse h2 {
				width: auto;
				text-align: left;
			}
			&.reverse p {
				order: 2;
			}
		}
		.bg-title {
			display: none;
		}
		.hero {
			min-height: 720px;
			.wrapper {
				padding-top: 100px;
			}
			.content {
				width: min(650px, 80%);
				margin-top: 100px;
			}
			.picture {
				top: -250px;
				left: 40%;
				width: 940px;
				opacity: .45;
			}
		}
		.benefits,
		.programs,
		.stack {
			margin-top: 80px;
		}
		.programs .content {
			grid-template-columns: 1fr;
			.tabs {
				flex-direction: row;
				gap: 20px;
				button {
					flex: 1;
				}
			}
		}
		.bonuses,
		.prices,
		.portfolio,
		.about-request,
		.seo {
			margin-top: 80px;
		}
		.prices .cards {
			grid-template-columns: 1fr;
			article,
			article.accent {
				min-height: 0;
				padding: 32px;
			}
		}
		.seo {
			grid-template-columns: 1fr;
			gap: 12px;
			.column {
				&:last-child {
					padding-top: 0;
				}
				h2 {
					align-items: start;
					white-space: normal;
				}
				.text p {
					font-size: 16px;
				}
			}
		}
	}
	.window-modal.education-modal {
		.body {
			padding-inline: 32px;
		}
		form {
			.row.top {
				grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
			}
			.options > div {
				flex-wrap: wrap;
			}
			.bottom {
				gap: 24px;
				.btn {
					width: 340px;
				}
			}
		}
	}
}
@media (max-width: 768px) {
	.education-page {
		.section-heading h2 {
			font-size: 24px;
		}
		.hero {
			min-height: 650px;
			.wrapper {
				padding-top: 80px;
			}
			.content {
				width: 100%;
				margin-top: 80px;
				h1 {
					font-size: clamp(30px, 9vw, 40px);
				}
				strong {
					font-size: 18px;
				}
				p {
					font-size: 14px;
				}
				.btn {
					width: 100%;
					justify-content: center;
					padding-inline: 20px;
				}
			}
			.picture {
				top: -180px;
				left: 10%;
				width: 760px;
				opacity: .22;
			}
		}
		.benefits .cards {
			grid-template-columns: 1fr;
			article,
			article:nth-last-child(-n + 2),
			article:nth-last-child(-n + 2):last-child {
				grid-column: auto;
				min-height: 390px;
				padding: 20px;
				.title {
					gap: 10px;
					i {
						width: 44px;
						flex-basis: 44px;
						border-radius: 10px;
					}
					h3 {
						font-size: 17px;
					}
				}
				p {
					bottom: 20px;
					left: 20px;
					width: 55%;
					font-size: 15px;
				}
				img {
					right: -100px;
					bottom: -30px;
					width: 360px;
				}
			}
		}
		.programs .content {
			.tabs {
				overflow-x: auto;
				button {
					min-width: 260px;
					font-size: 16px;
				}
			}
			article {
				min-height: 620px;
				.text {
					width: 100%;
					min-height: 620px;
					padding: 24px;
					.tags {
						flex-wrap: wrap;
					}
					.btn {
						width: 100%;
						justify-content: center;
						padding-inline: 20px;
					}
				}
				> img {
					top: 38%;
					right: -130px;
					width: 500px;
					opacity: .25;
				}
				&::after {
					display: none;
				}
			}
		}
		.stack .cards,
		.bonuses .cards {
			grid-template-columns: 1fr;
		}
		.stack .cards article {
			min-height: 230px;
			padding: 24px;
			h3 {
				font-size: 20px;
			}
			ul {
				margin-top: 36px;
			}
		}
		.bonuses {
			padding: 28px 18px;
			> h2 {
				width: auto;
				font-size: 24px;
			}
			.cards article {
				min-height: 0;
			}
		}
		.prices {
			padding-block: 40px;
			.cards article,
			.cards article.accent {
				padding: 24px;
				.popular {
					transform: scale(.8);
					transform-origin: top right;
				}
			}
		}
		.portfolio .info-box h2 {
			margin-top: 10px;
			font-size: 38px;
		}
	}
	.window-modal.education-modal {
		.body {
			gap: 24px;
			padding: 32px 20px 20px;
			h2 {
				padding-right: 34px;
				font-size: 22px;
			}
		}
		form {
			.row,
			.row.top {
				grid-template-columns: minmax(0, 1fr);
			}
			.options {
				> div {
					display: grid;
					grid-template-columns: repeat(2, minmax(0, 1fr));
				}
				label span {
					white-space: normal;
				}
			}
			.bottom {
				align-items: stretch;
				flex-direction: column;
				gap: 20px;
				.agree {
					padding-left: 0;
				}
				.btn {
					order: -1;
					width: 100%;
				}
			}
		}
	}
}
@media (max-width: 480px) {
	.window-modal.education-modal form .options > div {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (hover: hover) {
	.education-page {
		.benefits .cards article:hover {
			border-color: var(--bg-2);
			transform: translateY(-4px);
			.title {
				i {
					border-color: transparent;
					box-shadow: 0 8px 18px color-mix(in srgb, var(--bg-2) 18%, transparent);
					&::after {
						opacity: 1;
					}
					&::before {
						color: var(--btn-color);
					}
				}
				h3 {
					color: transparent;
					background: var(--gradient-1);
					background-clip: text;
					-webkit-background-clip: text;
				}
			}
		}
		.stack .cards article:hover {
			border-color: var(--bg-2);
			transform: translateY(-4px);
			h3 {
				color: transparent;
				background: var(--gradient-1);
				background-clip: text;
				-webkit-background-clip: text;
			}
		}
	}
}