.zw-product-header.product-nav-links .menu li,
.zw-product-header.product-nav-links .menu>li>a,
.zw-product-header.menu-icon-help-header .product-title a,
.zw-product-header.menu-icon-help-header+.product-nav-links li a {
    color: #fff
}

.content-wrap {
    max-width: 1170px;
}

.zhow-to-integrate .content-wrap {
    max-width: 1280px;
}

.zeach-pad h2 {
    font-family: var(--secondaryfont-bold);
}


.zbanner-inner-wrap,
.zinner-float,
.ztry-zcontact {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center
}

.zbanner-inner-wrap>div,
.zinner-float>div,
.zinner-wrap>div,
.zfloat>div {
    flex: 1
}

.zbanner-inner-wrap h1 {
    font-size: 50px
}

.zw-product-header{
    background-color: #17494e
}

.zbanner-sec {
    background: #17494e;
    color: #fff;
    margin-bottom: 80px
}
.zwc-flex-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.zwc-idea-btn{
    background: var(--primary-btn-color);
    color: #fff;
    text-transform: uppercase;
    font-family: var(--zf-primary-bold);
    display: inline-block;
    padding: 12px 30px;
    font-size: 15px;
}
.zeach-pad {
    padding: 80px 0
}

.zbanner-cont p {
    max-width: 500px
}

.zhow-to-integrate {
    position: relative;
    background: #fffaf2;
    margin: 80px 0
}

.zhow-to-integrate svg {
    display: none;
    width: 100%;
    height: 200px;
    position: absolute;
    left: -3%;
    top: 26%;
    right: 0
}

