.zw-template-inner {
    background: #fcf7ec;
}

.feature-home-banner-wrap .content-wrap {
    text-align: center;
}

.bottom-cta-wrap {
    background: #fff;
}

.bottom-cta-wrap h1 {
    margin: 0 auto 15px;
}

.feature-main {
    text-align: center;
}

.zw-product-header {
    background: #fcf7ec;
}


#block-system-main {
    margin-bottom: 0;
    background: #fcf7ec
}

:after,
:before {
    box-sizing: content-box;
}

.feature-home-banner-wrap:before {
    background: 0
}

.act-btn.cta-btn {
    margin-top: 12px
}

.feature-home-banner-wrap h1 {
    font-size: 52px;
    letter-spacing: 0;
    margin: 0 auto 25px;
    line-height: 1.1;
    max-width: 1120px;
}

.feature-home-banner-wrap .content-wrap p {
    text-align: center
}

.feature-home-banner-wrap h1 span {
    color: #014e41;
}

.feature-home-banner-wrap .content-wrap p {
    font-size: 20px;
    margin: 0 auto 25px;
    max-width: 800px;
}

.feature-home-banner-wrap .content-wrap {
    padding: 80px 0 80px
}

.feature-main.content-wrap {
    max-width: 1280px;
    width: 100%;
    padding: 150px 0
}

.ztwo-col {
    width: 88%;
    margin: 0 auto
}

.ztwo-col>div {
    width: 50%;
    display: inline-block;
    vertical-align: middle
}

.ztwo-col .zcont-part {
    text-align: left
}

.curve-section {
    transform: scale(1.3);
    width: 90%;
    margin: 0 0 0 auto;
    display: inline-block
}

.zcont-part h2 {
    font: 52px/1 Zoho_Puvi_Bold;
    max-width: 500px;
    margin-bottom: 35px
}

.feature-1 .zcont-part h2 {
    margin-top: 20%
}

.feature-section-wrap .zcont-part p {
    text-align: left;
    margin-left: 0;
    max-width: 460px;
    font-size: 20px;
    margin-bottom: 15px
}

.lang-ar .feature-section-wrap:not(.feature-3) .zcont-part p {
    max-width: 430px;
    margin-left: auto;
    text-align: right
}

.lang-ar .feature-section-wrap.feature-1 .zcont-part p {
    margin-right: 0
}

p.zlearn-part a {
    text-decoration: none;
    color: black;
    font: 18px/1 Zoho_Puvi_Bold;
    position: relative
}

.feature-home-page-wrap .feature-main+.feature-media-with-sub {
    padding: 0
}

.feature-1 .feature-main.content-wrap {
    padding: 120px 0 250px
}

.feature-3 .feature-main.content-wrap {
    padding: 220px 0 0;
    z-index: 1;
    max-width: 100%
}

.feature-5 .feature-main.content-wrap {
    padding: 120px 0 0
}

.feature-3 .ztwo-col {
    width: 75%;
    margin: 0 auto
}

.lang-ar .feature-3 .ztwo-col {
    direction: initial
}

.feature-3 .zcont-part {
    width: 45%
}

.feature-3 .zimg-part {
    width: 55%;
    text-align: right
}

.feature-3 .zimg-part img {
    width: 80%;
    /* vertical-align:top */
}

.lang-ar .feature-3 .zcont-part,
.lang-ar .feature-3 .zcont-part *,
.lang-ar .feature-3 .zcont-part p {
    direction: inherit;
    text-align: left
}

.feature-3 .zcont-part {
    margin-top: 3%;
    /* padding-left:5% */
}

.feature-3 .feature-media-with-sub.subfeatures-0 {
    padding: 0
}

.wave-section {
    width: 100%;
    overflow: hidden;
    margin-top: -20%;
    margin-bottom: -5%
}

.wave-section img {
    opacity: 1;
    width: 1680px
}

p.zlearn-part a::after {
    content: "";
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(-45deg);
    position: absolute;
    top: 0;
    right: -21px;
    bottom: 0;
    margin: auto
}

p.zlearn-part a::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background: black;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: -26px;
    bottom: 0;
    margin: auto
}

.feature-main .feature-content p.zdemo {
    margin-bottom: 10px
}

.feature-main .feature-content p {
    font-size: 20px
}

.feature-main .feature-content a {
    border-bottom: 1px solid;
}

p.zdemo a {
    font: 28px/1 Zoho_Puvi_Bold;
    text-decoration: underline;
    color: #55a7ed
}

p.zlearn-part {
    padding-right: 30px
}

.feature-2,
.feature-4 {
    position: relative;
    z-index: 9;
    color: white
}

.feature-2 .feature-main.content-wrap {
    padding: 80px 0
}

.feature-2 .zcont-part h2,
.feature-2 .zcont-part p,
.feature-2 .zcont-part a {
    margin: 0 0 35px 80px
}

