zaufane.pl/layout/style-scss/style.scss

@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import '_variables';
@import '_mixins';

html,
body {
	scroll-behavior: smooth;
	scroll-padding-top: 130px;
}

.container-box {
	min-height: calc(100vh - 104px);
	display: flex;
	align-items: center;

	@include respond-below(sm) {
		min-height: auto;
		padding-top: 50px;
		padding-bottom: 50px;
	}

	&.gray {
		background: #fafafa;
	}
}

@include respond-above(xl) {
	.container.big {
		max-width: 1376px;
	}
}

.container.big {
	padding-left: 15px;
	padding-right: 15px;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: $font-5;
	color: $cBlackText;
	scroll-behavior: smooth;
}

h2 {
	font-size: 28px;
	margin-bottom: 25px;

	@include respond-between(md, lg) {
		font-size: 24px;
	}

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

h5 {
	font-size: 16px;
	line-height: 30px;
}

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

.main {
	@extend .box;

	&.gray {
		background: #fcfcfb;
	}
}

a {
	transition: all 0.3s ease;

	&:hover {
		text-decoration: none;
	}
}

.btn {
	font-family: $font-1;
	font-weight: 700;
	font-size: 14px;
	padding: 15px 25px;
	border-radius: 2px;
	letter-spacing: 0.7px;
	display: inline-block;

	@include respond-between(md, lg) {
		padding: 15px 10px;
		font-size: 13px;
	}

	@include respond-between(sm, md) {
		font-size: 14px;
		padding: 15px 27px;
	}

	@include respond-below(xs) {
		font-size: 13px;
		padding: 12px 14px;
	}

	&:focus {
		outline: none;
	}
}

.btn1 {
	@extend .btn;
	color: #fff;
	background: $cBlack;
	border: none;
	border-radius: 12px;

	&:hover {
		color: #fff;
	}
}

.btn2 {
	@extend .btn;
	color: $cBlackText;
	background: $cYellow;

	&:hover {
		color: $cBlackText;
	}

	img {
		width: 15px;
		height: 15px;
		margin-left: 10px;
	}
}

.btn3 {
	@extend .btn;
	color: $cBlackText;
	background: transparent;
	border: 2px solid $cBlackText;

	&:hover {
		color: $cBlackText;
	}
}

.btn4 {
	@extend .btn;
	color: #fff;
	background: transparent;
	border: 2px solid #fff;

	&:hover {
		color: #fff;
	}
}

.btn5 {
	@extend .btn;
	color: #fff;
	border: 2px solid #1b1924;
	background: transparent;

	&:hover {
		color: #fff;
	}

	img {
		margin-left: 10px;
		width: 15px;
		height: 15px;
	}
}

.back {
	color: $cBlackText;
	text-transform: uppercase;
	font-weight: 800;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 30px;

	img {
		width: 15px;
		height: 15px;
		margin-right: 10px;
	}

	&:hover {
		color: $cBlackText;
	}
}

.hidden {
	display: none;
}

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

.hidden-above-sm {
	@include respond-above(sm) {
		display: none;
	}
}

.hidden-below-xs {
	@include respond-below(xs) {
		display: none !important;
	}
}

.title {
	font-size: 32px;
	//font-weight: 700;
	font-weight: 500;
	font-family: $font-1;
	line-height: 41px;

	@include respond-between(sm, lg) {
		font-size: 26px;
		line-height: 36px;
	}

	@include respond-between(xs, sm) {
		font-size: 30px;
		line-height: 46px;
	}

	@include respond-below(xs) {
		font-size: 21px;
		line-height: 31px;
	}
}

.title-big {
	/*tam gdzie font-size: 38 ponizej 1200 zachowuje sie jak title*/
	font-size: 38px;
	//font-weight: 700;
	font-weight: 500;
	font-family: $font-1;
	line-height: 41px;

	@include respond-between(sm, lg) {
		font-size: 26px;
		line-height: 36px;
	}

	@include respond-between(xs, sm) {
		font-size: 30px;
		line-height: 46px;
	}

	@include respond-below(xs) {
		font-size: 21px;
		line-height: 31px;
	}
}

.subtitle {
	font-family: $font-1;
	font-size: 22px;
	font-weight: 400;
	line-height: 32px;

	@include respond-between(md, lg) {
		font-size: 19px;
	}

	@include respond-between(sm, md) {
		font-size: 18px;
		line-height: 30px;
	}

	@include respond-below(xs) {
		font-size: 18px;
		line-height: 28px;
	}
}

.text {
	font-family: $font-1;
	//  letter-spacing: -0.5px;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
}

.box {
	padding-top: 130px;
	padding-bottom: 130px;

	@include respond-between(xs, lg) {
		padding-top: 70px;
		padding-bottom: 70px;
	}

	@include respond-below(xs) {
		padding-top: 50px;
		padding-bottom: 50px;
	}
}

.box2 {
	padding-top: 80px;
	padding-bottom: 80px;

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

	@include respond-below(xs) {
		padding-top: 60px;
		padding-bottom: 60px;
	}
}

.box3 {
	padding-top: 60px;
	padding-bottom: 60px;
}

#main-menu {
	width: 100%;

	@include respond-below(xs) {
		height: 100%;
		width: 100%;
		position: fixed;
		z-index: 10;
		background: #fff;
		display: none;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;

		&.visible {
			@include flexbox;
		}
	}

	@include respond-above(lg) {
		margin: 0 15px;
	}

	@include respond-between(xs, sm) {
		width: 100%;
	}

	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;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;

			@include respond-below(lg) {
				justify-content: end;
			}

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

			> li {
				position: relative;
				margin: 0 8px;

				&.open-menu {
					a {
						i {
							&::before {
								transform: rotate(180deg);
							}
						}
					}

					ul {
						display: block;
					}
				}

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

				// &#link-5 {
				// 	display: none;
				// }
				&#link-74 {
					display: none;
				}

				a {
					padding: 5px 7px;
					position: relative;

					@include respond-between(xs, sm) {
						padding: 10px 10px;
					}
				}

				&.parent {
					position: relative;

					> a {
						.fa-caret-down {
							&:before {
								color: $cYellow;
								position: absolute;
								content: '';
								width: 13px;
								height: 13px;
								background-image: url(/upload/filemanager/icons/chevron-thin-down.svg);
								background-size: contain;
								top: calc(50% - 7px);
							}
						}
					}
				}

				a {
					font-family: $font-1;
					font-weight: 400;
					color: $cBlackText;
					font-size: 14px;
					display: flex;
					align-items: center;
					justify-content: center;

					// @include respond-between(md, lg) {
					// 	padding: 0 5px;
					// }

					// @include respond-between(sm, md) {
					// 	padding: 0 4px;
					// }

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

					@include respond-below(xs) {
						font-size: 19px;
					}

					i {
						margin-left: 10px;
					}
				}

				> ul {
					position: absolute;
					display: none;

					@include respond-above(xs) {
						background: #fff;
						z-index: 999;
						border-radius: 10px;
						padding-inline-start: 0;
						list-style-type: none;
						padding: 20px 25px;
						position: absolute;
						top: 100%;
						box-shadow: 0px 5px 9px 0px rgba(199, 199, 199, 0.35);
					}

					@include respond-below(xs) {
						position: static;
						list-style-type: none;
						padding-inline-start: 0;
					}

					li {
						@include respond-above(xs) {
							min-width: 145px;
						}

						@include respond-below(xs) {
							margin-top: 5px;
							margin-bottom: 5px;
						}

						a {
							@include respond-above(xs) {
								font-weight: 300;
								padding: 15px 5px;
								font-size: 15px;
								display: block;
								transition: all 0.3s ease;
								white-space: nowrap;

								&:hover {
									background: $cGrayLighterBg;
									font-weight: 700;
								}
							}

							@include respond-below(xs) {
								font-weight: 300;
								font-size: 15px;
								padding: 5px;
							}
						}
					}
				}

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

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

#main-menu-btn {
	height: 50px;
	width: 50px;
	// position: fixed;
	bottom: 10px;
	right: 10px;
	background: $cGrayLightBg;
	display: none;
	z-index: 9999;
	cursor: pointer;
	padding: 15px 30px;
	border-radius: 2px;

	@include respond-between(md, lg) {
		padding: 15px 17px;
	}

	@include respond-between(sm, md) {
		padding: 15px 27px;
	}

	@include respond-below(xs) {
		padding: 12px 14px;
	}

	@include respond-below(xs) {
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

.page-header {
	padding-top: 20px;
	padding-bottom: 20px;
	background: #fff;
	box-shadow: 0px 7px 20px 0px rgba(145, 145, 145, 0.11);

	// >.container {
	//   @media (min-width: 1460px) {
	//     max-width: 1346px;
	//   }
	// }

	div[class^='col-'] {
		&:first-child {
			display: flex;
			justify-content: center;
			align-items: center;

			@include respond-between(xs, sm) {
				margin-bottom: 20px;
			}

			// img {
			//   max-width: 100%;
			//   width: 160px;

			//   @include respond-above(lg) {
			//     width: 160px;
			//     // height: 36px;
			//     height: auto;
			//   }

			//   @include respond-between(md, lg) {
			//     width: 130px;
			//     //  height: 29px;
			//     height: auto;
			//   }

			//   @include respond-between(sm, md) {
			//     width: 150px;
			//     // height: 33px;
			//     height: auto;
			//   }

			//   @include respond-between(xs, sm) {
			//     width: 160px;
			//     // height: 36px;
			//     height: auto;
			//   }

			//   @include respond-below(xs) {
			//     width: 160px;
			//     //  height: 36px;
			//     height: auto;
			//   }
			// }

			@include respond-below(xs) {
				justify-content: flex-start;
			}
		}

		&:nth-child(3) {
			display: flex;
			justify-content: space-around;
			align-items: center;

			@include respond-below(md) {
				justify-content: flex-end;
				gap: 30px;
				padding-right: 0;

				.lang-change {
					margin-right: 0;
				}
			}

			@include respond-below(sm) {
				padding-right: 15px;
				justify-content: center;
			}

			@include respond-below(xs) {
				justify-content: flex-end;
			}

			#languages {
				ul {
					list-style-type: none;
					padding-inline-start: 0;

					li {
						&.active {
						}

						a {
							font-family: 'Roboto', sans-serif;
							font-weight: 500;
							color: $cBlackText;
							font-size: 16px;
						}
					}
				}
			}

			.btn1 {
				@include respond-below(xs) {
					margin-top: 20px;
				}
			}
		}
	}

	.menu {
		display: flex;
		justify-content: center;
		align-items: center;

		@include respond-between(md, lg) {
			padding-right: 0;
		}

		@include respond-between(xs, md) {
			padding-right: 0;
		}

		@include respond-below(xs) {
			justify-content: flex-end;
			//  padding: 0;
		}
	}
}

.fixed-top {
	.navMenu_phone {
		color: $cBlackText;
		font-weight: 700;

		img {
			margin-right: 8px;
		}
	}

	.navMenu {
		display: grid;
		align-items: center;
		grid-template-areas: 'navLogo menu menu2';
		grid-template-columns: auto 1fr auto;
		width: 100%;

		.navLogo {
			grid-area: navLogo;

			img {
				transition: all 250ms ease-in-out;
			}

			p {
				margin-bottom: 0;
			}
		}

		.menu {
			grid-area: menu;
		}

		.menu2 {
			grid-area: menu2;
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 20px;

			.btn1 {
				background: #2bac25;
				display: flex;
				align-items: center;
				gap: 12px;
			}

			.menu2_actions {
				display: flex;
				flex-direction: column;
				row-gap: 10px;

				a {
					padding: 10px 20px;
					justify-content: center;

					&.btn_2 {
						color: $cBlackText;
						background: $cYellow;
					}
				}
			}
		}

		// @media (max-width: 992px) {
		@media (max-width: 1360px) {
			grid-template-areas: 'navLogo menu2' 'menu menu';
			grid-template-columns: 1fr auto;
			row-gap: 20px;

			.menu2 {
				width: 100%;
			}

			.menu {
				display: flex;
				justify-content: center;

				#main-menu {
					width: fit-content;
				}
			}
		}

		@media (max-width: 767px) {
			grid-template-areas: 'navLogo' 'menu' 'menu2';

			.navLogo {
				text-align: center;
			}

			.menu2 {
				justify-content: center;
			}
		}

		@media (max-width: 575px) {
			grid-template-areas: 'navLogo menu2 menu';
			gap: 20px;

			.navLogo {
				text-align: left;
			}
		}

		@media (max-width: 500px) {
			grid-template-areas: 'navLogo menu' 'menu2 menu2';
		}
	}

	@media (min-width: 992px) and (max-width: 1460px) {
		.page-header {
			.container {
				width: 100%;
				max-width: unset;
			}
		}
	}

	@media (min-width: 992px) and (max-width: 1100px) {
		.navMenu {
			.navLogo {
				img {
					width: 100%;
					max-width: 150px;
				}
			}

			.menu2 {
				gap: 10px;
			}
		}

		#main-menu {
			div[id^='menu-container-'] {
				> ul {
					> li {
						margin: 0 4px;
					}
				}
			}
		}
	}

	@media (min-width: 576px) and (max-width: 767px) {
		.page-header {
			.container {
				padding: 0 !important;

				.row {
					.col-12 {
						margin-bottom: 0 !important;
					}
				}
			}
		}
	}
}

.gray-box {
	background: #ededef;
}

