@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import '_mixins';

.container {
	padding: 0 15px;

	@include respond-above(xl) {
		max-width: 1360px;
	}
}
.box-01,
.box-02,
.box-03,
.box-04,
.box-05,
.box-06,
.box-07,
.box-08,
.box-09,
.box-10,
.box-12,
.box-13,
.box-14,
.box-15,
.box-16,
.box-17 {
	padding: 100px 0;

	@include respond-below(sm) {
		padding: 60px 0;
	}
}

.why {
	background-color: #000000;
}

.box-03,
.box-11,
.box-16 {
	&__wrapper {
		.cta-yellow {
			background: #ffbf0a;
			border: 1px solid #ffbf0a;
			border-radius: 10px;
			padding: 60px;
			max-width: 1347px;
			margin: 0 auto;
			display: flex;
			gap: 80px;

			@include respond-below(lg) {
				gap: 60px;
				padding: 40px;
			}

			@include respond-below(md) {
				gap: 50px;
				flex-wrap: wrap;
				justify-content: center;
			}

			.contact-data {
				width: 40%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				gap: 35px;
				margin-left: auto;

				@include respond-below(md) {
					flex-direction: column;
					text-align: center;
					width: 100%;
				}

				> img {
					width: 120px;
					height: 120px;
					border-radius: 100px;
					object-fit: cover;
					object-position: top;
				}

				p {
					margin-bottom: 0;

					strong {
						font-weight: 400;
					}

					img {
						margin-right: 10px;
					}
				}
			}

			.text {
				font-weight: 700;
				letter-spacing: -0.4284px;

				@include respond-below(md) {
					text-align: center;
					width: 100%;
				}

				p {
					margin-bottom: 0;
					font-size: 18px;
					line-height: 1.25;
					letter-spacing: 0.3px;
					margin-bottom: 15px;
				}

				.btn {
					background: #fff;
					color: #000;
					margin-top: 10px;

					border-radius: 10px;
					font-size: 16px;
					font-weight: 700;
					max-width: fit-content;
					padding: 10px 30px;
				}
			}
		}
	}
}

.box-02,
.box-05,
.box-07,
.box-09,
.box-14 {
	background-color: #fafafa;
}

.box-01 {
	&__wrapper {
		h3 {
			font-family: 'DM Sans', sans-serif;
			font-weight: 700;
			font-size: 26px;
			line-height: 41px;
			letter-spacing: -0.6188px;
			color: #000000;
		}
		ul {
			padding: 0;
			margin: 0;
			list-style: none;

			li {
				position: relative;
				font-family: 'DM Sans', sans-serif;
				font-weight: 400;
				font-size: 16px;
				line-height: 24px;
				color: #000000;

				&:not(:last-child) {
					margin-bottom: 10px;
				}

				&::before {
					content: '•';
					position: relative;
					padding-right: 10px;
				}
			}
		}
	}
}

.box-02 {
	&__wrapper {
		h3 {
			font-family: 'DM Sans', sans-serif;
			font-weight: 700;
			font-size: 32px;
			line-height: 41px;
			letter-spacing: -0.7616px;
			color: #000000;
		}
		p {
			font-family: 'DM Sans', sans-serif;
			font-weight: 400;
			font-size: 16px;
			line-height: 24px;
			color: #000000;
		}
	}

	@include respond-below(lg) {
		.row {
			flex-direction: column-reverse;
			row-gap: 40px;
		}
	}
}

.box-04 {
	&__wrapper {
		h3 {
			font-family: 'DM Sans', sans-serif;
			font-weight: 700;
			font-size: 32px;
			line-height: 41px;
			letter-spacing: -0.7616px;
			color: #000000;
		}
		h4 {
			font-family: 'DM Sans', sans-serif;
			font-weight: 700;
			font-size: 16px;
			line-height: 21px;
			color: #000000;
			margin-bottom: 25px;
		}
		p {
			font-family: 'DM Sans', sans-serif;
			font-weight: 400;
			font-size: 16px;
			line-height: 24px;
			color: #000000;
		}

		ul {
			padding: 0;
			margin: 0;
			list-style: none;
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 8px;

			li {
				background: #ffffff;
				border: 1px solid #f1f1f1;
				border-radius: 4px;
				padding: 20px 15px;

				&:nth-child(2n + 1) {
					border-color: #ffbd22;
				}
				&:last-child {
					grid-column-end: -1;
				}
			}
		}
	}
}

.box-05 {
	&__wrapper {
		h3 {
			font-family: 'DM Sans', sans-serif;
			font-weight: 700;
			font-size: 26px;
			line-height: 41px;
			letter-spacing: -0.6188px;
			color: #000000;
		}
		p {
			font-family: 'DM Sans', sans-serif;
			font-weight: 400;
			font-size: 16px;
			line-height: 24px;
			color: #000000;
			margin-bottom: 0;
		}
	}

	@include respond-below(md) {
		.row {
			flex-direction: column-reverse;
			row-gap: 40px;
		}
	}
}

