/* ==========================================================================
   TEMPLATE CSS — this page's styling, and its editing-mode rules.

   GENERATED by tools/build-portal.py. Do not edit — edit the
   source and re-run, or the next build discards your change.

   Built from: base-style.css + zve.css [assets] + zve.css [runtime]

   The page's own stylesheet first, then the two editor-support parts
   that are written against its selectors: absolute asset URLs, and the
   stand-in for what template.js writes at runtime.
   ========================================================================== */

/* ---- Layout safety --------------------------------------------------------
   One unbroken word must not push the layout out of the page. Two separate
   causes, both needed:

   `overflow-wrap` is an inherited property, so setting it on the section
   wrapper — which every section on this page carries — reaches every heading,
   paragraph and list item without naming any of them.

   `min-width: 0` because a flex item's automatic minimum size is min-content:
   without it a flex item refuses to shrink below its longest word, whatever
   max-width or flex-basis it is given, and the word spills out.

   Applied to every descendant rather than to a list of flex containers. This
   page nests several — .zcol-wrap, the testimonial's author row, the sticky
   card, both slider tracks — and naming them one at a time leaves the next
   one to be found by whoever types a long word into it. It only has any
   effect on flex items, since min-width is already 0 elsewhere, and it is
   safe here because the rule above lets the content break rather than
   overflow.

   Nothing in zohocustom.css or backstage.css sets either, so without this the
   banner headline and the customer's name break the page on any long string. */
.zwc-content-wrap { overflow-wrap: break-word; }
.zwc-content-wrap * { min-width: 0; }