.banner {
	padding-top: 104px;

	background: $cGrayLightBg;
	position: relative;
	overflow: hidden;

	@include respond-between(xs, sm) {
		// 	margin-top: 118px;
		margin-top: 0;
		padding-top: 0;
	}

	@include respond-between(lg, xl) {
		padding-top: 150px;
		// 	padding-top: 155px;
	}

	@include respond-below(lg) {
		margin-top: 0;
		padding-top: 0px;
	}

	@include respond-below(xs) {
		margin-top: 0;
		padding-top: 90px;
	}

	#scontainer-1-content,
	#scontainer-34-content {
		.btn2 {
			@include respond-between(sm, md) {
				margin-bottom: 10px;
			}

			@include respond-below(xs) {
				margin-bottom: 10px;
			}
		}

		> .row {
			> div[class^='col-'] {
				&:first-child {
					display: flex;
					justify-content: center;
					align-items: flex-start;
					flex-wrap: wrap;
					flex-direction: column;
					position: relative;
					z-index: 10;

					h1 {
						font-size: 36px;
						font-weight: 600;
						letter-spacing: 0.2px;
						font-family: $font-1;
						margin-bottom: 25px;

						@include respond-between(md, lg) {
							font-size: 26px;
							line-height: 41px;
						}

						@include respond-below(md) {
							font-size: 22px;
							margin-bottom: 30px;
							line-height: 34px;
						}
					}

					h2 {
						font-size: 26px;

						@include respond-between(md, lg) {
							font-size: 22px;
						}

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

					a {
						&:first-child {
							margin-right: 15px;

							@include respond-between(sm, md) {
								margin-right: 5px;
							}

							@include respond-below(xs) {
								margin-right: 0px;
							}
						}
					}

					.buttons {
						z-index: 7;
						width: 100%;

						.btn2 {
							@include respond-below(xs) {
								margin-bottom: 10px;
							}
						}
					}
				}

				&:last-child {
					display: flex;
					justify-content: center;
					align-items: center;
					overflow: hidden;
					flex-direction: column;

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

					@include respond-between(sm, lg) {
						padding-top: 80px;
						padding-bottom: 80px;
					}

					@include respond-between(xs, sm) {
						padding-top: 50px;
						z-index: 7;
						align-items: flex-start;
					}

					@include respond-below(xs) {
						padding-top: 30px;
						z-index: 7;
						align-items: flex-start;
					}

					img {
						width: 100%;

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

	> .banner-star {
		position: absolute;
		bottom: -111px;
		left: -228px;
		z-index: 1;

		img {
			width: 467px;
			height: 467px;
		}
	}
}

.star {
	position: absolute;
	right: calc(50% + -110px);
	bottom: 192px;

	@include respond-between(xs, sm) {
		right: auto;
		left: calc(50% - 277px);
		z-index: 9;
	}

	@include respond-below(xs) {
		right: auto;
		left: calc(50% - 147px);
		z-index: 9;
		bottom: 117px;
	}

	.star-container {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
		width: 120px;
		padding-top: 10px;
		padding-bottom: 10px;

		border-radius: 20px;
		z-index: 8;

		img {
			width: 15px;
			height: 15px;
			margin-left: 1px;
			margin-right: 1px;
		}

		@include respond-between(xs, sm) {
			right: calc(50% - 276px);
		}

		@include respond-below(xs) {
			bottom: 123px;
			right: 0;
		}
	}
}

#scontainer-2 {
	@extend .box;

	@include respond-between(xs, sm) {
		text-align: center;
	}

	div[class^='col-'] {
		&:not(:last-child) {
			@include respond-between(xs, sm) {
				margin-bottom: 70px;
			}

			@include respond-below(xs) {
				margin-bottom: 40px;
			}
		}

		img {
			width: 100%;
			margin-bottom: 50px;

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

		h4 {
			@extend .subtitle;

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

	h3 {
		@extend .title;
		margin-bottom: 90px;

		@include respond-between(xs, sm) {
			margin-bottom: 70px;
		}

		@include respond-below(xs) {
			margin-bottom: 40px;
		}
	}
}

.dark-bg {
	@extend .box;
	background: $cVioletDarkBg;
	position: relative;
	overflow: hidden;

	div[class^='col-'] {
		img {
			margin-bottom: 30px;
			border-radius: 3px;
		}

		&:not(:last-child) {
			@include respond-between(xs, sm) {
				margin-bottom: 70px;
			}

			@include respond-below(xs) {
				margin-bottom: 40px;
			}
		}

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

		z-index: 7;
	}

	h3 {
		@extend .title;
		color: #fff;
		margin-bottom: 90px;
	}

	h5 {
		@extend .subtitle;

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

		margin-bottom: 30px;

		color: #fff;
	}

	p {
		color: #d5d5d5;
		@extend .text;
	}

	.dark-bg-star {
		position: absolute;
		top: 67px;
		right: -220px;
		z-index: 5;

		img {
			width: 467px;
			transform: rotateZ(23deg);
		}
	}
}

.omnibus_big {
	#scontainer-157 {
		@extend .box;

		h3 {
			@extend .title;
			margin-bottom: 40px;
		}

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

			li {
				position: relative;
				font-size: 18px;
				padding-left: 20px;

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

				&::before {
					content: '';
					position: absolute;
					top: 11px;
					left: 0;
					width: 5px;
					height: 5px;
					background: $cYellow;
					border-radius: 10px;
				}
			}
		}

		.row {
			.col-lg-6 {
				img {
					padding: 70px;
					border: 1px solid $cGrayLightBg;
					border-radius: 3px;
				}

				&:first-child {
					@include respond-below(md) {
						margin-bottom: 50px;
					}
				}
			}
		}
	}
}

.omnibus_mini {
	&.gap_top {
		margin-top: 75px;
	}

	&.gap_bottom {
		margin-bottom: 75px;
	}

	#scontainer-158 {
		border: 2px solid $cYellow;
		border-radius: 5px;
		padding: 25px;

		.scontainer-content {
			> div {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 20px;
				cursor: pointer;

				h3 {
					font-size: 22px;
					font-weight: 600;
					margin-bottom: 0;
				}

				img:last-child {
					margin-left: auto;
				}
			}
		}

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

			.scontainer-content {
				> div {
					flex-direction: column;
					text-align: center;
				}
			}
		}
	}
}

.opinions {
	background: $cGrayLighterBg;

	#scontainer-4,
	#scontainer-6 {
		@extend .box;

		div[class^='col-']:first-child {
			display: flex;
			align-items: flex-start;
			flex-wrap: wrap;
			flex-direction: column;
			justify-content: center;

			@include respond-between(sm, md) {
				margin-bottom: 50px;
			}

			@include respond-between(xs, sm) {
				margin-bottom: 70px;
			}

			@include respond-below(xs) {
				margin-bottom: 40px;
			}
		}

		div[class^='col-']:last-child {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		h3 {
			@extend .title;
			margin-bottom: 20px;
		}

		h5 {
			@extend .subtitle;
			margin-bottom: 50px;

			@include respond-below(xs) {
				margin-bottom: 20px;
			}
		}

		p {
			@extend .text;
			margin-bottom: 50px;
			color: $cGrayText;

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

		h3,
		h5,
		p {
			@include respond-above(md) {
				max-width: 473px;
			}
		}

		img {
			max-width: 100%;
		}
	}

	#scontainer-6 {
		div[class^='col-']:first-child {
			h3,
			h5,
			p {
				@include respond-above(md) {
					max-width: 557px;
				}
			}
		}
	}
}

.brands {
	#scontainer-5 {
		@extend .box;
		text-align: center;

		h3 {
			@extend .title;
			text-align: center;
			margin-bottom: 50px;
		}

		a {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 19%;
			border: 1px solid $cGrayLightBg;
			transition: all 0.3s ease;
			padding: 20px 0;

			@include respond-between(xs, sm) {
				width: 30%;
			}

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

			img {
				filter: grayscale(1);
				opacity: 0.7;
				transition: all 0.3s ease;
				width: 150px;

				@include respond-between(sm, md) {
					width: 90px;
				}

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

			&:hover {
				box-shadow: 0 0 25px rgba(0, 0, 0, 0.23);

				img {
					filter: grayscale(0);
					opacity: 1;
				}
			}
		}

		.row {
			&:nth-child(2) {
				div[class^='col-'] {
					display: flex;
					// padding: 0;
					flex-wrap: wrap;
					z-index: 5;

					.img {
						width: 12.5%;
						display: flex;
						justify-content: center;
						align-items: center;
						border-top: 1px solid $cGrayLightBg;
						height: 170px;
						flex-wrap: wrap;
						z-index: 5;

						@include respond-between(xs, lg) {
							width: 25%;
						}

						@include respond-below(xs) {
							width: 33.3%;
							height: 112px;
						}

						&:not(:last-child) {
							border-right: 1px solid $cGrayLightBg;
						}

						a {
							width: 100%;
							height: 100%;
							display: flex;
							justify-content: center;
							align-items: center;
							padding: 25px 15px;
							transition: all 0.3s ease;
							overflow: hidden;

							&:hover {
								z-index: 55;

								img {
									filter: grayscale(0);
									opacity: 1;
								}

								box-shadow: 0 0 25px rgba(0, 0, 0, 0.23);
							}

							img {
								max-width: 100%;
								max-height: 80%;
								opacity: 0.7;
								transition: all 0.3s ease;
								filter: grayscale(1);
							}
						}
					}
				}
			}

			&:nth-child(3) {
				div[class^='col-'] {
					box-shadow: white 0px -135px 98px -35px inset;
					margin-top: -90px;
					min-height: 135px;
					z-index: 7;
					z-index: 7;
				}
			}
		}
	}
}

.business {
	background: $cVioletDarkBg;

	div[class^='col-'] {
		&:first-child {
			padding: 0;

			img {
				width: 90%;
				height: 100%;
				object-fit: cover;
				object-position: right;

				@include respond-below(md) {
					width: 100%;
					object-position: center;
				}
			}
		}

		&:last-child {
			@extend .box;
			display: flex;
			align-items: flex-start;
			flex-wrap: wrap;
			flex-direction: column;
			justify-content: center;
			padding-left: 50px;
			padding-right: 50px;

			h3 {
				@extend .title;
				color: #fff;
				margin-bottom: 20px;
			}

			h5 {
				@extend .subtitle;
				color: #fff;
				margin-bottom: 50px;
				max-width: 450px;
				font-weight: 400;
			}

			ul {
				margin-bottom: 50px;
				padding-inline-start: 0;
				list-style-type: none;

				li {
					@extend .text;
					color: #fff;

					display: flex;
					align-items: flex-start;
					justify-content: flex-start;

					img {
						width: 20px;
						height: 20px;
						margin-top: 5px;
						margin-right: 20px;
					}

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

#scontainer-8 {
	@extend .box;

	div[class^='col-']:first-child {
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;

		@include respond-above(lg) {
			padding-right: 80px;
		}

		@include respond-between(xs, sm) {
			margin-bottom: 40px;
		}

		@include respond-below(xs) {
			margin-bottom: 40px;
		}

		h3 {
			@extend .title;
			margin-bottom: 50px;

			@include respond-above(lg) {
			}
		}

		p {
			@extend .text;
			margin-bottom: 50px;

			img {
				margin-left: 10px;
			}
		}
	}

	div[class^='col-']:last-child {
		img {
			width: 100%;
		}
	}
}

.footer {
	@extend .box;
	background: $cVioletDarkBg;
	background-image: url('/upload/filemanager/images/footer-bg.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	padding-top: 50px;
	padding-bottom: 50px;

	h6 {
		font-family: $font-1;
		font-size: 17px;
		line-height: 31px;
		font-weight: 700;
		color: $cGrayText;
		margin-bottom: 40px;
	}

	a {
		margin-bottom: 20px;
		color: #fff;
		font-family: $font-1;
		font-weight: 300;
		font-size: 15px;
	}

	p {
		margin-bottom: 7px;
		color: #fff;
		font-family: $font-1;
		font-weight: 300;
		font-size: 15px;
	}

	.social-media {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: absolute;
		bottom: 0;

		img {
			width: 15px;
			height: 15px;
			margin-right: 20px;
		}
	}

	.row {
		&.copyright {
			div[class^='col-'] {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;

				@include respond-below(xs) {
					justify-content: center;
					flex-direction: column-reverse;
					text-align: center;
					align-items: center;
				}

				.btn5 {
					margin-bottom: 0;

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

			p {
				span {
					margin-right: 10px;
					margin-left: 10px;
				}

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

#cookie-information {
	position: fixed;
	bottom: 0;
	width: 100vw;
	background: #ffbf0b;
	color: #ffffff;
	font-size: 11px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
	z-index: 1000;

	a {
		font-size: 10px;
		text-transform: uppercase;
		color: $cWhite;
		border: 1px solid $cWhite;
		padding: 8px 7px;
		border-radius: 4px;
	}

	p {
		margin-bottom: 0;
	}

	.cookie-information__wrapper {
		display: flex;
		align-items: center;
		column-gap: 30px;
	}

	@media (max-width: 991px) {
		padding-bottom: 20px;

		.container {
			padding: 0;
		}

		.cookie-information__wrapper {
			row-gap: 20px;
			flex-direction: column;
		}
	}
}

.subpage-content {
	// padding-top: 50px;
	padding-bottom: 50px;

	margin-top: 104px;

	@include respond-between(xs, sm) {
		margin-top: 160px;
	}

	@include respond-below(xs) {
		margin-top: 90px;
	}

	.site-title {
		margin-bottom: 50px;
		font-size: 36px;
		font-weight: 700;
		text-transform: none;
	}

	.brand-img-box {
		position: relative;

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

		img:last-child {
			position: absolute;
			right: -29px;
			top: 0;
		}
	}

	h1 {
		font-size: 34px;
		font-weight: 800;
		text-transform: uppercase;
		margin-bottom: 20px;
		font-family: $font-5;
	}

	h2 {
		font-size: 19px;
		font-weight: 800;
		font-family: $font-5;
		margin-bottom: 25px;
		margin-top: 25px;
	}

	p {
		font-size: 17px;
		line-height: 27px;

		font-weight: 300;

		margin-bottom: 10px;

		font-family: $font-5;

		strong,
		b {
			font-weight: 500;
		}
	}

	h3 {
		font-size: 18px;
		font-weight: 600;
		margin-top: 25px;
		font-family: $font-5;
	}

	ul {
		margin-bottom: 10px;

		li {
			font-size: 17px;
			line-height: 27px;
			font-weight: 300;
			margin-bottom: 10px;
			font-family: $font-5;

			strong,
			b {
				font-weight: 500;
			}
		}
	}

	.gray-bg {
		background: $cGrayLightBg;
		padding: 15px;

		@include respond-above(sm) {
			position: absolute;
			bottom: 0;
		}

		@include respond-below(sm) {
			margin-top: 50px;
		}

		h3:first-child {
			margin-top: 0;
		}

		a {
			color: $cBlackText;

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

	.btn2 {
		margin-top: 50px;

		&:hover {
			color: $cBlackText;
		}
	}

	img {
		max-width: 100%;
	}

	div[class^='col-'] {
		> img {
			margin-top: 50px;
			margin-bottom: 50px;
		}
	}
}

.lang-change {
	margin-right: 10px;
	position: relative;
	padding: 20px 0;

	&:hover {
		ul {
			display: block;
		}
	}

	.over {
		font-size: 16px;
		font-family: $font-1;
		font-weight: 700;
		color: $cBlackText;

		img {
			width: 13px;
			height: 13px;
		}
	}

	ul {
		display: none;
		position: absolute;
		background: #fff;
		padding: 15px 17px;
		border-radius: 10px;
		list-style-type: none;
		box-shadow: 0px 5px 9px 0px rgba(199, 199, 199, 0.35);

		left: -30px;
		top: 50px;

		li {
			a {
				font-size: 16px;
				font-family: $font-1;
				font-weight: 500;
				color: $cGrayTextMini;
				padding: 10px 0;
				display: block;
				padding: 15px 15px;

				&:hover {
					background: $cGrayLighterBg;
					font-weight: 700;
				}
			}
		}
	}

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

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

	&.mobile {
		display: block;
		position: fixed;
		top: 15px;
		left: 50px;
		z-index: 9999;
	}
}

.subpage-content {
	.article-22 {
		h2 {
			font-size: 34px;
			font-weight: 800;
			font-family: $font-1;
			margin-bottom: 25px;
		}

		h3 {
			font-size: 28px;
			font-weight: 300;
			margin-top: 24px;
			color: #a0a09f;
			font-family: $font-1;
		}

		.zaufane-idosell {
			img {
				@include respond-above(md) {
					margin-top: -100px;
					margin-bottom: 0;
				}

				@include respond-below(md) {
					margin-bottom: 0;
					margin-top: 30px;
				}
			}
		}

		h6 {
			@extend p;
			margin-top: 20px;
			margin-bottom: 20px;
			font-weight: 600;
		}
	}

	.img-link {
		div[class^='col-'] {
			display: flex;
			justify-content: center;
			align-items: center;

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

		img {
			transition: all 0.3s ease;
		}
	}

	.numbers {
		margin-bottom: 50px;

		div[class^='col-'] {
			text-align: center;

			.img-numbers-container {
				margin-top: 50px;
				margin-bottom: 25px;
				height: 88px;
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					margin-bottom: 0px;
				}
			}
		}
	}

	.color {
		div[class^='col-'] {
			margin-top: 50px;
			margin-bottom: 50px;
			background: #fffaee;
			border: 2px dashed #f6bf25;
			box-shadow: rgba(246, 191, 37, 0.51) 6px 6px 20px 0px;
			padding: 50px;

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

		text-align: center;

		h4 {
			font-family: $font-1;
			font-size: 26px;
			font-weight: 300;
			line-height: 40px;

			.yellow {
				color: $cYellow;
			}

			strong,
			b {
				font-weight: 800;
			}
		}
	}

	.example-box-yellow {
		text-align: center;
		margin-top: 50px;
		margin-bottom: 50px;

		div[class^='col-'] {
			@include respond-below(sm) {
				margin-bottom: 50px;
			}

			&:hover {
				a {
					opacity: 1;
				}
			}

			img {
				margin-top: 0;
				margin-bottom: 40px;
				display: block;
				margin-left: auto;
				margin-right: auto;
			}

			a {
				position: absolute;
				display: flex;
				left: 15px;
				top: 0px;
				right: 15px;
				bottom: 0;
				justify-content: center;
				align-items: center;
				background: #f6bf25;
				color: #fff;
				font-weight: 700;
				opacity: 0;
				text-decoration: none;
				font-size: 18px;
				transition: 0.3s all ease;
			}
		}
	}

	.tab {
		margin-left: 20px;
	}

	table {
		border: 1px solid #eee;

		.row-yellow {
			background: $cYellow;

			td {
				border-right: 1px solid #eeb822;

				p {
					b {
						font-weight: 700;
					}
				}
			}
		}

		tbody {
			tr {
				border-bottom: 1px solid #eee;

				td {
					padding: 15px 10px;

					text-align: center;
					@extend p;
					border-right: 1px solid #eee;
				}
			}
		}

		&.table-integracje {
			background-image: url(/upload/filemanager/images/integracje/table-bg.png);
			background-size: cover;
			margin-top: 40px;
			margin-bottom: 50px;
		}
	}

	.metody {
		margin-top: 50px;

		div[class^='col-'] {
			text-align: center;

			.img {
				min-height: 115px;

				img {
					margin: 0;
				}
			}

			h4 {
				font-size: 18px;
				font-weight: 800;
				margin-top: 20px;
				margin-bottom: 20px;
			}
		}
	}

	.box-yellow {
		background: $cYellow;
		padding: 50px;
		margin-bottom: 50px;
		margin-top: 50px;

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

		p {
			font-size: 37px;
			line-height: 56px;

			@include respond-below(xs) {
				font-size: 27px;
				line-height: 37px;
			}
		}

		div[class^='col-']:last-child {
			display: flex;
			justify-content: center;
			align-items: center;

			@include respond-below(md) {
				justify-content: flex-start;
				margin-top: 20px;
			}
		}
	}

	.img-shadow {
		text-align: center;
		box-shadow: #efefef 6px 6px 20px 0px;
		margin-bottom: 20px;
		margin-top: 20px;
	}
}

span {
	&.yellow {
		color: $cYellow;
	}
}

.blog-layout,
.wideo-audio {
	.subpage-content {
		> .container {
			@media (max-width: 425px) {
				padding-left: 10px;
				padding-right: 10px;
			}
		}
	}
}

.article {
	position: relative;
	margin-top: 30px;
	margin-bottom: 60px;
	background: $cWhite;
	border-radius: 12px;
	padding: 70px;

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

	@media (max-width: 425px) {
		padding-left: 10px;
		padding-right: 10px;
	}

	.article-title {
		color: $cBlackText;
		font-size: clamp(15px, 2.5rem, 40px);
		font-family: $font-5;
		font-weight: 700;
		text-align: left;
		margin-bottom: 40px;
		margin-top: 0;
		text-transform: none;

		@include respond-below(sm) {
			font-size: clamp(15px, 2rem, 30px);
		}
	}

	.article-sub-title {
		color: $cYellow;
		font-size: 16px;
		font-weight: 600;
		font-family: $font-5;
		margin-bottom: 40px;
		margin-top: 0;
	}

	.author-footer {
		display: flex;
		margin-top: 50px;
		flex-wrap: wrap;

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

		.image {
			height: 120px;

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

		.right {
			padding-left: 15px;
			width: calc(100% - 125px);

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

			.name {
				font-weight: 600;
				margin-bottom: 5px;
				font-size: 1.2rem;
			}

			.description {
				line-height: 1.5;
				opacity: 0.8;
			}
		}
	}

	.author {
		margin: 0 0 75px 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		column-gap: 16px;
		flex-wrap: wrap;
		row-gap: 20px;

		.image {
			height: 36px;
			width: 36px;
			min-width: 36px;
			border-radius: 100%;
			object-fit: cover;
		}

		.name {
			font-size: 18px;
			font-family: $font-5;
			font-weight: 600;
			margin-bottom: 0;
		}

		.autor-position {
			position: relative;
			padding-left: 30px;

			&::before {
				content: '';
				position: absolute;
				width: 15px;
				height: 15px;
				background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
				background-position: center;
				background-size: cover;
				background-repeat: no-repeat;
				top: 50%;
				left: 0;
				transform: translateY(-60%);
			}

			p {
				color: $cBlackText;
				font-size: 18px;
				font-weight: 400;
				font-family: $font-5;
				margin-bottom: 0;
			}
		}
	}

	.date-add {
		position: relative;
		color: $cBlackText;
		font-size: 18px;
		font-weight: 400;
		font-family: $font-5;
		margin: 0 !important;
		padding-left: 30px;

		&::before {
			content: '';
			position: absolute;
			width: 15px;
			height: 15px;
			background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			top: 50%;
			left: 0;
			transform: translateY(-60%);
		}
	}

	.main-image {
		border-radius: 3px;
		overflow: hidden;
		max-width: 100%;

		img {
			width: 100%;
		}
	}

	.back {
		margin-bottom: 40px;
	}

	.text {
		clear: both;

		blockquote {
			padding-left: 25px;
			border-left: 3px solid #cccccc;
		}

		h2 {
			color: $cBlackText;
			font-size: 30px;
			font-weight: 700;
			font-family: $font-5;
			margin: 75px 0 40px 0;
		}

		p {
			color: rgba($cBlackText, 0.8);
			font-size: 18px;
			font-weight: 400;
			line-height: 1.5;
			font-family: $font-5;

			strong {
				font-weight: 700;
			}
		}

		a {
			font-weight: 700;
			color: $cBlackText;

			&:hover {
				color: $cYellow;
				background: $cBlack;
			}

			&.btn1 {
				color: #fff;

				&:hover {
					color: #fff;
				}
			}
		}

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

	.table-of-contents {
		position: relative;
		padding: 50px;
		margin-top: 75px;
		margin-bottom: 75px;
		background: #f9f9f9;
		border-radius: 12px;
		z-index: 10;

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

		.title {
			color: $cBlackText;
			font-size: 30px;
			font-weight: 700;
			font-family: $font-5;
			margin: 0 0 40px 0;
		}

		ul,
		ol {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;
			flex-direction: column;
			gap: 24px;

			li {
				position: relative;
				padding-left: 28px;
				margin: 0;

				color: rgba($cBlackText, 0.8);
				font-size: 18px;
				font-weight: 500;
				font-family: $font-5;
				line-height: 1;

				&::before {
					content: '';
					position: absolute;
					width: 15px;
					height: 15px;
					background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
					background-position: center;
					background-size: cover;
					background-repeat: no-repeat;
					top: 0;
					left: 0;
				}

				a {
					color: rgba($cBlackText, 0.8);
					font-size: 18px;
					font-weight: 500;
					font-family: $font-5;
					line-height: 1;

					&:hover {
						color: $cYellow;
					}
				}

				ol {
					margin-top: 24px;
				}
			}
		}
	}

	.entry {
		clear: both;

		p {
			font-weight: 500;
		}

		img {
			margin-bottom: 20px;
			margin-top: 20px;
		}
	}

	.date-add {
		display: flex;
		margin-top: 5px;
		align-items: center;

		img {
			width: 20px;
			height: 20px;
			margin-bottom: 2px;
			margin-right: 5px;
		}
	}

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

	.files {
		margin-top: 30px;
		margin-bottom: 30px;

		li {
			a {
				color: $cBlackText;
				font-weight: 500;

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

	.article-footer {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		padding-top: 60px;
		margin-top: 60px;
		border-top: 1px solid #e4e4e4;
		gap: 20px;

		.article-footer-col-left {
			display: flex;
			flex-direction: row;
			align-items: center;
			column-gap: 60px;
			row-gap: 20px;
			flex-wrap: wrap;

			p {
				color: #4e4e4e;
				font-size: 14px;
				font-family: $font-5;
				font-weight: 400;
				line-height: 1;
				margin: 0 !important;

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

.pager2 {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-inline-start: 0;
	list-style-type: none;
	margin-top: 20px;

	li {
		margin-right: 10px;

		@include respond-below(xs) {
			margin-right: 8px;
		}

		a {
			width: 48px;
			height: 48px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: $cGrayLightBg;
			border-radius: 2px;

			&.inactive {
				opacity: 0.3;
				pointer-events: none;
			}
		}
	}
}

.pager {
	display: flex;
	justify-content: center;
	align-items: center;
	list-style-type: none;
	margin-top: 60px;
	gap: 10px;
	padding: 0;

	li {
		a {
			color: #6e6e6e;
			width: 44px;
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #f1f1f1;
			border-radius: 8px;

			&.active {
				color: $cBlackText;
				background: $cYellow;
			}
		}
	}
}

.newsletter {
	padding: 50px;
	background: url(/upload/filemanager/images/newsletter-bg.png);
	margin-bottom: 50px;
	background-size: cover;

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

	h3 {
		font-size: 35px;
		color: $cBlackText;
		font-family: $font-1;
		font-weight: 300;
		line-height: 33px;
		margin-bottom: 30px;

		@include respond-below(md) {
			margin-top: 0;
		}

		@include respond-between(xs, sm) {
			font-size: 27px;
			margin-bottom: 20px;
		}

		@include respond-below(xs) {
			font-size: 24px;
			margin-bottom: 15px;
		}

		b,
		strong {
			font-weight: 800;
		}
	}

	p {
		font-size: 19px;

		@include respond-between(xs, sm) {
			font-size: 15px;
		}

		@include respond-below(xs) {
			font-size: 17px;
		}
	}

	form {
		.form-control {
			border: none;
		}

		.form-group {
			margin-bottom: 20px;

			@include respond-between(xs, md) {
				margin-bottom: 10px;
			}
		}

		label {
			font-weight: 400;

			font-family: $font-1;
			font-size: 12px;
		}

		.form-check {
			margin-bottom: 20px;

			@include respond-between(xs, md) {
				margin-bottom: 10px;
			}
		}

		.btn1 {
			padding: 10px 30px;
		}
	}

	div[class^='col-'] {
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;

		&:first-child {
			@include respond-between(sm, md) {
				margin-bottom: 10px;
			}
		}
	}
}

.newsletter-2 {
	padding: 32px;
	background: #fec407;
	border-radius: 12px;

	display: flex;
	align-items: center;

	h3 {
		color: $cBlackText;
		font-size: 16px;
		font-weight: 700;
		font-family: $font-5;
		margin: 0 0 16px 0;
	}

	h2 {
		color: $cBlackText;
		font-size: 42px;
		font-weight: 700;
		font-family: $font-5;
		line-height: 1;
		margin: 0 0 34px 0;

		span {
			color: $cWhite;
		}
	}

	.form-group {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 30px;
		background: $cWhite;
		border-radius: 12px;
		overflow: hidden;
		padding: 8px 20px;

		label {
			margin: 0;
			color: #b9b9b9;
			font-size: 14px;
			font-weight: 600;
			font-family: $font-5;
		}

		input {
			color: $cBlackText;
			font-size: 14px;
			font-weight: 700;
			font-family: $font-5;
			border: none;

			&:focus {
				outline: none !important;
				box-shadow: none !important;
			}
		}
	}

	.form-check {
		display: flex;
		flex-direction: row;
		gap: 14px;
		margin-bottom: 30px;

		label {
			font-size: 12px;
			font-weight: 400;
			font-family: $font-5;
		}
	}

	.btn1 {
		font-size: 14px;
		font-family: $font-5;
		font-weight: 700;
		width: 100%;
		border-radius: 12px;
	}
}

.form-check-input {
	position: relative;
	appearance: none;
	width: 20px;
	min-width: 20px;
	height: 20px;
	border-radius: 4px;
	background: $cBlack;
	overflow: hidden;
	cursor: pointer;

	&:checked {
		&::before {
			top: 9px;
			left: 5px;
		}

		&::after {
			top: 12px;
			left: 4px;
		}
	}

	&::before {
		content: '';
		position: absolute;
		top: -11px;
		left: 25px;
		width: 11px;
		height: 1px;
		background: $cWhite;
		transform: rotate(-50deg);
		transition: all 250ms ease-in-out;
	}

	&::after {
		content: '';
		position: absolute;
		top: -8px;
		left: -16px;
		width: 4px;
		height: 1px;
		background: $cWhite;
		transform: rotate(45deg);
		transition: all 250ms ease-in-out;
	}
}

.why {
	@extend .box2;
	margin-top: 104px;

	background: $cVioletDarkBg;
	position: relative;
	overflow: hidden;

	h1 {
		@extend .title;
		color: #fff;
		margin-bottom: 20px;
	}

	h3 {
		@extend .subtitle;
		color: #fff;

		font-weight: 400;
		margin-bottom: 0px;

		@include respond-above(xs) {
		}
	}

	p {
		color: #fff;

		@extend .text;
	}

	@include respond-between(xs, sm) {
		margin-top: 160px;
	}

	@include respond-below(xs) {
		margin-top: 90px;
	}

	.dark-bg-star {
		position: absolute;
		top: 24px;
		left: 67%;
		z-index: 5;

		img {
			width: 467px;
			transform: rotateZ(-20deg);
		}

		@include respond-between(md, lg) {
			top: 19px;
		}

		@include respond-between(sm, md) {
			top: 48px;
		}
	}

	div[class^='col-'] {
		z-index: 7;
	}
}

#scontainer-14 {
	@extend .box;

	div[class^='col-'] {
		display: flex;
		//  align-items: center;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;

		img {
			height: auto;
			width: 100%;

			@include respond-above(lg) {
				margin-left: 20%;
				width: 80%;
			}
		}
	}

	h3 {
		@extend .title;
		margin-bottom: 50px;
	}
}

.dark-box {
	@extend .box2;
	background: $cVioletDarkBg;
	position: relative;
	overflow: hidden;

	h5 {
		@extend .subtitle;
		color: #fff;

		font-weight: 400;
	}

	p {
		@extend .text;
		color: #fff;
	}

	div[class^='col-'] {
		z-index: 7;

		img {
			width: 100%;
		}
	}

	#scontainer-23 {
		div[class^='col-']:first-child {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		div[class^='col-']:last-child {
			display: flex;
			justify-content: center;
			align-items: flex-start;
			flex-direction: column;
		}

		p {
			margin-bottom: 0;
			margin-top: 20px;
		}

		h5 {
			margin-bottom: 20px;
		}

		img {
			@include respond-below(md) {
				max-width: 250px;
				margin-bottom: 50px;
			}
		}
	}

	.dark-bg-star2 {
		position: absolute;
		top: 0px;
		left: -225px;
		z-index: 5;

		img {
			width: 390px;
			transform: rotateZ(-34deg);
		}
	}

	.dark-bg-star3 {
		position: absolute;
		top: -185px;
		left: calc(50% + 336px);
		z-index: 5;

		@include respond-between(md, lg) {
			left: calc(50% + 115px);
		}

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

		img {
			width: 370px;
			transform: rotateZ(-82deg);
		}
	}
}

.lighter-gray-box {
	background: $cGrayLighterBg;

	#scontainer-16 {
		@extend .box;

		h3 {
			@extend .title;
			margin-bottom: 50px;
		}

		h5 {
			@extend .subtitle;
			font-weight: 400;
		}

		div[class^='col-'] {
			display: flex;

			flex-wrap: wrap;
			flex-direction: column;
			justify-content: center;

			ul {
				li {
					color: $cYellow;
					margin-bottom: 20px;

					h5 {
						color: $cBlackText;
					}
				}
			}

			img {
				max-width: 90%;
				margin-left: 10%;
			}
		}
	}
}

#scontainer-18,
#scontainer-33,
#scontainer-28 {
	@extend .box2;

	h2 {
		font-size: 24px;

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

	h3 {
		font-size: 28px;

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

		@include respond-below(md) {
			line-height: 28px;
		}
	}

	h3 {
		@extend .title;

		@include respond-above(lg) {
			margin-right: 50px;
		}
	}

	p {
		margin-bottom: 0;
	}

	div[class^='col-'] {
		&:last-child {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-left: 2px dashed $cBlackText;
			padding-left: 50px;

			@include respond-below(sm) {
				border: none;
				margin-top: 20px;
				padding-left: 0;
			}
		}
	}
}

.yellow-box {
	background: $cYellow;
	position: relative;
	overflow: hidden;

	.yellow-bg-star {
		position: absolute;
		top: 0;
		left: calc(50% - 475px);

		@include respond-between(md, lg) {
			left: calc(50% - 390px);
		}

		@include respond-between(sm, md) {
			left: calc(50% - 458px);
		}

		@include respond-below(xs) {
			left: -144px;
		}

		img {
			width: 400px;
			transform: rotateZ(-16deg);
		}
	}
}

.contact-page {
	background-image: url(/upload/filemanager/images/kontakt-bg.jpg);
	background-size: cover;

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

	.form-box {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		&.cz {
			justify-content: flex-start;

			@include respond-above(md) {
				padding-top: 60px;
			}
		}

		> .hbspt-form {
			width: 100%;

			@include respond-between(xs, md) {
				width: 70%;
			}
		}

		.contact-text-box {
			text-align: center;

			img {
				width: 209px;
				height: auto;
				margin-bottom: 20px;
			}

			p {
				@extend .subtitle;
				margin-bottom: 0px;
				font-size: 23px;

				b {
					font-weight: 900;
				}
			}

			margin-bottom: 40px;
		}
	}

	.contact-title-box {
		height: 195px;
		background: $cBlackText;

		display: flex;
		justify-content: center;
		align-items: center;

		@include respond-below(xs) {
			margin-bottom: 50px;
			margin-top: 50px;
			height: 157px;
		}

		p {
			color: #fff;
			font-size: 28px;
			text-transform: uppercase;
			font-weight: 700;
			margin-bottom: 75px;

			@include respond-below(xs) {
				margin-bottom: 0px;
				font-size: 21px;
			}
		}
	}

	.contact-calendar {
		margin-top: -85px;
		display: flex;
		justify-content: center;
		align-items: center;

		@include respond-below(xs) {
			margin-top: 0;
		}

		&.cz {
			@include respond-below(xs) {
				margin-top: -85px;
			}
		}
	}
}

#scontainer-22 {
	padding-top: 0;
	margin-top: -200px;

	.text-col {
		padding-top: 300px;
	}

	img {
		width: 100%;
		z-index: 10;

		@include respond-below(md) {
			margin-top: 50px;
		}
	}

	@extend .box;

	p {
		@extend .text;

		u {
			color: $cGray;
		}

		margin-bottom: 30px;

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

	div[class^='col-']:first-child {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-direction: column;
	}

	div[class^='col-']:last-child {
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

#scontainer-24 {
	@extend .box;

	img {
		width: 100%;

		@include respond-below(md) {
			margin-top: 50px;
		}
	}

	div[class^='col-']:first-child {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-direction: column;
	}

	div[class^='col-']:last-child {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	h3 {
		@extend .title;
		margin-bottom: 20px;
	}

	p {
		@extend .text;
		margin-bottom: 50px;
	}
}

.easy {
	@extend .box;
	background: $cGrayLighterBg;

	background: linear-gradient(
		98deg,
		rgba(255, 255, 255, 1) 0%,
		rgba(250, 250, 250, 1) 100%
	);

	h3 {
		@extend .title-big;
		margin-bottom: 80px;
	}

	h5 {
		@extend .subtitle;
		max-width: 350px;
		margin-top: -32px;
	}

	h6 {
		@extend .title-big;
		width: 140px;
		height: 140px;
		background: rgb(242, 242, 242);
		background: linear-gradient(
			324deg,
			rgba(242, 242, 242, 1) 0%,
			rgba(252, 252, 252, 1) 100%
		);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.row {
		&:nth-child(2) {
			div[class^='col-'] {
				&:first-child,
				&:nth-child(2),
				&:nth-child(3) {
					margin-bottom: 50px;
				}

				@include respond-below(md) {
					&:nth-child(4) {
						margin-bottom: 50px;
					}
				}

				@include respond-below(xs) {
					&:nth-child(5) {
						margin-bottom: 50px;
					}
				}

				&:nth-child(3),
				&:nth-child(4) {
					h6 {
						background: linear-gradient(
							324deg,
							rgba(252, 246, 228, 1) 0%,
							rgba(252, 251, 248, 1) 100%
						);
					}
				}
			}
		}
	}
}

#scontainer-27 {
	@extend .box;

	h3 {
		@extend .title-big;

		margin-bottom: 80px;
	}

	a {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 19%;
		border: 1px solid $cGrayLightBg;
		transition: all 0.3s ease;
		padding: 20px 0;

		@include respond-between(xs, sm) {
			width: 30%;
		}

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

		img {
			filter: grayscale(1);
			opacity: 0.7;
			transition: all 0.3s ease;
			width: 150px;

			@include respond-between(sm, md) {
				width: 90px;
			}

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

		&:hover {
			box-shadow: 0 0 25px rgba(0, 0, 0, 0.23);

			img {
				filter: grayscale(0);
				opacity: 1;
			}
		}
	}

	.row:last-child {
		div[class^='col-'] {
			display: flex;
			flex-wrap: wrap;

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

#scontainer-29 {
	padding-bottom: 0;
	@extend .box;

	background: linear-gradient(
		0deg,
		rgba(255, 255, 255, 1) 0%,
		rgba(251, 251, 251, 1) 100%
	);

	h3 {
		@extend .title-big;
		margin-bottom: 80px;
	}

	h5 {
		@extend .subtitle;
		margin-bottom: 0;
	}

	p {
		@extend .text;
	}

	.gradient-gray-bg {
		background: rgb(238, 238, 238);
		background: linear-gradient(
			90deg,
			rgba(238, 238, 238, 1) 0%,
			rgba(251, 251, 251, 1) 100%
		);
		padding-top: 25px;
		padding-bottom: 25px;
	}

	.gradient-yellow-bg {
		background: rgb(255, 249, 229);
		background: linear-gradient(
			90deg,
			rgba(255, 249, 229, 1) 0%,
			rgba(255, 255, 255, 1) 100%
		);
		padding-top: 25px;
		padding-bottom: 25px;
	}

	.r1 {
		@extend .box3;
	}

	.r2 {
		padding-top: 60px;

		img {
			margin-bottom: 30px;
		}

		h5 {
			margin-bottom: 10px;
		}

		.col-lg-3 {
			&:first-child,
			&:nth-child(2) {
				@include respond-below(md) {
					margin-bottom: 50px;
				}
			}

			&:nth-child(3) {
				@include respond-below(xs) {
					margin-bottom: 50px;
				}
			}

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

	.r3 {
		@extend .box3;

		div[class^='col-'] {
			&:first-child {
				display: flex;
				align-items: flex-start;

				flex-direction: column;
				justify-content: center;
			}
		}

		img {
			width: 100%;

			@include respond-below(md) {
				margin-top: 20px;
			}
		}
	}
}

.footer-contact-form {
	border: 1px solid #f5f5f5;
	padding: 50px;
	background: #fff;
	border-radius: 2px;
	position: relative;
	z-index: 5;

	.row {
		margin-bottom: 15px;
	}

	.form-control {
		border: 1px solid #ece7e7;
		height: 50px;
		padding: 15px;
	}

	textarea {
		height: 100px !important;
	}
}

.footer-contact-bg {
	margin-top: -250px;
	background: #fff;
}

#scontainer-33 {
	.btn3 {
		background: $cBlack;
		color: #fff;
	}
}

#scontainer-9 {
	strong {
		font-weight: 600;
		text-transform: uppercase;
		display: block;
		margin-bottom: 10px;
	}

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

		li {
			a {
				margin: 0;
			}
		}
	}
}

#scontainer-1 {
	position: relative;
	z-index: 10;
}

#scontainer-36 {
	padding-bottom: 130px;
	padding-top: 130px;

	.tile-video {
		padding-bottom: 80px;
	}
}

#scontainer-38 {
	li {
		color: $cGray;

		a {
			color: $cGray;
		}
	}

	p {
		color: #545362;
	}

	.gradient-gray-bg {
		padding: 100px 0;

		&:nth-child(2n) {
			background: rgb(238, 238, 238);
			background: linear-gradient(
				90deg,
				rgba(238, 238, 238, 1) 0%,
				rgba(251, 251, 251, 1) 100%
			);
		}

		.service_header {
			margin-bottom: 100px;
		}

		.service_arr {
			p {
				color: $cBlack;
			}
		}

		ul {
			padding-left: 18px;
		}
	}

	.omnibus_mini {
		.box_wrapper {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 20px;
		}

		.box_img {
			width: fit-content;
			min-width: 200px;

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

		.box_data {
			h3 {
				font-size: 22px;
				font-weight: 600;
				margin-bottom: 0;
			}
		}

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

			.box_wrapper {
				flex-direction: column;
				text-align: center;
			}
		}
	}
}

#scontainer-39 {
	padding: 100px 0;

	h3 {
		line-height: 50px;
		border-right: 2px dashed $cBlack;
	}
}

#hsForm_b007eef9-5fb5-4535-821a-da1560ce2861 {
	width: auto !important;
}

@media (min-width: 1360px) {
}

@media (min-width: 1px) {
	.fixed-top {
		.container {
			padding: 0 15px !important;
		}
	}
}

@media (min-width: 1360px) {
	.container {
		max-width: 1240px;
	}
}

// @media (min-width: 1200px) {
// 	.container {
// 		max-width: 1140px;
// 		padding: 0 70px;
// 	}
// }

// @media (min-width: 992px) {
// 	.container {
// 		padding: 0 70px;
// 	}
// }

// @media (min-width: 768px) {
// 	.container {
// 		padding: 0 70px;
// 	}
// }

// @media (min-width: 576px) {
// 	.container {
// 		padding: 0 70px;
// 	}
// }

// @media (max-width: 992px) {
// 	#scontainer-39 {
// 		h3 {
// 			border: none;
// 		}
// 	}
// }

@media (max-width: 576px) {
	.container {
		// padding: 0 40px;
		padding: 0 15px;
	}
}

#search-form {
	width: 100%;
	margin-bottom: 50px;

	form {
		display: block;
		position: relative;

		input {
			border: 2px solid #e5e5e5;
			border-radius: 100px;

			font-size: 16px;
			font-weight: 700;
			line-height: 1;
			font-family: $font-5;
			padding: 12px 24px;

			// height: 45px;
			// padding: 10px 45px 10px 20px;
			color: $cBlack;
			// font-weight: 600;
			width: 100%;
			outline: none !important;
			transition: all 250ms ease-in-out;

			&::placeholder {
				color: #b9b9b9;
			}

			&:focus-visible {
				border-color: #fec407;
			}
		}

		button {
			background: transparent;
			color: $cBlack;
			border: 0;
			position: absolute;
			right: 10px;
			top: 50%;
			transform: translateY(-50%);
			z-index: 10;
			padding: 0;

			i {
				color: $cBlack;
			}
		}

		::placeholder {
			color: $cBlack;
			font-weight: 600;
		}
	}
}

.alert-danger {
	background: $cYellow;
	border: 0;
	color: #fff;
}

.testimonials {
	@extend .box;

	.container {
		max-width: 1280px;
	}

	#scontainer-40 {
		@include respond-below(sm) {
			margin-bottom: 50px;
		}
	}

	.flex-cols {
		display: flex;
		flex-wrap: wrap;

		.flex-single-col {
			width: calc(100% / 4 - 30px);
			margin: 0 15px;

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

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

	div[id^='scontainer'] .scontainer-content {
		p {
			font-size: 14px;
			line-height: 1.5;
		}

		p:first-child {
			display: flex;
			align-items: center;
			margin-bottom: 10px;
		}
	}
}

/* Opinie dla sklepów internetowych page */
#scontainer-45 {
	p {
		margin-bottom: 50px;
	}
}

.custom-img-bg {
	background-image: url('/upload/filemanager/Fill_23.jpg');
	background-position: center;
	background-size: cover;
}

body {
	&.google-vs-opinie {
		.custom-img-bg {
			background-image: url('/layout/images/google-vs-opinie-header-bg.png');
		}
	}
}

#scontainer-46 {
	.scontainer-content {
		.row {
			margin: 100px 0 75px 0;

			h3 {
				max-width: 720px;
				margin: 0 auto 25px auto;
				font-size: 2rem;
				font-weight: 500;
				font-family: 'DM Sans', sans-serif;
				line-height: 41px;
			}

			p {
				color: $cGray;
				font-weight: 500;
			}
		}
	}
}

#scontainer-47 {
	h3 {
		font-size: 2rem;
		font-weight: 500;
		font-family: 'DM Sans', sans-serif;
		line-height: 41px;
	}

	.gradient-gray-bg {
		padding: 100px 0;

		@media (min-height: 700px) {
			height: calc(100vh - 104px);
			display: flex;
			align-items: center;
			max-height: 800px;
		}

		&:nth-child(2n-1) {
			background: $cGrayLighterBg;
		}

		p {
			color: $cGray;
		}
	}
}

#scontainer-48 {
	margin: 100px 0 100px 0;

	.row {
		h3 {
			margin-bottom: 60px;
			font-size: 2rem;
			font-weight: 500;
			font-family: 'DM Sans', sans-serif;
			line-height: 41px;
		}

		h4 {
			margin-bottom: 25px;
			padding-top: 50px;
			font-size: 1.2rem;
			font-family: 'DM Sans', sans-serif;
		}

		p {
			color: $cGray;
		}
	}
}

#scontainer-49 {
	h3 {
		font-size: 2rem;
		font-weight: 500;
		font-family: 'DM Sans', sans-serif;
		line-height: 41px;
	}

	.gradient-gray-bg {
		padding: 100px 0;

		@media (min-height: 700px) {
			height: calc(100vh - 104px);
			display: flex;
			align-items: center;
			max-height: 800px;
		}

		&:nth-child(2n) {
			background: $cGrayLighterBg;
		}

		p {
			color: $cGray;
		}
	}
}

#scontainer-50 {
	padding-top: 150px;
	margin-bottom: 150px;

	.row {
		h3 {
			font-size: 2rem;
			font-weight: 500;
			font-family: 'DM Sans', sans-serif;
			line-height: 41px;
		}

		h4 {
			margin-bottom: 25px;
			padding-top: 50px;
			font-size: 1.2rem;
			font-family: 'DM Sans', sans-serif;
		}

		p {
			color: $cGray;
			margin-bottom: 50px;
		}
	}
}

#scontainer-51 {
	.gradient-gray-bg {
		padding: 100px 0;
		background: $cGrayLighterBg;

		@media (min-height: 700px) {
			height: calc(100vh - 104px);
			display: flex;
			align-items: center;
			max-height: 800px;
		}

		p {
			color: $cGray;
		}
	}
}

/* Opinie dla firm usługowych page */

#scontainer-53 {
	.scontainer-content {
		.row {
			margin: 100px 0 75px 0;

			h3 {
				max-width: 720px;
				margin: 0 auto 25px auto;
				font-size: 2rem;
				font-weight: 500;
				font-family: 'DM Sans', sans-serif;
				line-height: 41px;
			}

			p {
				color: $cGray;
				font-weight: 500;
			}
		}
	}
}

#scontainer-54,
#scontainer-56 {
	h3 {
		font-size: 2rem;
		font-weight: 500;
		font-family: 'DM Sans', sans-serif;
		line-height: 41px;
	}

	.gradient-gray-bg {
		padding: 100px 0;

		@media (min-height: 700px) {
			height: calc(100vh - 104px);
			display: flex;
			align-items: center;
			max-height: 800px;
		}

		&:nth-child(2n-1) {
			background: $cGrayLighterBg;
		}

		p {
			color: $cGray;
		}
	}
}

#scontainer-55 {
	padding-top: 150px;
	margin-bottom: 150px;

	.row {
		h3 {
			font-size: 2rem;
			font-weight: 500;
			font-family: 'DM Sans', sans-serif;
			line-height: 41px;
		}

		h4 {
			margin-bottom: 25px;
			padding-top: 50px;
			font-size: 1.2rem;
			font-family: 'DM Sans', sans-serif;
		}

		p {
			color: $cGray;
			margin-bottom: 50px;
		}
	}
}

.subpage-content {
	.article-83 {
		.brand-img-box {
			img:last-child {
				bottom: -40px;
				top: auto;
				left: 0;
			}
		}
	}
}

//* container zaufane
@media (max-width: 768px) {
	.container__mobile {
		display: flex;
		align-items: center;
		height: 100vh;
	}
}

.container_zaufane {
	@media (min-width: 1200px) {
		padding: 0 15px;
		max-width: 1336px;
	}
}

.container_zaufane_max {
	@media (min-width: 1200px) {
		padding: 0 15px;
		max-width: 1440px;
	}
}

//* rzeczy o marketingu - page
.hero_bg {
	background-image: url('/upload/filemanager/images/rzeczy-o-marketingu/marketing-top-1.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	min-height: 100vh;

	@media (max-width: 1200px) {
		background-position: 65%;
	}

	@media (max-width: 768px) {
		min-height: fit-content;
		background-image: none;
		background: #5a5879;
	}
}

#scontainer-71 {
	color: $cWhite;
	padding-top: 150px;

	.hero_allert {
		position: relative;
		display: inline-block;
		background: rgba(#1f1f2c, 0.8);
		padding: 12px 12px 12px 64px;
		border-radius: 32px;
		margin-bottom: 40px;

		span {
			position: absolute;
			left: 24px;
			top: 0;
			bottom: 0;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				width: 28px;
				height: 28px;
				margin: auto;
				border-radius: 50px;
				background: #ed1c15;
			}

			&::after {
				content: '';
				position: absolute;
				left: 14px;
				top: 0;
				bottom: 0;
				margin: auto;
				border-radius: 100px;
				background: #ed1c15;
				animation: dots_anim_1 1.7s infinite ease-in-out;
				transform: translateX(-50%);
			}

			@keyframes dots_anim_1 {
				0% {
					opacity: 1;
					width: 15px;
					height: 15px;
				}

				100% {
					opacity: 0;
					width: 55px;
					height: 55px;
				}
			}
		}

		p {
			margin: 0;
			font-size: 1.25rem;
			line-height: 26px;
		}
	}

	h1 {
		font-size: 4.125rem;
		line-height: 66px;
		width: 100%;
		max-width: 952px;
		margin-bottom: 70px;
	}

	.hero_timer {
		font-size: 1.25rem;
		line-height: 50px;
		color: $cWhite;
		margin-bottom: 70px;

		strong {
			font-size: 4.125rem;
			color: $cYellow;
		}
	}

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

		a {
			font-size: 1.25rem;
			line-height: 26px;
		}

		strong {
			color: $cWhite;
			margin-left: 32px;
			font-size: 1.75rem;
			line-height: 36px;

			img {
				padding-bottom: 10px;
			}
		}

		.btn2__form__phone {
			display: none;
		}
	}

	@media (max-width: 1200px) {
		h1 {
			font-size: 2.25rem;
			line-height: 50px;
			max-width: 570px;
		}
	}

	@media (max-width: 1200px) {
		h1 {
			margin-bottom: 50px;
		}

		.hero_timer {
			margin-bottom: 30px;
		}

		.hero_buttons {
			flex-direction: column;
			align-items: flex-start;
			gap: 30px;

			.btn2__form {
				text-align: center;
			}

			strong {
				display: flex;
				flex-direction: row-reverse;
				align-items: center;
				gap: 16px;
				margin-left: 0;
				font-size: 1.5rem;
				line-height: 31px;

				img {
					padding-bottom: 0;
				}
			}
		}
	}

	@media (max-width: 768px) {
		padding: 24px 0;

		h1 {
			font-size: 1.75rem;
			line-height: 36px;
			max-width: unset;
			text-align: center;
		}

		.hero_allert {
			margin-bottom: 30px;
			padding: 12px 12px 12px 32px;
			text-align: center;

			span {
				left: -14px;
			}

			p {
				font-size: 1.125rem;
				line-height: 23px;
			}
		}

		.hero_timer {
			text-align: center;
			font-size: 1.125rem;
			line-height: 50px;

			strong {
				font-size: 2.25rem;
				line-height: 50px;
			}
		}

		.hero_buttons {
			align-items: center;

			.btn2__form__pc {
				display: none;
			}

			.btn2__form__phone {
				display: block;
			}
		}
	}
}

#custom_box_form {
	display: none;

	.custom_box_form__wrapper {
		padding-top: 80px;
	}

	@media (max-width: 768px) {
		display: block;
	}
}

.hero_timer {
	font-size: 1.25rem;
	line-height: 50px;
	color: $cWhite;
	margin-bottom: 70px;

	strong {
		font-size: 4.125rem;
		color: $cYellow;
	}

	@media (max-width: 768px) {
		font-size: 1.125rem;
		line-height: 50px;

		strong {
			font-size: 2.25rem;
			line-height: 50px;
		}
	}
}

.start_bg {
	color: #272737;
	position: relative;
	background: #fafafa;
	z-index: 1;

	&::before {
		content: url('/upload/filemanager/images/rzeczy-o-marketingu/gray-star-bg.png');
		position: absolute;
		left: 82px;
		bottom: -6px;
		z-index: -1;
	}

	&::after {
		content: url('/upload/filemanager/images/rzeczy-o-marketingu/yellow-star-bg.png');
		position: absolute;
		right: 130px;
		top: 0;
		z-index: -1;
	}

	#scontainer-72 {
		padding: 180px 0 170px 0;
		display: none;

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

		p {
			font-size: 2.875rem;
			line-height: 59px;
		}

		.btn3 {
			display: none;
		}
	}

	@media (max-width: 1200px) {
		#scontainer-72 {
			p {
				font-size: 1.875rem;
				line-height: 34px;
			}
		}
	}

	@media (max-width: 768px) {
		#scontainer-72 {
			padding: 50px 0;
			text-align: center;

			p {
				font-size: 1.25rem;
				line-height: 30px;
			}

			.btn3 {
				margin-top: 1rem;
				display: inline-block;
			}
		}

		&::before {
			transform: scale(0.4);
			height: 135px;
			bottom: 0;
			left: 0;
		}

		&::after {
			transform: scale(0.4);
			height: 0;
			right: 0;
		}
	}
}

#scontainer-77 {
	padding-top: 180px;

	h2 {
		font-size: 2.875rem;
		line-height: 59px;
		color: #272737;
		margin-bottom: 60px;
	}

	@media (max-width: 1200px) {
		h2 {
			font-size: 2.25rem;
			line-height: 36px;
			text-align: center;
		}
	}

	@media (max-width: 768px) {
		padding-top: 80px;
	}
}

#scontainer-99 {
	border: 1px solid #f2f2f2;

	@media (max-width: 1200px) {
		border: none;

		img {
			margin-bottom: 60px;
		}
	}
}

.left_col {
	margin-bottom: 180px;

	@media (max-width: 768px) {
		margin-bottom: 80px;
	}
}

#scontainer-73 {
	ul {
		margin: 0 0 70px 0;
		padding: 0;
		list-style: none;

		li {
			color: #272737;
			position: relative;
			font-size: 1.5rem;
			line-height: 28px;
			padding-left: 86px;
			counter-increment: my-awesome-counter;

			&::before {
				content: counter(my-awesome-counter);
				position: absolute;
				left: 0;
				top: 50%;
				width: 50px;
				height: 50px;
				transform: translateY(-50%);
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #e6e7e8;
				border-radius: 100px;
				font-size: 1.125rem;
				line-height: 23px;
				font-weight: 700;
			}

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

	@media (max-width: 1200px) {
		ul {
			li {
				padding-left: 0;
				padding-top: 55px;
				text-align: center;

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

	@media (max-width: 768px) {
		ul {
			li {
				font-size: 1.25rem;
				line-height: 24px;
			}
		}
	}
}

.box_testimonials {
	background: #fafafa;

	#scontainer-74 {
		padding: 180px 0 120px 0;

		img {
			display: block;
			margin: 0 auto;
			border-radius: 200px 200px 200px 0;
			margin-bottom: -65px;
		}

		.testimonial_tile {
			background: $cWhite;
			padding: 100px 50px 50px 50px;

			.user_name {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 1.125rem;
				line-height: 28px;
				margin-bottom: 30px;

				a {
					color: black;
				}
			}

			.user_data {
				font-size: 1.125rem;
				line-height: 28px;
				margin-bottom: 0;
				text-align: center;
			}
		}
	}

	@media (max-width: 768px) {
		#scontainer-74 {
			padding: 80px 0;

			.testimonial_tile {
				a {
					pointer-events: none;
				}
			}
		}
	}
}

#scontainer-75 {
	padding-top: 180px;
	padding-bottom: 180px;

	.col-12 {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	h2 {
		color: #272836;
		font-size: 1.75rem;
		line-height: 36px;
		margin-bottom: 70px;
	}

	a {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20px 0;
		width: 19%;
		border: 1px solid #e9e9e9;
		pointer-events: none;
	}

	@media (max-width: 1200px) {
		a {
			width: 25%;
		}
	}

	@media (max-width: 998px) {
		a {
			width: 33%;
		}
	}

	@media (max-width: 768px) {
		padding-top: 80px;
		padding-bottom: 80px;

		a {
			width: 50%;
		}

		h2 {
			font-size: 1.5rem;
		}
	}
}

.hero_footer_bg {
	background-image: url('/upload/filemanager/images/rzeczy-o-marketingu/marketing-bottom-1.jpg');
	background-repeat: no-repeat;
	background-position: 95%;
	background-size: cover;
	padding: 130px 0;

	#scontainer-76 {
		.col-6 {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		h3 {
			color: $cWhite;
			font-size: 1.75rem;
			line-height: 36px;
			display: flex;
			align-items: center;
			gap: 17px;
			margin-bottom: 60px;
		}

		h2 {
			color: $cWhite;
			font-size: 4.125rem;
			line-height: 66px;
			margin-bottom: 60px;
		}

		.hero_timer {
			margin-bottom: 0;
		}
	}

	@media (max-width: 1200px) {
		#scontainer-76 {
			h3 {
				font-size: 1.5rem;
				margin-bottom: 30px;
			}

			h2 {
				font-size: 3rem;
				line-height: 50px;
				margin-bottom: 30px;
			}
		}
	}

	@media (max-width: 767px) {
		background: #003058;
	}
}

.footer_2 {
	background: #fafafa;
	padding: 60px 0;
	color: #272836;

	@media (max-width: 768px) {
		font-size: 0.8rem;
	}
}

//* online marketing - page
.page_content {
	overflow-x: hidden;
}

.box_separator {
	border-bottom: 2px solid #e6e6e6;
}

.box_gray_bg {
	background: #f7f7f7;

	@media (max-width: 991px) {
		&.box_gray_bg_respo {
			background: $cWhite !important;
		}
	}
}

.hero_bg_2 {
	position: relative;
	background: linear-gradient(
		0deg,
		rgb(209, 209, 209) 0%,
		rgb(75, 75, 75) 100%
	);
	// background-image: url("/upload/filemanager/images/online-marketing/Mask-Group-2.jpg");
	// background-repeat: no-repeat;
	// background-position: center;
	// background-size: cover;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;

	&::before {
		content: url('/upload/filemanager/images/logo.png');
		position: absolute;
		top: 20px;
		left: 50%;
		transform: translateX(-50%);
	}

	&::after {
		content: url('../../images/arrow-down-outline.svg');
		position: absolute;
		bottom: 20px;
		left: 50%;
		width: 32px;
		transform: translateX(-50%);
		animation: bounce 3s infinite;
	}

	@keyframes bounce {
		0%,
		20%,
		50%,
		80%,
		to {
			transform: translateY(0) translateX(-50%);
		}

		40% {
			transform: translateY(-30px) translateX(-50%);
		}

		60% {
			transform: translateY(-15px) translateX(-50%);
		}
	}
}

#scontainer-79 {
	.alert_box {
		display: inline-block;
		position: relative;
		color: $cWhite;
		background: rgba(#696969, 0.5);
		border-radius: 90px;
		padding: 24px 142px;
		margin-bottom: 120px;

		span {
			position: absolute;
			left: 28px;
			top: 0;
			bottom: 0;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				width: 38px;
				height: 38px;
				margin: auto;
				border-radius: 50px;
				background: $cYellow;
			}

			&::after {
				content: '';
				position: absolute;
				left: 19px;
				top: 0;
				bottom: 0;
				margin: auto;
				border-radius: 100px;
				background: $cYellow;
				animation: dots_anim_1 1.7s infinite ease-in-out;
				transform: translateX(-50%);
			}

			@keyframes dots_anim_1 {
				from {
					opacity: 1;
					width: 38px;
					height: 38px;
				}

				to {
					opacity: 0;
					width: 64px;
					height: 64px;
				}
			}
		}

		h3 {
			font-family: $font-3;
			font-size: 1.375rem;
			line-height: 27px;
			margin-bottom: 0;
		}

		p {
			font-family: $font-3;
			font-size: 1.125rem;
			line-height: 25px;
			margin-bottom: 0;
		}
	}

	h1 {
		width: 100%;
		max-width: 1224px;
		margin: 0 auto;
		font-size: 5.625rem;
		font-family: $font-2;
		line-height: 110px;
		letter-spacing: 1.35px;
		text-transform: uppercase;
		color: $cWhite;

		span {
			color: $cYellow;
		}
	}

	@media (max-width: 991px) {
		h1 {
			font-size: 2.1875rem;
			line-height: 50px;
		}

		.alert_box {
			position: absolute;
			margin-bottom: 0;
			left: -50%;
			right: -50%;
			top: -250px;
			border-radius: 0;
			padding: 30px 0;
			background: linear-gradient(
				90deg,
				rgba(255, 255, 255, 0.5) 0%,
				rgba(114, 114, 114, 0.5) 40%,
				rgba(105, 105, 105, 0.5) 50%,
				rgba(111, 111, 111, 0.5) 60%,
				rgba(255, 255, 255, 0.5) 100%
			);

			span {
				left: calc(50% - 18px);
				top: -100%;
			}

			h3 {
				width: 100%;
				max-width: 250px;
				margin-left: auto;
				margin-right: auto;
				margin-bottom: 15px;
				font-family: $font-3;
				font-size: 1.25rem;
			}

			p {
				width: 100%;
				max-width: 250px;
				margin-left: auto;
				margin-right: auto;

				font-family: $font-3;
				font-size: 1.25rem;
			}
		}
	}

	@media (max-width: 767px) {
	}

	@media (max-width: 567px) {
		padding-top: 250px;
	}
}

#scontainer-80 {
	padding: 120px 0;

	p {
		position: relative;
		font-family: $font-3;
		font-size: 2.1875rem;
		line-height: 55px;
		width: 100%;
		margin: 0 auto;

		&:nth-child(1) {
			max-width: 1040px;
			padding-bottom: 160px;

			&::before {
				position: absolute;
				content: '';
				left: 50%;
				bottom: 75px;
				width: 106px;
				height: 7px;
				border-radius: 50px;
				background: $cYellow;
				transform: translateX(-50%);
			}
		}

		&:nth-child(2) {
			max-width: 840px;
		}
	}

	ul {
		position: relative;
		list-style: none;
		padding-left: 0;
		margin-bottom: 0;
		padding-bottom: 160px;

		&::before {
			position: absolute;
			content: '';
			left: 50%;
			bottom: 75px;
			width: 106px;
			height: 7px;
			border-radius: 50px;
			background: $cYellow;
			transform: translateX(-50%);
		}

		li {
			text-align: center;
			font-size: 2.1875rem;
			line-height: 55px;
		}
	}

	@media (max-width: 991px) {
		padding: 45px 0 120px 0;

		p {
			font-size: 1.25rem;
			line-height: 25px;

			&:nth-child(1) {
				padding-bottom: 90px;

				&::before {
					bottom: 45px;
				}
			}
		}

		ul {
			padding-bottom: 90px;

			&::before {
				bottom: 45px;
			}

			li {
				font-size: 1.25rem;
				line-height: 25px;
			}
		}
	}
}

.testimonials.testimonials_custom {
	padding-top: 100px;
	padding-bottom: 100px;

	#scontainer-40 {
		text-align: center;

		img {
			max-width: 130px !important;
		}
	}

	@media (max-width: 991px) {
		.container-fluid {
			padding-left: 0;
			padding-right: 0;
		}

		.col-lg-9 {
			background: #efefef;
			padding-top: 40px;
			padding-bottom: 40px;
		}

		.slider_v2 {
			width: 100%;
			max-width: 300px;
			margin: 0 auto;

			.flex-single-col {
				margin-bottom: 0;
				height: 100%;
				max-height: 200px;

				.scontainer-content {
					p {
						&:last-child {
							margin-bottom: 0;
						}
					}
				}
			}
		}
	}
}

#scontainer-81 {
	padding-top: 180px;
	padding-bottom: 200px;

	h2 {
		width: 100%;
		max-width: 1280px;
		margin: 0 auto 100px;
		font-size: 5rem;
		font-family: $font-2;
		line-height: 100px;
		letter-spacing: -1.6px;
		text-transform: uppercase;
		color: $cBlackText;

		span {
			color: $cYellow;
		}
	}

	p {
		position: relative;
		font-family: $font-3;
		font-size: 2.1875rem;
		line-height: 55px;
		width: 100%;
		max-width: 1150px;
		margin: 0 auto;
		padding-bottom: 270px;

		&::before {
			position: absolute;
			content: '';
			left: 50%;
			bottom: 180px;
			width: 106px;
			height: 7px;
			border-radius: 50px;
			background: $cYellow;
			transform: translateX(-50%);
		}
	}

	img {
		margin: 0 auto;
		display: block;
	}

	@media (max-width: 991px) {
		padding-top: 60px;
		padding-bottom: 100px;

		h2 {
			margin: 0 auto 80px;
			font-size: 2.1875rem;
			line-height: 50px;
			letter-spacing: 0.53px;
		}

		p {
			font-size: 1.25rem;
			line-height: 25px;
			padding-bottom: 120px;

			&::before {
				bottom: 60px;
			}
		}
	}
}

#scontainer-82 {
	padding: 80px 0 110px;

	h2 {
		font-size: 5.8125rem;
		font-family: $font-2;
		line-height: 116px;
		text-transform: uppercase;
		color: $cBlackText;
		margin-bottom: 60px;

		span {
			color: $cYellow;
		}
	}

	h3 {
		font-family: $font-3;
		font-size: 2.1875rem;
		line-height: 42px;
	}

	h4 {
		font-family: $font-3;
		font-size: 1.875rem;
		line-height: 36px;
	}

	img {
		display: block;
		margin: -30px auto 0;
	}

	.boxes {
		display: flex;
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		column-gap: 84px;
		row-gap: 82px;
		width: 100%;
		padding-top: 150px;

		.box_1,
		.box_2,
		.box_3,
		.box_4 {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			background: $cWhite;
			box-shadow: 0px 20px 30px #00000010;
			border-radius: 40px;
			width: 100%;
			max-width: 549px;
			min-height: 195px;

			&::before {
				content: '';
				position: absolute;
				top: calc(-89px / 2);
				left: 50%;
				width: 89px;
				height: 89px;
				background: $cYellow;
				transform: translateX(-50%);
				border-radius: 50px;
			}

			p {
				position: relative;
				font-family: $font-3;
				font-size: 1.5625rem;
				line-height: 35px;
				font-weight: 600;
				margin-bottom: 0;
				padding: 0 30px;

				&::before {
					content: '';
					position: absolute;
					bottom: -20px;
					left: 50%;
					width: 127px;
					height: 1px;
					background: #707070;
					transform: translateX(-50%);
				}
			}
		}
	}

	@media (max-width: 991px) {
		padding: 60px 0 5px;

		h2 {
			font-size: 2.1875rem;
			line-height: 50px;
			margin-bottom: 12px;
		}

		h3 {
			font-size: 1.25rem;
			line-height: 25px;
			font-weight: 700;
		}

		h4 {
			font-size: 1.25rem;
			line-height: 25px;
			margin-bottom: 20px;
			font-weight: 700;
		}

		img {
			max-width: 375px !important;
			margin: 0 auto 20px;
		}

		.boxes {
			padding-top: 70px;

			.box_1,
			.box_2,
			.box_3,
			.box_4 {
				position: absolute;
				left: -50%;
				right: -50%;
				transform: translateX(50%);
				border-radius: 0;
				max-width: unset;
				min-height: 160px;

				p {
					font-size: 1.25rem;
					line-height: 35px;

					&::before {
						display: none;
					}
				}
			}
		}
	}
}

#scontainer-83 {
	padding: 70px 0 90px;

	h2 {
		margin: 0;
		font-size: 5rem;
		font-family: $font-2;
		line-height: 100px;
		text-transform: uppercase;
		color: #272836;

		span {
			color: $cYellow;
		}
	}

	@media (max-width: 991px) {
		padding: 60px 0;

		h2 {
			font-size: 2.1875rem;
			line-height: 50px;
			margin-bottom: 12px;
		}
	}
}

