:root {
  --banner-bg: #130033;
  --section-bg: #f6f6ff;
  --text-color: #ffff;
  --letter-space: -2px;
  --line-gap: 0 0 0 27px var(--banner-bg), 0 0 0 28px #ffffff85,
    0 0 0 58px var(--banner-bg), 0 0 0 59px #ffffff57,
    0 0 0 87px var(--banner-bg), 0 0 0 88px #ffffff38,
    0 0 0 123px var(--banner-bg), 0 0 0 124px #ffffff1c;

}

/* header changes  */
.act-btn {
  padding: 13px 30px;
}

.zwc-banner:before {
  content: '';
  display: block;
  height: 68px;
}
.zwc-banner {
  margin-block-start: -68px;
}
/* common style  */

.zwc-wrap h3 {
  font-size: clamp(28px, 2.8vw, 32px);
}

.zwc-wrap h1 {
  font-size: clamp(36px, 5.5vw, 60px);
  letter-spacing: var(--letter-space);
}

.zwc-wrap p {
  font-size: 18px;
}

.zwc-header-max {
  max-width: var(--header-max, 680px);
  margin-inline: auto;
}

.zwc-par-max {
  max-width: var(--par-max, 830px);
  margin-inline: auto;
}

.zwc-section-padding {
  padding-block: var(--section-padding, clamp(40px, 8vw, 120px));
}

.zwc-section-title {
  text-align: center;
  padding-bottom: var(--section-title-padding, clamp(20px, 2.5vw, 45px));
}

h2 {
  font-size: var(--h2-font,clamp(30px, 5vw, 48px));
  font-family: var(--zf-primary-bold);
}

/* banner section  */
.zwc-banner {
  text-align: center;
  background-color: var(--banner-bg);
  color: var(--text-color);
  --section-padding:clamp(40px, 8vw, 90px);
  --header-max: 900px;
}

.zwc-banner-img {
  position: relative;
  z-index: 1;
  overflow: hidden;
  max-width: 1280px;
  margin: auto;
  width: 90%;
}

.zwc-banner-user {
  vertical-align: bottom;
  transform: translateX(30%);
}

.zwc-banner-top-img {
  position: absolute;
  display: flex;
  width: 63%;
  justify-content: space-between;
  top: 4%;
  left: 22%;
}

.zwc-banner-bottom-img {
  position: absolute;
  display: flex;
  width: 80%;
  justify-content: space-between;
  bottom: 7%;
  left: 15%;
}

.zwc-banner-main-img:after {
  content: "";
  width: 450px;
  aspect-ratio: 1;
  display: block;
  position: absolute;
  bottom: -50%;
  left: 50%;
  transform: translateX(-45%);
  background: #411985;
  border-radius: 50%;
  box-shadow: var(--line-gap);
  z-index: -1;
  max-width: 50%;
}

.zwc-banner-user {
  max-width: 50%;
}

.zwc-inst-icon {
  position: absolute;
  top: 44%;
  right: 31%;
  width: 3%;
}

.zwc-ln-icon {
  position: absolute;
  left: 37%;
  top: 30%;
  width: 4%;
}

.zwc-twitter-icon {
  position: absolute;
  top: -8px;
  left: 0;
  background-image: url(https://www.zohowebstatic.com/sites/zweb/images/otherbrandlogos/twitter.svg);
  background-color: #fff;
  background-size: 51% 90%;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  border-radius: 50%;
  width: 30%;
  min-width: 25px;
  aspect-ratio: 1;

}

.zwc-fb-img {
  position: relative;
  width: 25%;
}

.zwc-post-img {
  width: 12%;
}

.zwc-facebook-icon {
  position: absolute;
  width: 12%;
  aspect-ratio: 1;
  left: 52%;
  top: 18%;
}

.zwc-shop-img {
  position: relative;
  width: 22%;
}

.zwc-calander-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  transform: translate(25%, -35%);
}

.zwc-twitter-img {
  position: relative;
  width: 18%;
}

/* social  */

.zwc-social-media {
  background-color: var(--section-bg);
}

.zwc-grid-social-media {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: clamp(20px, 4vw, 32px);
}

