* {
    box-sizing: border-box
}

.zw-template-inner {
    overflow: hidden
}

.zw-product-header {
    background: transparent linear-gradient(270deg,#4a4ad5 0%,#262691 100%) 0% 0% no-repeat padding-box
}

#block-system-main {
    margin-top: 0
}

#mini-panel-product_menu .menu-icon-help-header img {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1)
}

p {
    font-size: 17px;
    color: #222
}

.bgwrap {
    background: transparent linear-gradient(270deg,#4a4ad5 0%,#262691 100%) 0% 0% no-repeat padding-box
}

.header-top {
    color: #fff;
    position: relative;
    padding: 90px 0 60px
}

.header-top .subimg {
    position: absolute;
    left: 107px;
    width: 185px;
    bottom: 73px;
    border-radius: 20px
}

.header-top .img-part .subimg {
    transition-delay: 800ms
}

.header-top .img-part img:not(.subimg) {
    max-width: 450px;
    width: 100%;
    border-radius: 20px;
    opacity: 0
}

.header-top .img-part img,.ztask {
    opacity: 0;
    transition: opacity 500ms linear
}

.header-top .zwe-om .img-part img,.zwe-om .ztask {
    opacity: 1
}

.header-top .zwe-om .img-part img:not(.subimg) {
    transition-delay: 500ms
}

.header-top,.zsection1,.zsection2,.header-top p,.zsection1 p {
    color: #fff
}

.stars-container {
    position: relative
}

.stars-container:after {
    content: '\2605\2605\2605\2605\2605';
    position: absolute;
    top: -3px;
    left: 0;
    color: #f9a826;
    overflow: hidden;
    transition: ease all 3s;
    width: 0
}
.i18n-ja .stars-container:after {
    top: 0;
}

.animated .stars-container:after {
    animation: starRateTwo .5s ease-out 1.8s forwards
}

.badge {
    background: url('/sites/zweb/images/otherbrandlogos/g2.svg') no-repeat;
    width: 44px;
    height: 50px;
}

.getapp {
    background: url('/sites/zweb/images/otherbrandlogos/getapp-white.svg') no-repeat;
    height: 27px;
    width: 124px;
}

.capterra {
    background: url('/sites/zweb/images/otherbrandlogos/capterra-white.svg') no-repeat;
    height: 29px;
    width: 124px;
}

.zrating {
    margin-top: 40px
}

.zrating li:nth-child(2) span {
    font-size: 14px
}

.zrating ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

.zrating ul li {
    margin: 10px 10px;
    background-size: contain;
}

@keyframes starRateTwo {
    0% {
        width: 0;
        opacity: 0
    }

    100% {
        width: 90%;
        opacity: 1
    }
}

.zpcustomer {
    background: #fff;
    padding: 20px 10px;
    border-radius: 8px;
    margin-top: 85px;
    max-width: 660px
}

.ztask {
    background: #eaffed;
    color: #000;
    padding: 15px 20px;
    position: absolute;
    top: 40px;
    right: -60px;
    font-size: 12px;
    border-radius: 6px;
    width: 120px;
    text-align: left
}

.zicon {
    background: url('//www.zohowebstatic.com/sites/zweb/images/people/zp-smb-sprite.png') no-repeat;
    background-size: 1400px auto;
    width: 65px;
    height: 60px;
    display: block;
    background-position: -810px -164px;
    margin-bottom: 20px
}

.ztestiimg {
    background: url('//www.zohowebstatic.com/sites/zweb/images/people/zp-smb-sprite.png') no-repeat;
    background-size: 1300px auto;
    width: 60px;
    height: 67px;
    display: block;
    background-position: -1200px -144px
}

.zicon.icon2 {
    width: 57px;
    background-position: -867px -139px;
    background-size: 1200px auto
}

.zicon.icon3 {
    width: 66px;
    background-position: -884px -164px
}

.hir .ztriup {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 10px solid #36c352
}

.ztask em {
    font-style: normal;
    font-size: 27px;
    display: block;
    font-family: var(--zf-secondary-extrabold)
}

.ztask.cls {
    top: 145px;
    background: #fff7ed;
    transition-delay: 1000ms
}

.ztask.tas {
    transition-delay: 1100ms
}

.ztask.hir {
    top: unset;
    bottom: 160px;
    width: 170px;
    background: #f9fce2;
    padding: 20px 30px;
    right: 30px;
    border-radius: 12px
}

.ztask.hir {
    transition-delay: 900ms
}

.ztriup {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 10px solid #42de60;
    display: inline-block;
    vertical-align: middle
}

.ztridown {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid #d33232;
    display: inline-block;
    vertical-align: middle
}

.zpcustomer ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.zpcustomer li {
    background: url('//www.zohowebstatic.com/sites/zweb/images/people/zp-smb-sprite.png') no-repeat;
    background-size: 880px auto;
    width: 122px;
    height: 40px;
    margin: 0 10px;
    /* background-size: contain; */
    display: inline-block;
    vertical-align: middle;
}

.zsectwrap {
    position: absolute;
    top: -50px;
    right: 90px
}

.zsect {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 20px;
    margin-bottom: 10px;
    box-shadow: 30px 30px 30px 20px rgb(197 197 197 / 20%);
    width: 210px;
    font-size: 14px;
    text-align: left
}

.sect2 {
    background: blue;
    color: #fff;
    padding: 5px 7px
}

.featuresec .zsect em {
    background: transparent;
    display: block;
    border-radius: 0;
    padding: 0
}

.zpcustomer li.athreon {
    background: url(/sites/zweb/images/otherbrandlogos/athreon.png) no-repeat;
    background-size: contain;
    width: 122px;
    height: 32px;
}

.zpcustomer li.tesna {
    background: url(/sites/zweb/images/otherbrandlogos/tesena.svg) no-repeat;
    background-size: contain;
    width: 102px;
    height: 28px;
}

.zpcustomer li.tabtree {
    background: url(/sites/zweb/images/otherbrandlogos/tabtree.png) no-repeat;
    background-size: contain;
    width: 80px;
    height: 47px;
}


.zpcustomer li.cabot {
    background: url(/sites/zweb/images/otherbrandlogos/cabot.svg) no-repeat;
   background-size: contain;
    width: 101px;
}

.zpcustomer li.innocode {
    background: url(/sites/zweb/images/otherbrandlogos/innocode.svg) no-repeat;
    background-size: contain;
    width: 99px;
    height: 30px;
}

.header-top p {
    font-size: 22px;
    max-width: 540px;
    margin-bottom: 40px
}

.header-top .content-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.header-top .cont-part {
    width: 60%
}

.header-top .img-part {
    width: 40%;
    text-align: right;
    position: relative;
    z-index: 1
}

.header-top .img-part::before {
    content: '';
    position: absolute;
    bottom: 110px;
    right: -100px;
    background: transparent linear-gradient(171deg,#c6ffdc 0%,#4949d3 100%) 0% 0% no-repeat padding-box;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    z-index: -2;
    opacity: 0;
    transform: translate(0,-50px);
    transition: all 500ms ease-in
}

.header-top .zwe-om .img-part::before {
    transition-delay: 1500ms;
    transform: translate(0,0);
    opacity: .3
}

.header-top .img-part::after {
    content: '';
    position: absolute;
    bottom: 100px;
    background: url('//www.zohowebstatic.com/sites/zweb/images/people/zp-small-rpgrid.png')no-repeat;
    background-size: 200px auto;
    z-index: -1;
    right: -140px;
    width: 300px;
    height: 300px;
    opacity: 0;
    transition: all 500ms ease-in
}

.header-top .zwe-om .img-part::after {
    transition-delay: 1900ms;
    opacity: 1
}

.header-top .cont-part {
    margin-bottom: 60px
}

.header-top h1 {
    font-size: 60px;
    margin-bottom: 25px
}

.header-top h1 span {
    color: #ffa800
}

.act-btn {
    padding: 18px 35px
}

.zsection1 {
    padding: 60px 0 50px;
    position: relative;
    z-index: 1
}

.zsection1 .content-wrap {
    display: flex;
    flex-wrap: wrap;
    overflow: visible;
    justify-content: space-between
}

.zsection1 .contpart {
    width: 60%
}

.zsection1 .imgpart img {
    max-width: 850px;
    position: relative;
    bottom: -120px
}

.zsection1 .imgpart {
    width: 30%
}

.zsection1 h2 {
    font-size: 60px
}

.zsection1 p {
    margin-bottom: 50px;
    font-size: 22px;
    line-height: 2;
    max-width: 720px
}

.lnwrap {
    transform: rotate(30deg);
    position: absolute;
    bottom: 40px;
    right: 80px;
    z-index: -1
}

#feat3 .lnwrap {
    transform: rotate(56deg);
    position: absolute;
    bottom: unset;
    left: 30px;
    z-index: -1;
    top: 110px
}

#feat3 ul {
    max-width: 500px
}

