vidok.com/layout/style-scss/szklenie-v2.scss

@import 'variables';
@import '_mixins';

html {
	scroll-behavior: smooth;
	scroll-padding-top: 105px;
}

body {
	background: #f9f8f7;

	&.fixed {
		overflow: hidden;
	}
}
p {
	&:last-child {
		margin-bottom: 0;
	}
}
strong {
	font-weight: 700;
}

.main-page {
	padding-top: 0px;
	padding-bottom: 0;
	background: #f9f8f7;
}

.breadcrumbs {
	margin: 60px 0 10px;

	@include respond-below(sm) {
		column-gap: 16px;
	}
}

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

	.box-1--wrapper {
		height: 258px;
		background-image: url('/upload/filemanager/Pages/Szklenie/img-1.png');
		background-position: center right;
		background-repeat: no-repeat;
		background-size: contain;
		align-content: center;

		@include respond-below(lg) {
			height: 280px;
		}
		@include respond-below(md) {
			background: transparent;
		}

		h1 {
			color: $cBlack;
			font-size: 40px;
			font-family: $font3;
			font-weight: 400;
			line-height: 1.3;
			letter-spacing: -0.02em;
			margin-bottom: 36px;
		}

		.box-1--text {
			width: 100%;
			max-width: 728px;
			margin-bottom: 52px;

			p {
				color: #1d1d1e;
				font-family: $font3;
				font-weight: 300;
				font-size: 16px;
				line-height: 20px;
				letter-spacing: 1px;
			}

			@include respond-below(lg) {
				max-width: 410px;
			}
			@include respond-below(md) {
				max-width: unset;
			}
		}
		ol {
			display: flex;
			flex-direction: row;
			column-gap: 39px;
			row-gap: 24px;
			align-items: center;
			list-style: none;
			padding: 0;
			margin: 0;
			flex-wrap: wrap;

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

				span {
					color: $cBlack;
					font-family: $font3;
					font-weight: 400;
					font-size: 16px;
					line-height: 1.3;
					text-transform: uppercase;
				}
			}
		}
	}
}

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

	.box-2--wrapper {
		h2 {
			color: #13293f;
			font-family: $font3;
			font-style: normal;
			font-weight: 400;
			font-size: 30px;
			line-height: 36px;
			margin-bottom: 30px;
		}

		.tiles {
			display: grid;
			grid-template-columns: 1fr 1fr;
			column-gap: 37px;
			row-gap: 23px;

			@include respond-below(md) {
				grid-template-columns: 1fr;
			}

			.tile {
				display: flex;
				flex-direction: row;

				border-radius: 20px;
				border: 1px solid #d2cec4;
				background: #fff;
				overflow: hidden;

				@include respond-below(sm) {
					flex-direction: column-reverse;
				}

				.tile-data {
					flex: 1;
					padding: 30px 30px 30px 50px;

					@include respond-below(lg) {
						padding: 30px;
					}

					h3 {
						color: $cBlack;
						font-family: $font3;
						font-weight: 500;
						font-size: 20px;
						line-height: 1.3;
						text-transform: uppercase;
						margin-bottom: 10px;
						width: 100%;
						max-width: 150px;
					}

					p {
						font-family: $font3;
						font-style: normal;
						font-weight: 300;
						font-size: 16px;
						line-height: 1.5;
						margin: 0;
					}
				}
				.tile-img {
					width: 207px;
					min-width: 207px;
					height: 204px;

					@include respond-below(lg) {
						width: 150px;
						min-width: 150px;
					}
					@include respond-below(md) {
						width: 250px;
						min-width: 250px;
						height: 100%;
					}
					@include respond-below(sm) {
						width: 100%;
						max-width: unset;
						height: 200px;
					}

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
			}
		}
	}
}

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

	.box-3--wrapper {
		.box-3--head {
			text-align: center;
			padding-bottom: 50px;

			h2 {
				color: #13293f;
				font-family: $font3;
				font-style: normal;
				font-weight: 300;
				font-size: 30px;
				line-height: 36px;
				margin-bottom: 14px;

				strong {
					font-weight: 500;
				}
			}

			ol.tabs-nav {
				padding: 0;
				margin: 0;
				display: flex;
				flex-direction: row;
				justify-content: center;
				gap: 29px;

				@include respond-below(sm) {
					flex-direction: column;
				}

				li.tab-item {
					display: flex;
					flex-direction: row;
					align-items: center;
					column-gap: 20px;
					box-sizing: border-box;
					background: #ffffff;
					border: 1px solid #d2cec4;
					box-shadow: 0px 3px 5px 2px rgba(0, 0, 0, 0.15);
					border-radius: 20px;
					width: 306px;
					height: 84px;
					padding: 10px 10px 10px 18px;
					cursor: pointer;

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

					&.active {
						.tab-icon {
							transform: rotate(180deg);
						}
					}

					.tab-img {
						height: 49px;

						img {
							height: 49px;
							object-fit: contain;
						}
					}
					.tab-title {
						font-family: $font3;
						font-weight: 500;
						font-size: 20px;
						line-height: 1.3;
						text-transform: uppercase;
						color: #000000;
						flex: 1;
						text-align: left;
					}
					.tab-icon {
						transition: all 250ms ease-in-out;
					}
				}
			}
		}
		.box-3--body {
			text-align: center;

			img {
				width: 100%;
				max-width: fit-content;
			}
		}
	}
}

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

	.box-4--wrapper {
		height: 177px;
		background-image: url('/upload/filemanager/Pages/Szklenie/image-696.png');
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		border-radius: 20px;
		padding: 30px 20% 30px 30px;

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 50px;

		@include respond-below(md) {
			padding: 30px;
		}
		@include respond-below(sm) {
			flex-direction: column;
			align-items: flex-start;
			row-gap: 30px;
			height: 100%;
		}

		h2 {
			color: $cBlack;
			font-family: $font3;
			font-weight: 300;
			font-size: 30px;
			line-height: 1.4;
			width: 100%;
			max-width: 310px;
			margin-bottom: 0;

			strong {
				font-weight: 600;
			}
		}
		a.btn {
			display: inline-flex;
			flex-direction: row;
			align-items: center;
			gap: 18px;
			padding: 18px 27px 18px 27px;
			margin: 0;
			background: #1e2832;
			border-radius: 6px;
			color: #ffffff;
			font-size: 16px;
			font-family: $font3;
			font-weight: 700;
			letter-spacing: 1px;
			text-transform: uppercase;
			line-height: 1;
			box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
			width: fit-content !important;
			height: auto;
			border: none;
			outline: none;
			cursor: pointer;
			// &:active {
			// 	background: #f0e875;
			// }

			img {
				width: 20px;
				height: 20px;
				object-fit: contain;
			}
		}
	}
}