@import '../_common'
p
  text-align: justify 
.banner
    &.home-banner
        .bg 
            .banner-wrapper
                bottom: 15% !important
                .container
                    .content
                        display: flex
                        justify-content: center
                        h2
                            max-width: 600px
                            text-align: center
                            color: #fff
                            text-transform: capitalize
                            @include respond-to(screen-1024)
                               max-width: 465px
                            @include respond-to(screen-991)
                               max-width: 350px

                            @include respond-to(screen-768)
                               max-width: 345px
                            @include respond-to(screen-540)
                               width: 70%
                               font-size: 34px
                            @include respond-to(screen-420)
                               width: 100%



.parentTeacher
    background-color: #D6EFFF
    
.parentTeacher-secA , .parentTeacher-secC
    display: grid
    grid-template-columns: repeat( 2 , 1fr )
    padding: 100px 0
    gap: 65px
    align-items: flex-start
    @include respond-to(screen-1152)
      padding: 65px 0
      gap: 40px
    @include respond-to(screen-991)
       grid-template-columns: 1fr
       gap: 30px
       padding: 60px 0
    @include respond-to(screen-540)
       padding: 50px 0 45px

    .swiper-item
        position: sticky
        top: calc( 25% -  65px )
        @include respond-to(screen-1366)
            top: calc( 30% -  65px )
        @include respond-to(screen-991)
            position: static
       
    img
        width: 100%
        border-radius: 15px
    p

      text-align: justify
     
      &:nth-child(odd)
          margin-bottom: 34px
          @include respond-to(screen-540)
            margin-bottom: 20px

.parentTeacher-secB
  padding: 80px 0
  @include respond-to(screen-1152)
     padding: 60px 0
  .heading
    width: 54%
    margin: 0 auto
    text-align: center
    @include respond-to(screen-1152)
      width: 70%
    @include respond-to(screen-991)
      width: 90%
    @include respond-to(screen-420)
      width: 100%
    

    h2
      margin-bottom: 28px

  .parentTeacher-card
    display: grid
    grid-template-columns: repeat(2, 1fr) 
    gap: 35px
    padding-top: 60px
    width: 60%
    margin: 0 auto
    @include respond-to(screen-1152)
      width: 90%
    @include respond-to(screen-991)
      width: 100%
    @include respond-to(screen-675)
      gap: 20px
    @include respond-to(screen-540)
      grid-template-columns: 1fr 
    
    .card
      display: flex
      flex-direction: column
      justify-content: center
      align-items: center
      padding: 30px
      border: 1px solid var(--prime)
      border-radius: 15px
      cursor: pointer
      transition: all 0.3s ease
      background-color: var(--white)

      img
        width: 60px
        height: auto

      h6
        margin-top: 28px
        font-size: 1.3rem
        text-align: center
        font-weight: 600
        @include respond-to(screen-540)
          margin-top: 16px
          font-size: 1.2rem
      p
        text-align: center
        margin-top: 8px
        font-size: 0.95rem

      strong
        color: var(--text)
        text-align: center
        display: block
        margin-top: 24px
        @include respond-to(screen-540)
          margin-top: 14px

.parentTeacher-secC

    img
        width: 100%
        border-radius: 15px
        object-fit: cover
        position: sticky
        top: calc( 28% - 100px )
        @include respond-to(screen-1366)
          top: calc(36% - 100px)

        @include respond-to(screen-991)
          position: static

    div
        h3
            margin-bottom: 24px
            @include respond-to(screen-991)
              margin-bottom: 16px
        h5
              margin: 24px 0 14px

        .parentTeacher-secC-ul
            list-style: none
            padding: 30px 0 0 25px
            @include respond-to(screen-1152)
               padding: 21px 0 0 18px
            @include respond-to(screen-540)
                 padding: 16px 0 0 0

            h5
              margin: 24px 0 14px
              
            li
              font-size: 16px
              color: var(--text)
              margin-bottom: 10px
              position: relative
              text-align: justify
              padding-left: 45px
              @include respond-to(screen-768)
                padding-left: 34px
                font-size: 14px

              &::before
                content: "•"
                color: var(--prime)
                font-size: 3.2em
                position: absolute
                left: 0
                top: -28px