@import '../_common'
@import '../../sass/transport/transport'
p
  text-align: justify 
.banner
    
  .bg
    .banner-wrapper
      @include respond-to(screen-1024)
         bottom: 10% !important 
      .flex
        margin: 0 40px
        justify-content: space-between !important
        @include respond-to(screen-540)
           margin: 0 
        @include respond-to(screen-991)
          justify-content: center !important
          flex-direction: column

        .colA
          h2
            color: var(--white)
            @include respond-to(screen-1024)
                margin-bottom: 40px
            @include respond-to(screen-768)
                margin-bottom: 25px

        .colB
          display: grid
          grid-template-columns: repeat(2, 1fr)
          @include respond-to(screen-540)
            grid-template-columns: repeat(1, 1fr)
            gap: 35px
          .register-colA,
          .register-colB
            p
              padding-bottom: 34px
              font-size: 15px
              color: var(--white)
              text-align: center
              @include respond-to(screen-540)
                padding-bottom: 24px

            .btn-group
              display: flex
              gap: 16px
              justify-content: center

              .reg-btn
                > a
                  transition: 0.5s ease
                  @include regularBtn(6px 15px)
                  color: var(--black) 
                  &:hover
                    color: #fff 

              .hover-btn
                > a
                  @include btn2
                  &:hover
                    border: 1px solid #1BB6F0

          .register-colA
            padding-right: 60px
            border-right: 1.4px solid var(--white)
            @include respond-to(screen-1024)
               padding-right: 30px
            @include respond-to(screen-540)
               padding-right: 0
               border-right: none


          .register-colB
            padding-left: 60px
            @include respond-to(screen-1024)
               padding-left: 30px
            @include respond-to(screen-540)
               padding-left: 0


.register
  background-color: var(--prime-dark)
  .health-secB
      padding: 0 0 65px 0
      @include respond-to(screen-1024)
          padding: 0 0 50px 0
      @include respond-to(screen-540)
          padding: 0 0 34px 0
      .health-secB-grid
        width: 100%
        @include respond-to(screen-991)
            grid-template-columns: repeat(1 , 1fr)
            gap: 40px
        @include respond-to(screen-540)
            gap: 0
        
        .health-secB-ul
          li
            color: var(--white) 
            @include respond-to(screen-1024)
                margin-bottom: 10px
                font-size: 14px
            &::before
              color: var(--white)
          h4
              color: var(--white)
              margin-bottom: 30px
.health-secB
  padding-top: 80px
  @include respond-to(screen-1024)
    padding-top: 40px

  .heading
    width: 78% 
    position: relative 
    @include respond-to(screen-1024)
      width: 95%  


    &::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: -28px
      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: -24px
      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
      margin-bottom: 75px
      width: 30% 
      max-width: 100%
      margin: 0 auto
      @include respond-to(screen-1536)
        width: 60%
        font-size: 3.5rem
      @include respond-to(screen-1440)
        width: 55%
      @include respond-to(screen-1366)
        width: 85%
      @include respond-to(screen-1024)
        width: 68%
        font-size: 3rem
      @include respond-to(screen-991)
        font-size: 2.5rem
        width: 55%
      @include respond-to(screen-768)
        font-size: 2rem
      @include respond-to(screen-540)
        width: 100%
        font-size: 26px

    .admission-tab
      margin: 45px 0
      overflow-x: auto  
      white-space: nowrap  
      padding: 0 0 14px
      list-style: none
      -webkit-overflow-scrolling: touch  
      overflow-y: hidden
      @include respond-to(screen-540)
        margin: 24px 0

      
      

      li
        position: relative
        cursor: pointer
        display: inline-block
        margin-right: 45px
        font-size: 1.2rem
        font-weight: 500
        color: var(--text)
        transition: color 0.3s ease, font-weight 0.3s ease
        @include respond-to(screen-1366)
          font-size: 15px
          margin-right: 20px
        @include respond-to(screen-991)
          font-size: 14px
          margin-right: 18px

        &::before
          content: ''
          position: absolute
          left: 0
          bottom: -12px
          width: 0%
          height: 2px
          background: var(--prime)
          transition: width 0.3s ease
          @include respond-to(screen-540)
            bottom: -6px

        &:hover
          color: var(--prime)
          font-weight: 500

          &::before
            width: 100%

        &.active
          color: var(--prime)

          &::before
            width: 100%

  .health-tab-content
    width: 100%
    .tab-panel
      display: none

      &.active
        display: grid
        gap: 40px
        flex-wrap: wrap
        grid-template-columns: repeat(2 , 1fr)
        width: 100%
        @include respond-to(screen-1024)
          gap: 0
        @include respond-to(screen-991)
          grid-template-columns: repeat(1 , 1fr)
          gap: 0
        @include respond-to(screen-540)
          gap: 15px


    .health-secB-grid
      width: 100%
      display: flex
      flex-wrap: wrap
      align-items: flex-start
      gap: 40px
      padding-top: 18px
      @include respond-to(screen-1024)
        padding-top: 24px
      @include respond-to(screen-991)
        padding-top: 0
      @include respond-to(screen-991)
        padding-top: 24px
      
      


      img
        max-width: 100%
        height: auto
        flex: 1 1 45%
        position: sticky
        top: calc( 25% -  65px )
        @include respond-to(screen-1366)
          top: calc( 30% -  65px )
        @include respond-to(screen-991)
          position: static

      h5
        margin-bottom: 24px

      .health-secB-ul
        flex: 1 1 50%
        align-self: center
        list-style: disc
        padding-left: 20px
        display: flex
        flex-direction: column
        justify-content: center
        @include respond-to(screen-991)
          padding:0

        li
          margin-bottom: 10px
          color: var(--text)
          line-height: 1.6
          text-align: justify
          @include respond-to(screen-540)
           text-align: left
        .btn-wraper
                display: flex
                justify-content: flex-start
                margin: 35px 0 0 12px
                @include respond-to(screen-1024)
                  margin: 12px 0
                

.home-secD
  background-color: var(--white)
  padding: 0