/************************* root CSS Start *************************/
:root {
  --zwc-primary-color: #334acc;
  --zwc-secondary-color: #08112b;
  --zwc-black-color: #000;
  --zwc-white-color: #ffff;
  --zwc-h1-text: clamp(28px, 4vw, 56px);
  --zwc-h2-text: clamp(26px, 3.6vw, 40px);
  --zwc-h2-opction-text: clamp(26px, 5vw, 60px);
  --zwc-h3-text: clamp(23px, 3.3vw, 24px);
  --zwc-text-md: clamp(17px, 1.6vw, 24px);
  --zwc-text-sm: clamp(15px, 1vw, 18px);
  --zwc-sprite-img: url(/sites/zweb/images/learn/knowledge-base/zwc-sprite.svg);
  --zwc-padding-main: clamp(50px, 8.5vw, 120px);
}
/************************* root CSS End *************************/
/************************* Resuse CSS Start *************************/
.zwc-dflex {
  display: flex;
  flex-wrap: var(--zwc-wrap);
  justify-content: var(--zwc-just-c, space-between);
  gap: var(--zwc-gap, 0px);
  align-items: var(--zwc-align-i, center);
}
.zwc-cols > div,
.zwc-cols > li {
  width: calc((100% - (var(--zwc-gap) * (var(--zwc-card-count) - 1))) / var(--zwc-card-count, 1));
}
.zwc-wrapper h1 {
  font-size: var(--zwc-h1-text);
  font-family: var(--primaryfont-semibold);
  line-height: 1.1;
}
.zwc-wrapper h2 {
  font-size: var(--zwc-h2-text);
  font-family: var(--primaryfont-bold);
  line-height: 1.2;
  margin-bottom: var(--zwc-h2-mb, 20px);
  max-width: var(--zwc-max-w);
}
.zwc-wrapper h3 {
  font-size: var(--zwc-h3-text);
  font-family: var(--primaryfont-semibold);
}
.zwc-wrapper .content-wrap {
  max-width: var(--zwc-content-wap, 1440px);
}
.zwc-wrapper p {
  font-size: clamp(16px, 1.9vw, 24px);
  max-width: var(--zwc-max-w-p);
}
.act-btn.cta-btn {
  text-transform: capitalize;
  font-size: clamp(15px, 2.7vw, 18px);
  padding: 11px 32px;
  border-radius: 4px;
}
.zwc-sprite-icon,
.zwc-sprite-icon-aft::after,
.zwc-sprite-icon-bef::before {
  background: var(--zwc-sprite-img) no-repeat var(--zwc-bg-pos, 0.4% 50%);
  background-size: var(--zwc-bg-size, 1300%) auto;
  display: inline-block;
}
.zwc-sprite-icon-aft::after,
.zwc-sprite-icon-bef::before {
  content: "";
}
.zwc-mb-0 {
  margin-bottom: 0px;
}
.zwc-row-rev {
  flex-direction: row-reverse;
}
.zwc-col-dir {
  flex-direction: column;
}
.zwc-block {
  display: block;
}
.zwc-rl-auto {
  margin-inline: auto;
}
.zwc-pos-relative,
.zwc-sprite-icon-aft,
.zwc-sprite-icon-bef {
  position: relative;
}
.zwc-pos-absolute,
.zwc-sprite-icon-aft::after,
.zwc-sprite-icon-bef::before {
  position: absolute;
}
.zw-product-header.zwph-white {
  background: var(--zwc-primary-color);
}
.zwc-highlighted-text {
  color: var(--zwc-primary-color);
}
/************************* Resuse CSS End *************************/
/************************* Banner Section Css *************************/
.zwc-banner-sec {
  padding: clamp(50px, 8.5vw, 80px) 0px;
  background-color: var(--zwc-primary-color);
  color: var(--zwc-white-color);
  --zwc-gap: clamp(30px, 6vw, 80px);
}
.zwc-banner-sec .zwc-lhs {
  width: calc(45% - var(--zwc-gap) / 2);
}
.zwc-banner-sec .zwc-rhs {
  width: calc(55% - var(--zwc-gap) / 2);
}
.zwc-banner-sec p {
  width: min(100%, 586px);
}
.zwc-section-1,
.zwc-section-2,
.zwc-section-3,
.zwc-section-4 {
  padding-top: var(--zwc-padding-main);
  text-align: center;
}
.zwc-section-1 img,
.zwc-section-2 img,
.zwc-section-3 img,
.zwc-section-4 img {
  margin-top: clamp(30px, 4.1vw, 70px);
}
.zwc-section-1 {
  --zwc-max-w: min(100%, 700px);
  --zwc-max-w-p: min(100%, 920px);
}
.zwc-section-1 .zwc-list li:nth-child(2) {
  --zwc-bg-pos: 9.5% 50%;
}
.zwc-section-1 .zwc-list li:last-child {
  --zwc-bg-pos: 18.2% 50%;
}
.zwc-section-2 {
  --zwc-max-w: min(100%, 480px);
  --zwc-max-w-p: min(100%, 1030px);
}
.zwc-section-2 .zwc-list li:first-child {
  --zwc-bg-pos: 27.7% 50%;
}
.zwc-section-2 .zwc-list li:nth-child(2) {
  --zwc-bg-pos: 36.4% 50%;
}
.zwc-section-2 .zwc-list li:last-child {
  --zwc-bg-size: 1100%;
  --zwc-bg-pos: 46.3% 50%;
}
.zwc-section-3 {
  --zwc-max-w: min(100%, 600px);
  --zwc-max-w-p: min(100%, 980px);
}
.zwc-section-3 .zwc-list li:first-child {
  --zwc-bg-pos: 55.7% 36.2%;
}
.zwc-section-3 .zwc-list li:nth-child(2) {
  --zwc-bg-pos: 63.7% 36.2%;
}
.zwc-section-3 .zwc-list li:last-child {
  --zwc-bg-pos: 72.6% 36.1%;
}
.zwc-section-4 {
  --zwc-max-w: min(100%, 500px);
  --zwc-max-w-p: min(100%, 880px);
}
.zwc-section-4 .zwc-list li:first-child {
  --zwc-bg-pos: 81.3% 46.1%;
}
.zwc-section-4 .zwc-list li:nth-child(2) {
  --zwc-bg-pos: 90.2% 46.1%;
}
.zwc-section-4 .zwc-list li:last-child {
  --zwc-bg-pos: 99.2% 50%;
}
.zwc-list {
  width: min(100%, 1060px);
  margin-top: clamp(40px, 5vw, 80px);
  --zwc-gap: clamp(25px, 2.1vw, 50px);
  --zwc-align-i: normal;
}
.zwc-list li {
  padding-top: 97px;
}
.zwc-list li::after {
  width: 60px;
  height: 60px;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
}
.zwc-list li:first-child,
.zwc-list li:last-child {
  max-width: 246px;
}
.zwc-list li:nth-child(2) {
  max-width: 474px;
  padding-inline: 50px;
  border: solid #cccccc;
  border-width: 0px 1px;
}
.zwc-footer {
  --zwc-h2-text: var(--zwc-h2-opction-text);
  text-align: center;
  padding: var(--zwc-padding-main) 0px;
  --zwc-content-wap: 1040px;
  --zwc-h2-mb: 30px;
}
@media only screen and (max-width: 1024px) {
  .zwc-wrapper .content-wrap {
    --zwc-content-wap: 760px;
  }
  .zwc-section-1 ul,
  .zwc-section-2 ul,
  .zwc-section-3 ul,
  .zwc-section-4 ul {
    --zwc-wrap: wrap;
    --zwc-just-c: center;
    flex-direction: column;
  }
  .zwc-list li:first-child,
  .zwc-list li:last-child,
  .zwc-list li:nth-child(2) {
    max-width: 100%;
  }
  .zwc-list li:nth-child(2) {
    padding-inline: 0px;
    border: 0px;
  }
}
@media only screen and (max-width: 767px) {
  .zwc-wrapper .content-wrap {
    --zwc-content-wap: 480px;
  }
  .zwc-banner-sec .content-wrap {
    flex-direction: column;
  }
  .zwc-banner-sec .zwc-lhs,
  .zwc-banner-sec .zwc-rhs {
    width: 100%;
  }
}
/*************************** Responisve End ***************************/