:root {
  --white: #ffffff;
  --black: #000000;
  --blue: #0047ff;
  --blue-light: #6691ff;
  --lightblue-bg: #F8FAFF;
  --lightblue-bg-2: #F3F7FF;
  --gray: #888888;
  --gray-light: #B5B5B5;
  --gray-bg: #F5F5F5;
  --dark-card: #262626;
  --dark-circle: #3A3A3A;
  --glossy-gray: #D1D1D1;
  --border-gray: #EBEBEB;
  --border-blue: #DBEEFF;
  --border-light: #E3E6EC;
  --sprite-icon: url("/sites/zweb/images/creator/low-code-platforms/sprite.svg") -1px -1px / 277px auto no-repeat;
  --link-arrow-icon: url("/sites/zweb/images/creator/low-code-platforms/link-arrow.svg");
}

.pagewrapper {
  --h1-font-1: 80px;
  --h2-font-1: 56px;
  --h2-font-2: 40px;
  --h3-font-1: 32px;
  --h3-font-2: 24px;
  --h3-font-3: 20px;
  --p-font-1: 20px;
  --p-font-2: 16px;
  --p-font-3: 14px;
  --a-font-1: 16px;
  --a-font-2: 14px;
  max-width: 1920px;
  margin: 0 auto
}

.pagewrapper .zwc-inline-block {
  display: inline-block
}

.pagewrapper .content-wrap {
  padding-block: 120px
}

.zwc-banner-section .content-wrap {
  padding-block-start: 80px;
  padding-block-end: 60px
}

.zwc-logos-section .content-wrap {
  padding-block: 0;
}

.pagewrapper h1,
.pagewrapper h2,
.pagewrapper h3,
.pagewrapper h4 {
  line-height: 1.1
}

.pagewrapper h1 {
  font-family: var(--zf-primary-semibold);
  font-size: var(--h1-font-1);
  letter-spacing: -1.6px;
}

.pagewrapper h2 {
  font-size: var(--h2-font-1);
  letter-spacing: -1.12px;
}

.pagewrapper p,
.pagewrapper ul li {
  font-size: var(--p-font-2);
  margin-block-end: 24px;
  letter-spacing: -0.32px
}

.pagewrapper ul li {
  line-height: 1.6
}

.pagewrapper p a {
  color: var(--zwc-link-clr)
}

.pagewrapper img {
  vertical-align: top
}

.zwc-flx-cnt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}

