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

#page-content {
	background-color: #f9f9f9;
	margin-top: 106px;

	@include respond-below(xl) {
		margin-top: 156px;
	}

	@include respond-between(xs, sm) {
		margin-top: 204px;
	}

	@include respond-below(xs) {
		margin-top: 90px;
	}

	@media (max-width: 500px) {
		margin-top: 153px;
	}
}

.h2-left-line {
	font-size: 30px;
	font-weight: 700;
	margin: 0 0 50px 0;
	padding-left: 20px;
	border-left: 3px solid $cYellow;
}

.hero {
	background: $cWhite;

	.scontainer-content {
		height: 422px;
		display: flex;
		flex-direction: row;
		background-repeat: no-repeat;
		background-position: right;
		position: relative;
		align-items: flex-end;
		padding-bottom: 85px;

		@include respond-below(lg) {
			padding-bottom: 0;
			align-items: center;
		}
	}

	.section-data {
		max-width: fit-content;

		@include respond-below(lg) {
			background: $cWhite;
			padding: 20px;
			border-radius: 12px;
		}
	}
	.subtitle {
		color: $cYellow;
		font-size: 16px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 1px;
		margin-bottom: 21px;
		max-width: fit-content;
	}

	.title {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		column-gap: 8px;
		max-width: fit-content;

		font-size: 30px;
		font-weight: 700;
		margin-bottom: 21px;

		img {
			padding-top: 5px;
		}
	}

	p {
		width: 100%;
		max-width: 380px;
		margin-bottom: 29px;
	}

	#scontainer-295 {
		.scontainer-content {
			background-image: url('/upload/filemanager/Pages/Opinie-dla-hoteli-i-restauracji-/Hero.png');
		}
	}
}

.box-1 {
	.scontainer-content {
		text-align: center;
		padding: 80px 0;

		h2 {
			color: $cBlackText;
			font-size: 30px;
			font-weight: 900;
			margin-bottom: 20px;

			width: 100%;
			max-width: 740px;
			margin-left: auto;
			margin-right: auto;

			strong {
				color: $cYellow;
				font-weight: 900;
			}
		}

		h3 {
			color: $cBlackText;
			font-size: 16px;
			font-weight: 700;
			margin-bottom: 16px;
		}

		p {
			font-size: 18px;
			margin-bottom: 20px;

			strong {
				font-weight: 700;
			}

			span {
				font-size: 12px;
			}
		}

		ul {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			gap: 16px;
			margin-bottom: 0px;

			li {
				img {
					width: 20px;
					height: 20px;
				}
			}
		}
	}

	#scontainer-289 {
		p {
			max-width: 830px;
			margin-left: auto;
			margin-right: auto;
		}
		h2 {
			max-width: 870px;
		}
	}
}

