.zwc-banner-wrap {
  position: relative;
  overflow: hidden;
  background: radial-gradient(56.64% 23.92% at 84.14% 48.07%, rgba(255, 250, 113, 0.2) 0%, rgba(255, 180, 180, 0.1) 57.16%, rgba(255, 255, 255, 0) 100%), radial-gradient(77.81% 33.13% at 11.28% 49.57%, rgba(255, 250, 113, 0.2) 0%, rgba(255, 180, 180, 0.1) 57.16%, rgba(255, 255, 255, 0) 100%), radial-gradient(67.08% 28.32% at 24.52% 52.69%, rgba(255, 105, 105, 0.2) 0%, rgba(255, 180, 180, 0.1) 57.16%, rgba(255, 255, 255, 0) 100%), radial-gradient(73.24% 30.99% at 75.48% 55.01%, rgba(255, 105, 105, 0.2) 0%, rgba(255, 180, 180, 0.1) 57.16%, rgba(255, 255, 255, 0) 100%), rgb(255, 255, 255);
}


.zwc-banner-wrap .content-wrap {
  position: relative;
  z-index: 1;
}

.zwc-banner-cont {
  padding: 60px 0px 0;
  text-align: center;
  max-width: 930px;
  margin: 0px auto;
}

.zwc-banner-cont h1 {
  font-family: var(--primaryfont-semibold);
  font-size: 76px;
  line-height: 1.1;
  letter-spacing: -4px;
  margin: 0px;
}

.zwc-banner-cont h1 span {
  display: block;
}

.zwc-banner-cont p {
  font-family: var(--zf-primary-medium);
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.4px;
  color: rgb(55, 55, 55);
  max-width: 820px;
  margin: 16px auto 40px;
}

.zwc-head-icon {
  position: absolute;
  opacity: 0;
}

.zwc-head-icon.zwc-animate {
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

img.zwc-head-icon.zwc-semicircle {
  max-width: 134px;
  right: 40px;
  top: 470px;
}

img.zwc-head-icon.zwc-semicircle.zwc-animate {
  -webkit-animation: zwc-fadeIn-1 0.6s ease-out forwards, zwc-float-1 6s ease-in-out 0.6s infinite;
  animation: zwc-fadeIn-1 0.6s ease-out forwards, zwc-float-1 6s ease-in-out 0.6s infinite;
}

img.zwc-head-icon.zwc-cube {
  max-width: 280px;
  bottom: -50px;
  left: 190px;
  z-index: -1;
}

img.zwc-head-icon.zwc-cube.zwc-animate {
  -webkit-animation: zwc-fadeIn-2 0.6s ease-out forwards, zwc-float-2 7s ease-in-out 0.6s infinite;
  animation: zwc-fadeIn-2 0.6s ease-out forwards, zwc-float-2 7s ease-in-out 0.6s infinite;
}

img.zwc-head-icon.zwc-triangle {
  max-width: 160px;
  top: 330px;
  left: 0;
}

img.zwc-head-icon.zwc-triangle.zwc-animate {
  -webkit-animation: zwc-fadeIn-3 0.6s ease-out forwards, zwc-float-3 5s ease-in-out 0.6s infinite;
  animation: zwc-fadeIn-3 0.6s ease-out forwards, zwc-float-3 5s ease-in-out 0.6s infinite;
}

img.zwc-head-icon.zwc-ball {
  max-width: 160px;
  bottom: 115px;
  right: 180px;
}

img.zwc-head-icon.zwc-ball.zwc-animate {
  -webkit-animation: zwc-fadeIn-4 0.6s ease-out forwards, zwc-float-4 8s ease-in-out 0.6s infinite;
  animation: zwc-fadeIn-4 0.6s ease-out forwards, zwc-float-4 8s ease-in-out 0.6s infinite;
}

img.zwc-head-icon.zwc-header-grid {
  top: 35%;
  width: 100%;
  z-index: 0;
  position: absolute;
  height: initial;
  opacity: 1;
}

span.zwc-head-icon.zwc-head-circle {
  background: radial-gradient(89.95% 89.95% at 46.59% 10.11%, #FFF 12.48%, #FFF9EE 61.3%, #FFEEE3 100%);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  right: 20px;
  top: 0;
}

span.zwc-head-icon.zwc-head-circle.zwc-animate {
  -webkit-animation: zwc-fadeIn-5 0.6s ease-out forwards, zwc-rotate 6s linear 0.6s infinite;
  animation: zwc-fadeIn-5 0.6s ease-out forwards, zwc-rotate 6s linear 0.6s infinite;
}

/* Fade-in keyframes for staggered entry */
@-webkit-keyframes zwc-fadeIn-1 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes zwc-fadeIn-1 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@-webkit-keyframes zwc-fadeIn-2 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes zwc-fadeIn-2 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@-webkit-keyframes zwc-fadeIn-3 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes zwc-fadeIn-3 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@-webkit-keyframes zwc-fadeIn-4 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes zwc-fadeIn-4 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@-webkit-keyframes zwc-fadeIn-5 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes zwc-fadeIn-5 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

/* Floating keyframes for looping animation */
@-webkit-keyframes zwc-float-1 {

  0%,
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px) rotate(0deg);
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    opacity: 1;
    -webkit-transform: translateY(-20px) rotate(5deg);
    transform: translateY(-20px) rotate(5deg);
  }
}

@keyframes zwc-float-1 {

  0%,
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px) rotate(0deg);
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    opacity: 1;
    -webkit-transform: translateY(-20px) rotate(5deg);
    transform: translateY(-20px) rotate(5deg);
  }
}

@-webkit-keyframes zwc-float-2 {

  0%,
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px) rotate(0deg);
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    opacity: 1;
    -webkit-transform: translateY(-15px) rotate(-4deg);
    transform: translateY(-15px) rotate(-4deg);
  }
}

@keyframes zwc-float-2 {

  0%,
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px) rotate(0deg);
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    opacity: 1;
    -webkit-transform: translateY(-15px) rotate(-4deg);
    transform: translateY(-15px) rotate(-4deg);
  }
}

@-webkit-keyframes zwc-float-3 {

  0%,
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px) rotate(0deg);
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    opacity: 1;
    -webkit-transform: translateY(-18px) rotate(6deg);
    transform: translateY(-18px) rotate(6deg);
  }
}

@keyframes zwc-float-3 {

  0%,
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px) rotate(0deg);
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    opacity: 1;
    -webkit-transform: translateY(-18px) rotate(6deg);
    transform: translateY(-18px) rotate(6deg);
  }
}

@-webkit-keyframes zwc-float-4 {

  0%,
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px) scale(1);
    transform: translateY(0px) scale(1);
  }

  50% {
    opacity: 1;
    -webkit-transform: translateY(-12px) scale(1.05);
    transform: translateY(-12px) scale(1.05);
  }
}

