body {
	overflow-x: hidden;
	min-height: 100%;
}

.step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(14px, 3vw, 28px);
	font-family: 'Aeonik';
	line-height: 1.5;
	letter-spacing: 0px;
	text-align: center;
	background-color: #fff;
	padding: clamp(24px, 5vw, 51px) clamp(16px, 3vw, 24px) clamp(200px, 45vw, 476px) clamp(16px, 3vw, 24px);
	overflow: hidden;
	box-sizing: border-box;
}

.step-screen {
	position: absolute; z-index: 1; top: clamp(300px, 55vw, 571px); left: 50%; 
	translate: -50% 0;
	rotate: -14deg;
	transform-origin: 50% 50%;
	margin-left: clamp(0px, 20vw, 261px);
	width: calc(100% - 32px);
	max-width: 1095px;
	border-radius: clamp(12px, 2vw, 20px);
}

.step-group {
	width: clamp(100px, 25vw, 170px);
	flex-shrink: 0;
	aspect-ratio: 46399412 / 12829561;
}

.step-title {
	margin-top: clamp(14px, 2.5vw, 27px);
	align-self: stretch;
	color: #000;
	font-size: clamp(28px, 10vw, 64px);
	font-weight: 700;
}

.step-text-symbol {
	margin-top: clamp(8px, 1.5vw, 12px);
	align-self: stretch;
	color: #000;
	font-size: clamp(14px, 3.5vw, 20px);
	font-weight: 300;
}

.step-input-name-company-kz {
	margin-top: clamp(10px, 2vw, 14px);
	width: 100%;
	max-width: 580px;
	color: #c2c5cc;
	text-align: left;
	background-color: unset;
	padding: clamp(14px, 2.5vw, 22px) clamp(12px, 2vw, 15px);
	border: 2px solid #c2c5cc;
	border-radius: clamp(12px, 2vw, 20px);
	box-sizing: border-box;
}

.step-btn {
	position: relative; z-index: 2;
	width: 100%;
	max-width: 580px;
	display: flex;
	justify-content: center;
	color: #fff;
	text-align: center;
	background-color: #00f;
	padding: clamp(14px, 2.5vw, 21px) clamp(12px, 2vw, 15px) clamp(18px, 3vw, 26px) clamp(12px, 2vw, 15px);
	border-radius: clamp(12px, 2vw, 20px);
	font-size: clamp(16px, 4vw, 32px);
	box-sizing: border-box;
}

.step-text-bottom {
	margin-top: clamp(6px, 1vw, 7px);
	width: 100%;
	max-width: 580px;
	min-height: clamp(36px, 8vw, 51px);
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: rgba(0, 0, 0, 0.5);
	font-size: clamp(12px, 2.5vw, 15px);
	font-weight: 300;
	line-height: 1;
	text-align: justify;
}



/** breakpoints (margin / paddings) **/

@media screen and (max-width: 1280px) {
	.step {
		padding-inline: var(--margin-sm);
	}
	.step-screen {
		margin-inline: 0;
	}
}