/* Base styles ends */
.zwc-row{
  display: flex;
  align-items: center;
}
.col-8{
  flex-basis: 60%;
}
.col-4{
  flex-basis: 40%;
}
section{
  padding: 85px 0;
}
h2{
  font-size: 44px;
}
/* Base styles starts */

/* Banner section styles starts */
.zwc-banner-section{
background-color: #FFEEE5;
text-align: center;
}
.zwc-banner-section .product-logo{
  margin-bottom: 18px;
}
.zwc-banner-section .product-logo img{
  width: 17%;
}
.zwc-banner-section .image{
  position: relative;
  margin-bottom: 94px;
  margin-top: 39px;
}
.zwc-banner-section .decore-text-one,.zwc-banner-section .decore-text-two{
position: absolute;
font-family: var(--zf-splfont-cursive-one-regular);
font-size: 92px;
text-shadow: 0px 3px 0px #FFCECE;
}
.zwc-banner-section .decore-text-one{
  right: 0;
  left: 0;
  margin: auto;
  top: -5%;
}
.zwc-banner-section .decore-text-two{
  bottom: -23%;
  right: 34%;
}
.zwc-banner-section .heading{
  width: auto;
  max-width: 910px;
  margin: 0 auto 56px;
}
.zwc-banner-section h1{
  background: linear-gradient(90deg, #ff2d2d 0, #004fff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--zf-splfont-cursive-one-regular);
  font-size: 141px;
  margin: 0;
  line-height: 1;
}
.zwc-banner-section h2,.zwc-banner-section h3{
  font: 31px / 1.25 Zoho_Puvi_Medium;
}
.zwc-banner-section h3{
    margin-top: 40px;
}
.zwc-banner-section p{
  font-size: 19px;
    margin-bottom: 39px;
}
.zwc-banner-section .zwc-video-wrap iframe {
    border-radius: 10px;
    width: 889px;
    margin: 0;
}
.zwc-banner-section .watch-video-btn{
  color: #000;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 12px 14px;
  text-transform: uppercase;
  font: 15px / 1.25 Zoho_Puvi_Medium;
  display: block;
  width: max-content;
  margin: auto;
}
.zwc-banner-section .watch-video-btn img{
  width: 30px;
  vertical-align: middle;
  padding-left: 10px;
  margin-top: -2px;
}

.zwc-banner-section ul.brand-logos li span {
background: url(/sites/zweb/images/salesiq/zsalesiq-brand-sprites.png);
display: block;
background-size: 2300px;
background-repeat: no-repeat;
width: 125px;
height: 50px;
background-position: 0 0;
margin: 0 auto;
transition: all 1s cubic-bezier(0.39,0.575,0.565,1.3);
position: relative
}
.zwc-banner-section ul.brand-logos li{
border-radius: 10px;
background: rgba(255, 255, 255, 0.70);
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04);
height: 86px;
margin: 0 10px;
display: flex;
align-content: center;
flex-wrap: wrap;
}
.zwc-banner-section .slick-track {
display: flex;
align-items: center;
}
.zwc-banner-section ul.brand-logos{
padding: 20px 0 0;
display: flex;
display: -ms-flexbox;
justify-content: center;
-ms-flex-pack: center;
align-items: center;
-ms-flex-align: center;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
    margin-bottom: 43px;
}

.zwc-banner-section ul.award span.icons.award-2 {
background-position: -116px -11px
}

.zwc-banner-section ul.award span.icons.award-3 {
background-position: -237px -11px
}

.zwc-banner-section .zs-brand-section h2 span {
font-family: var(--secondaryfont-bold)
}

.zwc-banner-section span.icons.ifl {
background-position: -281px -23px
}

.zwc-banner-section span.icons.karvy {
background-position: -146px -23px
}

.zwc-banner-section span.icons.fundsindia {
background-position: -420px -25px;
width: 160px;
height: 42px;
transform: scale(0.8)
}

.zwc-banner-section span.icons.nok {
background-position: -1016px -85px;
width: 112px;
height: 25px
}

.zwc-banner-section span.icons.renault {
background-position: -476px -78px;
width: 92px;
height: 42px
}

.zwc-banner-section span.icons.mahindra {
background-position: -1442px -16px;
background-size: 1800px;
width: 100px
}

.zwc-banner-section span.icons.suzukiservice {
background-position: -1542px -13px;
background-size: 1800px;
width: 60px;
height: 60px
}

.zwc-banner-section span.icons.georgia {
background-position: 0 0;
width: 136px;
height: 72px
}

.zwc-banner-section span.icons.zee5 {
background-position: -1765px -8px;
width: 70px;
height: 66px;
background-size: 1830px
}
.zwc-banner-section .image img{
  width: 58%;
}
/* Banner section styles endss */

