project-pro.pl/layout/style-scss/style.scss

// out: ../style-css/style.css, compress: true, sourceMap: true
@import 'reset';
@import 'container';
@import 'mixins';
@import 'variables';

//* Colors
$cWhite: #fff;
$cLightGray: #a8a8a8;
$cGray: #595959;
$cGrayNavText: #7e7e7e;
$cBlack: rgb(12, 12, 12);
$cTurquoiseLight: #00a79d;
$cTurquoise: #01a49b;
$cTurquoiseDark: #09737a;
$cTurquoiseDark2: #0e5364;
$cTextBlack: #061b26;

//* --- Global style --- *//

@mixin font_family {
	font-family: 'Roboto', sans-serif;
}

html {
	scroll-behavior: smooth;
}

body {
	@include font_family();
	color: $cTextBlack;
	font-size: 16px;

	&.fixed {
		overflow: hidden;
	}

	&.nowebp {
		.box-header-1 {
			background: url('/images/main-page-hero.png') no-repeat center !important;
		}

		.box-newsletter-inner {
			background-image: url('/upload/filemanager/Project-Design/Design/Newsletter_bg.jpg') !important;
		}
	}
}

canvas {
	display: block;
	width: 100%;
	height: 100%;
}

div[class^='box-0'] {
	padding-bottom: 75px;

	// @include respond-below(md) {
	// 	padding-bottom: 75px;
	// }
}

a {
	text-decoration: none;
}

strong {
	font-weight: 700;
}

.btn-1 {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: $cTextBlack;
	font-weight: 600;
	font-size: 13px;
	line-height: 13px;
	padding: 14px;
	border-radius: 7px;
	background-color: $cWhite;
	min-width: 194px;
	justify-content: center;
	z-index: 1;

	&::before {
		content: '';
		position: absolute;
		top: -2px;
		right: -2px;
		bottom: -2px;
		left: -2px;
		background: rgba(255, 255, 255, 0.25);
		border-radius: 9px;
		z-index: -1;
	}
}

.btn-2 {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: $cWhite !important;
	font-weight: 600;
	font-size: 13px;
	line-height: 13px;
	padding: 14px;
	min-width: 194px;
	justify-content: center;
	border-radius: 7px;
	background: linear-gradient(
		262.15deg,
		$cTurquoiseLight 42.14%,
		$cTurquoiseDark 94.58%
	);
	z-index: 1;
	cursor: pointer;

	&::before {
		content: '';
		position: absolute;
		top: -2px;
		right: -2px;
		bottom: -2px;
		left: -2px;
		border-radius: 9px;
		z-index: -1;
		box-shadow: 0px 0px 11px #7fe3ea;
		transition: 200ms all ease-in-out;
	}

	&:hover {
		&::before {
			box-shadow: 0px 0px 22px 2px #7fe3ea;
		}
	}
}

//* --- Style components --- *//
//* Navigation panel
#main-menu {
	@include respond-below(xs) {
		height: 100%;
		width: 100%;
		position: fixed;
		z-index: 10;
		background: #fff;
		display: none;

		&.visible {
			@include flexbox;
		}
	}

	div[id^='menu-container-'] {
		@include respond-below(xs) {
			width: 100%;
			@include flexbox;
			@include align-items(center);
			@include justify-content(center);
		}

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

			@include respond-above(xs) {
				@include flexbox;
				@include align-items(center);
			}

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

			li {
				&.parent {
					&:hover {
						ul {
							max-height: 500px;
						}
					}

					> a {
						@include respond-above(xs) {
							pointer-events: none;
						}
					}
				}

				a {
					color: $cWhite;
					font-size: 0.875rem;
					line-height: 14px;
					font-weight: 600;
					text-transform: uppercase;
					letter-spacing: 0.025em;
				}

				ul {
					position: absolute;
					display: none;

					@include respond-below(xs) {
						position: static;
					}
				}

				@include respond-above(xs) {
					&:hover {
						ul {
							display: block;
						}
					}
				}

				&.active {
					ul {
						display: block;
					}
				}
			}
		}
	}

	.level-0 {
		li {
			&#link-8 {
				background-color: $cWhite;
				border-radius: 7px;

				a {
					color: $cTurquoiseLight;
					padding: 11px 38px;
					display: block;
				}
			}

			&:not(:first-child):not(:last-child) {
				margin: 0 45px;
			}

			&:first-child {
				margin-right: 45px;
			}

			&:last-child {
				margin-left: 20px;
			}
		}
	}
}

#main-menu-btn {
	height: 50px;
	width: 50px;
	position: fixed;
	bottom: 10px;
	right: 10px;
	color: #fff;
	background: #000;
	display: none;
	z-index: 9999;
	line-height: 50px;
	text-align: center;
	font-size: 25px;
	cursor: pointer;
	@include border-radius(50%);

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

.nav_panel {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin: 35px 60px 0;
	z-index: 5;

	&.nav_panel_t2 {
		#main-menu {
			div[id^='menu-container-'] {
				ul {
					li {
						a {
							color: $cBlack;
						}
					}
				}
			}

			.level-0 {
				li#link-8 {
					background: #0e5364;

					a {
						color: $cWhite;
					}
				}
			}
		}
	}
}

//* Static box

.box-realizations {
	padding-bottom: 75px;

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

.box-newsletter {
	padding-bottom: 150px;

	@include respond-below(md) {
		padding-bottom: 75px;
	}
}

.header_hero {
	position: relative;
	height: 600px;
	overflow: hidden;
	background-image: url('/upload/filemanager/Project-Design/tworzenie-stron-www/hero-tworzenie-stron-www.jpg');
	background-repeat: no-repeat;
	background-position: top;
	background-size: cover;
	margin-bottom: 100px;
	display: flex;
	align-items: center;

	@include respond-below(lg) {
		margin-bottom: 50px;
	}

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

	.header_hero__wrapper {
		text-align: center;

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

		.header_hero__icon {
			position: relative;
			margin-bottom: 50px;

			&::before {
				content: '';
				position: absolute;
				bottom: -30px;
				left: 50%;
				height: 1px;
				width: 102px;
				transform: translateX(-50%);
				background: $cWhite;
				border-radius: 2px;
			}
		}

		.header_hero__text {
			h1 {
				color: $cWhite;
				font-weight: 700;
				font-size: 3.5rem;
				line-height: 1.25;
			}
		}

		.header_hero__subText {
			p {
				color: $cWhite;
				font-weight: 600;
				font-size: 1.125rem;
				text-transform: uppercase;
			}
		}
	}

	@media (max-width: 991px) {
		margin-bottom: 50px;

		.header_hero__wrapper {
			.header_hero__text {
				h1 {
					font-size: 3rem;
				}
			}
		}
	}

	@media (max-width: 576px) {
		margin-bottom: 25px;

		.header_hero__wrapper {
			.header_hero__icon {
				margin-bottom: 25px;

				&::before {
					bottom: -15px;
				}
			}

			.header_hero__text {
				h1 {
					font-size: 2rem;
				}
			}
		}
	}
}

/**
** Kafelki na stronash
* TODO: Static box
*/
.colsInfoBox {
	.scontainer-content {
		display: grid;
		grid-template-columns: 1fr 500px;
		gap: 50px;
	}

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

	@media (max-width: 1199px) {
		.scontainer-content {
			grid-template-columns: 1fr;
			gap: 50px;
		}
	}
}

/**
** Sprwadź ofertę na pozycjonowanie w Twoim mieście
* TODO: Static box
*/
#scontainer-64 {
	h2 {
		font-weight: 700;
		font-size: 2rem !important;
		line-height: 1.25 !important;
		margin-bottom: 40px !important;
		background: linear-gradient(
			262.15deg,
			$cTurquoiseLight 42.14%,
			$cTurquoiseDark 94.58%
		);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-fill-color: transparent;

		@include respond-below(sm) {
			font-size: 1.5rem !important;
		}
	}

	.priceCols {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 0 auto;
		width: 100%;
		max-width: 750px;

		@include respond-below(sm) {
			flex-wrap: wrap;
			justify-content: center;
		}

		.col-1,
		.col-2,
		.col-3 {
			display: flex;
			flex-direction: column;
			gap: 10px;
			padding-left: 8px;

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

			p {
				font-size: 1.5rem;

				@include respond-below(sm) {
					font-size: 1rem;
				}

				strong {
					position: relative;
					font-weight: 600;

					&::before {
						content: '';
						position: absolute;
						left: -15px;
						top: 0;
						width: 3px;
						height: 100%;
						background: $cTurquoiseLight;
						border-radius: 3px;

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

			a {
				color: $cTextBlack;
				font-weight: 500;
				font-size: 1rem;
				text-transform: uppercase;
				margin-left: 5px;
			}
		}
	}
}

//* Pozycjonowanie stron statyczny kafelki
#scontainer-109 {
	width: 100%;
	max-width: 990px;
	margin: 0 auto;

	#scontainer-109-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		column-gap: 50px;
		row-gap: 30px;

		p {
			text-transform: uppercase;
			width: 100%;
			max-width: 240px;
		}
	}

	@media (max-width: 991px) {
		#scontainer-109-content {
			justify-content: center;
		}
	}
}

