@import '../_common';
@import '../../sass/registration/registration'

p
  text-align: justify 
.banner
  z-index: 2

  .bg
    .banner-wrapper
      bottom: 15% !important

      .content
        width: 40%
        margin: 0 auto 
        @include respond-to(screen-1024)
          width: 60%
        h2
          @include respond-to(screen-991)
             margin-bottom: 0 !important
        


.progressive-secA
    padding: 100px 0
    overflow: visible !important  // CRITICAL: Remove any overflow constraints
    @include respond-to(screen-1024)
      padding: 60px 0 0
    @include respond-to(screen-540)
      padding: 35px 0 0

    .progressive-secB-grid
        display: grid
        grid-template-columns: repeat(2 , 1fr)
        gap: 75px
        align-items: flex-start
        overflow: visible !important  // CRITICAL: Remove any overflow constraints
        @include respond-to(screen-1024)
           gap: 28px
        @include respond-to(screen-991)
           grid-template-columns: repeat(1 , 1fr)

     
            
        img
          border-radius: 15px
          width: 100%
          display: block
          object-fit: cover
          position: sticky
          top: calc( 28% - 100px )
          @include respond-to(screen-1366)
            top: calc(36% - 100px)

          @include respond-to(screen-991)
            position: static

        div

          ul
              h5 
                margin: 20px 0 12px

              h6:not(:first-child)
                margin: 0 0 10px

              li
                  color: var(--text)
                  text-align: justify
                  margin-bottom: 8px
                  @include respond-to(screen-1024)
                      font-size: 15px
                  @include respond-to(screen-991)
                      margin-bottom: 5px
                    
                  @include respond-to(screen-540)
                      font-size: 14px
            
.health-secB
  padding: 0 0 90px 
  overflow: visible !important
  @include respond-to(screen-1024)
    padding: 80px 0 70px
  @include respond-to(screen-991)
    padding: 60px 0 70px
  @include respond-to(screen-540)
    padding: 30px 0 40px
  
  .heading
    width: 78%
    position: relative
    @include respond-to(screen-540)
      width: 100%

    &::before,
    &::after
      content: ""
      position: absolute
      bottom: 0
      transform: translateY(-50%)
      width: 24px
      height: 24px
      background: var(--prime)
      mask-size: contain
      mask-repeat: no-repeat
      mask-position: center
      opacity: 0.8
      pointer-events: none
      z-index: 2
      display: none
      @include respond-to(screen-768)
        display: block


    &::before
      left: -14px
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.5 5l-7 7 7 7'/%3E%3C/svg%3E")

    &::after
      right: -18px
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.5 5l7 7-7 7'/%3E%3C/svg%3E")

    h2
      font-size: 36px
      margin-bottom: 75px
      width: 48%
      max-width: 100%
      margin: 0 auto

      @include respond-to(screen-1536)
        width: 72%
      @include respond-to(screen-1024)
        width: 80%
      @include respond-to(screen-768)
        width: 100%
        font-size: 32px
      @include respond-to(screen-540)
        width: 100%
        font-size: 22px

    .admission-tab
      margin: 90px 0
      padding: 0 0 14px
      @include respond-to(screen-1024)
        margin: 45px 0
      @include respond-to(screen-768)
        margin: 20px 0 45px
        padding: 0 20px 10px 20px

  .health-tab-content
    overflow: visible !important

    .tab-panel
      overflow: visible !important

      &.active
        @include respond-to(screen-1024)
          gap: 20px

    .health-secB-grid
      display: grid
      grid-template-columns: repeat(2, 1fr)
      gap: 30px
      padding-top: 0
      align-items: flex-start !important
      overflow: visible !important

      @include respond-to(screen-991)
        grid-template-columns: 1fr
        gap: 20px

     

      > img
        width: 100%
        border-radius: 15px
        object-fit: cover
        position: -webkit-sticky
        position: sticky
        display: block
        top: calc( 40% -  65px )
        @include respond-to(screen-1366)
            top: calc( 30% -  65px )
        @include respond-to(screen-991)
            position: static

        @include respond-to(screen-991)
          position: static

      .health-secB-ul
        align-self: start
        overflow: visible !important

        ul
          li
            h6
              margin: 18px 0 9px

      p
        padding-bottom: 34px
        @include respond-to(screen-540)
          padding-bottom: 24px

      h5
        @include respond-to(screen-540)
          margin-bottom: 14px