h1 {
    font: 54px/1.2 'Zoho_Puvi_semiBold';
    letter-spacing: -1.62px
}
.act-btn {
    padding: 12px 30px
}
h2 {
    font: 44px/1.2 'Zoho_Puvi_semiBold';
    letter-spacing: -.88px
}
h3 {
    font: 26px/1.2 'Zoho_Puvi_Medium'
}
section p {
    font: 18px/1.6 'Zoho_Puvi_Regular';
    letter-spacing: -.54px
}
section ul li,
section ul li a {
    text-decoration: none;
    color: #000
}
img {
    width: 100%
}
.content-wrap {
    max-width: 1280px;
    margin: 0 auto;
    width: 90%
}
.tac {
    text-align: center
}
.flex-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center
}
.ucaas-banner {
    padding: 5% 0 5%
}
.lhs {
    width: 620px
}
.rhs {
    width: 582px
}
.lhs-inner p {
    max-width: 575px;
    margin: 0 auto 15px 0;
    letter-spacing: -.54px
}
.lhs-inner .btn {
    font-size: 16px
}
.rhs-inner {
    padding: 20px
}
.ucaas-platforms {
    padding: 60px 0
}
.ucaasplatforms-title {
    max-width: 810px;
    margin-bottom: 7%
}
.ucaasplatforms-title h2 {
    max-width: 755px
}
.ucaasplatforms-title p {
    margin: 0 30px 0 0
}
.features-inner {
    align-items: stretch;
    flex-wrap: wrap
}
.feature-item {
    width: calc(48% - 4px);
    background: #fafafa;
    border-radius: 15px;
    margin-bottom: 44px
}
.features-content {
    padding: 85px 85px;
    text-align: left
}
.box1 .feature-img img,
.box2 .feature-img img {
    width: 355px
}
.feature-img img {
    width: 448px;
    margin: 0 0 50px;
    opacity: 0;
    transform: translateY(50px);
    transition: .8s all ease
}
.in-view.feature-img img {
    transform: translateY(0);
    opacity: 1
}
.features-content p {
    max-width: 448px;
    margin-bottom: 0
}
.features-content h3 {
    font-size: 31px;
    letter-spacing: -.68px;
    font-family: 'Zoho_Puvi_Medium';
    line-height: 1.25
}
.box4 h3,
.box9 h3 {
    padding: 30px 0 0
}
.ideal-platform {
    padding: 0 0 2%
}
.top-wrap {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%
}
.top-content h2 {
    max-width: 665px
}
.top-content p {
    max-width: 750px;
    margin-bottom: 5%
}
.feature-list {
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1025px;
    margin: 0 auto
}
.fea-list-item {
    width: 48%
}
.fea-list-inner {
    margin-bottom: 85px
}
.fea-list-inner .icon {
    width: 55px;
    height: 55px;
    background: url(/sites/zweb/images/cliq/unified/sprite-icons.svg) no-repeat -43px -61px /650px;
    display: block;
    margin-bottom: 15px
}
.feature-img {
    text-align: center
}
.fea-list-inner .icon2 {
    background-position: -100px -61px
}
.fea-list-inner .icon3 {
    background-position: -155px -61px
}
.fea-list-inner .icon4 {
    background-position: -212px -61px
}
.fea-list-inner .icon5 {
    background-position: 0 -76px;
    background-size: 770px;
    width: 45px
}
.chart-wrap {
    max-width: 1100px;
    margin: 60px auto;
    padding: 4% 0 5%
}
.chart-wrap h2 {
    max-width: 530px
}
.chart-wrap p {
    max-width: 760px
}
.progress-wrap {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 1045px;
    margin: 50px auto 30px
}
small.smalltxt {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: #6079ff;
    font-family: var(--zf-primary-semibold)
}
.smalltxt {
    font-size: 50px;
    display: block;
    color: #6079ff;
    font-family: var(--zf-primary-bold);
    line-height: 1;
    margin-bottom: 10px
}
small.txt-color2 {
    color: #ff7f60
}
small.txt-color3 {
    color: #36c3a7
}
.animation-item {
    width: 30.33%
}
.animation-item span.smalltxt,
.animation-item span.btmtxt {
    max-width: 140px;
    margin: auto;
    text-align: center
}
.animation-item span.btmtxt {
    max-width: 240px;
    display: block
}
.animation-item svg {
    position: relative
}
.animation-graph-container {
    width: 285px;
    height: 285px;
    position: relative;
    margin: 0 auto
}
.animation-graph-container .circle-bg {
    fill: none;
    stroke: #f3f4f4;
    stroke-width: 1.5
}
.animation-graph-container .graph-circle {
    fill: none;
    stroke-linecap: initial
}
.middle-animated .animation-graph-container .graph-circle {
    stroke-width: 1.5;
    stroke: #6079ff;
    stroke-linecap: round
}
.middle-animated .animation-graph-container .cirle1-animation {
    animation: progress-1 1.5s ease-out forwards
}
.middle-animated .animation-graph-container .cirle2-animation {
    stroke: #ff7f60;
    width: 100%;
    animation: progress-2 1.5s ease-out forwards
}
.middle-animated .animation-graph-container .cirle3-animation {
    stroke: #36c3a7;
    animation: progress-3 1.5s ease-out forwards
}