.zhow-to-integrate svg {
    width: 103%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.zhow-to-integrate .dashed,
.zhow-to-integrate .path {
    fill: none
}

.zhow-to-integrate.in-view .path {
    fill: none;
    stroke: #000;
    stroke-dasharray: 4029;
    stroke-dashoffset: 4029;
    -webkit-animation: dash 4s linear forwards;
    animation: dash 4s linear forwards
}

.zhow-to-integrate .dashed {
    fill: none;
    stroke-dasharray: 6;
    stroke: #fffaf3;
    stroke-width: 4px;
}

@-webkit-keyframes dash {
    from {
        stroke-dashoffset: 4029
    }

    to {
        stroke-dashoffset: 0
    }
}

@keyframes dash {
    from {
        stroke-dashoffset: 4029
    }

    to {
        stroke-dashoffset: 0
    }
}

.zcont-part a {
    position: relative;
    color: var(--zwc-link-clr );
    font-family: var(--secondaryfont-semibold);
}

.zcont-part a:after {
    content: "";
    background-image: url(//cdn.zoho.com.cn/sites/zweb/images/meeting/home/common-sprites2x.png);
    background-repeat: no-repeat;
    background-size: 1300px;
    position: absolute;
    right: -29px;
    top: -2px;
    width: 26px;
    height: 30px;
    background-position: -1008px -137px;
    transition: all 500ms cubic-bezier(0.11, 0.16, 0.43, 0.86);
}
.zwc-share-idea{
    padding-top: 60px;
}
.zwc-share-idea h2{
    font-family: var(--zf-primary-bold);

}
/*****/
.zwc-faq-block {
    width: 1170px;
    margin: 0 auto;
    max-width: 95%;
    padding: 30px 0;
}
.zwc-faq-block h2{
    text-align: center;
}
.zwc-faq-block .zwc-title-block {
    margin-bottom: 50px
}

.faq-item button {
    margin-bottom: 10px;
    cursor: pointer;
    padding: 0 20px;
    position: relative;
    font-size: 22px;
    transition: all .3s ease;
}

.zwc-faq-block .content-wrap {
    margin: 0 auto;
    padding: 0 100px 0
}

.faq-item button:after {
    content: "";
    display: inline-block;
    padding: 4px;
    position: absolute;
    transition: all .3s ease;
    border: 1px solid #000;
    clear: both;
    border-width: 0 1px 1px 0;
    right: 10px;
    top: 30px;
    transform: rotate(45deg) translateY(-50%)
}

.faq-item.active button:after {
    border: 1px solid #000;
    border-width: 0 1px 1px 0;
    transform: translateY(-50%) rotate(-135deg);
    top: 40px;
}

body {
    counter-reset: my-count
}

.faq-wrap {
    counter-reset: div
}

.faq-item button::before {
    counter-increment: div;
    content: counter(div) ". ";
    position: absolute;
    left: 0
}

.faq-item {
    border-bottom: 1px solid #d3d3d3;
    padding: 0;
}
.faq-item.active button{
    padding: 25px 35px 15px 25px;
}
.faq-ans {
    display: none;
    padding: 0 20px
}

.faq-item:first-child .faq-ans {
    display: block
}

.faq-item:last-child {
    border-bottom: inherit
}

.zwc-bottom-sec {
    text-align: center;
    padding-top: 0
}
.zwc-bottom-sec h2{
    margin-bottom: 30px;
}
.zwc-bottom-sec p {
    font-family: var(--primaryfont-semibold);
    font-size: 27px;
    line-height: 1.1
}



.faq-item button {
    color: #000;
    cursor: pointer;
    margin-bottom: 0;
    display: inline-block;
    vertical-align: text-top;
    width: 100%;
    padding: 25px 35px 35px 25px;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    font-family: var(--zf-secondary-semibold);
    text-align: left;
    margin-top: 0;
    background-color: #fff;
    border: 0;

}
.zwc-bottom-sec h2{
    max-width: 900px;
    margin: 0 auto 30px;
}
.zwc-footer-cnt{
    display: block;
    font-size: 38px;
    padding-top: 20px;
}

.zwc-contact-us-cnt{
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    background: #0a3052;
    padding: 70px 20px;
    text-align: center;
    border-radius: 18px;
    color: #ffffff;
}
.zwc-contact-us-cnt h2{
    width: 100%;
    max-width: 630px;
    margin: 0 auto 30px;
}
.zwc-cnt-btn{
    border: 1px solid #ffffff;
    padding: 17px 30px;
    color: #ffffff;
}

/* Firefox-specific adjustment */
@-moz-document url-prefix() {
    .stars-container::before {
      left: 10px;
    }
  }
  section.rating-testimonial.zeach-pad {
    display: none;
}
@media screen and (min-width: 1200px) {
    .zhow-to-integrate svg {
        display: block
    }
    .zinner-float:nth-child(3) h2{
        max-width: 400px;
    }
    .zinner-float:nth-child(6) h2{
        max-width: 270px;
    }
}

.zhow-to-integrate h2 {
    text-align: center
}

.zinner-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    column-gap: 40px;
    margin-top: 100px
}

.zfloat {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 100px 80px;
    background: #f6faff;
    border-radius: 16px;
    column-gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
    align-items: flex-end
}

.zinner-list.zdown {
    margin-top: 80px;
}

.zcontact a {
    padding: 8px 30px;
    color: #000;
    font-family: var(--secondaryfont-semibold);
    font-size: 15px;
    box-sizing: border-box;
    border: 1px solid #000;
    display: inline-block
}

.ztrynow .cta-btn {
    background: #000
}

.ztry-zcontact {
    justify-content: center;
    column-gap: 60px;
    margin-top: 50px
}

.zinner-float {
    column-gap: 100px;
    margin-bottom: 100px
}

.zfeatures-sec h2 {
    text-align: center
}
.zinner-flex {
    margin-top: 60px;
    display: flex;
    flex-wrap: wrap;
    column-gap: 50px;
}
 .zinner-flex {
    margin-top: 150px;
    display: flex;
    flex-wrap: wrap;
    column-gap: 0px;
    justify-content: space-between;
}
/* .zinner-flex>div {
    flex: 1;
} */
.zinner-flex>div {
    /* flex: 1 */
    width: 28%;
    max-width: 330px;
}

.zbottom-sec {
    text-align: center
}
 .zinner-flex-list h3{
    position: relative;
}
 .zinner-flex-list h3::before{
    content: '';
    display: block;
    background: url(//cdn.zoho.com.cn/sites/zweb/images/assist/msp/key-features-sprite.png);
    background-size: cover;
    width: 55px;
    height: 50px;
    margin-bottom: 20px;
    /* background-position: 0 0; */
    position: absolute;
    top: -70px;

}
 .zinner-flex-list:nth-child(1) h3::before{
    background-position: 0 0;
}
 .zinner-flex-list:nth-child(2) h3::before{
    background-position: -59px 0px;
}
.zinner-flex-list:nth-child(3) h3::before{
    background-position: -103px 0px;
    width: 75px;
    top: -65px;
}
.zinner-flex-list:nth-child(4) h3::before{
    background-position: -179px 0px;
}
 .zinner-flex-list:nth-child(5) h3::before{
    background-position: -235px 0px;
    top: -60px;
}
 .zinner-flex-list:nth-child(6) h3::before{
    background-position: -290px 0px;
    top: -66px;
}
.zinner-flex-list p {
    max-width: 330px;
}
 .zinner-flex-list:nth-child(1),  .zinner-flex-list:nth-child(2),  .zinner-flex-list:nth-child(3){
    margin-bottom: 120px;
}
.zinner-float .zcont-part>div {
    max-width: 500px;
    margin: 0 auto
}

.zinner-float.zmobile h3 {
    max-width: 300px
}

.zinner-float:last-child {
    margin-bottom: 0
}

.content-wrap-custom {
    position: relative;
    width: 90%;
    max-width: 1170px;
    margin: 0 auto;
    z-index: 1
}

.rating-testimonial .content-wrap-custom {
    border: 1px dashed #8c8a8a;
    border-width: 1px 0;
    padding: 80px 0
}

.rating-testi-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-top: 50px
}

.rating-wrap {
    width: 50%
}

.single-rating {
    width: 600px;
    max-width: 100%;
    margin: 0 auto
}

.rating-section ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    flex-wrap: wrap
}