.empty_dots {
	padding: 30px 0 20px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 18px;

	.empty_dot {
		background: #d3d3d3;
		width: 38px;
		height: 38px;
		border-radius: 50px;

		&.empty_yellow {
			background: $cYellow;
		}

		&:nth-child(13) {
			animation: dot_anim_1 6s infinite linear;
		}

		&:nth-child(14) {
			animation: dot_anim_2 6s infinite linear;
		}
	}

	@keyframes dot_anim_1 {
		0% {
			background: $cYellow;
		}

		11% {
			background: #d3d3d3;
		}

		22% {
			background: $cYellow;
		}

		33% {
			background: #d3d3d3;
		}

		95% {
			background: #d3d3d3;
		}

		100% {
			background: $cYellow;
		}
	}

	@keyframes dot_anim_2 {
		0% {
			background: $cYellow;
		}

		33% {
			background: $cYellow;
		}

		44% {
			background: #d3d3d3;
		}

		55% {
			background: $cYellow;
		}

		66% {
			background: #d3d3d3;
		}

		95% {
			background: #d3d3d3;
		}

		100% {
			background: $cYellow;
		}
	}

	@media (max-width: 991px) {
		padding: 20px 0;

		.empty_dot {
			width: 16px;
			height: 16px;
		}
	}

	@media (max-width: 767px) {
		gap: 7px;
	}

	@media (max-width: 400px) {
		.empty_dot {
			width: 12px;
			height: 12px;
		}
	}
}