.zwc-flx-cnt-cntralign {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.zwc-flx-cnt-topalign {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.zwc-flex-one-col {
  width: 100%
}

.zwc-flex-two-col {
  width: 50%
}

.zwc-flex-three-col {
  width: 33.33%
}

.zwc-flex-row-reverse-lg {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse
}

[class|="zwc-sprite"] {
  display: inline-block;
  background: var(--sprite-icon);
  width: 30px;
  height: 30px;
  letter-spacing: -40px
}

[class|="zwc-sprite-feaicon"] {
  margin-block-end: 20px
}

.zwc-sprite-feaicon-2 {
  background-position: -42px -3px;
  width: 18px;
  height: 26px;
}

.zwc-sprite-feaicon-3 {
  background-position: -74px -1px;
  width: 24px;
  height: 30px;
}

.zwc-sprite-feaicon-4 {
  background-position: -112px -1px;
  width: 18px;
  height: 30px;
}

.zwc-sprite-feaicon-5 {
  background-position: -145px -1px;
  width: 22px;
  height: 30px;
}

.zwc-sprite-feaicon-6 {
  background-position: -177px -1px;
  width: 28px;
  height: 30px;
}

.zwc-sprite-feaicon-7 {
  background-position: -214px -4px;
  width: 24px;
  height: 24px;
}

.zwc-sprite-feaicon-8 {
  background-position: -252px -1px;
  width: 18px;
  height: 30px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.product-nav-links .nav>li>a:focus-visible,
.common-links ul li a:focus-visible,
.ZF-support ul li.zf-support-mail a:focus-visible {
  outline: 2px solid var(--blue);
  box-shadow: none
}

.zwc-cta-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 15px;
  margin-block-start: 30px
}

[class|="zwc-cta-btn"],
.zwc-watch-video-btn {
  position: relative;
  z-index: 1;
  display: inline-block;
  text-align: center;
  font-family: var(--zf-primary-semibold);
  font-size: var(--a-font-1);
  border-radius: 4px;
  padding: 16px 60px 16px 24px;
  cursor: pointer;
  text-transform: uppercase;
  color: var(--white);
  -webkit-transition: all ease .3s;
  transition: all ease .3s;
  opacity: 1;
  visibility: visible;
  line-height: normal;
  border: 1px solid transparent;
  margin: 0
}

:is(.zw-other-lang, .other-lang) [class|="zwc-cta-btn"],
:is(.zw-other-lang, .other-lang) .zwc-watch-video-btn {
  font-size: var(--a-font-2)
}

[class|="zwc-cta-btn"]:after {
  content: "";
  background: var(--link-arrow-icon) 0 0 / 10px auto no-repeat;
  display: block;
  width: 16px;
  height: 16px;
  right: 28px;
  top: calc(50% - 8px);
  position: absolute;
  z-index: 1;
  -webkit-transition: all ease .3s;
  transition: all ease .3s;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

[class|="zwc-cta-btn"]:hover:after {
  right: 23px
}

.zwc-cta-btn-demo {
  background: var(--white);
  color: var(--black);
}

.zwc-cta-btn-demo:after {
  -webkit-filter: brightness(0) invert(0);
  filter: brightness(0) invert(0)
}

.zwc-learn-btn {
  position: relative;
  font-family: var(--zf-primary-semibold);
  font-size: var(--a-font-1);
  padding-inline-end: 35px;
  display: inline-block;
  color: var(--zwc-link-clr);
  margin: 0
}

.zwc-learn-btn:after {
  content: '';
  background: var(--link-arrow-icon) 0 0 / 15px auto no-repeat;
  display: block;
  width: 15px;
  height: 15px;
  right: 10px;
  top: calc(50% - 4px);
  position: absolute;
  z-index: 1;
  -webkit-transition: all ease .3s;
  transition: all ease .3s;
  -webkit-transform: translateX(0);
  transform: translateX(0)
}

.zwc-learn-btn:hover:after {
  right: 5px
}

.zwc-learn-bdr-btn {
  position: relative;
  font-size: var(--a-font-1);
  letter-spacing: -0.32px;
  font-family: var(--zf-primary-semibold);
  color: var(--zwc-link-clr);
  border-radius: 4px;
  border: 2px solid var(--zwc-link-clr);
  padding: 10px 50px 10px 20px;
  display: inline-block
}

.zwc-learn-bdr-btn:after {
  content: '';
  background: var(--link-arrow-icon) 0 0 / 15px auto no-repeat;
  display: block;
  width: 15px;
  height: 15px;
  right: 20px;
  top: calc(50% - 6px);
  position: absolute;
  z-index: 1;
  -webkit-transition: all ease .3s;
  transition: all ease .3s;
  -webkit-transform: translateX(0);
  transform: translateX(0)
}

.zwc-learn-bdr-btn:hover:after {
  right: 15px
}

.zwc-watch-video-btn {
  background: transparent;
  border-color: transparent;
  color: var(--zwc-link-clr);
  padding: 12px 45px 12px 0
}

.zwc-watch-video-btn:before,
.zwc-watch-video-btn:after {
  position: absolute;
  content: ''
}

.zwc-watch-video-btn:before {
  background: var(--zwc-link-clr);
  width: 30px;
  height: 30px;
  top: calc(50% - 16px);
  right: 0;
  border-radius: 100%
}

.zwc-watch-video-btn:after {
  border-left: 9px solid var(--white);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  top: calc(50% - 7px);
  right: 9px
}

.zwc-vid-ply-icon {
  background: transparent;
  border-color: transparent;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: var(--dark-circle);
  border-radius: 25px;
  color: var(--white);
  padding: 12px 20px 10px 53px;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: var(--zf-primary-semibold);
  font-size: 16px
}

.zwc-vid-ply-icon {
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  background: #3d3d3d;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation: ripple 1.2s linear infinite;
  animation: ripple 1.2s linear infinite;
  cursor: pointer;
  z-index: 2
}

.zwc-vid-ply-icon:before {
  content: "";
  position: absolute;
  border-color: transparent transparent transparent var(--white);
  border-style: solid;
  border-width: 8px 0 8px 12px;
  height: 0;
  left: calc(50% - 4px);
  top: calc(50% - 6px);
  width: 0
}

.zwc-watch-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: var(--dark-circle);
  border-radius: 25px;
  color: var(--white);
  padding: 12px 20px 12px 53px;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: var(--zf-primary-semibold);
  font-size: 16px;
  border: 0
}

.i18n-ar .zwc-watch-btn {
  padding: 12px 53px 10px 20px
}

.zwc-watch-btn:after,
.zwc-watch-btn:before {
  position: absolute;
  content: ""
}

.zwc-watch-btn:before {
  left: 15px;
  top: 9px;
  width: 26px;
  height: 26px;
  border: 1px solid red;
  box-sizing: border-box;
  border-radius: 100%;
  background: red
}

.i18n-ar .zwc-watch-btn:before {
  right: 15px;
  left: inherit
}

.zwc-watch-btn:after {
  left: 25px;
  top: 16px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--white)
}

.i18n-ar .zwc-watch-btn:after {
  right: 23px;
  left: inherit
}

.zwc-tag {
  display: inline-block;
  font-family: var(--zf-primary-semibold);
  font-size: var(--p-font-3);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue);
  line-height: 1.4;
  margin-block-end: 10px;
}

.zwc-tag span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue);
  display: inline-block;
  vertical-align: center;
  margin-inline-end: 5px;
}

.zwc-highlight-txt {
  color: var(--blue);
}

