:root {
	--pb: 140px;
	--filled-star: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtOCAxLjMzMyAyLjA2IDQuMTczIDQuNjA3LjY3NC0zLjMzMyAzLjI0Ni43ODYgNC41ODdMOCAxMS44NDZsLTQuMTIgMi4xNjcuNzg3LTQuNTg3TDEuMzM0IDYuMThsNC42MDYtLjY3NEw4IDEuMzMzWiIgZmlsbD0iI0Y3Qzc0OCIgc3Ryb2tlPSIjRjdDOTRBIiBzdHJva2Utd2lkdGg9IjEuMzYzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=')
		repeat-x 0 0;
	--empty-star: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtOCAxLjMzMyAyLjA2IDQuMTczIDQuNjA3LjY3NC0zLjMzMyAzLjI0Ni43ODYgNC41ODdMOCAxMS44NDZsLTQuMTIgMi4xNjcuNzg3LTQuNTg3TDEuMzM0IDYuMThsNC42MDYtLjY3NEw4IDEuMzMzWiIgc3Ryb2tlPSIjREJEQkRCIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=')
		repeat-x 0 0;
}

.zw-template-inner {
	.content-wrap {
		padding-block: var(--pb);
	}

	.sr-only {
		border: 0 !important;
		clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
		-webkit-clip-path: inset(50%) !important;
		clip-path: inset(50%) !important; /* 2 */
		height: 1px !important;
		margin: -1px !important;
		overflow: hidden !important;
		padding: 0 !important;
		position: absolute !important;
		width: 1px !important;
		white-space: nowrap !important; /* 3 */
	}

	.pertg-no {
		font-family: var(--zf-primary-bold);
	}

	.flex {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 90px;
		text-align: left;
	}

	.row-reverse {
		flex-direction: row-reverse;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-between {
		justify-content: space-evenly;
	}
.column.c2 .flex.inner-flex.align-start {
    display: block;
}
	.align-start {
		align-items: start;
	}

	.text-center {
		text-align: center;
	}

	.flow > *:not(:last-child) {
		margin-bottom: 20px;
	}

	.tag {
		background-color: #f9ba2c;
		display: inline-block;
		color: #000;
		font-family: var(--zf-primary-semibold);
		border-radius: 100vw;
		padding: 7px 10px;
		font-size: 1rem;
		line-height: 1.1;
		letter-spacing: 1px;
	}

	.card {
		margin-bottom: 0;
	}

	.block {
		display: block;
	}

	.flow > *:not(:last-child) {
		margin-bottom: 20px;
	}
}

.zwc_awards-rankings {
	background-color: #ffefef;

	h3 {
		font-size: 20px;
		font-family: var(--zf-primary-regular);
		line-height: 1.1;
		letter-spacing: 2px;
		margin-block: 10px 26px;
	}

	.rate {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		gap: 10px;
	}

	.score {
		font-size: 32px;
		line-height: 1;
		font-family: var(--zf-primary-bold);
	}

	.star-wrapper {
		background: var(--empty-star);
		width: 100px;
	}

	.star {
		background: var(--filled-star);
		height: 16px;
		max-width: 100%;
	}

	.crm .star {
		width: 96%;
	}

	.salesforce .star {
		width: 86%;
	}

	.sub-flex {
		gap: 32px;
		margin-bottom: 30px;

		.img-wrap {
			min-height: 111px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 20px;
		}
	}

	.act-btn {
		/* padding: 0;
		font-family: var(--zf-primary-semibold);
		color: #000;
		text-decoration: underline; */
	}

	.inner-flex {
		gap: 16px;

		img {
			filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.1));
		}
	}

	.card {
		background-color: #fff;
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 0 2px 2px rgb(0 0 0 / 0.1);
	}
}

