.pagewrapper * {
	box-sizing: border-box;
}

.pagewrapper {
    overflow: hidden;
}

.pagewrapper .content-wrap {
    padding: 0 15px;
}

.pagewrapper img {
    width: 100%;
}

.zplogo {
    font-size: 24px;
    background-color: #fff4dd;
    font-family: var(--zf-secondary-semibold);
    padding: 21px 30px 23px 20px;
    border-radius: 80px;
    display: inline-block;
    vertical-align: top;
    width: 210px;
    position: relative;
}

.zbooks {
    background-color: #ffe6e7;
    font-size: 24px;
    font-family: var(--zf-secondary-semibold);
    padding: 21px 30px 25px 20px;
    border-radius: 80px;
    width: 210px;
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.zpb {
    background: var(--product-icons);
    background-size: var(--zp-i-bs);
    background-position: var(--zp-people-bp);
    width: var(--zp-i-w);
    height: var(--zp-i-h);
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

.zbooks .zbk {
    background: var(--product-icons);
    background-size: var(--zp-i-bs);
    background-position: var(--zp-recruit-bp);
    width: var(--zp-i-w);
    height: var(--zp-i-h);
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
}

.zplus {
    position: absolute;
    top: 24px;
    right: -20px;
    background: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 26px;
    text-align: center;
    box-shadow: 0 10px 30px -7px #a2a2a2;
    z-index: 1;
}


.header-top {
	/* background: #fff1d7; */
	position: relative;
    padding: 50px 0 90px;
}

.header-top img {
    max-width: 400px;
}

.pagewrapper video {
    width: 100%;
}


#block-system-main {
    margin-top: 0 !important;
}

/* .header-top::after { 
	content: '';
	position: absolute;
	bottom: -90px;
	height: 200px;
	width: 100%;
	background: #fff1d7;
	left: 0;
	z-index: -1;
} */

/* #header {
	background: #fff1d7;
} */

.header-top h1 {
	font-size: 56px;
    margin-top: 20px;
    letter-spacing: -1px;

}

.header-top .contpart {
	text-align: center;
}

.header-top p {
    max-width: 770px;
    line-height: 1.8;
    margin: 0 auto 35px;
    font-size: 20px;
}

.header-top .content-wrap, .feature-section .content-wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.header-top .content-wrap {
    max-width: 1170px;
align-items: center;
}

.feature-section .content-wrap {
	align-items: center;
	max-width: 1170px;
}

.feature-section p { 
    font-size: 18px;
}

.feature-section .imgpart {
	position: relative;
}

.header-top .contpart {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

.act-btn {
    padding: 16px 35px;
}

.feature-top  {
	background: #314afa;
	padding: 120px 40px 60px;
	color: #fff;
    margin-bottom: 50px;
    position: relative;
}

.feature-top:after {
    content: '';
    position: absolute;
    bottom: -290px;
    left: 0;
    background: #324bfa;
    width: 100%;
    height: 340px;
    z-index: -1;
}

.pagewrapper .feature-top h2 {
    font-size: 70px;
    max-width: 450px;
    line-height: 1;
}

.feature-bottom .content-wrap {
    background: #E65162;
    padding: 90px 120px;
    border-radius: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.feature-bottom h2 span {
    font-family: var(--zf-secondary-regular);
    display: block;
    font-size: 34px;
    margin-bottom: 10px;
}

.feature-bottom h2 span:nth-child(2) {
    margin-top: 10px;
    line-height: 1.3;
}

.feature-top ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 80px;
}

.feature-top .colblock {
    display: inline-block;
    vertical-align: top;
    width: 50%;
}

.feature-top .colblock p{
    font-size: 22px;
}

.feature-top ul li {
    margin-top: 20px;
    width: 22%;
    /* display: inline-block; */
    /* vertical-align: top; */
    position: relative;
    font-size: 20px;
    /* padding-left: 20px; */
    background: #fff;
    color: #000;
    padding: 50px 40px;
    text-align: center;
    font-family: var(--zf-secondary-medium);
    border-radius: 6px;
}

.feature-top ul li:before {
    content: '';
    position: absolute;
    top: 50%;
    right: -85px;
    width: 85px;
    height: 2px;
    border-bottom: 2px dotted #fff;
}

.feature-top ul li:after {
    content: '';
    position: absolute;
    top: 47%;
	right: -30px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #fff;
}

.feature-top ul li:last-child:before, .feature-top ul li:last-child:after {
    content: none;
}

.feature-bottom .content-wrap {
    background: #E65162;
    padding: 80px 120px;
    color: #fff;
    max-width: 1350px;
}

.feature-bottom .colblock {
    display: inline-block;
    vertical-align: top;
}

.pagewrapper .feature-bottom h2 {
    font-size: 56px;
	line-height: 1.1;
	margin-bottom: 50px;
}

.reqcta {
    background: #000;
    color: #fff;
    border-radius: 0;
    border: transparent;
}

.feature-bottom .colblock:nth-child(1) {
    width: 60%;
}

.feature-bottom .colblock:nth-child(2) {
    width: 30%;
}

.feature-bottom ul li {
    font-size: 22px;
    margin-bottom: 20px;
    position: relative;
    font-family: var(--zf-secondary-medium);
    padding-left: 35px;
}

.feature-bottom ul li:before {
    content: '';
    position: absolute;
    top: 12px;
    left: 0;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    width: 12px;
    height: 5px;
    transform: rotate(-45deg);
    z-index: 0;
}


.pagewrapper h2 {
    font-family:  var(--zf-primary-bold);
    font-size: 40px;
}

.ztick {
    background: url('/sites/zweb/images/people/zp-zr-intsprite.png') no-repeat;
    background-size: 220px auto;
    width: 62px;
    height: 60px;
    display: block;
    margin: 0 auto 10px;
    background-position: -2px -2px;
}

.feature-top li:nth-child(2) .ztick {
    background-position: -64px -2px;
    width: 43px;
    height: 60px;
}

.feature-top li:nth-child(3) .ztick {
    background-position: -107px -4px;
    width: 58px;
    height: 60px;
}

.feature-top li:nth-child(4) .ztick {
    background-position: -158px 0;
    width: 50px;
    height: 60px;
    background-size: 210px auto;
}

.feature-section {
	padding:  90px 0 0;
}

.header-top .imgpart {
	width: 35%;
}

.feature-section .contpart{
	width:  40%;
}

 .feature-section .imgpart {
	width:  50%;
	/* background: #f2f3f5; */
		padding: 40px 0;
	border-radius: 10px;
 }

  .feature-section .imgpart img {
  	max-width:  560px;
  	display: block;
  	margin:  0 auto;
  }

  #feat3 .imgpart img {
      max-width: 480px;
  }

.feature-section h2 {
	font-family:  var(--zf-primary-bold);
	font-size:  40px;
}

.feature-section .imgpart .subimg {
    position: absolute;
    top: 210px;
    width: 400px;
    right: 36px;
}

.bottomctawrap {
    padding: 80px 0 120px;
    text-align: center;
}

.bottomctawrap .content-wrap {
    max-width: 640px;
}

.bottomctawrap h2 {
    font-size: 44px;
}
.zw-other-lang .pagewrapper .feature-bottom h2, .zw-other-lang .feature-section .contpart h2, .zw-other-lang .bottomctawrap h2{
    word-break: break-word;
}

 @media screen and (min-width: 1500px) {
.feature-bottom h2 span {
    font-size: 30px;
}
   /* .pagewrapper p {
        font-size: 18px;
    }*/
.zw-other-lang .pagewrapper .feature-top h2 {
    font-size: 56px;
}
.zw-other-lang .feature-bottom h2 span {
    font-size: 24px;
}
} 


@media screen and (max-width: 1499px) {
    .header-top h1 {
        font-size: 52px;
    }

    .header-top {
        padding: 60px 0 100px;
    }

    .header-top p {
        font-size: 19px;
    }

    .pagewrapper h2 {
        font-size: 36px;
    }


    .pagewrapper .feature-top h2 {
        font-size: 60px;
       }
       .pagewrapper .feature-bottom h2 {
        font-size: 50px;
       }

       .feature-bottom h2 span {
        font-size: 32px;
    }

    .feature-section video {
        max-width: 500px;
        margin: 0 auto;
        display: block;
    }

    .feature-top .colblock p {
        font-size: 20px;
    }
.zw-other-lang .feature-bottom h2 span {
    font-size: 20px;
}
}


@media screen and (max-width: 1399px) {
    .feature-top ul li {
        font-size: 18px;
        padding: 50px 30px;
    }

    .pagewrapper .feature-bottom h2 {
      font-size: 44px;  
    } 
}


@media screen and (max-width: 1199px) {
    .feature-top ul li {
        width: 45%;
        margin: 10px 15px 20px;
    }

    .pagewrapper .feature-top h2 {
        font-size: 60px;
    }

    .pagewrapper .feature-bottom h2 {
        font-size: 40px;
        margin-bottom: 30px;
    }


    .feature-bottom ul li {
        font-size: 18px;
    }


    .feature-top ul li:before, .feature-top ul li:after {
        content: none;
    }
.zw-other-lang .pagewrapper .feature-top h2 {
    font-size: 48px;
}
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .feature-top ul {
        justify-content: center;
    }
    .feature-top ul li {
        width: 36%;
    }
}


@media screen and (max-width: 991px) {
    .feature-section .contpart, .feature-section .imgpart, .header-top .contpart, .header-top .imgpart {
        width: 100%;
    }

    .feature-top h2 {
        text-align: center;
    }

    .header-top img {
        display: block;
        margin: 40px auto 0;
    }

    .header-top h1 {
        font-size: 44px;
    }

    .feature-top {
        padding: 40px 40px 0px;
        text-align: center;
        margin-bottom: 0;
    }

    .feature-top .colblock {
        width: 100%;
    }

    .feature-top ul li:before, .feature-top ul li:after {
        content: none;
    }

    .pagewrapper .feature-top h2 {
        font-size: 46px;
        margin: 0 auto 20px;
        max-width: 520px;
    }

    .header-top {
        padding: 40px 0 80px;
    }

    .feature-top .content-wrap {
        padding: 30px 35px 60px;
        width: 100%;
        border-radius: 0;
    }

    .pagewrapper h2 {
        font-size: 30px;
    }

    .feature-top ul li {
        margin: 10px 15px 20px;
    }

    .feature-section .imgpart .subimg {
        display: none;
    }

    .feature-section {
        padding: 60px 0 20px;
    }

    /* #feat1.feature-section {
        padding: 60px 0 0;   
    } */

    .bottomctawrap {
        padding: 40px 0 80px;
    }

    .feature-section .imgpart {
        max-width: 500px;
        margin: 0 auto;
    }

    .feature-section .imgpart img {
        max-width: 420px;
    }

    .feature-section .contpart, .header-top .contpart {
        max-width: 500px;
        margin: 0 auto 20px;
        text-align: center;
    }

    .header-top .contpart {
        max-width: 570px;
    }



    .feature-section .imgpart {
        padding: 0;
    }


    .feature-bottom .colblock:nth-child(1), .feature-bottom .colblock:nth-child(2) {
        width: 100%;
    }

    .feature-bottom .colblock:nth-child(2) {
        margin-top: 40px;
    }

    .feature-bottom h2 span {
        display: initial;
    }

    .pagewrapper .feature-bottom h2 {
        font-size: 38px;
        line-height: 1.3;
        margin-bottom: 20px;
    }



    .feature-bottom ul li, .feature-top .colblock p, .feature-section p , .header-top p, .feature-top ul li {
        font-size: 17px;
    }


    .feature-top ul {
        margin-top: 20px;
    }
.zw-other-lang .pagewrapper .feature-top h2 {
    font-size: 34px;
}

}


@media screen and (min-width: 768px) and (max-width: 991px) {
    .feature-bottom ul li {
        width: 50%;
        display: inline-block;
        vertical-align: top;
    }

    .feature-bottom ul {
        max-width: 610px;
        margin: 0 auto;
    }

    .feature-bottom .content-wrap {
        padding: 60px 80px;
    }
}


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

    .header-top {
        padding: 40px 0 60px;
    }

    .header-top h1 {
        font-size: 38px;
    }

    .feature-top ul li {
        width: 100%;
    }

    .feature-top ul {
        max-width: 430px;
        margin: 0 auto;
    }

    .feature-top .content-wrap {
        padding: 30px 25px;
    }

    .feature-bottom .content-wrap {
        padding: 60px 30px;
    }

    .pagewrapper .feature-bottom h2, .feature-bottom h2 span {
        font-size: 28px;
    }

    .zplus {
            top: 70px;
        left: 50%;
        -webkit-transform: translate(-50%,20%);
        -ms-transform: translate(-50%,20%);
        transform: translate(-50%,20%);
        line-height: 28px;
        width: 30px;
        height: 30px;
    }

    .zplogo, .zapier {
        margin: 0 auto 10px;
        display: block;
    }
    
    .logowrap {
        transform: scale(0.85);
    }

    .feature-bottom .content-wrap {
        width: 100%;
        border-radius: 0;
    }

    .feature-top {
        padding: 40px 20px 20px;
    }

    .pagewrapper .feature-top h2 {
        max-width: 340px;
    }


}