.zw-product-header {
  background: linear-gradient(10deg, #151aca 29.52%, #00037e 80.87%);
}
.ovrfhidden {
  overflow: hidden;
}
.lnk-undrlne {
  position: relative;
  color: #0047ff;
}
.lnk-undrlne:before {
  bottom: 0;
  left: 0;
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background: #0047ff;
}
.zwb-bnnr .zwc-title .zwc-bnnr-eyebrow {
  max-width: none;
  margin: 0 0 26px;
  line-height: 1.1;
  font-size: 22px;
  color: #0f9;
  text-transform: uppercase;
  font-family: var(--zf-primary-semibold);
}
.zwb-bnnr .zwc-title h1 {
  font-family: var(--zf-primary-semibold);
  margin: 0 0 20px;
  line-height: var(--h2-line-height);
  font-size: var(--h3-size);
}
.zwc-title h2 {
  font-size: var(--h4-size);
  font-family: var(--zf-primary-semibold);
}
.zwc-title h3 {
  font-size: var(--h5-size);
}
.zwc-title h4,
.zwb-sub-title h2 {
  font-size: var(--h6-size);
}
.zwc-badge-txt {
  font-size: 22px;
  display: inline-block;
  font-family: var(--zf-primary-regular);
  text-transform: uppercase;
  margin: 0 0 30px;
  line-height: var(--h1-line-height);
}
.zwb-bnnr {
  background: linear-gradient(115deg, #151aca 29.52%, #00037e 80.87%);
  padding: 90px 0 110px;
  overflow: hidden;
}
.zws-bnnr-img {
  border-radius: 16px;
}
.zwb-bnnr .zwc-badge-txt {
  color: #0f9;
  font-family: var(--zf-primary-medium);
}
.zwb-bnnr .zwc-title p {
  max-width: 574px;
  font-size: 20px;
}
.zwc-after-login {
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  z-index: 0;
}
.zwc-after-login .zws-bnnr-img {
  max-width: 536px;
  width: 100%;
  margin: auto 0px 0px auto;
}
.zwb-ovrly1 {
  max-width: 242px;
  width: 40%;
  left: 53%;
  top: 26%;
  right: auto;
  bottom: auto;
  box-shadow: -20px -26px 44px rgba(0, 3, 99, 0.3);
  border-radius: 30px;
  fill: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(37px);
}
/* ///////// */
.zwc-trusted-brands .zwb-sub-title {
  margin: 0 0 40px;
}
.zwc-trusted-brands {
  padding: 110px 0;
}
.trusted-brand-logos {
  overflow: hidden;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
  align-items: stretch;
}

.trusted-brand-logos li {
  display: none !important;
  width: auto;
  flex: none;
  margin: 20px 26px 20px 26px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.trusted-brand-logos li span {
  display: block;
  text-align: center;
  color: var(--black-color);
  font-size: 16px;
  font-family: var(--zf-primary-regular);
  margin-top: 20px;
  max-width: 130px;
  word-break: break-word;
}

.trusted-brand-logos li img {
  width: auto;
  max-height: 36px;
  min-height: auto;
  display: block;
  margin: 0 auto auto;
}

.trusted-brand-logos li img,
.trusted-brand-logos li span {
  opacity: 0;
  transform: scale(0.6);
  transition:
    transform 0.4s ease-out,
    opacity 0.4s ease-out;
}

.zwe-op .trusted-brand-logos li img,
.zwe-op .trusted-brand-logos li span {
  transform: scale(1);
  opacity: 1;
}

.trusted-brand-logos li.current-region {
  display: inline-flex !important;
}

.trusted-brand-logos .trstd-img-24 {
  max-height: 24px;
}

.trusted-brand-logos .trstd-img-28 {
  max-height: 28px;
}

.trusted-brand-logos .trstd-img-30 {
  max-height: 30px;
}

.trusted-brand-logos .trstd-img-32 {
  max-height: 32px;
}

.trusted-brand-logos .trstd-img-34 {
  max-height: 34px;
}

.trusted-brand-logos .trstd-img-42 {
  max-height: 42px;
}

.trusted-brand-logos .trstd-img-46 {
  max-height: 46px;
}

.trusted-brand-logos .trstd-img-50 {
  max-height: 50px;
}

.trusted-brand-logos .trstd-img-54 {
  max-height: 54px;
}

.trusted-brand-logos .trstd-img-60 {
  max-height: 60px;
}

.trusted-brand-logos .trstd-img-70 {
  max-height: 70px;
}

.trusted-brand-logos .trstd-img-74 {
  max-height: 74px;
}

.trusted-brand-logos .trstd-img-80 {
  max-height: 80px;
}
/* ///////// */
.zwb-stcky-section {
  padding: 40px 0 40px;
}
.zws-fixd-sdebar {
  position: sticky;
  display: flex;
  align-items: center;
  top: 250px;
  width: 30px;
  height: 100%;
  z-index: 4;
  transition: transform 0.3s ease;
  margin-left: -60px;
  margin-right: 30px;
  padding-bottom: 60px;
}

.zws-fixd-sdebar.hidden {
  display: none;
}
.zws-lst-item {
  /* top: 200px;
    position: sticky; */
  /* width: 40px; */
}
.zws-lst-item li a {
  background: #c7c9fc;
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  /* text-indent: -999px;
    overflow: hidden; */
  position: relative;
  transition: background-color 0.3s ease;
  padding: 0;
  border: none;
}
.zws-lst-item li.active a {
  background: #373df2;
}

.zws-lst-item li.active a::before {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background: #373df2;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: anim-vibrate 2s infinite;
}

.zwb-stcky-section .zwc-title p {
  max-width: 730px;
}
.zwc-article-cntnt {
  transition: all 0.5s ease;
  padding-bottom: 60px;
  position: sticky;
}
.zwc-article-cntnt a {
  color: var(--black-color);
  display: inline-block;
  text-decoration: underline;
}
.zwb-stcky-wrpr article,
.zwc-article-cntnt {
  min-height: 596px;
}
.zwc-article-cntnt .pr-0 {
  padding-right: 0;
}
.zwc-article-cntnt .pb-0 {
  padding-bottom: 0;
}
.zwc-article-cntnt .extra-spce {
  padding-bottom: 100px;
}
.zwb-stcky-wrpr {
  padding: 56px 0 0;
}
.zwb-stcky-wrpr article {
  border-radius: 24px;
  padding: 60px;
  border: 1px solid #f5e0d2;
  background: #fff6f0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.zwb-stcky-wrpr article .zcol-wrap {
  width: 100%;
}

.zwb-stcky-wrpr article h3 {
  color: var(--black-color);
  font-size: var(--h5-size);
  font-family: var(--zf-primary-semibold);
  margin: 0 0 12px;
}

.zwc-cntnt-blck,
.zwc-mlti-lsts {
  max-width: 460px;
}
.zwc-cntnt-blck {
  margin: 0 0 32px;
}
.zwc-cntnt-blck,
.zwc-cntnt-blck p {
  color: var(--black-color);
  font-size: 18px;
}
.zwc-cntnt-blck > p {
  /* font-family: var(--zf-primary-medium); */
}

/* ---- Feature block overlays ---- */
.zwb-ovrly6-1 {
  top: 11%;
  right: 33%;
  bottom: auto;
  left: auto;
  max-width: 246px;
  width: 46%;
  border-radius: 15px;
  box-shadow: 20px 24px 24px 0 rgba(0, 0, 0, 0.09);
}
.zwb-ovrly5-1 {
  top: auto;
  right: auto;
  bottom: -5%;
  left: 15%;
  max-width: 314px;
  width: 59%;
  border-radius: 10px;
  box-shadow: 30px -36px 47px 0 rgba(67, 35, 13, 0.1);
}
.zwb-ovrly1-2 {
  top: 4%;
  right: 2%;
  bottom: auto;
  left: auto;
  max-width: 92px;
  width: 17%;
}
.zwb-ovrly4-1 {
  top: auto;
  right: auto;
  bottom: 6%;
  left: 0;
  max-width: 383px;
  width: 71%;
  border-radius: 6px;
  box-shadow: 30px -26px 44px 0 rgba(0, 0, 0, 0.09);
}
.zwb-ovrly2-1 {
  top: 27%;
  left: auto;
  bottom: auto;
  right: 15%;
  max-width: 173px;
  width: 32%;
  border-radius: 8px;
  box-shadow: -20px -16px 34px 0 rgba(0, 0, 0, 0.16);
}
.zwb-ovrly3-1 {
  top: auto;
  left: 0;
  bottom: 0;
  right: 14%;
  max-width: 301px;
  width: 57%;
  border-radius: 8px;
  box-shadow: -20px -16px 34px 0 rgba(0, 0, 0, 0.16);
}
.zwb-ovrly1-1 {
  top: auto;
  left: auto;
  bottom: 0;
  right: 4%;
  max-width: 228px;
  width: 56%;
  border-radius: 14px;
  box-shadow: -20px -26px 34px 0 rgba(0, 0, 0, 0.08);
}
/* ///////// */
.zwc-mlti-lsts {
  margin: 40px 0 0;
}
.zwc-mlti-lsts li {
  color: var(--black-color);
  font-size: 16px;
  margin: 0 0 15px;
  position: relative;
  padding-left: 20px;
  font-family: var(--zf-primary-medium);
}
.zwc-mlti-lsts li:before {
  position: absolute;
  content: "";
  width: 10px;
  height: 11px;
  left: 0;
  top: 0.5rem;
  background: url("/sites/zweb/images/backstage/features/zwb-fts-sprite.svg")
    no-repeat -2px 0px / 420px auto;
}
/* ///////// */
/* ////////// */
.zwc-support-card {
  border-radius: 30px;
  border: 1px solid #bfbfbf;
  padding: 40px 40px 40px 40px;
  margin: 20px auto 140px auto;
}
.zwc-support-card .zwc-btn-set .zwc-lne-btn {
  border: 1px solid var(--black-color);
  background: transparent;
  padding: 14px 28px;
  color: var(--black-color);
  text-align: center;
  font-size: 16px;
  text-transform: uppercase;
  line-height: 1.5;
  font-family: var(--zf-primary-semibold);
  cursor: pointer;
  transition: all ease-out 0.3s;
  border-radius: 4px;
}
.zwc-support-card .zwc-btn-set .zwc-lne-btn:hover {
  background: var(--black-color);
  color: var(--white-color);
}
.zwc-support-card .zwc-title h2 {
  font-size: var(--h4-md-size);
  font-family: var(--zf-primary-semibold);
}
/* ////////// */
/* Tabs section */
.zwb-rsvp {
  padding: 40px 0 100px;
}
.zwc-horz-tab .zwc-tabs-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.zwc-tabs-items .tab-link {
  background: none;
  border: 0;
  font-family: var(--zf-primary-semibold);
  font-size: 18px;
  color: rgba(0, 0, 0, 1);
  padding: 10px 24px 10px 24px;
  margin-left: 24px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}
.zwc-tabs-items .tab-link:before {
  position: absolute;
  content: "";
  width: 7px;
  height: 7px;
  background: rgba(173, 173, 173, 1);
  transform: translate(-50%, -50%);
  left: 0;
  top: 50%;
  border-radius: 100%;
}
.zwc-tabs-items .tab-link.active {
  border-radius: 48px;
  background: #000;
  color: #fff;
}
.zwc-tabs-items .tab-link.active:before {
  display: none;
}
.zwc-tabs-content .tab-content {
  padding: 60px 0;
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}
.zwb-top-fts-ovrly1 {
  max-width: 171px;
  top: 47%;
  left: 49%;
  box-shadow: 0px 34px 54px rgba(0, 0, 0, 0.1);
  width: 32%;
  border-radius: 4px;
}
.zwb-top-fts-ovrly2 {
  max-width: 168px;
  bottom: 0;
  left: 6%;
  width: 31%;
}
.zwb-top-fts-ovrly3 {
  bottom: 0;
  max-width: 191px;
  width: 36%;
  left: 8%;
}
.zwb-top-fts-ovrly4 {
  max-width: 154px;
  width: 29%;
  top: 36%;
  left: 68%;
}
.zwb-top-fts-ovrly5 {
  max-width: 187px;
  width: 35%;
  bottom: 0;
  left: 10%;
}
/* Tabs section end*/
/* ///////// */
.zwb-tstimonial {
  padding: 0 0 100px;
}
.zwb-tstimonial .slick-list {
  position: relative;
  padding: 5.5rem 0 0;
}
.zwb-tstimonial .slick-list:before {
  position: absolute;
  content: "";
  width: 105px;
  height: 75px;
  background: url("/sites/zweb/images/backstage/features/zwb-fts-sprite.svg");
  background-size: 430px auto;
  background-repeat: no-repeat;
  background-position: -16px 1px;
  text-indent: -999px;
  overflow: hidden;
  margin: 0 0 30px;
  top: 0;
  left: 20px;
}
.zwb-custmr-item {
  padding: 20px 0;
}
.zwb-custmr-item blockquote {
  color: var(--black-color);
  font-size: 40px;
  font-family: var(--zf-primary-light);
  line-height: 1.4;
  margin: 0 0 40px;
}
.zwb-custmr-item blockquote .txt-strong {
  color: var(--black-color);
  font-size: 40px;
  font-weight: normal;
  font-family: var(--zf-primary-semibold);
}
.zwb-custmr-item .zwb-custmr-info {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  margin-bottom: 40px;
}
.zwb-case-study {
  background: transparent;
  line-height: 1.6;
  display: inline-block;
  border: 1px solid #000;
  padding: 12px 30px;
  font-size: 16px;
  color: #000;
  text-align: center;
  text-transform: uppercase;
  font-family: var(--zf-primary-medium);
  transition: 0.3s ease-out;
  border-radius: 4px;
}
.zwb-case-study:hover {
  background: var(--black-color);
  color: var(--white-color);
}
.zwb-custmr-img {
  display: flex;
  align-items: center;
}
.zwb-custmr-img img {
  max-width: 70px;
  border-radius: 100%;
}
.zwb-custmr-img div {
  padding-left: 20px;
  padding-right: 30px;
  margin-right: 30px;
  flex: 1;
  border-right: 1px solid #c1c1c1;
}
.zwb-custmr-img div span,
.zwb-custmr-img div strong {
  display: block;
  color: var(--black-color);
  font-size: 24px;
}
.zwb-custmr-img div strong {
  color: var(--black-color);
  font-size: 24px;
  font-weight: normal;
  font-family: var(--zf-primary-bold);
}
.zwb-compny-logo {
  padding: 15px 25px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
}
.zwb-custmr-slider .slick-track {
  margin: 0 10px;
}
.zwb-custmr-slider .zwb-custmr-item {
  margin: 20px;
}
.zwb-custmr-slider .slick-prev {
  right: 5%;
  top: 5%;
  left: inherit;
}
.zwb-blog-slider .slick-prev {
  top: -20%;
  right: 52px;
  left: unset;
}
.zwb-custmr-slider .slick-next {
  top: 5%;
}
.zwb-blog-slider .slick-next {
  top: -20%;
  right: 0;
  left: unset;
}

.zwb-custmr-slider .slick-next,
.zwb-custmr-slider .slick-prev,
.zwb-blog-slider .slick-next,
.zwb-blog-slider .slick-prev {
  background: rgba(239, 240, 255, 1);
  border-radius: 100%;
  width: 42px;
  height: 42px;
  padding: 10px;
  z-index: 5;
  transition: transform 0.3s ease;
  transform: translateY(-50%) scale(0.9);
}
.zwb-custmr-slider .slick-prev:before,
.zwb-blog-slider .slick-prev:before {
  top: 10px;
  left: 16px;
}

.zwb-custmr-slider .slick-prev:after,
.zwb-blog-slider .slick-prev:after {
  bottom: 9px;
  left: 16px;
}
.zwb-custmr-slider .slick-next:before,
.zwb-blog-slider .slick-next:before {
  top: 10px;
  right: 20px;
}
.zwb-custmr-slider .slick-next:after,
.zwb-blog-slider .slick-next:after {
  bottom: 9px;
  right: 20px;
}
.zwb-custmr-slider .slick-next:after,
.zwb-custmr-slider .slick-next:before,
.zwb-custmr-slider .slick-prev:after,
.zwb-custmr-slider .slick-prev:before,
.zwb-blog-slider .slick-next:after,
.zwb-blog-slider .slick-next:before,
.zwb-blog-slider .slick-prev:after,
.zwb-blog-slider .slick-prev:before {
  height: 14px;
  background: rgba(20, 25, 201, 1);
}
.zwb-custmr-slider .slick-next:hover,
.zwb-custmr-slider .slick-prev:hover,
.zwb-blog-slider .slick-next:hover,
.zwb-blog-slider .slick-prev:hover {
  background: rgba(20, 25, 201, 1);
  transform: translateY(-50%) scale(1.2);
}
.zwb-custmr-slider .slick-next:hover:before,
.zwb-custmr-slider .slick-prev:hover:before,
.zwb-custmr-slider .slick-next:hover:after,
.zwb-custmr-slider .slick-prev:hover:after,
.zwb-blog-slider .slick-next:hover:before,
.zwb-blog-slider .slick-prev:hover:before,
.zwb-blog-slider .slick-next:hover:after,
.zwb-blog-slider .slick-prev:hover:after {
  background: #fff;
}
/* ///////// */
.zwc-blog-card {
  padding: 140px 0 0;
}
.zwb-blog-slider .slick-track {
  display: flex;
  align-items: stretch;
}
.zwc-blog-card .zwc-blog-item {
  height: auto;
  flex: 1;
}
/* .zwb-blog-slider {
    margin-right: -20px;
  } */
.zwc-blog-card .zwc-blog-item {
  border-radius: 24px;
  border: 1px solid #d5d5d5;
  padding: 30px;
}
.zwb-blog-slider .slick-slide {
  margin: 20px;
}
.zwc-blog-card .zwc-title {
  max-width: 670px;
}
.zwc-blog-item img {
  margin-bottom: 55px;
}
.zwc-blog-item h3 {
  color: var(--black-color);
  font-family: var(--zf-primary-semibold);
  font-size: var(--h6-size);
  margin: 0 0 14px;
}
.zwc-blog-item p {
  color: #000;
  letter-spacing: -0.17px;
  font-size: 17px;
}
.zwc-blog-item div {
  padding: 0 20px;
}
.zwc-blog-item div a {
  display: inline-block;
  color: #0047ff;
  font-size: 16px;
  font-family: var(--zf-primary-semibold);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
/* ///////// */
.zwc-footer-actn {
  border-radius: 30px;
  padding: 80px 90px 0;
  background: url("/sites/zweb/images/backstage/features/zwc-ai-networking-cta-bg.png")
    no-repeat center / cover;
}
.zwc-footer-actn .zwc-title p {
  max-width: 640px;
  margin: 0 auto;
}
.zwc-footer-actn .zwc-app-ovrview {
  margin: 80px 0 0;
}
.zwc-footer-actn .zwc-app-ovrview img {
  margin: 0 auto;
}
/* ///////// */
.zwc-faq {
  padding: 140px 0 120px;
}
.zwc-faq .zwc-badge-txt,
.zwc-blog-card .zwc-badge-txt {
  font-size: 16px;
  font-family: var(--zf-primary-bold);
}
.zwc-faq .zwc-title h2 {
  margin: 0 0 12px;
  font-size: var(--h4-md-size);
  font-family: var(--zf-primary-medium);
  line-height: normal;
}
.collapse-item {
  border-bottom: 1px solid #cbcbcb;
}
.collapse-item .zwc-mlti-lsts {
  max-width: 100%;
  margin-bottom: 30px;
}
.collapse-item .zwc-mlti-lsts li {
  font-size: 18px;
}
.collapse-container {
  margin: 0 auto;
}

.collapse-content {
  display: none;
}

.collapse-content p {
  max-width: 780px;
  line-height: var(--h8-line-height);
}

.collapse-button {
  background: 0;
  border: 0;
  font-size: 24px;
  line-height: 1.4;
  margin: 0;
  outline: 0;
  font-family: var(--zf-primary-medium);
  cursor: pointer;
  padding: 28px 80px 28px 0;
  position: relative;
  width: 100%;
  text-align: left;
  color: var(--black-color);
}

/* The rule above clears the outline, which leaves keyboard users with no focus
    indicator (WCAG 2.4.7). :focus-visible restores one without changing how the
    button looks on mouse click. */
.collapse-button:focus-visible {
  outline: 2px solid var(--black-color);
  outline-offset: -2px;
}

.collapse-button:after {
  content: "";
  display: inline-block;
  padding: 4px;
  position: absolute;
  transition: all 0.3s ease;
  border: solid #000;
  clear: both;
  border-width: 0 2px 2px 0;
  right: 10px;
  top: 50%;
  transform: rotate(45deg) translateY(-50%);
}

.collapse-button.active:after {
  border: 2px solid #000;
  border-width: 0 2px 2px 0;
  transform: translateY(-50%) rotate(-135deg);
}

.collapse-content,
.collapse-content p {
  font-size: 18px;
}
.zwb-mob-hding {
  display: none;
  color: #ff7813;
  text-transform: uppercase;
  font-family: var(--zf-primary-medium);
  margin: 0 0 16px;
  font-size: 16px;
}
/* Animations starts */
.zws-anim-scale,
.zws-anim-top,
.zws-anim-bottom,
.stcky-ovrly-img1-1,
.zws-anim-left,
.zws-anim-right,
.zscale-img,
.zscale-top {
  transition:
    transform 0.5s ease-in,
    opacity 0.5s ease-in;
  opacity: 0;
}
.zfade {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.zwe-op .zws-anim-scale,
.zwe-op .zws-anim-top,
.zwe-op .zws-anim-bottom,
.zwe-op.zwe-ob .zws-anim-top,
.zwe-op .zws-anim-left,
.zwe-op .zws-anim-right,
.tab-content.active .zscale-img,
.tab-content.active .zscale-top {
  opacity: 1;
}
.zws-anim-top,
.zscale-top {
  transform: translateY(40px);
}
.zws-anim-bottom {
  transform: translateY(-40px);
}
.zws-anim-left {
  transform: translateX(40px);
}
.zws-anim-right {
  transform: translateX(-40px);
}
.zws-anim-scale {
  transform: scale3d(0.6, 0.6, 0.6);
}
.zwe-op .zws-anim-scale {
  transform: scale3d(1, 1, 1);
}
.zwe-op .zws-anim-top,
.zwe-op .zws-anim-bottom,
.zwe-op.zwe-ob .zws-anim-top,
.tab-content.active-animation .zscale-top {
  transform: translateY(0);
}
.zwe-op .zws-anim-left,
.zwe-op .zws-anim-right {
  transform: translateX(0);
}
.zwc-delay1 {
  transition-delay: 0.4s;
}
.zwc-delay2 {
  transition-delay: 0.5s;
}
.zwc-delay3 {
  transition-delay: 0.9s;
}
.zwc-delay4 {
  transition-delay: 1.5s;
}
.zwc-delay5 {
  transition-delay: 2s;
}
.zscale-img {
  transform: scale3d(0.8, 0.8, 0.8);
}
.tab-content.active-animation .zscale-img {
  transform: scale3d(1, 1, 1);
}
.tab-content.active-animation .zfade {
  opacity: 1;
}

.zwb-sphp1,
.zwb-sphp2,
.zwb-sphp3 {
  animation: bounce 2s infinite ease-in-out;
}

.zwb-sphp2 {
  animation-delay: 0.2s;
}

.zwb-sphp3 {
  animation-delay: 0.4s;
}
@keyframes anim-vibrate {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 #373df2;
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 0.6rem rgba(0, 0, 0, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(86, 78, 78, 0);
  }
}
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}
/* Animation ends */
/* Mediaquery*/
@media (max-width: 1440px) {
  .zwb-bnnr {
    padding: 80px 0 90px;
  }
  .zwb-bnnr .zwc-title .zwc-bnnr-eyebrow {
    font-size: 16px;
  }
  .zwb-bnnr .zwc-title h1 {
    font-size: var(--h4-size);
  }
  /* .zwc-after-login .zws-bnnr-img {
    width: 50%;
  } */
  .zwc-badge-txt {
    font-size: 16px;
  }
  .zwb-bnnr .zwc-title p {
    font-size: 18px;
  }
  .zwc-trusted-brands {
    padding: 90px 0 70px;
  }
  .zwc-title h2,
  .zwc-support-card .zwc-title h2 {
    font-size: var(--h4-md-size);
  }

  .zwb-stcky-wrpr {
    padding: 36px 0 0;
  }
  .zwb-stcky-wrpr article,
  .zwc-article-cntnt {
    min-height: 576px;
  }
  .zwb-custmr-item blockquote,
  .zwb-custmr-item blockquote .txt-strong {
    font-size: 32px;
  }
  .zwb-tstimonial .slick-list:before {
    transform: scale(0.8);
  }
  .zwb-tstimonial {
    padding: 0 0 120px;
  }
  .zwc-footer-actn {
    padding: 90px 90px 0;
  }
  .zwc-faq {
    padding: 110px 0 90px;
  }
  .collapse-button {
    font-size: 20px;
  }
}

@media (max-width: 1199px) {
  .zwb-bnnr {
    padding: 70px 0 70px;
  }
  /* .zwc-after-login .zws-bnnr-img {
    width: 40%;
  } */
  .zwc-badge-txt {
    font-size: 14px;
  }
  .zwb-bnnr .zwc-title .zwc-bnnr-eyebrow {
    font-size: 14px;
  }
  .zwb-bnnr .zwc-title h1 {
    font-size: var(--h4-md-size);
  }
  .zwb-bnnr .zwc-title p {
    font-size: 18px;
  }
  .zwc-cntnt-blck,
  .zwc-cntnt-blck p,
  .zwc-tabs-items .tab-link,
  .zwc-title p {
    font-size: 16px;
  }
  .zwc-trusted-brands {
    padding: 70px 0 70px;
  }
  .zwc-title h2 {
    font-size: var(--h4-sm-size);
  }
  .zws-fixd-sdebar {
    display: none;
  }
  .zwb-stcky-wrpr article h3 {
    font-size: var(--h6-size);
  }
  .zwc-article-cntnt {
    padding-bottom: 40px;
  }
  .zwb-stcky-wrpr article,
  .zwc-article-cntnt {
    min-height: unset;
  }
  .zwb-stcky-wrpr article {
    padding: 40px;
  }
  .zwb-rsvp {
    padding: 40px 0 70px;
  }
  .zwb-tstimonial .slick-list:before {
    transform: scale(0.6);
    left: -20px;
  }
  .zwb-custmr-item blockquote,
  .zwb-custmr-item blockquote .txt-strong {
    font-size: 24px;
  }
  .zwb-custmr-img div strong {
    font-size: 18px;
  }
  .zwb-custmr-item .zwb-custmr-info {
    align-items: center;
  }
  .zwb-custmr-img div span,
  .zwb-custmr-img div strong,
  .collapse-content,
  .collapse-content p {
    font-size: 16px;
  }
  .zwb-custmr-img img {
    max-width: 45px;
  }
  .zwc-support-card {
    margin: 20px auto 100px auto;
  }
  .zwb-tstimonial {
    padding: 0 0 80px;
  }
  .zwc-footer-actn {
    padding: 70px 70px 0;
  }
  .collapse-button {
    font-size: 18px;
    padding: 22px 60px 22px 0;
  }
  .zwc-faq .zwc-title h2 {
    font-size: var(--h4-sm-size);
  }
  .zwc-faq .zwc-badge-txt {
    font-size: 14px;
  }
  .zwb-blog-slider .slick-slide {
    margin: 10px;
  }
}

@media (max-width: 991px) {
  .zwb-bnnr {
    padding: 50px 0 70px;
  }
  .zwb-bnnr .zwc-title .zwc-bnnr-eyebrow {
    margin: 0 0 20px;
  }
  .zwb-bnnr .zwc-title h1 {
    font-size: var(--h5-size);
  }
  .zwc-faq .zwc-title h2,
  .zwc-title h2,
  .zwc-support-card .zwc-title h2 {
    font-size: var(--h5-size);
  }
  .zwb-bnnr .zwc-title p {
    font-size: 16px;
  }
  .zwc-trusted-brands {
    padding: 70px 0 50px;
  }
  .zwb-stcky-section .zwc-title {
    max-width: 500px;
  }
  .zwc-article-cntnt {
    position: static !important;
  }
  .zwc-blog-card .zwc-blog-item {
    padding: 20px;
  }
}
@media (max-width: 767px) {
  .zwb-tstimonial .slick-list {
    position: relative;
    padding: 4rem 0 0;
  }
  .zwb-tstimonial .slick-list:before {
    left: 0;
  }

  .zwb-ovrly1 {
    max-width: 242px;
    width: 35%;
  }
  .zwb-bnnr .zwc-title {
    text-align: center;
  }
  .zwb-bnnr .zwc-title .d-blck,
  .zwb-mob-hding {
    display: block;
  }
  .zwc-cntnt-blck h4 {
    font-size: var(--h6-size);
  }
  .zwc-after-login {
    position: static;
    margin-top: 40px;
  }
  .zwc-after-login .zws-bnnr-img {
    width: 60%;
    margin: 0 auto;
  }
  .zwc-btn-set {
    justify-content: center;
    flex-direction: column;
    max-width: 260px;
    margin: 0 auto 20px;
  }
  .zwc-support-card .zwc-btn-set {
    justify-content: flex-start;
    flex-direction: unset;
    max-width: 260px;
    margin: 0 0 40px;
  }

  .zwb-stcky-section .zwc-title {
    margin: 0 0 20px;
  }
  .zwc-mlti-lsts {
    margin: 40px 0 30px;
  }
  .zwc-horz-tab .zwc-tabs-items {
    display: none;
  }
  .zwc-tabs-content .tab-content {
    display: block;
  }
  .zwc-tabs-content .tab-content {
    padding: 40px 0;
    margin-left: auto;
    margin-right: auto;
  }
  .zscale-top,
  .zscale-img,
  .zfade {
    opacity: 1;
    transform: unset;
  }
  .zwb-custmr-item blockquote,
  .zwb-custmr-item blockquote .txt-strong {
    font-size: 20px;
  }
  .zwb-custmr-img div span {
    font-size: 14px;
  }
  .zwb-custmr-item {
    padding: 20px 10px;
  }
  .zwc-footer-actn {
    padding: 30px 30px 0;
  }
  .zwc-faq {
    padding: 90px 0 70px;
  }
  .zwb-tstimonial {
    padding: 0 0 50px;
  }
  .zwb-top-fts-ovrly1 {
    bottom: 0;
    top: unset;
  }
  .zwb-compny-logo {
    display: none;
  }
  .zwb-custmr-img div {
    padding-right: 0;
    margin-right: 0;
    border: none;
  }
  .zwb-mob-hding {
    font-size: 14px;
  }
}
@media (max-width: 480px) {
  .zwb-custmr-item .zwb-custmr-info {
    flex-direction: column;
    justify-content: flex-start;
  }
  .zwc-tabs-content .tab-content {
    max-width: 300px;
  }
}

/* ---- Article card base images ---------------------------------------------
   max-width is each asset's own render width; the percentage is that width
   against the 541px sticky column, so an image holds its designed size at
   desktop and scales with the column below it rather than stepping at
   breakpoints. Overlay positions (.zwb-ovrlyN-*) are resolved against the
   same box, so the two stay in register.                                    */
.zwb-blck-img1 {
  /* matchmaking */
  max-width: 448px;
  width: 83%;
}
.zwb-blck-img2 {
  /* meetings */
  max-width: 312px;
  width: 58%;
}
.zwb-blck-img3 {
  /* lounges */
  max-width: 443px;
  width: 82%;
}
.zwb-blck-img4 {
  /* channels */
  max-width: 383px;
  width: 71%;
}
.zwb-blck-img5 {
  /* gamification */
  max-width: 529px;
  width: 98%;
}
.zwb-blck-img6 {
  /* directory */
  max-width: 360px;
  width: 67%;
}

/* GENERATED by tools/build-index.py — do not edit this part.
   Every rule in base-style.css that uses a root-relative url(),
   repeated with an absolute one, so localhost stops 404ing the
   background images. Local only; never exported. */

.zwc-mlti-lsts li:before {
  position: absolute;
  content: "";
  width: 10px;
  height: 11px;
  left: 0;
  top: 0.5rem;
  background: url("https://www.zohowebstatic.com/sites/zweb/images/backstage/features/zwb-fts-sprite.svg")
    no-repeat -2px 0px / 420px auto;
}
.zwb-tstimonial .slick-list:before {
  position: absolute;
  content: "";
  width: 105px;
  height: 75px;
  background: url("https://www.zohowebstatic.com/sites/zweb/images/backstage/features/zwb-fts-sprite.svg");
  background-size: 430px auto;
  background-repeat: no-repeat;
  background-position: -16px 1px;
  text-indent: -999px;
  overflow: hidden;
  margin: 0 0 30px;
  top: 0;
  left: 20px;
}
.zwc-footer-actn {
  border-radius: 30px;
  padding: 80px 90px 0;
  background: url("https://www.zohowebstatic.com/sites/zweb/images/backstage/features/zwc-ai-networking-cta-bg.png")
    no-repeat center / cover;
}

/* ==========================================================================
   WHAT THE PAGE'S SCRIPT WOULD DO — not part of the page, never exported.

   This file used to shim Zoho's whole global framework. It no longer needs
   to: index.html now loads the real stylesheets the live page loads, mapped
   by reading the published page's <head>.

       zohocustom.css   the reset (list-style, box-sizing, body, img), the
                        five --zf-primary-* font families, .content-wrap,
                        .act-btn, .cta-btn
       backstage.css    the 12-column grid (.zcol-*), the flex and spacing
                        utilities, .zwc-content-wrap, and eleven of the type
                        tokens (--h3-size … --white-color)
       base-style.css   this page's own components

   What is left is only what base-script.js's *sticky* half writes at runtime.
   That half is not loaded, because a pinned card cannot be clicked into; its
   carousel half is used, via initSliders() in the editor.

     1. the sticky pin offsets   ($card.css("top", baseTop + i * 5))
     2. equal card heights       ($articles.css("min-height", tallest))
     3. slider layout for the windows where Slick has not run
     4. the FAQ answer, which base-style.css hides unconditionally

   Nothing here invents a look the live page does not have. Three classes the
   markup uses — .txt-bold, .zwc-stcky-plchlder, .zws-stcky-cntnt-blck — are
   defined in no stylesheet at all, so they do nothing on the live page and
   they do nothing here either.
   ========================================================================== */

/* --- 1. the pin offsets ------------------------------------------------- */

/* base-style.css already sets `position: sticky` on .zwc-article-cntnt; only
   the offset was script-written. Done in CSS so nothing has to write to a
   page element's style attribute. Twelve covers the six the page ships with
   several times over; a thirteenth block shares the twelfth's offset. */
.zwc-article-cntnt { top: var(--zwb-pin-top, 100px); }
.zwc-article-cntnt:nth-child(2)    { top: calc(var(--zwb-pin-top, 100px) +  5px); }
.zwc-article-cntnt:nth-child(3)    { top: calc(var(--zwb-pin-top, 100px) + 10px); }
.zwc-article-cntnt:nth-child(4)    { top: calc(var(--zwb-pin-top, 100px) + 15px); }
.zwc-article-cntnt:nth-child(5)    { top: calc(var(--zwb-pin-top, 100px) + 20px); }
.zwc-article-cntnt:nth-child(6)    { top: calc(var(--zwb-pin-top, 100px) + 25px); }
.zwc-article-cntnt:nth-child(7)    { top: calc(var(--zwb-pin-top, 100px) + 30px); }
.zwc-article-cntnt:nth-child(8)    { top: calc(var(--zwb-pin-top, 100px) + 35px); }
.zwc-article-cntnt:nth-child(9)    { top: calc(var(--zwb-pin-top, 100px) + 40px); }
.zwc-article-cntnt:nth-child(10)   { top: calc(var(--zwb-pin-top, 100px) + 45px); }
.zwc-article-cntnt:nth-child(11)   { top: calc(var(--zwb-pin-top, 100px) + 50px); }
.zwc-article-cntnt:nth-child(n+12) { top: calc(var(--zwb-pin-top, 100px) + 55px); }

/* --- 2. equal card heights ---------------------------------------------- */

/* Filled in by the editor, which measures the tallest card — see syncStack().
   Not cosmetic: cards pin in order and each scrolls over the last, so a
   shorter card leaves the taller one's foot showing underneath. The 596px
   fallback is base-style.css's own floor, so the stack holds together even
   with no script at all. */
.zwb-stcky-wrpr article,
.zwc-article-cntnt { min-height: var(--zwb-card-min, 596px); }

/* --- 3. the sliders, before and between initialisations ----------------- */

/* Slick supplies the track layout inline once it runs, but no stylesheet gives
   these two any layout before that — and there are two windows where it has
   not run. One is page load, before init. The other matters more: adding,
   moving or deleting a card tears the carousel down and rebuilds it, and in
   between, seven cards stack as plain blocks. That is some 3,500px of extra
   page height appearing and vanishing, and the browser adjusts the scroll
   position while it is there — which is what threw the page to the FAQ every
   time a card was added.
   Three across, as the carousel shows them, so the height barely changes.

   NOWRAP, and each item fixed at a third rather than free to grow or shrink.
   Wrapping made this true only while there were three cards or fewer: a
   seventh card wrapped onto a third row, so the height still trebled for the
   one frame the carousel was down, and the browser still moved the scroll
   under it. That was the nudge left after the jump was fixed. Overflowing and
   clipped is what slick itself does — `.slick-list` is `overflow: hidden` —
   so the height is now the same before, during and after a rebuild, whatever
   the card count. */
.zwb-blog-slider:not(.slick-initialized) {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 24px;
    overflow: hidden;
}
.zwb-blog-slider:not(.slick-initialized) > .zwc-blog-item {
    flex: 0 0 calc((100% - 48px) / 3);
}
.zwb-custmr-slider:not(.slick-initialized) {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
}
.zwb-custmr-slider:not(.slick-initialized) > .zwb-custmr-item { flex: 0 0 100%; }

/* --- 4. the FAQ answer -------------------------------------------------- */

/* base-style.css sets `.collapse-content { display: none }` unconditionally,
   and base-script.js reveals an answer with jQuery's .show(), which writes an
   inline `display: block`. Toggling the `hidden` attribute — which is what
   carries the state in the markup — does nothing against that rule, so no
   answer ever opened. The item's own `active` class is the honest hook: it is
   already what the script and the markup both use. */
.collapse-item.active > .collapse-content { display: block; }


/* --- 5. this page's dark grounds, while editing ------------------------- */

/* THE ONLY EDITOR RULES THAT NAME THIS PAGE'S OWN CLASSES, so they live here
   rather than in the chrome part. The chrome ships as a shared admin asset
   (sites/internal/css/zoho_custom_admin_creative.css) that every page in the
   portal loads; page selectors in there are dead weight everywhere else and
   a name collision waiting for the second page. Specificity, not order,
   is what makes these win, so they are safe ahead of the chrome. */

/* EVERY LOGO, WHILE EDITING. base-style.css hides all of them with
   `.trusted-brand-logos li { display: none !important }` and the platform's
   own script reveals the visitor's region by adding `.current-region`. That
   script does not run on the admin page, so the band was blank even once the
   markup was there — which is what made it look as though the content were
   missing rather than merely hidden.

   Shown here so the writer can see the section exists and what is in it. The
   published page is untouched: it keeps the class toggle and still shows one
   region's logos. */
/* TWO rules hide these logos, not one, and the first fix only undid one of
   them. `display: none !important` on the <li> is lifted by `current-region`;
   the IMAGE inside it is separately held at `opacity: 0; transform: scale(.6)`
   and lifted by `.zwe-op` on an ancestor. Both classes are added by platform
   scripts that do not run on the admin page, so undoing only the display left
   a row of correctly-sized, completely invisible boxes — which looks exactly
   like the markup still being absent.

   `transition: none` as well, or every reflow replays the 0.4s fade. */
body.zve-active .trusted-brand-logos li {
    display: inline-flex !important;
}
body.zve-active .trusted-brand-logos li img,
body.zve-active .trusted-brand-logos li span {
    opacity: 1 !important;
    transform: scale(1) !important;
    transition: none !important;
}

/* On the banner's indigo ground the chrome's outline would disappear. */
body.zve-active .zwb-bnnr [contenteditable="true"]:hover,
body.zve-active .zwc-footer-actn [contenteditable="true"]:hover {
    outline-color: rgba(255, 255, 255, 0.7);
}
body.zve-active .zwb-bnnr [contenteditable="true"]:focus,
body.zve-active .zwc-footer-actn [contenteditable="true"]:focus {
    outline-color: #0f9;
}

/* The brand-logo row is on white but the sticky stack is on #fff6f0 — the
   dashed indigo works on both, so only the dark grounds need a variant. */
.zwb-bnnr .zve-add-strip button,
.zwc-footer-actn .zve-add-strip button {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}