header {
    position: relative;
    z-index: 10;
}

.bottom-promo {
    background: #3f51b6;
    text-align: center;
    border: 1px solid #3f51b6
}

.bottom-promo h3 {
    color: #fff;
    margin-bottom: 0;
    font-size: 27px;
    line-height: normal;
    font-weight: 500;
}

.customer-stories p a span {
    color: #00aeef;
    line-height: 1.2
}

.bottom-promo .content-wrap {
    margin: 50px auto
}

.product-nav-links .menu li a.active {
    /*box-shadow: 0 -2px 0 #fff inset*/
}

.jpc-banner-wrap {
    background: #b2dfdc;
    position: relative;
    background-image: url('/sites/zweb/images/connect/benefits-bg1.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding-top: 75px;
}

.zsection-banner {
    width: 100%;
    padding: 100px 0 400px;
    position: relative;

}

.zsection-banner .bottom-area {
    border-bottom: 180px solid white;
    border-left: 0 solid transparent;
    bottom: 0;
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1
}

.zcontainer {
    max-width: 1170px;
    width: 90%;
    margin: 0 auto;
    position: relative
}

.zcontent-main {
    position: relative;
    z-index: 2
}

.zcontent-main .zcontainer {
    padding: 0 40px;
    box-sizing: border-box
}

.zcontent-main>.zcontainer:first-child {
    margin-top: -200px;
    background-color: #fff
}

h1 {
    color: #fff;
    font-weight: 700;
    font-size: 50px;
    line-height: normal;
    margin: 0 auto;
    max-width: 680px;
    text-align: center
}

h2 {
    font-weight: 700;
    margin-bottom: 15px;
    line-height: auto;
}

h3 {
    font-weight: 500;
    margin-bottom: 15px;
    line-height: normal;
}

p {
    font-weight: 400;
    font-size: 16px;
    line-height: 2;
}

.zcontent-inner>p,
.zcontent-inner>h2 {
    max-width: 670px;
    text-align: center;
    margin: 0 auto
}

.zcontent-inner>p {
    margin-top: 15px
}

#zdown-arrow {
    background: #fff none repeat scroll 0 0;
    bottom: -80px;
    height: 35px;
    left: 50%;
    position: absolute;
    width: 1px
}

#zdown-arrow::after,
#zdown-arrow::before {
    background: #fff none repeat scroll 0 0;
    bottom: 2px;
    content: "";
    display: block;
    height: 1px;
    left: -8px;
    position: absolute;
    transform: rotate(35deg);
    width: 10px
}

#zdown-arrow::before {
    bottom: 2px;
    left: -1px;
    transform: rotate(-35deg)
}

.zcontent-inner {
    width: 100%;
    padding: 80px 0;
    border-top: 1px solid #f8f8f8;
    position: relative;
    text-align: center
}

.zcontent-two-col-outer {
    overflow: hidden;
    max-width: 1040px;
    margin: 0 auto;
    text-align: left
}

.zcontent-two-inner {
    float: left;
    width: 50%;
    box-sizing: border-box
}

.zcontent-two-col-outer .zcontent-two-inner:first-child {
    padding-right: 10%
}

.zcontent-two-inner .zcontent-two-col:last-child {
    margin-top: 50px
}

.animClass {
    transition: all .4s linear
}

.zcontent-inner .zicon {
    width: 60px;
    height: 60px;
    display: inline-block;
    margin-bottom: 15px;
    position: relative;
    background-image: url('/sites/zweb/images/connect/benefits-icons_2.png');
    background-size: 315px auto;
    background-repeat: no-repeat
}

.zcontent-inner .zicon.zicon1 {
    background-position: 4px -1px;
    height: 45px;
    width: 80px
}

.zcontent-inner .zicon.zicon2 {
    background-position: -97px 10px
}

.zcontent-inner .zicon.zicon3 {
    background-position: -169px 8px
}

.zcontent-inner .zicon.zicon4 {
    background-position: -246px 8px;
    width: 70px
}

.zcontent-inner .zicon.zicon5 {
    background-position: 0 -70px
}

.zcontent-inner .zicon.zicon6 {
    background-position: -80px -67px;
    width: 65px
}

.zcontent-inner .zicon.zicon7 {
    background-position: -168px -72px
}

.zcontent-inner .zicon.zicon8 {
    background-position: -250px -71px;
    width: 65px
}

.zcontent-three-col {
    margin-top: 50px;
    overflow: hidden;
    width: 100%;
    text-align: left
}

.zcontent-three-col-inner {
    float: left;
    width: 30%;
    padding-right: 5%
}

.zcontent-three-col-inner:last-child {
    padding-right: 0
}

#boost-productivity {
    background-color: #26a69b;
    color: #fff
}

#simplify-onboarding {
    background-color: #00b7ed;
    color: #fff
}

#simplify-onboarding .learn-more,
#boost-productivity .learn-more,
#boost-productivity .zheading-link,
#simplify-onboarding .zheading-link {
    color: #fff !important
}

#simplify-onboarding .learn-more::before,
#boost-productivity .learn-more::before {
    border-color: transparent transparent transparent #fff
}

.main-container-wrapper #mini-panel-product_menu {
    background: transparent
}

.main {
    margin-top: -75px
}

.features-banner-content,
#mini-panel-product_menu .menu-icon-help-header .product-title a,
#mini-panel-product_menu .menu-icon-help-header+.product-nav-links li a,
.main-container-wrapper #mini-panel-product_menu .menu-icon-help-header+.product-nav-links li a {
    color: #fff !important
}

