*, html {
	margin: 0;
	padding: 0;
	font-family: 'Roboto';
	font-size: 1rem;

	@media ((max-width: 1024px) or (max-height: 1080px)) {
		font-size: 0.75rem;
	}

	@media ((max-width: 780px) or (max-height: 870px)) {
		font-size: 0.688rem;
	}
	
	@media ((max-width: 702px) or (max-height: 777px)) {
		font-size: 0.625rem;
	}
	
	@media (max-width: 624px) {
		font-size: 0.563rem;
	}

	@media (max-width: 545px) {
		font-size: 0.75rem;
	}

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

html {
	min-height: 100vh;
	height: -webkit-fill-available;
}

body {
	min-height: 100vh;
	height: -webkit-fill-available;
	-webkit-overflow-scrolling: touch; /* smooth scroll iOS */
	overflow-y: auto;
	background-color: #eaeaea;

	@media (max-width: 545px) {
		background-color: #FFFFFF;
	}
}

.outer-container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 10px;
	height: 100%;

	@media (max-width: 545px) {
		margin: 0;
		justify-content: unset;
		align-items: unset;
	}
}

.container {
	background-color: #FFFFFF;
	border-radius: 60px;
	max-width: 70rem;
	width: 100%;
	box-shadow: 4px 4px 4px 0px rgba(34, 60, 80, 0.2);

	@media (max-width: 545px) {
		border-radius: unset;
		box-shadow: unset;
	}
}

.inner-container {
	margin: 3.125rem 3.75rem 3.125rem 4.875rem;
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 4px solid #FFEA00;

	@media (max-width: 545px) {
		align-items: unset;
		flex-direction: column;
		justify-content: flex-start;
	}


	.title {
		text-transform: uppercase;
		font-weight: 900;

		@media (max-width: 545px) {
			display: flex;
			column-gap: 0.5rem;
			
			.title_small {
				font-size: 2.5rem;
			}

			.title_large {
				font-size: 2.5rem;
				letter-spacing: unset;
			}
		}
	}

	.title_small {
		font-size: 2.5rem;
	}

	.title_large {
		font-size: 4rem;
		letter-spacing: 0.5rem;
	}

	.partner-links {
		display: flex;
		align-items: flex-start;
		column-gap: 0.5rem;

		.text-secondary {
			margin-top: 0.25rem;
			font-size: 1rem;
			color: #8D8D8D;
		}
	}
}

.advantages {
	display: grid;
	grid-template-columns: repeat(3, auto);
	grid-template-rows: repeat(3, auto);
	grid-template-areas:
		"adv1 btn adv2"
		". btn ."
		"adv3 adv4 adv5";
	margin-top: 6.875rem;
	row-gap: 8rem;

	@media (max-width: 545px) {
		display: flex;
		flex-direction: column;
		row-gap: 1rem;
		margin-top: 2rem;
		padding-bottom: 2rem;
	}

	.advantage:not(.advantage_contact) {
		align-items: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		row-gap: 1.125rem;

		@media (max-width: 545px) {
			order: 2;
		}

		.icon {
			user-select: none;
			width: 9.375rem;
			
			@media (max-width: 780px) {
				max-width: 100px;
			}
		}

		.title {
			font-size: 1.5rem;
			font-weight: 900;
			color: #666666;
			text-align: center;
		}
	}

	.advantage_earnings {
		grid-area: adv1;
	}

	.advantage_contact {
		grid-area: btn;
		padding-top: 4rem;

		@media (max-width: 545px) {
			order: 1;
			padding-top: unset;
			margin-bottom: 4rem;
		}
	}

	.advantage_bonuses {
		grid-area: adv2;
	}

	.advantage_support {
		grid-area: adv3;
	}

	.advantage_time {
		grid-area: adv4;
	}

	.advantage_hiring_support {
		grid-area: adv5;
	}

	.advantage .contact {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;

		.icon {
			width: 14rem;
		}
		
		.btn.contact {
			position: absolute;
			bottom: -3rem;
			text-decoration: none;
		}
	}
}

.btn {
	background-color: #000000;
	border-radius: 90px;
	border: 3px solid #FFDD54;
	box-shadow: 4px 4px 4px 0px rgba(34, 60, 80, 0.2);
	color: #FFEA00;
	cursor: pointer;
	font-size: 1.5rem;
	font-weight: 900;
	padding: 1.5rem 4.25rem;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 0.125rem;

	/* добавляем плавность и анимацию */
	transition: transform 0.2s ease, box-shadow 0.2s ease;

	@media (max-width: 780px) {
		max-width: 150px;
	}
}

.btn:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* для красоты */
}

.yandex-link {
	max-width: 5rem;
}