/* ========================================
   Payroll India - Page-Specific Styles
   Overrides only; base styles from
   ../master/common.css and ../master/product-common.css
   ======================================== */


/* ========================================
   Section 1: Banner Overrides
   .zwc-banner-wrap
   (Background gradient specific to payroll-india)
   ======================================== */

/* .zwc-banner-wrap {
  background-image:
    radial-gradient(ellipse at 30% 60%, rgba(255, 230, 166, 0.8) 0%, rgba(255, 230, 166, 0) 50%),
    radial-gradient(ellipse at 70% 40%, rgba(255, 164, 164, 0.51) 0%, rgba(255, 164, 164, 0) 50%);
  background-size: cover;
} */



/* ========================================
   Section 2: Dark Cards Overrides
   .zwc-workplace-cards
   (Decorative elements specific to payroll-india)
   ======================================== */

.zwc-workplace-cards {
  position: relative;
  overflow: hidden;
}

.zwc-workplace-cards .zwc-inner-wrap h2 {
  max-width: 1050px;
}

/* gridframe - top right */
.zwc-workplace-cards::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background: url("assets/gridframe.svg") no-repeat;
  background-size: 1190px auto;
  width: 600px;
  height: 740px;
  pointer-events: none;
}

/* ball1 - bottom right */
.zwc-workplace-cards::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  background: url("assets/ball1.png") no-repeat;
  background-size: contain;
  width: 300px;
  height: 240px;
  pointer-events: none;
}

.zwc-workplace-cards .content-wrap {
  position: relative;
}

/* coin-lg, left bottom */
.zwc-workplace-cards .content-wrap::before {
  content: "";
  position: absolute;
  left: -220px;
  bottom: -220px;
  background: url("assets/coin-lg.png") no-repeat;
  background-size: 500px auto;
width: 510px;
  height: 490px;
  pointer-events: none;
  z-index: 0;
}

.zwc-workplace-cards .content-wrap::after {
  content: "";
  position: absolute;
right: 300px;
  top: 170px;
  background: url("assets/coin-sm.png") no-repeat;
  background-size: contain;
  width: 180px;
  height: 170px;
  pointer-events: none;
  z-index: 0;
}

/* Sprite icon positions for dark cards */
.zwc-workplace-cards .zwc-card:nth-child(1) .zwc-card-text h3::before {
  background-position: -2234px 0;
}

.zwc-workplace-cards .zwc-card:nth-child(2) .zwc-card-text h3::before {
  background-position: -2359px 0;
}

.zwc-workplace-cards .zwc-card:nth-child(3) .zwc-card-text h3::before {
  background-position: -2490px 0;
}


.featpages .zwc-feature-section .zwc-feature-tab-img {
  align-items: center;
}


.zwc-ind-complaince .zwc-tab-title-wrap:nth-child(1) h3::before { 
  background-position-x: -981px; }
  .zwc-ind-complaince .zwc-tab-title-wrap:nth-child(2) h3::before { 
  background-position-x: -1014px; }
  .zwc-ind-complaince .zwc-tab-title-wrap:nth-child(3) h3::before { 
  background-position-x: -1049px; }
    .zwc-ind-complaince .zwc-tab-title-wrap:nth-child(4) h3::before { 
  background-position-x: -1081px; }
    .zwc-ind-complaince .zwc-tab-title-wrap:nth-child(5) h3::before { 
  background-position-x: -1114px; }
    .zwc-ind-complaince .zwc-tab-title-wrap:nth-child(6) h3::before { 
  background-position-x: -1148px; }
    .zwc-ind-complaince .zwc-tab-title-wrap:nth-child(7) h3::before { 
  background-position-x: -1184px; }
    .zwc-ind-complaince .zwc-tab-title-wrap:nth-child(8) h3::before { 
  background-position-x: -1216px; }
    .zwc-ind-complaince .zwc-tab-title-wrap:nth-child(9) h3::before { 
  background-position-x: -1249px; }

/* ========================================
   Section 3: Feature Nav Tabs Overrides
   .zwc-feature-section .zwc-meet-candidates
   (Badge title style instead of large H2)
   ======================================== */