//* Pozycjonowanie stron statyczny dox
.pozycjonowanie_box {
	background-image: url('/upload/filemanager/Project-Design/pozycjonowanie-stron/pozycjonowanie-box2-bg.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 17px;

	p {
		text-align: center;
		color: $cWhite;
		font-weight: 600;
		font-size: 1.125rem;
		padding: 40px;
		text-transform: uppercase;
	}
}

//* Pozycjonowanie stron statyczny dox
.pozycjonowanie_box_2 {
	background-image: url('/upload/filemanager/Project-Design/pozycjonowanie-stron/pozycjonowanie-box-bg.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 17px;

	p {
		color: $cWhite;
		font-size: 1.5rem;
		padding: 40px 100px;

		strong {
			font-weight: 600;
		}
	}

	@media (max-width: 991px) {
		p {
			font-size: 1.25rem;
			padding: 30px 50px;
		}
	}

	@media (max-width: 767px) {
		p {
			font-size: 1.125rem;
			padding: 20px;
		}
	}
}

//* Mini banner in page
.mBanner {
	background-image: url('/upload/filemanager/Project-Design/Design/static_box_bg.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	padding: 50px 0;
	border-radius: 17px;

	.mBanner_tile {
		display: flex;
		flex-direction: row;
		align-items: center;
		column-gap: 25px;

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

		.mBanner_tile__data {
			p {
				color: $cWhite;
				font-weight: 400;
				font-size: 1rem;
				text-transform: uppercase;
				width: max-content;

				strong {
					font-size: 3.5rem;
					line-height: 1.25;
					font-weight: 700;
					margin-bottom: 10px;
				}
			}
		}
	}

	@media (max-width: 1199px) {
		.mBanner_tile {
			flex-direction: column;
			align-items: center;
			text-align: center;
			row-gap: 25px;

			.mBanner_tile__data {
				p {
					margin: 0 auto;
				}
			}
		}
	}

	@media (max-width: 767px) {
		flex-direction: column;
		gap: 50px;

		.mBanner_tile {
			flex-direction: row;
			justify-content: center;
			row-gap: 25px;
		}
	}

	@media (max-width: 576px) {
		.mBanner_tile {
			img {
				max-width: 75px;
			}

			.mBanner_tile__data {
				p {
					font-size: 0.875rem;

					strong {
						font-size: 2.5rem;
					}
				}
			}
		}
	}
}

//* Custom ul type 2
ul.type2 {
	li {
		position: relative;
		padding-left: 30px;
		font-weight: 400;

		&::before {
			content: '\f00c';
			position: absolute;
			left: 0;
			top: -3px;
			color: $cTurquoise;
			font-size: 1.125rem;
			font-family: 'FontAwesome';
		}

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

//* Card
.page_card {
	text-align: center;

	.card__num {
		color: $cBlack;
		font-weight: 600;
		font-size: 2.25rem;
		line-height: 1;
		margin-bottom: 25px;
	}

	.card__img {
		margin-bottom: 20px;
	}

	.card__title {
		color: $cTurquoiseLight;
		font-weight: 600;
		font-size: 1.125rem;
		line-height: 22px;
		margin-bottom: 10px;
	}

	.card__text {
		font-size: 0.95rem;
		font-weight: 400;
	}
}

//* Own navigation panel
#page_nav_panel {
	width: 100vw;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	transition: background $navHoverDelay, box-shadow $navHoverDelay;

	&[active='true'],
	&[navcolor='active'] {
		.nav_menu__logo {
			a {
				img {
					&:nth-child(1) {
						opacity: 0;
					}

					&:nth-child(2) {
						opacity: 1;
					}
				}
			}
		}

		.nav_menu__nav {
			.nav_menu__nav_arr {
				&.nav_menu__lvl_1 {
					.nav_menu__link {
						.nav_menu__link__lvl_1 {
							color: $cTextBlack;

							&.nav_menu__link__btn {
								color: $cWhite;
								background: $cTurquoiseDark2;
							}
						}
					}
				}
			}
		}

		.nav_menu__hamburger {
			.nav_menu__hamburger_wrapper {
				span {
					background: linear-gradient(
						262.15deg,
						$cTurquoiseLight 42.14%,
						$cTurquoiseDark 94.58%
					);
				}
			}
		}
	}

	&[header-fixed='true'] {
		background-color: $cWhite !important;
		box-shadow: 0px 6px 28px rgba(0, 0, 0, 0.25);

		.nav_menu__logo {
			a {
				img {
					&:nth-child(1) {
						opacity: 0;
					}

					&:nth-child(2) {
						opacity: 1;
					}
				}
			}
		}

		@media (min-width: 1300px) {
			.nav_menu__nav {
				.nav_menu__nav_arr {
					&.nav_menu__lvl_1 {
						.nav_menu__link {
							.nav_menu__link__lvl_1 {
								color: $cTextBlack;

								&.nav_menu__link__btn {
									color: $cWhite;
									background: $cTurquoiseDark2;
								}
							}
						}
					}
				}
			}
		}

		.nav_menu__hamburger {
			.nav_menu__hamburger_wrapper {
				span {
					background: linear-gradient(
						262.15deg,
						$cTurquoiseLight 42.14%,
						$cTurquoiseDark 94.58%
					);
				}
			}
		}
	}

	.nav_menu__inner {
		padding: 34px 1rem;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		max-width: 1400px;
		margin: auto;
	}

	.nav_menu__logo {
		width: 225px;
		position: relative;
		z-index: 99999;

		a {
			img {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				width: 100%;
				max-width: 225px;
				transition: opacity $navHoverDelay;
				transform: translateY(-50%);

				&:nth-child(2) {
					opacity: 0;
				}
			}
		}
	}

	.nav_menu__nav {
		display: flex;
		align-items: center;

		.nav_menu__nav_arr {
			display: flex;
			flex-direction: row;
			column-gap: 30px;

			&.nav_menu__lvl_1 {
				.nav_menu__link {
					&.parent {
						&[link_status='true'] {
							.nav_menu__lvl_2 {
								max-height: 1000px;
								padding-top: 25px;
								padding-bottom: 50px;
								opacity: 1;

								.nav_menu__tile {
									opacity: 1;
									transition-delay: $navHoverDelay;
								}
							}

							.nav_menu__link__lvl_1 {
								color: $cTurquoise;
							}
						}
					}

					.nav_menu__link__lvl_1 {
						color: $cWhite;
						font-size: 0.875rem;
						font-weight: 600;
						letter-spacing: 0.025em;
						line-height: 1;
						text-transform: uppercase;
						transition: color $navHoverDelay;
						position: relative;
						z-index: 99999;
						cursor: pointer;

						&.nav_menu__link__btn {
							color: $cTurquoiseLight;
							padding: 11px 38px;
							background: $cWhite;
							border-radius: 7px;
							transition: background $navHoverDelay,
								color $navHoverDelay;
						}
					}
				}
			}

			.nav_menu__lvl_2 {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				padding-right: 80px;
				padding-left: 80px;
				background: $cWhite;
				max-height: 0;
				overflow: hidden;
				box-shadow: 0px 6px 28px rgba(0, 0, 0, 0.25);
				opacity: 0;
				transition: $navHoverDelay linear;

				display: grid;
				grid-template-columns: repeat(auto-fit, 300px);
				justify-content: center;
				gap: 80px;
			}

			.nav_menu__tile {
				position: relative;
				opacity: 0;
				transition: 150ms linear;

				&:not(:last-child):not(:nth-child(4n)) {
					&::before {
						content: '';
						position: absolute;
						right: -40px;
						top: 0;
						bottom: 0;
						width: 1px;
						border-radius: 2px;
						background: $cTurquoiseLight;
					}
				}

				.nav_menu__tile__link {
					.nav_menu__tile__inner {
						display: flex;
						flex-direction: row;
						column-gap: 30px;

						.nav_menu__tile__icon {
						}

						.nav_menu__tile__data {
							.nav_menu__tile__title {
								color: $cBlack;
								font-size: 0.875rem;
								font-weight: 600;
								letter-spacing: 0.025em;
								line-height: 1.25;
								margin-bottom: 7px;
							}

							.nav_menu__tile__text {
								display: none;
								color: $cGrayNavText;
								font-size: 0.75rem;
								font-weight: 400;
								line-height: 1;
							}
						}
					}
				}
			}
		}

		&.active_mobile {
			height: calc(100% + 2px);
			width: calc(100% + 2px);
			padding: 10px;
			opacity: 1;
		}
	}

	.nav_menu__hamburger {
		display: flex;
		align-items: center;
		height: fit-content;
		overflow: hidden;
		height: 32px;
		z-index: 99999999;

		&.active {
			.nav_menu__hamburger_wrapper {
				span {
					background: linear-gradient(
						262.15deg,
						$cTurquoiseLight 42.14%,
						$cTurquoiseDark 94.58%
					);

					&:nth-child(1) {
						transform: rotate(45deg) translate(10px, 10px);
					}

					&:nth-child(2) {
						transform: translateX(-100%);
					}

					&:nth-child(3) {
						transform: rotate(-45deg) translate(4px, -5px);
					}
				}
			}
		}

		.nav_menu__hamburger_wrapper {
			cursor: pointer;

			span {
				display: block;
				width: 32px;
				height: 2px;
				border-radius: 4px;
				background: $cWhite;
				transition: 250ms ease-in-out;

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

	@media (max-width: 1650px) {
		.nav_menu__nav {
			.nav_menu__nav_arr {
				column-gap: 20px;
			}
		}
	}

	@media (min-width: 1301px) {
		.nav_menu__hamburger {
			display: none;
		}
	}

	@media (max-width: 1300px) {
		.nav_menu__nav {
			position: fixed;
			top: calc(50% - 1px);
			bottom: 0;
			left: 50%;
			right: 0;
			opacity: 0;
			height: 0;
			width: 0;
			background: $cWhite;
			justify-content: center;
			transform: translate(-50%, -50%);
			transition: all 0.25s ease-in-out;
			overflow: hidden;
			z-index: 99999;

			.nav_menu__nav_arr {
				flex-direction: column;

				&.nav_menu__lvl_1 {
					.nav_menu__link {
						&:not(:last-child) {
							border-bottom: 1px solid rgba(171, 171, 171, 0.2);
						}

						&.parent {
							.nav_menu__link__lvl_1 {
								position: relative;

								&::before {
									content: '\f105';
									font-family: FontAwesome, sans-serif;
									position: absolute;
									right: 0;
									transition: all 250ms ease-in-out;
								}
							}

							&[link_status='true'] {
								.nav_menu__link__lvl_1 {
									&::before {
										transform: rotate(90deg);
									}
								}

								.nav_menu__lvl_2 {
									max-height: 300px;
								}
							}

							.nav_menu__lvl_2 {
								box-shadow: none;
								gap: 0;
								padding: 0 0 0 20px !important;

								.nav_menu__tile__link {
									display: block;
									padding: 12px 0 12px 20px;

									.nav_menu__tile__inner {
										.nav_menu__tile__icon {
											display: none;
										}

										.nav_menu__tile__title {
											margin-bottom: 0;
										}
									}
								}
							}
						}

						.nav_menu__link__lvl_1 {
							color: $cBlack;

							&:not(.nav_menu__link__btn) {
								display: block;
								padding: 20px;
							}

							&.nav_menu__link__btn {
								display: block;
								margin-top: 20px;
								text-align: center;
								color: $cWhite !important;
								background: linear-gradient(
									262.15deg,
									$cTurquoiseLight 42.14%,
									$cTurquoiseDark 94.58%
								);
							}
						}

						&.parent {
							.nav_menu__lvl_2 {
								position: relative;
							}
						}
					}
				}
			}
		}
	}

	@media (max-width: 991px) {
		.nav_menu__inner {
			max-width: 738px;
		}
	}
}

//* Head page text
.head_text {
	.scontainer-content {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 25px;

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

		h2 {
			font-weight: 600;
			font-size: 2.75rem;
			background: linear-gradient(
				262.15deg,
				$cTurquoiseLight 42.14%,
				$cTurquoiseDark 94.58%
			);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			text-fill-color: transparent;

			@include respond-below(sm) {
				font-size: 1.75rem;
			}
		}

		p {
			font-size: 1rem;
			font-weight: 400;
		}

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

		._col-2 {
			width: 100%;
			max-width: 688px;

			@include respond-below(sm) {
				text-align: left;
			}
		}
	}
}

//* Pierwszy blok na stronie
.boxPageHead {
	.page_title {
		font-weight: 700 !important;
		font-size: 2rem !important;
		line-height: 1.25 !important;
		margin-bottom: 20px;
		background: linear-gradient(
			262.15deg,
			$cTurquoiseLight 42.14%,
			$cTurquoiseDark 94.58%
		);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-fill-color: transparent;

		@include respond-below(sm) {
			font-size: 1.5rem !important;
		}
	}
}

//* Footer
footer#footer {
	.footer_map {
		height: 305px;
	}

	.footer_data {
		padding-top: 125px;
		padding-bottom: 45px;
		background: #061b26;
	}

	.footer_top {
		margin-bottom: 45px;

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

			.footerCol {
				color: $cWhite;
				padding-left: 15px;

				h5 {
					font-weight: 700;
					font-size: 1.125rem;
					margin-bottom: 25px;
				}

				a,
				p {
					color: $cWhite;
					font-weight: 400;
					font-size: 0.85rem;
				}

				&.footerCol_1 {
					.footerCol__menu {
						display: flex;
						flex-direction: column;
						gap: 5px;
					}
				}

				&.footerCol_2 {
					.footerCol__menu {
						display: grid;
						grid-template-columns: 1fr 1fr;
						gap: 5px;
					}
				}

				&.footerCol_3 {
					a {
						font-size: 1rem;
						font-weight: 600;
					}

					> div {
						display: flex;
						flex-direction: column;
						gap: 5px;
					}

					.footerCol_3__row_1 {
						margin-bottom: 20px;
					}
				}

				&.footerCol_4 {
					> div {
						display: flex;
						flex-direction: column;
						gap: 5px;
					}

					.footerCol_4__row_1 {
						margin-bottom: 20px;
					}
				}

				&.footerCol_5 {
					.footerCol__title {
						display: flex;
						flex-direction: row;
						gap: 20px;
					}
				}

				.footerCol__title {
					position: relative;

					&::before {
						content: '';
						position: absolute;
						left: -15px;
						top: 0;
						width: 2px;
						border-radius: 3px;
						height: 100%;
						background: $cTurquoiseLight;
					}
				}
			}
		}
	}

	.footer_bottom {
		text-align: center;
	}

	@media (max-width: 1199px) {
		.footer_data {
			padding-top: 60px;
		}

		.footer_top {
			.footer_top__wrapper {
				display: grid;
				grid-template-columns: repeat(auto-fit, 300px);
				justify-content: center;
				row-gap: 50px;
			}
		}
	}
}

//* Paginacja
.pager {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 15px;
	line-height: 1;
	grid-column: 1;

	li {
		position: relative;
		width: 30px;
		height: 30px;
		border-radius: 30px;
		background: $cWhite;

		&::before {
			content: '';
			position: absolute;
			left: -3px;
			right: -3px;
			bottom: -3px;
			top: -3px;
			background: linear-gradient(
				262.15deg,
				$cTurquoiseLight 50%,
				$cTurquoiseDark 100%
			);
			border-radius: 30px;
			z-index: -1;
		}

		&.pager__text {
			width: 100px;
			display: flex;
			align-items: center;
			justify-content: center;

			span {
				font-size: 20px;
				background: linear-gradient(
					262.15deg,
					$cTurquoiseLight 42.14%,
					$cTurquoiseDark 94.58%
				);

				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
				text-fill-color: transparent;
			}
		}

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

			i {
				background: linear-gradient(
					262.15deg,
					$cTurquoiseLight 42.14%,
					$cTurquoiseDark 94.58%
				);

				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
				text-fill-color: transparent;
			}

			&.pager__back {
				i {
					font-size: 18px;
				}
			}

			&.pager__last {
				i {
					font-size: 16px;
				}
			}
		}
	}
}

//* --- Pages --- *//

//* Home "page"
#page-10 {
	#scontainer-1 {
		width: 100%;
		max-width: 584px;

		h3 {
			color: $cWhite;
			margin-bottom: 20px;
			font-size: 4rem;
			line-height: 1.25;
		}

		p {
			width: 100%;
			max-width: 500px;
			color: $cWhite;
			font-weight: 300;
			font-size: 1rem;
			margin-bottom: 50px;
		}

		@media (max-width: 767px) {
			h3 {
				font-size: 3.5rem;
				line-height: 76px;
			}
		}

		@media (max-width: 576px) {
			h3 {
				font-size: 3rem;
				line-height: 66px;
			}
		}
	}

	#scontainer-2 {
		h1 {
			font-weight: 600;
		}
	}

	.box-02 {
		padding-top: 100px;
		padding-bottom: 140px;

		.box-02-wrapper {
			display: flex;
			flex-direction: row;
			column-gap: 100px;

			._col-1 {
				width: 100%;
				max-width: 418px;

				h1 {
					font-size: 2.5rem;
					line-height: 1.25;
					width: 100%;
					max-width: 355px;
					margin-bottom: 40px;
				}

				p {
					margin-bottom: 35px;
				}
			}

			._col-2 {
				display: flex;
				flex-direction: column;
				gap: 90px;

				& > div {
					position: relative;

					&:not(:last-child) {
						&::before {
							content: '';
							position: absolute;
							bottom: -30px;
							width: 100%;
							height: 1px;
							background: $cTurquoiseLight;
						}
					}
				}

				.scontainer-content {
					display: grid;
					grid-template-columns: 100px 225px auto;
					gap: 80px;
					margin-left: 50px;
				}

				.tile-title {
					h2 {
						color: $cTurquoiseDark;
						font-size: 1.25rem;
						margin-bottom: 7px;

						a {
							color: $cTurquoiseDark;
						}
					}

					h6 {
						font-weight: 500;
						font-size: 0.85rem;
					}
				}

				.tile-data {
					font-size: 0.95rem;

					p {
						font-weight: 400;
					}
				}
			}
		}

		@media (max-width: 1532px) {
			.box-02-wrapper {
				flex-direction: column;
				gap: 70px;

				._col-1 {
					max-width: unset;

					h1 {
						max-width: unset;
					}
				}

				._col-2 {
					.scontainer-content {
						margin-left: 0;
					}
				}
			}
		}

		@media (max-width: 991px) {
			.box-02-wrapper {
				._col-2 {
					.scontainer-content {
						grid-template-columns: 100px auto;
						column-gap: 50px;
						row-gap: 20px;
						grid-template-areas:
							'tile-icon tile-title'
							'tile-data tile-data';

						.tile-icon {
							grid-area: tile-icon;
						}

						.tile-title {
							grid-area: tile-title;
						}

						.tile-data {
							grid-area: tile-data;
						}
					}
				}
			}
		}

		@media (max-width: 576px) {
			.box-02-wrapper {
				._col-2 {
					.scontainer-content {
						grid-template-columns: 65px auto;
					}
				}
			}
		}
	}

	.box-03 {
		background: rgb(3, 105, 104);
		background: linear-gradient(
			90deg,
			rgba(3, 105, 104, 1) 0%,
			rgba(6, 136, 134, 1) 35%,
			rgba(1, 164, 155, 1) 100%
		);
		display: flex;
		align-items: center;
		padding-bottom: 0;
		margin-bottom: 75px;

		.box-03-wrapper {
			padding-bottom: 0;

			.scontainer-content {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 100px;
			}

			._col-1 {
				img {
					width: 100%;
					border-radius: 20px;
					margin-top: -25px;
					margin-bottom: -25px;
				}
			}

			._col-2 {
				width: 100%;
				max-width: 568px;
				padding-top: 50px;
				padding-bottom: 44px;

				h3 {
					color: #fff;
					font-weight: 600;
					margin-bottom: 15px;
				}

				h2 {
					color: $cWhite;
					font-size: 1.5rem;
					margin-bottom: 15px;
					font-weight: 600;
				}

				p {
					color: $cWhite;
				}
			}
		}

		@media (max-width: 991px) {
			margin-bottom: 100px;
			background: radial-gradient(
				circle,
				$cTurquoiseLight 24%,
				$cTurquoiseDark 63%
			);

			.box-03-wrapper {
				padding: 50px 0;

				.scontainer-content {
					flex-direction: column;
					gap: 20px;
				}

				._col-1 {
					max-height: 250px;
					overflow: hidden;
					display: flex;
					align-items: center;
					border-radius: 20px;
				}

				._col-2 {
					max-width: unset;
				}
			}
		}
	}

	.box-08 {
		margin-bottom: 150px;

		@media (max-width: 991px) {
			margin-bottom: 100px;
		}
	}

	//* Hero box - home page
	.box-header-1 {
		position: relative;
		// background-color: rgba($cTurquoiseDark, 0.7);
		background: url('/images/main-page-hero.webp') no-repeat center;
		background-size: cover;
		height: 100vh;
		// min-height: 1000px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		overflow: hidden;

		.box-header-1_wrapper {
			display: flex;
			flex-direction: row;

			#box_blob {
				width: 100%;
			}
		}

		.scroll_down_anim {
			position: absolute;
			bottom: 50px;
			left: 0;
			right: 0;
			text-align: center;
			animation: scroll_down_anim 2.5s infinite linear;
		}

		.socioal_box {
			position: absolute;
			right: 35px;
			bottom: 50px;
			display: flex;
			flex-direction: row;
			gap: 30px;
		}
	}

	@keyframes scroll_down_anim {
		0% {
			transform: translateY(0px);
		}

		50% {
			transform: translateY(10px);
		}
	}

	#hero_anim_bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
	}

	@media (max-width: 1200px) {
		#scontainer-1 {
			max-width: unset;
		}

		.box-header-1 {
			.box-header-1_wrapper {
				#box_blob {
					display: none;
				}
			}
		}
	}
}

