html {
    scroll-behavior: smooth;
}

a.act-btn {
    cursor: pointer;
}

.center-sec {
    display: table;
    width: 100%;
    table-layout: fixed;
}

li.zgh-userAccess {
    display: none;
}

.innersec {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
    padding: 0 40px;
}

h1>span {
    display: block;
}

.act-btn {
    background: var(--primary-btn-color);
    color: #FFF;
    border: unset;
    width: auto;
    font-size: 18px;
    padding: 15px 26px;
    font-family: var(--primaryfont-semibold);
    display: block;
    line-height: 1.2;
    text-transform: uppercase;
    border-radius: 4px;
    color: #fff;
    max-width: max-content;
}

a.act-btn {
    text-transform: none;
}

.head-sec {
    padding: 150px 0 210px;
    position: relative;
}

.head-sec .content-wrap {
    position: unset;
}

.head-sec .center-sec>.innersec:last-child {
    position: absolute;
    padding: 0;
    right: 0;
    bottom: -42px;
    max-width: 800px;
}

.feat-sec1,
.feat-sec3 {
    background: #232323;
    color: #fff;
    padding: 140px 0 140px;
    margin: 0 25px;
}

.feat-sec3 {
    padding: 90px 0 140px;
}

.row .feat-sec3 {
    padding: 90px 0 140px;
}

h1,
h2 {
    font-family: var(--zf-primary-bold);
}

.feat-sec1 .innersec h2 {
    max-width: 510px;
    margin-bottom: 60px;
    font-size: 46px;
    line-height: 1.2;
}

.inner-side-sub>h3:nth-child(3) {
    margin-top: 60px;
}

.inner-side-sub {
    max-width: 450px;
}

.feat-sec2 {
    padding: 90px 0;
}

span.head-txt {
    max-width: 800px;
    margin: 50px auto 120px;
    display: block;
    font-size: 21px;
    font-family: var(--zf-primary-semibold);
}

.feat-sec2 .innersec h2 {
    max-width: 550px;
    font-size: 46px;
    line-height: 1.2;
}

.feat-sec2 .sub-box {
    margin-top: 60px;
    display: flex;
    width: 100%;
}

.box-inner {
    width: 50%;
    padding: 35px 25px;
    background: #779a61;
    display: inline-block;
    vertical-align: top;
    color: #fff;
    transition: all 1s ease;
    flex-direction: column;
}

.box-inner:first-child {
    background: #5375b7;
    margin-right: 20px;
}

.box-inner>a {
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 15px;
    cursor: pointer;
    transition: all 1s ease;
    border-bottom: 1px solid;
}

.box-inner>p>span.imp-txt {
    font-weight: bold;
}

.slider-sec h4 {
    text-align: center;
    font-size: 36px;
    font-family: var(--zf-primary-bold);
}

.slide-head {
    text-align: center;
    position: relative;
}

.slide-head>span {
    font-size: 23px;
    padding: 25px;
    display: inline-block;
    position: relative;
    cursor: pointer;
}

a.l-more {
    display: block;
    font-family: var(--zf-primary-semibold), Arial, Helvetica, sans-serif;
    padding: 6px 30px;
    -webkit-transition: all .5s ease 0s;
    transition: all .5s ease 0s;
    margin: 20px auto 0;
    color: #333;
    border: 1px solid transparent;
    cursor: pointer;
    box-sizing: border-box;
    z-index: 1;
    background: var(--primary-btn-color);
    color: #fff;
    max-width: 180px;
}

.slide-head:after {
    content: '';
    border-bottom: 1px solid #f1f1f1;
    display: block;
    text-align: center;
    margin: 0 auto;
    position: absolute;
    top: 70px;
    left: 31%;
    width: 38%;
}

.slide-head>span.active {
    font-weight: bold;
}

.slide-head>span:after {
    content: '';
    display: block;
    width: 0;
    text-align: center;
    margin: 0 auto;
    position: absolute;
    top: 68px;
    left: 4px;
    z-index: 1;
}

.slide-head>span.active:first-child:after {
    border-color: #5375b7;
}

.slide-head>span.active:nth-child(2):after {
    border-color: #779a61;
}

.slide-head>span.active:nth-child(3):after {
    border-color: #dda54e;
}

.slide-head>span.active:last-child:after {
    border-color: #0e54ca;
    width: 100%;
}

.slide-head>span.active:after {
    width: 100px;
    transition: width .3s ease-in;
    border-bottom: 3px solid #dda54e;
}

.slide-head>span.acive:last-child:after {
    left: 4px;
    width: 145px;
}

.slide-cont {
    margin-top: 30px;
}

.slide-cont .cont-txt {
    display: none;
}

.slide-cont .cont-txt p {
    max-width: 640px;
    margin: 0 auto 50px;
    font-size: 21px;
    font-family: var(--zf-primary-semibold);
    text-align: center;
}

.slide-cont .cont-txt.active {
    display: block;
}

.feat-sec3 .head-txt:first-child {
    margin-bottom: 40px;
}

section.slider-sec {
    padding: 120px 0 90px;
    background: #f4f4f4;
}

.feat-sec3 h2 {
    max-width: 270px;
    margin-bottom: 30px;
    font-size: 46px;
    line-height: 1.2;
}