/****** Banner Section ******/
.zwc-banner-section .zwc-banner-content {
  max-width: 1009px;
  margin-inline: auto;
  text-align: center;
}

.zwc-banner-section .zwc-banner-content h1 {
  max-width: 760px;
  margin-inline: auto;
}

.zwc-banner-section .zwc-banner-content p {
  font-size: var(--p-font-1);
  color: var(--black);
}

.zwc-banner-section .zwc-cta-wrap {
  justify-content: center;
}

/****** Banner Section ******/
/****** Logo Section ******/
.zwc-logos-section {
  position: relative;
}

.zwc-logos-section::before {
  content: '';
  background: var(--blue);
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 50%;
}

.zwc-logos-section .zwc-logos-wrap {
  max-width: 1000px;
  margin-inline: auto;
  background: var(--white);
  border: 1px solid var(--border-blue);
  border-radius: 8px;
  box-shadow: 0 40px 80px -16px rgba(0, 0, 0, 0.16);
  padding: clamp(25px, 3.5vw, 40px);
}

.zwc-logos-section .zwc-logos-list {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  gap: 15px 50px;
  counter-reset: tool-counter
}

.zwc-logos-section .zwc-logos-list li {
  counter-increment: tool-counter;
  position: relative;
  margin-block-end: unset;
  /* padding-inline-start: 20px; */
}

.zwc-logos-section .zwc-logos-list li button {
  font-family: var(--zf-primary-medium);
  font-size: var(--p-font-1);
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 10px 40px;
  border: 1px solid var(--border-light);
  background: var(--white);
  color: var(--black);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease
}

.zwc-logos-section .zwc-logos-list li button:hover,
.zwc-logos-section .zwc-logos-list li button.zwc-active {
  border-color: var(--blue);
  box-shadow: 0 24px 48px -8px rgba(0, 0, 0, 0.25)
}

/* .zwc-logos-section .zwc-logos-list li button::before {
content: counter(tool-counter, decimal-leading-zero);
width: 40px;
height: 40px;
font-size: 16px;
font-family: var(--zf-primary-medium);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 0px;
z-index: 1;
transform: translateY(-50%);
background: var(--white);
border: 1px solid var(--border-light);
border-radius: 50%
} */

.zwc-logos-section .zwc-logos-list li button:hover::before {
  border-color: var(--blue)
}

.zwc-logos-section .zwc-logos-list li img {
  height: 48px;
  border-radius: 4px;
  object-fit: contain;
  flex-shrink: 0
}

/****** Logo Section ******/
/****** intro Section ******/
.zwc-intro-section {
  background: var(--blue);
  color: var(--white);
}

.zwc-intro-section .zwc-intro-wrap {
  gap: 40px 120px;
}

.zwc-intro-section .zwc-intro-img {
  width: calc(47% - 60px);
}

.zwc-intro-section .zwc-intro-txt {
  width: calc(53% - 60px);
}

.zwc-intro-section .zwc-tag {
  color: #FFDB1E;
}

.zwc-intro-section p {
  font-size: var(--p-font-1);
  line-height: 1.5;
  letter-spacing: -0.4px;
  margin-block-end: 20px;
}

.zwc-intro-section p:last-child {
  margin-block-end: 0;
}

/****** intro Section ******/
/****** landscape Section ******/
.zwc-landscape-section .zwc-landscape-wrap {
  max-width: 1080px;
  margin-inline: auto;
  gap: 30px 120px;
}

.zwc-landscape-section .zwc-landscape-title {
  position: relative;
  width: calc(40% - 60px);
}

.zwc-landscape-section .zwc-landscape-title div {
  position: sticky;
  top: 90px
}

.zwc-landscape-section .zwc-landscape-txt {
  width: calc(60% - 60px);
}

.zwc-landscape-section p {
  font-size: var(--p-font-1);
  line-height: 1.5;
  letter-spacing: -0.4px;
  margin-block-end: 20px;
}

.zwc-landscape-section p:last-child {
  margin-block-end: 0;
}

/****** landscape Section ******/
/****** methodology Section ******/
.zwc-methodology-section {
  background: var(--lightblue-bg);
}

.zwc-methodology-section .zwc-methodology-head {
  max-width: 550px;
  margin-block-end: 40px;
}

.zwc-methodology-section .slick-list {
  padding-block-end: 20px;
  margin: 0 -10px
}

.zwc-methodology-section .slick-track {
  display: flex;
}

.zwc-methodology-section .slick-slide {
  height: inherit;
}

.zwc-methodology-section .zwc-methodology-box {
  border-radius: 8px;
  background: var(--white);
  margin: 0 10px;
  padding: 30px 25px
}

.zwc-methodology-section .zwc-methodology-box p:last-child {
  margin-block-end: unset;
}

.zwc-methodology-section .slick-arrow {
  position: absolute;
  top: -60px;
  width: 48px;
  height: 48px;
  background: transparent;
  border-radius: 50px;
  border: 1px solid var(--gray);
}

