* {
    padding: 0;
    margin: 0;
    box-sizing: border-box
}

.i18n-en h1 {
    font-size: 52px;
    line-height: 1
}

.i18n-en h3 {
    font-size: 34px
}

.i18n-en .manage-wrapper h2 {
    font-size: 42px
}

.manage-wrapper h2 {
    font-family: var(--zf-secondary-extrabold);
    line-height: 1.2
}

p {
    margin: 20px 0 0
}

.box-radius {
    border-radius: 5px;
    box-shadow: 10px 20px 40px 0 rgba(0, 0, 0, 0.1)
}

.text-center {
    text-align: center
}

.flexbox {
    display: flex
}

.f-align-center {
    display: flex;
    align-items: center
}

.f-justify-center {
    display: flex;
    justify-content: center
}

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

.f-both-center {
    display: flex;
    justify-content: center;
    align-items: center
}

.og-context-node-2835 #mini-panel-product_menu .menu-icon-help-header .product-title a,
.og-context-node-2835 #mini-panel-product_menu .menu-icon-help-header+.product-nav-links li a,
.og-context-node-2835 #mini-panel-product_menu .product-nav-links .menu>li>a,
.og-context-node-2835 #mini-panel-product_menu .product-nav-links .menu>li,
.og-context-node-77054 #mini-panel-product_menu .menu-icon-help-header .product-title a,
.og-context-node-77054 #mini-panel-product_menu .menu-icon-help-header+.product-nav-links li a,
.og-context-node-77054 #mini-panel-product_menu .product-nav-links .menu>li>a,
.og-context-node-77054 #mini-panel-product_menu .product-nav-links .menu>li {
    color: #fff
}

.wrapper {
    width: 100%;
    overflow: hidden;
    margin: -80px 0 0
}

.section {
    padding: 120px 0
}

.content-wrap {
    max-width: 1170px;
    width: 100%
}

.banner-wrap {
    position: relative;
    padding-top: 80px;
    color: #fff;
    overflow: hidden;
    background: #0a1a2f
}

.banner-wrap .content-wrap {
    position: relative;
    z-index: 2
}

.banner-cont {
    max-width: 940px;
    margin: 80px auto 0;
    text-align: center
}

.banner-cont h1 {
    line-height: 1.2;
    margin: 0
}

.banner-cont h1 span {
    color: #24c478
}

.banner-cont h4 {
    margin: 40px 0 30px;
    font-family: var(--zf-primary-regular), Arial, Helvetica, sans-serif
}

.banner-cont p {
    margin: 0
}

.banner-image {
    position: relative;
    top: -3rem;
    margin: 0rem auto -50px
}

