.zw-promo-top,.other-lang .zw-promo-top{
    display: block !important;
}
.other-lang .zw-promo-top .ztopstrip-container{
    display: block !important;
}
.zw-promo-top .langstrip{
    display: block !important;
}
.zw-promo-top .zpromotion {
    display: none !important;
}
.pricing-wrap .flex-wrap{
    justify-content: center;
        gap: 20px;
    }
    .pricing-wrap .plan.free-edit,.pricing-wrap .pr-details .plan {
        width: 410px;
        max-width: 50%
    }
    
    .d-blck {
        display: block;
        font-size: 14px;
        font-family: var(--zf-primary-regular);
        line-height: 1.6
    }
    
    :root {
        --page-sprite: url('/sites/zweb/images/workdrive/home/home-sprite.png');
        --feature-bg: url('/sites/zweb/images/workdrive/home/feature-bg.jpg');
        --close-icon: url('/sites/zweb/images/workdrive/close-icon.png')
    }
    
    button.watch-btn.vimvideo {
        background: transparent
    }
    
    .zb-firefox {
        --conic-gradient-angle: 9deg
    }
    
    .zpromotion {
        background: #2b2de2;
  
    }
    
    .field-body p,.field-body h1,.field-body h2 {
        margin: 0
    }
    
    .field-body h1,.field-body h2,.field-body h3,.field-body h4 {
        letter-spacing: -1.54px
    }
    
    .field-body p {
        font-size: 18px;
        letter-spacing: -0.5px
    }
    
    .field-body h1 {
        font-family: var(--zf-primary-bold);
        line-height: 72px;
        color: #1b1e41;
        display: block;
        font-size: 56px;
        max-width: 620px
    }
    
    .field-body h1 em {
        color: #2b2de2
    }
    
    .field-body h2 {
        font-family: var(--zf-primary-bold);
        font-size: 48px;
        letter-spacing: -1.12px
    }
    
    .field-body .section {
        padding: 80px 0;
        position: relative
    }
    
    .flex-wrap {
        display: flex;
        align-items: unset;
        justify-content: space-between;
    }
    .pricing-wrap .flex-wrap{
        flex-wrap: wrap;
    }
    
    .banner-section .content,.banner-section .banner {
        width: 54%
    }
    
    p.business-lb {
        font-size: 24px;
        color: #46a128;
        font-family: var(--zf-primary-semibold);
        width: fit-content;
        line-height: 1
    }
    
    .content-wrap .cta {
        display: flex;
        justify-content: flex-end;
        gap: 24px
    }
    
    .cta-side {
        width: 46%
    }
    
    .cta .act-btn {
        color: #FFF;
        border: unset;
        width: auto;
        font-size: 18px;
        padding: 20px 30px;
        font-family: var(--primaryfont-semibold);
        display: block;
        line-height: 1.2;
        text-transform: uppercase;
        border-radius: 4px
    }
    
    .btm-cta a.act-btn.cta-btn {
        width: auto;
        margin: 0 auto
    }
    
    .act-btn.demo-btn {
        background-color: #000;
        cursor: pointer !important
    }
    
    .banner-section .flex-wrap {
        align-items: center;
        justify-content: flex-start;
        /* gap:24px; */
    }
    
    .banner-section p {
        max-width: 465px
    }
    
    .cta-side .inner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px
    }
    
    .pr-details {
        display: flex;
        flex-wrap: wrap;
        max-width: 900px;
        gap: 25px;
        margin-top: 25px;
        justify-content: center;
    }
    
    .watch-btn {
        color: #000;
        padding: 10px 0 10px 38px;
        text-transform: none;
        position: relative;
        background: transparent;
        border: 0
    }
    
    .watch-btn:after,.watch-btn:before {
        position: absolute;
        content: ''
    }
    
    .watch-btn:before {
        left: 0;
        top: 6px;
        width: 26px;
        height: 26px;
        border: 1px solid #000;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 100%
    }
    
    .watch-btn:after {
        left: 11px;
        top: 14px;
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 7px solid #000
    }
    
    a.zbannerlink {
        color: #000;
        padding-bottom: 1px;
        display: inline-block;
        box-sizing: border-box;
        font-family: var(--primaryfont-semibold);
        font-size: 16px;
        padding: 0;
        border-radius: 0;
        margin-bottom: 10px;
        margin-left: 0;
        margin-right: 10px;
        text-decoration: underline;
        text-underline-offset: 6px;
        text-align: center;
    }
    
    .trust-brands-section h2,.trust-brands-section p {
        display: none
    }
    
    .user-icons {
        vertical-align: baseline;
        line-height: 1;
        display: inline-grid;
        grid-auto-flow: column;
        gap: 12px
    }
    
    .user-icons.sm-icons span:before {
        background-size: 177px auto
    }
    
    .user-icons span {
        display: inline-grid;
        position: relative;
        transform: scale(.8);
        transition: ease-in-out .6s;
        opacity: 0
    }
    
    .user-icons span.user-a {
        transition-delay: 550ms
    }
    
    .user-icons span.user-b {
        transition-delay: 750ms
    }
    
    .user-icons span.user-c {
        transition-delay: 950ms
    }
    
    .middle-animated .user-icons span {
        transform: scale(1);
        opacity: 1
    }
    
    .user-icons span:before {
        content: "";
        background-image: var(--page-sprite);
        background-size: 248px auto;
        display: inline-block;
        width: 42px;
        height: 42px;
        border: 2px solid;
        border-radius: 100%
    }
    
    .user-icons span::after {
        content: "";
        width: 43px;
        height: 43px;
        border: 1.5px solid;
        border-radius: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%) scale(1);
        transform-origin: center center
    }
    
    span.user-a:before {
        background-position: 0 0
    }
    
    span.user-b:before {
        background-position: -45.5px 0
    }
    
    span.user-c:before {
        background-position: -91.5px 0
    }
    
    .user-icons span.user-a:before,span.user-a:after {
        border-color: #2b2de2;
        transition-delay: 550ms;
        animation-delay: 1s
    }
    
    .user-icons span.user-b:before,span.user-b:after {
        border-color: #f56c28;
        transition-delay: 750ms;
        animation-delay: 3s
    }
    
    .user-icons span.user-c:before,span.user-c:after {
        border-color: #46a128;
        transition-delay: 950ms;
        animation-delay: 6s
    }
    
    .middle-animated .user-icons span::after {
        animation: pulse-border 1.5s linear infinite
    }
    
    @keyframes pulse-border {
        0% {
            transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
            opacity: 1
        }
    
        100% {
            transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.25);
            opacity: 0
        }
    }
    
    .field-body .features-section {
        padding-top: 0
    }
    
    .features-section .flex-wrap {
        margin: 0 24px
    }
    
    .features-section .feature-d {
        width: calc(25% - 18px);
        max-width: 400px;
        position: relative;
        border-radius: 4px;
        transition: .7s ease all;
        cursor: pointer
    }
    
    .features-section .feature-d:hover {
        transform: scale(1.02);
        box-shadow: 0 0 10px #0000005c
    }
    
    .features-section:has(.feature-d:hover) .feature-d:not(:hover) {
        filter: brightness(0.8);
        opacity: .9
    }
    
    .feature-d .heading {
        position: absolute;
        padding: 48px 32px 32px 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%
    }
    
    a.feature-d.feature-truesync .heading,.features-section .feature-d:nth-child(1) .heading {
        background: linear-gradient(180deg,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 100%)
    }
    
    .feature-d .heading h2,.feature-d .heading h3 {
        font-size: 24px;
        font-family: var(--primaryfont-semibold);
        line-height: 1;
        color: #000;
        margin-bottom: 0
    }
    
    .other-lang .feature-d .heading h2 {
        max-width: 240px
    }
    
    .arrow {
        width: 24px;
        height: 24px;
        display: block;
        border: 2px solid #000;
        border-radius: 100%;
        position: absolute;
        right: 25px;
        top: 49px;
        cursor: pointer;
        transition: .3s ease all
    }
    
    .i18n-ar .arrow {
        right: inherit;
        left: 25px
    }
    
    .arrow i {
        background: #000;
        width: 11px;
        height: 2px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-55%,-50%);
        border-radius: 0
    }
    
    .arrow i:before {
       content: ''; 
       position: absolute; 
       transform: rotate(316deg) translateY(-70%); 
       top: 50%; right: -4px; 
       border: solid #000; 
       border-width: 0 2px 2px 0; 
       padding: 3px; 
       border-radius: 0;
    }
    
    .feature-d .heading .arrow {
        transform: rotate(-40deg) scale(1)
    }
    
    .i18n-ar .feature-d .heading .arrow {
        transform: rotate(45deg) scale(1)
    }
    
    .features-section .feature-d:hover .arrow,.features-section .feature-d:focus .arrow {
        transform: rotate(0) scale(1.2)
    }
    
    .feature-drive4.feature-d .heading {
        justify-content: flex-end
    }
    
    .feature-drive4.feature-d .heading .arrow,.feature-drive4.feature-d .heading .arrow i:before {
        border-color: #fff
    }
    
    .feature-drive4.feature-d .heading .arrow i {
        background-color: #fff
    }
    
    .feature-drive4:before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: transparent conic-gradient(from var(--conic-gradient-angle) at 53% 31%,#308316 .00%,#1b51e1 26.42%,#164fea 42.86%,#3ca818 63.47%,#f56c28 87.53%,#f56c28 100.00%) 0 0 no-repeat padding-box;
        -webkit-transform: matrix(-1,0,0,-1,0,0);
        -ms-transform: matrix(-1,0,0,-1,0,0);
        transform: matrix(-1,0,0,-1,0,0);
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        pointer-events: none;
        border-radius: 4px;
        -webkit-transition: .9s ease all;
        -o-transition: .9s ease all;
        transition: .9s ease all;
        z-index: -1
    }
    
    .zwe-ot .feature-drive4:before {
        animation: 15s conicanimate linear forwards
    }
    
    @keyframes conicanimate {
        to {
            --conic-gradient-angle: 9deg
        }
    }
    
    @property --conic-gradient-angle {
        syntax: "<angle>";
        initial-value: 300deg;
        inherits: false
    }
    
    .feature-drive4 #gradient-canvas {
        position: absolute;
        width: 100%;
        height: 100%
    }
    
    .feature-drive4 .content h2,.feature-drive4 .content h3 {
        max-width: 218px;
        font-size: 32px;
        color: #5eed2f;
        font-family: var(--zf-primary-bold);
        letter-spacing: -0.72px;
        line-height: 1.25
    }
    
    .feature-drive4 .content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-70%,-50%);
        width: max-content
    }
    
    .feature-drive4 .content span {
        max-width: 216px;
        font-size: 16px;
        color: #fff;
        display: block;
        letter-spacing: -0.38px;
        margin-top: 16px
    }
    
    .feature-d .banner img {
        display: block;
        border-radius: 4px
    }
    
    .smart-search-screen {
        position: absolute;
        top: 50%;
        max-width: 90%;
        left: 50%;
        transform: translate(-50%,-40%)
    }
    
    .gradient-mask:before {
        content: "";
        background-image: var(--page-sprite);
        background-size: 248px auto;
        display: inline-block;
        width: 55px;
        height: 44px;
        background-position: -192px -12px
    }
    
    .scaling-section .content p {
        font-size: 56px;
        font-family: var(--zf-primary-semibold);
        line-height: 1.15;
        max-width: 992px
    }
    
    .scaling-section {
        background-color: #f7f4f2;
        overflow: hidden
    }
    
    .scaling-section .content p span {
        color: #2b2de2
    }
    
    .listing-tabs {
        position: relative;
        padding-top: 80px;
        transition: ease all .4s
    }
    
    .listing-tabs.isfixed {
        position: -webkit-sticky;
        position: sticky;
        top: 0
    }
    
    .listing-tabs ul {
        display: inline-block;
        background: #fff;
        max-width: 420px;
        border-radius: 4px
    }
    
    .listing-tabs ul li {
        display: inline-block;
        font-size: 16px;
        line-height: 1;
        font-family: var(--zf-primary-semibold);
        padding: 12px 24px;
        cursor: pointer;
        border: 1px solid transparent
    }
    
    .listing-tabs ul li.active {
        border-color: #1b1e24;
        border-radius: 4px;
        background: #f7f7f7;
        box-shadow: 1px 3px 6px #00000029
    }
    
    .scaling-f {
        margin-top: 40px
    }
    
    .scaling-f:not(.slick-slider) {
        display: flex;
        width: 300%
    }
    
    .fields-box>.testimonial-feedback,.fields-box>.feature-content {
        width: 100%;
        border-radius: 4px;
        padding: 48px 40px;
        max-width: 400px;
        position: relative;
        font-family: var(--zf-primary-semibold)
    }
    
    .fields-box>div:not(.cover-img) .inner {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center
    }
    
    .fields-box .cover-img .inner {
        display: block;
        height: 100%
    }
    
    .fields-box .testimonial-feedback .inner p {
        margin-bottom: 24px;
        margin-top: 32px
    }
    
    .cover-img img,.cover-img2 img {
        display: block;
        object-fit: cover;
        height: 100%;
        border-radius: 4px
    }
    
    .fields-box span span {
        font-size: 16px
    }
    
    .fields-box p {
        font-size: 28px;
        max-width: 313px;
        line-height: 1.34
    }
    
    .fields-box .feature-content p {
        font-size: 24px
    }
    
    .fields-box .testi-f {
        margin-top: 24px
    }
    
    .fields-box .testi-f p {
        font-size: 16px
    }
    
    .fields-box .testi-f p,.fields-box .testi-f span {
        opacity: .5
    }
    
    .fields-box .testi-f div {
        max-width: 180px
    }
    
    .fields-box .testi-f img {
        height: 50px;
        object-fit: cover;
        border-radius: 60px
    }
    
    .fields-box.functions-f .testi-f img {
        object-position: -7px
    }
    
    .fields-box.functions-f .testi-f img {
        object-position: -10px
    }
    
    .fields-box .testi-f span {
        font-family: var(--zf-secondary-regular)
    }
    
    .fields-box .feature-content {
        background-color: #19192c
    }
    
    .scaling-f .slick-list {
        overflow: visible
    }
    
    .scaling-f .fields-box {
        color: #fff
    }
    
    .sticky-wrap {
        position: sticky;
        top: 100px;
        width: 100%;
        overflow: hidden
    }
    
    .scaling-f:not(.slick-slider) .fields-box {
        width: 100%;
        max-width: 2839px
    }
    
    .fields-box {
        gap: 24px;
        align-items: unset;
        min-height: 640px;
        justify-content: center
    }
    
    .slick-initialized .fields-box.slick-slide {
        display: flex
    }
    
    .fields-box .testimonial-feedback {
        color: #fff
    }
    
    .fields-box.industry-f .testimonial-feedback {
        background-color: #2b2de2
    }
    
    .fields-box.functions-f .testimonial-feedback {
        background-color: #46a128
    }
    
    .fields-box.size-f .testimonial-feedback {
        background-color: #f56c28
    }
    
    .testimonial-feedback .menu-data {
        height: 100%;
        position: absolute;
        width: 100%;
        padding: 50px 40px;
        left: 0;
        top: 0;
        background-color: #040449;
        display: none
    }
    
    .testimonial-feedback .menu-data a {
        font-size: 20px;
        line-height: 2;
        position: relative
    }
    
    .menu-data .arrow {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(100%,-50%);
        border: unset
    }
    
    .menu-data li a:hover .arrow {
        transform: translate(120%,-50%) scale(1.5)
    }
    
    .menu-data .arrow i:before {
        border-color: #fff
    }
    
    .menu-data .arrow i {
        background-color: #fff
    }
    
    .trust-brands-section {
        padding: 0 25px;
        min-height:unset 

    }
    
    .trust-brands-wrap .content-wrap {
        max-width: unset;
        width: 100%
    }
    
    .trust-brands-wrap .zorg-inner {
        max-width: unset;
        margin-top: 100px
    }
    
    .trust-brands-wrap ul li {
        margin-top: 0
    }
    
    .trust-brands-wrap [class|="ztbicon"] {
        background-size: 571px auto
    }
    
    .ztbicon-iifl {
        background-position: 0 0;
        width: 112px;
        height: 34px
    }
    
    .ztbicon-star {
        background-position: -114px 0;
        width: 79px;
        height: 35px
    }
    
    .ztbicon-puro {
        background-position: -234px -5px;
        width: 82px;
        height: 23px
    }
    
    .ztbicon-hash {
        background-position: -317px 0;
        width: 92px;
        height: 34px
    }
    
    .ztbicon-tomedes {
        background-position: -411px 0;
        width: 160px;
        height: 33px
    }
    
    .ztbicon-livin {
        background-position: -4px -41px;
        width: 75px;
        height: 36px
    }
    
    .ztbicon-capital {
        background-position: -82px -43px;
        width: 165px;
        height: 33px
    }
    
    .ztbicon-send {
        background-position: -250px -41px;
        width: 79px;
        height: 36px
    }
    
    .ztbicon-view {
        background-position: -332px -43px;
        width: 236px;
        height: 32px
    }
    
    .ratings-wrap [class|="zicons"] {
        display: inline-block;
        background: var(--rating-sprite);
        background-size: 852px auto;
        background-repeat: no-repeat
    }
    
    .zaward-box span{
        min-height: 140px;
    }
    .ratings-wrap .zaward-box [class|="zicons"] {
        background-size: 80px auto
    }
    
    .ratings-wrap .zicons-shortlist {
        background-size: 115px auto !important
    }
    
    .ratings-wrap .zicons-valuematrix {
        background: url('/sites/zweb/images/otherbrandlogos/nucleus-research-value-matrix-leader-2025.png') no-repeat;
        width: 80px;
        height: 80px
    }
    
    .ratings-wrap .zicons-shortlist {
        background: url('/sites/zweb/images/otherbrandlogos/capterra-shortlist-2025.svg') no-repeat;
        width: 120px;
        height: 80px;
        background-size: 117px
    }
    .ratings-wrap .zaward-box .zicons-getapp{
        background: url('/sites/zweb/images/otherbrandlogos/getapp-category-leaders-2025.svg') no-repeat;
        width: 80px;
        height: 80px;
    }
    .ratings-wrap {

    }
    .ratings-wrap .zicons-leader {
        background: url('/sites/zweb/images/otherbrandlogos/software-advice-front-runners-2025.png') no-repeat;
        width: 88px;
        height: 80px
    }
    
    .ratings-wrap .zicons-capterra {
        background: url(/sites/zweb/images/otherbrandlogos/capterra.svg) no-repeat;
        width: 147px;
        height: 34px
    }
    
    .award-rating-block .zrating-box .zicons-getapp {
        background: url(/sites/zweb/images/otherbrandlogos/getapp.svg) no-repeat;
        width: 148px;
        height: 28px
    }
    
    .ratings-wrap .zicons-playstore {
        background: url('/sites/zweb/images/otherbrandlogos/google-play.svg') no-repeat;
        width: 155px;
        height: 32px
    }
    
    .ratings-wrap .zicons-appstore {
        width: 132px;
        height: 38px;
        background: url(/sites/zweb/images/otherbrandlogos/appstore-icon.svg) no-repeat;
        position: relative
    }
    
    .ratings-wrap .zicons-appstore::before {
        content: 'App Store';
        font-size: 20px;
        position: absolute;
        right: -10px;
        font-family: var(--zf-primary-medium);
        top: 50%;
        transform: translateY(-50%)
    }
    
    .ratings-wrap .zicons-peerinsights {
        background: url('/sites/zweb/images/otherbrandlogos/gartner-logo.svg') no-repeat;
        width: 148px;
        height: 33px
    }
    
    .ratings-wrap .zrating-box>span,.ratings-wrap .zrating-box div {
        vertical-align: middle;
        display: inline-block
    }
    
    .ratings-wrap .zrating-box div {
        margin-top: 8px
    }
    
    .zrating-box {
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between
    }
    
    .ratings-wrap .zrating-box div span:not(:last-child) {
        margin-right: 4px;
        text-align: right
    }
    
    .ratings-wrap .zrating-box .stars-container {
        position: relative;
        display: inline-block;
        color: transparent;
        font-size: 18px;
        letter-spacing: 2px
    }
    
    .ratings-wrap .zrating-box .stars-container:before {
        position: absolute;
        top: 0;
        left: 0;
        content: "\2605\2605\2605\2605\2605";
        color: #d0d0d0
    }
    
    .ratings-wrap .zrating-box .stars-container:after {
        position: absolute;
        top: 0;
        left: 0;
        content: '\2605\2605\2605\2605\2605';
        color: #f8a824;
        overflow: hidden;
        -webkit-transition: all 2.5s ease;
        -o-transition: all 2.5s ease;
        transition: all 2.5s ease;
        width: 0
    }
    
    .ratings-wrap .zrating-box .counter-star {
        display: inline-block;
        font-weight: 300;
        color: #000;
        font-size: 16px;
        width: 52px
    }
    
    .ratings-wrap .zrating-box .counter-star .current-value {
        font-family: var(--zf-secondary-medium);
        font-size: 16px;
        color: #000
    }
    
    .ratings-wrap .zwe-ob .stars-94::after {
        width: 89.5%
    }
    
    .ratings-wrap .zwe-ob .stars-95::after {
        width: 90%
    }
    
    .ratings-wrap .zwe-ob .stars-98::after {
        width: 92%
    }
    
    .zrating-block {
        display: flex;
        justify-content: space-evenly;
        margin-top: 60px
    }
    
    .ratings-wrap .zaward-box {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 12px;
        flex-direction: column;
    }
    
    .zaward-box p {
        max-width: 203px;
        margin-left:0px;
        font-size: 16px
    }
    
    .zaward-block>.zaward-box:first-child p {
        max-width: 203px
    }
    
    .zaward-block>.zaward-box:nth-child(2) p {
        max-width: 203px
    }
    
    .zaward-block>.zaward-box:last-child p {
        max-width: 203px
    }
    
    .zaward-block {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    
    .pricing-section .content .inner {
        max-width: 616px
    }
    
    .pricing-section .content .inner span {
        color: #2b2de2;
        font-size: 16px;
        font-family: var(--zf-primary-semibold)
    }
    
    .pricing-switcher {
        border: 1px solid #cecece;
        border-radius: 4px;
        padding: 8px 12px;
        width: fit-content;
        margin-left: auto
    }
    
    .pricing-switcher .flex-wrap {
        justify-content: center;
        column-gap: 10px
    }
    
    ul.flex-wrap li {
        display: flex
    }
    
    .pricing-switcher li span {
        font-size: 12px;
        font-family: var(--zf-primary-semibold);
        line-height: 1;
        cursor: pointer;
        padding: 8px;
        user-select: none
    }
    
    .pricing-switcher li span.active {
        color: #fff;
        background-color: #308316;
        border-radius: 4px
    }
    
    .pricing-switcher li span span.yl-s {
        color: #308316
    }
    .pricing-switcher li.active span span.yl-s{
        color: #ffe200
    }
    
    .pricing-switcher li span.active span.yl-s {
        color: #ffe200
    }
    
    .pricing-wrap {
        margin-top: 32px
    }
    
    .var-switch {
        display: flex
    }
    
    .pricing-wrap .plan {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #f7f7f7;
        border: 1px solid #c9cbdd;
        border-radius: 4px;
        padding: 32px 24px;
        position: relative;
        max-width: 32%
    }
    .pricing-wrap .pr-details .plan{
    
    }
    .pricing-wrap .plan .content {
        display: flex;
        flex-direction: column;
        align-items: center
    }
    
    span.plan-name {
        font-family: var(--zf-primary-semibold);
        font-size: 16px;
        letter-spacing: -0.38px;
        line-height: 1;
        display: block;
        margin-bottom: 24px;
        text-transform: uppercase
    }
    
    .zpricegroup-common.price {
        font-size: 32px;
        font-family: var(--zf-primary-semibold);
        display: block;
        min-height: 36px
    }
    
    .zpricegroup-common.price.month-only {
        display: none
    }
    
    .billed {
        color: rgb(27 34 49 / 80%);
        letter-spacing: -0.24px;
        font-size: 16px;
        display: block;
        margin-bottom: 24px;
        text-align: center
    }
    
    span.user-count {
        font-size: 16px;
        color: #1b2231;
        font-family: var(--zf-primary-semibold);
        display: block;
        margin-top: 16px;
        line-height: 1
    }
    
    .try-now-btn {
        background-color: #2b2de2;
        border-radius: 4px;
        letter-spacing: -0.24px;
        font-family: var(--zf-primary-semibold);
        color: #fff;
        font-size: 12px;
        margin-top: 8px;
        display: flex;
        column-gap: 4px;
        align-items: center;
        line-height: 16px;
        padding: 8px 5px;
        width: 160px;
        justify-content: center;
        text-transform: uppercase
    }
    
    .try-now-btn .arrow {
        border: unset;
        height: auto;
        position: relative;
        right: inherit;
        top: inherit
    }
    
    .try-now-btn .arrow i {
        background-color: #fff
    }
    
    .try-now-btn .arrow i:before {
        border-color: #fff
    }
    
    .try-now-btn:hover .arrow {
        transform: translateX(5px)
    }
    
    .pricing-wrap .content:after {
        content: "";
        border-bottom: 1px solid #dfe0eb;
        padding-bottom: 16px;
        width: 100%;
        height: 1px;
        display: block;
        left: 0
    }
    
    ul.fetures-price {
        margin-top: 24px;
        font-size: 16px;
        letter-spacing: -0.32px
    }
    
    ul.fetures-price li {
        line-height: 1.5;
        position: relative;
        margin-bottom: 16px;
        padding-left: 16px;
        font-size: 16px
    }
    
    ul.fetures-price li span {
        position: relative;
        display: inline-block
    }
    
    ul.fetures-price li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        height: 10px;
        width: 10px;
        text-indent: initial;
        background: url(/sites/zweb/images/yes-tick.png) 0 0 no-repeat;
        background-size: 10px auto;
        filter: brightness(0);
        vertical-align: middle
    }
    
    ul.fetures-price li i::after {
        content: "i";
        position: relative;
        width: 16px;
        height: 16px;
        border: 1px solid #308316;
        display: inline-block;
        border-radius: 100%;
        font-size: 12px;
        line-height: 15px;
        text-align: center;
        color: #3ca81e;
        font-family: var(--zf-primary-semibold);
        vertical-align: top;
        margin-top: 4px;
        display: inline-block;
        cursor: pointer;
        font-style: initial
    }
    
    .pricing-wrap .plan.plan4 .content {
        text-align: center;
        min-height: 136px;
        justify-content: space-between
    }
    
    .pricing-wrap .plan.plan4 .content:after {
        content: unset
    }
    
    .pricing-wrap .plan.plan4 span.plan-name {
        font-size: 24px
    }
    
    .plan.best-deal {
        border: 3px solid #f56c28
    }
    
    .best-deal-span {
        position: absolute;
        font-size: 16px;
        letter-spacing: -0.32px;
        background-color: #f56c28;
        font-family: var(--zf-primary-semibold);
        line-height: 1.1;
        color: #fff;
        word-wrap: break-word;
        width: 64px;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-radius: 100%;
        top: 0;
        left: 40px;
        transform: translate(-50%,-50%)
    }
    
    .compliance-wrap .img-wrap img {
        display: block;
        border-radius: 4px 0 0 4px
    }
    
    .compliance-wrap a.compliance-cta {
        color: #071705;
        background: #eefaec;
        border-radius: 0 4px 4px 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        flex: 1 1;
        padding: 24px 16px;
        max-width: 1150px;
        margin: 80px auto 0;
        gap: 14px
    }
    
    .compliance-wrap h3 {
        font-size: 24px;
        line-height: 1;
        letter-spacing: -0.5px;
        display: flex;
        align-items: center;
        gap: 16px;
        color: #32a221;
        margin-bottom: 0
    }
    
    .compliance-wrap p {
        font-size: 16px;
        letter-spacing: 0;
text-decoration: underline;
    }
    
    .lock-i {
        width: fit-content;
        position: relative;
        top: 4px
    }
    
    .lock-i .lock-base {
        width: 28px;
        height: 20px;
        background-color: #61ad18;
        border-radius: 4px;
        display: block
    }
    
    .lock-i .lid-i {
        position: absolute;
        top: -13px;
        left: 4px;
        border: 5px solid #61ad19;
        width: 19px;
        height: 17px;
        display: inline-block;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        border-bottom: 0;
        transform: rotate(30deg);
        transition: .25s ease all .5s;
        transform-origin: 100% 100%
    }
    
    .zwe-om .lid-i {
        transform: rotate(0)
    }
    
    .apps-section,.integration-section {
        background-color: #f7f7f7
    }
    
    .apps-wrap {
        margin-top: 32px
    }
    
    .apps-wrap .flex-wrap>div p {
        font-size: 16px;
        margin-bottom: 16px;
        min-height: 57px
    }
    
    .apps-download-links-wrap a {
        margin-bottom: 0
    }
    
    .apps-download-links-wrap a:last-child {
        margin-right: 0
    }
    
    .download-sec {
        padding: 16px;
        background: #000 0 0 no-repeat padding-box;
        border-radius: 0 0 4px 4px
    }
    
    .apps-wrap .img-wrap img {
        border-radius: 4px 4px 0 0;
        display: block
    }
    
    .apps-download-links-wrap {
        display: flex;
        justify-content: center
    }
    
    .apps-wrap .flex-wrap .desktop-app-sec {
        max-width: fit-content
    }
    
    .desktop-app-sec .download-sec {
        width: 100%;
        color: #fff;
        font-size: 16px;
        font-family: var(--zf-primary-semibold);
        background-color: #2b2de2;
        padding: 24px;
        display: flex;
        column-gap: 16px;
        justify-content: center;
        align-items: center;
        border: unset
    }
    
    .desktop-app-sec img:not(.data-loaded) {
        max-width: 300px
    }
    
    .download-sec .arrow {
        border: unset;
        transform: scale(1.5);
        position: relative;
        right: inherit;
        top: inherit
    }
    
    .download-sec:hover .arrow {
        transform: translateX(5px) scale(1.5)
    }
    
    .download-sec .arrow i {
        background-color: #fff;
        height: 1.5px;
        width: 12px
    }
    
    .download-sec .arrow i:before {
        border-color: #fff;
        border-width: 0 1.5px 1.5px 0;
        padding: 3.5px;
        right: -4px
    }
    
    .menu-plus {
        position: relative;
        background: transparent;
        border: 0;
        cursor: pointer;
        padding: .5em;
        border-radius: 4px;
        text-align: right;
        z-index: 1;
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        font-family: var(--zf-primary-semibold);
        line-height: 1.4;
        color: #fff;
        font-size: 18px;
        outline: 2px solid transparent;
        outline-offset: 2px;
        transition: outline .2s ease
    }
    
    .menu-plus:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 3px
    }
    
    .menu-plus::after {
        content: "+";
        display: inline-block;
        font-size: 32px;
        text-align: center;
        border-radius: 100%;
        font-family: var(--zf-secondary-medium);
        border: 2px solid #fff;
        line-height: .5;
        padding: 4px;
        vertical-align: middle;
        cursor: pointer;
        background-color: transparent;
        color: #fff;
        transition: transform .3s ease,border-color .3s ease,color .3s ease
    }
    
    .menu-plus.is-visible::after {
        transform: rotate(45deg)
    }
    
    .menu-plus:after {
        background-color: unset;
        border-color: #fff;
        font-size: 24px;
        border-width: 1.5px;
        cursor: pointer;
        transition: .3s ease all;
        width: 24px;
        height: 24px
    }
    
    .menu-plus:focus-visible::after {
        border-color: #fff;
        color: #fff
    }
    
    li.brainstorm-i {
        transform: translate(-19%,-7%);
        top: 12%;
        right: 26%
    }
    
    li.ideas-i {
        top: 50%;
        left: 0;
        transform: translate(-50%,-50%)
    }
    
    li.customer-i {
        bottom: 0;
        top: unset;
        transform: translate(0,40%)
    }
    
    #drive-line {
        stroke-dasharray: 4040;
        stroke-dashoffset: 4040
    }
    
    .middle-animated #drive-line {
        animation: recLine 5s linear forwards
    }
    
    @keyframes recLine {
        from {
            stroke-dashoffset: 4040
        }
    
        to {
            stroke-dashoffset: 0
        }
    }
    
    span.info-box {
        font-family: var(--zf-secondary-medium);
        font-size: 16px;
        color: #000;
        cursor: text;
        user-select: text;
        transition: 1s ease all;
        display: block;
        max-width: 170px;
        overflow: hidden
    }
    
    span.info-box a {
        white-space: nowrap
    }
    
    .field-body section.marquee-section {
        padding: 0;
        padding: 80px 0;
        background-color: #fff;
        margin: 0 auto
    }
    
    .marquee-section ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px
    }
    
    .marquee-section ul li {
        display: contents
    }
    
    .marquee-section ul li a {
        font-size: 18px;
        color: #000;
        font-family: var(--zf-primary-semibold);
        position: relative;
        background: #f7f7f7;
        padding: 12px 20px;
        border-radius: 28px;
        box-shadow: rgba(0,0,0,0.05) 0 0 0 1px;
        transition: ease-in .3s;
        display: flex;
        align-items: center;
        gap: 8px
    }
    
    .marquee-section ul li a:hover,.marquee-section ul li a:focus {
        background: #2b2de2;
        color: #fff
    }
    
    .marquee-section ul li a .arrow {
        width: 18px;
        height: 18px;
        display: block;
        border: 2px solid #000;
        border-radius: 100%;
        position: relative;
        top: inherit;
        left: inherit;
        right: inherit;
        cursor: pointer;
        transition: .3s ease all;
        transform: rotate(-40deg) scale(1)
    }
    
    .i18n-ar .marquee-section ul li a .arrow {
        transform: rotate(45deg) scale(1)
    }
    
    .marquee-section ul li a:hover .arrow,.marquee-section ul li a:focus .arrow {
        transform: rotate(0) scale(1.2);
        border: 2px solid #fff
    }
    
    .marquee-section ul li a .arrow i {
        background: #000;
        width: 8px;
        height: 2px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-55%,-50%);
        border-radius: 0
    }
    
    .i18n-ar .marquee-section ul li a .arrow i {
        transform: translate(-40%,-50%)
    }
    
    .marquee-section ul li a:hover .arrow i,.marquee-section ul li a:focus .arrow i {
        background: #fff
    }
    
    .marquee-section ul li a .arrow i:before {
        content: '';
        position: absolute;
        transform: rotate(316deg) translateY(-70%); 
        top: 50%;
        right: -4px;
        border: solid #000;
        border-width: 0 2px 2px 0;
        padding: 2.5px;
        border-radius: 0
    }
    
    .i18n-ar .marquee-section ul li a .arrow i:before {
        transform: rotate(130deg) translate(-5px,-0.4px);
        right: 4.5px
    }
    
    .marquee-section ul li a:hover .arrow i:before,.marquee-section ul li a:focus .arrow i:before {
        border: solid #fff;
        border-width: 0 2px 2px 0
    }
    
    .field-body .integration-section {
        padding-top: 0
    }
    
    section.section.integration-section .flex-wrap {
        max-width: 732px;
        margin: 0 auto 100px;
        gap: 16px
    }
    
    .integration-section h2 {
        font-size: 32px;
        font-family: var(--zf-primary-semibold);
        max-width: 380px;
        line-height: 45px
    }
    
    .description {
        max-width: 297px
    }
    
    .description p {
        font-size: 16px;
        margin-bottom: 16px
    }
    
    .integration-section .content-wrap.bg-icons {
        padding: 120px 100px;
        position: relative;
        border-radius: 4px;
        background-color: #000
    }
    
    .integration-section h2,.integration-section .description * {
        color: #fff;
        position: relative
    }
    
    .integration-section .description a {
        text-decoration: underline;
        font-family: var(--zf-primary-semibold);
        display: inline-block
    }
    
    .fieldset {
        margin-bottom: 30px
    }
    
    .success-alert {
        display: none;
        margin: 0 auto 0;
        height: 42px;
        position: fixed;
        z-index: 999999;
        width: 100%;
        left: 0;
        top: 0
    }
    
    .scs-pop-inr {
        padding: 12px 20px;
        position: relative;
        max-width: 460px;
        margin: 0 auto;
        background: #40bd60;
        width: 100%;
        opacity: 0
    }
    
    .scs-pop-inr.animate {
        animation: bounceIn .8s forwards;
        -webiki-animation: bounceIn .8s forwards
    }
    
    @keyframes bounceIn {
        0%,20%,40%,60%,80%,100% {
            -webkit-animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000);
            animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000)
        }
    
        0% {
            opacity: 0;
            -webkit-transform: scale3d(.3,.3,.3);
            transform: scale3d(.3,.3,.3)
        }
    
        20% {
            -webkit-transform: scale3d(1.1,1.1,1.1);
            transform: scale3d(1.1,1.1,1.1)
        }
    
        40% {
            -webkit-transform: scale3d(.9,.9,.9);
            transform: scale3d(.9,.9,.9)
        }
    
        60% {
            opacity: 1;
            -webkit-transform: scale3d(1.03,1.03,1.03);
            transform: scale3d(1.03,1.03,1.03)
        }
    
        80% {
            -webkit-transform: scale3d(.97,.97,.97);
            transform: scale3d(.97,.97,.97)
        }
    
        100% {
            opacity: 1;
            -webkit-transform: scale3d(1,1,1);
            transform: scale3d(1,1,1)
        }
    }
    
    .st-name.error {
        display: none
    }
    
    .success-alert .scs-txt {
        font-size: 13px;
        display: block;
        text-align: center;
        font-family: var(--zf-primary-regular);
        color: #fff
    }
    
    .success-alert .close-icn {
        font-size: 12px;
        cursor: pointer;
        color: #fff;
        font-family: var(--zf-primary-regular);
        position: absolute;
        top: 5px;
        right: 12px
    }
    
    .formSec {
        width: 100%;
        overflow: auto;
        max-width: 412px;
        position: fixed;
        transform: translateX(120%);
        -webkit-transform: translateX(120%);
        right: 0;
        top: 0;
        z-index: 0;
        -webkit-box-shadow: -7px 0 28px 0 rgba(0,0,0,0.46);
        -moz-box-shadow: -7px 0 28px 0 rgba(0,0,0,0.46);
        box-shadow: -7px 0 28px 0 rgba(0,0,0,0.46);
        height: 100%;
        background: #fff;
        opacity: 0
    }
    
    .formSec.active {
        transform: translateX(0);
        -webkit-transform: translateX(0);
        z-index: 9999999999999;
        opacity: 1
    }
    
    .formInner {
        border-left: 1px solid #ddd;
        padding: 35px 55px 45px 44px;
        background: #fff;
        box-sizing: border-box;
        height: auto;
        text-align: left
    }
    
    .form-close {
        background: var(--close-icon) no-repeat;
        width: 18px;
        height: 18px;
        position: absolute;
        right: 20px;
        top: 20px;
        cursor: pointer;
        background-size: 17px;
        opacity: .6
    }
    
    .formInner input[type="text"] {
        border: 1px solid #e3e3e3;
        font-size: 13px;
        height: 38px;
        max-width: 290px;
        padding-left: 8px;
        width: 100%;
        outline: 0;
        box-sizing: unset !important;
        margin-left: unset !important
    }
    
    .formInner textarea {
        border: 1px solid #d4d4d4;
        font-size: 13px;
        padding: 5px 8px;
        height: 50px;
        width: 100%;
        max-width: 285px;
        resize: none;
        margin-left: unset !important;
        box-sizing: unset !important
    }
    
    .formInner .zgdprform-countrylist-container {
        max-width: unset !important;
        width: unset !important;
        margin-left: unset !important;
        height: unset !important;
        margin-bottom: 30px !important
    }
    
    .formInner .zgdprform-countrylist-container select.globalcountrycode {
        height: 40px !important
    }
    
    .formInner select {
        border: 1px solid #e2e2e2;
        font-size: 13px;
        height: 38px;
        max-width: 300px;
        width: 100%;
        background: 0;
        color: #666 !important
    }
    
    .formInner h4 {
        letter-spacing: -1px
    }
    
    .signagree {
        color: #000;
        font-size: 11px;
        line-height: 20px;
        margin-top: 0;
        padding-bottom: 10px;
        width: 90%;
        text-align: left;
        font-family: var(--zf-primary-semibold);
        margin: 0 auto
    }
    
    div.zgdprform-opt-container,p.zgdprform-opt-container {
        clear: both;
        text-align: left;
        padding-left: 18px;
        box-sizing: border-box;
        font-size: 11px;
        line-height: 1.3;
        position: relative;
        margin-bottom: 30px
    }
    
    .zgdprform-opt-container input.chk_bx {
        appearance: checkbox !important;
        -webkit-appearance: checkbox !important;
        -moz-appearance: checkbox !important;
        -ms-appearance: checkbox !important;
        position: absolute !important;
        left: 0 !important;
        top: 2px !important;
        margin: 0 !important;
        width: auto !important;
        height: auto !important;
        border: 1px solid #333;
        display: inline-block
    }
    
    .submit-btn {
        background: #f0483e;
        border: 1px solid #f0483e;
        color: #fff;
        cursor: pointer;
        display: inline-block;
        font-size: 16px;
        padding: 10px 20px;
        text-decoration: none;
        text-transform: uppercase;
        transition: all 500ms ease 0s;
        font-family: var(--zf-primary-semibold);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: unset;
        margin-left: unset !important
    }
    
    .freeze_layer {
        background: rgba(0,0,0,0.5);
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 999;
        display: none
    }
    
    .active_freaze {
        display: block
    }
    
    .zoverlay {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        background: rgba(0,0,0,0.5);
        display: none
    }
    
    .zsubmit {
        text-align: center
    }
    
    input[type="submit"] {
        background: none repeat scroll 0 0 #f0483e;
        border: 1px solid #f0483e;
        color: #fff;
        cursor: pointer;
        font-size: 15px;
        padding: 10px 30px;
        margin-bottom: 40px;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none
    }
    
    .zgdprform-state-container.zshow-common {
        margin-bottom: 30px !important
    }
    
    div.zgdprform-state-container::after,div.zgdprform-countrylist-container::after {
        right: 20px
    }
    
    label.error {
        display: block;
        color: red;
        font-size: 11px
    }
    .other-lang .pricing-wrap{
        margin-top: 50px;
    }
    .other-lang .try-now-btn,.i18n-ar .text-center,.i18n-ar .btm-cta *,.i18n-ar span.billed,.i18n-ar .pricing-wrap .flex-wrap .content span {
        text-align: center
    }
    
    .i18n-ar ul.fetures-price li i::after {
        margin-left: auto;
        margin-right: 4px
    }
    
    .other-lang .best-deal-span {
        font-size: 15px;
        width: 70px;
        height: 70px;
        right: inherit;
        left: 44px
    }
    .i18n-id.other-lang .best-deal-span {
        width: 85px;
        height: 85px;
        font-size: 14px;
    }
    .i18n-fr.other-lang .best-deal-span {
        width: 80px;
        height: 80px
    }
    
    .i18n-ar.other-lang .best-deal-span {
        font-size: 17px;
        text-align: center
    }
    
    .i18n-ja.other-lang .best-deal-span {
        font-size: 16px
    }
    
    .i18n-ar a.zbannerlink {
        margin-right: 0
    }
    
    .other-lang .feature-d .heading h3 {
        max-width: 200px
    }
    
    .i18n-ar .ratings-wrap .zrating-box .stars-container:after,.i18n-ar ul.fetures-price li::before,.i18n-ar .prd-menu h4::before {
        right: 0;
        left: unset
    }
    
    .i18n-ar .arrow i:before {
        left: -4px;
        right: unset;
        border-width: 0 0 2px 2px
    }
    
    .i18n-ar .arrow i:before {
        transform: rotate(46deg) translateY(-70%)
    }
    
    .i18n-ar .ratings-wrap .zrating-box div span:not(:last-child) {
        margin-left: 4px;
        margin-right: unset;
        text-align: left
    }
    
    .i18n-ar .pricing-switcher {
        margin-right: auto;
        margin-left: unset
    }
    
    .other-lang .feature-content {
        display: none
    }
    
    .i18n-ar ul.fetures-price li {
        padding-right: 16px;
        padding-left: unset
    }
    
    .i18n-ar .prd-menu h4 {
        padding-right: 52px;
        padding-left: unset
    }
    
    .i18n-ar .product-navigate .prd-menu p {
        text-align: right
    }
    
    .i18n-ar a.prd-menu.feature-d .arrow {
        transform: rotate(45deg) scale(1);
        left: 24px;
        right: unset
    }
    
    .i18n-ar .zaward-box p {
        margin-right: 23px;
        margin-left: unset
    }
    
    .i18n-ar .download-sec .arrow i:before {
        left: -4px;
        right: unset;
        border-width: 0 0 1.5px 1.5px
    }
    
    .i18n-ar a.prd-menu.feature-d .arrow i:before {
        left: -4px;
        right: unset;
        border-width: 0 0 2px 2px
    }
    
    .i18n-vi .pricing-section .content .inner {
        max-width: 670px
    }
    
    .i18n-vi .btm-cta {
        max-width: 780px
    }
    
    .i18n-ar .download-sec .arrow {
        left: 0
    }
    
    .i18n-ar .download-sec:hover .arrow {
        transform: translateX(-5px) scale(1.5)
    }
    
    @media(min-width: 992px) {
        .other-lang .pricing-wrap .plan {
            padding:32px 32px
        }
    }
    
    @media screen and (max-width: 380px) {
        .formInner textarea {
            max-width:93%
        }
    
        .formInner input[type="text"] {
            max-width: 96%
        }
    
        .success-alert .scs-txt {
            font-size: 12px
        }
    
        .success-alert {
            width: 100%
        }
    }
    
    .lock {
        overflow: hidden
    }
    
    .modal,.node-tnid-39396 .modal {
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none
    }
    
    .modal *,.node-tnid-39396 .modal * {
        box-sizing: border-box
    }
    
    .modal-overlay,.node-tnid-39396 .modal-overlay {
        position: fixed;
        z-index: 10;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        opacity: 0;
        transition: opacity .3s;
        background: rgba(0,0,0,0.3)
    }
    
    .modal.is-visible .modal-overlay,.node-tnid-39396 .modal.is-visible .modal-overlay {
        opacity: 1;
        display: block
    }
    
    .modal-header,.node-tnid-39396 .modal-header {
        text-align: center
    }
    
    .modal-wrapper-outer,.node-tnid-39396 .modal-wrapper-outer {
        height: 100%;
        overflow-y: scroll;
        width: 100%;
        z-index: 11;
        position: relative
    }
    
    .modal-wrapper,.node-tnid-39396 .modal-wrapper {
        position: absolute;
        z-index: 9999;
        margin: auto;
        width: 100%;
        max-width: 620px;
        background-color: #fff;
        box-shadow: 0 0 31px 1px hsla(0,0%,0%,0.35);
        padding: 30px 40px;
        background: #fff;
        margin-bottom: 50px;
        border: 1px solid #ddd;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%)
    }
    
    .modal-transition,.node-tnid-39396 .modal-transition {
        transition: all .3s .12s;
        transform: translateY(-10%);
        opacity: 0
    }
    
    .modal.is-visible .modal-transition,.node-tnid-39396 .modal.is-visible .modal-transition {
        transform: translateY(0);
        opacity: 1
    }
    
    .hidescroll,.node-tnid-39396 .hidescroll {
        overflow: hidden
    }
    
    .team-checkbox input,.node-tnid-39396 .team-checkbox input {
        color: #000;
        padding: 14px 12px;
        border: 0;
        display: block;
        width: 100%;
        margin: 15px 0 0;
        font-size: 13px;
        background: #fff;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        position: relative;
        z-index: 1;
        transition: .5s ease;
        border-radius: 0
    }
    
    .team-checkbox,.node-tnid-39396 .team-checkbox {
        height: 1px;
        left: 0;
        margin: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        width: 1px
    }
    
    #team-tick,.node-tnid-39396 #team-tick {
        border: 1px solid #000;
        display: inline-block;
        height: 8px;
        margin-right: 4px;
        width: 8px;
        box-sizing: content-box
    }
    
    .btn-section .modal-close,.node-tnid-39396 .btn-section .modal-close {
        cursor: pointer;
        position: inherit;
        color: #5b5b5b;
        font-size: 17px;
        padding: 10px 30px;
        z-index: initial;
        line-height: 20px;
        background: initial;
        font-weight: inherit;
        margin: 5px 0 5px 10px;
        display: inline-block;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        border-radius: 0;
        border: 1px solid #000
    }
    
    .btn-section,.node-tnid-39396 .btn-section {
        text-align: right;
        margin-top: 40px
    }
    
    .btn-section .btn-download,.node-tnid-39396 .btn-section .btn-download {
        color: #fff;
        background: #0085fc;
        border: 1px solid #0085fc;
        color: #fff;
        text-transform: capitalize;
        -webkit-transition: inherit;
        transition: inherit;
        font-family: var(--zf-primary-semibold),Arial,Helvetica,sans-serif;
        padding: 10px 30px;
        margin: 5px 0 5px 10px;
        display: inline-block;
        line-height: 20px
    }
    
    .btn-section .btn-download-disable,.node-tnid-39396 .btn-section .btn-download-disable {
        border: 1px solid #ccc;
        background-color: #ccc;
        color: #a7a7a7;
        cursor: default;
        -webkit-transition: inherit;
        transition: inherit
    }
    
    .modal .modal-wrapper,.node-tnid-39396 .modal .modal-wrapper {
        text-align: center
    }
    
    .team-model h4,.node-tnid-39396 .team-model h4 {
        margin-top: 20px;
        margin-bottom: 20px
    }
    
    .team-agree,.node-tnid-39396 .team-agree {
        text-align: left
    }
    
    .modal #signup-termservice.checked::before,.modal #signup-newsletter.checked::before,.node-tnid-39396 .modal #signup-termservice.checked::before,.node-tnid-39396 .modal #signup-newsletter.checked::before {
        background: #000 none repeat scroll 0 0;
        content: "";
        height: 1px;
        left: 4px;
        position: absolute;
        top: 7px;
        transform: rotate(-43deg);
        width: 11px
    }
    
    .modal #signup-termservice.checked::after,.modal #signup-newsletter.checked::after {
        background: #000 none repeat scroll 0 0;
        content: "";
        height: 1px;
        left: 1px;
        position: absolute;
        top: 9px;
        transform: rotate(45deg);
        width: 5px
    }
    
    .modal .signagree {
        font-size: 17px
    }
    
    .modal .signagree input {
        opacity: 0;
        visibility: hidden
    }
    
    .modal #signup-termservice,.modal #signup-newsletter {
        border: 1px solid #000;
        display: inline-block;
        height: 15px;
        margin-right: 10px;
        width: 15px;
        box-sizing: content-box;
        position: relative;
        vertical-align: middle
    }
    
    .team-agree a,.node-tnid-39396 .team-agree a {
        color: #0085fc
    }
    
    .team-agree a {
        margin: 0 4px
    }
    
    .team-model p,.node-tnid-39396 .team-model p {
        max-width: 600px;
        text-align: left
    }
    
    .modal #signup-termservice,.modal #signup-newsletter,.node-tnid-39396 .modal #signup-termservice,.node-tnid-39396 .modal #signup-newsletter {
        border: 1px solid #5b5b5b
    }
    
    #signup-termservice.checked::before,#signup-newsletter.checked::before,#signup-termservice.checked::after,#signup-newsletter.checked::after,.node-tnid-39396 #signup-termservice.checked::before,.node-tnid-39396 #signup-newsletter.checked::before,.node-tnid-39396 #signup-termservice.checked::after,.node-tnid-39396 #signup-newsletter.checked::after {
        background: #5b5b5b none repeat scroll 0 0
    }
    
    .team-agree,.node-tnid-39396 .team-agree {
        text-align: left;
        margin-top: 25px
    }
    
    .btn-download.disabled,.node-tnid-39396 .btn-download.disabled {
        cursor: not-allowed;
        border: 1px solid #aed5fd;
        background-color: #aed5fd;
        color: #fff
    }
    
    @media only screen and (max-width: 767px) {
        .modal-wrapper,.node-tnid-39396 .modal-wrapper {
            width:95%;
            box-sizing: border-box;
            padding: 25px 35px
        }
    
        .modal .signagree {
            font-size: 15px
        }
    }
    
    ul.zcustomer-list {
        display: none
    }
    
    @media(min-width: 1500px) {
        .field-body .section,.scaling-section .content-fluid {
            max-width:1800px;
            margin: 0 auto
        }
    
        .field-body .section.scaling-section,.field-body .section.apps-section,.field-body .section.integration-section {
            max-width: unset
        }
    
        .scaling-section .content-fluid {
            overflow: hidden
        }
    }
    
    @media(min-width: 1201px) and (max-width:1399px) {
        .zaward-block>.zaward-box:first-child p {
            max-width:178px
        }
    
        .zaward-box p {
            margin-left: 0px
        }
    }
    
    @media(max-width: 1600px) {
        ul.fetures-price {
            font-size:14px
        }
    }
    
    @media(max-width: 1451px) {
        .feature-d .heading {
            padding:48px 40px 0 40px
        }
    }
    
    @media(max-width: 1400px) {
        .arrow {
            top:30px
        }
    
        .feature-d .heading {
            padding: 32px 50px 0 32px
        }
    
        .other-lang .feature-d .heading h2,.other-lang  .feature-d .heading h3 {
            font-size: 20px
        }
    
        .feature-drive4 .content {
            transform: translate(-50%,-50%)
        }
    
        .feature-drive4 .content h2,.feature-drive4 .content h3 {
            max-width: 196px;
            font-size: 28px
        }
    
        .scaling-section .content p {
            font-size: 48px
        }
    
        .fields-box p {
            font-size: 24px
        }
    
        .fields-box>div:not(.cover-img) {
            padding: 44px 32px
        }
    
        .trust-brands-wrap ul {
            max-width: 90%;
            gap: 16px;
            margin: 0 auto
        }
    
        .trust-brands-wrap ul li {
            flex: initial
        }
    
        .field-body h2 {
            font-size: 42px
        }
    
        .apps-wrap .flex-wrap {
            gap: 24px
        }
    
        .integration-section h2 {
            font-size: 32px
        }
    
        .integration-section .description {
            max-width: 400px
        }
    
        .integration-section .content-wrap.bg-icons {
            padding: 50px 80px
        }
    
        .testimonial-feedback .menu-data a {
            font-size: 16px
        }
    }
    
    @media(max-width: 1366px) {
        .field-body h1 {
            font-size:48px;
            line-height: 62px
        }
    
        .banner-section .content,.banner-section .banner,.cta-side {
            width: 50%
        }
    }
    
    @media(max-width: 1200px) {
        .zaward-block {
            justify-content: center;
        }
        .cta-side .inner {
            align-items:center
        }
    
        .field-body h1 {
            font-size: 42px;
            line-height: 58px;
            margin: 16px auto 0 auto;
            text-align: center;
            max-width: 680px
        }
    
        .banner-section p {
            margin: 0 auto
        }
    
        .content-wrap {
            max-width: 960px
        }
    
        .banner-section .flex-wrap {
            flex-direction: column;
            align-items: center;
            gap: 40px
        }
    
        .banner-section .content,.banner-section .banner {
            width: 100%
        }
    
        .user-icons {
            vertical-align: -3px
        }
    
        .features-section .feature-d {
            width: calc(50%);
            max-height: 280px
        }
    
        .features-section .feature-d>div,.features-section .feature-d .banner,.features-section .feature-d .banner img {
            height: 100%
        }
    
        .feature-d .banner img {
            object-fit: cover
        }
    
        .features-section .flex-wrap {
            margin: 0 24px;
            flex-wrap: wrap;
            gap: 32px;
            justify-content: center
        }
    
        .smart-search-screen {
            max-height: 60%;
            max-width: min-content;
            object-fit: contain !important
        }
    
        .feature-drive4 .content h2,.feature-drive4 .content h3 {
            max-width: 270px;
            font-size: 24px
        }
    
        .fields-box .cover-img {
            display: none
        }
    
        .fields-box .testimonial-feedback,.fields-box .feature-content {
            width: 50%
        }
    
        .fields-box {
            min-height: 420px
        }
    
        .fields-box>div:not(.cover-img),.fields-box p {
            max-width: unset
        }
    
        .pricing-wrap .plan {
            max-width: 31%;
            padding: 24px 16px
        }
    
        li.ideas-i {
            left: 10%
        }
    
        .field-body section.marquee-section {
            padding: 50px 0
        }
    
        .apps-wrap .flex-wrap>div p {
            max-width: 254px
        }
    
        .other-lang .apps-wrap .flex-wrap>div p {
            max-width: 100%;
            min-height: 76px
        }
    
        .integration-section .content-wrap.bg-icons {
            padding: 50px
        }
    
        .zrating-block {
            flex-wrap: wrap;
            gap: 30px 20px
        }
    
        .best-deal-span {
            font-size: 12px;
            width: 48px;
            height: 48px;
            transform: translate(-30%,-50%)
        }
    
        ul.fetures-price li {
            font-size: 12px
        }
    
        .content-wrap.content-wrap .cta {
            justify-content: center
        }
    
        .cta .act-btn {
            padding: 20px 27px
        }
    
        .i18n-ar .zaward-box p {
            text-align: center;
            margin-right: 0;
            margin-left: unset
        }
    
        .other-lang .best-deal-span {
            right: unset;
            left: 40px
        }
    
        .i18n-vi .best-deal-span,.i18n-pt-br .best-deal-span,.i18n-es-xl .best-deal-span {
            right: 140px
        }
    
        .arrow {
            top: 24px
        }
    }
    
    @media(max-width: 991px) {
        .pricing-wrap .pr-details{
            flex: 0 0 100%;
        }
        .pr-details{
            margin-top: 0;
        }
        .pr-details {
            gap:16px
        }
    
        .content-wrap {
            max-width: 720px
        }
    
        .features-section .flex-wrap {
            gap: 16px
        }
    
        .features-section .feature-d {
            width: calc(50% - 16px)
        }
    
        .scaling-section .content p {
            font-size: 40px
        }
    
        .testimonial-feedback .inner p {
            font-size: 20px
        }
    
        .fields-box .feature-content p {
            font-size: 20px
        }
    
        .trust-brands-wrap ul {
            max-width: 100%
        }
    
        .pricing-wrap .flex-wrap {
            flex-wrap: wrap
        }
    
        .pricing-wrap .plan {
            flex: 0 0 48%;
            max-width: 48%;
        }
    
        .pricing-wrap .plan.plan4 .content {
            margin: 0 auto
        }
    
        .pricing-section h2 {
            max-width: 360px
        }
    
        .pricing-wrap {
            margin-top: 48px
        }
    
        .compliance-wrap .img-wrap {
            width: 40%
        }
    
        .compliance-wrap a.compliance-cta {
            flex-direction: column;
            gap: 12px;
            padding-top: 33px
        }
    
        .compliance-wrap h3 {
            font-size: 20px;
            gap: 20px
        }
    
        .field-body .section {
            padding: 48px 0
        }
    
        .apps-wrap .flex-wrap {
            flex-wrap: wrap;
            gap: 32px
        }
    
        .mobile-app-sec,.desktop-app-sec {
            width: 100%
        }
    
        .mobile-app-sec .content {
            max-width: fit-content;
            margin: 0 auto
        }
    
        .apps-wrap .flex-wrap>div p {
            margin: 0 auto 16px;
            text-align: center
        }
    
        .integration-section h2 {
            font-size: 28px
        }
    
        .field-body .integration-section,.field-body .features-section {
            padding-top: 0
        }
    
        .integration-section .flex-wrap {
            flex-direction: column;
            gap: 16px
        }
    
        .integration-list li.active {
            scale: .8
        }
    
        .apps-section h2 {
            text-align: center
        }
    
        li.intercom-i,li.jira-s-i {
            padding: 12px
        }
    
        .zrating-box {
            width: 30%;
            align-items: center;
            transform: scale(.9);
        }
    
        .zrating-block {
            margin-top: 40px;
            gap: 36px 20px;
        }
    
        .ratings-wrap .zaward-box {
            flex-direction: column;
            text-align: center
        }
    
        .zaward-block {
            flex-wrap: wrap;
            justify-content: center;
            gap: 40px 60px
        }
    
        .zaward-box p {
            margin-left: 0
        }
    
        .testimonial-feedback .menu-data a {
            font-size: 16px
        }
    }
    @media(min-width: 992px) and (max-width:1199px) {
        .pricing-wrap .plan.free-edit,.pricing-wrap .pr-details .plan {
            width: 320px;
            max-width: 50%;
        }
        .pricing-wrap .plan{
            max-width: 31%;
        }
    }
    
    @media(min-width: 768px) and (max-width:991px) {
        .pricing-wrap .plan.free-edit,.pricing-wrap .pr-details .plan {
            width: 320px;
            max-width: 32%;
        }
        .pricing-wrap .plan.plan3{
            margin-top: 32px;
        }
    }
    @media(max-width: 991px) and (min-width:768px) {
        .pr-details {
            flex-direction:row;
            gap: 16px;
            width: 100%;
            justify-content: center;
            margin-top: 16px
        }
    
        .pricing-wrap .pr-details {
            flex: 0 0 100%
        }
    }
    
    @media(max-width: 767px) {
        .pricing-wrap .plan.free-edit,.pricing-wrap .pr-details .plan {
            width: 90%;
            max-width: 90%
        }
        .field-body h1 {
            font-size:40px;
            line-height: 50px
        }
    
        .user-icons {
            vertical-align: -7px
        }
    
        .content-wrap {
            max-width: 540px
        }
    
        .banner-section .flex-wrap {
            gap: 24px
        }
    
        .feature-d .heading {
            padding: 24px 24px 0 24px
        }
    
        .feature-drive4 .content h2,.feature-drive4 .content h3 {
            max-width: 135px;
            font-size: 20px
        }
    
        .scaling-section .content p {
            font-size: 28px
        }
    
        .listing-tabs {
            padding-top: 40px
        }
    
        .testimonial-feedback .inner p,.fields-box .feature-content p {
            font-size: 18px
        }
    
        .fields-box .testi-f p {
            font-size: 16px
        }
    
        .trust-brands-wrap ul {
            gap: 24px
        }
    
        .trust-brands-wrap .content-wrap>p {
            max-width: 400px;
            margin: 0 auto
        }
    
        .field-body h2 {
            font-size: 32px
        }
    
        .pricing-section h2 {
            max-width: 275px
        }
    
        .pricing-section .content .inner {
            margin-bottom: 32px
        }
    
        .pricing-wrap {
            margin-top: 24px
        }
    
        .pricing-wrap .plan {
            max-width: 80%;
            flex-basis: 80%;
        }
    
        .pricing-wrap .flex-wrap {
            gap: 40px
        }
    
        .compliance-wrap .flex-wrap {
            flex-direction: column
        }
    
        .compliance-wrap .img-wrap,.compliance-wrap a.compliance-cta {
            width: 100%
        }
    
        .compliance-wrap a.compliance-cta {
            padding: 32px 12px 24px 12px;
            text-align: center
        }
    
        .compliance-wrap .img-wrap img {
            display: block;
            width: 100%;
            max-height: 190px;
            object-fit: cover;
            object-position: center -40px
        }
    
        li.ideas-i {
            left: 12%
        }
    
        li.brainstorm-i {
            right: 20%
        }
    
        .integration-section .content-wrap.bg-icons {
            max-width: unset;
            width: 100%
        }
    }
    
    @media(max-width: 640px) {
        .fields-box>div:not(.cover-img) {
            padding:32px 24px 42px
        }
    
        .testimonial-feedback .inner p,.fields-box .feature-content p {
            font-size: 18px
        }
    
        .menu-plus {
            padding: 1.5em .5em
        }
    
        .testimonial-feedback .inner p,.fields-box .feature-content p {
            font-size: 16px
        }
    
        .field-body h2 {
            font-size: 28px;
            text-align: center;
            margin: 0 auto
        }
    
        .feature-drive4 .content h2,.feature-drive4 .content h3 {
            margin: 0;
            text-align: left
        }
    
        .integration-section .description {
            margin: 0 auto;
            text-align: center
        }
    
        .field-body p {
            font-size: 16px
        }
    
        .fields-box .testimonial-feedback {
            min-height: 260px
        }
    
        .fields-box .feature-content {
            min-height: 265px
        }
    
        .testimonial-feedback .menu-data {
            padding: 32px 24px
        }
    
        .testimonial-feedback .menu-data ul {
            display: flex;
            flex-wrap: wrap;
            gap: 16px
        }
    
        .testimonial-feedback .menu-data a {
            padding: 4px 12px;
            background-color: #fff;
            font-size: 16px;
            line-height: 1;
            margin-bottom: 4px;
            display: block;
            width: max-content;
            border-radius: 8px;
            color: #000
        }
    
        .menu-data .arrow {
            display: none
        }
    
        .features-section .feature-d {
            width: 100%
        }
    
        a.feature-d.feature-drive4 {
            min-height: 280px
        }
    
        .feature-drive4 .content {
            transform: unset
        }
    
        .feature-drive4 .content {
            left: 0;
            transform: translate(0,-50%);
            padding: 0 24px 0 24px
        }
    
        .scaling-f {
            margin-top: 24px
        }
    
        .scaling-f .fields-box {
            flex-direction: column;
            gap: 0
        }
    
        .fields-box>div:not(.cover-img) {
            border-radius: 0
        }
    
        .fields-box .testimonial-feedback,.fields-box .feature-content {
            width: 100%
        }
    
        .pricing-wrap .flex-wrap {
            gap: 36px 8px
        }
    
        .pricing-wrap .plan {
            flex: 0 0 calc(100% - 4px)
        }
    
        /* .pricing-wrap .pr-details {
            flex: 0 0 calc(47% - 4px)
        } */
    
        ul.fetures-price {
            font-size: 12px
        }
    
        .try-now-btn {
            padding: 8px 16px;
            justify-content: center
        }
    
        span.user-count {
            font-size: 14px
        }
    
        .menu-plus:after {
            padding: 4px
        }
    
        span.info-box {
            font-size: 12px;
            max-width: 130px
        }
    
        li.ideas-i {
            left: 15%
        }
    
        .integration-section .content-wrap.bg-icons {
            padding: 30px
        }
    
        .zrating-box {
            width: 45%
        }
    
        .cta .act-btn {
            font-size: 16px
        }
    
        .i18n-ar .feature-drive4 .content {
            right: 0;
            left: unset
        }
    }
    
    @media(max-width: 480px) {
        /* .pricing-wrap .plan {
            flex:0 0 calc(100% - 4px)
        } */
    
        /* .pricing-wrap .plan {
            max-width: 260px
        } */
    
        /* .pricing-wrap .pr-details {
            flex: none
        } */
        .pricing-wrap .pr-details {
            flex: 0 0 calc(100% - 4px);
        }
    
        .pr-details {
            gap: 24px
        }
    
        .field-body h1 {
            font-size: 32px;
            line-height: 40px
        }
    
        .content-wrap {
            --wrapperx: 1.5rem;
            max-width: 100%;
            width: 100%;
            padding-right: calc(var(--wrapperx) * .5);
            padding-left: calc(var(--wrapperx) * .5);
            margin-right: auto;
            margin-left: auto
        }
    
        .cta {
            flex-direction: column;
            justify-content: center;
            align-items: unset;
            gap: 12px
        }
    
        .field-body h1 {
            font-size: 32px;
            max-width: 330px
        }
    
        .user-icons {
            scale: .7;
            vertical-align: -9px;
            margin: -10px -20px
        }
    
        p.business-lb {
            font-size: 20px
        }
    
        .scaling-section .content p {
            font-size: 24px
        }
    
        .listing-tabs ul li {
            font-size: 14px;
            padding: 8px 16px
        }
    
        .scaling-f {
            margin-top: 16px
        }
    
        .trust-brands-section {
            padding: 32px 0 0
        }
    
        .pricing-section .content .inner span {
            text-align: center;
            display: block
        }
    
        .pricing-switcher {
            margin: 0 auto
        }
    
        .pricing-wrap .flex-wrap {
            justify-content: center
        }
    
        ul.fetures-price {
            font-size: 14px
        }
    
        .compliance-wrap .img-wrap img {
            max-height: 130px;
            object-position: center -18px
        }
    
        .compliance-wrap p {
            font-size: 14px;
            padding: 0 16px
        }
    
        .compliance-wrap h3 {
            flex-direction: column;
            align-items: center
        }
    
        li.brainstorm-i {
            right: 0;
            top: 7%
        }
    
        li.ideas-i {
            left: 0;
            transform: translate(-7%,-50%)
        }
    
        span.info-box {
            max-width: 100px
        }
    
        .menu-plus:after {
            font-size: 24px
        }
    
        .apps-wrap {
            margin-top: 16px
        }
    
        .apps-download-links-wrap {
            margin-bottom: 0
        }
    
        .desktop-app-sec .download-sec {
            font-size: 14px;
            padding: 16px
        }
    
        .integration-list {
            min-height: 500px;
            margin-top: 48px
        }
    
        .integration-section h2 {
            font-size: 22px
        }
    
        .integration-section h2,.integration-section .description * {
            text-align: center
        }
    
        li.squarespace-i {
            left: 0;
            top: 59%
        }
    
        li.jira-i {
            left: 0;
            top: 10%
        }
    
        li.salesforce-i {
            top: 28%;
            left: 0
        }
    
        li.webflow-i {
            left: 38%;
            top: 33%
        }
    
        li.dropbox-i {
            left: 0
        }
    
        li.asana-i {
            left: 68%;
            top: 35%
        }
    
        li.intercom-i {
            left: 68%
        }
    
        li.shopify-i {
            left: 35%;
            top: 0
        }
    
        li.zendesk-i {
            top: 18%
        }
    
        li.jira-s-i {
            top: 85%;
            left: 68%
        }
    
        li.evernote-i {
            left: 67%;
            top: 66%
        }
    
        li.mailchimp-i {
            top: 65%
        }
    
        .i18n-ar .zrating-box>div {
            direction: ltr
        }
    }
    
    @media(max-width: 339px) {
        .field-body h1 {
            font-size:30px;
            max-width: 295px
        }
    
        .zrating-block {
            /* gap: 26px 12px */
        }
    
        .ratings-wrap [class|="zicons"] {
            transform: scale(0.85)
        }
    }
    
    section.section.office-suite {
        padding: 0 24px
    }
    
    section.section.office-suite .bg-drak {
        background: #000;
        color: #fff;
        border-radius: 8px;
        padding: 80px 0
    }
    
    .office-suite h2 {
        text-align: center;
        margin-bottom: 90px
    }
    
    .product-navigate {
        max-width: 450px
    }
    
    .product-navigate h3 {
        letter-spacing: -0.64px
    }
    
    .prd-menu {
        display: block;
        position: relative;
        color: #fff;
        padding: 27px 30px;
        background-color: transparent;
        margin-bottom: 32px;
        transition: ease-in .3s
    }
    
    .prd-menu:hover {
        background-color: #1d1d1d
    }
    
    .prd-menu.writer {
        margin-top: 78px
    }
    
    .prd-menu h4 {
        font-size: 24px;
        padding-left: 52px;
        position: relative;
        letter-spacing: -0.48px
    }
    
    .prd-menu h4::before {
        content: '';
        position: absolute;
        left: 0;
        top: -5px;
        background: var(--product-icons) no-repeat;
        background-size: var(--zp-i-bs);
        width: var(--zp-i-w);
        height: var(--zp-i-h)
    }
    
    .product-navigate .prd-menu p {
        max-width: 341px;
        font-size: 16px;
        text-align: left
    }
    
    .prd-menu.writer h4::before {
        background-position: var(--zp-writer-bp)
    }
    
    .prd-menu.sheet h4::before {
        background-position: var(--zp-sheet-bp)
    }
    
    .prd-menu.show h4::before {
        background-position: var(--zp-show-bp)
    }
    
    a.prd-menu.feature-d .arrow {
        border: 2px solid #fff
    }
    
    a.prd-menu.feature-d .arrow i {
        background: #fff
    }
    
    a.prd-menu.feature-d .arrow i:before {
        border: solid #fff;
        border-width: 0 2px 2px 0
    }
    
    a.prd-menu.feature-d .arrow {
        transform: rotate(-40deg) scale(1);
        position: absolute;
        top: 32px;
        right: 24px
    }
    
    a.prd-menu.feature-d:hover .arrow,a.prd-menu.feature-d:focus .arrow {
        transform: rotate(0) scale(1.2)
    }
    
    a.prd-menu.feature-d .arrow i:before {
        border-color: #fff
    }
    
    a.prd-menu.feature-d .arrow i {
        background-color: #fff
    }
    
    .drive-creative {
        position: relative;
        width: 100%;
        max-width: 680px;
        min-height: 757px;
        background: url(/sites/zweb/images/workdrive/home/office-suite-bg.jpg) no-repeat right center;
        background-size: cover;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center
    }
    
    .office-suite .flex-wrap {
        column-gap: 32px
    }
    
    a.prd-menu.show.feature-d {
        margin-bottom: 0
    }
    
    ul.integration-icons {
        width: 100%;
        max-width: 812px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        padding-left: 0;
        gap: 32px;
        align-items: center;
        justify-content: center;
        margin: 0 auto
    }
    
    ul.integration-icons li {
        list-style: none;
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc(80px / 1);
        height: 80px;
        text-align: center;
        background-color: #fff;
        list-style: none;
        border-radius: 16px;
        margin-bottom: -8px;
        transform: scale(.8)
    }
    
    ul.integration-icons li:nth-child(odd) {
        transition-delay: 350ms;
        transition: ease-in .5s
    }
    
    ul.integration-icons li:nth-child(even) {
        transition-delay: 550ms;
        transition: ease-in .7s
    }
    
    ul.integration-icons.zwe-ob li:nth-child(odd),ul.integration-icons.zwe-ob li:nth-child(even) {
        transform: scale(1)
    }
    
    .bottom-wrap {
        background-color: #fff;
        color: #000
    }
    
    .btm-cta {
        max-width: 744px;
        margin: 100px auto 0;
        text-align: center
    }
    
    .btm-cta h2 {
        margin-bottom: 24px
    }
    
    .btm-cta .cta {
        justify-content: center;
        align-items: center;
        gap: 0
    }
    
    .cover-img {
        width: 100%;
        max-width: 847px;
        min-height: 640px
    }
    
    .cover-img2 {
        width: 100%;
        max-width: 1120px;
        min-height: 640px
    }
    
    .ratings-wrap {
        position: relative;
        width: 100%;
        max-width: 1800px;
        margin: 0 auto
    }
    
    span.zpricing-lic {
        text-align: center;
        width: 100%;
        display: block;
        margin: 32px 0
    }
    
    a.secondray-btn {
        display: inline-flex;
        text-align: center;
        color: var(--zwc-link-clr);
        font-family: var(--zf-primary-semibold);
        position: relative
    }
    
    a.secondray-btn::after {
        content: '';
        bottom: 0;
        left: 0;
        position: absolute;
        width: 100%;
        height: 1.5px;
        background: var(--zwc-link-clr)
    }
    
    .text-center {
        text-align: center
    }
    
    .apps-section .heading-wrap {
        display: flex;
        flex-direction: row;
        gap: 16px;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 100px
    }
    
    .apps-section .heading-wrap p {
        max-width: 500px;
        font-size: 24px;
        line-height: 1.6
    }
    
    .text-right {
        text-align: right
    }
    
    .fields-box .feature-content a.nonlang.zclick {
        position: relative;
        top: -16px
    }
    
    .fields-box .feature-content a.nonlang.zclick::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 1.5px;
        background: #01a9f5;
        left: 0;
        bottom: 0
    }
    
    .tooltip {
        position: relative;
        left: 4px
    }
    
    .tooltip.hide-tooltip:focus {
        outline: 0;
        border: 0
    }
    
    .tooltip span.data-tooltip {
        display: none;
        pointer-events: none;
        bottom: 100%;
        left: 50%;
        position: absolute;
        z-index: 10;
        transform: translate(-50%,10px);
        transform-origin: top;
        transition: all .18s ease-out .18s;
        padding: 8px;
        background-color: #308316;
        border-radius: 4px;
        box-shadow: 10px 0 50px rgba(0,0,0,0.2);
        white-space: nowrap;
        margin-bottom: 11px;
        border-bottom: 2px solid #fee201;
        color: #fff;
        font-size: 12px;
        font-family: var(--zf-primary-semibold);
        text-align: center
    }
    
    .tooltip:before {
        display: none;
        pointer-events: none;
        bottom: 100%;
        left: 50%;
        position: absolute;
        z-index: 10;
        transform: translate(-50%,10px);
        transform-origin: top;
        transition: all .18s ease-out .18s;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #308316;
        content: "";
        margin-bottom: 0
    }
    
    .tooltip:hover span.data-tooltip,.tooltip:focus span.data-tooltip {
        display: block;
        pointer-events: auto;
        transform: translate(5px,-50%)
    }
    
    .tooltip.hide-tooltip:focus span.data-tooltip,.tooltip.hide-tooltip:hover span.data-tooltip,.tooltip.hide-tooltip:focus:before,.tooltip.hide-tooltip:before {
        display: none
    }
    
    span.data-tooltip[data-tooltip-pos="pos"] {
        bottom: auto;
        left: 93%;
        top: 50%;
        transform: translate(-10px,-50%)
    }
    
    span.data-tooltip[data-tooltip-length] {
        white-space: normal
    }
    
    span.data-tooltip[data-tooltip-length="medium"] {
        width: 150px
    }
    
    span.data-tooltip[data-tooltip-length="large"] {
        width: 260px
    }
    
    span.data-tooltip[data-tooltip-length="fit"] {
        width: 100%
    }
    
    .i18n-ar .team-model h4 {
        text-align: center
    }
    
    .i18n-ar .team-model p {
        text-align: right
    }
    
    .lang-rtl .chat-iframe-wrap {
        left: 5px;
        right: inherit
    }
    
    .lang-rtl div#zsiq_float {
        left: 5px;
        right: auto
    }
    
    @media(max-width: 1199px) {
        .tooltip:hover span.data-tooltip,.tooltip:focus span.data-tooltip {
            display:block;
            pointer-events: auto;
            transform: translate(-50%,0)
        }
    
        .tooltip:hover:before,.tooltip:focus:before {
            display: block;
            pointer-events: auto;
            transform: translate(-50%,25px)
        }
    
        span.data-tooltip[data-tooltip-pos="pos"] {
            bottom: auto;
            left: 50%;
            top: 100%;
            transform: translate(-50%,-10px)
        }
    
        span.data-tooltip {
            margin-top: 7px
        }
    
        span.data-tooltip[data-tooltip-pos="pos"]:hover,span.data-tooltip[data-tooltip-pos="pos"]:focus {
            transform: translate(-50%,0)
        }
    }
    
    @media(max-width: 767px) {
        span.data-tooltip[data-tooltip-pos="pos"]:before,span.data-tooltip[data-tooltip-pos="pos"] {
            transform:translate(-30%,-10px)
        }
    
        span.data-tooltip[data-tooltip-pos="pos"]:hover:before,span.data-tooltip[data-tooltip-pos="pos"]:focus:before span.data-tooltip[data-tooltip-pos="pos"]:hover,span.data-tooltip[data-tooltip-pos="pos"]:focus {
            transform: translate(-30%,0)
        }
    }
    
    @media(max-width: 640px) {
        span.data-tooltip[data-tooltip-pos="pos"]:before,span.data-tooltip[data-tooltip-pos="pos"] {
            transform:translate(-50%,-10px)
        }
    
        span.data-tooltip[data-tooltip-pos="pos"]:hover:before,span.data-tooltip[data-tooltip-pos="pos"]:focus:before,span.data-tooltip[data-tooltip-pos="pos"]:hover,span.data-tooltip[data-tooltip-pos="pos"]:focus {
            transform: translate(-50%,0)
        }
    
        span.data-tooltip[data-tooltip-length="medium"] {
            width: 120px
        }
    
        .pricing-section .content .inner span {
            text-align: center;
            display: block
        }
    }
    
    .tooltip {
        border: 0;
        background: transparent
    }
    
    .tooltip-content {
        display: none;
        position: absolute;
        background: #3ca81e;
        color: #fff;
        padding: 8px;
        border-radius: 4px;
        font-size: .875rem;
        z-index: 10;
        max-width: 200px
    }
    
    .tooltip:focus+.tooltip-content,.tooltip:hover {
        display: inline-block;
    }
    
    .i18n-it .features-section .feature-d{
        cursor: inherit;
    }
    .i18n-it a.feature-d.feature-drive4 {
        cursor: pointer;
    }
    @media(max-width: 1400px) {
        ul.fetures-price li {
            font-size:12px
        }
    
        ul.fetures-price li i::after {
            margin-top: 1px
        }
    
        ul.fetures-price li::before {
            top: 4px
        }
    }
    
    @media(max-width: 1200px) {
        .content-wrap {
            max-width: 960px;
        }
        .cta-side {
            width:100%
        }
    
        .cta {
            justify-content: center
        }
    
        .ratings-wrap .zaward-box {
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center
        }
    
        .zaward-box p {
            margin-left: 0;
            margin-top: 16px
        }
    
        .feature-d .heading {
            padding: 24px 50px 24px 32px
        }
    
        a.feature-d.feature-truesync .banner img {
            object-position: 0 79%
        }
    
        a.feature-d.feature-drive4 .heading {
            background: transparent
        }
    
        .pricing-switcher {
            margin-bottom: 50px
        }
    }
    
    @media only screen and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio:2) and (orientation:landscape) {
        .feature-drive4:before {
            background:transparent conic-gradient(from 9deg at 53% 31%,#308316 .00%,#1b51e1 26.42%,#164fea 42.86%,#3ca818 63.47%,#f56c28 87.53%,#f56c28 100.00%) 0 0 no-repeat padding-box
        }
    }
    
    @media(max-width: 1024px) {
        .feature-drive4:before {
            background:transparent conic-gradient(from 9deg at 53% 31%,#308316 .00%,#1b51e1 26.42%,#164fea 42.86%,#3ca818 63.47%,#f56c28 87.53%,#f56c28 100.00%) 0 0 no-repeat padding-box
        }
    
        .apps-wrap .flex-wrap .desktop-app-sec {
            display: none
        }
    
        .apps-wrap .flex-wrap>div p {
            width: 100%;
            text-align: center;
            max-width: inherit
        }
    
        .apps-wrap .flex-wrap {
            align-items: center;
            justify-content: center
        }
    }
    
    @media(max-width: 991px) {
        .office-suite .flex-wrap {
            flex-wrap:wrap
        }
    
        section.section.office-suite .bg-drak {
            padding: 60px 0
        }
    
        .product-navigate {
            margin: 0 auto
        }
    
        .product-navigate h3,.product-navigate p {
            text-align: center
        }
    
        .office-suite h2 {
            margin-bottom: 38px
        }
    
        .prd-menu {
            background-color: #1d1d1d
        }
    
        .prd-menu.writer {
            margin-top: 42px
        }
    
        section.section.integration-section .flex-wrap {
            margin: 0 auto 60px
        }
    
        .btm-cta {
            margin: 60px auto 0
        }
    
        .drive-creative {
            display: none
        }
    
        .apps-section .heading-wrap {
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-bottom: 0
        }
    
        .apps-section .heading-wrap p {
            font-size: 20px;
            text-align: center
        }
    
        .compliance-wrap a.compliance-cta {
            text-align: center
        }
    
        .billed {
            max-width: 195px;
            margin: 0 auto 16px
        }
    
        .ratings-wrap .zaward-box {
            justify-content: flex-start
        }
    
        .i18n-ar .compliance-wrap p {
            text-align: center
        }
    }
    
    @media(max-width: 767px) {
        section.section.integration-section {
            padding-bottom:0
        }
    
        .integration-section .content-wrap.bg-icons {
            border-radius: 0
        }
    
        .other-lang .best-deal-span {
            right: unset;
            left: 40px;
        }
    }
    
    @media(max-width: 575px) {
        .cta {
            justify-content:center;
            flex-direction: column;
            align-items: center
        }
    
        .pricing-wrap .plan {
            padding: 24px 24px
        }
    
        .i18n-ar .marquee-section ul li a {
            font-size: 16px
        }
    
        .other-lang .marquee-section ul li a {
            padding: 12px 15px 12px 45px
        }
    
        .i18n-ar .marquee-section ul li a .arrow {
            position: absolute;
        }
    
        .i18n-ar .marquee-section ul li a .arrow {
            transform: rotate(45deg) scale(1);
            left: 10px
        }
    }
    
    @media(max-width: 480px) {
        .zaward-block {
            gap:24px 60px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
    
        section.section.office-suite {
            padding: 0 12px
        }
    
        .fields-box .feature-content a.nonlang.zclick {
            top: 24px
        }
    
        .i18n-ar .pricing-switcher {
            margin: 0 auto
        }
    
        .pricing-wrap .plan {
            padding: 24px 15px
        }
    
        .other-lang .pricing-switcher li span span.yl-s {
            display: block
        }
    
        .other-lang .best-deal-span {
            font-size: 12px
        }
    }
    
    .popup-overlay {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        display: none;
        background: rgba(0,0,0,0.8);
        z-index: 9999;
        transition: .9s ease all
    }
    
    .popup-overlay.popup-opened,.popup-section.popup-opened {
        display: block
    }
    
    .popup-section {
        display: none;
        width: 100%;
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 99999;
        max-width: 830px;
        transition: .9s ease all
    }
    
    .popup-container {
        width: 100%;
        max-width: 830px;
        background: #2a499c;
        padding-left: 45px;
        border-radius: 18px 18px 25px 18px;
        box-sizing: border-box;
        overflow: hidden;
        height: 450px;
        display: flex
    }
    
    .popup-section .content h2 {
        font-size: 26px;
        color: #fff;
        margin-bottom: 15px
    }
    
    .popup-section p {
        font-size: 18px;
        color: #fff
    }
    
    .popup-section .d-flex {
        display: flex;
        justify-content: center;
        align-items: center
    }
    
    .popup-img {
        position: absolute;
        right: 0;
        bottom: 0;
        overflow: hidden
    }
    
    .popup-section img {
        vertical-align: bottom;
        transform: translate(0,0)
    }
    
    .popup-section .content {
        margin-top: -30px
    }
    
    .popup-section .content>p {
        margin-bottom: 25px
    }
    
    .popup-section .contact-info>p {
        margin-bottom: 15px
    }
    
    .popup-section .contact-info a {
        color: #fff
    }
    
    .popup-section a.btn-s {
        background-color: #ff3330;
        color: #fff;
        padding: 12px 30px;
        font-family: var(--zf-secondary-medium);
        display: flex;
        align-items: center;
        border-radius: 5px
    }
    
    .popup-section a.btn-s.border-btn {
        background-color: transparent;
        border: 2px solid #fff
    }
    
    .popup-section .btn-group {
        display: flex;
        justify-content: flex-start;
        gap: 10px;
        margin-bottom: 30px
    }
    
    .popup-section .contact-info li {
        font-family: var(--zf-secondary-semibold);
        color: #fff
    }
    
    .popup-section button.close-btn-p {
        /* line-height: 12px;
        padding: 6px; */
        position: absolute;
        background-color: #fff;
        border-radius: 19px;
        right: 10px;
        top: 10px;
        z-index: 1;
        cursor: pointer;
        border: 0;
        width: 24px;
        height: 24px;
    }
    
    .close-btn-p:before {
        display: flex;
        content: "\00d7";
        font-size: 24px;
        align-content: center;
        position: relative;
        justify-content: center;
        line-height: 0;
    }
    .zb-safari .close-btn-p:before{
          margin-top: -1px; 
    }
    .zb-firefox .close-btn-p:before{
          margin-top: -3px; 
    }
    .sign_agree {
        margin-bottom: 20px
    }
    
    @media(max-width: 850px) {
        .popup-section a.btn-s {
            padding:12px 25px;
            font-size: 15px
        }
    
        .popup-section .content h2 {
            font-size: 23px
        }
    
        .popup-section p {
            font-size: 16px
        }
    
        .popup-section .content>p {
            max-width: 250px
        }
    
        .popup-container {
            padding-left: 20px
        }
    
        .popup-section {
            max-width: 760px
        }
    }
    
    @media(max-width: 768px) {
        .popup-section,.popup-overlay {
            display:none !important
        }
    }
    
    p.mirror-link {
        font-size: 14px;
        text-align: right;
        margin-top: 16px;
        display: none
    }
    
    p.mirror-link a {
        display: block;
        text-decoration: underline;
        color: #0085fc
    }
    
    #zpromotion_JP .zpromotion_JP p a {
        color: var(--zwc-link-clr)
    }
   
    .i18n-ja .content-wrap.text-adj{
           text-align: right;
     }
.i18n-ja .content-wrap.text-adj p{
  font-size:16px;
}
@media(max-width:767px){
  font-size:14px;
}
    /* old Version */
    body.i18n-ja .pricing-switcher li.active {
        color: #fff;
        background-color: #3CA81C;
        border-radius: 4px;
        }
         
        /* body.other-lang .pricing-switcher li span.yl-s {
        color: #3ca81c;
        } */
        /* body.other-lang .pricing-switcher li.active span.yl-s {
            color: #ffe200!important;
        }  */
        /* body.other-lang .pricing-switcher li.active span.yl-s {
            color: #ffe200!important;
        }
        body.other-lang .pricing-switcher li.active span.yl-s {
        color: #FFE200;
        } */
        /* old Version */
        /* old fix */
        body.i18n-ja .tooltip:after,
        body.i18n-ja .tooltip:before {
        opacity: 0;
        pointer-events: none;
        bottom: 100%;
        left: 50%;
        position: absolute;
        z-index: 10;
        transform: translate(-50%, 10px);
        transform-origin: top;
        transition: all 0.18s ease-out 0.18s;
        }
         
        body.i18n-ja .tooltip:after {
        padding: 8px;
        /* background-color: #3ca81c; */
        border-radius: 4px;
        box-shadow: 10px 0 50px rgba(0, 0, 0, 0.2);
        content: attr(data-tooltip);
        white-space: nowrap;
        margin-bottom: 11px;
        /* border-bottom: 2px solid #fee201; */
        color: #fff;
        font-size: 12px;
        font-family: var(--zf-primary-semibold);
        text-align: center;
        position: absolute;
        }
         
        body.i18n-ja .tooltip:before {
        width: 0;
        height: 0;
        content: "";
        margin-bottom: 6px;
        display: none;
        }
        body.i18n-ja .tooltip:hover:before,
        body.i18n-ja .tooltip:focus:before,
        body.i18n-ja .tooltip:hover:after,
        body.i18n-ja .tooltip:focus:after {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, 0);
        }
        body.i18n-ja [data-tooltip-pos="pos"]:before,
        body.i18n-ja [data-tooltip-pos="pos"]:after {
        bottom: auto;
        left: 93%;
        top: 50%;
        transform: translate(-10px, -50%);
        }
        body.i18n-ja [data-tooltip-pos="pos"]:after{
                background-color: #3ca81c;
                border-bottom: 2px solid #fee201;
         }
        body.i18n-ja [data-tooltip-pos="pos"]:hover:before,
        body.i18n-ja [data-tooltip-pos="pos"]:hover:after {
        transform: translate(5px, -50%);
        }
         
        body.i18n-ja [data-tooltip-length]:after {
        white-space: normal;
        }
         
        body.i18n-ja [data-tooltip-length="medium"]:after {
        width: 150px;
        }
         
        body.i18n-ja [data-tooltip-length="large"]:after {
        width: 260px;
        }
         
        body.i18n-ja [data-tooltip-length="fit"]:after {
        width: 100%;
        }
        @media(max-width:991px) {
         
        body.i18n-ja [data-tooltip-pos="pos"]:before,
        body.i18n-ja [data-tooltip-pos="pos"]:after {
        bottom: auto;
        left: 50%;
        top: 100%;
        transform: translate(-50%, -10px);
        }
         
        body.i18n-ja [data-tooltip-pos="pos"]:after {
        margin-top: 11px;
        }
         
        body.i18n-ja [data-tooltip-pos="pos"]:hover:before,
        body.i18n-ja [data-tooltip-pos="pos"]:hover:after {
        transform: translate(-50%, 0);
        }
        }
        @media(max-width:767px){
        body.i18n-ja [data-tooltip-pos="pos"]:before, body.i18n-ja [data-tooltip-pos="pos"]:after{
        transform: translate(-30%, -10px);
        }
        body.i18n-ja [data-tooltip-pos="pos"]:hover:before,
        body.i18n-ja [data-tooltip-pos="pos"]:hover:after {
        transform: translate(-30%, 0);
        }
        }
        @media(max-width:640px){
        body.i18n-ja [data-tooltip-pos="pos"]:before, body.i18n-ja [data-tooltip-pos="pos"]:after{
        transform: translate(-50%, -10px);
        }
        body.i18n-ja [data-tooltip-pos="pos"]:hover:before, body.i18n-ja [data-tooltip-pos="pos"]:hover:after {
        transform: translate(-50%, 0);
        }
        body.i18n-ja [data-tooltip-length="medium"]:after {
        width: 120px;
        }
        body.i18n-ja .pricing-section .content .inner span{
        text-align: center;
        display: block;
        }
        }
        .i18n-ja .try-now-btn, .i18n-ar .text-center, .i18n-ar .btm-cta *, .i18n-ar span.billed, .i18n-ar .pricing-wrap .flex-wrap .content span{
        text-align: center;
        left: inherit;
        }
        .i18n-ar .arrow i:before {
        transform: rotate(46deg) translateY(-70%);
        }
         .i18n-ar .arrow i:before {
        left: -4px;
        right: unset;
        border-width: 0 0 2px 2px;
        }
        /* old fix */