roximplast.pl/layout/style-scss/style.scss

// out: ../style-css/style.css, compress: true, sourceMap: true
@import '_mixins';
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');
$cBlueDark: #1e3b6d;
$cGreen: #52a438;
$cBlack: #222;
$cGray: rgba(235, 242, 245, 0.5);
$cRed: #1e3b6d;

$cAccentRed: #1e3b6d;

body {
	font-family: 'Nunito Sans', sans-serif !important;
	box-sizing: border-box;

	strong {
		font-weight: 700;
	}
}

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

button {
	border: none;
}

.btn-1 {
	background: $cBlueDark;
	color: #fff !important;
	font-weight: 800;
	padding: 10px 15px;
	width: fit-content !important;
	height: fit-content !important;
}

#main-menu-btn {
	height: 50px;
	width: 50px;
	position: absolute;
	top: 16px;
	right: 10px;
	color: $cBlueDark;
	display: none;
	z-index: 9999;
	line-height: 50px;
	text-align: center;
	font-size: 25px;
	cursor: pointer;
	@include border-radius(50%);

	@include respond-below(xxs) {
		top: 10px;
	}

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

.content_flex {
	margin: 0 auto;
	width: 100%;
	padding: 0 30px;
	display: flex;

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

	@include respond-above(xxs) {
		max-width: 440px;
		padding: 0 0;
	}

	@include respond-above(xs) {
		max-width: 540px;
	}

	@include respond-above(sm) {
		max-width: 720px;
	}

	@include respond-above(md) {
		max-width: 960px;
	}

	@include respond-above(lg) {
		max-width: 1140px;
	}

	@include respond-above(xxl) {
		max-width: 1300px;
	}
}