#feat2 .lnwrap {
    transform: rotate(89deg);
    position: absolute;
    bottom: unset;
    left: 40px;
    z-index: -1;
    top: 180px
}

#feat5 .colblk .lnwrap {
    transform: rotate(89deg);
    position: absolute;
    bottom: unset;
    left: 30px;
    z-index: -1;
    top: 100px
}

#feat5 .colblk .lnwrap span {
    margin-bottom: 8px
}

#feat5 .colblk:nth-child(1) .lnwrap {
    top: 490px;
    left: -210px
}

#feat5 .colblk .lnwrap {
    margin-bottom: 10px
}

.sect1 {
    color: blue
}

.sect1 em {
    color: #000
}

.lnwrap span {
    width: 120px;
    height: 1px;
    background: #868686;
    display: block;
    margin-bottom: 15px
}

#feat3 .lnwrap span,#feat2 .lnwrap span {
    margin-bottom: 10px
}

.zsection1 h2 span {
    font-family: var(--zf-primary-regular)
}

.zsection1 h2 {
    font-family: var(--zf-primary-bold)
}

.zsection1 .colblk li:before {
    content: '';
    position: absolute;
    top: 22px;
    left: -1px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    width: 18px;
    height: 6px;
    transform: rotate(-45deg);
    z-index: 1
}

.colblk {
    display: inline-block;
    vertical-align: top;
    width: 48%;
    position: relative
}