section.feat-sec4 {
    padding: 120px 0;
    text-align: center;
}

.feat-sec4 span.imp-txt {
    font-weight: bold;
    margin-bottom: 15px;
    display: block;
    font-size: 21px;
}

section.feat-sec4>div>p {
    max-width: 710px;
    margin: 0 auto;
}

section.feat-sec5 {
    padding: 0 0 50px;
}

.feat-sec5 h2 {
    max-width: 460px;
    font-size: 42px;
}

section.feat-sec6 {
    padding: 60px 0 120px;
}

.box-bg-sec {
    max-width: 600px;
    margin: 0 auto;
    padding: 50px;
    background: #fafafa;
}

.box-bg-sec h3 {
    margin: 0 0 30px;
    font-size: 38px;
    font-family: var(--zf-primary-extrabold);
    letter-spacing: 0px;
}

.box-bg-sec>a {
    margin: 0 auto;
}

p.cta-sec {
    text-align: center;
    margin-top: 50px;
}

video#zoho-zia {
    max-width: 720px;
    margin-top: 90px;
}

.app-pack {
    padding: 60px 0 180px;
}

.app-pack .innersec>a {
    color: #000;
}

.logo-box {
    vertical-align: top;
    display: inline-block;
}



.logo-box>div {
    background: #f9f9f9;
    min-width: 170px;
    min-height: 200px;
    margin: 0 6px;
    position: relative;
    transition: all 0.5s ease;
    transform: translateY(0);
}

.logo-box>p {
    text-align: center;
    margin-top: 15px;
}

.line {
    display: block;
    min-width: 170px;
    background: #5375b7;
    position: absolute;
    bottom: 0;
    max-height: 10px;
}

.sheet .line,
.workplace .line {
    background: #779a61;
}

.show .line,
.one .line {
    background: #cc5151;
}

.notebook .line {
    background: #dda54e;
}

.workdrive .office-logo {
    background-position: -562px -10px;
}