.rating-section ul li .capterra {
    background-position: 0 -16px;
    width: 118px
}

.rating-section ul li .img-leads {
    background-image: url(//cdn.zoho.com.cn/sites/zweb/images/assist/remote-work/za-re-sprite-img.png);
    background-size: 370px auto;
    background-repeat: no-repeat;
    display: block;
    margin: 0 auto 5px;
    height: 40px
}

.stars-container {
    position: relative;
    display: block;
    color: transparent;
    font-size: 21px;
    letter-spacing: 7px;
    text-align: center;
    width: 140px;
}

.stars-container::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '\2605\2605\2605\2605\2605';
    color: #ebebeb;
}

.stars-container.done::after {
    width: 89%
}

.stars-container::after {
    position: absolute;
    top: 0;
    left: 0;
    content: '\2605\2605\2605\2605\2605';
    color: #ff6105;
    overflow: hidden;
    -webkit-transition: ease all 2.5s;
    -o-transition: ease all 2.5s;
    transition: ease all 2.5s;
    width: 0
}

.counter-star {
    display: inline-block;
    text-align: center;
    font-weight: 300;
    color: #000;
    margin-top: 5px
}

.current-value  {
    font-size: 25px;
    color: #000
}

.rating-section ul li .getapp {
    background-position: -126px -16px;
    width: 85px
}

.rating-section ul li .gtwo {
    background-position: -216px -16px;
    width: 35px
}

.testimonial-section {
    width: 50%;
    padding-left: 5%;
    position: relative
}

.single-slider p {
    font: 23px/38px Roboto slab;
    font-weight: 300
}

.name-design {
    display: inline-block;
    padding-left: 70px;
    position: relative;
    max-width: 100%;
    text-align: left;
    width: 190px
}

.name-design .bld {
    font-family: var(--zf-primary-semibold)
}

.name-design span {
    width: 100%;
    display: inline-block
}

.name-design span:not(.bld) {
    font-size: 16px
}

.rating-section ul li {
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 20px;
    margin-right: 10px
}

.rating-section ul li:nth-child(1) {
    background: #d9edfc
}

.rating-section ul li:nth-child(2) {
    background: #e0fffd
}

.rating-section ul li:nth-child(3) {
    background: #fff0ef
}

.outline-btn {
    border: 1px solid #000;
    color: #000;
    padding: 8px 30px;
    font-size: 15px;
    line-height: 22px;
    display: inline-block;
    text-transform: uppercase
}

.btn-wrap * {
    margin: 10px 15px
}

.customer-image {
    position: absolute;
    left: 5px
}

.content-wrap-custom h2 {
    text-align: center
}

.content-wrap-custom * {
    box-sizing: border-box
}

.rating-testimonial .content-wrap {
    overflow: unset;
    z-index: 0;
    width: 100%;
    max-width: 100%;
    padding: 0
}

.rating-testimonial .content-wrap {
    overflow: unset;
    z-index: 0;
    width: 100%;
    max-width: 100%;
    padding: 0
}

.zinner-float img {
    width: 100%;
    max-width: 404px
}
.remote_bill img{
    max-width: 534px;
}
.zinner-float .zimg-part {
    text-align: center;
}