//* O nas "page"
#page-2 {
	header {
		min-height: 750px;
		background-image: url('/upload/filemanager/Project-Design/o-nas/o-nas-header-bg.png');
		background-repeat: no-repeat;
		background-position: bottom;
		background-size: cover;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 180px;

		.header_wrapper {
			text-align: center;
			width: 100%;
			max-width: 540px;
			margin: 70px auto 0;

			h1 {
				color: $cWhite;
				font-weight: 600;
				font-size: 1.125rem;
				line-height: 18px;
				margin-bottom: 20px;
				text-transform: uppercase;
			}

			h2 {
				color: $cWhite;
				font-weight: 700;
				font-size: 4rem;
				line-height: 1.25;
				margin-bottom: 40px;
			}

			p {
				position: relative;
				color: $cWhite;
				font-weight: 600;
				font-size: 1.125rem;
				line-height: 18px;
				text-transform: uppercase;

				&:not(:last-child) {
					&::before {
						content: '';
						position: absolute;
						top: 50%;
						bottom: 0;
						right: -32px;
						width: 3px;
						height: 3px;
						border-radius: 20px;
						background: $cWhite;
						transform: translateY(-50%);
					}
				}
			}

			.header_tags {
				display: flex;
				align-items: center;
				justify-content: center;
				column-gap: 63px;
			}
		}

		@media (max-width: 767px) {
			min-height: 600px;
			margin-bottom: 100px;

			.header_wrapper {
				h1 {
					font-size: 1rem;
				}

				h2 {
					font-size: 3rem;
					line-height: 68px;
				}
			}
		}
	}

	.box-01 {
		padding-top: 0;

		._row {
			display: grid;
			grid-template-columns: 375px 1fr;
			// display: flex;
			// flex-direction: row;
			gap: 100px;

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

			._col-1 {
				height: fit-content;

				img {
					width: 100%;
				}
			}

			._col-2 {
				width: 100%;
				max-width: 688px;
			}
		}

		.box-01_tile {
			position: relative;

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

			&:not(:last-child) {
				&::before {
					content: '';
					position: absolute;
					bottom: 37px;
					width: 100%;
					height: 1px;
					background: $cTurquoiseLight;
				}
			}
		}

		h2 {
			font-weight: 700;
			font-size: 2.5rem;
			line-height: 1.25;
			margin-bottom: 40px;
		}

		h3 {
			color: $cTurquoiseLight;
			font-weight: 700;
			font-size: 2rem;
			line-height: 1.25;
			margin-bottom: 25px;
		}

		p {
			font-weight: 400;
		}

		@media (max-width: 1531px) {
			._row {
				._col-1 {
					width: 100%;
					max-width: 500px;

					img {
						width: 100%;
					}
				}
			}
		}

		@media (max-width: 991px) {
			._row {
				flex-direction: column;
				gap: 30px;

				._col-1 {
					max-width: unset;

					img {
						width: 100%;
					}
				}
			}
		}

		@media (max-width: 767px) {
			h3 {
				font-size: 1.5rem;
			}
		}
	}

	.box-02 {
		._row {
			width: 100%;
			max-width: 1290px;
			margin: 0 auto;
		}

		#scontainer-18 {
			position: relative;
			color: $cTurquoiseDark;
			font-weight: 500;
			font-size: 2rem;

			&::before {
				content: url('/upload/filemanager/Project-Design/icons/pc-icon.svg');
				position: absolute;
				left: -10px;
				bottom: -30px;
				animation: icon-levitation 3.5s linear infinite;
			}

			&::after {
				content: url('/upload/filemanager/Project-Design/icons/code-icon.svg');
				position: absolute;
				right: 7%;
				bottom: -60px;
				animation: icon-levitation 4.5s linear infinite;
			}

			#scontainer-18-content {
				position: relative;

				&::before {
					content: url('/upload/filemanager/Project-Design/icons/lens-icon.svg');
					position: absolute;
					right: 25%;
					top: -80px;
					animation: icon-levitation 4s linear infinite;
				}
			}

			span {
				position: relative;
				width: fit-content;
				margin: 0 auto;

				&::before {
					content: '';
					position: absolute;
					bottom: -5px;
					width: 100%;
					height: 3px;
					background: $cTurquoiseLight;
				}
			}

			@keyframes icon-levitation {
				0% {
					transform: translateY(0);
				}

				25% {
					transform: translateY(10px);
				}

				75% {
					transform: translateY(-10px);
				}
			}
		}

		@media (max-width: 991px) {
			#scontainer-18 {
				font-size: 1.75rem;
			}
		}

		@media (max-width: 576px) {
			#scontainer-18 {
				font-size: 1.25rem;

				span {
					display: inline;

					&::before {
						content: none;
					}
				}
			}
		}
	}

	.box-03 {
		display: none;
		margin-bottom: 240px;

		#scontainer-19 {
			h2 {
				font-weight: 600;
				font-size: 2.25rem;
				line-height: 36px;
				margin-bottom: 70px;
			}

			.our_team {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				column-gap: 30px;

				.team {
					img {
						width: 100% !important;
						max-width: 448px !important;
						margin-bottom: 10px;
						border-radius: 24px;
					}

					p {
						font-weight: 500;
						font-size: 1rem;

						strong {
							font-weight: 600;
							font-size: 1.5rem;
							line-height: 24px;
						}
					}
				}
			}
		}
	}
}

//* Realizacje "page"
#page-6 {
	.page_content {
		padding-top: 200px;

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

	.box-02 {
		.realization_cards {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 440px;
			column-gap: 32px;
			row-gap: 100px;

			.article-entry {
				pointer-events: none;

				.main-image {
					margin-bottom: 35px;
					display: block;

					img {
						height: 100%;
						max-height: 325px;
					}
				}

				.article-data {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: flex-start;
					padding: 0 15px;

					.entry {
						margin: 0;

						p {
							font-weight: 600;
							font-size: 1.75rem;
						}
					}

					.more {
						display: flex;
						display: none;
					}
				}
			}
		}
	}

	@media (max-width: 1199px) {
		.box-02 {
			.realization_cards {
				row-gap: 50px;

				.article-entry {
					.article-data {
						.entry {
							p {
								font-size: 2rem;
							}
						}
					}

					.article-data {
						a {
							img {
								width: 50px;
							}
						}
					}
				}
			}
		}
	}

	@media (max-width: 991px) {
		.box-02 {
			.realization_cards {
				grid-template-rows: auto;

				.article-entry {
					.main-image {
						margin-bottom: 15px;
					}

					.article-data {
						.entry {
							p {
								font-size: 1.5rem;
							}
						}
					}

					.article-data {
						a {
							img {
								width: 45px;
							}
						}
					}
				}
			}
		}
	}

	@media (max-width: 767px) {
		.box-02 {
			.realization_cards {
				grid-template-columns: 1fr;
			}
		}
	}
}

