// out: ../style-css/uber-vidok.css, compress: true, sourceMap: true
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Lato:wght@300;400;700&display=swap');
@import 'variables';
@import '_mixins';

.container {
	@include respond-above(xl) {
		max-width: 1300px;
	}
}

.box-1 {
	#page_hero {
		.scontainer-content {
			.left-data {
			}
			.right-data {
				background: $cBlack;

				video {
					position: absolute;
					inset: 0;
					height: 100%;
					width: 100%;
				}
			}
			@include respond-below(sm) {
				grid-template-columns: 1fr;

				.left-data {
					margin-left: auto;
					margin-right: auto;
				}
				.right-data {
					display: none;
				}
			}
		}
	}
}

.box-2 {
	padding-top: 120px;
	#scontainer-9 {
		.tiles {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			row-gap: 55px;
			column-gap: 55px;
			width: 100%;
			max-width: 970px;
			margin-left: auto;
			margin-right: auto;

			.tile {
				position: relative;
				flex: 1;
				width: 100%;
				max-width: 150px;
				text-align: center;
				min-width: 150px;

				&:not(:last-child) {
					&::before {
						content: '';
						position: absolute;
						top: 0;
						right: calc(-55px / 2);
						bottom: 0;
						width: 1px;
						background: $cBlack;
					}
				}

				img {
					margin-bottom: 30px;
					max-height: 80px;
				}
				p {
					color: $cTxtBlack;
					font-weight: 400;
					font-size: 15px;
					line-height: 22px;
					letter-spacing: 0.05em;
					text-transform: uppercase;
					margin-bottom: 0;
				}
			}
		}
	}

	@include respond-below(lg) {
		padding: 120px 0;

		.tiles {
			.tile {
				&:nth-child(4) {
					&::before {
						display: none;
					}
				}
			}
		}
	}

	@include respond-below(md) {
		#scontainer-9 {
			.tiles {
				row-gap: 60px;
				column-gap: 50px;

				.tile {
					&:not(:last-child) {
						&::before {
							right: -25px;
						}
					}
					&:nth-child(3) {
						&::before {
							display: none;
						}
					}
					&:nth-child(4) {
						&::before {
							display: block;
						}
					}
				}
			}
		}
	}

	@include respond-below(sm) {
		#scontainer-9 {
			.tiles {
				.tile {
					&:nth-child(2) {
						&::before {
							display: none;
						}
					}
					&:nth-child(3) {
						&::before {
							display: block;
						}
					}
					&:nth-child(4) {
						&::before {
							display: none;
						}
					}
				}
			}
		}
	}

	@include respond-below(xs) {
		#scontainer-9 {
			.tiles {
				row-gap: 30px;

				.tile {
					&::before {
						display: none !important;
					}
				}
			}
		}
	}
}

.box-3 {
	padding-bottom: 18px;
}

.box-3a {
	padding-top: 0;
	padding-bottom: 18px;
}

.box-3b {
	padding-top: 0;
}

#scontainer-10 {
	h2 {
		@extend .box_subtitle;
		font-size: 20px;
		margin-bottom: 25px;
	}

	p {
		font-weight: 300;
		font-size: 13px;
		line-height: 16px;
		letter-spacing: 0.07em;
	}

	.scontainer-content {
		> .row {
			> .col-lg-6:last-child {
				p {
					margin-bottom: 0;
				}
			}

			> .col-lg-6:first-child {
				padding-top: 65px;
				padding-left: 65px;
				position: relative;
				margin-left: 15px;
				max-width: calc(50% - 15px);

				&::before {
					content: '';
					display: block;
					height: 100%;
					width: 1px;
					background: #6c6d70;
					position: absolute;
					top: 0;
					left: 0;
				}

				&::after {
					content: '';
					display: block;
					height: 1px;
					width: 80%;
					background: #6c6d70;
					position: absolute;
					top: 0;
					left: 0;
				}

				@include respond-below(md) {
					padding-top: 30px;
					padding-left: 30px;
					max-width: unset;
				}
			}
		}
	}
}

