- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = 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-fluid
            .page-title
              .row
                .col-6
                  h4
                    | Step Form Wizard
                .col-6
                  ol.breadcrumb
                    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  Step Form Wizard
          // Container-fluid starts
          .container-fluid
            .row
              .col-sm-12 
               .card
                  .card-header
                    h4 Custom horizontal wizard
                  .card-body
                    .horizontal-wizard-wrapper
                      .row.g-3
                        .col-12.main-horizontal-header
                          #horizontal-wizard-tab.nav.nav-pills.horizontal-options(role='tablist' aria-orientation='vertical')
                              a#wizard-info-tab.nav-link.active(data-bs-toggle='pill' href='#wizard-info' role='tab' aria-controls='wizard-info' aria-selected='true') 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    i.fa.fa-user
                                  .horizontal-wizard-content 
                                    h6 Personal info
                              a#bank-wizard-tab.nav-link(data-bs-toggle='pill' href='#bank-wizard' role='tab' aria-controls='bank-wizard' aria-selected='false') 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    i.fa.fa-chain-broken
                                  .horizontal-wizard-content 
                                    h6 Connect bank account
                              a#inquiry-wizard-tab.nav-link(data-bs-toggle='pill' href='#inquiry-wizard' role='tab' aria-controls='inquiry-wizard' aria-selected='false') 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    i.fa.fa-group
                                  .horizontal-wizard-content 
                                    h6 Inquiries
                              a#successful-wizard-tab.nav-link(data-bs-toggle='pill' href='#successful-wizard' role='tab' aria-controls='successful-wizard' aria-selected='false') 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    i.fa.fa-group
                                  .horizontal-wizard-content 
                                    h6 Completed 
                        .col-12 
                          #horizontal-wizard-tabContent.tab-content.dark-field
                            #wizard-info.tab-pane.fade.show.active(role='tabpanel' aria-labelledby='wizard-info-tab')
                              form.row.g-3.needs-validation(novalidate='')
                                .col-xl-4.col-sm-6
                                  label.form-label(for='customFirstname') First Name
                                    span.txt-danger *
                                  input#customFirstname.form-control(type='text' placeholder="Enter first name" required='')
                                  .valid-feedback
                                    | Looks good!
                                .col-xl-4.col-sm-6
                                  label.form-label(for='customLastname') Last Name
                                    span.txt-danger *
                                  input#customLastname.form-control(type='text' placeholder='Enter last name' required='')
                                  .valid-feedback
                                    | Looks good!
                                .col-xl-4.col-12
                                  label.form-label(for='customEmail') Email
                                    span.txt-danger *
                                  input#customEmail.form-control(type='email' required='' placeholder='cuba@example.com')
                                  .valid-feedback
                                    | Looks good!
                                .col-xl-5.col-sm-4
                                  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.
                                .col-xl-3.col-sm-4
                                  label.form-label(for='custom-zipcode') Zip Code
                                  input#custom-zipcode.form-control(type='text' required='')
                                  .invalid-feedback
                                    | Please provide a valid zip.
                                .col-sm-4
                                  label.form-label(for='customContact1') Contact Number
                                  input#customContact1.form-control(type='number' placeholder='Enter number' required='')
                                  .valid-feedback
                                    | Looks good!
                                .col-12
                                  .form-check
                                    input#invalid-check-wizard.form-check-input(type='checkbox' value='' required='')
                                    label.form-check-label.mb-0.d-block(for='invalid-check-wizard')
                                      | Agree to terms and conditions
                                    .invalid-feedback
                                      | You must agree before submitting.
                                .col-12.text-end
                                  button.btn.btn-primary Continue
                            #bank-wizard.tab-pane.fade(role='tabpanel' aria-labelledby='bank-wizard-tab')
                              form.row.g-3.needs-validation(novalidate='')
                                .col-sm-6.bank-search
                                  label.form-label(for='aadharnumber-wizard') Aadhaar Number
                                    span.txt-danger *
                                  input#aadharnumber-wizard.form-control(type='Search' placeholder="xxxx xxxx xxxx xxxx" required='')
                                  .valid-feedback
                                    | Looks good!
                                .col-sm-6.bank-search
                                  label.form-label(for='pan-wizard') PAN
                                    span.txt-danger *
                                  input#pan-wizard.form-control(type='Search' placeholder="xxxxxxxxxx" required='')
                                  .valid-feedback
                                    | Looks good!
                                .col-12 
                                  h6 Choose from these popular banks
                                  .bank-selection
                                    .form-check.radio.radio-primary.ps-0
                                      ul.radio-wrapper
                                        li 
                                          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 
                                          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 
                                          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 
                                          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 
                                          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 
                                          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 
                                          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
                                .col-12.text-end 
                                  button.btn.btn-primary Previous
                                  button.btn.btn-primary Continue
                            #inquiry-wizard.tab-pane.fade(role='tabpanel' aria-labelledby='inquiry-wizard-tab')
                              form.row.g-3.needs-validation(novalidate='')
                                .col-12.inquiries-form
                                  .row 
                                    .col-md-6
                                      p.f-w-500 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
                                    .col-md-6
                                      .row.g-3
                                        .col-12
                                          label.form-label Email
                                            span.txt-danger *
                                          input.form-control(type='text', placeholder='org@support.com', required='required')
                                        .col-12
                                          label.form-label(for='customContact2') Contact Number
                                          input#customContact2.form-control(type='number' placeholder='Enter number' required='')
                                          .valid-feedback
                                            | Looks good!
                                .col-12 
                                  label.form-label.f-w-500(for='FormControlTextarea2') If no, could you please describe?
                                  textarea#FormControlTextarea2.form-control(rows='3')
                                .col-12.text-end 
                                  button.btn.btn-primary Previous
                                  button.btn.btn-primary Continue 
                            #successful-wizard.tab-pane.fade(role='tabpanel' aria-labelledby='successful-wizard-tab')
                              .form-completed
                                img(src="../assets/images/gif/dashboard-8/successful.gif", alt="successful")
                                h6 Successfully Completed
              .col-sm-12 
               .card
                  .card-header
                    h4 Business vertical wizard
                  .card-body
                    .horizontal-wizard-wrapper.vertical-options.vertical-variations
                      .row.g-3
                        .col-xl-3.main-horizontal-header
                          #vertical-n-wizard-tab.nav.nav-pills.horizontal-options(role='tablist' aria-orientation='vertical')
                              a#wizard-n-info-tab.nav-link.active(data-bs-toggle='pill' href='#wizard-n-info' role='tab' aria-controls='wizard-n-info' aria-selected='true') 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    span 1
                                  .horizontal-wizard-content 
                                    h6 Choose account
                              a#bank-n-wizard-tab.nav-link(data-bs-toggle='pill' href='#bank-n-wizard' role='tab' aria-controls='bank-n-wizard' aria-selected='false') 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    span 2
                                  .horizontal-wizard-content 
                                    h6 Business settings
                              a#inquiry-n-wizard-tab.nav-link(data-bs-toggle='pill' href='#inquiry-n-wizard' role='tab' aria-controls='inquiry-n-wizard' aria-selected='false') 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    span 3
                                  .horizontal-wizard-content 
                                    h6 Contact details
                              a#pay-n-wizard-tab.nav-link(data-bs-toggle='pill' href='#pay-n-wizard' role='tab' aria-controls='pay-n-wizard' aria-selected='false') 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    span 4
                                  .horizontal-wizard-content 
                                    h6 Pay details
                              a#successful-n-wizard-tab.nav-link(data-bs-toggle='pill' href='#successful-n-wizard' role='tab' aria-controls='successful-n-wizard' aria-selected='false') 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    span 5
                                  .horizontal-wizard-content 
                                    h6 Completed
                        .col-xl-9
                          #vertical-n-wizard-tabContent.tab-content.dark-field
                            #wizard-n-info.tab-pane.fade.show.active(role='tabpanel' aria-labelledby='wizard-n-info-tab')
                              form.row.g-3.needs-validation(novalidate='')
                                .col-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.
                                .col-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.fa-university
                                          span.d-flex.flex-column
                                            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.fa-user
                                          span.d-flex.flex-column
                                            span Personal 
                                            span Search your personal information please check it
                                .col-12.text-end
                                  button.btn.btn-primary Continue
                            #bank-n-wizard.tab-pane.fade(role='tabpanel' aria-labelledby='bank-n-wizard-tab')
                              form.row.g-3.needs-validation(novalidate='')
                                .col-md-6
                                  label.form-label(for='AccountName') Account Name
                                    span.txt-danger *
                                  input#AccountName.form-control(type='text' required='')
                                  .valid-feedback
                                    | Looks good!
                                .col-md-6
                                    label.form-label Email
                                      span.txt-danger *
                                    input.form-control(type='text', placeholder='org@superrito.com', required='required')
                                .col-12 
                                  label.form-label(for='example-description') Select a project and write a description for it
                                  textarea#example-description.form-control(rows='3')
                                .col-12 
                                  section.main-upgrade
                                    div
                                      i.fa.fa-rocket
                                      h5.mb-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
                                      .selection-box
                                        input(type='checkbox')
                                        div.custom--mega-checkbox
                                          ul.d-flex.flex-column
                                            li Tivo 
                                            li.txt-primary 2-3 Members 
                                      .selection-box
                                        input(type='checkbox')
                                        div.custom--mega-checkbox
                                          ul.d-flex.flex-column
                                            li Cuba
                                            li.txt-primary 4-5 Members 
                                      .selection-box
                                        input(type='checkbox')
                                        div.custom--mega-checkbox
                                          ul.d-flex.flex-column
                                            li Multikart
                                            li.txt-primary 2 Members 
                                      .selection-box
                                        input(type='checkbox' checked='')
                                        div.custom--mega-checkbox
                                          ul.d-flex.flex-column
                                            li Roxo
                                            li.txt-primary 1 Members 
                                .col-12.text-end 
                                  button.btn.btn-primary Previous
                                  button.btn.btn-primary Continue
                            #inquiry-n-wizard.tab-pane.fade(role='tabpanel' aria-labelledby='inquiry-n-wizard-tab')
                              form.row.g-3.needs-validation(novalidate='')
                                .col-12
                                  h6 Contact details
                                  p Please visit the documentation page if you require further information.
                                .col-sm-6
                                  label.form-label(for='validationCustom-select') Organization Name
                                    span.txt-danger *
                                  input#validationCustom-select.form-control(type='text' placeholder='Gekko & Co.' required='')
                                  .valid-feedback
                                    | Looks good!
                                .col-sm-6
                                    label.form-label Email
                                      span.txt-danger *
                                    input.form-control(type='text', placeholder='org@support.com', required='required')
                                .col-12
                                  label.form-label(for='validationCustom-select') Join organization type
                                    span.txt-danger *
                                  select.form-select.f-w-400.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
                                .col-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.
                                .col-12.text-end 
                                  button.btn.btn-primary Previous
                                  button.btn.btn-primary Continue 
                            #pay-n-wizard.tab-pane.fade(role='tabpanel' aria-labelledby='pay-n-wizard-tab')
                              form.row.g-3.needs-validation(novalidate='')
                                .col-md-6
                                  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!
                                .col-md-6
                                  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!
                                .col-12 
                                  .row.g-3
                                    .col-md-6
                                      label.form-label(for='expiration') Expiration(MM/YY)
                                      .row.g-3
                                        .col-md-6
                                          input#expiration.form-control(type='number' required='' placeholder='xx/xx')
                                          .invalid-feedback
                                            | Please enter your valid number
                                          .valid-feedback 
                                            | Looks's Good!
                                        .col-md-6
                                          select.form-select.f-w-400.f-14.text-gray(aria-label='Default select example') 
                                            option(selected='' disabled) Year
                                            option(value='1') 2023
                                            option(value='2') 2024
                                            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
                                    .col-md-6
                                      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!
                                .col-12
                                  .form-check.mb-0
                                    input#invalidCheckboxWizard.form-check-input(type='checkbox' value='' required='')
                                    label.form-check-label.mb-0(for='invalidCheckboxWizard')
                                      | Agree to terms and conditions
                                    .invalid-feedback
                                      | You must agree before submitting.
                                .col-12.text-end 
                                  button.btn.btn-primary Previous
                                  button.btn.btn-primary Continue 
                            #successful-n-wizard.tab-pane.fade(role='tabpanel' aria-labelledby='successful-n-wizard-tab')
                              .form-completed
                                img(src="../assets/images/gif/dashboard-8/successful.gif", alt="successful")
                                h6 Successfully Completed       
              .col-sm-12 
               .card
                  .card-header
                    h4 Custom vertical wizard
                  .card-body
                    .horizontal-wizard-wrapper.vertical-options
                      .row.g-3
                        .col-md-3.main-horizontal-header
                          #vertical-wizard-tab.nav.nav-pills.horizontal-options(role='tablist' aria-orientation='vertical')
                              a#wizard-v-info-tab.nav-link.active(data-bs-toggle='pill' href='#wizard-v-info' role='tab' aria-controls='wizard-v-info' aria-selected='true') 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    i.fa.fa-user
                                  .horizontal-wizard-content 
                                    h6 Personal info
                              a#bank-v-wizard-tab.nav-link(data-bs-toggle='pill' href='#bank-v-wizard' role='tab' aria-controls='bank-v-wizard' aria-selected='false') 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    i.fa.fa-chain-broken
                                  .horizontal-wizard-content 
                                    h6 Connect bank account
                              a#inquiry-v-wizard-tab.nav-link(data-bs-toggle='pill' href='#inquiry-v-wizard' role='tab' aria-controls='inquiry-v-wizard' aria-selected='false') 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    i.fa.fa-group
                                  .horizontal-wizard-content 
                                    h6 Inquiries
                              a#successful-v-wizard-tab.nav-link(data-bs-toggle='pill' href='#successful-v-wizard' role='tab' aria-controls='successful-v-wizard' aria-selected='false') 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    i.fa.fa-group
                                  .horizontal-wizard-content 
                                    h6 Completed 
                        .col-md-9
                          #vertical-wizard-tabContent.tab-content.dark-field
                            #wizard-v-info.tab-pane.fade.show.active(role='tabpanel' aria-labelledby='wizard-v-info-tab')
                              form.row.g-3.needs-validation(novalidate='')
                                .col-xxl-4.col-sm-6
                                  label.form-label(for='validation-firstname-wizard') First name
                                    span.txt-danger *
                                  input#validation-firstname-wizard.form-control(type='text' placeholder="Enter first name" required='')
                                  .valid-feedback
                                    | Looks good!
                                .col-xxl-4.col-sm-6
                                  label.form-label(for='validation-lastname-wizard') Last name
                                    span.txt-danger *
                                  input#validation-lastname-wizard.form-control(type='text' placeholder='Enter last name' required='')
                                  .valid-feedback
                                    | Looks good!
                                .col-xxl-4.col-md-6
                                  label.form-label(for='validation-email-wizard') Email
                                    span.txt-danger *
                                  input#validation-email-wizard.form-control(type='email' required='' placeholder='cuba@example.com')
                                  .valid-feedback
                                    | Looks good!
                                .col-xxl-5.col-md-6
                                  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.
                                .col-xxl-3.col-md-6
                                  label.form-label(for='wizard-zipcode') Zip Code
                                  input#wizard-zipcode.form-control(type='text' required='')
                                  .invalid-feedback
                                    | Please provide a valid zip.
                                .col-xxl-4.col-md-6
                                  label.form-label(for='contact-wizard') Contact Number
                                  input#contact-wizard.form-control(type='number' placeholder='Enter number' required='')
                                  .valid-feedback
                                    | Looks good!
                                .col-12
                                  .form-check
                                    input#validation-check-wizard.form-check-input(type='checkbox' value='' required='')
                                    label.form-check-label.mb-0.d-block(for='validation-check-wizard')
                                      | Agree to terms and conditions
                                    .invalid-feedback
                                      | You must agree before submitting.
                                .col-12.text-end
                                  button.btn.btn-primary Continue
                            #bank-v-wizard.tab-pane.fade(role='tabpanel' aria-labelledby='bank-v-wizard-tab')
                              form.row.g-3.needs-validation(novalidate='')
                                .col-md-6.bank-search
                                  label.form-label(for='aadhar-number-wizard1') Aadhaar Number
                                    span.txt-danger *
                                  input#aadhar-number-wizard1.form-control(type='Search' placeholder="xxxx xxxx xxxx xxxx" required='')
                                  .valid-feedback
                                    | Looks good!
                                .col-md-6.bank-search
                                  label.form-label(for='pan-wizard-1') PAN
                                    span.txt-danger *
                                  input#pan-wizard-1.form-control(type='Search' placeholder="xxxxxxxxxx" required='')
                                  .valid-feedback
                                    | Looks good!
                                .col-12 
                                  h6 Choose from these popular banks
                                  .bank-selection
                                    .form-check.radio.radio-primary.ps-0
                                      ul.radio-wrapper
                                        li 
                                          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 
                                          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 
                                          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 
                                          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 
                                          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 
                                          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 
                                          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
                                .col-12.text-end 
                                  button.btn.btn-primary Previous
                                  button.btn.btn-primary Continue
                            #inquiry-v-wizard.tab-pane.fade(role='tabpanel' aria-labelledby='inquiry-v-wizard-tab')
                              form.row.g-3.needs-validation(novalidate='')
                                .col-12.inquiries-form
                                  .row 
                                    .col-md-6
                                      p.f-w-500 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
                                    .col-md-6 
                                      .row.g-3 
                                        .col-12
                                          label.form-label Email
                                            span.txt-danger *
                                          input.form-control(type='text', placeholder='org@support.com', required='required')
                                        .col-12
                                          label.form-label(for='customContact') Contact Number
                                          input#customContact.form-control(type='number' placeholder='Enter number' required='')
                                          .valid-feedback
                                            | Looks good!
                                .col-12 
                                  label.form-label.f-w-500(for='formControlTextareaWizard') If no, could you please describe?
                                  textarea#formControlTextareaWizard.form-control(rows='3')
                                .col-12.text-end 
                                  button.btn.btn-primary Previous
                                  button.btn.btn-primary Continue 
                            #successful-v-wizard.tab-pane.fade(role='tabpanel' aria-labelledby='successful-v-wizard-tab')
                              .form-completed
                                img(src="../assets/images/gif/dashboard-8/successful.gif", alt="successful")
                                h6 Successfully Completed          
              .col-sm-12 
               .card
                  .card-header
                    h4 Business horizontal wizard
                  .card-body
                    .horizontal-wizard-wrapper.vertical-variations
                      .row.g-3
                        .col-12.main-horizontal-header 
                          #business-n-wizard-tab.nav.nav-pills.horizontal-options(role='tablist' aria-orientation='vertical')
                              a#business-n-info-tab.nav-link.active(data-bs-toggle='pill' href='#business-n-info' role='tab' aria-controls='business-n-info' aria-selected='true') 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    span 1
                                  .horizontal-wizard-content 
                                    h6 Choose account
                              a#business-bank-wizard-tab.nav-link(data-bs-toggle='pill' href='#business-bank-wizard' role='tab' aria-controls='business-bank-wizard' aria-selected='false') 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    span 2
                                  .horizontal-wizard-content 
                                    h6 Business settings
                              a#business-inquiry-wizard-tab.nav-link(data-bs-toggle='pill' href='#business-inquiry-wizard' role='tab' aria-controls='business-inquiry-wizard' aria-selected='false') 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    span 3
                                  .horizontal-wizard-content 
                                    h6 Contact details
                              a#business-pay-wizard-tab.nav-link(data-bs-toggle='pill' href='#business-pay-wizard' role='tab' aria-controls='business-pay-wizard' aria-selected='false') 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    span 4
                                  .horizontal-wizard-content 
                                    h6 Pay details
                              a#business-successful-wizard-tab.nav-link(data-bs-toggle='pill' href='#business-successful-wizard' role='tab' aria-controls='business-successful-wizard' aria-selected='false') 
                                .horizontal-wizard
                                  .stroke-icon-wizard
                                    span 5
                                  .horizontal-wizard-content 
                                    h6 Completed
                        .col-12
                          #business-n-wizard-tabContent.tab-content.dark-field
                            #business-n-info.tab-pane.fade.show.active(role='tabpanel' aria-labelledby='business-n-info-tab')
                              form.row.g-3.needs-validation(novalidate='')
                                .col-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.
                                .col-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.fa-university
                                          span.d-flex.flex-column
                                            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.fa-user
                                          span.d-flex.flex-column
                                            span Personal 
                                            span Search your personal information please check it
                                                              
                                .col-12.text-end
                                  button.btn.btn-primary Continue
                            #business-bank-wizard.tab-pane.fade(role='tabpanel' aria-labelledby='business-bank-wizard-tab')
                              form.row.g-3.needs-validation(novalidate='')
                                .col-md-6
                                  label.form-label(for='validationAccountName') Account Name
                                    span.txt-danger *
                                  input#validationAccountName.form-control(type='text' required='')
                                  .valid-feedback
                                    | Looks good!
                                .col-md-6
                                    label.form-label Email
                                      span.txt-danger *
                                    input.form-control(type='text', placeholder='org@superrito.com', required='required')
                                .col-12 
                                  label.form-label(for='FormControlTextarea-a') Select a project and write a description for it
                                  textarea#FormControlTextarea-a.form-control(rows='3')
                                .col-12 
                                  section.main-upgrade
                                    div
                                      i.fa.fa-rocket
                                      h6.mb-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
                                      .selection-box
                                        input(type='checkbox')
                                        div.custom--mega-checkbox
                                          ul.d-flex.flex-column
                                            li Tivo 
                                            li.txt-primary 2-3 Members 
                                      .selection-box
                                        input(type='checkbox')
                                        div.custom--mega-checkbox
                                          ul.d-flex.flex-column
                                            li Cuba
                                            li.txt-primary 4-5 Members 
                                      .selection-box
                                        input(type='checkbox')
                                        div.custom--mega-checkbox
                                          ul.d-flex.flex-column
                                            li Multikart
                                            li.txt-primary 2 Members 
                                      .selection-box
                                        input(type='checkbox' checked='')
                                        div.custom--mega-checkbox
                                          ul.d-flex.flex-column
                                            li Roxo
                                            li.txt-primary 1 Members 
                                .col-12.text-end 
                                  button.btn.btn-primary Previous
                                  button.btn.btn-primary Continue
                            #business-inquiry-wizard.tab-pane.fade(role='tabpanel' aria-labelledby='business-inquiry-wizard-tab')
                              form.row.g-3.needs-validation(novalidate='')
                                .col-12
                                  h6 Contact details
                                  p Please visit the documentation page if you require further information.
                                .col-sm-6
                                  label.form-label(for='OrganizationName') Organization Name
                                    span.txt-danger *
                                  input#OrganizationName.form-control(type='text' placeholder='Gekko & Co.' required='')
                                  .valid-feedback
                                    | Looks good!
                                .col-sm-6
                                    label.form-label Email
                                      span.txt-danger *
                                    input.form-control(type='text', placeholder='org@support.com', required='required')
                                .col-12
                                  label.form-label(for='validationCustom-select') Join organization type
                                    span.txt-danger *
                                  select.form-select.f-w-400.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
                                .col-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.
                                .col-12.text-end 
                                  button.btn.btn-primary Previous
                                  button.btn.btn-primary Continue 
                            #business-pay-wizard.tab-pane.fade(role='tabpanel' aria-labelledby='business-pay-wizard-tab')
                              form.row.g-3.needs-validation(novalidate='')
                                .col-sm-6
                                  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!
                                .col-sm-6
                                  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!
                                .col-12 
                                  .row.g-3
                                    .col-md-6
                                      label.form-label(for='validationCustom-d') Expiration(MM/YY)
                                      .row.g-3
                                        .col-md-6
                                          input#validationCustom-d.form-control(type='number' required='' placeholder='xx/xx')
                                          .invalid-feedback
                                            | Please enter your valid number
                                          .valid-feedback 
                                            | Looks's Good!
                                        .col-md-6
                                          select.form-select.f-w-400.f-14.text-gray(aria-label='Default select example') 
                                            option(selected='' disabled) Year
                                            option(value='1') 2023
                                            option(value='2') 2024
                                            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
                                    .col-md-6
                                      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!
                                .col-12
                                  .form-check.mb-0
                                    input#invalidCheck67.form-check-input(type='checkbox' value='' required='')
                                    label.form-check-label.mb-0(for='invalidCheck67')
                                      | Agree to terms and conditions
                                    .invalid-feedback
                                      | You must agree before submitting.
                                .col-12.text-end 
                                  button.btn.btn-primary Previous
                                  button.btn.btn-primary Continue 
                            #business-successful-wizard.tab-pane.fade(role='tabpanel' aria-labelledby='business-successful-wizard-tab')
                              .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