/* ========================================
   Section 4: Bottom CTA Overrides
   .zwc-bottom-cta-wrap
   (Decorative image specific to payroll-india)
   ======================================== */

   .zwc-bottom-cta-wrap {
    background: radial-gradient(22.8% 65.55% at 102.26% 0%, #FF9D00 0%, rgba(193, 0, 7, 0.00) 100%), radial-gradient(40.74% 76.47% at -0.63% -10.15%, #FF9D00 0%, rgba(193, 0, 7, 0.00) 100%), radial-gradient(73.08% 61.07% at 108.47% 102.02%, #F50093 0%, rgba(193, 0, 7, 0.00) 100%), #C10007
   }

/* payrollft4 - circle+cursor, left */
.zwc-bottom-cta-wrap::before {
  content: "";
  position: absolute;
left: -60px;
  bottom: 20px;
  background: url("assets/payrollft4.png") no-repeat;
  background-size: contain;
  width: 320px;
  height: 280px;
  pointer-events: none;
}

/* payrollft3 - gradient ball, bottom-left */
.zwc-bottom-cta-wrap::after {
    content: "";
  position: absolute;
bottom: -80px;
  left: 2%;
  background: url("assets/payrollft1.png") no-repeat;
  background-size: contain;
  width: 350px;
  height: 140px;
  pointer-events: none;
  transform: translateX(50%);
}

.zwc-bottom-cta-wrap .content-wrap {
  position: relative;
}

/* payrollft1 - dome, bottom-center */
.zwc-bottom-cta-wrap .content-wrap::before {
  content: "";
  position: absolute;
right: -290px;
  bottom: -180px;
  background: url("assets/payrollft3.png") no-repeat;
  background-size: contain;
  width: 260px;
  height: 260px;
  pointer-events: none;
}

/* payrollft2 - ID card, right */
.zwc-bottom-cta-wrap .content-wrap::after {
  content: "";
  display: block;
  position: absolute;
  right: -20px;
  bottom: -40px;
  background: url("assets/payrollft2.png") no-repeat;
  background-size: contain;
  width: 240px;
  height: 280px;
  pointer-events: none;
}

/* CTA heading size override */
.zwc-bottom-cta-wrap .zwc-cta-inner h2 {
  font-size: 72px;
  letter-spacing: -2.88px;
  max-width: 1007px;
}

/* CTA subtitle text */
.zwc-bottom-cta-wrap .zwc-cta-subtext {
  font-family: var(--primaryfont-regular);
  font-size: 18px;
  letter-spacing: -0.72px;
  color: #fff;
  text-align: center;
}

/* CTA arrow override for white arrows on dark CTA */
.zwc-bottom-cta-wrap .zwc-cta-arrow::after {
  background-position: 3px 0;
}

/* Secondary button white border on dark bg */
.zwc-bottom-cta-wrap .request-btn.zwc-cta-arrow::before {
  border-color: #fff;
}

.zwc-bottom-cta-wrap .request-btn.zwc-cta-arrow {
  color: #fff;
  background: linear-gradient(90deg, #fff 50%, transparent 0);
  background-size: 200% 100%;
  background-position: 100% 100%;
}


/* ========================================
   Responsive - Small Desktop (1440px)
   ======================================== */

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


/* ========================================
   Responsive - Tablet (1024px)
   ======================================== */

@media screen and (max-width: 1024px) {
  .zwc-bottom-cta-wrap .zwc-cta-inner h2 {
    font-size: 48px;
  }

  /* Hide decorative elements in dark cards */
  .zwc-workplace-cards .zwc-decor-coin-small,
  .zwc-workplace-cards .zwc-decor-coin-large,
  .zwc-workplace-cards .zwc-decor-ball {
    display: none;
  }

  /* Hide CTA decorative image */
  .zwc-bottom-cta-wrap .content-wrap::before {
    display: none;
  }
}


/* ========================================
   Responsive - Mobile (767px)
   ======================================== */

@media screen and (max-width: 767px) {
  .zwc-workplace-cards .zwc-grid-bottom {
    display: none;
  }

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

  .zwc-bottom-cta-wrap .zwc-cta-subtext {
    font-size: 16px;
  }
}


/* ========================================
   Responsive - Small Mobile (480px)
   ======================================== */

@media screen and (max-width: 480px) {
  .zwc-bottom-cta-wrap .zwc-cta-inner h2 {
    font-size: 28px;
  }
}