/* Timeline section starts */
.zwc-timeline-section{
  background: linear-gradient(0deg, #3D0E5A 0%, #0D1748 37.41%, #680E16 100%);;
}
.zwc-timeline-section .content-wrap {
  background-color: #FFEBEB;
  border-radius: 32px;
  padding: 99px 85px;
}
.zwc-timeline-section .heading{
  width: auto;
  max-width: 718px;
  margin: auto;
  text-align: center;
}
.zwc-timeline-section .heading p{
  font-size: 19px;
}
.zwc-timeline-section .content-box-wrap {
  margin: 74px auto 0 auto;
}
.zwc-timeline-section .content-box-wrap .content-box h3{
  font-size: 25px;
  margin-bottom: 10px;
}
.zwc-timeline-section .content-box-wrap .content-box p{
  margin-bottom: 0;
  font-size: 19px;
  width: 97%;
}
.zwc-timeline-section .content-box-wrap .icon {
  width: 33px;
  height: 33px;
margin-bottom: 6px;
background-image: url(/sites/zweb/images/salesiq/salesiq-journey/sprite-icon.png);
background-size: 430px;
background-repeat: no-repeat;
}
.zwc-timeline-section .content-box-wrap .icon-1{
background-position: 0 0px;
}
.zwc-timeline-section .content-box-wrap .icon-2{
background-position: -40px 0;
}
.zwc-timeline-section .content-box-wrap .icon-3{
background-position: -79px 0;
width: 34px;
}
.zwc-timeline-section .content-box-wrap .icon-4{
background-position: -119px 0;
}
.zwc-timeline-section .content-box-wrap .icon-5{
background-position: -159px 0;
}
.zwc-timeline-section .content-box-wrap .icon-6{
background-position: -199px 0;
}
.zwc-timeline-section .content-box-wrap .icon-7{
background-position: -239px 0;
}
.zwc-timeline-section .content-box-wrap .icon-8{
background-position: -278px 0;
width: 33px;
}
.zwc-timeline-section .content-box-wrap .icon-9{
background-position: -318px 0;
width: 33px;
}
.zwc-timeline-section .content-box-wrap .icon-10{
background-position: -358px 0;
}
.zwc-timeline-section .content-box-wrap .icon-11{
background-position: -398px 0;
}
.zwc-timeline-section .timeline {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
}

.zwc-timeline-section .content-box {
  padding: 0 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

.zwc-timeline-section .content-box::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  right: -10px;
  background-color: #F7C5C5;
  border: 6px solid #FFEBEA;
  outline: 2px solid #F7C5C5;
  top: 45%;
  border-radius: 50%;
  z-index: 1;
}

.zwc-timeline-section .content-box.left {
  left: 0;
}

.zwc-timeline-section .content-box.right {
  left: 50%;
}

.zwc-timeline-section .content-box.left::before {
  content: " ";
  height: 2px;
  position: absolute;
  top: 49%;
  width: 100px;
  z-index: 0;
  right: 4px;
  border-bottom: 2px solid #F7C5C5;
}

.zwc-timeline-section .content-box.right::before {
  content: " ";
  height: 2px;
  position: absolute;
  top: 46%;
  width: 100px;
  z-index: 0;
  left: 4px;
  border-bottom: 2px solid #F7C5C5;
}

.zwc-timeline-section .content {
  padding: 20px 30px;
  background-color: #FFDBDB;
  position: relative;
  border-radius: 10px;
  border: 1.5px solid transparent;
}

.zwc-timeline-section .content-box.left .content:after{
  right: -39px;
}
.zwc-timeline-section .content-box.right .content:after{
  right: auto;
  left: -43px;
} 
.zwc-timeline-section .content-box.right:after{
  left: -10px;
  right: auto;
  top: 42.5%;
}
.zwc-timeline-section .content-box:last-child .content:after{
 display: none;
}
.zwc-timeline-section .read-more-cta{
  color: #101010;
  text-decoration: underline;
  text-align: center;
  margin: 107px auto 0 auto;
  display: block;
  font-family: var(--secondaryfont-semibold);
}
.step-scrolled {
  content: '';
  height: 0px;
  width: 1.5px;
  background: #F00;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 104px;
  z-index: 0;
  transition: height .1s linear;
}
.timeline:before {
  content: '';
  height: 91%;
  width: 1.5px;
  background: #FFDBDB;
  position: absolute;
  left: 0;
  margin: auto;
  right: 0;
  top: 104px;
  z-index: 0;
}
.zwc-timeline-section .content-box.viewed::after,.zwc-timeline-section .content-box.active::after{
  background-color: #F00;
  border: 6px solid #FFEBEA;
  outline: 1.5px solid #F00;
}
.zwc-timeline-section .content-box.viewed .content,.zwc-timeline-section .content-box.active .content{
  border: 1.5px solid #F00;
}
.zwc-timeline-section .content-box.viewed.left::before,.zwc-timeline-section .content-box.right.viewed::before,
.zwc-timeline-section .content-box.active.left::before,.zwc-timeline-section .content-box.right.active::before{
  border-bottom: 1.5px solid #F00;
}

/* Timeline section ends */

/* Partner section starts */
.zwc-partner-voice-section{
  background-color: #EBCD8D;
  text-align: center;
  position: relative;
  z-index: 0;
}
.zwc-partner-voice-section:before{
    content: "";
    position: absolute;
    background-image: url(//www.zohowebstatic.com/sites/zweb/images/salesiq/salesiq-journey/partner-left-shape.png);
    background-size: 373px;
    background-repeat: no-repeat;
    bottom: 0;
    left: -4px;
    width: 373px;
    height: 405px;
    z-index: -1;
}
.zwc-partner-voice-section:after{
content: "";
    position: absolute;
    background-image: url(//www.zohowebstatic.com/sites/zweb/images/salesiq/salesiq-journey/partner-right-shape.png);
    background-size: 413px;
    background-repeat: no-repeat;
    bottom: 0;
    right: 0;
    left: auto;
    width: 413px;
    height: 572px;
    z-index: -1;
}
.zwc-partner-voice-section .heading{
  width: auto;
  max-width: 713px;
  margin: auto;
}
.zwc-partner-voice-section .zwc-video-wrap{
  width: 100%;
  margin: 51px auto 0;
}
.zwc-partner-voice-section .zwc-video-wrap iframe{
  border-radius: 10px;
   width: 889px;
    border-radius: 10px;
}

/* Partner section ends */
/* CEO section starts  */
.zwc-ceo-section .zwc-box{
  background-color: #f1f1f1;
  border-radius: 32px;
  padding: 71px 84px;
}
.zwc-ceo-section .content{
  padding-left: 71px;
}
.zwc-ceo-section .zwc-box p.main-content:after{
  content: "";
  position: absolute;
  background-image: url(/sites/zweb/images/salesiq/salesiq-journey/quote.png);
  background-size: 123px;
  width: 123px;
  height: 97px;
  top: -8%;
  left: -3%;
  z-index: -1;
}
.zwc-ceo-section p.main-content{
  font-size: 25px;
  padding-top: 29px;
  position: relative;
  z-index: 0;
    width: 90%;
}
.zwc-ceo-section .role-wrap{
  padding-left: 20px;
  height: max-content;
  position: relative;
}
.zwc-ceo-section .role-wrap::before{
  content: "";
  position: absolute;
  border-left: 3px solid #BF2424;
  width: 3px;
  height: 53px;
  top: 8px;
  left: 0%;
}
.zwc-ceo-section span.name{
  font-size: 26px;
  display: block;
  margin-top: 30px;
}
.zwc-ceo-section span.role{
  font-size: 16px;
  display: block;
}
.zwc-ceo-section img{
 width: 90%;
}
.zwc-ceo-section .zwc-video-wrap {
    width: 50%;
    margin: 0;
}
.zwc-ceo-section  iframe {
    width: 389px;
    height: 659px;
    padding: 22px;
    background: #2f65bf;
    border-radius: 12px;
}
.zwc-ceo-section h2 span{
   font-family: var(--zf-primary-extrabold);
}
/* CEO section ends  */

/* Photobooth section styless starts */
.zwc-photobooth-section{
background:linear-gradient(0deg, #361087 0%, #233692 37.41%, #921E20 100%);
  /*background-color: #FFEBEB; */
 text-align: center;
}
.zwc-photobooth-section .heading{
  width: auto;
  max-width: 713px;
  margin: auto;
}
.zwc-photobooth-section h2{
  color: #fff;
}
.zwc-photobooth-section p{
  color: #fff;
  font-size: 19px;
}

.zwc-photobooth-section .pb-intro-box-right p {
color: #000;
text-align: left;
font-size: 24px;
width: 98%;
}
.zwc-photobooth-section .pb-intro-box-right p span{
font-family: var(--secondaryfont-semibold);
}
.zwc-pb-video-wrap {
  text-align: center;
}
.zwc-pb-video-wrap {
  text-align: center;
  position: relative;
  max-width: 972px;
  margin: 0 auto 13px;
}
.zwc-pb-video-box.pb-inactive:not(.is-activated) .zwc-pb-video-wrap {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.zwc-pb-video-box.pb-inactive.is-activated .zwc-pb-video-wrap {
  -webkit-animation: scale-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
  animation: scale-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
  animation-delay: .8s;
}
.zwc-pb-video-box.pb-inactive {
  display: grid;
  margin-top: 43px;
  justify-items: center;
  align-items: start;
}
.zwc-pb-video-box {
  position: relative;
}
.pbintro-access-btn{
  cursor: pointer;
  text-align: left;
} 
.pb-intro-box {
  display: grid;
  background-color: #FDD6D6;
  width: 100%;
  position: absolute;
  max-width:100%;
  align-content: center;
  gap: 50px;
  border-radius: 30px;
  padding: 134px 0;
}
.pb-intro-top {
  display: flex;
  align-items: center;
  padding: 0px 80px 0px 80px;
  justify-content: space-between;
  justify-items: center;
  gap: 38px;
  flex-direction: row;
  position: relative;
  z-index: 0;
}
.pb-intro-box-left,.pb-intro-box-right{
  width: 50%;
}
/* .pb-intro-top:after{
  content: "";
  position: absolute;
  background-image: url(/sites/zweb/images/salesiq/salesiq-journey/wave-image.png);
  background-size: 100%;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  bottom: -27%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: -1;
}
.pb-intro-top:before{
  content: "";
  position: absolute;
  background-image: url(/sites/zweb/images/salesiq/salesiq-journey/snap-banner.png);
  background-size: 100%;
  width: 201px;
  height: 100%;
  background-repeat: no-repeat;
  bottom: -62%;
  left: 17%;
  margin: auto;
} */
.pbintro-access-btn img{
  width: 211px;
}
.pb-consent-box {
  font-size: 18px;
  text-align: center;
  max-width: 720px;
  font-family: var(--primaryfont-semibold);
  margin: 0 auto;
  border-top: 1px dashed;
  padding-top: 30px;
}
.zwc-pb-video-box.is-activated .pb-intro-box {
  -webkit-animation: slide-out-elliptic-top-bck 0.6s ease-in both;
  animation: slide-out-elliptic-top-bck 0.6s ease-in both;
  animation-delay: 0.2s;
}
.slide-out-top {
  -webkit-animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
  animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
.slide-out-elliptic-top-bck {
  -webkit-animation: slide-out-elliptic-top-bck 0.7s ease-in both;
  animation: slide-out-elliptic-top-bck 0.7s ease-in both;
}
@-webkit-keyframes slide-out-top {
  0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
  }
  100% {
      -webkit-transform: translateY(-1000px);
      transform: translateY(-1000px);
      opacity: 0;
  }
}
@keyframes slide-out-top {
  0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
  }
  100% {
      -webkit-transform: translateY(-1000px);
      transform: translateY(-1000px);
      opacity: 0;
  }
}
@-webkit-keyframes slide-out-elliptic-top-bck {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  100% {
      -webkit-transform: scale(0);
      transform: scale(0);
      opacity: 0.5;
  }
}
@keyframes slide-out-elliptic-top-bck {
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;
  }
  100% {
      -webkit-transform: scale(0);
      transform: scale(0);
      opacity: 0.5;
  }
}
.pb-canvas-wrap {
  box-shadow: 15px 15px 0px -3px #000;
  line-height: 0;
  margin: 0 auto 13px;
  display: none;
}
.photobooth-action-box {
  display: grid;
  text-align: center;
  justify-content: center;
  padding-top: 30px;
}

.photobooth-action-box span.lets-smaile-btn {
  background: #fff;
  display: inline-grid;
  position: relative;
  align-content: center;
  justify-items: center;
  box-shadow: 5px 5px 0px 0px #000;
  cursor: pointer;
  color: #ed433b;
  padding: 15px 20px;
  grid-template-columns: auto auto;
  font-family: var(--zf-primary-semibold);
  gap: 10px;
  align-items: center;
}
.photobooth-action-box span.lets-smaile-btn:before {
  content: "";
  display: block;
  background-image: url(/sites/zweb/images/salesiq/salesiq-journey/camera-icon.png);
  background-size: 100% auto;
  width: 35px;
  background-repeat: no-repeat;
  height: 28px;
  position: relative;
  top: 1px;
}
.photobooth-action-box .take-snap-btn {
  padding: 0px 25px;
  background: #fff;
  display: inline-grid;
  /* width: 100px; */
  position: relative;
  height: 60px;
  align-content: center;
  justify-items: center;
  box-shadow: 5px 5px 0px 0px #000;
  cursor: pointer;
  border: none;
  /* visibility: hidden; */
}
.photobooth-action-box .take-snap-btn:hover {
  box-shadow: 5px 5px 0px -1px #000;
  background: #eee;
}
.photobooth-action-box .take-snap-btn.slide-in-right {
  visibility: visible;
}
.photobooth-action-box .take-snap-btn .snap-camera-icon {
  content: "";
  display: inline-block;
  background-image: url(/sites/zweb/images/salesiq/salesiq-journey/pb-sprite-icons.png);
  background-size: 85px auto;
  width: 44px;
  background-repeat: no-repeat;
  height: 34px;
}
.photobooth-share-action-box {
  padding-top: 0px;
  gap: 20px;
  justify-content: center;
  display: flex;
  flex-direction: column-reverse;
}
.photobooth-share-action-box.is-active {
  display: flex;
}
.photobooth-share-action-box ul {
  display: inline-grid;
  grid-auto-flow: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: relative;
  background: #fff;
  box-shadow: 5px 5px 0px 0px #000;
  padding: 0 10px;

}
.photobooth-share-action-box ul li.zwc-ss-list {
  width: 50px;
  height: 60px;
  align-items: center;
  display: grid;
  justify-content: center;
  position: relative;
}
.share-moment-info {
  text-align: center;
  font-size: 15px;
  line-height: 1.4;
  font-family: var(--primaryfont-bold);
  border-right: 2px solid;
  margin-right: 5px;
  background: #fff;
  box-shadow: 5px 5px 0px 0px #000;
  color: #ea3e36;
  height: 50px;
  display: inline-grid;
  align-items: center;
  text-transform: capitalize;
  padding: 8px 20px;
}
.photobooth-share-action-box ul li.zwc-ss-list a {
  display: inline-block;
  text-indent: -999px;
  font-size: 0;
  height: 28px;
  width: 32px;
  background-size: 875px auto;
  padding: 0;
  vertical-align: middle;
  color: #000;
  text-decoration: none;
  background: var(--common-elements) no-repeat;
}
.photobooth-share-action-box ul li.zwc-ss-list.zwc-fb-share a {
  background-position: -201px 0;
  background-size: 890px auto;
  width: 29px;
}
.photobooth-share-action-box ul li.zwc-ss-list.zwc-twit-share a {
  background-position: -210px 0;
  width: 25px;
  background-size: 795px auto;
  height: 25px;
}
.photobooth-share-action-box ul li.zwc-ss-list.zwc-linkedin-share a {
  background-position: -300px 0;
  width: 33px;
  height: 27px;
  background-size: 1000px auto;
}
.photobooth-share-action-box ul li.zwc-ss-list.zwc-insta-share a {
  background-position: -362px 0;
  width: 30px;
  background-size: 890px;
}
.photobooth-share-action-box ul li.zwc-ss-list:after {
  content: "";
  position: absolute;
  left: 50%;
  height: 2px;
  background: linear-gradient(45deg, transparent, #c3c3c3, transparent);
  width: 35px;
  border-radius: 10px;
  transform: translateX(-50%);
  top: -5px;
}
.photobooth-share-action-box ul li.zwc-ss-list:first-child:after {
  display: none;
}
.photobooth-action-box.is-active .box-in-top{
  display: none;
}
.photobooth-action-box.is-active .box-in-mid, .photobooth-action-box.is-active .box-in-bot{
  display: flex;
  gap: 15px;
}

/* photobooth canvas css start */
canvas {
  display: block;
  margin: 0 auto;
}
.convas-video-box canvas#canvas {
  max-width: 100%;
  transition: all .25s linear;
}
.convas-video-box {

  position: relative;
  line-height: 0;
  margin: 0 auto;
  background: radial-gradient(rgba(255,255,255,0), black);
  /* min-height: 591px; */
}
.convas-video-box video {
  width: 34%;
  height: 82%;
  object-fit: cover;
  margin: 0 0 0 0;
  position: absolute;
  top: 0px;
  right: -330px;
  /* opacity: .5;*/
  top: calc(50% + 3px);
  left: 50%;
  transform: translate(-50%, -50%) scaleX(-1);
}
.stop-photo-btn,
.after-snap-action-box {
  display: none;
}
.after-snap-action-box {
  display: none;

}
.after-snap-action-box.is-active {
  display: grid;
}
.after-snap-action-box-in{
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
}
.after-snap-action-box button, .photobooth-action-box #retake {
padding: 0px 25px;
background: #fff;
display: inline-grid;
position: relative;
height: 60px;
align-content: center;
justify-items: center;
box-shadow: 5px 5px 0px 0px #000;
cursor: pointer;
border: none;
}
.after-snap-action-box button:hover, .photobooth-action-box #retake:hover, .download-action a#download:hover{
  box-shadow: 5px 5px 0px -1px #000;
    background: #eee;
}
.after-snap-action-box #retake .snap-retake-icon, .photobooth-action-box #retake .snap-retake-icon {
  content: "";
  width: 27px;
  height: 29px;
  background: url(/sites/zweb/images/salesiq/salesiq-journey/pb-sprite-icons.png);
  background-repeat: no-repeat;
  background-size: 125px auto;
  display: block;
  background-position: -98px -10px;
  display: inline-block;
}
.download-action a#download{
  padding: 0px 25px;
