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

  .bg
    .banner-wrapper
      @include respond-to(screen-1024)
        bottom: 10% !important
      @include respond-to(screen-540)
         top: 50%
         left: 50%
         transform: translate(-50% , -25%)
         width: 85%
      @include respond-to(screen-420)
          width: 100%
      .flex
        margin: 0 40px
        justify-content: space-between !important

        @include respond-to(screen-675)
          margin: 0
        @include respond-to(screen-540)
          justify-content: center !important
      
        .colA
          h2
            color: var(--white)
            @include respond-to(screen-540)
                margin-bottom: 40px
        .colB
          display: flex
          gap: 24px
          justify-content: center
          flex-wrap: wrap
          @include respond-to(screen-540)
            gap: 15px
          @include respond-to(screen-420)
            gap: 10px

          .register-colA,
          .register-colB

            p
              padding-bottom: 34px
              font-size: 15px
              color: var(--white)
              text-align: center


            .reg-btn,
            .hover-btn
              > a
                text-align: center
                width: auto

            .reg-btn > a
              transition: 0.5s ease
              @include regularBtn(8px 15px )
              color: var(--black)

              &:hover
                color: #fff

            .hover-btn > a
              @include btn2

              &:hover
                border: 1px solid #1BB6F0

.alumni-secA
  padding: 24px 0 80px 
  @include respond-to(screen-420)
     padding: 20px 0 65px

  .heading
    width: 100%
    margin: 0 auto
    text-align: center
    padding-bottom: 80px
    display: flex
    justify-content: space-between
    align-items: flex-start
    
    > div:first-child
      width: 30%
      margin-left: auto

      img
        width: 140px

      h2
        margin: 32px 0 26px

    > div:last-child
      width: 30%
      text-align: right

      .theme-btn
        padding: 10px 16px
        transform: rotate(-12deg)
        @include hover

        &::after
          background-color: #4459C5
          border-radius: 25px

        &::before
          border-radius: 25px

  .alumni-card-wrapper
    .alumni-card
      display: grid
      grid-template-columns: repeat(2, 1fr)
      gap: 95px
      margin-top: 45px
      padding: 60px
      align-items: center
      position: relative
      z-index: 2
      overflow: hidden

      @include respond-to(screen-1366)
        gap: 60px
        margin-top: 40px
        
      @include respond-to(screen-1024)
        gap: 35px
        padding:25px

      @include respond-to(screen-991)
        grid-template-columns: 1fr
        
      @include respond-to(screen-768)
        margin-top: 30px

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

      &:nth-child(1)
        margin-top: 14px

      &:nth-child(odd)
        background-color: #fff

      &:nth-child(even)
        background-color: #D6EFFF

        > img
          order: 2
          @include respond-to(screen-991)
            order: 1

        > .alumni-content
          order: 1

      img
        width: 100%
        border-radius: 10px

      .alumni-content
        padding-right: 65px
        @include respond-to(screen-1366)
          padding-right: 24px
        @include respond-to(screen-1024)
          padding-right: 0
        @include respond-to(screen-991)
           text-align: center

        h4
          font-size: 1.8rem
          margin-bottom: 24px
          line-height: 1.2
          @include respond-to(screen-991)
            margin-bottom: 10px
            font-size: 1.6rem

          @include respond-to(screen-675)
            font-size: 1.3rem
            line-height: 1.2



.know-more
    display: flex
    justify-content: space-between
    align-items: center
    padding: 30px
    background: #f1efff
    width: 94%
    margin: 0 auto
    border-radius: 10px
    margin-top: 30px

    @include respond-to(screen-540)
      padding: 20px
      
    @include respond-to(screen-420)
        flex-direction: column

    div:first-child
        width: 45%
        @include respond-to(screen-1024)
          width: 60%
        @include respond-to(screen-420)
          width: 100%
          margin-bottom: 35px
          text-align: center

        h4
            margin-bottom: 16px

    .theme-btn
        padding: 10px 16px
        transform: rotate(-12deg)
        @include hover
        &::after
            background-color: #4459C5
            border-radius: 25px
        &::before
            border-radius: 25px