:root {
  --main-section-bg: #142a6b;
  --section-bg: #ebefff;
  --card-bg: #e9494c;
  --text-color: #000000;
  --text-white: #ffff;
  --deliver-car-1: #fce8e8;
  --deliver-car-2: #eef7f5;
  --deliver-car-3: #e3ecff;
  --deliver-car-4: #fff7e6;
}
.zwc-mb-0 {
  margin-bottom: 0px;
}
.zwc-wrapper {
  background-color: var(--section-bg);
}
.zwc-wrapper .content-wrap {
  max-width: var(--zwc-content, 1170px);
}
.zwc-wrapper p {
  font-size: 18px;
}
.zwc-banner {
  background: transparent
    linear-gradient(151deg, #6a80ed 0%, #2247b4 0%, #142a6c 100%, #142a6b 100%)
    0% 0% no-repeat padding-box;
  color: var(--text-white);
  margin-block-start: -68px;
}

.zwc-btn {
  font-size: 15px;
  padding: 18px 30px;
  font-family: var(--zf-primary-semibold);
  color: var(--btn-color, #ffff);
  background-color: var(--btn-bg-color);
}
.zw-product-header.zwph-white {
  background-color: transparent;
}

.zwc-banner:before {
  content: "";
  display: block;
  height: 68px;
}

.zwc-bl {
  --btn-bg-color: var(--text-color);
}

.zwc-wh {
  --btn-bg-color: var(--text-white);
  --btn-color: var(--text-color);
}

.zwc-banner-text {
  text-align: center;
  max-width: 866px;
  margin-inline: auto;
  padding-block: clamp(40px, 5vw, 78px);
}

.zwc-banner-text h1 {
  font-size: clamp(32px, 5vw, 72px);
}

.zwc-banner-text p {
  font-size: clamp(18px, 2.3vw, 24px);
  width: min(100%, 760px);
  margin-inline: auto;
}

.zwc-benefits-text-list li p {
  margin: 0;
}

.zwc-btn-group {
  padding-top: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.zwc-banner-content {
  display: grid;
  grid-template-columns: 0.7fr 1.2fr;
  gap: 20px;
  padding-bottom: clamp(40px, 8vw, 117px);
}

.zwc-banner-content-text {
  padding: clamp(20px, 3vw, 46px) clamp(20px, 5vw, 46px) clamp(20px, 3vw, 46px)
    clamp(20px, 3vw, 46px);
  background: var(--card-bg);
  border-radius: 10px;
}

.zwc-wrapper h2 {
  font-size: clamp(25px, 3.5vw, 46px);
}

.zwc-banner-content-text p {
  font-size: clamp(16px, 2.4vw, 20px);
  margin-right: clamp(0px, 1.5vw, 26px);
}

.zwc-banner-content-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.zwc-banner .content-wrap {
  max-width: 1190px;
}

.zwc-benefits .content-wrap {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  position: relative;
  align-items: start;
}
.zw-product-header.zwph-white,
.zw-product-header {
  background: transparent;
}
.zwc-benefits {
  padding: clamp(40px, 8vw, 120px) 0px;
}

.zwc-benefits-text-list {
  max-width: 485px;
}

.zwc-icon-header {
  font-size: clamp(20px, 2.8vw, 30px);
  margin-bottom: clamp(10px, 3vw, 30px);
  max-width: var(--zwc-width-m);
}
.zwc-benefits-text-list li:nth-child(1) h3,
.zwc-benefits-text-list li:nth-child(2) h3 {
  --zwc-width-m: 417px;
}
.zwc-benefits-text-list p {
  max-width: 478px;
}
.zwc-benefits-text-list li:nth-child(3) p {
  max-width: 455px;
}
.zwc-benefits-text-list li:nth-child(5) p,
.zwc-benefits-text-list li:nth-child(6) p {
  max-width: 430px;
}

.zwc-icon-header:before {
  content: "";
  display: block;
  width: var(--width-icon, 72px);
  height: var(--height-icon, 64px);
  margin-bottom: clamp(10px, 3vw, 30px);
  background-image: url(/sites/zweb/images/learn/partner-training/zwc-icons-solutions.svg);
  background-size: 408px auto;
  background-repeat: no-repeat;
  background-position: var(--icon-postion, 1px 0px);
}
.zwc-benefits-text-list li {
  --height-icon: 65px;
}
.zwc-benefits-text-list li:nth-child(1) {
  --width-icon: 68px;
}
.zwc-benefits-text-list li:nth-child(2) {
  --icon-postion: -67px 0px;
  --width-icon: 61px;
}

.zwc-benefits-text-list li:nth-child(3) {
  --icon-postion: -128px 0px;
  --width-icon: 70px;
}
.zwc-benefits-text-list li:nth-child(4) {
  --icon-postion: -198px 0px;
  --width-icon: 51px;
}
.zwc-benefits-text-list li:nth-child(5) {
  --icon-postion: -249px 0px;
  --width-icon: 70px;
}

.zwc-benefits-text-list li:nth-child(6) {
  --icon-postion: -318px 0px;
  --width-icon: 63px;
}

.zwc-create-customized .zwc-grid-card:nth-child(1) {
  --icon-postion: 0px -69px;
}
.zwc-create-customized .zwc-grid-card:nth-child(2) {
  --icon-postion: -71px -69px;
  --width-icon: 66px;
}
.zwc-create-customized .zwc-grid-card:nth-child(3) {
  --icon-postion: -137px -67px;
  --width-icon: 66px;
}
.zwc-create-customized .zwc-grid-card:nth-child(4) {
  --icon-postion: -202px -67px;
  --width-icon: 75px;
}
.zwc-create-customized .zwc-grid-card:nth-child(5) {
  --icon-postion: -278px -67px;
  --width-icon: 66px;
}
.zwc-create-customized .zwc-grid-card:nth-child(6) {
  --icon-postion: -343px -68px;
  --width-icon: 66px;
}

.zwc-benefits-text {
  max-width: 640px;
  position: sticky;
  top: 80px;
}
.zwc-benefits-text h2 {
  margin-bottom: clamp(30px, 4vw, 50px);
}

.zwc-benefits-text-list li:not(:last-child) {
  padding-bottom: clamp(20px, 4vw, 55px);
  margin-bottom: clamp(20px, 4vw, 55px);
  border-bottom: 1px solid #00000029;
}

.zwc-grid-layout {
  display: grid;
  grid-template-columns: var(--card-showing);
  counter-reset: section;
  padding-top: clamp(30px, 4vw, 80px);
  gap: var(--card-gap);
}

.zwc-grid-card {
  padding: var(--card-padding);
  background: var(--car-background);
  border: var(--card-border-s) solid #fff;
}

.zwc-text-section {
  padding: clamp(15px, 4vw, 20px) clamp(15px, 2vw, 36px) clamp(15px, 4vw, 45px)
    clamp(15px, 2vw, 30px);
}

.zwc-text-section p {
  max-width: 315px;
}

.zwc-text-section h3 {
  font-size: clamp(22px, 2vw, 36px);
}

.zwc-text-section h3::before {
  counter-increment: section;
  content: "0" counter(section);
  display: block;
  text-align: right;
  opacity: 0.05;
  font-size: clamp(40px, 8vw, 100px);
  line-height: 1;
}

.zwc-create-customized {
  background-color: var(--main-section-bg);
  padding-block: clamp(60px, 11vw, 190px);
  --card-showing: 1fr 1fr 1fr;
  --card-gap: 20px;
  --card-padding: clamp(15px, 3vw, 30px) clamp(15px, 3vw, 35px);
  --car-background: var(--text-white);
}

.zwc-create-customized .zwc-grid-card {
  border-radius: 10px;
}

.zwc-create-customized h2 {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
  color: var(--text-white);
}

.zwc-educate-empower .content-wrap {
  max-width: 528px;
  text-align: center;
}

.zwc-educate-empower {
  padding-block: clamp(40px, 6vw, 120px) clamp(40px, 6vw, 100px);
}

.zwc-inline {
  display: block;
}
.zwc-educate-empower h2 {
  margin-bottom: clamp(10px, 5vw, 30px);
}
.zwc-training {
  padding-block: clamp(40px, 6vw, 120px) 0px;
  --card-showing: 1fr 1fr 1fr;
  --card-gap: 20px;
  --card-padding: clamp(30px, 2.9vw, 50px) clamp(25px, 2.2vw, 35px);
  --card-border-s: 5px;
}
.zwc-training h2 {
  max-width: 700px;
  margin-inline: auto;
  text-align: center;
}
.zwc-training .zwc-grid-card {
  border-radius: 10px;
}
.zwc-training .zwc-grid-card:nth-child(1) {
  --car-background: #ffe8e8;
}
.zwc-training .zwc-grid-card:nth-child(1) p {
  max-width: 264px;
}
.zwc-training .zwc-grid-card:nth-child(2) {
  --car-background: #eef7f5;
}
.zwc-training .zwc-grid-card:nth-child(3) {
  --car-background: #fff8ec;
}

@media screen and (max-width: 1200px) {
  .zwc-benefits-text {
    top: 30px;
  }
}

@media screen and (max-width: 991px) {
  .zwc-banner-content {
    grid-template-columns: 1fr;
  }

  .zwc-benefits .content-wrap {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  .zwc-icon-header:before {
    margin-inline: auto;
  }

  .zwc-create-customized,
  .zwc-training {
    --card-showing: 1fr 1fr;
  }

  :is(.zwc-banner, .zwc-educate-empower) .content-wrap,
  .zwc-create-customized h2 {
    max-width: 600px;
  }
  .zwc-btn {
    padding: 10px 30px;
  }
  .zwc-inline {
    display: inline;
  }
  .zwc-benefits-text {
    position: static;
  }
}

@media screen and (max-width: 768px) {
  .zwc-create-customized,
  .zwc-training {
    --card-showing: 1fr;
  }

  .zwc-grid-card {
    align-items: center;
    text-align: center;
  }

  .zwc-create-customized .content-wrap,
  .zwc-text-section,
  :is(.zwc-banner, .zwc-educate-empower) .content-wrap,
  .zwc-create-customized h2,
  .content-wrap {
    --zwc-content: 480px;
    max-width: 480px;
  }
  .zwc-training .zwc-grid-card:nth-child(1) p,
  .zwc-benefits-text-list li:nth-child(5) p,
  .zwc-benefits-text-list li:nth-child(3) p,
  .zwc-benefits-text-list p,
  .zwc-benefits-text-list li:nth-child(6) p {
    max-width: 100%;
  }
}