@media screen and (max-width: 480px) {
    .feature-top ul {
        max-width: 340px;
    }

    .feature-top .content-wrap {
        padding: 30px 0;
    }

    .header-top .content-wrap {
        padding: 0 5px;
    }

}

/* Arabic starts */

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

.i18n-ar .zplus {
    text-align: center;
    left: -20px;
    right: auto;
}

.i18n-ar .header-top h1,.i18n-ar .header-top p {
    text-align: center;
}

.i18n-ar .feature-top ul li:before {
    left: -85px;
    right: auto;
}

.i18n-ar .feature-top ul li:after {
    left: -30px;
    right: auto;
    border-right: 8px solid #fff;
    border-left: 0;
}

.i18n-ar .feature-bottom ul li {
    padding-right: 35px;
    padding-left: 0;
}


.i18n-ar .feature-bottom ul li:before {
    transform: rotate(-45deg);
    right: 0;
    left: auto;
}

.i18n-ar .bottomctawrap h2, .i18n-ar .bottomctawrap p, .i18n-ar .bottomctawrap .content-wrap {
    text-align: center;
}

.i18n-de .feature-top .colblock h2,.i18n-de .feature-bottom .colblock h2 {
    word-break: break-all;
}

@media (max-width: 991px){
.i18n-ar .feature-top .colblock h2,.i18n-ar .feature-top .colblock p,.feature-section .contpart h2,.feature-section .contpart p {
    text-align: center;
}
}

@media (max-width: 767px){

.i18n-ar .zplus{
   left: 50%;
}

}
/* Arabic ends */