span.office-logo {
    background: url(/sites/zweb/images/zoho_general_pages/zgh-icon-sprite.png);
    background-size: 960px auto;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

span.office-logo.zwc-pdf-icon {
    width: 45px;
    height: 50px;
    background: url(/sites/zweb/images/commonroot/product-icons.svg) no-repeat;
    background-size: 1030px auto;
    background-position: -211px -310px;
    transform: translate(-50%, -50%) scale(1.1);
}

.zwc-pdf .line {
    background: #0e54ca;
}

.workplace .office-logo {
    background-position: -519px -324px;
    width: 50px;
    height: 57px;
}

.one .office-logo {
    background-position: -263px -387px;
    width: 51px;
    height: 59px;
}

.future-anim-logos.icon1,
.future-anim-logos.icon2,
.future-anim-logos.icon3 {
    background: url(/sites/zweb/images/commonroot/zglobal-icon-sprite-2x.png);
    background-size: 960px auto;
    background-color: #fff;
}

span.future-anim-logos.icon1 {
    background-position: 4px 6px;
    top: 10px;
    left: 18%;
    background-size: 860px auto;
    transition-delay: 0.3s;
}

span.future-anim-logos.icon2 {
    top: 3px;
    right: 26%;
    background-position: -585px -113px;
    background-size: 850px auto;
}

span.future-anim-logos.icon4 {
    background-position: unset;
    top: 42%;
    right: 20%;
    background-image: none;
}

span.future-anim-logos.icon6 {
    background-position: unset;
    bottom: 10%;
    background-size: 850px auto;
    right: 10%;
    background-image: none;
}

span.future-anim-logos.icon3 {
    background-position: -520px 4px;
    top: 38%;
    left: 18%;
    transition-delay: .25s;
    background-size: 840px auto;
}

span.future-anim-logos.icon5 {
    background-position: unset;
    bottom: 20%;
    left: 16%;
    background-size: 850px auto;
    background-image: none;
}

span.future-anim-logos.icon6:before,
span.future-anim-logos.icon5:before,
span.future-anim-logos.icon4:before {
    content: '';
    top: 10px;
    right: 5px;
    transition-delay: 0.2s;
    background-size: 710px auto;
    position: absolute;
    background-image: url(/sites/zweb/images/commonroot/zglobal-icon-sprite-2x.png);
    width: 52px;
    height: 45px;
}

span.future-anim-logos.icon6:before {
    background-position: -390px -99px;
}

span.future-anim-logos.icon4:before {
    background-position: -342px -97px;
}

span.future-anim-logos.icon5:before {
    background-position: -197px -99px;
}



.writer .office-logo,
.sheet .office-logo,
.show .office-logo,
.notebook .office-logo,
.workdrive .office-logo {
    background: url(/sites/zweb/images/commonroot/zglobal-icon-sprite-2x.png);
    background-size: 960px auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.writer span.office-logo {
    background-position: -866px -72px;
    width: 62px;
    height: 54px;
}

.sheet span.office-logo {
    background-position: -3px -136px;
    width: 60px;
    height: 58px;
}

.show span.office-logo {
    background-position: -69px -141px;
    width: 60px;
    height: 48px;
}

.notebook span.office-logo {
    background-position: -200px -137px;
    width: 64px;
    height: 57px;
}

.workdrive span.office-logo {
    background-position: -3px -206px;
    width: 60px;
    height: 58px;
}

.center-sec.two {
    margin-top: 90px;
}

h1 {
    font-size: 58px;
    line-height: 1.0;
}

.head-sec .center-sec>.innersec:first-child>p {
    font-size: 18px;
}

.head-sec .center-sec>.innersec:first-child {
    padding-left: 0;
}

.inner-side-sub>h3 {
    font-family: var(--zf-primary-bold);
}

.feat-sec1 .center-sec>.innersec:last-child {
    position: absolute;
    padding: 0;
    right: 0;
    top: 27%;
    max-width: 800px;
}

.box-inner>a:hover {
    color: #000;
}

.feat-sec3 .center-sec>.innersec:last-child {
    position: absolute;
    padding: 0;
    right: 0;
    top: 58%;
    max-width: 800px;
}

section.feat-sec4 h2 {
    font-size: 46px;
}

section.feat-sec5 p {
    font-size: 21px;
    font-family: var(--zf-primary-semibold);
}

section.app-pack h2 {
    font-size: 36px;
    max-width: 350px;
}

.logo-box>div:hover {
    box-shadow: rgba(45, 45, 45, 0.05) 0px 2px 2px, rgba(49, 49, 49, 0.05) 0px 4px 4px, rgba(42, 42, 42, 0.05) 0px 8px 8px, rgba(32, 32, 32, 0.05) 0px 16px 16px, rgba(49, 49, 49, 0.05) 0px 32px 32px, rgba(35, 35, 35, 0.05) 0px 64px 64px;
    transform: translateY(-5px);
}

.app-pack .center-sec>.innersec:last-child {
    position: absolute;
    padding: 0;
    right: 0;
    max-width: 800px;
    width: 60%;
    text-align: center;
}

.app-pack .center-sec:first-child {
    padding-bottom: 100px;
}

.app-pack .center-sec>.innersec:first-child {
    width: 40%;
    vertical-align: top;
}

span.desc {
    max-width: 170px;
    font-size: 13px;
    font-family: var(--zf-primary-regular);
    display: block;
    text-align: center;
    word-break: break-word;
}

.center-sec.two .logo-box>div {
    background: #222;
}

.workdrive .line {
    background: #b9794a;
}

.workplace .line {
    background: #5960a3;
}

.one .line {
    background: #adb45c;
}

.box-inner:hover {
    box-shadow: rgba(45, 45, 45, 0.05) 0px 2px 2px, rgba(49, 49, 49, 0.05) 0px 4px 4px, rgba(42, 42, 42, 0.05) 0px 8px 8px, rgba(32, 32, 32, 0.05) 0px 16px 16px, rgba(49, 49, 49, 0.05) 0px 32px 32px, rgba(35, 35, 35, 0.05) 0px 64px 64px;
    transform: translateY(-5px);
}

span.help-txt {
    display: block;
    text-align: center;
    margin: 150px 0 60px;
}

.slide-img {
    text-align: center;
    padding: 0 0 20px 0;
    display: flex;
    flex-direction: column;
    max-width: max-content;
    margin: auto;
    gap: 20px;
}
.help-txt a{
    border-bottom: 1px solid;
    color: var(--zwc-link-clr);
    font-family: var(--zf-primary-semibold);
}
.slide-img a {
    font-size: 20px;
    border-bottom: 1px solid;
    max-width: max-content;
    margin: auto;
    border-bottom: 1px solid;
    color: var(--zwc-link-clr);
    font-family: var(--zf-primary-semibold);
}

@media only screen and (max-width: 1400px) {
    .box-inner>p {
        font-size: 15px;
    }

    .box-inner {
        padding: 25px 20px;
    }

    .center-sec.two {
        margin-top: 280px;
    }

    .feat-sec2 .center-sec>.innersec:first-child {
        padding: 0;
    }

    .slide-head:after {
        width: 40%;
        left: 30%;
    }
}

@media only screen and (max-width: 1279px) {
    .head-sec {
        padding: 120px 0 150px;
    }

    h1 {
        font-size: 46px;
    }

    .feat-sec1 .innersec h2,
    .feat-sec2 .innersec h2,
    .feat-sec3 h2,
    section.feat-sec4 h2,
    .feat-sec5 h2 {
        font-size: 40px;
    }

    .slider-sec h4 {
        font-size: 32px;
    }

    .slide-cont .cont-txt p,
    span.head-txt {
        font-size: 19px;
    }

    .slide-head:after {
        width: 41%;
        left: 30%;
    }
}

@media only screen and (max-width: 1169px) {
    .head-sec .center-sec>.innersec:first-child {
        padding-left: unset;
        padding: 0;
    }

    .head-sec .center-sec>.innersec:last-child {
        position: unset;
        text-align: center;
        margin: 0 auto;
    }

    .head-sec .center-sec>.innersec {
        width: 100%;
        display: block;
        text-align: center;
    }

    h1 {
        font-size: 38px;
    }

    h1>span {
        display: inline-block;
        padding-left: 10px;
    }

    .box-inner:first-child {
        margin-right: 10px;
    }

    .feat-sec1 .innersec h2,
    .feat-sec2 .innersec h2,
    .feat-sec3 h2,
    section.feat-sec4 h2,
    .feat-sec5 h2,
    section.app-pack h2 {
        font-size: 34px;
    }

    .slider-sec h4 {
        font-size: 28px;
    }

    .box-bg-sec h3 {
        font-size: 30px;
    }

    .head-sec,
    .feat-sec2,
    section.feat-sec4 {
        padding: 90px 0;
    }

    .feat-sec1,
    .feat-sec3 {
        padding: 90px 0;
        margin: 0 auto;
    }

    .innersec {
        width: 100%;
        padding: 0;
        display: block;
        text-align: center;
    }

    .feat-sec1 .center-sec>.innersec:last-child,
    .feat-sec3 .center-sec>.innersec:last-child,
    .app-pack .center-sec>.innersec:first-child {
        position: unset;
        text-align: center;
        margin: 0 auto;
        max-width: 600px;
    }

    .feat-sec1 .innersec h2,
    .feat-sec2 .innersec h2,
    .feat-sec3 h2,
    .feat-sec5 h2 {
        max-width: 650px;
        margin: 0 auto 20px;
    }

    .inner-side-sub,
    .head-sec .center-sec>.innersec:first-child {
        max-width: 750px;
        margin: 0 auto;
    }

    span.head-txt {
        margin: 0 auto 90px;
    }

    .box-inner {
        text-align: left;
        margin: 0 10px;
    }

    .feat-sec2 .img-part,
    .feat-sec3 .img-part {
        max-width: 600px;
        margin: 50px auto 0;
    }

    section.feat-sec5 p {
        margin: 0 auto;
        max-width: 600px;
        font-size: 17px;
    }

    section.feat-sec6 {
        padding: 0 0 60px;
    }

    .app-pack .center-sec:first-child {
        padding-bottom: 50px;
    }

    section.app-pack h2 {
        margin: 0 auto 24px;
        line-height: normal;
    }

    .app-pack .center-sec>.innersec:last-child {
        position: unset;
        text-align: center;
        margin: 0 auto;
        max-width: 370px;
    }

    .center-sec.two {
        margin: 0 auto;
    }

    .slide-head:after {
        width: 100%;
        left: 50%;
        max-width: 485px;
        transform: translate(-50%, 0);
    }

    span.help-txt {
        margin-top: 0;
    }

    .center-sec.two .logo-box .desc {
        margin: 0 auto 50px;
    }

    .app-pack {
        padding: 60px 0
    }

    .feat-sec2 svg.first {
        top: 0;
    }

    .feat-sec2 .future-work-anim {
        transform: translateX(0%) scale(0.65);
    }

    .feat-sec2 {
        padding-bottom: 0;
    }
    .app-pack .center-sec>.innersec:first-child {
    width: 80%;
}
}

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

    .head-sec,
    .feat-sec2,
    section.feat-sec4 {
        padding: 60px 0;
    }

    .head-sec .center-sec>.innersec:last-child {
        max-width: 600px;
    }

    .feat-sec1 .center-sec>.innersec:last-child,
    .feat-sec3 .center-sec>.innersec:last-child {
        max-width: 500px
    }

    span.head-txt {
        max-width: 650px;
        margin: 0 auto 40px;
    }

    .box-inner {
        margin-bottom: 20px;
    }

    .slide-cont .cont-txt p {
        text-align: center;
        line-height: 1.4;
    }

    .slide-cont {
        margin-top: 20px;
    }

    section.slider-sec {
        padding: 60px 0;
    }

    video#zoho-zia {
        margin-top: 30px;
        height: auto;
        width: 600px;
        max-width: 100%;
    }

    .app-pack .center-sec>.innersec:first-child,
    section.app-pack h2 {
        max-width: unset;
        width: 100%;
    }

    h1 {
        font-size: 32px;
    }

    .feat-sec1 .innersec h2,
    .feat-sec2 .innersec h2,
    .feat-sec3 h2,
    section.feat-sec4 h2,
    .feat-sec5 h2,
    section.app-pack h2 {
        font-size: 28px;
    }

    .slider-sec h4 {
        font-size: 27px;
    }

    .box-bg-sec h3 {
        font-size: 27px;
    }

    p {
        line-height: 1.4;
    }

    .head-sec .center-sec>.innersec:first-child>p {
        font-size: 17px;
        max-width: 650px;
        margin: 0 auto 20px;
    }

    .inner-side-sub,
    .head-sec .center-sec>.innersec:first-child {
        max-width: 650px;
    }

    .feat-sec2 {
        padding-bottom: 0;
    }

    section.slider-sec {
        padding-top: 60px;
    }

}