.box-06 {
	&__wrapper {
		h3 {
			font-family: 'DM Sans', sans-serif;
			font-weight: 700;
			font-size: 26px;
			line-height: 41px;
			letter-spacing: -0.6188px;
			color: #000000;
		}
		ul {
			padding-left: 20px;
			margin-bottom: 16px;
			li {
				&:not(:last-child) {
					margin-bottom: 10px;
				}

				font-family: 'DM Sans', sans-serif;
				font-weight: 400;
				font-size: 16px;
				line-height: 24px;
				color: #000000;
			}
		}
		p {
			font-family: 'DM Sans', sans-serif;
			font-weight: 400;
			font-size: 16px;
			line-height: 24px;
			color: #000000;
		}
	}

	@include respond-below(md) {
		.row {
			flex-direction: column;
			row-gap: 40px;
		}
	}
}

.box-07 {
	&__wrapper {
		h3 {
			font-family: 'DM Sans', sans-serif;
			font-weight: 700;
			font-size: 26px;
			line-height: 41px;
			letter-spacing: -0.6188px;
			color: #000000;
		}
		ul {
			padding-left: 20px;
			margin-bottom: 16px;
			li {
				&:not(:last-child) {
					margin-bottom: 10px;
				}

				font-family: 'DM Sans', sans-serif;
				font-weight: 400;
				font-size: 16px;
				line-height: 24px;
				color: #000000;
			}
		}
		p {
			font-family: 'DM Sans', sans-serif;
			font-weight: 400;
			font-size: 16px;
			line-height: 24px;
			color: #000000;
		}
	}

	@include respond-below(md) {
		.row {
			flex-direction: column-reverse;
			row-gap: 40px;
		}
	}
}

.box-08 {
	&__wrapper {
		h3 {
			font-family: 'DM Sans', sans-serif;
			font-weight: 700;
			font-size: 26px;
			line-height: 41px;
			letter-spacing: -0.6188px;
			color: #000000;
		}
		p {
			font-family: 'DM Sans', sans-serif;
			font-weight: 400;
			font-size: 16px;
			line-height: 24px;
			color: #000000;
		}
	}

	@include respond-below(md) {
		.row {
			flex-direction: column;
			row-gap: 40px;
		}
	}
}

.box-09 {
	&__wrapper {
		h3 {
			font-family: 'DM Sans', sans-serif;
			font-weight: 700;
			font-size: 26px;
			line-height: 41px;
			letter-spacing: -0.6188px;
			color: #000000;
		}
		ul {
			padding-left: 20px;
			margin-bottom: 16px;
			li {
				&:not(:last-child) {
					margin-bottom: 10px;
				}

				font-family: 'DM Sans', sans-serif;
				font-weight: 400;
				font-size: 16px;
				line-height: 24px;
				color: #000000;
			}
		}
	}

	@include respond-below(md) {
		.row {
			flex-direction: column-reverse;
			row-gap: 40px;
		}
	}
}

.box-10 {
	&__wrapper {
		h3 {
			font-family: 'DM Sans', sans-serif;
			font-weight: 700;
			font-size: 26px;
			line-height: 41px;
			letter-spacing: -0.6188px;
			color: #000000;
		}
		p {
			font-family: 'DM Sans', sans-serif;
			font-weight: 400;
			font-size: 16px;
			line-height: 24px;
			color: #000000;
		}
	}

	@include respond-below(md) {
		.row {
			flex-direction: column-reverse;
			row-gap: 40px;
		}
	}
}

.box-12 {
	&__wrapper {
		h3 {
			font-family: 'DM Sans', sans-serif;
			font-weight: 700;
			font-size: 26px;
			line-height: 41px;
			letter-spacing: -0.6188px;
			color: #000000;
		}
		p {
			font-family: 'DM Sans', sans-serif;
			font-weight: 400;
			font-size: 16px;
			line-height: 24px;
			color: #000000;
		}
	}

	@include respond-below(md) {
		.row {
			flex-direction: column-reverse;
			row-gap: 40px;
		}
	}
}

.box-13 {
	&__wrapper {
		h3 {
			font-family: 'DM Sans', sans-serif;
			font-weight: 700;
			font-size: 26px;
			line-height: 41px;
			letter-spacing: -0.6188px;
			color: #000000;
		}
		p {
			font-family: 'DM Sans', sans-serif;
			font-weight: 400;
			font-size: 16px;
			line-height: 24px;
			color: #000000;
		}
	}

	@include respond-below(md) {
		.row {
			flex-direction: column;
			row-gap: 40px;
		}
	}
}

.box-14 {
	&__wrapper {
		h3 {
			font-family: 'DM Sans', sans-serif;
			font-weight: 700;
			font-size: 26px;
			line-height: 41px;
			letter-spacing: -0.6188px;
			color: #000000;
		}
		p {
			font-family: 'DM Sans', sans-serif;
			font-weight: 400;
			font-size: 16px;
			line-height: 24px;
			color: #000000;
		}
	}

	@include respond-below(md) {
		.row {
			flex-direction: column-reverse;
			row-gap: 40px;
		}
	}
}

.box-15 {
	&__wrapper {
		h3 {
			font-family: 'DM Sans', sans-serif;
			font-weight: 700;
			font-size: 26px;
			line-height: 41px;
			letter-spacing: -0.6188px;
			color: #000000;
		}
		p {
			font-family: 'DM Sans', sans-serif;
			font-weight: 400;
			font-size: 16px;
			line-height: 24px;
			color: #000000;
		}
	}

	@include respond-below(md) {
		.row {
			flex-direction: column;
			row-gap: 40px;
		}
	}
}