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

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

strong {
	font-weight: 700;
}

.main-page {
	padding-top: 0px;
}

.breadcrumbs {
	margin: 14px 0;
}

.box-1 {
	background-image: url('/upload/filemanager/Pages/Promocje/Drzwi-aluminiowe/img-1.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 434px;
	border-bottom: 10px solid #adbdcd;
	align-content: center;

	@include respond-below(sm) {
		min-height: 315px;
	}

	.box-1--wrapper {
		.box-title {
			position: relative;
			margin-bottom: 80px;

			@include respond-below(sm) {
				margin-bottom: 30px;
			}

			img {
				position: absolute;

				width: 100%;
				max-width: 135px;
				bottom: 0;
				transform: translateX(-70%);

				@include respond-below(md) {
					max-width: 105px;
				}
				@include respond-below(sm) {
					max-width: 80px;
				}
			}

			h1 {
				position: relative;
				color: $cWhite;
				font-size: 50px;
				font-weight: 400;
				line-height: 1;
				letter-spacing: 2px;
				text-transform: uppercase;

				strong {
					font-size: 70px;
					font-weight: 700;
					display: block;
				}

				@include respond-below(md) {
					font-size: 40px;

					strong {
						font-size: 50px;
					}
				}

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

					strong {
						font-size: 38px;
					}
				}
			}
		}
		p {
			margin: 0;

			color: $cWhite;
			font-size: 35px;
			font-weight: 400;
			line-height: 1;
			letter-spacing: 2px;
			text-transform: uppercase;

			@include respond-below(md) {
				font-size: 25px;
			}
			@include respond-below(sm) {
				font-size: 16px;
			}

			strong {
				display: inline-block;

				padding: 12px;
				background: #6488ab;
				font-weight: 700;
				border-radius: 10px;

				@include respond-below(sm) {
					padding: 8px;
				}
			}
		}
	}
}

.box-2 {
	padding-top: 80px;
	padding-bottom: 80px;

	h2 {
		position: relative;
		color: $cTxtBlack;
		font-size: 40px;
		font-weight: 400;
		line-height: 1.3;
		letter-spacing: 2px;
		text-transform: uppercase;
		text-align: center;
		margin-bottom: 30px;

		strong {
			font-weight: 700;

			@include respond-above(md) {
				display: block;
			}
		}

		@include respond-below(md) {
			font-size: 28px;
		}
	}

	p {
		color: $cTxtBlack;
		font-size: 20px;
		font-weight: 300;
		line-height: 1;
		letter-spacing: 2px;
		text-align: center;

		@include respond-below(md) {
			font-size: 18px;
		}
	}
}

