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

a.lm-link{
  color: var(--zwc-link-clr);
}
a .extra-arr-elem{
  align-items: center;
  content: "";
  width: 22px;
  height: 21px;
  background-color: var(--zwc-link-clr);
  display: flex;
  border-radius: 50%;
  position: absolute;
  right: -7px;
  z-index: 0;
}
  .zt-home img{
    display: block;
  }
  section .content-wrap {
    padding: 90px 0;
  }
.zt-home h2{
      font-size: 46px;
      letter-spacing: -1.7px;
      line-height: 1.1;
  }
  .zt-home h3{
      font-size: 42px;
      letter-spacing: -1.5px;
  }
  section a{
      color: var(--whiteclr);
  }
  .zt-banner{
  background-color: #efeaff;
  }
  .zt-banner h1 .hone-break{
    display: block;
    line-height: 0;
  }
  .zt-banner .content-wrap{
      padding-top: 40px;
      text-align: center;
      padding-bottom: 0;
  }
  .zt-banner p{
  width: 55%;
  margin: 0 auto 20px;
  letter-spacing: -0.24px;
  line-height: 1.6;
  }
  .zt-banimg{
  width: 75%;
  margin: 60px 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;
  }
  .ban-subImg2 .video-container{
  display: flex;
  border-radius: 15px;
  box-shadow: -10px 0px 30px #362C4B1A;
  overflow: hidden;
  }
  .ztzia {
      position: absolute;
      top: -78px;
      max-width: 110px;
      left: 37%;
  }
  /* watch video */
  .btn-wrap{
    display: flex;
    align-items: center;
    column-gap: 20px;
    flex-wrap: wrap;
    justify-content: center;

  }
  .act-btn.cta-btn{
    visibility: visible;
    opacity: 1;
  }
  .watch-video-wrap{
    display: inline-flex;
  }
  .watch-video {
    position: relative;
    background: 0;
    display: inline-block;
    color: var(--primary-color);
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    cursor: pointer;
    text-transform: uppercase;
    font-family: var(--zf-primary-semibold), sans-serif;
    padding: 12px 30px 12px 50px;
    border: 1px solid #000;
  }
  .watch-video:before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
    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: 28px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 0;
  }
  /* watch video */
  /*banner text flip sec start */
  /* .zt-banner h1 span{
    display: block;
  } */
  .zt-banner h1 span.flip{
    font-family: var(--zf-secondary-bold);
    position: relative;
    display: block;
    color: #3b9374;
    overflow:hidden;
  }
  .flip>em {
    color: #3b9374;
    padding: 4px 0;
    opacity: 0;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    margin: auto;
    font-style: normal
  }
  
  .flip .is-visible {
    position: relative;
    opacity: 1;
    -webkit-animation: push-in 1.3s;
    -moz-animation: push-in 1.3s;
    animation: push-in 1.3s
  }
  
  .flip .is-hidden {
    -webkit-animation: push-out 1.3s;
    -moz-animation: push-out 1.3s;
    animation: push-out 1.3s;
  }
  .str-opa{
    opacity: 0 !important;
  }
  @keyframes push-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%)
    }
  
    60% {
        opacity: 1;
        -webkit-transform: translateY(10%);
        -moz-transform: translateY(10%);
        -ms-transform: translateY(10%);
        -o-transform: translateY(10%);
        transform: translateY(10%)
    }
  
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
  }
  
  @keyframes push-out {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
  
    60% {
        opacity: 0;
        -webkit-transform: translateY(110%);
        -moz-transform: translateY(110%);
        -ms-transform: translateY(110%);
        -o-transform: translateY(110%);
        transform: translateY(110%)
    }
  
    100% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        -moz-transform: translateY(100%);
        -ms-transform: translateY(100%);
        -o-transform: translateX(100%);
        transform: translateY(100%)
    }
  }
  /* banner section end */
  /* features section start */
  /* .zt-features-wrap {
  background: transparent linear-gradient(179deg, #FFFFFF 0%, #F2F4F8 100%) 0% 0% no-repeat padding-box;
  } */
  .line-elem-wrap{
    position: absolute;
    left: -100px;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    align-items: self-start;
    z-index: 0;
    gap: 33%;
  }
  .hor-line .line-elem {
    width: 107px;
    height: 25%;
    border-bottom: 1px solid #ddd;
    z-index: 0;
}
.ver-line{
  flex-flow: row;
  top: -50px;
  width: 100%;
  left: 0;
}
.hor-line .line-elem:first-child{
  border-top: 1px solid #ddd;
  border-bottom: 0;
}
.ver-line .line-elem {
  height: 50px;
  border-left: 1px solid #ddd;
  z-index: 0;
}
.zt-feature-box-software .ver-line .line-elem {
  border-right:  1px solid #ddd;
  border-left: 0;
}
  .zt-features-wrap h2 {
    font-size:53px;
    text-align: center;
    margin-bottom: 50px;
}
.zt-features-wrap .content-wrap{
  padding-bottom: 0;
  max-width: 1440px;
  text-align: center;
}
.zt-features-container {
  display: inline-flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      position: relative;
      padding: 30px 100px 0 100px;
} 
.zt-feature-box-software .hor-line{
  align-items: flex-end;
  left: auto;
  right: -100px;
}
.zt-feature-box-software .ver-line{
left: auto;
right:0;
flex-flow: row-reverse;
}
.zt-feature-box {
    background-color: #131836;
    position: relative;
    border-radius: 8px;
    max-width: 500px;
    width: 45%;
    text-align: left;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    z-index: 1;
    min-width: 459px;
}
.zt-feature-box .inner{
  z-index: 1;
  background-color: #131836;
}
.zt-feature-box p {
    font-size: 26px;
    line-height: 1.5;
    color: var(--whiteclr);
    padding: 30px 40px;
    margin: 0;
}
.zt-feature-box p span{
  font-family: var(--primaryfont-semibold);
  color: #A1F4D4;
}
.zt-feature-box img {
    width: 100%;
    margin-top: 10px;
}
.ss-illus{
  padding-left: 40px;
}
.software-illus{
  padding-right: 40px;
  position: absolute;
  top: auto;
  bottom: 0;
  background-color: #131836;
  z-index: 1;
}
  /* features section end */

  /* accordian section start */
  .accordian-container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px;
  }
  .accordian-video .inner-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 90px 30px;
    background-color: #F2F4F8;
  }
  .row-reverse-accordian .inner-wrap{
    flex-flow: row-reverse;
  }
  .cen-left-right-align .item-title-wrap{
    text-align: center;
    max-width: 880px;
    margin: 0 auto;
  }
  /* cen-align css */
  .cen-align .inner-wrap{
    flex-flow: column-reverse;
  }
  .cen-align .inner-content,
   .cen-align .image-container{
    width: 100%;
  }
  .cen-align .tablist{
    display: flex;
    justify-content: space-between;
  }
  .cen-align .tablist-item{
    width: calc(33.33% - 20px);
    flex-flow: column;
  }
  .cen-align .item-title-wrap{
    display: flex;
    text-align: left;
    max-width: unset;
    margin-bottom: 30px;
    gap: 20px;
  }
  .cen-align .image-container{
    margin-bottom: 30px;
    min-height: 400px;
  }
  .cen-align .image-container .active{
    position: relative;
  }
  /* cen-align css */
  .item-title-wrap p{
    max-width: 560px;
    margin: 0 auto 60px;
  }
  .title-tag{
    font-size: 16px;
    padding: 10px 20px;
    background-color: #FF9E08;
    display: inline-flex;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    margin-bottom: 30px;
    font-family: var(--zf-primary-semibold);
  }
  .accordian-video .inner-content {
    width: 50%;
  }
  .accordian-video h2{
    text-align: center;
    margin-bottom: 50px;
  }
 .item-title-wrap h3 {
    font-size: 72px;
    margin:0 0 20px 0;
    line-height: 1.1;
    font-family: var(--zf-primary-semibold);
    letter-spacing: -2px;
  }
  .flex-row{
    display: flex;
    align-items: center;
    gap: 15px;
  }
  .tablist {
    padding: 0;
    margin: 0;
  }
  .item-title{
    margin-bottom: 15px;
  }
  .item-description p{
    margin-bottom: 20px;
    font-size: 16px;
    color: var(--secondary-color);
  }
  .tablist-item:first-child .item-description{
    display: block;
  }
  .item-description{
    display: none;
  } 
  .tablist-item {
    display: block;
    align-items: flex-start;
    padding: 30px 0 25px 0;
    gap: 20px;
    border-bottom: 1px solid #e0e0e0;
  }
  .tablist-item.active{
    border-bottom: 2px solid  var(--zwc-link-clr);
  }
  .tablist-item .icon {
    font-size: 24px;
    width: 25px;
    height: 25px;
    background: url(/sites/zweb/images/producticon/crm.svg) no-repeat;
    display: block;
  }
  .item-link::before{
    content: "";
    display: block;
    margin: 30px auto;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-left: 2px solid  #fff;
    transform: rotate(135deg);
    position: absolute;
    right: 0;
    z-index: 1;
}
.item-link::after{
  content: "";
  display: block;
  width: 2px;
  height: 9px;
  background-color: #fff;
  transform: rotate(90deg) translate(6px, 4px);
  right: 0px;
  top: 0px;
  position: absolute;
  z-index: 1;
}
  .text-content h4 {
    margin: 0 0 10px 0;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -0.5px;
    font-family: var(--zf-primary-medium);
    cursor: pointer;
    position: relative;
    padding-right: 30px;
  }
  .text-content h4::after{
    content: '';
    position: absolute;
    left: auto;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    transform: translateY(-50%) rotate(45deg);
    transition: transform .5s ease;
    right: 0;
  }
  .tablist-item.active .text-content h4::after{
    transform: translateY(-50%) rotate(-135deg); 
  }
  .item-link {
    font-size: 14px;
    color: var(--text-btn-clr);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    padding-right: 28px;
    font-family: var(--zf-primary-semibold);
  }
  .image-container {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    position: relative;
    min-height: 500px;
  }
  .image-container .source-tag {
    max-width: 90%;
    height: auto;
    border-radius: 8px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    display: none;
    right: 0;
    margin: auto;
  }
  .image-container .active{
    opacity: 1;
    display: block;
    transition: all 1s ease;
  }
  /*  */
  /* integration section start */
  .integration {
    margin: 0 auto;
    background-color: #F2F4F8;
}
.integration .inner-content-wrap{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 50px;
}
.integration .inner-content-wrap p{
  max-width: 500px;
}
.integration .inner-content-wrap h2{
  max-width: 550px;
}
.integration .tag {
  background-color: #ddf2d3;
  color: #00754c;
  font-size: 10px;
  font-family: var(--primaryfont-semibold);
  padding: 2px 8px;
  border-radius: 2px;
  display: inline-flex;
  width: max-content;
  margin: 0 auto 20px;
}

