@import '../_common'
p
  text-align: justify 
.banner
  &::before
    background: linear-gradient(360deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.85) 100%), linear-gradient(220deg, rgba(0, 0, 0, 0) 101%, rgba(0, 0, 0, 0.85) 100%)

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

      .content
        width: 40%
        margin: 0 auto !important

.student-life-secA
    padding: 100px 0
    @include respond-to(screen-1440)
      padding: 80px 0
    @include respond-to(screen-1024)
      padding: 60px 0
    @include respond-to(screen-768)
      padding: 40px 0
    
    
    .heading
        width: 35%
        margin: 0 auto
        text-align: center
        @include respond-to(screen-1440)
          width: 40%
        @include respond-to(screen-1366)
          width: 45%
        @include respond-to(screen-768)
          width: 65%
        @include respond-to(screen-540)
          width: 75%
        @include respond-to(screen-420)
          width: 100%
        
        
        
        h2
            margin-bottom: 24px
            @include respond-to(screen-768)
                font-size: 35px
                margin-bottom: 12px
            @include respond-to(screen-420)
                font-size: 30px


.student-life-secB
    background-color: var(--prime)
    @include respond-to(screen-768)
        padding-top: 40px
    .student-life-grid
        display: grid
        grid-template-columns: repeat(2, 1fr)
        align-items: center
        gap: 350px
        @include respond-to(screen-1366)
          gap: 110px
        @include respond-to(screen-768)
          grid-template-columns: 1fr
          gap: 70px
        @include respond-to(screen-540)
          gap: 35px
        
        img
            width: 100%
            display: block
            padding-top: 75px
            @include respond-to(screen-768)
              padding-top: 0

        div
            height: 350px
            overflow: auto
            padding-right: 30px
            /* Scrollbar base */
            &::-webkit-scrollbar
              width: 4px

            /* Track - thin white line */
            &::-webkit-scrollbar-track
              background: transparent
              border-right: 2px solid rgba(255,255,255,0.6)

            /* Thumb - white rectangle */
            &::-webkit-scrollbar-thumb
              background: #ffffff
              border-radius: 0
              min-height: 60px
              margin: 2px
              border-left: 3px solid transparent
              border-right: 3px solid transparent

            /* Hover effect */
            &::-webkit-scrollbar-thumb:hover
              background: rgba(255,255,255,0.9)

            /* Hide on mobile */
            @include respond-to(screen-540)
                &::-webkit-scrollbar
                  display: none
            h6
              margin: 20px 0 
              color: var(--white)
             

            h4
                font-size: 3rem
                margin-bottom: 24px
                color: var(--white)
                line-height: 50px
                position: sticky
                top: 0
                background: #4459c5
                z-index: 4
                @include respond-to(screen-540)
                   font-size: 2.2rem
                   line-height: 40px

            p
                color: var(--white)
                opacity: 0.7
                text-align: justify

.student-life-secC
  padding: 80px 0 110px

  @include respond-to(screen-768)
    padding: 60px 0 75px

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

  .container
    .student-life-grid
      display: grid
      grid-template-columns: repeat(3, 1fr)
      gap: 24px

      @include respond-to(screen-768)
        grid-template-columns: repeat(4, 1fr)

      .card
        display: flex
        flex-direction: column
        height: 100%
        padding: 34px 34px 0
        border-radius: 15px
        overflow: hidden
        gap: 20px

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

        // CONTENT WRAPPER
        > div
          flex: 1 1 auto
          padding-right: 15px

        h4
          margin-bottom: 14px
          font-weight: 700
          z-index: 2

          @include respond-to(screen-1024)
            font-size: 20px
            line-height: 24px

        p
          font-size: 14px
          line-height: 20px
          margin-bottom: 15px

          @include respond-to(screen-768)
            margin-bottom: 6px

          @include respond-to(screen-675)
            margin-bottom: 24px

        // IMAGE FIXED TO BOTTOM
        img
          margin-top: auto
          width: 100%
          object-fit: contain
          display: block
        



      // GRID SPANS
      .card:nth-child(1),
      .card:nth-child(4),
      .card:nth-child(5),
      .card:nth-child(6)
        grid-column: span 1

        @include respond-to(screen-768)
          grid-column: span 2

      // CARD 1
      .card:nth-child(1)
        background-color: #C0D8FF80

        h4
          background: #dfebff

        @include respond-to(screen-768)
          grid-column: span 4

        > div
          height: 340px
          overflow: auto

          &::-webkit-scrollbar
            width: 4px

          &::-webkit-scrollbar-track
            background: transparent
            border-right: 2px solid rgba(255,255,255,.6)

          &::-webkit-scrollbar-thumb
            background: #fff
            min-height: 60px

          @include respond-to(screen-540)
            &::-webkit-scrollbar
              display: none

      // CARD 2
      .card:nth-child(2)
        grid-column: span 2
        display: grid
        grid-template-columns: repeat(2, 1fr)
        gap: 140px
        background-color: #FFF5CB

        h4
          background: #fff5cb

        @include respond-to(screen-1440)
          gap: 50px

        @include respond-to(screen-1366)
          gap: 24px

        @include respond-to(screen-768)
          grid-column: span 4
          gap: 0

        @include respond-to(screen-540)
          grid-template-columns: 1fr

        > div
          height: 340px
          overflow: auto
          // margin-top: 95px

          @include respond-to(screen-768)
            margin-top: 0

          &::-webkit-scrollbar
            width: 4px

          &::-webkit-scrollbar-track
            background: transparent
            border-right: 2px solid rgba(255,255,255,.6)

          &::-webkit-scrollbar-thumb
            background: #fff

          img
            width: 150px

      // CARD 3 (IMAGE LEFT)
      .card:nth-child(3)
        grid-column: span 3
        padding: 0
        display: grid
        grid-template-columns: repeat(2, 1fr)
        align-items: center
        gap: 105px
        background-color: #C0D8FF80

        @include respond-to(screen-1536)
          gap: 30px

        @include respond-to(screen-768)
          grid-column: span 4
          grid-template-columns: 1fr
          gap: 0

        > div
          padding: 35px

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

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

      // COLOR VARIANTS
      .card:not(:nth-child(3)):nth-child(3n + 1)
        background-color: #FF6C8580

        h4
          background: #ffb5c2

      .card:not(:nth-child(3)):nth-child(3n + 2)
        background-color: #93FFC980

        h4
          background: #c9ffe4

      .card:nth-child(5),
      .card:nth-child(6)
        img
          height: 300px
      

      .card:not(:nth-child(3)):nth-child(3n)
        background-color: #E4C0FF80

        h4
          background: #f1dfff

      // CARDS 4+
      .card:nth-child(n+4)
        @include respond-to(screen-768)
          grid-column: span 2

        @include respond-to(screen-675)
          grid-column: span 4

        > div
          height: 300px
          overflow: auto
          padding-right: 20px

          &::-webkit-scrollbar
            width: 4px

          &::-webkit-scrollbar-track
            background: transparent
            border-right: 2px solid rgba(199,199,199,.6)

          &::-webkit-scrollbar-thumb
            background: #fcfcfc

          @include respond-to(screen-540)
            &::-webkit-scrollbar
              display: none