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

.breadcrumbs {
	margin-bottom: 40px;
}

.container {
	&-big {
		@media (min-width: 1500px) {
			max-width: 1480px;
		}
	}
}

.box-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: relative;
	gap: 15px;

	.box-title-tag {
		position: relative;

		color: #fff;
		font-size: 16px;
		font-family: $font3;
		font-weight: 300;
		line-height: 1;
		text-transform: uppercase;

		display: inline-block;
		padding: 7px 10px 5px;
		background: #000;
	}
	.box-title-text {
		color: #3f3f3f;
		font-size: 35px;
		font-family: $fLeagueSpartan;
		font-weight: 100;
		margin-bottom: 0;
		width: 100%;

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

		strong {
			font-weight: 700;
		}

		.box-title-separator {
			display: inline-block;
			width: 20px;
			min-width: 20px;
			height: 20px;
			background: $cYellow;
		}

		&::after {
			content: '';
			height: 1px;
			background: #878787;
			display: block;
			flex: 1;
		}
	}
}

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

	.row {
		&-1 {
			margin-bottom: 50px;

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

		&-2 {
			.box-separator {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;

				&::before {
					content: '';
					position: absolute;
					top: 50%;
					left: 50%;
					width: calc(100% - 42px * 2);
					height: 1px;
					background: #878787;
					transform: translate(-50%, -50%);
				}

				.img-wrapper {
					background: #fff;
					padding: 0 15px;
					z-index: 1;

					.separator-img {
						width: 64px;
						height: 64px;
						max-width: 64px;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						border-radius: 100%;
						box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);

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

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

	.row {
		max-width: 1240px;
		margin-left: auto;
		margin-right: auto;
	}

	.col-left {
		h1 {
			color: $cBlack;
			font-size: 85px;
			font-family: $font3;
			font-weight: 500;
			text-align: right;
			margin-bottom: 40px;
		}
		ul {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
			gap: 6px;
			flex-wrap: nowrap;
			margin-bottom: 15px;

			li {
				img {
				}
			}
		}

		p {
			color: $cBlack;
			font-size: 20px;
			font-family: $font3;
			font-weight: 300;
			text-align: right;
			margin-bottom: 0;
		}
	}

	.col-right {
		p {
			color: $cBlack;
			font-size: 16px;
			font-family: $font3;
			font-weight: 400;
			line-height: 2;
			margin-bottom: 0;
		}
	}
}

.box-3 {
	padding: 60px 0;
	margin-bottom: 80px;
	background: #1d1d1b;
	box-shadow: 0 7px 4px rgba(0, 0, 0, 0.25);

	.row {
		> div {
			// display: flex;
			// flex-direction: row;
		}
	}

	img {
		margin-bottom: 20px;
	}

	h3 {
		color: #fff;
		font-size: 20px;
		margin-bottom: 10px;
		font-family: $font3;
		letter-spacing: 2px;
		text-transform: uppercase;
	}

	p {
		color: #fff;
		font-size: 16px;
		font-family: $font3;
		font-weight: 300;
		margin-bottom: 0;
	}
}

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

	.row {
		&-1 {
			margin-bottom: 90px;
		}

		&-2 {
			.products-nav-bar {
				padding: 0;
				margin: 0;
				list-style: none;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				column-gap: 60px;
				row-gap: 20px;

				.products-nav-bar-item {
					&.active {
						a {
							height: 540px;
							width: 330px;
							border-width: 2px;
							box-shadow: 4px 3px 22px 3px rgba(0, 0, 0, 0.25);
						}

						h3 {
							position: relative;
							font-size: 25px;
							text-align: left;
							padding-left: 20px;

							&::before {
								content: '';
								position: absolute;
								left: 0;
								top: 0;
								bottom: 0;
								width: 10px;
								height: 100%;
								background: $cYellow;
							}
						}
					}

					a {
						width: 290px;
						height: 460px;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						gap: 40px;
						background: #fff;
						border: 1px solid #000;
						box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
						border-radius: 20px;
						cursor: pointer;
						transition: all 0.3s ease-in-out;

						padding: 40px;
					}

					h3 {
						color: #1d1d1b;
						font-family: $font3;
						font-style: 22px;
						font-weight: 900;
						letter-spacing: 2px;
						margin: 0;
						text-align: center;
						text-transform: uppercase;
					}
				}
			}
		}
	}
}

.box-5 {
	margin-bottom: 130px;
	overflow: hidden;

	.c-tabs-menu {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 60px;
		padding: 21px 0;

		&::after {
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			background: #f4f4f4;
			width: 100svw;
			z-index: -1;
		}

		h3 {
			color: #1d1d1b;
			font-size: 38px;
			font-family: $fLeagueSpartan;
			font-weight: 200;
			letter-spacing: 2px;
			margin: 0;
			padding-top: 5px;
			line-height: 1;
		}

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

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

			li {
				&.active {
					a {
						color: #fff;
						background: #1d1d1e;
						border-color: #1d1d1e;
					}
				}

				a {
					color: #000;
					font-size: 14px;
					font-family: $font3;
					font-weight: 700;
					letter-spacing: 2px;
					text-transform: uppercase;

					display: block;
					padding: 18px 36px;
					border: 1px solid #000;
					border-radius: 5px;
				}
			}
		}
	}
}

.box-6 {
	.box-data {
		display: none;

		// &#rolety-beclever {
		.row {
			&-1 {
				margin-bottom: 70px;
			}

			&-2 {
				margin-bottom: 130px;

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

					strong {
						font-weight: 700;
					}
				}

				ul {
					display: flex;
					flex-direction: column;
					row-gap: 15px;
					width: 100%;
					max-width: 580px;
					padding-left: 20px;
					margin-bottom: 0;
					margin-top: 30px;

					li {
						color: #1d1d1e;
						font-size: 20px;
						font-family: $font3;
						font-weight: 300;
						line-height: 1.5;
					}
				}
			}

			&-3 {
				margin-bottom: 90px;
			}

			&-4 {
				margin-bottom: 100px;
			}

			&-5 {
				margin-bottom: 70px;
			}

			&-6 {
				margin-bottom: 100px;

				p {
					color: #1d1d1e;
					font-size: 16px;
					font-family: $font3;
					font-weight: 400;
					line-height: 1.5;
					letter-spacing: 2px;

					strong {
						font-weight: 600;
					}
				}

				ul {
					display: flex;
					flex-direction: column;
					row-gap: 15px;
					width: 100%;
					max-width: 580px;
					padding-left: 20px;
					margin-bottom: 0;
					margin-top: 30px;

					li {
						color: #1d1d1e;
						font-size: 16px;
						font-family: $font3;
						font-weight: 300;
						line-height: 1.5;
					}
				}
			}
		}
		// }
	}
}

.box-7 {
	margin-bottom: 120px;
}

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

	ul {
		display: flex;
		flex-direction: row;
		gap: 50px;
		justify-content: space-between;
		flex-wrap: wrap;

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

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

		li {
			flex-basis: 272px;
			display: flex;
			flex-direction: column;
			gap: 20px;

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

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

.box-9 {
	margin-bottom: 100px;
	padding: 60px 0;
	background: #f4f4f4;

	.row {
		&-1 {
			margin-bottom: 60px;
		}

		&-2 {
			.box-tiles {
				display: grid;
				grid-template-columns: minmax(300px, 660px) minmax(300px, 550px);
				gap: 30px;

				.tile {
					p {
						color: #1d1d1e;
						font-size: 16px;
						font-family: $font3;
						font-weight: 300;
						line-height: 1.5;
						margin-bottom: 0;
						text-align: justify;

						strong {
							font-weight: 500;
						}
					}
					img {
						width: 100%;
						max-width: fit-content;
					}

					&-1 {
					}
				}
			}
		}
	}
}

.box-10 {
	margin-bottom: 110px;

	.row {
		padding-bottom: 110px;
		border-bottom: 1px solid #1d1d1e;
	}

	h2 {
		color: #1d1d1e;
		font-size: 34px;
		font-family: $font3;
		font-weight: 300;
		letter-spacing: 2px;
		text-transform: uppercase;
		text-align: center;
		margin-bottom: 48px;
	}

	p {
		color: #1d1d1e;
		font-size: 16px;
		font-family: $font3;
		line-height: 1.5;
		text-align: center;
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 0;
	}
}

.box-11 {
	margin-bottom: 180px;

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

			.box-tag {
				position: absolute;
				top: -30px;
				left: 50%;
				padding: 64px 120px;
				border-radius: 200px;
				box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25),
					2px -4px 7px rgba(0, 0, 0, 0.25);
				background: rgba(#fff, 0.43);
				backdrop-filter: blur(7px);
				transform: translateX(-50%);

				h4 {
					color: #1d1d1b;
					font-size: 43px;
					font-family: $font3;
					font-weight: 400;
					letter-spacing: 5px;
					text-transform: uppercase;
					text-align: center;
					line-height: 1;
					margin-bottom: 20;
				}
				h5 {
					display: flex;
					flex-direction: row;
					align-items: center;
					gap: 10px;

					position: relative;
					color: #1d1d1b;
					font-size: 27px;
					font-family: $font3;
					font-weight: 400;
					letter-spacing: 5px;
					text-transform: uppercase;
					text-align: center;
					line-height: 1;
					margin-bottom: 0;

					&::before {
						content: '';
						display: inline-block;
						width: 30px;
						height: 1px;
						background: #1d1d1e;
					}

					&::after {
						content: '';
						display: inline-block;
						width: 30px;
						height: 1px;
						background: #1d1d1e;
					}
				}
			}
		}

		&-2 {
			display: flex;
			flex-direction: row;
			column-gap: 120px;
			align-items: flex-end;

			.c-col-1 {
				width: 100%;
				max-width: 530px;

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

			.c-col-2 {
				flex: 1;
				max-width: 620px;

				h2 {
					color: #000000;
					font-size: 34px;
					font-family: $font3;
					font-weight: 300;
					line-height: 1.3;
					letter-spacing: 2px;
					text-transform: uppercase;
					margin-bottom: 40px;
				}

				p {
					color: #000;
					font-size: 20px;
					font-family: $font3;
					font-weight: 300;
					line-height: 1.3;
					margin-bottom: 20px;
				}

				.buttons {
					display: flex;
					flex-direction: row;
					align-items: center;
					gap: 14px;
					margin-bottom: 50px;

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

						font-size: 14px;
						font-family: $font3;
						font-weight: 700;
						letter-spacing: 2px;
						text-transform: uppercase;

						padding: 18px 36px;
						border-radius: 0;

						img {
							margin-bottom: 4px;
						}

						&-1 {
							color: #ffffff;
							background: #1d1d1e;
						}

						&-2 {
							color: #1d1d1b;
							background: #fff246;
						}
					}
				}
			}
		}
	}
}

.box-12 {
	padding: 90px 0 22px;
	background: #f5f5f5;
	overflow: hidden;

	.row {
		&-1 {
			margin-bottom: 48px;

			.col-12 {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
			}

			h3 {
				color: #1d1d1b;
				font-size: 34px;
				font-family: $font3;
				font-weight: 300;
				letter-spacing: 2px;
				margin-bottom: 0;
				text-transform: uppercase;
			}

			.opinie-swiper-buttons {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 30px;

				> div {
					cursor: pointer;
				}
			}
		}
		&-2 {
			.opinie-swiper {
				overflow: initial;

				.swiper-slide {
					display: flex;
					flex-direction: column;
					padding: 47px 40px;
					row-gap: 48px;
					border-top-left-radius: 50px;
					border-bottom-right-radius: 50px;
					background: #fff;

					.slide-head {
						ul {
							padding: 0;
							margin: 0;
							list-style: none;

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

					.slide-body {
						p {
							color: #1d1d1b;
							font-size: 20px;
							font-family: $font3;
							font-weight: 300;
							line-height: 1.5;

							&:last-child {
								margin-bottom: 0;
							}
						}
					}

					.slide-footer {
						p {
							color: #1d1d1b;
							font-size: 14px;
							font-family: $font3;
							font-weight: 300;
							line-height: 1.5;
							letter-spacing: 2px;
							text-transform: uppercase;
							margin-bottom: 0;
						}
					}
				}
			}
		}
	}
}

.box-13 {
	padding: 110px 0 150px;

	h2 {
		color: #1d1d1b;
		font-size: 34px;
		font-family: $font3;
		font-weight: 300;
		letter-spacing: 2px;
		text-transform: uppercase;
		text-align: center;
		margin-bottom: 50px;
	}

	ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		column-gap: 60px;
		row-gap: 20px;

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

.box-14 {
	padding: 120px 0 110px;
	background-image: url('/upload/filemanager/global/box-bg.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;

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

	ul.faq-accordion {
		display: flex;
		flex-direction: column;
		row-gap: 10px;

		li.accordion-item {
			&.active {
				.accordion-title {
					&::before {
						transform: translateY(-50%) scale(-1);
					}
				}
			}

			.accordion-title {
				position: relative;
				border: 1px solid #fff;
				width: 100%;
				cursor: pointer;

				&::before {
					content: url('/upload/filemanager/icon/Polygon-arrow.svg');
					position: absolute;
					right: 20px;
					top: 50%;
					transform: translateY(-50%);
				}

				h2 {
					color: #fff;
					font-size: 24px;
					font-family: $font3;
					font-weight: 300;
					letter-spacing: 2px;
					margin-bottom: 0;

					display: block;
					padding: 20px 30px;
				}
			}
			.accordion-data {
				display: none;

				.accordion-data--wrapper {
					padding: 30px 0 20px;
				}
				p {
					color: #fff;
					font-size: 20px;
					font-family: $font3;
					font-weight: 300;

					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
	}
}

.box-15 {
	padding-top: 120px;
	padding-bottom: 110px;
	margin-bottom: 110px;

	.row {
		padding-top: 110px;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 50%;
			width: calc(100% - 80px * 2);
			transform: translateX(-50%);
			height: 1px;
			background: #1d1d1b;
		}
	}

	h2 {
		color: #1d1d1b;
		font-size: 34px;
		font-family: $font3;
		font-weight: 300;
		letter-spacing: 2px;
		line-height: 1;
		margin-bottom: 48px;
	}

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

		strong {
			font-weight: 700;
		}
	}

	a {
		display: inline-block;
		color: #1d1d1e;
		font-size: 14px;
		font-family: $font3;
		font-weight: 700;
		letter-spacing: 2px;
		text-decoration: underline;
		text-transform: uppercase;
		margin-top: 50px;
	}
}