@keyframes progress-1 {
    0% {
        stroke-dasharray: 1, 162;
        stroke-dashoffset: -150
    }
    100% {
        stroke-dasharray: 100, 162;
        stroke-dashoffset: -225
    }
}
@keyframes progress-2 {
    0% {
        stroke-dasharray: 1, 162;
        stroke-dashoffset: -150
    }
    100% {
        stroke-dasharray: 100, 162;
        stroke-dashoffset: -213
    }
}
@keyframes progress-3 {
    0% {
        stroke-dasharray: 1, 162;
        stroke-dashoffset: -150
    }
    100% {
        stroke-dasharray: 100, 162;
        stroke-dashoffset: -195
    }
}
.our-awards-wrap {
    max-width: 900px;
    margin: 0 auto 6%;
    text-align: center
}
.cx-icon {
    margin: 0 5px 0 0;
    display: inline-block
}
.cx-icon span {
    display: inline-block;
    height: 90px;
    width: 90px;
    background: url(/sites/zweb/images/cliq/ucaasplatform/compliance-sprite.png) no-repeat 0px 0px/650px
}
.cx-icon3 span,
.cx-icon4 span,
.cx-icon5 span {
    width: 120px
}
.cx-icon6 span {
    width: 92px;
    height: 67px
}
.cx-icon2 span {
    background-position: -93px 0
}
.cx-icon3 span {
    background-position: -148px 16px;
    background-size: 520px auto
}
.cx-icon4 span {
    background-position: -270px 16px;
    background-size: 520px auto
}
.cx-icon5 span {
    background-position: -383px 16px;
    background-size: 508px auto
}
.cx-icon6 span {
    background-position: -1px -75px;
    background-size: 508px auto
}
.slick-wrap {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 5% 0 3%
}
.testimonial-inner h2 {
    font-size: 32px
}
.slick-left {
    width: 40%
}
.slick-ryt {
    width: 60%;
    padding: 0 10px
}
.slick-img {
    width: 260px;
    height: 260px;
    margin: 0 auto;
    position: relative
}
.slick-img img {
    border-radius: 10px;
    width: 260px
}
.slick-img:before {
    position: absolute;
    content: "";
    width: 170px;
    height: 160px;
    background: url(/sites/zweb/images/cliq/ucaasplatform/testimonial-bg.png) no-repeat 20px 30px/150px;
    left: -70px;
    top: -80px;
    z-index: -1
}
.slick-img:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    right: -14px;
    top: 14px;
    border: 1px solid #f0884d;
    z-index: -1;
    border-radius: 0 0 22px 0
}
.slick-cont {
    padding-top: 40px;
    position: relative
}
.slick-initialized .slick-slide {
    display: flex !important
}
.slick-cont p {
    font-style: italic;
    font-size: 25px;
    max-width: 748px;
    padding: 0 0 30px
}
.cust-name span {
    color: #16bc6c;
    font-size: 20px;
    font-family: var(--secondaryfont-bold)
}
.cust-name p {
    padding-bottom: 0;
    font-style: normal;
    font-size: 17px;
    letter-spacing: normal
}
.slick-cont:before {
    position: absolute;
    content: "";
    height: 50px;
    width: 60px;
    background: url(/sites/zweb/images/cliq/ucaasplatform/common-sprites2x.png) no-repeat -872px -110px/1200px;
    left: 0;
    top: -10px
}
.bottom-section {
    padding: 6% 0 7%
}
.bottom-section h2 {
    font-size: 32px
}



/* FAQ Starts */
.faq {
    border-radius: 20px;
    max-width: 925px;
    width: 95%;
    margin: 0 auto;
    padding: 90px 0 50px;
}
.faq-wrapper {
    max-width: 925px;
    margin: 75px auto auto;
}


.faq-item {
    padding: 18px 0 10px;
    border-bottom: 1px solid #e6e6e6;
}
.faq-item h4 {
    font-size: 20px;
    letter-spacing: -.6px;
    font-family: var(--secondaryfont-bold);
    color: #040718;
    position: relative;
    cursor: pointer;
    transition: all .3s ease;
}
.faq-content p {
    max-width: 820px;
    font: 17px/1.6 'Zoho_Puvi_regular';
}

.faq-content {
    display: none;
}
.faq-content ul {
    padding-left: 50px;
    counter-reset: faq-content;
}
.faq-content ul li {
    padding-bottom: 12px;
    position: relative;
}
.faq-content ul li:before {
    position: absolute;
    left: -17px;
    top: 0;
    counter-increment: faq-content;
    content: counter(faq-content) ". ";
}
.faq-item h4:before, .faq-item h4:after {
    position: absolute;
    content: "";
    background: #333;
}
.faq-item h4::before {
    right: 0;
    top: 15px;
    height: 2px;
    width: 16px;
}
.faq-item h4:after {
    right: 7px;
    width: 2px;
    top: 9px;
    height: 15px;
}
.faq-item.active h4:after {
    background: none;
}

