@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 {
	padding: 100px 0;

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

.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;
		}
		p {
			font-family: 'DM Sans', sans-serif;
			font-weight: 400;
			font-size: 16px;
			line-height: 24px;
			color: #000000;
		}

		.tiles {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			grid-template-areas: 'tile1 tile2 tile3 . .' '. tile4 tile5 tile6 tile7';
			row-gap: 20px;
			column-gap: 10px;

			.tile {
				background: #ffffff;
				border: 1px solid #dedede;
				border-radius: 6px;
				width: 110px;
				height: 110px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				row-gap: 15px;

				&-1 {
					grid-area: tile1;
				}
				&-2 {
					grid-area: tile2;
				}
				&-3 {
					grid-area: tile3;
				}
				&-4 {
					grid-area: tile4;
				}
				&-5 {
					grid-area: tile5;
				}
				&-6 {
					grid-area: tile6;
				}
				&-7 {
					grid-area: tile7;
				}

				p {
					font-family: 'Poppins', sans-serif;
					font-weight: 400;
					font-size: 12px;
					line-height: 1.1;
					color: #224a5f;
					margin-bottom: 0;

					strong {
						font-weight: 400;
						font-size: 25px;
					}
				}
			}
		}

		@include respond-below(lg) {
			.tiles {
				width: fit-content;
				margin-left: auto;
				margin-right: auto;
				margin-top: 40px;
			}
		}
		@include respond-below(sm) {
			.tiles {
				grid-template-columns: repeat(3, 1fr);
				grid-template-areas:
					'tile1 tile2 tile3'
					'tile4 tile5 tile6'
					'. tile7 .';
			}
		}
		@include respond-below(xxxs) {
			.tiles {
				grid-template-columns: repeat(2, 1fr);
				grid-template-areas:
					'tile1 tile2'
					'tile3 tile4'
					'tile5 tile6'
					'tile7 .';
			}
		}
	}
}

.box-02 {
	background-color: #fafafa;

	&__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;
		}

		.tiles {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 8px;

			.tile {
				background: #ffffff;
				border: 1px solid #f1f1f1;
				border-radius: 4px;

				&:first-child,
				&:last-child {
					border-color: #ffbd22;
				}
				p {
					margin-bottom: 0;
					padding: 20px 15px;
				}
			}
		}
	}

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

.box-03 {
	&__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;
		}
	}
}

.box-04,
.box-12 {
	&__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: 190px;
					padding: 10px 30px;
				}
			}
		}
	}
}

.box-05 {
	background-color: #fafafa;

	&__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-06 {
	&__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;
		}

		.tiles {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 8px;

			.tile {
				background: #ffffff;
				border: 1px solid #f1f1f1;
				border-radius: 4px;

				&:first-child,
				&:last-child {
					border-color: #ffbd22;
				}
				p {
					margin-bottom: 0;
					padding: 20px 15px;
				}
			}
		}
	}
}

.box-07 {
	background-color: #fafafa;

	&__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;
		}

		.custom-col {
			display: grid;
			grid-template-columns: minmax(165px, auto) 1fr;
			column-gap: 70px;
			margin-top: 75px;
			align-items: center;

			@include respond-below(md) {
				grid-template-columns: 1fr;
				align-items: center;
				row-gap: 40px;
			}

			.col-left {
				text-align: center;
			}
			.col-right {
				display: flex;
				flex-direction: column;
				row-gap: 25px;

				ul {
					display: flex;
					flex-direction: row;
					gap: 25px;
					align-items: center;
					padding: 0;
					margin: 0;
					list-style: none;
					flex-wrap: wrap;

					@include respond-below(md) {
						gap: 22px;
					}
					@include respond-below(xs) {
						justify-content: center;
					}

					&:not(:last-child) {
						justify-content: center;
					}

					li {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 160px;
						height: 45px;
						background: #ffffff;
						border: 1px solid #f1f1f1;
						border-radius: 4px;

						font-family: 'DM Sans', sans-serif;
						font-weight: 400;
						font-size: 16px;
						line-height: 24px;
						text-align: center;
						color: #000000;
						&:nth-child(2n + 1) {
							border-color: #ffbd22;
						}

						@include respond-above(xl) {
							&:nth-child(7),
							&:nth-child(18) {
								margin-left: calc(160px / 2);
							}
						}

						@include respond-between(lg, xl) {
							width: 150px;
							&:nth-child(6),
							&:nth-child(15),
							&:nth-child(24) {
								margin-left: calc(150px / 2);
							}
						}

						@include respond-between(md, lg) {
							width: 150px;
							&:nth-child(5),
							&:nth-child(12),
							&:nth-child(19),
							&:nth-child(26) {
								margin-left: calc(150px / 2);
							}
						}

						@include respond-between(sm, md) {
							width: 155px;
							&:nth-child(5),
							&:nth-child(12),
							&:nth-child(19),
							&:nth-child(26) {
								margin-left: calc(155px / 2);
							}
						}
						@include respond-between(xs, sm) {
							width: 155px;
							&:nth-child(4),
							&:nth-child(9),
							&:nth-child(14),
							&:nth-child(19),
							&:nth-child(24) {
								margin-left: calc(155px / 2);
							}
						}
					}
				}
			}
		}
	}
}

