/* ========================================
   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;
}
.zgh-localization ul:empty {
    display: none ;
}

.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("/sites/zweb/images/peopleplus/payroll-gridframe.svg") no-repeat;
  background-size: 1190px auto;
  width: 600px;
  height: 540px;
  pointer-events: none;
}

/* ball1 - bottom right */
.zwc-workplace-cards::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  background: url("/sites/zweb/images/peopleplus/payroll-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("/sites/zweb/images/peopleplus/payroll-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("/sites/zweb/images/peopleplus/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
   }



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


.zwc-cta-decor {
      position: absolute;
    pointer-events: none;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: contain;
}

.zwc-decorshap1 {
  right: -290px;
  bottom: -180px;
    width: 260px;
  height: 260px;
      background: url("/sites/zweb/images/peopleplus//payrollft3.png") no-repeat;
}

.zwc-decorshap2 {
    right: -60px;
    top: 0;
    background: url("/sites/zweb/images/peopleplus/payrollft2.png") no-repeat;
    width: 240px;
    height: 330px;
    background-size: 240px auto;
}

.zwc-decorshap3 {
left: -20px;
  bottom: -180px;
  width: 260px;
  height: 260px;
  background: url("/sites/zweb/images/peopleplus/payrollft1.png") no-repeat;
    background-size: auto;
  width: 400px;
  height: 100px;
  background-size: 400px auto;
}

.zwc-decorshap4 {
left: -260px;
  bottom: -90px;
  background: url("/sites/zweb/images/peopleplus/payrollft4.png") no-repeat;
    background-size: auto;
  width: 350px;
  height: 290px;
  background-size: 340px auto;
}


/* payrollft1 - dome, bottom-center */

/* payrollft2 - ID card, right */

/* 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;
  }
}