.zwc-methodology-section .slick-arrow:after,
.zwc-methodology-section .slick-arrow:before {
  background: var(--gray);
  transition: unset;
  height: 13px;
}

.zwc-methodology-section .slick-arrow:hover {
  background: var(--black)
}

.zwc-methodology-section .slick-arrow:hover:after,
.zwc-methodology-section .slick-arrow:hover:before {
  display: inline-block;
  background: var(--white)
}

.zwc-methodology-section .slick-prev {
  left: inherit;
  right: 60px;
}

.zwc-methodology-section .slick-prev:before {
  top: 12px;
  left: 21px
}

.zwc-methodology-section .slick-prev:after {
  bottom: 12px;
  left: 21px
}

.zwc-methodology-section .slick-next:before {
  top: 12px;
  right: 21px
}

.zwc-methodology-section .slick-next:after {
  bottom: 12px;
  right: 21px
}

/****** methodology Section ******/
/****** comparison Section ******/
.zwc-comparison-section .zwc-comparison-title {
  text-align: center;
  margin-block-end: 40px;
}

.zwc-comparison-section .zwc-comparison-title h2 {
  max-width: 700px;
  margin-inline: auto;
}

.zwc-comparison-section .zwc-compare-table-wrap {
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--glossy-gray);
  max-width: 100%;
}

.zwc-comparison-section .zwc-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--white);
  min-width: 760px;
  table-layout: fixed;
}

.zwc-comparison-section .zwc-compare-table thead th {
  font-family: var(--zf-primary-semibold);
  position: -webkit-sticky;
  position: sticky;
  top: 65px;
  z-index: 2;
  background: var(--gray-bg);
}

.zwc-comparison-section .zwc-compare-table :is(th, td) {
  border-right: 1px solid var(--border-gray);
  border-top: 1px solid var(--border-gray);
  text-align: center;
  vertical-align: middle;
  padding: 18px 10px;
  font-size: var(--p-font-2);
  line-height: 1.3;
  letter-spacing: -0.32px;
  width: 100px;
}

.zwc-comparison-section .zwc-compare-table :is(th, td):last-child {
  border-right: unset;
}

.zwc-comparison-section .zwc-compare-table thead th:first-child,
.zwc-comparison-section .zwc-compare-table tbody td:first-child {
  text-align: left;
  background: var(--white);
  width: 150px;
}

.zwc-comparison-section .zwc-compare-table thead th:nth-child(2) {
  background: var(--blue);
  color: var(--white);
}

.zwc-comparison-section .zwc-compare-table tbody td:nth-child(2) {
  background: var(--lightblue-bg);
}

.zwc-comparison-section .zwc-compare-table tbody tr:nth-child(even) {
  background: #FAFAFA;
}

.zwc-comparison-section .zwc-compare-table tbody .zwc-tick,
.zwc-comparison-section .zwc-compare-table tbody .zwc-dash {
  position: relative;
}

.zwc-comparison-section .zwc-compare-table tbody .zwc-tick:before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #17984C;
  vertical-align: middle;
}

.zwc-comparison-section .zwc-compare-table tbody .zwc-tick:after {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  left: calc(50% - 4px);
  width: 5px;
  height: 9px;
  border-right: 1.5px solid #17984C;
  border-bottom: 1.5px solid #17984C;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.zwc-comparison-section .zwc-compare-table tbody .zwc-dash:before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #EC4848;
  vertical-align: middle;
}

.zwc-comparison-section .zwc-compare-table tbody .zwc-dash:after {
  content: "";
  position: absolute;
  top: calc(50% - 0px);
  left: calc(50% - 6px);
  width: 9px;
  height: 2px;
  background: #EC4848;
}

.zwc-comparison-section .zdisclaimer-txt {
  margin-block-start: 25px;
}

.zwc-comparison-section .zdisclaimer-txt p {
  font-size: var(--p-font-3);
  margin-block-end: 0
}

.zwc-comparison-section .zdisclaimer-txt b {
  font-family: var(--zf-secondary-semibold)
}

/****** comparison Section ******/
/****** platforms Section ******/
.zwc-platforms-section {
  background: var(--gray-bg);
}

.zwc-platforms-section .zwc-platforms-title {
  text-align: center;
  max-width: 850px;
  margin-inline: auto;
}

.zwc-platforms-section .zwc-platforms-title p {
  font-size: var(--p-font-1);
  line-height: 1.4;
  letter-spacing: -0.4px;
}

.zwc-platforms-section .zwc-platforms-body {
  gap: 26px;
  margin-block-start: 50px;
}

.zwc-platforms-section .zwc-platforms-nav {
  flex-shrink: 0;
  position: -webkit-sticky;
  position: sticky;
  top: 80px;
  align-self: flex-start;
  width: calc(25% - 13px);
}

.zwc-platforms-section .zwc-platforms-content {
  width: calc(75% - 13px);
}

.zwc-platforms-section .zwc-platforms-nav-inner {
  min-height: 250px;
  overflow-y: auto;
  border-radius: 12px;
  padding: 18px;
  margin-block-end: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  scrollbar-width: thin;
  scrollbar-color: #d8d8d8 transparent;
  background: var(--white);
}