@media only screen and (max-width: 767px) {
    .feat-sec2 {
        padding: 60px 0;
    }

    section.slider-sec {
        padding-top: 60px;
    }

    .slide-head>span {
        font-weight: bold;
        font-size: 21px;
    }

    .slide-cont .cont-txt {
        display: block;
    }

    .slide-head:after {
        content: unset;
    }

    .slide-head>span:after {
        border-bottom: 3px solid #dda54e;
        content: unset;
        display: block;
        width: 100px;
        text-align: center;
        margin: 0 auto;
        position: absolute;
        top: 68px;
        left: 4px;
    }

    .app-pack {
        padding: 0 0 60px;
    }

    section.slider-sec {
        padding: 60px 0 60px;
    }

    .slide-cont .cont-txt p {
        margin-bottom: 20px;
        font-size: 17px;
        font-family: var(--zf-primary-regular);
    }

    .box-bg-sec {
        padding: 50px 20px;
        text-align: center;
    }

    .feat-sec6 .content-wrap {
        width: 100%;
    }

    .feat-sec3 .head-txt {
        text-align: center;
    }

    a.act-btn {
        font-size: 15px;
    }

    span.help-txt {
        margin-top: 0;
    }

    .slide-cont {
        margin-top: 0;
    }

    .box-inner {
        width: 80%;
    }

    .feat-sec2 .sub-box {
        margin-top: 30px;
    }

    .row .feat-sec3 {
        padding: 90px 0 80px;
    }

    .app-pack .center-sec:first-child>.innersec:last-child a {
        width: 100%;
        display: inline-block;
        overflow: hidden;
        max-width: 200px;
        text-align: center;
    }

    .app-pack .center-sec:first-child>.innersec:last-child {
        position: unset;
        text-align: center;
        margin: 0 auto;
        max-width: 100%;
        width: 100%;
    }

    .feat-sec2 .sub-box {
        display: block;
    }

    .slide-cont>span {
        padding: 45px 10px 20px 10px;
        display: block;
        font-size: 21px;
        font-weight: bold;
        margin: 0 auto;
        text-align: center;
    }

    .slide-cont {
        text-align: center;
    }

    .slide-cont>span:after {
        content: unset;
        border-bottom: 3px solid #dda54e;
        display: block;
        width: 70px;
        text-align: center;
        margin: 0 auto;
    }

    .slide-head>span.active:after {
        top: 58px;
        width: 70px;
        left: 50%;
        transform: translate(-50%, 0);
    }

    .slide-cont>span:nth-child(6):after {
        width: 100px;
    }
}