.top {
	padding: 15px 0;

	@include respond-above(md) {
		padding: 25px 0;
	}

	.content_flex {
		@include respond-above(xs) {
			flex-direction: column;
			gap: 40px;
		}

		@include respond-above(md) {
			justify-content: space-between;
			flex-direction: row;
			column-gap: 20px;
		}

		.contact {
			display: none;

			@include respond-above(md) {
				display: flex;
				column-gap: 20px;
			}

			@include respond-above(lg) {
				column-gap: 50px;
			}

			.content {
				display: flex;

				.icon {
					padding-right: 10px;

					i {
						color: $cAccentRed;
						font-size: 42px;
					}
				}

				.text {
					list-style-type: none;
					padding: 0;
					margin: 0;
					font-size: 14px;

					@include respond-above(md) {
						font-size: 12px;
					}

					li:first-child {
						// color: $cBlueDark;
						color: $cAccentRed;
						font-weight: 800;
						font-size: 16px;
					}

					li {
						a {
							color: $cAccentRed;
						}
					}
				}
			}
		}

		.logo {
			img {
				max-width: 325px;
			}

			@include respond-below(xxs) {
				width: 80%;

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

.top_menu {
	border-top: solid 1px rgba(93, 85, 85, 0.23);

	&[header-fixed='true'] {
		@include respond-above(sm) {
			position: fixed;
			top: 0;
			background: #fff;
			z-index: 10;
			width: 100%;
		}
	}

	.level-0 {
		margin: 0;
		padding: 0;
		display: flex;
		list-style-type: none;
		column-gap: 20px;

		> li {
			> a {
				position: relative;

				&::after {
					height: 2px;
					width: 0;
					@include transition;
					position: absolute;
					content: '';
					display: block;
					bottom: 0;
					left: 0;
					background: $cAccentRed;
				}

				&:hover {
					&::after {
						width: 100%;
					}
				}
			}
		}

		li {
			a {
				display: block;
				color: $cBlack;
				padding: 15px 15px;
				font-weight: 600;
				@include transition;

				&:hover {
					text-decoration: none;
					color: $cAccentRed;
				}
			}
		}
	}
}

//slider
.splide__pagination {
	counter-reset: pagination-num;
}

.splide__pagination__page:before {
	&:not(.splide__pagination__page__custom) {
		counter-increment: pagination-num;
		content: '0' counter(pagination-num);
	}
}

.splide__pagination__custom {
	bottom: 0 !important;
	position: relative !important;
	margin-bottom: 5px !important;

	.splide__pagination__page__custom {
		&.is-active {
			background: #1e3b6d !important;
			transform: scale(1) !important;
		}
	}
}

.slider {
	height: calc(100vh - 161px);
	max-height: 600px;
	width: 100%;

	@include respond-above(md) {
		max-height: 800px;
	}

	.splide {
		height: 100%;
		width: 100%;

		.splide__track {
			height: 100%;
			width: 100%;

			.splide__list {
				height: 100%;
				width: 100%;

				.splide__slide {
					height: 100%;
					width: 100%;
					position: relative;

					&.slide_02 {
						.text_container {
							text-align: right;
							right: 10%;
							left: auto;
							font-size: 1.9rem;

							@include respond-above(xs) {
								font-size: 3rem;
							}

							@include respond-above(sm) {
								font-size: 2.6rem;
							}

							@include respond-above(md) {
								font-size: 3rem;
							}
						}
					}

					.text_container {
						position: absolute;
						top: 50%;
						left: 10%;
						transform: translateY(-50%);
						color: #fff;
						font-weight: 100;
						max-width: 600px;
						font-size: 1.9rem;

						@include respond-above(xs) {
							font-size: 3rem;
						}

						@include respond-above(sm) {
							left: 12%;
							font-size: 2.6rem;
						}

						@include respond-above(md) {
							font-size: 3rem;
						}
					}

					.img_container {
						height: 100%;
						width: 100%;

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

		//pagination
		.splide__pagination {
			display: flex;
			flex-direction: flex;
			gap: 5px;
			right: auto;
			left: 50%;
			top: 40px;
			transform: translateX(-50%);
			bottom: auto;

			@include respond-above(sm) {
				flex-direction: column;
				gap: 5px;
				right: auto;
				left: 1em;
				top: 50%;
				transform: translateY(-50%);
				bottom: auto;
			}

			li {
				.splide__pagination__page {
					border-radius: 0;
					width: 50px;
					height: 50px;
					background-color: transparent;
					border: 2px solid white;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 20px;
					font-weight: 700;
					color: white;
					opacity: 0.8;
					transition: 0.3s ease;

					&:hover {
						opacity: 1;
					}

					&:focus,
					&:active {
						outline: none;
						opacity: 1;
					}
				}

				.splide__pagination__page.is-active {
					transform: scale(1);
				}
			}
		}

		//arows
		.splide__arrows {
			.splide__arrow {
				border-radius: 0;
				background-color: white;
				width: 50px;
				height: 50px;
				display: flex;
				justify-content: center;
				align-items: center;
				opacity: 1;
				transition: 0.3s ease;
				z-index: 8;

				&:focus,
				&:active {
					outline: none;
					opacity: 1;
				}

				svg {
					fill: $cBlueDark;
					z-index: 10;
					transition: 0.3s ease;
				}

				&::before {
					content: '';
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%) scale(0);
					width: 100%;
					height: 100%;
					background-color: $cAccentRed;
					z-index: 9;
					transition: 0.3s ease;
				}

				&:hover {
					&::before {
						transform: translate(-50%, -50%) scale(1);
					}

					svg {
						fill: white;
					}
				}

				&--next {
					@include respond-below(sm) {
						top: auto;
						left: auto;
						transform: translateX(-14%);
						right: 50%;
						bottom: 20px;
					}

					@include respond-above(sm) {
						left: auto;
						right: 1em;
						top: calc(50% - 30px);
					}
				}

				&--prev {
					@include respond-below(sm) {
						top: auto;
						right: auto;
						left: 50%;
						transform: translateX(14%);
						bottom: 20px;
					}

					@include respond-above(sm) {
						top: calc(50% + 30px);
					}
				}
			}
		}
	}
}

.box_01 {
	@extend .box;
	background: $cAccentRed;
	padding-top: 75px;
	padding-bottom: 140px;

	@include respond-above(lg) {
		padding-top: 100px;
	}

	.content_flex {
		gap: 30px;
		flex-wrap: wrap;
		max-width: 100%;

		@include respond-above(lg) {
			justify-content: space-between;
			column-gap: 30px;
			flex-wrap: nowrap;
		}

		.promo {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 15px;
			width: 100%;

			@include respond-above(md) {
				width: calc((100% / 3) - 20px);
			}

			.text {
				color: #fff;
				text-transform: uppercase;
				font-weight: 600;

				@include respond-below(md) {
					width: 246px;
				}
			}
		}
	}
}

#cookie-information {
	padding: 15px 0;
	text-align: center;
	font-size: 12px;
	position: fixed;
	width: calc(100% - 20px);
	max-width: 600px;
	bottom: 10px;
	left: 10px;
	background: #e9e9e9;
	padding: 20px;
	text-align: center;
	border-radius: 10px;
	z-index: 999;

	.title {
		color: $cGreen;
		font-size: 15px;
		font-weight: 600;
		margin-bottom: 15px;
	}

	.text {
		margin-bottom: 15px;
	}

	a {
		color: $cBlueDark;
		display: inline-block;
		background: $cBlueDark;
		color: #fff;
		padding: 10px 25px;
		border-radius: 5px;
	}
}

//box_02 products-list
.box_02 {
	transform: translateY(-70px);

	.content_flex {
		justify-content: center;
	}

	.products-list {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		gap: 30px;
		padding-left: 0;
		margin-bottom: 0;
		list-style: none;
		justify-content: center;

		@include respond-above(md) {
			flex-direction: row;
		}

		.list-item {
			width: 100%;
			padding: 50px 30px;
			border-radius: 6px;
			background-color: white;
			box-shadow: 6px 6px 24px 0px rgba(0, 0, 0, 0.1);
			transition: 0.3s ease;

			@include respond-above(md) {
				width: calc((100% / 3) - 20px);
			}

			&:hover {
				transform: translateY(15px);
			}

			.scontainer-content {
				display: flex;
				flex-direction: column-reverse;
				align-items: center;
				gap: 20px;

				@include respond-above(xs) {
					flex-direction: row;
				}

				// @include respond-between(md, lg) {
				//   flex-direction: column-reverse;
				// }

				.left {
					color: $cBlueDark;

					.title {
						display: block;
						font-size: 22px;
						font-weight: 700;
						text-decoration: none;
						color: $cBlueDark;
						transition: 0.3s ease;
						line-height: 1.3;
						margin-bottom: 10px;

						@include respond-above(md) {
							font-size: 24px;
						}

						&:hover {
							strong {
								// color: $cBlueDark;
								color: $cAccentRed;
							}
						}

						strong {
							transition: 0.3s ease;
							color: $cGreen;
						}
					}

					.description {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						font-size: 14px;
						margin-bottom: 30px;
					}

					.button--products-list {
						text-decoration: none;
						color: $cGreen;
						transition: 0.3s ease;
						font-size: 12px;
						font-weight: 800;
						text-transform: uppercase;
						display: flex;
						flex-direction: row;
						align-items: center;
						gap: 5px;

						&:hover {
							// color: $cBlueDark;
							color: $cAccentRed;
						}

						&::after {
							content: '\2192';
						}
					}
				}

				.right {
					width: 75px;
					min-width: 75px;

					img {
						width: 100%;
						height: auto;
					}
				}
			}
		}
	}
}

//news
.box_03 {
	@extend .box;
	background-color: $cGray;

	#news {
		display: flex;
		flex-direction: column;
		gap: 20px;

		#title {
			font-size: 30px;
			color: $cBlueDark;
			text-align: center;
			font-weight: 800;

			@include respond-above(sm) {
				font-size: 38px;
			}
		}

		.news-container {
			display: flex;
			flex-direction: column;
			gap: 40px;

			@include respond-above(sm) {
				gap: 20px;
			}

			@include respond-above(md) {
				flex-direction: row;
				gap: 20px;
				height: 440px;
			}

			.big-article {
				border-radius: 6px;
				width: 100%;
				height: 100%;
				position: relative;

				.big-article-link {
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					z-index: 11;
				}

				#article-main {
					width: 100%;
					height: 100%;
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 6px;

					&:hover {
						img {
							scale: 1.1;
						}

						.content-container {
							.article-title {
								a {
									color: $cGreen;
								}
							}
						}
					}

					.img {
						border-radius: 6px;
						width: 100%;
						height: 100%;
						position: relative;
						overflow: hidden;

						&::after {
							content: '';
							position: absolute;
							top: 0;
							bottom: 0;
							left: 0;
							right: 0;
							background-color: $cBlueDark;
							opacity: 0.4;
							z-index: 9;
							border-radius: 6px;
						}

						img {
							width: 100%;
							height: 100%;
							object-fit: cover;
							border-radius: 6px;
							transition: 0.3s ease;
						}
					}

					.content-container {
						position: absolute;
						bottom: 0;
						left: 0;
						display: flex;
						flex-direction: column;
						gap: 10px;
						padding: 20px;
						z-index: 10;

						@include respond-above(sm) {
							padding: 40px;
						}

						.article-title {
							a {
								text-decoration: none;
								color: white;
								font-size: 22px;
								font-weight: 700;
								transition: 0.3s ease;

								@include respond-above(sm) {
									font-size: 42px;
								}
							}
						}

						.date-add {
							color: white;
						}
					}
				}
			}

			.small-articles {
				width: 100%;
				display: flex;
				flex-direction: column;
				gap: 20px;
				height: 100%;

				.small-article {
					display: flex;
					flex-direction: column;
					gap: 20px;

					@include respond-above(sm) {
						flex-direction: row;
						height: 220px;
					}

					.date-add {
						color: $cBlueDark;
					}

					.img {
						width: 100%;
						height: 100%;
						border-radius: 6px;
						overflow: hidden;

						@include respond-above(sm) {
							width: 50%;
						}

						img {
							width: 100%;
							height: 100%;
							object-fit: cover;
							border-radius: 6px;
							transition: 0.3s ease;
						}

						&:hover {
							img {
								scale: 1.1;
							}
						}
					}

					.content-container {
						width: 100%;
						display: flex;
						flex-direction: column;

						@include respond-above(sm) {
							width: 50%;
						}

						.article-title {
							margin-bottom: 0;

							a {
								display: block;
								color: $cBlueDark;
								font-size: 22px;
								transition: 0.3s ease;
								text-decoration: none;
								line-height: 1.1;
								font-weight: 800;
								width: auto;

								&:hover {
									opacity: 0.8;
								}
							}

							padding: 10px 0;
						}

						.entry {
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 3;
							overflow: hidden;
							margin-bottom: 10px;
							font-size: 14px;
							color: $cBlueDark;
						}

						.more {
							text-decoration: none;
							color: $cGreen;
							transition: 0.3s ease;
							font-size: 12px;
							font-weight: 800;
							text-transform: uppercase;
							display: flex;
							flex-direction: row;
							align-items: center;
							gap: 5px;

							&:hover {
								color: $cBlueDark;
							}

							&::after {
								content: '\2192';
							}
						}
					}
				}
			}
		}
	}
}

.box_04 {
	@extend .box;

	#scontainer-10 {
		width: 100%;
	}

	.opinions-carousel {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 30px;

		.opinions-title {
			font-size: 26px;
			color: $cBlueDark;
			font-weight: 800;
		}

		#main-carousel {
			width: 100%;
			text-align: center;
			position: relative;
			z-index: 10;
			height: auto;

			@include respond-above(md) {
				width: 50%;
			}

			.quote {
				position: absolute;
				z-index: 9;
				left: 0;
				top: 0;
				transform: translate(-50%, -50%);
			}
		}

		#thumbnail-carousel {
			width: 100%;

			@include respond-above(xs) {
				width: 70%;
			}

			@include respond-above(md) {
				width: 50%;
			}

			@include respond-above(lg) {
				width: 32%;
			}

			.splide__track {
				.splide__list {
					.splide__slide {
						display: flex;
						flex-direction: column;
						align-items: center;
						border: none !important;
						gap: 20px;

						.client-img {
							width: 110px;
							height: 110px;
							border-radius: 50%;
							transition: 0.3s ease;

							img {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}

						.client-name {
							opacity: 0;
							text-align: center;
							font-weight: 700;
							color: $cGreen;
							margin-bottom: 0;
							transition: 0.3s ease;
						}
					}

					.is-active {
						.client-name {
							opacity: 1;
						}

						// .client-img {
						//   transform: scale(1.1);
						// }
					}
				}
			}
		}
	}
}

//slider-partners
.box_05 {
	margin-top: 75px;
	background-color: $cGray;

	.slider-partners {
		width: 100%;
		height: 160px;

		.splide {
			width: 100%;
			height: 100%;

			.splide__track {
				width: 100%;
				height: 100%;

				.splide__list {
					width: 100%;
					height: 100%;
					display: flex;

					.splide__slide {
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;

						img {
							width: 60%;
							height: auto;
						}
					}
				}
			}
		}
	}
}

//footer
.footer-footer {
	padding: 40px 0 10px;
	// background-color: $cBlueDark;
	background-color: $cAccentRed;

	.content_flex {
		flex-wrap: wrap;
	}

	.footer_menu {
		width: 100%;
		padding-top: 25px;
		padding-bottom: 25px;

		ul.level-0 {
			display: flex;
			gap: 20px;
			list-style-type: none;
			padding: 0;
			margin: 0;
			flex-direction: column;
			align-items: center;

			@include respond-above(xs) {
				align-items: stretch;
				flex-direction: row;
				flex-wrap: wrap;
			}

			@include respond-above(md) {
				flex-wrap: nowrap;
			}

			li.parent {
				width: 100%;
				text-align: center;

				@include respond-above(xs) {
					text-align: start;
					width: calc((100% / 4) - 15px);
				}

				@include respond-above(md) {
					width: 100%;
				}
			}

			> li {
				> a {
					color: #fff;
					font-weight: 600;
					text-transform: uppercase;
					font-size: 14px;
					@include transition;

					&:hover {
						// color: $cGreen;
						color: $cBlueDark;
						text-decoration: none;
					}

					i {
						display: none;
					}
				}

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

					a {
						color: rgba(255, 255, 255, 0.75);
						font-size: 13px;
						@include transition;

						&:hover {
							color: $cGreen;
							text-decoration: none;
						}
					}
				}
			}
		}
	}

	@include respond-below(sm) {
		.footer_menu {
			width: 100%;
			padding-top: 25px;
			padding-bottom: 25px;

			ul.level-0 {
				display: flex;
				gap: 0;
				list-style-type: none;
				padding: 0;
				margin: 0;
				flex-direction: column;
				align-items: center;

				@include respond-above(xs) {
					align-items: stretch;
					flex-direction: row;
					flex-wrap: wrap;
				}

				li.parent {
					width: 100%;
					text-align: center;
					cursor: pointer;

					@include respond-above(xs) {
						text-align: start;
						width: calc((100% / 2) - 10px);
					}

					ul.level-1 {
						max-height: 0;
						opacity: 0;
						transition: 0.6s ease;

						li {
							display: none;
							text-align: center;

							a {
								text-align: center;
							}
						}
					}

					a {
						position: relative;
						z-index: 99;
						height: 35px;
					}
				}

				li.parent--active {
					transition: 0.3s;

					ul.level-1 {
						max-height: 220px;
						opacity: 1;

						li {
							display: block;
						}
					}
				}

				> li {
					> a {
						color: #fff;
						font-weight: 600;
						text-transform: uppercase;
						font-size: 14px;
						@include transition;
						display: flex;
						align-items: center;
						justify-content: center;
						gap: 6px;

						&:hover {
							color: $cGreen;
							text-decoration: none;
						}

						i {
							display: block;
						}
					}

					ul.level-1 {
						list-style-type: none;
						padding: 0 0 0 0;
						margin: 0;

						a {
							color: rgba(255, 255, 255, 0.75);
							font-size: 13px;
							@include transition;

							&:hover {
								color: $cGreen;
								text-decoration: none;
							}
						}
					}
				}
			}
		}
	}

	.footer-top {
		display: flex;
		flex-direction: row;
		width: 100%;
	}

	.footer-bottom {
		display: flex;
		flex-direction: row;
		justify-content: center;
		color: white;

		p {
			margin-bottom: 0;
		}

		a {
			color: white;
			text-decoration: none;
			transition: 0.3s ease;

			&:hover {
				color: $cGreen;
			}
		}
	}
}