.zwc_text-and-image-columns {
	background-color: rgba(30, 143, 255, 0.336);

	.content-wrap {
		padding-block: calc(var(--pb) / 2);
	}

	h2 {
		font-size: 28px;
		margin-block: 15px;
	}

	p {
		max-width: 400px;
		margin-inline: auto;
	}

	&.extra-pt .content-wrap {
		padding-top: var(--pb);
	}

	&.extra-pb .content-wrap {
		padding-bottom: var(--pb);
	}

	.flex {
		background-color: #f6fafd;
		padding: 60px;
		border-radius: 10px;
		/* max-width: max-content; */
		/* margin-inline: auto; */
		justify-content: space-between;
		gap: 20px 60px;
	}
}

.zwc_feature-list {
	background: linear-gradient(
		to bottom,
		rgba(30, 143, 255, 0.336) 50%,
		#fff 0%
	);

	.content-wrap {
		padding-block: calc(var(--pb) / 2) 0;
	}

	.flex {
		width: 100%;
		padding: 55px 30px 40px;
		box-sizing: border-box;
		box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.09);
		border-radius: 10px;
		justify-content: center;
		align-items: center;
		background: #fff;
		color: #000;
		position: relative;
		gap: 30px 60px;
	}

	li {
		list-style-type: none;
		display: block;
		padding-left: 30px;
		max-width: 500px;
		width: 100%;
		box-sizing: border-box;
		position: relative;
		font: 17px/1.6 var(--zf-primary-semibold);
		margin-bottom: 15px;
	}

	li::before {
		background-image: url('//www.zohowebstatic.com/sites/zweb/images/crm/enterprise-sprt-icns.svg');
		content: '';
		position: absolute;
		left: -10px;
		border-radius: 50%;
		background-position: -102px -49px;
		width: 20px;
		height: 18px;
		top: 5px;
	}

	.c1 {
		width: 45%;
	}

	h2 {
		font-size: 72px;
		font-family: var(--zf-primary-extrabold);
		max-width: 330px;
		margin-inline: auto;
		color: #024dc3;
	}

	.block {
		margin-top: 12px;
	}

	.light {
		font-family: var(--zf-primary-regular);
	}

	.c1 .block {
		display: block;
		font-size: 20px;
	}

	.c2 {
		position: relative;
		width: 55%;
	}

	.c2 li {
		max-width: 440px;
		margin-inline: auto;
	}

	.c2::before {
		content: '';
		height: 110%;
		position: absolute;
		left: -5%;
		width: 1px;
		background: #dcdbda;
		top: 47%;
		transform: translateY(-50%);
	}
}

@media all and (max-width: 1024px) {
	:root {
		--pb: 100px;
	}

	.zw-template-inner {
		.main-flex {
			flex-direction: column;
			align-items: center;
		}

		.main-flex .column {
			text-align: center;
		}

		:is(.main-flex, .inner-flex) .block {
			display: inline-block;
		}

		.inner-flex {
			flex-direction: column;
			align-items: center;
		}

		.zwc_text-and-image-columns .flex {
			flex-direction: column;
			align-items: center;
			text-align: left;
			padding: 40px;
		}

		.zwc_text-and-image-columns p {
			margin-inline: 0;
		}
		.zwc_text-and-image-columns .row-reverse {
			flex-direction: column;
		}

		.zwc_feature-list .flex {
			flex-direction: column;
			align-items: center;
			text-align: center;
		}

		.zwc_feature-list li {
			text-align: left;
		}
	}

	.zwc_feature-list .content-wrap {
		padding-block: calc(var(--pb) / 2) 0;
		gap: 20px;
	}

	.zwc_feature-list .column {
		width: 100%;
	}

	.zwc_feature-list h2 {
		font-size: 40px;
	}

	.zwc_feature-list .c2::before {
		display: none;
	}
}

@media screen and (max-width: 768px) {
	:root {
		--pb: 70px;
	}

	.zwc_text-and-image-columns .column {
		text-align: center;
	}
}

@media screen and (max-width: 480px) {
	.zwc_awards-rankings .sub-flex {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		margin-bottom: 1rem;
	}
}
