html {
  background: #fafafa;
}
footer{
  position:relative;
  z-index: 9;
}
.zw-product-header,
section.top-sec,
.mid-sec,
.illustration-block {
  background: #fff;
}

section.top-sec {
  padding: 90px 0 0;
  text-align: center;
}

section.top-sec h1 {
  max-width: 600px;
  margin: 0 auto;
  font-size: 54px;
  font-weight: 900;
  line-height: normal;
}

section.top-sec p {
  max-width: 780px;
  margin: 20px auto 0;
}

.mid-sec {
  padding-bottom: 60px;
}

.mid-sec .content-wrap {
  padding: 120px 0 0;
}

.sub-cont {
  display: table;
  max-width: unset;
  margin: 0 auto 60px;
}

.sub-cont-l {
  display: table-cell;
  width: 35%;
}

.sub-cont-l h2 {
  text-align: left;
  max-width: 350px;
  font-size: 32px;
  font-weight: 700;
  vertical-align: top;
  padding-right: 50px;
  line-height: normal;

}

.sell-your-course h2 {
  font-size: 36px;
  text-align: center;
}

.sell-your-course h2+p {
  max-width: 680px;
  margin: 0 auto;
  text-align: center
}

.sell-your-course {
  margin-bottom: 80px
}

.sub-cont-r {
  display: table-cell;
  width: 65%;
  vertical-align: top;
}

.sub-cont-r>p {
  text-align: left;
  max-width: 700px;
  line-height: 2;
}

section.bottom-sec {
  padding: 90px 0;
  text-align: center;
  background: #fafafa;
}

.bottom-head {
  text-align: center;
  margin: 0 auto;
  transition: all 0.5s ease;
}

.bottom-head h1 {
  font-weight: 600;
  padding: 0;
  max-block-size: 30px;
}

.bottom-cont {
  background: #fff;
  padding-top: 70px;
  margin-bottom: 60px;
  position: relative;
  min-height: 565px;
  max-width: 1100px;
  margin: 50px auto;
}

.bottom-cont h4 {
  font-size: 30px;
  font-weight: 700;
}

.bottom-cont>p:first-child {
  font-family: Roboto slab;
}

.bottom-cont p {
  max-width: 900px;
  margin: 0 auto;
  line-height: 2;
}

.bottom-cont img {
  padding: 30px 0 60px;
  max-width: 625px;
  margin: 0 auto;
}

/* Top Animation */
.head-anim {
  position: relative;
  min-height: 500px;
  margin-top: 120px;
}

.head-anim .image {
  position: absolute;
  transform: translate(0, -50%);
}

.image img {
  vertical-align: middle;
}

.head-anim .image.image-1 {
  left: 0;
  top: 50%;
  max-width: 180px;
}

.head-anim .image.image-2 {
  left: 11%;
  top: 29%;
  max-width: 288px;
}

.head-anim .image.image-3 {
  left: 14%;
  top: 79%;
  max-width: 180px;
}

.head-anim .image.image-4 {
  left: 28%;
  top: 55%;
  max-width: 222px;
}

.head-anim .image.image-5 {
  left: 41.5%;
  top: 88%;
  max-width: 180px;
}

.head-anim .image.image-6 {
  left: 52.5%;
  top: 65%;
  max-width: 288px;
}

.head-anim .image.image-7 {
  left: 59.8%;
  top: 15%;
  max-width: 180px;
}

.head-anim .image.image-8 {
  left: 69.5%;
  top: 58.5%;
  max-width: 222px;
}

.head-anim .image.image-9 {
  left: 70.8%;
  top: 10.5%;
  max-width: 222px;
}

.head-anim .image.image-10 {
  left: 84%;
  top: 4%;
  max-width: 288px;
}

.head-anim .image.image-11 {
  left: 82.8%;
  top: 58.5%;
  max-width: 222px;
}

.head-anim .image {
  position: absolute;
  opacity: 1;
  transition: all 2s ease;
}

.head-anim>div.zoom-out {
  transform: translate(0, -50%);
  opacity: 0;
}

.top-sec .head-anim>div.zoom-out {
  left: 45%;
}

.head-anim .image.image-1,
.head-anim .image.image-10,
.head-anim .image.image-11 {
  transition-delay: 0.5s;
}

.head-anim .image.image-2,
.head-anim .image.image-3,
.head-anim .image.image-8,
.head-anim .image.image-9 {
  transition-delay: 1s;
}

.head-anim .image.image-4,
.head-anim .image.image-6,
.head-anim .image.image-7 {
  transition-delay: 1.5s;
}