.box-3 {
	overflow: hidden;

	.c-row {
		&-1 {
			display: grid;
			// grid-template-columns: minmax(300px, 530px) 1fr;
			grid-template-columns: 530px 1fr;
			column-gap: 80px;
			margin-bottom: 80px;

			@include respond-below(xl) {
				grid-template-columns: 500px 1fr;
				column-gap: 60px;
			}
			@include respond-below(lg) {
				grid-template-columns: 400px 1fr;
			}

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

			.c-col {
				&-1 {
					position: relative;

					// @include respond-below(md) {
					// 	order: 2;
					// }
					.product-head {
						position: relative;
						width: fit-content;

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

						span.tag {
							position: relative;
							color: $cWhite;
							font-size: 30px;
							font-weight: 700;
							letter-spacing: 1px;
							line-height: 1;
							text-transform: uppercase;

							display: inline-block;
							background-color: #ff0000;
							border-top-right-radius: 5px;
							border-bottom-right-radius: 5px;
							padding: 10px 10px 5px 10px;
							margin-left: -25px;

							&::before {
								content: '';
								position: absolute;
								bottom: 0;
								left: 0;
								width: 25px;
								height: 25px;
								transform: translateY(100%);
								border-top: 13px solid #9f2424;
								border-right: 13px solid #9f2424;
								border-left: 13px solid transparent;
								border-bottom: 13px solid transparent;
							}

							@include respond-below(lg) {
								font-size: 20px;
								margin-left: -20px;

								&::before {
									width: 20px;
									height: 20px;
									border-width: 10px;
								}
							}
						}
						.price {
							background: #eef3f9;
							border-top-right-radius: 5px;
							border-bottom-right-radius: 5px;

							display: flex;
							flex-direction: row;
							align-items: end;
							gap: 40px;
							width: fit-content;
							padding: 20px 20px 10px 100px;
							margin-top: -25px;

							@include respond-below(lg) {
								gap: 30px;
								padding: 20px 20px 10px 40px;
							}

							span {
								color: $cTxtBlack;
								font-size: 20px;
								font-family: $font3;
								font-weight: 400;
								letter-spacing: 1px;
								line-height: 1;
								padding-bottom: 10px;

								@include respond-below(lg) {
									font-size: 18px;
								}
							}
							p {
								color: $cTxtBlack;
								font-size: 55px;
								font-family: $font3;
								font-weight: 700;
								letter-spacing: 2px;
								line-height: 1;
								margin: 0;

								@include respond-below(lg) {
									font-size: 45px;
								}
							}
						}
						.old-price {
							position: relative;
							display: block;
							text-align: right;

							color: $cTxtBlack;
							font-size: 35px;
							font-family: $font3;
							font-weight: 700;
							letter-spacing: 1px;
							line-height: 1;
							padding: 15px 70px 10px;

							&::before {
								content: '';
								position: absolute;
								top: 50%;
								right: 60px;
								width: 150px;
								height: 2px;
								background: #ff0000;
								transform: rotate(-10deg) translateY(-50%);
							}

							@include respond-below(lg) {
								font-size: 30px;

								&::before {
									width: 130px;
								}
							}
						}
					}
					.product-desc {
						h2 {
							color: $cTxtBlack;
							font-size: 40px;
							font-family: $font3;
							font-weight: 700;
							letter-spacing: 1px;
							line-height: 1;
							margin-bottom: 10px;

							@include respond-below(lg) {
								font-size: 30px;
							}
						}
						ul {
							list-style: none;
							padding: 0;
							margin: 0 0 40px 0;

							li {
								color: $cTxtBlack;
								font-size: 20px;
								font-family: $font3;
								font-weight: 400;
								// letter-spacing: 1px;
								line-height: 1.5;

								@include respond-below(lg) {
									font-size: 18px;
								}

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

								strong {
									font-weight: 700;
								}
							}
						}
						.c-btn {
							display: inline-flex;
							flex-direction: row;
							align-items: center;
							gap: 10px;
							padding: 17px 20px 13px 38px;
							background: #fff246;
							border-radius: 6px;

							color: #1d1d1e;
							font-size: 13px;
							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);

							img {
								padding-bottom: 6px;
								width: 16px;
							}
						}
					}
				}
				&-2 {
					position: relative;
					display: flex;
					flex-direction: row;
					column-gap: 40px;
					padding-left: 30px;
					height: fit-content;

					&::before {
						content: '';
						position: absolute;
						left: 0;
						top: 40px;
						height: 615px;
						width: 100vw;
						background: linear-gradient(
							325.18deg,
							#c4d1e2 13.72%,
							#7086a4 79.5%
						);
						border-top-left-radius: 100px;
						border-bottom-left-radius: 100px;

						@include respond-between(md, lg) {
							height: 400px;
						}
						@include respond-below(md) {
							height: 475px;
							border-top-left-radius: 50px;
							border-bottom-left-radius: 50px;
						}
					}

					// @include respond-below(md) {
					// 	order: 1;
					// }

					.c-desk {
						position: relative;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						gap: 40px;

						.c-desk-text {
							// text-align: center;

							// h2 {
							// 	color: $cWhite;
							// 	font-size: 135px;
							// 	font-family: $font3;
							// 	font-weight: 700;
							// 	line-height: 1;
							// 	margin-bottom: -10px;
							// 	text-shadow: -5px 5px 0px rgba(90, 107, 131, 1);
							// }

							// p {
							// 	color: $cWhite;
							// 	font-size: 35px;
							// 	font-family: $font3;
							// 	font-weight: 700;
							// 	line-height: 1;
							// 	margin: 0;
							// }

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

								@include respond-between(md, lg) {
									max-width: 100px;
								}
								@include respond-below(md) {
									max-width: 130px;
								}
							}
						}

						a {
							display: inline-flex;
							flex-direction: row;
							align-items: center;
							gap: 10px;
							padding: 13px 10px 10px 10px;
							background: #c4d1e2;
							border-radius: 6px;

							color: #1d1d1e;
							font-size: 13px;
							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);

							img {
								padding-bottom: 6px;
								width: 16px;
							}

							@include respond-between(md, lg) {
								padding: 17px 15px 13px 28px;
								max-width: 150px;
							}
						}
					}

					.product-img {
						position: relative;
						height: fit-content;

						.product-img-1 {
							// margin-bottom: -170px;
							width: 100%;
							max-width: fit-content;
						}
						.product-img-2 {
							position: absolute;
							top: 100%;
							left: 0;
							right: 0;

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

		&-2 {
			position: relative;
			display: grid;
			grid-template-columns: 1fr 1fr;
			column-gap: 60px;
			align-items: center;
			padding-bottom: 50px;
			border-bottom: 1px solid #000000;

			.c-col {
				&-1 {
					ul {
						padding: 0;
						margin: 0;
						list-style: none;

						li {
							color: $cTxtBlack;
							font-size: 24px;
							font-weight: 300;
							font-family: $font3;
							line-height: 1.5;

							@include respond-below(md) {
								font-size: 20px;
							}
							@include respond-below(sm) {
								font-size: 16px;
							}
						}
					}
				}
				&-2 {
					h3 {
						text-align: right;
						color: $cTxtBlack;
						font-size: 35px;
						font-family: $font3;
						letter-spacing: 2px;
						text-transform: uppercase;

						@include respond-below(md) {
							font-size: 25px;
						}
						@include respond-below(sm) {
							font-size: 16px;
						}
					}
				}
			}
		}
	}
}

.box-4 {
	padding-top: 80px;
	padding-bottom: 80px;

	h2 {
		position: relative;
		color: $cTxtBlack;
		font-size: 40px;
		font-weight: 400;
		line-height: 1.3;
		letter-spacing: 2px;
		text-transform: uppercase;
		text-align: center;
		margin-bottom: 30px;

		strong {
			font-weight: 700;
		}

		@include respond-below(md) {
			font-size: 28px;
		}
		@include respond-below(sm) {
			font-size: 20px;
		}
	}

	p {
		color: $cTxtBlack;
		font-size: 20px;
		font-weight: 300;
		line-height: 1;
		letter-spacing: 2px;
		text-align: center;

		@include respond-below(md) {
			font-size: 18px;
		}
		@include respond-below(sm) {
			font-size: 16px;
		}
		strong {
			font-weight: 700;
		}
		span {
			font-size: 32px;

			@include respond-below(md) {
				font-size: 24px;
			}
			@include respond-below(sm) {
				font-size: 18px;
			}
		}
	}
}

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

	.c-row {
		&-1 {
			display: grid;
			grid-template-columns: 400px 1fr;
			column-gap: 120px;

			@include respond-below(lg) {
				grid-template-columns: 240px 1fr;
				column-gap: 60px;
			}

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

			.c-col {
				&-1 {
					text-align: right;

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

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

						@include respond-below(sm) {
							max-width: 250px;
						}
					}
				}
				&-2 {
					.product-card {
						display: flex;
						flex-direction: row;
						align-items: center;

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

						.product-img {
							img {
								@include respond-below(sm) {
									width: 100%;
									max-width: fit-content;
								}
								@include respond-below(xs) {
									max-width: 200px;
								}
							}
						}

						.product-desc {
							padding: 70px 40px 40px 30px;
							background: linear-gradient(
								248.26deg,
								#c4d1e2 12.76%,
								#7086a4 68.35%
							);
							border-top-right-radius: 50px;
							border-bottom-right-radius: 50px;

							@include respond-below(sm) {
								padding: 40px 40px 40px 30px;
							}
							@include respond-below(xs) {
								border-radius: 25px;
								padding: 30px;
								text-align: center;
							}

							h3 {
								color: $cWhite;
								font-family: $font3;
								font-weight: 700;
								font-size: 35px;
								line-height: 50px;
								letter-spacing: 0;
								text-transform: uppercase;

								@include respond-below(sm) {
									font-size: 26px;
									line-height: 1;
								}
							}
							h4 {
								color: $cWhite;
								font-family: $font3;
								font-weight: 500;
								font-size: 24px;
								line-height: 130%;
								letter-spacing: 0;
								text-transform: uppercase;

								@include respond-below(sm) {
									font-size: 18px;
									line-height: 1;
								}
							}
							p {
								color: $cWhite;
								font-family: $font3;
								font-weight: 500;
								font-size: 13px;
								line-height: 130%;
								letter-spacing: 0;
								text-transform: uppercase;
							}
							a {
								display: inline-flex;
								flex-direction: row;
								align-items: center;
								gap: 10px;
								padding: 13px 10px 10px 10px;
								background: #c4d1e2;
								border-radius: 6px;

								color: #1d1d1e;
								font-size: 13px;
								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);

								img {
									padding-bottom: 6px;
									width: 16px;
								}

								@include respond-between(md, lg) {
									padding: 17px 15px 13px 28px;
									max-width: 150px;
								}
							}
						}
					}
				}
			}
		}
	}
}

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

	.c-row {
		&-1 {
			.c-col {
				&-1 {
					.feedback-tile {
						padding: 47px 40px;
						border-top-left-radius: 50px;
						border-bottom-right-radius: 50px;
						background: $cWhite;
						box-shadow: 8px 8px 20px -5px rgba(0, 0, 0, 0.1);

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

							display: flex;
							flex-direction: row;
							align-items: center;
							gap: 6px;

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

						p {
							color: #1d1d1e;
							font-size: 18px;
							font-family: $font3;
							font-weight: 300;
							line-height: 1.5;
							margin-bottom: 40px;
						}

						span.author {
							color: #1d1d1e;
							font-size: 14px;
							font-family: $font3;
							font-weight: 300;
							line-height: 1.5;
							letter-spacing: 19%;
							text-transform: uppercase;
						}
					}
				}
			}
		}
	}
}

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

	h2 {
		position: relative;
		color: $cTxtBlack;
		font-size: 40px;
		font-weight: 400;
		line-height: 1.3;
		letter-spacing: 2px;
		text-transform: uppercase;
		text-align: center;

		strong {
			font-weight: 700;
		}

		@include respond-below(md) {
			font-size: 28px;
		}
		@include respond-below(sm) {
			font-size: 20px;
		}
	}
}

.box-8 {
	.c-row {
		&-1 {
			.c-col {
				&-1 {
					ol {
						display: flex;
						flex-direction: row;
						gap: 45px;

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

						li {
							img {
								width: 100%;
							}
						}
					}
				}
			}
		}
	}
}