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

// out: ../style-css/case-study.css, compress: true, sourceMap: true
@import '_variables';
@import '_mixins';

.case-study-single__content {
	background-color: #f9f9f9;
	padding-top: 104px;
	font-size: 16px;

	.case_study_data {
		margin-top: 30px;
		padding: 70px 70px 0px 70px;
		background: $cWhite;
		border-radius: 12px;

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

	// h2 {
	// 	font-family: 'DM Sans';
	// 	font-weight: 400;
	// 	font-size: 22px;
	// 	letter-spacing: -0.5236px;
	// 	text-align: center;
	// }

	.case_box {
		padding-top: 50px;
		padding-bottom: 50px;

		&.first.big {
			margin-bottom: 0px;
		}

		&.black {
			background: #000;
			color: #fff;
		}

		&.yellow {
			background: #ffbf0b;
		}

		&.gray {
			background: #fafafa;
		}

		.container.big {
			max-width: 1350px;

			#scontainer-156 {
				.container {
					width: 100%;
					max-width: 100%;
					margin: 0 !important;

					h2 {
						text-align: left;
						font-weight: 700;
					}

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

		&.box_image {
			.container {
				max-width: 1350px;
			}

			.review {
				display: flex;
				margin-top: 60px;
				align-items: center;

				.icon {
					margin-right: 20px;
				}

				.data {
					p {
						margin-bottom: 0;
						font-size: 14px;
						font-weight: 700;

						&:first-child {
							font-size: 16px;
						}

						strong {
							color: #ffbf0a;
						}
					}
				}
			}

			.two_columns {
				display: flex;

				.img {
					width: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

					&.second {
						order: 1;
					}

					img {
						max-width: 100%;
					}
				}

				.text {
					width: 50%;
					padding: 50px 0 50px 50px;
					display: flex;
					align-items: center;
					font-size: 16px;
					line-height: 1.5;

					&.first {
						order: 0;
						padding: 50px 50px 50px 0;
					}

					h2 {
						font-weight: 700;
						text-align: left;
					}

					.content {
						> p {
							u {
								font-size: 24px;
								text-decoration: none;
								font-weight: 700;
							}
						}
					}
				}
			}
		}
	}

	.yellow-box {
		#scontainer-18 {
			text-align: center;
			font-weight: 600;
		}
	}

	.blok-tekstowy-11 {
		h2 {
			text-align: left;
			font-weight: 700;
		}
	}

	.firma-w-liczbach {
		text-align: center;

		.case_quote {
			margin-bottom: -150px;
			background: #fff;
			position: relative;
			z-index: 10;

			.icon {
				margin-bottom: 10px;
			}
		}

		.numbers {
			margin-top: 75px;
			margin-bottom: 75px;

			ul {
				margin: 0;
				padding: 0;
				list-style-type: none;
				display: flex;
				gap: 30px;
				flex-wrap: wrap;
				justify-content: center;

				li {
					display: block;
					border: 1px solid transparentize(#000000, 0.79);
					border-radius: 5px;
					padding: 20px 14px;
					text-align: center;
					width: calc(100% / 3 - 30px);
					font-size: 16px;
					color: #000;
					font-weight: 700;

					strong {
						display: block;
						font-weight: 700;
						font-size: 40px;
						color: #666666;
					}
				}
			}
		}

		h2 {
			font-weight: 700;
		}
	}

	.cta {
		.container {
			padding: 0;

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

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

		.cta-yellow {
			background: #ffbf0a;
			border: 1px solid #ffbf0a;
			border-radius: 10px;
			padding: 60px;
			max-width: 1347px;
			margin: 0 auto;
			display: flex;
			gap: 80px;

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

			.contact-data {
				width: 40%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				gap: 35px;

				@include respond-below(md) {
					flex-direction: column;
					text-align: center;
				}

				> img {
					width: 120px;
					height: 120px;
					border-radius: 100px;
					object-fit: cover;
					object-position: top;
				}

				p {
					margin-bottom: 0;

					strong {
						font-weight: 400;
					}

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

			.text {
				// width: 60%;
				font-weight: 700;
				letter-spacing: -0.4284px;

				@include respond-below(md) {
					text-align: center;
					gap: 20px;
				}

				p {
					margin-bottom: 0;
					font-size: 22px;
					line-height: 32px;
					letter-spacing: 0.3px;

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

				.btn {
					background: #fff;
					border-radius: 5px;
					color: #000;
					margin-top: 10px;

					border-radius: 10px;
					font-size: 16px;
					font-weight: 700;
					max-width: 190px;
					padding: 10px 30px;
				}
			}
		}
	}

	.integracja {
		h2 {
			font-weight: 700;
		}
	}

	.zastosowane-rozwiazania-02 {
		.container {
			max-width: 1000px;

			h2 {
				font-weight: 700;
				text-align: left;
			}
		}
	}

	.opinie-google-moja-firma {
		h2 {
			font-weight: 700;
			margin: 20px 0;
		}

		.review {
			display: flex;
			margin-top: 60px;
			align-items: center;
			max-width: 500px;
			margin-left: auto;
			margin-right: auto;

			.icon {
				margin-right: 20px;
			}

			.data {
				p {
					margin-bottom: 0;
					font-size: 16px;
					font-weight: 700;

					strong {
						color: #ffbf0a;
					}
				}
			}
		}
	}

	.widgety-na-stronie {
		h2 {
			font-weight: 700;
			margin: 20px 0;
		}
	}

	.gwiazdki-w-reklamach {
		margin-top: 100px;
	}

	.blok-tekstowy-06 {
		text-align: center;

		.start {
			margin-bottom: 40px;
		}

		.content {
			display: flex;
			max-width: 790px;
			margin: 0 auto;
			gap: 60px;

			.logo {
			}

			.text {
				font-size: 34px;
				text-align: left;
				font-weight: 400;
			}
		}
	}

	.blok-testowy-04 {
		margin-top: 150px;
		margin-bottom: -100px;
	}

	.zastosowane-rozwiazania {
		h2 {
			text-align: left;
			font-weight: 700;
		}

		.case_quote {
			margin-bottom: -150px;
		}

		.review {
			display: flex;
			margin-top: 60px;
			align-items: center;

			.icon {
				margin-right: 20px;
			}

			.data {
				p {
					margin-bottom: 0;
					font-size: 14px;
					font-weight: 700;

					&:first-child {
						font-size: 16px;
					}

					strong {
						color: #ffbf0a;
					}
				}
			}
		}
	}

	.mozliwosci-zaufane {
		h2 {
			text-align: left;
			font-weight: 700;
		}
	}

	.firma-o-dobrej-reputacji {
		margin-top: 150px;

		.header {
			text-align: center;

			img {
				margin-bottom: 10px;
			}

			h2 {
				font-weight: 700;
			}
		}
	}

	.cele-wspolpracy {
		.cta-yellow {
			background: #ffbf0a;
			border: 1px solid #ffbf0a;
			border-radius: 10px;
			padding: 60px;
			max-width: 1347px;
			margin: 100px auto;
			display: flex;
			margin-bottom: -175px;
			gap: 80px;

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

			.contact-data {
				width: 40%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				gap: 35px;

				@include respond-below(md) {
					flex-direction: column;
					text-align: center;
				}

				> img {
					width: 120px;
					height: 120px;
					border-radius: 100px;
					object-fit: cover;
					object-position: top;
				}

				p {
					margin-bottom: 0;

					strong {
						font-weight: 400;
					}

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

			.text {
				// width: 60%;
				font-weight: 700;
				letter-spacing: -0.4284px;

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

				p {
					margin-bottom: 0;
					font-size: 22px;
					line-height: 32px;
					letter-spacing: 0.3px;

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

				.btn {
					background: #fff;
					color: #000;
					margin-top: 10px;

					border-radius: 10px;
					font-size: 16px;
					font-weight: 700;
					max-width: 190px;
					padding: 10px 30px;
				}
			}
		}

		.text {
			font-size: 18px;
		}

		.img {
			margin: 75px 0;
			text-align: center;

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

		.header {
			text-align: center;

			h2 {
				font-weight: 700;
			}
		}
	}

	.section_company_text {
		font-family: 'DM Sans';
		font-weight: 400;
		font-size: 18px;
		text-align: center;
	}

	.title {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 50px;

		&.big {
			.title_text {
				font-family: 'DM Sans';
				font-weight: 700;
				font-size: 16px !important;
				letter-spacing: -0.3808px;
				color: #000000;
				margin-bottom: 25px !important;
			}
		}

		h1 {
			font-family: 'DM Sans';
			text-transform: none;
			font-weight: 700;
			font-size: 27px !important;
			margin-bottom: 20px !important;
			letter-spacing: -0.6426px;
		}

		h2 {
			margin-bottom: 40px;
		}
	}

	.section_company {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 40px;

		&.big {
			.text {
				background: #fff;
			}

			.video,
			.img {
				margin-bottom: -200px;
			}
		}

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

			.logo {
				max-width: 200px;

				img {
					width: 100%;
				}
			}
		}

		.text {
			display: flex;
			flex-direction: column;
			padding: 20px 0;
			justify-content: center;
			align-items: center;
			border: 1px solid #e4e4e4;
			max-width: 645px;
			width: 100%;
			text-align: center;
			font-size: 18px;

			p {
				margin-bottom: 0;
			}

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

		.video {
			max-width: 645px;
			width: 100%;

			iframe {
				width: 100% !important;
			}
		}
	}
}

.section_implementation {
	p {
		strong {
			color: #ffbf0b;
		}
	}
}

.section_integration,
.section-goals {
	h2 {
		text-align: left;
		font-weight: 700;
	}

	.quote {
		background: #fff;
	}
}

//section all
.section {
	display: grid;
	grid-template-areas:
		'left'
		'right';
	gap: 30px;

	@include respond-above(md) {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: 'left right';
	}

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

	.left {
		grid-area: left;
		max-width: 100%;
	}

	.right {
		grid-area: right;
		max-width: 100%;
	}
}

.slider__quotes {
	.quote__text {
		font-style: italic;
	}
}

.case-studies-list__content {
	background-color: #ffffff;
	margin-top: 106px;

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

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

	@media (max-width: 500px) {
		margin-top: 153px;
	}

	//h2
	h2 {
		font-size: 18px;
		margin: 0;
		line-height: 24px;
		font-weight: 700;

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

	//p,ul
	p,
	ul {
		margin-bottom: 0;
		margin-top: 0;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		padding-top: 0;
		padding-bottom: 0;
	}

	p,
	li {
		line-height: 24px;
	}

	.company-slider--wrapper-background {
		background-color: $cGrayLighterBg;
	}

	.container {
		padding: 0 20px;

		@include respond-above(xs) {
			padding: 0;
		}

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

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

		display: flex;
		flex-direction: column;
		// gap: 80px;
	}

	.baner {
		height: 337px;
		display: flex;
		flex-direction: row;
		background: url('/upload/filemanager/new-2024/case-study/baner.jpg');
		background-repeat: no-repeat;
		background-position: right;
		position: relative;
		align-items: center;

		// &::after {
		// 	content: '';
		// 	position: absolute;
		// 	top: 0;
		// 	left: 0;
		// 	z-index: 2;
		// 	width: 100%;
		// 	height: 100%;
		// 	background-color: black;
		// 	opacity: 0.7;

		// 	@include respond-above(sm) {
		// 		background: linear-gradient(
		// 			90deg,
		// 			rgb(0, 0, 0) 22%,
		// 			rgba(0, 0, 0, 0.2) 100%
		// 		);
		// 		opacity: 1;
		// 	}

		// 	@include respond-above(md) {
		// 		background: linear-gradient(
		// 			90deg,
		// 			rgb(0, 0, 0) 44%,
		// 			rgba(0, 0, 0, 0.2) 63%
		// 		);
		// 		opacity: 1;
		// 	}

		// 	@include respond-above(xl) {
		// 		background: linear-gradient(
		// 			90deg,
		// 			rgb(0, 0, 0) 55%,
		// 			rgba(0, 0, 0, 0.2) 68%
		// 		);
		// 	}

		// 	@include respond-above(xxxl) {
		// 		background: linear-gradient(
		// 			90deg,
		// 			rgb(0, 0, 0) 58%,
		// 			rgba(0, 0, 0, 0.2) 72%
		// 		);
		// 	}

		// 	@include respond-above(xxxxl) {
		// 		background: linear-gradient(
		// 			90deg,
		// 			rgb(0, 0, 0) 64%,
		// 			rgba(0, 0, 0, 0.2) 76%
		// 		);
		// 	}
		// }

		.container {
			position: relative;
			z-index: 3;

			.baner__text {
				width: 100%;
				color: $cBlackText;
				display: flex;
				flex-direction: column;
				gap: 20px;
				max-width: 450px;

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

				@include respond-above(xl) {
					width: 53%;
				}

				@include respond-above(xxxl) {
					width: 60%;
				}

				.baner__subtitle {
					color: $cYellow;
					font-size: 16px;
					font-weight: 600;
					letter-spacing: 0.6px;
					text-transform: uppercase;
				}

				.baner__title {
					display: flex;
					align-items: center;
					gap: 8px;

					font-size: 28px;
					font-weight: 700;
					line-height: 40px;

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

				.baner__description {
					font-size: 16px;
					line-height: 28px;

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

		@include respond-below(xs) {
			background-position-x: 80%;
		}
	}

	.testimonials {
		padding-top: 160px;
		padding-bottom: 80px;
		display: none;

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

	//slider__quotes
	.slider__quotes {
		margin-top: 40px;
		margin-bottom: 100px;
		display: flex;
		flex-direction: column;
		column-gap: 50px;
		row-gap: 30px;
		width: 100%;

		.splide__list {
			transition: height 0.2s;

			.splide__slide {
				margin-top: 15px;
				margin-bottom: 15px;
			}
		}

		.slider__quotes__right {
			@include respond-below(xs) {
			}

			.quote {
				@include respond-above(md) {
					width: 100%;
					padding: 60px 30px;
					border: 2px solid #191823;
				}
			}
		}

		@include respond-above(md) {
			margin-top: 80px;
			margin-bottom: 100px;
		}

		@include respond-below(md) {
			grid-template-columns: 100%;
		}

		.splide__arrows {
			display: none;
		}

		.splide__pagination {
			transform: translateY(50px);
			gap: 5px;

			li {
				.splide__pagination__page {
					width: 30px;
					height: 5px;
					background-color: #d8d8d8;
					transition: 0.3s;
					border-radius: 0;
				}

				.splide__pagination__page.is-active {
					transform: scale(1);
					background-color: $cYellow;

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

		.slider__quotes__right {
			.splide {
				.splide__track {
					.splide__list {
						transition: height 0.2s;

						.splide__slide {
							height: fit-content;

							.slider__quotes--quote {
								display: flex;
								flex-direction: column;
								border: 1px solid black;
								border-radius: 10px;
								gap: 20px;

								.slider__quotes__wrapper {
									padding: 30px;

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

									.quote__text {
										margin-bottom: 20px;
										font-style: italic;
									}
								}

								.quote__header {
									display: flex;
									flex-direction: row;
									gap: 10px;
									justify-content: center;
									position: relative;

									@include respond-above(lg) {
										justify-content: flex-start;
									}

									.quote-img {
										width: 45px;

										@include respond-below(xs) {
											position: absolute;
											top: 20px;
											left: 10%;
										}
									}

									.quote-author {
										display: flex;
										flex-direction: column;
										gap: 10px;
										align-items: center;

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

										.author-description {
											text-align: center;

											@include respond-above(xs) {
												text-align: start;
											}

											.company__name {
												font-style: 15px;
												font-weight: 600;
												color: $cYellow;
											}

											.author-proffesion {
												color: $cYellow;
												font-size: 14px;
												max-width: 200px;

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

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

										.author-company-img {
											width: 60px;
											height: 60px;
											border-radius: 100px;
											overflow: hidden;
											display: flex;
											justify-content: center;
											align-items: center;

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

											@include respond-below(md) {
												height: fit-content;
											}
										}
									}
								}

								.quote__text {
									text-align: center;

									@include respond-above(xs) {
										text-align: start;
									}
								}
							}
						}
					}
				}
			}
		}

		.slider__quotes__text-bottom {
			// grid-column: 1/-1;
			padding-top: 60px;
		}
	}

	//slider__company
	.slider__company {
		background-color: #ffffff;
		// margin-bottom: 40px;
		margin-top: 60px;
		margin-bottom: 140px;

		.splide__slide {
			display: flex;
			flex-direction: column;

			@include respond-above(md) {
				flex-direction: row;
				align-items: center;
				gap: 50px;
			}

			.slide__left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 100%;
				height: 100%;
				background: $cBlackText;
				overflow: hidden;

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

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

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

					iframe {
						width: 100%;
						min-height: 375px;
					}
				}
			}

			.slide__right {
				display: flex;
				flex-direction: column;
				gap: 40px;
				width: 100%;
				padding: 20px 20px 20px 0;

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

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

				.logo {
					max-width: 200px;

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

				.text {
					display: flex;
					flex-direction: column;
					gap: 15px;

					.description {
						display: none;

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

					.title {
						line-height: 24px;
					}
				}

				.button--slider__company {
					padding: 10px 28px;
					font-size: 16px;
					font-weight: 700;
					background-color: $cYellow;
					color: $cBlackText;
					border-radius: 2px;
					width: 122px;
				}
			}
		}

		.splide__arrows {
			display: none;
		}

		.splide__pagination {
			transform: translateY(50px);
			gap: 5px;

			li {
				.splide__pagination__page {
					width: 30px;
					height: 5px;
					background-color: #d8d8d8;
					transition: 0.3s;
					border-radius: 0;
				}

				.splide__pagination__page.is-active {
					transform: scale(1);
					background-color: $cYellow;

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

	//case-studies-list
	.case-studies-list__container {
		margin-bottom: 60px;
		margin-top: 60px;
		display: flex;
		flex-direction: column;

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

		.case-studies-list__contact--top {
			margin-top: 0;
			order: -1;

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

		.list__title {
			margin-bottom: 30px;
		}

		.list__description {
			line-height: 30px;
			margin-bottom: 60px;
		}

		//list
		.case-studies-list {
			display: flex;
			flex-direction: column;
			gap: 30px;
			list-style: none;
			padding-left: 0;

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

			.case-study {
				width: 100%;
				// padding: 0 20px;
				position: relative;

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

				.case-study-link {
					position: absolute;
					inset: 0;
					z-index: 1;
				}

				.case-study__background {
					height: 100%;
					width: 100%;
					opacity: 0.4;

					@include respond-below(md) {
						img {
							max-height: 400px;
						}
					}

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

				.case-study-container {
					width: 100%;
					height: auto;
					padding: 30px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					border: 1px solid #d9d9d9;
					border-radius: 4px;

					@include respond-above(md) {
						padding: 30px 50px;
						height: 100%;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						border: none;
					}

					.case-study__logo {
						width: 120px;

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

					.case-study__main-container {
						border-radius: 4px;
						background-color: white;
						display: flex;
						flex-direction: column;
						align-items: center;
						padding-top: 20px;
						gap: 20px;
						align-items: flex-start;

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

						h2.case-study__title {
							line-height: 24px;
						}

						.button--case-studies-list {
							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;
						}
					}
				}
			}
		}
	}
}

.case-study-single__content,
.case-studies-list__content {
	.contact--case-study-list {
		.container {
			display: flex;
			flex-direction: row;
			// border: 1px solid $cYellow;
			background-color: $cYellow;
			padding: 60px;
			margin: 60px 0;
			border-radius: 10px;

			.left {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.button--contact {
					background-color: white;
					border-radius: 10px;
					color: $cBlackText;
					font-size: 16px;
					font-weight: 700;
					max-width: 190px;
					padding: 10px 30px;
				}
			}

			.right {
				.contact-container {
					display: flex;
					flex-direction: row;
					gap: 30px;

					.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;
								font-weight: 400;
							}
						}
					}
				}
			}
		}
	}
}

.case-studies-list__content {
	#scontainer-236 {
		@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;
		}
	}
	.box-1 {
		position: relative;
		padding-top: 120px;
		padding-bottom: 120px;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			left: 50%;
			width: 100svw;
			transform: translateX(-50%);
			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;
		}

		.row {
			row-gap: 30px;
		}

		.title {
			color: $cBlackText;
			font-size: 30px;
			font-weight: 700;
			font-family: $font-5;
			margin-bottom: 16px;
			width: 100%;
			max-width: 510px;
		}

		.description {
			color: rgba($cBlackText, 0.8);
			font-size: 18px;
			font-weight: 500;
			font-family: $font-5;
			margin-bottom: 48px;
			width: 100%;
			max-width: 370px;
		}

		.info {
			padding: 16px;
			border-radius: 12px;
			background: $cWhite;
			color: rgba($cBlackText, 0.8);
			font-size: 14px;
			font-weight: 400;
			width: 100%;
			max-width: 370px;
		}

		.splide__quotes {
			@include respond-above(md) {
				width: 50dvw;
			}

			.splide__slide {
				border-radius: 12px;
				box-shadow: 0 24px 64px 0 #ccb1291f;
				background: #ffffff;
				padding: 25px;

				.slider__quotes--quote {
					height: 100%;
					.slider__quotes__wrapper {
						height: 100%;
						display: flex;
						flex-direction: column;
					}
				}
				.quote-head {
					color: $cYellow;
					font-size: 48px;
					line-height: 1;
					font-weight: 900;
					font-family: $font-5;
				}
				.quote__text {
					flex: 1;
					margin-bottom: 50px;

					p {
						color: rgba(#1d1d1d, 0.8);
						font-size: 16px;
						font-family: $font-5;
						margin-bottom: 0;
					}
				}

				.quote__header {
					.quote-author {
						display: flex;
						flex-direction: row;
						align-items: center;
						column-gap: 12px;

						.author-company-img {
							img {
								width: 100%;
								max-width: 80px;
								max-height: 40px;
							}

							.user {
								width: 40px;
								min-width: 40px;
								height: 40px;
								border-radius: 100%;
							}
						}

						.author-description {
							.author__name {
								color: $cBlackText;
								font-size: 14px;
								font-weight: 600;
								font-family: $font-5;
							}
							.author-proffesion {
								color: $cYellow;
								font-size: 14px;
								font-weight: 600;
								font-family: $font-5;
							}
							.company__name {
								color: $cYellow;
								font-size: 14px;
								font-weight: 600;
								font-family: $font-5;
								margin-bottom: 5px;
							}
						}
					}
				}
			}
		}
	}

	.box-2 {
		position: relative;
		padding-top: 140px;
		padding-bottom: 140px;
		background: $cBlack;
		margin-bottom: 140px;

		@include respond-above(md) {
			&::before {
				content: '';
				position: absolute;
				top: -60px;
				left: -70px;
				width: 219px;
				height: 240px;
				background-image: url('/upload/filemanager/new-2024/assets/big-star.svg');
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
			}
			&::after {
				content: '';
				position: absolute;
				bottom: -220px;
				right: -130px;
				width: 320px;
				height: 320px;
				background-image: url('/upload/filemanager/new-2024/assets/big-star-border.svg');
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
				transform: rotate(200deg);
			}
		}

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

		.row {
			row-gap: 30px;
		}
	}
	.box-3 {
		margin-bottom: 160px;

		@include respond-below(md) {
			margin-bottom: 80px;
		}

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

#scontainer-260 {
	max-width: 710px;

	p {
		strong {
			display: block;
			margin-top: 20px;
			font-weight: 700;
		}
	}
}

//* New styles

.box-gap {
	margin-bottom: 75px;
}

.h2 {
	font-size: 30px;
	font-weight: 700;
	font-family: $font-5;
	line-height: 1;
	margin: 0 0 40px 0;

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

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

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

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

	li {
		@extend .p;
		position: relative;
		padding-left: 30px;

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

.case_quote {
	background: #f9f9f9;
	border-radius: 12px;
	padding: 40px;

	.icon {
		margin-bottom: 20px;
	}

	// &.second {
	// 	.header {
	// 		justify-content: flex-start;
	// 	}

	// 	.text {
	// 		text-align: left;
	// 		font-style: italic;
	// 		font-weight: 300;
	// 		font-size: 18px;
	// 	}
	// }

	.text {
		margin-bottom: 40px;

		p {
			@extend .p;
			color: $cBlackText;
			font-weight: 500;
		}
	}

	.header {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		column-gap: 16px;
		font-size: 14px;
		font-weight: 400;

		strong {
			font-weight: 700;
			color: #ffbf0a;
		}

		.data {
			text-align: left;

			p {
				font-size: 14px;
				font-family: $font-5;
				margin-bottom: 0;
			}
		}

		.icon {
			margin-right: 20px;
			margin-bottom: 0;
		}

		.avatar {
			width: 40px;
			height: 40px;
			margin-bottom: 0;
			border-radius: 50px;
		}
	}
}

.case-study-single__content {
	.case_study_data {
		margin-bottom: 100px;

		.box-1 {
			@extend .box-gap;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			gap: 100px;

			.col-left {
				width: 100%;
				max-width: 555px;

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

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

			h1 {
				color: $cBlackText;
				font-size: 40px;
				font-weight: 700;
				font-family: $font-5;
				line-height: 1;
				margin-bottom: 40px;
				margin-top: 0;

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

			h2 {
				color: $cBlackText;
				font-size: 18px;
				font-weight: 500;
				font-family: $font-5;
				line-height: 1;
				margin-bottom: 0px;
				margin-top: 0;
			}

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

			@include respond-below(md) {
				flex-direction: column;
				gap: 30px;
			}
		}

		.box-2 {
			margin-bottom: 40px;
			background: #f9f9f9;
			padding: 19px;
			border-radius: 12px;

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

				li {
					position: relative;
					display: flex;
					flex-direction: row;
					align-items: center;

					color: #545454;
					font-size: 14px;
					font-weight: 500;
					font-family: $font-5;
					line-height: 1;

					&::before {
						content: '';
						display: inline-block;
						width: 15px;
						height: 15px;
						background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
						background-position: center;
						background-size: cover;
						background-repeat: no-repeat;
						margin-bottom: 2px;
						margin-right: 8px;
					}

					strong {
						font-weight: 700;
						margin-left: 3px;
					}
				}
			}
		}

		.box-3 {
			@extend .box-gap;
			line-height: 0;
			border-radius: 12px;
			overflow: hidden;
		}

		.box-4 {
			@extend .box-gap;

			h2 {
				@extend .h2;
			}
			p {
				@extend .p;
			}
		}

		.box-5 {
			@extend .box-gap;
		}

		.box-6 {
			@extend .box-gap;

			.row {
				&-1 {
					@extend .box-gap;

					h2 {
						@extend .h2;
					}
					p {
						@extend .p;
					}
				}
				&-2 {
					@extend .box-gap;

					img {
						width: 100%;
						max-width: fit-content;
						border-radius: 12px;
					}
				}
				&-3 {
					.col-12 {
						ul {
							&:not(:last-child) {
								@extend .box-gap;
							}
						}
					}

					p {
						@extend .h2;
					}

					ul {
						@extend .ul;
					}
				}
			}
		}

		.box-7 {
			@extend .box-gap;
			margin-left: -70px;
			margin-right: -70px;
		}

		.box-8 {
			@extend .box-gap;
			.row {
				align-items: center;
				row-gap: 50px;
			}

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

			h2 {
				@extend .h2;
				@include respond-above(md) {
					padding-left: 50px;
				}
			}

			ol {
				@extend .ul;

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

		.box-9 {
			@extend .box-gap;

			h2 {
				@extend .h2;
			}

			p {
				@extend .p;
			}

			img {
				border-radius: 12px;
			}
		}

		.box-10 {
			@extend .box-gap;

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

			h2 {
				@extend .h2;
			}
			p {
				@extend .p;
			}

			.review {
				.data {
					display: flex;
					flex-direction: column;
					row-gap: 12px;

					p {
						display: flex;
						align-items: center;
						gap: 8px;

						position: relative;
						margin: 0;
						padding: 20px;
						border-radius: 12px;
						background-color: #f9f9f9;

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

		.box-11 {
			@extend .box-gap;

			.row {
				align-items: center;
			}

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

			h2 {
				@extend .h2;
			}
			p {
				@extend .p;
			}
		}

		.box-12 {
			@extend .box-gap;

			.row {
				align-items: center;
			}

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

			h2 {
				@extend .h2;
			}
			p {
				@extend .p;
			}
		}

		.box-13 {
			@extend .box-gap;

			h2 {
				@extend .h2;
			}

			p {
				@extend .p;
			}

			img {
				border-radius: 12px;
			}
		}

		.box-14 {
			@extend .box-gap;

			h2 {
				@extend .h2;
			}

			p {
				@extend .p;
			}

			ul {
				@extend .ul;
			}
		}

		.box-15 {
			margin-left: -70px;
			margin-right: -70px;
		}
	}

	.box-16 {
		margin-bottom: 120px;

		.box-16-head {
			@extend .box-gap;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			h2 {
				@extend .h2;
				margin-bottom: 0 !important;
			}
		}

		.btn1 {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 16px;

			img {
				filter: invert(1);
				width: 14px;
			}
		}
	}
}