.head-anim .image.image-5 {
  transition-delay: 2s;
}

.top-anim>div>p {
  opacity: 0;
  transition: all 1.5s ease;
  transform: translateY(20px);
}

.top-anim>div>p.my-anim {
  opacity: 1;
  transform: translateY(-5px);
}

.top-anim {
  position: absolute;
}

[class^="text-anim"] {
  position: relative;
  width: 200px;
  height: 50px;
  z-index: 1;
  transition: 0.8s all ease;
  opacity: 1;
}

[class^="text-anim"]>p {
  text-align: center;
  font-size: 14px !important;
  padding-top: 10px;
  color: #fff;
  font-weight: 600;
}

.text-anim1 {
  top: 275px;
  left: -2px;
}

.text-anim2 {
  top: 150px;
  left: 230px;
}

.text-anim3 {
  top: 265px;
  left: 260px;
}

.text-anim4 {
  top: 106px;
  left: 486px;
}

.text-anim5 {
  top: 185px;
  left: 690px;
}

.text-anim6 {
  top: 30px;
  left: 932px;
}

.text-anim7 {
  top: -325px;
  left: 995px;
}

.text-anim7>p {
  font-size: 16px;
}

.text-anim8 {
  top: -172px;
  left: 1176px;
}

.text-anim9 {
  top: -464px;
  left: 1208px;
}

.text-anim10 {
  top: -534px;
  left: 1448px;
}

.text-anim11 {
  top: -380px;
  left: 1400px;
}

.bottom-cont>p:first-child {
  position: absolute;
  right: 10px;
  top: 3px;
}

.illustration-block {
  display: block;
  position: relative;
}

section.illustration-block:before {
  content: '';
  height: 500px;
  width: 100%;
  top: -90px;
  left: 0;
  background: url(/sites/zweb/images/campaigns/onlinecourses-illustration.png) no-repeat;
  background-size: auto 500px;
  position: absolute;
}

section.illustration-block:after {
  content: '';
  height: 500px;
  width: auto;
  background: url(/sites/zweb/images/campaigns/onlinecourses-bg-wave.png) no-repeat;
  display: block;
  background-size: auto 500px;
}

/** bottom Animation **/
/* .bottom-sec .content-wrap.my-anim {
  height: calc(100vh - 100px);
} */

/* .bottom-anim-start {
  height: 100vh;
} */

/* .bottom-head.my-anim {
  width: 100%;
  position: fixed;
  top: 7%;
  left: 0;
  max-width: 1280px;
  margin: auto;
  right: 0;
} */



/* .bottom-cont.my-anim {
  width: 100%;
  text-align: center;
  position: fixed;
  top: 17%;
  left: 0;
  max-width: 1100px;
  margin: auto;
  right: 0;
  box-shadow: unset;
} */

.bottom-cont.one {
  z-index: 1;
  display: block;
  box-shadow: unset;
  background: #d5effc;
}

.bottom-cont.two {
  z-index: 2;
  background: #fcd2d4;
}

.bottom-cont.three {
  z-index: 3;
  background: #cffbdd;
}

.bottom-cont.four {
  z-index: 4;
  background: #d3e0fc;
}

.bottom-cont.five {
  z-index: 5;
  background: #faf4ca;
}

.bottom-cont.six {
  z-index: 6;
}

.bottom-cont.seven {
  z-index: 7;
  background: #d5effc;
}

.bottom-cont.eight {
  z-index: 8;
  background: #fcd2d4;
  margin-bottom: 0;
}

.bottom-cta-section {
  margin-top: -300px;
  z-index: 9;
  position: relative;
  display:none;
}

@media only screen and (max-width: 1279px) {
  .bottom-cta-section {
      margin-top: 80px;
  }
}

@media only screen and (max-width: 991px) {
  .bottom-cta-section {
      margin-top: 80px;
  }
}

@media only screen and (max-width: 767px) {
  .bottom-cta-section {
      margin-top: 40px;
  }
}

