*, p, h1, h2, h3, h4, li, ul {
  margin: 0;
  padding: 0;
  font-weight: inherit;
}
.umain .footer-sec-wrap {
  border-top: none;
}
h1 {
  font: 56px/60px var(--zf-primary-bold);
  text-align: center;
  letter-spacing: -0.4px;
}
.bg_lazy_loaded.sprite-images {
  background-image: url(/sites/zweb/images/crm/delightful-sprite-images.svg);
  background-size: 36.5px;
}


/*  header section  */
.header-section {
  padding: 70px 30px 0px;
  box-sizing: border-box;
}
.equal-sec {
  width: 720px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 40px;
}
.border-txt,.bg-txt {
  width: 200px;
  border: 2px solid #333333;
  font: 18px/20px Courgette;
  font-weight:400;
  border-radius: 30px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;    
 padding: 10px;
 box-sizing: border-box;
 text-align: center;
}
.bg-txt {
  border: none;
  background-color: #333333;
  color: #ffcc59;
}
.plus-icon {
  content: '';
  background-position: 0 -117px;
  width: 35.5px;
  height: 33px;
  display: block;
}
.equ-icon {
  content: '';
  background-position: 0 0;
  width: 36.5px;
  height: 18.5px;
  display: block;
}
.header-content {
  font: 18px/30px var(--zf-primary-regular);
  color: #333333;
  text-align: center;
  padding-top: 40px;
  padding-bottom: 110px;
}
.step-section {
  width: 100%;
  max-width: 1230px;
  background-color: #0067ff;
  border-radius: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0px auto -200px;
  box-sizing: border-box;
  padding: 30px 30px 30px 90px;
  position: relative;
}
.step-lft{
  width: 45%;
  padding-right: 40px;
}
.step-lft h2 {
  font: 40px/48px var(--zf-primary-bold);
  color: #fff;
}
.step-lft p {
  font: 18px/30px var(--zf-primary-regular);
  color: #ffffff;
  padding: 20px 0px 30px;
}
.learn-more-btn {
  width: 200px;
  font: 16px/48px var(--zf-primary-regular);
  border: 1px solid #fff;
  text-align: center;
  border-radius: 30px;
  color: #fff;
  display: block;
  cursor: pointer;
}
.learn-more-btn span{
  background: #ffffff;
  width: 15px;
  height: 2px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: 40px;
  transition: all ease .35s;
}
.more-option .learn-more-btn span{
  background: #111111;
}
.learn-more-btn span:before {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border: 2px solid #ffffff;
  transform: rotate(-45deg);
  border-left: 0;
  border-top: 0;
  top: -3px;
  right: 0;
}
.more-option .learn-more-btn span:before{
      border-color: #111111;
}
.learn-more-btn:hover span {
transform: translateX(4px);
-webkit-transform: translateX(4px)
}
.step-rgt img{
  display: block;
}

