/************************* root CSS Start *************************/
:root {
  --zwc-primary-color: #334acc;
  --zwc-secondary-color: #fea800;
  --zwc-black-color: #000;
  --zwc-white-color: #ffff;
  --zwc-h1-text: clamp(28px, 10vw, 75px);
  --zwc-h2-text: clamp(26px, 3.8vw, 62px);
  --zwc-h2-opction-text: clamp(26px, 3.8vw, 58px);
  --zwc-h3-text: clamp(23px, 3.3vw, 48px);
  --zwc-text-md: clamp(17px, 1.6vw, 24px);
  --zwc-text-sm: clamp(15px, 1vw, 18px);
  --zwc-text-xs: clamp(16px, 2.5vw, 26px);
  --zwc-text-xl: clamp(26px, 5.8vw, 96px);
  --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 {
  background-color: #ebefff;
}
.zwc-wrapper h1 {
  font-size: var(--zwc-h1-text);
  font-family: var(--primaryfont-bold);
  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-bold);
}
.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);
}
.zwc-wrapper p.zwc-xl-size {
  font-size: clamp(16px, 1.9vw, 32px);
}
.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, 5% 0%);
  background-size: var(--zwc-bg-size, 523%) 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);
}
/************************* Resuse CSS End *************************/
/************************* Banner Section Css *************************/
.zwc-banner-sec {
  padding-top: 50px;
  background-color: var(--zwc-primary-color);
  color: var(--zwc-white-color);
  text-align: center;
  --zwc-content-wap: min(100%, 870px);
}
.zwc-banner-sec p {
  --zwc-max-w-p: min(100%, 760px);
  line-height: 1.2;
}
.zwc-banner-sec h1 span {
  color: var(--zwc-secondary-color);
  font-family: var(--zf-secondary-bolditalic);
}
.zwc-banner-sec .zwc-rhs {
  margin-top: 50px;
}
.zwc-banner-sec small {
  font-size: var(--zwc-text-md);
  font-family: var(--primaryfont-bold);
  text-transform: uppercase;
  letter-spacing: -0.24px;
  line-height: 0.9;
  margin-top: 8px;
}
.zwc-banner-sec .zwc-iconlist {
  --zwc-gap: clamp(10px, 2vw, 30px);
}
.zwc-banner-sec .zwc-iconlist li {
  padding: clamp(20px, 3vw, 30px);
  border-radius: 20px;
  border: 2px solid var(--zwc-border-color);
}
.zwc-banner-sec .zwc-iconlist li:first-child {
  --zwc-border-color: #fea800;
}
.zwc-banner-sec .zwc-iconlist li:nth-child(2) {
  --zwc-border-color: #2bffce;
}
.zwc-banner-sec .zwc-iconlist li:last-child {
  --zwc-border-color: #50a8ff;
}
.zwc-banner-sec .zwc-iconlist img {
  aspect-ratio: 1.27;
}
.zwc-section-1,
.zwc-section-2,
.zwc-section-3,
.zwc-section-4,
.zwc-section-5,
.zwc-section-6,
.zwc-section-4,
.zwc-section-5 {
  padding-top: var(--zwc-padding-main);
}
.zwc-section-1 img:not(.zwc-mt-0),
.zwc-section-2 img:not(.zwc-mt-0),
.zwc-section-3 img:not(.zwc-mt-0),
.zwc-section-4 img:not(.zwc-mt-0),
.zwc-section-5 img:not(.zwc-mt-0),
.zwc-section-6 img:not(.zwc-mt-0) {
  margin-top: clamp(30px, 4.1vw, 70px);
}
.zwc-section-1 {
  background-color: var(--zwc-primary-color);
  color: var(--zwc-white-color);
  padding-bottom: var(--zwc-padding-main);
  --zwc-gap: clamp(30px, 5.9vw, 95px);
}
.zwc-section-1 .zwc-rhs {
  width: calc(41% - 48px);
}
.zwc-section-1 .zwc-lhs {
  width: calc(59% - 48px);
}
.zwc-section-2,
.zwc-section-4 {
  --zwc-h2-text: var(--zwc-h2-opction-text);
  --zwc-gap: 30px;
}
.zwc-section-2 .zwc-rhs,
.zwc-section-4 .zwc-rhs {
  flex: 60%;
  text-align: right;
}
.zwc-section-2 .zwc-lhs,
.zwc-section-4 .zwc-lhs {
  flex: 40%;
}
.zwc-section-3,
.zwc-section-5 {
  --zwc-h2-text: var(--zwc-h2-opction-text);
  text-align: center;
}
.zwc-section-3 p {
  width: min(100%, 700px);
}
.zwc-section-5 {
  background: #24348f;
  background: linear-gradient(0deg, #24348f 50%, rgba(255, 255, 255, 0) 50%);
}
.zwc-section-5 p {
  width: min(100%, 900px);
}
.zwc-section-6 {
  background: #24348f;
  padding-bottom: var(--zwc-padding-main);
  color: var(--zwc-white-color);
  --zwc-h2-text: var(--zwc-text-xl);
  text-align: center;
  --zwc-h2-mb: 0px;
  --zwc-content-wap: 1100px;
}
.zwc-section-6 h2 span {
  color: var(--zwc-secondary-color);
  font-family: var(--zf-secondary-bolditalic);
}
.zwc-section-6 .content-wrap img {
  margin: 30px 0px;
}
.zwc-section-6 p {
  width: min(100%, 940px);
  font-size: var(--zwc-text-xs);
  margin-bottom: clamp(30px, 3.7vw, 60px);
}
.zwc-section-6 p::after {
  background: var(--zwc-secondary-color);
  width: clamp(100px, 11vw, 200px);
  height: 2px;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
}
.zwc-section-6 small {
  font-size: var(--zwc-text-xs);
}
.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: 991px) {
  .zwc-wrapper .content-wrap {
    --zwc-content-wap: 760px;
  }
  :is(.zwc-section-1, .zwc-section-2, .zwc-section-4) .content-wrap {
    --zwc-wrap: wrap;
    --zwc-just-c: center;
    flex-direction: column;
  }
  .zwc-section-1 :is(.zwc-rhs, .zwc-lhs) {
    width: 100%;
  }
  .zwc-section-1 .zwc-rhs {
    display: none;
  }
  h2 span.zwc-block {
    display: unset;
  }
  :is(
      .zwc-section-1,
      .zwc-section-2,
      .zwc-section-3,
      .zwc-section-4,
      .zwc-section-5
    ) img {
    width: 60%;
  }
  :is(
      .zwc-section-1,
      .zwc-section-2,
      .zwc-section-3,
      .zwc-section-4,
      .zwc-section-5,
      .zwc-section-6
    ) :is(.zwc-rhs, .zwc-lhs) {
    text-align: center;
  }
}
@media only screen and (max-width: 767px) {
  .zwc-banner-sec .zwc-iconlist {
    --zwc-wrap: wrap;
    --zwc-just-c: center;
  }
  .zwc-banner-sec .zwc-iconlist img {
    max-width: 100px;
  }
  .zwc-section-6 p::after {
    bottom: -15px;
  }
}
@media only screen and (max-width: 480px) {
  .zwc-section-5 {
    background: linear-gradient(0deg, #24348f 30%, rgba(255, 255, 255, 0) 30%);
  }
}
/*************************** Responisve End ***************************/