/**
 * Why Me block styles
 */

.ct-why-me {
	padding: 80px 0;
	background: var(--color-white);
}

.ct-why-me__grid {
	display: grid;
	grid-template-columns: 440px minmax(0, 1fr);
	gap: 40px;
	align-items: stretch;
}

.ct-why-me__grid > * {
	min-width: 0;
}

.ct-why-me__media {
	position: relative;
	width: 100%;
	max-width: 100%;
	border-radius: 24px;
	overflow: hidden;
	background: var(--color-light-200);
}

.ct-why-me__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ct-why-me__quote {
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 8px;
	padding: 20px;
	background: var(--color-white);
	border-radius: 16px;
	box-shadow: 0 18px 50px rgba(36, 35, 46, 0.08);
}

.ct-why-me__quote::before {
	display: block;
	width: 15px;
	height: 13px;
	margin-bottom: 8px;
	background-image: url("data:image/svg+xml,%3Csvg width='15' height='13' viewBox='0 0 15 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.94716 7.3237C4.66187 7.3237 5.2304 7.54855 5.65272 7.99825C6.07506 8.41585 6.28623 8.99402 6.28623 9.73281C6.28623 10.5359 6.02632 11.1622 5.50653 11.6119C5.01923 12.0295 4.33701 12.2383 3.45986 12.2383C2.38779 12.2383 1.54313 11.8368 0.925879 11.0337C0.308625 10.1986 0 9.02614 0 7.51643C0 6.10309 0.308625 4.80216 0.925879 3.61366C1.57562 2.42517 2.51774 1.23668 3.75223 0.0481816C3.78472 0.0160606 3.83346 0 3.89845 0C3.9959 0 4.0771 0.0481825 4.14208 0.144548C4.20707 0.240911 4.20707 0.321216 4.14208 0.38546C2.55023 1.99153 1.7543 3.8867 1.7543 6.07096C1.7543 6.97038 1.91673 7.62887 2.2416 8.04644C2.53398 7.56461 3.1025 7.3237 3.94716 7.3237ZM11.9389 7.3237C12.6537 7.3237 13.2222 7.54855 13.6445 7.99825C14.0669 8.41585 14.278 8.99402 14.278 9.73281C14.278 10.5359 14.0181 11.1622 13.4983 11.6119C13.011 12.0295 12.3288 12.2383 11.4517 12.2383C10.3796 12.2383 9.53492 11.8368 8.91768 11.0337C8.30041 10.1986 7.99179 9.02614 7.99179 7.51643C7.99179 6.10309 8.30041 4.80216 8.91768 3.61366C9.56741 2.42517 10.5095 1.23668 11.744 0.0481816C11.7765 0.0160606 11.8253 0 11.8902 0C11.9877 0 12.0689 0.0481825 12.1339 0.144548C12.1989 0.240911 12.1989 0.321216 12.1339 0.38546C10.542 1.99153 9.74609 3.8867 9.74609 6.07096C9.74609 6.97038 9.90852 7.62887 10.2334 8.04644C10.5258 7.56461 11.0943 7.3237 11.9389 7.3237Z' fill='%233F3880'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
}

.ct-why-me__quote-text {
	margin: 0;
	font-weight: 400;
	font-size: 16px;
	line-height: 130%;
	color: #24232E;
}

.ct-why-me__content {
	width: 100%;
	max-width: 100%;
	padding: 32px 0;
}

.ct-why-me__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 0;
}

.ct-why-me__title {
	flex: 1 1 auto;
}

.ct-why-me__title span {
	color: var(--color-purple-deep);
}

.ct-why-me__badge {
	flex: 0 0 auto;
	white-space: nowrap;
}

.ct-why-me__intro {
	max-width: 760px;
	margin: 0 0 60px;
	font-weight: 500;
	font-size: 18px;
	line-height: 140%;
	color: #5C5C5C;
}

.ct-why-me__intro p {
	margin: 0;
}

.ct-why-me__intro span {
	color: var(--color-purple-muted);
}

.ct-why-me__cards {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 8px;
}

.ct-why-me__card {
	min-height: 0;
	padding: 24px;
	border: 1px solid #EFEDF2;
	border-radius: 12px;
	background: #FAFAFA;
}

.ct-why-me__card-top {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 6px;
}

.ct-why-me__card-accent {
	font-weight: 600;
	font-size: 28px;
	line-height: 120%;
	text-transform: uppercase;
	color: var(--color-purple-deep);
}

.ct-why-me__card-heading {
	font-weight: 500;
	font-size: 18px;
	line-height: 140%;
	color: #4C4C4C;
}

.ct-why-me__card-text {
	margin: 0;
	font-weight: 400;
	font-size: 14px;
	line-height: 120%;
	color: #4C4C4C;
}

@media (max-width: 1200px) {
	.ct-why-me__header {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 16px;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.ct-why-me__media {
		height: 579px;
	}

	.ct-why-me__image {
		object-position: 50% 20%;
	}
}

@media (max-width: 1024px) {
	.ct-why-me {
		padding: 40px 0;
	}

	.ct-why-me__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.ct-why-me__media {
		height: 479px;
	}

	.ct-why-me__content {
		padding: 0;
	}

	.ct-why-me__header {
		margin-bottom: 0;
	}

	.ct-why-me__intro {
		margin-bottom: 24px;
		font-size: 16px;
	}

	.ct-why-me__quote {
		padding: 16px;
		border-radius: 12px;
	}

	.ct-why-me__quote-text {
		font-size: 14px;
	}

	.ct-why-me__cards {
		gap: 6px;
		grid-template-columns: 1fr;
	}

	.ct-why-me__card {
		padding: 16px;
		border-radius: 10px;
	}

	.ct-why-me__card-top {
		gap: 8px;
	}

	.ct-why-me__card-accent {
		font-size: 20px;
	}

	.ct-why-me__card-heading {
		font-size: 14px;
	}

	.ct-why-me__card-text {
		font-size: 12px;
	}
}