@import '../_common'
p
  text-align: justify 
.banner 
    &::before
       background: none

.wellness-secA
  padding: 80px 0
  @include respond-to(screen-1024)
    padding: 70px 0
  @include respond-to(screen-420)
    padding: 45px 0 60px
  

  .heading
    width: 100%
    margin: 0 auto
    text-align: center
    padding-bottom: 80px
    display: flex
    justify-content: center 
    align-items: flex-start
    position: relative
    @include respond-to(screen-1024)
      padding-bottom: 50px
    @include respond-to(screen-420)
      padding-bottom: 30px
    

    > div:first-child
        width: auto
        max-width: 36%
        margin: 0 auto
        text-align: center

        @include respond-to(screen-1536)
          max-width: 40%

        @include respond-to(screen-1024)
          max-width: 55%

        @include respond-to(screen-675)
          max-width: 70%

        @include respond-to(screen-420)
          max-width: 99%
      
        img
          width: 140px
          @include respond-to(screen-540)
            width: 90px

        h2
          margin: 32px 0 26px
          @include respond-to(screen-420)
              margin: 25px 0 16px
        p
          @include respond-to(screen-420)
            margin-bottom: 20px

    > div:last-child
      position: absolute
      right: 0
      top: 0
      width: auto
      text-align: right
      @include respond-to(screen-420)
          right: 30%
          top: 93%
      .theme-btn
        padding: 10px 16px
        transform: rotate(-12deg)

        @include hover
        &::after
          background-color: #4459C5
          border-radius: 25px

        &::before
          border-radius: 25px




  .wellness-card-wrapper
    @include respond-to(screen-420)
    margin-top: 54px
    .wellness-card
      display: grid
      grid-template-columns: repeat(2, 1fr)
      gap: 95px
      margin-top: 60px
      padding: 60px
      align-items: center
      border-radius: 15px
      position: relative
      z-index: 2
      overflow: hidden
      @include respond-to(screen-1024)
        padding: 35px
        gap: 46px
      @include respond-to(screen-991)
        grid-template-columns: 1fr
        margin-top: 40px
        gap: 30px
      @include respond-to(screen-540)
        padding: 25px
      @include respond-to(screen-420)
        margin-top: 30px
      

      &::before
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        content: ""
        background-image: url('../../images/wellness-health/card-bg.png')
        background-repeat: no-repeat
        background-position: center
        background-size: cover
        z-index: -1

      &:nth-child(1)
        margin-top: 14px

      &:nth-child(odd)
        background-color: #D6EFFF

      &:nth-child(even)
        background-color: #C9FFE4

        > img
          order: 2
          @include respond-to(screen-991)
            order: 1


        > .wellness-content
          order: 1

      img
        width: 100%
        border-radius: 10px
        height: 100%
        object-fit: cover

      .wellness-content
        @include respond-to(screen-991)
            text-align: center

        h4
          font-size: 1.8rem
          line-height: 1.2
          margin-bottom: 24px
          @include respond-to(screen-1024)
            font-size: 1.6rem
            margin-bottom: 14px
          @include respond-to(screen-420)
            font-size: 1.2rem