.integration h2{
    margin-bottom: 10px;
}

.integration p {
    margin-bottom: 10px;
}

.integration .table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    border: 1px solid #ddd;
    position: relative;
}

.integration .row {
    display: flex;
    position: relative;
    width: 100%;
}
.integration .cell:last-child{
  border-right: 1px solid #ddd;;
}
.integration .row:first-child .cell{
  border-bottom: 0;
  border-top: 0;
  height: 30px;
}
.integration-table{
  padding: 40px 50px 0 50px;
}
/* .integration .content-wrap{
  padding-bottom: 0;
} */
.integration .row .cell:first-child::after,
.integration .row .cell:last-child::after{
  content: "";
    border: none;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    left: -50px;
    width: 50px;
    position: absolute;
    height: calc(100% + 2px);
}
.integration .row .cell:last-child::after{
  left: auto;
  right: -40px;
}
.integration .row:first-child .cell:first-child::after,
.integration .row:first-child .cell:last-child::after{
  display: none;
}
.integration .row:nth-child(3) .cell:first-child::after,
.integration .row:nth-child(3) .cell:last-child::after,
.integration .row:nth-child(4) .cell:first-child::after,
.integration .row:nth-child(4) .cell:last-child::after{
border-top: none;
}
.integration .cell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:30px 20px;
  font-size: 18px;
font-family: var(--primaryfont-semibold);
  position: relative;
  border: 1px solid #ddd;
  border-bottom: 0;
  border-right: 0;
  gap: 10px;
}