#copyright {
	// background: $cBlueDark;
	background: $cAccentRed;
	text-align: center;
	font-size: 11px;
	color: #fff;
	padding: 25px;
	// border-top: 1px solid #304d7e;
	border-top: 1px solid #c92222;

	a {
		// color: $cGreen;
		color: $cBlueDark;
	}
}

//box_06
.box_06 {
	padding: 75px 0;

	@include respond-above(md) {
		padding-bottom: 50px;
	}

	.content_flex {
		.scontainer-content {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}
	}

	.text {
		width: 100%;
		display: flex;
		flex-direction: column;
		text-align: center;
		align-items: center;

		@include respond-above(sm) {
			align-items: flex-start;
			width: 50%;
			text-align: start;
		}

		@include respond-above(md) {
			width: 35%;
		}

		.box_06-subtitle {
			color: $cGreen;
			font-size: 18px;
			font-weight: 700;
			margin-bottom: 10px;
		}

		.box_06-title {
			color: $cBlueDark;
			font-size: 30px;
			font-weight: 800;
			margin-bottom: 20px;

			@include respond-above(sm) {
				font-size: 38px;
			}
		}

		.box_06-description {
			color: $cBlueDark;
			margin-bottom: 20px;
		}

		.button--box_06 {
			text-decoration: none;
			color: white;
			background-color: $cGreen;
			display: block;
			padding: 20px;
			border-radius: 6px;
			width: 230px;
			text-align: center;
			font-weight: 800;
			text-transform: uppercase;
			position: relative;
			z-index: 8;
			margin-top: 30px;
			margin-bottom: 50px;

			@include respond-above(sm) {
				margin: 0;
			}

			span {
				display: block;
				position: relative;
				display: flex;
				gap: 5px;
				align-items: center;
				justify-content: center;
				z-index: 10;

				&::after {
					content: '\2192';
				}
			}

			&::before {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%) scale(0);
				width: 100%;
				height: 100%;
				background-color: $cBlueDark;
				border-radius: 6px;
				z-index: 9;
				transition: 0.3s ease;
			}

			&:hover {
				&::before {
					transform: translate(-50%, -50%) scale(1);
				}
			}
		}
	}

	.img {
		width: 40%;
		display: none;

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

		img {
			width: 100%;
			height: auto;
		}
	}

	.list {
		width: 100%;

		@include respond-above(sm) {
			width: 50%;
		}

		@include respond-above(md) {
			width: 25%;
		}

		ul {
			width: 100%;
			display: flex;
			flex-direction: column;
			padding-left: 0;
			list-style: none;
			gap: 20px;
			align-items: center;

			@include respond-above(sm) {
				align-items: flex-end;
			}

			li {
				display: flex;
				flex-direction: row;
				gap: 20px;
				align-items: center;
				font-size: 18px;
				color: $cBlueDark;
				font-weight: 800;
				width: 264px;

				i {
					color: $cGreen;
					font-size: 32px;

					@include respond-above(sm) {
						font-size: 36px;
					}
				}
			}
		}
	}
}

