/* utility classes */
.clip-box {
	clip-path: url(#box-shape);
}

.extrabold {
	font-family: var(--zf-primary-extrabold);
}

.block {
	display: block;
}

.uppercase {
	text-transform: uppercase;
}

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

.flex.justify-start {
	justify-content: start;
}

.flex.space-between {
	justify-content: space-between;
}

.flex.flex-col {
	flex-direction: column;
}

.flex.row-reverse {
	flex-direction: row-reverse;
}

.grid {
	display: grid;
	justify-content: center;
	align-items: center;
}

.arrow {
	display: inline-flex;
	align-items: center;
}

.arrow::after {
	content: '';
	display: inline-block;
	width: 12px;
	height: 9px;
	background-image: url(/sites/zweb/images/desk/suporte-desk/seta.png);
	background-repeat: no-repeat;
	background-size: 12px 9px;
	margin-left: 10px;
}

.arrow.arrow-green::after {
	background-image: url(/sites/zweb/images/desk/suporte-desk/seta_verde.png);
}

.green-bg {
	background-color: var(--primary-clr);
	border-radius: 60px;
padding-top: 30px;
}

span.green {
	color: var(--primary-clr);
}

/* end of utility classes */

:root {
	--primary-clr: #0eca6d;
	--padding-block-size: 90px;
}

strong {
	font-family: var(--zf-primary-bold);
	color: #000;
}

h1 {
	font-family: var(--zf-primary-regular);
	text-wrap: balance;
	max-width: 800px;
	margin-inline: auto;
}

h1,
h2,
h3 {
	text-wrap: balance;
}

/* banner section */

.cta-btn{
border-radius: 30px;
}

.zwc-banner {
	position: relative;
	background-color: #fff;
	text-align: center;
	color: #fff;

	.green-bg {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	.content-wrap {
		padding-block-start: calc(var(--padding-block-size) * 0.72);
		display: grid;
		justify-items: center;
	}

	p {
		font-family: var(--zf-primary-bold);
	}

	a {
		display: inline-block;
		margin-block-end: 20px;
		z-index: 3;
	}

	img {
		vertical-align: bottom;
	}

	&::before,
	&::after {
		--right: 2.5%;
    --bottom: 0;
    --width: 379px;
    --height: 307px;
    --bg-position: -60px -52px;
		content: '';
		position: absolute;
		inset: auto var(--right) var(--bottom) auto;
		width: var(--width);
		height: var(--height);
		transform-origin: bottom right;

		background: url('/sites/oweb/images/zohobigin/lp/spritesheet.png') no-repeat;
		background-size: 2188px 359px;
		background-position: var(--bg-position);
	}

	&::before {
		--right: 2.5%;
		--bottom: 360px;
		--width: 49.5px;
		--height: 63.5px;
		--bg-position: -2050px 0;
	}
}

.zwc-mid-sect {
	text-align: center;
	padding-block: var(--padding-block-size);

	p {
		font-weight: bold;
		max-width: 1000px;
		margin-inline: auto;
		text-wrap: balance;
	}
}

.zwc-img-n-cards {
	text-align: center;

	.green-bg {
		padding-block: var(--padding-block-size);
	}

	.content-wrap {
		max-width: 90%;
	}

	.column {
		width: 50%;
	}

	.sub-flex {
                max-width: 800px;
                margin-inline: auto;
		flex-wrap: wrap;
		gap: 1rem;
		align-items: stretch;
		justify-content: center;
		margin-block-end: 20px;
	}

	.card {
		max-width: min(100%, 190px);
		position: relative;
		background-color: #cffcd7;
		border-radius: 24px;
		padding: 14px 21px;
		text-align: center;
		display: grid;
		grid-template-rows: 90px 60px 1fr;
		justify-content: center;
		align-items: center;
		gap: 0.5rem;

		&::before {
			--bg-position: -1455px 0;
			--width: 91px;
			--height: 92px;
			content: '';
			width: var(--width);
			height: var(--height);
			grid-row: 1;
			justify-self: center;

			background: url('/sites/oweb/images/zohobigin/lp/spritesheet.png') no-repeat;
			background-size: 2188px 359px;
			background-position: var(--bg-position);
		}

		h3 {
			margin-block-end: 0;
			font-size: 18px;
			font-family: var(--zf-primary-semibold);
			line-height: 1.1;
		}

		p {
			margin-block-end: 0;
			font-size: 16px;
			line-height: 1.3;
		}
	}
	.card:nth-of-type(2)::before {
		--bg-position: -1803px 0;
		--width: 79px;
		--height: 94px;
	}
	.card:nth-of-type(3)::before {
		--bg-position: -2103px 0;
		--width: 82px;
		--height: 85px;
	}
	.card:nth-of-type(4)::before {
		--bg-position: -1982px 0;
		--width: 66.6px;
		--height: 95px;
	}
	.card:nth-of-type(5)::before {
		--bg-position: -1884px 0;
		--width: 95px;
		--height: 97px;
	}

	a.act-btn {
		margin-block-end: 20px;
	}

	.no-card-info {
		font-family: var(--zf-primary-semibold);
		line-height: 1;
		color: #fff;
		font-size: 20px;
	}
}

/* end of banner */

/* left-right section */

.zwc-left-right {
	.content-wrap {
		padding-block: var(--padding-block-size);
	}

	h2 {
		text-align: center;
		max-width: 500px;
		margin-inline: auto;
		margin-block-end: 60px;
	}

	.round-box {
		background-color: rgb(13 201 107 / 10%);
		padding: 58px 93px;
		margin-block-end: 50px;
		gap: 2rem;
		border-radius: 60px;

		.info {
			width: 40%;

			p .green {
				font-family: var(--zf-primary-semibold);
			}
		}

		.img {
      --width: 134px;
      --height: 172px;
      --inset: auto -2% -2% auto;
      --bg-position: -464px 0;
			position: relative;
			width: 60%;
			text-align: center;

			
			&::after {
				content: '';
				position: absolute;
				width: var(--width);
				height: var(--height);
				inset: var(--inset);
				background-size: var(--width) var(--height);
				transform-origin: bottom right;

				background-image: url('/sites/oweb/images/zohobigin/lp/spritesheet.png');
				background-repeat: no-repeat;
				background-size: 2188px 359px;
				background-position: var(--bg-position);
			}
		}
	}

	& .round-box:nth-of-type(2) .img {
    --width: 156px;
    --height: 207px;
    --inset: auto auto 0 40%;
    --bg-position: -822px 0;
	}
	& .round-box:nth-of-type(3) .img {
		--width: 244px;
    --height: 177px;
    --bg-position: -1204px -2px;
	}
	& .round-box:nth-of-type(4) .img {
		--width: 195px;
		--height: 180px;
		--bg-position: -609px 0;
	}
}

/* end of left-right */

/* cta section */

.zwc-cta {
	.content-wrap {
		padding-block: var(--padding-block-size);
		text-align: center;
	}

	h2 {
		font-family: var(--zf-primary-semibold);
		color: #fff;
		margin-block-end: 30px;
		max-width: 800px;
		margin-inline: auto;
	}

	a {
		text-transform: uppercase;
	}
}

/* end of cta */

/* testimonial section */

.zwc-testimonial {
	text-align: center;

	.content-wrap {
		padding-block: var(--padding-block-size);
	}

	p.big {
		font-size: 1.5rem;
		max-width: 500px;
		margin-inline: auto;
		line-height: 1.1;

		.green {
			font-family: var(--zf-primary-bold);
		}
	}

	h2 {
		/* margin-block: calc(var(--padding-block-size) * 0.6)
			calc(var(--padding-block-size) * 0.8); */
		font-family: var(--zf-primary-regular);

		.green {
			font-family: var(--zf-primary-semibold);
		}
	}

	.round-box {
		--padding: 30px;
		background-color: rgb(199 199 199 / 10%);
		border-radius: 34px;
		padding: var(--padding);
		margin-block-end: calc(var(--padding-block-size) * 0.6);
		position: relative;

		> * {
			max-width: 600px;
			margin-inline: auto;
		}

		.info {
			font-style: italic;
		}

		.client {
			font-family: var(--zf-primary-semibold);
			margin-block-end: 0;
		}

		a {
			position: absolute;
			inset: auto calc(var(--padding) * 2) var(--padding) auto;

			&::after {
				content: '\2192';
				margin-inline-start: 0.5rem;
			}
		}
	}

	.flex {
		margin-block-end: calc(var(--padding-block-size) * 0.6);
		gap: 1rem;
		align-items: stretch;
		position: relative;

		&::after {
			content: '';
			width: 195.5px;
			height: 239px;
			margin-inline-start: -2%;
			transform-origin: bottom right;

			background-image: url('/sites/oweb/images/zohobigin/lp/spritesheet.png');
			background-repeat: no-repeat;
			background-size: 2188px 359px;
			background-position: -990px 0;
		}

		li {
			--bg-position: -1548px 0;
			--width: 74px;
			--height: 74px;
			background-color: rgb(14 202 109 / 10%);
			padding: 14px 21px;
			border-radius: 30px;
			width: 200px;
			font-family: var(--zf-primary-semibold);
			text-wrap: balance;
			display: grid;
			justify-items: center;
			align-items: center;
			gap: 1rem;
			line-height: 1.3;

			&::before {
				content: '';
				display: block;
				width: var(--width);
				height: var(--height);
				background-size: contain;
				background-position: center;

				background-image: url('/sites/oweb/images/zohobigin/lp/spritesheet.png');
				background-repeat: no-repeat;
				background-size: 2188px 359px;
				background-position: var(--bg-position);
			}

			span {
				max-width: 300px;
				margin-inline: auto;
			}
		}
		li:nth-of-type(2) {
			--bg-position: -1627px 0;
      --width: 77px;
      --height: 72px;
		}
		li:nth-of-type(3) {
			--bg-position: -1707px 0;
      --width: 93px;
      --height: 95px;
		}
	}

	h3 {
		max-width: 700px;
		margin-inline: auto;
	}
}

/* end of testimonial */

/* media queries section */

@media (width > 1280px) {
	h1 {
		font-size: 3rem;
	}

	.zwc-mid-sect p {
		font-size: 30px;
	}

	h2 {
		font-size: 2.5rem;
	}

	.zwc-left-right h3 {
		font-size: 2rem;
	}

	.zwc-left-right p {
		font-size: 20px;
	}


}

@media (width <= 1280px) {
	:root {
		--padding-block-size: 90px;
	}

	.zwc-banner {
		img {
			max-width: 80%;
		}

		&::before {
			bottom: 20%;
			scale: 0.6;
			z-index: 2;
		}

		&::after {
			scale: 0.6;
		}
	}

	.zwc-left-right .img::after {
		scale: 0.6;
	}

	.zwc-mid-sect p {
		font-size: 24px;
	}

	.zwc-img-n-cards {
		.main-flex.row-reverse {
			flex-direction: column;

			.column {
				width: auto;
			}

			.sub-flex {
				max-width: 650px;
			}
		}
	}

	.zwc-left-right .img::after {
		scale: 0.6;
	}

	.zwc-testimonial .flex::after {
		scale: 0.6;
		margin-inline-start: -10%;
	}
}
@media (width <= 1024px) {
	:root {
		--padding-block-size: 70px;
	}

	.green-bg {
		border-radius: 0;
	}

	.zwc-banner {
		.green-bg {
			border-top-left-radius: 0;
			border-top-right-radius: 0;
		}

		img {
			max-width: 100%;
		}

		&::after {
			scale: 0.3;
		}

		.zwc-left-right .img::after {
			scale: 0.3;
		}
	}

	.zwc-testimonial p.big {
		font-size: 18px;
	}

	.zwc-testimonial .flex::after {
		scale: 0.3;
		position: absolute;
		inset: auto 0 0 auto;
	}
}
@media (width <= 768px) {
	:root {
		--padding-block-size: 50px;
	}

	.zwc-mid-sect p {
		font-size: 20px;
	}

	.zwc-left-right {
		h2 {
			margin-block-end: 30px;
		}

		.round-box {
			margin-block-end: 20px;
			padding: 30px 20px;
			border-radius: 0;
		}

		.flex {
			flex-direction: column;
			text-align: center;

			.column {
				width: auto;
			}
		}
	}

	.zwc-testimonial {
		.round-box {
			.client {
				margin-block-end: 20px;
			}

			a {
				position: static;
			}
		}

		.flex {
			flex-direction: column;

			li {
				width: auto;
			}
		}
	}
}
@media (width <= 480px) {
	:root {
		--padding-block-size: 30px;
	}

	.zwc-img-n-cards .card {
		max-width: unset;
		width: 100%;
	}

	.zwc-mid-sect p {
		max-width: unset;
		font-size: 18px;
	}
}

/* end of media queries */

/* animation section */

@media (prefers-reduced-motion: no-preference) and (min-width: 769px) {
	.text-anim {
		transition: background-position 2s ease;
	}

	.middle-animated .text-anim {
		background-position: 0% 100%;
	}

	.slick-like .page.active::after {
		transition: background-position linear;
		transition-duration: var(--transition-duration);
	}

	.slick-like .page.active .text-wrap::after {
		transition: background-position linear;
		transition-duration: var(--transition-duration);
	}

	.middle-animated .slick-like .page.active .text-wrap::after {
		background-position: 100% 0%;
	}

	.custom-dots-wrap .slick-dots .slick-active button {
		transition: background-position var(--slick-transition) linear;
	}

	.scale-up {
		transition: scale 0.3s ease-in, opacity 0.3s ease-in;
		scale: 0.7;
		opacity: 0;
		transition-delay: var(--delay);
	}

	.middle-animated .scale-up {
		scale: 1;
		opacity: 1;
	}

	.fade-up,
	.fade-down,
	.fade-left,
	.fade-left-active,
	.tab-fade-left,
	.fade-right-active,
	.fade-right {
		transition: translate 0.6s ease-in, opacity 0.6s ease-in;
		transition-delay: var(--delay);
	}

	.fade-in {
		opacity: 0;
		transition: opacity 0.6s ease-in-out;
	}

	.middle-animated .fade-in {
		opacity: 1;
	}

	.fade-up {
		translate: 0 30px;
		opacity: 0;
	}

	.fade-down {
		translate: 0 -30px;
		opacity: 0;
	}

	.fade-left,
	.fade-left-active,
	.tab-fade-left {
		translate: 30px 0;
		opacity: 0;
	}

	.fade-right-active,
	.fade-right {
		translate: -30px 0;
		opacity: 0;
	}

	.middle-animated .active .fade-left-active,
	.middle-animated .slick-current .fade-left-active {
		translate: 0;
		opacity: 1;
	}

	.middle-animated .active .fade-right-active,
	.middle-animated .slick-current .fade-right-active {
		translate: 0;
		opacity: 1;
	}

	.middle-animated .page.selected img.tab-fade-left {
		translate: 0;
		opacity: 1;
	}

	.middle-animated .fade-up,
	.middle-animated .fade-down,
	.middle-animated .fade-left,
	.middle-animated .fade-right {
		translate: 0;
		opacity: 1;
	}

	[data-animate] {
		animation-duration: 1s;
		animation-timing-function: ease-in-out;
		animation-delay: var(--delay, 0);
		transition-delay: var(--delay, 0);
	}

	.delay-1 {
		--delay: 0.3s;
	}

	.delay-2 {
		--delay: 0.6s;
	}

	.delay-3 {
		--delay: 0.9s;
	}

	.delay-4 {
		--delay: 1.2s;
	}

	.delay-5 {
		--delay: 1.5s;
	}

	.delay-6 {
		--delay: 1.8s;
	}

	.delay-7 {
		--delay: 2.1s;
	}

	.delay-8 {
		--delay: 2.4s;
	}

	.delay-9 {
		--delay: 2.7s;
	}

	.delay-10 {
		--delay: 3s;
	}
}

/* end of animations */