h1,h2,h3{
  font-family: var(--zf-primary-regular);
}
a {
  display: inline-block;
}
p,.zt_banner p,
.zt-banner p{
  font-size: 21px;
  letter-spacing: -0.18px;
  line-height: 1.7;
}

p{
  font-size: 18px;
}
img{
  display: block;
}
h1,h2{
  font-size: 46px;
  letter-spacing: -1.7px;
  line-height: 1.1;
}
h3{
  font-size: 42px;
  letter-spacing: -1.5px;
}
a{
color: #fff;
}
.banner{
background-color: #efeaff;
}
section .content-wrap {
padding: 90px 0;
}
.banner .content-wrap{
padding-top: 40px;
text-align: center;
}
.banner h1{
max-width: 60%;
margin: 0 auto 15px;
}
.banner p{
width: 70%;
margin: 0 auto 20px;
letter-spacing: -0.24px;
line-height: 1.6;
}
.zt_banimg{
width: 75%;
margin: 30px auto 0;
position: relative;
}
.ban_subImg1{
position: absolute;
top: auto;
bottom: 100px;
left: -150px;
}
.ban_subImg2{
position: absolute;
top: 175px;
right: -130px;
left: auto;
max-width: 260px;
}
.ztzia {
position: absolute;
top: -78px;
max-width: 110px;
left: 37%;
}
.watch-video-wrap {
    padding: 12px 30px;
    border: 1px solid #000;
    display: inline-flex
}

.watch-video {
    position: relative;
    background: 0;
    display: inline-block;
    color: #010101;
    margin: 0;
    padding: 0 0 0 30px;
    font-size: 15px;
    line-height: 1.5;
    cursor: pointer;
    text-transform: uppercase;
    font-family: var(--zf-primary-semibold),sans-serif
}

.watch-video:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #010101;
    border-radius: 100%
}

.watch-video:after {
    position: absolute;
    border-color: transparent transparent transparent #010101;
    border-style: solid;
    border-width: 5px 0 5px 7px;
    content: "";
    height: 0;
    left: 8px;
    top: 5px;
    width: 0
}
.btn-wrap {
    display: flex;
    align-items: center;
    column-gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}
