:root{
  --gap-50 :25px;
}
.zbanner.zsection .content-wrap {
  padding-top: 0px;
}
.zbanner,.zw-product-header {
  background: transparent;
}
.zsection .content-wrap {
  padding: unset;
}
.umain .why-btm ul {
  display: none;
}
.zsection {
  padding: 120px 0;
}
.content-wrap{
  max-width: 1280px!important;
  margin: 0 auto;
}

a.act-btn.cta-btn, a.info-btn{
  visibility: visible;
  opacity: 1;
  font-size: 16px;
  margin-bottom: 16px;
  padding: 16px 46px;
  font-family: var(--primaryfont-semibold);
  border-radius: 5px;
  background: #f0483e;
  color: #fff;
  text-transform: uppercase;
  max-width: max-content;
}


.ztac{
  text-align: center;
}
.ztal{
  text-align: left;
}
.ztar{
  text-align: right;
}
.zd-flx{
  display: flex;
}

.zd-jc-ctr{
  justify-content: center;
}
.zd-jf-str{
  justify-content: flex-start;
}
.zd-jf-end{
  justify-content: flex-end;
}
.zd-jf-sp-ar{
  justify-content: space-around;
}
.zd-jf-sp-bt{
  justify-content: space-between;
}
.zd-jf-sp-evn{
  justify-content: space-evenly;
}


.zd-al-cntr{
  align-items: center;
}
.zd-al-fls{
  align-items: flex-start;
}
.zd-al-fle{
  align-items: flex-end;
}
.zd-fd-row{
  flex-direction: row;
}
.zd-fwrp{
  flex-wrap: wrap;
}
.zd-fn-wrp{
  flex-wrap: nowrap;
}


.zcl-gap-8{
  gap: 8px;
}
.zcl-gap-16{
  gap: 16px;
}
.zcl-gap-24{
  gap: 32px;
}
.zcl-gap-32{
  gap: 32px;
}
.zcl-gap-36{
  gap: 32px;
}
.zcl-gap-40{
  gap: 40px;
}
.zcl-gap-50{
  gap: 50px;
}
.zcl-gap-64{
  gap: 64px;
}
.zcl-gap-120{
  gap: 120px;
}




/* Stylesheet starts */