.box-2 {
	background: #fffbec;
	padding-top: 124px;
	padding-bottom: 130px;

	h2 {
		@extend .h2-left-line;
		color: $cBlackText;
	}

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

		h4 {
			color: $cBlackText;
			font-size: 24px;
			font-weight: 700;
			margin-bottom: 24px;
		}
		h5 {
			color: $cYellow;
			font-size: 18px;
			margin-bottom: 10px;
			line-height: 1.5;
			font-weight: 700;
		}
		p {
			font-size: 16px;
			flex: 1;

			&:last-child {
				margin-bottom: 10px;
			}
		}
		a {
			position: relative;
			color: $cBlackText;
			font-size: 16px;
			font-weight: 600;

			&::before {
				content: '';
				display: inline-block;
				width: 14px;
				height: 10px;
				background-image: url('/upload/filemanager/icons/arrow.svg');
				background-position: center;
				background-size: cover;
				background-repeat: no-repeat;
				margin-right: 15px;
			}
		}

		img {
			width: 100%;
			max-width: fit-content;
			border-top-left-radius: 12px;
			border-top-right-radius: 12px;
		}

		ol {
			padding: 0;
			margin: 0;
			list-style: none;

			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			column-gap: 30px;
			row-gap: 40px;

			@include respond-below(sm) {
			}

			li {
				position: relative;
				display: flex;
				flex-direction: column;

				width: calc(100% / 2 - (30px - (30px / 2)));

				@include respond-below(sm) {
					width: 100%;
				}

				@include respond-above(sm) {
					&:nth-child(2) {
						&::before {
							content: '';
							position: absolute;
							right: 10px;
							bottom: 100%;
							width: 230px;
							height: 161px;
							background-image: url('/upload/filemanager/Pages/person.png');
							background-position: center;
							background-repeat: no-repeat;
							background-size: cover;
						}
					}
				}

				> div {
					padding: 45px 50px 35px 50px;
					background: $cWhite;
					border-bottom-left-radius: 12px;
					border-bottom-right-radius: 12px;

					box-shadow: 0 24px 64px rgba(100, 84, 0, 0.12);

					display: flex;
					flex-direction: column;
					flex: 1;
				}
			}
		}
	}

	.box-3-2 {
		ul {
			margin: 0;
			padding: 0;
			list-style: none;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			column-gap: 80px;
			row-gap: 40px;

			li {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				width: calc(100% / 3 - (80px - 80px / 3));

				@include respond-below(sm) {
					width: 100%;
				}
			}
		}

		img {
			margin-bottom: 28px;
		}
		h4 {
			font-size: 24px;
			font-weight: 700;
			margin-bottom: 24px;
		}
		p {
			&:last-child {
				margin-bottom: 0;
			}
		}
	}

	#scontainer-282 {
		.box-3-2 {
			ul {
				li {
					width: calc(100% / 2 - (80px - 80px / 2));
				}
			}
		}
	}
}

