.zw-product-header {
  background: #003acc;
}
.zsection {
  padding: 100px 0;
}

a.act-btn.cta-btn {
  text-align: center;
  max-width: max-content;
  font-size: 16px;
  font-family: var(--primaryfont-semibold);
  padding: 14px 26px;
  text-transform: uppercase;
  color: #fff;
  border-radius: 4px;
}
.content-wrap {
  max-width: 1170px;
}

.ztac {
  text-align: center
}






/* Style Start */
.flex-wrap{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
  .zwc-banner{
      background: #003ACC;
      color: #fff;
      padding-bottom: 0;
      position: relative;
  }
  .zwc-banner:before{
      position: absolute;
      content: '';
      background: #fff;
      width: 100%;
      height: 100px;
      bottom: 0;
      left: 0;
      top: inherit;
  }
  .top-wrap{
      margin-bottom: 74px;
  }
  .zb-wrapper{
      position: relative;
      z-index: 0;
  }
  .zb-wrapper img{
      display: block;
      margin: auto;
      transform: scale(.8);
      transition: all .5s ease-in;
  }
  .middle-animated .zb-wrapper img{
      transform: scale(1);
  }
  .zb-wrapper:before,.zb-wrapper:after{
      position: absolute;
      content: '';
      width: 360px;
      height: 100%;
      background: url(/sites/zweb/images/writer/left-bg.png) no-repeat left bottom / 270px;
      left: 130px;
      bottom: 0;
      border-radius: 4px;
      transition: all .5s ease-in .6s;
      z-index: -1;
      opacity: 0;
  }
  .zb-wrapper:after{
      background: url(/sites/zweb/images/writer/right-bg.png) no-repeat right bottom/100% auto;
      right: 180px;
      left: inherit;
  }
  .middle-animated .zb-wrapper:before{
      left: -140px;
      opacity: 1;
  }
  .middle-animated .zb-wrapper:after{
      right: -140px;
      opacity: 1;
  }

  .zwc-features{

  }
  .fea-cont ul{
      justify-content: center;
      gap: 16px;   
      max-width: 700px;
      margin: auto;
  }
  .fea-cont ul li{
      position: relative;
      padding-left: 28px;
      font-size: 16px;
  }
  .fea-cont ul li:before,.zwc-cont ul li:before,.zassit-inner .lhs ul li:before{
      position: absolute;
      content: '';
      width: 20px;
      height: 20px;
      background: url(/sites/zweb/images/writer/checkmark.svg) no-repeat 0px 0px/100% auto;
      left: 6px;
      top: 2px;
  }

  .fea-details ul{
      justify-content:flex-start;
      gap: 17px;
      max-width: 1057px;
      margin: 60px auto 0;
  }
  .fea-details ul li{
      width: 340px;
      height: 390px;
      background:#F5F5F5;
      border-radius: 16px;
      padding: 50px 40px;
      box-sizing: border-box;
      opacity: 0;
      transition: all .3s ease-in .5s;
  }
 .middle-animated .fea-details ul li{
      opacity: 1;
  }
  .fea-details ul li:nth-child(2){
      transition-delay: .6s;
  }
  .fea-details ul li:nth-child(3){
      transition-delay: .7s;
  }
  .fea-details ul li:nth-child(4){
      transition-delay: .8s;
  }
  .fea-details ul li:nth-child(5){
      transition-delay: .9s;
  }
  .fea-details ul li:nth-child(6){
      transition-delay: 1s;
  }
  .fea-details ul li:nth-child(7){
      transition-delay: 1.1s;
  }
  .fea-details ul li:nth-child(8){
      transition-delay: 1.2s;
  }

  .fea-details ul li .zf-icon{
      display: block;
      width: 40px;
      height: 40px;
      background: url(/sites/zweb/images/writer/sprite.svg) no-repeat 0px 0px / 400px;
      margin-bottom: 15px;
  }
  .fea-details ul li .zf-icon.zf-icon2{
      background-position: -50px 0px;
  }
  .fea-details ul li .zf-icon.zf-icon3{
      background-position: -95px 0px;
  }
  .fea-details ul li .zf-icon.zf-icon4{
      background-position: -142px 2px;
  }
  .fea-details ul li .zf-icon.zf-icon5{
      background-position: -192px 0px;
  }
  .fea-details ul li .zf-icon.zf-icon6{
      background-position: -239px 0px;
  }
  .fea-details ul li .zf-icon.zf-icon7{
      background-position: -283px 0px;
      width: 41px;    
  }
  .fea-details ul li .zf-icon.zf-icon9{
    background-position: -327px 0;
    width: 37px; 
}
  .fea-details ul li .zf-icon.zf-icon8{
      background-position: -366px 0px;
  }
  .zf-icon8 h4{
      font-size: 20px;
      line-height: 28px;
      letter-spacing: -0.4px;
  }
  .zwc-edits{
      background: #003ACC;
      max-width: 95%;
      margin: auto;
      border-radius: 10px;
      color: #fff;
      position: relative;
  }
.zwc-edits a{
  color: #fff;
  border-bottom: 1px solid;
  cursor: pointer;
}
  .zwc-edits:before{
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      background: #003ACC url(/sites/zweb/images/writer/pattern-bg.png) no-repeat top center/100% auto;
      left: 0;
      top: 0;
      z-index: 0;
      opacity: .2;
  }
  .zwc-edits h2{
      color: #fff;
  }

  .zwc-cont{
      max-width: 560px;
      margin: auto;
  }
  .zwc-cont p{
      font-size: 20px;
      line-height: 28px;
  }
  .zwc-cont ul{
      margin-bottom: 26px;
      gap: 16px;
      justify-content: center;
  }
  .zwc-cont ul li{
      position: relative;
      padding-left: 32px;
  }
  .zwc-cont ul li:before{
      background: url(/sites/zweb/images/writer/checkmark-white.svg) no-repeat 0px 0px/100%;
      top: 4px;
  }



  .zassit-inner{
      align-items: unset;
      justify-content: space-between;
      max-width: 950px;
      margin: auto;
  }
  .zassit-inner .rhs{
      max-width: 520px;
      margin: auto;
  }
  .zassit-inner .rhs ul li{
      margin-bottom: 30px;
      list-style: disc;
  }
  .zwc-related .zassit-inner .lhs p,.zwc-related .zassit-inner .rhs ul li p{
      font-size: 20px;
      line-height: 28px;
      letter-spacing: -.4px;
      font-family: var(--zf-primary-medium);
  }
  .zassit-inner .rhs ul li a{
      color:#fff;
      border-bottom:1.2px solid;
  cursor: pointer;
  }
  .zassit-inner .rhs ul li h3{
      color: #000;
      font-family: var(--primaryfont-semibold);
      font-size: 24px;
      line-height: 32px; 
      letter-spacing: -0.48px;
  }
  .zassit-inner .lhs ul{
      margin-top: 30px;
      margin-bottom: 80px;
  }
  .zassit-inner .lhs ul li{
      position: relative;
      padding-left: 28px;
      margin-bottom: 10px;    
  }
  .zassit-inner .lhs ul li:before{
      width: 16px;
      height: 16px;
      top: 5px;
  }

  .zwc-related{
      background: #1A1A1A;
      color: #fff;
      max-width: 98%;
      margin: auto;
      border-radius: 4px;
  }

  .zwc-related h2,.zwc-related .rhs ul li h3{
      color: #fff;
  }

  .zwc-related .lhs p{
      max-width: 350px;
  }
  .zwc-bottom a.act-btn.cta-btn{

  }


/* Style Ends */





@media only screen and (max-width: 1499px) {
  .middle-animated .zb-wrapper:before{
      left: -80px;
      opacity: 1;
  }
  .middle-animated .zb-wrapper:after{
      right: -80px;
      opacity: 1;
  }
}
@media only screen and (max-width: 1399px) {
  .zsection {
      padding:100px 0
  }
  .fea-details ul{
      justify-content:flex-start;
  }
  .zwc-banner.zsection{
      padding-bottom: 0;
  }
  .middle-animated .zb-wrapper:before {
      left: -54px;
  }
  .middle-animated .zb-wrapper:after {
      right: -54px;
  }
}
@media only screen and (max-width: 1199px) {
  .zsection h1 {
      font-size: 34px;
  }
  .zsection h2{
      font-size: 28px;
  }
  .zsection h3 {
      font-size: 23px;
  }
  .fea-details ul{
      justify-content:center;
  }
  .zb-wrapper:before, .zb-wrapper:after{
      display: none;
  }
  .break{
      display: none;
  }
}
@media only screen and (max-width: 991px) {
  .zsection h1 {
      line-height: 1.3;
      font-size: 30px;
  }
  .zsection h2{
      font-size: 25px;
  }
  .zsection h3 {
      font-size: 21px;
  }
  .zsection {
      padding:60px 0
  }
  .zb-wrapper img {
      max-width: 100%;
  }
  .zassit-inner img{
      max-width: 90%;
      margin: auto;
  }
  .top-wrap {
      margin-bottom: 48px;
  }
  .zassit-inner .rhs ul li h3 {
      font-size: 20px;
      line-height: 26px;
  }
  .fea-details ul li {
      padding: 36px 32px;
  }
  .zwc-cont p {
      font-size: 15px;
      line-height: 1.6;
  }

  .zwc-related .lhs{
      padding-top: 64px;
  }
  .zwc-related .zassit-inner .lhs p, .zwc-related .zassit-inner .rhs ul li p {
      font-size: 15px;
      line-height: 1.6;
  }

}

@media only screen and (max-width: 767px) {
  .content-wrap {
      max-width:560px
  }

  .flex-wrap {
      flex-direction: column;
      justify-content: center;
      gap: 32px;
  }
  .zcol-4 {
      max-width: calc(100% - 6px);
      flex-basis: calc(100% - 6px);
  }

  .fea-cont ul.flex-wrap{
      flex-direction: unset;
  }
  .zassit-inner .lhs,.zwc-related .lhs{
      text-align: center;
  }
  .fea-details ul li {
      width: 100%;
      height: auto;
      padding: 36px 32px;
  }
  .zassit-inner .lhs ul {
      margin-top: 30px;
      margin-bottom: 40px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
  }
  .zassit-inner img {
      max-width: 70%;
  }
  .zassit-inner .rhs ul li{
      max-width: 90%;
      margin: auto;
  }
  .zwc-related .lhs{
      padding-top: 0px;
  }
  .zwc-related .lhs p {
      max-width: 90%;
      margin: auto;
      text-align: center;
  }
  /* .zwc-cont.ztac{
      text-align: unset;
  } */
  
  .zwc-cont ul {
      max-width: 314px;
      margin: auto auto 26px;
  }
  .zwc-cont ul li{
      font-size: 16px;
      padding-left: 16px;
  }
  .zwc-cont ul li:nth-child(2){
      padding-left: 24px;
  }
  .zwc-cont ul li:before{
      left: -4px;
  }
  .zwc-cont ul li:nth-child(2):before{
      left: 3px;
  }
  .zwc-edits h2 {
      font-size: 25px;
      max-width: 90%;
      margin: auto auto 20px;
  }

}
@media only screen and (max-width: 420px) {
  .zwc-cont ul li:nth-child(2) {
      padding-left: 10px;
  }
}
@media only screen and (min-width: 1200px) {
  .zwc-related .lhs{
      padding-top: 64px;
  }
  .zwc-banner p {
      font-size: 20px;
  }
  .break {
      display:block
  }

  h1 {
      font-size: 56px;
      line-height: 64px;
      letter-spacing: --1.12px;
      font-family: var(--zf-secondary-medium)
  }

  p {
      font-size: 16px;
      line-height: 1.6;
      letter-spacing: -.32px;
      font-family: var(--primaryfont-regular);
  }

  h2 {
      color: #010101;
      font-size: 48px;
      line-height: 56px;
      letter-spacing: -0.96px;
      font-family: var(--primaryfont-semibold)
  }

  h3 {
      color: #000;
      font-size: 24px;
      line-height: 32px;
      letter-spacing: -0.48px;
      font-family: var(--zf-secondary-medium)
  }


}

@media only screen and (min-width: 992px) {
  .zcol-wrap-1 {
      max-width:calc(12.5% - 6px);
      flex-basis: calc(12.5% - 6px)
  }

  .zcol-wrap-2 {
      max-width: calc(25% - 6px);
      flex-basis: calc(25% - 6px)
  }

  .zcol-wrap-3 {
      max-width: calc(37.5% - 6px);
      flex-basis: calc(37.5% - 6px)
  }

  .zcol-wrap-4 {
      max-width: calc(50% - 6px);
      flex-basis: calc(50% - 6px)
  }

  .zcol-wrap-5 {
      max-width: calc(62.5% - 6px);
      flex-basis: calc(62.5% - 6px)
  }

  .zcol-wrap-6 {
      max-width: calc(75% - 6px);
      flex-basis: calc(75% - 6px)
  }

  .zcol-wrap-7 {
      max-width: calc(87.5% - 6px);
      flex-basis: calc(87.5% - 6px)
  }

  .zcol-wrap-8 {
      max-width: calc(100% - 6px);
      flex-basis: calc(100% - 6px)
  }
}

@media only screen and (min-width: 768px) {
  .zcol-8 {
      flex-basis:calc(100% - 6px)
  }

  .zcol-7 {
      max-width: calc(87.5% - 6px);
      flex-basis: calc(87.5% - 6px)
  }

  .zcol-5 {
      max-width: calc(62.5% - 6px);
      flex-basis: calc(62.5% - 6px)
  }

  .zcol-4{
      max-width: calc(50% - 6px);
      flex-basis: calc(50% - 6px)
  }

  .zcol-3 {
      max-width: calc(37.5% - 6px);
      flex-basis: calc(37.5% - 6px)
  }

  .zcol-2 {
      max-width: calc(25% - 6px);
      flex-basis: calc(25% - 6px)
  }
}





/* others */