#scontainer-84 {
	margin-bottom: 100px;

	p {
		margin-bottom: 90px;
	}

	h3 {
		color: #272836;
		font-size: 2.1875rem;
		line-height: 80px;
		margin-bottom: 40px;
	}

	img {
		display: block;
		margin: 0 auto;
	}

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

		p {
			margin-bottom: 75px;
			font-size: 20px;
			font-weight: 600;
		}

		h3 {
			margin-bottom: 0px;
			font-size: 20px;
			line-height: 30px;
			font-weight: 600;
		}
	}
}

#scontainer-85 {
	color: #070707;

	span {
		color: $cYellow;
	}

	h2 {
		font-family: $font-2;
		font-size: 5rem;
		line-height: 120px;
		margin-bottom: 50px;
	}

	h3 {
		font-size: 1.875rem;
		margin-bottom: 0;
	}

	h4 {
		padding-top: 100px;
		padding-bottom: 75px;
		font-size: 1.875rem;
		letter-spacing: 75px;
	}

	p {
		position: relative;
		font-size: 1.5625rem;
		padding-bottom: 68px;
		margin-bottom: 0;

		&::before {
			content: '';
			position: absolute;
			width: 350px;
			height: 1px;
			bottom: 35px;
			left: 50%;
			background: #707070;
			transform: translateX(-50%);
		}
	}

	img {
		display: block;
		margin: 0 auto 20px;
	}

	@media (max-width: 991px) {
		h2 {
			font-size: 2.1875rem;
			line-height: 50px;
			margin-bottom: 80px;
		}

		h3 {
			font-size: 20px;
		}

		h4 {
			font-size: 25px;
			letter-spacing: 12.5px;
			padding-top: 70px;
			padding-bottom: 25px;
			margin-bottom: 0;
		}

		p {
			font-size: 20px;
			padding-bottom: 81px;

			&::before {
				width: 200%;
				height: 1px;
				bottom: 40px;
				left: -50%;
				right: -100%;
				background: rgba(#707070, 0.13);
				transform: translateX(0);
			}
		}

		.arrow_bottom {
			display: none;
		}
	}
}

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

	span {
		color: $cYellow;
	}

	h3 {
		position: relative;
		font-size: 2.5rem;
		text-transform: uppercase;
		padding-bottom: 70px;
		margin-bottom: 0;

		&::before {
			content: '';
			position: absolute;
			width: 326px;
			height: 2px;
			border-bottom: 2px dashed $cText2;
			bottom: 34px;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	h4 {
		font-size: 2.1875rem;
		margin-bottom: 80px;
	}

	.second_row {
		margin-top: 70px;
	}

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

		h3 {
			font-size: 20px;
			padding-bottom: 56px;

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

		h4 {
			font-size: 20px;
			margin-bottom: 67px;
		}
	}
}

.big_text_frame {
	position: relative;
	color: #272836;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	font-family: $font-2;
	font-size: 4.375rem;
	line-height: 80px;
	border: 1px solid #c7c7c7;
	border-radius: 500px;
	text-transform: uppercase;
	padding: 20px 50px;

	span {
		color: $cYellow;
	}

	@media (max-width: 991px) {
		padding: 25px 0;
		font-size: 2.1875rem;
		line-height: 50px;
		border: none;
		border-radius: 0;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: -50%;
			right: -50%;
			height: 1px;
			width: 200%;
			background: #c7c7c7;
		}

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: -50%;
			right: -50%;
			height: 1px;
			width: 200%;
			background: #c7c7c7;
		}
	}
}

.tiles_lines {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	max-width: 990px;
	margin: 100px auto 0;

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

	&::after {
		content: '';
		position: absolute;
		bottom: 100%;
		left: 50%;
		height: 100px;
		width: 1px;
		background: #c7c7c7;
		transform: translateX(-50%);
		z-index: -1;
	}

	.tile_line {
		position: relative;
		width: 100%;
		max-width: 205px;
		padding-top: 60px;
		margin-top: -20px;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 41px;
			height: 41px;
			border-radius: 50px;
			background: $cYellow;
		}

		p {
			color: $cText2;
			font-size: 20px;
			font-family: $font-3;
			line-height: 30px;
			margin-bottom: 0;
		}
	}

	@media (max-width: 991px) {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 75px;

		&::before {
			display: none;
		}

		.tile_line {
			max-width: 270px;
		}
	}
}

.bg_separator {
	background-image: url('/upload/filemanager/images/online-marketing/Group-80.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height: 578px;
	margin-top: 120px;

	@media (max-width: 991px) {
		margin-top: 100px;
		height: 260px;
	}
}

.brands-custom {
	padding-top: 40px;

	#scontainer-87 {
		text-align: center;

		h3 {
			font-family: $font-2;
			font-size: 5rem;
			line-height: 120px;
			text-align: center;
			margin-bottom: 37px;
			text-transform: uppercase;

			span {
				color: $cYellow;
			}
		}

		a {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 19%;
			border: 1px solid $cGrayLightBg;
			transition: all 0.3s ease;
			padding: 20px 0;
			background: $cWhite;

			@include respond-between(xs, sm) {
				width: 30%;
			}

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

			img {
				filter: grayscale(1);
				opacity: 0.7;
				transition: all 0.3s ease;
				width: 150px;

				@include respond-between(sm, md) {
					width: 90px;
				}

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

			&:hover {
				box-shadow: 0 0 25px rgba(0, 0, 0, 0.23);

				img {
					filter: grayscale(0);
					opacity: 1;
				}
			}
		}

		.row {
			&:nth-child(2) {
				div[class^='col-'] {
					display: flex;
					// padding: 0;
					flex-wrap: wrap;
					z-index: 5;

					.img {
						width: 12.5%;
						display: flex;
						justify-content: center;
						align-items: center;
						border-top: 1px solid $cGrayLightBg;
						height: 170px;
						flex-wrap: wrap;
						z-index: 5;

						@include respond-between(xs, lg) {
							width: 25%;
						}

						@include respond-below(xs) {
							width: 33.3%;
							height: 112px;
						}

						&:not(:last-child) {
							border-right: 1px solid $cGrayLightBg;
						}

						a {
							width: 100%;
							height: 100%;
							display: flex;
							justify-content: center;
							align-items: center;
							padding: 25px 15px;
							transition: all 0.3s ease;
							overflow: hidden;

							&:hover {
								z-index: 55;

								img {
									filter: grayscale(0);
									opacity: 1;
								}

								box-shadow: 0 0 25px rgba(0, 0, 0, 0.23);
							}

							img {
								max-width: 100%;
								max-height: 80%;
								opacity: 0.7;
								transition: all 0.3s ease;
								filter: grayscale(1);
							}
						}
					}
				}
			}

			&:nth-child(3) {
				div[class^='col-'] {
					box-shadow: white 0px -135px 98px -35px inset;
					margin-top: -90px;
					min-height: 135px;
					z-index: 7;
					z-index: 7;
				}
			}
		}

		.img_arr {
			padding-bottom: 80px;
		}

		.scontainer-content {
			position: relative;
		}

		p {
			position: absolute;
			bottom: -6%;
			left: 0;
			right: 0;
			width: fit-content;
			font-family: $font-3;
			padding: 21px 85px;
			font-size: 1.5625rem;
			color: $cWhite;
			background: $cYellow;
			border-radius: 50px;
			margin: 0 auto;
		}
	}

	@media (max-width: 991px) {
		#scontainer-87 {
			h3 {
				color: #242f39;
				font-size: 35px;
				line-height: normal;
				margin-bottom: 14px;

				span {
					color: #242f39;
				}
			}

			.img_arr {
				padding-bottom: 30px;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;

				.slick-list {
					width: 300px !important;
				}

				.slick-arrow {
					position: relative;
					border: none;
					font-size: 0;
					background: transparent;

					&:focus {
						outline: none;
					}
				}

				.slick-next {
					margin-left: 20px;
					width: 19px;
					height: 19px;

					&::before {
						content: url('/upload/filemanager/Polygon-2.png');
					}
				}

				.slick-prev {
					margin-right: 20px;
					width: 19px;
					height: 19px;

					&::before {
						content: url('/upload/filemanager/Polygon-1.png');
					}
				}
			}

			a {
				border: none;

				img {
					width: 186px;
				}
			}

			p {
				position: relative;
				border-radius: 0;
				width: 200%;
				left: -50%;
				right: -50%;
				margin: 0;
				padding: 25px 0;

				span {
					display: inline-block;
					width: 100%;
					max-width: 300px;
				}
			}
		}
	}

	@media (max-width: 470px) {
		#scontainer-87 {
			.img_arr {
				.slick-list {
					width: 200px !important;
				}
			}
		}
	}
}

#scontainer-88 {
	padding-top: 140px;

	.big_text_frame {
		position: relative;
		padding: 40px 70px;
		margin-bottom: 160px;

		&::before {
			content: '';
			position: absolute;
			left: 50%;
			bottom: -118px;
			height: 41px;
			width: 41px;
			background: $cYellow;
			border-radius: 50px;
			transform: translateX(-50%);
		}

		&::after {
			content: '';
			position: absolute;
			left: 50%;
			bottom: -100px;
			height: 100px;
			width: 1px;
			background: #c7c7c7;
			border-radius: 50px;
			transform: translateX(-50%);
			z-index: -1;
		}
	}

	p {
		font-family: $font-3;
		font-size: 2.1875rem;
		line-height: 50px;
		margin-bottom: 100px;
	}

	@media (max-width: 991px) {
		.big_text_frame {
			margin-bottom: 0;
			padding: 25px 0;
			font-size: 2.1875rem;
			line-height: 50px;
			border: none;
			border-radius: 0;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: -50%;
				right: -50%;
				height: 1px;
				width: 200%;
				background: #c7c7c7;
				transform: translateX(0);
			}

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: -50%;
				right: -50%;
				height: 1px;
				width: 200%;
				background: #c7c7c7;
				transform: translateX(0);
			}
		}

		p {
			position: relative;
			font-size: 1.25rem;
			line-height: normal;
			padding: 130px 0 60px;
			margin-bottom: 0;
			font-weight: 500;

			strong {
				font-weight: 500 !important;
			}

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 50%;
				right: 0;
				width: 1px;
				height: 80px;
				background: #c7c7c7;
				transform: translateX(-50%);
			}

			&::after {
				content: '';
				position: absolute;
				top: 70px;
				left: 50%;
				right: 0;
				width: 41px;
				height: 41px;
				background: $cYellow;
				border-radius: 50px;
				transform: translateX(-50%);
			}
		}
	}
}

#scontainer-89 {
	padding: 60px 0 55px;

	h2 {
		font-family: $font-2;
		font-size: 6.25rem;
		line-height: 120px;
		margin-bottom: 10px;

		span {
			color: $cYellow;
		}
	}

	h3 {
		color: $cText2;
		font-size: 1.5625rem;
		line-height: 65px;
		letter-spacing: 11.25px;
		margin-bottom: 80px;
	}

	img {
		margin-bottom: 80px;
	}

	p {
		color: $cText2;
		font-size: 2.1875rem;
		line-height: 54px;
	}

	@media (max-width: 991px) {
		h2 {
			font-size: 2.1875rem;
			line-height: 50px;
			margin-bottom: 70px;
		}

		.liczby_text {
			display: none;
		}

		img {
			margin-bottom: 30px;
		}

		p {
			font-size: 30px;
			line-height: normal;
			margin-bottom: 0;
		}
	}
}

.box_yellow_bg {
	background: #fec300;

	#scontainer-90 {
		padding-top: 100px;

		h2 {
			position: relative;
			width: 100%;
			max-width: 1200px;
			margin: 0 auto 40px;
			font-family: $font-2;
			font-size: 5rem;
			line-height: 90px;
			margin-bottom: 210px;

			span {
				position: absolute;
				width: 18px;
				height: 18px;
				background: $cWhite;
				border-radius: 50px;
				left: 50%;
				bottom: -70px;

				&:nth-child(1) {
					transform: translate(-50%, 0);
				}

				&:nth-child(2) {
					transform: translate(-50%, 35px);
					left: calc(50% + 30px);
				}

				&:nth-child(3) {
					transform: translate(-50%, 35px);
					left: calc(50% - 30px);
				}
			}
		}

		p {
			width: 100%;
			max-width: 1200px;
			margin: 0 auto 40px;
			font-family: $font-3;
			font-size: 2.1875rem;
			line-height: 50px;
		}

		img {
			mix-blend-mode: darken;
			display: block;
			margin: 0 auto;
		}
	}

	@media (max-width: 991px) {
		#scontainer-90 {
			h2 {
				color: #242f39;
				font-size: 2.1875rem;
				line-height: normal;
				margin-bottom: 160px;

				span {
					bottom: -45px;
				}
			}

			p {
				color: #242f39;
				font-size: 1.25rem;
				line-height: normal;
				font-weight: 500;
				margin: 0 auto 30px;

				strong {
					font-weight: 500 !important;
				}
			}

			img {
				margin-top: 60px;
			}
		}
	}
}