/* FAQ Ends */
@media only screen and (max-width:1366px) {
    h1 {
        font-size: 44px
    }
    h2,
    .bottom-section h2 {
        font-size: 32px
    }
    .features-content h3,
    h3 {
        font-size: 26px
    }
    .lhs-inner p,
    section p {
        letter-spacing: normal
    }
    .features-content {
        padding: 65px 65px
    }
}
@media only screen and (max-width:1200px) {
    section p {
        font: 17px/1.6 'Zoho_Puvi_Regular';
        letter-spacing: normal
    }
    .feature-img img {
        margin: 0 0 10%
    }
    .faq {
        padding: 45px 0 45px;
    }
    .faq-wrapper {
        margin:40px auto auto;
    }
}
@media only screen and (max-width:1080px) {
    h1 {
        font-size: 40px
    }
    h2,
    .bottom-section h2 {
        font-size: 30px
    }
    .features-content h3,
    h3 {
        font-size: 24px
    }
    .features-content {
        padding: 50px 50px
    }
    .slick-cont > p {
        font-size: 22px
    }
}
@media only screen and (max-width:990px) {
    h1,
    h2,
    .features-content h3,
    h3,
    .bottom-section h2 {
        letter-spacing: normal
    }
    .banner-inner {
        flex-direction: column;
        margin: 10px 0 0
    }
    .lhs {
        text-align: center;
        width: 550px;
        margin: 0 auto 30px
    }
    .rhs-inner img {
        max-width: 540px
    }
    .ucaasplatforms-title {
        max-width: 600px;
        text-align: center;
        margin: 0 auto 50px
    }
    .feature-item {
        width: 100%;
        margin: 0 auto 25px;
        max-width: 500px
    }
    .features-content {
        text-align: center
    }
    .chart-wrap {
        margin: 0 auto;
        padding: 0;
        max-width: 600px;
        text-align: center
    }
    .chart-wrap h2 {
        margin: 0 auto 15px
    }
    .progress-wrap {
        flex-direction: column
    }
    .animation-item {
        width: 100%;
        margin-bottom: 15px
    }
    .top-wrap {
        max-width: 600px;
        text-align: center
    }
    .fea-list-item {
        width: 100%
    }
    .fea-list-inner .icon {
        margin: 0 auto 15px
    }
    .fea-list-item .fea-list-inner {
        margin-bottom: 45px
    }
    .fea-list-item:last-child .fea-list-inner {
        margin-bottom: 0
    }
    .slick-wrap {
        flex-direction: column
    }
    .slick-wrap {
        margin: 7% 0 3%
    }
    .slick-ryt {
        margin-top: 50px;
        text-align: center;
        width: 550px
    }
    .slick-cont > p {
        padding: 0 0 10px;
        font-size: 19px;
        line-height: 1.6
    }
    .progress-wrap {
        margin: 50px auto 50px
    }
    .ucaasplatforms-title p {
        margin: 0 auto 0
    }
}
@media only screen and (max-width:767px) {
    h1 {
        font-size: 30px
    }
    h2,
    .bottom-section h2 {
        font-size: 25px
    }
    .features-content h3,
    h3 {
        font-size: 22px
    }
    .our-awards-wrap {
        margin: 0 auto 12%
    }

.faq-item h4 {
    font-size: 17px;
    letter-spacing: 0px;
    padding-right: 15px;
}
.faq-content ul {
    padding-left: 20px;
}
.faq-item h4::before {
    right: 0;
    top: 15px;
    height: 2px;
    width: 14px;
}
.faq-item h4:after {
    right: 6px;
    width: 2px;
    top: 9px;
    height: 14px;
}
}
@media only screen and (max-width:610px) {
    .rhs-inner img {
        max-width: 100%
    }
    .rhs,
    .lhs,
    .slick-left,
    .slick-ryt {
        width: 100%
    }
    small.smalltxt {
        font-size: 30px
    }
    .animation-graph-container {
        width: 265px;
        height: 265px
    }
}
@media only screen and (max-width:480px) {
    h1 {
        font-size: 27px
    }
    h2,
    .bottom-section h2 {
        font-size: 23px
    }
    .features-content h3,
    h3 {
        font-size: 20px;
        font-family: 'Zoho_Puvi_semibold'
    }
    .features-content {
        padding: 30px 30px
    }
    .slick-wrap {
        margin: 16% 0 3%
    }
    .feature-list {
        padding: 15px
    }
}



.other-lang .testimonial{display: none;}
.i18n-zh-hant .features-content h3{font-size: 22px}
.i18n-zh-hant .top-content h2{max-width: 750px;}