// out: ../style-css/style.css, compress: true, sourceMap: true
@import 'variables';
@import '_mixins';

.subpage-content {
	.container {
		@media (min-width: 1200px) {
			max-width: 1000px;
		}
	}

	.box-1 {
		margin-bottom: 120px;

		.row {
			align-items: center;
		}
		.col-data {
			padding: 50px;
			border-radius: 38px;
			border: 1px solid #e3e3e3;

			h2 {
				color: $cBlack;
				font-family: $font1;
				font-size: 36px;
				font-style: normal;
				font-weight: 700;
				line-height: 1;
				letter-spacing: 16.2px;
				margin-bottom: 30px;

				@include respond-below(xs) {
					font-size: 24px;
					letter-spacing: 8px;
				}
			}
			p {
				color: $cBlack;
				font-family: $font1;
				font-size: 14px;
				font-style: normal;
				font-weight: 300;
				line-height: normal;
				letter-spacing: 0.7px;
				margin-bottom: 0;

				strong {
					font-weight: 700;
				}
			}
		}
	}

	.box-2 {
		margin-bottom: 200px;

		@include respond-below(xs) {
			margin-bottom: 100px;
		}

		.col-img {
			position: relative;
			padding-right: 20px;
			padding-bottom: 20px;
			max-width: fit-content;

			&::before {
				content: '';
				position: absolute;
				inset: 20px 0 0 20px;
				border: 5px solid $cGold;
			}

			@include respond-below(md) {
				margin-left: auto;
				margin-right: auto;
			}

			img {
				position: relative;
			}
		}

		h2 {
			color: $cBlack;
			font-family: $font1;
			font-size: 40px;
			font-style: normal;
			font-weight: 700;
			line-height: normal;
			letter-spacing: 6px;

			@include respond-above(md) {
				text-align: center;
				max-width: 400px;
			}
			@include respond-below(xs) {
				font-size: 24px;
				letter-spacing: 4px;
			}
		}
		p {
			color: $cBlack;
			font-family: $font1;
			font-size: 15px;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
			letter-spacing: 0.75px;
		}
	}

	.box-3 {
		margin-bottom: 170px;

		iframe {
			overflow: hidden;
			border-radius: 15px;
		}
	}

	.box-4 {
		margin-bottom: 100px;

		h2 {
			color: $cGold;
			font-family: $font1;
			font-size: 20px;
			font-style: normal;
			font-weight: 700;
			line-height: normal;
			text-align: center;
			margin-bottom: 60px;
		}

		ul {
			list-style: none;
			padding: 0;
			margin: 0;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
			gap: 30px;

			li {
				img {
					margin-bottom: 25px;
					min-height: 70px;
					object-fit: contain;
				}
				p {
					color: $cBlack;
					font-family: $font1;
					font-size: 12px;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
					margin-bottom: 0;

					strong {
						font-weight: 700;
					}
				}
			}
		}
	}

	.box-5 {
		padding: 50px 0 80px;
		background: #f5f5f5;

		h2 {
			color: $cBlack;
			font-family: $font1;
			font-size: 20px;
			font-style: normal;
			font-weight: 700;
			line-height: normal;
			text-align: center;
			margin-bottom: 50px;
		}

		ol {
			list-style: none;
			margin: 0;
			padding: 0;
			counter-reset: item;
			width: 100%;
			max-width: 770px;
			margin-left: auto;
			margin-right: auto;

			li {
				position: relative;
				padding-left: 45px;

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

				&::before {
					position: absolute;
					content: counter(item) '';
					counter-increment: item;
					left: 0;
					top: 0;

					display: flex;
					align-items: center;
					justify-content: center;
					width: 33px;
					height: 33px;

					color: $cGold;
					text-align: center;
					font-family: $font1;
					font-size: 24px;
					font-style: normal;
					font-weight: 800;
					line-height: normal;

					border: 2px solid $cGold;
					border-radius: 100%;
				}

				p {
					color: $cBlack;
					font-family: $font1;
					font-size: 14px;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
					margin-bottom: 0;

					strong {
						font-weight: 700;
					}
				}
			}
		}
	}

	.box-6 {
		margin-top: 80px;
		margin-bottom: 100px;

		p {
			text-align: center;
			color: $cBlack;
			font-family: $font1;
			font-size: 17px;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
		}
	}
	.box-7 {
		margin-bottom: 80px;
		p,
		a {
			display: block;
			text-align: center;
			color: $cBlack;
			font-family: $font1;
			font-size: 20px;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
			margin: 0;
		}
		a {
			text-decoration: none;
		}
	}
}