@import '../_common';
@import '../../sass/hall-fame/hall-fame'
p
  text-align: justify 
.banner
  &::before
  //  background: linear-gradient(180deg, #8497FB 0%, #495BB7 100%)
   overflow: hidden
  &.home-banner
    .bg
      position: relative
      @include respond-to(screen-540)
          height: 30vh !important
      .banner-wrapper
        bottom: 15% !important

        h2
          display: none

        .container-fluid
          .flex
            .colA
              h1
                font-size: 14rem
                color: var(--white)
                letter-spacing: 6px
                position: relative
                letter-spacing: 0
                @include respond-to(screen-1440)
                  font-size: 12rem

                @include respond-to(screen-1280)
                  font-size: 11rem

                @include respond-to(screen-1152)
                  font-size: 9.5rem

                @include respond-to(screen-991)
                  font-size: 8rem

                @include respond-to(screen-768)
                  font-size: 7rem

                @include respond-to(screen-675)
                    font-size: 5.5rem

                @include respond-to(screen-540)
                    font-size: 3rem
                    top: -52%
                    z-index: 2

              .gallery
                position: absolute
                bottom: 50%
                left: 50%
                transform: translate(-50%, -50%)
                width: 100%
                // @include respond-to(screen-991)
                //    transform: translate(-50%, -18%)
                // @include respond-to(screen-540)
                //    transform: translate(-50%, -12%)


              .photo-secA
                position: relative
                display: none

                .swiper-btn
                  position: absolute
                  top: 50%
                  left: 50%
                  width: 60%
                  z-index: 2
                  transform: translate(-50%, -50%)
                  @include respond-to(screen-1280)
                     width: 64%
                     transform: translate(-47%, -50%)
                  @include respond-to(screen-1024)
                     left: 50%
                     width: 84%
                  @include respond-to(screen-768)
                     width: 80%
                  @include respond-to(screen-675)
                     width: 95%
                  @include respond-to(screen-540)
                     width: 86%
                  @include respond-to(screen-420)
                     width: 100%

                  
                  .swiper-button-prev,
                  .swiper-button-next
                    position: absolute
                    top: 50%
                    transform: translateY(-50%)
                    z-index: 10
                    color: #000
                    background: rgba(255, 255, 255, 0.8)
                    border-radius: 50%
                    font-size: 11px
                    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15)
                    width: 60px
                    height: 60px
                    @include respond-to(screen-675)
                       width: 35px
                       height: 35px
                    &::after
                      font-size: 14px

                  
  .swiper
    width: 475px
    height: 475px
    @include respond-to(screen-1366)
      width: 390px
      height: 390px
    @include respond-to(screen-768)
      width: 350px
      height: 350px
    @include respond-to(screen-540)
      width: 235px
      height: 235px
    
    .swiper-slide
      display: flex
      align-items: center
      justify-content: center
      border-radius: 18px
      position: relative

      .item
        position: relative
        overflow: hidden
        width: 100%
        height: 100%

        .play-btn
          &::after
            border-left: calc(var(--btnsize) / 5.6) solid var(--prime) 

        img 
          width: 100%
          height: 100%
          object-fit: cover
          border-radius: 18px
          display: block
        &::after
          content: ''
          position: absolute
          top: 0
          left: 0
          width: 100%
          height: 100%
          background: rgb(255, 255, 255)
          border-radius: 18px
          transition: opacity 0.3s ease
          z-index: 1
          border: 2px solid #ffffff94

        


.swiper-slide-active .item::after
  opacity: 0



.container
    @include respond-to(screen-420)
        padding: 0 2px
.photo-secB
  padding: 20px 0 0

 
  .btn-groups
    display: flex
    gap: 45px
    justify-content: center
    margin: 60px 0 90px
    @include respond-to(screen-991)
       margin: 30px 0 60px
       gap: 30px
    @include respond-to(screen-540)
       gap: 20px
    @include respond-to(screen-420)
       gap: 6px
       margin: 20px 0 35px
    
      
    .btn-outline
      padding: 10px 16px
      color: var(--black)
      transform: rotate(9deg)
      line-height: 2
      @include respond-to(screen-540)
        transform: rotate(0)
        padding: 6px 10px
        font-size: 12px
      &:last-child
        transform: rotate(-12deg)
        @include respond-to(screen-540)
          transform: rotate(0)

      &:hover
        color: var(--white)

      @include hover

      &::after
        border: 1px solid var(--black)
        border-radius: 25px

      &::before
        background-color: var(--black)
        border-radius: 25px


    .theme-btn
          padding: 10px 16px
          transform: rotate(-12deg)
          line-height: 2
          @include hover
          @include respond-to(screen-540)
            transform: rotate(0)
            padding: 6px 10px
            font-size: 12px

          &::after
              background-color: #4459C5
              border-radius: 25px
          &::before
              border-radius: 25px

  .photo-grid
    display: grid
    grid-template-columns: repeat(3 , 1fr)
    gap: 25px
    margin-bottom: 45px
    @include respond-to(screen-991)
      grid-template-columns: repeat(2 , 1fr)
    @include respond-to(screen-675)
      grid-template-columns: 1fr
      gap: 20px
    @include respond-to(screen-420)
      padding: 0 15px
      margin-bottom: 35px



    .card
      padding: 20px 20px 0 20px
      background: linear-gradient(180deg, #C4CDFF 0%, #FFFFFF 100%)
      border: 1px solid rgba(76, 93, 186, 1)
      border-radius: 15px
      align-items: center
      
      img
        width: 100%
        border-radius: 10px

      .play-btn
        &::after
         border-left: calc(var(--btnsize) / 5.6) solid var(--prime) 

      .line-grid
        padding: 26px 0
        display: grid 
        grid-template-columns: 110px 1fr
        gap: 20px
        @include respond-to(screen-1024)
          grid-template-columns: 30px 1fr
          gap: 14px
        @include respond-to(screen-991)
          grid-template-columns: 110px 1fr
        @include respond-to(screen-768)
          grid-template-columns: 60px 1fr
        @include respond-to(screen-675)
          grid-template-columns: 160px 1fr
        @include respond-to(screen-420)
          grid-template-columns: 40px 1fr
          padding: 16px 0
 
        .line
          width: 100%
          height: 2px 
          background-color: var(--prime)
          margin: auto 0

        h5
          font-size: 16px
          text-align: left