.colblk li {
    margin-bottom: 13px;
    font-size: 26px;
    padding-bottom: 30px;
    padding-top: 10px;
    position: relative;
    padding-left: 35px
}

#feat5 .colblk:nth-child(2) {
    margin-top: 60px
}

#feat5 .colblk:nth-child(2):after {
    content: '';
    position: absolute;
    top: 100px;
    right: 40px;
    background: transparent linear-gradient(159deg,#FFFFFF60 0%,#ffebeb 100%) 0% 0% no-repeat padding-box;
    width: 350px;
    height: 200px;
    z-index: -1
}

#feat5 .colblk:nth-child(1):after {
    content: '';
    position: absolute;
    top: 60px;
    right: 80px;
    background: #f8f5e8;
    width: 350px;
    height: 200px;
    z-index: -1;
    transform: rotate(12deg)
}

#feat5 .colblk:nth-child(2) .subimg {
    top: -30px;
    left: unset;
    right: 80px;
    box-shadow: 30px 30px 30px 20px rgb(197 197 197 / 20%)
}

#feat5 .colblk:nth-child(1) .subimg {
    top: 80px;
    left: 20px;
    width: 425px;
    box-shadow: 30px 30px 30px 20px rgb(197 197 197 / 20%)
}

#feat5 .colblk:nth-child(1) .subimg.sub2 {
    top: 264px;
    width: 270px;
    right: 104px;
    left: unset
}

#feat5 {
    max-width: 1140px;
    margin: 0 auto
}

#feat5 .colblk:nth-child(1) img {
    margin-bottom: 120px
}

#feat5 .colblk:nth-child(2) img {
    margin-bottom: 100px
}

.colblk li:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    height: 1px;
    width: 90%;
    border-bottom: 1px dotted #8989ff
}

.zsection2 .colblkwrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.zsection2 .colblk li {
    padding-left: 40px;
    font-size: 24px;
    margin-bottom: 30px;
    padding-bottom: 34px
}

.zsection2 .colblk li:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 40px;
    border-bottom: 1px dotted #4d4d52;
    height: 1px;
    width: 90%
}

.zsection2 .colblk li:before {
    content: '\279E';
    position: absolute;
    top: 10px;
    left: 0;
    color: #b73b35
}

.zsection2 {
    background: #232326;
    padding: 80px 0 130px;
    position: relative
}

.zsection2:before {
    content: '';
    position: absolute;
    top: -70px;
    left: 0;
    background: #232326;
    width: 100%;
    height: 200px
}

.zsection2 h2 {
    font-size: 60px;
    margin-bottom: 60px;
    max-width: 700px
}

.clk {
    color: #acacac;
    width: 49%;
    display: inline-block;
    vertical-align: top
}

.clk em {
    color: #ff9a00;
    font-size: 34px;
    display: block
}

.feature-section {
    padding: 50px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center
}

.featuresec {
    padding: 120px 0 50px
}

.featuresec em {
    font-style: normal;
    background: #ffe5be;
    border-radius: 60px;
    padding: 10px 30px
}

.featwrap {
    padding: 60px 0 0
}

.featuresec h2 {
    font-size: 72px;
    font-family: var(--zf-primary-bold);
    max-width: 1100px
}

.feature-section .contpart {
    width: 47%
}

.feature-section .imgpart {
    width: 47%;
    position: relative
}

#feat2.feature-section .imgpart {
    text-align: center
}

.feature-section .imgpart .subimg,.feature-section .colblk .subimg {
    position: absolute;
    top: 0;
    left: 170px;
    width: 250px
}

.feature-section .imgpart {
    position: relative
}

#feat1 .imgpart:before {
    content: '';
    position: absolute;
    background: transparent linear-gradient(180deg,#ffe0e0 0%,#fff 100%) 0% 0% no-repeat padding-box;
    width: 390px;
    height: 420px;
    right: 0;
    z-index: -1
}

#feat2 .imgpart:before {
    content: '';
    position: absolute;
    background: transparent linear-gradient(180deg,#f2ffe3 0%,#fff 100%) 0% 0% no-repeat padding-box;
    width: 390px;
    height: 420px;
    bottom: 60px;
    left: 0;
    z-index: -1;
    border-radius: 50%
}

#feat3 .imgpart:before {
    content: '';
    position: absolute;
    background: transparent linear-gradient(180deg,#f2ffe3 0%,#fff 100%) 0% 0% no-repeat padding-box;
    width: 390px;
    height: 420px;
    top: 60px;
    left: 80px;
    z-index: -1
}

#feat4 .imgpart:before {
    content: '';
    position: absolute;
    background: transparent linear-gradient(180deg,#e6f7ff 0%,#fff 100%) 0% 0% no-repeat padding-box;
    width: 390px;
    height: 430px;
    top: -50px;
    right: 100px;
    z-index: -1
}

#feat3 img {
    box-shadow: 20px 20px 60px 20px rgb(0 0 0 / 15%)
}

#feat4 .imgpart img:not(.subimg) {
    box-shadow: 20px 20px 60px 20px rgb(0 0 0 / 15%)
}

#feat3.feature-section .imgpart {
    text-align: right
}

#feat1.feature-section .imgpart .subimg {
    width: 340px;
    box-shadow: 20px 20px 60px 20px rgb(0 0 0 / 15%)
}

