.zwrapper,
    body {
        background: #F8F8F8;
    } 

    section.topbanner-section {
        position: relative;
        margin: 90px 0 0;
    }

    [class$="-section"] {
        margin: 70px 0;
    }

    h1 {
        font-size: 48px;
        line-height: 62px;
        font-family: var(--zf-primary-extrabold);
    }

    .banner-top-block {
        padding-top: 0 !important;
    }

    .zwrapper h2 {
        font-size: 38px;
        font-family: var(--primaryfont-bold);
    }

    .wsection,
    .wdark {
        background: #fff;
        padding: 70px;
        border-radius: 40px;
    }

    .wdark {
        background: #000000;
        color: #fff;
        padding-top: 0;
        padding-bottom: 0;

    }

    .logo-name a {
        color: #fff;
    }

    .topbanner-inner,
    .zflex-img {
        text-align: center;
    }

    .zbuttons {
        display: flex;
        gap: 20px;
        justify-content: center;
        flex-flow: wrap;
        align-items: center;
    }

    span.stage-manage.gridicon {
        background: url(/sites/zweb/images/accounts/one-auth/stagemanage.png) no-repeat !important;
        background-size: 60px auto !important;
        width: 60px;
        height: 60px;
    }

    a.cta-btn.act-btn {
        padding: 12px 23px;
        color: #fff;
        border-radius: 5px;
    }

    .banner-images {
        position: relative;
        overflow: hidden;
    }

    section.banner-section {
        background: #3C17E0 url(/sites/zweb/images/accounts/one-auth/bannergradient.png) no-repeat;
        background-position: center;
        color: #fff;
        text-align: center;
        padding: 70px 0 0;
        margin: 0;
        font-family: var(--primaryfont-bold);
    }

    .stickytab-nav {
        display: flex;
        justify-content: center;
        position: relative;
        align-items: center;
    }

    .feature-tabs ul li {
        display: inline-block;
        position: relative;
        padding: 7px 0;
        margin: 0 20px;
        cursor: pointer;
        font-size: 18px;
        color: #1b1b1b;
        font-family: var(--primaryfont-bold);
    }

    section.navtab {
        padding: 12px 0;
        margin: 0 auto;
        text-align: center;
        background: #fff;
        position: sticky;
        top: 0px;
        z-index: 9;
    }

    .feature-tabs ul li.active {
        border-bottom: 3px solid #6D4EF4;

    }

    .title-content {
        margin-bottom: 80px;
    }

    img.banner-img1 {
        position: absolute;
        left: 103px;
        bottom: -60px;
    }

    img.banner-img3 {
        position: absolute;
        top: 117px;
        right: 70px;
    }

    img.banner-img2 {
        margin-bottom: -40px;
    }

    .apps-download-links-wrap {
        z-index: 0;
        background: #000;
        border-radius: 5px;
        display: inline-block;
    }

    .apps-download-links-wrap a.app-store {
        width: 145px;
        height: 38px;
        background-position: -152px -1px;
        border-radius: 3px;
        z-index: 1;
        margin: 4px 10px 0;
    }

    section.navtab {
        padding: 12px 0;
        margin: 0 auto;
        text-align: center;
        background: #fff;
        position: sticky;
        top: 0px;
        z-index: 9;
    }

    .title-content h3 {
        font-size: 36px;
        font-family: var(--primaryfont-semibold);
        margin-bottom: 0;
    }



    section.banner-section p {
        max-width: 640px;
        width: 100%;
        margin: 0 auto 30px;
        font-family: var(--primaryfont-regular);
    }

    .topbanner-inner .title-part p {
        width: 100%;
        max-width: 550px;
        margin: 0 auto 30px;
    }

    .appicon {
        display: flex;
        gap: 15px;
        justify-content: center;
        flex-flow: wrap;
        align-items: center;
        margin-bottom: 90px;
    }

    .app-color {
        background: transparent linear-gradient(163deg, #5933FF 0%, #C056F8 73%, #B43CFF 100%) 0% 0%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-family: var(--zf-secondary-extrabold);
    }

    .topbanner-inner .appicon {
        display: flex;
        gap: 20px;
        justify-content: center;
        flex-flow: wrap;
        align-items: center;
        margin-bottom: 90px;
    }

    .apps-download-links-wrap,
    section.phonegrid-section {
        margin-bottom: 0;
    }


    .focusfilter-inner p {
        width: 100%;
        max-width: 620px;
    }

    .focusfilter-section .content-wrap {
        background: #fff;
        border-radius: 40px;
        padding: 70px 0;
    }

    .section-hero-grid {
        display: grid;
        grid-gap: 50px;
        grid-template-columns: repeat(4, 270px);
        grid-template-rows: 1fr;
        /* place-items: center; */
        justify-content: center;

    }

    span.mbltitle {
        height: 20px;
        background: url(/sites/zweb/images/accounts/one-auth/oneauthsprite.png) no-repeat;
        width: 180px;
        display: inline-block;
        background-size: 833px auto;
        margin: 10px 0px;
    }

    span.mbltitle.lockscreen {
        background-position: -171px 0;
    }

    span.mbltitle.watchface {
        background-position: -455px 0;
        width: 177px;
        margin-bottom: 40px;
    }

    span.mbltitle.focusfilter {
        background-position: -349px 0;
        width: 110px;
    }

    span.mbltitle.quicknotes {
        background-position: -630px 0;
        width: 112px;
    }

    span.mbltitle.livetext {
        background-position: -740px 0;
        width: 100px;
    }

    .livetext-inner span.gridicon {
        background-position: -59px 0px;
    }

    .act-btn {
        margin: 0;
        padding: 0px 34px 0 0px;
        color: #00d7ff;
        position: relative;
    }

    .mbl-hardware {
        text-align: center;
    }

    .topbanner-inner .act-btn {
        color: #3771e5;
    }

    .topbanner-inner span.act-btn:after {
        border: 2px solid #3771e5;
    }

    .topbanner-inner span.act-btn:before {
        border-left: 7px solid #3771e5;
    }

    span.act-btn:after {
        right: 2px;
        top: -2px;
        width: 26px;
        height: 26px;
        border: 2px solid #00d7ff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 100%;
    }

    span.act-btn:after,
    span.act-btn:before {
        position: absolute;
        content: "";
    }

    span.act-btn:before {
        right: 11px;
        top: 6px;
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 7px solid #00d7ff;
    }

    .apps-download-links-wrap a.mac-app-store {
        width: 140px;
        background-position: -232px 0;
    }

    .apps-download-links-wrap a {
        background: url(/sites/zweb/images/accounts/one-auth/app-store-sprite.png) no-repeat left top;
        background-size: 480px auto;
        height: 46px;
    }

    .zflex-content {
        width: 100%;
        max-width: 40%;
    }


    .zflex-img {
        width: 100%;
        max-width: 45%;
    }

    .zflex-content {
        padding-left: 30px;
    }

    .focusfilter-inner {
        padding-left: 100px;
    }

    .passkeys-inner .zflex-content {
        max-width: 32%;
    }

    .passkeys-inner .zflex-img {
        max-width: 61%;
        text-align: center;
    }

    .zflex-wrap {
        display: flex;
        gap: 20px;
        justify-content: space-between;
        flex-flow: wrap;
        align-items: center;
    }

    section.passkeys-section .wsection,
    .ipados-gridsection .passkeys-inner.wsection {
        background: transparent linear-gradient(293deg, #6FD4BD 0%, #35889F 100%) 0% 0%;
        color: #fff;
    }

    span.gridicon {
        width: 60px;
        height: 60px;
        background: url(/sites/zweb/images/accounts/one-auth/oneauthsprite.png) no-repeat;
        display: inline-block;
        background-size: 1143px auto;
        margin: 10px 0px;
    }


    .quicknotes-inner span.gridicon {
        background-position: -119px 0;
    }

    .macos a.app-store.zp-icon {
        background-position: -315px -1px;
        width: 178px;
        height: 40px;
        background-size: 500px auto;
    }

    .passkeys-inner span.gridicon,
    .macos-passkey span.gridicon {
        background-position: -179px 0;
        margin-bottom: 0;
    }

    .banner-top-block {
        display: flex;
        align-items: center;
        flex-flow: row wrap;
        justify-content: space-between;
        padding-bottom: 60px;
        padding-top: 30px;
    }

    .banner .cust-logo {
        text-align: left;
    }

    .banner .cust-logo,
    .banner .cust-menu {
        width: 50%;
    }

    .cust-logo .logo-img {
        width: 35px;
        display: inline-block;
        vertical-align: middle;
        padding-right: 8px;
        filter: brightness(0) invert(1);
    }

    .cust-logo .logo-name {
        display: inline-block;
        vertical-align: middle;
        font: 22px/1.2 Zoho_Puvi_Bold;
        letter-spacing: -0.1px;
    }

    .banner .cust-menu {
        text-align: right;
    }

    .menu-right ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: flex-end;
    }

    .menu-right ul li:not(:last-child) a {
        margin-right: 30px;
    }

    .menu-right ul li a {
        color: #fff;
        font-size: 16px;
    }

    * {
        padding: 0;
        margin: 0
    }

    .other-lang .section.testi-sec {
        display: none !important
    }


    .footer-section {
        background-color: #fff;
        padding: 70px 0;
        margin-bottom: 0;
    }

    .footer-section .footerinner {
        text-align: center;
        width: 100%;
        max-width: 80%;
        margin: 0 auto;
    }

    .footerinner a.app-store {
        padding-bottom: 4px;
    }

    .macos-stage,
    .macos-camera {
        background: #fff;
        padding: 80px 80px 0;
        border-radius: 40px;
        text-align: center;
        overflow: hidden;
    }

    .macos-passkey {
        background: transparent linear-gradient(293deg, #6FD4BD 0%, #35889F 100%) 0% 0%;
        color: #fff;
        padding: 80px 80px 0;
        border-radius: 40px;
        text-align: center;
        overflow: hidden;
        margin-bottom: 80px;
    }

    .macos-passkey p {
        width: 100%;
        max-width: 470px;
        margin: 0 auto;
    }

    .macos-passkey .stage-img {
        margin-top: 40px;
    }

    .macos-stage p,
    .macos-camera p {
        max-width: 670px;
        width: 100%;
        margin: 0 auto 50px;
    }

    .macos-camera {
        margin-top: 80px;
    }

    .stage-img img {
        display: block;
        margin: 0 auto;
    }

    section.ipados-gridsection {
        margin: 70px 0;
    }

    .livetext-inner.wsection,
    .ipados-gridsection .passkeys-inner.wsection,
    .focusfilter-inner.wsection,
    .quicknotes-inner.wsection {
        padding: 70px;
    }

    .livetext-inner.wsection .zflex-content,
    .ipados-gridsection .passkeys-inner .zflex-content {
        max-width: 42%;
    }

    .livetext-inner.wsection .zflex-img,
    .ipados-gridsection .passkeys-inner .zflex-img,
    .quicknotes-inner .zflex-img,
    .focusfilter-inner .zflex-img {
        max-width: 51%;
    }

    /* For Big Screen*/

    @media (min-width: 1200px) {
        .focusfilter-section.wsection {
            padding: 40px 0;
        }

        p {
            font-size: 18px;
        }


        .lockscreen-inner.wsection {
            overflow: hidden;
        }

        .lockscreen-section .zflex-img {
            transform: scale(1);
            transition: ease all .8s;
        }

        .lockscreen-section .middle-animated .zflex-img {
            transform: scale(1.4);
            padding-top: 70px;
            height: 360px;
        }

        .zflex-img.img-ani {
            transform: translateX(30px);
            transition: all 1s;
        }

        .middle-animated .zflex-img.img-ani {
            transform: translateX(0);
        }

        .slider {
            padding-top: 50px;
        }

        /*   .slider {
            width: 1270px;
            margin-top: 70px;
        } */
        .mbl-hardware.image-screen2 {
            margin-top: 70%;
        }

        .mbl-hardware.image-screen3 {
            margin-top: 20%;
        }

    }

    @media (max-width: 1430px) {
        .wsection {
            padding: 70px;
        }

        .wdark {
            padding: 0 70px;
        }

    }

    @media (max-width: 1270px) {
        .wsection {
            padding: 50px;
        }

        .wdark {
            padding: 0 50px;
        }

        .section-hero-grid {
            grid-gap: 30px;
        }
    }

    @media (max-width: 1230px) {
        .wsection {
            padding: 40px;
        }

        .wdark {
            padding: 0 40px;
        }
    }

    /* For Big Screen*/

    @media (max-width: 1199px) {
        .wsection {
            padding: 60px;
        }

        .wdark {
            padding: 0 40px;
        }

        img.mblsafari {
            display: none;
        }

        .focusfilter-inner {
            padding-left: 70px;
            padding-bottom: 50px;
        }

        .zflex-content {
            padding-left: 20px;
        }

        .section-hero-grid {
            grid-template-columns: repeat(4, 220px);
            grid-gap: 20px;
        }

        .zflex-content,
        .zflex-img {
            width: 100%;
            max-width: 44%;
        }

        .topbanner-inner .title-part h1 {
            font-size: 48px;
            line-height: 52px;
        }

        .zwrapper h2 {
            font-size: 33px;

        }

        .passkeys-inner .zflex-img {
            max-width: 58%;
        }

        .passkeys-inner .zflex-content {
            max-width: 30%;
        }

        .footer-section .footerinner {
            max-width: 600px;
        }

        .livetext-inner.wsection .zflex-content,
        .ipados-gridsection .passkeys-inner .zflex-content {
            max-width: 39%;
        }
    }

    /* For medium Screen*/

    @media(max-width: 991px) {

        .zflex-wrap {
            gap: 20px;
            justify-content: space-evenly;
        }

        .zflex-content {
            max-width: 42%;
        }

        .zflex-img {
            max-width: 34%;
        }

        .section-hero-grid {
            display: none;
        }

        .zflex-content {
            padding-left: 0px;
        }

        .wsection,
        .livetext-inner.wsection,
        .ipados-gridsection .passkeys-inner.wsection,
        .focusfilter-inner.wsection,
        .quicknotes-inner.wsection {
            padding: 40px;
        }

        .macos-passkey,
        .macos-stage,
        .macos-camera {
            padding: 50px 60px 0;
        }

    }

    /* For tablet Screen*/

    @media(max-width: 800px) {

        .zflex-content,
        .zflex-img {
            width: 100%;
            max-width: 44%;
            margin: 0 auto;
        }

        [class$="-section"] {
            margin: 50px 0;
        }

        section.topbanner-section {
            margin: 50px 0 0;
        }

        .zflex-img {
            transform: scale(0.9);
            /*  margin: -70px 0; */
        }

        .wdark {
            padding: 40px;
        }

        .topbanner-inner .title-part h1 {
            font-size: 33px;
            line-height: 45px;
        }


        .zwrapper h2 {
            font-size: 29px;

        }

        .section-hero-grid {
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            grid-gap: 10px;
        }

        .passkeys-inner .zflex-content {
            max-width: 70%;
            text-align: center;
            margin: 0 auto 20px;
        }

        .passkeys-inner .zflex-img {
            max-width: 100%;
            transform: scale(0.8);
            margin: -40px 0;
        }

        .focusfilter-inner {
            padding-bottom: 30px;
        }

    }



    /* For Mobile Screen*/

    @media(max-width: 480px) {
        [class$="-section"] {
            margin: 50px 0;
        }

        .banner-top-block {
            padding-bottom: 30px;
            justify-content: center;
        }

        .topbanner-inner .appicon {
            margin-bottom: 0;
        }

        .appicon {
            display: flex;
            gap: 10px;
            margin-bottom: 40px;
        }

        .apps-download-links-wrap a.app-store {
            width: 120px;
            height: 37px;
            background-position: -165px -1px;
            margin: 0;
            transform: scale(0.7);
        }

        .topbanner-inner .title-part h1 {
            font-size: 32px;
            line-height: 42px;
        }

        .focusfilter-section .content-wrap,
        .footer-section {
            padding: 50px 0;
        }

        span.app-color {
            font-size: 42px;
            line-height: 60px;
        }

        .zwrapper h2 {
            font-size: 26px;

        }

        .section-hero-grid {
            display: none;
        }

        .focusfilter-inner {
            text-align: center;
            padding: 0 30px;
        }

        .wsection,
        .wdark {
            padding: 40px 20px;
        }

        .zflex-content,
        .zflex-img,
        .passkeys-inner .zflex-content {
            width: 100%;
            max-width: 90%;
        }



        span.act-btn.watch-btn.vimvideo {
            font-size: 14px;
        }

        .qrscan {
            width: 50px;
        }

        .topbanner-inner .appicon {
            gap: 10px;
        }

        .scroll-block,
        .zflex-content,
        .zflex-img {
            max-width: 100%;
            margin: 0 auto;
        }

        .focusfilter-inner {
            padding: 0 30px;
        }

        .livetext-inner.wsection .zflex-content,
        .ipados-gridsection .passkeys-inner .zflex-content,
        .zflex-wrap {
            max-width: 100%;
        }

        .macos-passkey {
            margin-bottom: 50px;
            margin-top: 50px;
        }


    }




    .slick-slide {
        padding: 0 10px;
    }

    .scroll-features .scroll-grid {
        background: #fff;
        padding: 80px;
        border-radius: 40px;
    }

    .scroll-grid {
        display: flex;
        justify-content: space-between;
    }

    .scroll-features h3 {
        font-size: 30px;
    }

    .scroll-text-wrap {
        width: 40%;
    }

    .scroll-img-wrap {
        width: 50%;
    }

    .scroll-block-img {
        display: none;
    }

    /* 
    .scroll-block {
        max-width: 400px;
    } */

    .scroll-block:not(:last-child) {
        padding: 110px 0 80px;
    }

    .scroll-img-wrap {
        position: -webkit-sticky;
        position: sticky;
        height: 450px;
        top: 150px;
    }

    .scroll-img {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        transition: all 1s ease;
    }

    .scroll-img.active {
        opacity: 1;
        visibility: visible;
    }

    @media only screen and (max-width:1199px) {
        .scroll-img-wrap {
            height: 400px;
        }

        section.navtab {
            top: 0
        }
    }

    @media only screen and (max-width:991px) {
        .scroll-img-wrap {
            height: 300px;
        }

        .scroll-features h3 {
            font-size: 22px;
        }
    }

    @media only screen and (max-width:767px) {
        .scroll-img-wrap {
            display: none;
        }

        .livetext-inner.wsection .zflex-content,
        .ipados-gridsection .passkeys-inner .zflex-content,
        .zflex-wrap {
            max-width: 90%;
            text-align: center;
            flex-flow: column wrap;
            margin: 0 auto;
        }

        .scroll-block-img {
            display: block;
        }

        .livetext-inner.wsection .zflex-img,
        .ipados-gridsection .passkeys-inner .zflex-img,
        .quicknotes-inner .zflex-img,
        .focusfilter-inner .zflex-img {
            max-width: 93%;
        }

        .scroll-text-wrap {
            width: 100%;
            text-align: center;
        }

        .scroll-block:not(:last-child) {
            padding-bottom: 50px;
        }

        .scroll-block,
        .zflex-content,
        .zflex-img {
            max-width: 90%;
            margin: 0 auto;
        }


    }

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

        .zflex-wrap {
            flex-flow: column wrap;
        }

        section.navtab {
            top: 0
        }

        .focusfilter-inner {
            padding: 0 60px 20px;
        }

        .feature-tabs ul li {
            padding: 5px 0;
            margin: 0px 10px;
            font-size: 13px;
        }

        h1 {
            font-size: 38px;
        }

        .banner-top-block {
            padding-bottom: 40px;
            flex-flow: column;
            text-align: center;
        }

        section.banner-section {
            padding: 30px 0 0;
        }

        .title-content h3 {
            font-size: 25px;
            font-family: var(—primaryfont-semibold);
            margin-bottom: 10px;
        }

        .livetext-inner.wsection .zflex-content,
        .ipados-gridsection .passkeys-inner .zflex-content {
            max-width: 100%;
        }

        .livetext-inner.wsection .zflex-img,
        .ipados-gridsection .passkeys-inner .zflex-img,
        .quicknotes-inner .zflex-img,
        .focusfilter-inner .zflex-img {
            max-width: 100%;
        }

        .livetext-inner.wsection,
        .ipados-gridsection .passkeys-inner.wsection,
        .focusfilter-inner.wsection,
        .quicknotes-inner.wsection {
            padding: 50px 20px;
        }

        .macos-passkey,
        .macos-stage,
        .macos-camera {
            padding: 40px 40px 0;

        }

        .zflex-img {
            transform: scale(0.8);
            margin: -30px 0;
        }
    }

    .typing-text {
        color: white;
        position: relative;
        display: inline-block;
    }

    .typing-text::after {
        content: "|";
        animation: blink 1s step-end infinite;
        font-size: 52px;
        font-family: var(--zf-secondary-light);
        color: #ff9800;
    }

    @keyframes blink {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }
    }

    @media screen and (max-width: 768px) {
        .typing-container {
            font-size: 1.5rem;
        }
    }