/* ========================================
   Talent Acquisition Page - styles.css
   Section-specific styles only
   Common patterns in ../master/common.css
   Shared section styles in ../master/product-common.css
   ======================================== */


/* ========================================
   Section 1: Banner
   .zwc-banner-wrap
   (Layout from product-common.css)
   ======================================== */

/* .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;
} */


.featpages .zwc-banner-cont {
  max-width: 495px;
}


.zwc-workplace-cards {
background: radial-gradient(42.15% 49.85% at 86.66% -20.79%, rgba(162, 0, 37, 0.61) 0%, rgba(154, 0, 35, 0.55) 40.1%, rgba(75, 1, 21, 0.00) 100%), radial-gradient(26.41% 15.79% at -1.67% 2.74%, rgba(135, 0, 18, 0.54) 0%, rgba(0, 0, 0, 0.00) 100%), radial-gradient(84.71% 57.36% at 95.26% 102.08%, #870012 0%, rgba(0, 0, 0, 0.00) 100%), #000;
}

.zwc-workplace-cards .zwc-inner-wrap h2 {
  max-width: 900px;
}

/* Section 2: Sprite icons for dark cards */
.zwc-workplace-cards .zwc-card:nth-child(1) .zwc-card-text h3::before {
  background-position: 0 0;
}

.zwc-workplace-cards .zwc-card:nth-child(2) .zwc-card-text h3::before {
  background-position: -128px 0;
}

.zwc-workplace-cards .zwc-card:nth-child(3) .zwc-card-text h3::before {
  background-position: -256px 0;
}


/* ========================================
   Section 3: Feature Section (Light Tab)
   .zwc-feature-section
   Tab image swap with fade transition
   ======================================== */

.featpages .zwc-feature-section.tabstyle2 .zwc-feature-tab h2 {
  max-width: 980px;
}


.zwc-meet-candidates .content-wrap::after{
  content: '';
  position: absolute;
bottom: -110px;
  right: -80px;
  background: url(assets/c695f679f2e49709c48bbc9c2e80e760ca916f8a.png) no-repeat;
width: 350px;
  height: 350px;
  background-size: 350px auto;
}

/* Sprite icon positions for feature tabs */
.zwc-meet-candidates .zwc-tab-title-wrap:nth-child(1) h3::before { background-position-x: -2px; }
.zwc-meet-candidates .zwc-tab-title-wrap:nth-child(2) h3::before { background-position-x: -35.7px; }
.zwc-meet-candidates .zwc-tab-title-wrap:nth-child(3) h3::before { background-position-x: -69.4px; }
.zwc-meet-candidates .zwc-tab-title-wrap:nth-child(4) h3::before { background-position-x: -103.1px; }
.zwc-meet-candidates .zwc-tab-title-wrap:nth-child(5) h3::before { background-position-x: -138px; }
.zwc-meet-candidates .zwc-tab-title-wrap:nth-child(6) h3::before { background-position-x: -170.6px; }

.zwc-meet-candidates .zwc-feature-tab-img {
  position: relative;
  display: flex;
  align-items: flex-end;
}

.zwc-meet-candidates .zwc-feature-tab-img img {
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.zwc-meet-candidates .zwc-feature-tab-img img.active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
}


/* ========================================
   Section 4: Bento Grid - Nurture Candidate
   .zwc-otherfeatures-wrap
   (All base styles from product-common.css)
   ======================================== */

/* No page-specific overrides needed */


/* ========================================
   Section 5: Two Col - Offer Letters
   .zwc-offer-letters
   ======================================== */

.zwc-offer-letters {
  padding: 120px 0;
}

.zwc-offer-letters .zwc-section-inner-wrap h2 {
  font-family: var(--primaryfont-semibold);
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -2.56px;
  color: #000;
  text-align: center;
  margin-bottom: 40px;
}

.zwc-offer-letters .zwc-twocol-row {
  display: flex;
  gap: 24px;
}

.zwc-offer-letters .zwc-section-card {
  flex: 1;
}


/* ========================================
   Section 6: Dark Three Col - Digital Onboarding
   .zwc-onboarding
   ======================================== */

.zwc-onboarding {
  padding: 0;
}

.zwc-onboarding {
  max-width: 1600px;
  border-radius: 16px;
  overflow: hidden;
  background:
radial-gradient(114.19% 96.63% at 99.9% 106.4%, #A20025 0%, rgba(154, 0, 35, 0.90) 40.1%, rgba(75, 1, 21, 0.00) 100%), linear-gradient(142deg, #770019 0.99%, rgba(75, 1, 21, 0.00) 40%), #4B0015;
  padding: 120px 0;
  margin: 0 auto;
}

.zwc-onboarding .zwc-dark-section-inner h2 {
  font-family: var(--primaryfont-semibold);
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -2.56px;
  color: #fff;
  text-align: center;
  max-width: 800px;
}

.zwc-onboarding .zwc-section-inner.threecol {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

.zwc-onboarding .zwc-section-card.dark {
  flex: 1;
  background-color: rgba(39, 0, 11, 0.9);
  border: 1.5px solid #720020;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.zwc-onboarding .zwc-section-card.dark .zwc-section-card-txt {
  padding: 40px 40px 24px;
}

.zwc-onboarding .zwc-section-card.dark .zwc-section-card-txt h3 {
  color: #fff;
  max-width: 280px;
}

.zwc-onboarding .zwc-section-card.dark .zwc-section-card-txt p {
  color: #e5c2cb;
}

.zwc-onboarding .zwc-section-card.dark .zwc-section-card-img {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  flex: 1;
  display: flex;
  align-items: flex-end;
}

.zwc-onboarding .zwc-section-card.dark .zwc-section-card-img img {
  display: block;
}


/* ========================================
   Section 7: Inner Two Col - Analytics
   .zwc-analytics-support
   ======================================== */

.featpages .zwc-otherfeatures-wrap {
  padding: 40px 0 0;
}


.zwc-analytics-support {
  padding: 120px 0 40px;
}

.zwc-inner-twocol-section {
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.zwc-inner-twocol-section .zwc-section-inner-wrap.twocol {
  align-items: center;
}

.zwc-inner-twocol-section .zwc-feat-heading-twocol {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.zwc-inner-twocol-section .zwc-feat-heading-twocol h2 {
  font-family: var(--primaryfont-semibold);
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: -2.56px;
  color: #000;
  text-align: left;
  max-width: 520px;
}

.zwc-inner-twocol-section .zwc-feat-heading-twocol p {
  font-family: var(--primaryfont-regular);
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.36px;
  color: #282828;
  max-width: 470px;
}

.zwc-inner-twocol-section .zwc-inner-img-panel {
  flex: 1;
  overflow: hidden;
  border-radius: 12px;
  background: radial-gradient(114.19% 96.63% at 99.9% 106.4%, #A20025 0%, rgba(154, 0, 35, 0.90) 40.1%, rgba(75, 1, 21, 0.00) 100%), linear-gradient(142deg, #770019 0.99%, rgba(75, 1, 21, 0.00) 40%), #4B0015;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ========================================
   Section 8: Testimonial
   .zwc-testimonial-wrap
   (Layout from product-common.css)
   ======================================== */


.zwc-testimonial-inner blockquote p {
  max-width: 640px;
}

/* Page-specific: decorative background images */
/* .zwc-testimonial-wrap .content-wrap {
  background-image:
    url('/sites/zweb/images/peopleplus/testibg1.svg'),
  background-position: left bottom, right top;
  background-repeat: no-repeat, no-repeat;
  background-size: 380px auto, 350px auto;
} */


/* ========================================
   Section 9: Bottom CTA
   .zwc-bottom-cta-wrap
   (Layout from product-common.css)
   ======================================== */

/* Decorative background images */

/* Left: gradient circle - half visible */
.zwc-bottom-cta-wrap::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -120px;
  transform: translateY(-50%);
  width: 340px;
  height: 340px;
  background: url('../master/assets/footer-img2.png') no-repeat;
  background-size: 200px auto;
  pointer-events: none;
}

/* Bottom-right: star */
.zwc-bottom-cta-wrap::after {
  content: '';
  position: absolute;
  bottom: -60px;
  right: -160px;
  width: 400px;
  height: 390px;
  background: url('assets/eb015df4c138b1fa13f2c0efda8788d5f72ed7cb.png') no-repeat;
  background-size: contain;
  pointer-events: none;
}

.zwc-bottom-cta-wrap .content-wrap {
  position: relative;
}

/* Left-center: person icon */
.zwc-bottom-cta-wrap .content-wrap::before {
  content: '';
  position: absolute;
  bottom: -140px;
  left: 120px;
  width: 120px;
  height: 150px;
  background: url('../master/assets/footer-img3.png') no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}

/* Bottom-center: semicircle dome */
.zwc-bottom-cta-wrap .content-wrap::after {
  content: '';
  position: absolute;
  bottom: -230px;
  right: 50%;
  width: 350px;
  height: 140px;
  background: url('../master/assets/footer-img4.png') no-repeat;
  background-size: contain;
  pointer-events: none;
  transform: translate(50%, 0);
}


.featpages .zwc-cta-inner h2 {
  max-width: 900px;
}


/* ========================================
   Responsive - Small Desktop (1440px)
   ======================================== */

@media screen and (max-width: 1440px) {


  .zwc-banner-img img {
    max-width: 500px;
  }

  .zwc-onboarding  {
    max-width: 95%;
  }

  /* Offer Letters */
  .zwc-offer-letters .zwc-section-inner-wrap h2 {
    font-size: 56px;
  }

  .zwc-onboarding {
    padding: 100px 0;
  }

  /* Onboarding */
  .zwc-onboarding .zwc-dark-section-inner h2 {
    font-size: 56px;
  }

  /* Analytics */
  .zwc-inner-twocol-section .zwc-feat-heading-twocol h2 {
    font-size: 56px;
  }

  .zwc-analytics-support {
    padding: 100px 0 20px;
  }


}


/* ========================================
   Responsive - Large Tablet (1280px)
   ======================================== */

@media screen and (max-width: 1280px) {
  /* Offer Letters */
  .zwc-offer-letters .zwc-section-inner-wrap h2 {
    font-size: 48px;
    letter-spacing: -1.92px;
  }

  /* Onboarding */
  .zwc-onboarding .zwc-dark-section-inner h2 {
    font-size: 48px;
    letter-spacing: -1.92px;
  }

  /* Analytics */
  .zwc-inner-twocol-section .zwc-feat-heading-twocol h2 {
    font-size: 48px;
    letter-spacing: -1.92px;
  }
}


/* ========================================
   Responsive - Tablet (1024px)
   ======================================== */

@media screen and (max-width: 1024px) {

  .zwc-banner-img img {
    max-width: 440px;
  }

  .featpages .zwc-otherfeatures-wrap .zwc-bento-wrap.twocol-row, .zwc-offer-letters .twocol-row{
    flex-direction: row;
  }

  /* Offer Letters */
  .zwc-offer-letters .zwc-section-inner-wrap h2 {
    font-size: 40px;
    letter-spacing: -1.6px;
  }

  .zwc-meet-candidates .content-wrap::after {
    transform: scale(0.8);
    bottom: -280px;
    right: -150px;
  }

  /* .zwc-offer-letters .zwc-twocol-row {
    flex-direction: column;
  } */

  /* Onboarding */
  .zwc-onboarding .zwc-dark-section-inner h2 {
    font-size: 40px;
    letter-spacing: -1.6px;
  }

  .zwc-onboarding .zwc-section-inner.threecol {
    flex-wrap: wrap;
  }

  .zwc-onboarding .zwc-section-inner.threecol .zwc-section-card.dark {
    flex: 0 0 calc(50% - 6px);
  }

  /* Analytics */
  .zwc-inner-twocol-section .zwc-feat-heading-twocol h2 {
    font-size: 40px;
    letter-spacing: -1.6px;
    text-align: center;
  }

  .zwc-inner-twocol-section .zwc-feat-heading-twocol p {
    margin: 0 auto 20px;
    text-align: center;
  }

}


/* ========================================
   Responsive - Mobile (767px)
   ======================================== */

@media screen and (max-width: 767px) {


  .zwc-workplace-cards .zwc-card {
    max-width: 400px;
    padding: 32px 36px;
  }

  .featpages .zwc-banner-cont h1 {
    max-width: 370px;
  }

  /* Offer Letters */
  .zwc-offer-letters .zwc-section-inner-wrap h2 {
    font-size: 32px;
    letter-spacing: -1.28px;
  }

  .featpages .zwc-feature-section.tabstyle2 .zwc-feature-tab h2 {
    max-width: 350px;
  }

  /* Onboarding */

  .zwc-onboarding {
    padding: 60px 0;
  }

  .zwc-onboarding .zwc-section-inner.threecol {
    flex-direction: column;
    align-items: center;
  }

  .zwc-onboarding .zwc-section-inner.threecol .zwc-section-card.dark {
    flex: none;
    max-width: 500px;
  }

  .zwc-onboarding .zwc-dark-section-inner h2 {
    font-size: 32px;
    letter-spacing: -1.28px;
  }

  /* Analytics */
  .zwc-inner-twocol-section .zwc-feat-heading-twocol h2 {
    font-size: 32px;
    letter-spacing: -1.28px;
  }

  .featpages .zwc-otherfeatures-wrap .zwc-bento-wrap.twocol-row, .zwc-offer-letters .zwc-twocol-row {
    flex-direction: column;
  }

  .zwc-offer-letters {
    padding: 70px 0;
  }

  .zwc-analytics-support {
    padding: 70px 0 20px;
  }

}


/* ========================================
   Responsive - Small Mobile (480px)
   ======================================== */

@media screen and (max-width: 480px) {


  .zwc-banner-img img {
    max-width: 100%;
  }

  /* Offer Letters */
  .zwc-offer-letters .zwc-section-inner-wrap h2 {
    font-size: 28px;
    letter-spacing: -1.12px;
  }

  /* Onboarding */
  .zwc-onboarding .zwc-dark-section-inner h2 {
    font-size: 28px;
    letter-spacing: -1.12px;
  }

  /* Analytics */
  .zwc-inner-twocol-section .zwc-feat-heading-twocol h2 {
    font-size: 28px;
    letter-spacing: -1.12px;
  }

  .featpages .zwc-cta-inner h2 {
    font-size: 34px;
    max-width: 370px;
  }
}