@media only screen and (min-width: 1374px) {
    .row .center-sec.two {
        margin-top: 90px
    }
}

/* Animation */
.future-work-anim {
    transform: translateX(-4%) scale(0.8);
    position: relative;
    width: 690px;
    height: 620px;
}

svg.first {
    position: absolute;
    width: 690px;
    height: 620px;
}

svg.second {
    transform: translate(19%, 7%);
    width: 500px;
    height: 535px;
    position: absolute;
}

svg.third {
    transform: translate(40%, 37%);
    width: 375px;
    height: 350px;
    position: absolute;
}

.path {
    animation: dash 10s linear infinite;
}

@-webkit-keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

.future-anim-logos {
    display: block;
    width: 65px;
    height: 65px;
    position: absolute;
    background-color: white;
    background-image: url(/sites/zweb/images/commonroot/zoho-logo-web.svg);
    background-repeat: no-repeat;
    border-radius: 50%;
    box-shadow: 0px 5px 25px -8px #7e7e7e;
    transition: all 0.5s ease;
    transform: scale(0);
}

span.future-anim-logos.zoho {
    background-color: transparent;
    border-radius: unset;
    box-shadow: unset;
    width: 130px;
    top: 49%;
    height: 60px;
    left: 48%;
    transform: translate(-50%, -50%);

}

.animated .future-anim-logos {
    transform: scale(1);
}

span.future-anim-logos.icon4 {
    background-position: -186px 10px;
    top: 42%;
    right: 20%;
    background-size: auto 50px;
    transition-delay: 0.2s;
}

span.future-anim-logos.icon5 {
    background-position: -286px 12px;
    bottom: 20%;
    left: 16%;
    background-size: auto 50px;
    transition-delay: 0.35s;
}

.other-lang .feat-sec2 .center-sec {
    overflow: hidden;
}

span.future-anim-logos.icon6 {
    background-position: -287px 4px;
    bottom: 10%;
    right: 10%;
    background-size: auto 60px;
    transition-delay: 0.4s;
}

.feat-sec2 .img-part {
    display: none;
}

/* hiding the signup button since the product has no signup  */
.zgh-accounts .zgh-signup {
    display: none !important;
    /* handled with important because inline block comes from js */
}

.zgh-accounts .zgh-login {
    display: none !important;
}

.header .zgh-localBox {
    right: -5px;
}


/* hiding the signup button since the product has no signup code ends  */


@media only screen and (max-width:1400px) {
    .future-work-anim {
        transform: scale(0.65);
    }

    .feat-sec2 .center-sec>.innersec:nth-child(2) {
        padding: 0;
    }
}

@media only screen and (max-width:1260px) {
    .future-work-anim {
        transform: translateX(-4%) scale(0.65);
    }
}

@media only screen and (max-width:1170px) {
    .future-work-anim {
        margin: 0 auto;
    }

    svg.first,
    svg.second,
    svg.third {
        left: 0;
        top: 50px;
    }

    span.future-anim-logos.zoho {
        top: 58%;
    }

    span.future-anim-logos.icon1 {
        top: 62px;
    }

    span.future-anim-logos.icon2 {
        top: 50px;
    }

    span.future-anim-logos.icon3 {
        top: 37%;
        left: 23%;
    }

    span.future-anim-logos.icon4 {
        top: 38%;
        right: 23%;
    }

    span.future-anim-logos.icon5 {
        bottom: 12%;
        left: 16%;
    }

    span.future-anim-logos.icon6 {
        bottom: 1%;
        right: 10%;
    }
}