.zbanner a{

}
.zbanner.zsection{
  padding-top: 80px;
}
.zw-inner{
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.zb-last{
  font-family: var(--primaryfont-semibold);
  margin-bottom: 30px;
}

.zbanner .zbtm-wrap{
  max-width: 1100px;
  margin: 0 auto;
}
.card-wrap{
  background: #F8F3E7;
  border-radius: 10px;
  padding: 48px 40px;
  max-width: 532px;
  height: 100%;
  /* min-height: 740px; */
  box-sizing: border-box;
}
.card-wrap.card-rhs{
  background-color: #02553F;
  color: #fff;
}
.card-cont{
  padding-bottom: 40px;
}
.card-cont p{
  max-width:448px;
  margin-bottom: 0;
  font-size: 16px;
  line-height: 27px;
}
.card-img{
  margin-bottom: 40px;
  text-align: center;
}
.card-wrap.card-rhs .card-img{
  padding: 0px 0 40px;
}
.card-wrap .tagline{
  text-align: center;
  margin-bottom: 0;
  font-style: italic;
}

.video-wrap {
  position: relative;
}
.video-wrap .play-icon {
  position: absolute;
  content: "";
}
.video-wrap .play-icon {
  display: block;
  width: 80px;
  height: 89px;
  background: url(/sites/zweb/images/one/sprite.svg) no-repeat -254px 1px / 400px;
  left: 50%;
  top: 50%;
  transform: translate(-50px, -50px);
  cursor: pointer;
}


.zub-suite{
  padding-bottom: 80px;
}


.text-anim {
  position: relative;
  color: #FFD500;
  background: #045540;
  border-radius: 5px;
  padding: 0 8px;
  display: inline-block;
}
.middle-animated .text-anim {
  background-position: 0 100%;
}
.zub-suite .f{
  color: transparent;
  background-clip: text;
  background-size: 500%;
  animation: color 10s linear;
  background: rgb(2,0,36);
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,121,44,1) 38%, rgba(255,213,0,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes color {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}
.ubs-inner{
  margin-top: 80px;
}
.ubs-inner .ubs-features{
  max-width: calc(18% - 6px);
  flex-basis: calc(18% - 6px);
}
.ubs-inner .ubs-features:not(.zf-list5){
 position: relative;
 padding-right: 0px;
}
.ubs-inner .ubs-features:after{
  position: absolute;
  content: '';
  width: 1px;
  height: 100%;
  background: rgb(214 214 214 / 50%);
  right: 0;
  bottom: 0;
}
.zf-list5:after{
  display: none;
}
.ubs-inner .ubs-features p{
  max-width: 95%;
}
.ubs-inner .zu-icon{
  width: 34px;
  height: 36px;
  margin-bottom: 5px;
  background: url(/sites/zweb/images/one/sprite.svg) no-repeat 5px 3px / 285px;
  display: inline-block;
}
.ubs-inner .zu-icon.zu-icon1{
  background-position: 5px 3px;
}
.ubs-inner .zu-icon.zu-icon2{
  background-position: -32px 3px;
  width: 42px;
}
.ubs-inner .zu-icon.zu-icon3{
  background-position: -78px 3px;
}
.ubs-inner .zu-icon.zu-icon4{
  background-position: -113px 3px;
}
.ubs-inner .zu-icon.zu-icon5{
  background-position: -146px 3px;
}
.why-btm{
  max-width: 690px;
  margin: auto;
  position: relative;
}
.why-btm p{
  max-width: 680px;
}
.why-btm a{
  margin: 30px 0 20px;
}
.why-btm ul li{
  position: relative;
}
.why-btm ul li:before{
  position: absolute;
  content: '';
  width: 15px;
  height: 10px;
  background: url(/sites/zweb/images/one/sprite.svg) no-repeat -360px -5px / 420px;
  left: -19px;
  top: 7px;
}
.top-circle{
  position: relative;
}
.why-btm:before,.why-btm:after{
  position: absolute;
  content: '';
  width: 120px;
  height: 100px;
  top: 30%;
  opacity: 0;
  transform: scale(.6) rotate(-45deg);
  transition: all .7s ease-in;
}

.why-btm:before{
  background: url(/sites/zweb/images/one/l-hand.png) no-repeat center left / cover;
  left:-110px;
}
.why-btm:after{
  background: url(/sites/zweb/images/one/r-hand.png) no-repeat center right / cover;
  right: -110px;
  left: unset;
  transform: scale(.6) rotate(45deg);
}

.middle-animated .why-btm:before,.middle-animated .why-btm:after{
  opacity: 1;
  transform: scale(1) rotate(0deg);
}






/* scroll start */
.scroll-inner{
  margin-top: 60px;
}
.scroll-inner .zcol-3 {
      max-width: calc(31.5% - 6px);
      flex-basis: calc(31.5% - 6px);
}
.zwc-scroll{
  background: #045540;
  color: #fff;
}

.sbox h3 span{
  color:#FFD500;
  opacity: 0;
  transition: all .7s ease-in-out;
}
.sbox1 h3 span{
  transition-delay: .7s;
}
.sbox2 h3 span{
  transition-delay: .8s;
}
.sbox3 h3 span{
  transition-delay: .9s;
}
.bottom-animated .sbox h3 span{
  opacity: 1;
}
.sbox h3 .arrow{
  display: inline-block;
  background: url(/sites/zweb/images/one/sprite.svg) no-repeat -345px 0 / 380px;
  width: 26px;
  height: 25px;
  vertical-align: middle;
}
.sbox p{
  max-width: 90%;
}
/* scroll Ends */

.zbottom{
  background: #F8F3E7;
}




/* tab  start*/

.fl-wrap .tab-cont ,.tab-list:not(.active){
  display: none;
}



.fea-inner{
  min-height: 590px;
}
.tab-item{
  max-width: 90%;
  cursor: pointer;
  padding: 15px;
}
.tab-item h4{
  position: relative;
}


.tab-item.active{
  /* background: #F8F3E7; */
  border-radius: 10px;
  /* padding: 26px; */
  display: block;
}
.tab-cont.active{
  display: block;
}
.tab-cont p{
  margin-bottom: 0;
  max-width: 90%;
}
/* .tab-cont.active p{
  display: block;
} */
.rhs .fr-wrap {
  background: #F8F3E7;
  border-radius: 10px;
  min-height: 550px;
  position: relative;
}
.rhs .fr-wrap img{
  position: absolute;
  display: block;
  left: 50%;
  top:50%;
  transform: translate(-50%, -50%);
  max-width: 70%;
}
.rhs .fr-wrap .data-tab img{
  bottom: 1px;
  top: unset;
  transform: translate(-50%, 0px);
}
.tab-list .active{
  display: block;
}
.zactive-line{
  width: 100%;
  height: 2px;
  display: block;
  background: #e5e5e5;
  position: relative;
  margin-top: 35px;
}
.zactive-line:before {
  content: '';
  width: 0;
  height: 2px;
  background: #000;
  top: 0;
  left: 0;
  position: absolute;
}
.active .zactive-line:before {
  transition: width 5s linear;
  width: 100%;
}
/* tab-Ends */

/* Stylesheet Ends */



/* width specification */

@media only screen and (max-width: 1399px){
  .ubs-inner .ubs-features {
      max-width: calc(22% - 6px);
      flex-basis: calc(22% - 6px);
  }
  .card-wrap.card-rhs .card-img {
    padding: 0 0 30px;
  }
  .card-wrap{
    padding: 48px 40px;
  }
}
@media only screen and (max-width: 1199px){ 
  .ubs-inner .ubs-features {
      max-width: calc(30% - 6px);
      flex-basis: calc(30% - 6px);
  }
  .ubs-inner {
      justify-content: flex-start;
  }
  .zsection{
      padding: 80px 0;
  }
  .zfea-wrap .fbox {
      padding: 30px 24px 0;
  }
  .ubs-inner {
      margin-top: 40px;
  }
  .card-wrap.card-rhs .card-img {
    padding: 0 0 30px;
  }
  .card-wrap{
    min-height: 760px;
    padding: 48px 40px;
  }

}
@media only screen and (max-width: 992px) and (max-width: 1199px){ 
  .zfea-wrap .fbox1:before {
      background-size: 530px;
  }
  .zfea-wrap .fbox2:before {
      height: 180px;
      background-size: 234px;
  }
  .zfea-wrap .fbox3:before {
      height: 159px;
      background-size: 280px;
  }
  .zfea-wrap .fbox4:before {
      width: 200px;
      height: 217px;
      background-size: 200px;
  }
  h3{
      font-size: 24px!important;
  }
  .zbtm-wrap .zd-al-cntr{
      align-items: flex-start;
  }
  .why-btm {
      max-width: 580px;
      margin: auto auto 15px;
  }
  
}
@media only screen and (min-width: 992px){
  .zfea-wrap .zcol-5 {
      max-width: calc(62.5% - 25px);
      flex-basis: calc(62.5% - 25px);
  }
  .zfea-wrap .zcol-3 {
      max-width: calc(37.5% - 25px);
      flex-basis: calc(37.5% - 25px);
  }
}

@media only screen and (min-width: 768px){
  .zbanner h1 .break {
      display: block;
  }
  .zbanner h1 {
      font-size: 64px;
      font-family: var(--primaryfont-bold);
      letter-spacing: -2.5px;
  }
}



@media only screen and (min-width: 768px) and (max-width: 840px) {
  .fl-wrap .tab-item{
      min-height: 400px!important;
  }
}

@media only screen and (max-width: 991px){
  .why-btm {
      max-width: 500px;
      margin: auto auto 15px;
  }

  .zbanner h1{
      font-size: 56px;
  }
  .zsection h2{
      font-size: 32px;
  }
  .zsection h3{
      font-size: 23px;
  }
  .video-wrap .play-icon {
      width: 60px;
      height: 66px;
      background: url(/sites/zweb/images/one/sprite.svg) no-repeat -191px 1px / 300px;
      left: 50%;
      top: 50%;
      transform: translate(-40px, -40px);
  }
  .zsection{
      padding: 60px 0;
  }
  .ubs-inner .ubs-features{
      max-width: calc(30% - 6px);
      flex-basis: calc(30% - 6px);
  }

  .ubs-inner .ubs-features p {
      max-width: 300px;
  }
  .ubs-inner .ubs-features:after{
      display: none;
  }
  .why-btm:before {
      background: url(/sites/zweb/images/one/l-hand.png) no-repeat center left / 95px;
      left: -70px;
      top: 32%;
  }
  .why-btm:after {
      background: url(/sites/zweb/images/one/r-hand.png) no-repeat center right / 95px;
      right: -70px;
      left: unset;
      top: 32%;
  }
  .scroll-inner .zcol-3{
      max-width: calc(50% - 6px);
      flex-basis: calc(50% - 6px);
  }
  .scroll-inner {
      margin-top: 30px;
  }
  .scroll-inner .sbox p{
      max-width: 335px;
      margin-bottom: 32px;
  }
  .zfea-wrap .zcol-5,.zfea-wrap .zcol-3 {
      max-width: calc(100% - 6px);
      flex-basis: calc(100% - 6px);
  }
.zub-suite{
  padding-bottom: 0;
}
  .zfea-wrap .fbox {
      padding: 40px 40px 0;
  }
  .zfea-wrap{
      max-width: 750px;
      margin: auto;
  }
  .fbox p {
      max-width: 100%;
  }
  .fea-inner .rhs{
      display: none;
  }
  .fl-wrap .tab-cont{
      display: block;
  }
  .active .zactive-line:before {
      transition: width 5s linear;
      width: 100%;
  }
  .zactive-line:before {
      width: 100%;
      height: 1px;
      background: none;
  }
  .zactive-line{
      background: none; 
      margin-top: 0;
  }
  .fl-wrap{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
  }
  .tab-item {
      cursor: pointer;
      padding: 15px;
      width: 47%;
      min-height: 335px;
      background: #F8F3E7;
      border-radius: 10px;
  }
  .tab-item{
      padding: 40px;
  }
  .tab-item.active{
      padding: 30px;
  }
  .fea-inner .zcol-4 {
      max-width: calc(100% - 6px);
      flex-basis: calc(100% - 6px);
  }
  .tab-cont p{
      max-width: 100%;
  }
  .zbtm-wrap{
      align-items: flex-start;
  }
  .zbtm-wrap h3{
      font-size: 21px;
  }
  .sbox h3{
      font-size: 24px;
  }
  .why-btm p {
      max-width: 480px;
      margin: auto;
  }
 
.card-wrap.card-rhs .card-img {
  padding: 0 0 30px;
}
.card-wrap{
  min-height: 780px;
  padding: 48px 40px;
}

}

@media only screen and (max-width: 767px){
  
  .z-bottom-cta-menu.withCW a {
      width: calc(100% - 50px);
  }
  .zd-fd-cl{
      flex-direction: column;
  }
  .zd-fd-cr{
      flex-direction: column-reverse;
  }
  .zd-fd-rr{
      flex-direction: row-reverse;
  }
  .ztop-wrap.zcl-gap-32{
    gap: 0px;
  }
  .zcl-gap-32 {
      gap:24px;
  }
  .zcl-gap-36{
      gap: 32px;
  }
  .zbanner{
      text-align: center;
  }
 .zbanner h1 .break{
      display: none;
      text-align: center;
  }
  .zbanner .zbtm-wrap p{
      font-size: 15px;
  }
  .zbtm-wrap p{
      margin: auto;
  }
  .ubs-inner{
      flex-direction: unset;
  }
  .ubs-inner .ubs-features{
      max-width: calc(45% - 6px);
      flex-basis: calc(45% - 6px);
  }
  .zd-al-fls{
      align-items: flex-start;
  }
  .zfea-wrap .zcol-3{
      max-width: calc(100% - 6px);
      flex-basis: calc(100% - 6px);
  } 
  .why-btm:before, .why-btm:after{
      display: none;
  }
  .scroll-inner .zcol-3{
      max-width: calc(100% - 6px);
      flex-basis: calc(100% - 6px);
  }

  .scroll-inner .sbox p{
      max-width: 500px;
      margin: auto;
  }
  .zwc-scroll {
      text-align: center;
  }
  .scroll-inner .sbox:not(.sbox3){
      margin-bottom: 36px;
  }
  .zfea-wrap .fbox:before{
      display: none;
  }
  .zfea-wrap .fbox{
      min-height: 100%;
      padding: 40px 40px;
  }
  .zfeatures.zsection{
      padding-top: 0;
  }
  .zcl-gap-50 {
      gap: 36px;
  }
  .ubs-inner {
      margin-top: 40px;
  }
  .fea-inner .zcol-4 {
      max-width: calc(100% - 6px);
      flex-basis: calc(100% - 6px);
  }

  .tab-item {
      width: 80%;
      margin: auto;
      min-height: 100%;
      padding: 40px;
  }
  .zub-suite h2{
      font-size: 24px!important;
  }
  .zbtm-wrap{
      align-items: center;
      gap: 32px;
  }
  .card-wrap {
    min-height: auto;
    padding: 40px 40px;
}

}
@media only screen and (max-width: 580px){
  .content-wrap{
      max-width: 560px;
  }
  .ubs-inner{
      flex-direction: column;
  }
  .ubs-inner .ubs-features{
      max-width: calc(100% - 6px);
      flex-basis: calc(100% - 6px);
  }
  .tab-item {
      width: 100%;
      margin: auto;
      min-height: 100%;
  }
}


@media only screen and (max-width: 1200px){

  .break{
      display: none;
  }
  h3{
      font-size: 23px!important;
  }
}

@media only screen and (min-width: 1200px){
  .zbanner h1 {
      font-size: 72px;
      font-family: var(--primaryfont-bold);
      letter-spacing: -2.5px;
  }
  .ztop-wrap p{
      font-size: 20px;
  }
  .zsection p{
      font-size: 18px;
      letter-spacing: -.25px;
      list-style: none;
      line-height: 32px;
  }
  .zbanner .zbtm-wrap p{
      font-size: 16px;
      line-height:1.6;
  }
  .zsection h2{
      font-size: 48px;
      line-height: 1.2;
      letter-spacing: -1.5px;
      font-family: var(--primaryfont-bold); 
  }
  .zsection h3{
      font-size: 32px;
      letter-spacing: -0.5px;
      font-family: var(--primaryfont-bold);
  }
  .zsection h4{
      letter-spacing: -0.5px;
  }
  .why-btm h2{
      font-size: 56px;
  }

  .zsection h4{
      font-size: 24px;
      font-family: var(--primaryfont-semibold); 
  }
  .zsection h3{
      font-size: 32px;   
  }

  h1,h2,h3,h4,h5,h6{
      line-height: normal;
  }
  
}

@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);
  }
  .tab-item h4:after{
      position: absolute;
      content: '';
      width: 23px;
      height: 23px;
      background: url(/sites/zweb/images/one/sprite.svg) no-repeat -237px -29px / 281px;
      right: 0;
      top: 4px;
      z-index: 1;
  }
  .tab-item.active h4:after{
      position: absolute;
      content: '';
      width: 23px;
      height: 23px;
      background: url(/sites/zweb/images/one/sprite.svg) no-repeat -260px -29px / 281px;
      background-size: 281px;
      right: 0;
      top: 4px;
      z-index: 1;
  }
}

@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);
  }

}