//! Realizacje pod strony
.realizacja-article {
	overflow: hidden;
	margin-bottom: 150px;

	.header_hero {
		.header_hero__wrapper {
			.header_hero__text {
				margin-bottom: 20px;
			}
		}
	}

	.box_title {
		font-weight: 600;
		font-size: 2.25rem;
		line-height: 36px;
		background: linear-gradient(
			262.15deg,
			$cTurquoiseLight 50%,
			$cTurquoiseDark 100%
		);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-fill-color: transparent;
		margin-bottom: 25px;
	}

	//* Custom ul
	ul {
		li {
			position: relative;
			padding-left: 30px;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 12px;
				width: 9px;
				height: 9px;
				transform: translateY(-50%);
				border-radius: 3px;
				background: linear-gradient(
					0deg,
					#123b54 0%,
					#0f4b5e 20%,
					#09737a 58%,
					#00a79d 100%
				);
			}
		}
	}

	.row {
		display: flex;
		flex-direction: row;
		gap: 120px;

		&.d-block {
			display: block !important;
		}

		&.full-width {
			width: 100vw;
			margin-left: 50%;
			transform: translateX(-50%);
		}

		.col-6 {
			width: 100%;
			max-width: 50%;
		}
	}

	.btn-2 {
		column-gap: 20px;
	}

	.btn-all {
		color: $cTurquoiseDark2;
		font-weight: 600;
		font-size: 0.875rem;
		line-height: 17px;
		text-decoration-line: underline;
	}

	.realizationBox {
		margin: 110px 0;
		position: relative;

		.realizationBox__wrapper {
			background-image: url('/upload/filemanager/Project-Design/realizacje/kopalnia-piasku-rakszawa/img3.jpg');
			background-size: cover;
			background-position: center;
			position: relative;
			border-radius: 24px;
			padding: 27px;
			width: 100%;
			max-width: 930px;
			display: flex;
			align-items: center;
			justify-content: center;
			justify-content: space-around;
			column-gap: 50px;
			margin: 0 auto;

			&::before {
				content: url('/upload/filemanager/Project-Design/icons/pc-icon.svg');
				position: absolute;
				right: -20%;
				top: 0;
				animation: icon-levitation 3.5s linear infinite;
			}
		}

		&::before {
			content: url('/upload/filemanager/Project-Design/icons/lens-icon.svg');
			position: absolute;
			left: 10%;
			top: 30%;
			animation: icon-levitation 4s linear infinite;
		}

		&::after {
			content: url('/upload/filemanager/Project-Design/icons/code-icon.svg');
			position: absolute;
			right: 10%;
			bottom: 40px;
			animation: icon-levitation 4.5s linear infinite;
		}
	}

	.realizationNav {
		margin-top: -7px;
		background: #f5f5f5;
		padding: 40px 0;
		display: flex;
		align-items: center;
		justify-content: center;
		column-gap: 80px;
	}
}

//* Realizacje "Kopalnia Piasku Rakszawa"
#article-9 {
	.header_hero {
		background-image: url('/upload/filemanager/Project-Design/realizacje/kopalnia-piasku-rakszawa/hero-bg.jpg');
	}
}

//* Blog "page"
#page-7 {
	.page_content {
		padding-top: 200px;

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

	.box-03 {
		.posts_arr {
			display: grid;
			grid-template-columns: repeat(auto-fit, 446px);
			column-gap: 30px;
			row-gap: 80px;
		}
	}

	@media (max-width: 1531px) {
		.box-03 {
			.posts_arr {
				grid-template-columns: repeat(auto-fit, 352px);

				.article-entry {
					.main-image {
						img {
							height: 250px;
						}
					}
				}
			}
		}
	}

	@media (max-width: 1199px) {
		.box-01 {
			.head_text {
				.scontainer-content {
					flex-direction: column;
					align-items: flex-start;
				}
			}
		}

		.box-03 {
			.posts_arr {
				grid-template-columns: 1fr 1fr;
				row-gap: 50px;
			}
		}
	}

	@media (max-width: 767px) {
		.box-03 {
			.posts_arr {
				grid-template-columns: 1fr;
			}
		}
	}
}

//* Tworzenie stron WWW "page"
#page-22 {
	.box-01 {
		padding-top: 0;

		#scontainer-35 {
			margin-bottom: 25px;
		}
	}

	.box-coZyskasz {
		background-color: #fafafa;
	}

	h2 {
		font-weight: 600;
		font-size: 1.5rem;
		line-height: 29px;
		margin-bottom: 20px;
	}

	.box-02 {
		#scontainer-37 {
			.scontainer-content {
				display: grid;
				grid-template-columns: repeat(auto-fill, 320px);
				gap: 80px;
				width: 100%;
				max-width: 1120px;
				margin: 0 auto;
				justify-content: center;

				@include respond-below(md) {
					grid-template-columns: repeat(auto-fill, 280px);
					gap: 50px;
				}

				img {
					height: 90px;
				}
			}
		}
	}

	.box-04 {
		.colsInfoBox {
			img {
				object-fit: contain;
			}
		}
	}

	@media (max-width: 1199px) {
		.box-03 {
			.colsInfoBox {
				.scontainer-content {
					.col_2 {
						grid-row-start: 1;
					}
				}
			}
		}

		.box-04 {
			.colsInfoBox {
				.scontainer-content {
					.col_2 {
						img {
							max-width: 500px;
						}
					}
				}
			}
		}
	}
}

//* Projektowanie sklepów internetowych "page"
#page-23 {
	.box-01 {
		padding-top: 0;
	}

	h2 {
		font-weight: 600;
		font-size: 1.5rem;
		line-height: 29px;
		margin-bottom: 20px;
	}

	.header_hero {
		background-image: url('/upload/filemanager/Project-Design/projektowanie-sklepow-internetowych/projektowanie-sklepow-internetowych.jpg');
	}

	.box-01 {
		#scontainer-42 {
			width: 100%;
			max-width: 1050px;
			margin-bottom: 70px;
		}

		#scontainer-43 {
			width: 100%;
			max-width: 800px;
		}
	}

	.box-02 {
		#scontainer-44 {
			.scontainer-content {
				display: grid;
				grid-template-columns: repeat(auto-fill, 390px);
				row-gap: 55px;
				column-gap: 120px;
				width: 100%;
				max-width: 1120px;
				margin: 0 auto;
				justify-content: center;

				@include respond-below(lg) {
					grid-template-columns: repeat(auto-fill, 325px);
					column-gap: 50px;
				}

				@include respond-below(md) {
					grid-template-columns: repeat(auto-fill, 280px);
				}
			}
		}
	}

	.box-03 {
		#scontainer-45 {
			.col_1 {
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			ul {
				width: 100%;
				max-width: 600px;
			}
		}
	}

	@media (max-width: 1199px) {
		.box-03 {
			.colsInfoBox {
				.scontainer-content {
					.col_2 {
						grid-row-start: 1;

						img {
							max-height: 400px;
						}
					}
				}
			}
		}

		.box-04 {
			.colsInfoBox {
				.scontainer-content {
					.col_2 {
						img {
							max-width: 500px;
						}
					}
				}
			}
		}
	}
}

//* Systemy zarządzania treścią (CMS) "page"
#page-24 {
	.box-01,
	.box-05,
	.box-04 {
		padding-top: 0;
	}

	h2 {
		font-weight: 600;
		font-size: 1.5rem;
		line-height: 29px;
		margin-bottom: 20px;
	}

	.header_hero {
		background-image: url('/upload/filemanager/Project-Design/systemy-zarzadzania-trescia-cms/systemy-zarzadzania-trescia-CMS.jpg');
	}

	.box-01 {
		#scontainer-47 {
			width: 100%;
			max-width: 1050px;

			h2 {
				width: 100%;
				max-width: 680px;
			}
		}

		#scontainer-48 {
			width: 100%;
			max-width: 800px;
		}
	}

	.box-02 {
		#scontainer-49 {
			.scontainer-content {
				> div {
					display: flex;
					flex-wrap: wrap;
					column-gap: 170px;
				}
			}
		}
	}

	.box-03 {
		text-align: center;
		padding-bottom: 0;
	}

	.box-04 {
		min-height: 628px;
		position: relative;
		text-align: center;

		.scontainer-content {
			& > img {
				position: absolute;
				z-index: 10;
				left: 50%;
				top: 0;
				transform: translateX(-50%);
			}

			.splide {
				width: 100%;
				max-width: 730px;
				margin: 0 auto;
				padding-top: 33px;

				.splide__arrows {
					bottom: -75px;
					position: absolute;
					left: 50%;

					.splide__arrow {
						background: transparent;
						font-size: 20px;

						&.splide__arrow--prev {
							color: $cTurquoiseLight;
							left: -50px;
							right: 0;
							transform: translateX(-50%);
						}

						&.splide__arrow--next {
							color: $cTurquoiseLight;
							left: 50px;
							right: 0;
							transform: translateX(-50%);
						}
					}
				}
			}
		}

		#scontainer-51 {
			.splide__slide {
				width: 100%;
			}
		}
	}

	@media (max-width: 991px) {
		.box-04 {
			.scontainer-content {
				.splide {
					.splide__arrows {
						bottom: -20px;
					}
				}
			}

			#scontainer-51 {
				.scontainer-content {
					& > img {
						display: none;
					}
				}
			}
		}
	}

	@media (max-width: 767px) {
		.box-04 {
			min-height: unset;
		}
	}
}

//* Obsługa istniejących stron "page"
#page-25 {
	.box-01 {
		padding-top: 0;
	}

	h2 {
		font-weight: 600;
		font-size: 1.5rem;
		line-height: 29px;
		margin-bottom: 20px;
	}

	.header_hero {
		background-image: url('/upload/filemanager/Project-Design/obsuga-istniejcych-stron/obsluga-istniejacych-stron.jpg');
	}

	.box-03 {
		padding-bottom: 0;

		.box-03__wrapper {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			gap: 30px;
			justify-content: center;

			#scontainer-55,
			#scontainer-56,
			#scontainer-57 {
				width: calc(100% / 3 - 30px);

				@include respond-below(lg) {
					width: calc(100% / 2 - 30px);
				}

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

			table {
				background: $cWhite;
				box-shadow: 1.5px 2.5px 10.5px rgba(120, 120, 120, 0.25);
				border-radius: 17px;
				overflow: hidden;

				thead {
					tr {
						th {
							color: $cWhite;
							font-weight: 600;
							font-size: 18px;
							line-height: 22px;
							text-align: center;
							text-transform: uppercase;
							padding: 27px 0;

							background: #0e5364;
						}
					}
				}

				tbody {
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 25px;
					padding: 25px;

					tr {
						&:nth-child(1) {
							font-weight: 600;
							font-size: 36px;
							line-height: 43px;
							background: linear-gradient(
								0deg,
								#123b54 0%,
								#0f4b5e 20%,
								#09737a 58%,
								#00a79d 100%
							);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							background-clip: text;
							text-fill-color: transparent;

							h4 {
								font-size: 1.75rem;

								@include respond-below(md) {
									font-size: 1.5rem;
								}
							}
						}

						&.table__priority {
							color: #09737a;
						}
					}
				}
			}

			#scontainer-55 {
				table {
					thead {
						tr {
							th {
								background: #0e5364;
							}
						}
					}
				}
			}

			#scontainer-56 {
				table {
					thead {
						tr {
							th {
								background: #09737a;
							}
						}
					}
				}
			}

			#scontainer-57 {
				table {
					thead {
						tr {
							th {
								background: #00a79d;
							}
						}
					}
				}
			}
		}
	}

	@media (max-width: 1199px) {
		.box-02 {
			.colsInfoBox {
				.scontainer-content {
					.col_2 {
						grid-row-start: 1;

						img {
							max-height: 400px;
						}
					}
				}
			}
		}
	}

	@media (max-width: 767px) {
		.box-03 {
			.box-03__wrapper {
				table {
					thead {
						tr {
							th {
								font-size: 16px;
								padding: 18px 0;
							}
						}
					}

					tbody {
						padding: 30px 35px 30px;

						tr {
							td {
								h4 {
									font-size: 1.875rem;
								}
							}
						}
					}
				}
			}
		}
	}
}

