@import '../_common'

p
  text-align: justify 

.bg
  .banner-wrapper
    bottom: 10% !important
    .content
      gap: 30px
      width: 100%
      justify-content: space-between !important
      align-items: center
      @include respond-to(screen-540)
        flex-direction: column
        gap: 14px
      .reg-btn
        transition: 0.5s ease
        @include regularBtn(6px 15px)
        color: var(--black) 
        line-height: 1.2
        &:hover
          color: #fff 

.admission-secA
  padding: 60px 0 0
  @include respond-to(screen-1440)
    padding: 38px 0 0
  
  .item-grid
    display: grid
    grid-template-columns: repeat(2, 1fr)
    align-items: center
    gap: 40px
    @include respond-to(screen-1440)
      gap: 30px
      align-items: flex-start
    @include respond-to(screen-991)
      grid-template-columns: repeat(1, 1fr)
      gap: 55px
    
    .admission-content
      h2
        margin-bottom: 16px
      
      .admission-secA-ul
        list-style: none
        padding: 23px 0 40px 25px
        @include respond-to(screen-1440)
          padding: 23px 0 0 0
        
        li
          font-size: 16px
          color: var(--text)
          margin-bottom: 16px
          position: relative
          text-align: justify
          padding-left: 45px
          @include respond-to(screen-1440)
            padding-left: 35px
            font-size: 15px

          &:last-child
            margin-bottom: 0
          
          &::before
            content: "•"
            color: var(--prime)
            font-size: 3.2em
            position: absolute
            left: 0
            top: -28px
    
    .form_container
      background: url("../../images/admission/fromBg.jpg") no-repeat
      width: 100%
      height: 100%
      background-position: 50% 50%
      background-size: contain
      padding: 110px 45px 63px 45px
      border-radius: 15px
      @include respond-to(screen-991)
        padding: 30px 20px
        background: none
      @include respond-to(screen-540)
        padding: 20px 15px
      
      .form-container
        width: 100%
        
        .rotate-form
          width: 100%
          margin-top: 150px
          @include respond-to(screen-991)
            margin-top: 50px
          .form.form-grid
            display: grid
            grid-template-columns: repeat(2, 1fr)
            gap: 20px
            width: 100%
            max-width: 550px
            margin: 0 auto
            @include respond-to(screen-540)
              grid-template-columns: repeat(1, 1fr)
              gap: 8px
            
            .form-group
              position: relative
              margin-bottom: 10px
              
              &::before
                content: ''
                position: absolute
                left: 0
                bottom: 0
                width: 100%
                height: 1px
                background: var(--black)
                opacity: 0.3
              
              input,
              textarea,
              select
                width: 100%
                padding: 12px 0
                border: none
                background: transparent
                font-size: 14px
                color: var(--black)
                outline: none
                
                &::placeholder
                  opacity: 0
              
              label
                position: absolute
                top: 50%
                left: 0
                transform: translateY(-50%)
                color: #666
                font-size: 14px
                transition: all 0.3s ease
                pointer-events: none
                background: transparent
                z-index: 1
              
              // Date input specific styles
              input[type="date"]
                position: relative
                min-height: 40px
                
                &::-webkit-datetime-edit
                  opacity: 0
                
                &::-webkit-datetime-edit-fields-wrapper
                  opacity: 0
                
                &::-webkit-datetime-edit-text
                  opacity: 0
                  padding: 0
                
                &::-webkit-datetime-edit-month-field,
                &::-webkit-datetime-edit-day-field,
                &::-webkit-datetime-edit-year-field
                  opacity: 0
                
                &::-webkit-inner-spin-button,
                &::-webkit-clear-button
                  display: none
                
                &::-webkit-calendar-picker-indicator
                  position: absolute
                  right: 5px
                  top: 50%
                  transform: translateY(-50%)
                  cursor: pointer
                  opacity: 0.5
                  z-index: 2
                  
                  &:hover
                    opacity: 1
                
                // Show date when valid
                &:valid,
                &:focus:valid
                  &::-webkit-datetime-edit,
                  &::-webkit-datetime-edit-fields-wrapper
                    opacity: 1
                  
                  &::-webkit-datetime-edit-text,
                  &::-webkit-datetime-edit-month-field,
                  &::-webkit-datetime-edit-day-field,
                  &::-webkit-datetime-edit-year-field
                    opacity: 1
                    color: var(--black)
                
                &::-moz-placeholder
                  opacity: 0
                
                // Move label up when focused or has valid date
                &:focus ~ label,
                &:valid ~ label
                  top: -10px
                  transform: translateY(0)
                  color: var(--black)
                  font-size: 12px
                  background: var(--white)
                  padding: 0 4px
                  width: 100%

              
              // General input styles
              input:not([type="date"])
                &:focus ~ label,
                &:not(:placeholder-shown) ~ label
                  top: -10px
                  color: var(--black)
                  font-size: 12px
                  transform: translateY(0)
                  background: var(--white)
                  padding: 0 4px
              
              // Textarea styles
              textarea
                min-height: 80px
                resize: vertical
                padding-top: 12px
                
                &:focus ~ label,
                &:not(:placeholder-shown) ~ label
                  top: -10px
                  color: var(--black)
                  font-size: 12px
                  transform: translateY(0)
                  background: var(--white)
                  padding: 0 4px
              
              // Select styles
              select
                cursor: pointer
                appearance: none
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E")
                background-repeat: no-repeat
                background-position: right 5px center
                background-size: 12px
                padding-right: 25px
                
                ~ label
                  top: -10px
                  color: var(--black)
                  font-size: 12px
                  background: var(--white)
                  padding: 0 4px
                  transform: translateY(0)
                
                &:focus ~ label
                  color: var(--prime)
              
              // Full width modifier
              &.w-full
                grid-column: span 2
                @include respond-to(screen-540)
                  grid-column: span 1
            
            .sbmt-grp
              grid-column: span 2
              width: 100%
              padding-top: 20px
              @include respond-to(screen-540)
                grid-column: span 1
              
              a,
              button
                display: inline-block
                text-align: center
                text-transform: capitalize
                padding: 12px 40px
                background: var(--prime)
                color: var(--white)
                border: none
                border-radius: 5px
                cursor: pointer
                transition: all 0.3s ease
                text-decoration: none
                font-size: 16px
                
                &:hover
                  background: #1BB6F0
                  color: var(--white)
                  transform: translateY(-2px)
                  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2)

          .custom-select
            &::before
              filter: brightness(0)