#scontainer-19 {
	h2 {
		@extend .box_subtitle;
		font-size: 20px;
		margin-top: 25px;
	}

	p {
		font-weight: 300;
		font-size: 13px;
		line-height: 16px;
		letter-spacing: 0.07em;
	}

	.scontainer-content {
		> .row {
			> .col-lg-6:first-child {
				p {
					margin-bottom: 0;
				}
			}

			> .col-lg-6:last-child {
				text-align: right;
				padding-right: 50px;
				padding-bottom: 40px;
				display: flex;
				flex-direction: column;
				margin-right: 15px;
				max-width: calc(50% - 15px);

				h2 {
					margin-top: auto;
					font-weight: 600;
					margin-bottom: 0;
					padding-bottom: 0;
				}

				&::before {
					content: '';
					display: block;
					height: 100%;
					width: 1px;
					background: #6c6d70;
					position: absolute;
					bottom: 0;
					right: 0;
				}

				&::after {
					content: '';
					display: block;
					height: 1px;
					width: 80%;
					background: #6c6d70;
					position: absolute;
					bottom: 0;
					right: 0;
				}

				@include respond-below(md) {
					padding-right: 30px;
					padding-bottom: 30px;
					max-width: unset;
				}
			}
		}
	}
}

.box-4 {
	padding-top: 0;

	.container {
		> .row {
			> .col-lg-4 {
				position: relative;

				&::before {
					content: '';
					position: absolute;
					bottom: 0;
					right: 0;
					background: #f4f4f4;
					width: 100vw;
					height: 100%;
					z-index: 5;
				}
			}
		}
	}

	#scontainer-11 {
		position: relative;
		z-index: 10;
		background: #fff;
		min-height: 100%;
		margin-right: -15px;
		padding-top: 50px;

		.scontainer-content {
			display: flex;
			align-items: center;
			min-height: 100%;
		}

		.logos_slider {
			.swiper-slide {
				display: flex;
				align-items: center;
				justify-content: center;

				img {
					width: 100%;
					max-width: fit-content;
					filter: grayscale(100%);
					@include transition;

					&:hover {
						filter: grayscale(0%);
					}
				}
			}
		}
	}

	#scontainer-20 {
		text-align: right;
		position: relative;
		z-index: 10;
		padding-top: 50px;
		padding-right: 50px;
		padding-bottom: 50px;

		h2 {
			font-weight: 400;
			font-size: 20px;
			line-height: 3 0px;
			letter-spacing: 0.05em;
			margin-bottom: 0;
		}
	}

	@include respond-below(md) {
		margin-top: 125px;

		.container {
			> .row {
				> .col-lg-6 {
					&:first-child {
						&::before {
							right: auto;
							left: 50%;
							transform: translateX(-50%);
						}
					}
					&:last-child {
						&::before {
							background: transparent;
						}
					}
				}
			}
		}

		#scontainer-20 {
			padding-right: 0;

			h2 {
				text-align: center;

				br {
					display: none;
				}
			}
		}
	}

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

.box-6 {
	padding-bottom: 70px;

	.tiles {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
		gap: 27px;
		width: 100%;
		max-width: 1100px;
		margin-left: auto;
		margin-right: auto;

		.tile {
			position: relative;
			text-align: center;

			&:not(:last-child) {
				&::before {
					content: '';
					position: absolute;
					right: calc(-27px / 2);
					top: 0;
					bottom: 0;
					width: 1px;
					height: 100%;
					background: $cBlack;
				}
			}
			h3 {
				font-weight: 700;
				font-size: 48px;
				line-height: 58px;
				text-transform: uppercase;
				color: $cSand;
			}
			p {
				font-weight: 400;
				font-size: 13px;
				line-height: 20px;
				letter-spacing: 0.05em;
				text-transform: uppercase;
				margin-bottom: 0;
			}
		}

		@include respond-below(lg) {
			grid-template-columns: repeat(2, 1fr);

			.tile {
				&:nth-child(2) {
					&::before {
						display: none;
					}
				}
			}
		}
		@include respond-below(xs) {
			grid-template-columns: 1fr;

			.tile {
				&::before {
					display: none !important;
				}
			}
		}
	}
}

#scontainer-21 {
	.scontainer-content {
		h2 {
			// @extend .box_subtitle;
			font-weight: 300;
			font-size: 20px;
			line-height: 24px;
			letter-spacing: 0.07em;
			text-transform: uppercase;

			padding-bottom: 35px;
			border-bottom: 1px solid #000;
			margin-bottom: 35px;

			strong {
				font-weight: 700;
			}
		}

		> .row {
			> .col-lg-6:last-child {
				display: flex;
				flex-direction: column;
				justify-content: center;
				@include respond-above(md) {
					padding-left: 100px;
				}

				img {
					margin-top: 25px;
				}
			}
		}
	}
}

