@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-272 {
		.scontainer-content {
			background-image: url('/upload/filemanager/Pages/Opinie-dla-firm-uslugowych/Hero.jpg');
		}
	}
	#scontainer-280 {
		.scontainer-content {
			background-image: url('/upload/filemanager/Pages/Opinie-i-gwiazdki-w-Google/Hero.png');
		}
	}
	#scontainer-284 {
		.scontainer-content {
			background-image: url('/upload/filemanager/Pages/Opinie-dla-sklepow-internetowych/Hero.png');

			.title {
				max-width: 640px;
			}
			p {
				max-width: 563px;
			}
		}
	}

	#scontainer-288 {
		.scontainer-content {
			background-image: url('/upload/filemanager/Pages/Opinie-w-Google-Moja-Firma/hero.png');

			.title {
				max-width: 810px;
			}
			p {
				max-width: 640px;
			}
		}
	}
}

.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 {
	padding: 120px 0;
	background: $cWhite;
}

.box-3 {
	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-4 {
	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);

				@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;
					}
				}

				&:last-child {
					&::before {
						content: '';
						position: absolute;
						top: -10px;
						right: -10px;
						width: 97px;
						height: 90px;
						background-image: url('/upload/filemanager/icons/Stars.svg');
						background-position: center;
						background-repeat: no-repeat;
						background-size: cover;
					}
				}
			}
		}
	}

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

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

.box-5 {
	padding: 100px 0;
	background: #f9f5e6;

	.scontainer-content {
		h2 {
			position: relative;
			color: $cBlackText;
			font-size: 36px;
			font-weight: 700;
			margin-bottom: 40px;
			display: flex;
			align-items: flex-end;
			width: 100%;
			max-width: fit-content;
			margin-right: auto;
			margin-left: auto;
			text-align: center;

			&::after {
				content: '';
				display: inline-block;
				width: 51px;
				height: 66px;
				background-image: url('/upload/filemanager/icons/Frame-319.svg');
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
			}
		}

		ul {
			margin: 0 0 60px 0;
			padding: 0;
			list-style: none;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			column-gap: 12px;
			row-gap: 15px;
			justify-content: center;
			max-width: 980px;
			margin-left: auto;
			margin-right: auto;

			li {
				color: $cBlackText;
				font-size: 14px;
				font-weight: 700;
				padding: 18px 28px;
				background: #eee7cc;
				border-radius: 12px;
				text-align: center;

				&:nth-child(11n + 1),
				&:nth-child(11n + 2),
				&:nth-child(11n + 3),
				&:nth-child(11n + 4),
				&:nth-child(11n + 5) {
					flex: 0 1 15.1%;
				}

				&:nth-child(11n + 6),
				&:nth-child(11n + 7),
				&:nth-child(11n + 8),
				&:nth-child(11n + 9),
				&:nth-child(11n + 10),
				&:nth-child(11n) {
					flex: 0 1 15%;
				}
			}
		}
	}

	.btn-meeting {
		display: flex;
		max-width: fit-content;
		margin-left: auto;
		margin-right: auto;
	}
}

.box-6 {
	background: #f9f5e6;

	.scontainer-content {
		@include respond-above(sm) {
			margin-top: 100px;
		}
		@include respond-below(sm) {
			text-align: center;
		}

		h3 {
			font-size: 20px;
			font-weight: 600;
			letter-spacing: 4px;
			text-transform: uppercase;
			margin-bottom: 20px;
		}

		h2 {
			font-size: 36px;
			font-weight: 700;
			margin-bottom: 24px;
		}

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

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

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

		p {
			color: rgba($cBlackText, 0.7);
			font-size: 18px;
			max-width: 500px;

			&:last-child {
				margin-bottom: 0;
			}
			strong {
				font-weight: 600;
			}
		}
	}

	.case-study-tile {
		max-width: 393px;

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

	.row {
		position: relative;
		padding-bottom: 65px;
		row-gap: 60px;

		@include respond-above(sm) {
			&::before {
				content: '';
				position: absolute;
				inset: 0;

				background-image: url('/upload/filemanager/Pages/girl-and-stars.png');
				background-repeat: no-repeat;
				background-position: right bottom;
				background-size: contain;
			}
		}
	}

	&-custom {
		.scontainer-content {
			margin: 0;
			text-align: center;

			ul {
				justify-content: center;
			}
			h2 {
				max-width: 500px;
				margin-left: auto;
				margin-right: auto;
			}
			p {
				margin-left: auto;
				margin-right: auto;
			}
		}
		.row {
			&::before {
				display: none;
			}
		}
		.case-study-tiles {
			display: flex;
			flex-direction: row;
			column-gap: 30px;
			justify-content: center;
			flex-wrap: wrap;
		}
	}
}

.box-7 {
	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-8 {
	padding-bottom: 60px;

	.scontainer-content {
		.col-wrapper {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 100%;
			row-gap: 50px;

			@include respond-above(md) {
				padding: 100px 0 50px;
			}

			.data-1 {
				@include respond-above(md) {
					max-width: 293px;
				}

				h3 {
					font-size: 24px;
					font-weight: 700;
					margin-bottom: 20px;
				}
			}
			.data-2 {
				> p {
					font-size: 18px;
					margin-bottom: 23px;

					strong {
						color: #545454;
					}
				}
			}

			.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;
						}
					}
				}
			}
		}
	}
}