.zwc-platforms-section .zwc-platforms-nav-inner button {
  position: relative;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  cursor: pointer;
  background: var(--white);
  color: var(--block);
  font-family: var(--zf-primary-regular);
  font-size: var(--a-font-2);
  letter-spacing: -0.14px;
  text-align: left;
  border: 1px solid var(--border-light);
  min-height: 45px;
}

.zwc-platforms-section .zwc-platforms-nav-inner button:not(:last-child) {
  margin-block-end: 13px;
}

.zwc-platforms-section .zwc-platforms-nav-inner button img {
  width: 40px;
  height: 24px;
}

.zwc-platforms-section .zwc-platforms-nav-inner button span {
  text-align: left;
}

.zwc-platforms-section .zwc-platforms-nav-inner button:hover,
.zwc-platforms-section .zwc-platforms-nav-inner button.zwc-active {
  border-color: var(--blue);
  box-shadow: 0 24px 48px -8px rgba(0, 0, 0, 0.25)
}

.zwc-platforms-section .zwc-platforms-nav-inner button.zwc-active::before {
  content: '';
  position: absolute;
  top: calc(50% - 12px);
  left: 0;
  width: 3px;
  height: 24px;
  border-radius: 8px;
  background: #336DFF;
}

.zwc-platforms-section .zwc-platforms-nav .zwc-nav-cta {
  position: relative;
  background: var(--blue);
  color: var(--white);
  padding: 30px 15px;
  border-radius: 8px;
  border: 1px solid #A0A0A0;
  text-align: center;
}

.zwc-platforms-section .zwc-platforms-nav .zwc-nav-cta h2 {
  position: relative;
  font-size: var(--h3-font-2);
  line-height: 1.2;
  margin-block-end: 20px;
}

/* --- Platform card --- */
.zwc-platforms-section .zwc-platforms-content .zwc-platform-card {
  border-radius: 12px;
  background: var(--white);
  padding: clamp(25px, 3.5vw, 40px);
}

.zwc-platforms-section .zwc-platforms-content .zwc-platform-card:not(:last-child) {
  margin-block-end: clamp(40px, 3.5vw, 60px);
}

.zwc-platforms-section .zwc-platform-card-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 25px;
  border-bottom: 1px solid var(--glossy-gray);
  padding-block-end: 30px;
  margin-block-end: 32px;
}

.zwc-platforms-section .zwc-platform-card-head h2 {
  font-size: var(--h2-font-2);
  margin-block-end: unset;
}

.zwc-platforms-section .zwc-platform-card-head .zwc-platform-logo {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 4px 4px 0 #CCDAFF;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.zwc-platforms-section .zwc-platform-card-head .zwc-platform-logo img {
  max-width: 50px;
  max-height: 50px;
  width: auto;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

.zwc-platforms-section .zwc-platform-card-body {
  gap: 22px;
}

.zwc-platforms-section .zwc-platform-main {
  width: calc(57% - 11px);
}

.zwc-platforms-section .zwc-platform-side {
  width: calc(43% - 11px);
}

.zwc-platforms-section .zwc-platform-main h3 {
  font-size: var(--h3-font-1);
}

.zwc-platforms-section .zwc-platform-main h3:not(:first-child) {
  margin-block-start: 40px;
}

.zwc-platforms-section .zwc-platform-main p {
  font-size: var(--p-font-2);
  line-height: 1.5;
}

/*.zwc-platforms-section .zwc-platform-main p:last-child {
  margin-block-end: 0;
}*/

.zwc-platforms-section .zwc-platform-main .zwc-points, 
.zwc-platforms-section .zwc-platform-main .zwc-points ul {
  list-style: disc;
  padding-inline-start: 25px;
}

.zwc-platforms-section .zwc-platform-main .zwc-points li {
  margin-block-end: 15px;
}

.zwc-platforms-section .zwc-platform-main .zwc-points ul {
  margin-block-start: 15px;
}

.zwc-platforms-section .zwc-card-box {
  padding: 25px;
  border-radius: 8px;
  border: 1px solid var(--blue-light);
}

.zwc-platforms-section .zwc-card-box:not(:last-child) {
  margin-block-end: 22px;
}

/* Strengths (check) & Weaknesses (cross) lists */
.zwc-platforms-section .zwc-point-list li,
.zwc-platforms-section .zwc-cross-list li {
  position: relative;
  padding-inline-start: 28px;
  margin-block-end: 16px;
  font-family: var(--zf-primary-regular);
  font-size: var(--p-font-2);
  line-height: 1.4;
  letter-spacing: -0.24px;
}

.zwc-platforms-section .zwc-point-list li:last-child,
.zwc-platforms-section .zwc-cross-list li:last-child {
  margin-block-end: 0;
}

.zwc-platforms-section .zwc-point-list li:before,
.zwc-platforms-section .zwc-cross-list li:before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 0;
  top: 2px;
  border-radius: 50%;
  border: 2px solid var(--blue);
}