@media only screen and (max-width: 650px) {
  section.top-sec h1 {
      font-size: 30px;
  }

  .sub-cont-l h2,
  .sub-cont-r>p {
      max-width: 100%;
  }

  .sub-cont-l h2 {
      font-size: 24px;
  }

  .sub-cont-r>p {
      max-width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  section.top-sec h1 {
      font-size: 32px;
  }

  .bottom-cont img {
      max-width: 100%;
      padding: 30px 0 0;
  }

  .mid-sec .content-wrap {
      padding: 60px 0 0;
  }

  section.bottom-sec {
      padding: 0 0 60px;
  }

  section.top-sec {
      padding: 30px 0 0;
  }
}

@media only screen and (max-width: 991px) {
  section.top-sec h1 {
      font-size: 36px;
  }

  .mid-sec .sub-cont,
  .sub-cont-l,
  .sub-cont-r {
      display: block;
      width: 100%;
  }

  .bottom-anim-start .bottom-cont {
      background: unset;
  }

  .sub-cont-l h2 {
      padding-right: 0;
      max-width: 80%;
      text-align: center;
      margin: 0 auto 10px;
      font-size: 30px;
  }

  .sub-cont-r>p {
      max-width: 80%;
      margin: 0 auto;
      text-align: center;
  }
}

@media only screen and (max-width: 1279px) {
  section.top-sec h1 {
      font-size: 40px;
  }

  .bottom-anim-start {
      height: unset;
  }

  .bottom-cont {
      background: unset;
      box-shadow: unset;
      min-height: unset;
      margin-bottom: 0;
  }

  section.bottom-sec {
      background: #fff;
  }
}

@media only screen and (min-width: 1280px) {
  section.top-sec h1 {
      font-size: 44px;
  }

  section.bottom-sec .content-wrap {
      width: 100%;
  }

  section.top-sec .content-wrap {
      width: 100%;
      max-width: 1800px;
  }

  .footer-wrapper {
      display: block;
      position: relative;
      z-index: 9;
  }
}

@media only screen and (max-width: 1679px) {
  .head-anim {
      display: none;
  }

  .head-anim-banner {
      display: block;
      margin-top: 30px;
  }

  section.top-sec .content-wrap {
      width: 90%;
  }

  .illustration-block {
      display: none;
  }
}

@media only screen and (min-width: 1680px) and (max-width: 1800px) {
  .head-anim .image>img {
      max-width: 95%;
  }

  .head-anim .image.image-1 {
      left: 5px;
  }

  .head-anim .image.image-3 {
      left: 16%;
      top: 76%;
  }

  .head-anim .image.image-6 {
      top: 62%;
  }

  .head-anim .image.image-7 {
      top: 14.5%;
  }

  .head-anim .image.image-8 {
      top: 56%;
  }

  .head-anim .image.image-10 {
      top: 5.9%;
  }

  .head-anim .image.image-11 {
      top: 56%;
  }

  .head-anim-banner {
      display: none;
  }

  /* .footer-wrapper{display:none;} */
}

@media only screen and (min-width: 1801px) {
  .head-anim .image>img {
      max-width: 100%;
  }

  .head-anim-banner {
      display: none;
  }

  section.illustration-block:after {
      background: url(/sites/zweb/images/campaigns/onlinecourses-bg-wave-extended.png) no-repeat;
  }

  /* .bottom-cont.my-anim {
      top: 14%;
  } */

  .text-anim1 {
      top: 275px;
      left: -2px;
  }

  .text-anim2 {
      top: 150px;
      left: 230px;
  }

  .text-anim3 {
      top: 278px;
      left: 242px;
  }

  .text-anim4 {
      top: 106px;
      left: 516px;
  }

  .text-anim5 {
      top: 185px;
      left: 732px;
  }

  .text-anim6 {
      top: 48px;
      left: 990px;
  }

  .text-anim7 {
      top: -318px;
      left: 1070px;
  }

  .text-anim7>p {
      font-size: 16px;
  }

  .text-anim8 {
      top: -158px;
      left: 1255px;
  }

  .text-anim9 {
      top: -460px;
      left: 1288px;
  }

  .text-anim10 {
      top: -530px;
      left: 1556px;
  }

  .text-anim11 {
      top: -366px;
      left: 1500px;
  }
}

@media only screen and (min-width: 2560px) {
  /* .bottom-head.my-anim {
      top: 5%;
  } */

  /* .bottom-cont.my-anim {
      top: 12%;
  } */
}

@media only screen and (min-width: 3200px) {
  /* .bottom-head.my-anim {
      top: 3.6%;
  } */

  /* .bottom-cont.my-anim {
      top: 9%;
  } */
}

@media only screen and (min-width: 3000px) {
  section.illustration-block:after {
      background: url(/sites/zweb/images/campaigns/onlinecourses-bg-wave-extended-2x.png) no-repeat;
  }
}


/*feature-breadcrumb start*/
.feature-breadcrumb {
  padding-top: 23px;
  background-color: #fff;
}
.feature-breadcrumb.breadcrumb-dark li {
  color: #000;
}
.feature-breadcrumb.breadcrumb-dark li a {
  color: #666;
}
.feature-breadcrumb.breadcrumb-dark li a:hover {
  color: #000;
}
.feature-breadcrumb.breadcrumb-dark li a:after {
  background: #000;
}
.feature-breadcrumb.breadcrumb-light li {
  color: #fff;
}
.feature-breadcrumb.breadcrumb-light li a {
  color: #fff;
}
.feature-breadcrumb.breadcrumb-light li a:hover {
  color: #fff;
}
.feature-breadcrumb.breadcrumb-light li a:after {
  background: #fff;
}
.feature-breadcrumb .jpc-container {
  max-width: 1200px;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
}
.feature-breadcrumb li {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  display: inline-block;
  margin-right: 14px;
  position: relative;
  color: #fff;
}
.feature-breadcrumb li a {
  color: #8cbaff;
  position: relative;
  display: block;
  transition: 0.2s;
  padding-bottom: 4px;
}
.feature-breadcrumb li a:hover {
  color: #fff;
}
.feature-breadcrumb li a:hover:after {
  width: 100%;
  left: 0;
  right: auto;
  transition: all 0.2s linear;
}
.feature-breadcrumb li a:before {
  content: '>';
  display: block;
  height: 5px;
  width: 5px;
  position: absolute;
  right: -8px;
  top: -1px;
  font-size: 13px;
  font-weight: 400;
  pointer-events: none;
}
.feature-breadcrumb li a:after {
  content: '';
  display: block;
  position: absolute;
  left: auto;
  right: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: #fff;
  transition: all 0.3s linear;
}
/*feature-breadcrumb end*/
.signup-cta {
  padding: 60px 0;
  background-color: #262626;
  background-image: url("/sites/zweb/images/jp/campaigns/free_em-cta-bg.jpg");
  background-repeat: repeat;
  background-size: 100px auto;
  text-align: center;
}
.signup-cta.bg-2 {
  background-color: #201b33;
  background-image: url("/sites/zweb/images/jp/campaigns/free_em-footer-cta-bg.png");
  background-size: 166px auto;
}
.signup-cta .heading-2 {
  color: #ffffff;
  margin-bottom: 27px;
  text-align: center;
  font-weight: 700;
  line-height: 1.6;
}
.signup-cta .act-btn {
  font-size: 20px;
  font-weight: 700;
  border: 0;
  border-radius: 99px;
  min-height: auto;
  padding: 15px 40px;
}
.signup-cta .jpc-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
@media only screen and (min-width: 1200px) {
  .signup-cta .heading-2 {
    font-size: 32px;
  }
}
@media only screen and (max-width: 1250px) {
  .feature-breadcrumb .jpc-container {
    max-width: 100%;
    padding: 0 25px;
  }
  
  .signup-cta .jpc-container {
    padding-left: 25px;
    padding-right: 25px;
  }
}

@media only screen and (max-width: 767px) {
  .signup-cta {
    padding: 50px 0;
  }
  .signup-cta .act-btn {
    font-size: 16px;
    padding: 12px 20px;
  }
}


@media screen and (min-width: 1280px) {
  .bottom-head.my-anim {
    opacity: 1;
    position: sticky;
    top: 85px;
    z-index: 2;
  }  
  .bottom-anim-start {
    position: sticky;
    top: 160px;
  }
  .bottom-cont {
    min-height: 670px;
  }
  .bottom-cont img {
    max-width: 550px;
  }
}

.no-webp .three-step-sprite {
    background-image: url("/sites/zweb/images/jp/campaigns/campaigns-3-step-sprite-2x.png");
  }
  .three-step-sprite {
    background-repeat: no-repeat;
    background-size: 200px 35px;
  }
  .three-step-sprite.lazy {
    background-image: url("/sites/zweb/images/jp/campaigns/campaigns-3-step-sprite-lazy.png");
    filter: blur(3px);
  }
  .three-step-sprite.icon-1 {
    background-position: 0 -5px;
    width: 40px;
    height: 25px;
  }
  .three-step-sprite.icon-2 {
    background-position: -51px 0;
    width: 30px;
    height: 34px;
  }
  .three-step-sprite.icon-3 {
    background-position: -93px -1px;
    width: 32px;
    height: 32px;
  }
  .three-step-sprite.dot-icon {
    background-position: -193px -14px;
    width: 7px;
    height: 7px;
  }
  .three-step-sprite.star-icon {
    background-position: -171px -13px;
    width: 11px;
    height: 10px;
  }
  .three-step-sprite.step-arrow {
    background-position: -136px -2px;
    width: 24px;
    height: 32px;
  }
  .step-3-flow-footer {
    background-color: #FFF3ED;
    padding: 90px 0;
  }
  .step-3-flow-footer .inner-wrapper {
    width: 1200px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
  }
  .step-3-flow-footer .inner-wrapper h2 {
    font-size: 32px;
    line-height: 1.3;
    margin-bottom: 60px;
    font-weight: bold;
    text-align: center;
  }
  .step-3-flow-footer .inner-wrapper .step-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 1090px;
    margin: 0 auto 30px auto;
    gap: 45px;
    max-width: 100%;
  }
  .step-3-flow-footer .inner-wrapper .step-wrapper li {
    display: flex;
    width: calc(100% / 3 - 30px);
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    position: relative;
  }
  .step-3-flow-footer .inner-wrapper .step-wrapper li .step-arrow {
    position: absolute;
    top: 50%;
    right: -37px;
    transform: translate(0, -50%);
  }
  .step-3-flow-footer .inner-wrapper .step-wrapper li .three-step-sprite {
    display: flex;
    flex-shrink: 0;
  }
  .step-3-flow-footer .inner-wrapper .step-wrapper li .heading-txt {
    background-color: #FDE3D7;
    display: flex;
    border-radius: 10px 10px 0 0;
    min-height: 80px;
    align-items: center;
    padding: 20px 0 20px 40px;
  }
  .step-3-flow-footer .inner-wrapper .step-wrapper li .heading-txt .three-step-sprite {
    margin-right: 17px;
  }
  .step-3-flow-footer .inner-wrapper .step-wrapper li .heading-txt h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 0;
  }
  .step-3-flow-footer .inner-wrapper .step-wrapper li .step-cont {
    display: flex;
    flex-direction: column;
    padding: 30px 45px;
  }
  .step-3-flow-footer .inner-wrapper .step-wrapper li .step-cont .step-badge {
    font-size: 12px;
    background-color: #B73030;
    display: flex;
    align-self: flex-start;
    font-weight: bold;
    color: #fff;
    padding: 1px 12px;
    border-radius: 3px;
    margin-bottom: 12px;
  }
  .step-3-flow-footer .inner-wrapper .step-wrapper li .step-cont .step-link {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    margin-bottom: 10px;
  }
  .step-3-flow-footer .inner-wrapper .step-wrapper li .step-cont .step-link .three-step-sprite {
    display: flex;
    margin-right: 10px;
  }
  .step-3-flow-footer .inner-wrapper .step-wrapper li .step-cont .step-link a {
    font-size: 15px;
    font-weight: 500;
    color: #000;
  }
  .step-3-flow-footer .inner-wrapper .step-wrapper li .step-cont .step-link a:hover {
    color: #B73030;
  }
  .step-3-flow-footer .inner-wrapper .footer-txt-link {
    margin: 0 auto;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: #B73030;
    text-align: right;
    width: 1090px;
    max-width: 100%;
  }
  @media only screen and (max-width: 1199px) {
    .step-3-flow-footer {
      padding: 75px 0;
    }
    .step-3-flow-footer .inner-wrapper h2 {
      font-size: 28px;
      margin-bottom: 40px;
    }
    .step-3-flow-footer .inner-wrapper .step-wrapper li .heading-txt .three-step-sprite {
      margin-right: 10px;
    }
    .step-3-flow-footer .inner-wrapper .step-wrapper li .heading-txt h3 {
      font-size: 18px;
    }
  }
  @media only screen and (max-width: 991px) {
    .step-3-flow-footer {
      padding: 65px 0;
    }
    .step-3-flow-footer .inner-wrapper .step-wrapper {
      flex-direction: column;
    }
    .step-3-flow-footer .inner-wrapper .step-wrapper li {
      width: 400px;
      max-width: 100%;
      margin: 0 auto;
    }
    .step-3-flow-footer .inner-wrapper .step-wrapper li .step-arrow {
      top: unset;
      right: unset;
      left: 50%;
      transform: translate(-50%, 0) rotate(90deg);
      bottom: -40px;
    }
  }
  @media only screen and (max-width: 767px) {
    .step-3-flow-footer {
      padding: 50px 0;
    }
    .step-3-flow-footer .inner-wrapper h2 {
      font-size: 26px;
      margin-bottom: 30px;
    }
  }