.ats_overview
  margin-bottom: 14rem
  @include desktop
    margin-bottom: 17rem
.common_landing_hero
  background: transparent linear-gradient(73deg, #1C0F1F 0%, #3A1745 48%, #92278F 100%) 0% 0% no-repeat padding-box
  padding: 6rem 0
  @include desktop
    padding: 4rem 0
  @keyframes atsFloat
    0%, 100%
      transform: translate3d(0, 0, 0)
    50%
      transform: translate3d(0, -12px, 0)
  .payroll_common_container
    position: relative
  .floating_ats_image_1
    top: 0rem
    left: -6rem
    animation: atsFloat 5.5s ease-in-out infinite
    @media screen and (orientation: landscape)
      left: 5rem !important
    @include desktop-125
      left: 3rem
    @include desktop
      left: -3rem
  .floating_ats_image_2
    top: 0rem
    right: -6rem
    animation: atsFloat 6.8s ease-in-out infinite
    animation-delay: .4s
    @media screen and (orientation: landscape)
      right: 5rem !important
    @include desktop-125
      right: 3rem
    @include desktop
      right: -3rem
  .floating_ats_image_3
    bottom: 26rem
    left: 3rem
    animation: atsFloat 7.6s ease-in-out infinite
    animation-delay: .8s
    @include desktop-125
      left: 8rem
  .floating_ats_image_4
    bottom: 26rem
    right: 3rem
    animation: atsFloat 6.2s ease-in-out infinite
    animation-delay: 1.1s
    @include desktop-125
      right: 8rem
  .floating_person
      width: 174px
      height: 174px
      border: 2px dashed #D19B6F
      border-radius: 50%
      padding: .5rem
      position: absolute
      will-change: transform
      @include desktop-125
        width: 120px
        height: 120px
      @include tablet
          display: none
      @include phone
        display: none
      @include desktop
        width: 120px
        height: 120px
      img
        width: 100%
        height: 100%
  .post_jobs_process
    margin-bottom: -17rem
    @include tablet
      .col-md-3
        width: 50% !important
        margin-bottom: 1.5rem
    @include phone
      .col-md-3
        margin-bottom: 1rem
    .ats_overview_common
      background: #FFFFFF 0% 0% no-repeat padding-box
      box-shadow: 0px 13px 56px #00000029
      border-radius: 20px
      opacity: 1
      height: 100%
      padding: 1.5rem
      .ats_overview_common_description
        h2
          font-size: 1.8rem
          font-weight: 600
          color: #14141F
          margin-top: 0 !important
          margin-bottom: 1rem
          @include desktop
            font-size: 1.5rem
            margin-block: .5rem
        p
          font-size: 1.2rem
          color: #14141F
          margin-top: 0
          margin-bottom: 1.5rem
          font-weight: 400
          @include desktop
            font-size: 1.1rem
      .ats_overview_common_image
        width: 100px
        height: 100px
        background: #F9F9FB 0% 0% no-repeat padding-box
        border-radius: 50%
        padding: 1.5rem
        img
          width: 100%
          height: 100%

  .centered_heading
    text-align: center
    padding: 0 12px
    width: 55%
    margin: 0 auto
    margin-bottom: 12rem !important
    @include tablet
        width: 100%
        margin-top: 2rem !important
        margin-bottom: 4rem !important
    @include phone
      width: 100%
      margin-bottom: 1rem !important
    @include desktop
      margin-bottom: 5rem !important
    a
      display: inline-flex
      align-items: center
      gap: 10px
      margin-bottom: 2rem
      padding: 1.2rem 2rem
      color: #fff
      text-decoration: none
      font-weight: 600
      transition: transform 0.3s ease, background-position 0.6s ease
      background: transparent linear-gradient(282deg, #8C0054 0%, #DA448F 100%) 0% 0% no-repeat padding-box
      box-shadow: inset 0px 3px 6px #C967A2
      background-size: 200% 200%
      border: 1px solid #860E58
      border-radius: 12px
      opacity: 1
      font-size: 1.325rem
      font-weight: 500
      width: fit-content
      justify-content: center
      @include phone
        margin-top: 15px
      @include desktop
        font-size: 1.125rem
        margin-top: 1.5rem !important
      &:hover
        transform: translateY(-2px)
        background-position: 100% 50%
        color: #fff
    p
      font-size: 1.2rem
      color: #ffffff
      margin-bottom: 3rem !important
      @include phone
        margin-bottom: 1rem !important
      @include desktop
        margin-bottom: 2rem !important
    h1
      font-size: 2.875rem
      font-weight: 700
      color: #fff
      margin-top: 0 !important
      margin-bottom: 1rem
      @include phone
        font-size: 2.2rem
      @include desktop
        font-size: 2.5rem !important


.job_applications_only
  background-color: #FFF2FA
  width: 100%
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  padding: 4rem 0
  margin-bottom: 15rem
  margin-top: 5rem
  @include phone
    margin-bottom: 10rem
    padding-bottom: 0 !important
  .payroll_revamped_job_application_common
    width: 60%
    text-align: center
    margin: 0 auto
    height: 100%
    @include tablet
      width: 100%
    @include phone
      width: 100%
      padding: 0 12px
  .payroll_revamped_job_application_image
    width: 100%
    height: 100%
    text-align: center
    img
      width: 100%
      margin-bottom: -15rem
      height: 100%
      object-fit: contain !important
      @include phone
        margin-bottom: -8rem
  .payroll_revamped_job_application_description
    width: 100%
    h3
      font-size: 1.2rem
      color: #92278F
      margin-top: 0
      margin-bottom: 1rem
      font-weight: 400
    h2
      font-size: 2.5rem
      font-weight: 800
      color: #14141F
      margin-top: 0 !important
      margin-bottom: 1rem
      @include phone
        font-size: 1.8rem
        font-weight: 700
    p
      font-size: 1.2rem
      color: #14141F
      margin-top: 0
      margin-bottom: 1.5rem
      font-weight: 400


.jobs_applicant_tracking_only
  width: 100%
  .payroll_revamped_job_application_common
    display: flex
    align-items: center
    justify-content: space-between
    flex-direction: row-reverse
    width: 100%
    @include tablet
      flex-wrap: wrap
      width: 100%
      margin: 0 auto
    @include phone
      flex-direction: column
    .payroll_revamped_job_application_image
      width: 49%
      text-align: center
      background: #F9F9FB 0% 0% no-repeat padding-box
      border-radius: 48px
      padding: 2rem
      height: 100%
      @include tablet
        width: 100%
      @include phone
        width: 100%
        padding: 1rem
        border-radius: 12px
      img
        width: 100%
        height: 100%
        object-fit: contain !important
    .payroll_revamped_job_application_description
      width: 49%
      @include tablet
        width: 100%
      @include phone
        width: 100%
        padding: 0 12px
      h3
        font-size: 1.2rem
        color: #92278F
        margin-top: 0
        margin-bottom: 1rem
        font-weight: 400
      h2
        font-size: 2.5rem
        font-weight: 800
        color: #14141F
        margin-top: 0 !important
        margin-bottom: 1rem
        @include phone
          font-size: 1.8rem
          font-weight: 700
      p
        font-size: 1.2rem
        color: #14141F
        margin-top: 0
        margin-bottom: 1.5rem
        font-weight: 400
.get_more_from_payroll
  background-color: #F9F9FB
  padding: 6rem 0 4rem 0
  margin-top: 5rem
  margin-bottom: 5rem
  @include phone
    padding: 2rem 0 4rem 0
    margin-top: 2rem
    margin-bottom: 2rem
  .col-md-4
    margin-bottom: 1.5rem
  .get_more_from_payroll_common
    background: #FFFFFF 0% 0% no-repeat padding-box
    border-radius: 20px
    padding: 1rem
    height: 100%
    .get_more_from_payroll_description
      h4
        font-size: 1.8rem
        font-weight: 800
        color: #14141F
        margin-top: 0 !important
        margin-bottom: 1rem
        @include phone
          font-size: 1.5rem
          font-weight: 700
      p
        font-size: 1.2rem
        color: #14141F
        margin-top: 0
        margin-bottom: 1.5rem
        font-weight: 400
        @include desktop
          font-size: 1rem
    .get_more_from_payroll_icon
      width: 70px
      height: 70px
      background-color: #92278F
      border-radius: 10px
      padding: .8rem
      margin-bottom: 1rem
      img
        width: 100%
        height: 100%
  .get_more_from_payroll_heading
    width: 60%
    margin: 0 auto
    margin-bottom: 3rem !important
    text-align: center
    @include tablet
      width: 100%
    @include phone
      width: 100%
      padding: 0 12px
      margin-bottom: 2rem !important
    h3
      font-size: 1.2rem
      color: #92278F
      margin-top: 0
      margin-bottom: 1rem
      font-weight: 400
      @include desktop
        font-size: 1rem
    h2
      font-size: 2.5rem
      font-weight: 800
      color: #14141F
      margin-top: 0 !important
      margin-bottom: 1rem
      @include phone
        font-size: 1.8rem
        font-weight: 700
    p
      font-size: 1.2rem
      color: #14141F
      margin-top: 0
      margin-bottom: 1.5rem
      font-weight: 400
      @include desktop
        font-size: 1rem


.mobile_aspect
  img
    @include phone
      aspect-ratio: 1 / 1
      object-fit: contain
      width: 100%