@media screen and (max-width: 992px) {
    h1 {
        font-size: 44px;
        max-width: 580px
    }

    .zsection-banner {
        padding: 80px 0 360px
    }

    .zcontent-inner {
        padding: 60px 0
    }
}

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

    .zwph-white .product-title>a {
        color: #000
    }

    .main-container-wrapper #mini-panel-product_menu {
        background: #fff
    }

    .main .ptmenu #mini-panel-product_menu .menu-icon-help-header .product-title a,
    .main-container-wrapper #mini-panel-product_menu .menu-icon-help-header .product-title a,
    .main-container-wrapper #mini-panel-product_menu .menu-icon-help-header+.product-nav-links li a {
        color: #333 !important
    }

    .zcontent-three-col-inner {
        float: none;
        padding: 0;
        width: 100%;
        margin-top: 50px
    }

    .zcontent-three-col-inner:first-child {
        margin-top: 0
    }

    #zdown-arrow,
    .bottom-area {
        display: none
    }

    .zcontent-main>.zcontainer:first-child {
        margin-top: -50px
    }

    .zsection-banner {
        padding: 60px 0 140px
    }

    .zcontent-two-inner {
        float: none;
        width: 100%
    }

    .zcontent-two-inner .zcontent-two-col {
        margin-top: 50px
    }

    h2 {
        font-size: 26px
    }

    .zcontent-main .zcontainer {
        padding: 0 20px
    }

    .zcontent-inner,
    .zcontent-inner>p,
    .zcontent-inner>h2 {
        text-align: left
    }
}

@media screen and (max-width: 680px) {
    h1 {
        font-size: 34px;
        max-width: 450px
    }
}

.lang-ar .zcontainer h1,
.bottom-promo h3,
.bottom-promo p {
    text-align: center
}

.lang-ar .zcontent-inner {
    text-align: center
}

.zheading-link {
    color: #333
}

.learn-more {
    padding-right: 20px;
    font-weight: 500;
    color: #03a9f5 !important;
    text-decoration: none !important;
    display: inline-block;
    font-size: 17px;
    margin-top: 10px;
    padding-top: 0;
    position: relative
}

.learn-more.learn-more-center {
    margin: 10px auto 0
}

.learn-more::before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent transparent transparent #03a9f5;
    border-image: none;
    border-style: solid;
    border-width: 5px;
    content: " ";
    height: 0;
    right: 3px;
    margin-top: -5px;
    pointer-events: none;
    position: absolute;
    top: 55%;
    width: 0
}

.learn-more.learn-more-middle {
    margin: 10px auto 0
}




/* Arabic starts  */
.i18n-ar .zcontent-three-col-inner {
    float: right;
}

.i18n-ar .zcontent-three-col-inner {
    padding-right: 0;
    padding-left: 5%;
}

.i18n-ar .zcontent-two-inner {
    float: right;
}

.i18n-ar .zcontent-three-col-inner:last-child {
    padding-left: 0;
}

.i18n-ar .zcontent-two-col-outer .zcontent-two-inner:first-child {
    padding-left: 10%;
    padding-right: 0;
}

.i18n-ar #simplify-onboarding .learn-more::before,
.i18n-ar #boost-productivity .learn-more::before {
    border-color: transparent#fff transparent transparent;
}

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

    .i18n-ar .zcontent-inner,
    .i18n-ar .zcontent-inner * {
        text-align: right;
    }
}

/* Arabic ends  */



/* breadcrumbs css start */
/*feature-breadcrumb start*/
.feature-breadcrumb {
    padding-top: 23px;
}

.feature-breadcrumb.breadcrumb-dark li {
    color: #000;
}

.feature-breadcrumb.breadcrumb-dark li a {
    color: #666;
}

.feature-breadcrumb.breadcrumb-dark li a:hover {
    color: #000;
}

.feature-breadcrumb.breadcrumb-dark li a:after {
    background: #000;
}

.feature-breadcrumb.breadcrumb-light li {
    color: #fff;
}

.feature-breadcrumb.breadcrumb-light li a {
    color: #fff;
}

.feature-breadcrumb.breadcrumb-light li a:hover {
    color: #fff;
}

.feature-breadcrumb.breadcrumb-light li a:after {
    background: #fff;
}

.feature-breadcrumb .jpc-container {
    max-width: 1200px;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
}

.feature-breadcrumb li {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 500;
    display: inline-block;
    margin-right: 14px;
    position: relative;
    color: #fff;
}

.feature-breadcrumb li a {
    color: #fff;
    position: relative;
    display: block;
    transition: 0.2s;
    padding-bottom: 4px;
}

.feature-breadcrumb li a:hover {
    color: #fff;
}

.feature-breadcrumb li a:hover:after {
    width: 100%;
    left: 0;
    right: auto;
    transition: all 0.2s linear;
}

.feature-breadcrumb li a:before {
    content: '>';
    display: block;
    height: 5px;
    width: 5px;
    position: absolute;
    right: -8px;
    top: -1px;
    font-size: 13px;
    font-weight: 400;
    pointer-events: none;
}

.feature-breadcrumb li a:after {
    content: '';
    display: block;
    position: absolute;
    left: auto;
    right: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    background: #fff;
    transition: all 0.3s linear;
}

/*feature-breadcrumb end*/
@media only screen and (max-width: 1250px) {
    .feature-breadcrumb .jpc-container {
        max-width: 100%;
        padding: 0 25px;
    }
}

/* breadcrumbs css end */