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

@import '_variables';
@import '_mixins';

#scontainer-325 {
	.scontainer-content {
		> p {
			color: #fff;
			font-size: 20px;
			text-align: center;
		}
	}
}

#scontainer-326 {
	.box-3-1 {
		margin-bottom: 0 !important;
	}
	ol {
		li {
			p {
				b {
					font-weight: 600 !important;
				}
			}
		}
	}
}

.box-9 {
	margin-bottom: 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;
						}
					}
				}
			}
		}
	}
}

#scontainer-327 {
	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: 22px;
		font-weight: 800;
		font-family: $font-5;
		margin: 0 0 30px 0;

		max-width: 700px;
	}

	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-328 {
	margin: 70px auto 0;
	max-width: 600px;

	p {
		font-size: 20px;
		text-align: center;
	}
}

#scontainer-329 {
	margin: 30px 0;

	p {
		text-align: center;
		margin: 0;
	}

	a {
		color: $cBlack;
		transition: all 250ms ease-in-out;

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

#scontainer-31 {
	.row {
		align-items: center;
	}

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

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

		span {
			font-weight: 600;
		}

		strong {
			display: block;
			margin: 50px 0 20px;
			font-weight: 700;
		}
	}

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

		li {
			position: relative;
			background-color: #f9f9f9;
			border-radius: 12px;
			width: 100%;
			padding: 12px;
			margin: 0;

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

			color: #545454;
			font-size: 16px;
			font-family: $font-5;
			font-weight: 500;

			&::before {
				content: '✅';
				width: 52px;
				min-width: 52px;
				height: 52px;
				background: $cWhite;
				border-radius: 6px;

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

	.col-wrapper {
		width: 100%;
		max-width: 320px;

		@include respond-below(md) {
			max-width: unset;
		}
	}
}

.box-11 {
	padding: 120px 0;
}