//* Pozycjonowanie stron internetowych "page"
#page-26 {
	.box-01,
	.box-02 {
		padding-top: 0;
	}

	h2 {
		font-weight: 600;
		font-size: 1.5rem;
		line-height: 29px;
		margin-bottom: 20px;
	}

	.header_hero {
		background-image: url('/upload/filemanager/Project-Design/pozycjonowanie-stron-internetowych/pozycjonowanie-stron-internetowych.jpg');
	}

	.box-04 {
		#scontainer-62 {
			.scontainer-content {
				display: grid;
				grid-template-columns: repeat(auto-fill, 350px);
				gap: 50px;
				width: 100%;
				margin: 0 auto;
				justify-content: center;

				@include respond-below(md) {
					grid-template-columns: repeat(auto-fill, 280px);
				}

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

	@media (max-width: 1199px) {
		.box-05 {
			.colsInfoBox {
				.scontainer-content {
					.col_2 {
						grid-row-start: 1;

						img {
							max-height: 400px;
						}
					}
				}
			}
		}
	}
}

//* Pozycjonowanie lokalne "page"
#page-27 {
	.box-01,
	.box-02 {
		padding-top: 0;
	}

	font-weight: 400;

	.header_hero {
		background-image: url('/upload/filemanager/Project-Design/pozycjonowanie-lokalne/hero-pozycjonowanie-lokalne.jpg');
	}

	h2 {
		font-weight: 600;
		font-size: 1.5rem;
		line-height: 29px;
		margin-bottom: 20px;
	}

	.box-03 {
		#scontainer-68 {
			ul.type2 {
				li {
					font-weight: 400;

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

	.box-05 {
		#scontainer-70 {
			img {
				display: block;
				margin: 0 auto 50px;
			}
		}
	}

	.box-06 {
		#scontainer-71 {
			h2 {
				margin-bottom: 70px;
			}

			.zaletyPozycjonowania {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				row-gap: 50px;
				column-gap: 50px;

				.zaletyPozycjonowania__tile {
					img {
						margin-bottom: 20px;
					}

					h3 {
						color: $cTurquoiseLight;
						font-weight: 600;
						font-size: 1.125rem;
						text-transform: uppercase;
						margin-bottom: 10px;
					}
				}

				.zaletyPozycjonowania__tile_1 {
					width: 100%;
					max-width: calc(100% / 2 - 25px);

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

				.zaletyPozycjonowania__tile_2 {
					width: 100%;
					max-width: calc(100% / 2 - 25px);

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

				.zaletyPozycjonowania__tile_3 {
					width: 100%;
				}
			}
		}
	}

	.box-07 {
		#scontainer-72 {
			.scontainer-content {
				align-items: flex-start;

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

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

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

			h2 {
				margin-bottom: 50px;
			}

			ul {
				li {
					font-size: 1rem;
					font-weight: 400;

					&::before {
						font-size: 1.375rem;
					}

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

					p {
						font-size: 1.25rem;
						margin-bottom: 10px;

						strong {
							font-weight: 600;
						}
					}
				}
			}
		}
	}

	@media (max-width: 1199px) {
		.box-03 {
			.colsInfoBox {
				.scontainer-content {
					.col_2 {
						grid-row-start: 1;

						img {
							max-height: 400px;
						}
					}
				}
			}
		}

		.box-07 {
			.colsInfoBox {
				.scontainer-content {
					.col_2 {
						grid-row-start: 1;
						text-align: center;

						img {
							max-height: 400px;
						}
					}
				}
			}
		}
	}
}

//* Pozycjonowanie long tail "page"
#page-28 {
	.box-01 {
		padding-top: 0;
	}

	h2 {
		font-weight: 600;
		font-size: 1.5rem;
		line-height: 29px;
		margin-bottom: 20px;
	}

	.header_hero {
		background-image: url('/upload/filemanager/Project-Design/pozycjonowanie-long-tail/hero-pozycjonowanie-long-tail.jpg');
	}

	.box-02 {
		padding-bottom: 0;
	}

	.box-03 {
		#scontainer-77 {
			text-align: center;

			img {
				border-radius: 17px;
			}
		}
	}

	.box-06 {
		#scontainer-80 {
			.scontainer-content {
				align-items: flex-start;
				grid-template-columns: 1fr 500px;
				gap: 50px;

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

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

			.col_1 {
				@include respond-below(md) {
					order: 2;
				}
			}

			.col_2 {
				@include respond-below(md) {
					order: 1;

					img {
						height: 300px;
					}
				}
			}

			ul {
				li {
					&::before {
						font-size: 1.375rem;
					}

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

					p {
						font-size: 1.25rem;
						margin-bottom: 10px;

						strong {
							font-weight: 600;
						}
					}
				}
			}
		}
	}
}

//* Pozycjonowanie sklepów internetowych "page"
#page-29 {
	.box-coZyskasz {
		background-color: #fafafa;
	}

	.box-01 {
		padding-top: 0;
	}

	h2 {
		font-weight: 600;
		font-size: 1.5rem;
		line-height: 29px;
		margin-bottom: 20px;
	}

	.header_hero {
		background-image: url('/upload/filemanager/Project-Design/pozycjonowanie-sklepow-internetowych/Pozycjonowanie-sklepow-internetowych.jpg');
	}

	.box-03 {
		#scontainer-85 {
			.scontainer-content {
				align-items: flex-start;
				grid-template-columns: 1fr 500px;
				gap: 50px;

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

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

			ul {
				margin-top: 40px;

				li {
					font-weight: 400;

					&::before {
						top: 3px;
						font-size: 1.375rem;
					}

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

					p {
						font-size: 1.25rem;
						margin-bottom: 10px;

						strong {
							font-weight: 600;
						}
					}
				}
			}
		}
	}

	.box-06 {
		padding-bottom: 0;

		#scontainer-88 {
			font-weight: 600;
			font-size: 1.125rem;
			text-align: center;
			text-transform: uppercase;
		}
	}

	.box-07 {
		#scontainer-89 {
			.scontainer-content {
				display: flex;
				flex-direction: column;
				gap: 35px;
				align-items: center;

				.modelRozliczen {
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: center;
					width: 100%;
					max-width: 1000px;
					min-height: 135px;
					box-shadow: 1.52396px 2.53994px 10.6677px
						rgba(120, 120, 120, 0.25);
					border-radius: 17px;
					padding: 20px 20px 20px 100px;
					overflow: hidden;

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

					&::before {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
						width: 42px;

						@include respond-below(sm) {
							width: 25px;
						}
					}

					&:nth-child(1) {
						&::before {
							background: $cTurquoiseDark2;
						}
					}

					&:nth-child(2) {
						&::before {
							background: $cTurquoiseDark;
						}
					}

					&:nth-child(3) {
						&::before {
							background: $cTurquoiseLight;
						}
					}

					p {
						font-weight: 400;
						font-size: 1rem;

						strong {
							color: $cTurquoiseDark;
							font-weight: 600;
							font-size: 1.5rem;
							line-height: 29px;
							margin-bottom: 7px;
							display: block;
						}
					}
				}
			}
		}
	}

	@media (max-width: 1199px) {
		.box-03 {
			#scontainer-85 {
				.scontainer-content {
					.col_2 {
						grid-row-start: 1;
						text-align: center;

						img {
							max-height: 400px;
						}
					}
				}
			}
		}
	}
}

//* Social Media "page"
#page-30 {
	.box-01 {
		padding-top: 0;
	}

	.box-03 {
		padding-bottom: 0;

		h2 {
			text-align: center;
		}
	}

	h2 {
		font-weight: 600;
		font-size: 1.5rem;
		line-height: 29px;
		margin-bottom: 20px;
	}

	.header_hero {
		background-image: url('/upload/filemanager/Project-Design/social-media/Social-Media.jpg');
	}

	.box-04 {
		#scontainer-94 {
			.scontainer-content {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: center;
				column-gap: 50px;
				row-gap: 50px;

				.page_card {
					width: 100%;
					max-width: 280px;
				}
			}
		}
	}
}

//* Google Ads "page"
#page-44 {
	.pozycjonowanie_box {
		p {
			font-weight: 400;
			text-transform: initial;
		}
	}

	h2 {
		font-weight: 600;
		font-size: 1.5rem;
		line-height: 29px;
		margin-bottom: 20px;
	}

	.header_hero {
		background-image: url('/upload/filemanager/Project-Design/page-gogle-ads/page-hero.jpg');
	}

	.box-01 {
		#scontainer-184 {
			width: 100%;
			max-width: 1050px;
		}
	}

	.box-02 {
		.box-02-wrapper {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			gap: 50px;

			padding-bottom: 0;

			.pozycjonowanie_box {
				display: flex;
				align-items: center;
			}

			#scontainer-10 {
				min-width: 200px;

				img {
					border-radius: 20px;
					max-width: 200px;
				}

				p {
					margin: 0;
				}

				.fast_contact_image_data {
					text-align: center;
					margin-top: 10px;

					h2,
					h3 {
						font-weight: 600;
						font-size: 1.25rem;
						margin-bottom: 15px;
					}

					p {
						font-weight: 500;
						font-size: 1rem;
					}

					a {
						color: $cTextBlack;
						font-weight: 700;
						font-size: 1rem;

						&.contact_tel {
							color: $cTurquoise;
							font-weight: 600;
						}
					}
				}
			}

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

				#scontainer-10 {
					text-align: center;
				}
			}
		}
	}

	.box-08 {
		ul {
			margin-bottom: 40px;

			li {
				&::before {
					font-size: 1.375rem;
				}

				p {
					font-size: 1.25rem;
					margin-bottom: 10px;
				}
			}
		}
	}

	.box-10 {
		h2 {
			margin-bottom: 0;
		}

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

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

			ul {
				margin-top: 40px;
			}
		}
	}
}

//* Oprogramowanie dla firm "page"
#page-31 {
	.box-01 {
		padding-top: 0;
	}

	.box-02 {
		padding-bottom: 75px;
		margin-bottom: 0;
	}

	.box-coZyskasz {
		background-color: #fafafa;
	}

	h2 {
		font-weight: 600;
		font-size: 1.5rem;
		line-height: 29px;
		margin-bottom: 20px;
	}

	.header_hero {
		background-image: url('/upload/filemanager/Project-Design/oprogramowanie-dla-firm/Oprogramowanie-dla-firm.jpg');
	}
}

.box-container {
	padding-top: 75px;
	padding-bottom: 75px;
	padding-left: 10%;
	padding-right: 10%;

	&.gray {
		background: #fafafa;
	}

	> div {
		width: 100%;
		max-width: 1050px;
		margin-left: auto;
		margin: auto;
	}
}

//* Identyfikacja wizualna "page"
#page-32 {
	.box-coZyskasz {
		background-color: #fafafa;
	}

	.box-01,
	.box-03 {
		padding-top: 0;
	}

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

	h2 {
		font-weight: 600;
		font-size: 1.5rem;
		line-height: 29px;
		margin-bottom: 20px;
	}

	.header_hero {
		background-image: url('/upload/filemanager/Project-Design/identyfikacja-wizualna/Identyfikacja-wizualna.jpg');
	}

	.box-04 {
		#scontainer-102 {
			.scontainer-content {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-between;
				row-gap: 40px;

				.page_card {
					width: calc(100% / 3 - 30px);

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

					.card__img {
						height: 100px;
					}
				}
			}
		}
	}

	.box-05 {
		#scontainer-103 {
			.scontainer-content {
				align-items: flex-start;
				gap: 40px;
				grid-template-columns: 1fr 500px;

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

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

			ul {
				margin-top: 30px;
				margin-bottom: 30px;

				li {
					font-size: 1rem;
					font-weight: 700;

					&::before {
						top: 1px;
						font-size: 1.125rem;
					}

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

			p {
				strong {
					font-weight: 500;
					font-size: 1rem;
				}
			}
		}
	}

	@media (max-width: 1199px) {
		.box-05 {
			#scontainer-103 {
				.scontainer-content {
					.col_2 {
						text-align: center;
						grid-row-start: 1;

						img {
							max-height: 400px;
						}
					}
				}
			}
		}
	}
}

//* Pozycjonowanie stron Dębica "page"
#page-33 {
	h2 {
		font-weight: 600;
		font-size: 1.5rem;
		line-height: 29px;
		margin-bottom: 20px;
	}

	.header_hero {
		background-image: url('/upload/filemanager/Project-Design/pozycjonowanie-stron/Debica/pozycjonowanie-stron-debica.jpg');
	}

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

		#scontainer-105 {
			width: 100%;
			max-width: 1050px;
		}
	}

	.box-02 {
		margin-bottom: 150px;

		#scontainer-106 {
			width: 100%;
			max-width: 1050px;
		}
	}

	.box-03 {
		margin-bottom: 150px;
	}

	.box-04 {
		margin-bottom: 150px;

		#scontainer-108 {
			p {
				strong {
					font-weight: 600;
					font-size: 1.125rem;
					text-transform: uppercase;
				}

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

	.box-05 {
		margin-bottom: 100px;
	}

	.box-06 {
		margin-bottom: 100px;
	}

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

		#scontainer-111 {
			width: 100%;
			max-width: 810px;
		}
	}

	.box-08 {
		margin-bottom: 100px;
	}

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

		#scontainer-112 {
			width: 100%;
			max-width: 810px;
		}
	}

	@media (max-width: 1199px) {
		.box-02 {
			margin-bottom: 100px;
		}

		.box-03 {
			margin-bottom: 100px;
		}

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

			.colsInfoBox {
				.scontainer-content {
					.col_2 {
						text-align: center;
						grid-row-start: 1;

						img {
							height: 400px;
						}
					}
				}
			}
		}
	}
}