.box_black_bg {
	background: $cBlack;

	#scontainer-91 {
		padding: 50px 0;

		h2 {
			color: $cWhite;
			font-family: $font-3;
			font-size: 5rem;
			font-weight: 600;
			line-height: 100px;
			margin-bottom: 0;

			span {
				color: $cYellow;
			}
		}
	}

	@media (max-width: 991px) {
		#scontainer-91 {
			padding: 26px 0;

			h2 {
				width: 100%;
				max-width: 250px;
				margin: 0 auto;
				font-size: 2.1875rem;
				line-height: normal;
			}
		}
	}
}

#scontainer-139 {
	padding: 80px 0;

	h2 {
		width: 100%;
		max-width: 1070px;
		margin: 0 auto 100px;
		font-family: $font-2;
		font-size: 5rem;
		line-height: 90px;

		span {
			color: $cYellow;
		}
	}

	a {
		display: block;
		width: fit-content;
		color: $cWhite;
		font-family: $font-2;
		font-size: 5rem;
		line-height: 90px;
		padding: 42px 175px;
		background: $cYellow;
		border-radius: 100px;
		margin: 0 auto;
		cursor: pointer;
	}

	.tile-video {
		height: 280px;

		iframe {
			border-radius: 25px;
		}
	}

	@media (max-width: 991px) {
		.pospiesz_head {
			margin-top: 50px;
		}

		h2 {
			font-size: 2.1875rem;
			line-height: normal;
			margin-bottom: 40px;
		}

		p {
			font-size: 30px;
			line-height: normal;
			padding: 20px 50px;
		}
	}
}

#scontainer-92 {
	padding: 120px 0 160px;

	.pospiesz_head {
		margin-top: 100px;
	}

	h2 {
		width: 100%;
		max-width: 1070px;
		margin: 0 auto 100px;
		font-family: $font-2;
		font-size: 5rem;
		line-height: 90px;

		span {
			color: $cYellow;
		}
	}

	a {
		display: block;
		width: fit-content;
		color: $cWhite;
		font-family: $font-2;
		font-size: 5rem;
		line-height: 90px;
		padding: 42px 175px;
		background: $cYellow;
		border-radius: 100px;
		margin: 0 auto;
		cursor: pointer;
	}

	.tile-video {
		height: 280px;

		iframe {
			border-radius: 25px;
		}
	}

	@media (max-width: 991px) {
		padding: 40px 0 100px;

		.pospiesz_head {
			margin-top: 50px;
		}

		h2 {
			font-size: 2.1875rem;
			line-height: normal;
			margin-bottom: 40px;
		}

		p {
			font-size: 30px;
			line-height: normal;
			padding: 20px 50px;
		}
	}
}

.bg_img_temp_1 {
	background-image: url('/upload/filemanager/images/online-marketing/Group-81.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height: 645px;
}

#scontainer-93 {
	padding: 130px 0 140px;

	p {
		width: 100%;
		max-width: 1140px;
		margin: 0 auto;
		position: relative;
		color: $cText2;
		font-size: 2.1875rem;
		line-height: 55px;

		&:nth-child(1) {
			margin-bottom: 180px;

			&::before {
				content: '';
				position: absolute;
				bottom: -105px;
				left: 50%;
				height: 29px;
				width: 29px;
				transform: translateX(-50%);
				background: $cYellow;
				border-radius: 50px;
			}
		}

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

	@media (max-width: 991px) {
		padding: 50px 0 100px;

		p {
			font-size: 1.25rem;
			line-height: normal;
			font-weight: 500;

			&:nth-child(1) {
				margin-bottom: 170px;
			}
		}
	}
}

.bg_img_temp_2 {
	background-image: url('/upload/filemanager/images/online-marketing/Group-82.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height: 574px;
}

#scontainer-94 {
	padding: 85px 0 165px;

	@media (max-width: 991px) {
		display: none;
	}
}

#scontainer-95 {
	h2 {
		color: #242f39;
		font-family: $font-3;
		font-size: 3.125rem;
		margin-bottom: 50px;
	}

	img {
		margin-bottom: 30px;
	}

	h3 {
		color: #242f39;
		font-family: $font-3;
		font-size: 3.125rem;
		position: relative;
		padding-bottom: 280px;
		margin-bottom: 0;

		&::before {
			content: '';
			position: absolute;
			left: 50%;
			bottom: 50px;
			transform: translateX(-50%);
			width: 1px;
			height: 170px;
			background: $cBlack;
		}

		&::after {
			content: '';
			position: absolute;
			left: 50%;
			bottom: 210px;
			transform: translateX(-50%);
			width: 23px;
			height: 23px;
			border-radius: 50px;
			background: $cYellow;
		}
	}

	p {
		color: #242f39;
		font-family: $font-3;
		font-size: 2.1875rem;
		line-height: 50px;
		font-weight: 600;
		position: relative;
		margin-bottom: 0;

		&:not(:nth-child(6)) {
			width: 100%;
			max-width: 690px;
			margin-left: auto;
			margin-right: auto;
		}

		&:not(:last-child) {
			padding-bottom: 200px;

			&::before {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 50px;
				transform: translateX(-50%);
				width: 1px;
				height: 90px;
				background: $cBlack;
			}
		}

		&:last-child {
			padding-bottom: 170px;

			&::after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 100px;
				transform: translateX(-50%);
				width: 23px;
				height: 23px;
				border-radius: 50px;
				background: $cYellow;
			}
		}
	}

	@media (max-width: 991px) {
		padding-top: 50px;

		h2 {
			font-size: 1.25rem;
			margin-bottom: 40px;
		}

		h3 {
			font-size: 1.25rem;
		}

		p {
			font-size: 1.25rem;
			line-height: normal;

			&:not(:last-child) {
				padding-bottom: 200px;

				&::before {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 80px;
					transform: translateX(-50%);
					width: 1px;
					height: 30px;
					background: $cBlack;
				}
			}

			&:last-child {
				padding-bottom: 130px;

				&::after {
					bottom: 60px;
				}
			}
		}
	}
}

.om_aktualnosci {
	margin-bottom: 130px;

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

		#news {
			.slick-slider {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;

				.slick-list {
					width: 300px !important;
				}

				.slick-arrow {
					position: relative;
					border: none;
					font-size: 0;
					background: transparent;

					&:focus {
						outline: none;
					}
				}

				.slick-next {
					margin-left: 20px;
					width: 19px;
					height: 19px;

					&::before {
						content: url('/upload/filemanager/Polygon-2.png');
					}
				}

				.slick-prev {
					margin-right: 20px;
					width: 19px;
					height: 19px;

					&::before {
						content: url('/upload/filemanager/Polygon-1.png');
					}
				}
			}
		}
	}

	@media (max-width: 470px) {
		#news {
			.slick-slider {
				.slick-list {
					width: 200px !important;
				}

				img {
					width: 120%;
				}
			}
		}
	}
}

#scontainer-96 {
	h2 {
		color: $cText2;
		font-family: $font-2;
		font-size: 5rem;
		line-height: 100px;
		margin-bottom: 0;
		padding-top: 70px;
		padding-bottom: 355px;

		span {
			color: $cYellow;
		}
	}

	@media (max-width: 991px) {
		h2 {
			color: $cBlackText;
			font-size: 2.1875rem;
			line-height: normal;
			letter-spacing: 0.53px;
			padding-bottom: 0;
		}
	}
}

.empty_dots2 {
	@media (min-width: 991px) {
		display: none;
	}
}

.contact-calendar-custom {
	margin-top: -270px;

	@media (max-width: 991px) {
		margin-top: 10px;
	}
}

#scontainer-97 {
	margin: 120px 0 110px;

	h2 {
		color: $cText2;
		font-size: 3.75rem;
		line-height: 65px;
		margin-bottom: 70px;
	}

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

		h2 {
			font-size: 2.1875rem;
			line-height: normal;
			margin-bottom: 40px;
		}
	}
}

#scontainer-98 {
	padding: 80px 0;

	h2 {
		color: $cText2;
		font-size: 5rem;
		line-height: 100px;
		font-family: $font-2;
		margin-bottom: 115px;

		span {
			color: $cYellow;
		}
	}

	p {
		font-size: 25px;
		line-height: 50px;
		font-family: $font-3;
		font-weight: 600;

		span {
			color: $cYellow;
		}
	}

	.om_mini_tiles {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		column-gap: 37px;
		row-gap: 26px;
		margin-bottom: 70px;

		h3 {
			color: $cWhite;
			font-family: $font-3;
			font-size: 1.5625rem;
			font-weight: 600;
			line-height: 50px;
			text-align: center;
			background: #242f39;
			border-radius: 50px;
			width: 203px;

			&:nth-child(10),
			&:last-child {
				font-size: 1.25rem;
			}
		}
	}

	@media (max-width: 991px) {
		padding: 50px 0;

		h2 {
			color: $cBlackText;
			font-size: 2.1875rem;
			line-height: normal;
			margin-bottom: 60px;
		}

		.om_mini_tiles {
			margin-bottom: 50px;

			h3 {
				line-height: 60px;
			}
		}

		p {
			color: #242f39;
			font-size: 1.25rem;
			line-height: normal;
			margin-bottom: 0;

			span {
				color: #242f39;
			}
		}
	}
}

.bg_img_temp_3 {
	height: 265px;
	background-image: url('/upload/filemanager/images/online-marketing/Mask-Group-6.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	@media (max-width: 991px) {
		height: 140px;
	}
}

//Slider v2
.slider_v2 {
	ul.slick-dots {
		margin: 0 15px;
		padding: 0;
		list-style: none;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 20px;
		height: 19px;

		li {
			border-radius: 50px;
			border: 1px solid $cBlack;
			height: 11px;
			width: 11px;
			transition: all 300ms ease-in-out;

			&.slick-active {
				height: 19px;
				width: 19px;
				// border: none;
				border-color: $cYellow;
				background: $cYellow;
			}

			button {
				display: none;
			}
		}
	}
}

//* 8-rzeczy-o-marketingu form
#_form_1_ {
	border: 1px solid $cYellow;
	border-radius: 3px;
	padding: 30px;
	background: $cWhite;

	@media (min-width: 746px) {
		padding: 45px;
	}

	.form-group {
		position: relative;

		.form-label {
			color: #6f7172;
			font-size: 18px;
			font-weight: 700;
			line-height: normal;
			position: absolute;
			left: 8px;
			top: 30px;
			padding: 0 5px;
			transform: translate(0px, -50%);
			transition: 0.3s;
			background-color: #ffffff;
		}

		input {
			border: 2px solid #e6e6e6;
			font-size: 18px;
			background: transparent;
			border-radius: 5px;
			outline: none;
			box-shadow: none;
			letter-spacing: -1px;
			color: #272727;
			font-weight: 700;
			line-height: normal;
			padding: 28px;
			transition: color 0.25s ease-in-out;

			&:focus {
				border-color: #e6e6e6;
			}

			&:not(:focus):valid {
				border-color: #e6e6e6;
			}

			&:focus ~ .form-label,
			&:not(:focus):valid ~ .form-label {
				top: 0px;
				font-size: 14px;
			}

			// &:focus ~ .form-label {
			//  color: #272727;
			// }

			&:not(:focus):valid ~ .form-label {
				border-color: #e6e6e6;
			}
		}

		input:focus ~ span.bottomLine {
			width: 100%;
		}
	}

	#_form_1_submit,
	#_form_13_submit {
		border: none;
		width: 100%;
		font-size: 16px;
		letter-spacing: -1px;
		font-weight: 900;
		border-radius: 5px;
		cursor: pointer;

		@media (min-width: 410px) {
			font-size: 20px;
		}
	}

	._error-inner {
		color: #ed1c15;
		padding: 0px 20px;
		width: 100%;
	}

	._checkbox-radio {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 10px;
		margin: 10px 0 30px 0;

		input {
			margin-top: 3px;
			height: 15px;
			width: 25px;
		}

		label {
			font-size: 13px;
			font-weight: 600;
			color: #6f7172;
			width: calc(80% - 25px - 10px);
		}
	}
}

#_form_2_ {
	border: 1px solid $cYellow;
	border-radius: 3px;
	padding: 30px;
	background: $cWhite;

	@media (min-width: 746px) {
		padding: 45px;
	}

	.form-group {
		position: relative;

		.form-label {
			color: #6f7172;
			font-size: 18px;
			font-weight: 700;
			line-height: normal;
			position: absolute;
			left: 15px;
			top: 30px;
			padding: 0 5px;
			transform: translate(0px, -50%);
			transition: 0.3s;
			background-color: #ffffff;
		}

		input {
			border: 2px solid #e6e6e6;
			font-size: 18px;
			background: transparent;
			border-radius: 5px;
			outline: none;
			box-shadow: none;
			letter-spacing: -1px;
			color: #272727;
			font-weight: 700;
			line-height: normal;
			padding: 28px;
			transition: color 0.25s ease-in-out;

			&:focus {
				border-color: #e6e6e6;
			}

			&:not(:focus):valid {
				border-color: #e6e6e6;
			}

			&:focus ~ .form-label,
			&:not(:focus):valid ~ .form-label {
				top: 0px;
				font-size: 14px;
			}

			// &:focus ~ .form-label {
			//  color: #272727;
			// }

			&:not(:focus):valid ~ .form-label {
				border-color: #e6e6e6;
			}
		}

		input:focus ~ span.bottomLine {
			width: 100%;
		}
	}

	#x_form_1_submit {
		border: none;
		width: 100%;
		font-size: 20px;
		letter-spacing: -1px;
		font-weight: 900;
		border-radius: 5px;
		cursor: pointer;
	}

	._error-inner {
		color: #ed1c15;
		padding: 0px 20px;
		width: 100%;
	}

	._checkbox-radio {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 10px;
		margin: 10px 0 30px 0;

		input {
			margin-top: 3px;
			height: 15px;
			width: 25px;
		}

		label {
			font-size: 13px;
			font-weight: 600;
			color: #6f7172;
			width: calc(80% - 25px - 10px);
		}
	}
}

#_form_3_ {
	#x_form_3_submit {
		border: none;
		width: 100%;
		font-size: 16px;
		letter-spacing: -1px;
		font-weight: 900;
		border-radius: 5px;
		cursor: pointer;

		@media (min-width: 410px) {
			font-size: 20px;
		}
	}
}

#_form_3_ {
	border: 1px solid $cYellow;
	border-radius: 3px;
	padding: 30px;
	background: $cWhite;

	@media (min-width: 746px) {
		padding: 45px;
	}

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

	.form-group {
		position: relative;

		.form-label {
			color: #6f7172;
			font-size: 18px;
			font-weight: 700;
			line-height: normal;
			position: absolute;
			left: 15px;
			top: 30px;
			padding: 0 5px;
			transform: translate(0px, -50%);
			transition: 0.3s;
			background-color: #ffffff;
		}

		input {
			border: 2px solid #e6e6e6;
			font-size: 18px;
			background: transparent;
			border-radius: 5px;
			outline: none;
			box-shadow: none;
			letter-spacing: -1px;
			color: #272727;
			font-weight: 700;
			line-height: normal;
			padding: 28px;
			transition: color 0.25s ease-in-out;

			&:focus {
				border-color: #e6e6e6;
			}

			&:not(:focus):valid {
				border-color: #e6e6e6;
			}

			&:focus ~ .form-label,
			&:not(:focus):valid ~ .form-label {
				top: 0px;
				font-size: 14px;
			}

			// &:focus ~ .form-label {
			//  color: #272727;
			// }

			&:not(:focus):valid ~ .form-label {
				border-color: #e6e6e6;
			}
		}

		input:focus ~ span.bottomLine {
			width: 100%;
		}
	}

	#_form_3_submit {
		border: none;
		width: 100%;
		font-size: 20px;
		letter-spacing: -1px;
		font-weight: 900;
		border-radius: 5px;
		cursor: pointer;
	}

	._error-inner {
		color: #ed1c15;
		padding: 0px 20px;
		width: 100%;
	}

	._checkbox-radio {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 10px;
		margin: 10px 0 30px 0;

		input {
			margin-top: 3px;
			height: 15px;
			width: 25px;
		}

		label {
			font-size: 13px;
			font-weight: 600;
			color: #6f7172;
			width: calc(80% - 25px - 10px);
		}
	}
}

//* Konsultacje pakiet - page
.thank-you {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba($cBlack, 0.5);
	}

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

		.content_wrapper {
			position: relative;
			padding: 30px;
			background: $cWhite;
			text-align: center;
			border-radius: 40px;

			h2 {
				font-family: Anton, sans-serif;
				margin-bottom: 5px;
			}

			h3 {
				font-family: Anton, sans-serif;
				position: relative;
				margin-bottom: 0;
				padding-bottom: 60px;

				&::before {
					position: absolute;
					content: '';
					left: 50%;
					bottom: 25px;
					width: 106px;
					height: 7px;
					border-radius: 50px;
					background: #ffbf0b;
					transform: translateX(-50%);
				}
			}

			p {
				font-family: 'DM Sans', sans-serif;
			}

			@media (max-width: 991px) {
				h3 {
					font-size: 20px;
				}
			}

			@media (max-width: 767px) {
				padding: 80px 30px 30px 30px;

				h3 {
					&::before {
						height: 4px;
					}
				}
			}
		}
	}

	.close_popup_e-booku {
		position: absolute;
		top: 25px;
		right: 25px;
		width: 30px;
		height: 30px;
		border: 1px solid #c7c7c7;
		cursor: pointer;

		&::before {
			content: '';
			position: absolute;
			top: 50%;
			right: 50%;
			width: 100%;
			height: 1px;
			background: #c7c7c7;
			transform: translate(50%, -50%) rotate(45deg);
		}

		&::after {
			content: '';
			position: absolute;
			top: 50%;
			right: 50%;
			width: 100%;
			height: 1px;
			background: #c7c7c7;
			transform: translate(50%, -50%) rotate(-45deg);
		}
	}
}

//* Webinar senuto strona
body.webinar {
	.webinar-box-08 {
		background: url('/upload/filemanager/images/rzeczy-o-marketingu/marketing-bottom-1.jpg')
			center;
		background-size: cover;
		background-position-x: right;

		h2 {
			color: #fff;
			font-size: 2.575rem;

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

		#scontainer-119,
		#scontainer-129 {
			color: $cWhite;
		}
	}

	.webinar-box-07 {
		h2 {
			font-size: 2.875rem;
			margin-bottom: 25px;
		}

		p {
			font-size: 1.25rem;
			position: relative;
			padding-bottom: 100px;
			padding-top: 10px;

			&:nth-child(2) {
				&::after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 55px;
					-webkit-transform: translateX(-50%);
					transform: translateX(-50%);
					width: 23px;
					height: 23px;
					border-radius: 50px;
					background: #ffbf0b;
				}
			}

			&:nth-child(4) {
				padding-bottom: 0;
			}

			&:nth-child(4) {
				&::after {
					content: '';
					position: absolute;
					left: 50%;
					top: -30px;
					-webkit-transform: translateX(-50%);
					transform: translateX(-50%);
					width: 23px;
					height: 23px;
					border-radius: 50px;
					background: #ffbf0b;
				}
			}

			&:nth-child(2),
			&:nth-child(3) {
				&::before {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					-webkit-transform: translateX(-50%);
					transform: translateX(-50%);
					width: 1px;
					height: 60px;
					background: $cBlack;
				}
			}
		}
	}

	.webinar-box-06 {
		background: #012c59;
		color: #fff;

		h2 {
			color: #ffbf0b;
			font-size: 2.875rem;
			margin-bottom: 25px;
		}

		p {
			font-size: 1.25rem;

			strong {
				font-weight: 900;
			}
		}
	}

	.webinar-box-05 {
		.col-md-6 {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
	}

	.webinar-box-04 {
		background: #fafafa;

		#scontainer-115,
		#scontainer-125 {
			.col-md-3 {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.col-md-4 {
				display: flex;
				align-items: center;
				justify-content: center;

				img {
					border-radius: 200px 200px 200px 0;
				}
			}
		}
	}

	.webinar-box-03 {
		.col-md-4 {
			display: flex;
			align-items: center;
			justify-content: center;

			img {
				border-radius: 200px 200px 200px 0;
			}
		}

		h2 {
			font-size: 2.875rem;
			margin-bottom: 50px;
		}

		#scontainer-114,
		#scontainer-124 {
			margin-top: 100px;
		}

		#scontainer-130 {
			padding-top: 100px;

			@media (min-width: 576px) and (max-width: 1199px) {
				padding-top: 30px;
			}

			@media (max-width: 576px) {
				padding-top: 10px;
			}
		}
	}

	.webinar-box-02 {
		background: #fafafa;

		.col-md-5 {
			display: flex;
			align-items: center;
		}

		h2 {
			font-size: 2.875rem;
			margin-bottom: 25px;
		}

		h3 {
			margin-bottom: 50px;
		}

		ul {
			list-style-type: none;
			padding-left: 15px;

			li {
				color: #272737;
				position: relative;
				font-size: 1.25rem;
				padding-left: 65px;
				counter-increment: my-awesome-counter;
				margin-bottom: 5px;
				display: flex;
				min-height: 50px;
				align-items: center;

				strong {
					margin-left: 5px;
				}

				&::before {
					content: counter(my-awesome-counter);
					position: absolute;
					left: 0;
					top: 50%;
					width: 50px;
					height: 50px;
					transform: translateY(-50%);
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px solid #e6e7e8;
					border-radius: 100px;
					font-size: 1.125rem;
					line-height: 23px;
					font-weight: 700;
					background: #fff;
				}
			}
		}
	}

	.webinar-box-01 {
		position: relative;
		text-align: center;
		color: $cBlackText;

		.hero_timer {
			color: $cBlackText;
			margin-top: 50px;
			margin-bottom: 0;
		}

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

		&::before {
			content: url('/upload/filemanager/images/rzeczy-o-marketingu/gray-star-bg.png');
			position: absolute;
			left: 82px;
			bottom: -6px;
			z-index: -1;
		}

		&::after {
			content: url('/upload/filemanager/images/rzeczy-o-marketingu/yellow-star-bg.png');
			position: absolute;
			right: 130px;
			top: 0;
			z-index: -1;
		}
	}

	.hero {
		height: 70vh;
		min-height: 600px;
		background: url('/layout/images/webinar/banner-bg.jpg') no-repeat center;
		background-size: cover;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;

		h1 {
			font-size: 4rem;
			margin-bottom: 25px;
		}

		h2 {
			font-size: 2rem;
			color: #ffbf0b;
			font-weight: 900;
			margin-bottom: 25px;
		}

		.btn2 {
			min-width: 200px;
			text-align: center;

			&:hover {
				background: #fff;
			}
		}
	}

	#_form_5_,
	#_form_6_,
	#_form_11_,
	#_form_12_,
	#_form_13_,
	#_form_14_,
	#_form_21_,
	#_form_22_,
	#_form_23_,
	#_form_24_,
	#_form_25_,
	#_form_26_,
	#_form_27_,
	#_form_28_ {
		border: 1px solid $cYellow;
		border-radius: 3px;
		padding: 35px;
		background: $cWhite;

		._form_element_chek {
			display: flex;
			gap: 10px;
			padding-bottom: 15px;

			label {
				font-size: 10px;
				width: calc(100% - 25px);
				float: right;
				max-height: 30px;
				overflow: hidden;
				transition: 300ms linear;

				&.active {
					max-height: 500px;
				}
			}

			input {
				&[type='checkbox'] {
					width: 15px;
				}
			}

			.show_hide,
			.show_hide2,
			.show_hide2-c {
				font-size: 12px;
				padding-left: 25px;
				font-weight: 700;
				padding-bottom: 30px;
				cursor: pointer;
			}
		}

		.form-group {
			position: relative;

			._form-label {
				color: #6f7172;
				font-size: 16px;
				font-weight: 700;
				line-height: normal;
				position: absolute;
				left: 15px;
				top: 26px;
				padding: 0 5px;
				transform: translate(0px, -50%);
				transition: 0.3s;
				background-color: #ffffff;
			}

			input {
				border: 2px solid #e6e6e6;
				font-size: 16px;
				background: transparent;
				border-radius: 5px;
				outline: none;
				box-shadow: none;
				letter-spacing: -1px;
				color: #272727;
				font-weight: 700;
				line-height: normal;
				padding: 24px;
				transition: color 0.25s ease-in-out;

				&:focus {
					border-color: #e6e6e6;
				}

				&:not(:focus):valid {
					border-color: #e6e6e6;
				}

				&:focus ~ ._form-label,
				&:not(:focus):valid ~ ._form-label {
					top: 0px;
					font-size: 14px;
				}

				&:not(:focus):valid ~ ._form-label {
					border-color: #e6e6e6;
				}
			}

			input:focus ~ span.bottomLine {
				width: 100%;
			}
		}

		._error-inner {
			color: #ed1c15;
			padding: 0px 20px;
			width: 100%;
		}

		._submit {
			border: none;
			width: 100%;
			font-size: 18px;
			letter-spacing: -1px;
			font-weight: 900;
			border-radius: 5px;
			cursor: pointer;
		}
	}
}