.banner-dots {
    width: 0;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url(//www.zohowebstatic.com/sites/zweb/images/projects/task-management/map-with-dots.png) no-repeat center top -3px;
    background-size: auto 100%;
    transition: 2s width
}

.banner-image.active .banner-dots {
    width: 100%;
    opacity: 1
}

.projects-customers {
    padding: 150px 0;
    background: #f6f5f1
}

.customer-content {
    width: 360px
}

.customer-content p a {
    font-size: 16px;
    text-transform: uppercase;
    color: #f0483e;
    font-family: var(--zf-primary-semibold);
    padding: 10px 0 9px 60px;
    position: relative;
    margin: 30px 0 0;
    display: inline-block
}

.customer-content p a:before {
    content: '';
    width: 41px;
    height: 41px;
    position: absolute;
    left: 0;
    top: 0;
    background: url(//www.zohowebstatic.com/sites/zweb/images/projects/task-management/tm-sprite.png) -1170px -6px;
    background-size: 1480px auto
}

.projects-customers ul {
    width: 680px;
    height: 420px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative
}

.projects-customers ul li {
    width: calc(680px / 3);
    height: 140px;
    background: #f6f5f1;
    border-collapse: collapse;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0
}

.projects-customers ul li.show {
    opacity: 1;
    transition: .2s all;
    transform: translate(-50%, -50%) scale(1.1)
}

.projects-customers ul.active li {
    opacity: 1;
    transition: .5s all;
    transform: translate(-50%, -50%) scale(1)
}

.projects-customers ul.active li:nth-child(1) {
    left: 0;
    top: 0;
    transform: translate(0, 0)
}

.projects-customers ul.active li:nth-child(2) {
    left: 50%;
    top: 0;
    transform: translate(-50%, 0)
}

.projects-customers ul.active li:nth-child(3) {
    left: initial;
    right: 0;
    top: 0;
    transform: translate(0, 0)
}

.projects-customers ul.active li:nth-child(4) {
    left: 0;
    top: 50%;
    transform: translate(0, -50%)
}

.projects-customers ul.active li:nth-child(6) {
    left: initial;
    right: 0;
    top: 50%;
    transform: translate(0, -50%)
}

.projects-customers ul.active li:nth-child(7) {
    left: 0;
    top: initial;
    bottom: 0;
    transform: translate(0, 0)
}

.projects-customers ul.active li:nth-child(8) {
    left: 50%;
    top: initial;
    bottom: 0;
    transform: translate(-50%, 0)
}

.projects-customers ul.active li:nth-child(9) {
    left: initial;
    top: initial;
    right: 0;
    bottom: 0;
    transform: translate(0, 0)
}

.projects-customers ul li span {
    text-indent: -9999px;
    background-image: url(//www.zohowebstatic.com/sites/zweb/images/projects/client-logos.png);
    background-size: 1000px auto;
    transform: scale(1)
}

.ico-sodexo {
    width: 130px;
    height: 45px;
    background-position: -289px -2px
}

.ico-yartra {
    width: 143px;
    height: 44px;
    background-position: -436px -6px
}

.ico-honeywell {
    width: 150px;
    height: 32px;
    background-position: -597px -11px
}

.ico-philips {
    width: 131px;
    height: 27px;
    background-position: 0 -77px
}

.ico-nhs {
    width: 81px;
    height: 32px;
    background-position: -151px -74px
}

.ico-siemens {
    width: 153px;
    height: 32px;
    background-position: -252px -74px
}

.ico-olympus {
    width: 177px;
    height: 34px;
    background-position: -723px -73px
}

.ico-ntt-data {
    width: 157px;
    height: 25px;
    background-position: -338px -139px
}

.ico-oyo {
    width: 93px;
    height: 32px;
    background-position: -717px -136px
}

.lean-features {
    padding-bottom: 200px
}

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

.feature-images {
    position: relative;
    max-width: calc(100% - (530px + 100px));
    width: 100%;
    height: 620px
}

.feature-images img {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 0.5rem;
    transform: translate(-50%, -50%) scale(.7);
    transition: 1s all;
    box-shadow: 10px 10px 20px 0 rgba(10, 26, 47, 0.06)
}

.manage-timeline picture:nth-child(1) img {
    box-shadow: none
}

.feature-images.active img {
    transform: translate(-50%, -50%) scale(1)
}

.feature-content {
    max-width: 430px
}

.feature-content h3 {
    font-family: var(--zf-primary-bold);
    max-width: 380px
}

.feature-content span {
    display: block;
    margin: 0 0 10px;
    color: #24c478;
    font-size: 14px;
    font-family: var(--zf-primary-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    padding: 0
}

/* .feature-section .feature-content span:before {
    content: none;
    position: absolute;
    width: 47px;
    height: 48px;
    left: 0;
    top: 0;
    background-image: url(//www.zohowebstatic.com/sites/zweb/images/projects/task-management/tm-sprite.png);
    background-size: 1400px auto
} */

/* .feature-section:nth-child(1) .feature-content span:before {
    background-position: 0 -60px
} */

/* .feature-section:nth-child(2) .feature-content span:before {
    background-position: -48px -60px
} */

/* .feature-section:nth-child(3) .feature-content span:before {
    background-position: -96px -60px
}

.feature-section:nth-child(4) .feature-content span:before {
    background-position: -145px -59px
}

.feature-section:nth-child(5) .feature-content span:before {
    background-position: -194px -60px
} */

.organize-project picture:nth-child(1) img {
    max-width: 590px;
    margin: -160px 0 0 -60px
}

.organize-project picture:nth-child(2) img {
    max-width: 465px;
    margin: 170px 0 0 0
}

.improve-your-images img {
    box-shadow: -10px 10px 20px 0 rgba(3, 61, 92, 0.08)
}

.manage-timeline picture:nth-child(1) img {
    max-width: 600px;
    margin: 5px 0 0 80px
}

.manage-timeline picture:nth-child(2) img {
    max-width: 280px;
    margin: -10px 0 0 -135px
}

.visualize-progress picture:nth-child(1) img {
    max-width: 280px;
    margin: -90px 0 0 -210px
}

.visualize-progress picture:nth-child(2) img {
    max-width: 360px;
    margin: -160px 0 0 140px
}

.visualize-progress picture:nth-child(3) img {
    max-width: 500px;
    margin: 190px 0 0 30px
}

.stay-connected picture:nth-child(1) img {
    max-width: 380px;
    margin: -30px 0 0 250px
}

.stay-connected picture:nth-child(2) img {
    max-width: 300px;
    margin: 95px 0 0 -120px
}

.track-hours picture:nth-child(1) img {
    max-width: 260px;
    margin: -90px 0 0 -230px
}

.track-hours picture:nth-child(2) img {
    max-width: 360px;
    margin: -140px 0 0 110px
}

.track-hours picture:nth-child(3) img {
    max-width: 490px;
    margin: 195px 0 0 0
}

.task-manage-testimonial {
    position: relative;
    z-index: 1
}

.task-manage-testimonial:before,
.task-manage-testimonial:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background: #0a1a2f;
    z-index: -1
}

.task-manage-testimonial:after {
    left: initial;
    right: 0;
    background: #f6f5f1
}

.task-manage-testimonial .content-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f6f5f1
}

.testi-image {
    width: 610px;
    position: relative;
    padding: 180px 70px 140px 100px;
    z-index: 1
}

.testi-image:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% - 220px);
    height: 100%;
    background: #0a1a2f;
    z-index: -1
}