//* Pozycjonowanie stron Kraków "page"
#page-34 {
	h2 {
		font-weight: 600;
		font-size: 1.5rem;
		line-height: 29px;
		margin-bottom: 20px;
	}

	.header_hero {
		background-image: url('/upload/filemanager/Project-Design/pozycjonowanie-stron/Krakow/pozycjonowanie-stron-krakow.jpg');
	}

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

		#scontainer-114 {
			width: 100%;
			max-width: 1050px;
		}
	}

	.box-02 {
		margin-bottom: 150px;

		#scontainer-115 {
			width: 100%;
			max-width: 1050px;
		}
	}

	.box-03 {
		margin-bottom: 150px;
	}

	.box-04 {
		margin-bottom: 150px;

		#scontainer-117 {
			ul {
				margin-top: 30px;
				margin-bottom: 30px;

				li {
					font-size: 1.125rem;
					font-weight: 400;

					&::before {
						top: -1px;
						font-size: 1.25rem;
					}

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

					strong {
						font-weight: 600;
					}
				}
			}

			p {
				strong {
					font-weight: 600;
					font-size: 1.125rem;
					text-transform: uppercase;
				}
			}
		}
	}

	.box-05 {
		margin-bottom: 100px;
	}

	.box-06 {
		margin-bottom: 100px;
	}

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

		#scontainer-119 {
			width: 100%;
			max-width: 810px;
		}
	}

	.box-08 {
		margin-bottom: 100px;
	}

	@media (max-width: 1199px) {
		.box-02 {
			margin-bottom: 100px;
		}

		.box-03 {
			margin-bottom: 100px;
		}

		.box-04 {
			#scontainer-117 {
				.scontainer-content {
					.col_2 {
						text-align: center;
						grid-row-start: 1;

						img {
							height: 400px;
						}
					}
				}
			}
		}
	}
}

//* Pozycjonowanie stron Kielce "page"
#page-35 {
	h2 {
		font-weight: 600;
		font-size: 1.5rem;
		line-height: 29px;
		margin-bottom: 20px;
	}

	.header_hero {
		background-image: url('/upload/filemanager/Project-Design/pozycjonowanie-stron/Kielce/pozycjonowanie-stron-kielce.jpg');
	}

	.box-01 {
		margin-bottom: 40px;

		#scontainer-121 {
			width: 100%;
			max-width: 1050px;
		}
	}

	.box-02 {
		margin-bottom: 40px;

		#scontainer-122 {
			width: 100%;
			max-width: 810px;
		}
	}

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

		#scontainer-123 {
			width: 100%;
			max-width: 810px;
		}
	}

	.box-04 {
		margin-bottom: 150px;
	}

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

		#scontainer-125 {
			ul {
				margin-top: 30px;
				margin-bottom: 30px;

				li {
					font-size: 1.125rem;

					&::before {
						top: -1px;
						font-size: 1.25rem;
					}

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

					strong {
						font-weight: 600;
					}
				}
			}

			p {
				font-weight: 500;
			}
		}
	}

	.box-06 {
		margin-bottom: 150px;

		#scontainer-126 {
			.scontainer-content {
				grid-template-columns: 570px 1fr;
			}

			ul {
				margin-top: 30px;
				margin-bottom: 30px;

				li {
					font-size: 1.125rem;

					&::before {
						top: -1px;
						font-size: 1.25rem;
					}

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

					strong {
						font-weight: 600;
					}
				}
			}

			p {
				font-weight: 500;
			}
		}
	}

	.box-07 {
		margin-bottom: 100px;
	}

	.box-08 {
		margin-bottom: 100px;
	}

	.box-09 {
		margin-bottom: 100px;
	}

	.box-10 {
		margin-bottom: 150px;
	}

	@media (max-width: 1199px) {
		.box-04 {
			margin-bottom: 100px;
		}

		.box-05 {
			.colsInfoBox {
				.scontainer-content {
					.col_2 {
						text-align: center;
						grid-row-start: 1;

						img {
							height: 400px;
						}
					}
				}
			}
		}

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

			#scontainer-126 {
				.scontainer-content {
					grid-template-columns: 1fr;

					.col_1 {
						text-align: center;

						img {
							height: 400px;
						}
					}
				}
			}
		}
	}
}

//* Pozycjonowanie stron Krosno "page"
#page-36 {
	h2 {
		font-weight: 600;
		font-size: 1.5rem;
		line-height: 29px;
		margin-bottom: 20px;
	}

	.header_hero {
		background-image: url('/upload/filemanager/Project-Design/pozycjonowanie-stron/Krosno/pozycjonowanie-stron-krosno.jpg');
	}

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

		#scontainer-130 {
			width: 100%;
			max-width: 1050px;
		}
	}

	.box-02 {
		margin-bottom: 40px;

		#scontainer-131 {
			width: 100%;
			max-width: 810px;
		}
	}

	.box-03 {
		margin-bottom: 150px;
	}

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

		#scontainer-133 {
			p {
				font-weight: 500;

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

	.box-05 {
		margin-bottom: 100px;
	}

	.box-06 {
		margin-bottom: 100px;
	}

	.box-07 {
		margin-bottom: 100px;
	}

	.box-08 {
		margin-bottom: 150px;
	}

	@media (max-width: 1199px) {
		.box-03 {
			margin-bottom: 100px;
		}

		.box-04 {
			#scontainer-133 {
				.scontainer-content {
					.col_2 {
						text-align: center;
						grid-row-start: 1;

						img {
							height: 400px;
						}
					}
				}
			}
		}
	}
}

//* Pozycjonowanie stron Mielec "page"
#page-37 {
	h2 {
		font-weight: 600;
		font-size: 1.5rem;
		line-height: 29px;
		margin-bottom: 20px;
	}

	.header_hero {
		background-image: url('/upload/filemanager/Project-Design/pozycjonowanie-stron/Mielec/pozycjonowanie-stron-mielec.jpg');
	}

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

		#scontainer-137 {
			width: 100%;
			max-width: 1050px;
		}
	}

	.box-02 {
		margin-bottom: 40px;

		#scontainer-138 {
			width: 100%;
			max-width: 810px;
		}
	}

	.box-03 {
		margin-bottom: 150px;
	}

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

		#scontainer-140 {
			p {
				font-weight: 500;

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

	.box-05 {
		margin-bottom: 100px;
	}

	.box-06 {
		margin-bottom: 100px;
	}

	.box-07 {
		margin-bottom: 150px;
	}

	@media (max-width: 1199px) {
		.box-03 {
			margin-bottom: 100px;
		}

		.box-04 {
			#scontainer-140 {
				.scontainer-content {
					.col_2 {
						text-align: center;
						grid-row-start: 1;

						img {
							height: 400px;
						}
					}
				}
			}
		}
	}
}

//* Pozycjonowanie stron Nowy Sącz "page"
#page-38 {
	h2 {
		font-weight: 600;
		font-size: 1.5rem;
		line-height: 29px;
		margin-bottom: 20px;
	}

	.header_hero {
		background-image: url('/upload/filemanager/Project-Design/pozycjonowanie-stron/Nowy-Sacz/pozycjonowanie-stron-nowy-sacz.jpg');
	}

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

		#scontainer-144 {
			width: 100%;
			max-width: 1050px;
		}
	}

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

		#scontainer-145 {
			width: 100%;
			max-width: 810px;

			ul {
				li {
					font-weight: 700;
					font-size: 1.125rem;
				}
			}
		}
	}

	.box-03 {
		margin-bottom: 150px;
	}

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

		#scontainer-147 {
			.scontainer-content {
				align-items: flex-start;
			}

			p {
				font-weight: 500;

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

	.box-05 {
		margin-bottom: 100px;
	}

	.box-06 {
		margin-bottom: 100px;
	}

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

		#scontainer-149 {
			width: 100%;
			max-width: 1150px;
		}
	}

	.box-08 {
		margin-bottom: 150px;
	}

	.box-09 {
		margin-bottom: 150px;
	}

	@media (max-width: 1199px) {
		.box-03 {
			margin-bottom: 100px;
		}

		.box-04 {
			#scontainer-147 {
				.scontainer-content {
					.col_2 {
						text-align: center;
						grid-row-start: 1;

						img {
							height: 400px;
						}
					}
				}
			}
		}
	}
}

//* Pozycjonowanie stron Przemyśl "page"
#page-39 {
	h2 {
		font-weight: 600;
		font-size: 1.5rem;
		line-height: 29px;
		margin-bottom: 20px;
	}

	.header_hero {
		background-image: url('/upload/filemanager/Project-Design/pozycjonowanie-stron/Przemysl/pozycjonowanie-stron-przemysl.jpg');
	}

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

		#scontainer-151 {
			width: 100%;
			max-width: 1050px;
		}
	}

	.box-02 {
		margin-bottom: 100px;
	}

	.box-03 {
		margin-bottom: 150px;

		#scontainer-153 {
			width: 100%;
			max-width: 810px;
		}
	}

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

		#scontainer-154 {
			.scontainer-content {
				align-items: flex-start;
			}

			ul {
				li {
					font-size: 1.125rem;
					font-weight: 400;

					&::before {
						top: -1px;
						font-size: 1.5rem;
					}

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

			p {
				font-size: 1.5rem;
				margin-bottom: 15px;

				strong {
					font-weight: 600;
				}
			}
		}
	}

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

		#scontainer-155 {
			width: 100%;
			max-width: 810px;
		}
	}

	.box-06 {
		margin-bottom: 100px;
	}

	.box-07 {
		margin-bottom: 70px;
	}

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

		#scontainer-157 {
			width: 100%;
			max-width: 810px;
		}
	}

	.box-09 {
		margin-bottom: 150px;
	}

	.box-10 {
		margin-bottom: 150px;
	}

	@media (max-width: 1199px) {
		.box-03 {
			margin-bottom: 100px;
		}

		.box-04 {
			#scontainer-154 {
				.scontainer-content {
					.col_2 {
						text-align: center;
						grid-row-start: 1;

						img {
							height: 400px;
						}
					}
				}
			}
		}
	}
}

//* Pozycjonowanie stron Rzeszów "page"
#page-40 {
	h2 {
		font-weight: 600;
		font-size: 1.5rem;
		line-height: 29px;
		margin-bottom: 20px;
	}

	.header_hero {
		background-image: url('/upload/filemanager/Project-Design/pozycjonowanie-stron/Rzeszow/pozycjonowanie-stron-rzeszow.jpg');
	}

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

		#scontainer-159 {
			width: 100%;
			max-width: 1050px;
		}
	}

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

		#scontainer-160 {
			width: 100%;
			max-width: 1050px;
		}
	}

	.box-03 {
		margin-bottom: 100px;
	}

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

		#scontainer-162 {
			width: 100%;
			max-width: 810px;
		}
	}

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

		#scontainer-163 {
			width: 100%;
			max-width: 810px;
		}
	}

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

		#scontainer-164 {
			.scontainer-content {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: center;
				column-gap: 120px;
				row-gap: 50px;

				.page_card {
					width: 100%;
					max-width: 420px;
				}
			}
		}
	}

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

		#scontainer-165 {
			.scontainer-content {
				align-items: flex-start;
			}

			p {
				font-weight: 500;

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

	.box-08 {
		margin-bottom: 100px;
	}

	.box-09 {
		margin-bottom: 100px;
	}

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

		#scontainer-167 {
			width: 100%;
			max-width: 1050px;
		}
	}

	.box-11 {
		margin-bottom: 150px;
	}

	.box-12 {
		margin-bottom: 150px;
	}

	@media (max-width: 1199px) {
		.box-07 {
			#scontainer-165 {
				.scontainer-content {
					.col_2 {
						text-align: center;
						grid-row-start: 1;

						img {
							max-height: 400px;
						}
					}
				}
			}
		}
	}

	@media (max-width: 991px) {
		.box-08 {
		}
	}
}

//* Pozycjonowanie stron Stalowa Wola "page"
#page-41 {
	h2 {
		font-weight: 600;
		font-size: 1.5rem;
		line-height: 29px;
		margin-bottom: 20px;
	}

	.header_hero {
		background-image: url('/upload/filemanager/Project-Design/pozycjonowanie-stron/Stalowa-Wola/pozycjonowanie-stron-stalowa-wola.jpg');
	}

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

		#scontainer-169 {
			width: 100%;
			max-width: 1050px;
		}
	}

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

		#scontainer-170 {
			width: 100%;
			max-width: 1050px;
		}
	}

	.box-03 {
		margin-bottom: 100px;
	}

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

		#scontainer-172 {
			.scontainer-content {
				align-items: flex-start;
			}

			p {
				font-weight: 500;

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

	.box-05 {
		margin-bottom: 100px;
	}

	.box-06 {
		margin-bottom: 100px;
	}

	.box-07 {
		margin-bottom: 50px;
	}

	.box-08 {
		margin-bottom: 150px;
	}

	.box-09 {
		margin-bottom: 150px;
	}

	@media (max-width: 1199px) {
		.box-04 {
			#scontainer-172 {
				.scontainer-content {
					.col_2 {
						text-align: center;
						grid-row-start: 1;

						img {
							height: 400px;
						}
					}
				}
			}
		}
	}
}

//* Pozycjonowanie stron Tarnów "page"
#page-42 {
	h2 {
		font-weight: 600;
		font-size: 1.5rem;
		line-height: 29px;
		margin-bottom: 20px;
	}

	.header_hero {
		background-image: url('/upload/filemanager/Project-Design/pozycjonowanie-stron/Tarnow/pozycjonowanie-stron-tarnow.jpg');
	}

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

		#scontainer-176 {
			width: 100%;
			max-width: 1050px;
		}
	}

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

		#scontainer-177 {
			width: 100%;
			max-width: 1050px;
		}
	}

	.box-03 {
		margin-bottom: 100px;
	}

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

		#scontainer-179 {
			.scontainer-content {
				align-items: flex-start;
			}

			p {
				font-weight: 500;

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

	.box-05 {
		margin-bottom: 100px;
	}

	.box-06 {
		margin-bottom: 100px;
	}

	.box-07 {
		margin-bottom: 50px;
	}

	.box-08 {
		margin-bottom: 150px;
	}

	.box-09 {
		margin-bottom: 150px;
	}

	@media (max-width: 1199px) {
		.box-04 {
			#scontainer-179 {
				.scontainer-content {
					.col_2 {
						text-align: center;
						grid-row-start: 1;

						img {
							height: 400px;
						}
					}
				}
			}
		}
	}
}