#feat1.feature-section .imgpart .subimg2 {
    top: -60px;
    left: unset;
    right: -60px;
    width: 270px
}

#feat2.feature-section .imgpart .subimg {
    top: unset;
    left: 30px;
    width: 580px;
    bottom: -80px
}

#feat4 .subimg {
    right: 40px;
    left: unset;
    top: unset;
    bottom: -50px;
    width: 270px;
    bottom: -180px
}

#feat4 {
    margin-bottom: 200px
}

.feature-section h3 {
    font-size: 42px;
    font-family: var(--zf-secondary-bold)
}

.feature-section p {
    max-width: 430px;
    line-height: 1.8
}

.feature-section ul li {
    line-height: 32px;
    padding-left: 30px;
    position: relative;
    font-family: var(--zf-secondary-medium);
    margin-bottom: 20px
}

.feature-section ul li:before {
    content: '';
    position: absolute;
    top: 12px;
    left: 0;
    border-left: 2px solid #3233e5;
    border-bottom: 2px solid #3233e5;
    width: 12px;
    height: 5px;
    transform: rotate(-45deg);
    z-index: 0
}

.featuresub h2 {
    font-family: var(--zf-primary-bold);
    font-size: 60px;
    max-width: 800px;
    text-align: center;
    margin: 0 auto 50px
}

.featuresubwrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.featuresub .colblk {
    width: 25%;
    margin-top: 40px
}

.featuresub {
    padding: 100px 0
}

.featuresub h4 {
    font-family: var(--zf-secondary-bold);
    font-size: 32px
}

.testimonialsect {
    background: transparent linear-gradient(1deg,#272829 0%,#181b1d 100%) 0% 0% no-repeat padding-box;
    color: #fff;
    padding: 160px 120px 120px
}

.testimonialsect .content-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    max-width: 1170px
}

.testisect {
    width: 50%
}

.testisect h4 {
    font-size: 28px;
    font-family: var(--zf-primary-medium);
    line-height: 1.7;
    margin-bottom: 40px;
    position: relative
}

.testisect h4::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    background: url('//www.zohowebstatic.com/sites/zweb/images/people/zp-smb-sprite.png') no-repeat;
    background-size: 1300px auto;
    width: 44px;
    height: 35px;
    background-position: -1150px -162px
}

.testisect p {
    font-size: 29px;
    color: #fb9a00;
    margin-bottom: 60px;
    border-bottom: 1px dotted #707070;
    padding-bottom: 50px
}

.pricesect h5 {
    position: absolute;
    top: -20px;
    background: #fb9a00;
    padding: 10px 40px;
    border-radius: 30px;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 20px 26px #202223;
    text-transform: uppercase;
    font-family: var(--zf-secondary-regular);
    letter-spacing: 2px
}

.trynowbtn {
    background: #222425;
    text-align: center;
    color: #fff;
    border: 2px solid #FFF;
    padding: 10px 55px;
    border-radius: 30px;
    display: inline-block;
    margin-top: 30px
}

.pricedet {
    color: #c6c6c6;
    border-bottom: 1px solid #c6c6c6
}