[class |=zicons]:not(.zinner-list>span) {
    position: relative;
    width: 85px;
    height: 85px;
    background-image: url(//cdn.zoho.com.cn/sites/zweb/images/assist/assist-msp-sprite.png);
    background-size: 500px;
    background-repeat: no-repeat;
    display: block;
    margin-bottom: 15px;
    opacity: 0
}

.zinner-float.zmobile h2 {
    max-width: 300px;
}

.middle-animated [class |=zicons]:not(.zinner-list>span) {
    opacity: 1;
    transition: all .6s ease-in
}

[class |=zicons]:not(.zinner-list>span).zicons-mob {
    background-position: -410px;
    width: 95px;
    height: 90px
}

.zicons-screen {
    background-position: -150px
}

[class |=zicons]:not(.zinner-list>span).zicons-remote {
    background-position: -240px 10px;
    width: 75px
}

.zicons-instantchat {
    background-position: -320px 10px
}

.zicons-register {
    background-position: 20px 20px
}

.zinner-list>span:before {
    content: '';
    position: absolute;
    background-image: url(//cdn.zoho.com.cn/sites/zweb/images/assist/assist-msp-sprite.png);
    background-size: 500px;
    background-repeat: no-repeat;
    border-radius: 100%;
    display: block;
    width: 45px;
    height: 45px;
    right: 0;
    left: 0;
    bottom: 0;
    top: 0;
    margin: auto
}

.zinner-list>span {
    background-color: #1a243b;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    display: block;
    margin-bottom: 40px;
    position: relative
}

.zicons-register:before {
    background-position: 8px 7px
}

.zicons-generate:before {
    background-position: -30px 0
}

.zicons-integrate:before {
    background-position: -70px 0
}

.zinner-list>span.zicons-control:before {
    background-position: -110px 0;
    width: 40px
}

.in-view.zinner-float img {
    opacity: 1;
    transition: all .6s ease-in
}

.zinner-float img {
    opacity: 0
}

.zbottom-sec.zeach-pad {
    padding-bottom: 160px
}

.zinner-list>span.zicons-integrate {
    position: relative;
    top: 5px;
}

@media screen and (min-width: 992px) and (max-width:1300px) {
    .stars-container {
        font-size: 12px
    }

    .current-value {
        font-size: 18px
    }

    .counter-star {
        font-size: 14px
    }
}

@media only screen and (max-width: 1200px) {
    .zbanner-inner-wrap h1 {
        font-size: 42px
    }

    .zhow-to-integrate svg {
        display: none
    }

    .zinner-list.zdown {
        margin-top: 0
    }
    
}
@media only screen and (max-width: 1199px) {
    .zwc-contact-us-cnt h2{
        max-width: 460px;
    }
}
@media only screen and (max-width: 1100px) {
    .zeach-pad {
        padding: 60px 0
    }

    .zbanner-sec {
        margin-bottom: 60px
    }

    .zbottom-sec.zeach-pad {
        padding-bottom: 120px
    }

    .zhow-to-integrate {
        margin: 60px 0
    }

    .zbanner-cont p {
        max-width: 330px
    }

    .zinner-wrap>div {
        flex: 46%;
        margin-bottom: 40px
    }

    .zinner-wrap {
        column-gap: 8%
    }
}

@media only screen and (max-width: 991px) {
    .zbanner-inner-wrap h1 {
        font-size: 32px
    }

    .zbanner-cont p {
        max-width: 330px
    }

    .ztry-zcontact {
        margin-top: 0
    }

    .zfloat {
        padding: 50px 40px
    }

    .rating-wrap {
        width: 100%
    }

    .rating-testi-wrap {
        margin-top: 30px
    }

    .testimonial-section {
        width: 620px;
        padding-left: 0;
        margin: 20px auto 0;
        text-align: center
    }
    .zinner-float{
        column-gap: 50px;
    }
}

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

    .zbanner-inner-wrap>div,
    .zinner-float>div,
    .zinner-wrap>div,
    .zfloat>div,
    .zinner-flex>div {
        flex: 100%
    }

    .main-container-wrapper .zw-product-header.menu-icon-help-header .product-title a {
        color: #fff
    }

    .zbanner-cont p,
    .zinner-flex-list p,
    .zinner-float.zmobile h2 {
        max-width: none
    }

    .zinner-float {
        margin-bottom: 50px
    }

    .zinner-float img {
        width: 100%;
        max-width: 300px
    }
    .remote_bill img{
        max-width: 400px;
    }
    .zeach-pad {
        padding: 40px 0
    }
    .zeach-pad {
        padding: 90px 0 40px;
    }
    .zbanner-sec {
        margin-bottom: 40px
    }

    .zbanner-cont>div {
        text-align: center;
        max-width: 600px;
        margin: 0 auto
    }

    .zbanner-img {
        max-width: 400px;
        margin: 50px auto 0
    }

    .zinner-float.zleft-img {
        flex-direction: column-reverse
    }

    .zinner-float.zright-img .zimg-part,
    .zinner-float.zleft-img .zimg-part,
    .zinner-float>div {
        text-align: center
    }

    .zinner-float .zimg-part {
        margin-top: 50px
    }

    .zinner-wrap,
    .zinner-flex>div {
        max-width: 500px;
        margin: 50px auto 0
    }

    .ztry-zcontact {
        text-align: center
    }

    .zinner-flex {
        margin-top: 0
    }
    .zinner-flex {
        margin-top: 70px
    }

    .zhow-to-integrate {
        margin: 40px 0
    }

    .zbottom-sec.zeach-pad {
        padding-bottom: 80px
    }
     .zinner-flex-list:nth-child(1),  .zinner-flex-list:nth-child(2),  .zinner-flex-list:nth-child(3),
     .zinner-flex-list:nth-child(4), .zinner-flex-list:nth-child(5),  .zinner-flex-list:nth-child(6){
        margin-bottom: 40px;
    }
    .zinner-float .zcont-part>div{
        max-width: 550px;
    }
    .zwc-share-idea .zwc-flex-wrap{
        flex-direction: column;
        text-align: center;
    }
    .zwc-share-idea{
        padding-top: 0px;
    }
    .zwc-faq-block{
        padding: 30px 0 0;
    }
    .zwc-faq-block h2{
        text-align: center;
    }
    .zwc-faq-block .zwc-title-block{
        margin-bottom: 0;
    }
    .zwc-faq-block .content-wrap{
        padding: 0;
    }
    .faq-item button{
        font-size: 18px;
    }
    .zwc-cnt-btn{
        padding: 10px 15px;
    }
}

@media only screen and (max-width: 480px) {
    .ztry-zcontact {
        align-items: baseline
    }

    .ztrynow {
        margin-bottom: 30px
    }

    .zfloat {
        padding: 50px 20px
    }

    .zinner-flex>div {
        margin: 30px auto 0
    }

    .zbanner-inner-wrap h1 {
        font-size: 28px
    }
}

@media only screen and (min-width: 768px) {
    .fadeinright {
        opacity: 0;
        -webkit-transform: translateX(30px);
        -ms-transform: translateX(30px);
        transform: translateX(30px);
        -ms-filter: "alpha(opacity=0)";
        -webkit-transition: all 1000ms cubic-bezier(0.11, 0.16, 0.43, 0.86);
        transition: all 1000ms cubic-bezier(0.11, 0.16, 0.43, 0.86);
        -moz-transition: all 1000ms cubic-bezier(0.11, 0.16, 0.43, 0.86);
        -ms-transition: all 1000ms cubic-bezier(0.11, 0.16, 0.43, 0.86);
        -o-transition: all 1000ms cubic-bezier(0.11, 0.16, 0.43, 0.86);
    }

    .middle-animated .fadeinright {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        -ms-filter: "alpha(opacity=100)";
    }

    .delay1 {
        -webkit-transition-delay: 200ms;
        -o-transition-delay: 200ms;
        transition-delay: 200ms;
    }
}


   /* other lang css start  */
  
  .i18n-ar .zcont-part a:after {
        left: -29px;
        right: unset;
        transform: scale(-1);
    }
    .other-lang .testimonial-section {
        display: none;
    }
    .other-lang .rating-wrap {
        margin: 0 auto;
    }
    .i18n-ar .zbottom-sec.zeach-pad h3,.i18n-ar .zbottom-sec.zeach-pad h2,.i18n-ar .zbottom-sec.zeach-pad .content-wrap {
        text-align: center;
    }
    @media (max-width: 767px) {
        .i18n-ar .zbanner-cont h1,.i18n-ar .zbanner-cont p,.i18n-ar .zfloat-sec.zeach-pad h2,.i18n-ar .zfloat-sec.zeach-pad p,.i18n-ar .zinner-float .zcont-part>div {
            text-align: center;
        }
    }
    @media only screen and (max-width: 480px) {
        .i18n-ar .ztrynow p,.i18n-ar .zcontact p {
            text-align: center;
        }
        .i18n-ar .zcontact a {
            margin: 0 auto;
            display: block;
        }
    }
    .other-lang .stars-container::after {
        width: 89%
    }
    .i18n-ar .stars-container::after{
        left: unset;
        right: 0;
    }
    /* other lang css end  */