// Health Section B
.health-secB
  padding: 80px 0 90px
  @include respond-to(screen-1440)
    padding: 60px 0 90px
  @include respond-to(screen-1024)
    padding: 16px 0 50px
  @include respond-to(screen-991)
    padding: 56px 0 43px
  @include respond-to(screen-540)
    padding: 30px 0 40px
  
  .heading
    width: 30%
    @include respond-to(screen-1536)
      width: 65%
    @include respond-to(screen-540)
      width: 100%
    
    h2
      margin-bottom: 75px
      @include respond-to(screen-1440)
        margin-bottom: 42px
      @include respond-to(screen-991)
        margin-bottom: 35px
      @include respond-to(screen-540)
        margin-bottom: 16px
        font-size: 20px
    
    .admission-tab
      margin: 30px 0
      display: flex
      overflow: auto
      
      li
        position: relative
        cursor: pointer
        display: inline-block
        margin-right: 45px
        text-wrap: nowrap
        font-size: 16px
        font-weight: 500
        color: var(--text)
        transition: color 0.3s ease, font-weight 0.3s ease
        @include respond-to(screen-1024)
          font-size: 15px
        @include respond-to(screen-540)
          margin-right: 16px
          font-size: 14px

        &::before
          content: ''
          position: absolute
          left: 0
          bottom: -12px
          width: 0%
          height: 2px
          background: var(--prime)
          transition: width 0.3s ease

        &:hover
          color: var(--prime)
          font-weight: 500

          &::before
            width: 100%

        &.active
          color: var(--prime)

          &::before
            width: 100%

  .health-tab-content
    width: 100%

    .tab-panel
      display: none
      
      &.active
        display: grid
        gap: 40px
        flex-wrap: wrap
        grid-template-columns: repeat(2, 1fr)
        width: 100%
        @include respond-to(screen-991)
          grid-template-columns: repeat(1, 1fr)
          gap: 0
        @include respond-to(screen-540)
          gap: 15px

    .health-secB-grid
      width: 100%
      display: flex
      align-items: center
      gap: 40px
      padding-top: 18px

      img
        max-width: 100%
        height: auto
        flex: 1 1 45%

      .health-secB-ul
        flex: 1 1 50%
        align-self: center
        list-style: disc
        padding-left: 20px
        @include respond-to(screen-991)
          padding-left: 0
        
        li
          margin-bottom: 20px
          text-align: justify
          @include respond-to(screen-1440)
            margin-bottom: 12px


// Admission Section C
.home-secF
  background-color: var(--white)

.admission-secC-bg
  background-color: var(--prime-light)
  position: relative
  padding: 80px 0
  @include respond-to(screen-1440)
    padding: 60px 0
  
  .admission-secC
    .item-grid
      display: grid
      grid-template-columns: repeat(2, 1fr)
      align-items: center
      gap: 70px
      @include respond-to(screen-1440)
        gap: 10px
      @include respond-to(screen-991)
        grid-template-columns: repeat(1, 1fr)
      
      img
        width: 100%
        border-radius: 15px
        cursor: pointer
        height: 100%
        object-fit: cover
      
      .item-content
        padding: 40px
        @include respond-to(screen-991)
          padding: 40px 0 0
          text-align: center
        @include respond-to(screen-540)
          padding: 20px 0 0
        
        h2
          margin-bottom: 24px
          color: var(--white)
          @include respond-to(screen-540)
            margin-bottom: 16px
        
        p
          color: var(--white)


// Transfer Case Section
.transfer-case
  background-color: var(--white)
  padding: 90px 0
  @include respond-to(screen-1440)
    padding: 46px 0 55px
  @include respond-to(screen-768)
    padding: 50px 0 70px
  
  .branch-card
    display: grid
    grid-template-columns: repeat(2, 1fr)
    gap: 136px
    overflow: hidden
    @include respond-to(screen-1440)
      gap: 48px
    @include respond-to(screen-991)
      grid-template-columns: repeat(1, 1fr)
      gap: 35px
    
    img
      border-radius: 14px
      width: 100%
      height: 100%
      object-fit: cover
    
    .branch-card-content
      order: 2
      
      h2
        margin-bottom: 24px
      
      .health-secB-ul
        list-style: none
        padding-left: 25px
        @include respond-to(screen-540)
          padding-left: 0
        
        li
          font-size: 16px
          color: var(--text)
          margin-bottom: 24px
          position: relative
          padding-left: 45px
          @include respond-to(screen-1440)
            padding-left: 35px
            font-size: 15px
            margin-bottom: 12px
          @include respond-to(screen-540)
            font-size: 14px
            padding-left: 35px

          &:last-child
            margin-bottom: 0
          
          &::before
            content: "•"
            color: var(--prime)
            font-size: 3.2em
            position: absolute
            left: 0
            top: -28px
      
      .btn-wraper
        display: flex
        justify-content: flex-start
        margin: 35px 0 0 12px
        @include respond-to(screen-768)
          margin: 20px 0 0 12px