.pricesect {
    position: relative;
    border: 1px dotted #707070;
    border-radius: 22px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    text-align: center;
    padding: 70px 0;
    background: transparent linear-gradient(180deg,#45484e 0%,#24252700 80%,#787A7C00 100%) 0% 0% no-repeat padding-box
}

.testisect em {
    font-style: normal
}

.amount {
    font-size: 108px;
    font-family: var(--zf-primary-light);
    display: block;
    position: relative;
    line-height: 1
}

.testisect p span {
    display: block;
    color: #ababab;
    font-size: 18px
}

.testimonialsect .pricesect {
    width: 30%
}

.bottomctawrap {
    text-align: center;
    padding: 130px 0;
    background: #ffeed5
}

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

.bottomctawrap h2 {
    font-size: 56px;
    font-family: var(--zf-primary-bold)
}

@media screen and (min-width: 1920px) {
    .zsection1 .imgpart img {
        max-width:1060px
    }
}

@media screen and (max-width: 1599px) {
    .content-wrap {
        max-width:1170px
    }

    .header-top {
        padding: 40px 0 0
    }

    .colblk li {
        font-size: 22px
    }

    .colblk li::after {
        width: 85%
    }

    .header-top h1 {
        font-size: 50px;
        max-width: 540px
    }

    .header-top p {
        font-size: 20px
    }

    .ztask.hir {
        bottom: 113px;
        right: 60px
    }

    .header-top .subimg {
        bottom: 60px
    }

    .zsection1 h2 {
        font-size: 50px;
        max-width: 650px
    }

    .ztask.cls {
        top: 135px
    }

    .featuresec h2 {
        font-size: 60px;
        max-width: 900px
    }

    #feat4 .imgpart:before {
        right: 50px
    }

    .bottomctawrap h2,.zsection2 h2,.featuresub h2 {
        font-size: 46px
    }

    .zsection1 {
        padding: 80px 0 40px
    }

    .zsection1 h2 {
        font-size: 46px
    }

    .bottomctawrap {
        padding: 90px 0
    }

    .testimonialsect .pricesect {
        width: 35%
    }

    .ztask.hir {
        bottom: 153px
    }

    .header-top .subimg {
        left: 20px
    }

    .zsection2 h2 {
        max-width: 620px
    }

    .zsection2 {
        padding: 50px 0 120px
    }

    .featuresub h4 {
        font-size: 29px
    }

    .zpcustomer li {
        margin: 0;
        transform: scale(0.8)
    }

    .zpcustomer {
        max-width: 580px;
        margin-top: 70px
    }

    .header-top .img-part img {
        transform: scale(0.9)
    }

    .ztask {
        transform: scale(0.85)
    }

    .feature-section .imgpart {
        transform: scale(0.8)
    }

    .zsection1 p {
        line-height: 1.8;
        font-size: 20px;
        max-width: 650px
    }

    .zsection1 .imgpart img {
        left: -20px;
        max-width: 750px
    }

    .zsection2 .colblk li {
        font-size: 22px;
        padding-bottom: 30px;
        margin-bottom: 16px
    }

    .featuresub h2 {
        max-width: 760px
    }

    .bottomctawrap h2 {
        max-width: 980px;
        margin: 0 auto 20px
    }

    #feat2.feature-section .imgpart .subimg {
        left: 15px
    }

    .feature-section {
        padding: 30px 0 0
    }

    #feat5 .colblk:nth-child(1) img,#feat5 .colblk:nth-child(2) img {
        max-width: 370px
    }

    #feat5 .colblk:nth-child(1) .subimg {
        width: 315px
    }

    #feat5 .colblk:nth-child(1) .lnwrap {
        top: 450px
    }

    #feat5 .colblk:nth-child(1)::after {
        right: 150px;
        top: 50px
    }

    #feat5 .colblk:nth-child(2) .subimg {
        max-width: 200px;
        right: 130px
    }

    #feat5 .colblk:nth-child(2)::after {
        top: 90px;
        right: 100px
    }

    #feat5 .colblk:nth-child(1) img {
        margin-bottom: 110px
    }

    .feature-section h3 {
        font-size: 40px
    }

    #feat5 .colblk:nth-child(1) .subimg.sub2 {
        top: 224px
    }

    #feat5 .colblk:nth-child(2)::after {
        top: 80px;
        right: 130px;
        width: 290px
    }

    #feat5 .colblk:nth-child(2) {
        margin-top: 20px
    }

    .testisect p {
        font-size: 22px
    }

    .testisect h4 {
        line-height: 1.6;
        font-size: 26px
    }

    .testisect p {
        font-size: 22px;
        padding-bottom: 35px;
        margin-bottom: 35px
    }

    .clk em {
        font-size: 24px
    }

    .amount {
        font-size: 90px
    }

    .zicon {
        background-size: 1200px auto;
        background-position: -693px -135px;
        width: 58px
    }

    .zicon.icon2 {
        width: 50px;
        background-size: 1000px auto;
        background-position: -723px -115px;
        height: 47px
    }

    .zicon.icon3 {
        width: 61px;
        background-position: -756px -135px
    }
}

@media screen and (max-width: 1399px) {
    .zsection1 {
        padding:40px 0 70px
    }

    .colblk li {
        font-size: 20px
    }

    .header-top .img-part::after {
        background-size: 130px auto;
        width: 240px;
        bottom: 60px
    }

    .header-top .img-part::before {
        transform: scale(0.8)
    }

    .zsection1 h2 {
        font-size: 42px;
        max-width: 600px
    }

    .zsection1 p {
        font-size: 18px
    }

    .zsection1 .imgpart img {
        max-width: 700px
    }

    .zsection2 h2 {
        max-width: 550px
    }

    .bottomctawrap h2,.zsection2 h2,.featuresub h2 {
        font-size: 42px
    }

    .zsection2 h2 {
        margin-bottom: 35px
    }

    .zsection2 .colblk li {
        font-size: 20px
    }

    .featuresec h2 {
        font-size: 54px;
        max-width: 860px
    }

    .feature-section h3 {
        font-size: 36px
    }

    #feat5.feature-section h3 {
        max-width: 500px
    }

    .testisect h4 {
        font-size: 24px
    }

    .testisect p {
        font-size: 20px
    }

    .testisect p span {
        font-size: 16px
    }

    .featuresec {
        padding: 100px 0
    }

    .featuresub h2 {
        max-width: 610px
    }

    .featuresub h4 {
        font-size: 26px
    }

    .amount {
        font-size: 70px
    }
}

@media screen and (max-width: 1299px) {
    .feature-section .imgpart {
        transform:scale(0.75)
    }
}

@media screen and (max-width: 1199px) {
    .header-top .img-part span {
        transform:scale(0.8)
    }

    .header-top .img-part::before,.header-top .img-part::after {
        content: none
    }

    .pagewrapper .content-wrap {
        max-width: 1040px
    }

    .zicon {
        background-size: 1000px auto;
        background-position: -576px -114px;
        width: 53px;
        height: 50px
    }

    .zicon.icon2 {
        width: 53px;
        background-position: -720px -115px
    }

    .zicon.icon3 {
        width: 54px;
        background-position: -630px -115px
    }
}