.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;
			margin-bottom: 80px;
		}

		ul {
			padding: 0;
			margin: 0;
			list-style: none;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(266px, 1fr));
			row-gap: 60px;
			column-gap: 35px;
			li {
				position: relative;
				border: 1px solid #ffbd22;
				border-radius: 4px;
				padding: 37px 15px 20px;

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

				span {
					font-family: 'DM Sans', sans-serif;
					font-weight: 700;
					font-size: 16px;
					line-height: 21px;
					color: #000000;

					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					background: #ffbd22;
					width: 40px;
					height: 40px;
					border-radius: 100%;
					top: 0;
					left: 15px;
					transform: translateY(-50%);
				}

				&:nth-child(2n) {
					background: #ffbd22;

					span {
						background: #ffffff;
					}
				}
			}
		}
	}
}

.box-10 {
	background-color: #fafafa;

	&__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;
		}

		.advanced-box {
			.advanced-box-head {
				text-align: center;
				border-top-left-radius: 30px;
				border-top-right-radius: 30px;
				background-color: #ffbf0a;
				padding: 40px 20px;

				h3 {
					color: #fff;
					font-size: 15px;
					line-height: 1.2;
					text-transform: uppercase;
				}
				p {
					color: #fff;
					margin-bottom: 0;
				}
			}

			p {
				font-size: 11px;
				line-height: 1.5;
			}

			.advanced-box-tiles {
				display: flex;
				flex-direction: row;
				.tile {
					position: relative;
					padding: 25px;
					flex: 1;
					border: 1px solid #ffbd22;
					background-color: #fff;

					&:nth-child(1) {
						border-bottom-right-radius: 45px;
					}
					&:nth-child(2) {
						border-bottom-right-radius: 45px;
						border-bottom-left-radius: 45px;
					}
					&:nth-child(3) {
						border-bottom-left-radius: 45px;
					}

					&:not(:last-child) {
						&::before {
							content: '+';
							position: absolute;
							top: 50%;
							right: -15px;
							width: 30px;
							height: 30px;
							border-radius: 100%;
							background: #ffbd22;
							color: #000;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 27px;
							z-index: 1;

							transform: translateY(-50%);
						}
					}

					h4 {
						color: #000;
						font-size: 14px;
						font-weight: 700;
						line-height: 1.2;
						margin-bottom: 15px;
					}

					p {
						margin-bottom: 0;
					}
				}
			}

			@include respond-below(sm) {
				.advanced-box-tiles {
					flex-direction: column;
					.tile {
						&:nth-child(1) {
							border-radius: 0;
							border-bottom: none;
						}
						&:nth-child(2) {
							border-radius: 0;
							border-bottom: none;
						}
						&:nth-child(3) {
							border-bottom-left-radius: 45px;
							border-bottom-right-radius: 45px;
						}

						&:not(:last-child) {
							&::before {
								top: auto;
								bottom: -15px;
								left: 50%;
								transform: translateX(-50%);
							}
						}
					}
				}
			}
		}

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

.box-11 {
	padding: 100px 0 0;

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

	&__wrapper {
		h3 {
			font-family: 'DM Sans', sans-serif;
			font-weight: 700;
			font-size: 26px;
			line-height: 41px;
			letter-spacing: -0.6188px;
			color: #000000;
			margin-bottom: 40px;
		}

		ul {
			padding: 0;
			margin: 0;
			list-style: none;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(266px, 1fr));
			row-gap: 60px;
			column-gap: 35px;
			li {
				border: 1px solid #ffbd22;
				border-radius: 4px;
				padding: 20px 15px 20px;

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

				&:nth-child(2n) {
					background: #ffbd22;
				}
			}
		}
	}
}