.site-title-container {
	padding: 60px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: $cBlueDark;
	margin-bottom: 30px;
	background: url('/upload/filemanager/img/background.png');
	position: relative;
	background-repeat: no-repeat;
	background-position: 70% center;
	z-index: 8;

	@include respond-above(sm) {
		padding: 100px 0;
		margin-bottom: 75px;
	}

	&::after {
		content: '';
		position: absolute;
		background-color: $cAccentRed;
		width: 100%;
		height: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		opacity: 0.9;
		z-index: 9;
	}

	.content_flex {
		align-items: center;
		justify-content: center;
	}

	.site-title {
		color: white;
		font-size: 24px;
		font-weight: 700;
		position: relative;
		padding: 30px 0;
		z-index: 10;

		@include respond-above(xs) {
			font-size: 30px;
		}

		@include respond-above(sm) {
			font-size: 48px;
		}

		@include respond-above(md) {
			font-size: 60px;
		}

		&::after,
		&::before {
			content: '';
			position: absolute;
			width: 100px;
			height: 6px;
			background-color: white;
		}

		&::before {
			top: 0;
			left: 50%;
			transform: translateX(-50%);
		}

		&::after {
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}
	}
}

//contact
.contact-header {
	margin-bottom: 40px;

	.content_flex {
		justify-content: center;
	}

	.scontainer-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;

		.header-title {
			color: $cBlueDark;
			font-size: 32px;
			margin-bottom: 15px;
		}

		.header-description {
			margin-bottom: 0;
		}
	}
}

.contact-information {
	margin-bottom: 60px;

	#scontainer-13 {
		width: 100%;
	}

	.scontainer-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 30px;

		@include respond-above(md) {
			flex-direction: row;
		}

		.contact-information__item {
			width: 290px;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 20px;
			border: 2px solid rgba(0, 0, 0, 0.25);
			border-radius: 10px;
			gap: 20px;
			@include transition;

			&:hover {
				border: 2px solid $cAccentRed;

				.icon {
					i {
						color: $cAccentRed;
					}
				}

				.contact-information__title {
					color: $cAccentRed;
				}
			}

			@include respond-above(md) {
				width: calc(100% / 3);
			}

			@include respond-below(xs) {
				width: calc(100% - 30px) !important;
			}

			.icon {
				margin-bottom: 10px;

				i {
					font-size: 28px;
					font-weight: 200;
					color: $cBlueDark;
					transition: 0.3s ease;
				}
			}

			.contact-information__title {
				font-size: 20px;
				margin-bottom: 0;
				color: $cBlueDark;
				transition: 0.3s ease;
			}

			.contact-information__list {
				display: flex;
				flex-direction: column;
				list-style: none;
				padding-left: 0;
				margin-bottom: 0;

				li {
					text-align: center;

					a {
						text-decoration: none;
						color: $cBlueDark;
						transition: 0.3s ease;

						&:hover {
							color: $cAccentRed;
						}
					}
				}
			}
		}
	}
}

