@import '../_common'
@import '../../sass/transformative-pedagogy/transformative'
p
  text-align: justify 
.banner
  z-index: 2

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

      .content
        width: 40%
        margin: 0 auto !important 
        @include respond-to(screen-540)
          width: 75%

.transformative-secA
  padding: 80px 0 60px
  @include respond-to(screen-1024)
    padding: 34px 0 60px

  .sub-heading
    width: 30%
    @include respond-to(screen-1536)
      width: 38%
    @include respond-to(screen-1366)
      width: 60%
    @include respond-to(screen-768)
      width: 80%
    @include respond-to(screen-768)
      width: 100%
    

    h2
      font-size: 32px
      padding: 18px 0 49px
      @include respond-to(screen-1024)
        padding: 18px 0 30px
      @include respond-to(screen-540)
        font-size: 24px
      
    img
      width: 35%

  .transformative-grid
    display: grid
    grid-template-columns: repeat(4, 1fr)
    gap: 14px
    padding-top: 110px
    @include respond-to(screen-1024)
      grid-template-columns: repeat(3, 1fr)
      padding-top: 64px
    @include respond-to(screen-768)
      grid-template-columns: repeat(2, 1fr)
    @include respond-to(screen-540)
      grid-template-columns: repeat(1, 1fr)
    
    .item
      cursor: pointer
      display: flex
      justify-content: center
      flex-direction: column
      text-align: left
      color: #fff
      padding: 25px
      transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease
      will-change: transform
      @include respond-to(screen-540)
        height: 335px
        padding: 65px
      @include respond-to(screen-420)
        padding: 38px
      
      &:hover
        transform: translateY(-5px)
      
      // Image items with no padding
      &:nth-child(1),
      &:nth-child(3),
      &:nth-child(6),
      &:nth-child(8),
      &:nth-child(9),
      &:nth-child(11)
        padding: 0
        @include respond-to(screen-540)
          height: auto
        
        img
          width: 100%
          height: 100%
          object-fit: cover
          display: block
      
      @include respond-to(screen-540)
        &:nth-child(1)
          order: 1  // Image
        &:nth-child(2)
          order: 2  // Simulations
        &:nth-child(3)
          order: 3  // Image
        &:nth-child(4)
          order: 4  // Quiz
        &:nth-child(5)
          order: 6  // Animated Videos
        &:nth-child(6)
          order: 5  // Image
        &:nth-child(7)
          order: 8  // Smart Classrooms
        &:nth-child(8)
          order: 7  // Image
        &:nth-child(9)
          order: 9  // Image
        &:nth-child(10)
          order: 10 // Digital Libraries
        &:nth-child(11)
          order: 11 // Image
        &:nth-child(12)
          order: 12 // Online Learning
        @include respond-to(screen-540)
          height: auto
        
        img
          width: 100%
          height: 100%
          object-fit: cover
          display: block

      &:nth-child(2)
        background-color: var(--prime)

      &:nth-child(4)
        background-color: #CB9B1A

      &:nth-child(5)
        background-color: #DC4B4B

      &:nth-child(7)
        background-color: #32A3D8

      &:nth-child(10)
        background-color: #5D950F

      &:nth-child(12)
        background-color: #9330C1

      h4
        font-size: 2rem
        text-align: left
        display: flex
        justify-content: flex-start
        @include respond-to(screen-1366)
          font-size: 24px
          line-height: 32px
      p
        color: var(--white)
        margin-top: 24px
        font-size: 16px
        opacity: 0.7
        text-align: left
        @include respond-to(screen-1366)
          margin-top: 15px
          font-size: 14px



      img
        width: 100%
        height: 100%
        aspect-ratio: 1 / 1
        object-fit: cover
        transition: transform 0.4s ease, filter 0.4s ease

.transformative-secB
    padding-top: 80px
    @include respond-to(screen-1024)
      padding-top: 0
    .sub-heading
        width: 30%
        margin: 0 auto
        @include respond-to(screen-1536)
          width: 35%
        @include respond-to(screen-1024)
          width: 45%
        @include respond-to(screen-768)
          width: 60%
        @include respond-to(screen-540)
          width: 100%

    .transformative-grid
        align-items: center
        gap: 120px
        overflow: hidden
        margin-bottom: 110px
        @include respond-to(screen-1024)
          margin-bottom: 60px
          gap: 38px

          
        .swiper-item
            border-radius: 10px
            overflow: hidden
            position: relative

            .whats-slider
                .swiper-slide
                    img
                      width: 100%

            .affiliation-pagination
                position: absolute
                bottom: 10px
                left: 50%
                transform: translateX(-50%)
                z-index: 10
                text-align: center
                .swiper-pagination-bullet
                    opacity: 0.4
                    transition: opacity 0.3s

                    &-active
                        opacity: 1

        .swiper-content
          h3
            margin-bottom: 25px
          p
            margin-bottom: 15px