.lang-ar .feature-2 .zcont-part h2,
.lang-ar .feature-2 .zcont-part p {
    margin: 0 80px 35px 0
}

.feature-2 .ztwo-col {
    width: 90%
}

.feature-2::after {
    content: "";
    position: absolute;
    background: #010232;
    border-right: 1px solid #cccccc24;
    width: 42%;
    height: 100%;
    z-index: -1;
    top: 0;
    left: 2.5%;
    border-radius: 5px
}

.feature-2::before,
.feature-4::before {
    content: "";
    position: absolute;
    background: #000;
    width: 95%;
    height: 100%;
    z-index: -2;
    top: 0;
    left: 2.5%;
    border-radius: 5px
}

.lang-ar .feature-2::before {
    left: 2.5%
}

.lang-ar .feature-2:after {
    right: 2.5%;
    width: 45%
}

.feature-2 .zlearn-part a,
.feature-4 .zlearn-part a {
    color: white
}

.feature-2 p.zlearn-part a::before,
.feature-2 p.zlearn-part a::after,
.feature-4 p.zlearn-part a::before,
.feature-4 p.zlearn-part a::after {
    background: white;
    border-color: black
}

.feature-4 .ztwo-col .zcont-part h2,
.feature-4 .ztwo-col .zcont-part p {
    text-align: center;
    margin: 0 auto 35px;
    max-width: 600px
}

.lang-ar .feature-4 .ztwo-col .zcont-part p {
    margin: auto
}

.feature-4 .ztwo-col>div {
    width: 100%
}

.lang-ar .feature-4 .ztwo-col>div {
    text-align: center
}

.feature-4 .feature-main.content-wrap {
    padding: 120px 0 100px;
}

.lang-ar .feature-4 .feature-main.content-wrap img {
    margin: auto
}

.feature-4 .zimg-part {
    margin-top: 30px
}

.feature-4 .zimg-part img {
    width: 80%
}

.feature-4::before {
    height: 100%
}

ul.zvideo li video {
    width: 130px;
    height: auto
}

ul.zvideo li {
    padding: 20px 0;
    display: block;
    text-align: center
}

ul.zvideo li:nth-child(1),
ul.zvideo li:nth-child(2),
ul.zvideo li:nth-child(3),
ul.zvideo li:nth-child(4) {
    opacity: 0
}

.animate ul.zvideo li:nth-child(1) {
    animation: blink .2s linear forwards;
    animation-delay: .4s
}

.animate ul.zvideo li:nth-child(2) {
    animation: blink .2s linear forwards;
    animation-delay: .6s
}

.animate ul.zvideo li:nth-child(3) {
    animation: blink .2s linear forwards;
    animation-delay: .8s
}

.animate ul.zvideo li:nth-child(4) {
    animation: blink .2s linear forwards;
    animation-delay: 1s
}

ul.zvideo li:nth-child(1) video {
    width: 140px
}

ul.zvideo li:nth-child(4) video {
    width: 180px
}

ul.zvideo {
    z-index: 1;
    margin: 0 80px 0 0
}

.bottom-cta-wrap h1 {
    max-width: 800px;
    font-size: 52px
}

.bottom-cta-wrap .content-wrap {
    padding: 90px 0 100px
}

.bottom-cta-wrap .content-wrap * {
    text-align: center
}

.req-btn {
    border: 1px solid;
    color: #000;
    margin: 0 0 0 15px;
}

.wave-section {
    width: 100%;
    margin-top: -20%;
    margin-bottom: -2%;
    position: relative;
    z-index: 0;
    height: 750px;
    overflow: hidden
}