@keyframes zwc-float-4 {

  0%,
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px) scale(1);
    transform: translateY(0px) scale(1);
  }

  50% {
    opacity: 1;
    -webkit-transform: translateY(-12px) scale(1.05);
    transform: translateY(-12px) scale(1.05);
  }
}

@-webkit-keyframes zwc-float-5 {

  0%,
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }

  50% {
    opacity: 1;
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
  }
}

@keyframes zwc-float-5 {

  0%,
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }

  50% {
    opacity: 1;
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px);
  }
}

/* Card fan section */
.zwc-card-fan {
  padding: 50px 0 0;
  overflow: hidden;
  position: relative;
}

.zwc-card-fan .content-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.zwc-card-fan-inner {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  perspective: 1200px;
  position: relative;
  height: 480px;
}

.zwc-card-item {
  position: absolute;
  bottom: 0;
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.zwc-card-fan.is-ready .zwc-card-item {
  transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 1s ease;
}

/* Card label text */
.zwc-card-item span {
  display: block;
  text-align: center;
  font-size: 17px;
  margin-bottom: 12px;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: linear-gradient(88deg, #FA0 -9.1%, #E71A1A 34.97%, #FA0 120.17%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 28px;
  letter-spacing: -0.34px;
  font-family: var(--primaryfont-semibold);
}

.zwc-card-item[data-position="center"] span {
  opacity: 1;
}

.zwc-card-item img {
  display: block;
  width: 240px;
  height: auto;
  margin: auto;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Play/Pause toggle button */
.zwc-card-fan-toggle {
  position: absolute;
  right: 10px;
  bottom: 10%;
  z-index: 10;
  width: 36px;
  height: 36px;
  border: 2px solid #F02424;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.zwc-card-fan-toggle:hover {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Pause icon - two vertical bars */
.zwc-toggle-pause {
  display: flex;
}

.zwc-toggle-pause::before,
.zwc-toggle-pause::after {
  content: "";
  display: block;
  width: 3px;
  height: 14px;
  background: #F02424;
  border-radius: 1px;
}

.zwc-integration-wrap .zwc-toggle-pause::before,
.zwc-integration-wrap .zwc-toggle-pause::after {
  background: #460809;
}

/* Play icon - triangle */
.zwc-toggle-play {
  display: none;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid #F02424;
  margin-left: 2px;
}

.zwc-integration-wrap .zwc-toggle-play {
  border-left: 12px solid #460809;
}

/* Show play icon when paused */
.zwc-card-fan-toggle:not(.is-playing) .zwc-toggle-pause {
  display: none;
}

.zwc-card-fan-toggle:not(.is-playing) .zwc-toggle-play {
  display: block;
}

.zwc-banner-cont p span {
  font-family: var(--primaryfont-bold);
}

.zwc-trust-wrap {
  position: relative;
}

.zwc-trust-inner {
  padding: 20px 0px 56px;
}

.zwc-trust-inner>p {
  font-family: var(--primaryfont-bold);
  font-size: 16px;
  letter-spacing: -0.32px;
  text-align: center;
  margin: 0px 0px 24px;
}

.zwc-trust-container {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.zwc-trust-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(255, 255, 255);
  border-radius: 8px;
  padding: 24px 32px;
  width: 170px;
  height: 80px;
}

.zwc-trust-logo img {
  max-width: 114px;
  max-height: 40px;
  width: 100%;
}

.zwc-trust-logo:nth-child(n+8) {
  display: none;
}

.zwc-testi-col.content-wrap {
  max-width: 1600px;
}

.zwc-testi-inner::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(108.32% 90.4% at 16.7% 19.02%, #FF5400 0%, #B4000E 50.85%, #910020 75.76%, #840037 100%);
  filter: blur(21px);
  -webkit-animation: zwc-fade-scale 3s ease-in-out infinite;
  animation: zwc-fade-scale 3s ease-in-out infinite;
}

.zwc-testi-inner {
  position: relative;
  background: radial-gradient(at 8% 112%, rgb(155, 0, 3) 0%, rgba(116, 0, 2, 0.75) 25%, rgba(78, 0, 1, 0.5) 50%, rgba(39, 0, 1, 0.25) 75%, rgba(0, 0, 0, 0) 100%) rgb(0, 0, 0);
  border-radius: 12px;
  overflow: hidden;
  padding: 190px 0px 160px;
}

.zwc-testi-deco {
  position: absolute;
  opacity: 0.8;
  z-index: 0;
  left: -28px;
  bottom: 0;
  max-width: 675px;
}

.zwc-testi-container {
  position: relative;
  z-index: 1;
  padding: 0px 160px;
}

.zwc-testi-slider-wrap {
  width: 100%;
}

.slick-next,
.slick-prev {
  top: -60px;
  width: 58px;
  height: 58px;
  border: 2px solid #646464;
}

.slider-right-button,
.slider-left-button {
  display: inline-block;
  position: relative;
}

.slider-right-button::before,
.slider-left-button::before {
  content: "";
  background: url("/sites/zweb/images/peopleplus/zwc-link-arrow.svg") 0% 0% / 100% no-repeat;
  display: flex;
  width: 12px;
  height: 20px;
  filter: invert(1);
}

.slider-left-button::before {
  transform: rotate(180deg);
}

button.slick-prev {
  position: absolute;
  right: 58px;
  left: auto;
  border-right: 0px;
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
}

button.slick-next {
  border-left: 0px;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
}

button.slick-next .slider-right-button::after {
  content: "";
  width: 2px;
  height: 35px;
  background: #646464;
  position: absolute;
  left: -22px;
  top: -6px;
}

.slick-prev::before,
.slick-prev::after,
.slick-next::before,
.slick-next::after {
  display: none;
}

.slick-next.slick-disabled,
.slick-prev.slick-disabled {
  opacity: 1;
}

.slick-next.slick-disabled .slider-right-button::before,
.slick-prev.slick-disabled .slider-left-button::before {
  opacity: 0.25;
}

.zwc-testi-inner .zwc-testi {
  display: flex;
  gap: 48px;
  align-items: center;
  min-width: 1069px;
  flex-shrink: 0;
  height: 560px;
  padding: 24px 48px 24px 24px;
  background: rgba(25, 25, 25, 0.87);
  border: 1.5px solid #3b3b3b;
  border-radius: 12px;
  opacity: 0.6;
}

.zwc-testi-slider-wrap .slick-current.slick-active {
  opacity: 100%;
}

.zwc-testi-slider-wrap .slick-list {
  overflow: visible;
}

.zwc-testi-inner .zwc-testi:not(:last-child) {
  margin-right: 16px;
}

.zwc-testi-bg {
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  width: 380px;
  height: 506px;
  position: relative;
}

.zwc-testi-bg.zwc-fiber {
  background: linear-gradient(180deg, #FFE6F8 0%, #FFF 100%);
}

.zwc-testi-bg.zwc-papa-johns {
  background: linear-gradient(180deg, #FFF 17.69%, #F6FAE5 100%);
}

.zwc-testi-bg.zwc-bizbox {
  background: linear-gradient(180deg, #FFF 17.69%, #E4E4E4 100%);
}

.zwc-testi-bg.zwc-op360 {
  background: linear-gradient(180deg, #FFF 17.69%, #E5F7FF 100%);
}

.zwc-testi-bg.zwc-sngular {
  background: linear-gradient(180deg, #FFF 17.69%, #E5F7FF 100%);
}

.zwc-testi-bg.zwc-avatar {
  background: linear-gradient(180deg, #FFF 17.69%, #E5F7FF 100%);
}

.zwc-testi-bg img {
  position: absolute;
  inset: 0;
  margin: auto;
}

.zwc-testi-inner .zwc-content-wrap {
  max-width: 592px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 24px;
}

.zwc-testi-inner .zwc-content-innerwrap {
  /* padding-bottom: 36px;
  */
  /* border-bottom: 1px solid rgb(59, 59, 59);
  */
  min-height: 325px;
  /* margin-bottom: 36px;
  */
  /* max-width: 100%;
  */
}

.zwc-testi-inner .zwc-content-innerwrap>h2 {
  font-size: 26px;
  font-family: var(--zf-primary-regularserif);
  line-height: 1.385;
  letter-spacing: -0.52px;
  color: rgb(255, 255, 255);
  max-width: 477px;
  margin-bottom: 0;
}

.zwc-testi-inner .zwc-johns .zwc-content-innerwrap>p {
  max-width: 530px;
}

.zwc-testi-slider-wrap .slick-list {
  min-width: 1400px;
}

.zwc-testi-inner .zwc-data {
  display: block;
  padding: 8px 12px;
  background: rgb(60, 60, 60);
  border: 1px solid rgb(59, 59, 59);
  border-radius: 4px;
  font-family: var(--zf-primary-medium);
  font-size: 16px;
  color: rgb(255, 255, 255);
  letter-spacing: -0.64px;
  margin-top: 32px;
}

.zwc-testi-inner .zwc-user-cont {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-top: 1px solid rgb(59, 59, 59);
  padding-top: 36px;
}

.zwc-testi-inner .zwc-user-details {
  display: flex;
  gap: 18px;
}

.zwc-testi-inner .zwc-user-details>img {
  max-width: 58px;
  height: 58px;
  object-fit: cover;
}

.zwc-testi-inner .zwc-user-name p {
  font-family: var(--primaryfont-semibold);
  font-size: 22px;
  letter-spacing: -0.65px;
  color: rgb(255, 255, 255);
  margin: 0px;
}

.zwc-testi-inner .zwc-user-name span {
  font-family: var(--zf-primary-medium);
  font-size: 17px;
  letter-spacing: -0.35px;
  color: rgb(255, 255, 255);
}

.zwc-story-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--zf-primary-medium);
  font-size: 17px;
  letter-spacing: -0.51px;
  color: rgb(255, 255, 255);
  text-decoration: underline;
}

.zwc-story-link img {
  width: 23px;
  height: 23px;
}

.zwc-feature-section {
  position: relative;
  padding: 160px 0px;
}

.zwc-feature-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  /* overflow: hidden;
  */
}

.zwc-feature-tab>h2 {
  letter-spacing: -3.2px;
  text-align: center;
  max-width: 800px;
  margin: 0;
}

.zwc-inner-heading>h2 {
  font-family: var(--primaryfont-semibold);
  font-size: 64px;
  line-height: 1.125;
  text-wrap: balance;
}

.zwc-feature-tab-wrap {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
}

.zwc-tab-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  width: 236px;
  height: 597px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.zwc-tab-item {
  padding: 0px 18px;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(230, 230, 230);
  border-radius: 8px;
  cursor: pointer;
  flex: 1 1 0%;
  display: flex;
  align-items: center;
}

.zwc-tab-item p {
  margin: 0;
  font-family: var(--zf-primary-medium);
  font-size: 18px;
  letter-spacing: -0.54px;
  color: rgb(104, 104, 104);
  text-align: left;
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}

.zwc-tab-item p.zwc-pay-mob {
  display: none;
}


.zwc-tab-active p {
  color: rgb(255, 255, 255);
  font-family: var(--primaryfont-semibold);
}

.zwc-tab-item p::before {
  content: "";
  background: url("/sites/zweb/images/peopleplus/zr-bento-icon.svg") 0% 0% / 554px no-repeat;
  width: 14px;
  height: 14px;
  /* flex-shrink: 0; */
  position: absolute;
  left: 0;
  top: 5px;
}

.zwc-tab-item.zwc-talent p::before {
  background-position: -4px -4px;
  width: 15px;
  height: 15px;
}

.zwc-tab-item.zwc-core p::before {
  background-position: -22px -3px;
  width: 18px;
  height: 16px;
}

.zwc-tab-item.zwc-management p::before {
  background-position: -63px -4px;
  width: 16px;
}

.zwc-tab-item.zwc-payroll p::before {
  background-position: -82px -3px;
  width: 18px;
  height: 16px;
}

.zwc-tab-item.zwc-travel p::before {
  background-position: -104px -4px;
}

.zwc-tab-item.zwc-communication p::before {
  background-position: -124px -4px;
  top: 7px;
}

.zwc-tab-item.zwc-analytics p::before {
  background-position: -144px -4px;
}

.zwc-tab-item.zwc-time p::before {
  background-position: -43px -3px;
  width: 16px;
  height: 16px;
}

.zwc-tab-item.zwc-tab-active p::before {
  filter: invert(1) brightness(2);
}

.zwc-tab-active {
  background: rgb(231, 0, 11);
  border-color: rgb(231, 0, 11);
  box-shadow: rgba(0, 0, 0, 0.25) 0px 19px 16px -7px;
  z-index: 1;
}

.zwc-feature-tab-detail {
  gap: 4px;
  border-radius: 12px;
  display: none;
  height: 597px;
  overflow: hidden;
  background: rgb(247, 247, 245);
}

.zwc-feature-tab-detail.zwc-active-feature {
  display: flex;
}

.zwc-tab-item.zwc-payroll,
.zwc-papajohns-cont {
  display: none;
}

.ccode-in .zwc-tab-item.zwc-payroll,
.ccode-sa .zwc-tab-item.zwc-payroll,
.ccode-ae .zwc-tab-item.zwc-payroll {
  display: flex;
}

.zwc-feature-tab-text {
  width: 50%;
  padding: 72px 56px 72px 72px;
}

.zwc-feature-tab-text h3 {
  font-family: var(--primaryfont-semibold);
  font-size: 48px;
  line-height: 1.083;
  letter-spacing: -1.92px;
  margin-bottom: 16px;
  text-wrap: balance;
}

.zwc-feature-tab-text h3 span {
  display: inline-block;
}

.zwc-feature-tab-text p {
  font-family: var(--primaryfont-regular);
  font-size: 18px;
  line-height: 1.556;
  letter-spacing: -0.36px;
  margin-bottom: 24px;
}

.zwc-learn-link {
  font-family: var(--zf-primary-medium);
  font-size: 16px;
  letter-spacing: -0.32px;
  color: rgb(0, 71, 255);
  position: relative;
}

.zwc-learn-link::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 8px;
  vertical-align: middle;
  transform: rotate(-45deg);
  border-right: 2px solid rgb(0, 71, 255);
  border-bottom: 2px solid rgb(0, 71, 255);
  border-radius: 2px;
  transition: 0.3s;
}

.zwc-learn-link:hover::after {
  transform: translateX(5px) rotate(-45deg);
}

.zwc-learn-link:hover {
  text-decoration: underline;
}

.zwc-feature-tab-detail>img {
  object-fit: contain;
  object-position: right bottom;
}

.zwc-fea-talent {
  position: relative;
  left: 20px;
}

.zwc-verticalslide-wrap .content-wrap {
  max-width: 1600px;
}

.zwc-verticalslide-inner {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(at 3% 95%, rgb(255, 87, 9) 0%, rgba(224, 52, 9, 0.86) 31%, rgba(217, 14, 14, 0) 100%), radial-gradient(at 95% 81%, rgb(255, 10, 139) 0%, rgba(255, 0, 117, 0.86) 30%, rgba(236, 7, 65, 0.43) 65%, rgba(217, 14, 14, 0) 100%) rgb(193, 0, 7);
}

.zwc-ai-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.zwc-ai-triangle {
  left: 143px;
  top: 142px;
  width: 119px;
  z-index: 1;
  -webkit-animation: zwc-slide-lr 3s ease-in-out infinite;
  animation: zwc-slide-lr 3s ease-in-out infinite;
}

.zwc-ai-stars {
  right: 18%;
  width: 190px;
  height: 190px;
  -webkit-animation: zwc-rotate 6s linear infinite;
  animation: zwc-rotate 6s linear infinite;
  border-radius: 50%;
  background: radial-gradient(84.98% 84.98% at 13.33% 20%, #FC8512 0%, #FC7612 36.09%, #FA1F14 100%);
  top: 39%;
}

.zwc-ai-text {
  left: 70px;
  bottom: 70px;
  max-width: 197px;
  z-index: 1;
  -webkit-animation: zwc-fade-scale 3s ease-in-out infinite;
  animation: zwc-fade-scale 3s ease-in-out infinite;
}

.zwc-ai-semicircle {
  right: 6%;
  bottom: 0;
  max-width: 181px;
  -webkit-animation: zwc-rock 3s ease-in-out infinite;
  animation: zwc-rock 3s ease-in-out infinite;
  z-index: 1;
}

.zwc-ai-bottom {
  left: 0px;
  bottom: -90px;
  max-width: 1600px;
  z-index: 0;
}

.zwc-verticalslide-content {
  position: relative;
  padding: 160px 0px;
  max-width: 960px;
  margin: auto;
}

.zwc-verticalslide-headtxt {
  max-width: 755px;
  text-align: center;
  color: rgb(255, 255, 255);
  margin: 0 auto 60px;
}

.zwc-verticalslide-headtxt h2 {
  letter-spacing: -2.56px;
  margin-bottom: 24px;
}

.zwc-verticalslide-headtxt p {
  font-family: var(--zf-primary-medium);
  font-size: 18px;
  line-height: 1.667;
  letter-spacing: -0.36px;
  margin: 0;
}

.zwc-screens-container {
  display: flex;
  align-items: center;
  gap: 28px;
  justify-content: flex-end;
}

.zwc-screens-wrap {
  position: relative;
  width: 873px;
  height: 625px;
}

.zwc-screens-wrap::before {
  content: "";
  width: 840px;
  height: 137px;
  position: absolute;
  bottom: -145px;
  border-radius: 8px;
  background: linear-gradient(rgba(255, 255, 255, 0.38) 2.74%, rgba(255, 255, 255, 0) 62.22%);
  left: 15px;
}

.zwc-screens-wrap img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 8px;
  background: #FFF;
  box-shadow: 8px -2px 20px 0 rgba(141, 2, 2, 0.25);
  transition: opacity 0.5s ease, transform 0.5s ease, top 0.5s ease, width 0.5s ease;
}

.zwc-screens-wrap img:nth-child(1) {
  z-index: 3;
}

.zwc-screens-wrap img:nth-child(2) {
  z-index: 2;
}

.zwc-screens-wrap img:nth-child(3) {
  z-index: 1;
}

.zwc-scroll-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  flex-shrink: 0;
  border: 1px solid rgb(255, 96, 96);
  background: rgb(147, 0, 0);
  border-radius: 16px;
  padding: 6px 0px;
}

.zwc-scroll-icon button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0px;
}

.zwc-scroll-icon button span {
  width: 12px;
  height: 12px;
  border-left: 2px solid rgb(255, 255, 255);
  border-bottom: 2px solid rgb(255, 255, 255);
  transform: rotate(315deg);
}

button.zwc-scroll-up span {
  transform: rotate(132deg);
}

.zwc-scroll-up span {
  border-bottom: 8px solid rgba(255, 255, 255, 0.6);
}

.zwc-scroll-icon button:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.zwc-scroll-divider {
  width: 18px;
  height: 2px;
  background: rgb(71, 0, 0);
}

.zwc-screens-wrap img.zwc-screen-current {
  opacity: 1;
  top: 140px;
  width: 840px;
  transform: translateX(-50%) scale(1);
  /* transition: none;
  */
  transition: transform .5s, top .5s;
}

.zwc-screens-wrap img.zwc-screen-active1 {
  top: 70px;
  width: 840px;
  transform: translateX(-50%) scale(0.96);
  /* box-shadow: none;
  */
  transition: opacity 0.5s, transform 1s, top 1s, width 0.5s;
}

.zwc-screens-wrap img.zwc-screen-active2 {
  top: 0px;
  width: 840px;
  transform: translateX(-50%) scale(0.92);
  transition: opacity 0.5s, transform 1s, top 1s, width 0.5s;
}

.zwc-otherfeatures-wrap {
  padding: 160px 0px;
}

.zwc-otherfeatures-wrap .content-wrap>h2 {
  letter-spacing: -2.56px;
  text-align: center;
  max-width: 664px;
  margin: 0px auto 80px;
}

.zwc-bento-container {
  display: flex;
  gap: 16px;
  width: 100%;
  margin-bottom: 16px;
}

.zwc-bento-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 416px;
  width: 100%;
}

.zwc-bento-card {
  padding: 48px;
  background: rgb(247, 247, 245);
  border-radius: 12px;
}

.zwc-card {
  background: url("/sites/zweb/images/peopleplus/zr-bento-icon.svg") 0% 0% / 554px no-repeat;
  display: block;
  margin-bottom: 20px;
}

span.zwc-card.zwc-proof {
  width: 84px;
  height: 90px;
  background-position: -365px -9px;
}

span.zwc-card.zwc-solutions {
  background-position: -166px -3px;
  height: 95px;
  width: 86px;
}

span.zwc-card.zwc-privacy {
  background-position: -463px -3px;
  height: 95px;
  width: 76px;
}

span.zwc-card.zwc-hcm {
  background-position: -266px -5px;
  height: 93px;
  width: 76px;
}

.zwc-bento-mobile {
  display: flex;
  flex-direction: column;
  gap: 44px;
  max-width: 422px;
  flex-shrink: 0;
  border-radius: 12px;
  padding-top: 48px;
  background: radial-gradient(113.5% 105.16% at 84.09% 125.37%, #FFEA8C 0%, rgba(247, 247, 245, 0.00) 100%), radial-gradient(214.99% 105.02% at 16.16% 138.79%, #FF9DB0 0%, rgba(247, 247, 245, 0.00) 100%), #F7F7F5;
  position: relative;
  justify-content: space-between;
}

.zwc-bento-mobile-content {
  padding: 0px 48px;
}

.zwc-ios-icon {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
}

.zwc-bento-mobile-img {
  text-align: center;
}

.zwc-bento-mobile::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 111px;
  background: linear-gradient(rgba(247, 247, 245, 0) 2%, rgb(247, 247, 245) 88%);
  pointer-events: none;
}

.zwc-bento-card h3,
.zwc-bento-mobile-content h3 {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.54px;
  margin-bottom: 4px;
  font-family: var(--primaryfont-bold);
}

.zwc-bento-card p,
.zwc-bento-mobile-content p {
  margin: 0;
}

.zwc-integration-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 70px 0px 80px;
  background: rgb(70, 8, 9);
  border-radius: 12px;
  overflow: hidden;
}

.zwc-integration-center {
  width: 162px;
  height: 162px;
}

.zwc-integration-cont {
  max-width: 818px;
  text-align: center;
}

.zwc-integration-cont h2 {
  font-family: var(--primaryfont-bold);
  font-size: 18px;
  line-height: 1.556;
  letter-spacing: -0.36px;
  color: rgb(255, 255, 255);
  margin: 0px auto 4px;
}

.zwc-integration-cont p {
  font-family: var(--primaryfont-regular);
  font-size: 18px;
  line-height: 1.556;
  letter-spacing: -0.36px;
  color: rgb(255, 201, 201);
  margin: 0px;
}

.zwc-integration-fade {
  position: absolute;
  top: 2px;
  width: 78px;
  height: 435px;
  z-index: 1;
  pointer-events: none;
}

.zwc-fade-left {
  left: 0px;
  background: linear-gradient(91deg, rgb(70, 8, 9) 22%, rgba(70, 8, 9, 0) 77%);
}

.zwc-fade-right {
  right: 0px;
  background: linear-gradient(269deg, rgb(70, 8, 9) 22%, rgba(70, 8, 9, 0) 77%);
}

.zwc-bottom-cta-wrap.colrbg {
  background: radial-gradient(25.99% 39.66% at 52.67% 106.96%, rgba(255, 120, 9, 0.8) 0%, rgba(218, 14, 16, 0) 100%), radial-gradient(105.63% 110.54% at 49.82% 2.67%, rgb(193, 0, 7) 0%, rgb(193, 0, 7) 43.12%, rgb(193, 0, 7) 61.86%, rgb(247, 97, 19) 100%), rgb(193, 0, 7);
  position: relative;
  padding: 160px 0px 340px;
  overflow: hidden;
}

.zwc-bottom-cta-wrap .zwc-cta-inner {
  max-width: 1280px;
  margin: auto;
}

.zwc-bottom-cta-wrap.colrbg::before,
.zwc-bottom-cta-wrap.colrbg::after {
  content: "";
  width: 608px;
  height: 331px;
  position: absolute;
  pointer-events: none;
  z-index: 1;
  bottom: 0px;
}

.zwc-bottom-cta-wrap.colrbg::before {
  left: 0px;
  background: url("/sites/zweb/images/peopleplus/zp-bot-lefcard.png") 0% 0% / contain no-repeat;
}

.zwc-bottom-cta-wrap.colrbg::after {
  right: 0px;
  background: url("/sites/zweb/images/peopleplus/zp-bot-ritcard.png") 0% 0% / contain no-repeat;
}

.zwc-bottom-cta-wrap .zwc-bot-img {
  position: absolute;
}

.zwc-vault-sheild {
  top: 260px;
  left: 60px;
}

img.zwc-bot-img.zwc-lef-grid,
img.zwc-bot-img.zwc-ryt-grid {
  max-width: 840px;
  bottom: 0px;
  z-index: 0;
}

img.zwc-bot-img.zwc-ryt-grid {
  right: 0px;
}

img.zwc-bot-img.zwc-lef-grid {
  left: 0px;
}

.zwc-bottom-cta-wrap .zwc-bot-icon {
  z-index: 1;
  -webkit-animation: zwc-float 3s ease-in-out infinite;
  animation: zwc-float 3s ease-in-out infinite;
}

.zwc-bottom-cta-wrap .zwc-chatbot {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}

.zwc-bottom-cta-wrap .zwc-star {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}

.zwc-bottom-cta-wrap .zwc-profile {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

@-webkit-keyframes zwc-float {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }

  50% {
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
  }

  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes zwc-float {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }

  50% {
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
  }

  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

/* AI section decorative animations */
@-webkit-keyframes zwc-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes zwc-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes zwc-slide-lr {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }

  50% {
    -webkit-transform: translateX(15px);
    transform: translateX(15px);
  }

  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

@keyframes zwc-slide-lr {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }

  50% {
    -webkit-transform: translateX(15px);
    transform: translateX(15px);
  }

  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

@-webkit-keyframes zwc-fade-scale {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  50% {
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
    opacity: 0.8;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes zwc-fade-scale {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  50% {
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
    opacity: 0.8;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes zwc-rock {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg);
  }

  75% {
    -webkit-transform: rotate(-8deg);
    transform: rotate(-8deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes zwc-rock {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg);
  }

  75% {
    -webkit-transform: rotate(-8deg);
    transform: rotate(-8deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.zwc-chatbot {
  bottom: 220px;
  left: 400px;
}

.zwc-profile {
  right: 410px;
  bottom: 210px;
}

.zwc-star {
  right: 130px;
  top: 280px;
}

/* Marquee Play/Pause Button */
.zwc-integration-wrap .zwc-marquee-toggle {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 20;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #CA5255;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.zwc-integration-wrap .zwc-marquee-toggle:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.zwc-integration-wrap .zwc-marquee-toggle.is-playing .zwc-toggle-play {
  display: none;
}

.zwc-integration-wrap .zwc-marquee-toggle:not(.is-playing) .zwc-toggle-pause {
  display: none;
}

.zwc-integration-wrap .zwc-marquee-toggle:not(.is-playing) .zwc-toggle-play {
  display: block;
}

.zwc-marquee-section {
  position: relative;
  padding: 67px 20px;
}

.zwc-brands-wrap {
  display: flex;
  overflow: hidden;
  position: relative;
  /* z-index: 14;
  */
}

.zwc-brand-list {
  display: flex;
}

.zwc-brand-list:hover li {
  animation-play-state: paused;
}

.zwc-brand-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  /* width: 200px;
  */
  padding: 10px 25px;
  border: 1px solid #ebebeb;
  background: #fff;
  border-radius: 5px;
  margin: 0 10px;
  flex-shrink: 0;
  height: 65px;
  will-change: transform;
}

.zwc-brand-list li img {
  max-width: 150px;
}

.img-wrap {
  position: absolute;
  inset: 0px;
  margin: auto;
  text-align: center;
  z-index: 13;
  max-width: 280px;
  background: linear-gradient(90deg, rgba(70, 8, 9, 0.00) 9.63%, #460809 18.34%, #460809 52.88%, #460809 81.68%, rgba(70, 8, 9, 0.00) 90.02%);
}

.img-wrap .pplus {
  background: var(--product-icons) no-repeat;
  background-size: var(--zp-i-bs);
  width: var(--zp-i-w);
  height: var(--zp-i-h);
  margin-bottom: 20px;
  position: absolute;
  transform: scale(2.2) translateX(50%);
  background-position: var(--zp-pplus-bp);
  filter: invert(1) brightness(10);
  top: 41%;
  left: 27%;
  margin: auto;
}

/* ============================================= Common Styles - Bottom CTA Section ============================================= */

.zwc-bottom-cta-wrap .zwc-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
  color: #fff;
  position: relative;
  z-index: 1;
}

.zwc-bottom-cta-wrap h2 {
  font-family: var(--primaryfont-semibold);
  font-size: 72px;
  line-height: 1.1;
  letter-spacing: -2.4px;
  margin: 0;
}


@media screen and (max-width: 1440px) {
  .zwc-bottom-cta-wrap .zwc-cta-inner {
    max-width: 880px;
  }

  .zwc-banner-wrap .content-wrap {
    width: 95%;
  }

  img.zwc-bot-img.zwc-lef-grid,
  img.zwc-bot-img.zwc-ryt-grid {
    max-width: 580px;
  }

  .zwc-screens-wrap img.zwc-screen-active1 {
    top: 60px;
  }

  .zwc-screens-wrap img.zwc-screen-current {
    top: 120px;
  }

  .zwc-bottom-cta-wrap.colrbg::before,
  .zwc-bottom-cta-wrap.colrbg::after {
    width: 500px;
    height: 270px;
  }

  .zwc-bottom-cta-wrap .zwc-bot-icon {
    max-width: 100px;
  }

  .zwc-learn-link {
    max-width: 285px;
    display: inline-block;
  }

  .zwc-verticalslide-headtxt {
    margin: 0 auto 40px;
  }

  .zwc-bottom-cta-wrap.colrbg {
    padding: 120px 0px 280px;
  }

  .zwc-vault-sheild {
    top: 240px;
  }

  .zwc-chatbot {
    bottom: 150px;
    left: 320px;
  }

  .zwc-profile {
    right: 270px;
    bottom: 170px;
  }

  .zwc-star {
    right: 70px;
    top: 250px;
  }

  .zwc-screens-wrap {
    width: 700px;
    height: 605px;
  }

  img.zwc-head-icon.zwc-semicircle {
    top: 400px;
  }

  .zwc-screens-wrap::before {
    width: 700px;
    bottom: -64px;
    left: 0;
  }

  .zwc-verticalslide-content {
    max-width: 780px;
    padding: 100px 0px;
  }

  .zwc-otherfeatures-wrap .content-wrap>h2 {
    margin: 0px auto 50px;
    letter-spacing: -2px;
  }

  .zwc-bento-mobile {
    max-width: 408px;
  }

  .zwc-bento-card {
    padding: 40px;
  }

  .zwc-bottom-cta-wrap h2 {
    font-size: 54px;
  }

  .zwc-scroll-icon {
    position: absolute;
    right: -20px;
  }

  .zwc-feature-tab-detail>img {
    width: 60%;
  }

  .zwc-screens-container {
    justify-content: center;
  }

  .zwc-ai-triangle,
  .zwc-ai-text,
  .zwc-ai-semicircle,
  .zwc-ai-stars {
    display: none;
  }

  .zwc-pad-space {
    padding: 120px 0px;
  }

  .zwc-feature-tab-text {
    padding: 70px 50px 0;
  }

  .zwc-feature-tab-text h3 {
    font-size: 35px;
    letter-spacing: -1px;
  }

  .zwc-feature-tab>h2 {
    max-width: 650px;
  }

  .zwc-inner-heading>h2 {
    font-size: 48px;
    letter-spacing: -2px;
  }

  .zwc-feature-tab {
    gap: 40px;
  }

  .zwc-testi-container {
    padding: 0px 80px;
  }

  .zwc-testi-inner .zwc-content-innerwrap>h2 {
    font-size: 22px;
  }

  .zwc-testi-inner .zwc-testi {
    min-width: 900px;
  }

  .zwc-banner-cont h1 {
    font-size: 60px;
  }

  /* .zwc-integration-wrap {
      padding: 80px 0;
 }
  */
}

@media screen and (max-width: 1280px) {
  .zwc-feature-tab-text {
    padding: 50px 30px 0;
  }

  .zwc-tab-container,
  .zwc-feature-tab-detail {
    height: 530px;
  }

  .zwc-pad-space {
    padding: 90px 0px;
  }
}

@media screen and (max-width: 1199px) {
  .zwc-bottom-cta-wrap .zwc-bot-icon {
    max-width: 70px;
    bottom: 140px;
  }

  .zwc-card-fan {
    padding: 70px 0 0;
  }

  .zwc-bottom-cta-wrap.colrbg::before,
  .zwc-bottom-cta-wrap.colrbg::after {
    width: 410px;
    height: 220px;
  }

  .zwc-bottom-cta-wrap.colrbg {
    padding: 90px 0px 240px;
  }

  .zwc-card-item span {
    margin-bottom: 8px;
  }

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

  .zwc-banner-cont h1 {
    font-size: 48px;
    letter-spacing: -2px;
  }

  .zwc-banner-cont {
    max-width: 680px;
  }

  .zwc-inner-heading>h2 {
    font-size: 42px;
    max-width: 540px;
    margin: 0 auto 20px;
  }

  .zwc-otherfeatures-wrap .content-wrap>h2 {
    max-width: 600px;
  }

  img.zwc-head-icon.zwc-triangle {
    top: 280px;
  }

  img.zwc-head-icon.zwc-semicircle {
    top: 340px;
  }

  .zwc-feature-tab-wrap {
    flex-direction: column;
    max-width: 972px;
    margin: auto;
    gap: 20px;
  }

  .zwc-tab-container {
    flex-flow: wrap;
    width: 100%;
    gap: 8px;
    height: auto;
    justify-content: center;
  }

  .zwc-tab-item {
    padding: 12px;
    max-width: max-content;
    flex: unset;
    width: 100%;
    text-align: center;
  }

  .zwc-tab-item p {
    font-size: 14px;
    line-height: 1.2;
    padding: 0;
  }

  .zwc-tab-item p::before {
    display: none;
  }


  .zwc-bento-mobile {
    padding-top: 20px;
  }

  .zwc-testi-deco,
  .zwc-testi-inner::after {
    display: none;
  }

  .zwc-testi-bg {
    width: 300px;
    height: 400px;
  }

  .zwc-feature-tab-detail {
    height: 480px;
    justify-content: space-between;
  }

  .zwc-feature-tab-text {
    padding: 60px 60px 0;
  }

  .zwc-feature-tab-detail>img {
    width: 45%;
  }

  .zwc-bottom-cta-wrap h2 {
    font-size: 48px;
  }

  .zwc-bento-container {
    flex-wrap: wrap;
    justify-content: center;
  }

  .zwc-bento-col {}

  .zwc-bento-col:last-child {
    flex-direction: row;
    max-width: 845px;
    width: 100%;
  }

  .zwc-bento-col:last-child .zwc-bento-card {
    flex: 1 1 0%;
  }

  .zwc-tab-item p.zwc-pay-desk {
    display: none;
  }

  .zwc-tab-item p.zwc-pay-mob {
    display: block;
  }

  .zwc-testi-container {
    padding: 0px 64px;
  }

  .zwc-testi-inner {
    padding: 125px 0px 100px;
  }

  .zwc-testi-inner .zwc-testi {
    min-width: 850px;
    max-width: 850px;
    height: 460px;
  }

  .zwc-testi-inner .zwc-content-innerwrap>h2 {
    font-size: 20px;
  }

  .zwc-testi-inner .zwc-content-innerwrap {
    padding-bottom: 0;
    min-height: 260px;
  }

  .zwc-testi-inner .zwc-user-name p {
    font-size: 18px;
  }

  .zwc-testi-inner .zwc-user-name span {
    font-size: 15px;
  }

  .zwc-testi-inner .zwc-user-name {
    max-width: 180px;
  }

  .zwc-card-fan-inner {
    height: 380px;
  }

  .zwc-card-item img {
    width: 200px;
  }
}

@media screen and (max-width: 1024px) {

  .zwc-faq-heading,
  .zwc-faq-cont {
    width: 100%;
  }

  .zwc-head-icon.zwc-animate {
    display: none;
  }

  .zwc-trust-inner {
    padding: 0px 0px 56px;
  }

  .zwc-bottom-cta-wrap.colrbg::before,
  .zwc-bottom-cta-wrap.colrbg::after {
    display: none;
  }

  .zwc-testi-bg.zwc-bizbox img {
    max-width: 120px;
  }

  .zwc-bottom-cta-wrap .zwc-bot-icon {
   display: none;
  }

  .zwc-banner-cont h1 {
    font-size: 40px;
    letter-spacing: -1px;
  }

  .zwc-inner-heading>h2,
  .zwc-otherfeatures-wrap .content-wrap>h2 {
    font-size: 34px;
    letter-spacing: -1px;
  }

  .zwc-otherfeatures-wrap .content-wrap>h2 {
    max-width: 500px;
  }

  .zwc-banner-cont {
    max-width: 580px;
  }

  .zwc-testi-inner .zwc-content-innerwrap {
    min-height: 180px;
  }

  .zwc-verticalslide-headtxt {
    max-width: 650px;
  }

  .zwc-trust-container {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 770px;
    margin: auto;
  }

  .zwc-bottom-cta-wrap .zwc-cta-inner {
    max-width: 580px;
    gap: 30px;
  }

  .zwc-banner-cont p,
  .zwc-feature-tab-text p,
  .zwc-verticalslide-headtxt p {
    font-size: 16px;
  }

  .zwc-testi-inner .zwc-testi {
    min-width: 600px;
    max-width: 600px;
    flex-direction: column;
    align-items: flex-start;
    height: unset;
  }

  .zwc-testi-inner .zwc-user-name {
    max-width: 210px;
  }

  .zwc-testi-bg {
    width: 250px;
    height: 100px;
  }

  .zwc-feature-tab>h2 {
    max-width: 450px;
  }

  .zwc-testi-bg img {
    padding: 20px;
  }

  .zwc-pad-space {
    padding: 80px 0px;
  }

  .zwc-testi-inner {
    padding: 125px 0px 80px;
  }

  .zwc-verticalslide-content {
    padding: 80px 40px;
  }


  .zwc-bottom-cta-wrap h2 {
    font-size: 34px;
    line-height: 1.3;
    letter-spacing: -1.2px;
  }

  /* .zwc-card-item img {
      width: 160px;
 }
  */
  img.zwc-bot-img.zwc-lef-grid,
  img.zwc-bot-img.zwc-ryt-grid {
    display: none;
  }

  .zwc-bottom-cta-wrap.colrbg {
    padding: 80px 0;
  }
}

@media screen and (max-width: 991px) {
  .zwc-bottom-cta-wrap .zwc-cta-inner {
    max-width: 580px;
  }

  .zwc-integration-cont p {
    max-width: 570px;
  }

  .zwc-ai-bottom {
    bottom: -110px;
  }

  .zwc-bento-col:last-child {
    max-width: 720px;
  }

  .zwc-feature-tab-detail {
    flex-direction: column;
    display: flex;
    height: auto;
    max-width: 750px;
    margin: 0 auto 20px;
  }

  .zwc-fea-talent {
    left: 0;
  }

  .zwc-papajohns-cont {
    display: none;
  }

  .ccode-ae .zwc-papajohns-cont,
  .ccode-in .zwc-papajohns-cont,
  .ccode-sa .zwc-papajohns-cont {
    display: flex;
  }

  #panel-payroll,
  #panel-communication,
  #panel-time-attendance {
    gap: 30px;
  }

  .zwc-feature-tab-detail>img {
    width: 100%;
    max-width: 500px;
    margin: auto;
  }

  .zwc-tab-container {
    display: none;
  }

  .zwc-feature-tab-text {
    padding: 48px 48px 0;
    width: 100%;
    max-width: 600px;
    margin: auto;
    text-align: center;
  }

  .zwc-feature-tab-text h3 {
    font-size: 30px;
  }

  .zwc-bento-mobile {
    max-width: 350px;
  }

  .zwc-bento-col {
    max-width: 346px;
  }

  .zwc-bento-mobile-img {
    height: 300px;
    flex: 1 1 0%;
  }

  .zwc-screens-wrap {
    width: 100%;
    height: 450px;
    height: 520px;
  }

  .zwc-verticalslide-content {
    max-width: 660px;
  }

  .zwc-screens-wrap::before {
    width: 580px;
    bottom: -80px;
  }

  .zwc-feature-tab {
    gap: 15px;
  }

  .zwc-feature-tab-content {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {

  .zwc-head-icon,
  .zwc-ai-bottom {
    display: none;
  }

  .zwc-bottom-cta-wrap .zwc-cta-inner {
    gap: 32px;
  }

  .zwc-bottom-cta-wrap h2 {
    font-size: 30px;
    letter-spacing: -1px;
  }

  .zwc-scroll-icon {
    /* position: relative;
      transform: rotate(90deg);
      right: 0;
      */
    display: none;
  }

  .zwc-screens-wrap img {
    position: relative;
  }

  .zwc-banner-cont h2 {
    font-size: 36px;
    letter-spacing: -1.5px;
  }

  .zwc-trust-inner {
    padding: 20px 0px 60px;
  }

  .zwc-otherfeatures-wrap .content-wrap>h2 {
    max-width: 380px;
    margin: 0 auto 30px;
  }

  .zwc-bento-col {
    max-width: 100%;
  }

  .zwc-bento-container p {
    max-width: 550px;
  }

  .zwc-marquee-section .img-wrap {
    display: none;
  }

  .zwc-integration-wrap {
    padding: 60px 0;
    gap: 32px
  }

  .zwc-integration-cont p {
    font-size: 16px;
    width: 80%;
    margin: auto;
  }

  .zwc-marquee-section {
    padding: 20px 20px 0;
  }

  .zwc-testi-inner .zwc-testi {
    min-width: unset;
    max-width: unset;
    height: auto;
    gap: 24px;
  }

  .zwc-testi-slider-wrap .slick-list {
    min-width: unset;
  }

  .zwc-testi-inner .zwc-content-innerwrap {
    min-height: unset;
  }

  .zwc-testi-inner .zwc-content-wrap {
    width: 100%;
  }

  .zwc-testi-inner .zwc-content-innerwrap>h2 {
    max-width: 100%;
  }

  .zwc-testi-inner .zwc-user-cont {
    gap: 32px;
    align-items: flex-start;
    flex-direction: column-reverse;
    border: none;
    padding: 0;
  }

  .zwc-testi-container {
    padding: 0px 20px;
  }

  .zwc-inner-heading>h2,
  .zwc-otherfeatures-wrap .content-wrap>h2 {
    font-size: 30px;
  }

  .zwc-feature-tab-text h3 {
    font-size: 24px;
    letter-spacing: -0.56px;
  }

  .zwc-banner-cont p,
  .zwc-feature-tab-text p,
  .zwc-verticalslide-headtxt p {
    font-size: 15px;
    letter-spacing: unset;
  }

  .zwc-tab-container {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .zwc-tab-item {
    white-space: nowrap;
    flex-shrink: 0;
    height: auto;
    padding: 12px 14px;
  }

  .zwc-tab-item p {
    font-size: 14px;
  }

  .zwc-screens-wrap::before {
    display: none;
  }

  .zwc-feature-tab-text {
    padding: 48px 24px 0;
  }

  .zwc-bento-container {
    flex-direction: column;
  }

  .zwc-bento-mobile {
    flex-direction: column;
    height: auto;
    padding-top: 48px;
    gap: 40px;
    max-width: 100%;
  }

  .zwc-bento-mobile-img {
    height: 280px;
  }

  .zwc-verticalslide-content {
    padding: 60px 20px;
  }

  .zwc-pad-space {
    padding: 60px 0px;
  }

  .zwc-screens-wrap {
    height: auto;
  }

  .zwc-bottom-cta-wrap.colrbg {
    padding: 60px 0;
  }

  .zwc-bottom-cta-wrap .zwc-cta-inner {
    max-width: 520px;
  }

  .zwc-bento-col {
    width: 100%;
  }

  .zwc-bento-col:last-child {
    flex-direction: column;
    max-width: 100%;
  }

  .zwc-bottom-cta-wrap .zwc-bot-img {
    display: none;
  }

  .zwc-banner-cont h1 {
    font-size: 34px;
  }

  .zwc-card-fan-inner {
    height: 300px;
  }

  .zwc-card-item img {
    width: 160px;
  }

  .zwc-card-item span {
    margin-bottom: 8px;
    font-size: 15px;
  }
}

@media only screen and (max-width: 480px) {
  .zwc-banner-cont {
    padding: 30px 0px 20px;
  }

  .zwc-banner-cont h1 {
    font-size: 32px;
  }


  .zwc-banner-cont h1 span {
    display: inline;
  }

  .zwc-testi-bg img {
    max-width: 130px;
  }

  .zwc-testi-bg {
    width: 230px;
    height: 70px;
  }

  .zwc-testi-inner .zwc-testi {
    padding: 16px;
  }

  .zwc-trust-logo {
    max-width: 130px;
    padding: 18px 24px;
  }

  .zwc-testi-inner .zwc-testi:not(:last-child) {
    margin-right: 10px;
  }

  .zwc-testi-container {
    padding: 0px 10px;
  }

  .slick-next,
  .slick-prev {
    display: none;
  }

  .zwc-testi-inner {
    padding: 16px 0px 0;
  }

  .slick-dots li {
    background: #646464;
    border: none;
  }

  .slick-dots {
    margin: 16px 0 0;
  }

  .slick-dots li.slick-active {
    background: #fff;
  }

  .zwc-testi-inner .zwc-content-innerwrap>h2 {
    letter-spacing: unset;
    font-size: 18px;
  }

  .zwc-inner-heading>h2,
  .zwc-otherfeatures-wrap .content-wrap>h2 {
    font-size: 28px;
    letter-spacing: -0.56px;
  }

  .zwc-feature-tab {
    gap: 20px;
  }

  .zwc-optimize-wrap,
  .zwc-papajohns-cont {
    gap: 24px;
  }

  .zwc-feature-tab-text p {
    margin-bottom: 20px;
  }

  .zwc-bento-mobile-content {
    padding: 0px 20px;
  }

  .zwc-bento-card {
    padding: 40px 20px;
  }

  .zwc-marquee-section .zwc-list-wrap .zwc-list-item,
  .zwc-marquee-section .zwc-list-wrap.slick-initialized .zwc-list-item {
    padding: 7px 12px;
    width: 110px;
    height: 50px;
  }

  .zwc-banner-cont p {
    margin: 15px auto 24px;
  }

  .zwc-card-fan-inner {
    height: 230px;
  }

  .zwc-card-item img {
    width: 130px;
  }

  .zwc-card-item span {
    font-size: 15px;
    margin-bottom: 6px;
  }


  .zwc-bottom-cta-wrap h2 {
    font-size: 28px;
  }
}