//* Ostatnio na blogu
#news {
	.news_head {
		margin-bottom: 70px;

		.scontainer-content {
			display: flex;
			justify-content: space-between;
			align-items: center;

			h2 {
				font-weight: 700;
				font-size: 2.5rem;
				line-height: 1.5;
			}

			p {
				font-weight: 400;
				font-size: 1rem;
			}
		}
	}

	.content {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		column-gap: 30px;
		margin-bottom: 70px;

		.article-content {
			.main-image {
				display: block;
				margin-bottom: 15px;

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

			.title {
				color: $cBlack;
				font-weight: 600;
				display: block;
				margin-bottom: 15px;
				@include transition;

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

			.date-add {
				color: $cLightGray;
				display: flex;
				align-items: center;
				gap: 10px;
				font-size: 0.85rem;

				img {
					position: relative;
					top: -1px;
				}
			}

			.entry {
				margin: 15px 0;
			}

			.more {
				color: $cTurquoiseLight;
				text-decoration: underline;
			}
		}
	}

	.news_bottom {
		text-align: end;
	}

	@media (max-width: 1531px) {
		.content {
			.article-content {
				.main-image {
					img {
						height: 250px;
					}
				}
			}
		}
	}

	@media (max-width: 1199px) {
		.news_head {
			margin-bottom: 40px;

			.scontainer-content {
				flex-direction: column;
				gap: 15px;
			}
		}

		.content {
			.article-content {
				.main-image {
					img {
						height: 200px;
					}
				}
			}
		}
	}

	@media (max-width: 991px) {
		.content {
			grid-template-columns: 1fr;
			margin-bottom: 30px;

			.article-content {
				display: grid;
				grid-template-columns: 280px 1fr;
				gap: 30px;
				align-items: center;

				.main-image {
					img {
						width: 100%;
						max-width: 280px;
					}
				}
			}
		}
	}

	@media (max-width: 576px) {
		.content {
			gap: 50px;

			.article-content {
				grid-template-columns: 1fr;
				gap: 0px;
				justify-content: center;

				.main-image {
					img {
						max-width: unset;
					}
				}
			}
		}
	}
}

//* Article
.article-entry {
	.main-image {
		img {
			object-fit: cover;
			width: 100%;
			border-radius: 20px;
			height: 450px;
			object-position: center top;
		}

		margin-bottom: 15px;
	}

	.article-title {
		font-weight: 600;
		font-size: 1rem;
		line-height: 24px;
		margin-bottom: 15px;

		a {
			color: $cTextBlack;
		}
	}

	.date-add {
		color: $cLightGray;
		display: flex;
		align-items: center;
		gap: 10px;
		font-size: 0.85rem;

		img {
			position: relative;
			top: -2px;
		}
	}

	.entry {
		margin: 15px 0;
	}

	.more {
		color: $cTurquoiseLight;
		text-decoration: underline;
	}
}

//* Strona jednego artykułu
.single_article_page {
	.article_layout {
		.article {
			font-size: 1rem;

			.main-image {
				position: relative;
				height: 600px;
				overflow: hidden;
				background-image: url('/upload/filemanager/Project-Design/Design/aticle-hero-bg.png');
				background-repeat: no-repeat;
				background-position: top;
				background-size: cover;

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

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

				.main-image-data {
					width: 100%;
					max-width: 1000px;
					margin: 0 auto;
					text-align: center;
					position: absolute;
					left: 50%;
					top: 50%;
					padding: 0 20px;
					transform: translate(-50%, -50%);
					z-index: 3;

					h3 {
						color: $cWhite;
						font-weight: 600;
						font-size: 2.5rem;
						line-height: 1.25;
						margin-bottom: 20px;
					}

					.article-attribute,
					.date-add {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						color: $cWhite;
						font-weight: 500;
						font-size: 0.75rem;

						.date-add {
							gap: 13px;

							img {
								width: 14px;
								opacity: 1;
							}
						}
					}
				}
			}

			.date-add {
				img {
					width: auto;
					object-fit: initial;
				}
			}

			.entry_title {
				text-align: center;
				width: 100%;
				max-width: 1000px;
				margin: 0 auto;
				padding-top: 50px;
				padding-bottom: 75px;

				h3 {
					font-weight: 600;
					font-size: 2.25rem;
					line-height: 36px;
					margin-bottom: 35px;
				}

				p {
					font-weight: 400;
					font-size: 1.375rem;
					line-height: 32px;

					@include respond-below(sm) {
						font-size: 1.25rem;
					}
				}
			}
		}

		.article_data {
			display: grid;
			grid-template-columns: 290px 800px;
			column-gap: 50px;
		}

		.article_data_sidebar {
			.title {
				font-weight: 600;
				font-size: 1.5rem;
				line-height: 1.25;
				margin-bottom: 30px;
			}

			.spis_arr {
				position: relative;
				font-size: 15px;

				> ol {
					padding-left: 30px;

					&::before {
						content: '';
						position: absolute;
						left: 0;
						width: 2px;
						height: 100%;
						border-radius: 2px;
						background: #dcdcdc;
					}
				}

				ol {
					counter-reset: item;
					position: relative;

					li {
						position: relative;
						display: block;
						color: #0c0c0c;
						transition: 250ms;

						&.active {
							color: $cTextBlack;

							&::after {
								background: $cTurquoiseLight;
							}

							> a {
								color: $cTextBlack;
							}
						}

						&::after {
							content: '';
							position: absolute;
							left: -30px;
							top: 0;
							width: 2px;
							height: 100%;
							border-radius: 2px;
							transition: 250ms;
						}

						&:before {
							content: counters(item, '.') '. ';
							counter-increment: item;
							font-weight: 500;
							font-size: 15px;
						}

						a {
							color: #0c0c0c;
							font-weight: 500;
							font-size: 15px;
							transition: 250ms;
						}

						ol {
							li {
								a {
									font-size: 15px;
								}
							}
						}
					}
				}
			}

			.article_data_sidebar__wrapper {
				display: flex;
				flex-direction: column;
				gap: 50px;
			}

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

				a {
					color: $cBlack;
					font-weight: 500;
					font-size: 15px;
					transition: 250ms;

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

		.article_data_wrapper {
			.text {
				section {
					margin-bottom: 40px;
				}

				.article-big-image {
					margin: 75px 0 0;
				}

				ul {
					margin-bottom: 25px;
					margin-top: 25px;
				}

				h2 {
					font-weight: 600;
					font-size: 1.75rem;
					line-height: 1.25;
					padding-bottom: 25px;

					@include respond-below(sm) {
						font-size: 1.25rem;
					}
				}

				h3 {
					font-weight: 500;
					font-size: 1.25rem;
					line-height: 1.25;
					padding-bottom: 5px;

					@include respond-below(sm) {
						font-size: 1.15rem;
					}
				}
			}

			a {
				color: $cTurquoiseLight;
			}
		}

		//* Quote
		blockquote {
			position: relative;
			padding: 40px;
			background: linear-gradient(
				262.15deg,
				$cTurquoiseLight 42.14%,
				$cTurquoiseDark 94.58%
			);
			border-radius: 20px;
			font-size: 1rem;
			color: $cWhite;

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

			a {
				color: #fff !important;
				font-weight: 600;
			}
		}

		//* Custom ul
		ul {
			li {
				position: relative;
				padding-left: 30px;
				margin-left: 10px;

				&::before {
					content: '';
					position: absolute;
					left: 5px;
					top: 12px;
					width: 9px;
					height: 9px;
					transform: translateY(-50%);
					border-radius: 3px;
					background: linear-gradient(
						0deg,
						#123b54 0%,
						#0f4b5e 20%,
						#09737a 58%,
						#00a79d 100%
					);
				}
			}
		}

		//* Social box
		.article__socialBox {
			padding-top: 75px;
			padding-bottom: 75px;

			@include respond-below(sm) {
				padding-top: 30px;
				padding-bottom: 30px;
				max-width: calc(100vw - 30px);
			}

			.article__socialBox__inner {
				padding: 30px;
				border: 1px solid #dcdcdc;
				border-radius: 15px;
				display: flex;
				flex-direction: row;
				align-items: center;
				column-gap: 50px;
			}

			h2 {
				padding-bottom: 0 !important;
				width: 100%;
				max-width: 350px;
			}

			.social-icons {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				width: 100%;
			}

			@media (max-width: 767px) {
				.article__socialBox__inner {
					flex-direction: column;
					row-gap: 30px;

					h2 {
						font-size: 1.5rem;
						text-align: center;
						max-width: unset;

						@include respond-below(sm) {
							font-size: 1.1rem;
						}
					}
				}

				.social-icons {
					justify-content: space-evenly;
				}
			}
		}

		.article__backBtn {
			padding-bottom: 60px;
			text-align: center;
		}

		//* Author
		#postAuthor {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 25px;
			margin-top: 70px;
			font-size: 0.95rem;

			.postAuthor__img {
				line-height: 1;

				img {
					border-radius: 50%;
					height: 125px;
					width: 124px;
				}
			}

			.postAuthor__text {
				.authorName {
					font-size: 1.25rem;
					margin-bottom: 15x;
				}
			}

			@media (max-width: 576px) {
				flex-direction: column;
				text-align: center;
				gap: 15px;

				.postAuthor__text {
					.authorName {
						margin-bottom: 15px;
					}
				}
			}
		}
	}

	.box-10 {
		margin-bottom: 100px;
	}

	@media (max-width: 1199px) {
		.article_layout {
			.article_data {
				grid-template-columns: 240px 629px;
				column-gap: 50px;
			}
		}
	}

	@media (max-width: 991px) {
		.article_layout {
			.article_data {
				grid-template-columns: 1fr;
				row-gap: 100px;

				@include respond-below(sm) {
					row-gap: 50px;
				}
			}

			.article_data_sidebar {
				.article_data_sidebar__wrapper {
					.best_article {
						display: none;
					}
				}
			}

			.article {
				.entry_title {
					padding-top: 30px;
					padding-bottom: 30px;
				}

				.main-image {
					.main-image-data {
						h3 {
							font-size: 2rem;
						}
					}
				}
			}
		}
	}

	@media (max-width: 576px) {
		.article_layout {
			.article {
				.main-image {
					.main-image-data {
						h3 {
							font-size: 1.5rem;
						}
					}
				}
			}
		}
	}
}

//* Zaufali nam
.trusted_us {
	display: flex;
	flex-direction: row;
	justify-content: space-between;

	._col-1 {
		width: 100%;
		max-width: 600px;

		.row-1 {
			.trusted_title {
				font-size: 2.25rem;
				font-weight: 700;
				margin-bottom: 15px;
			}

			.trusted_text {
				margin-bottom: 50px;
			}
		}

		.row-2 {
			display: grid;
			grid-template-columns: 150px 180px 170px;
			column-gap: 50px;

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

			.trusted-counter-tile {
				position: relative;
				text-align: center;

				&:not(:last-child) {
					&::before {
						content: '';
						position: absolute;
						height: 100%;
						width: 1px;
						right: -25px;
						background: $cTurquoiseLight;
					}
				}

				.counter-tile-data {
					display: flex;
					flex-direction: row;
					justify-content: center;

					span {
						color: $cTurquoiseDark;
						font-weight: 900;
						font-size: 4rem;
						line-height: 64px;
						margin-bottom: 28px;
					}
				}

				h3 {
					color: $cTurquoiseDark;
					font-weight: 900;
					font-size: 4rem;
					line-height: 64px;
					margin-bottom: 28px;
				}

				p {
					font-weight: 600;
					font-size: 1rem;
					line-height: 1.25;
					text-transform: uppercase;
				}
			}
		}
	}

	._col-2 {
		width: 100%;
		max-width: 647px;
		display: flex;
		align-items: center;

		.trusted_slider {
			background-image: url('/upload/filemanager/Project-Design/Design/trusted_slide_bg.png');
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;

			.trusted_slide {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 100%;
				max-width: 435px;
				min-height: 425px;
				padding: 0 35px 60px;
				margin: 25px auto;
				background-color: $cWhite;
				box-shadow: 1.52396px 2.53994px 10.6677px
					rgba(120, 120, 120, 0.25);
				border-radius: 8px;

				.slide_top {
					margin-top: -22px;

					img {
						margin-bottom: 20px;
					}

					.slide_text {
						color: $cGray;
						margin-bottom: 35px;
						font-weight: 400;
						font-size: 1rem;
					}
				}

				.slide_footer {
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					p {
						color: $cBlack;
						font-weight: 500;
						font-size: 1rem;
					}
				}
			}

			.splide {
				display: flex;
				flex-direction: column-reverse;
			}

			.splide__arrows {
				width: 100px;
				position: relative;
				margin: 0 auto;

				.splide__arrow {
					background: transparent;
					top: auto;
					bottom: -50px;

					svg {
						fill: $cTurquoiseLight;
					}
				}
			}
		}
	}

	@media (max-width: 1532px) {
		flex-direction: column;
		align-items: center;
		gap: 70px;

		._col-1 {
			max-width: unset;
			text-align: center;

			.row-2 {
				justify-content: center;
			}
		}
	}

	@media (max-width: 768px) {
		._col-1 {
			.row-1 {
				.trusted_title {
					font-size: 2rem;
				}

				.trusted_text {
					margin-bottom: 30px;
				}
			}

			.row-2 {
				gap: 25px;

				.trusted-counter-tile {
					h3 {
						font-size: 2.5rem;
						line-height: 42px;
						margin-bottom: 5px;
					}

					p {
						font-size: 1rem;
					}

					.counter-tile-data {
						span {
							font-size: 2.5rem;
							line-height: 42px;
							margin-bottom: 5px;
						}
					}

					&:not(:last-child) {
						&::before {
							content: none;
						}
					}
				}
			}
		}

		._col-2 {
			.trusted_slider {
				.trusted_slide {
					max-width: 350px;

					.slide_top {
						.slide_text {
							font-size: 1rem;
						}
					}
				}
			}
		}
	}
}

//* Partnery
#scontainer-8 {
	opacity: 0.4;
}

//* Co zyskasz współpracując z nami
.box-coZyskasz {
	padding: 75px 0;
	background-image: url('/upload/filemanager/Project-Design/Design/coZyskaszFala.png');
	background-size: 100% 100%;
	background-position: center;

	.box-coZyskasz__wrapper {
		#scontainer-40 {
			width: 100%;
			max-width: 860px;
			margin: 0 auto;
			padding: 55px;
			box-shadow: 3px 5px 21px rgba(120, 120, 120, 0.25);
			border-radius: 17px;
			background: $cWhite;

			h2 {
				font-weight: 700;
				font-size: 2.25rem;
				line-height: 1.5;
				background: linear-gradient(
					262.15deg,
					$cTurquoise 42.14%,
					$cTurquoiseDark 94.58%
				);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
				text-align: center;
				text-fill-color: transparent;
			}

			ul {
				li {
					font-weight: 500;
					font-size: 1rem;

					&::before {
						font-size: 1rem;
						top: 0;
					}
				}
			}

			.scontainer-content {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}
	}

	@media (max-width: 991px) {
		background: radial-gradient(
			circle,
			$cTurquoiseLight 24%,
			$cTurquoiseDark 63%
		);
	}

	@media (max-width: 767px) {
		.box-coZyskasz__wrapper {
			#scontainer-40 {
				padding: 20px;

				h2 {
					font-size: 1.25rem;
				}
			}
		}
	}
}