//contact-bottom
.contact-bottom {
	display: flex;
	flex-direction: column-reverse;
	gap: 60px;
	align-items: center;

	@include respond-above(md) {
		flex-direction: row;
		margin-bottom: 75px;
		gap: 30px;
		align-items: stretch;
	}

	.map {
		width: 100%;
		height: 300px;

		@include respond-above(md) {
			width: 50%;
			height: auto;
		}

		iframe {
			width: 100%;
			height: 100%;
		}
	}

	.contact-form {
		max-width: 290px;

		@include respond-below(sm) {
			max-width: calc(100% - 60px);
		}

		@include respond-above(xxs) {
			max-width: 440px;
		}

		@include respond-above(xs) {
			max-width: 540px;
		}

		@include respond-above(sm) {
			max-width: 720px;
		}

		@include respond-above(md) {
			max-width: calc((1140px / 2) - 30px);
			width: 50%;
		}

		@include respond-above(lg) {
			max-width: calc((1300px / 2) - 30px);
			width: 50%;
		}

		.contact-form__title {
			color: $cBlueDark;
			font-weight: 700;
			text-align: center;
			font-size: 26px;

			@include respond-above(md) {
				text-align: start;
				font-size: 32px;
			}
		}

		.form-group {
			margin-bottom: 0;

			input {
				padding: 25px 15px;
			}
		}

		#agreement {
			margin-top: 20px;
		}

		.button--contact-form {
			margin-top: 20px;
			text-decoration: none;
			color: white;
			background-color: $cAccentRed;
			display: block;
			padding: 15px 0;
			border-radius: 6px;
			text-align: center;
			// font-weight: 700;
			// text-transform: uppercase;
			text-transform: capitalize;
			position: relative;
			z-index: 8;
			cursor: pointer;

			span {
				display: block;
				position: relative;
				display: flex;
				gap: 5px;
				align-items: center;
				justify-content: center;
				z-index: 10;

				&::after {
					content: '\2192';
				}
			}

			&::before {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%) scale(0);
				width: 100%;
				height: 101%;
				background-color: $cBlueDark;
				border-radius: 6px;
				z-index: 9;
				transition: 0.3s ease;
			}

			&:hover {
				color: white;

				&::before {
					transform: translate(-50%, -50%) scale(1);
				}
			}
		}
	}
}

//article podstrony artykuly
.article-container {
	.content_flex {
		gap: 40px;
		position: relative;
		height: 100%;
		flex-wrap: wrap;

		@include respond-above(md) {
			flex-wrap: nowrap;
		}

		.article {
			max-width: 100%;

			.main-image {
				height: 260px;

				@include respond-above(sm) {
					height: auto;
				}
			}

			.text {
				img {
					max-width: 100%;
				}
			}
		}

		.aside__article {
			display: flex;
			flex-direction: column;
			gap: 20px;
			width: 100%;

			@include respond-above(md) {
				width: 30%;
				height: 100%;
				position: sticky;
				top: 40px;
				left: 0;
			}

			.title {
				font-size: 22px;
				font-weight: 700;
				padding-bottom: 20px;

				@include respond-above(md) {
					font-size: 17px;
				}

				@include respond-above(lg) {
					font-size: 20px;
				}

				@include respond-above(xxl) {
					font-size: 22px;
				}
			}

			.table-of-contents {
				ol {
					margin-bottom: 0;

					li {
						a {
							text-decoration: none;
							color: $cBlueDark;
							font-weight: 700;
							transition: 0.3s ease;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;

							@include respond-above(md) {
								font-size: 14px;
							}

							@include respond-above(lg) {
								font-size: 16px;
							}

							&:hover {
								color: $cGreen;
							}
						}

						&::marker {
							color: $cBlueDark;
							font-weight: 700;
						}

						&:hover {
							color: $cGreen;
						}
					}

					li.active {
						a {
							color: $cGreen;
						}
					}
				}
			}

			.box-articles {
				@include respond-below(md) {
					position: absolute;
					bottom: 50px;
					left: 0;
				}

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

				ul {
					margin-bottom: 0;

					li {
						a {
							text-decoration: none;
							color: $cBlueDark;
							font-weight: 700;
							transition: 0.3s ease;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;

							&:hover {
								color: $cGreen;
							}
						}

						&::marker {
							color: $cBlueDark;
							font-weight: 700;
						}

						&:hover {
							&::marker {
								color: $cGreen;
							}
						}
					}
				}
			}
		}
	}
}

.article-container-sale {
	.content_flex {
		.aside__article {
			display: none;
		}
	}
}

.article {
	width: 100%;
	margin-bottom: 75px;

	h2 {
		font-size: 22px;
		margin-bottom: 15px;
		font-weight: 700;
	}

	h3 {
		font-size: 20px;
	}

	h4 {
		font-size: 18px;
	}

	.main-image {
		width: 100%;
		padding-bottom: 30px;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: 20px;
		}
	}

	.text {
		a {
			text-decoration: none;
			color: $cRed;
			transition: 0.3s ease;
			z-index: 5 !important;
			height: 100%;

			&:hover {
				color: $cGreen;
			}
		}

		.tab-content {
			.tab-pane {
				> .row {
					> .col-md-6 {
						.pictures {
							width: 100% !important;
						}
					}
				}

				.pictures {
					width: 100%;
					display: flex;
					justify-content: center;

					@include respond-above(md) {
						width: calc(50% - 30px);
					}
				}

				.subpages-wrapper {
					display: flex;
					flex-wrap: wrap;
					flex-direction: row;
					gap: 60px;
					align-items: flex-start;

					.text {
						width: 100%;
						padding-top: 50px;

						@include respond-above(md) {
							width: calc(50% - 30px);
						}

						table {
							td {
								padding: 5px;
								border: 1px solid #eee;
								font-size: 0.9rem;
							}
						}
					}
				}
			}
		}

		@include respond-below(sm) {
			div[role='tabpanel'] {
				.tab-pane {
					> .row {
						> .col-md-6:first-child {
							order: 2;
						}

						.pictures {
							margin-bottom: 100px;
						}
					}
				}
			}
		}

		.nav-tabs {
			display: flex;
			flex-direction: row;
			gap: 10px;
			justify-content: center;
			padding-bottom: 30px;
			border-bottom: 0;

			@include respond-above(sm) {
				padding-bottom: 75px;
			}

			li {
				border: 1px solid rgba(0, 0, 0, 0.1);
				box-shadow: 6px 6px 24px rgba(0, 0, 0, 0.1);
				transition: 0.3s ease;
				position: relative;
				z-index: 8;
				display: flex;
				align-items: center;
				justify-content: center;

				a {
					text-decoration: none;
					color: black;
					padding: 20px 35px;
					font-size: 18px;
					text-align: center;
					font-weight: 600;
					text-transform: uppercase;
					transition: 0.3s ease;
					position: relative;
					z-index: 10;
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					white-space: nowrap;
				}

				a.active {
					background-color: $cAccentRed;
					color: white;
				}
			}
		}
	}
}

