.payroll_main_blogs_hero
  .articles_container_revamp
    @include phone
      padding: 7rem 12px 1rem 12px !important
  .articles_revamp_heading
    text-align: center
    width: 60%
    margin: 0 auto
    @include phone
      width: 100% !important
    p
      font-size: 1.2rem
      color: #ffffff
      margin-bottom: 3rem !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
.revamp_trending_section
  margin-top: 7rem !important
.payroll_pagination
  background-color: #FAFAFA
  padding: 2rem 0
  .rm-pagination
    margin-bottom: 0 !important
.payroll_revamp_section_bloglist
  background-color: #FAFAFA
  padding: 5rem 0
  margin-top: 0 !important
  margin-bottom: 0 !important
  @include phone
    padding: 2rem 12px !important
  .card
    background: #FFFFFF 0% 0% no-repeat padding-box !important
    box-shadow: 0px 3px 10px #0000000F !important
    border-radius: 12px !important
    padding: 2px 2px 0 2px
    .card-img-top
      border-top-left-radius: 12px !important
      border-top-right-radius: 12px !important
      width: 100% !important
      height: auto !important
      object-fit: cover !important
    .revamp_card_read_more
      font-size: 1.2rem
      font-weight: 600
      color: #8C0054
      text-decoration: none
      display: inline-flex
      align-items: center
      gap: 8px
      margin: 2rem 0 1rem 0
      will-change: opacity, transform, max-height, margin
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
      position: relative
      &::before
        content: ''
        background-color: #8C0054
        height: 2px
        width: 0%
        position: absolute
        left: 0
        bottom: -6px
        display: block
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
      @include phone
        opacity: 1 !important
        max-height: 100% !important
        transform: none !important
        margin-top: .8rem !important
        margin-bottom: 1.5rem !important
      span
        display: inline-flex
        width: 20px
        height: 20px
        @include desktop
          width: 14px
          height: 14px
        img
          width: 100%
          height: 100%
          object-fit: contain !important
          aspect-ratio: 40 / 35 !important
    h5
      font-size: 1.5rem
      font-weight: 600
      color: #14141F
      margin-top: 0 !important
      margin-bottom: 1rem
      @include desktop
        font-size: 1.3rem
        margin-block: .5rem
    p
      font-size: 1.1rem
      color: #14141F !important
      margin-top: 0
      margin-bottom: 1.5rem
      font-weight: 400
      @include desktop
        font-size: 1rem
.payroll_hero_revamped_details
  .revamp_article_details_body
    @include phone
      ul
        padding-left: 0 !important
        li
          text-align: left !important
      ol
        padding-left: 0 !important
        li
          text-align: left !important
  .articles_details_hero_revamp
    @include phone
      padding: 6rem 12px 1rem 12px !important
      .align-self-center
        text-align: center
        margin-bottom: 1.5rem
  .revamp_trending_section_article_details
    margin-bottom: 5rem !important
    @include phone
      .col-md-4
        margin-bottom: 1.5rem
        padding: 0 !important
  .revamp_trending_section_article_details
    .first_three_items
      .revamp_card_common
        background: #FFFFFF 0% 0% no-repeat padding-box !important
        box-shadow: 0px 3px 10px #0000000F !important
        border-radius: 12px !important
        padding: 2px 2px 0 2px
        height: 100%
        .revamp_card_common_description
          height: auto !important
        .revamp_card_common_image
          height: 30vh !important
          margin-bottom: 1.5rem !important
          @include tablet
            height: auto !important
        a
          font-size: 1.2rem
          font-weight: 600
          color: #8C0054
          text-decoration: none
          display: inline-flex
          align-items: center
          gap: 8px
          margin: 2rem 0 1rem 0
          will-change: opacity, transform, max-height, margin
          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
          position: relative
          &::before
            content: ''
            background-color: #8C0054
            height: 2px
            width: 0%
            position: absolute
            left: 0
            bottom: -6px
            display: block
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
          @include phone
            opacity: 1 !important
            max-height: 100% !important
            transform: none !important
            margin-top: .8rem !important
            margin-bottom: 1.5rem !important
          span
            display: inline-flex
            width: 20px
            height: 20px
            @include desktop
              width: 14px
              height: 14px
            img
              width: 100%
              height: 100%
        p
          font-size: 1.1rem
          color: #14141F !important
          margin-top: 0
          margin-bottom: 1.5rem
          font-weight: 400
          letter-spacing: unset !important
          @include desktop
            font-size: 1rem
        h6
          a
            font-size: 1.5rem
            font-weight: 600
            color: #14141F
            margin-top: 0 !important
            margin-bottom: 1rem
            @include desktop
              font-size: 1.3rem
              margin-block: .5rem
  .author_details_revamped
    margin-bottom: 1rem !important
  .articles_details_hero_revamp
    background: transparent linear-gradient(77deg, #1C0F1F 0%, #3A1745 48%, #92278F 100%) 0% 0% no-repeat padding-box
    @include tablet
      padding: 9rem 0 2rem 0 !important
    p
      font-size: 1.2rem !important
      color: #ffffff
      margin: 0 !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
  .revamp_aricle_detail_image
    box-shadow: 0px 13px 26px #00000029
    border: 20px solid #FFFFFF
    border-radius: 28px
    img
      width: 100% !important
      height: 100% !important
      display: flex !important
      align-items: center !important
      justify-content: center !important
.revamp_trending_section_article_details
  margin-top: 0 !important

// Responsive background image and video styles
.bg-image-responsive
  position: absolute
  left: 0
  top: 0
  width: 100%
  height: 100%
  object-fit: cover
  @include phone
    max-width: 100%
    height: auto

.video-overlay-responsive
  position: absolute
  left: 0
  top: 0
  width: 100%
  height: 100%
  opacity: 0.4
  @include phone
    position: relative
    opacity: 0.3
    max-width: 100%
    height: auto

.cta-background-container
  position: relative
  overflow: hidden
  width: 100%
  @include phone
    min-height: auto
    height: auto