background: #fff;
display: inline-grid;
position: relative;
height: 60px;
align-content: center;
justify-items: center;
box-shadow: 5px 5px 0px 0px #000;
cursor: pointer;
border: none;
}
.download-action .snap-download-icon{
  content: "";
  width: 22px;
  height: 27px;
  background: url(/sites/zweb/images/salesiq/salesiq-journey/pb-sprite-icons.png);
  background-repeat: no-repeat;
  background-size: 90px auto;
  display: block;
  background-position: -48px -5px;
}

.snap-action-inner {
  display: grid;
  grid-auto-flow: column;
  gap: 20px;
}
.after-snap-action-box #download button:before {
  content: "";
  width: 32px;
  height: 30px;
  background: url(/sites/zweb/images/salesiq/salesiq-journey/pb-sprite-icons.png);
  background-repeat: no-repeat;
  background-size: 125px auto;
  display: block;
  background-position: -66px -5px;
}
.download-share-box {
  position: absolute;
  right: -95px;
  /* bottom: 170px; */
  bottom: 90px;
  z-index: 0;
}
#countdown {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  transform: translate(-50%, -50%);
  transition: 1s;
  font-size: 0vw;
  opacity: 50%;
  color: #ffffff;
  width: 330px;
  height: 485px;
  align-items: center;
  font-family: var(--zf-primary-semibold);
  text-shadow: 2px 2px 10px BLACK;
  pointer-events: none;
}

