@import '../_common';
@import '../../sass/admission-process/admisson-process'
p
  text-align: justify 
.banner
  z-index: 2

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

      .content
        width: 40%
        margin: 0 auto 
        @include respond-to(screen-1440)
          width: 60%
        @include respond-to(screen-1440)
          width: 100%
        
        h2
          max-width: 100% !important
          @include respond-to(screen-991)
             margin-bottom: 0 !important

.transformative-secA
    padding: 80px 0 110px
    @include respond-to(screen-1440)
      padding: 60px 0 90px
    @include respond-to(screen-991)
      padding: 60px 0 80px
    @include respond-to(screen-540)
      padding: 36px 0 55px
    .sub-heading
        width: 30%
        margin: 0 auto
        text-align: center
        @include respond-to(screen-1536)
           width: 50%
        @include respond-to(screen-1024)
           width: 60%
        @include respond-to(screen-768)
           width: 65%
        @include respond-to(screen-540)
           width: 100%

        p
          text-align: justify
        
        
        h2
            padding: 90px 0 70px
            @include respond-to(screen-1440)
               width: 80%
               margin:  0 auto
               padding: 65px 0
            @include respond-to(screen-1440)
               padding: 45px 0

            @include respond-to(screen-540)
               padding: 32px 0
               width: 100%
            
            

    .transformative-grid
        display: grid
        grid-template-columns: repeat(3 , 1fr)
        gap: 45px
        @include respond-to(screen-1366)
           grid-template-columns: repeat(2, 1fr)
           gap: 45px
  
        @include respond-to(screen-768)
           gap: 26px
        @include respond-to(screen-540)
           grid-template-columns: repeat(1, 1fr)
           gap: 22px
        
        .card
          text-align: center
          padding: 42px 20px 58px 20px
          border-radius: 15px
          transition: transform 0.3s ease
          cursor: pointer
          @include respond-to(screen-1024)
            padding: 42px 20px 20px 20px

          &:hover
            transform: scale(1.03)

          img
            width: 84px

          h4
            margin: 34px 0 22px
            color: var(--white)

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

          &:nth-child(1)
            background-color: var(--prime)
            // transform: rotate(0deg)
            // &:hover
            //   transform: rotate(5deg)

          &:nth-child(2)
            background-color: #C5AD1D
            // transform: rotate(-5deg)
            // @include respond-to(screen-991)
            //   transform: rotate(0deg)
            // &:hover
            //   transform: rotate(0deg)

          &:nth-child(3)
            background-color: #D85454
            // transform: rotate(0deg)
            // @include respond-to(screen-991)
            //   transform: rotate(0deg)
            // &:hover
            //   transform: rotate(5deg)

          &:nth-child(4)
            background-color: #1BB6F0
            // transform: rotate(5deg)
            // @include respond-to(screen-991)
            //   transform: rotate(0deg)
            // &:hover
            //   transform: rotate(0deg)

          &:nth-child(5)
            background-color: #4459C5
            // transform: rotate(0deg)
            // &:hover
            //   transform: rotate(5deg)

.transformative-secB
  .sub-heading
    text-align: center

    h3
      margin-bottom: 90px

      @include respond-to(screen-1440)
        margin-bottom: 70px

      @include respond-to(screen-991)
        margin-bottom: 55px
      
      @include respond-to(screen-768)
        margin-bottom: 32px

      @include respond-to(screen-540)
        margin-bottom: 20px
      

  .transformative-grid
    display: grid
    grid-template-columns: repeat(2, 1fr)
    margin-top: 60px
    gap: 3rem

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

    @include respond-to(screen-991)
      grid-template-columns: 1fr
    @include respond-to(screen-540)
       margin-top: 40px
    
    img
      width: 100%

  .accordion
    .accordion-item
      margin-bottom: 30px
      cursor: text
      
      @include respond-to(screen-1366)
        margin-bottom: 16px
      @include respond-to(screen-991)
        margin-bottom: 12px
      
      
      &.active
        .accordion-header
          background-color: var(--prime-light)
          border-radius: 8px 8px 0 0

          div
            svg
              transform: rotate(90deg)

              path
                stroke: var(--white)

            h4
              color: var(--white)


      .accordion-header
        background-color: #EDEDED
        border-radius: 8px
        cursor: pointer


        div
          display: flex
          align-items: center
          justify-content: space-between
          padding: 8px 22px

          svg
            width: 45px
            height: 45px
            transition: transform 0.3s ease 
            transform: rotate(180deg)
            
            @include respond-to(screen-540)
               width: 25px 
               height: 25px 
          h4
            font-weight: 500
            font-size: 1.2rem
            color: var(--black)
            @include respond-to(screen-768)
              font-size: 1rem

      .accordion-body
        border: 1px solid #EDEDED
        border-radius: 0 0 8px 8px

        p
          font-size: 1rem
          padding: 18px 60px 18px 18px
          text-align: justify
          line-height: 1.6
          margin: 0
          @include respond-to(screen-768)
            font-size: 14px
            padding: 12px 12px 14px 14px

.transformative-secC-bg
  background-color: #C4D7F780
  margin-top: 95px
  @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

        .swiper-item , img
          width: 100%
          border-radius: 15px
          object-fit: cover
          position: -webkit-sticky
          position: sticky
          display: block
          top: calc( 25% -  65px )
          @include respond-to(screen-1366)
              top: calc( 30% -  65px )
          @include respond-to(screen-991)
              position: static

        .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