/* banner section end */
.ztcen_wrap {
text-align: center;
margin-bottom: 50px;
}
.block1 p{
width: 70%;
margin: 0 auto 20px;
}
.tracker_img{
position: relative;
}
.tracker_tab{
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #edecfc;
padding-bottom: 15px;
margin-bottom: 40px;
position: relative;
}
.mov_line{
position: absolute;
top: auto;
bottom: 0;
height: 2px;
width: 201.852px;
left: 292.242px;
background-color: #f60014;
transition:all 1s ease;
}
.tracker_tab li{
padding: 0 30px;
color: #333;
font: 14px var(--zf-secondary-semibold);
text-transform: uppercase;
cursor: pointer;
position: relative;
}
.tracker.active{
position: relative;
opacity: 1;
visibility: visible;
transition: all .7s ease;
}
.tracker{
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
opacity: 0;
visibility: hidden;
transition: all .5s ease;
}
.img_wrap{
max-width: 1000px;
margin: 0 auto;
}
.tracker .pop_img{
position: absolute;
left: 0;
top: 33%;
}
.tracker .tag_title{
display: none;
}
/* block1 end */
.block2 .ztcen_wrap p{
max-width: 70%;
margin: 0 auto 20px;
}
.block1 .content-wrap,
.block2 .content-wrap{
padding-bottom: 0;
}
/* complete css for svg animation start */
.mob_res_slide ul {
display: flex;
justify-content: center;
width: 100%;
flex-wrap: wrap;
align-items: center;
margin-bottom: 30px;
}
.mob_res_slide ul li{
position: relative;
cursor: pointer;
padding: 5px;
border: 1px solid transparent;
transform: scale(.95);
border-radius: 50%;
transition: transform 1s ease;
}
.mob_res_slide ul li.active {
border: 1px solid #f2f4f8;
padding: 5px;
transform: scale(1);
transition: all 1s ease;
}
.mob_res_slide ul li.active svg {
position: absolute;
left: 0;
top: 0;
}
.mob_res_slide ul .zticon_wrap {
width: 82px;
height: 82px;
background-color: #f2f4f8;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/*  */
.mob_res_slide ul .zticon_wrap {
width: 82px;
height: 82px;
background-color: #f2f4f8;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.mob_res_slide ul .zticon_wrap:before{
content: "";
background: url(/sites/zweb/images/tables/templates/zt-temp-views-icons-sprite.png) no-repeat;
background-size: 120px auto;
background-position: -1px -1px;
display: block;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
width: 40px;
height: 40px;
}
.mob_res_slide ul .grid .zticon_wrap:before{
background-position: -79px -1px;
}
.mob_res_slide ul .kanban .zticon_wrap:before{
background-position: -1px -1px;
}
.mob_res_slide ul .gallery .zticon_wrap:before{
background-position: 0 -41px;
}
.mob_res_slide ul .form .zticon_wrap:before{
background-position: -41px -41px;
}
.mob_res_slide ul .calendar .zticon_wrap:before{
background-position:-40px -1px;
}
/* .zt_col_left ul .zticon_wrap.active {
background-color: #def2d3;
} */
.mob_res_slide ul .zticon_wrap.active {
background-color: #def2d3;
}
.mob_res_slide ul li img {
width: 50%;
}
/* animation css start */
.circle__spinner {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.mob_res_slide ul li.active svg {
position: absolute;
left: 0;
top: 0;
overflow: visible;
display: block;
}
.mob_res_slide ul li svg {
display: none;
}
.mob_res_slide ul li.active .zticon_wrap{
background-color: #DEF2D3;
transition: all .5s ease;
}
.mob_res_slide ul li .zticon_wrap svg {
display: block;
width: 50%;
transition: all 1s ease;
}
.mob_res_slide ul li.active .zticon_wrap svg path,
.mob_res_slide ul li.active .zticon_wrap svg rect,
.mob_res_slide ul li.active .zticon_wrap svg .st0{
fill-opacity: 1;
transition: all .5s ease;
}
.mob_res_slide ul li.active .zticon_wrap svg {
position: relative;
}
.circle__spinner.active .path {
stroke: hsl(210, 70, 75);
stroke-linecap: round;
animation: dash 4s ease-in-out;
animation-delay: 0s;
}
@keyframes dash {
0% {
stroke-dasharray: 1,180;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 150,180;
stroke-dashoffset: 0;
}
}
/* complete css for svg animation end */
.block2 .main_img_wrap{
max-width: 1000px;
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 0;
transform:scale(1) translateY(400px);
transition: transform 1s ease;
z-index: -1;
}
.block2 .main_img_wrap.deactive{
transform: scale(.5);
opacity: 1;
}
.block2 .main_img_wrap.active{
position: relative;
opacity: 1;
transform:scale(1) translateY(0px);
transition: transform 1s ease;
z-index: 2;
-webkit-animation: z-translate 3s infinite;
animation: z-translate 3s infinite;
}
.block2 .anim_img_wrap{
position: relative;
-webkit-perspective: 100px;
perspective: 100px;
}
.anim_img_wrap .subImg_sprite{
width: 50px;
height: 50px;
background-image: url(/sites/zweb/images/tables/zt-feature-overview-sprite.png);
background-repeat: no-repeat;
background-size: 650px;
background-position: 0 0;
position: absolute;
top: 0;
left:0;
animation: updown 10s linear infinite;
}
.view1 .subImg1,
.view2 .subImg1,
.view3 .subImg1,
.view4 .subImg1,
.view5 .subImg1{
background-position: -50px -2px;
top: auto;
left: -8%;
bottom: 0%;
animation-delay: 5s;
}
.view2 .subImg1{
background-position: -100px -2px;
}
.view3 .subImg1{
background-position: -150px -2px;
}
.view4 .subImg1{
background-position: -200px -2px;
}
.view5 .subImg1{
background-position: -250px -2px;
}
.view1 .subImg2,
.view2 .subImg2,
.view3 .subImg2,
.view4 .subImg2,
.view5 .subImg2{
background-position: -396px 0;
top: -7%;
left: auto;
right: -7%;
}
.view2 .subImg2{
background-position: -346px -2px;
}
.view3 .subImg2{
background-position: -446px -2px;
}
.view4 .subImg2{
background-position: -0 -0;
}
.view5 .subImg2{
background-position: -298px 0px;
width: 47px;
height: 56px;
}
.block2 .content-wrap{
overflow: visible;
}
@-webkit-keyframes updown {
0% {
  -webkit-transform:translateY(0);
  transform: translateY(0)
}

50% {
  -webkit-transform: translateY(-40px);
  transform: translateY(-40px)
}

100% {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}
}

@keyframes updown {
0% {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}

50% {
  -webkit-transform: translateY(-40px);
  transform: translateY(-40px)
}

100% {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}
}
/* block2 end */
.block3 .content-wrap{
max-width: 1280px;
}
.block3 h3{
width: 70%;
}
.ztinner{
display: flex;
justify-content: space-between;
align-items: center;
padding: 70px;
border-radius: 10px;
}
.block3 .ztinner{
background-color: #d8ede9;
}
.zt_col_left,.zt_col_right{
width: 50%;
}
.zt_col_left{
padding-right: 5%;
}
/* block3 end */
.block4::before{
content: "";
width: 100%;
height: 20%;
position: absolute;
left: 0;
top: auto;
bottom: 0;
background-color: #131934;
}
/* tag elements css start*/
.collaborators_img{
position: relative;
}
.tag_wrap li{
position: absolute;
font-size: 12px;
padding: 5px 10px;
background-color: #fff;
color: #1e69de;
border-radius: 50px;
top: 0;
left: 0;
font-family: var(--zf-secondary-medium);
animation: updown 10s linear infinite;
}
.tag_wrap li::before{
content: "";
width: 14px;
height: 16px;
position: absolute;
left: auto;
top: auto;
background-image: url(/sites/zweb/images/tables/zt-feature-overview-sprite.png);
background-repeat: no-repeat;
background-size: 700px;
background-position: -565px -10px;
}
.tag_wrap li:nth-child(1){
top: 68%;
left: -2%;
}
.tag_wrap li:nth-child(1):before,
.tag_wrap li:nth-child(2):before{
right: -8px;
transform: rotate(174deg);
bottom: -9px;
}
.tag_wrap li:nth-child(3):before{
left: -6px;
transform: rotate(-106deg);
bottom: -12px;
}
.tag_wrap li:nth-child(4):before{
right: -10px;
transform: rotate(-276deg);
top: -10px;
background-position: -581px -9px;
}
.tag_wrap li:nth-child(5):before{
left: -13px;
transform: rotate(-26deg);
top: -3px;
background-position: -595px -9px;
}
.tag_wrap li:nth-child(2){
top: 9%;
left: 23%;
animation-delay: 6s;
}
.tag_wrap li:nth-child(3){
top: 9%;
left: 73%;
animation-delay: 3s;
}
.tag_wrap li:nth-child(4){
top: 81%;
left: 32%;
color: #30916f;
}
.tag_wrap li:nth-child(5){
top: 81%;
left: 98%;
color: #ff5418;
animation-delay: 7s;
}
.record_screen{
position: relative;
}
.bgtag_wrap .img_tag{
width: 22px;
height: 22px;
background-image: url(/sites/zweb/images/tables/zt-feature-overview-sprite.png);
background-repeat: no-repeat;
background-size: 700px;
background-position: -652px -10px;
margin-right: 5px;
border: 1px solid #fff;
border-radius: 50%;
}
.bgtag_wrap .tag_name{
background-color: #3a6efa;
color: #fff;
padding: 5px 10px 5px 5px;
}
.bgtag_wrap .txt_tag{
font-family: var(--zf-secondary-semibold);
}
.bgtag_wrap li{
display: flex;
justify-content: space-between;
align-items: center;
}
.bgtag_wrap li:nth-child(1){
left: 7%;
top: 46%;
}
.bgtag_wrap li:nth-child(1)::before{
left: -7px;
top: -8px;
transform: rotate(-26deg);
background-position: -435px -7px;
}
.bgtag_wrap li:nth-child(2){
background-color: #d39a80;
left: auto;
right: 1%;
top: 74%;
animation-delay: 5s;
}
.bgtag_wrap li:nth-child(2):before{
left: -8px;
top: -7px;
transform: rotate(-32deg);
background-position: -449px -7px;
}
.bgtag_wrap li::before{
background-size: 500px;
}
/* tag elements css end*/
/*  */
.block4{
position: relative;
background-color: #e2ebfc;
}
.block4 .content-wrap{
padding-bottom: 0;
}
.block4 h3{
max-width: 53%;
margin: 0 auto 15px;
}
.block4 .ztcen_wrap p{
max-width: 86%;
margin: 0 auto 20px;
}
/* block4 end */
.block5{
background-color: #131934;
}
.block5 .content-wrap{
overflow: visible;
}
.automation_tooltip{
position: absolute;
left: -20px;
top: 20px;
color: #fff;
padding: 5px 7px;
background-color: #e3847c;
line-height: 1;
font-family: var(--zf-secondary-medium);
}
.automation_tooltip:before{
content: "";
left: auto;
right: 0;
top: 16px;
position: absolute;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid #e3847c;
border-bottom: 10px solid transparent;
}
.block5 .ztinner{
padding: 0;
flex-direction: row-reverse;
}
.block5 h3,.block5 p{
color: #fff;
}
.block5 .zt_col_left {
padding-right: 0%;
}
.block5 .zt_col_right {
padding-right: 5%;
position: relative;
}
.block5 .zt_col_left p{
color: #a8aed1;
}
/* block5 end */
.block6 .ztcen_wrap{
max-width: 55%;
margin: 0 auto 50px;
}
/* block6 end */
.zt-bottom-cta {
background: #131934;
text-align: center;
color: #fff;
}
/* bottom cta end */
@media only screen and (min-width: 1441px) {
  h1{
      font-size: 56px;
      letter-spacing: -2.2px;
  }
  h2{
      font-size: 46px;
  }
  h3{
      font-size: 53px;
      letter-spacing: -2.2px;
  }
}
@media only screen and (max-width: 1199px){
  h2{
      font-size: 42px;
      letter-spacing: -1.5px;
  }
  h3{
      font-size: 36px;
      letter-spacing: -1px;
  }
.tag_wrap li,
.anim_img_wrap .subImg_sprite{
display: none;
}
.block4::before{
display: none;
}
.block4 .content-wrap{
padding-bottom: 60px;
}
.collaborators_img{
width: 90%;
}
.zt_col_left,.block5 .zt_col_right{
padding-right: 0;
}
.block3 .ztinner{
flex-flow: column;
}
.zt_col_left, .zt_col_right{
width: 100%;
}
.zt_col_left{
margin-bottom: 40px;
}
.block3 .ztinner{
padding: 40px;
}
.block5 .ztinner{
flex-direction: column;
}
.automation_tooltip{
left: 0;
display: none;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px){
.mob_res_slide ul .zticon_wrap {
width: 72px;
height: 72px;
}
}
@media only screen and (max-width: 991px){
.banner h1,
.block2 .ztcen_wrap p,
.block6 .ztcen_wrap,
.block4 .ztcen_wrap p,
.block4 h3{
max-width: 100%;
}
.banner p,
.zt_banimg,
.block1 p,
.block6 .ztcen_wrap{
width: 100%;
}
}
@media only screen and (max-width: 767px){
    .btn-wrap {
        justify-content: flex-start;
        row-gap: 20px;
    }
  h1,h2{
      font-size: 36px;
      letter-spacing: -1px;
  }
  h3{
      font-size: 30px;
      letter-spacing: -0.5px;
  }
.tracker_tab{
display: none;
}
.block1 .img_wrap{
display: none;
}
.tracker.active .img_wrap{
display: block;
}
.tracker .tag_title{
display: block;
font-family: var(--zf-secondary-semibold);
padding: 5px 5px 20px;
margin: 20px 0;
border-bottom: 1px solid #e3e3e3;
}
.tracker.active .tag_title{
border-bottom: 2px solid #f60014;
}
.tracker{
position: relative;
opacity: 1;
visibility: visible;
}
.ztcen_wrap{
text-align: left;
}
.mob_res_slide ul{
justify-content: flex-start;
}
.mob_res_slide ul .zticon_wrap {
width: 62px;
height: 62px;
}
section .content-wrap{
padding: 60px 0;
}
}
@media only screen and (max-width: 650px){
.mob_res_slide ul .zticon_wrap {
width: 60px;
height: 60px;
}
.mob_res_slide ul .zticon_wrap:before{
transform: scale(0.8);
}
.block3 .ztinner{
padding: 20px;
}
}
@media only screen and (max-width: 400px){
  h1,h2{
      font-size: 30px;
      letter-spacing: -0.5px;
  }
  h3{
      font-size: 28px;
  }
.mob_res_slide ul .zticon_wrap:before{
  transform: scale(0.5);
}
  .mob_res_slide ul .zticon_wrap {
      width: 40px;
      height: 40px;
  }
}