.snap-share-info-content {
  font-size: 18px;
  font-family: var(--zf-secondary-bold);
  line-height: 1.6;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding: 40px 40px;
  position: absolute;
  bottom: 0;
  transform: scale(0);
  transition: transform .3s linear, opacity .3s linear;
  opacity: 0;
}

.snap-share-info-content span {
  color: #ffca00;
}

.ss-info-content-box {
  padding: 0 50px;
  position: relative;
}

.ss-info-content-box span.star-icon-left {
  content: "";
  width: 30px;
  height: 30px;
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.ss-info-content-box span.star-icon-right {
  content: "";
  width: 30px;
  height: 30px;
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.ss-info-content-box span.star-icon svg{
  width: 100%;
  height: 100%;
}

.box-in-mid, .box-in-bot{
  display: none;
}
.pb-canvas-video-box {
  /* position: relative; */
  position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.pb-canvas-video-box.snap-completed .convas-video-box canvas#canvas {
  transform: scale(1);
  top: 0;
  position: relative;
}
.snap-share-info-content{
  display: grid;
}
.pb-canvas-video-box.snap-completed .snap-share-info-content {
  opacity: 1;
}
.pbintro-frame img{
  width: 554px;
  border: 7px solid #fff;
}
/* photobooth canvas css end */


/* Photobooth section styles ends*/

/* CTA Section starts */
.zwc-cta-section{
text-align: center;
}
.zwc-cta-section h2{
  text-align: center;
  margin-bottom: 27px;
}
.zwc-cta-section a.cta-btn{
  text-align: center;
  text-transform: uppercase;
  padding: 13px 38px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  display: block;
  width: max-content;
  margin: auto;
} 
/* CTA Section ends */

.i18n-ja .zwc-banner-section .decore-text-one, .i18n-ja .zwc-banner-section .decore-text-two  {
    font-size: 72px;
}


.zwc-ceo-video-section .zwc-wrap{
        display: flex;
    background-color: #f1f1f1;
        padding: 69px 58px;
    border-radius: 40px;
}
.zwc-ceo-video-section .zwc-wrap iframe{
     width: 389px;
    height: 653px;
    padding: 22px;
    background: #2f65bf;
}
.zwc-ceo-video-section .heading h2{
    font-size: 57px;
    text-align: left;
    width: 71%;
    margin-left: 98px;
}
.zwc-ceo-video-section .heading h2 span{
  font-size: 60px;
    font-family: var(--zf-primary-extrabold);
}
.zwc-ceo-video-section .heading {
    width: 50%;
    max-width: 50%;
}
.zwc-ceo-video-section .zwc-video-wrap {
    width: 50%;
    margin: 0;
}

.zwc-brand-sec {
    padding: 80px 0
}
.zwc-brand-sec h2 {
    font-family: var(--zf-primary-semibold);
    text-align: center;
    margin-bottom: 30px;
    font-size: 30px
}
.zwc-brand-sec .zwc-more-customer {
    text-align: center
}
.zwc-brand-sec .zwc-more-customer a {
    text-align: center;
    color: var(--zwc-link-clr);
    font-family: var(--zf-primary-semibold);
    font-size: 16px;
    display: inline-block;
    margin: 30px auto 0;
    position: relative;
    padding: 0 35px 4px 0;
    text-decoration: underline
}
.zwc-brand-sec ul.global-count {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}
.zwc-brand-sec ul.global-count li {
    font-family: var(--primaryfont-semibold);
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 50PX;
    text-align: center;
    padding: 0 50px;
    position: relative
}
.zwc-brand-sec ul.global-count li span {
    display: block;
    font-size: 15px;
    text-transform: uppercase;
    font-family: var(--primaryfont-regular)
}
.zwc-brand-sec .zwc-salesiq-global-count {
    padding-top: 90px
}
.zwc-brand-sec ul.global-count li:after {
    content: "";
    right: 0;
    width: 1px;
    height: 50px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-left: 1px dotted #bfbfbf
}
.zwc-brand-sec ul.global-count li:last-child:after {
    display: none
}
.zwc-brands-wrapper{
    position: relative;
}
.zwc-brand-sec .zwc-brands-wrap:before,.zwc-brand-sec .zwc-brands-wrap:after {
    background-image: linear-gradient(92deg,#ffeee5  35%,rgba(255,255,255,0) 100%)
}
.zwc-brand-sec .zwc-arrow::before {
    content: "";
    width: 16px;
    height: 2px;
    background: var(--zwc-link-clr);
    top: 11px;
    position: absolute;
    right: 0;
}
.zwc-brand-sec .zwc-arrow::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--zwc-link-clr);
    top: 7px;
    border-bottom: 2px solid var(--zwc-link-clr);
    transform: rotate(-45deg);
    position: absolute;
    right: 0;
}
.zwc-brand-sec span.zwc-arrow {
    top: 12px;
    right: 15px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    position: absolute;
    width: 20px;
    height: 20px;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    right: 0
}

/* Responsive Starts starts */
@media only screen and (min-width: 1200px) {
  .snap-action-inner a#download {
      position: absolute;
      right: -95px;
      bottom: 95px;
      z-index: 1;
  }
  .photobooth-share-action-box {
      -webkit-animation: scale-in-top .75s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
      animation: scale-in-top .75s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
      animation-delay: 0.6s;
  }
}
@media only screen and (max-width:1440px){
  .zwc-banner-section h1 {
      font-size: 120px;
  }
  h2 {
      font-size: 38px;
  }
  .zwc-ceo-section p.main-content {
      font-size: 22px;
  }
  .zwc-ceo-section .role-wrap::before {
      height: 100%;
      top: 0;
  }
  .zwc-timeline-section .content-box-wrap .content-box h3 {
      font-size: 22px;
  }
  .zwc-timeline-section .content-box-wrap .content-box p {
      font-size: 17px;
  }
  .step-scrolled,.timeline:before{
      top: 93px;
  }
  .zwc-partner-voice-section:before {
    background-size: 426px;
    width: 426px;
    height: 463px;
  }
  .zwc-partner-voice-section:after {
    background-size: 338px;
    width: 338px;
    height: 467px;
}
.zwc-photobooth-section .pb-intro-box-right p {
  font-size: 20px;
  width: 100%;
}
.zwc-banner-section .decore-text-two {
  bottom: -26%;
}
.zwc-ceo-video-section .heading h2 {
    font-size: 46px;
}
.zwc-ceo-video-section .heading h2 span {
    font-size: 52px;
}
 .zwc-ceo-section h2 {
        font-size: 34px;
    }
}
@media only screen and (max-width:1199px){
  .step-scrolled,.timeline:before {
      top: 98px;
  }
  .zwc-timeline-section .content-wrap {
      padding: 99px 67px
  }
  .convas-video-box {
    min-height: auto;
}
.zwc-offer-section .content-wrap {
    padding-top: 0;
}
.download-share-box {
position: relative;
bottom: 0;
right: 0;
margin-top: 20px;
}
.after-snap-action-box.is-active {
    gap: 20px;
}
.after-snap-action-box {
    align-items: flex-end;
}
.photobooth-share-action-box ul li.zwc-ss-list:after {
    left: -5px;
    height: 25px;
    width: 2px;
    transform: translateY(-50%);
    top: 50%;
}
.snap-share-info-content{
max-width: 710px;
font-size: 15px;
}

.photobooth-action-box {
position: relative;
}
.photobooth-share-action-box ul{
grid-auto-flow: column;
}
.photobooth-action-box.is-active .box-in-mid, .photobooth-action-box.is-active .box-in-bot{
justify-content: center;
}
.zwc-pb-video-wrap{
margin-bottom: 0;
}
.zwc-banner-section .decore-text-two {
  bottom: -31%;
}
}
@media only screen and (max-width:1080px){
  .zwc-timeline-section .content-wrap {
      padding: 99px 42px;
  }
  .zwc-ceo-section p.main-content {
      font-size: 18px;
  }
  .zwc-ceo-section span.name {
      font-size: 22px;
  }
  .zwc-ceo-section span.role {
      font-size: 14px;
  }
  .zwc-ceo-section .content {
      padding-left: 0;
  }
  .zwc-ceo-section .zwc-box p.main-content:after {
      top: -14%;
  }
.zwc-ceo-video-section .heading h2 {
    font-size: 50px;
}
.zwc-ceo-video-section .heading h2 span {
    font-size: 51px;
}
}
@media only screen and (max-width:1024px){
  .zwc-timeline-section .content-wrap {
      padding: 99px 16px;
  }
  .zwc-banner-section .zwc-video-wrap iframe,.zwc-partner-voice-section .zwc-video-wrap iframe {
        width: 739px;
        height: 420px;
}
.zwc-pb-video-box {
  padding-bottom: 10px;
}
.zwc-banner-section p {
    margin-bottom: 42px;
}
.zwc-partner-voice-section .zwc-video-wrap {
    margin: 26px auto 0;
}
.zwc-ceo-video-section .zwc-wrap iframe{
width: 389px;
}
.zwc-ceo-video-section .zwc-wrap {
    flex-direction: column;
}
.zwc-ceo-video-section .heading h2 {
    font-size: 38px;
    text-align: center;
    width: 100%;
}
.zwc-ceo-video-section .heading h2,.zwc-ceo-video-section .heading h2 span {
           font-size: 38px;
        margin: 0;
        margin-bottom: 15px;
}
.zwc-ceo-video-section .zwc-video-wrap {
    width: 100%;
}
.zwc-ceo-video-section .heading {
    width: 100%;
    max-width: 100%;
}
    .zwc-brand-sec {
        padding: 40px 0;
    }
}
@media only screen and (max-width:991px){
  h2 {
      font-size: 28px;
  }    
  .zwc-ceo-section .zwc-row {
      flex-direction: column;
  }
  .zwc-ceo-section .zwc-box p.main-content:after {
         top: 0%;
        background-size: 86px;
        width: 86px;
        height: 66px;
        z-index: -1;
  }
.zwc-ceo-section p.main-content {
    width: 100%;
}
  .zwc-ceo-section .zwc-box {
      background-color: #f1f1f1;
      border-radius: 32px;
      padding: 71px 84px;
  }
  .zwc-ceo-section .zwc-box .image {
      text-align: center;
        margin-top: 59px;
  }
  .zwc-ceo-section .zwc-box .image img{
      width: 86%;
      margin-top: 45px;
  }

.zwc-ceo-section .zwc-video-wrap {
    width: 100%;
}
  .zwc-photobooth-section p {
      font-size: 16px;
  }

  .zwc-timeline-section .content-box {
      padding: 0 24px;
  }
  .zwc-timeline-section .content-box {
      width: 100%;
  }
  .zwc-timeline-section .content-box.right {
      left: 0;
      padding-left: 76px;
      margin-bottom: 20px;
  }
  .zwc-timeline-section .content-box.left{
      padding-left: 76px;
      margin-bottom: 20px;
  }
  .left::after, .right::after {
      left: 15px;
  }
  .zwc-timeline-section .content-box.right:after {
      left: 15px;
      top: 47%;
  }
  .step-scrolled, .timeline:before {
      top: 102px;
      left: 24px;
      right: auto;
  }
  .zwc-timeline-section .content-box.left::before {
      top: 51%;
      right: auto;
      left: 15px;
  }
  .zwc-timeline-section .content-box.right::before {
      top: 50%;
      left: 15px;
  }
  .zwc-banner-section .decore-text-two {
    bottom: -34%;
  }
  .zwc-banner-section .decore-text-one {
    top: -11%;
  }
  .pb-intro-box {
    gap: 20px;
    padding: 58px 0;
}
.pb-intro-top {
 gap: 23px;
 flex-direction: column;
}
.pb-consent-box {
    padding: 30px 30px 0px 30px;
    width: 90%;
    font-size: 16px;
}
.after-snap-action-box #retake .snap-retake-icon, .photobooth-action-box #retake .snap-retake-icon{
  transform: scale(.8);
}
.download-action .snap-download-icon{
  transform: scale(.75);
}
.photobooth-action-box .take-snap-btn .snap-camera-icon{
  transform: scale(.75);
}
.zwc-photobooth-section .pb-intro-box-right p {
  text-align: center;
}
.pbintro-access-btn {
  text-align: center;
}
.pbintro-frame img {
  width: 447px;
}
.pb-intro-box-left, .pb-intro-box-right {
  width: 92%;
}
.after-snap-action-box button, .photobooth-action-box #retake, .download-action a#download, .photobooth-action-box .take-snap-btn{
  padding: 0px 15px;
  height: 50px;
}
.photobooth-share-action-box ul li.zwc-ss-list{
  height: 50px;
  width: 45px;
}
.photobooth-share-action-box ul li.zwc-ss-list a{
  transform: scale(.8);
}
.zwc-ceo-video-section .zwc-wrap iframe {
    width: 389px;
    height: 653px;
}
    .zwc-ceo-section iframe {
        width: 389px;
        height: 658px;
    }
}
@media only screen and (max-width: 820px) {
  .pb-intro-box {
    padding: 36px 0;
  }
 }