.zwc-social-card {
  padding-left: clamp(20px, 2.5vw, 30px);
  border-left: 2.6px solid var(--border-card-color, #ffc83b);
}

.zwc-social-card:nth-child(2) {
  --border-card-color: #3bb9ff;
}

.zwc-social-card:nth-child(3) {
  --border-card-color: #ff7c7c;
}

.zwc-social-card:nth-child(4) {
  --border-card-color: #22cb66;
}

.zwc-social-card p {
  margin-bottom: 8px;
}

.zwc-social-count {
  font-size: clamp(28px, 4.8vw, 46px);
  font-family: var(--zf-primary-semibold);
}
.percent:after {
  content: "%";
  display: inline-block;
}

/* social media marketing */

.zwc-maketing-common-section {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 30px);
  padding-inline: clamp(24px, 4vw, 75px);
  justify-content: space-between;
  --section-padding: clamp(30px , 4vw , 80px );
}

.zwc-connect {
  background: #f8f8f8;
  border-radius: 20px;
  flex-direction: row-reverse;
}

.zwc-power h2 {
  text-align: center;
}

.zwc-interaction {
  --section-padding: 0 clamp(30px, 8vw, 120px);
  text-align: center;
}

.zwc-platform {
  background-color: #1b1141;
  color: #fff;
  --par-max: 960px;
}


.zwc-grid {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.zwc-grid-card {
  padding: clamp(30px,4.5vw,50px) clamp(20px,4vw,50px) clamp(30px,4.2vw,40px);
  border-radius: 10px;
  border: 1px solid #3b2a7d;
  width: calc((100% / var(--card-count , 3)) - 20px);
}

h4 {
  font-family: var(--secondaryfont-regular0);
  letter-spacing: -1px;
}

.zwc-grid-card h4:before {
  content: "";
  display: block;
  width: 55px;
  aspect-ratio: 1;
  background-image: url(/sites/zweb/images/marketingautomation/social-media-customer/sprite.svg);
  margin-bottom: 30px;
  background-size: 350px;
  background-position: var(--icon-postion, 0px 0px);
  background-repeat: no-repeat;
}

.zwc-grid-card:nth-child(2) h4:before {
  --icon-postion: -55px 0px;
}

.zwc-grid-card:nth-child(3) h4:before {
  --icon-postion: -110px 0px;
}

.zwc-grid-card:nth-child(4) h4:before {
  --icon-postion: -168px 0px;
}

.zwc-grid-card:nth-child(5) h4:before {
  --icon-postion: -223px 0px;
}
.zwc-grid-card:nth-child(6) h4:before {
  --icon-postion: -304px 0;
  width: 70px;
  height: 55px;
}

.zwc-grid-card h4 {
  margin-bottom: 20px;
  font-family: var(--primaryfont-semibold);
  font-size: clamp(21px, 3vw, 23px);
}

.zwc-automation .content-wrap {
  display: flex;
  column-gap: 80px;
  border-radius: 16px;
  overflow: hidden;
  background: #ffff;
  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.06);
}

.zwc-automation-text {
  padding: 78px 70px 80px 0;
}

.zwc-automation-img {
  background-color: #ffebb6;
  display: flex;
  align-items: end;
  justify-content: center;
  min-width: 472px;
}

.zwc-automation-text li:before {
  content: "";
  display: block;
  min-width: 22px;
  height: 22px;
  background-image: url(/sites/zweb/images/marketingautomation/social-media-customer/sprite.svg);
  background-position: -285px 27px;
  background-color: #f6ab24;
  border-radius: 50%;
  margin-top: 1px;
  background-size: 355px;

}

.zwc-automation-text li {
  display: flex;
  gap: 14px;
  font-size: 18px;
  padding-bottom: 22px;
}

.zwc-automation-text h2 {
    --h2-font:clamp(28px, 5vw, 44px);
  margin-bottom: 36px;
}

.zwc-pricing-btn {
  background-color: #000;
  color: #fff;
}

.zwc-marketing {
  text-align: center;

}
.zwcp-button-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 10px;
}