@media screen and (min-width: 992px) and (max-width:1199px) {
    .zsection1 h2 {
        font-size:40px
    }

    .zsection1 p,.colblk li,.zsection2 .colblk li {
        font-size: 18px
    }

    .header-top h1 {
        margin-bottom: 15px;
        font-size: 44px;
        max-width: 500px
    }

    .header-top {
        padding: 35px 0
    }

    .header-top p {
        max-width: 500px;
        font-size: 18px
    }

    .zsection1 p {
        margin-bottom: 30px
    }

    .zpcustomer li.cabot {
        display: none
    }

    .zpcustomer,.zsection2 h2 {
        max-width: 490px
    }

    .zpcustomer li {
        margin: 0 5px;
        transform: scale(0.8)
    }

    .bottomctawrap h2,.zsection2 h2,.featuresub h2 {
        font-size: 40px
    }

    .zsection2 h2 {
        margin-bottom: 40px
    }

    .zsection2 .colblk li {
        font-size: 18px;
        margin-bottom: 20px;
        padding-bottom: 30px
    }

    .featuresec h2 {
        font-size: 44px;
        max-width: 680px
    }

    .featuresec {
        padding: 90px 0 30px
    }

    .feature-section h3 {
        font-size: 38px
    }

    .testimonialsect {
        padding: 130px 60px 80px
    }

    .testisect h4,.testisect p {
        font-size: 22px;
        margin-bottom: 20px;
        max-width: 460px
    }

    .testisect p {
        padding-bottom: 30px
    }

    .clk em {
        font-size: 26px
    }

    .featuresub h2 {
        max-width: 650px
    }

    .featuresub {
        padding: 80px 0 70px
    }

    .featuresub .colblk {
        width: 30%
    }

    .featuresub h2 {
        margin: 0 auto 30px
    }

    .bottomctawrap h2 {
        max-width: 900px;
        margin: 0 auto 20px
    }

    .ztask {
        right: -30px
    }

    .header-top .subimg {
        left: 0;
        bottom: 65px;
        width: 160px
    }

    .ztask.cls {
        top: 122px
    }

    .ztask.hir {
        bottom: 127px
    }

    .badge {
        background-size: 700px auto;
        background-position: -341px -40px
    }

    .badge.getapp {
        background-position: -377px -47px;
        width: 95px;
        height: 29px
    }

    .badge.capterra {
        background-position: -478px -41px;
        width: 97px
    }

    .zpcustomer {
        margin-top: 50px
    }

    .zsection1 h2 {
        max-width: 570px
    }

    .zsection1 .imgpart img {
        max-width: 600px
    }

    .zsection2::before {
        top: -40px
    }

    .zsection2 {
        padding: 50px 0 90px
    }

    .featwrap {
        padding: 0
    }

    #feat5 .colblk:nth-child(1) img,#feat5 .colblk:nth-child(2) img {
        max-width: 300px
    }

    #feat5 .colblk:nth-child(1) .subimg {
        max-width: 255px
    }

    #feat5 .colblk:nth-child(1)::after {
        right: 140px;
        top: 20px;
        width: 200px;
        height: 150px
    }

    #feat5 .colblk:nth-child(1) .lnwrap {
        bottom: 57px;
        top: unset
    }

    #feat5 .colblk:nth-child(1) .lnwrap {
        left: -160px
    }

    #feat5 .colblk:nth-child(1) .subimg.sub2 {
        width: 230px;
        right: 154px;
        top: 164px
    }

    #feat5 .colblk:nth-child(2) .subimg {
        max-width: 170px
    }

    #feat5 .colblk:nth-child(2)::after {
        top: 20px;
        right: 120px;
        width: 250px
    }

    .featuresec {
        padding: 90px 0 70px
    }

    .badge {
        width: 36px;
        height: 39px
    }

    .ztask.hir {
        right: 50px
    }

    .feature-section h3 {
        font-size: 34px
    }

    #feat1.feature-section .imgpart .subimg2 {
        right: -90px
    }
}