.gallery {
	.row {
		row-gap: 30px;

		div {
			overflow: hidden;
			height: 190px;

			@include respond-below(sm) {
				height: auto;
			}

			a {
				display: block;
				width: 100%;
				height: 100%;
				overflow: hidden;
				border-radius: 6px;

				@include respond-below(sm) {
					pointer-events: none;
				}
			}

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				border-radius: 6px;
				transition: 0.3s ease;
			}

			&:hover {
				img {
					transform: scale(1.1);
				}
			}
		}
	}
}

//wylaczenie linku menu
#menu-container-1 > ul > li.parent > a {
	@include respond-above(md) {
		pointer-events: none;
	}
}

#menu-container-4 > ul > li.parent > a {
	// pointer-events: none;
}

//menu
.top_menu {
	.content_flex {
		#main-menu {
			display: none;
			position: relative;
			z-index: 99;
			width: 100%;

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

			@include respond-above(md) {
				#menu-container-1 {
					li.parent {
						ul.level-1 {
							height: 0;
							position: absolute;
							opacity: 0;
							list-style: none;
							top: 54px;
							left: 0;
							z-index: -1;
							background-color: white;
							width: 100%;
							display: flex;
							row-gap: 40px;
							flex-direction: row;
							flex-wrap: wrap;
							border-bottom-left-radius: 6px;
							border-bottom-right-radius: 6px;
							transition: 0.3s ease;

							li.parent {
								display: none;
								flex-direction: column;
								gap: 6px;
								width: calc((100% / 4) - 15px);

								ul.level-2 {
									list-style: none;
									padding-left: 0;
									display: none;
									flex-direction: column;

									li {
										display: flex;
										flex-direction: column;
										gap: 6px;

										a {
											font-weight: 400;
											pointer-events: auto;
											font-size: 16px;
										}
									}
								}

								a {
									padding: 0;
									font-weight: 700;
									// pointer-events: none;
									font-size: 18px;

									i {
										display: none;
									}
								}
							}
						}

						&:hover {
							ul.level-1 {
								z-index: 99;
								opacity: 1;
								height: auto;
								padding: 40px;

								li.parent {
									display: flex;

									ul.level-2 {
										display: flex;
									}
								}
							}
						}

						a {
							display: flex;
							gap: 5px;
							align-items: center;
						}
					}
				}
			}
		}

		#main-menu.visible {
			display: block;

			#menu-container-1 {
				ul.level-0 {
					li {
						a {
							padding: 8px 15px;
						}
					}
				}

				ul {
					flex-direction: column;
					padding: 10px 0;

					li.parent {
						ul.level-1 {
							opacity: 0;
							list-style: none;
							z-index: -1;
							background-color: white;
							width: 100%;
							transition: 0.3s ease;
							flex-direction: row;
							flex-wrap: wrap;
							display: flex;
							height: 0;
							column-gap: 20px;
							padding: 0;
							margin-left: 10px;

							li.parent {
								display: none;
								flex-direction: column;
								gap: 0;
								width: 100%;

								@include respond-above(xs) {
									width: calc((100% / 2) - 15px);
								}

								@include respond-above(sm) {
									width: calc((100% / 4) - 15px);
								}

								ul.level-2 {
									list-style: none;
									padding-left: 0;
									display: none;
									flex-direction: column;
									position: relative;
									padding-top: 5px;

									li {
										display: flex;
										flex-direction: column;
										gap: 6px;

										a {
											font-weight: 400;
											pointer-events: auto;
											font-size: 14px;
										}
									}
								}

								a {
									padding: 0;
									font-weight: 700;
									// pointer-events: none;
									font-size: 16px;

									i {
										display: none;
									}
								}
							}
						}

						// &:hover {
						//   ul.level-1 {
						//     z-index: 99;
						//     opacity: 1;
						//     height: auto;
						//     padding: 10px 40px 0px 10px;

						//     li.parent {
						//       display: flex;

						//       ul.level-2 {
						//         display: flex;
						//       }
						//     }

						//   }
						// }

						a {
							display: flex;
							gap: 5px;
							align-items: center;
						}
					}

					li.parent--active {
						ul.level-1 {
							z-index: 99;
							opacity: 1;
							height: auto;
							padding: 10px 40px 0px 10px;

							li.parent {
								display: flex;

								ul.level-2 {
									display: flex;
								}
							}
						}
					}
				}
			}
		}
	}
}

.menu-blur {
	@include respond-above(md) {
		position: fixed;
		display: none;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.4);
		z-index: 98;
		transition: 0.3s ease;
		opacity: 0;
	}
}

.menu-blur--active {
	@include respond-above(md) {
		opacity: 1;
		display: block;
	}
}

//galerry realizations
.gallery-realizations {
	margin: 75px 0;
}