.box-3 {
	padding: 100px 0 60px;
	background: $cBlack;

	.scontainer-content {
		h2 {
			@extend .h2-left-line;
			color: $cWhite;
		}
		.btn-meeting {
			display: flex;
			max-width: fit-content;
			margin-left: auto;
			margin-right: auto;
		}
		ol {
			display: flex;
			flex-direction: row;
			justify-content: center;
			gap: 30px;
			flex-wrap: wrap;
			padding: 0;
			margin: 0 0 60px 0;

			li {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				padding: 30px;
				border-radius: 12px;
				background: #2b2a24;

				width: calc(100% / 3 - (30px - 30px / 3));

				box-shadow: 0 24px 64px rgba(204, 177, 41, 0.12);

				&:nth-child(4),
				&:nth-child(5) {
					flex: 1;
				}

				@include respond-below(md) {
					width: calc(100% / 2 - (30px - 30px / 2));
				}

				@include respond-below(sm) {
					width: 100%;
				}

				img {
					margin-bottom: 20px;
				}

				h4 {
					color: $cYellow;
					font-size: 16px;
					font-weight: 600;
				}

				p {
					color: $cWhite;
					font-size: 16px;

					strong {
						font-weight: 700;
					}

					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
	}

	#scontainer-291 {
		.scontainer-content {
			ol {
				li {
					width: calc(100% / 2 - (30px - 30px / 2));

					@include respond-below(sm) {
						width: 100%;
					}
				}
			}
		}
	}
}

.box-4 {
	padding: 100px 0;

	.scontainer-content {
		> h2 {
			position: relative;
			font-size: 30px;
			font-weight: 700;
			line-height: 1;

			display: flex;
			flex-direction: row;
			align-items: center;
			column-gap: 17px;
			margin-bottom: 40px;

			&::before {
				content: '';
				display: inline-block;
				width: 22px;
				height: 22px;
				background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
			}
		}
	}

	#news-list {
		@include respond-below(md) {
			justify-content: center;

			.article-entry {
				width: calc(100% / 2 - (30px - (30px / 2)));
			}
		}

		@include respond-below(sm) {
			justify-content: center;

			.article-entry {
				width: 100%;
			}
		}
	}
}

.box-5 {
	#scontainer-300 {
		background-image: url('/upload/filemanager/new-2024/box-bottom-bg-2.jpg');
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		overflow: hidden;

		.container {
			> .row {
				min-height: 308px;
				align-items: center;

				> .col-12 {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					column-gap: 50px;
					align-items: center;
					padding-top: 50px;
					padding-bottom: 50px;

					@include respond-below(sm) {
						flex-direction: column;
						row-gap: 50px;
					}
				}
			}
		}

		.col-left {
			display: flex;
			flex-direction: row;
			align-items: center;
			column-gap: 20px;

			@include respond-below(md) {
				flex-direction: column;
				align-items: baseline;
				row-gap: 30px;
			}

			@include respond-below(sm) {
				align-items: center;
			}

			.col-img {
				position: relative;

				.star-1,
				.star-2 {
					position: absolute;
					width: 65px;
					height: 65px;
				}

				.star-1 {
					top: 0;
					right: 0;
					transform: rotate(310deg) translate(30%, -20%);
				}

				.star-2 {
					bottom: 0px;
					left: 0;
					transform: rotate(287deg) translate(-15%, -10%);
					z-index: 2;
				}

				.user {
					position: relative;
					z-index: 1;
					border: 2px solid $cWhite;
					border-radius: 100%;
				}
			}

			.col-txt {
				display: flex;
				flex-direction: column;
				gap: 32px;
				align-items: flex-start;

				@include respond-below(sm) {
					align-items: center;
					text-align: center;
				}

				h3 {
					color: $cBlackText;
					font-size: 30px;
					font-weight: 800;
					font-family: $font-5;
					margin: 0;
					max-width: 700px;

					@include respond-below(sm) {
						font-size: 22px;
					}
				}

				p {
					color: rgba($cBlackText, 0.8);
					font-size: 16px;
					font-family: $font-5;
					font-weight: 400;
					margin: 0;

					strong {
						font-weight: 600;
					}
				}

				a {
					display: inline-flex;
					align-items: center;
					gap: 12px;
					padding: 22px 28px;
					border-radius: 12px;
					background: $cGreen;

					color: $cWhite;
					font-size: 14px;
					font-weight: 700;
					font-family: $font-5;
				}
			}
		}

		.col-right {
			position: relative;
			height: fit-content;

			.star-1,
			.star-2 {
				position: absolute;
			}

			.star-1 {
				width: 170px;
				height: 170px;
				bottom: 100%;
				left: 100%;
				transform: rotate(310deg) translate(-50%, 0%);
			}

			.star-2 {
				width: 90px;
				height: 90px;
				bottom: 0px;
				left: 0;
				transform: rotate(287deg) translate(-60%, -35%);
			}

			.col-right-data {
				position: relative;
				padding: 35px 50px 35px 24px;
				background: rgba(255, 255, 255, 0.6);
				border: 1px solid rgba(#9e9e9e, 0.25);
				border-radius: 12px;
				backdrop-filter: blur(4px);
				display: flex;
				flex-direction: column;

				.col-right-head {
					display: flex;
					flex-direction: row;
					gap: 16px;
					align-items: center;
					margin-bottom: 34px;

					.col-right-head-data {
						p {
							color: rgba($cBlackText, 0.7);
							font-size: 16px;
							font-weight: 500;
							font-family: $font-5;
							line-height: 1;
							margin-bottom: 0;
							width: max-content;

							strong {
								color: $cBlackText;
							}
						}
					}
				}

				ul {
					list-style: none;
					padding: 0;
					margin: 0;

					li {
						display: flex;
						flex-direction: row;
						align-items: center;
						gap: 28px;

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

						img {
							width: 16px;
							height: 16px;
						}

						a {
							color: rgba($cBlackText, 0.7);
							font-size: 16px;
							font-weight: 500;
							font-family: $font-5;
							line-height: 1;
						}
					}
				}
			}
		}
	}
}