.integration .cell img {
    margin-right: 10px;
}
.integration .google-drive::before,
.integration .zoho-workdrive::before,
.integration .zoho-crm::before,
.integration .dropbox::before,
.integration .google-drive::after {
  content: "";
  position: absolute;
  border: 2px solid #EA4336;
  top: 0;
  left: 0;
  width: calc(100%);
  height: 100%;
}
.integration .google-drive::before { border: 2px solid #EA4336; }
.integration .zoho-workdrive::before { border: 2px solid #05AC47; }
.integration .zoho-crm::before { border: 2px solid #236DB4; }
.integration .dropbox::before { border: 2px solid #0161FF; }
/* Grid Lines */
.integration .table::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
}

    /* accordian section end */
    /* web mobile feature start */
    .mob-app-feature {
      background-color: #F2F4F8;
    }
    .mob-app-feature .hero {
      padding: 50px 20px;
  }
  .ztreal-time-collaboration{
    position: relative;
  }
  .ztreal-time-collaboration::before{
    content: "";
    position: absolute;
    top: auto;
    left: 0;
    background-color: #F2F4F8;
    width: 100%;
    height: 50%;
    bottom: 0;
  }
  .mob-app-feature .hero h2 {
      font-size: 32px;
      font-family: var(--primaryfont-semibold);
      margin-bottom: 10px;
  }
  
  .mob-app-feature .zt-features {
    display: flex;
        justify-content: center;
        padding: 40px 20px;
        align-items: flex-end;
        position: relative;
  }
  .mob-app-inner{
    position: relative;
    max-width: 750px;
  }
  .mob-app-feature .zt-feature-image {
      position: absolute;
  }
  .zt-feature-image.zt-ios-wrap{
    right: 90px;
    top: 140px;
  }
  .zt-feature-image.zt-android-wrap{
    left: 100px;
    top:210px;
  }
  .mob-app-feature .zt-feature-image .zt-ios{
    max-width: 235px;
    box-shadow: rgba(0, 0, 0, 0.2) 2px 4px 30px;
    border-radius: 38px;
  }
  .mob-app-feature .zt-feature-image .zt-android{
    max-width: 230px;
    box-shadow: rgba(0, 0, 0, 0.2) 2px 4px 30px;
  }
  .mob-app-feature .zt-feature-image img {
      margin: 0 auto;
  }
  .mob-app-feature .overlay-text {
      position: absolute;
      background-color: #fff;
      padding: 5px 10px;
      border-radius: 10px;
      box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
      font-size: 14px;
  }
  
  .mob-app-feature .upload {
      top: 20%;
      left: 10%;
      box-shadow:rgba(0,0,0,0.1) 2px 4px 15px;
  }
  .mob-app-feature .inner-content-wrap{
    text-align: center;
    margin: 0 auto;
  }
  .mob-app-feature .inner-content-wrap p{
  max-width: 630px;
  margin: 0 auto 20px;
  }
  .mob-app-feature .inner-content {
      display: flex;
      gap: 80px;
      padding: 100px 20px 0px;
      margin: 0 auto;
  }
  .mob-app-feature .inner-content .zt-feature{
    width: 33.33%;
  }
  .break-block{
    display: block;
  }
  .mob-app-feature .zt-feature h3 {
      font-size: 20px;
      margin-bottom: 10px;
  }
  .mob-app-feature .anim-img{
    position: absolute;
    top: 0;
    left: 0;
  }
  .mob-app-feature .zt-scan{
    top: 3%;
    left: auto;
    right: -110px;
    border-radius: 7px;
    width: 100%;
  }
  .mob-app-feature .zt-record{
    top: 45%;
    left: -35%;
    animation-delay: 1s;
    max-width: 200px;
    }
    .mob-app-feature .upload{
    top: 28%;
    left: auto;
    right: -30%;
    animation-delay: .5s;
    box-shadow: rgba(0, 0, 0, 0.2) 2px 4px 30px;
    }
    @keyframes floating {
      0% {
          transform: translateY(0);
      }
      50% {
          transform: translateY(-10px);
      }
      100% {
          transform: translateY(0);
      }
  }
  
  .anim-img {
      animation: floating 5s linear infinite;
  }
  .mob-app-feature .zt-feature p {
      color: var(--secondary-color);
  }
.mob-app-img{
  display: none;
}
  /* web mobile feature end */

 /* work-together section start */
    .bg-tag{
      width: 80px;
      height: 30px;
      position: absolute;
      top: 0;
      background-color: #3AA37F;
      border-radius: 100px;
      bottom: 0;
      margin: auto;
      display: flex;
      align-items: center;
      font-size: 10px;
      justify-content: flex-start;
      color: #fff;
      padding-left: 35px;
      font-family: var(--primaryfont-medium);
      opacity: 0;
      transition: opacity 1s ease;
    }
    .zttooltip-arrow {
      position: absolute;
      width: 30px;
      height: auto;
      display: inline-block;
      left: auto;
      right: -17px;
      top: -18px;
      transform: rotate(86deg);
    }
    .zttooltip-arrow svg{
      width: 100%;
      height: auto;
    }
    @keyframes floating {
      from { transform: translate(0,  0px); }
      65%  { transform: translate(0, 15px); }
      to   { transform: translate(0, -0px); }    
    }
    .rt_fix_img{
      z-index: 1;
    }
      .work-together .content-wrap{
        overflow: visible;
        padding-top: 0;
      }
    .work-together .badge {
      color: #08724f;
      background-color: #DDF2D3;
    }
    .ztcen-wrap {
      text-align: center;
      margin-bottom: 50px;
    }
    .work-together .ztcen-wrap p {
      width: 57%;
      margin: 0 auto 20px;
    }
    .event-coordinators-cntnt,
    .event-coordinators{
      text-align: center;
      position: relative;
      width: 80%;
      margin: 0 auto;
      z-index: 9;
      min-width: 1008px;
      max-width: 1008px;
    }
    .coordinators-title{
        font-family: var(--zf-splfontserif-regular);
    font-size: 27px;
    letter-spacing: -0.81px;
    line-height: 1;
    color: #000;
    padding-bottom: 40px;
    }
    .event-coordinators-cntnt small {
      font-size: 15px;
      letter-spacing: -0.3px;
      margin-bottom: 7px;
      color: #797979;
    }
    .event-coordinators-cntnt strong {
      font-family:var(--zf-splfontserif-regular);
      font-size: 27px;
      letter-spacing: -0.81px;
      line-height: 1;
      color: #000000;
      padding-bottom: 40px;
    }
    .event-coordinators ul {
      display: inline-block;
      width: 100%;
      text-align: center;
      margin: 0 auto;
      max-width: 500px;
    }
    .event-coordinators ul li .coordinators {
      width: 155px;
      height: 155px;
      border-radius: 100%;
      float: left;
      margin: 5px;
      position: relative;
      display: flex;
      align-items: center;
      transition: all 1s ease;
    }
    .event-coordinators ul li .coordinators.coordinator3{
      opacity: 1;
    }
    .event-coordinators.active ul li .coordinators.coordinator3{
      opacity: 0;
    }
    .event-coordinators ul li .coordinators img {
      position: relative;
      top: 30px;
    }
    .event-coordinators ul li .coordinator1 img {
      position: relative;
      top: 30px;
      width: 90%;
    }
    .event-coordinators ul li .coordinator1{
      height: 315px;
      border-radius: 30%;
      border-radius: 100px;
    }
    .event-coordinators ul li .coordinator1 .img-wrap {
      height: 100%;
      border-radius: 100px;
      background-color: #d4eee9;
    }
    .event-coordinators.active ul li .coordinator1 .img-wrap{
        height: 155px;
    }
    .event-coordinators ul li .coordinator2 .img-wrap{
      background-color: #ffdcf8;
    }
    .event-coordinators ul li .coordinator3 .img-wrap{
      background-color: #f9cccc;
    }
    .event-coordinators ul li .coordinator4 .img-wrap{
      background-color: #e9e5d9;
    }
    .event-coordinators ul li .coordinator5 .img-wrap{
      background-color: #cbe4fd;
    }
    .event-coordinators ul li .img-wrap {
      width: 155px;
      height: 155px;
      border-radius: 100%;
      position: relative;
      overflow: hidden;
      transform: scale(1);
      transform-origin: left;
      margin-left: 0px;
      transition: all .5s ease;
      }
      .event-coordinators.active ul li .img-wrap {
        transform: scale(.15);
      }
    .coordinators-inner-wrap{
      position: relative;
    }
    .active .bg-tag{
      opacity: 1;
      transition: opacity .9s ease;
    }
    .coordinators.active{
      animation: opa .8s ease;
    }
    .coordinator2 .bg-tag{
      background-color: #C970AE;
    }
    .coordinator4 .bg-tag{
      background-color: #D39A80;
    }
    .coordinator5 .bg-tag{
      background-color: #3098E5;
    }
    .event-coordinators ul li .coordinators .tooltip {
      border-radius: 100px;
      color: #00946C;
      background-color: #EDFFFC;
      border: 1px solid #D6EFEB;
      padding: 5px 10px;
      position: absolute;
      display: block;
      font-size: 10px;
      opacity: 1;
      transition: all 1s ease;
    }
    .event-coordinators.active ul li .coordinators .tooltip{
      opacity: 0;
    }
    .tooltip {
      position: relative;
    }
    .event-coordinators ul li .coordinators .tooltip.col1 {
      top: 0;
      color: #005ADB;
      border-color: #D8F1FC;
      background-color: #EAF8FF;
    }
    .event-coordinators ul li .coordinators .tooltip.col2 {
      color: #FF4100;
      border-color: #FFDFD6;
      background-color: #FAE8E2;
      top: auto;
      bottom: 0;
      right: 0;
      left: auto;
    }
    .event-coordinators ul li .coordinators .tooltip.col3 {
      color: #005ADB;
      border-color: #D8F1FC;
      background-color: #EAF8FF;
      top: auto;
      bottom: 0;
      right: 0;
      left: auto;
    }
    .event-coordinators ul li .coordinators .tooltip.col4 {
      top: 15px;
      color: #005ADB;
      border-color: #D8F1FC;
      background-color: #EAF8FF;
      left: -15px;
    }
    .zttooltip-arrow {
      position: absolute;
      width: 30px;
      height: auto;
      display: inline-block;
      left: auto;
      right: -17px;
      top: -18px;
      transform: rotate(86deg);
    }
    .bg-tag .zttooltip-arrow{
      width: 50px;
      right: -37px;
      top: -10px;
      transform: rotate(60deg);
    }
    .coordinator4 .bg-tag .zttooltip-arrow,.coordinator2 .bg-tag .zttooltip-arrow{
      right: auto;
      left: -40px;
      top: -10px;
      transform: rotate(10deg);
    }
    .tooltip.col1 .zttooltip-arrow,
    .tooltip.col4 .zttooltip-arrow {
      top: auto;
      bottom: -17px;
      transform: rotate(175deg);
      right: -14px;
    }
    .tooltip.col2 .zttooltip-arrow,
    .tooltip.col3 .zttooltip-arrow {
      transform: rotate(-15deg);
      left: -17px;
      top: -15px;
    }
    .zttooltip-arrow svg {
      width: 100%;
      height: auto;
      display: inline-block;
    }
    .event-coordinators ul li:nth-child(1) .tooltip {
      left: -20px;
      top: auto;
      bottom: 70px;
    }
    .zteve-assign {
      display: inline-flex;
      flex-flow: column;
      align-items: center;
      justify-content: flex-start;
      position: absolute;
      top: auto;
      bottom: 0;
      left: 20px;
      opacity: 1;
      transition: all 1s ease;
      animation: floating 6s ease infinite;
    }
    .stats{
      opacity: 1;
      transform: scale(1);
      transition: all 1s ease;
    }
    .scale_active .stats{
      opacity: 0;
      transition: all 1s ease;
    }
    .zteve-assign span {
      font-size: 12px;
      color: #674547;
      margin-bottom: 6px;
    }
    .zteve-assign .badge {
      font-size: 8px;
      background-color: #1c62db;
      color: #ffffff;
      padding: 5px 10px;
      line-height: 1;
    }
    .zteve-assign .wrap {
      width: 65px;
      height: 65px;
      border-radius: 50%;
      background-color: #ffdcf8;
      overflow: hidden;
      border: 8px solid #f4f4f4;
      margin: 0 auto 6px;
    }
    .zteve-assign .wrap img {
      width: 95%;
      height: auto;
      position: relative;
      top: 5px;
    }
    .zteve-assign.ztright {
      top: 0;
      left: auto;
      right: 0;
      animation-delay: 1s;
    }
    .ztrelationship .ztinner .badge {
      color: #08724f;
      background-color: #fff;
  }
    .zteve-assign.ztleft .zttooltip-arrow {
      left: auto;
      right: -10px;
      width: 50px;
      top: -30px;
    }
    .zteve-assign .bg-tag{
    padding-left: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transition: all .5s ease;
    background-color: #2e00c6;
    opacity: 0;
    }
    .scale_active .bg-tag{
      opacity: 1;
      transition: all 1s ease;
    }
    .zteve-assign.ztright .bg-tag{
      top: -190px;
    }
    .zteve-assign .bg-tag img{
    width: 20px;
    margin-right: 5px;
    }
    .zteve-assign.ztright .zttooltip-arrow {
      left: -20px;
      width: 50px;
      top: -20px;
      transform: rotate(-15deg);
    }
    .zteve-assign .bg-tag .zttooltip-arrow {
      left: -40px;
          top: -10px;
          transform: rotate(10deg);
      }
    .coordinators{
      height: 100%;
    }
    #my-video {
      min-width: 967px;
      max-width: 967px;
      width: 100%;
        height: auto;
        display: block;
        position: relative;
        z-index: 0;
        margin: 0 auto;
        border-radius: 5px;
    }
    /* end */
   /* testimonial section start */
  .zt-testimonial{
    text-align: center;
  }
  .sliderview{
    max-width: 850px;
    margin: 0 auto;
  }
  .slick-next.slick-disabled, .slick-prev.slick-disabled{
    opacity: 1;
    cursor: text;
  }
  .slick-next.slick-disabled::before, .slick-prev.slick-disabled::before{
      opacity: .3;
      cursor: text;
  }
  .slick-next, .slick-prev{
    position: absolute;
    top: calc(50% - 25px);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
        transform: translate(0,0);
    box-shadow: 0px 13px 36px #A5BCD029;
    border: 1px solid #E7EBEF;
  }
  .slick-next:before,
   .slick-prev:before{
      background: url(/sites/zweb/images/tables/templates/zt-template-arrow.svg) no-repeat;
      background-size: 100%;
      background-repeat: no-repeat;
      width: 9px;
      height: 12px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
   }
   .slick-next:hover:after, .slick-next:hover:before,
    .slick-prev:hover:after, .slick-prev:hover:before{
      background: url(/sites/zweb/images/tables/templates/zt-template-arrow.svg) no-repeat;
      background-size: 100%;
      background-repeat: no-repeat;
     }
   .slick-prev:before{
    transform: rotate(-135deg);
    left: 4px;
    top: -1px;
  }
  .slick-next:before{
    transform: rotate(45deg);
    left: 0px;
    top: 3px;
  }
  .slick-prev:after,
  .slick-next:after{
  display: none;
  }
  .zt-testimonial .content-wrap{
    border-bottom: 1px solid #B5C7EB;
  }
  .double-quotes{
    margin: 0;
    width: 40px;
    display: inline-block;
  }
  .zt-testimonial p{
    margin-bottom: 15px;
  }
  .test-dis{
    font-family: var(--zf-splfontserif-regular);
    font-size: 22px;
    color: #000;
  }
  .slick-list{
    width: 90%;
    margin: 0 auto;
  }
  .slider-item{
    margin: 0 auto;
  }
  .zt-testimonial-author{
    margin-top: 50px;
  }
  .zt-testimonial-author p{
    margin-bottom: 0;
    font-size: 20px;
    font-family: var(--zf-secondary-medium);
  }
  .zt-testimonial-author .author-role{
    font-size: 16px;
  }
  .zt-testimonial-author-img{
    margin: 0 auto 20px;
    width: 100px;
    position: relative;
    height: 100px;
    display: block;
    border-radius: 50%;
    background-image: url(/sites/zweb/images/tables/zt-solution-operations-pardip-rai.png);
    background-color: #3B867A;
    background-position: 0 10px;
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .fabrice-vanegas .zt-testimonial-author-img{
    background-image: url(/sites/zweb/images/tables/zt-solutions-testimonial-fabrice-vanegas.png);
  }
  .jill-costelow .zt-testimonial-author-img{
    background-image: url(/sites/zweb/images/tables/zt-solution-marketing-jill-costelow.png);
  }
  .pardip-rai .zt-testimonial-author-img{
    background-image: url(/sites/zweb/images/tables/zt-solution-operations-pardip-rai.png);
  }
    .madhan-karky .zt-testimonial-author-img{
    background-image: url(/sites/zweb/images/tables/zt-testimonial-madhan-karky.png);
  }
  .eduardo-beracasa .zt-testimonial-author-img{
    background-image: url(/sites/zweb/images/tables/zt-solution-hr-eduardo-beracasa.png);
  }
  .andy-etcheto .zt-testimonial-author-img{
    background-image: url(/sites/zweb/images/tables/zt-solution-sales-andy-etcheto.png);
  }
  .zt-testimonial-author-img span{
    font-size: 18px;
  }
  /* testimonial section end */
    /* block4 start */
    .ztreal-time-collaboration h4{
      text-align: center;
    }
    .ztreal-time-collaboration .content-wrap{
      background-color: #ededfc;
      border: 1px solid #ededfc;
      border-radius: 10px;
      padding: 50px;
    }
    .ztreal-time-collaboration .mob-enable{
      display: none;
      padding-bottom: 30px;
      margin: 0;
    }
      /* block4 end */
   /*****block8 Template Section Starts *****/
   .dis-block {
     display: block;
   }
   .templates {
     background-color: #131836;
     text-align: center;
   }
   .hor-slider-wrap{
    position: relative;
    background-color: #f2f4f8;
   }
   .hor-slider-wrap::before{
    content: "";
    width: 100%;
    height: calc(50% - 0px);
    position: absolute;
    left: 0;
    top: 0;
    background-color: #131836;
   }
   .templates .badge,
   .mobile_app .badge {
     background-color: #d9e8d9;
   }
   .templates h3 {
     color: #ffffff;
     line-height: 1.1;
   }
   .templates p.sub-text {
     color: #b9bdd8;
     font-size: 24px;
     line-height: 1.5;
     margin-bottom: 30px;
   }
   .zt-marketing,
   .zt-hr,
   .zt-sales,
   .zt-finance,
   .zt-personal,
   .zt-operation,
   .zt-product,
   .zt-event,
   .zt-project{
     border: 1px solid #e5e5ec;
     border-radius: 5px;
     margin: 0 5px;
     background-color: #ffffff;
     text-align: center;
   }
   /*  */
   .hor-slider {
     max-width: 1200px;
     width: 90%;
     overflow: hidden;
     position: relative;
     margin: 0 auto; 
     padding: 0;
   }
   .hor-slider ul {
     list-style: none;
     padding: 0;
     width: 85%;
     margin: 0 auto;
   }
   .slick-prev{
    left: -60px;
   }
   .slick-next {
    right: -60px;
}
   .hor-slider li .zt-decoration {
     border-radius: 5px;
     padding: 60px 45px;
     margin: 5px 5px 5px;
   }
   .hor-slider .slick-list{
    width: 100%;
   }
   .hor-slider li p{
     padding: 20px;
     -webkit-font-smoothing:initial !important;
     color: #252C4A;
     font-size: 18px;
     letter-spacing: -0.6px;
     margin-bottom: 0;
   }
   .zt-decoration img {
     width: auto;
     display: flex;
     height: auto;
   max-width:80%;
   margin:0 auto;
   }
   .violet-decoration {
     background-color: #EEEEFF;
   }
   .biege-decoration {
     background-color: #FFF3E1;
   }
   .green-decoration {
     background-color: #E3FCF4;
   }
   .pink-decoration {
     background-color: #FFEEEE;
   }
   .oparation-decoration {
     background-color: #E1F9F7;
   }
   .project-decoration {
    background-color: #E1F9F7;
  }
   .event-decoration{
    background-color: #eef;
   }
   .product-decoration {
     background-color: #FFF8D4;
   }
   .marketing-decoration {
     background-color: #E3F6FF;
   }
   /*****block8 Template Section Ends *****/
.other-lang .zt-testimonial {
    display: none;
}

.i18n-ar a .extra-arr-elem {left: -7px;right: unset;}
.i18n-ar .ban-subImg1 { right: -150px; left: unset; }
.i18n-ar .ban-subImg2 { left: -130px; right: auto; }
.i18n-ar .ztzia { right: 37%; left: unset; }
.i18n-ar .flip>em { left: 0; right: 0; }
.i18n-ar .line-elem-wrap { right: -100px; left: unset; }
.i18n-ar .ver-line { right: 0; left: unset; }
.i18n-ar .ver-line .line-elem { border-right: 1px solid #ddd; border-left: unset; }
.i18n-ar .zt-feature-box-software .ver-line .line-elem { border-left: 1px solid #ddd; border-right: unset; border-right: 0; border-left: unset; }
.i18n-ar .zt-features-wrap h2 { text-align: center; }
.i18n-ar .zt-features-container { padding: 30px 100px 0 100px; }
.i18n-ar .zt-feature-box-software .hor-line { left: -100px; right: auto; }
.i18n-ar .zt-feature-box-software .ver-line { left: 0; right: auto; }
.i18n-ar .ss-illus { padding-right: 40px; padding-left: unset; }
.i18n-ar .software-illus { padding-left: 40px; padding-right: unset; }
.i18n-ar .accordian-video h2 { text-align: center; }
.i18n-ar .item-title-wrap h3 { margin: 0 0 20px 0; }
.i18n-ar .tablist-item { padding: 30px 0 25px 0; }
.i18n-ar .item-link::before {left: 0;right: unset;transform: rotate(315deg);}
.i18n-ar .item-link::after {transform: rotate(270deg) translate(-6px, 4px);left: 0;right: unset;}
.i18n-ar .text-content h4 { margin: 0 0 10px 0; padding-left: 30px; padding-right: unset; }
.i18n-ar .text-content h4::after {left: 0;right: auto;}
.i18n-ar .item-link { padding-left: 28px; padding-right: unset; }
.i18n-ar .image-container .source-tag { left: 0; right: 0; }
.i18n-ar .integration .cell:last-child { border-left: 1px solid #ddd; border-right: unset; }
.i18n-ar .integration-table { padding: 40px 50px 0 50px; }
.i18n-ar .integration .row .cell:first-child::after, .i18n-ar .integration .row .cell:last-child::after { right: -50px; left: unset; }
.i18n-ar .integration .row .cell:last-child::after { left: -40px; right: auto; }
.i18n-ar .integration .cell { border-left: 0; border-right: unset; }
.i18n-ar .integration .cell img { margin-left: 10px; margin-right: unset; }
.i18n-ar .integration .google-drive::before, .i18n-ar .integration .zoho-workdrive::before, .i18n-ar .integration .zoho-crm::before, .i18n-ar .integration .dropbox::before, .i18n-ar .integration .google-drive::after { right: 0; left: unset; }
.i18n-ar .ztreal-time-collaboration::before { right: 0; left: unset; }
.i18n-ar .zt-feature-image.zt-ios-wrap { left: 90px; right: unset; }
.i18n-ar .zt-feature-image.zt-android-wrap { right: 100px; left: unset; }
.i18n-ar .mob-app-feature .upload { right: 10%; left: unset; }
.i18n-ar .mob-app-feature .anim-img { right: 0; left: unset; }
.i18n-ar .mob-app-feature .zt-scan { left: -110px; right: auto; }
.i18n-ar .mob-app-feature .zt-record { right: -35%; left: unset; }
.i18n-ar .mob-app-feature .upload { left: -30%; right: auto; }
.i18n-ar .bg-tag { padding-right: 35px; padding-left: unset; }
.i18n-ar .zttooltip-arrow { left: -17px; right: auto; }
.i18n-ar .event-coordinators ul { text-align: center; }
.i18n-ar .event-coordinators ul li .coordinators { float: right; }
.i18n-ar .event-coordinators ul li .img-wrap { margin-right: 0; margin-left: unset; }
.i18n-ar .event-coordinators ul li .coordinators .tooltip.col2 { left: 0; right: auto; }
.i18n-ar .event-coordinators ul li .coordinators .tooltip.col3 { left: 0; right: auto; }
.i18n-ar .event-coordinators ul li .coordinators .tooltip.col4 { right: -15px; left: unset; }
.i18n-ar .zttooltip-arrow { left: -17px; right: auto; }
.i18n-ar .bg-tag .zttooltip-arrow { left: -37px; right: unset; }
.i18n-ar .coordinator4 .bg-tag .zttooltip-arrow, .i18n-ar .coordinator2 .bg-tag .zttooltip-arrow { left: auto; right: -40px; }
.i18n-ar .tooltip.col1 .zttooltip-arrow, .i18n-ar .tooltip.col4 .zttooltip-arrow { left: -14px; right: unset; }
.i18n-ar .tooltip.col2 .zttooltip-arrow, .i18n-ar .tooltip.col3 .zttooltip-arrow { right: -17px; left: unset; }
.i18n-ar .event-coordinators ul li:nth-child(1) .tooltip { right: -20px; left: unset; }
.i18n-ar .zteve-assign { right: 20px; left: unset; }
.i18n-ar .zteve-assign.ztright { left: 0; right: auto; }
.i18n-ar .zteve-assign.ztleft .zttooltip-arrow { left: -10px; right: auto; }
.i18n-ar .zteve-assign .bg-tag { padding-right: 5px; padding-left: unset; }
.i18n-ar .zteve-assign .bg-tag img { margin-left: 5px; margin-right: unset; }
.i18n-ar .zteve-assign.ztright .zttooltip-arrow { right: -20px; left: unset; }
.i18n-ar .zteve-assign .bg-tag .zttooltip-arrow { right: -40px; left: unset; }
.i18n-ar .slick-next, .i18n-ar .slick-prev { transform: translate(0,0); }
.i18n-ar .ztreal-time-collaboration h4 { text-align: center; }
.i18n-ar .hor-slider-wrap::before { right: 0; left: unset; }
.i18n-ar .zt-banner .content-wrap, .i18n-ar .zt-features-wrap .content-wrap, .i18n-ar .cen-left-right-align .item-title-wrap, .i18n-ar .mob-app-feature .inner-content-wrap, .i18n-ar .ztcen-wrap, .i18n-ar .event-coordinators-cntnt, .i18n-ar .event-coordinators, .i18n-ar .zt-testimonial, .i18n-ar .templates, .i18n-ar .zt-marketing, .i18n-ar .zt-hr, .i18n-ar .zt-sales, .i18n-ar .zt-finance, .i18n-ar .zt-personal, .i18n-ar .zt-operation, .i18n-ar .zt-product, .i18n-ar .zt-event, .i18n-ar .zt-project { text-align: center; }
.i18n-ar .zt-banner .content-wrap *, .i18n-ar .zt-features-wrap .content-wrap *, .i18n-ar .cen-left-right-align .item-title-wrap *, .i18n-ar .mob-app-feature .inner-content-wrap *, .i18n-ar .ztcen-wrap *, .i18n-ar .event-coordinators-cntnt *, .i18n-ar .event-coordinators *, .i18n-ar .zt-testimonial *, .i18n-ar .templates *, .i18n-ar .zt-marketing *, .i18n-ar .zt-hr *, .i18n-ar .zt-sales *, .i18n-ar .zt-finance *, .i18n-ar .zt-personal *, .i18n-ar .zt-operation *, .i18n-ar .zt-product *, .i18n-ar .zt-event *, .i18n-ar .zt-project * { text-align: center; }
.i18n-ar .zt-feature-box, .i18n-ar .zt-feature-box .content-wrap p, .i18n-ar .zt-feature-box .content-wrap *, .i18n-ar .zt-feature-box .content-wrap p span { text-align: right; }
.i18n-ar .cen-align .item-title-wrap ,.i18n-ar .cen-align .item-title-wrap *{ text-align: right; }

.i18n-ar .zt-bottom-cta * {
    text-align: center;
}



/* new updated css start */

/* ========================================
   BASE STYLES
======================================== */

img {
    display: block;
  }
  
  /* ========================================
     HERO SECTION
  ======================================== */
  
  .zwc-hero-section {
    background-color: #efeaff;
    padding: 20px 0 0px;
    position: relative;
    overflow: hidden;
  }
  
  .zwc-hero-content {
    max-width: 1440px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
  }
  
  /* Hero Heading */
  .zwc-heading-group {
    position: relative;
    margin-bottom: 20px;
  }
  
  .zwc-heading-group h1 {
    font-family: var(--primaryfont-semibold);
    font-size: 60px;
    color: #111111;
    letter-spacing: -1.8px;
    line-height: 1;
    max-width: 650px;
    margin: 0 auto;
  }
  
  .zwc-highlight-word {
    background-color: #d0c1ff;
    border: 2px solid #6142c1;
    border-radius: 10px;
    padding:0px 11px 3px;
    display: inline-block;
    margin: 0;
  }
  
  /* Hero Features List */
  .zwc-features-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
  }
  
  .zwc-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .zwc-feature-icon {
    width: 32px;
    height: 32px;
    background-color: white;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  
  .zwc-feature-icon span {
    width: 18px;
    height: 18px;
    /* background-size: cover;
    background-position: center;
    background-repeat: no-repeat; */
  }
  
  .ban-icon{
    background: url("/sites/zweb/images/tables/homepage/tables-database-sprite-icons.svg") no-repeat;
    /* background: url("../images/tables-database-sprite-icons.svg") no-repeat; */
  }
  .zwc-database-icon {
    background-position: 0 0;
  }
  
  .zwc-spreadsheet-icon {
    background-position: -22px 0;
  }
  
  .zwc-ai-icon {
    background-position: -45px 0;
  }
  
  .zwc-feature-text {
    font-size: 20px;
    color: #000000;
    letter-spacing: -0.4px;
    font-family: var(--zf-secondary-medium);
  }
  
  .zwc-divider {
    width: 1px;
    height: 30px;
    background-color: #C3BFD6;
  }
  
  /* Hero CTA Buttons */
  .btn-wrap {
    display: flex;
    align-items: center;
    column-gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .watch-video-wrap {
    display: inline-flex;
  }
  
  .watch-video {
    position: relative;
    background: 0;
    display: inline-block;
    color: var(--primary-color);
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    cursor: pointer;
    text-transform: uppercase;
    font-family: var(--primaryfont-semibold);
    padding: 12px 30px 12px 50px;
    border: 1px solid #000;
  }
  
  .watch-video:before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
    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: 28px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 0;
  }
  
  /* Hero Images Container */
  .zwc-hero-images {
    position: relative;
    max-width: 1440px;
    margin: 0px auto 0;
  }
  
  .zwc-main-table {
    position: relative;
    margin: 0 auto;
    top: 90px;
  }
  
  /* Side images for overlapping effect */
  .zwc-side-image-1 {
    position: absolute;
    top: 180px;
    left: 149px;
    width: 238px;
  }
  
  .zwc-side-image-2 {
    position: absolute;
    top: 208px;
    right: 185px;
    width: 229px;
  }
  
  .zwc-side-image-3 {
    position: absolute;
    bottom: 50px;
    left: 163px;
    width: 225px;
  }
  
  /* ========================================
     TOOL SECTION
  ======================================== */
  
  /* .zwc-tool-section {
    background-image: url("/sites/zweb/images/tables/homepage/tool-section-bg.svg");
    background-size: cover;
    text-align: center;
  } */
  
  .zwc-tool-section h2 {
    font-size: 50px;
    color: #111111;
    letter-spacing: -1.5px;
    margin: 0 0 60px;
    max-width: 767px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Tool Cards */
  .zwc-tool-cards {
    display: flex;
    gap: 10px;
    max-width: 1190px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .zwc-tool-cards .img-wrap {
    display: block;
  }
  
  .zwc-tool-card {
    flex: 1;
    background-color: #131836;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  
  .zwc-tool-card p {
    font-size: 24px;
    text-align: left;
    padding: 30px 20px 50px 30px;
    color: #fff;
    letter-spacing: -0.48px;
    line-height: 1.45;
    margin: 0;
    position: relative;
    z-index: 2;
  }
  
  .zwc-tool-card:first-child p {
    letter-spacing: -0.32px;
  }
  
  .zwc-highlight-green {
    color: #a1f4d4;
  }
  
  .zwc-highlight-green-2 {
    color: #a2f4d4;
  }
  
  /* Tool card backgrounds */
  .zwc-tool-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 101.64%;
    background-position: 0% 99.85%;
    background-repeat: no-repeat;
    z-index: 1;
  }
  
  /* .zwc-tool-card:nth-child(1)::after {
    background-image: url("/sites/zweb/images/tables/homepage/tool-card-bg-1.png");
  }
  
  .zwc-tool-card:nth-child(2)::after {
    background-image: url("/sites/zweb/images/tables/homepage/tool-card-bg-2.png");
  }
  
  .zwc-tool-card:nth-child(3)::after {
    background-image: url("/sites/zweb/images/tables/homepage/tool-card-bg-3.png");
    background-size: 100.17% 101.81%;
    background-position: bottom;
  } */
  
  /* ========================================
     INTEGRATION SECTION
  ======================================== */
  
  .zwc-integration-section {
    background-color: #f2f4f8;
    /* padding: 120px 0 150px; */
  }
  
  .zwc-integration-container {
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
  }
  
  /* Integration Header */
  .zwc-integration-header {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 40px;
  }
  
  .zwc-integration-badge {
    background-color: #ddf2d3;
    color: #00754c;
    padding: 4px 6px 3px 6px;
    font-family: var(--primaryfont-semibold);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: -0.3px;
    display: inline-block;
    margin-bottom: 35px;
  }
  
  .zwc-integration-title {
    font-size: 50px;
    color: #111111;
    letter-spacing: -1.5px;
    line-height: 1.15;
    margin: 0;
  }
  
  .zwc-integration-right {
    width: 436px;
    margin-left: 114px;
    padding-top: 47px;
  }
  
  .zwc-integration-description {
    color: #333333;
    margin: 0;
  }
  
  /* Integration Grid */
  .zwc-integration-grid {
    position: relative;
    margin: 0 100px;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* App Grid Items */
  .zwc-app-grid {
    position: relative;
    z-index: 2;
    height: 347px;
  }
  
  .zwc-app-item {
    position: absolute;
    width: 230px;
    height: 97px;
    background-color: white;
    border: 1.2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  
  /* App item positions */
  .zwc-app-item:nth-child(1) {
    top: 58px;
    left: 230px;
    border-color: #ea4336;
  }
  
  .zwc-app-item:nth-child(2) {
    top: 58px;
    left: 688px;
    border-color: #00984a;
  }
  
  .zwc-app-item:nth-child(3) {
    top: 154px;
    left: 1px;
    border-color: #0161ff;
  }
  
  .zwc-app-item:nth-child(4) {
    top: 154px;
    left: 459px;
    border-color: #236db4;
  }
  
  .zwc-app-item:nth-child(5) {
    top: 154px;
    left: 917px;
    border-color: #0161ff;
  }
  
  .zwc-app-item:nth-child(6) {
    top: 250px;
    left: 230px;
    border-color: #00984a;
  }
  
  .zwc-app-item:nth-child(7) {
    top: 250px;
    left: 688px;
    border-color: #ea4336;
  }
  
  .zwc-app-icon {
    flex-shrink: 0;
    line-height: 0;
  }
  
  .zwc-app-name {
    font-family: var(--primaryfont-semibold);
    font-size: 17px;
    color: #111111;
    letter-spacing: -0.17px;
  }
  
  /* ========================================
     MEDIA QUERIES - DESKTOP
  ======================================== */
  @media (max-width: 1440px) {
    .coordinators-title{
        font-size: 24px;
    }
    
    .zwc-heading-group h1{
        font-size: 50px;
        max-width: 580px;
    }
    .zt-home h2{
        font-size: 36px;
    }
    .zwc-feature-text {
        font-size: 18px;
    }
    .zwc-tool-section h2 {
        font-size: 40px;
    }
    .text-content h4{
        font-size: 24px;
    }
    .zt-home h3 {
        font-size: 32px;
    }
  }
  @media (max-width: 1280px) {
    /* Integration Section */
    .zwc-integration-description {
      max-width: 630px;
      margin: 0 auto;
    }
    
    .zwc-integration-header {
      flex-direction: column;
      text-align: center;
    }
    
    .zwc-integration-left,
    .zwc-integration-right {
      margin-left: 0;
      width: 100%;
      padding: 0 20px;
    }
    
    .zwc-integration-right {
      padding-top: 20px;
    }
    
    .zwc-integration-grid {
      margin: 0 20px;
      height: auto;
    }
    
    .zwc-grid-lines-vertical,
    .zwc-grid-lines-horizontal {
      display: none;
    }
    
    .zwc-app-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      position: static;
      height: auto;
      max-width: 800px;
      margin: 0 auto;
    }
    
    .zwc-app-item {
      position: static;
      width: auto;
      height: auto;
      padding: 20px;
    }
    .zwc-tool-card p{
        padding: 20px 20px 40px 30px;
    }
    .zwc-tool-card p {
        font-size: 20px;
    }
  }
  
  /* ========================================
     MEDIA QUERIES - TABLET
  ======================================== */
  
  @media (max-width: 767px) {
   .zwc-integration-left, .zwc-integration-right{
      padding: 0;
    }
    .zwc-integration-grid{
      margin: 0;
    }
    .zwc-integration-badge{
      margin-bottom: 20px;
      width: max-content;
      display: block;
    }
    /* Hero Section */
    .zwc-main-table {
      top: 45px;
    }
    
    .zwc-heading-group h1 {
      font-size: 36px;
      letter-spacing: normal;
      line-height: normal;
    }
    
    .zwc-features-list {
      gap: 15px;
      margin-bottom: 40px;
      justify-content: flex-start;
    }
    
    .zwc-divider {
      display: none;
    }
    
    .zwc-hero-images .zwc-side-image-1,
    .zwc-hero-images .zwc-side-image-2,
    .zwc-hero-images .zwc-side-image-3 {
      display: none;
    }
    
    /* Tool Section */
    .zwc-tool-cards {
      flex-direction: column;
      gap: 20px;
      padding: 0;
      align-items: center;
      max-width: 400px;
    }
    
    .zwc-tool-section h2 {
      font-size: 30px;
      margin-bottom: 30px;
      max-width: 350px;
      letter-spacing: normal;
      line-height: normal;
    }
    
    /* Integration Section */
    /* .zwc-integration-header {
      margin-bottom: 40px;
    } */
    .hor-slider li .zt-decoration{
min-height: unset;
    }
    .zwc-integration-title {
      font-size: 30px;
      margin-bottom: 30px;
      letter-spacing: normal;
      line-height: normal;
    }
  }
  
  /* ========================================
     MEDIA QUERIES - MOBILE
  ======================================== */
  
  @media (max-width: 480px) {
    /* Hero Section */
    .zwc-heading-group h1 {
      font-size: 26px;
    }
    
    .zwc-features-list {
      justify-content: flex-start;
      flex-flow: column;
      align-items: flex-start;
    }
    
    /* Tool Section */
    .zwc-tool-section h2 {
      font-size: 22px;
    }
    
    .zwc-tool-card p {
      font-size: 20px;
    }
    
    /* Integration Section */
    .zwc-integration-title {
      font-size: 22px;
    }
    
    .zwc-app-grid {
      grid-template-columns: 1fr;
      gap: 15px;
    }
    .zwc-app-item{
        justify-content: flex-start;
        max-width: 300px;
    }
  }

/* new updated css end */

/*  */
      @media only screen and (min-width: 1441px){
      .zt-home  h1{
          font-size: 56px;
          letter-spacing: -2.2px;
      }
     .zt-home h2{
          font-size: 46px;
      }
     .zt-home h3{
          font-size: 53px;
          letter-spacing: -2.2px;
      }
      }
      @media only screen and (max-width: 1280px){
      .zt-feature-box{
        min-width: 399px;
      }
    }
      @media only screen and (max-width: 1199px){
        .hor-slider ul {
          width: 80%;
        }
        .text-content h4{
          font-size: 24px;
        }
        .mob-app-img{
          display: block;
          max-width: 900px;
          margin: 60px auto 0;
        }
        .mob-app-feature .zt-features{
          display: none;
        }
        .mob-app-feature .inner-content {
          padding: 40px 20px 0px;
        }
        .zt-home h2{
              letter-spacing: -1.5px;
          }
         .zt-home h3{
              letter-spacing: -1px;
          }
          .zt-feature-box{
            max-width: 400px;
            min-width: unset;
            width: unset;
          }
          .line-elem-wrap{
            display: none;
          }
          .zt-features-container{
            padding: 0;
          }
        .sliderview{
          max-width: 700px;
        }
          .ztinner{
              flex-flow: column;
          }
          .event-coordinators-cntnt, .event-coordinators{
              width: 100%;
              min-width: 900px;
              max-width: 900px;
          }
          #my-video{
              min-width: unset;
              max-width: 900px;
          }
          .item-title-wrap h3{
            font-size: 62px;
          }
.i18n-ar .mob-app-img { margin: 60px auto 0; }
.i18n-ar .mob-app-feature .inner-content { padding: 40px 20px 0; }
.i18n-ar .zt-features-container { padding: 0; }
      }
      @media only screen and (max-width: 1023px){
       .zt-testimonial .slick-prev{
          left: -10px;
        }
        .zt-testimonial .slick-next{
          right: -10px
        }
        .auto,.integrate{
          flex-flow: column;
          width: 100%;
          text-align: left;
      }
      .integrate{
          flex-flow: column-reverse;
      }
.i18n-ar .zt-testimonial .slick-prev { right: -10px; left: unset; }
.i18n-ar .zt-testimonial .slick-next { left: -10px; right: unset; }
.i18n-ar .auto, .i18n-ar .integrate { text-align: right; }
      }
      @media only screen and (max-width: 991px){
        .hor-slider li .zt-decoration{
          padding: 20px 15px;
        }
        .integration .tag{
          display: flex;
        }
        .double-quotes{
          width: 30px;
        }
        .test-dis,
        .zt-testimonial-author p{
          font-size: 18px;
        }
        .zt-testimonial-author{
          margin-top: 30px;
        }
          .ban-subImg2 {
              top: 60px;
              right: -70px;
              max-width: 150px;
          }
          .ban-subImg1 {
              bottom: 60px;
              left: -70px;
              max-width: 150px;
          }
          .zteve-assign,.stats{
              display: none;
          }
          .event-coordinators-cntnt, .event-coordinators{
              min-width: unset;
          }
          .zt-feature-box {
            max-width: 350px;
        }
        .inner-content {
          width: 100%;
      }
      .cen-align .item-title-wrap{
        flex-flow: column;
        text-align: center;
      }
      .cen-align .tablist{
        align-items: left;
        flex-flow: column;
      }
      .cen-align .tablist-item{
        width: 100%;
      }
      .item-title-wrap p {
        margin: 0 auto 0px;
    }
    .integration .inner-content-wrap h2 {
      max-width: 100%;
    }
    .integration .inner-content-wrap{
      flex-flow: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      gap: 10px;
    }
.i18n-ar .hor-slider li .zt-decoration { padding: 20px 15px; }
.i18n-ar .ban-subImg2 { left: -70px; right: unset; }
.i18n-ar .ban-subImg1 { right: -70px; left: unset; }
.i18n-ar .item-title-wrap p { margin: 0 auto 0; }
.i18n-ar .cen-align .item-title-wrap, .i18n-ar .integration .inner-content-wrap {text-align: center;}
.i18n-ar .cen-align .item-title-wrap *, .i18n-ar .integration .inner-content-wrap * { text-align: center; }
      }
      @media only screen and (max-width: 767px){
        .zt-marketing, .zt-hr, .zt-sales,
   .zt-finance, .zt-personal,
          .zt-operation, .zt-product,
          .zt-event,
          .zt-project{
            display: flex;
            align-items: center;
        }
        .hor-slider li .zt-decoration {
          padding: 20px 10px;
          max-width: 80px;
        }
        .mob-app-feature .content .feature {
          width: 100%;
      }
        .hor-slider ul{
          max-width: 600px;
          width: 90%;
          display: flex;
          flex-wrap: wrap;
        }
        .hor-slider ul li{
          margin-bottom: 30px;
          width: 50%;
        }
        .ztreal-time-collaboration::before{
          background-color: unset;
        }
        .ztreal-time-collaboration .content-wrap{
          margin-bottom: 60px;
        }
        .zt-features-container {
          flex-direction: column;
          align-items: center;
      }
      .zt-feature-box {
        max-width: 600px;
    }
    .zt-feature-box p{
      padding: 30px 20px;
    }
        .mob-app-feature .inner-content {
          gap: 0px;
          padding: 40px 0px 0;
        }
        .ztreal-time-collaboration .mob-enable{
          display: block;
        }
        .work-together{
          display: none;
        }
        .zt-testimonial .content-wrap{
          border-bottom: none;
          padding-bottom: 0;
        }
          .zt-home h1,.zt-home h2{
              font-size: 36px;
              letter-spacing: -1px;
              text-align: left;
          }
          .zt-home h3{
              font-size: 30px;
              letter-spacing: -0.5px;
          }
        .btn-wrap{
        justify-content: flex-start;
      row-gap: 20px;
        }
      .watch-video:before {
        width: 24px;
        height: 24px;
    }
    .watch-video:after {
      left: 30px;
      top: 0px;
  }
  .zp-mobile-apps-wrap{
    display: block;
    }
    /*  */
        .slick-next,
         .slick-prev{
          top: auto;
          bottom: 0;
        }
        .zt-testimonial-author-img{
          margin: 0 0 20px;
        }
        .mob-img {
          padding-top: 40px;
      }
        .hor-slider{
          /* max-width: 480px; */
          width: 100%;
        }
        section .content-wrap{
          padding: 60px 0;
        }
        .zt-banner .content-wrap,
        .accordian-video .content-wrap,
        .zt-testimonial .content-wrap,
        .templates .content-wrap,
        .mob-app-feature .content-wrap{
          max-width: 600px;
        }
        .mob-app-feature .inner-content-wrap {
          text-align: left;
        }
        .mob-app-img{
          margin: 60px 0 0;
        }
        .mob-app-feature .inner-content .zt-feature{
          width: 100%;
        }
          .zt-banner p,
          .work-together .ztcen-wrap p{
              width: 100%;
          }
          .zt-banner .content-wrap,
          .block1 h2,
          .ztcen-wrap,
          .auto, 
          .integrate,
          .content-wrap{
              text-align: left;
          }
          .ban-subImg1,.ban-subImg2{
              display: none;
          }
          .zt-banimg{
              width: 100%;
              margin: 40px auto 0;
          }
          .event-coordinators ul{
              max-width: 330px;
              margin: 0 auto;
          }
          .hor-slider li .zt-decoration{
              padding: 20px 10px;
          min-height: 84px;
          }
          .hor-slider-wrap{
            padding-bottom: 60px;
            background-color: #131836;
          }
          .software-illus{
            position: relative;
          }
          .integration p {
            margin-bottom: 0px;
            text-align: left;
        }
        .integration .tag{
          margin: 0 0 10px;
        }
          .accordian-video .inner-wrap {
            padding: 20px 40px;
          }
          .accordian-video h2{
            margin-bottom: 30px;
          }
          .integration .inner-content-wrap{
            text-align: left;
          }
          .integration-table {
            padding: 0px 0px 0 0px;
            display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
      
        }
          .image-container{
            display: none;
          }
          .accordian-video .inner-content {
            width: 100%;
        }
        .mob-app-feature .inner-content{
          flex-flow: column;
        }
        .item-title-wrap h3 {
          font-size: 42px;
      }
      .integration .cell{
        display: none;
      }
      .integration .google-drive,
      .integration .zoho-workdrive,
      .integration .zoho-crm,
      .integration .dropbox{
        display: flex;
                flex-direction: row;
                margin-bottom: 20px;
                padding: 0;
                width: 40%;
                flex-wrap: wrap;
                border: none;
                justify-content: flex-start;
                align-items: flex-start;
      }
      .integration .google-drive::before, .integration .zoho-workdrive::before, 
      .integration .zoho-crm::before, .integration .dropbox::before,
       .integration .google-drive::after,
       .integration .cell,
       .integration .cell:last-child{
        border: none;
      }
      .integration .zoho-crm{
        margin:0;
      }
      .integration .content-wrap{
        padding-bottom: 60px;
      }
      .integration .row {
        /* display: block; */
        display: flex;
            flex-wrap: wrap;
            /* gap: 20px; */
      }
      .integration .row:nth-child(3),
      .integration .row:last-child{
        width: 50%;
      }
      .integration .row:first-child{
        display: none;
      }
      .integration .row:nth-child(2){
        margin-bottom: 30px;
      }
      .integration .cell:last-child{
        margin-right: 50px;
      }
      .integration .row .cell:first-child::after,
       .integration .row .cell:last-child::after{
        display: none;
      }
.i18n-ar .hor-slider li .zt-decoration { padding: 20px 10px; }
.i18n-ar .zt-feature-box p { padding: 30px 20px; }
.i18n-ar .mob-app-feature .inner-content { padding: 40px 0; }
.i18n-ar .zt-testimonial-author-img { margin: 0 0 20px; }
.i18n-ar section .content-wrap { padding: 60px 0; }
.i18n-ar .mob-app-feature .inner-content-wrap { text-align: right; }
.i18n-ar .mob-app-img { margin: 60px 0 0; }
.i18n-ar .zt-banner .content-wrap, .i18n-ar .block1 h2, .i18n-ar .ztcen-wrap, .i18n-ar .auto, .i18n-ar .integrate, .i18n-ar .content-wrap { text-align: right; }
.i18n-ar .zt-banimg { margin: 40px auto 0; }
.i18n-ar .event-coordinators ul { margin: 0 auto; }
.i18n-ar .hor-slider li .zt-decoration { padding: 20px 10px; }
.i18n-ar .integration .tag { margin: 0 0 10px; }
.i18n-ar .accordian-video .inner-wrap { padding: 20px 40px; }
.i18n-ar .integration .inner-content-wrap {text-align: right;}
.i18n-ar .integration-table { padding: 0; }
.i18n-ar .integration .google-drive, .i18n-ar .integration .zoho-workdrive, .i18n-ar .integration .zoho-crm, .i18n-ar .integration .dropbox { padding: 0; }
.i18n-ar .integration .zoho-crm { margin: 0; }
.i18n-ar .integration .cell:last-child { margin-left: 50px; margin-right: unset; }
    .i18n-ar .zt-banner .content-wrap *,.i18n-ar .ztcen-wrap *, .i18n-ar .auto *, .i18n-ar .integrate *, .i18n-ar .content-wrap *,.i18n-ar .mob-app-feature .inner-content-wrap *,.i18n-ar .integration .inner-content-wrap *,.i18n-ar .integration h2{ text-align: right; }
      }
      @media only screen and (max-width: 480px){
        .zt-home h1{
          font-size: 36px;
        }  
        .item-title-wrap h3 {
          font-size: 36px;
      }
      .zt-feature-box p {
        font-size: 22px;
      }
        .integration .row{
          flex-flow: column;
        }
        .integration .row {
          display: flex;
          flex-wrap: wrap;
          gap: 15px;
          flex-flow: column;
          margin-bottom: 15px;
      }
      .integration-table{
        display: block;
      }
        .integration .google-drive, .integration .zoho-workdrive, 
        .integration .zoho-crm, .integration .dropbox{
          width: 100%;
        }
        .hor-slider ul {
          width: 90%;
          flex-flow: column;
        }
        .hor-slider ul li{
          width: 70%;
          margin-bottom: 20px;
          width: 270px;
        }
        .zt-banner h1 span.flip{
          font-size: 24px;
          letter-spacing: 0;
        }
        .zt-banner p{
          font-size: 15px;
          max-width: 300px;
          margin: 0 0 20px !important;
        }
        .zt-home h2 {
          font-size: 30px;
        }
        .hor-slider li .zt-decoration {
          padding: 10px 10px;
          max-width: 60px;
          min-height: unset;
      }
.i18n-ar .zt-banner p { margin: 0 20px 0 !important; }
.i18n-ar .hor-slider li .zt-decoration { padding: 10px 10px; }
      }
      @media only screen and (max-width: 400px){
        .zt-home h1,.zt-home h2{
              font-size: 30px;
              letter-spacing: -0.5px;
          }
          .zt-home h3{
              font-size: 28px;
          }
          .event-coordinators ul{
              display: inline-flex;
              align-items: center;
              flex-flow: column;
          }
          .ztreal-time-collaboration .content-wrap{
              padding: 20px;
          }
.i18n-ar .ztreal-time-collaboration .content-wrap { padding: 20px; }
      }
      @media (max-width:1024px) {
        .item-title-wrap h3{
          font-size: 52px;
        }
      }