.gallery-realizations-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 30px;

	.article-miniature {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 15px;

		@include respond-above(sm) {
			width: calc((100% / 2) - 20px);
		}

		@include respond-above(lg) {
			width: calc((100% / 3) - 20px);
		}

		border-radius: 6px;
		// overflow: hidden;
		position: relative;
		// height: 350px;

		// &::before {
		//   content: '';
		//   position: absolute;
		//   top: 50%;
		//   left: 50%;
		//   transform: translate(-50%, -50%) scale(0);
		//   width: 100%;
		//   height: 100%;
		//   background-color: rgba(0, 0, 0, 0.6);
		//   transition: 0.3s ease;
		// }

		.article-title {
			// position: absolute;
			// top: 50%;
			// left: 50%;
			// transform: translate(-50%, -50%) scale(0);
			// text-align: center;
			// margin-bottom: 0;
			// transition: 0.3s ease;
			// width: 100%;
			// height: 100%;
			// display: flex;
			// justify-content: center;
			// align-items: center;

			// a {
			// 	text-decoration: none;
			// 	color: white;
			// }

			margin-bottom: 0;
			line-height: 1.4;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;

			a {
				display: block;
				text-decoration: none;
				font-size: 16px;
				font-weight: 800;
				color: $cBlueDark;
				transition: 0.3s ease;

				&:hover {
					color: $cGreen;
				}
			}
		}

		.article-miniature-img {
			display: block;
			width: 100%;
			height: 260px;
			border-radius: 20px;
			overflow: hidden;

			@include respond-above(sm) {
				height: 300px;
			}

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: 0.3s ease;
			}

			&:hover {
				img {
					transform: scale(1.1);
				}
			}
		}

		// &:hover {
		// 	.article-title {
		// 		transform: translate(-50%, -50%) scale(1);
		// 	}

		// 	&::before {
		// 		transform: translate(-50%, -50%) scale(1);
		// 	}
		// }

		// .article-miniature-link {
		// 	position: absolute;
		// 	display: block;
		// 	top: 0;
		// 	left: 0;
		// 	right: 0;
		// 	bottom: 0;
		// 	background-color: transparent;
		// 	z-index: 99;
		// }
	}
}

.realizations-details {
	position: relative;

	.aside__article {
		display: none;
	}

	.main-image {
		display: none;
	}
}

//button-article
.button--article {
	margin-top: 30px;
	text-decoration: none;
	color: white;
	background-color: $cAccentRed;
	display: block;
	padding: 10px;
	border-radius: 6px;
	max-width: 120px;
	text-align: center;
	font-weight: 800;
	position: relative;
	text-transform: capitalize;
	z-index: 8;

	span {
		display: block;
		position: relative;
		display: flex;
		gap: 5px;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}

	&::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(0);
		width: calc(100% + 2px);
		height: calc(100% + 2px);
		background-color: $cBlueDark;
		border-radius: 6px;
		z-index: 9;
		transition: 0.3s ease;
	}

	&:hover {
		color: white;

		&::before {
			transform: translate(-50%, -50%) scale(1);
		}
	}
}

//blog/promocje
//article-entry
.blog-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	row-gap: 60px;
	column-gap: 30px;
	margin-bottom: 75px;
	width: 100%;

	.article-entry {
		width: 100%;

		@include respond-above(sm) {
			width: calc((100% / 2) - 20px);
		}

		@include respond-above(lg) {
			width: calc((100% / 3) - 20px);
		}

		display: flex;
		flex-direction: column;
		gap: 15px;

		.main-image {
			border-radius: 20px;
			overflow: hidden;
			width: 100%;
			height: 260px;

			@include respond-above(sm) {
				height: 300px;
			}

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: 0.3s ease;
			}

			&:hover {
				img {
					transform: scale(1.1);
				}
			}
		}

		.article-title {
			margin-bottom: 0;
			line-height: 1.4;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;

			a {
				display: block;
				text-decoration: none;
				font-size: 16px;
				font-weight: 800;
				color: $cBlueDark;
				transition: 0.3s ease;

				&:hover {
					color: $cGreen;
				}
			}
		}

		.more {
			display: none;
		}
	}
}

//date-add
.date-add {
	display: flex;
	align-items: center;
	gap: 6px;

	i {
		color: $cGreen;
	}
}

