@import '../_common'
p
  text-align: justify 




.banner
  &::before
    overflow: hidden

  .bg
    @include respond-to(screen-540)
      height: 40vh !important
    .banner-wrapper
      bottom: 15% !important

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

          .colA
            margin-right: 0 
            width: 100%
            position: relative
            text-align: center
            max-width: 1450px
            display: block
            z-index: 1
            position: relative
            @include respond-to(screen-991)
              max-width: 850px
            @include respond-to(screen-768)
              max-width: 750px
            @include respond-to(screen-540)
              max-width: 550px
            @include respond-to(screen-420)
              max-width: 340px

            img
              width: 100%

  .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-1152)
                  padding: 16px 16px 30px 16px
                .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