/* Common css */
.zwc-spriteimg {
  background: url(/sites/zweb/images/cliq/solution-sales/zw-bnr-sprite.png) no-repeat;
  vertical-align: middle;
  display: inline-block;
  /* transition: 1s all ease-in-out; */
}
.zwc-spriteimg.zwc-s-headphone,.zwc-spriteimg.zwc-s-success{
  background-size: 1250px;
  width: 51px;
  height: 51px;
}
.zwc-s-headphone {
  background-position: -1200px -10px;
}
.zwc-s-success {
  background-position: -1146px -10px;
}
.zwc-s-ticket {
  width: 231px;
  height: 153px;
  background-position: -11px -10px;
  transform: rotate(7.64deg);
}
.zwc-spriteimg{
  background-size: 1265px auto;
}
.zwc-s-lheadphone {
  width: 223px;
  height: 188px;
  background-position: -486px -21px;
}
.zwc-s-einvite {
  width: 210px;
    height: 187px;
    background-position: -247px -11px;
    transform: rotate(-11deg);
}
.zwc-s-chat {
  width: 278px;
  height: 178px;
  background-position: -711px -11px;
  transform: rotate(-11deg);
}
.zwc-bgblue {
  background-color: #F3F1FF;
}
.zwc-bgpink {
  background-color: #FFF8EF;
}
.zwc-dflex {
  display: flex;
}
.zwc-dgrid {
  display: grid;
}

/* Banner */
.zwc-wrapper h1 {
  transition: 0.3s all ease-in-out;
  max-width: 898px;
  width: 70%;
  margin: 0 auto 30px;
}

h2 {
  font-family: var(--zf-primary-bold);
}

.zwc-banner {
  background-color: #023231;
  padding: 230px 0 240px 0;
  color: #fff;
}
.zwc-banner-content {
  text-align: center;
}
.zwc-banner-content p {
  margin: auto auto 30px;
  max-width: 719px;
  width: 70%;
}
.zwc-banner .zwc-s-ticket {
  position: absolute;
  top: -25%;
  left: -5%;
  opacity: 0;
  /* animation: 4s bounceTop infinite; */
}
.zwc-banner .zwc-s-lheadphone {
  position: absolute;
  top: -25%;
  right: -5%;
  opacity: 0;
  /* animation: 4s bounceTop infinite; */
}
.zwc-banner .zwc-s-einvite {
  position: absolute;
  bottom: -27%;
  left: -4%;
  opacity: 0;
  /* animation: 4s bounceBottom infinite; */
}
.zwc-banner .zwc-s-chat {
  position: absolute;
  bottom: -30%;
  right: -4%;
  opacity: 0;
  /* animation: 4s bounceBottom infinite; */
}
.zwc-banner .middle-animated .zwc-s-ticket,
.zwc-banner .middle-animated .zwc-s-lheadphone,
.zwc-banner .middle-animated .zwc-s-chat,
.zwc-banner .middle-animated .zwc-s-einvite {
  opacity: 1;
}

/* Animation */
@keyframes bounceTop {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: 10px;
  }
  100% {
    margin-top: 0;
  }
}
@keyframes bounceBottom {
  0% {
    margin-bottom: 0;
  }
  50% {
    margin-bottom: 10px;
  }
  100% {
    margin-bottom: 0;
  }
}
/* 2 column content image Section */
.zwc-2col-wrap {
  margin: 140px 0;
  align-items: center;
  justify-content: space-between;
  gap: 110px;
  margin-inline: auto;
}
.zw-group-img1{
  position: absolute;
}