//* Najnowsze realizacje
.box-realizations {
	.splide {
		background: rgba(0, 0, 0, 0.9);

		.splide__list {
			min-height: 864px;

			@include respond-below(lg) {
				min-height: 600px;
			}

			@include respond-below(md) {
				min-height: 500px;
			}

			.splide__slide {
				height: 100%;
				background-repeat: no-repeat;
				background-size: cover;

				&.is-active {
					position: absolute;
				}

				&.realizations-slide-1 {
					background-image: url('/upload/filemanager/najnowsze-realizacje/project-wingedit.jpg');
					background-position-y: center;
				}

				&.realizations-slide-2 {
					background-image: url('/upload/filemanager/najnowsze-realizacje/project-ibra.jpg');
				}

				&.realizations-slide-3 {
					background-image: url('/upload/filemanager/najnowsze-realizacje/project-vidok.jpg');
				}

				.container {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
				}

				.splide__slide__data {
					width: 50%;
					padding-right: 25px;

					h2 {
						color: $cWhite;
						font-weight: 700;
						font-size: 2.5rem;
						line-height: 1.5;
						margin-bottom: 35px;
					}

					p {
						color: $cWhite;
						font-weight: 400;
						margin-bottom: 50px;
					}

					.btn-1 {
						color: $cWhite;
						border: 2px solid $cWhite;
						background: transparent;

						&::before {
							opacity: 0;
							border-radius: 6px;
							background: linear-gradient(
								262.15deg,
								$cTurquoiseLight 42.14%,
								$cTurquoiseDark 94.58%
							);
							transition: 250ms all ease-in-out;
						}

						&:hover {
							&::before {
								opacity: 1;
							}
						}
					}
				}
			}
		}
	}

	.splide__pagination--custom {
		top: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 60px;

		li {
			width: 50%;
			text-align: right;
			padding-left: 25px;
		}

		.splide__pagination__page {
			@include font_family();
			width: fit-content;
			height: auto;
			opacity: 1;
			border-radius: 0;
			background: none;
			color: $cWhite;
			font-weight: 700;
			font-size: 2rem;
			opacity: 0.3;
			text-align: end;
			transition: 250ms ease-in-out;

			@include respond-below(lg) {
				font-size: 1.5rem;
			}

			&.is-active {
				transform: none;
				opacity: 1;
			}
		}
	}
}

//* Kontakt form. Page bottom
.box-contact {
	padding-bottom: 150px;

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

	#scontainer-9 {
		h2 {
			font-weight: 700;
			font-size: 2.5rem;
			background: linear-gradient(
				262.15deg,
				$cTurquoiseLight 50%,
				$cTurquoiseDark 100%
			);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			text-fill-color: transparent;
			margin-bottom: 70px;

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

	.fast_contact {
		display: flex;
		flex-direction: row;
		gap: 85px;

		#scontainer-10 {
			display: flex;
			align-items: center;
			text-align: end;
			min-width: 258px;

			img {
				border-radius: 20px;
				margin-bottom: 20px;
			}

			p {
				font-weight: 500;
			}

			h3 {
				font-weight: 600;
				font-size: 1.5rem;
				line-height: 24px;
				margin-bottom: 18px;
			}

			a {
				color: $cTextBlack;
				font-weight: 700;
				font-size: 1rem;

				&.contact_tel {
					color: $cTurquoise;
					font-weight: 600;
				}
			}
		}
	}

	.fast_contact_box {
		width: 100%;
		max-width: 1045px;
		background: $cWhite;
		box-shadow: 3px 5px 21px rgba(120, 120, 120, 0.25);
		border-radius: 17px;
		padding: 50px 45px 40px 33px;

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

		h3 {
			font-weight: 600;
			font-size: 1.25rem;
			margin-bottom: 45px;
		}

		form {
			._row-1 {
				display: flex;
				flex-direction: row;
				gap: 70px;

				._col-1,
				._col-2 {
					display: flex;
					flex-direction: column;
					gap: 18px;
					width: 100%;
					max-width: calc(100% / 2);
				}

				.form_group {
					display: flex;
					flex-direction: column;
					align-items: baseline;

					label {
						font-weight: 700;
						font-size: 0.875rem;
						margin-bottom: 7px;
					}

					input,
					textarea,
					select {
						@include font_family();
						width: 100%;
						max-width: 448px;
						border: 1px solid #d8d8d8;
						border-radius: 5px;
						padding: 9px 12px;
						font-weight: 400;
						font-size: 0.875rem;

						&::placeholder {
							color: #c8c8c8;
						}

						&:focus {
							outline: none;
						}

						&::-webkit-inner-spin-button {
							-webkit-appearance: none;
						}

						&::-webkit-outer-spin-button {
							-webkit-appearance: none;
						}

						&[type='number'] {
							-moz-appearance: textfield;
						}
					}

					select {
						color: #c8c8c8;

						option:not(:first-of-type) {
							color: $cTextBlack;
						}
					}
				}

				.form_group_2 {
					display: flex;
					flex-direction: row;
					align-items: baseline;
					gap: 10px;
					font-size: 0.85rem;

					input[type='checkbox'] {
						position: relative;
						min-width: 18px;
						min-height: 18px;
						border: 1px solid #d8d8d8;
						border-radius: 4px;
						margin: 0;
						position: relative;
						top: 4px;

						&::before {
							color: $cTurquoise;
							font-family: FontAwesome, sans-serif;
							content: '\f00c';
							position: absolute;
							top: 1px;
							right: 0;
							bottom: 0;
							left: 3px;
							opacity: 0;
							transition: all 150ms ease-in-out;
						}

						&:checked {
							&::before {
								opacity: 1;
							}
						}
					}
				}
			}

			._row-2 {
				margin-top: 23px;
				text-align: end;
			}
		}
	}

	@media (max-width: 1201px) {
		.fast_contact {
			#scontainer-10 {
				display: none;
			}
		}
	}

	@media (max-width: 991px) {
		.fast_contact_box {
			form {
				._row-1 {
					gap: 50px;
				}
			}
		}
	}

	@media (max-width: 991px) {
		.fast_contact_box {
			form {
				._row-1 {
					flex-direction: column;
					gap: 20px;

					._col-1,
					._col-2 {
						max-width: unset;
					}

					.form_group {
						input,
						select,
						textarea {
							max-width: unset;
						}
					}
				}
			}
		}
	}
}

//* Newsletter
.box-newsletter-inner {
	display: flex;
	align-items: center;
	background-image: url('/images/Newsletter_bg.webp');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 265px;
	padding: 50px 120px;
	border-radius: 23px;

	.title {
		color: $cWhite;
		font-weight: 700;
		font-size: 2.5rem;
		line-height: 1.5;
		margin-bottom: 15px;
	}

	.subtitle {
		color: $cWhite;
		font-weight: 400;
		font-size: 1.25rem;
	}

	.text {
		color: $cWhite;
		font-weight: 400;
		font-size: 0.85rem;
	}

	input[type='checkbox'] {
		-webkit-appearance: checkbox;
	}

	form {
		display: flex;
		flex-direction: column;
		gap: 10px;

		.form_row_1 {
			display: flex;
			flex-direction: row;
			border-radius: 8px;
			overflow: hidden;

			input[type='email'] {
				flex: 1;
				border: 1px solid rgba($cWhite, 0.4);
				border-radius: 8px 0 0 8px;

				@include respond-below(sm) {
					border-radius: 8px 8px 0 0;
				}
			}
		}

		.form_row_2 {
			color: $cWhite;
			font-size: 10px;
			display: flex;
			flex-direction: row;
			gap: 10px;

			#zgod_second {
				display: none;
			}

			p {
				cursor: pointer;
			}
		}

		.form_row_3 {
			color: $cWhite;
			font-size: 10px;
			margin-left: 30px;

			#adm_second {
				display: none;
			}

			p {
				cursor: pointer;
			}
		}

		input {
			color: $cWhite;
			padding: 12px 24px;
			border: none;
			background: transparent;

			&:focus {
				outline: none;
			}

			&::placeholder {
				@include font_family();
				color: rgba($cWhite, 0.4);
				font-size: 0.8125rem;
				font-weight: 600;
			}
		}

		.newsletter_btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			max-width: 197px;
			background: $cWhite;
			color: $cTurquoiseDark;
			font-weight: 600;
			font-size: 0.9195rem;
		}
	}

	._row-1 {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;

		._col-1 {
			width: 100%;
			max-width: 370px;
		}

		._col-2 {
			width: 100%;
			max-width: 600px;
		}
	}

	@media (max-width: 1200px) {
		padding: 40px 60px;
	}

	@media (max-width: 991px) {
		._row-1 {
			flex-direction: column;
			gap: 25px;

			._col-1 {
				max-width: unset;
			}
		}
	}

	@media (max-width: 576px) {
		padding: 30px;

		.subtitle {
			font-size: 1rem;
		}

		.title {
			font-size: 2rem;
		}

		form {
			.form_row_1 {
				flex-direction: column;
			}

			.newsletter_btn {
				padding: 8px;
				font-size: 0.875rem;
				max-width: unset;
			}
		}
	}
}

//* Cookie information
#cookie-information {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: $cWhite;
	z-index: 999;
	font-size: 0.75rem;
	box-shadow: 0px -6px 28px rgba(0, 0, 0, 0.1);

	.cookie-information__wrapper {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 20px;
		padding: 20px 0;

		@include respond-below(sm) {
			padding: 10px 0;
			font-size: 0.7rem;
		}

		.cookie_text {
			p {
				text-align: justify;
			}
		}
	}

	@media (max-width: 1300px) {
		.cookie-information__wrapper {
			flex-direction: column;
		}
	}
}

.article {
	.text {
		p {
			margin-top: 0;
		}

		ol {
			margin-left: 15px;
		}

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

#scontainer-199 {
	text-align: center;
	margin-top: 60px;
}