@media only screen and (max-width:767px){
  h2 {
      font-size: 25px;
  }
  section {
      padding: 42px 0;
  }
  .zwc-banner-section .product-logo img {
      width: 34%;
  }
    .zwc-banner-section p {
        margin-bottom: 27px;
}
  .zwc-ceo-section .zwc-box {
      padding: 60px 58px;
  }
.zwc-banner-section ul.brand-logos {
    margin-bottom: 33px;
}
  .zwc-timeline-section .content-box.left,.zwc-timeline-section .content-box.right{
      padding-left: 56px;
      margin-bottom: 12px;
  }
  .zwc-timeline-section .content-box-wrap .content-box p {
      font-size: 16px;
      width: 100%;
  }
  .zwc-banner-section .image img{
      width: 92%;
  }
  .zwc-banner-section .decore-text-one, .zwc-banner-section .decore-text-two {
      font-size: 72px;
  }
  .zwc-banner-section .decore-text-one {
    top: -37px;
  }

  .zwc-banner-section .decore-text-two {
    bottom: -26%;
  }
  .zwc-banner-section h1 {
      font-size: 62px;
  }
  .zwc-banner-section h2, .zwc-banner-section h3 {
      font: 22px / 1.25 Zoho_Puvi_Medium;
  }
  .zwc-banner-section p {
      font-size: 16px;
  }
  .zwc-banner-section .zwc-video-wrap iframe {
      height: 242px;
  }
  .zwc-banner-section .heading {
      margin: 0 auto 31px;
  }
  .zwc-banner-section h3 {
      margin-top: 43px;
  }
  .zwc-banner-section .brands-slider {
      margin: 31px auto 31px auto;
  }
  .zwc-timeline-section .content-wrap {
      padding: 36px 16px;
  }
  .zwc-timeline-section .content-box-wrap {
      margin: 39px auto 0 auto;
  }
  .zwc-timeline-section .read-more-cta {
      margin: 42px auto 0 auto;
      font-size: 16px;
  }
  .zwc-partner-voice-section .zwc-video-wrap iframe {
      height: 242px;
      width: 100%;
  }
  .pb-intro-box {
      padding: 22px 0;
  }
  .pbintro-frame img {
      width: 60%;
  }
  .pbintro-access-btn img {
    width: 105px;
}
  .pb-intro-top:before {
      width: 122px;
      bottom: -52%;
      left: 7%;
  }
  .zwc-timeline-section .content {
      padding: 15px 21px;
  }
  .step-scrolled, .timeline:before {
      top: 98px;
  }
  .zwc-timeline-section .content-box.right:after {
      left: 13px;
      top: 45%;
  }
  .zwc-timeline-section .content-box::after {
    width: 23px;
    height: 23px;
    border: 5px solid #ffebea;
    right: auto;
    left: 13px;
}
.zwc-timeline-section .content-box.left::before {
  top: 51%;
}
  .zwc-timeline-section .content-box.viewed::after, .zwc-timeline-section .content-box.active::after {
      background-color: #F00;
      border: 5px solid #FFEBEA;
  }

  .zwc-partner-voice-section:before,.zwc-partner-voice-section:after {
    display: none;
  }
  .zwc-banner-section .zwc-video-wrap iframe, .zwc-partner-voice-section .zwc-video-wrap iframe {
    width: 100%;
  }
  .pb-intro-top {
    padding: 0;
    gap: 12px;
  }
  .zwc-photobooth-section .pb-intro-box-right p {
    font-size: 15px;
    width: 83%;
    margin: 0 auto 10px;
  }
  .zwc-pb-video-box.pb-inactive {
    margin-top: 24px;
  }
 .i18n-ja .zwc-banner-section .decore-text-one, .i18n-ja .zwc-banner-section .decore-text-two {
        font-size: 32px;
    }

.zwc-ceo-video-section .zwc-wrap iframe {
    width: 389px;
    height: 653px;
}
    .zwc-ceo-video-section .heading h2, .zwc-ceo-video-section .heading h2 span {
        font-size: 25px;
    }
    .zwc-ceo-section iframe {
        width: 389px;
        height: 658px;
    }
      .zwc-brand-sec h2 {
        font-size: 26px;
        text-align: left;
        max-width: 310px;
  }
}
@media only screen and (max-width:524px){
.step-scrolled, .timeline:before {
  top: 108px;
  left: 25px;
}
.zwc-partner-voice-section .zwc-video-wrap {
    margin: 27px auto 0;
}
.zwc-ceo-video-section .zwc-wrap {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
}


@media only screen and (max-width:480px){
  .content-box h3 {
      font-size: 18px;
  }
  .zwc-partner-voice-section .zwc-video-wrap iframe {
        height: 226px;
  }
  .zwc-banner-section .zwc-video-wrap iframe {
     height: 226px;
  }
  .zwc-timeline-section .content {
      padding: 16px 22px;
  }
  .zwc-timeline-section .content-box-wrap .content-box h3 {
      font-size: 18px;
      margin-bottom: 3px;
  }
  .content-box p {
      font-size: 15px;
  }
  .zwc-photobooth-section {
      padding: 42px 0 72px;
  }

  .zwc-timeline-section .content-box-wrap .content-box p {
      font-size: 15px;
  }
  .zwc-banner-section .decore-text-two {
      bottom: -43%;
  }
.zwc-banner-section .decore-text-one {
  top: -48px;
}
.zwc-banner-section h1 {
  line-height: 56px;
}
.zwc-timeline-section .content-box.left::before {
  top: 49.5%;
}
.zwc-timeline-section .content-box.right::before {
  top: 49%;
}
  .zwc-partner-voice-section.zwc-ceo-video-section .zwc-video-wrap iframe{
    height: 555px;
        width: 100%;
  }
.zwc-ceo-video-section .zwc-wrap iframe {
    width: 389px;
    height: 653px;
}
    .zwc-ceo-section iframe {
        height: 625px;
        width: 370px;
    }
        .zwc-brand-sec h2 {
        max-width: 230px;
    }
}

@media only screen and (max-width:375px){
  .zwc-banner-section .decore-text-one, .zwc-banner-section .decore-text-two {
    font-size: 56px;
  }
}
/* Responsive Starts ends */


/* Confetti Animaiton styles starts */
 @keyframes confetti-slow {
  0% {
      transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
 }
  100% {
      transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg);
 }
}
@keyframes confetti-medium {
  0% {
      transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
 }
  100% {
      transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg);
 }
}
@keyframes confetti-fast {
  0% {
      transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
 }
  100% {
      transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg);
 }
}
.container {
  width: 100vw;
  height: 100vh;
  display: fixed;
  top: 0px;
  position: absolute !important;
}
.confetti-container {
  perspective: 700px;
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.confetti {
  position: absolute;
  z-index: 1;
  top: -10px;
  border-radius: 0%;
}
.confetti--animation-slow {
  animation: confetti-slow 2.25s linear 1 forwards;
}
.confetti--animation-medium {
  animation: confetti-medium 1.75s linear 1 forwards;
}
.confetti--animation-fast {
  animation: confetti-fast 1.25s linear 1 forwards;
}
/* Confetti Animaiton styles ends */




.zw-product-header{
  display: none;
}

.zwc-banner-section .heading {
  margin: 0 auto 0;
}
.zwc-ceo-video-section{
    background-color: #fff;
}
.zwc-ceo-video-section:before,.zwc-ceo-video-section:after{
  display: none;
}
.zwc-ceo-video-section{
  display: none;
}