.zwc-platforms-section .zwc-cross-list li:before {
  border-color: var(--black);
}

.zwc-platforms-section .zwc-point-list li:after {
  content: "";
  position: absolute;
  top: 8px;
  left: 5px;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.zwc-platforms-section .zwc-cross-list li:after {
  content: "\00d7";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  color: var(--black);
  font-family: var(--zf-primary-semibold);
  font-size: 14px;
}

/* Pricing */

.zwc-platforms-section .zwc-pricing-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-block-end: 15px;
}

.zwc-platforms-section .zwc-card-box .zwc-pricing-head h3 {
  margin-block-end: 0;
}

.zwc-platforms-section .zwc-platform-pricing {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: var(--white);
  border-radius: 22px;
  /*! padding: 3px; */
  border: 1px solid var(--blue);
}

.zwc-platforms-section .zwc-platform-pricing button {
  border: 0;
  background: transparent;
  padding: 6px 14px;
  font-family: var(--zf-primary-medium);
  font-size: var(--p-font-3);
  color: var(--black);
  cursor: pointer;
}

.zwc-platforms-section .zwc-platform-pricing button.zwc-active {
  background: var(--blue);
  color: var(--white);
}

.zwc-platforms-section .zwc-platform-pricing button.zwc-pricemonthly.zwc-active {
  border-radius: 20px 0px 0px 20px;
}

.zwc-platforms-section .zwc-platform-pricing button.zwc-priceannually.zwc-active {
  border-radius: 0px 20px 20px 0px;
}

.zwc-platforms-section .zwc-pricing-list:not(.zwc-active) {
  display: none;
}

.zwc-platforms-section .zwc-pricing-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 15px;
  padding-block-end: 10px;
  margin-block-end: 10px;
  border-bottom: 1px solid #9AB6FF;
}

.zwc-platforms-section .zwc-pricing-list li:last-child {
  border-bottom: unset;
  padding-block-end: unset;
  margin-block-end: unset;
}

.zwc-platforms-section .zwc-pricing-list li span.zwc-price-val {
  font-family: var(--zf-primary-semibold);
  white-space: nowrap;
}

.zwc-platforms-section .zwc-pricing-list .zwc-smltxt {
  display: block;
  font-size: var(--p-font-3);
}

.zwc-platforms-section .zwc-pricing-note p a {
  font-family: var(--zf-primary-semibold);
}

.zwc-platforms-section .zwc-card-box h3 {
  margin-block-end: 18px;
}

.zwc-platforms-section .zwc-card-box.zwc-pricing,
.zwc-platforms-section .zwc-card-box.zwc-choose-box {
  background: var(--lightblue-bg-2);
}

/* .zwc-platforms-section .zwc-card-box.zwc-choose-box {
  margin-block-start: 30px;
  padding: clamp(25px, 3.5vw, 40px);
} */
/****** platforms Section ******/
/****** Summary Section ******/
.zwc-summary-section .zwc-summary-title {
  text-align: center;
  margin-block-end: 40px;
}

