@import '../_common'
p
  text-align: justify 
  @include respond-to(screen-991)
    font-size: 14px
.banner 
    &::before
       background: none
    .bg
      img
        @include respond-to(screen-540)
            object-position: left
.banner-wrapper
    bottom: 10% !important
    @include respond-to(screen-991)
      bottom: 12% !important
    @include respond-to(screen-768)
      bottom: 12% !important
    @include respond-to(screen-540)
      bottom: 20% !important
    .content
        justify-content: center  !important
        flex-direction: column
        text-align: center
        margin: 0  0 40px 158px
        @include respond-to(screen-1440)
           margin: 0  0 0 45px
        @include respond-to(screen-540)
           margin: 0  
           width: 70%  
           margin: 0 auto      
        
        h3
            color: var(--white)
            font-size: 2.2rem
            @include respond-to(screen-768)
              font-size: 1.8rem
            @include respond-to(screen-540)
              font-size: 1rem
              text-align: center
            
        h2
            text-align: center !important
            font-size: 5rem
            padding-top: 20px
            line-height: 5.4rem
            margin: 0 auto

            @include respond-to(screen-1440)
              font-size: 4rem
              line-height: 4.2rem
              width: 50%
            @include respond-to(screen-991)
               font-size: 3.5rem
               line-height: 4rem
               width: 50%
            @include respond-to(screen-768)
              font-size: 3rem
              line-height: 3.2rem
              

            @include respond-to(screen-540)
               line-height: 38px
               margin-bottom: 32px !important
               padding-top: 6px
               text-align: center !important
               margin: 0 auto
            
            
.banner2
    .flex
        .colC
            margin: 0  !important
.sport-secA-main
    position: relative

    &::before
        content: ""
        position: absolute
        right: 0
        top: 84px
        width: 10%
        height: 100%
        background-image: url('../../images/facilities/sport-imgA.svg')
        background-repeat: no-repeat
        background-size: contain

    &::after
        content: ""
        position: absolute
        left: 0
        top: 84px
        width: 10%
        height: 100%
        background-image: url('../../images/facilities/sport-imgB.svg')
        background-repeat: no-repeat
        background-size: contain

    .sport-secA 
        padding: 65px 0
        @include respond-to(screen-1440)
          padding: 50px 0
        @include respond-to(screen-991)
          padding: 28px 0
        @include respond-to(screen-768)
          padding: 10px 0 40px
        .heading
            width: 37%
            margin: 0 auto
            text-align: center
            min-height: 100px 
            @include respond-to(screen-1440)
              width: 65%
            @include respond-to(screen-991)
              width: 58%
            @include respond-to(screen-768)
              width: 70%
            @include respond-to(screen-540)
              width: 78%
            @include respond-to(screen-420)
              width: 98%
            
            p
                margin-top: 24px
.sport-secB
  padding: 0 0 80px
  
  @include respond-to(screen-1440)
    padding: 0 0 58px
  
  .heading
    display: flex
    width: 100%
    justify-content: space-between
    text-align: center
    
    @include respond-to(screen-991)
      justify-content: center
    
    p
      margin-top: 24px
      
      @include respond-to(screen-768)
        margin-top: 16px
    
    
  
    .swiper-group
      display: flex
      gap: 12px
      
      @include respond-to(screen-991)
        top: 30px
      
      @include respond-to(screen-768)
        position: static
        justify-content: center
        margin-top: 20px
      
      button
        width: 40px
        height: 40px
        border-radius: 50%
        border: 1px solid #000
        display: flex
        justify-content: center
        align-items: center

        svg
            display: block
            width: 15px
            height: 15px

    

  .facilities-provider-slider
    padding-top: 60px
    @include respond-to(screen-768)
       padding-top: 36px

    .swiper-group
      display: flex
      justify-content: flex-end
      align-items: center
      gap: 15px
      margin-top: 24px
      width: 100%
      margin:  0 0 3rem
      @include respond-to(screen-991)
         display: none
      button
        background-color: #fff
        width: 45px
        height: 45px
        border-radius: 50%
        color: #000 !important
        display: flex
        align-items: center
        justify-content: center


           
      


      .facilities-prev,
      .facilities-next
        border: 1px solid var(--black)
        width: 45px
        height: 45px
        border-radius: 50%
        display: flex
        align-items: center
        justify-content: center
        cursor: pointer
        background: transparent

        svg
          pointer-events: none


    .swiper-wrapper
      .swiper-slide
        .team-card
          position: relative
          overflow: hidden
          border-radius: 15px
          cursor: pointer

          .img-wrapper
            width: 100%
            position: relative

            img
              position: relative
              width: 100%
              display: block
              overflow: hidden

            .overlay-img
              position: absolute
              bottom: 0
              left: 0
              width: 100%
              height: 100%
              background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0))
              transform: scaleY(0.65)
              transform-origin: bottom
              pointer-events: none
              z-index: 1
              transition: transform 0.3s ease-in-out

          .team-content
            position: absolute
            bottom: 8%
            left: 50%
            transform: translateX(-50%)
            width: 100%
            color: white
            text-align: center
            z-index: 2

        .team-card:hover .overlay-img
          transform: scaleY(1)




.home-secF
    background-color: #fff
.sport-secC-bg
    background-color: #e5eaff
    position: relative
    padding: 80px 0
    @include respond-to(screen-1440)
      padding: 58px 0
    @include respond-to(screen-768)
      padding: 58px 0 76px
    @include respond-to(screen-768)
      padding: 50px 0 
    
    .sport-secC
        .item-grid
            display: grid
            grid-template-columns: repeat(2, 1fr)
            align-items: center
            gap: 100px
            @include respond-to(screen-1440)
               gap: 50px
            @include respond-to(screen-768)
              grid-template-columns: repeat(1, 1fr)
              gap: 30px
            
            img
              width: 100%
              border-radius: 15px
              object-fit: cover
              position: sticky
              height: 560px
              object-position: center
              top: calc( 28% - 100px )
              @include respond-to(screen-1366)
                top: calc(36% - 100px)

              @include respond-to(screen-991)
                position: static
                height: 340px
            .item-content
                h2
                    margin-bottom: 24px
                    @include respond-to(screen-768)
                        text-align: center
                
                h5
                  margin: 24px 0 14px
                  @include respond-to(screen-768)
                      text-align: center
                p
                  text-align: justify


    .footall 
        position: absolute
        right: 0
        top: 12%
        display: block

        @include respond-to(screen-768)
          top: 70%
        @include respond-to(screen-540)
          display: none
        

    .b-ball
        position: absolute
        right: 6%
        bottom: 10%
        display: block

        @include respond-to(screen-768)
          bottom: 2%
        @include respond-to(screen-540)
          display: none