@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: 60px 0 
    overflow: visible !important
    @include respond-to(screen-1024)
      padding: 40px 0 
    @include respond-to(screen-540)
      padding: 35px 0 

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

        > ul
          > li
            color: var(--black)
            text-align: justify
            margin-bottom: 24px
            position: relative
            padding-left: 16px
            @include respond-to(screen-1024)
              font-size: 15px
              margin-bottom: 20px
            @include respond-to(screen-540)
              font-size: 14px
              margin-bottom: 16px

            &::before
              content: ""
              position: absolute
              left: 0
              top: 8px
              width: 6px
              height: 6px
              border-radius: 50%
              background: var(--black)

            // Strong tags (role titles)
            strong
              display: block
              margin-bottom: 8px
              font-weight: 600

            ul
              margin-top: 10px

              li
                color: var(--text)
                text-align: justify
                margin-bottom: 4px
                @include respond-to(screen-1024)
                  font-size: 14px
                  margin-bottom: 5px
                @include respond-to(screen-540)
                  font-size: 14px
                  margin-bottom: 4px

            // Headings within list items
            h5 
              margin: 20px 0 12px

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

.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%
    @include respond-to(screen-540)
      width: 100%

    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

  .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

      // This selector should NOT apply to swiper-item
      > img,
      > div:not(.swiper-item) img
        width: 100%
        border-radius: 15px
        object-fit: cover
        position: -webkit-sticky
        position: sticky
        top: 20px
        display: block

        @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


.transformative-secC-bg
  background-color: #C4D7F780
  padding: 70px 0
  @include respond-to(screen-1152)
    margin-top: 45px
  .container
    .transformative-secC
      h2
        color: var(--black)
        text-align: center
        margin-bottom: 80px
        font-size: 36px
        line-height: 1.25
        @include respond-to(screen-1440)
            font-size: 32px
            margin-bottom: 45px
        @include respond-to(screen-767)
            font-size: 28px
        @include respond-to(screen-520)
            font-size: 26px
        @include respond-to(screen-365)
            font-size: 22px

      .item-grid
        display: grid
        grid-template-columns: repeat(2, 1fr)
        gap: 65px
        align-items: flex-start
        @include respond-to(screen-1024)
          gap: 30px
        @include respond-to(screen-991)
          grid-template-columns: repeat(1, 1fr)
          gap: 30px

        img
          width: 100%
          height: 100%
          object-fit: cover

        .transformative-secC-ul
          list-style: none
          padding: 30px 0 0 25px
          @include respond-to(screen-540)
            padding: 24px 0 0 
          li
            font-size: 16px
            color: var(--text)
            margin-bottom: 16px
            position: relative
            padding-left: 45px
            @include respond-to(screen-540)
              font-size: 14px
              margin-bottom: 8px
              padding-left: 30px


            &:last-child
              margin-bottom: 90px 

            &::before
              content: "•"
              color: var(--prime)
              font-size: 3.2em
              position: absolute
              left: 0
              top: -28px
            
        img
          border-radius: 15px
        .item-content
          h2
            color: var(--black)
          p
            color: var(--text)
          .btn-wraper
            text-align: left
            margin-top: 45px

            .theme-btn
                padding: 10px 20px
                font-size: 16px
                line-height: 22px
                font-weight: 500
                border-radius: 25px
                background: var(--prime)
                @include respond-to(screen-540)
                    font-size: 12px
                    padding: 10px 15px