//article-title
.article-title-container {
	padding: 60px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: $cAccentRed;
	margin-bottom: 30px;
	background: url('/upload/filemanager/img/background.png');
	position: relative;
	background-repeat: no-repeat;
	background-position: 70% center;
	z-index: 8;
	display: flex;
	flex-direction: column;

	@include respond-above(sm) {
		padding: 100px 0;
		margin-bottom: 75px;
	}

	&::after {
		content: '';
		position: absolute;
		background-color: $cAccentRed;
		width: 100%;
		height: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		opacity: 0.9;
		z-index: 9;
	}

	.article-title {
		color: white;
		font-size: 22px;
		font-weight: 700;
		position: relative;
		padding: 30px 0;
		z-index: 10;
		text-align: center;
		padding-left: 20px;
		padding-right: 20px;

		@include respond-above(sm) {
			font-size: 32px;
		}

		&::after,
		&::before {
			content: '';
			position: absolute;
			width: 100px;
			height: 6px;
			background-color: white;
		}

		&::before {
			top: 0;
			left: 50%;
			transform: translateX(-50%);
		}

		&::after {
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.date-add {
		transform: translateY(20px);
		color: white;
		font-size: 14px;
		display: flex;
		align-items: center;
		gap: 10px;
		position: relative;
		z-index: 10;

		i {
			color: white;
			font-size: 20px;
		}
	}
}

.pager {
	width: 100%;
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-direction: row;
	gap: 10px;
	justify-content: center;
	align-items: center;

	li:nth-child(1),
	li:nth-last-child(1) {
		display: none;
	}

	li {
		a {
			display: block;
			color: white;
			text-decoration: none;
			padding: 10px;
			background-color: $cBlueDark;
			border-radius: 10px;
			position: relative;
			transition: 0.3s ease;

			&:hover {
				opacity: 0.9;
			}
		}

		span {
			display: block;
			position: relative;
			z-index: 10;
			padding: 10px;
			color: white;
			border-radius: 10px;
			background-color: $cBlueDark;
		}
	}
}

.article {
	.text {
		u {
			text-decoration: none;

			strong {
				text-decoration: none;
				color: $cGreen;
			}
		}

		strong {
			u {
				text-decoration: none;
				color: $cGreen;
			}
		}
	}
}

.subpages-menu-list {
	margin-top: 50px;

	.subpages-menu-item {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		padding-bottom: 80px;
		padding-bottom: 60px;
		padding-top: 15px;
		border-radius: 5px;

		p:first-child {
			display: block;
			height: 300px;
			width: 100%;
			border-radius: 5px;
			overflow: hidden;
			text-align: center;

			a {
				display: block;
				position: relative;
				z-index: 10;
			}

			img {
				width: 100%;
				height: 100%;
				object-fit: contain;
				position: relative;
				z-index: 1;
				object-position: center;
			}
		}

		.subpages-menu-link {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 9;
		}

		.subpages-menu-title {
			position: absolute;
			left: 0;
			bottom: 10px;
			font-size: 24px;
			font-weight: 600;
			z-index: 3;
			color: black;
			transition: 0.3s ease;
			display: block;
			text-align: center;
			width: 100%;

			a {
				color: $cBlack;
			}
		}

		&::before {
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			border: 2px solid #000;
			opacity: 0;
			z-index: 2;
			transition: 0.3s ease;
			border-radius: 5px;
		}

		&:hover {
			.subpages-menu-title {
				color: white;
				transform: scale(1.1) translate(0, -10px);
			}

			&::before {
				opacity: 0.2;
			}
		}
	}
}

.subpages-slider-container {
	width: 100%;

	@include respond-above(xs) {
		width: 80%;
	}

	div[class*='subpages-slider-'] {
		width: 100%;

		.splide__track {
			width: 100%;

			.splide__list {
				width: 100%;

				.splide__slide {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 10px;

					img {
						height: auto;
					}
				}
			}
		}

		.splide__arrows {
			.splide__arrow {
				border-radius: 0;
				background-color: $cAccentRed;
				width: 50px;
				height: 50px;
				display: flex;
				justify-content: center;
				align-items: center;
				opacity: 1;
				transition: 0.3s ease;
				z-index: 8;
				border: none;
				// border-radius: 6px;

				&:focus,
				&:active {
					outline: none;
					opacity: 1;
				}

				svg {
					fill: white;
					z-index: 10;
				}
			}

			.splide__arrow--next {
				left: 48%;
				transform: translate(-100%);
				top: auto;
				bottom: -70px;

				@include respond-above(xxs) {
					right: -50px;
					bottom: auto;
					top: 50%;
					transform: translateY(-50%);
					left: auto;
				}
			}

			.splide__arrow--prev {
				right: 48%;
				transform: translate(100%);
				top: auto;
				bottom: -70px;

				@include respond-above(sm) {
					left: -50px;
					bottom: auto;
					top: 50%;
					right: auto;
					transform: translateY(-50%);
				}
			}
		}
	}
}

img.border20 {
	border-radius: 20px;
}

.main-values {
	font-size: 30px;
	font-weight: 600;
	display: grid !important;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 30px;
	justify-content: center;
	width: fit-content;
	margin: auto;

	@include respond-below(sm) {
		grid-template-columns: 1fr;
		width: 100%;
	}

	.col-lg-4,
	.col-lg-6 {
		background: $cAccentRed;
		padding: 30px;
		white-space: nowrap;
		max-width: 100%;
		width: fit-content;
		color: #fff;

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

		p {
			margin-bottom: 0;
			font-weight: 200;
		}
	}
}

blockquote {
	background: #d6d6db;
	padding: 25px;

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

	.table th,
	.table td {
		background: #f1f1f1;
		border: 0 !important;
		font-size: 14px;
	}

	.table-striped tbody tr:nth-of-type(odd) td {
		background: #fff !important;
	}
}

.window-list,
.dors-list {
	margin-bottom: 50px;
	row-gap: 25px;
	display: grid;
	grid-template-columns: 1fr;

	// display: none;
	.single {
		background: #ffffff;
		border: 1px solid rgba(0, 0, 0, 0.1);
		box-shadow: 6px 6px 24px rgba(0, 0, 0, 0.1);
		display: grid;
		grid-template-columns: 1fr 350px;
		padding: 30px 50px;

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

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

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

		.right {
			display: grid;
			grid-template-columns: 1fr 50px;

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

			.image {
				img {
					width: 100%;
				}
			}

			.icons {
				display: grid;
				grid-template-columns: 1fr;
				row-gap: 20px;
				justify-content: center;
				align-content: flex-start;

				img {
					width: 100%;
					max-width: 50px;
				}
			}
		}

		.left {
			@include respond-below(xs) {
				order: 2;
				text-align: center;
			}

			.more {
				background: $cAccentRed;
				display: inline-flex;
				padding: 10px 25px;
				color: #fff;
				@include transition;
				height: auto;

				&:hover {
					background: $cRed;
				}
			}

			.text {
				margin-bottom: 30px;
				font-size: 15px;
			}

			.title {
				color: $cBlueDark;
				font-weight: 700;
				font-size: 32px;
				@include transition;
				margin-bottom: 15px;
				display: block;
				height: auto;

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

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

				&:hover {
					color: $cBlueDark;
				}
			}
		}
	}

	.single-grid {
		display: flex;
		flex-direction: column;
		gap: 20px;
		background: #ffffff;
		border: 1px solid rgba(0, 0, 0, 0.1);
		box-shadow: 6px 6px 24px rgba(0, 0, 0, 0.1);
		padding: 30px 50px;

		.single-title {
			.title {
				color: $cBlueDark;
				font-weight: 700;
				font-size: 32px;
				@include transition;
				margin-bottom: 15px;
				display: block;
				height: auto;

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

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

				&:hover {
					color: $cBlueDark;
				}
			}
		}

		.single-data {
			display: flex;
			flex-direction: row;
			gap: 20px;

			.single-list {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 20px;

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

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

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

				.single-item {
					h3 {
						margin-bottom: 0;
						font-size: 15px;
						text-align: center;
					}
				}
			}

			.icons {
				display: grid;
				grid-template-columns: 1fr;
				row-gap: 20px;
				justify-content: center;
				align-content: flex-start;
				min-width: 50px;

				img {
					width: 100%;
					max-width: 50px;
				}
			}
		}
	}
}

.dors-list {
	.single {
		.right {
			grid-template-columns: 1fr;

			.image {
				height: 300px;

				img {
					height: 100%;
					object-fit: contain;
				}
			}
		}
	}
}

#main-menu {
	#link-43 {
		> a {
			color: #52a438;
		}
	}
}

//* Product gallery
.gallery_title {
	background: #1e3b6d;
	padding: 30px;
	white-space: nowrap;
	width: 100%;
	text-align: center;
	margin-top: 60px;
	margin-bottom: 30px;

	h2 {
		position: relative;
		color: #fff;
		font-size: 40px;
		margin-bottom: 0;
		padding: 10px 0 20px;

		&::before {
			content: '';
			position: absolute;
			width: 100px;
			height: 6px;
			background-color: #fff;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}
	}
}

.gallery_images {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
	gap: 25px;

	.gallery-item {
		position: relative;
		border: 2px solid #ddd;

		&:hover {
			.back {
				opacity: 1;
				visibility: visible;
			}
		}

		.frong {
		}

		.back {
			position: absolute;
			inset: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			padding: 20px;
			background: rgba(0, 0, 0, 0.5);
			transition: opacity 250ms ease-in-out, visibility 250ms ease-in-out;
			opacity: 0;
			visibility: hidden;

			p {
				color: #fff;
				font-family: 'Nunito Sans', Sans-serif;
				font-size: 12px;
				font-weight: 600;
				margin-bottom: 0;
			}
		}
	}
}