@media screen and (max-width: 991px) {
    .header-top .cont-part,.header-top .img-part,.zsection1 .contpart,.zsection1 .imgpart,.feature-section .contpart,.feature-section .imgpart,.testisect,.testimonialsect .pricesect {
        width:100%
    }

    .header-top {
        padding: 50px 0 10px
    }

    .header-top h1 {
        font-size: 42px;
        margin-bottom: 15px;
        line-height: 1.2
    }

    .header-top p,.zsection1 p,.colblk li,.zsection2 .colblk li {
        font-size: 17px
    }

    .header-top .subimg {
        left: 80px;
        bottom: -5px;
        width: 150px
    }

    .zpcustomer {
        margin: 45px auto 0
    }

    .zrating ul {
        justify-content: center
    }

    .header-top p {
        margin: 0 auto 40px
    }

    .header-top .img-part::after,#feat2 .imgpart::before {
        content: none
    }

    .header-top .img-part {
        text-align: center;
        max-width: 500px
    }

    .ztask {
        right: 0
    }

    .ztask.hir {
        bottom: -7px;
        right: 100px
    }

    .zsection1 .imgpart img {
        bottom: 0;
        max-width: 570px;
        width: 100%
    }

    .zsection1 h2 {
        font-size: 40px;
        max-width: 580px;
        margin: 0 auto 20px
    }

    .zsection2 h2 {
        font-size: 40px;
        max-width: 560px
    }

    .zsection1 {
        padding: 40px 0 10px
    }

    .zsection2 {
        padding: 50px 0 70px
    }

    .zsection2 h2 {
        font-size: 36px;
        margin: 0 auto 30px;
        text-align: center;
        max-width: 500px
    }

    .featuresec h2 {
        font-size: 40px;
        text-align: center;
        max-width: 640px;
        margin: 0 auto 20px
    }

    .featuresec {
        padding: 90px 0 50px
    }

    .feature-section h3 {
        font-size: 32px
    }

    #feat1 .imgpart::before {
        content: none
    }

    #feat1.feature-section .imgpart .subimg {
        left: unset;
        right: 90px;
        width: 240px;
        top: 150px
    }

    #feat1.feature-section .imgpart .subimg2 {
        top: -60px;
        left: unset;
        right: 90px;
        width: 240px
    }

    .lnwrap {
        display: none
    }

    .feature-section .contpart,.feature-section .imgpart,#feat3.feature-section .imgpart,.header-top .cont-part {
        text-align: center
    }

    .feature-section p {
        max-width: 100%
    }

    .feature-section .contpart {
        max-width: 500px;
        margin: 0 auto 30px
    }

    #feat2.feature-section .imgpart .subimg {
        bottom: unset;
        left: 52%;
        transform: translate(-50%,0%);
        width: 460px;
        top: 240px
    }

    #feat3 ul {
        text-align: left;
        max-width: 390px;
        margin: 0 auto
    }

    #feat3 .imgpart::before,#feat4 .imgpart::before,#feat5 .colblk:nth-child(2)::after,#feat5 .colblk:nth-child(1)::after {
        content: none
    }

    #feat4 .subimg {
        display: none
    }

    .feature-section .imgpart {
        order: 1;
        margin-bottom: 20px
    }

    .feature-section .contpart {
        order: 2
    }

    #feat4 {
        margin-bottom: 0
    }

    .featuresubwrap {
        justify-content: flex-start
    }

    .featuresub .colblk {
        margin: 20px 20px 0;
        width: 40%
    }

    .featuresub h2 {
        font-size: 50px
    }

    .testimonialsect .pricesect {
        max-width: 400px;
        margin: 80px auto 0
    }

    .testimonialsect {
        padding: 120px 30px 90px
    }

    .testisect {
        max-width: 560px;
        margin: 0 auto;
        text-align: center
    }

    .ztestiimg {
        margin: 0 auto
    }

    .bottomctawrap h2 {
        font-size: 42px
    }

    #feat5 .colblk:nth-child(1) .subimg.sub2 {
        display: none
    }

    .zcurrency-symbol-common {
        font-size: 30px;
        margin-right: 5px
    }

    .feature-section ul li {
        line-height: 28px
    }

    .zsection1 .imgpart {
        margin-top: 20px
    }

    #feat3 img,#feat4 .imgpart img:not(.subimg) {
        display: block;
        margin: 0 auto 15px
    }

    #feat5 .colblk:nth-child(2) img {
        margin-bottom: 40px
    }

    #feat5 .colblk:nth-child(1) img {
        margin-bottom: 20px
    }

    #feat5 .colblk:nth-child(2) {
        margin-top: 0
    }

    .feature-section {
        align-items: flex-start;
        padding: 50px 0 0
    }

    #feat5 .colblk:nth-child(1) .subimg {
        width: 305px
    }

    #feat5 .colblk:nth-child(2) .subimg {
        width: 200px;
        top: 20px;
        right: -20px
    }

    .featuresub h2 {
        max-width: 560px;
        font-size: 40px
    }

    .featuresub h4 {
        font-size: 26px
    }

    .zsection1 .contpart {
        text-align: center;
        max-width: 690px;
        margin: 0 auto
    }

    .zsection1 ul {
        text-align: left
    }

    .zsection1 .imgpart {
        text-align: center
    }

    .featuresub {
        padding: 70px 0
    }

    .zsection1 .imgpart img {
        left: 0
    }

    .zsection2 .colblkwrap {
        max-width: 800px;
        margin: 0 auto
    }

    .feature-section .imgpart {
        transform: scale(0.9)
    }

    .header-top h1 {
        max-width: 540px;
        margin: 0 auto 20px
    }
}

@media screen and (min-width: 768px) and (max-width:991px) {
    .colblk {
        width:42%;
        margin: 0 20px
    }

    #feat5 {
        justify-content: center
    }

    .header-top p {
        max-width: 600px
    }

    #feat5 .colblk:nth-child(1) img,#feat5 .colblk:nth-child(2) img {
        max-width: 290px
    }

    #feat5 .colblk:nth-child(1) .subimg {
        max-width: 235px
    }

    #feat5 .colblk:nth-child(2) .subimg {
        top: -20px;
        width: 160px
    }
}

@media screen and (min-width: 768px) {
    .zsection1 .colblk li:last-child:after {
        content:none
    }
}

