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

$fURWForm: 'URW Form', sans-serif;

#page-90 {
	.subpage-content2 {
		.container {
			@include respond-above(xxl) {
				max-width: 1530px;
			}
		}
	}
}

#scontainer-132 {
	margin-bottom: 120px;

	h1 {
		color: #1d1d1e;
		font-size: 50px;
		font-weight: 200;
		font-family: 'URW Form', sans-serif;
		letter-spacing: 2px;
		text-transform: uppercase;
		margin-bottom: 45px;
		padding-bottom: 45px;
		border-bottom: 1px solid #000;

		width: 100%;
		max-width: 500px;

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

	p {
		width: 100%;
		max-width: 580px;
	}
}

#scontainer-133 {
	.row {
		margin-bottom: 48px;

		&-8 {
			margin-bottom: 0;

			p {
				font-size: 16px;
				font-weight: 300;
				font-family: $fURWForm;
				text-align: center;
			}
		}
	}

	h2 {
		color: $cBlack;
		font-size: 34px;
		font-weight: 300;
		font-family: $fURWForm;
		letter-spacing: 2px;
		text-align: center;
		margin-bottom: 48px;

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

	h3 {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		column-gap: 30px;
		row-gap: 20px;

		color: $cBlack;
		font-size: 24px;
		font-weight: 300;
		font-family: $fURWForm;
		letter-spacing: 2px;
		text-align: center;
		margin-bottom: 35px;

		span {
			color: $cWhite;
			font-family: $fURWForm;
			font-size: 16px;
			letter-spacing: 0;
			background-color: $cBlack;
			padding: 10px;
		}

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

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

		display: flex;
		flex-direction: row;
		justify-content: center;
		gap: 25px;
		flex-wrap: wrap;

		li {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 12px;
			width: 100%;
			max-width: 111px;

			p {
				font-size: 14px;
				font-weight: 300;
				font-family: $fURWForm;
				margin-bottom: 0;
				text-align: center;
			}
		}
	}
}

.box-separator {
	margin-top: 120px;
	margin-bottom: 120px;
	height: 1px;
	width: 100%;
	background-color: #1d1d1e;
}

#scontainer-134 {
	margin-bottom: 120px;
	text-align: center;

	h2 {
		color: $cBlack;
		font-size: 34px;
		font-weight: 300;
		font-family: $fURWForm;
		letter-spacing: 2px;
		text-align: center;
		margin-bottom: 48px;
		text-transform: uppercase;

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

	p {
		color: $cBlack;
		font-size: 20px;
		font-weight: 300;
		font-family: $fURWForm;
		letter-spacing: 2px;
		text-align: center;
		margin-bottom: 48px;
		text-transform: uppercase;
	}

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

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

		li {
			&:nth-child(1) {
				a {
					color: #fff;
					background: #1d1d1e;
				}
			}
			&:nth-child(2) {
				a {
					color: #1d1d1e;
					background: #ffed00;
				}
			}
			a {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 10px;
				padding: 18px 36px;

				font-size: 14px;
				font-weight: 700;
				letter-spacing: 1px;
				font-family: $fURWForm;
				text-transform: uppercase;
			}
		}
	}
}

#scontainer-135 {
	background-image: url('/upload/filemanager/Pages/kolorystyka-drzwi/Rectangle-45.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	padding-top: 110px;
	padding-bottom: 110px;

	h2 {
		color: #fff;
		font-size: 34px;
		font-weight: 300;
		letter-spacing: 2px;
		text-transform: uppercase;
		margin-bottom: 50px;

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

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

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

			&.active {
				.faq-title {
					&:before {
						transform: rotate(90deg) translateX(-50%) scale(1);
					}
				}
			}

			.faq-title {
				position: relative;
				color: #fff;
				font-size: 24px;
				font-weight: 300;
				letter-spacing: 2px;
				line-height: 1;
				font-family: $fURWForm;
				text-transform: uppercase;
				padding: 16px 30px 15px 30px;
				border: 1px solid #fff;
				cursor: pointer;

				&:before {
					content: '\A';
					border-style: solid;
					border-width: 8px 12px 8px 0;
					border-color: transparent #fff transparent transparent;
					position: absolute;
					right: 20px;
					top: 50%;
					transform: rotate(90deg) translateX(-50%) scale(-1);
					transition: transform 250ms ease-in-out;
				}

				@include respond-below(sm) {
					font-size: 16px;
				}
			}
			.faq-data {
				display: none;
				padding-top: 30px;
				padding-bottom: 10px;

				p {
					color: #fff;
					font-size: 16px;
					font-weight: 300;
					font-family: $fURWForm;
				}
			}
		}
	}
}