/* testimonials section  */
.zwc-testimonials-postion {
  font-size: 14px;
}
.zwc-testimonials {
    --section-padding: 0   clamp(40px, 8vw, 120px);
  background-color: var(--section-bg);
}

.zwc-testimonials-profile-img {
  width: 250px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  padding: 3px;
  border: 2px dashed #8160ff;
  position: relative;
}

.zwc-testimonials-profile-img:before {
  content: "";
  position: absolute;
  display: block;
  background: linear-gradient(180deg, rgba(129, 96, 255, 0) 0%, #b89eff 100%);
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  inset: 0px;
  border: 4px solid #fff;
}

.zwc-testimonials-profile-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.zwc-testimonials-card-inner {
  display: flex;
  gap: 80px;
  align-items: center;
  padding-bottom: 20px;
}


.zwc-testimonials-card {
    margin-right: 30px;
}


.zwc-testimonials-logo {
  margin-bottom: 27px;
}

.zwc-testimonials-card-text p {
  font-size: clamp(18px, 3vw, 24px);
  margin-bottom: clamp( 15px , 4vw , 30px);
}

.zwc-testimonials-profile-name {
  display: block;
  color: #5b30fc;
  font-family: var(--zf-primary-semibold);
  font-size: clamp(20px , 4vw , 22px);
}

.zwc-testimonials h2 {
  --h2-font: clamp(28px, 5vw, 40px);
  max-width: 680px;
  margin-bottom: clamp(30px, 5vw, 60px);;
}
.zwc-automation{
    background-color: var(--section-bg);
}
.zwc-marketing .content-wrap {
  max-width: 840px;
}
  .i18n-ar .zwc-banner-user { transform: translateX(-30%); }
  .i18n-ar .zwc-banner-top-img { right: 22%; left: unset; }
  .i18n-ar .zwc-banner-bottom-img { right: 15%; left: unset; }
  .i18n-ar .zwc-banner-main-img:after { transform: translateX(45%); right: 50%; left: unset; }
  .i18n-ar .zwc-inst-icon { left: 31%; right: unset; }
  .i18n-ar .zwc-ln-icon { right: 37%; left: unset; }
  .i18n-ar .zwc-twitter-icon { right: 0; left: unset; }
  .i18n-ar .zwc-facebook-icon { right: 52%; left: unset; }
  .i18n-ar .zwc-calander-icon { transform: translate(-25%, -35%); left: 0; right: unset; }
  .i18n-ar .zwc-social-card {border-right: 2.6px solid var(--border-card-color,#ffc83b);border-left: unset;padding-right: clamp(20px,2.5vw,30px);padding-left: unset;}
  .i18n-ar .zwc-power h2 { text-align: center; }
  .i18n-ar .zwc-automation-text { padding: 78px 0 80px 70px; }
  .i18n-ar .zwc-testimonials-card { margin-left: 30px; margin-right: unset; }
  .i18n-ar .zwc-section-title, .i18n-ar .zwc-banner, .i18n-ar .zwc-interaction, .i18n-ar .zwc-marketing { text-align: center; }
  .i18n-ar .zwc-section-title *, .i18n-ar .zwc-banner *, .i18n-ar .zwc-interaction *, .i18n-ar .zwc-marketing * { text-align: center; }
  .i18n-ar .percent:before {
    content: "%";
}
  .i18n-ar .percent::after {
    content: none;
}
  .i18n-ar .zwc-play-btn { padding: 7px 9px 7px 24px; transform: translate(-50%,0); right: 50%; left: unset; }
  .i18n-ar .zwc-play-text { float: right; }
  .i18n-ar .zwc-play-ctrl { float: right; margin-left: 10px; margin-right: unset; }
  .i18n-ar .zwc-play-ctrl::before { border-right: 10px solid #8160ff; border-left: unset; transform: translate(50%, -50%); right: 55%; left: unset; }
  .i18n-ar .slick-next:before, .i18n-ar .slick-prev:before { left: 50%; right: unset; }
  .i18n-ar .slick-next:after, .i18n-ar .slick-prev:after { left: 50%; right: unset; }
  .i18n-ar .slick-next { left: unset; right: 55px; }
  .i18n-ar .zwc-banner-user { transform: translate(-30%, 40px); }
.other-lang section.zwc-testimonials.zwc-section-padding {
    display: none;
}
@media screen and (max-width: 1024px) {
  :root {
    --letter-space: 0px;
  }

  .zwc-automation .content-wrap {
    flex-wrap: wrap-reverse;
    justify-content: center;
  }

  .zwc-automation-text {
    padding: 40px;
  }

  .zwc-automation-img {
    width: 100%;
    min-width: unset;
  }
  .i18n-ar .zwc-automation-text { padding: 40px; }
}

@media screen and (min-width: 993.5px) {
  .zwc-power .content-wrap {
    max-width: 1530px;
  }

  .zwc-text-section {
    max-width: 432px;
    width: 60%;
  }

  .zwc-testimonials .content-wrap {
    max-width: 1140px;
  }

  .zwc-inline {
    display: block;
  }
}

@media screen and (max-width: 992px) {
 
  .zwc-grid-social-media{
    grid-template-columns: 1fr 1fr;
  }
  .zwc-grid{
    --card-count:1;
  }

  .zwc-maketing-common-section {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  .content-wrap {
    max-width: 600px;
  }

  .zwc-testimonials-card-inner {
    flex-wrap: wrap;
    justify-content: center;
  }
  .zwc-testimonials{
text-align: center;
  }
  .zwc-testimonials-card-inner{
    text-align: center;    gap: 30px;
  }
  .zwc-power h2 {
    margin: 0;
}
.zwc-testimonials-card {
  margin-inline: 15px;
}
.zwc-testimonials-profile-img{
  width: 210px;
}
  .i18n-ar .zwc-power h2 { margin: 0; }
  .i18n-ar .zwc-maketing-common-section, .i18n-ar .zwc-testimonials, .i18n-ar .zwc-testimonials-card-inner { text-align: center; }
  .i18n-ar .zwc-maketing-common-section *, .i18n-ar .zwc-testimonials *, .i18n-ar .zwc-testimonials-card-inner * { text-align: center; }

}

@media screen and (max-width: 767px) {
  .zwc-grid {
    grid-template-columns: 1fr;
  }

  .zwc-automation-text {
    padding: 40px 20px;
  }
  .zwc-automation-img img {
    max-width: 60%;
}
.zwc-automation-img{
  display: none;
}
  .i18n-ar .zwc-automation-text { padding: 40px 20px; }
}

@media screen and (max-width: 480px) {
  .zwc-grid-social-media {
    grid-template-columns: 1fr;
  }

  .zwc-social-card {
    padding-right: clamp(20px, 2.5vw, 30px);
    max-width: 350px;
  }
  /* .zwc-banner-main-img:after{
    scale: 0.7;
  } */
  .zwc-post-img,.zwc-twitter-img {
    opacity: 0;
}


.zwc-banner-user {
    max-width: 76%;
    transform: translate(15%, 0px) !important;
}

.zwc-banner-top-img {
    width: 70%;
}

.zwc-banner-bottom-img {
    left: 2%;
}

.zwc-banner-main-img:after {
    max-width: 55%;
    left: 46%;
}

.zwc-inst-icon.data-loaded {
    width: 6%;
    right: 15%;
}

.zwc-ln-icon {
    width: 8%;
    left: 10%;
    top: 50%;
}
  .i18n-ar .zwc-banner-user { transform: translate(15%,0) !important; }
  .i18n-ar .zwc-banner-bottom-img { right: 2%; left: unset; }
  .i18n-ar .zwc-banner-main-img:after { right: 46%; left: unset; }
  .i18n-ar .zwc-inst-icon.data-loaded { left: 15%; right: unset; }
  .i18n-ar .zwc-ln-icon { right: 10%; left: unset; }
.other-lang h2 {
    font-size: 21px;
}
}

/* play button  */

.zwc-play-btn {
  display: flex;
      border-radius: 50px;
      border: 2px solid #fff;
      transition: all .3s ease-in-out;
      padding: 7px 24px 7px 9px;
      color: #fff;
      align-items: center;
      cursor: pointer;
      position: absolute;
      bottom: -23px;
      left: 50%;
      z-index: 1;
      box-shadow: 0 4px 4px 0 #0000001f;
      background: #000;
      margin-top: -24px;
      transform: translate(-50%, 0px);
}

.zwc-play-text {
  float: left;
  font-family: var(--zf-primary-medium);
  font-size: 16px;
  line-height: 1.8;
  white-space: nowrap;
}

.zwc-play-ctrl {
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 50%;
  float: left;
  margin-right: 10px;
  position: relative
}

.zwc-play-ctrl::before {
  content: "";
  position: absolute;
  left: 55%;
  top: 50%;
  border-left: 10px solid #8160ff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  transform: translate(-50%,-50%)
}


.zwc-testimonials-slider:has(.slick-arrow) {
  padding-bottom: clamp(40px , 5vw , 80px);
}









.slick-next,
.slick-prev {
  bottom: 0;
  width: 40px;
  height: 40px;
  border: 2px solid #000;
  border-radius: 50%;
  top: unset;
  transform: unset;
}

.slick-next:before,
.slick-prev:before {
  top: 8px;
  right: 15px;
  right: 50%;
  left: unset;
  translate: 50%;
}

.slick-next:after,
.slick-prev:after {
  right: 50%;
  bottom: 7px;
  left: unset;
  translate: 50%;
}

.slick-next:after,
.slick-next:before,
.slick-prev:after,
.slick-prev:before {
  background: #000;
  height: 13px;
}

.slick-next {
  right: unset;
  left: 55px;
}


/* animation css */
/* .zwe-om .zwc-ln-icon{
    
    animation: zoom .4s ease-in-out  forwards;
}
.zwe-om .zwc-inst-icon{
    animation: zoom .8s ease-in-out forwards;
}
.zwe-om .zwc-facebook-icon{
    animation: zoom .6s ease-in-out forwards;
}
.zwe-om .zwc-twitter-icon{
    animation: zoom .8s ease-in-out forwards;
}
.zwe-om .zwc-calander-icon{
    animation: zoom .9s ease-in-out forwards;
} */
/* .zwe-om .zwc-twitter-bg{
    animation: zoom .8s ease-in-out forwards;
    transform-origin: left;
    animation-delay: .8s;
    scale: 0;
} */
.zwc-ln-icon{
    animation: zoom .4s ease-in-out forwards;
    transform-origin: center;
    animation-delay: .8s; scale: 0;
}
.zwc-inst-icon{
  animation: zoom .4s ease-in-out forwards;
  transform-origin: center;
  animation-delay: .6s; scale: 0;
}
.zwc-shop-img,.zwc-fb-img{
    transform-origin: center;
    scale: 0;
    animation:  zoom .4s ease-in-out .2s forwards,
    updown 2.5s ease-in-out 1.8s infinite;
}
.zwc-twitter-img ,.zwc-post-img{
    transform-origin: center;
    scale: 0;
    animation:  zoom .4s ease-in-out forwards,
    updown 2.5s ease-in-out 1.2s infinite;
}

.zwc-banner-user{
  animation: identifier 1s ease-in-out forwards;
  transform: translate(30% , 40px);
}
/* .zwe-om .zwc-banner-main-img:after{
    animation: zoom 1s ease-in-out forwards;
    transform-origin: bottom;

} */
/* .zwe-om .zwc-banner-user{
    animation: zoom .9s ease-in-out forwards;
    transform-origin: bottom;
    animation-delay: 1.4s;
    scale: 0;
} */



.middle-animated [data-animation-1]{
    transform: translateY(0px);
    transition: 1.2s all ;
}

[data-animation-2]{
    transform: translateY(0px);
}
.middle-animated [data-animation-3]{
    transform: translateY(0px);
    transition: 1.9s all ;
}

[data-animation-1],[data-animation-3]{
    transform: translateY(20px);
}


@keyframes zoom{
    from {
        scale: 0;
    }

    to {
        scale: 1;
    }
}
@keyframes updown{
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(8px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes identifier {
  from{
    transform: translate(30% , 40px);

  }
  to{
    transform: translate(30% ,0px);
  }
  
}

/* header optmise  */