- var page_Title = 'Form Wizard 2';
- var form_validation       = true;
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var scrollbar             = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Form Wizard 2
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Form Layout
                    li.breadcrumb-item.active  Form Wizard 2
          // Container-fluid starts
          .container
            .grid.grid-cols-12
              div(class="col-span-12") 
               .card
                  .card-header
                    h5 Custom Horizontal Wizard
                  .card-body
                    .horizontal-wizard-wrapper.tabs
                      .grid.grid-cols-12.gap-3
                        div(class="col-span-12").main-horizontal-header
                          .tab-links.horizontal-options(class="[@media(max-width:1182px)]:!justify-start")
                            a.tab-link.active(data-tabfilter="1") 
                              .horizontal-wizard
                                .stroke-icon-wizard
                                  i.fa-solid.fa-user
                                .horizontal-wizard-content 
                                  h6 Personal Info
                            a.tab-link(data-tabfilter="2") 
                              .horizontal-wizard
                                .stroke-icon-wizard
                                  i.fa-solid.fa-link
                                .horizontal-wizard-content 
                                  h6 Connect Bank Account
                            a.tab-link(data-tabfilter="3") 
                              .horizontal-wizard
                                .stroke-icon-wizard
                                  i.fa-solid.fa-user-group
                                .horizontal-wizard-content 
                                  h6 Inquiries
                            a.tab-link(data-tabfilter="4") 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    i.fa-solid.fa-square-check
                                  .horizontal-wizard-content 
                                    h6 Completed 
                        div(class="col-span-12") 
                          .tab-content.dark-field
                            .tab-pan.fade.show.active(data-tabcontent="1")
                              form.grid.grid-cols-12.gap-3.needs-validation(novalidate='')
                                div(class="col-span-4 xl:col-span-6 sm:col-span-12")
                                  label.form-label(for='customFirstname') First Name
                                  input#customFirstname.form-control(type='text' placeholder="Enter first name" required='')
                                  .valid-feedback
                                    | Looks good!
                                div(class="col-span-4 xl:col-span-6 sm:col-span-12")
                                  label.form-label(for='customLastname') Last Name
                                  input#customLastname.form-control(type='text' placeholder='Enter last name' required='')
                                  .valid-feedback
                                    | Looks good!
                                div(class="col-span-4 xl:col-span-12")
                                  label.form-label(for='customEmail') Email
                                  input#customEmail.form-control(type='email' required='' placeholder='pixelstrap@example.com')
                                  .valid-feedback
                                    | Looks good!
                                div(class="col-span-5 xl:col-span-4 sm:col-span-12")
                                  label.form-label(for='customState-wizard') State
                                  select#customState-wizard.form-select(required='')
                                    option(selected='' disabled='' value='') Choose...
                                    option USA 
                                    option U.K 
                                    option U.S
                                  .invalid-feedback
                                    | Please select a valid state.
                                div(class="col-span-3 xl:col-span-4 sm:col-span-12")
                                  label.form-label(for='custom-zipcode') Postal Code
                                  input#custom-zipcode.form-control(type='text' required='')
                                  .invalid-feedback
                                    | Please provide a valid postal code.
                                div(class="col-span-4 sm:col-span-12")
                                  label.form-label(for='customContact1') Contact Number
                                  input#customContact1.form-control(type='number' placeholder='Enter number' required='')
                                  .valid-feedback
                                    | Looks good!
                                div(class="col-span-12")
                                  .form-check.flex.gap-2
                                    input#invalid-check-wizard.form-check-input.checkbox-primary(type='checkbox' value='' required='')
                                    label.form-check-label.mb-0.block(for='invalid-check-wizard')
                                      | Agree to terms and conditions
                                    .invalid-feedback
                                      | You must agree before submitting.
                                div(class="col-span-12").common-flex.justify-end
                                  button.btn.btn-primary.text-white.text-white Continue
                            .tab-pan.fade(data-tabcontent="2")
                              form.grid.grid-cols-12.gap-3.needs-validation(novalidate='')
                                div(class="col-span-6 sm:col-span-12").bank-search
                                  label.form-label(for='aadharnumber-wizard') Aadhaar Number
                                  input#aadharnumber-wizard.form-control(type='Search' placeholder="xxxx xxxx xxxx xxxx" required='')
                                  .valid-feedback
                                    | Looks good!
                                div(class="col-span-6 sm:col-span-12").bank-search
                                  label.form-label(for='pan-wizard') PAN
                                  input#pan-wizard.form-control(type='Search' placeholder="xxxxxxxxxx" required='')
                                  .valid-feedback
                                    | Looks good!
                                div(class="col-span-12") 
                                  h6 Choose from these popular banks
                                  .bank-selection
                                    .form-check.radio.radio-primary.ps-0
                                      ul.radio-wrapper(class="[@media(max-width:401px)]:justify-center")
                                        li(class="[@media(max-width:1335px)]:!max-w-[113px] [@media(max-width:1232px)]:max-w-[105px] [@media(max-width:1335px)]:p-[10px]") 
                                          input#radio-wizard-1.form-check-input(type='radio', name='radio2', value='option2')
                                          label.form-check-label(for='radio-wizard-1')
                                            img(src="../assets/images/forms/hdfc.png", alt="HDFC")
                                            span ABC BANK
                                        li(class="[@media(max-width:1335px)]:!max-w-[113px] [@media(max-width:1232px)]:max-w-[105px] [@media(max-width:1335px)]:p-[10px]") 
                                          input#radio-wizard-2.form-check-input(type='radio', name='radio2', value='option2' checked='')
                                          label.form-check-label(for='radio-wizard-2')
                                            img(src="../assets/images/forms/Bank-of-Baroda.png", alt="Bank-of-Baroda")
                                            span XYZ BANK
                                        li(class="[@media(max-width:1335px)]:!max-w-[113px] [@media(max-width:1232px)]:max-w-[105px] [@media(max-width:1335px)]:p-[10px]") 
                                          input#radio-wizard-3.form-check-input(type='radio', name='radio2', value='option2')
                                          label.form-check-label(for='radio-wizard-3')
                                            img(src="../assets/images/forms/idbi.png", alt="IDBI")
                                            span PQR BANK
                                        li(class="[@media(max-width:1335px)]:!max-w-[113px] [@media(max-width:1232px)]:max-w-[105px] [@media(max-width:1335px)]:p-[10px]") 
                                          input#radio-wizard-4.form-check-input(type='radio', name='radio2', value='option2')
                                          label.form-check-label(for='radio-wizard-4')
                                            img(src="../assets/images/forms/rbl.png", alt="RBL")
                                            span DEF BANK
                                        li(class="[@media(max-width:1335px)]:!max-w-[113px] [@media(max-width:1232px)]:max-w-[105px] [@media(max-width:1335px)]:p-[10px]") 
                                          input#radio-wizard-5.form-check-input(type='radio', name='radio2', value='option2')
                                          label.form-check-label(for='radio-wizard-5')
                                            img(src="../assets/images/forms/us-bank.png", alt="US")
                                            span MNO BANK
                                        li(class="[@media(max-width:1335px)]:!max-w-[113px] [@media(max-width:1232px)]:max-w-[105px] [@media(max-width:1335px)]:p-[10px]") 
                                          input#radio-wizard-6.form-check-input(type='radio', name='radio2', value='option2')
                                          label.form-check-label(for='radio-wizard-6')
                                            img(src="../assets/images/forms/axis.png", alt="Axis")
                                            span WXY BANK
                                        li(class="[@media(max-width:1335px)]:!max-w-[113px] [@media(max-width:1232px)]:max-w-[105px] [@media(max-width:1335px)]:p-[10px]") 
                                          input#radio-wizard-7.form-check-input(type='radio', name='radio2', value='option2')
                                          label.form-check-label(for='radio-wizard-7')
                                            img(src="../assets/images/forms/SCB.png", alt="SCB")
                                            span STD BANK
                                div(class="col-span-12").common-flex.justify-end 
                                  button.btn.btn-primary.text-white Previous
                                  button.btn.btn-primary.text-white Continue
                            .tab-pan.fade(data-tabcontent="3")
                              form.grid.grid-cols-12.gap-3.needs-validation(novalidate='')
                                div(class="col-span-12").inquiries-form
                                  .grid.grid-cols-12 
                                    div(class="col-span-6 md:coil-span-12")
                                      p.font-medium.mb-3 Select the option how you want to receive important notifications.
                                      .choose-option
                                        .form-check.radio.radio-primary
                                          input#notification1.form-check-input.me-2(type='radio' name='inlineRadioOptions' value='option1')
                                          label.form-check-label(for='notification1') Featured Items
                                        .form-check.radio.radio-primary
                                          input#notification2.form-check-input.me-2(type='radio' name='inlineRadioOptions' value='option2')
                                          label.form-check-label(for='notification2') Newsletters
                                        .form-check.radio.radio-primary
                                          input#notification3.form-check-input.me-2(type='radio' name='inlineRadioOptions' value='option3')
                                          label.form-check-label(for='notification3') Notifications
                                        .form-check.radio.radio-primary
                                          input#notification4.form-check-input.me-2(type='radio' name='inlineRadioOptions' value='option3')
                                          label.form-check-label(for='notification4') Blogs
                                    div(class="col-span-6 md:coil-span-12")
                                      .grid.grid-cols-12.gap-3
                                        div(class="col-span-12")
                                          label.form-label Email
                                          input.form-control(type='text', placeholder='org@support.com', required='required')
                                        div(class="col-span-12")
                                          label.form-label(for='customContact2') Contact Number
                                          input#customContact2.form-control(type='number' placeholder='Enter number' required='')
                                          .valid-feedback
                                            | Looks good!
                                div(class="col-span-12") 
                                  label.form-label.font-medium(for='FormControlTextarea2') If no, could you please describe?
                                  textarea#FormControlTextarea2.form-control(rows='3')
                                div(class="col-span-12").common-flex.justify-end 
                                  button.btn.btn-primary.text-white Previous
                                  button.btn.btn-primary.text-white Continue 
                            .tab-pan.fade(data-tabcontent="4")
                              .form-completed
                                img(src="../assets/images/gif/dashboard-8/successful.gif", alt="successful")
                                h6 Successfully Completed
              div(class="col-span-12") 
               .card
                  .card-header
                    h5 Business Vertical Wizard
                  .card-body
                    .horizontal-wizard-wrapper.vertical-options.vertical-variations.tabs
                      .grid.grid-cols-12.gap-3
                        div(class="col-span-3 xl:col-span-12").main-horizontal-header
                          .tab-links.horizontal-options
                              a.tab-link.active(data-tabfilter="1") 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    span 1
                                  .horizontal-wizard-content 
                                    h6 Choose Account
                              a.tab-link(data-tabfilter="2") 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    span 2
                                  .horizontal-wizard-content 
                                    h6 Business Settings
                              a.tab-link(data-tabfilter="3") 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    span 3
                                  .horizontal-wizard-content 
                                    h6 Contact Details
                              a.tab-link(data-tabfilter="4") 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    span 4
                                  .horizontal-wizard-content 
                                    h6 Pay Details
                              a.tab-link(data-tabfilter="5") 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    span 5
                                  .horizontal-wizard-content 
                                    h6 Completed
                        div(class="col-span-9 xl:col-span-12")
                          .tab-content.dark-field
                            .tab-pan.fade.show.active(data-tabcontent="1")
                              form.grid.grid.col-sp-12.gap-3.needs-validation(novalidate='')
                                div(class="col-span-12")
                                  h5 Select The Type of Account
                                  p It has long been known that distracting information on a page will lose a reader's attention.
                                div(class="col-span-12") 
                                  .form-check.radio.radio-primary.ps-0.select-account
                                    ul.radio-wrapper
                                      li 
                                        input#radioOptionWizard1.form-check-input(type='radio', name='radio2', value='option2')
                                        label.form-check-label.mb-0(for='radioOptionWizard1')
                                          i.fa-solid.fa-building-columns
                                          span.flex.flex-col
                                            span Business 
                                            span Search your business information please check it
                                      li 
                                        input#radioOptionWizard2.form-check-input(type='radio', name='radio2', value='option2' checked='')
                                        label.form-check-label.mb-0(for='radioOptionWizard2')
                                          i.fa-solid.fa-user
                                          span.flex.flex-col
                                            span Personal 
                                            span Search your personal information please check it
                                div(class="col-span-12").common-flex.justify-end
                                  button.btn.btn-primary.text-white Continue
                            .tab-pan.fade(data-tabcontent="2")
                              form.grid.grid-cols-12.gap-3.needs-validation(novalidate='')
                                div(class="col-span-6 md:col-span-12")
                                  label.form-label(for='AccountName') Account Name
                                  input#AccountName.form-control(type='text' required='')
                                  .valid-feedback
                                    | Looks good!
                                div(class="col-span-6 md:col-span-12")
                                    label.form-label Email
                                    input.form-control(type='text', placeholder='org@superrito.com', required='required')
                                div(class="col-span-12") 
                                  label.form-label(for='example-description') Select a project and write a description for it
                                  textarea#example-description.form-control(rows='3')
                                div(class="col-span-12") 
                                  section.main-upgrade
                                    div
                                      i.fa-solid.fa-rocket
                                      h5.mb-2.mt-sm-3.mt-2
                                        | Select team size with 
                                        span.txt-primary projects
                                      p.text-muted.mb-2 Agile teams are cross-functional and made up of 5-11 on a regular basis team member.
                                    .variation-box(class="[@media(min-width:768px)_and_(max-width:1200px)]:grid [@media(min-width:768px)_and_(max-width:1200px)]:grid-cols-[auto_auto] [@media(min-width:768px)_and_(max-width:1200px)]:gap-[18px]")
                                      .selection-box(class="[@media(min-width:1200px)_and_(max-width:1920px)]:min-w-[calc(110px_+_(125_-_110))_*_((100vw_-_1200px)_/_(1920_-_1200)))]")
                                        input(type='checkbox')
                                        div.custom--mega-checkbox
                                          ul.flex.flex-col
                                            li Tivo 
                                            li.txt-primary 2-3 Members 
                                      .selection-box(class="[@media(min-width:1200px)_and_(max-width:1920px)]:min-w-[calc(110px_+_(125_-_110))_*_((100vw_-_1200px)_/_(1920_-_1200)))]")
                                        input(type='checkbox')
                                        div.custom--mega-checkbox
                                          ul.flex.flex-col
                                            li Mofi
                                            li.txt-primary 4-5 Members 
                                      .selection-box(class="[@media(min-width:1200px)_and_(max-width:1920px)]:min-w-[calc(110px_+_(125_-_110))_*_((100vw_-_1200px)_/_(1920_-_1200)))]")
                                        input(type='checkbox')
                                        div.custom--mega-checkbox
                                          ul.flex.flex-col
                                            li Multikart
                                            li.txt-primary 2 Members 
                                      .selection-box(class="[@media(min-width:1200px)_and_(max-width:1920px)]:min-w-[calc(110px_+_(125_-_110))_*_((100vw_-_1200px)_/_(1920_-_1200)))]")
                                        input(type='checkbox' checked='')
                                        div.custom--mega-checkbox
                                          ul.flex.flex-col
                                            li Roxo
                                            li.txt-primary 1 Members 
                                div(class="col-span-12").common-flex.justify-end 
                                  button.btn.btn-primary.text-white Previous
                                  button.btn.btn-primary.text-white Continue
                            .tab-pan.fade(data-tabcontent="3")
                              form.grid.grid-cols-12.gap-3.needs-validation(novalidate='')
                                div(class="col-span-12")
                                  h6 Contact Details
                                  p Please visit the documentation page if you require further information.
                                div(class="col-span-6 sm:col-span-12")
                                  label.form-label(for='validationCustom-select') Organization Name
                                  input#validationCustom-select.form-control(type='text' placeholder='Gekko & Co.' required='')
                                  .valid-feedback
                                    | Looks good!
                                div(class="col-span-6 sm:col-span-12")
                                    label.form-label Email
                                    input.form-control(type='text', placeholder='org@support.com', required='required')
                                div(class="col-span-12")
                                  label.form-label(for='validationCustom-select') Join Organization Type
                                  select.form-select.font-normal.f-14.text-gray(aria-label='Default select example') 
                                    option(selected='' disabled) Join organization type
                                    option(value='1') Technology
                                    option(value='2') Culture
                                    option(value='3') NGO 
                                    option(value='3') Environment
                                    option(value='3') Life cycle
                                div(class="col-span-12") 
                                  label.form-label(for='organizationDescription') Organization Description
                                  textarea#organizationDescription.form-control(placeholder='Share your problems and another issues' required='')
                                  .invalid-feedback
                                    | Please enter a message in the box.
                                div(class="col-span-12").common-flex.justify-end 
                                  button.btn.btn-primary.text-white Previous
                                  button.btn.btn-primary.text-white Continue 
                            .tab-pan.fade(data-tabcontent="4")
                              form.grid.grid-cols-12.gap-3.needs-validation(novalidate='')
                                div(class="col-span-6 md:col-span-12")
                                  label.form-label(for='cardHolder') Card Holder
                                  input#cardHolder.form-control(type='text' required='')
                                  .invalid-feedback
                                    | Please enter your valid name
                                  .valid-feedback 
                                    | Looks's Good!
                                div(class="col-span-6 md:col-span-12")
                                  label.form-label(for='cardNumber') Card Number
                                  input#cardNumber.form-control(type='text' required='' placeholder='xxxx xxxx xxxx xxxx')
                                  .invalid-feedback
                                    | Please enter your valid number
                                  .valid-feedback 
                                    | Looks's Good!
                                div(class="col-span-12") 
                                  .grid.grid-cols-12.gap-3
                                    div(class="col-span-6 md:col-span-12")
                                      label.form-label(for='expiration') Expiration(MM/YY)
                                      .grid.grid-cols-12.gap-3
                                        div(class="col-span-6 md:col-span-12")
                                          input#expiration.form-control(type='number' required='' placeholder='xx/xx')
                                          .invalid-feedback
                                            | Please enter your valid number
                                          .valid-feedback 
                                            | Looks's Good!
                                        div(class="col-span-6 md:col-span-12")
                                          select.form-select.font-normal.f-14.text-gray(aria-label='Default select example') 
                                            option(selected='' disabled) Year
                                            option(value='1') 2025
                                            option(value='2') 2025
                                            option(value='3') 2025
                                            option(value='3') 2026
                                            option(value='3') 2027
                                            option(value='3') 2028
                                            option(value='3') 2029
                                            option(value='3') 2030
                                            option(value='3') 2031
                                            option(value='3') 2032
                                            option(value='3') 2033
                                            option(value='3') 2034
                                            option(value='3') 2035
                                    div(class="col-span-6 md:col-span-12")
                                      label.form-label(for='cvvNumber-1') CVV Number
                                      input#cvvNumber-1.form-control(type='text' required='')
                                      .invalid-feedback
                                        | Please enter your valid number
                                      .valid-feedback 
                                        | Looks's Good!
                                div(class="col-span-12")
                                  .form-check.mb-0.flex.gap-2
                                    input#invalidCheckboxWizard.form-check-input.checkbox-primary(type='checkbox' value='' required='')
                                    label.form-check-label.mb-0(for='invalidCheckboxWizard')
                                      | Agree to terms and conditions
                                    .invalid-feedback
                                      | You must agree before submitting.
                                div(class="col-span-12").common-flex.justify-end 
                                  button.btn.btn-primary.text-white Previous
                                  button.btn.btn-primary.text-white Continue 
                            .tab-pan.fade(data-tabcontent="5")
                              .form-completed
                                img(src="../assets/images/gif/dashboard-8/successful.gif", alt="successful")
                                h6 Successfully Completed       
              div(class="col-span-12") 
               .card
                  .card-header
                    h5 Custom Vertical Wizard
                  .card-body
                    .horizontal-wizard-wrapper.vertical-options.tabs
                      .grid.grid-cols-12.gap-3
                        div(class="col-span-3 xl:col-span-12").main-horizontal-header
                          .tab-links.horizontal-options
                              a.tab-link.active(data-tabfilter="1") 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    i.fa-solid.fa-user
                                  .horizontal-wizard-content 
                                    h6 Personal Info
                              a.tab-link(data-tabfilter="2") 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    i.fa-solid.fa-link
                                  .horizontal-wizard-content 
                                    h6 Connect Bank Account
                              a.tab-link(data-tabfilter="3") 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    i.fa-solid.fa-user-group
                                  .horizontal-wizard-content 
                                    h6 Inquiries
                              a.tab-link(data-tabfilter="4") 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    i.fa-solid.fa-square-check
                                  .horizontal-wizard-content 
                                    h6 Completed 
                        div(class="col-span-9 xl:col-span-12")
                          .tab-content.dark-field
                            .tab-pan.fade.show.active(data-tabcontent="1")
                              form.grid.grid-cols-12.gap-3.needs-validation(novalidate='')
                                div(class="col-span-4 xxl:col-span-6 sm:col-span-12")
                                  label.form-label(for='validation-firstname-wizard') First Name
                                  input#validation-firstname-wizard.form-control(type='text' placeholder="Enter first name" required='')
                                  .valid-feedback
                                    | Looks good!
                                div(class="col-span-4 xxl:col-span-6 sm:col-span-12")
                                  label.form-label(for='validation-lastname-wizard') Last Name
                                  input#validation-lastname-wizard.form-control(type='text' placeholder='Enter last name' required='')
                                  .valid-feedback
                                    | Looks good!
                                div(class="col-span-4 xxl:col-span-6 md:col-span-12")
                                  label.form-label(for='validation-email-wizard') Email
                                  input#validation-email-wizard.form-control(type='email' required='' placeholder='pixelstrap@example.com')
                                  .valid-feedback
                                    | Looks good!
                                div(class="col-span-5 xxl:col-span-6 md:col-span-12")
                                  label.form-label(for='validation-states') State
                                  select#validation-states.form-select(required='')
                                    option(selected='' disabled='' value='') Choose...
                                    option USA 
                                    option U.K 
                                    option U.S
                                  .invalid-feedback
                                    | Please select a valid state.
                                div(class="col-span-3 xxl:col-span-6 md:col-span-12")
                                  label.form-label(for='wizard-zipcode') Postal Code
                                  input#wizard-zipcode.form-control(type='text' required='')
                                  .invalid-feedback
                                    | Please provide a valid postal code.
                                div(class="col-span-4 xxl:col-span-6 md:col-span-12")
                                  label.form-label(for='contact-wizard') Contact Number
                                  input#contact-wizard.form-control(type='number' placeholder='Enter number' required='')
                                  .valid-feedback
                                    | Looks good!
                                div(class="col-span-12")
                                  .form-check
                                    input#validation-check-wizard.form-check-input.checkbox-primary(type='checkbox' value='' required='')
                                    label.form-check-label.mb-0.block(for='validation-check-wizard')
                                      | Agree to terms and conditions
                                    .invalid-feedback
                                      | You must agree before submitting.
                                div(class="col-span-12").common-flex.justify-end
                                  button.btn.btn-primary.text-white Continue
                            .tab-pan.fade(data-tabcontent="2")
                              form.grid.grid-cols-12.gap-3.needs-validation(novalidate='')
                                div(class="col-span-6 md:col-span-12").bank-search
                                  label.form-label(for='aadhar-number-wizard1') Aadhaar Number
                                  input#aadhar-number-wizard1.form-control(type='Search' placeholder="xxxx xxxx xxxx xxxx" required='')
                                  .valid-feedback
                                    | Looks good!
                                div(class="col-span-6 md:col-span-12").bank-search
                                  label.form-label(for='pan-wizard-1') PAN
                                  input#pan-wizard-1.form-control(type='Search' placeholder="xxxxxxxxxx" required='')
                                  .valid-feedback
                                    | Looks good!
                                div(class="col-span-12") 
                                  h6 Choose from these popular banks
                                  .bank-selection
                                    .form-check.radio.radio-primary.ps-0
                                      ul.radio-wrapper(class="[@media(max-width:401px)]:justify-center")
                                        li(class="[@media(max-width:1335px)]:!max-w-[113px] [@media(max-width:1232px)]:max-w-[105px] [@media(max-width:1335px)]:p-[10px]")  
                                          input#abc-bank.form-check-input(type='radio', name='radio2', value='option2')
                                          label.form-check-label(for='abc-bank')
                                            img(src="../assets/images/forms/hdfc.png", alt="HDFC")
                                            span ABC BANK
                                        li(class="[@media(max-width:1335px)]:!max-w-[113px] [@media(max-width:1232px)]:max-w-[105px] [@media(max-width:1335px)]:p-[10px]")  
                                          input#xyz-bank.form-check-input(type='radio', name='radio2', value='option2' checked='')
                                          label.form-check-label(for='xyz-bank')
                                            img(src="../assets/images/forms/Bank-of-Baroda.png", alt="Bank-of-Baroda")
                                            span XYZ BANK
                                        li(class="[@media(max-width:1335px)]:!max-w-[113px] [@media(max-width:1232px)]:max-w-[105px] [@media(max-width:1335px)]:p-[10px]")  
                                          input#pqr-bank.form-check-input(type='radio', name='radio2', value='option2')
                                          label.form-check-label(for='pqr-bank')
                                            img(src="../assets/images/forms/idbi.png", alt="IDBI")
                                            span PQR BANK
                                        li(class="[@media(max-width:1335px)]:!max-w-[113px] [@media(max-width:1232px)]:max-w-[105px] [@media(max-width:1335px)]:p-[10px]")  
                                          input#def-bank.form-check-input(type='radio', name='radio2', value='option2')
                                          label.form-check-label(for='def-bank')
                                            img(src="../assets/images/forms/rbl.png", alt="RBL")
                                            span DEF BANK
                                        li(class="[@media(max-width:1335px)]:!max-w-[113px] [@media(max-width:1232px)]:max-w-[105px] [@media(max-width:1335px)]:p-[10px]")  
                                          input#mno-bank.form-check-input(type='radio', name='radio2', value='option2')
                                          label.form-check-label(for='mno-bank')
                                            img(src="../assets/images/forms/us-bank.png", alt="US")
                                            span MNO BANK
                                        li(class="[@media(max-width:1335px)]:!max-w-[113px] [@media(max-width:1232px)]:max-w-[105px] [@media(max-width:1335px)]:p-[10px]")  
                                          input#wxy-bank.form-check-input(type='radio', name='radio2', value='option2')
                                          label.form-check-label(for='wxy-bank')
                                            img(src="../assets/images/forms/axis.png", alt="Axis")
                                            span WXY BANK
                                        li(class="[@media(max-width:1335px)]:!max-w-[113px] [@media(max-width:1232px)]:max-w-[105px] [@media(max-width:1335px)]:p-[10px]")  
                                          input#std-bank.form-check-input(type='radio', name='radio2', value='option2')
                                          label.form-check-label(for='std-bank')
                                            img(src="../assets/images/forms/SCB.png", alt="SCB")
                                            span STD BANK
                                div(class="col-span-12").common-flex.justify-end 
                                  button.btn.btn-primary.text-white Previous
                                  button.btn.btn-primary.text-white Continue
                            .tab-pan.fade(data-tabcontent="3")
                              form.grid.grid-cols-12.gap-3.needs-validation(novalidate='')
                                div(class="col-span-12").inquiries-form
                                  .grid.grid-cols-12 
                                    div(class="col-span-6 md:col-span-12")
                                      p.font-medium.mb-3 Select the option how you want to receive important notifications.
                                      .choose-option
                                        .form-check.radio.radio-primary
                                          input#radioSelect1.form-check-input.me-2(type='radio' name='inlineRadioOptions' value='option1')
                                          label.form-check-label(for='radioSelect1') Featured Items
                                        .form-check.radio.radio-primary
                                          input#radioSelect2.form-check-input.me-2(type='radio' name='inlineRadioOptions' value='option2')
                                          label.form-check-label(for='radioSelect2') Newsletters
                                        .form-check.radio.radio-primary
                                          input#radioSelect3.form-check-input.me-2(type='radio' name='inlineRadioOptions' value='option3')
                                          label.form-check-label(for='radioSelect3') Notifications
                                        .form-check.radio.radio-primary
                                          input#radioSelect4.form-check-input.me-2(type='radio' name='inlineRadioOptions' value='option3')
                                          label.form-check-label(for='radioSelect4') Blogs
                                    div(class="col-span-6 md:col-span-12") 
                                      .grid.grid-cols-12.gap-3 
                                        div(class="col-span-12")
                                          label.form-label Email
                                          input.form-control(type='text', placeholder='org@support.com', required='required')
                                        div(class="col-span-12")
                                          label.form-label(for='customContact') Contact Number
                                          input#customContact.form-control(type='number' placeholder='Enter number' required='')
                                          .valid-feedback
                                            | Looks good!
                                div(class="col-span-12") 
                                  label.form-label.font-medium(for='formControlTextareaWizard') If no, could you please describe?
                                  textarea#formControlTextareaWizard.form-control(rows='3')
                                div(class="col-span-12").common-flex.justify-end 
                                  button.btn.btn-primary.text-white Previous
                                  button.btn.btn-primary.text-white Continue 
                            .tab-pan.fade(data-tabcontent="4")
                              .form-completed
                                img(src="../assets/images/gif/dashboard-8/successful.gif", alt="successful")
                                h6 Successfully Completed          
              div(class="col-span-12") 
               .card
                  .card-header
                    h5 Business Horizontal Wizard
                  .card-body
                    .horizontal-wizard-wrapper.vertical-variations.tabs
                      .grid.grid-cols-12.gap-3
                        div(class="col-span-12").main-horizontal-header 
                          .tab-links.horizontal-options
                            a.tab-link.active(data-tabfilter="1") 
                              .horizontal-wizard
                                .stroke-icon-wizard
                                  span 1
                                .horizontal-wizard-content 
                                  h6 Choose Account
                            a.tab-link(data-tabfilter="2") 
                              .horizontal-wizard
                                .stroke-icon-wizard
                                  span 2
                                .horizontal-wizard-content 
                                  h6 Business Settings
                            a.tab-link(data-tabfilter="3") 
                              .horizontal-wizard
                                .stroke-icon-wizard
                                  span 3
                                .horizontal-wizard-content 
                                  h6 Contact Details
                            a.tab-link(data-tabfilter="4") 
                              .horizontal-wizard
                                .stroke-icon-wizard
                                  span 4
                                .horizontal-wizard-content 
                                  h6 Pay Details
                            a.tab-link(data-tabfilter="5") 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    span 5
                                  .horizontal-wizard-content 
                                    h6 Completed
                        div(class="col-span-12")
                          .tab-content.dark-field
                            .tab-pan.fade.show.active(data-tabcontent="1")
                              form.grid.grid-cols-12.gap-3.needs-validation(novalidate='')
                                div(class="col-span-12")
                                  h5 Select The Type of Account
                                  p It has long been known that distracting information on a page will lose a reader's attention.
                                div(class="col-span-12") 
                                  .form-check.radio.radio-primary.ps-0.select-account
                                    ul.radio-wrapper
                                      li 
                                        input#radio-icon.form-check-input(type='radio', name='radio2', value='option2')
                                        label.form-check-label.mb-0(for='radio-icon')
                                          i.fa-solid.fa-building-columns
                                          span.flex.flex-col
                                            span Business 
                                            span Search your business information please check it
                                      li 
                                        input#radio-icon4.form-check-input(type='radio', name='radio2', value='option2' checked='')
                                        label.form-check-label.mb-0(for='radio-icon4')
                                          i.fa-solid.fa-user
                                          span.flex.flex-col
                                            span Personal 
                                            span Search your personal information please check it         
                                div(class="col-span-12").common-flex.justify-end
                                  button.btn.btn-primary.text-white Continue
                            .tab-pan.fade(data-tabcontent="2")
                              form.grid.grid-cols-12.gap-3.needs-validation(novalidate='')
                                div(class="col-span-6 md:col-span-12")
                                  label.form-label(for='validationAccountName') Account Name
                                  input#validationAccountName.form-control(type='text' required='')
                                  .valid-feedback
                                    | Looks good!
                                div(class="col-span-6 md:col-span-12")
                                    label.form-label Email
                                    input.form-control(type='text', placeholder='org@superrito.com', required='required')
                                div(class="col-span-12") 
                                  label.form-label(for='FormControlTextarea-a') Select a project and write a description for it
                                  textarea#FormControlTextarea-a.form-control(rows='3')
                                div(class="col-span-12") 
                                  section.main-upgrade
                                    div
                                      i.fa-solid.fa-rocket
                                      h6.mb-2.mt-sm-3.mt-2
                                        | Select team size with 
                                        span.txt-primary projects
                                      p.text-muted.mb-2 Agile teams are cross-functional and made up of 5-11 on a regular basis team member.
                                    .variation-box(class="[@media(min-width:768px)_and_(max-width:1200px)]:grid [@media(min-width:768px)_and_(max-width:1200px)]:grid-cols-[auto_auto] [@media(min-width:768px)_and_(max-width:1200px)]:gap-[18px]")
                                      .selection-box(class="[@media(min-width:1200px)_and_(max-width:1920px)]:min-w-[calc(110px_+_(125_-_110))_*_((100vw_-_1200px)_/_(1920_-_1200)))]")
                                        input(type='checkbox')
                                        div.custom--mega-checkbox
                                          ul.flex.flex-col
                                            li Tivo 
                                            li.txt-primary 2-3 Members 
                                      .selection-box(class="[@media(min-width:1200px)_and_(max-width:1920px)]:min-w-[calc(110px_+_(125_-_110))_*_((100vw_-_1200px)_/_(1920_-_1200)))]")
                                        input(type='checkbox')
                                        div.custom--mega-checkbox
                                          ul.flex.flex-col
                                            li Mofi
                                            li.txt-primary 4-5 Members 
                                      .selection-box(class="[@media(min-width:1200px)_and_(max-width:1920px)]:min-w-[calc(110px_+_(125_-_110))_*_((100vw_-_1200px)_/_(1920_-_1200)))]")
                                        input(type='checkbox')
                                        div.custom--mega-checkbox
                                          ul.flex.flex-col
                                            li Multikart
                                            li.txt-primary 2 Members 
                                      .selection-box(class="[@media(min-width:1200px)_and_(max-width:1920px)]:min-w-[calc(110px_+_(125_-_110))_*_((100vw_-_1200px)_/_(1920_-_1200)))]")
                                        input(type='checkbox' checked='')
                                        div.custom--mega-checkbox
                                          ul.flex.flex-col
                                            li Roxo
                                            li.txt-primary 1 Members 
                                div(class="col-span-12").common-flex.justify-end 
                                  button.btn.btn-primary.text-white Previous
                                  button.btn.btn-primary.text-white Continue
                            .tab-pan.fade(data-tabcontent="3")
                              form.grid.grid-cols-12.gap-3.needs-validation(novalidate='')
                                div(class="col-span-12")
                                  h6 Contact Details
                                  p Please visit the documentation page if you require further information.
                                div(class="col-span-6 sm:col-span-12")
                                  label.form-label(for='OrganizationName') Organization Name
                                  input#OrganizationName.form-control(type='text' placeholder='Gekko & Co.' required='')
                                  .valid-feedback
                                    | Looks good!
                                div(class="col-span-6 sm:col-span-12")
                                    label.form-label Email
                                    input.form-control(type='text', placeholder='org@support.com', required='required')
                                div(class="col-span-12")
                                  label.form-label(for='validationCustom-select') Join organization type
                                  select.form-select.font-normal.f-14.text-gray(aria-label='Default select example') 
                                    option(selected='' disabled) Join Organization Type
                                    option(value='1') Technology
                                    option(value='2') Culture
                                    option(value='3') NGO 
                                    option(value='3') Environment
                                    option(value='3') Life cycle
                                div(class="col-span-12") 
                                  label.form-label(for='validationTextarea') Organization Description
                                  textarea#validationTextarea.form-control(placeholder='Share your problems and another issues' required='')
                                  .invalid-feedback
                                    | Please enter a message in the box.
                                div(class="col-span-12").common-flex.justify-end 
                                  button.btn.btn-primary.text-white Previous
                                  button.btn.btn-primary.text-white Continue 
                            .tab-pan.fade(data-tabcontent="4")
                              form.grid.grid-cols-12.gap-3.needs-validation(novalidate='')
                                div(class="col-span-6 sm:col-span-12")
                                  label.form-label(for='cardHolder1') Card Holder
                                  input#cardHolder1.form-control(type='text' required='')
                                  .invalid-feedback
                                    | Please enter your valid name
                                  .valid-feedback 
                                    | Looks's Good!
                                div(class="col-span-6 sm:col-span-12")
                                  label.form-label(for='cardNumber12') Card Number
                                  input#cardNumber12.form-control(type='text' required='' placeholder='xxxx xxxx xxxx xxxx')
                                  .invalid-feedback
                                    | Please enter your valid number
                                  .valid-feedback 
                                    | Looks's Good!
                                div(class="col-span-12") 
                                  .grid.grid-cols-12.gap-3
                                    div(class="col-span-6 md:col-span-12")
                                      label.form-label(for='validationCustom-d') Expiration(MM/YY)
                                      .grid.grid-cols-12.gap-3
                                        div(class="col-span-6 md:col-span-6 md:col-span-12")
                                          input#validationCustom-d.form-control(type='number' required='' placeholder='xx/xx')
                                          .invalid-feedback
                                            | Please enter your valid number
                                          .valid-feedback 
                                            | Looks's Good!
                                        div(class="col-span-6 md:col-span-6 md:col-span-12")
                                          select.form-select.font-normal.f-14.text-gray(aria-label='Default select example') 
                                            option(selected='' disabled) Year
                                            option(value='1') 2025
                                            option(value='2') 2025
                                            option(value='3') 2025
                                            option(value='3') 2026
                                            option(value='3') 2027
                                            option(value='3') 2028
                                            option(value='3') 2029
                                            option(value='3') 2030
                                            option(value='3') 2031
                                            option(value='3') 2032
                                            option(value='3') 2033
                                            option(value='3') 2034
                                            option(value='3') 2035
                                    div(class="col-span-6 md:col-span-12")
                                      label.form-label(for='cvvNumber-2') CVV Number
                                      input#cvvNumber-2.form-control(type='text' required='')
                                      .invalid-feedback
                                        | Please enter your valid number
                                      .valid-feedback 
                                        | Looks's Good!
                                div(class="col-span-12")
                                  .form-check.mb-0
                                    input#invalidCheck67.form-check-input.checkbox-primary(type='checkbox' value='' required='')
                                    label.form-check-label.mb-0(for='invalidCheck67')
                                      | Agree to terms and conditions
                                    .invalid-feedback
                                      | You must agree before submitting.
                                div(class="col-span-12").common-flex.justify-end 
                                  button.btn.btn-primary.text-white Previous
                                  button.btn.btn-primary.text-white Continue 
                            .tab-pan.fade(data-tabcontent="5")
                              .form-completed
                                img(src="../assets/images/gif/dashboard-8/successful.gif", alt="successful")
                                h6 Successfully Completed 
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