#scontainer-136 {
	margin-top: 120px;
	margin-bottom: 100px;

	h2 {
		color: $cBlack;
		font-size: 34px;
		font-weight: 300;
		font-family: $fURWForm;
		letter-spacing: 2px;
		margin-bottom: 48px;
		text-transform: uppercase;

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

	p {
		color: $cBlack;
		font-size: 16px;
		font-weight: 300;
		font-family: $fURWForm;
		margin-bottom: 48px;

		strong {
			font-weight: 700;
		}
	}

	a {
		color: $cBlack;
		font-size: 16px;
		font-weight: 700;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		text-decoration: underline;
	}
}

#newsletter-box {
	position: relative;
	margin-bottom: 90px;

	@include respond-below(md) {
		img {
			width: 100%;
			max-width: fit-content;
		}
	}

	.newsletter-data {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 100%;
		max-width: 830px;

		padding: 80px;
		background: #181c1d;
		border-radius: 50px 0 50px 0;

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

		h2 {
			color: #fff;
			font-size: 34px;
			font-weight: 300;
			font-family: $fURWForm;
			letter-spacing: 2px;
			margin-bottom: 48px;
			text-transform: uppercase;

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

		p {
			color: #fff;
			font-size: 16px;
			font-weight: 300;
			font-family: $fURWForm;
			margin-bottom: 48px;

			strong {
				font-weight: 700;
			}
		}

		.form-inputs {
			display: flex;
			flex-direction: row;
			align-items: center;

			@include respond-below(sm) {
				flex-direction: column;
			}
		}
		input {
			&.form-control {
				background-color: #fff;
				border-radius: 0;
				border: none;
				padding: 24px 20px;
				height: 57px;
			}
		}
		#newsletter-signin {
			border: 0;
			border-radius: 0;
			padding: 18px 36px 18px 36px;
			background: #ffed00;

			color: #000;
			font-size: 14px;
			font-weight: 700;
			letter-spacing: 1px;
			text-transform: uppercase;

			display: flex;
			align-items: center;
			gap: 10px;

			@include respond-below(sm) {
				width: 100%;
				align-items: center;
				justify-content: center;
			}
		}

		.checkboxs {
			display: flex;
			flex-direction: row;
			gap: 17px;
			max-width: 470px;

			color: #fff;
			font-size: 12px;
			font-weight: 300;
			font-family: $fURWForm;
			margin-bottom: 0;
		}

		#agreement {
			position: relative;
			appearance: none;
			width: 18px;
			min-width: 18px;
			height: 18px;
			border: 2px solid #fff;
			border-radius: 2px;
			overflow: hidden;
			cursor: pointer;

			&::before {
				content: '';
				position: absolute;
				top: -14px;
				left: 24px;
				width: 8px;
				height: 2px;
				background: #ffed00;
				transform: rotate(-45deg);
				transition: all 250ms ease-in-out;
			}
			&::after {
				content: '';
				position: absolute;
				top: -13px;
				left: -17px;
				width: 4px;
				height: 2px;
				background: #ffed00;
				transform: rotate(45deg);
				transition: all 250ms ease-in-out;
			}

			&:checked {
				&::before {
					top: 6px;
					left: 4px;
				}
				&::after {
					top: 7px;
					left: 3px;
				}
			}
		}

		@include respond-below(md) {
			position: relative;
			transform: none;
			top: 0;
			width: calc(100% - 50px);
			margin: -70px auto 0 auto;
		}
	}
}