body {
	container: body / inline-size;
	min-height: 1080px;
	display: flex;
	flex-direction: column;
	font-family: 'Inter';
	background-color: #fff;
	overflow: auto;
	--minContent: 1280;
	--hSizing: FILL;
	--vSizing: FILL;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.btn-s {
	display: flex;
	justify-content: center;
	color: #fff;
	font-size: 17.16px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.632;
	letter-spacing: 0px;
	text-align: center;
	background-color: #000;
	padding: 12px 17px 12px 16px;
	border-radius: 12px;
	--minContent: 236;
	--hSizing: HUG;
	--vSizing: HUG;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: MIN;
}

.card-badge-check {
	width: 24px; height: 24px;
	flex-shrink: 0;
	--minContent: 24;
	--hSizing: FIXED;
	--vSizing: FIXED;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.header {
	display: flex;
	align-items: flex-start;
	--minContent: 1056;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.header-content {
	height: 632px;
	justify-content: center;
	gap: 32px;
	flex-grow: 1;
	--minContent: 640;
	--hSizing: FILL;
	--vSizing: FIXED;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.header-text {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-self: stretch;
	--minContent: 512;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.header-title {
	color: #000;
	font-size: 56px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -1.11px;
	--minContent: 512;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.header-text-precisa {
	color: #4a5565;
	font-size: 18.44px;
	font-weight: 400;
	line-height: 1.763;
	letter-spacing: 0px;
	--minContent: 512;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.header-img {
	width: 100%;
	min-width: 0;
	flex-grow: 1;
	--minContent: 416;
	--hSizing: FILL;
	--vSizing: FIXED;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.testimonials {
	container: testimonials / inline-size;
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding: 48px 24px;
	--minContent: 1280;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.testimonials-header {
	margin: 0 40px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: center;
	--minContent: 1232;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.testimonials-subtitle {
	color: #000;
	--min-font-size: 29; --max-font-size: 48; font-size: var(--interpolate);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.95px;
	--minContent: 1152;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.testimonials-text {
	color: rgba(0, 0, 0, 0.55);
	--min-font-size: 16; --max-font-size: 20; font-size: var(--interpolate);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -0.1px;
	--minContent: 1152;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.testimonials-cards {
	margin: 0 40px;
	height: 280px;
	display: flex;
	align-items: center;
	gap: 32px;
	flex-shrink: 0;
	text-align: left;
	padding: 0 32px;
	--minContent: 1168;
	--hSizing: FILL;
	--vSizing: FIXED;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}



/* card */

.card {
	box-shadow: 0px 12px 32px 0px rgba(0, 0, 0, 0.04),0px 4px 8px 0px rgba(0, 0, 0, 0.02);
	width: 100%; height: 100%;
	min-width: 320px; max-width: 388px;
	min-height: 280px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex-grow: 1;
	background-color: #fff;
	padding: 31px 31px 95px 31px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 16px;
	overflow: hidden;
	--minContent: 320;
	--hSizing: FILL;
	--vSizing: FILL;
	--pConstraintHorizontal: MIN;
	--pConstraintVertical: CENTER;
}

.card-author {
	display: flex;
	align-items: center;
	gap: 16px;
	color: #000;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.08px;
	--minContent: 277;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.card-text1 {
	flex-grow: 1;
	--minContent: 237;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: CENTER;
}

.card-text2 {
	color: #676767;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -0.09px;
	--minContent: 277;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}
/* end card*/


.card1 .card-text2 {
	margin-right: 22px;
}

.card2 .card-text2 {
	margin-right: 75px;
}

.card3 .card-text2 {
	margin-right: 5px;
}

.hero {
	display: flex;
	align-items: flex-start;
	padding-bottom: 92px;
	--minContent: 1056;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.hero-content {
	height: 493px;
	justify-content: center;
	gap: 32px;
	flex-grow: 1;
	--minContent: 640;
	--hSizing: FILL;
	--vSizing: FIXED;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.hero-text {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-self: stretch;
	--minContent: 512;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.hero-subtitle {
	color: #000;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.95px;
	--minContent: 512;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.hero-text-quer-receber {
	color: rgba(0, 0, 0, 0.55);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -0.1px;
	--minContent: 512;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.hero-img {
	width: 100%;
	min-width: 0;
	flex-grow: 1;
	--minContent: 416;
	--hSizing: FILL;
	--vSizing: FIXED;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}

.footer {
	color: #000;
	--min-font-size: 18; --max-font-size: 24; font-size: var(--interpolate);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.48px;
	padding: 66px 64px 67px 64px;
	border-top: 1px solid rgba(0, 0, 0, 0.15);
	--minContent: 1280;
	--hSizing: FILL;
	--vSizing: HUG;
	--pConstraintHorizontal: STRETCH;
	--pConstraintVertical: MIN;
}



/** breakpoints (margin / paddings) **/

@media screen and (max-width: 1024px) {
	.testimonials {
		padding-inline: var(--margin-sm);
	}
	.testimonials-header {
		margin-inline: 0;
	}
	.testimonials-cards {
		padding-inline: 0;
		margin-inline: 0;
	}
	.card {
		padding-inline: var(--margin-sm);
	}
	.card-text2 {
		margin-inline: 0;
	}
	.footer {
		padding-inline: var(--margin-md);
	}
}

@media screen and (max-width: 576px) {
	.footer {
		padding-inline: var(--margin-sm);
	}
}



/* container queries (flex rows) */

@container body (width < 1055px) {
	.header {
		flex-direction: column;
		align-items: flex-start;
		gap: 100px;
	}
	.header > .header-content {
		width: 100%;
	}
	.header > .header-img {
		width: 100%;
	}
}

@container testimonials (width < 1167px) {
	.testimonials-cards {
		height: unset;
		flex-direction: column;
		align-items: stretch;
		gap: 35px;
	}
	.testimonials-cards > * {
		margin-left: unset !important; margin-right: unset !important;
	}
	.testimonials-cards > .card1 {
		width: 100%;
	}
	.testimonials-cards > .card2 {
		width: 100%;
	}
	.testimonials-cards > .card3 {
		width: 100%;
	}
}

@container body (width < 1055px) {
	.hero {
		flex-direction: column;
		align-items: flex-start;
		gap: 87px;
	}
	.hero > .hero-content {
		width: 100%;
	}
	.hero > .hero-img {
		width: 100%;
	}
}
