@import '../_common'
p
  text-align: justify 
.banner
  z-index: 2
  .bg
    .banner-wrapper
      bottom: 15% !important

      .content
        width:100%
        margin: 0 auto !important  
    
.student-secA
    padding: 55px 0 90px
    display: grid
    grid-template-columns: repeat(4 , 1fr)
    gap: 30px
    @include respond-to(screen-1024)
        grid-template-columns: repeat(2 , 1fr)
    @include respond-to(screen-768)
        grid-template-columns: repeat(2 , 1fr)
    @include respond-to(screen-675)
        grid-template-columns: 1fr
    @include respond-to(screen-540)
        padding: 45px 0
    .card
        box-shadow: 0px 3px 8px 0px #0000003D
        background-color: var(--white)
        border-radius: 15px
        overflow: hidden
        div
            padding: 30px 30px 40px 30px
            text-align: center
            @include respond-to(screen-1152)
                padding: 20px 20px 30px 20px
            .btn-wraper
                padding: 0
                .theme-btn
                    padding: 10px 16px
                    @include hover
                    &::after
                        background-color: #4459C5
                        border-radius: 25px
                    &::before
                        border-radius: 25px
            h4
                margin: 18px 0 28px
                font-weight: 500
                font-size: 1.3rem
                @include respond-to(screen-991)
                  font-size: 1.2rem
                @include respond-to(screen-675)
                  margin: 16px 0 20px
                  font-size: 1rem

        img
            width: 60%
            display: block
            margin: 0 auto
            margin-top: 24px


.whats-secA
  padding: 80px 0
  @include respond-to(screen-991)
    padding: 45px 0

  .grid
    display: grid
    grid-template-columns: repeat(2, 1fr)
    align-items: center
    gap: 4rem
    @include respond-to(screen-991)
       grid-template-columns: 1fr
       gap: 2rem
    

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

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

        .whats-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