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

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

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

.subpage-content {
	padding-bottom: 0;
}

.acc-box {
	padding: 0;
	margin: 0;
	list-style: none;

	li {
		border-bottom: 1px solid #e4e4e4;
		margin-bottom: 10px;

		&.active {
			.li-head {
				p {
					color: $cYellow;
				}

				&::after {
					border-color: $cYellow;
					transform: rotate(45deg) scale(-1);
				}
			}
		}

		.li-head {
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 10px;
			cursor: pointer;

			p {
				color: rgba($cBlackText, 0.8);
				font-size: 14px;
				font-weight: 700;
				font-family: $font-5;
				margin: 0;
				transition: all 250ms ease-in-out;
			}

			&::after {
				content: '';
				position: relative;
				display: block;
				width: 9px;
				height: 9px;
				border-bottom: 2px solid $cBlack;
				border-right: 2px solid $cBlack;
				transform: rotate(45deg);
				transition: all 250ms ease-in-out;
			}
		}
		.li-data {
			display: none;
			p {
				color: rgba($cBlackText, 0.8);
				font-size: 14px;
				font-family: $font-5;
				line-height: 1;

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

.slider {
	padding: 65px 32px 32px 32px;
	background: #f4f4f4;
	border-radius: 28px;

	img {
		width: 100%;
	}
}
.swiper {
	padding-bottom: 65px;

	.swiper-button-next,
	.swiper-button-prev {
		width: 36px;
		height: 35px;
		border-radius: 100%;
		border: 1px solid #e9e9e6;
		background: $cWhite;
		top: auto;
		bottom: 0;

		&::after {
			content: '';
			width: 10px;
			height: 12px;
			background-position: center;
			background-size: cover;
		}
	}
	.swiper-button-next {
		left: 50%;
		transform: translateX(30px);

		&::after {
			background: url('/upload/filemanager/new-2024/assets/arrow-right.svg');
		}
	}
	.swiper-button-prev {
		left: 50%;
		transform: translateX(-30px);

		&::after {
			background: url('/upload/filemanager/new-2024/assets/arrow-left.svg');
		}
	}
}

#scontainer-263 {
	margin-bottom: 60px;
}
#scontainer-264,
#scontainer-265,
#scontainer-266,
#scontainer-267,
#scontainer-268 {
	margin-bottom: 90px;

	.row {
		row-gap: 30px;
	}

	h2 {
		@extend .h2;
		padding-left: 20px;
		border-left: 3px solid $cYellow;
	}
}

#scontainer-265,
#scontainer-267 {
	.row {
		@include respond-below(md) {
			flex-direction: column-reverse;
		}
	}
}

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

	.row {
		align-items: center;
		row-gap: 50px;
	}

	h3 {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		gap: 10px;
		padding: 12px 18px;
		margin: 0 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;
		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(md) {
				font-size: 18px;
			}
		}
	}

	img {
		margin: -20px 0;

		@include respond-below(md) {
			margin: 0;
			max-width: 400px !important;
			margin: 0 auto;
			display: block;
		}
	}
}