.wave-section::after {
    content: "";
    position: absolute;
    background: url(/sites/zweb/images/directory/images/dir_feat_wave2x.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -2;
    height: 100%;
    width: 1680px
}

ul.ztracker {
    width: 1680px;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden
}

.wave-section img {
    opacity: 0;
    max-width: 1680px;
    height: auto;
    overflow: hidden
}

.ztracker li {
    font-size: 0;
    height: 50px;
    position: relative;
    display: block;
    box-sizing: border-box
}

ul.ztracker li span {
    background: #aa8940;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute
}

.ztracker li:nth-child(1) {
    top: 508px;
    left: 324px
}

.ztracker li:nth-child(2) {
    top: 307px;
    left: 612px
}

.ztracker li:nth-child(3) {
    top: 295px;
    left: 810px
}

.ztracker li:nth-child(4) {
    top: -57px;
    left: -100px;
    text-align: right
}

.ztracker li span::after,
.ztracker li span::before {
    position: absolute;
    content: "";
    border: 1px solid #aa8940;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: -2px;
    left: -2px;
    z-index: -1
}

.ztracker li span::after {
    animation: ripple 2s 1s ease-out infinite
}

.ztracker li span::before {
    animation: ripple 2s ease-out infinite
}

@keyframes ripple {
    0% {
        opacity: .25
    }

    100% {
        opacity: 0;
        transform: scale(3.5)
    }
}

.ztracker p {
    position: relative;
    font-size: 0;
    margin: 0
}

.ztracker p::after {
    position: absolute;
    content: "";
    background: url(/sites/zweb/images/directory/images/dir_feat_icons_sprite2x.png);
    background-repeat: no-repeat;
    background-size: 100px;
    background-position: 4px;
    width: 30px;
    height: 30px;
    top: -50px;
    left: -12px
}

.ztracker li:nth-child(2) p::after {
    background-position: -34px
}

.ztracker li:nth-child(3) p::after {
    background-position: -72px
}

.ztracker li:nth-child(4) p::after {
    background-size: 0
}

.ztracker li:nth-child(4) p,
.ztracker li:nth-child(3) p,
.ztracker li:nth-child(2) p,
.ztracker li:nth-child(1) p {
    opacity: 0
}

.animate .ztracker li:nth-child(4) p {
    opacity: 0;
    animation: blink .2s linear forwards;
    animation-delay: 1.4s
}

.animate .ztracker li:nth-child(3) p {
    opacity: 0;
    animation: blink .2s linear forwards;
    animation-delay: 1.2s
}

.animate .ztracker li:nth-child(2) p {
    opacity: 0;
    animation: blink .2s linear forwards;
    animation-delay: 1s
}

.animate .ztracker li:nth-child(1) p {
    opacity: 0;
    animation: blink .2s linear forwards;
    animation-delay: .8s
}

ul.zcircle li {
    font-size: 0;
    background-color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 1px 1px 4px 1px #ddd;
    transform: scale(1.3);
    position: absolute
}

ul.zcircle li::after {
    font-size: 0;
    background: url("/sites/zweb/images/directory/images/dir_feat_logo-sprite2x.png");
    background-repeat: no-repeat;
    background-size: 130px;
    background-position: 3px;
    width: 20px;
    height: 20px;
    position: absolute;
    content: "";
    top: 15px;
    left: 14px
}

ul.zcircle li.goog-doc::after {
    left: 16px;
}

ul.zcircle {
    width: 280px;
    height: 300px;
    position: relative;
    margin: 0 0 0 30%;
    top: -90px;
    z-index: 1;
    display: inline-block
}

.lang-ar ul.zcircle {
    margin: 0 30% 0 0%
}

ul.zcircle::after {
    position: absolute;
    content: "";
    background: url("/sites/zweb/images/directory/images/dir_feat_ellipse-802x.png");
    background-repeat: no-repeat;
    background-size: 350px;
    background-position: center;
    top: 20px;
    left: -10px;
    width: 100%;
    height: 100%;
    z-index: -1
}

ul.zcircle li:nth-child(1) {
    top: 36px;
    left: 20px;
    opacity: 0
}

ul.zcircle li:nth-child(2) {
    top: 8px;
    left: 112px;
    opacity: 0
}

ul.zcircle li:nth-child(3) {
    top: 50px;
    left: 204px;
    opacity: 0
}

ul.zcircle li:nth-child(4) {
    top: 136px;
    left: 242px;
    opacity: 0
}

ul.zcircle li:nth-child(5) {
    top: 228px;
    left: 206px;
    opacity: 0
}

.animate ul.zcircle li:nth-child(1) {
    animation: blink .2s linear forwards;
    animation-delay: .8s
}

.animate ul.zcircle li:nth-child(2) {
    animation: blink .2s linear forwards;
    animation-delay: .9s
}

.animate ul.zcircle li:nth-child(3) {
    animation: blink .2s linear forwards;
    animation-delay: 1s
}

.animate ul.zcircle li:nth-child(4) {
    animation: blink .2s linear forwards;
    animation-delay: 1.1s
}

.animate ul.zcircle li:nth-child(5) {
    animation: blink .2s linear forwards;
    animation-delay: 1.2s
}

@keyframes blink {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.zimg-part {
    opacity: 0
}

.zimg-part.animate {
    animation: fadeI .5s linear forwards
}

@keyframes fadeI {
    0% {
        opacity: 0;
        transform: translateY(100px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

ul.zcircle li:nth-child(2)::after {
    background-position: -27px
}

ul.zcircle li:nth-child(3)::after {
    background-position: -57px
}

ul.zcircle li:nth-child(4)::after {
    background-position: -87px
}

ul.zcircle li:nth-child(5)::after {
    background-position: -113px
}

.zcircle li.zimg-main,
.zcircle li.zpass {
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
    transform: scale(1)
}

.zcircle li.zimg-main::after,
.zcircle li.zpass::after {
    content: none
}

.zcircle li.zimg-main img {
    width: 300px
}

.zcircle li.zimg-main img {
    width: 260px;
    border: 0;
    border-radius: 8px
}

.zcircle li.zimg-main {
    width: 100%;
    top: 110px;
    right: 90px
}

.zcircle li.zpass img {
    max-width: 90px
}

.zcircle li.zpass {
    top: 308px;
    left: -118px;
    opacity: 0
}

.animate .zcircle li.zpass {
    animation: zoomgo .6s linear forwards;
    animation-delay: .2s
}

@keyframes zoomgo {
    0% {
        top: 383px;
        left: -45px;
        transform: scale(0);
        opacity: 0
    }

    100% {
        top: 308px;
        left: -118px;
        transform: scale(1);
        opacity: 1
    }
}

p.zlearn-part a::before,
p.zlearn-part a::after {
    animation: slid 3s linear infinite both
}

@keyframes slid {
    0% {
        transform: translateX(0) rotate(-45deg)
    }

    50% {
        transform: translateX(7px) rotate(-45deg)
    }
}


/* added new start */

.device-auth-section {}

.device-auth-section.feature-2::before {
    /* content: "";
    position: absolute;
    background: #000;
    width: 53%;
    height: 100%;
    z-index: -2;
    top: 0;
    right: 2.5%;
    border-radius: 0 5px 5px 0;
    left: auto; */
    width: 53%;
    z-index: 1;
    top: 0;
    right: 2.5%;
    border-radius: 0 5px 5px 0;
    left: auto;
}

.device-auth-section .ztwo-col .zcont-part {
    position: relative;
    z-index: 1;
}

.device-auth-section.feature-2::after {
    border-radius: 5px 0 0 5px;
    box-shadow: -1px 0 0 0 #cccccc24 inset;
}

.device-auth-section .content-wrap.feature-main {
    padding: 140px 0;
}

.da-screen {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.da-screen {}

.da-screen:after {
    /* content: "";
    display: grid;
    position: absolute;
    height: 100%;
    background: #000;
    width: 95px;
    right: 0;
    top: 0; */
}

.provision-img-box .p-main-screen {
    max-width: 450px;
    line-height: 0;
    /* box-shadow: -5px 0 15px 0px #00000020; */
    /* overflow: hidden; */
    position: relative;
    z-index: 1;
}


.provision-img-box .p-main-screen img {
    position: relative;
    z-index: 2;
    border-radius: 10px;
}

.icon-listing {
    width: 500px;
    height: 500px;
    border: 1px dashed #E3C98D;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    right: -200px;
    transform: translateY(-50%);
}

.icon-listing.il-2 {
    width: 360px;
    height: 360px;
    right: -125px;
}

.icon-listing.il-3 {
    width: 220px;
    height: 220px;
    right: -55px;
}

span.il-icon {
    width: 65px;
    height: 65px;
    display: grid;
    /* background: #fff; */
    border-radius: 50%;
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
    align-items: center;
    justify-items: center;
}

.icon-listing.il-1 span.il-icon.il-icon-1 {
    transform: translateY(calc(-50% - 120px)) translateX(-30px);
}

.icon-listing.il-1 span.il-icon.il-icon-3 {
    transform: translateY(calc(-50% + 120px)) translateX(-30px);
}

.icon-listing.il-2 span.il-icon.il-icon-1 {
    transform: translateY(calc(-50% - 50px)) translateX(-5px);
}

.icon-listing.il-2 span.il-icon.il-icon-2 {
    transform: translateY(calc(-50% + 50px)) translateX(-5px);
}

.icon-listing.il-1 span.il-icon.il-icon-2 {
    right: -35px;
}

span.il-icon span.il-icon-in {
    position: absolute;
    width: 100%;
    height: 100%;
    display: grid;
    align-items: center;
    justify-items: center;
    background: #ffffff;
    border-radius: 100%;
}

.icon-listing span.il-icon .il-icon-in:before {
    content: "";
    display: grid;
    background: url(/sites/zweb/images/directory/features/site-sprite.png) top center no-repeat;
    background-size: 552px auto;
    transform: scale(.9);
}

.il-1 span.il-icon-1 .il-icon-in:before {
    background-position: -141px -12px;
    width: 43px;
    height: 26px;
}

.il-1 span.il-icon-2 .il-icon-in:before {
    background-position: -284px -7px;
    width: 34px;
    height: 35px;
}

.il-1 span.il-icon-3 .il-icon-in:before {
    background-position: -318px -10px;
    width: 32px;
    height: 31px;
}

.il-2 span.il-icon-1 .il-icon-in:before {
    background-position: -184px -5px;
    width: 40px;
    height: 38px;
}

.il-2 span.il-icon-2 .il-icon-in:before {
    background-position: -252px -7px;
    width: 32px;
    height: 35px;
}

span.left-icon-box {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    height: 100px;
    background: #fff;
    color: #000;
    /* font-weight: bold; */
    font-family: var(--primaryfont-bold);
    line-height: 1.1;
    font-size: 11px;
    border-radius: 50px;
    align-items: center;
    display: grid;
    justify-content: center;
    padding: 11px;
    justify-items: center;
    gap: 7px;
    align-content: center;
}

span.left-icon-box:after {
    content: "";
    width: 150px;
    height: 1px;
    border-bottom: 1px dashed #FFFFFF57;
    left: 100%;
    position: absolute;
}

.active-sync-img-box {
    position: relative;
    max-width: 900px;
    margin: 50px auto 0;
}

span.left-icon-box span.contact-icon {
    width: 26px;
    height: 28px;
    background: url(/sites/zweb/images/directory/features/site-sprite.png) top center no-repeat;
    background-size: 552px auto;
    background-position: -352px -11px;
}

.ad-main-screen {
    position: relative;
    z-index: 1;
}

.active-sync-img-box .icon-listing {
    border-color: #FFFFFF57;
}

.active-sync-img-box .icon-listing.il-1 {
    /* width: 440px;
    height: 440px; */
    width: 410px;
    height: 390px;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    right: -25px;
}

.active-sync-img-box .icon-listing.il-2 {
    width: 300px;
    height: 300px;
    /* border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent; */
    right: 50px;
}

.active-sync-img-box span.il-icon {
    width: 60px;
    height: 60px;
    right: -25px;
}

.active-sync-img-box .il-1 span.il-icon-1 .il-icon-in:before {
    background-position: -4px -10px;
    width: 27px;
    height: 28px;
    transform: scale(1);
}

.active-sync-img-box .il-1 span.il-icon-2 .il-icon-in:before {
    background-position: -462px -4px;
    width: 47px;
    height: 41px;
}

.active-sync-img-box .il-1 span.il-icon-3 .il-icon-in:before {
    background-position: -510px -3px;
    width: 37px;
    height: 42px;
}

.active-sync-img-box .il-2 span.il-icon-1 .il-icon-in:before {
    background-position: -379px -4px;
    width: 40px;
    height: 40px;
}

.active-sync-img-box .il-2 span.il-icon-2 .il-icon-in:before {
    background-position: -421px -4px;
    width: 40px;
    height: 44px;
}

.active-sync-img-box .icon-listing.il-1 span.il-icon-2 {
    right: -30px;
}

.active-sync-img-box .icon-listing span.il-icon .il-icon-in:before {
    transform: scale(.8);
}

.active-sync-img-box .icon-listing.il-1 span.il-icon-1 .il-icon-in:before {
    transform: scale(1);
}

.provisioning-section .ztwo-col {
    width: 100%;
}

/* animation css start */

span.il-icon .il-icon-in {
    transform: scale(0);
    opacity: 0;
    transition: transform .65s ease, opacity .65s ease;
}

.zwe-op span.il-icon .il-icon-in {
    transform: scale(1);
    opacity: 1;
}

span.il-icon.il-icon-2 .il-icon-in {
    /* transition-delay: .85s; */
}

/* span.il-icon.il-icon-2 .il-icon-in{
    transition-delay: .85s;
  }
  span.il-icon.il-icon-3 .il-icon-in{
    transition-delay: .85s;
  } */

.il-2 span.il-icon-1 .il-icon-in {
    transition-delay: 2s;
}

.il-1 span.il-icon-3 .il-icon-in {
    transition-delay: .8s;
}

.il-2 span.il-icon-2 .il-icon-in {
    transition-delay: 1.6s;
}

.il-1 span.il-icon-1 .il-icon-in {
    transition-delay: 1.2s;
}

.il-1 span.il-icon-2 .il-icon-in {
    transition-delay: .4s;
}

span.left-icon-box span.contact-icon {
    transform: scale(0);
    opacity: 0;
    transition: transform 1s ease, opacity 1s ease;
}

.zwe-op span.left-icon-box span.contact-icon {
    transform: scale(1);
    opacity: 1;
}

/* animation css end */


/* added new end */

@media only screen and (max-width:767px) {
    .zimg-part ul.zcircle {
        margin: 0 auto
    }

    .feature-1 .zimg-part {
        margin-top: 100px;
    }


    .lang-ar ul.zcircle {
        margin: 0 30% 0 0%
    }

    .zw-template-inner .zvideo li img {
        width: 100px
    }

    .zw-template-inner .zvideo li:nth-child(4) img {
        width: 110px
    }

    .zimg-part ul.zcircle li {
        transform: translateX(50px) scale(1)
    }

    .zimg-part ul.zcircle::after {
        transform: translateX(50px) scale(1)
    }

    .curve-section {
        transform: scale(1)
    }

    .ztwo-col .zcont-part {
        text-align: center;
    }

    .feature-3 .zcont-part,
    .feature-3 .zimg-part {
        width: 100%
    }

    .zw-template-inner .feature-1 .feature-main.content-wrap {
        padding: 80px 0 100px
    }

    .zcont-part h2 {
        font: 36px/1 Zoho_Puvi_Bold
    }

    .lang-ar .feature-section-wrap:not(.feature-3) .zcont-part p {
        text-align: center;
        margin-left: auto;
        margin-right: auto
    }

    .lang-ar .feature-3 .zcont-part,
    .lang-ar .feature-3 .zcont-part *,
    .lang-ar .feature-3 .zcont-part p {
        text-align: center
    }

    .lang-ar .feature-2 .zcont-part h2,
    .lang-ar .feature-2 .zcont-part p {
        margin: 0 auto 35px auto
    }

    p.zdemo a {
        font: 24px/1 Zoho_Puvi_Bold
    }

    .feature-2 .ztwo-col {
        width: 95%
    }

    section.feature-2 .zcont-part h2,
    section.feature-2 .zcont-part p {
        margin: 0 0 15px 0
    }

    .ztwo-col>div {
        width: 100%;
        display: inline-block
    }

    .feature-2::after,
    .lang-ar .feature-2:after {
        width: 0;
        height: 50%;
        border-right: 0;
        border-top: 1px solid #cccccc24;
        bottom: 0;
        top: auto
    }

    .feature-3 .zimg-part,
    .feature-3 .zimg-part {
        text-align: left
    }

    .feature-3 .zimg-part img {
        width: 90%
    }

    .feature-4 .zimg-part img {
        width: 100%
    }

    .feature-home-banner-wrap .content-wrap {
        padding: 100px 0 0 
    }


    .zimg-part {
        margin-top: 0
    }



    .zw-template-inner .feature-4 .feature-main.content-wrap {
        padding: 70px 0 0;
        z-index: 1
    }

    .zw-template-inner .feature-2 .feature-main.content-wrap,
    .zw-template-inner .feature-5 .feature-main.content-wrap {
        padding: 80px 0
    }

    .feature-3 .wave-section {
        margin-top: -80%;
        margin-bottom: -5%
    }

    .feature-3 ul.ztracker {
        display: none
    }

    .zw-template-inner .feature-section-wrap img {
        max-width: 80%
    }

    ul.zvideo {
        z-index: 1;
        margin: 0;
        text-align: center;
        width: 100%;
        background: #010232;
        border-top: 1px solid #cccccc24;
        padding: 60px 0;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px
    }

    ul.zvideo li {
        z-index: 1;
        margin: 0 20px 20px;
        text-align: center;
        display: inline-block;
        vertical-align: middle
    }

    ul.zvideo li video,
    ul.zvideo li:nth-child(1) video,
    ul.zvideo li:nth-child(4) video {
        width: 100px;
        height: auto
    }

    .zw-template-inner .bottom-cta-wrap h1 {
        font-size: 36px;
        max-width: 600px
    }

    .feature-content .ztwo-col>div h2,
    .feature-content .ztwo-col>div p,
    .feature-2 .zcont-part a {
        text-align: center;
        margin: 0 auto 25px
    }

    .act-btn.cta-btn {
        font-size: 17px
    }

    .zw-template-inner .feature-2 p.zlearn-part {
        padding: 0 30px 30px 0
    }

    .wave-section {
        display: none
    }

    .zw-template-inner .feature-3 .feature-main.content-wrap {
        padding: 80px 0 0;
        z-index: 1
    }

    .feature-3 .feature-content {
        background: url(/sites/zweb/images/directory/images/dir_feat_wave2x.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 98%;
        background-position-y: 180px;
        padding-bottom: 80px
    }

    .zimg-part.animate .zcircle li.zpass {
        animation: zoomgo2 .6s linear forwards;
        animation-delay: .2s
    }

    @keyframes zoomgo2 {
        0% {
            top: 330px;
            left: -50px;
            transform: translateX(50px) scale(0);
            opacity: 0
        }

        100% {
            top: 280px;
            left: -102px;
            transform: translateX(50px) scale(1);
            opacity: 1
        }
    }

    .feature-home-banner-wrap h1 {
        font-size: 36px;
        max-width: 600px;
    }
}

@media only screen and (max-width:1400px) {
    .provisioning-section .ztwo-col {
        width: 90%;
    }

    .provision-img-box {
        transform: translateX(-10%) scale(.9);
    }
}



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

    /* .provision-img-box {
    transform: translateX(-17%) scale(.8);
  } */

    .provision-img-box .icon-listing.il-3 {
        display: none;
    }

    .provision-img-box .icon-listing.il-2 {
        right: -55px;
    }

    .provision-img-box .icon-listing {
        right: -125px;
    }

    .provision-img-box {
        transform: translateX(-10%) scale(.8);
    }

    .active-sync-img-box {
        transform: scale(.8);
        margin: 0 auto;
    }

    .feature-3 .ztwo-col {
        width: 87%;
        margin: 0 auto;
    }

    .zcont-part h2 {
        font-size: 40px;
    }

    .feature-home-banner-wrap h1 {
        max-width: 880px;
    }

    .ztwo-col .zcont-part {
        text-align: left;
        padding-right: 40px;
    }
}


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

    /* .provision-img-box .icon-listing.il-3{
        display: none;
    }
    .provision-img-box .icon-listing.il-2{
        right: -55px;
    }
    .provision-img-box .icon-listing{
        right: -125px;
    }
  
    .provision-img-box {
        transform: translateX(-10%) scale(.8);
    } */
    .provision-img-box .icon-listing.il-3,
    .provision-img-box .icon-listing.il-1 {
        display: none;
    }

    .provision-img-box .icon-listing.il-2 {
        right: -55px;
    }

}

@media only screen and (max-width:991px) {
    .feature-home-banner-wrap .content-wrap {
        padding: 80px 0 0
    }

    .feature-3 .zimg-part {
        text-align: center
    }

    .feature-2 .zcont-part h2,
    .feature-2 .zcont-part p,
    .feature-2 .zcont-part a {
        margin: 0 0 35px 0px;
    }

    .feature-2 .zcont-part h2,
    .feature-2 .zcont-part p {
        margin: 0 0 15px 0
    }

    .feature-3 .zcont-part {
        padding-left: 0
    }

    .feature-1 .feature-main.content-wrap {
        padding: 130px 0
    }

    .feature-3 .feature-main.content-wrap {
        padding: 150px 0 0
    }

    .feature-3 .zcont-part h2,
    .feature-3 .zcont-part p {
        text-align: center;
        margin: 0 auto 30px
    }

    .feature-home-banner-wrap h1 {
        font-size: 52px
    }


    .feature-3 .ztwo-col>div {
        vertical-align: top;
        width: 100%;
        text-align: center
    }

    .feature-3 .ztwo-col,
    .feature-5 .ztwo-col {
        width: 94%;
        margin: 0 auto
    }

    .bottom-cta-wrap h1 {
        max-width: 700px;
        font-size: 46px;
    }

    .curve-section {
        transform: scale(1);
        margin: 0 auto
    }

    ul.zcircle {
        width: 260px;
        margin: 0 0 0 30%
    }

    .feature-4 .zimg-part img {
        width: 100%
    }

    ul.zcircle::after {
        background-size: 280px
    }

    ul.zcircle li {
        transform: scale(1)
    }

    .zcircle li.zimg-main img {
        width: 220px
    }

    .zcircle li.zpass {
        top: 280px;
        left: -102px;
        opacity: 0;
        width: 70px
    }

    .animate .zcircle li.zpass {
        animation: zoomgo1 .6s linear forwards;
        animation-delay: .2s
    }

    @keyframes zoomgo1 {
        0% {
            top: 330px;
            left: -50px;
            transform: scale(0);
            opacity: 0
        }

        100% {
            top: 280px;
            left: -102px;
            transform: scale(1);
            opacity: 1
        }
    }

    ul.zcircle li:nth-child(1) {
        top: 54px;
        left: 30px
    }

    ul.zcircle li:nth-child(2) {
        top: 36px;
        left: 112px
    }

    ul.zcircle li:nth-child(3) {
        top: 76px;
        left: 182px
    }

    ul.zcircle li:nth-child(4) {
        top: 156px;
        left: 204px
    }

    ul.zcircle li:nth-child(5) {
        top: 226px;
        left: 164px
    }

    .wave-section {
        margin-top: -30%
    }

    ul.ztracker,
    .wave-section::after {
        left: -10%
    }

    .curve-section {
        transform: scale(1);
    }

    .feature-section-wrap.device-auth-section img {
        /* max-width: 440px; */
        max-width: 90%;
        width: 440px;
    }

    .feature-section-wrap.provisioning-section img {
        max-width: 90%;
    }

    .provisioning-section .ztwo-col .zcont-part {
        padding-right: 50px;
    }

    .ad-main-screen {
        transform: scale(.9);
    }

    .zcont-part h2 {
        font-size: 40px;
    }

    .feature-home-banner-wrap .content-wrap p {
        font-size: 18px;
    }

    .feature-main .feature-content p {
        font-size: 18px;
    }

}

@media only screen and (max-width:850px) {
    .ad-main-screen {
        transform: scale(.8);
    }

    .zcont-part h2 {
        font-size: 34px;
    }
}

@media only screen and (max-width:767px) {
    .feature-home-banner-wrap h1 {
        font-size: 36px;
        max-width: 600px
    }

    .feature-1 .feature-main.content-wrap {
        padding: 80px 0;
    }

    .feature-section-wrap img .zvideo li img {
        width: 100px;
    }

    .device-auth-section.feature-2::before {
        width: 95%;
        left: 2.5%;
        border-radius: 5px;
    }

    .da-screen {
        z-index: 1;
        margin-bottom: 50px;
    }

    .zw-template-inner .device-auth-section.feature-2 .content-wrap {
        padding: 80px 0 80px;
    }

    .zw-template-inner .device-auth-section .feature-content .ztwo-col>div p {
        margin-bottom: 0;
    }

    .zw-template-inner .provisioning-section .content-wrap {
        padding: 80px 0 80px;

    }

    .provision-img-box {
        transform: scale(1);
    }

    .provision-img-box .p-main-screen {
        margin: 20px auto 0 auto;
    }

    .provision-img-box .icon-listing {
        display: none;
    }

    span.left-icon-box {
        display: none;
    }

    .active-sync-img-box .icon-listing {
        display: none;
    }

    .zw-template-inner .active-sync-section.feature-4>.content-wrap {
        padding: 80px 0;
    }

    .active-sync-img-box {
        margin-top: 20px;
    }

    .ad-main-screen,
    .active-sync-img-box {
        transform: scale(1);
    }

    .provisioning-section .ztwo-col .zcont-part {
        padding-right: 0px;
    }
    .ztwo-col .zcont-part {
        text-align: center;
        padding-right: 0px;
    }
    .feature-2 .ztwo-col .zcont-part {
        padding: 40px 20px 30px;
    }
}

@media only screen and (min-width:1921px) {
    .wave-section {
        margin-top: -25%;
        margin-bottom: -2%;
        transform: scale(2);
        width: 50%;
        left: 25%
    }

    .ztracker p::after {
        background-size: 60px;
        background-position: 2px;
        width: 20px;
        height: 30px;
        top: -50px;
        left: -12px
    }

    .ztracker li:nth-child(2) p::after {
        background-position: -19px
    }

    .ztracker li:nth-child(3) p::after {
        background-position: -42px
    }

    ul.ztracker li span {
        width: 6px;
        height: 6px
    }

    .ztracker li span::after,
    .ztracker li span::before {
        top: -3px;
        left: -3px
    }

    section#feature-4 {
        margin-top: 10%
    }

    .feature-3 .zcont-part {
        padding-left: 10%
    }

    .feature-3 .zimg-part {
        text-align: center
    }

    .wave-section .ztracker li:nth-child(1) {
        top: 584px;
        right: 1750px;
        left: auto
    }

    .wave-section .ztracker li:nth-child(2) {
        top: 518px;
        right: 1510px;
        left: auto
    }

    .wave-section .ztracker li:nth-child(3) {
        top: 352px;
        right: 1330px;
        left: auto
    }


}

@media only screen and (min-width:1681px) {
    .wave-section::after {
        width: 1920px
    }

    .ztracker li {
        text-align: right
    }

    .ztracker li:nth-child(1) {
        top: 578px;
        right: 1540px;
        left: auto
    }

    .ztracker li:nth-child(2) {
        top: 356px;
        right: 1202px;
        left: auto
    }

    .ztracker li:nth-child(3) {
        top: 350px;
        right: 975px;
        left: auto
    }

    .ztracker li:nth-child(4) {
        top: -57px;
        left: -100px
    }

    ul.ztracker {
        width: 1920px
    }

    .ztracker p::after {
        right: -13px;
        left: auto
    }
}

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


    .animate ul.zvideo li:nth-child(2) {
        margin-bottom: -6px
    }

    .curve-section {
        transform: scale(0.88);
        position: relative;
        text-align: center
    }

    .feature-3 .wave-section {
        margin-top: -70%;
        margin-bottom: -10%
    }

    .feature-2 ul.zvideo li {
        margin: 0 20px
    }

    .feature-3 .feature-content {
        background-position: 98%;
        background-position-y: 280px
    }

    .ztwo-col ul.zvideo {
        padding: 25px 0
    }
}

.footer-sec-wrap,
.footer-sec-wrap .content-wrap {
    display: none
}

@media only screen and (max-width:480px) {
    .feature-home-banner-wrap .content-wrap {
        padding: 60px 0 0;
    }

    .feature-home-banner-wrap h1 {
        font-size: 30px;
    }

    .feature-home-banner-wrap .content-wrap p {
        font-size: 19px;
    }

    .zcont-part h2 {
        font-size: 30px;
    }

    .feature-main .feature-content p {
        font-size: 18px;
    }

    .feature-2 .ztwo-col .zcont-part {
        padding: 40px 20px 30px;
    }

    .act-btn.cta-btn {
        font-size: 16px;
    }

    .bottom-cta-wrap .content-wrap {
        padding: 60px 0;
    }

    .zw-template-inner .bottom-cta-wrap h1 {
        font-size: 30px;
        max-width: 600px;
    }

    .req-btn {
        margin: 15px auto 0;
        display: block;
        max-width: 200px;
    }
}