.zwc-summary-section .zwc-summary-block {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.zwc-summary-section .zwc-summary-box {
  border: 1px solid var(--border-gray);
  border-radius: 12px;
  padding: 28px;
}

.zwc-summary-section .zwc-summary-box h3 {
  font-size: var(--h3-font-2);
  letter-spacing: -0.48px;
  line-height: 1.25;
  margin-block-end: 10px;
}

.zwc-summary-section .zwc-summary-box p {
  font-size: var(--p-font-2);
  line-height: 1.5;
  letter-spacing: -0.24px;
}

.zwc-summary-section .zwc-summary-box p:last-child {
  margin-block-end: unset;
}

.zwc-summary-section .zwc-summary-box-highlight {
  grid-column: 1 / -1;
  border: 1px solid var(--blue-light);
  background: var(--lightblue-bg-2);
}

/****** Summary Section ******/
/****** FAQ Section ******/
.zwc-faq-section {
  background: var(--black);
  color: var(--white)
}

.zwc-faq-section .zwc-faq-block {
  gap: 30px
}

.zwc-faq-section .zwc-faq-heading,
.zwc-faq-section .zwc-faq-item,
.zwc-faq-section .zwc-faq-cnt h3,
.zwc-faq-section .zwc-faq-cnt h3 button {
  position: relative
}

.zwc-faq-section .zwc-faq-heading {
  width: calc(45% - 15px)
}

.zwc-faq-section .zwc-faq-heading div {
  position: sticky;
  top: 90px
}

.zwc-faq-section .zwc-faq-heading h2 {
  color: var(--white)
}

.zwc-faq-section .zwc-faq-heading a {
  margin-block-start: 24px
}

.zwc-faq-section .zwc-faq-cnt {
  width: calc(55% - 15px)
}

.zwc-faq-section .zwc-faq-item {
  margin-block-end: 16px;
  background: var(--dark-card)
}

.zwc-faq-section .zwc-faq-item:last-child {
  margin-block-end: 0
}

.zwc-faq-section .zwc-faq-item.zwc-active h3 span:after {
  display: none
}

.zwc-faq-section .zwc-faq-cnt h3 {
  margin-block-end: 0;
  z-index: 2;
  color: var(--glossy-gray)
}

.zwc-faq-section .zwc-faq-cnt h3 button {
  font-family: var(--zf-primary-semibold);
  font-size: var(--h3-font-3);
  line-height: 1.5;
  letter-spacing: -0.4px;
  margin-block-end: 0;
  cursor: pointer;
  padding: 24px 56px 24px 24px;
  background: transparent;
  border: inherit;
  width: 100%;
  text-align: left;
  z-index: 2;
  color: var(--glossy-gray)
}

.zwc-faq-section .zwc-faq-cnt h3 span,
.zwc-faq-section .zwc-faq-cnt h3 span:before,
.zwc-faq-section .zwc-faq-cnt h3 span:after {
  content: "";
  position: absolute;
  cursor: pointer
}

.zwc-faq-section .zwc-faq-cnt h3 span {
  right: 26px;
  top: 26px;
  z-index: 1;
  width: 24px;
  height: 24px;
  background-color: var(--white);
  border-radius: 100px
}

.zwc-faq-section .zwc-faq-cnt h3 span:before,
.zwc-faq-section .zwc-faq-cnt h3 span:after {
  background: var(--black);
  z-index: 2;
  border-radius: 8px
}

.zwc-faq-section .zwc-faq-cnt h3 span:before,
.zwc-faq-section .zwc-faq-cnt h3 span:after {
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

.zwc-faq-section .zwc-faq-cnt h3 span:before {
  height: 2px;
  width: 14px
}

.zwc-faq-section .zwc-faq-cnt h3 span:after {
  width: 2px;
  height: 14px
}

.zwc-faq-section .zwc-faq-ans {
  display: none;
  padding: 0 24px 24px
}

.zwc-faq-section .zwc-faq-item:first-child .zwc-faq-ans {
  display: block
}

.zwc-faq-section .zwc-faq-ans p,
.zwc-faq-section .zwc-faq-ans li {
  max-width: 660px;
  color: var(--glossy-gray)
}

.zwc-faq-section .zwc-faq-ans p:last-child,
.zwc-faq-section .zwc-faq-ans li:last-child {
  margin-block-end: 0;
}

.zwc-faq-section .zwc-faq-ans a {
  color: var(--zwc-link-clr-dark);
}

.zwc-faq-section .zwc-faq-ans ul,
.zwc-faq-section .zwc-faq-ans ol {
  margin-block-start: 20px;
  padding-inline-start: 35px
}

.zwc-faq-section .zwc-faq-ans ul {
  list-style: disc
}

.zwc-faq-section .zwc-faq-ans ol {
  list-style: decimal
}

.zwc-faq-section .zwc-faq-ans li:not(:last-child) {
  margin-block-end: 10px
}

.zwc-faq-section .zwc-faq-ans a {
  color: var(--white);
  text-decoration: underline
}

/* ================= RESPONSIVE ================= */
@media screen and (max-width: 1280px) {
  .pagewrapper {
    --h1-font-1: 64px;
    --h2-font-1: 40px;
    --h2-font-2: 32px;
    --h3-font-1: 24px;
  }

}

@media screen and (max-width:1024px) {

  .zwc-logos-section .zwc-logos-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 30px;
  }

  .zwc-logos-section .zwc-logos-list li button {
    padding: 10px 30px 10px 35px
  }

  [class|="zwc-sprite-feaicon"] {
    -webkit-transform: scale(0.8) translate(-12%, -12%);
    transform: scale(0.8) translate(-12%, -12%);
    margin-block-end: 10px
  }

  .zwc-intro-section .zwc-intro-wrap {
    gap: 40px 60px;
  }

  .zwc-intro-section .zwc-intro-img {
    width: calc(47% - 30px);
  }

  .zwc-intro-section .zwc-intro-txt {
    width: calc(53% - 30px);
  }
}

@media screen and (max-width: 1199px) {
  .pagewrapper {
    --h1-font-1: 56px;
    --h2-font-1: 40px
  }

  .pagewrapper .content-wrap {
    padding-block: 80px
  }

  .zwc-banner-section .content-wrap {
    padding-block-start: 40px;
    padding-block-end: 30px
  }

  .zwc-logos-section .content-wrap {
    padding-block: 0;
  }

  .zwc-banner-section .zwc-banner-content h1 {
    max-width: 600px;
  }

  .zwc-platforms-section .zwc-platforms-nav {
    display: none;
  }

  .zwc-platforms-section .zwc-platforms-nav,
  .zwc-platforms-section .zwc-platforms-content,
  .zwc-platforms-section .zwc-platform-main,
  .zwc-platforms-section .zwc-platform-side {
    width: 100%;
  }

  .zwc-comparison-section .zwc-compare-table-wrap {
    overflow-x: auto;
  }

  .zwc-comparison-section .zwc-compare-table thead th {
    position: static;
  }

  .zwc-comparison-section .zwc-compare-table :is(th, td) {
    width: 130px
  }
}

@media only screen and (max-width: 991px) {
  .pagewrapper {
    --h1-font-1: 48px;
    --h2-font-1: 32px;
    --h2-font-2: 24px
  }


  .zwc-logos-section .zwc-logos-list li img {
    max-width: 36px;
  }

  .zwc-logos-section .zwc-logos-list li button {
    padding: 8px 30px
  }

  .zwc-logos-section .zwc-logos-list li button::before {
    width: 35px;
    height: 35px;
    left: -18px
  }

  .zwc-intro-section .zwc-intro-wrap {
    flex-direction: column-reverse;
    align-items: unset;
  }

  .zwc-intro-section .zwc-intro-img,
  .zwc-intro-section .zwc-intro-txt,
  .zwc-landscape-section .zwc-landscape-title,
  .zwc-landscape-section .zwc-landscape-txt {
    width: 100%;
  }

  .zwc-intro-section .zwc-intro-img {
    max-width: 420px;
  }

  .zwc-summary-section .zwc-summary-block {
    grid-template-columns: repeat(2, 1fr);
  }

  .zwc-faq-section .zwc-faq-heading,
  .zwc-faq-section .zwc-faq-cnt {
    width: 100%
  }

  .zwc-faq-section .zwc-faq-heading div {
    position: static;
    top: 0
  }
}

@media only screen and (max-width: 767px) {
  .pagewrapper {
    --h1-font-1: 40px;
    --h2-font-1: 40px;
    --h3-font-1: 24px;
    --h3-font-2: 20px;
    --h3-font-3: 16px;
    --p-font-1: 16px;
  }

  .pagewrapper .content-wrap {
    padding-block: 60px;
  }

  .zwc-logos-section .zwc-logos-list {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    max-width: unset;
  }

  .zwc-banner-section .content-wrap {
    padding-block-start: 40px;
    padding-block-end: 30px
  }

  .zwc-logos-section .content-wrap {
    padding-block: 0;
  }

  .pagewrapper h2,
  .pagewrapper h3,
  .pagewrapper h4 {
    line-height: 1.25
  }

  .pagewrapper ul li {
    line-height: 1.8
  }

  .pagewrapper .zwc-cta-wrap,
  :is(.zwc-banner-section, .zwc-bottom-cta-section) .zwc-cta-wrap {
    -webkit-box-pack: unset;
    -ms-flex-pack: unset;
    justify-content: unset
  }

  [class|="zwc-sprite-feaicon"] {
    margin-block-end: 0
  }

  .zwc-watch-btn {
    font-size: 0;
    text-indent: -9999px;
    padding: 0;
    background: var(--black);
    position: absolute;
    left: 50%;
    top: 50%;
    margin: auto;
    width: 44px;
    height: 44px;
    border-radius: 25px;
    cursor: pointer
  }

  .zwc-watch-btn:before {
    position: absolute;
    content: "";
    width: 42px;
    height: 42px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: var(--black);
    border-color: var(--black);
    -webkit-animation: wave 2s forwards infinite;
    animation: wave 2s forwards infinite;
    border-radius: 100%
  }

  .zwc-watch-btn:after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 13px solid var(--white);
    margin: auto
  }

  .zwc-banner-section .zwc-banner-content,
  .zwc-banner-section .zwc-banner-content h1,
  .zwc-methodology-section .zwc-methodology-head {
    max-width: unset;
    margin-inline: unset;
  }

  .zwc-banner-section .zwc-banner-content,
  .zwc-summary-section .zwc-summary-title,
  .zwc-platforms-section .zwc-platforms-title,
  .zwc-comparison-section .zwc-comparison-title {
    text-align: unset;
  }

  .zwc-methodology-section .zwc-methodology-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 20px;
  }

  .zwc-methodology-section .zwc-methodology-box {
    width: calc(50% - 10px);
    margin: 0;
  }

  .zwc-platforms-section .zwc-platforms-body {
    margin-block-start: unset;
  }

  .zwc-summary-section .zwc-summary-block {
    grid-template-columns: 1fr;
  }

  .zwc-summary-section .zwc-summary-box-highlight {
    grid-column: auto;
  }
}


@media only screen and (max-width: 480px) {
  .zwc-logos-section .zwc-logos-list {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    max-width: unset;
  }

  .zwc-logos-section .zwc-logos-list li button {
    padding: 8px 15px
  }

  .zwc-logos-section .zwc-logos-list li button::before {
    display: none
  }

  .zwc-logos-section .zwc-logos-list li img {
    max-width: 30px
  }

  .zwc-methodology-section .zwc-methodology-box {
    width: 100%;
  }

  .zwc-platforms-section .zwc-platform-card-head,
  .zwc-platforms-section .zwc-pricing-list li {
    flex-direction: column;
    justify-content: unset;
    align-items: unset;
  }

  .zwc-platforms-section .zwc-pricing-list li {
    gap: unset;
  }
}