/*  more section  */
.more-sec {
  width: 100%;
  background-color: #111111;
  padding: 260px 30px 70px;
  text-align: center;
  box-sizing: border-box;
}
.more-options {
  max-width: 1230px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.more-option {
  width: 48%;
  border-radius: 40px;
  background-color: #ffffff;
  box-sizing: border-box;
  overflow: hidden;
}
.more-option h2 {
  font: 40px/48px var(--zf-primary-bold);
  color: #111111;
  padding: 70px 70px 0px;
}
.more-option p {
  font: 18px/30px var(--zf-primary-regular);
  color: #333333;
  text-align: center;
  padding: 20px 60px 30px;
}
.more-option .learn-more-btn {
  border: 1px solid #111111;
  color: #111111;
  margin: 0 auto 65px;
}
.option2 .learn-more-btn{
  margin-bottom: 20px;
}
.option1{
  background-image: url(/sites/zweb/images/crm/non-stop-scaling-bg1.jpg);
  background-position: bottom;
  background-size: 100%;
  background-repeat: no-repeat;
}
.img-sec img{
  display: block;
  margin: 0 auto;
  position: relative;
}
.img-sec{
  padding: 0px 20px 20px 35px;
}
.footer-title {
  font: 48px/48px var(--zf-primary-bold);
  color: #ffffff;
  padding-top: 115px;
}
.footer-txt {
  font: 24px/36px var(--zf-secondary-medium);
  color: #cccccc;
  padding: 15px 0px 40px;
}
.footer-btn{
  margin: 0 auto;
  background-color: #f0483e;
  border: none;
  color: #ffffff;
}


@media only screen and (max-width: 1250px) {
  .step-section {
      padding: 30px;
  }
  .more-option h2{
      padding: 50px 50px 0px;
  }
  .more-option p {
      padding: 20px 50px 30px;
  }
}

@media only screen and (max-width: 1150px) {
.step-lft{
      padding-right: 30px;
  }
  .step-rgt{
      width: 50%;
  }
}

@media only screen and (max-width: 990px) {
 .header-section {
  padding: 55px 0px 0px;
}
  h1 {
      font: 46px/56px var(--zf-primary-bold);
  }
  .equal-sec {
      width: 700px;
  }
  .border-txt,.bg-txt {
      width: 190px;
      font: 16px/18px Courgette;
  }
  .header-content {
      font: 16px/26px var(--zf-primary-regular);
  }
  .step-section {
  height: auto;
  flex-direction: column;
  margin-bottom: 0px;
  text-align: center;
  border-radius: 0px;
  padding: 80px 70px 90px;
 }
  .step-lft{
      width: 100%;
      padding-right: 0px;
      padding-bottom: 50px;
  }
  .step-rgt{
      width: 100%;
  }
  .step-rgt img{
      margin: 0px auto;
  }
  .step-lft p {
      font: 16px/26px var(--zf-primary-regular);
  }
  .more-sec {
  padding: 85px 30px 70px;
  }
      .more-options {
      flex-direction: column;
  }
  .more-option {
      width: 100%;
      border-radius: 20px;
  }
  .option1{
      margin-bottom: 50px;
  }
  .learn-more-btn {
      width: 150px;
      font: 16px/38px var(--zf-primary-regular);
  margin: 0 auto;
  }
      .learn-more-btn span {
  margin-left: 20px;
}
 .learn-more-btn.footer-btn {
      width: 200px;
  }
  .more-option h2 {
      padding: 80px 30px 0px;
  }
  .more-option p {
      padding: 20px 70px 30px;
      font: 16px/26px var(--zf-primary-regular);
  }
.more-option .learn-more-btn{
  margin-bottom: 40px;
}
.img-sec{
  padding: 0px 20px 65px 35px;
}
.option2 .img-sec{
  padding: 0px 20px 85px;
}
  .footer-title {
      font: 40px/40px var(--zf-primary-bold);
      padding-top: 80px;
  }
  .footer-txt {
      font: 20px/30px var(--zf-secondary-medium);
  }
.i18n-ar .step-lft {
  padding-left: 0;
  padding-right: 0;
}
.i18n-ar .step-lft h2, .i18n-ar .step-lft p{
  text-align: center;
}
}


@media only screen and (max-width: 767px) {
  .mob-hide{
      display: none;
  }
  .header-section {
      padding: 50px 0px 0px;
      box-sizing: border-box;
  }
  h1 {
      font: 36px/44px var(--zf-primary-bold);
      padding: 0px 30px;
  }
  .equal-sec {
      width: 100%;
      flex-wrap: wrap;
      padding: 40px 30px 0px;
      box-sizing: border-box;
      justify-content: center;
  }
  .border-txt, .bg-txt {
      width: 220px;
  }
  .equ-icon{
   display: none;
 }
.plus-icon{
 margin: 0px 10px;
}
  .bg-txt {
      margin-top: 25px;
      position: relative;
  }
  .bg-txt::before {
          content: '';
          background-image: url(/sites/zweb/images/crm/delightful-sprite-images.svg);
          background-size: 36.5px;
          background-position: 0 0;
          width: 36.5px;
          height: 18.5px;
          position: absolute;
          left: -45px;
         top: 19px;   
}
  .header-content{
         padding: 30px 30px 65px;
  }
 .step-section {
  padding: 65px 30px;
}
.step-lft h2 {
  font: 30px/38px var(--zf-primary-bold);
}
.more-option h2 {
  padding: 60px 30px 0px;
  font: 30px/38px var(--zf-primary-bold);
}
.more-option p {
      padding: 20px 30px 30px;
  }
  .more-sec {
      padding: 70px 30px;
  }
.img-sec {
  padding: 0px 20px 60px 30px;
}
.option2 .img-sec {
  padding: 0px 20px 70px;
}
 .footer-title {
      padding-top: 65px;
 }
}

@media only screen and (max-width: 580px) {
.border-txt, .bg-txt {
  width: 180px;
}
}

@media only screen and (max-width: 485px) {
.equal-sec {
  max-width: 400px;
  margin: 0 auto;
}
.border-txt, .bg-txt {
  width: 118px;
  font: 14px/18px Courgette;
}
}

@media only screen and (max-width: 355px) {
.equal-sec {
  flex-direction: column
}
.plus-icon {
  margin: 10px 10px
}
}

/* other lang css start */
  
.zw-other-lang .learn-more-btn {
  width: 250px;
}
@media  (min-width: 991px) {
  .zw-other-lang h1 {
  max-width: 1100px;
  margin: 0 auto;
}
}
@media only screen and (max-width: 500px) {
  .zw-other-lang .border-txt, .zw-other-lang .bg-txt {
      width: 130px;
  }
}
@media (min-width: 500px) and (max-width: 550px) {
  .zw-other-lang .border-txt, .zw-other-lang .bg-txt {
      width: 150px;
  }
}
@media (min-width: 550px) and (max-width: 600px) {
  .zw-other-lang .border-txt, .zw-other-lang .bg-txt {
      width: 200px;
  }
}
@media  (max-width: 400px) {
  .zw-other-lang .equal-sec {
      flex-direction: column;
  }    
}
.i18n-ar section.header-section > h1, .i18n-ar section.header-section > p, .i18n-ar .more-option h2, p.footer-title, p.footer-txt, .i18n-ar .learn-more-btn{
  text-align: center;
}
.i18n-ar .step-lft {
  padding-left: 40px;
  padding-right: 0;
}
.i18n-ar .learn-more-btn span {
  margin-right: 40px;
  margin-left: auto;
  transform: scaleX(-1);
}
/* other lang css end */