.zwc-wrapper .content-wrap {
    max-width: 1170px;
  }
  
  
  section.zwc-banner {
    padding: 100px 0 0;
    text-align: center;
    background: #2148AA;
    color: #fff;
  }
  
  .zwc-banner-inner {
    width: 100%;
    max-width: 60%;
    margin: 0 auto;
  }
  
  .zwc-banner-inner .zcta-demo {
    display: inline-block;
    font-family: var(--zf-primary-semibold),sans-serif;
    padding: 7px 20px;
    cursor: pointer;
    font-size: 15px;
    text-transform: uppercase;
    text-align: center;
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
    margin: 20px 0 0 10px;
  }
  
  
  h1 {
    font-size: 60px;
  }
  
  h2 {
    font-size: 43px;
    font-family: var(--primaryfont-bold);
  
  }

  /* roi calculator wrap */
  .zwc-roi-wrap {
    border: 1px solid #2552B1;
    margin: 100px 0 0;
    display: flex;
    align-items: center;
    gap: 30px;
    text-align: left;
    background: #1A409D;
    padding: 20px;
    border-radius: 6px;
}

.bimg {
    background: linear-gradient(310.83deg, #F7B21B 2.7%, #FECD62 96.4%);
    width: 105px;
    height: 105px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.zwc-roi-wrap h2 {
    font-size: 26px;
    margin: 0 0 10px;
}

.zwc-roi-wrap p {
    margin: 0;
}

.zwc-roi-wrap a {
    color: #fff;
    font-size: 18px;
    font-family: var(--secondaryfont-semibold);
    text-transform: uppercase;
    border-bottom: 1px solid;
    margin: 0 0 20px;
    display: inline-block;
}

.zwc-roi-wrap > div:nth-child(3) {
    align-self: end;
    width: 210px;
    text-align: right;
}
  
  section.zwc-grid-section {
    position: relative;
    padding: 20px 0 100px;
  }
  
  section.zwc-grid-section:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 130px;
    top: 0;
    left: 0;
    background: #2148aa;
  }
  
  .zwc-grid-inner {
    gap: 20px;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    flex-flow: row wrap;
  }
  
  .grid-1 {
    width: 100%;
    max-width: 66%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: #fff;
    box-shadow: 0px 12px 26px #a3a3a30f;
    border: 2px solid #0000000F;
    border-radius: 5px;
    padding: 33px 40px;
  }
  
  
  .flex-left,
  .flex-right,
  .video-left,
  .video-right,
  .zwc-slider {
    width: 100%;
    max-width: 49%;
  }
  
  .zwc-video-inner,
  .flex-wrap {
    display: flex;
    gap: 20px
  }
  
  .grid-box {
    width: 100%;
    max-width: 32%;
    background-color: #fff;
    box-shadow: 0px 12px 26px #a3a3a30f;
    border: 2px solid #0000000F;
    border-radius: 5px;
    padding: 60px 45px
  }
  
  section.cta-section {
    text-align: center;
    margin: 0 auto;
    width: 100%;
    max-width: 540px;
    padding-bottom: 100px;
  }
  
  
  .zwc-imgpart {
    /* text-align: center; */
    position: relative;
  }
  
  .zwc-slider.black,
  .zwc-slider.blue {
    background: #242424;
    border-radius: 5px;
    color: #fff;
  
  }
  
  .zwc-slider.blue {
    background: #2148AA
  }
  
  section.zwc-slider-section {
    padding: 100px 0;
  }
  
  .grid-box span.grid-icon {
    display: inline-block;
    width: 60px;
    height: 60px;
    background: url(/sites/zweb/images/sign/evaluate-sprite-icons.png) no-repeat;
    background-position: -28px 0;
    background-size: 420px auto;
    margin-bottom: 10px;
  }
  
  span.grid-icon.two {
    background-position: -88px 0;
  }
  
  span.grid-icon.three {
    background-position: -148px 0;
  }
  
  span.grid-icon.four {
    background-position: -207px 0;
    width: 44px;
  }
  
  span.grid-icon.five {
    background-position: -249px 0;
  }
  
  span.grid-icon.six {
    background-position: -309px 0;
    width: 52px;
  }
  
  span.grid-icon.seven {
    background-position: -360px 0;
  }
  
  .video-left h2 {
    width: 100%;
    max-width: 440px;
    font-size: 50px;
  }
  
  .video-right,
  .zwc-imgpart img {
    position: relative;
    cursor: pointer;
  }
  
  .video-right > span:before,
  .video-right > span:after {
    position: absolute;
    content: "";
    left: 0px;
    right: 0px;
    top: 0px;
    height: 0;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
  }
  
  .video-right img {
    filter: brightness(0.7);
    border-radius: 5px;
  }
  
  
  .video-left p {
    width: 100%;
    max-width: 512px;
  }
  
  .video-right > span:before {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgb(255 255 255);
    border: 1px solid #000;
  }
  
  .video-right > span:after {
    width: 0px;
    height: 0px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 10px solid #000000ab;
    left: 5px;
  }
  
  span.zwc-logo img {
    background: #fff;
    display: block;
    padding: 11px 14px;
    margin-bottom: 10px;
    border-radius: 5px;
  }
  
  img.test-img {
    border-radius: 15px;
    cursor: pointer;
  }
  
  .zslick-sec {
    max-width: 470px;
    margin: 0 auto;
    padding: 40px 0px 10px;
  }
  
  .slickcontent {
    padding: 20px 30px 0;
  }
  
  .zwc-slider.black .slickcontent p {
    margin-bottom: 0;
  }
  
  .slick-dots {
    text-align: left;
    left: 28px;
  }
  
  .zwc-slider.black .slick-dots li.slick-active {
    background: #fff;
    border: none
  }
  
  .zwc-slider.black .slick-dots li {
    background: #767676;
  }
  
  .slick-dots li.slick-active {
    background: #FFFFFF;
    border: none;
  }
  
  .slick-dots li {
    border: none;
    background: #4269CB;
  }
  
  h4 {
    color: #F7B21B;
    font-size: 26px;
    margin-bottom: 0px;
    font-family: var(--primaryfont-bold);
    margin-top: 14px;
  }
  
  p.zwc-msg {
    font-size: 28px;
    line-height: 42px;
    width: 100%;
    max-width: 420px;
    margin: 20px 0 50px;
  }
  
  .slick-next:after,
  .slick-next:before,
  .slick-prev:after,
  .slick-prev:before {
    background: #575757;
  }
  
  .zwc-slider.blue .slick-next:after,
  .zwc-slider.blue .slick-next:before,
  .zwc-slider.blue .slick-prev:after,
  .zwc-slider.blue .slick-prev:before {
    background: #576FAD;
  }
  
  .grid-box a,
  .grid-1 .flex-right a {
    position: relative;
    color: #3985FF;
    font-family: var(--primaryfont-bold);
    line-height: 32px;
  }
  
  .grid-box a::after,
  .grid-1 .flex-right a::after {
    content: '';
    height: 7px;
    width: 7px;
    top: 2px;
    bottom: 0;
    right: -24px;
    margin: auto;
    border: solid #3985FF;
    position: absolute;
    display: inline-block;
    border-width: 0 2px 2px 0;
    transform: rotate(-45deg);
    transition: all .5s ease;
  }
  
  .grid-box a::before,
  .grid-1 .flex-right a::before {
    content: '';
    height: 2px;
    width: 14px;
    position: absolute;
    right: -23px;
    top: 2px;
    bottom: 0;
    margin: auto;
    background-color: #3985FF;
    display: inline-block;
    transition: all .5s ease;
  }
  
  .grid-box a:hover::after,
  .grid-1 .flex-right a:hover::after {
    right: -34px;
  }
  
  .grid-box a:hover::before,
  .grid-1 .flex-right a:hover::before {
    right: -33px;
  }
  
  @media only screen and (min-width:1200px) {
    .slick-prev {
      left: -30px;
    }
  
    .slick-next {
      right: -30px;
    }
  
  }
  
  @media only screen and (max-width:1280px) {
    .grid-box {
      padding: 60px 40px;
    }
  
  }
  
  @media only screen and (max-width:1100px) {
    h1 {
      font-size: 50px;
    }
  
    p.zwc-msg {
      font-size: 26px;
      line-height: 36px;
    }
  
    .grid-1 {
      gap: 18px;
      width: 100%;
      max-width: 65%;
    }
  
    .zwc-grid-inner {
      gap: 10px;
    }
  
    .video-left h2 {
      width: 100%;
      max-width: 430px;
      font-size: 42px;
    }
  
    .video-left p {
      width: 100%;
      max-width: 432px;
    }
  
    .grid-box {
      padding: 40px 38px;
      max-width: 32%;
    }
  
    .slick-dots {
      text-align: center;
      left: 0;
    }
  
    .grid-box a,
    .grid-1 .flex-right a {
      font-size: 15px;
    }
  
    section.zwc-grid-section:before {
      height: 140px;
    }
  
  
  
  }
  
  @media only screen and (max-width:991px) {
    .grid-1 {
      width: 100%;
      max-width: 89%;
    }
  
    .grid-box {
      width: 100%;
      max-width: 44%;
    }
  
    .zwc-video-inner,
    .flex-wrap {
      gap: 0px;
      justify-content: space-evenly;
    }
  
    .zwc-banner-inner {
      width: 100%;
      max-width: 70%;
    }
  
    section.zwc-banner {
      padding: 70px 0 0;
    }
	.zwc-roi-wrap {
		max-width: 90%;
		margin: 80px auto 0;
	}
	.zwc-roi-wrap a {
		font-size: 16px;
	}
  
  }
  
  @media only screen and (max-width:767px) {
  
    h1 {
      font-size: 40px;
    }

	.zwc-roi-wrap {
		max-width: 90%;
		margin: 60px auto 0;
		gap: 20px;
		flex-direction: column;
		align-items: normal;
	}
	.zwc-roi-wrap h2 {
		font-size: 23px;
	}
	.zwc-roi-wrap > div:nth-child(3) {
		align-self: normal;
		text-align: left;
	}
	.zwc-roi-wrap p {
		max-width: 480px;
	}
  
    .grid-1 {
      width: 100%;
      max-width: 90%;
    }
  
    .grid-box {
      width: 100%;
      max-width: 44%;
      padding: 40px 20px;
    }
  
    p.zwc-msg {
      font-size: 22px;
      line-height: 32px;
    }
  
    section.zwc-banner
	{
		padding: 60px 0 0;	
	}

    section.zwc-slider-section {
      padding: 60px 0;
    }
  
    section.zwc-grid-section:before {
      height: 90px;
    }
  
    .video-left h2,
    h2 {
      font-size: 31px;
    }
  
    .zwc-video-inner,
    .flex-wrap {
      gap: 20px;
    }
  
    section.zwc-grid-section {
      padding: 20px 0 60px;
    }
  
    p.zwc-msg {
      margin: 30px 0;
    }
  
    .slick-dotted.slick-slider {
      margin-bottom: 10px;
    }
  
    h4 {
      font-size: 22px;
    }
  
    .grid-box a,
    .grid-1 .flex-right a {
      font-size: 13px;
    }
  }
  
  @media only screen and (max-width:640px) {

	.zwc-roi-wrap {
		align-items: center;
		text-align: center;
	}
	.zwc-roi-wrap > div:nth-child(3) {
		align-self: center;
		text-align: center;
	}
  
    .grid-1,
    .zwc-video-inner,
    .flex-wrap {
      gap: 20px;
      flex-flow: column wrap;
    }
  
    .grid-box {
      padding: 30px;
    }
  
    .grid-1,
    .grid-box,
    .flex-left,
    .flex-right,
    .video-left,
    .video-right,
    .zwc-slider,
    .zwc-roi-wrap {
      width: 100%;
      max-width: 100%;
    }
  
    .zwc-banner-inner {
      width: 100%;
      max-width: 80%;
    }
  
    .video-left,
    .grid-1 {
      text-align: center;
    }
  
    .video-left h2,
    h2 {
      font-size: 27px;
    }
  
    p.zwc-msg {
      font-size: 20px;
      line-height: 31px;
      margin: 16px 0;
    }
  
    .zslick-sec {
      padding: 10px 0px 10px;
    }
  
    .grid-box a,
    .grid-1 .flex-right a {
      font-size: 15px;
    }
  
    .zwc-banner-inner .zcta-demo {
      display: block;
      margin: 15px auto 0;
      max-width: 165px;
  }
  
  }