@import '../_common'
p
  text-align: justify 
.banner
    &.home-banner
        .bg 
          .banner-wrapper
              bottom: 10% 
              .content
                  margin: 0 auto 
                  h2
                   width: 100% !important
                   max-width: 100% !important


.affiliation-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
    width: 100%
    max-width: 75%
    margin: 0 auto
    @include respond-to(screen-1366)
        max-width: 100%

    @include respond-to(screen-991)
       grid-template-columns: 1fr
       gap: 2rem

    img
      width: 500px
      @include respond-to(screen-991)
        width: 100%
    

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

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

        .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

                &-active
                    opacity: 1

    .swiper-content
      h3
        margin-bottom: 25px
      p
        margin-bottom: 15px


.home-secF
    padding: 40px 0 40px
    background-color: #fff
    @include respond-to(screen-1024)
      padding: 40px 0 80px
    @include respond-to(screen-991)
      padding: 0 0 80px
    @include respond-to(screen-991)
      padding:20px 0 54px
    .container
        .sub-heading
            h2
                font-size: 40px
                width: 30%
                color: var(--black)
                @include respond-to(screen-1536)
                    width: 40%
                @include respond-to(screen-1280)
                    width: 46%
                @include respond-to(screen-1024)
                    width: 50%

                @include respond-to(screen-991)
                    width: 58%
                @include respond-to(screen-768)
                    font-size: 30px
                @include respond-to(screen-540)
                    font-size: 25px
                    width: 85%

        .shining-stars-container
              padding: 60px 0 0
              position: relative
              @include respond-to(screen-1024)
                padding: 15px 0 0

              .swiper-nav
                  display: flex
                  align-items: center
                  justify-content: space-between
                  gap: 15px
                  position: absolute
                  top: 50%
                  left: 0
                  transform: translateY(-50%)
                  width: 100%
                  z-index: 2

                  button
                      background: #fff  
                      width: 40px
                      height: 40px
                      border-radius: 50%
                      display: inline-block
                      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px

                
.affiliation-slider
  .swiper-wrapper
    .item
      height: auto 
      
      .affiliation-card
        background-color: var(--green)
        border-radius: 14px
        overflow: hidden
        display: flex
        flex-direction: column
        height: 100% // Make card take full slide height

        .img-wrapper
          width: 100%
          flex-shrink: 0 // Prevent image from shrinking
          
          img
            width: 100%
            height: 250px // Set a fixed height for consistency
            object-fit: cover
            display: block
            
            @include respond-to(screen-768)
              height: 200px

        .affiliation-content
          display: flex
          flex-direction: column
          justify-content: flex-start // Changed from center
          padding: 35px
          text-align: center
          flex-grow: 1 // Allow content to grow and take available space

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

          h5
            font-size: 1.5rem
            margin-bottom: 0
            
            @include respond-to(screen-540)
              font-size: 1.25rem

          small
            margin-top: 16px
            line-height: 1.6 // Better readability
            display: block