@media screen and (max-width: 767px) {
    .header-top h1,.zsection1 h2,.zsection2 h2,.featuresub h2 {
        font-size:40px
    }
    .zpcustomer ul {
        gap: 10px;
    }

    .zpcustomer li {
        margin: 0;
        transform: scale(0.8)
    }

    .stars-container::after {
        width: 90%
    }

    .ztask {
        right: -20px
    }

    .ztask.cls {
        top: 125px
    }

    .ztask.hir {
        right: -30px
    }

    .header-top .subimg {
        left: 40px
    }

    .zsection1 .colblk,.zsection2 .colblk,.featuresub .colblk,.colblk {
        width: 100%
    }

    .zsection1 .colblk li,.zsection2 .colblk li {
        padding-bottom: 20px;
        margin-bottom: 10px
    }

    .zsection1 p {
        margin-bottom: 20px
    }

    .featuresec em {
        padding: 0;
        background: transparent;
        color: #3636d7
    }

    .featuresec {
        padding: 60px 0 50px
    }

    #feat1.feature-section .imgpart .subimg {
        right: 10px;
        width: 180px
    }

    .feature-section h3 {
        line-height: 1.2;
        font-size: 30px;
        margin-bottom: 20px
    }

    .testimonialsect {
        padding: 90px 40px 60px
    }

    .testisect h4 {
        font-size: 20px;
        margin-bottom: 20px
    }

    .testisect p {
        font-size: 18px
    }

    .clk em {
        font-size: 20px
    }

    .testisect p span {
        font-size: 15px
    }

    .amount {
        font-size: 60px
    }

    .bottomctawrap h2,.featuresec h2 {
        font-size: 36px
    }

    .feature-section {
        padding: 50px 0 0
    }

    #feat5 .colblk:nth-child(1) .subimg {
        width: 285px
    }

    #feat5 .colblk:nth-child(2) .subimg {
        top: 10px;
        width: 150px;
        right: 10px
    }

    #feat5 .colblk:nth-child(2) img,#feat5 .colblk:nth-child(1) img {
        margin-bottom: 15px
    }

    .featwrap {
        padding: 20px 0 0
    }

    .feature-section .imgpart {
        margin-bottom: 10px
    }

    #feat1.feature-section {
        padding: 0
    }

    .testisect p {
        padding-bottom: 20px;
        margin-bottom: 25px
    }

    .act-btn {
        padding: 15px 35px;
        font-size: 14px
    }

    .featuresub h4 {
        font-size: 26px
    }

    .featuresub {
        padding: 60px 0
    }

    #feat5 .colblk {
        text-align: center;
        max-width: 500px;
        margin: 0 auto 50px
    }

    #feat5 .colblk:nth-child(1) .subimg {
        top: 100px;
        left: 100px;
        width: 320px
    }

    .testisect h4::before {
        transform: scale(0.8)
    }

    .zsect {
        width: 170px;
        padding: 15px
    }

    .zsectwrap {
        right: 0;
        top: -50px
    }

    .colblk li {
        padding-left: 25px
    }

    .zsection1 .colblk li:before {
        transform: rotate(-45deg) scale(0.8);
        top: 19px
    }
}

@media screen and (max-width: 480px) {
    .header-top h1,.zsection1 h2,.zsection2 h2 {
        font-size:30px
    }

    .header-top {
        padding: 30px 0 10px
    }

    #feat5 .colblk:nth-child(2) p {
        max-width: 340px;
        margin: 0 auto 20px
    }

    .zsection1 .contpart,.zsection2 h2 {
        text-align: left
    }

    .header-top .subimg {
        left: 10px
    }

    .ztask.hir {
        display: none
    }

    .ztask {
        top: 30px
    }

    .ztask.cls {
        top: 110px
    }

    .bottomctawrap {
        padding: 50px 0
    }

    .bottomctawrap h2,.featuresec h2 {
        font-size: 28px
    }

    .featuresub h2 {
        margin: 0 auto 25px
    }

    .feature-section h3,.featuresub h2 {
        font-size: 26px
    }

    .featuresub h4 {
        font-size: 22px
    }

    .zicon {
        margin-bottom: 5px;
        transform: scale(0.8)
    }

    .featuresub .colblk {
        margin: 15px 20px 0
    }

    .feature-section {
        padding: 30px 0 0
    }

    .zsection2 .colblk li {
        padding-bottom: 10px;
        line-height: 1.4
    }

    .zsection2 {
        padding: 30px 0 50px
    }

    .header-top p,.zsection1 p,.colblk li,.zsection2 .colblk li {
        font-size: 16px
    }

    .testimonialsect {
        padding: 90px 20px 60px
    }

    .featuresec {
        padding: 60px 0 20px
    }

    #feat1 img:not(.subimg),#feat2 img:not(.subimg),#feat5 .colblk:nth-child(1) img,#feat5 .colblk:nth-child(2) img {
        max-width: 290px
    }

    #feat2.feature-section .imgpart .subimg {
        top: 210px;
        width: 330px
    }

    #feat5 .colblk:nth-child(1) .subimg {
        top: 60px;
        left: 40px;
        width: 250px
    }

    #feat5 .colblk:nth-child(2) .subimg {
        top: -20px;
        width: 150px;
        right: 10px
    }

    #feat1.feature-section .imgpart .subimg {
        top: 120px
    }

    #feat1.feature-section .imgpart .subimg2 {
        top: -20px
    }
}