@media screen and (min-width: 768px) {
    .header {
        display: block !important;
    }
}

@media only screen and (max-width:991px) {
    .slide-img a {
        font-size: 15px;
        margin: 0 auto 20px;
        text-decoration: underline;
        border-bottom: 0px solid;
    }
}

@media only screen and (max-width:767px) {
    .future-work-anim {
        display: none;
    }

    .feat-sec2 .img-part {
        display: block;
    }

    .z-mobile-menu-v2 .z-bottom-cta-menu a,
    .umain .z-mobile-menu-v2 .z-bottom-cta-menu a {
        display: none;
    }

    .z-bottom-cta-menu {
        background: none;
        box-shadow: none;
    }

    .zcommon-link-container .zlogin-menu {
        display: none!important;
    }
}


.other-lang a.l-more {
    max-width: 240px;
}

.i18n-ar svg.second {
    transform: translate(-19%, 7%);
}

.i18n-ar svg.third {
    transform: translate(-40%, 37%);
}

.i18n-ar a.l-more {
    text-align: center;
}

.other-lang .feat-sec3 h2 {
    max-width: 450px;
}

.i18n-ar .slide-head>span:after {
    top: 68px;
    right: 4px;
    left: auto;
}

.i18n-ar .box-inner:first-child {
    margin-left: 20px;
    margin-right: 0;
}

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

    .i18n-ar .innersec h1,
    .i18n-ar .innersec h1 span,
    .i18n-ar .innersec p {
        text-align: center;
    }

    .i18n-ar .innersec h2,
    .i18n-ar .innersec .inner-side-sub h3,
    .i18n-ar .innersec .inner-side-sub p {
        text-align: center;
    }

    .i18n-ar .feat-sec2 .sub-box {
        margin-top: 60px;
        text-align: center;
    }

    .i18n-ar .innersec .box-inner p {
        text-align: right;
    }

    .i18n-ar svg.first,
    .i18n-ar svg.second,
    .i18n-ar svg.third {
        right: 0;
        left: unset;
        top: 50px;
    }

    .i18n-ar .innersec {
        text-align: center;
    }
}

.i18n-ar .header .zgh-localBox {
    left: 0;
    right: unset;
}

.i18n-ar .head-sec .center-sec>.innersec:last-child {
    left: 0;
    right: unset;
}

.i18n-ar .feat-sec1 .center-sec>.innersec:last-child {
    left: 0;
    right: unset;
}



.i18n-ar .zw-template-inner .slide-head {
    text-align: center;
}

.i18n-ar .feat-sec3 .center-sec>.innersec:last-child {
    left: 0;
    right: unset;
}

.i18n-ar section.feat-sec4 .content-wrap.animated h2,
.i18n-ar section.feat-sec4 .content-wrap.animated p,
.i18n-ar section.feat-sec4 .content-wrap.animated .imp-txt {
    text-align: center;
}

.i18n-ar .zw-template-inner .center-img-part {
    text-align: center;
}

.i18n-ar .app-pack .center-sec>.innersec:last-child {
    left: 0;
    right: unset;
}

.i18n-ar .future-work-anim {
    transform: translateX(8%) scale(0.8);
}

@media only screen and (max-width: 1260px) {
    .i18n-ar .future-work-anim {
        transform: translateX(5%) scale(0.65);
    }
}

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

    .i18n-ar .box-inner:first-child {
        margin-left: 0;
        margin-right: 0;
    }

    .i18n-ar .box-bg-sec h3,
    .i18n-ar .box-bg-sec p {
        text-align: center;
    }

    span.help-txt {
        padding: 0 20px;
    }
}

/*Arabic ends*/


/* New CSS */
.zcol-wrap,
.dflx,
.zwb-midea-obj,
.zwb-btn-set {
    display: flex;
    flex-wrap: wrap
}

.txt-cntr {
    text-align: center;
}

.flx-algn-cntr {
    align-items: center
}

.flx-algn-start {
    align-items: flex-start
}

.flx-algn-stretch {
    align-items: stretch
}

.flx-algn-end {
    align-items: flex-end
}

.flx-jstfy-cntr {
    justify-content: center
}

.flx-jstfy-btween {
    justify-content: space-between
}

.flx-jstfy-even {
    justify-content: space-evenly
}

.flx-jstfy-arnd {
    justify-content: space-around
}

.flx-jstfy-start {
    justify-content: flex-start
}

.flx-jstfy-end {
    justify-content: flex-end
}

.zcol-1 {
    max-width: calc(8.33% - 10px);
    flex-basis: calc(8.33% - 10px)
}

.zcol-2 {
    max-width: calc(16.67% - 10px);
    flex-basis: calc(16.67% - 10px)
}

.zcol-3 {
    max-width: calc(25% - 10px);
    flex-basis: calc(25% - 10px)
}

.zcol-4 {
    max-width: calc(33.33% - 10px);
    flex-basis: calc(33.33% - 10px)
}

.zcol-5 {
    max-width: calc(41.67% - 10px);
    flex-basis: calc(41.67% - 10px)
}

.zcol-6 {
    max-width: calc(50% - 10px);
    flex-basis: calc(50% - 10px)
}

