@import '../_common'
@import '../../sass/health-care/healthCare'
p
  text-align: justify 
.banner 
    .banner-wrapper
        bottom: 15% !important
        .content
            margin: 0 auto 
            width: 100%
            text-align: center

            h2
              color: var(--white)
            
           
                
    

.health-secA
  .heading
    width: 100%

  .health-card
    .health-grid
      display: grid
      grid-template-columns: 450px 450px 1fr
      gap: 25px
      @include respond-to(screen-1366)
        grid-template-columns: repeat(3, 1fr)
      @include respond-to(screen-1024)
        grid-template-columns: repeat(3, 1fr)
      @include respond-to(screen-991)
        grid-template-columns: repeat(2, 1fr)
      @include respond-to(screen-540)
        grid-template-columns: repeat(1, 1fr)

      .card:last-child
          @include respond-to(screen-991)
            grid-column: 1 / -1

      .card
        padding: 40px
        @include respond-to(screen-540)
            padding: 40px 66px
        @include respond-to(screen-420)
            padding: 30px 8px

        div
          p
            margin-top: 12px
            @include respond-to(screen-540)
              font-size: 14px
              margin-top: 0
              padding-top: 15px

          h6
            width: 100%
            margin-top: 45px
            color: var(--text)
            @include respond-to(screen-540)
              margin-top: 28px

.home-secD
  background-color: #fff
  @include respond-to(screen-675)
      padding-bottom: 0
  .heading
    width: 38%
    @include respond-to(screen-1536)
      width: 55%
    @include respond-to(screen-991)
      width: 70%
    @include respond-to(screen-675)
      padding-block: 0
      width: 100%
    h2
        max-width: 100%
    p
      margin-bottom: 15px
      text-align: justify
  .btn-groups
    display: flex
    gap: 65px
    justify-content: center
    margin: 60px 0 90px
    @include respond-to(screen-991)
      gap: 35px
    @include respond-to(screen-540)
      margin: 50px 0 0
      gap: 10px

    .btn-wraper
      text-align: center
      cursor: pointer
      li
        @include respond-to(screen-540)
            font-size: 14px

      .gray
        color: var(--black)
        &:hover
           color: var(--white)
        @include hover

        &::after
          background-color:  rgba(223, 215, 215, 1)
          border-radius: 25px

        &::before
          background-color: var(--black)
          border-radius: 25px



.Examination
  background-color: #C4D7F780
  margin-top: 95px
  @include respond-to(screen-1024)
    margin-top: 40px

  .container
    .Examination-secC
      padding: 80px 0
      
      @include respond-to(screen-1536)
        padding: 80px 0

      @include respond-to(screen-1024)
        padding: 40px 0 80px

      @include respond-to(screen-991)
        padding: 40px 0 60px

      @include respond-to(screen-540)
        padding: 25px 0 25px
      

      h2
        width: 100%
        color: var(--black)
        text-align: center
        margin-bottom: 80px
        @include respond-to(screen-1024)
          margin-bottom: 50px
        @include respond-to(screen-540)
          margin-bottom: 32px

      .item-grid
        display: grid
        grid-template-columns: 1fr
        gap: 65px
        align-items: flex-start
        @include respond-to(screen-1024)
          gap: 35px
        @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

        .item-content

          h5
            margin: 20px 0 14px
            font-size: 16px

          h2
            width: 100%
            color: var(--black)

          p
            color: var(--text)
            font-size: 16px
            line-height: 1.6
            margin-bottom: 30px
            @include respond-to(screen-1024)
              margin-bottom: 0
            &:last-child
              margin-bottom: 0px

            @include respond-to(screen-991)
              margin-bottom: 15px
            @include respond-to(screen-540)
              font-size: 14px
            

          .Examination-secC-ul
            list-style: none
            // padding: 30px 0 0 25px
            @include respond-to(screen-675)
                // padding: 21px 0 0 17px
            
            li
              font-size: 14px
              color: var(--text)
              margin-bottom: 5px
              position: relative
              padding-left: 45px

              @include respond-to(screen-540)
                padding-left: 35px
                font-size: 14px

              &::before
                content: "•"
                color: var(--prime)
                font-size: 3.2em
                position: absolute
                left: 0
                top: -28px

          h6
            margin-bottom: 30px
            color: var(--text)
            font-weight: 600

            @include respond-to(screen-1024)
               margin-bottom: 15px

          .internal-assessment
              padding: 60px 0

              h2
                text-align: left
                font-size: 28px
                font-weight: 600
                color: var(--black)
                margin-bottom: 50px

              .assessment-table
                width: 100%
                border-collapse: collapse
                overflow: auto
                @include respond-to(screen-540)
                  overflow: auto
                  width: 100%
                  max-width: 300px

                th, td
                  padding: 14px 12px
                  font-size: 14px
                  color: var(--text)
                  line-height: 1.5
                  border: 1px solid #dbdbdb

                th
                  background:   #7c9ed3
                  color: #ffffff
                  font-weight: 600
                  text-align: left

              

              h3
                margin-top: 40px
                font-size: 20px
                font-weight: 600
                color: var(--black)

              p
                font-size: 15px
                color: var(--text)
                line-height: 1.6
                margin-bottom: 10px

              @include respond-to(screen-768)
                h2
                  font-size: 22px
                  margin-bottom: 30px

                .assessment-table
                  th, td
                    font-size: 13px
                    padding: 10px 8px

                h3
                  font-size: 18px

                p
                  font-size: 14px

          .table-wrap
            width: 100%
            overflow-x: auto
            @include respond-to(screen-991)
              max-width: 500px
            @include respond-to(screen-540)
              max-width: 320px



          .grade-tables
            display: grid
            grid-template-columns: repeat(3, 1fr)
            gap: 30px
            margin: 40px 0
            @include respond-to(screen-991)
              grid-template-columns: repeat(2, 1fr)
            @include respond-to(screen-675)
              grid-template-columns: 1fr

          .grade-table
            margin-bottom: 20px
            h3
              text-align: center
              margin-bottom: 10px

            table
              width: 100%
              border-collapse: collapse
              font-size: 14px

              th, td
                  padding: 14px 12px
                  font-size: 14px
                  color: var(--text)
                  line-height: 1.5
                  border: 1px solid #dbdbdb

              th
                  background:   #7c9ed3
                  color: #ffffff
                  font-weight: 600
                  text-align: left