@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: 65%
                               font-size: 34px
                            @include respond-to(screen-420)
                               width: 100%
                               font-size: 30px
.heading
    width: 55%
    margin: 0 auto
    text-align: center
    padding: 4rem 0 0
    @include respond-to(screen-1366)
      width: 64%
    @include respond-to(screen-1280)
      width: 70%
    @include respond-to(screen-1024)
      width: 100%
    @include respond-to(screen-768)
      padding: 2rem 0 0

    h3
      margin-bottom: 20px

.knowledge-secA
  display: grid
  grid-template-columns: repeat(2, 1fr)
  gap: 45px
  padding: 80px 0 110px
  
  @include respond-to(screen-1024)
    padding: 80px 0 75px
    gap: 35px
    
  @include respond-to(screen-768)
    grid-template-columns: 1fr
    gap: 25px
    padding: 45px 0 70px

  .card
    display: flex
    flex-direction: column
    border-radius: 15px
    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.24)
    overflow: hidden
    transition: transform 0.3s ease

    &:hover
      transform: translateY(-5px)

    .swiper-item
      position: static
      overflow: hidden

      .whats-slider
        .swiper-slide
          img
            width: 100%
            display: block
            object-fit: cover

      .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
          background: #fff

          &-active
            opacity: 1


    .content-parent
      display: flex
      flex: 1
      padding: 30px 20px 40px
      align-items: center
      background: #fff

      @include respond-to(screen-991)
        padding: 18px 14px 21px
        
      @include respond-to(screen-768)
        padding: 25px 14px 26px
        
      @include respond-to(screen-420)
        flex-direction: column
        padding: 20px 20px 26px

      img
        width: 120px
        height: 120px
        object-fit: contain
        flex-shrink: 0

        @include respond-to(screen-420)
          margin-bottom: 15px

      .card-content
        display: flex
        flex-direction: column
        align-items: flex-start
        gap: 0
        border-left: 1.5px solid #C8C6C6
        padding-left: 25px
        flex: 1

        @include respond-to(screen-420)
          padding-left: 0
          border-left: none
          align-items: center
          text-align: center
          width: 100%

        h5
          margin-bottom: 15px
          font-size: 18px
          color: var(--text)
          font-weight: 600

          @include respond-to(screen-1024)
            font-size: 16px

          @include respond-to(screen-420)
            text-align: center
            width: 100%

        p
          text-align: justify
          line-height: 1.6
          color: var(--text)
          font-size: 12px

          @include respond-to(screen-1024)
            font-size: 14px

          @include respond-to(screen-420)
            text-align: center