.zcol-7 {
    max-width: calc(58.33% - 10px);
    flex-basis: calc(58.33% - 10px)
}

.zcol-8 {
    max-width: calc(66.67% - 10px);
    flex-basis: calc(66.67% - 10px)
}

.zcol-9 {
    max-width: calc(75% - 10px);
    flex-basis: calc(75% - 10px)
}

.zcol-10 {
    max-width: calc(83.33% - 10px);
    flex-basis: calc(83.33% - 10px)
}

.zcol-11 {
    max-width: calc(91.67% - 10px);
    flex-basis: calc(91.67% - 10px)
}

.zcol-12 {
    max-width: calc(100% - 10px);
    flex-basis: calc(100% - 10px)
}

/* css starts */
.innersec ul{
    margin-top: 30px;
}
.innersec ul li a{
    display: flex;
    gap: 4px;
    background: #fff;
    padding: 14px 14px 14px;
    border-radius: 5px;
    max-width: max-content;
    min-height: 72px;
    height: inherit;
    margin: 4px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in;
    box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.06);
    cursor: pointer;
}
.innersec ul li:hover a {
    transform: translateY(-4px);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.1),
        0 8px 24px rgba(0, 0, 0, 0.08),
        0 16px 48px rgba(0, 0, 0, 0.06);
}
.top-cont {
    max-width: 780px;
    margin: 0 auto;
}

.zwc-highlights ul {
    gap: 16px;
    margin-top: 32px;
}

.zwc-highlights ul li {
    position: relative;
    padding: 8px 12px 8px 34px;
}

.slide-cont .cont-txt .zwc-highlights ul li p {
    margin-bottom: 0;
    font-family: var(--zf-secondary-medium);
    font-size: 16px;
    text-align: unset;
}

.zwc-highlights ul li:before {
    position: absolute;
    content: '';
    /* left: 10px;
    top: 8px;
    width: 20px;
    height: 20px;
    background: url(/sites/zweb/images/writer/tick.svg) no-repeat 0 0 / contain; */
}

.zwc-apps-wrap {
    padding: 120px 0;
}

.top-wrap {
    max-width: 800px;
    margin: 0 auto;
}


.apps-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin: 60px 0;
}

.app-card {
    background: linear-gradient(145deg, #ffffff, #f5f7fa);
    border-radius: 15px;
    padding: 30px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: fadeInUp 0.8s ease 0.4s both;
}

.app-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.app-title {
    
}


.app-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 44px;
    background: url(/sites/zweb/images/productlogos/writer.svg) no-repeat;
    background-size: 100% auto;
    background-position:center;
    text-indent: -9999px;
    margin: auto auto 20px;
    transform: scale(1);
}

.app-title.zwc-sheet-icon {
    background: url(/sites/zweb/images/productlogos/sheet.svg) no-repeat;
}

.app-title.zwc-show-icon {
    background: url(/sites/zweb/images/productlogos/show.svg) no-repeat;
}

.download-buttons {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.download-buttons h3 {
    margin-bottom: 0;
}
.app-dropdown-menu {
    display: none;
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 245px;
    z-index: 1000;
    border-radius: 5px;
    left:5px;
}

.app-dropdown-menu li a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: var(--anchor-clr);
  font-family: var(--zf-primary-semibold);
  font-size: 16px;
  cursor: pointer !important;
  text-align: left;
}

.app-dropdown-menu li a:hover {
  background: #f0f0f0;
  color: var(--anchor-clr);
  font-family: var(--zf-primary-semibold);
}


/* Show menu on hover */
.app-dropdown:hover .app-dropdown-menu {
  display: block;
}
.download-btn {
    /* display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 20px;
            background: white;
            border: 2px solid #e0e4e8;
            border-radius: 10px;
            text-decoration: none;
            color: #2c3e50;
            font-weight: 500;
            transition: all 0.3s ease;
            cursor: pointer; */
}

/* .download-btn:hover {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-color: transparent;
            transform: scale(1.05);
        } */

/* .os-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        } */

.highlights-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.zwc-key-features {
    text-align: center;
}

.highlights-list li {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 16px;
    color: #000;
}

.highlights-list li::before {
    content: "";
    display: inline-block;
    left: 10px;
    top: 8px;
    width: 20px;
    height: 20px;
    background: url(/sites/zweb/images/writer/tick.svg) no-repeat 0 0 / contain;
    text-align: center;
    margin-right: 8px;
    flex-shrink: 0;
}

/* button css */

.zdownload1 {
    background: url(/sites/zweb/images/writer/desktop/app-store.svg) no-repeat;
    background-size: 512px auto;
    height: 50px;
    width: 116px;
    /* border: 1px solid #000; */
    display: inline-block;
}

a.zdownload1.mac-store {
    cursor: pointer !important;
}

.zdownload1.mac-store {
    background-position: -75px -120px;
}

.zdownload.windows {
    background-position: -195px -120px;
    width: 128px;
}

.zdownload.linux {
    width: 112px;
    background-position: -327px -120px;
}

/* faq css starts */
.zwc-faq-wrap {
    background: #f4f4f4;
    color: #1a1a1a;
    padding: 120px 0px;
    position: relative;
}

.zwc-faq-wrap .zwc-faq-cont {}