.testi-image h5 {
    text-transform: uppercase;
    color: #fff;
    margin: 40px 0 0
}

.testi-image h5 span {
    display: block;
    font-family: var(--zf-primary-regular), Arial, Helvetica, sans-serif;
    color: #969696;
    margin: 6px 0 0
}

.watch-btn {
    font-size: 16px;
    text-transform: uppercase;
    color: #f0483e;
    font-family: var(--zf-primary-semibold);
    padding: 10px 0 9px 60px;
    position: relative;
    margin: 25px 0 0
}

.watch-btn:before {
    content: '';
    width: 41px;
    height: 41px;
    position: absolute;
    left: 0;
    top: 0;
    background: url(//www.zohowebstatic.com/sites/zweb/images/projects/task-management/tm-sprite.png) -1221px -6px;
    background-size: 1480px auto
}

.testi-content {
    width: 460px
}

.testi-content h3 {
    font-family: "Roboto Slab";
    font-weight: 500;
    line-height: 1.4
}

.mobile-app-section {
    position: relative
}

.mobile-app-section:before {
    content: '';
    position: absolute;
    width: 50%;
    height: 100%;
    right: 0;
    top: 0;
    background: url(//www.zohowebstatic.com/sites/zweb/images/projects/task-management/work-ont-the-go-bg.png) no-repeat center left 50px;
    background-size: 900px auto;
    opacity: .1
}

.mobile-apps {
    padding: 160px 0;
    max-width: 920px;
    margin: 0 auto
}

.mobile-app-image img {
    position: static;
    transform: translate(0, 0);
    max-width: 300px;
    box-shadow: none
}

.mobile-app-image.active img {
    transform: translate(0, 0) scale(1)
}

.apps-download-links-wrap {
    margin: 40px 0 0
}

.task-footer {
    padding: 100px 0;
    color: #fff;
    background: #0a1a2f;
    background-size: 250px
}

.task-footer p {
    margin: 40px 0 0
}

@media screen and (max-width:1440px) {
    .i18n-en h1 {
        font-size: 46px
    }

    .i18n-en .manage-wrapper h2 {
        font-size: 36px
    }

    .i18n-en h3 {
        font-size: 30px
    }

    .banner-cont {
        max-width: 820px;
        margin: 60px auto 0
    }

    .banner-cont h4 {
        font-size: 22px
    }

    .lean-features {
        padding: 30px 0 100px
    }

    .feature-section {
        max-width: 1170px;
        margin: 0 auto;
        padding: 6rem 0 0
    }

    .mobile-apps {
        padding: 100px 0;
        max-width: 920px
    }

    .feature-images {
        transform: scale(.85);
        transform-origin: center
    }
}

@media screen and (max-width:1280px) {
    .content-wrap {
        width: 90%
    }

    .banner-wrap .content-wrap {
        width: 100%
    }

    .feature-images {
        max-width: calc(100% - (320px));
        transform: scale(.8)
    }

    .feature-content {
        max-width: 360px
    }

    .feature-images img {
        max-width: 680px
    }

    .testi-image {
        padding: 140px 60px 80px 50px
    }
}

@media screen and (max-width:992px) {
    .i18n-en h1 {
        font-size: 38px
    }

    .i18n-en .manage-wrapper h2 {
        font-size: 32px
    }

    .i18n-en h3 {
        font-size: 28px
    }

    .banner-wrap {
        margin: 0 auto;
        padding: 60px 0
    }

    .banner-image {
        top: 0;
    }

    .banner-wrap .content-wrap {
        flex-wrap: wrap;
        width: 90%
    }

    .banner-left {
        max-width: 780px;
        width: 100%;
        text-align: center;
        margin: 0 auto 30px
    }

    .projects-customers {
        padding: 80px 0
    }

    .projects-customers .content-wrap {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center
    }

    .customer-content p a {
        margin: 10px 0 30px
    }

    .customer-content {
        max-width: 450px;
        width: 100%
    }

    .projects-customers ul {
        height: auto;
        width: auto
    }

    .projects-customers ul li {
        opacity: 1;
        position: static;
        transform: translate(0, 0) scale(1) !important;
        width: auto;
        height: auto;
        margin: 20px
    }

    .projects-customers ul li span {
        transform: scale(1)
    }

    .lean-features {
        padding: 0 0 100px
    }

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

    .feature-section {
        flex-wrap: wrap;
        padding: 80px 0 0;
        position: relative
    }

    .feature-content {
        max-width: 620px;
        width: 100%;
        margin: 0 auto
    }

    .feature-images {
        order: 1;
        height: auto !important;
        max-width: 100%;
        transform: scale(1);
        text-align: center
    }

    .feature-content span {
        padding-top: 70px
    }

    .feature-section .feature-content span:before {
        content: ''
    }

    .feature-images picture:nth-child(2) img {
        display: block;
        margin: 0 auto
    }

    .feature-images img {
        position: static;
        transform: translate(0, 0) scale(1);
        margin: 0 auto;
        text-align: center;
    }

    .feature-images picture:nth-child(2) img {
        display: block;
        margin: 0 auto
    }

    .feature-images.active img {
        transform: translate(0, 0) scale(1) !important
    }

    .task-manage-testimonial {
        padding: 70px 0
    }

    .task-manage-testimonial:before {
        background: #f6f5f1
    }

    .task-manage-testimonial .content-wrap {
        display: block;
        text-align: center
    }

    .testi-image {
        padding: 0;
        margin: 0 auto;
        max-width: 610px;
        width: 100%
    }

    .testi-image img {
        width: 120px
    }

    .testi-content {
        margin: 30px auto 0;
        max-width: 460px;
        width: 100%
    }

    .testi-image h5 {
        color: #000;
        margin: 15px 0 0;
        font-size: 16px
    }

    .testi-image h5 span {
        margin: 2px 0 0
    }

    .testi-image:before {
        content: none
    }

    .mobile-apps {
        text-align: center;
        justify-content: center;
        padding: 80px 0 !important
    }

    .mobile-apps .feature-content {
        order: 1
    }

    .mobile-apps .feature-content span {
        padding: 0
    }

    .mobile-apps .feature-content span:before,
    .mobile-app-section:before {
        content: none
    }

    .apps-download-links-wrap {
        margin: 25px 0 0
    }
}

@media screen and (max-width:767px) {
    .i18n-en h1 {
        font-size: 30px;
        line-height: 1.2
    }

    .i18n-en .manage-wrapper h2 {
        font-size: 26px
    }

    .i18n-en h3 {
        font-size: 24px
    }

    .banner-wrap {
        padding-top: 60px
    }

    .banner-cont {
        padding: 60px 0 0;
        margin: 0;
    }

    .projects-customers ul li span {
        display: inline-block;
        transform: scale(1)
    }

    .lean-features {
        padding: 0 0 80px
    }

    .feature-section {
        padding: 60px 0 0;
        position: relative;
        max-width: 100%
    }

    .feature-content {
        max-width: 100%;
        text-align: left
    }

    .mobile-apps .feature-content {
        text-align: center;
        max-width: 420px;
        width: 100%;
        margin: 40px auto 0
    }

    .task-footer {
        padding: 60px 0
    }
}

.zw-template-inner {
    padding-top: 80px
}

.zw-product-header {
    background-color: #0b1a2f
}

.zprd-display-name {
    color: #fff
}

.i18n-ar .banner-cont,
.i18n-ar .banner-cont * {
    text-align: center
}

.i18n-ar .task-footer,
.i18n-ar .task-footer * {
    text-align: center
}

.fch-start-now {
    border-radius: 50px;
    background-color: black;
    color: white;
    border: none;
    padding: 10px 30px;
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2% auto;
}
.fch-start-now:hover{
color: white !important;
}



@media (max-width:480px) {
    .banner-wrap{
        padding: 0 !important;
    }
}