#scontainer-135 {
	padding-top: 130px;
}

#scontainer-138 {
	.row {
		.col-md-4 {
			p {
				img {
					border-radius: 200px 200px 200px 0;
				}
			}
		}
	}
}

#_form_21_,
#_form_22 {
	.form-group {
		input {
			width: 100%;
		}
	}

	._form-fieldset {
		legend {
			font-size: 12px;
		}

		._checkbox-radio {
			span {
				label {
					font-size: 12px;
				}
			}
		}
	}
}

#scontainer-145 {
	padding-top: 130px;
}

#scontainer-153 {
	padding-top: 130px;
}

#scontainer-147,
#scontainer-155 {
	.row {
		.col-md-4 {
			p {
				img {
					border-radius: 200px 200px 200px 0;
				}
			}
		}
	}
}

//case study
.case-study-box {
	padding-top: 75px;
	padding-bottom: 75px;

	&.gray {
		background: #f5f5f5;
	}

	.case-study-section {
		display: flex;
		flex-wrap: wrap;

		.left {
			width: 50%;
			display: flex;
			align-items: center;

			.img {
				padding-right: 25px;

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

		.right {
			width: 50%;
			display: flex;
			align-items: center;

			.img {
				padding-left: 25px;

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

//margin all section
.section-2,
.section-implementation,
.section-email-msg,
.section-widgets,
.section-business-card,
.contact,
.contact--bottom {
	margin: 60px 0;

	@include respond-above(md) {
		margin: 80px 0;
	}
}

//section-company
.section-company.section {
	.left {
		.left__container {
			display: flex;
			flex-direction: column;
			gap: 40px;

			.header {
				@include respond-below(md) {
					display: flex;
					justify-content: center;
				}
			}

			.logo {
				max-width: 200px;

				img {
					width: 100%;
				}
			}
		}
	}

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

		.video {
			width: 100%;
		}

		.img {
			width: 100%;
			border-radius: 10px;

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

//quote all
.quote {
	padding: 30px;
	border-radius: 10px;
	position: relative;
	box-shadow: $box-shadow;

	.quote-img {
		position: absolute;
		top: 8px;
		left: -20px;
		display: flex;
		gap: 8px;

		img {
			height: 34px;
			width: 16px;
		}
	}

	.quote__text {
		p {
			font-size: 15px;
			font-weight: 600;
			margin-bottom: 0;
		}
	}
}

//section-2
.section-2 {
	.left {
		//iframe
		.video {
			max-width: 100%;
			height: 100%;
			min-height: 250px;

			@include respond-above(xs) {
				height: 350px;
			}

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

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

	.right {
		align-self: center;

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

			.text {
				h2 {
					margin-bottom: 30px;
				}

				p {
					font-size: 16px;
				}
			}

			.button--section-2 {
				padding: 10px 25px;
				font-weight: 700;
				line-height: 20px;
				background-color: $cYellow;
				color: $cBlackText;
				text-decoration: none;
				width: 184px;
				height: 40px;
			}
		}
	}
}

//section-goals
.section-goals {
	margin-bottom: 0;

	.left {
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;

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

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

	.right {
		padding-top: 75px;
		padding-bottom: 75px;
		display: flex;
		justify-content: flex-start;

		.right__container {
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 50px;

			.text {
				ul {
					display: flex;
					flex-direction: column;
					list-style: numeric;
					padding-left: 20px;

					li::marker {
						font-weight: 700;
					}

					li {
						padding-left: 10px;
					}
				}
			}
		}
	}

	@include respond-below(md) {
		.section {
			.right {
				grid-area: left;
			}

			.left {
				grid-area: right;
			}
		}
	}
}

//section-effects
.section-effects {
	.section {
		align-items: center;

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

			.text {
				display: flex;
				flex-direction: column;
				gap: 40px;
			}

			.rating {
				font-size: 22px;
				font-weight: 700;
			}
		}

		.right {
			display: flex;
			flex-direction: column;
			align-items: flex-end;

			.img {
				width: 70%;
				border-radius: 10px;

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

			//quote-3
			.quote-3 {
				background-color: white;
				border: none;
				transform: translateY(-20px);

				.quote__text {
				}
			}
		}
	}
}

//section-implementation
.section-implementation.section {
	display: flex;

	.left {
		width: 50%;

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

			img {
				width: 100%;
				height: 50%;
				object-fit: cover;
				border-radius: 10px;
				box-shadow: $box-shadow;
			}
		}
	}

	.right {
		width: 50%;
		display: flex;
		flex-direction: column;
		gap: 40px;

		.text {
			display: flex;
			flex-direction: column;
			gap: 20px;
			font-size: 24px;
		}
	}
}

//section-email-msg
.section-email-msg {
	background-color: #fafafa;
	padding: 60px 0;

	.section {
		align-items: center;

		.left {
			display: flex;
			flex-direction: column;
			gap: 40px;
		}

		.right {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;

			.img {
				width: 100%;
				border-radius: 10px;
				box-shadow: $box-shadow;

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

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

//section-widgets
.section-widgets {
	.section {
		align-items: center;
		gap: 80px;

		.left {
			.img {
				width: 90%;

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

		.right {
			display: flex;
			flex-direction: column;
			gap: 40px;
		}
	}
}

//section business card
.section-business-card {
	background-color: #fafafa;
	padding: 60px 0;

	.section {
		align-items: center;
		gap: 120px;

		.left {
			display: flex;
			flex-direction: column;
			gap: 40px;
		}

		.right {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;

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

//section integration
.section-integration {
	background-color: $cYellow;
	padding: 60px 0;

	.section {
		.left {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

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

				.logo {
					border-radius: 10px;
					width: 40px;
					height: 40px;

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

			.quote-integration {
				border: none;
				background-color: white;
			}
		}

		.right {
			.text {
				ul {
					display: flex;
					flex-direction: column;
					gap: 20px;
					list-style: none;

					li {
						display: flex;
						flex-direction: row;
						gap: 20px;
						align-items: center;
					}

					li:before {
						content: '\2192';
						display: block;
						font-size: 50px;
					}
				}
			}
		}
	}
}

//case-study slider
.case-study__slider-container {
	display: flex;
	flex-direction: column;
	gap: 50px;
	margin-bottom: 100px;

	.slider__header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.title {
			align-items: start;
		}

		.button--slider-header {
			font-size: 18px;
			font-weight: 700;
			line-height: 34px;
			min-width: 184px;
			text-align: end;
			text-decoration: none;
			color: $cBlackText;
		}
	}

	.slider {
		height: 440px;
		width: 100%;

		.splide {
			height: 100%;

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

				.splide__list {
					height: 100%;
					transition: height 0.2s;

					.splide__slide {
						height: 100%;
						// padding: 0 20px;
						position: relative;

						.slide__background {
							height: 100%;
							width: 100%;
							opacity: 0.4;

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

						.slide-container {
							width: 100%;
							height: 100%;
							padding: 30px 50px;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.slide__logo {
								width: 120px;

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

							.slide__main-container {
								border-radius: 4px;
								background-color: white;
								display: flex;
								flex-direction: column;
								align-items: center;
								gap: 20px;
								padding: 20px;
								align-items: flex-start;

								h2.slide__title {
									line-height: 24px;
									margin-bottom: 0;
								}

								.button--slide {
									background-color: $cYellow;
									color: $cBlackText;
									text-transform: none;
									border-radius: 2px;
									width: 120px;
									height: 40px;
									line-height: 40px;
									font-size: 16px;
									font-weight: 700;
									text-align: center;
								}
							}
						}
					}
				}
			}

			.splide__arrows {
				display: none;
			}

			.splide__pagination {
				transform: translateY(65px);
				gap: 5px;

				li {
					.splide__pagination__page {
						width: 30px;
						height: 5px;
						background-color: $cYellow;
						transition: 0.3s;
						border-radius: 0;
					}

					.splide__pagination__page.is-active {
						transform: scale(1);
						background-color: $cBlackText;

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

//contact
.contact {
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 30px;

		.contact-container {
			box-shadow: $box-shadow;
			display: flex;
			flex-direction: row;
			width: 100%;
			max-width: 600px;
			padding: 30px 40px;
			border-radius: 10px;
			gap: 30px;

			h4 {
				margin-bottom: 0;

				strong {
					//   color: #ffbf0b;
					font-weight: 400;
				}
			}

			a {
				color: $cBlack;
				font-weight: 500;
			}

			.img {
				width: 120px;
				height: 120px;
				border-radius: 50%;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					border-radius: 50%;
					object-position: top;
				}
			}

			.description {
				p {
					strong {
						color: $cYellow;
					}
				}
			}
		}
	}
}

//* scontainer-156
#scontainer-156 {
	@include respond-below(md) {
		.container {
			flex-direction: column;
			align-items: center;
			border-radius: 10px;
			background-color: $cYellow;
			gap: 50px;
			padding: 40px 20px;

			.left {
				text-align: center;
				align-items: center;
				gap: 25px;
			}

			.right {
				.contact-container {
					@include respond-below(md) {
						flex-direction: column;
						text-align: center;
					}

					.img {
						img {
							object-position: top;
						}
					}

					.description {
						p {
							&:nth-child(1) {
								color: $cBlackText;
								font-weight: 400;
							}

							strong {
								color: $cBlackText;
								font-weight: 400;
							}
						}
					}
				}
			}
		}
	}

	@include respond-below(xs) {
		.container {
			padding: 40px 20px;
		}
	}
}

.two_columns {
	@include respond-below(md) {
		flex-direction: column-reverse;
		align-items: center;
		justify-content: center;
		gap: 30px;

		.img {
			width: 100% !important;
		}

		.text {
			width: 100% !important;
			padding: 0 !important;
		}
	}
}

.section_integration,
.section_business_card,
.blok-tekstowy-08,
.blok-tekstowy-10 {
	.two_columns {
		@include respond-below(md) {
			flex-direction: column;
		}
	}
}

//mobile
.case-study-single__content {
	.title {
		margin-bottom: 0 !important;
	}

	//tablet
	@include respond-below(md) {
		.case_box {
			.two-columns {
				gap: 30px;
			}
		}
	}

	//mobile
	@include respond-below(sm) {
		// margin-top: 100px !important;

		.title {
			div {
				h1 {
					font-size: 20px;
				}
			}
		}

		.case_box {
			.two-columns {
				gap: 30px;
			}
		}
	}

	@include respond-below(xs) {
		margin-top: 0 !important;
		padding-top: 92px !important;

		.title {
			.title_text {
				font-weight: 600;
				margin-bottom: 10px;
			}

			div {
				h1 {
					font-size: 17px;
					text-align: center;
					margin-bottom: 0;
				}
			}
		}

		.case_box {
			.text {
				// text-align: center;
			}

			.section-goals {
				.text {
					text-align: start;

					h2 {
						text-align: center;
					}
				}

				.right {
					padding-top: 0px;
					padding-bottom: 20px;
				}

				.section {
					.left {
						grid-area: right;
					}

					.right {
						grid-area: left;
					}
				}
			}

			.section-company {
				gap: 40px;

				.left {
					.left__container {
						gap: 30px;
					}
				}
			}

			.two_columns {
				gap: 30px;

				.text,
				.content {
					h2 {
						text-align: center !important;
					}
				}
			}
		}
	}
}

.case-study__slider-container {
	padding-top: 50px;

	.slider__header {
		@include respond-below(sm) {
			flex-direction: column;
			align-items: flex-start;

			.title {
				margin-bottom: 0;
				font-size: 20px;
				text-align: start;
			}

			a {
				text-align: start !important;
			}
		}
	}
}

@include respond-below(md) {
	.section_integration {
		.two_columns {
			.text {
				text-align: start !important;
			}
		}
	}
}

.section_implementation {
	@include respond-below(md) {
		.text {
			text-align: start !important;
		}
	}
}

//big case study
.title.big {
	text-align: center !important;

	.title_text {
		font-size: 22px !important;
		margin-bottom: 10px !important;

		@include respond-above(md) {
			font-size: 26px !important;
		}
	}

	h1 {
		font-size: 17px !important;
		margin-bottom: 10px !important;

		// @include respond-above(md) {
		//   font-size: 20px !important;
		// }
	}

	h2 {
		font-size: 22px !important;

		// @include respond-above(md) {
		//   font-size: 20px !important;
		// }
	}
}

.case-study-single__content {
	.cta-yellow {
		@include respond-below(md) {
			flex-direction: column;
			padding: 40px !important;
			gap: 40px;
			align-items: center;

			.text {
				width: 100% !important;
				display: flex;
				flex-direction: column;
				justify-content: center !important;
				align-items: center !important;
			}

			.contact-data {
				width: 100% !important;
				justify-content: center !important;
			}
		}
	}
}

.blok-tekstowy-06 {
	.content {
		@include respond-below(md) {
			display: flex;
			flex-direction: column;
		}

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

.section_company {
	.img {
		max-width: 645px;
		width: 100%;

		img {
			width: 100%;
		}
	}
}

.numbers {
	@include respond-below(md) {
		ul {
			flex-direction: column;
			align-items: center;

			li {
				width: 100% !important;
			}
		}
	}
}

.case_box.cta {
	.container {
		.cta-yellow.cta-01 {
			@include respond-below(xs) {
				padding: 30px 15px !important;
			}
		}
	}
}

#scontainer-161-content {
	padding-top: 40px;
}

#scontainer-195 {
	border: 2px solid $cYellow;
	border-radius: 5px;
	padding: 25px;
	margin-top: 50px;

	.scontainer-content {
		> div {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			gap: 20px;
			cursor: pointer;

			h3 {
				font-size: 22px;
				font-weight: 600;
				margin-bottom: 0;
				margin-top: 0;
			}

			img:last-child {
				margin-left: auto;
			}
		}
	}

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

		.scontainer-content {
			> div {
				flex-direction: column;
				text-align: center;
			}
		}
	}
}

//* ~~~~~~~~~~ New styles ~~~~~~~~~~~
.product-offer-card {
	position: relative;
	border-radius: 12px;
	overflow: hidden;

	height: 100%;
	display: flex;
	flex-direction: column;

	.offer-card-img {
		position: relative;

		.offer-card-img-img {
			width: 100%;
		}

		.offer-card-img-star {
			position: absolute;
			left: 40px;
			bottom: -30px;
		}

		ul {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;
			flex-direction: row;
			gap: 12px;
			position: absolute;
			top: 40px;
			left: 40px;

			@include respond-below(lg) {
				top: 25px;
				left: 25px;
			}

			li {
				color: $cWhite;
				font-family: $font-5;
				font-size: 14px;
				font-weight: 600;
				line-height: 1;

				background-color: rgba($cBlack, 0.5);
				padding: 16px 20px;
				border: 1px solid rgba($cWhite, 0.25);
				border-radius: 50px;

				@include respond-below(lg) {
					font-size: 12px;
					padding: 10px 14px;
				}
			}
		}
	}

	.offer-card-data {
		padding-top: 60px;
		padding-left: 40px;
		padding-right: 40px;
		padding-bottom: 40px;
		background-color: $cWhite;

		flex: 1;
		display: flex;
		flex-direction: column;

		@include respond-below(lg) {
			padding-top: 40px;
			padding-left: 25px;
			padding-right: 25px;
			padding-bottom: 25px;
		}

		h2 {
			color: $cBlackText;
			font-size: 24px;
			font-weight: 700;
			font-family: $font-5;
			margin-bottom: 32px;

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

		ul {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			row-gap: 10px;
			column-gap: 24px;
			margin-bottom: 40px;
			flex: 1;

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

				&.offer-collaboration {
					width: 100%;
				}

				&.offer-website {
				}

				&.offer-market {
				}

				img {
					width: 15px;
					height: 15px;
				}

				p {
					color: #545454;
					font-size: 16px;
					font-weight: 400;
					margin-bottom: 0;

					strong {
						color: $cBlackText;
						font-weight: 600;
					}

					a {
						color: $cBlackText;
					}
				}
			}
		}

		.offer-card-footer {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			gap: 20px;

			.offer-card-btn {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 12px;

				color: $cBlackText;
				font-size: 14px;
				font-family: $font-5;
				font-weight: 700;

				padding: 20px 30px;
				background-color: #eeeeee;
				border-radius: 12px;
			}

			img {
				max-height: 70px;
				max-width: 100px;
			}
		}
	}
}

// * Home page
body#page-9 {
	#scontainer-226 {
		display: flex;
		align-items: center;

		.scontainer-content {
			width: 100%;
		}
	}

	.contact-info-data-box {
		width: 100%;
		max-width: 480px;

		h2 {
			color: $cBlackText;
			font-size: 30px;
			font-weight: 700;
			font-family: $font-5;
			padding-left: 20px;
			border-left: 2px solid $cYellow;
			margin-bottom: 32px;

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

		h3 {
			color: $cBlackText;
			font-size: 18px;
			font-weight: 700;
			font-family: $font-5;
		}

		p {
			color: $cBlackText;
			font-size: 14px;
			font-weight: 400;
			font-family: $font-5;

			strong {
				font-weight: 700;
			}
		}

		ul {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			column-gap: 28px;
			row-gap: 20px;
			flex-wrap: wrap;
			margin-top: 50px;

			li {
				&:nth-child(1) {
					a {
						color: $cBlackText;
						background: #eeeeee;
					}
				}

				&:nth-child(2) {
					a {
						position: relative;
						color: $cWhite;
						background: $cGreen;

						&::before {
							content: url('/upload/filemanager/new-2024/assets/calendar-icon.svg');
							line-height: 0;
						}
					}
				}
			}

			a {
				font-size: 14px;
				font-weight: 700;
				font-family: $font-5;

				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 12px;
				border-radius: 12px;
				padding: 20px 28px;
			}
		}
	}

	.box-2 {
		margin-top: 150px;
		margin-bottom: 70px;

		@include respond-below(sm) {
			margin-top: 70px;
		}

		.box-2-header {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			column-gap: 20px;
			margin-bottom: 50px;

			.box-2-header-data {
				display: flex;
				flex-direction: row;
				align-items: center;
				column-gap: 20px;
				flex: 1;
				flex-wrap: wrap;

				p {
					color: #adadad;
					font-weight: 500;
					margin-bottom: 0;

					strong {
						color: $cBlack;
						font-weight: 700;
					}
				}

				ul {
					margin: 0;
					padding: 0;
					list-style: none;
					height: fit-content;
					display: flex;
					flex-direction: row;
					align-items: center;
					gap: 10px;
				}

				@include respond-below(xs) {
					flex-direction: column;
					gap: 10px;
					padding-bottom: 40px;
				}
			}

			.swiper-customers-arrows {
				.swiper-button {
					width: 36px;
					height: 36px;
					border-radius: 100%;
					border: 1px solid #e9e9e6;
					background: #fff;
					user-select: none;

					&::after {
						display: none;
					}

					&-next {
						right: 0;

						@include respond-below(xs) {
							right: -46px;
						}
					}

					&-prev {
						left: auto;
						right: 50px;

						@include respond-below(xs) {
							right: 10px;
						}
					}
				}

				@include respond-below(xs) {
					position: absolute;
					left: 50%;
					bottom: 0;
				}
			}
		}

		.swiper-customers {
			.swiper-slide {
				.card {
					display: flex;
					flex-direction: column;
					row-gap: 30px;
					height: 100%;

					padding: 30px;
					border: 1px solid #e9e9e6;
					background: linear-gradient(
						300deg,
						rgba(255, 255, 255, 1) 0%,
						rgba(249, 249, 249, 1) 100%
					);
					border-radius: 12px;

					header {
						display: flex;
						flex-direction: column;
						gap: 20px;

						ul {
							display: flex;
							flex-direction: row;
							align-items: center;
							gap: 10px;
							list-style: none;
							padding: 0;
							margin: 0;

							li {
								img {
									@include respond-below(xs) {
										max-width: 18px;
									}
								}
							}
						}

						h3 {
							color: $cBlack;
							font-size: 14px;
							font-family: $font-4;
						}

						// > img {
						// 	max-width: 100px !important;
						// }
					}

					main {
						flex: 1;

						p {
							font-size: 12px;
							font-family: $font-4;
							font-weight: 400;
							line-height: 1.5;
							margin-bottom: 0;
						}
					}

					footer {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						gap: 20px;
						flex-wrap: wrap;

						p {
							font-size: 12px;
							font-family: $font-4;
							margin-bottom: 0;
						}

						a {
							position: relative;
							color: $cBlack;
							font-size: 12px;
							font-family: $font-5;
							font-weight: 700;
							padding-right: 18px;

							&:hover {
								&::before {
									right: -5px;
								}

								&::after {
									right: -5px;
								}
							}

							&::before {
								content: '';
								position: absolute;
								top: 50%;
								right: 0;
								width: 9px;
								height: 2px;
								background: #2bac25;
								transform: translateY(-50%);
								transition: right 250ms ease-in-out;
							}

							&::after {
								content: '';
								position: absolute;
								top: 50%;
								right: 0;
								width: 8px;
								height: 8px;
								border-top: 2px solid #2bac25;
								border-right: 2px solid #2bac25;
								transform: translateY(-50%) rotate(45deg);
								transition: right 250ms ease-in-out;
							}
						}
					}
				}
			}
		}
	}

	.box-3 {
		padding-top: 120px;
		// padding-bottom: 120px;
		border-top: 1px solid #e4e4e4;

		@include respond-below(sm) {
			padding-top: 70px;
			// padding-bottom: 70px;
		}
	}

	.box-4 {
		padding-top: 140px;
		padding-bottom: 140px;
		background: linear-gradient(
			0deg,
			rgba(241, 173, 1, 0.1) 0%,
			rgba(255, 217, 71, 0.1) 100%
		);

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

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

	.box-5 {
		position: relative;
		padding-top: 140px;
		padding-bottom: 40px;
		box-shadow: 0 20px 40px 0px rgba(0, 0, 0, 0.06);

		@include respond-below(md) {
			padding-top: 80px;
		}

		&::before {
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			width: 250px;
			height: 250px;
			background-image: url('/upload/filemanager/new-2024/assets/big-star-border.svg');
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			transform: translate(35%, -23%) rotate(200deg);

			@include respond-below(md) {
				width: 170px;
				height: 170px;
				transform: translate(35%, 0%) rotate(200deg);
				z-index: -1;
			}

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

		@include respond-below(md) {
			overflow: hidden;
		}

		.row {
			&-1 {
				width: 100%;
				max-width: 720px;
				margin-left: auto;
				margin-right: auto;
				text-align: center;
				margin-bottom: 70px;

				h2 {
					color: $cBlackText;
					font-size: 36px;
					font-family: $font-5;
					font-weight: 700;
					max-width: 580px;
					margin-left: auto;
					margin-right: auto;
					margin-bottom: 24px;

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

				p {
					color: rgba($cBlackText, 0.7);
					font-family: $font-5;
					font-weight: 400;
					font-size: 18px;

					strong {
						font-weight: 500;
					}
				}

				a {
					display: block;
					margin: 40px auto 0;
					font-family: $font-5;
					color: $cWhite;
					font-weight: 700;
					font-size: 14px;
					padding: 22px;
					background: $cBlack;
					border-radius: 12px;
				}
			}

			&-2 {
				position: relative;

				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 250px;
					height: 250px;
					background-image: url('/upload/filemanager/new-2024/assets/big-star-border.svg');
					background-position: center;
					background-size: cover;
					background-repeat: no-repeat;
					transform: translate(-65%, -40%) rotate(101deg);
				}

				img {
					width: 100%;

					@include respond-above(sm) {
						max-width: unset !important;
					}
				}
			}
		}
	}

	.box-6 {
		padding-top: 120px;
		padding-bottom: 80px;
		background: #f9f9f9;

		@include respond-below(md) {
			padding-top: 70px;
		}

		.row {
			align-items: center;

			@include respond-below(md) {
				gap: 50px;
				flex-direction: column-reverse;
			}
		}

		.contact-info-data {
			@extend .contact-info-data-box;

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

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

			p {
				position: relative;
				padding-left: 24px;

				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 4px;
					width: 12px;
					height: 12px;

					background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
					background-position: center;
					background-size: cover;
					background-repeat: no-repeat;
				}
			}
		}
	}

	.box-7 {
		padding-top: 60px;
		// padding-bottom: 90px;

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

		.row {
			align-items: center;
			row-gap: 50px;
		}

		h3 {
			display: inline-flex;
			flex-direction: row;
			align-items: center;
			gap: 10px;
			padding: 12px 18px;
			margin: 30px 0 30px 0;
			background: $cYellow;

			color: $cBlackText;
			font-size: 12px;
			font-family: $font-5;
			font-weight: 600;
			line-height: 1;
			text-transform: uppercase;

			img {
				max-width: 12px !important;
			}
		}

		p {
			color: #4e4e4e;
			font-family: $font-5;
			font-size: 18px;
			font-weight: 400;
			padding-left: 22px;
			border-left: 2px solid $cYellow;
			// max-width: 290px;
			margin-bottom: 50px;
		}

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

			li {
				position: relative;
				padding-left: 40px;

				font-size: 20px;
				font-weight: 700;

				span {
					color: $cYellow;
				}

				&::before {
					content: '';
					position: absolute;
					top: 5px;
					left: 0;
					width: 22px;
					height: 22px;
					background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
					background-position: center;
					background-size: cover;
					background-repeat: no-repeat;
					transform: rotate(20deg);
				}

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

		.col-left {
			display: flex;
			flex-direction: column;
			align-items: baseline;

			img {
				max-width: 100px;
			}
		}

		.col-right {
			img {
				@include respond-below(md) {
					margin: 0;
					max-width: 400px !important;
					margin: 0 auto;
					display: block;
				}
			}
		}

		// .contact-info-data {
		// 	@extend .contact-info-data-box;

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

		// img {
		// 	width: 100%;
		// 	max-width: unset;

		// 	@include respond-above(md) {
		// 		min-width: fit-content;
		// 	}
		// }
	}

	.box-11 {
		padding-top: 60px;
		padding-bottom: 60px;

		h2 {
			color: $cBlackText;
			font-size: 30px;
			font-family: $font-5;
			line-height: 1;
			font-weight: 700;
			margin: 0 0 60px 0;
			padding-left: 20px;
			border-left: 3px solid $cYellow;

			strong {
				color: $cYellow;
			}

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

		h3 {
			color: $cYellow;
			font-size: 16px;
			font-weight: 600;
			font-family: $font-5;
			text-transform: uppercase;
			margin-top: 0;
			margin-bottom: 30px;
		}

		p {
			color: #4e4e4e;
			font-size: 18px;
			font-family: $font-5;
			font-weight: 400;

			strong {
				font-weight: 700;
			}

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

	.box-8 {
		position: relative;
		padding-top: 150px;
		padding-bottom: 150px;

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

		background: #fffbec;

		.col-12 {
			position: initial;
		}

		.box-8-data {
			position: relative;
			width: 100%;
			max-width: 530px;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
			background: #fffbec;
			z-index: 1;
			border-radius: 12px;

			h2 {
				position: relative;
				color: $cBlackText;
				font-size: 30px;
				font-family: $font-5;
				font-weight: 700;
				max-width: 360px;
				margin-left: auto;
				margin-right: auto;
				margin-bottom: 64px;
				padding-top: 24px;

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

				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 50%;
					width: 110px;
					height: 2px;
					background: $cYellow;
					transform: translateX(-50%);
				}
			}

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

				li {
					position: relative;
					color: $cBlackText;
					font-size: 22px;
					font-family: $font-5;
					font-weight: 600;
					margin: 0 auto;
					display: flex;
					align-items: center;
					gap: 12px;
					max-width: fit-content;

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

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

						@include respond-below(md) {
							margin-bottom: 14px;
						}
					}

					&::before {
						content: '';
						display: block;
						width: 20px;
						height: 20px;

						background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
						background-position: center;
						background-size: cover;
						background-repeat: no-repeat;
					}
				}
			}
		}

		img {
			position: absolute;

			&.img-bg-1 {
				bottom: 0;
				left: -7%;

				@include respond-below(lg) {
					max-width: 500px;
					opacity: 0.5;
				}

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

			&.img-bg-2 {
				right: -1%;
				top: 50%;
				transform: translateY(-50%);
				max-width: 540px;
				width: 100%;

				@include respond-below(lg) {
					max-width: 400px;
					opacity: 0.5;
				}

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

	.box-9 {
		padding-top: 60px;
		padding-bottom: 60px;

		.row {
			align-items: center;
			row-gap: 50px;

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

		.contact-info-data {
			@extend .contact-info-data-box;

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

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

	.box-10 {
		padding-top: 110px;
		padding-bottom: 90px;
		background-image: url('/upload/filemanager/new-2024/home/img-12.jpg');
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;

		.box-10-data {
			h2 {
				color: $cBlackText;
				font-size: 30px;
				font-weight: 800;
				font-family: $font-5;
				margin-bottom: 30px;

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

			h3 {
				color: $cBlackText;
				font-size: 18px;
				font-weight: 800;
				font-family: $font-5;
			}

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

				li {
					&:nth-child(1) {
						a {
							position: relative;
							color: $cWhite;
							background: $cGreen;

							&::before {
								content: url('/upload/filemanager/new-2024/assets/calendar-icon.svg');
								line-height: 0;
							}
						}
					}
				}

				a {
					font-size: 14px;
					font-weight: 700;
					font-family: $font-5;

					display: flex;
					flex-direction: row;
					align-items: center;
					gap: 12px;
					border-radius: 12px;
					padding: 20px 28px;
				}
			}
		}
	}

	.page-data {
		@include respond-below(lg) {
			display: flex;
			flex-direction: column;

			.box-1 {
				order: 2;
			}

			.box-6 {
				order: 1;

				@include respond-between(xs, sm) {
					margin-top: 220px;
				}

				@include respond-between(sm, xl) {
					padding-top: 200px;
				}

				@include respond-below(xs) {
					margin-top: 0;
					padding-top: 200px;
				}
			}

			.box-7 {
				order: 3;
			}

			.box-11 {
				order: 4;
			}

			.box-8 {
				order: 5;
			}

			.box-9 {
				order: 6;
			}

			.box-5 {
				order: 7;
			}

			.box-4 {
				order: 8;
			}

			.box-3 {
				order: 9;
			}

			.box-2 {
				order: 10;
			}
		}
	}
}

#scontainer-330,
#scontainer-331 {
	position: relative;
	padding-top: 70px;
	padding-bottom: 100px;
	overflow: hidden;

	background: #f4f4f4;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 300px;
		height: 300px;
		background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		opacity: 0.1;
		transform: rotate(-60deg) translate(20px, 30px);
	}

	&::after {
		content: '';
		position: absolute;
		top: 320px;
		right: 0;
		width: 170px;
		height: 170px;
		background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		opacity: 0.1;
		transform: rotate(-20deg) translate(30px, 20px);
	}

	.row {
		position: relative;
		z-index: 1;

		&-1 {
			text-align: center;
			margin-bottom: 90px;

			h2 {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				gap: 14px;
				margin-bottom: 20px;

				color: $cBlackText;
				font-size: 36px;
				font-weight: 700;
				font-family: $font-5;
			}

			p {
				color: rgba($cBlackText, 0.7);
				font-size: 16px;
				font-weight: 400;
				font-family: $font-5;
				margin-bottom: 0;
			}
		}

		&-2 {
			div {
				> ul {
					list-style: none;
					padding: 0;
					margin: 0;
					display: flex;
					flex-direction: column;
					row-gap: 16px;

					> li {
						border-bottom: 1px solid #e2e2e2;

						&.active {
							.acc-head {
								&::before {
									border-color: $cYellow;
									transform: translateY(-70%) rotate(45deg) scale(-1);
								}
							}
						}

						.acc-head {
							position: relative;
							padding-top: 20px;
							padding-bottom: 20px;
							padding-left: 24px;
							cursor: pointer;

							&::before {
								content: '';
								position: absolute;
								left: 0;
								top: 50%;

								width: 8px;
								height: 8px;
								border-bottom: 2px solid $cBlack;
								border-right: 2px solid $cBlack;
								transform: translateY(-70%) rotate(45deg);
								transition: all 250ms ease-in-out;
							}

							p {
								color: rgba($cBlackText, 0.8);
								font-size: 16px;
								font-weight: 700;
								margin-bottom: 0;
							}
						}

						.acc-data {
							padding-bottom: 20px;
							display: none;

							p {
								color: $cBlackText;
								font-size: 14px;

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

//* ~~~~~~ New styles ~~~~~~ *//
#scontainer-229 {
	width: 100%;
	max-width: 660px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-bottom: 80px;

	.row {
		row-gap: 30px;
	}

	ul {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 10px;
		margin-bottom: 30px;
	}

	h2 {
		color: $cBlackText;
		font-size: 36px;
		font-family: $font-5;
		font-weight: 700;
		max-width: 560px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 24px;

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

	p {
		color: rgba($cBlackText, 0.7);
		font-family: $font-5;
		font-weight: 400;
		font-size: 18px;

		strong {
			font-weight: 500;
		}
	}
}

#scontainer-245,
#scontainer-260 {
	width: 100%;
	max-width: 660px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-bottom: 80px;

	ul {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 10px;
		margin-bottom: 30px;
	}

	h2 {
		color: $cBlackText;
		font-size: 30px;
		font-family: $font-5;
		font-weight: 700;
		max-width: 560px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 24px;

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

	p {
		color: rgba($cBlackText, 0.7);
		font-family: $font-5;
		font-weight: 400;
		font-size: 16px;

		strong {
			font-weight: 500;
		}
	}
}

#scontainer-245 {
	h2 {
		color: $cWhite;
	}

	p {
		color: $cWhite;
	}
}

#scontainer-239 {
	background-color: #ffcb21;
	background-image: url('/upload/filemanager/new-2024/box-bottom-bg.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	.container {
		> .row {
			min-height: 378px;
			align-items: center;
		}
	}

	h2 {
		color: $cBlackText;
		font-size: 40px;
		font-weight: 800;
		font-family: $font-5;
		margin: 0 0 30px 0;

		max-width: 700px;

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

		@include respond-below(xs) {
			font-size: 26px;
		}
	}

	h3 {
		color: $cBlackText;
		font-size: 24px;
		font-weight: 800;
		font-family: $font-5;
		margin: 0 0 18px 0;

		max-width: 700px;

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

		@include respond-below(xs) {
			font-size: 16px;
		}
	}

	a {
		display: inline-flex;
		align-items: center;
		gap: 12px;
		padding: 22px 28px;
		border-radius: 12px;
		background: $cGreen;

		color: $cWhite;
		font-size: 14px;
		font-weight: 700;
		font-family: $font-5;
	}
}

#scontainer-242,
#scontainer-271 {
	background-image: url('/upload/filemanager/new-2024/box-bottom-bg-2.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;

	.container {
		> .row {
			min-height: 308px;
			align-items: center;

			> .col-12 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				column-gap: 50px;
				align-items: center;
				padding-top: 50px;
				padding-bottom: 50px;

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

	.col-left {
		display: flex;
		flex-direction: row;
		align-items: center;
		column-gap: 20px;

		@include respond-below(md) {
			flex-direction: column;
			align-items: baseline;
			row-gap: 30px;
		}

		@include respond-below(sm) {
			align-items: center;
		}

		.col-img {
			position: relative;

			.star-1,
			.star-2 {
				position: absolute;
				width: 65px;
				height: 65px;
			}

			.star-1 {
				top: 0;
				right: 0;
				transform: rotate(310deg) translate(30%, -20%);
			}

			.star-2 {
				bottom: 0px;
				left: 0;
				transform: rotate(287deg) translate(-15%, -10%);
				z-index: 2;
			}

			.user {
				position: relative;
				z-index: 1;
				border: 2px solid $cWhite;
				border-radius: 100%;
			}
		}

		.col-txt {
			display: flex;
			flex-direction: column;
			gap: 32px;
			align-items: flex-start;

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

			h3 {
				color: $cBlackText;
				font-size: 30px;
				font-weight: 800;
				font-family: $font-5;
				margin: 0;
				max-width: 700px;

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

			p {
				color: rgba($cBlackText, 0.8);
				font-size: 16px;
				font-family: $font-5;
				font-weight: 400;
				margin: 0;

				strong {
					font-weight: 600;
				}
			}

			a {
				display: inline-flex;
				align-items: center;
				gap: 12px;
				padding: 22px 28px;
				border-radius: 12px;
				background: $cGreen;

				color: $cWhite;
				font-size: 14px;
				font-weight: 700;
				font-family: $font-5;
			}
		}
	}

	.col-right {
		position: relative;
		height: fit-content;

		.star-1,
		.star-2 {
			position: absolute;
		}

		.star-1 {
			width: 170px;
			height: 170px;
			bottom: 100%;
			left: 100%;
			transform: rotate(310deg) translate(-50%, 0%);
		}

		.star-2 {
			width: 90px;
			height: 90px;
			bottom: 0px;
			left: 0;
			transform: rotate(287deg) translate(-60%, -35%);
		}

		.col-right-data {
			position: relative;
			padding: 35px 50px 35px 24px;
			background: rgba(255, 255, 255, 0.6);
			border: 1px solid rgba(#9e9e9e, 0.25);
			border-radius: 12px;
			backdrop-filter: blur(4px);
			display: flex;
			flex-direction: column;

			.col-right-head {
				display: flex;
				flex-direction: row;
				gap: 16px;
				align-items: center;
				margin-bottom: 34px;

				.col-right-head-data {
					p {
						color: rgba($cBlackText, 0.7);
						font-size: 16px;
						font-weight: 500;
						font-family: $font-5;
						line-height: 1;
						margin-bottom: 0;
						width: max-content;

						strong {
							color: $cBlackText;
						}
					}
				}
			}

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

				li {
					display: flex;
					flex-direction: row;
					align-items: center;
					gap: 28px;

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

					img {
						width: 16px;
						height: 16px;
					}

					a {
						color: rgba($cBlackText, 0.7);
						font-size: 16px;
						font-weight: 500;
						font-family: $font-5;
						line-height: 1;
					}
				}
			}
		}
	}
}

//* Page banners
#scontainer-240,
#scontainer-243,
#scontainer-246,
#scontainer-247,
#scontainer-261,
#scontainer-263,
#scontainer-323 {
	.container {
		> .row {
			min-height: 377px;
			align-items: center;
		}
	}

	h2,
	.title {
		color: $cBlackText;
		font-size: 30px;
		font-weight: 700;
		font-family: $font-5;
		margin: 0 0 30px 0;

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

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

	h3,
	.subtitle {
		color: $cYellow;
		font-size: 16px;
		font-weight: 600;
		font-family: $font-5;
		letter-spacing: 0.6px;
		margin: 0 0 18px 0;
		text-transform: uppercase;
	}

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

		strong {
			font-weight: 700;
		}
	}

	@include respond-below(xl) {
		margin-top: 156px;
	}

	@include respond-below(sm) {
		margin-top: 223px;
	}

	@include respond-below(xs) {
		margin-top: 90px;
	}

	@media (max-width: 500px) {
		margin-top: 153px;
	}
}

#scontainer-240 {
	background-image: url('/upload/filemanager/new-2024/partnerzy/baner-bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #f9f9f9;
}

#scontainer-243 {
	background-image: url('/upload/filemanager/new-2024/blog/box-baner-bg.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #f9f9f9;
}

#scontainer-246 {
	background-image: url('/upload/filemanager/new-2024/wideo-i-audio/box-1.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #f9f9f9;
	margin-bottom: 70px;
}

#scontainer-247 {
	background-image: url('/upload/filemanager/new-2024/partnerzy/baner-bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #f9f9f9;
}

#scontainer-261 {
	background-image: url('/upload/filemanager/new-2024/Contact/box-1.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #f9f9f9;
}

#scontainer-263 {
	background-image: url('/upload/filemanager/new-2024/widgety/box-1.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #f9f9f9;
}

#scontainer-323 {
	background-image: url('/upload/filemanager/Pages/home-new/Picture1.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #f9f9f9;

	.container > .row {
		min-height: 450px;
	}
}

//* Cennik
#scontainer-237 {
	padding-top: 50px;
	padding-bottom: 50px;
	background-image: url('/upload/filemanager/new-2024/cennik/pricing-hero.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #f9f9f9;

	@include respond-below(xl) {
		margin-top: 156px;
	}

	@include respond-below(sm) {
		margin-top: 223px;
	}

	@include respond-below(xs) {
		margin-top: 90px;
	}

	@media (max-width: 500px) {
		margin-top: 153px;
	}

	.container {
		> .row {
			min-height: 730px;
			align-items: center;

			@include respond-below(md) {
				min-height: 600px;
			}
		}
	}

	h2 {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 8px;
		margin: 0 0 30px 0;
	}

	h1 {
		color: $cBlackText;
		font-size: 32px;
		font-weight: 700;
		font-family: $font-5;
		padding-left: 20px;
		border-left: 3px solid $cYellow;
		margin: 0 0 64px 0;

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

	p {
		strong {
			font-weight: 700;
		}
	}
}

#scontainer-238 {
	margin-top: 160px;
	margin-bottom: 160px;

	@include respond-below(md) {
		margin-top: 100px;
		margin-bottom: 100px;
	}

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

	h2 {
		color: $cBlackText;
		font-size: 32px;
		font-weight: 700;
		font-family: $font-5;
		margin: 0 0 64px 0;

		span {
			position: relative;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				bottom: -3px;
				width: 80%;
				height: 3px;
				background-color: $cYellow;
			}
		}

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

	.table-container {
		width: 100%;
		overflow-x: auto;
	}

	table {
		border: none;
		width: 100%;
		border-collapse: collapse;

		tr {
			th,
			td {
				font-size: 14px;
				font-weight: 700;
				font-family: $font-5;
				line-height: 1;
				padding: 10px;
			}
		}

		thead {
			tr {
				th {
					&:nth-child(1) {
						padding: 15px 10px;
						width: 32%;
					}

					&:nth-child(2) {
						position: relative;
						background-color: #fffcec;
						border-bottom: 1px solid #ffd500;

						&::before {
							content: '';
							position: absolute;
							inset: -0.5px;
							border-left: 1px solid #ffd500;
							border-right: 1px solid #ffd500;
							border-top: 1px solid #ffd500;
							border-top-left-radius: 12px;
							border-top-right-radius: 12px;
						}
					}

					&:not(:first-child) {
						text-align: center;
						padding: 25px 10px;
						width: 17%;
					}
				}
			}
		}

		tbody {
			tr {
				position: relative;
				border-bottom: none;

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

				&:nth-child(2n + 1) {
					&::after {
						content: '';
						position: absolute;
						top: -0.5px;
						bottom: -0.5px;
						left: 50%;
						width: 100vw;
						background: #f9f9f9;
						transform: translateX(-50%);
						z-index: -1;
						border-top: 1px solid #eaeaea;
						border-bottom: 1px solid #eaeaea;
					}
				}

				td {
					border-right: none;

					&:nth-child(1) {
						text-align: left;
					}

					@include respond-above(sm) {
						&:nth-child(2) {
							background-color: #fffcec;
						}
					}
				}

				&:not(:last-child) {
					td {
						@include respond-above(sm) {
							&:nth-child(2) {
								background-color: #fffcec;
								border: 1px solid #ffd500;
							}
						}

						@include respond-below(sm) {
							&:nth-child(2) {
								background-color: #fffcec;
								border-bottom: 1px solid #ffd500;
							}
						}
					}
				}

				&:last-child {
					&::after {
						border-bottom: none;
					}

					td {
						@include respond-above(sm) {
							&:nth-child(2) {
								position: relative;

								&::before {
									content: '';
									position: absolute;
									inset: -0.5px;
									border-left: 1px solid #ffd500;
									border-right: 1px solid #ffd500;
									border-bottom: 1px solid #ffd500;
									border-bottom-left-radius: 12px;
									border-bottom-right-radius: 12px;
								}
							}
						}
					}
				}
			}
		}
	}

	@media screen and (max-width: 768px) {
		table,
		thead,
		tbody,
		th,
		td,
		tr {
			display: block;
		}

		thead {
			tr {
				position: absolute;
				top: -9999px;
				left: -9999px;
			}
		}

		tr {
			padding: 1rem 0 1rem 0;
		}

		td {
			border: none;
			position: relative;
			padding-left: 50%;
			text-align: left;

			&:before {
				white-space: nowrap;
				font-weight: bold;
				content: attr(data-label);
			}

			@include respond-above(sm) {
				border-bottom: 1px solid #ddd;

				&:nth-child(1) {
					background: #f9f9f9;
				}

				&:nth-child(2) {
					background-color: #fffcec;
				}
			}

			@include respond-below(sm) {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				row-gap: 10px;
				column-gap: 20px;

				&:nth-child(1) {
					flex-direction: column;
					align-items: center;
				}

				&:not(:last-child) {
					border-bottom: 1px solid #ddd;
				}
			}
		}

		tbody tr {
			&:nth-child(even) td {
				@include respond-above(sm) {
					background: #f9f9f9;
				}
			}
		}
	}

	@media screen and (min-width: 769px) and (max-width: 1024px) {
		th,
		td {
			padding: 8px;
		}

		th img {
			width: 20px;
			height: auto;
		}
	}
}

//* Partnerzy
#scontainer-241 {
	position: relative;
	padding-bottom: 100px;

	&::before {
		content: '';
		position: absolute;
		bottom: 0;
		right: 0;
		width: 210px;
		height: 210px;
		background-image: url('/upload/filemanager/new-2024/assets/big-star.svg');
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		transform: translate(40%, 0%);
	}

	.scontainer-content {
		padding-top: 70px;
		padding-bottom: 70px;
		background: linear-gradient(
			0deg,
			rgba(241, 173, 1, 0.1) 0%,
			rgba(255, 217, 71, 0.1) 100%
		);
	}

	h2 {
		text-align: center;
		color: $cBlackText;
		font-size: 30px;
		font-weight: 700;
		font-family: $font-5;
		width: 100%;
		max-width: 500px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 70px;

		strong {
			font-weight: 700;
			color: $cYellow;
		}
	}

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

		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 30px;

		li {
			padding: 35px;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 35px;
			background: $cWhite;
			border-radius: 12px;

			p {
				color: $cBlackText;
				font-size: 20px;
				font-family: $font-5;
				font-weight: 500;
				margin-bottom: 0;
			}
		}

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

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

//* Blog

.all-categories {
	margin-top: 30px;
	margin-bottom: 30px;

	#categories-container {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		gap: 20px;

		ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			gap: 16px;
			flex-wrap: wrap;

			li {
				margin: 0;

				&.active {
					a {
						color: $cBlackText;
						background: #fec407;
						border-color: #fec407;
					}
				}

				a {
					display: block;
					color: #b9b9b9;
					font-size: 16px;
					font-weight: 700;
					line-height: 1;
					font-family: $font-5;
					padding: 12px 24px;

					border: 2px solid #e5e5e5;
					border-radius: 100px;
					transition: all 250ms ease-in-out;

					&:hover {
						color: $cBlackText;
						background: #fec407;
						border-color: #fec407;
					}
				}
			}
		}

		span {
			color: #fec407;
			font-size: 16px;
			font-family: $font-5;
			letter-spacing: 0.6px;
			font-weight: 600;
			text-transform: uppercase;
		}
	}
}

#scontainer-244 {
	position: relative;
	padding-top: 70px;
	padding-bottom: 100px;

	background: #f4f4f4;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 300px;
		height: 300px;
		background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		opacity: 0.1;
		transform: rotate(-60deg) translate(20px, 30px);
	}

	&::after {
		content: '';
		position: absolute;
		top: 320px;
		right: 0;
		width: 170px;
		height: 170px;
		background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		opacity: 0.1;
		transform: rotate(-20deg) translate(30px, 20px);
	}

	.row {
		position: relative;
		z-index: 1;

		&-1 {
			text-align: center;
			margin-bottom: 90px;

			h2 {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				gap: 14px;
				margin-bottom: 20px;

				color: $cBlackText;
				font-size: 36px;
				font-weight: 700;
				font-family: $font-5;
			}

			p {
				color: rgba($cBlackText, 0.7);
				font-size: 16px;
				font-weight: 400;
				font-family: $font-5;
				margin-bottom: 0;
			}
		}

		&-2 {
			div {
				> ul {
					list-style: none;
					padding: 0;
					margin: 0;

					> li {
						border-bottom: 1px solid #e2e2e2;

						&.active {
							.acc-head {
								&::before {
									border-color: $cYellow;
									transform: translateY(-70%) rotate(45deg) scale(-1);
								}
							}
						}

						.acc-head {
							position: relative;
							padding-top: 20px;
							padding-bottom: 20px;
							padding-left: 24px;
							cursor: pointer;

							&::before {
								content: '';
								position: absolute;
								left: 0;
								top: 50%;

								width: 8px;
								height: 8px;
								border-bottom: 2px solid $cBlack;
								border-right: 2px solid $cBlack;
								transform: translateY(-70%) rotate(45deg);
								transition: all 250ms ease-in-out;
							}

							p {
								color: rgba($cBlackText, 0.8);
								font-size: 16px;
								font-weight: 700;
								margin-bottom: 0;
							}
						}

						.acc-data {
							padding-bottom: 20px;
							display: none;

							p {
								color: $cBlackText;
								font-size: 14px;

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

.article-entry,
.article-list {
	// margin-bottom: 50px;
	background: #f4f4f4;
	border-radius: 12px;
	overflow: hidden;

	.img {
		width: 100%;

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

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

	.article-tags {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		list-style-type: none;
		padding-inline-start: 0;
		margin-bottom: 20px;
		flex-wrap: wrap;
		gap: 12px;

		padding-top: 32px;
		padding-left: 32px;
		padding-right: 32px;

		.item {
			padding: 8px 12px;
			background: $cWhite;
			border-radius: 100px;

			color: #636363;
			font-size: 14px;
			font-weight: 500;
			font-family: $font-5;
		}

		// ul {
		// 	display: flex;
		// 	justify-content: flex-start;
		// 	align-items: center;
		// 	padding-inline-start: 0;
		// 	list-style-type: none;

		// 	li {
		// 		margin-left: 25px;

		// 		@include respond-below(xs) {
		// 			margin-left: 4px;
		// 		}

		// 		a {
		// 			background: none;
		// 			font-size: 15px;
		// 			font-weight: 600;
		// 			padding: 5px 7px;
		// 			background: #f6bf25;
		// 			color: $cBlackText;
		// 			display: block;

		// 			@include respond-between(md, lg) {
		// 				font-size: 14px;
		// 			}

		// 			@include respond-below(xs) {
		// 				padding: 10px 5px;
		// 				font-size: 14px;
		// 				line-height: 16px;
		// 				min-height: 52px;
		// 				align-items: center;
		// 				display: flex;
		// 				justify-content: center;
		// 				text-align: center;
		// 			}
		// 		}
		// 	}
		// }
	}

	.article-content {
		padding-left: 32px;
		padding-right: 32px;
		padding-bottom: 32px;

		.article-title {
			a {
				color: $cBlackText;
				font-size: 30px;
				font-weight: 700;
			}
		}

		.entry {
			margin-bottom: 20px;

			* {
				color: #6e6e6e !important;
				font-size: 18px;
				font-weight: 400 !important;
				font-family: $font-5;
				display: -webkit-box;
				-webkit-line-clamp: 5;
				-webkit-box-orient: vertical;
				overflow: hidden;
				margin-bottom: 0;
			}
		}

		.more {
			font-size: 16px;
			color: $cBlackText;
			font-weight: 600;
			border-bottom: 1px solid $cBlackText;
		}
	}

	&.partners {
		.img {
			width: 100%;
			height: auto;

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

.article-entry-v2 {
	background: transparent;
	margin-bottom: 60px;

	.article-tags {
		padding: 20px 0 0;

		.item {
			color: #636363;
			background: #eeeeee;
		}
	}

	.article-content {
		padding: 0;

		.article-title {
			margin: 0;

			a {
				line-height: 1;
			}
		}
	}
}

.blog-first-box {
	margin-bottom: 30px;
	display: grid;
	grid-template-columns: 1fr 390px;
	column-gap: 30px;
	row-gap: 30px;

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

.blog-list-masonry {
	.article-entry {
		@include respond-above(md) {
			position: absolute;
		}

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

.wideo-i-audio-box {
	background-image: url('/upload/filemanager/new-2024/wideo-i-audio/box-2.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 100%;
	max-height: 445px;
	border-radius: 20px;
	padding: 50px;

	display: flex;
	flex-direction: column;
	justify-content: center;

	img {
		width: 100%;
		max-width: 24px;
		margin-bottom: 14px;
	}

	h2 {
		color: $cWhite;
		font-family: 24px;
		font-weight: 700;
		font-family: $font-5;
		margin: 0 0 20px 0;
	}

	p {
		color: $cWhite;
		font-size: 16px;
		font-weight: 400;
		font-family: $font-5;
		margin-bottom: 40px;
	}

	.btn1 {
		background: $cWhite;
		color: $cBlackText;
		width: 100%;
		max-width: fit-content;
	}
}

#page-11 {
	.box-title {
		font-size: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 17px;
		margin: 0 0 60px 0;
	}
}

.default-page {
	background: #f9f9f9;

	.subpage-content {
		padding-bottom: 120px;
	}
}

#custom-form-response {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 400px;
	border: 1px solid $cYellow;
	border-radius: 24px;
	background: $cWhite;
	padding: 40px;
	gap: 20px;

	p {
		margin-bottom: 0;
	}
}

#custom-form,
#custom-form-2 {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 400px;
	border: 1px solid $cYellow;
	border-radius: 24px;
	background: $cWhite;
	padding: 40px;
	gap: 20px;

	p {
		margin: 0;

		strong {
			display: inline-block;
			color: $cBlackText;
			font-size: 14px;
			font-weight: 700;
			font-family: $font-5;
			line-height: 1;
			margin-bottom: 55px;
		}
	}

	input[type='range'] {
		-webkit-appearance: none;
		appearance: none;
		width: 100%;
		cursor: pointer;
		outline: none;
		border-radius: 0px;
		height: 2px;
		background: #eaeaea;

		&::-webkit-slider-thumb {
			-webkit-appearance: none;
			appearance: none;
			height: 16px;
			width: 16px;
			background: transparent;
			background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
			background-size: cover;
			border: none;
			box-shadow: none;

			@include respond-below(lg) {
				width: 32px;
				height: 32px;
			}
		}

		&::-moz-range-thumb {
			height: 16px;
			width: 16px;
			background: transparent;
			background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
			background-size: cover;
			border: none;
			box-shadow: none;

			@include respond-below(lg) {
				width: 32px;
				height: 32px;
			}
		}
	}

	.f-row {
		position: relative;
	}

	.range-output {
		position: absolute;
		left: 50%;
		width: max-content;
		padding: 8px 12px;
		color: #000;
		font-weight: 700;
		line-height: 1;
		background: #fff;
		border: 2px solid #eaeaea;
		border-radius: 4px;
		transform: translate(-50%, calc(-100% - 3px));
		box-shadow: 0 2px 4px 0 rgba(#000, 0.04);

		&::before {
			content: '';
			position: absolute;
			bottom: -5px;
			left: 50%;
			transform: translateX(-50%) rotate(45deg);
			width: 5px;
			height: 5px;
			border-bottom: 3px solid #eaeaea;
			border-right: 3px solid #eaeaea;
		}

		@include respond-below(lg) {
			transform: translate(-50%, calc(-100% - 7px));
		}
	}

	.min {
		left: 0;
	}

	.max {
		right: 0;
	}

	.min,
	.max {
		position: absolute;
		bottom: 15px;

		color: #b9b9b9;
		font-weight: 700;
		font-size: 14px;
		line-height: 1;

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

	.tile {
		position: relative;
		margin-bottom: 20px;

		label {
			position: absolute;
			top: 50%;
			left: 20px;
			color: #b9b9b9;
			font-size: 14px;
			font-weight: 600;
			line-height: 1;
			margin: 0;
			transform: translateY(-50%);
			transition: all 250ms ease;
		}

		input {
			background: #f9f9f9;
			height: 53px;
			width: 100%;
			border: none;
			border-radius: 6px;
			padding: 10px 20px;

			color: #000;
			font-size: 14px;
			font-weight: 700;
			line-height: 1;
			outline: none;
		}

		input:focus ~ label,
		input:not(:placeholder-shown) ~ label {
			top: 0;
			color: #b9b9b9;
			font-size: 12px;
		}
	}

	.checkbox-row {
		display: flex;
		flex-direction: row;
		gap: 10px;

		label {
			font-size: 14px;
			font-weight: 500;
			line-height: 1;
			color: rgba(#000, 0.8);
			margin: 0;

			a {
				color: $cYellow;
				text-decoration: underline;
			}
		}

		input[type='checkbox'] {
			appearance: none;
			position: relative;
			width: 20px;
			height: 20px;
			border: 1px solid #ebebeb;
			border-radius: 6px;
			background: #f9f9f9;
			width: 20px;
			min-width: 20px;
			height: 20px;
			overflow: hidden;
			cursor: pointer;

			&:checked {
				&::before {
					top: 9px;
					left: 6px;
				}

				&::after {
					top: 10px;
					left: 4px;
				}
			}

			&::before {
				content: '';
				position: absolute;
				top: -11px;
				left: 26px;
				width: 10px;
				height: 2px;
				background: #000;
				transform: rotate(-50deg);
				transition: all 250ms ease;
			}

			&::after {
				content: '';
				position: absolute;
				top: -10px;
				left: -16px;
				width: 5px;
				height: 2px;
				background: #000;
				transform: rotate(50deg);
				transition: all 250ms ease;
			}
		}
	}

	.btn1 {
		cursor: pointer;
		background: $cGreen;
	}
}

#hero-slider {
	position: relative;
	background-image: url('/upload/filemanager/new-2024/home/Frame-294.png');
	background-position: center right;
	background-size: contain;
	background-repeat: no-repeat;
	background-color: #f9f9f9;
	padding: 50px 0;

	min-height: 888px;
	display: flex;
	align-items: center;

	@include respond-below(sm) {
		background: #f9f9f9;
	}

	@include respond-below(xxl) {
		background-size: cover;
	}

	.row {
		align-items: center;
	}

	.swiper {
		padding-bottom: 25px;

		.swiper-slide {
			text-align: center;

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

		.swiper-pagination {
			bottom: 0;

			.swiper-pagination-bullet {
				&-active {
					background: $cYellow;
				}
			}
		}
	}

	.col-right {
	}

	#custom-form,
	#custom-form-2 {
		margin-left: 110px;
		// 	position: absolute;
		// 	left: calc(50% + 15px);
		// 	top: 50%;
		// 	transform: translateY(-50%);
		// 	z-index: 11;

		// 	@include respond-below(md) {
		// 		left: 50%;
		// 		transform: translate(-50%, -50%);
		// 	}

		@include respond-below(xxl) {
			margin-left: 0;
		}

		@include respond-below(lg) {
			margin: 0 auto;
		}
	}

	.hero-slider-box {
		position: absolute;
		right: 0;
		top: 0;
		width: 55vw;
		transform: translateY(-50%);
	}
}

#scontainer-250 {
	margin-top: 160px;
	margin-bottom: 160px;

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

	h2 {
		color: $cBlackText;
		font-size: 32px;
		font-weight: 700;
		font-family: $font-5;
		margin: 0 0 64px 0;
		width: 100%;
		max-width: 890px;

		span {
			position: relative;

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

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

	.table-container {
		width: 100%;
		overflow-x: auto;
	}

	table {
		border: none;
		width: 100%;
		border-collapse: collapse;

		tr {
			th,
			td {
				font-size: 14px;
				font-weight: 700;
				font-family: $font-5;
				line-height: 1;
				padding: 10px;
			}
		}

		thead {
			tr {
				th {
					&:nth-child(1) {
						padding: 15px 10px;
						width: 32%;
					}

					&:nth-child(2) {
						position: relative;
						background-color: #fffcec;
						border-bottom: 1px solid #ffd500;

						&::before {
							content: '';
							position: absolute;
							inset: -0.5px;
							border-left: 1px solid #ffd500;
							border-right: 1px solid #ffd500;
							border-top: 1px solid #ffd500;
							border-top-left-radius: 12px;
							border-top-right-radius: 12px;
						}
					}

					&:not(:first-child) {
						text-align: center;
						padding: 25px 10px;
						width: 17%;
					}
				}
			}
		}

		tbody {
			tr {
				position: relative;
				border-bottom: none;

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

				&:nth-child(2n + 1) {
					&::after {
						content: '';
						position: absolute;
						top: -0.5px;
						bottom: -0.5px;
						left: 50%;
						width: 100vw;
						background: #f9f9f9;
						transform: translateX(-50%);
						z-index: -1;
						border-top: 1px solid #eaeaea;
						border-bottom: 1px solid #eaeaea;
					}
				}

				td {
					border-right: none;

					&:nth-child(1) {
						text-align: left;
					}

					@include respond-above(sm) {
						&:nth-child(2) {
							background-color: #fffcec;
						}
					}
				}

				&:not(:last-child) {
					td {
						@include respond-above(sm) {
							&:nth-child(2) {
								background-color: #fffcec;
								border: 1px solid #ffd500;
							}
						}

						@include respond-below(sm) {
							&:nth-child(2) {
								background-color: #fffcec;
								border-bottom: 1px solid #ffd500;
							}
						}
					}
				}

				&:last-child {
					&::after {
						border-bottom: none;
					}

					td {
						@include respond-above(sm) {
							&:nth-child(2) {
								position: relative;

								&::before {
									content: '';
									position: absolute;
									inset: -0.5px;
									border-left: 1px solid #ffd500;
									border-right: 1px solid #ffd500;
									border-bottom: 1px solid #ffd500;
									border-bottom-left-radius: 12px;
									border-bottom-right-radius: 12px;
								}
							}
						}
					}
				}
			}
		}
	}

	@media screen and (max-width: 768px) {
		table,
		thead,
		tbody,
		th,
		td,
		tr {
			display: block;
		}

		thead {
			tr {
				position: absolute;
				top: -9999px;
				left: -9999px;
			}
		}

		tr {
			padding: 1rem 0 1rem 0;
		}

		td {
			border: none;
			position: relative;
			padding-left: 50%;
			text-align: left;

			&:before {
				white-space: nowrap;
				font-weight: bold;
				content: attr(data-label);
			}

			@include respond-above(sm) {
				border-bottom: 1px solid #ddd;

				&:nth-child(1) {
					background: #f9f9f9;
				}

				&:nth-child(2) {
					background-color: #fffcec;
				}
			}

			@include respond-below(sm) {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				row-gap: 10px;
				column-gap: 20px;

				&:nth-child(1) {
					flex-direction: column;
					align-items: center;
				}

				&:not(:last-child) {
					border-bottom: 1px solid #ddd;
				}
			}
		}

		tbody tr {
			&:nth-child(even) td {
				@include respond-above(sm) {
					background: #f9f9f9;
				}
			}
		}
	}

	@media screen and (min-width: 769px) and (max-width: 1024px) {
		th,
		td {
			padding: 8px;
		}

		th img {
			width: 20px;
			height: auto;
		}
	}
}

#scontainer-228 {
	.title {
		text-align: center;
		max-width: 860px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 60px;

		h3 {
			color: $cBlackText;
			font-family: $font-5;
			font-size: 30px;
			font-weight: 600;

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

			strong {
				color: $cYellow;
				font-weight: 800;
			}
		}
	}

	.sub-title {
		margin-bottom: 70px;

		p {
			color: #414141;
			font-family: $font-5;
			font-weight: 600;
			font-size: 18px;
			text-align: center;
		}
	}

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

		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 40px 30px;

		li {
			flex: 0 0 calc(20% - 30px);
			display: flex;
			align-items: center;
			justify-content: center;

			a {
				img {
				}
			}
		}
	}

	.text-box {
		position: relative;
		width: 100%;
		max-width: 660px;
		margin-left: auto;
		margin-right: auto;
		border: 2px dashed $cYellow;
		border-radius: 12px;

		&::before {
			content: '';
			position: absolute;
			width: 27px;
			height: 27px;
			background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			top: 0;
			left: 0;
			transform: translate(-50%, -50%);
		}

		&::after {
			content: '';
			position: absolute;
			width: 27px;
			height: 27px;
			background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			right: 0;
			bottom: 0;
			transform: translate(50%, 50%);
		}

		p {
			padding: 40px;
			margin: 0;
			text-align: center;

			color: $cBlackText;
			font-family: $font-5;
			font-weight: 600;

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

.btn-meeting {
	position: relative;
	color: $cWhite;
	background: $cGreen;

	font-size: 14px;
	font-weight: 700;
	font-family: $font-5;

	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	border-radius: 12px;
	padding: 20px 28px;

	&::before {
		content: url('/upload/filemanager/new-2024/assets/calendar-icon.svg');
		line-height: 0;
	}

	&:hover {
		color: $cWhite;
	}
}

#news-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 30px;

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

		.article-title {
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}
	}
}

#scontainer-307 {
	position: relative;
	background-image: url('/upload/filemanager/new-2024/home/Frame-294.png');
	background-position: center right;
	background-size: contain;
	background-repeat: no-repeat;
	background-color: #f9f9f9;
	padding: 50px 0;

	@include respond-below(md) {
		background: #f9f9f9;
	}

	@include respond-below(xxl) {
		background-size: cover;
	}

	.col-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		row-gap: 50px;
		padding: 0 0 50px 0;

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

		.data-1 {
			max-width: unset;

			h2 {
				position: relative;
				font-size: 20px;
				font-weight: 700;
				line-height: 1;

				display: flex;
				flex-direction: row;
				align-items: center;
				column-gap: 17px;
				margin-bottom: 20px;

				&::before {
					content: '';
					display: inline-block;
					width: 16px;
					height: 16px;
					background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
					background-size: cover;
					background-position: center;
					background-repeat: no-repeat;
				}
			}

			h3 {
				position: relative;
				font-size: 26px;
				font-weight: 700;
				line-height: 1;
			}

			.data-1-1 {
				margin-bottom: 80px;

				h3 {
					display: flex;
					flex-direction: row;
					align-items: flex-start;
					column-gap: 17px;

					&::before {
						content: '';
						display: inline-block;
						min-width: 16px;
						width: 16px;
						height: 16px;
						background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
						background-size: cover;
						background-position: center;
						background-repeat: no-repeat;
						margin-top: 3px;
					}
				}
			}

			.data-1-2 {
				h3 {
					padding-left: 20px;
					border-left: 3px solid #ffbf0b;
				}
			}
		}

		.data-2 {
			> p {
				font-size: 18px;
				margin-bottom: 23px;

				strong {
					color: #545454;
				}
			}
		}

		.col-right-data {
			position: relative;
			padding: 35px 50px 35px 24px;
			background: rgba(255, 255, 255, 0.6);
			border: 1px solid rgba(#9e9e9e, 0.25);
			border-radius: 12px;
			backdrop-filter: blur(4px);
			display: flex;
			flex-direction: column;

			.col-right-head {
				display: flex;
				flex-direction: row;
				gap: 16px;
				align-items: center;
				margin-bottom: 34px;

				.col-right-head-data {
					p {
						color: rgba($cBlackText, 0.7);
						font-size: 16px;
						font-weight: 500;
						font-family: $font-5;
						line-height: 1;
						margin-bottom: 0;
						width: max-content;

						strong {
							color: $cBlackText;
						}
					}
				}
			}

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

				li {
					display: flex;
					flex-direction: row;
					align-items: center;
					gap: 28px;

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

					img {
						width: 16px;
						height: 16px;
					}

					a {
						color: rgba($cBlackText, 0.7);
						font-size: 16px;
						font-weight: 500;
						font-family: $font-5;
						line-height: 1;
					}
				}
			}
		}
	}

	#custom-form-2 {
		margin-left: auto;
		margin-right: auto;
	}

	#custom-form-response {
		max-width: unset;
	}
}

#scontainer-300 {
	background-image: url('/upload/filemanager/new-2024/box-bottom-bg-2.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;

	.container {
		> .row {
			min-height: 308px;
			align-items: center;

			> .col-12 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				column-gap: 50px;
				align-items: center;
				padding-top: 50px;
				padding-bottom: 50px;

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

	.col-left {
		display: flex;
		flex-direction: row;
		align-items: center;
		column-gap: 20px;

		@include respond-below(md) {
			flex-direction: column;
			align-items: baseline;
			row-gap: 30px;
		}

		@include respond-below(sm) {
			align-items: center;
		}

		.col-img {
			position: relative;

			.star-1,
			.star-2 {
				position: absolute;
				width: 65px;
				height: 65px;
			}

			.star-1 {
				top: 0;
				right: 0;
				transform: rotate(310deg) translate(30%, -20%);
			}

			.star-2 {
				bottom: 0px;
				left: 0;
				transform: rotate(287deg) translate(-15%, -10%);
				z-index: 2;
			}

			.user {
				position: relative;
				z-index: 1;
				border: 2px solid $cWhite;
				border-radius: 100%;
			}
		}

		.col-txt {
			display: flex;
			flex-direction: column;
			gap: 32px;
			align-items: flex-start;

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

			h3 {
				color: $cBlackText;
				font-size: 30px;
				font-weight: 800;
				font-family: $font-5;
				margin: 0;
				max-width: 700px;

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

			p {
				color: rgba($cBlackText, 0.8);
				font-size: 16px;
				font-family: $font-5;
				font-weight: 400;
				margin: 0;

				strong {
					font-weight: 600;
				}
			}

			a {
				display: inline-flex;
				align-items: center;
				gap: 12px;
				padding: 22px 28px;
				border-radius: 12px;
				background: $cGreen;

				color: $cWhite;
				font-size: 14px;
				font-weight: 700;
				font-family: $font-5;
			}
		}
	}

	.col-right {
		position: relative;
		height: fit-content;

		.star-1,
		.star-2 {
			position: absolute;
		}

		.star-1 {
			width: 170px;
			height: 170px;
			bottom: 100%;
			left: 100%;
			transform: rotate(310deg) translate(-50%, 0%);
		}

		.star-2 {
			width: 90px;
			height: 90px;
			bottom: 0px;
			left: 0;
			transform: rotate(287deg) translate(-60%, -35%);
		}

		.col-right-data {
			position: relative;
			padding: 35px 50px 35px 24px;
			background: rgba(255, 255, 255, 0.6);
			border: 1px solid rgba(#9e9e9e, 0.25);
			border-radius: 12px;
			backdrop-filter: blur(4px);
			display: flex;
			flex-direction: column;

			.col-right-head {
				display: flex;
				flex-direction: row;
				gap: 16px;
				align-items: center;
				margin-bottom: 34px;

				.col-right-head-data {
					p {
						color: rgba($cBlackText, 0.7);
						font-size: 16px;
						font-weight: 500;
						font-family: $font-5;
						line-height: 1;
						margin-bottom: 0;
						width: max-content;

						strong {
							color: $cBlackText;
						}
					}
				}
			}

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

				li {
					display: flex;
					flex-direction: row;
					align-items: center;
					gap: 28px;

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

					img {
						width: 16px;
						height: 16px;
					}

					a {
						color: rgba($cBlackText, 0.7);
						font-size: 16px;
						font-weight: 500;
						font-family: $font-5;
						line-height: 1;
					}
				}
			}
		}
	}
}

.blog-layout {
	.subpage-content {
		padding-top: 120px;
	}
}

#form-contact-mail {
	border: 1px solid #f5f5f5;
	padding: 50px;
	background: $cWhite;
	position: relative;
	z-index: 5;
	border-radius: 24px;

	.f-row {
		display: flex;
		flex-direction: column;
		gap: 18px;
		margin-bottom: 20px;

		.tile {
			position: relative;

			label {
				position: absolute;
				top: 50%;
				left: 20px;
				color: #b9b9b9;
				font-size: 14px;
				font-weight: 600;
				line-height: 1;
				margin: 0;
				transform: translateY(-50%);
				transition: all 250ms ease;
			}

			input {
				background: #f9f9f9;
				height: 53px;
				width: 100%;
				border: none;
				border-radius: 6px;
				padding: 10px 20px;

				color: #000;
				font-size: 14px;
				font-weight: 700;
				line-height: 1;
				outline: none;
			}

			input:focus ~ label,
			input:not(:placeholder-shown) ~ label {
				top: 0;
				color: #b9b9b9;
				font-size: 12px;
			}
		}
	}

	.checkbox-row {
		display: flex;
		flex-direction: row;
		gap: 10px;
		margin-bottom: 20px;

		label {
			font-size: 14px;
			font-weight: 500;
			line-height: 1;
			color: rgba(#000, 0.8);
			margin: 0;

			a {
				color: $cYellow;
				text-decoration: underline;
			}
		}

		input[type='checkbox'] {
			appearance: none;
			position: relative;
			width: 20px;
			height: 20px;
			border: 1px solid #ebebeb;
			border-radius: 6px;
			background: #f9f9f9;
			width: 20px;
			min-width: 20px;
			height: 20px;
			overflow: hidden;
			cursor: pointer;

			&:checked {
				&::before {
					top: 9px;
					left: 6px;
				}

				&::after {
					top: 10px;
					left: 4px;
				}
			}

			&::before {
				content: '';
				position: absolute;
				top: -11px;
				left: 26px;
				width: 10px;
				height: 2px;
				background: #000;
				transform: rotate(-50deg);
				transition: all 250ms ease;
			}

			&::after {
				content: '';
				position: absolute;
				top: -10px;
				left: -16px;
				width: 5px;
				height: 2px;
				background: #000;
				transform: rotate(50deg);
				transition: all 250ms ease;
			}
		}
	}

	.tile.small {
		margin-bottom: 20px;
	}

	.btn1 {
		cursor: pointer;
		background: $cGreen;
		margin-top: 20px;
	}
}

#custom-contact-mail-response {
	padding: 20px;
	background: #fff;
	border-radius: 20px;
	text-align: center;

	p {
		margin: 0;
	}
}