.zwc-faq-inner {
    max-width: 800px;
    margin: 0 auto;
}

.zwc-faq-inner h2 {
    margin-bottom: 32px;
    text-align: center;
}

.zwc-faq-wrap a {
    color: #000;
    border-bottom: 1px solid
}

.zwc-faq-item {
    margin-bottom: 0;
    position: relative;
    cursor: pointer;
    background: #fff;
    border-radius: 4px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(112, 112, 112, 0.2);
}

.zwc-faq-item .faq-title {
    width: 100%;
    max-width: 100%;
    color: #1a1a1a;
    border: 0;
    font-size: 20px;
    letter-spacing: -0.4px;
    background: transparent;
    text-align: unset;
    font-family: var(--primaryfont-semibold);
    cursor: pointer;
    padding: 20px 64px 20px 24px
}

.zwc-faq-ans {
    display: none;
    color: #1a1a1a;
    background: transparent;
    padding: 0 64px 24px 24px
}

.zwc-faq-item:first-child .zwc-faq-ans {
    display: block;
}

.zwc-faq-ans p {
    margin-bottom: 0
}

.faq-item.active .zwc-faq-ans {
    display: block
}

.zwc-faq-item .faq-title span {
    content: "";
    position: absolute;
    right: 26px;
    top: 20px;
    z-index: 1;
    width: 24px;
    height: 24px;
    background-color: transparent;
    border-radius: 100px;
    cursor: pointer;
}

.zwc-faq-item .faq-title span::before,
.zwc-faq-item .faq-title span::after {
    content: "";
    position: absolute;
    background: #1a1a1a;
    z-index: 2;
    border-radius: 8px;
    cursor: pointer
}

.zwc-faq-item .faq-title span::before {
    left: 50%;
    top: 50%;
    height: 2px;
    width: 14px;
    transform: translate(-50%, -50%)
}

.zwc-faq-item .faq-title span::after {
    left: 50%;
    width: 2px;
    top: 50%;
    height: 14px;
    transform: translate(-50%, -50%)
}

.zwc-faq-item.active .faq-title span:after {
    display: none
}

/* faq css ends */

@media(min-width: 1200px) {
    .top-wrap h2 {
        font-size: 40px;
    }
}

@media(max-width: 1440px) {
    .zw-template-inner .content-wrap {
        width: 1140px;
        max-width: 100%
    }

    :root {
        --h1-size: 56px;
        --h2-size: 48px;
        --h3-size: 28px;
        --h4-size: 22px;
        --h5-size: 20px;
        --h6-size: 18px
    }

    .zwc-apps-wrap {
        padding: 100px 0;
    }
}

@media(max-width: 1199px) {
    .download-buttons {
        justify-content: center;
    }

    .zw-template-inner .content-wrap {
        width: 960px
    }

    :root {
        --h1-size: 52px;
        --h2-size: 48px;
        --h4-size: 20px;
        --h3-size: 24px
    }

    .zcol-md-pad {
        padding: 100px 0
    }
}
@media (max-width: 1169px) {
    .act-btn{
        margin: auto;
    }
    .innersec ul{
        justify-content: center;
    }
    .zwc-apps-wrap{
        padding-bottom: 0;
    }
}

@media(max-width: 991px) {
    .zwc-apps-wrap{
        padding: 60px 0;
    }
    .zwc-apps-wrap {
        padding: 60px 0;
    }

    .d-blck {
        display: block
    }

    .zw-template-inner .content-wrap {
        width: 720px;
        max-width: 100%
    }

    :root {
        --h1-size: 52px;
        --h2-size: 48px;
        --h3-size: 26px;
        --h4-size: 18px;
        --h5-size: 10px;
        --h6-size: 2px
    }
    .innersec p{
        max-width: 650px;
        margin: auto auto 20px;
    }
    
}

@media (max-width: 767px) {
    .zw-template-inner .content-wrap {
        width: 450px;
        max-width: 100%
    }

    :root {
        --h1-size: 36px;
        --h2-size: 28px;
        --h3-size: 24px;
        --h4-size: 18px;
        --h5-size: 10px;
        --h6-size: 2px
    }

    .d-blck {
        display: inline
    }

    .zcol-1,
    .zcol-2,
    .zcol-3,
    .zcol-4,
    .zcol-5,
    .zcol-6,
    .zcol-7,
    .zcol-8,
    .zcol-9,
    .zcol-10,
    .zcol-11,
    .zcol-12,
    .zwc-testi-wrap .zcol-3,
    .zwc-testi-wrap .zcol-9 {
        position: relative;
        flex-basis: calc(100% - 0px);
        max-width: calc(100% - 0px);
        width: 100%
    }

    .subtitle {
        font-size: 1.1rem;
    }

    .apps-section {
        grid-template-columns: 1fr;
    }
    .download-buttons {
        justify-content: center;
        align-items: center;
    }
    .zwc-key-features{
        text-align: left;
    }
    .highlights-list{
        justify-content: flex-start;
    }
}

@media(max-width: 540px) {
    .zw-template-inner .content-wrap {
        width: 90%;
        max-width: 100%
    }
    .download-buttons {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    .help-txt a {
        display: block;
        max-width: max-content;
        margin: auto;
    }
}