.zwc-2col-wrap-2 .zwc-2col-grpimg-2 {
  width: 47%;
  left: 16%;
  bottom: -22%;
  transform: translateY(20px);
  opacity: 0;
}
.zwc-2col-wrap-3 .zwc-2col-grpimg-1 {
  width: 83%;
  left: 8%;
  bottom: 10%;
  transform: translateY(20px);
  opacity: 0;
}
.zwc-2col-wrap-1 .zwc-2col-img {
  max-width: 543px;
  width: 50%;
}
.zwc-2col-wrap-1 .zwc-2col-grpimg{
  gap: 20px;
}
.zw-img-pad{
  margin-top: 10px;
}
.zwc-2col-wrap-2 .zwc-2col-img{
  max-width: 605px;
  width: 50%;
  position: relative;
}
.zw-group-img1 {
  max-width: 376px;
    width: 65%;
    top: 110px;
    right: 0;
}
.zwc-2col-content p{
  max-width: 478px;
  width: 100%;
}
.zwc-2col-wrap-1 .zwc-2col-content {
  max-width: 530px;
  width: 50%;
}
.zwc-2col-wrap-2 .zwc-2col-content{
  max-width: 460px;
  width: 50%;
}
.zwc-bgpink h2{
  max-width: 420px;
  width: 100%;
}
.zwc-2col-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
}
.zwc-2col-gridbx {
  border-radius: 15px;
  padding: 60px;
}
.zwc-2col-gridbx p {
  max-width: 440px;
}
.zwc-2col-gridbx img {
  margin-bottom: 40px;
}
.zwc-cont-label {
  font-size: 12px;
  color: #f60014;
  text-transform: uppercase;
  font-family: var(--zf-secondary-medium), sans-serif;
  margin-bottom: 10px;
  display: block;
}
.zwc-gridsec-wrap a{
  color: #000;
  text-decoration: underline;
}
/* Integration section */
.zwc-gridsec {
  margin-bottom: 140px;
}
.zwc-gridsec-container {
  padding: 75px 100px;
  background-color: #E8F3FF;
  border-radius: 20px;
}
.zwc-gridsec-head {
  text-align: center;
  margin-bottom: 40px;
}
.zwc-gridsec-head p {
  max-width: 578px;
  margin: auto;
  margin-bottom: 7px;
}
.zwc-gridsec-wrap {
  display: flex;
  justify-content: space-between;
}
.zwc-gridsec-contentbx {
  max-width: 320px;
  width: 33%;
  padding-left: 70px;
}
.zwc-gridsec-contentbx h3 {
  position: relative;
}
.zwc-gridsec-contentbx h3::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  left: -70px;
  top: 0;
  background-color: #fff;
  border-radius: 6px;
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: center;
}
.zwc-gridsec-contentbx h3.zwc-gridsec-tlogo-hubspot::after {
  background-image: url(/sites/zweb/images/otherbrandlogos/hubspot-icon.svg);
}
.zwc-gridsec-contentbx h3.zwc-gridsec-tlogo-pipedrive::after {
  background-image: url(/sites/zweb/images/otherbrandlogos/pipedrive-icon-secondary.svg);
}
.zwc-gridsec-contentbx .zgh-i-crm:before{
  left: -65px;
  z-index: 1;
  top: 5px;
}
.zwc-2col-wrap-3 .zwc-2col-content,.zwc-2col-wrap-4 .zwc-2col-content{
  max-width: 510px;
  width: 50%;
}
.zwc-2col-wrap-1,.zwc-2col-wrap-2{
  max-width: 1240px;
}
.zwc-2col-wrap-3,.zwc-2col-wrap-4{
  max-width: 1100px;
}
.zwc-bottomcta p{
  max-width: 729px;
  margin: 0 auto 20px;
  width: 70%;
}
.zwc-2col-content p{
  margin-bottom: 0;
}
/* Newsletter */
.zwc-bottomcta {
  background-color: #023231;
  padding: 80px 0;
  color: #fff;
  text-align: center;
}
@media screen and (min-width: 1440px){
  .zwc-banner .zwc-s-ticket{
    top: -35%;
    left: -60px;
  }
  .zwc-banner .zwc-s-lheadphone{
    top: -35%;
    right: -60px;
  }
  .zwc-banner .zwc-s-einvite{
    bottom: -47%;
    left: -60px;
  }
  .zwc-banner .zwc-s-chat{
    bottom: -40%;
    right: -60px;
  }
}
/* Responsive */
@media screen and (min-width: 1200px) {
  .zwc-wrapper h1 {
    font-size: 64px;
    margin-bottom: 30px;
    letter-spacing: -0.4px;
  }
  .zwc-cont-label{
    letter-spacing: 2px;
  }
  .act-btn.cta-btn{
    padding: 12px 30px;
  }
  .zwc-banner-content p,.zwc-bottomcta p {
    margin-bottom: 30px;
    font-size: 20px;
  }
  .zwc-cont-label {
    font-size: 16px;
  }
  .zwc-2col-content h2 {
    font-size: 40px;
    letter-spacing: -0.4px;
  }
  .zwc-gridsec-head {
    margin-bottom: 60px;
  }
  .zwc-gridsec-head h2 {
    font-size: 42px;
    letter-spacing: -0.4px;
    margin-bottom: 10px;
  }
  .zwc-gridsec-head p {
    font-size: 20px;
  }
  .zwc-gridsec-wrap h3 {
    font-size: 25px;
    margin-bottom: 15px;
  }
  .zwc-bottomcta h2 {
    font-size: 45px;
    letter-spacing: -0.4px;
  }
  .zwc-banner-content{
    position: relative;
    top: 50px;
  }
  .set-animate{
    transition: all 1s ease-out;
    opacity: 0;
  }
  .set-ani-1{
    transform: translateY(-40px);
  }
  .set-ani-2{
    transform: translateY(40px);
  }
  .set-ani-3{
    transform: translateX(30px);
  }
  .set-ani-4{
    transform: translateX(-30px);
  }
  .content-wrap.middle-animated .set-ani-3,.content-wrap.middle-animated .set-ani-4{
    transform: translateX(0);
    transition-delay: .5s;
    opacity: 1;
  }
  .content-wrap.middle-animated .set-ani-1,.content-wrap.middle-animated .set-ani-2 {
    transform: translateY(0);
    opacity: 1;
  }
  .content-wrap.middle-animated .no-delay{
    transition-delay: 0;
  }
}
@media screen and (max-width: 1199px) {
  .zwc-banner .zwc-s-lheadphone,.zwc-banner .zwc-s-chat {
    right: 0;
  }
  .zwc-wrapper h1{
    width: 60%;
  }
  .zwc-spriteimg{
    display: none;
  }
  .zw-group-img1{
    top: 210px;
  }
  .zwc-gridsec-container{
    padding: 75px 30px;
  }
  .zwc-gridsec{
    margin-bottom: 100px;
  }
  .zwc-2col-wrap{
    margin: 100px 0;
  }
  .zwc-banner .zwc-s-einvite,.zwc-banner .zwc-s-ticket{
    left: 0;
  }
  .zwc-wrapper h1 .zwc-spriteimg {
    transform: scale(0.5);
    margin: -15px -10px;
  }
  .zwc-banner {
    padding: 140px 0;
  }
  .zwc-banner .zwc-s-ticket,
  .zwc-banner .zwc-s-einvite,
  .zwc-banner .zwc-s-chat,.zwc-banner .zwc-s-lheadphone {
    animation: none;
    opacity: 1;
    width: 13%;
  }
  .zwc-2col-grpimg .zwc-2col-grpimg-1,
  .zwc-2col-grpimg .zwc-2col-grpimg-2 {
    transform: translate(0, 0);
    opacity: 1;
  }
  .zwc-2col-wrap {
    gap: 80px;
  }
}
@media screen and (max-width: 991px) {
  .zwc-banner {
    padding: 80px 0;
  }
  .zwc-gridsec-contentbx .zgh-i-crm:before {
    left: 5px;
    top: -65px;
}
  .zwc-2col-wrap {
    margin: 60px 0;
    gap: 40px;
    flex-direction: column;
    text-align: center;
  }
  .zwc-2col-wrap-reverse {
    flex-direction: column-reverse;
  }
  .zwc-2col-wrap-1 {
    margin-bottom: 90px;
  }
  .zwc-2col-wrap-2 {
    margin-bottom: 90px;
  }
  .zwc-2col-wrap-3 .zwc-2col-content, .zwc-2col-wrap-4 .zwc-2col-content,.zwc-2col-wrap-1 .zwc-2col-content,.zwc-2col-wrap-2 .zwc-2col-content{
    max-width: 600px;
    width: 100%;
    margin-inline: auto;
  }
  .zwc-2col-content p{
    margin: 0 auto;
  }
  .zwc-2col-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .zwc-2col-gridbx {
    padding: 40px;
    text-align: center;
    max-width: 550px;
    margin-inline: auto;
  }
  .zwc-2col-gridbx p {
    margin-inline: auto;
  }
  .zwc-gridsec {
    margin-bottom: 60px;
  }
  .zwc-gridsec .content-wrap {
    width: 100%;
  }
  .zwc-gridsec-container {
    border-radius: 0;
    padding: 40px 20px;
  }
  .zwc-gridsec-contentbx {
    padding: 70px 0 0;
  }
  .zwc-gridsec-contentbx h3::after {
    top: -70px;
    left: 0;
  }
  .zwc-bottomcta {
    padding: 80px 0;
  }
  .zwc-gridsec-wrap {
    flex-wrap: wrap;
    justify-content: center;
    gap: 60px;
}
.zwc-gridsec-contentbx{
  width: 100%;
}
}
@media screen and (max-width: 767px) {
  .zwc-bottomcta p,.zwc-banner-content p,.zwc-2col-wrap-2 .zwc-2col-img,.zwc-2col-wrap-1 .zwc-2col-img{
    width: 100%;
  }
  .zwc-2col-gridbx{
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 30px;
  }
  .zwc-banner .zwc-s-ticket{
    top: 0;
  }
  .zw-group-img1 {
    width: 45%;
    top: 200px;
}
.zwc-wrapper h1{
  width: 100%;
}
.zwc-wrapper .content-wrap{
  max-width: 480px;
}
}
@media screen and (max-width: 480px) {
  .zwc-banner .zwc-s-ticket {
    height: 18%;
  }
  .zwc-gridsec-wrap{
    gap: 30px;
  }
}
/* Dark header */
.zw-product-header {
  background-color: #023231;
}