@import '../_common'
p
  text-align: justify 
.banner
  &::before
    // background: linear-gradient(360deg, #AFBCFF 0%, #4459C5 100%)
    overflow: hidden

  .bg
    .banner-wrapper
      bottom: 15% !important

      .container-fluid
        .flex
          justify-content: center !important

          .colA
            margin-right: 0 
            width: 100%
            position: relative
            text-align: center
            

            img
              width: 100%
              max-width: 810px
              display: block
              margin: 0 auto
              z-index: 1
              position: relative
              @include respond-to(screen-1366)
                max-width: 550px
              @include respond-to(screen-768)
                max-width: 380px
              @include respond-to(screen-540)
                max-width: 320px
              @include respond-to(screen-420)
                max-width: 310px
              
            h1
              position: absolute
              left: 50%
              top: 50%
              transform: translate(-50%, -50%)
              z-index: 0
              font-size: 20rem
              width: 100%
              text-align: center
              color: #FFFFFF80

              @include respond-to(screen-1784)
                  font-size: 18rem

              @include respond-to(screen-1440)
                  font-size: 16rem

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

              @include respond-to(screen-1024)
                  font-size: 12rem

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

              @include respond-to(screen-768)
                  top: -12%
                  font-size: 7rem
              @include respond-to(screen-540)
                  top: -12%
                  font-size: 5rem
              @include respond-to(screen-420)
                  font-size: 4rem
                  top: -22%
              
          
              
              span
                margin-left: 160px
                @include respond-to(screen-1784)
                   margin-left: 74px 
                @include respond-to(screen-1300)
                   margin-left: 24px  
                @include respond-to(screen-768)
                   margin-left: 0 
                 

  .content  
    width: 100%
    margin: 0 auto !important 
    
.hall-secA-border
  border-bottom: 1px solid #ddd
  background: #fff
  @include respond-to(screen-675)
     position: sticky
     top: 65px
     z-index: 10

  .container
    @include respond-to(screen-675)
      max-width: 100%

    .hall-secA
      padding: 40px 0
      @include respond-to(screen-540)
        padding: 10px 0

      .filter
        display: flex
        justify-content: space-between
        align-items: center
        gap: 20px
        @include respond-to(screen-540)
          flex-direction: column
          gap: 8px
        form
          display: flex
          gap: 20px
          align-items: center
          @include respond-to(screen-675)
            gap: 10px
          @include respond-to(screen-540)
            gap: 10px
            flex-direction: row

          .InputContainer
            position: relative
            display: flex
            align-items: center
            border-radius: 8px
            padding: 8px 18px
            border: 1px solid #666666
            background: white
            justify-content: space-between

            @include respond-to(screen-540)
              width: 100%
              padding: 7px 8px
            
            .labelforsearch
                img
                  @include respond-to(screen-540)
                      margin-right: 10px
                      width: 20px

            svg
              width: 20px
              height: 20px

             

            .search, .calendar
              border: none
              outline: none
              background-color: transparent
              font-size: 1rem
              width: 160px
              @include respond-to(screen-675)
                font-size: 14px
                width: 128px

            .calendar
                width: 100px     
                padding: 0    
                cursor: pointer
                color: #666
                background-color: transparent
                @include respond-to(screen-420)
                  width: 100%

            .dropdown-arrow
                position: absolute
                right: 15px
                top: 50%
                transform: translateY(-50%)
                width:24px
                height:24px
                pointer-events: none
              
            .calendar
              cursor: pointer
              color: #666
              text-decoration: none

            &.hasDropdown
              padding-right: 65px
              cursor: pointer
              position: relative

              @include respond-to(screen-675)
                padding-right: 0
              
              .dropdown-toggle
                position: absolute
                right: 10px
                cursor: pointer
                
              .dropdown-menu
                position: absolute
                top: calc(100% + 10px)
                left: 0
                width: 100%
                background: white
                border-radius: 8px
                box-shadow: 0 4px 12px rgba(0,0,0,0.1)
                z-index: 100
                opacity: 0
                visibility: hidden
                transform: translateY(10px)
                transition: all 0.3s ease
                border: 1px solid #ddd
                
                ul
                  padding: 10px 0
                  margin: 0
                  
                  li
                    padding: 8px 15px
                    transition: background 0.2s ease
                    @include respond-to(screen-675)
                       padding: 4px 8px
                       font-size: 14px

                    
                    &:hover
                      background: #f5f5f5
                      
                    a
                      color: #333
                      text-decoration: none
                      display: block
                      font-size: 14px
                      
              &:hover .dropdown-menu,
              &.active .dropdown-menu
                opacity: 1
                visibility: visible
                transform: translateY(0)


              &:hover::after
                transform: translateY(-50%) rotate(180deg)

.hall-secB-parent
  .container
    @include respond-to(screen-675)
      max-width: 98%
    @include respond-to(screen-540)
      max-width: 90%
    @include respond-to(screen-420)
      max-width: 98%
    
    .hall-secB
        padding: 55px 0
        display: grid
        grid-template-columns: repeat(3 , 1fr)
        gap: 20px
        @include respond-to(screen-1024)
          grid-template-columns: repeat(2 , 1fr)
        @include respond-to(screen-768)
          grid-template-columns: repeat(2 , 1fr)
        @include respond-to(screen-675)
          grid-template-columns: 1fr
        @include respond-to(screen-540)
          padding: 45px 0
        
        
        .card
            box-shadow: 0px 3px 8px 0px #0000003D
            background-color: var(--white)
            border-radius: 15px
            overflow: hidden
            div
                padding: 30px 30px 40px 30px
                @include respond-to(screen-1280)
                  padding: 20px 20px 30px 20px
                .btn-wraper
                    padding: 0
                    .theme-btn
                        padding: 10px 16px
                        @include hover
                        &::after
                            background-color: #4459C5
                            border-radius: 25px
                        &::before
                            border-radius: 25px
                p
                    margin: 16px 0 30px
                    @include respond-to(screen-1152)
                        font-size: 14px
                        line-height: 1.3
                        margin: 7px 0 30px

                small
                    font-size: 15px
                    margin-bottom: 14px
                    display: inline-block
                    font-weight: 600
                    color: var(--prime)
                    @include respond-to(screen-1152)
                      margin-bottom: 8px

                h4
                  @include respond-to(screen-1440)
                    font-size: 17px
                    line-height: 23px
            img
                width: 100%
                height: 280px
                @include respond-to(screen-540)
                  height: 180px

.pagination-controls
  display: flex
  justify-content: center
  gap: 18px
  margin: 40px 0 90px
  @include respond-to(screen-540)
     margin: 0px 0 60px
     gap: 6px

  button
    padding: 10px 20px
    border: 1px solid #666666
    background: #fff
    color: var(--text)
    cursor: pointer
    border-radius: 4px
    transition: 0.3s ease
    font-size: 16px
    @include respond-to(screen-540)
      padding: 5px 10px
      font-size: 12px


    &.active, &:hover
      background: var(--prime)
      color: #fff
      border: 1px solid var(--prime)

    &:disabled
      opacity: 0.4
      cursor: pointer
    svg
        margin-left: 8px
        width: 18px
        height: 18px
  .prev
    svg
        transform: rotate(180deg)
        margin-right: 8px
        margin-left: 0
  .page-numbers
    display: flex
    gap: 18px
    @include respond-to(screen-540)
      gap: 10px