.box-icons {
	.icon-text {
		display: flex;
		column-gap: 25px;
		align-items: center;
		// justify-content: center;
		min-width: 310px;

		.icon {
			max-width: 130px;

			img {
				width: 100%;
			}
		}

		span {
			font-weight: 300;
			font-size: 20px;
			line-height: 24px;
		}
	}

	.line-top {
		display: grid;
		grid-template-columns: repeat(3, max-content);
		column-gap: 30px;
		margin-bottom: 30px;
		width: fit-content;
		margin-left: auto;
		margin-right: auto;
	}

	.line-bottom {
		display: grid;
		grid-template-columns: repeat(3, max-content);
		column-gap: 30px;
		width: fit-content;
		margin-left: auto;
		margin-right: auto;

		.first {
			justify-content: flex-end;
			// padding-right: 50px;
		}

		.second {
			justify-content: flex-start;
			// padding-left: 50px;
		}
	}

	@include respond-below(lg) {
		.icon-text {
			.icon {
				img {
					max-width: 97px;
				}
			}
		}

		.line-top {
			grid-template-columns: 1fr;
			row-gap: 30px;
			width: 100%;
			max-width: 460px;
			margin-left: auto;
			margin-right: auto;

			.icon-text {
				flex-direction: column;
				gap: 20px;
				justify-content: flex-start;
			}
		}
		.line-bottom {
			grid-template-columns: 1fr;
			row-gap: 30px;
			width: 100%;
			max-width: 460px;
			margin-left: auto;
			margin-right: auto;
			.icon-text {
				flex-direction: column;
				gap: 20px;
				justify-content: flex-start;
			}
			.first {
				justify-content: flex-start;
				padding: 0;
			}
			.second {
				justify-content: flex-start;
				padding: 0;
			}
		}
	}
	@include respond-below(xs) {
		.icon-text {
			.icon {
				img {
					max-width: 70px;
					min-width: 70px;
				}
			}
		}
		.icon-text {
			span {
				font-size: 18px;
			}
		}
	}
}

.box-einbruchschutz {
	padding-top: 75px;
	padding-bottom: 75px;

	#scontainer-24 {
		.scontainer-content {
			> .row {
				background: url('/upload/filemanager/uber-vidok/einbruchschutz-bg.png')
					no-repeat center;
				background-size: cover;
				margin: 0 10px;

				> .col-lg-6:first-child {
					background: transparentize($color: #f4f4f4, $amount: 0.1);
					padding: 65px;
					min-height: 385px;

					.col-head {
						display: flex;
						flex-direction: row;
						align-items: flex-end;
						column-gap: 35px;

						padding-bottom: 35px;
						border-bottom: 1px solid #000;
						margin-bottom: 35px;
						h2 {
							font-weight: 400;
							font-size: 20px;
							line-height: 24px;
							letter-spacing: 0.07em;
							text-transform: uppercase;
							margin-bottom: 0;
						}
					}
				}
			}
		}
	}
}

.box-realizations {
	margin-bottom: 100px;
}

.box-windows-header {
	overflow: hidden;
	margin-bottom: 95px;
	&--wrapper {
		position: relative;
		display: flex;
		align-items: center;

		width: fit-content;
		margin-left: auto;
		margin-right: auto;
		min-height: 68px;

		&::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 100%;
			height: 68px;
			background: url('/upload/filemanager/realizations/realizations-stripes.png')
				no-repeat center;
			width: 900px;
			transform: translateY(-50%);
		}
		h2 {
			font-weight: 300;
			font-size: 20px;
			line-height: 24px;
			text-align: center;
			letter-spacing: 0.07em;
			text-transform: uppercase;
			margin-bottom: 0;

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

.box-windows {
	margin-bottom: 180px;
	.container {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(335px, 1fr));
		gap: 5px;
		max-width: 1400px;

		.window-single {
			display: flex;
			flex-direction: column;

			.image {
				border: 2px solid #f4f4f4;
				border-bottom: 0;
				text-align: center;

				img {
					max-width: 100%;
				}
			}

			.text {
				flex-grow: 1;
				background: #f4f4f4;
				padding: 50px;
				font-family: 'URW Form';
				font-weight: 300;
				font-size: 16px;
				line-height: 30px;
				letter-spacing: 0.05em;

				p {
					font-size: 16px;
					line-height: 30px;
					font-weight: 300;
					letter-spacing: 0.05em;
					margin-bottom: 0;
				}

				h3 {
					font-weight: 400;
					font-size: 20px;
					line-height: 24px;
					letter-spacing: 0.15em;

					text-transform: uppercase;
					margin-bottom: 25px;
				}
			}
		}

		@include respond-below(md) {
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			gap: 40px;

			.window-single {
				.text {
					padding: 30px;
				}
			}
		}
	}
}