<div class="products-quiz">
<h1 class="product-title">Find the right <strong>Surface</strong> products for your business</h1>
<span class="title-tagline">Answer the questions to help match products with your requirements. </span>
<div class="quiz-box mb-0">
  <div class="row">
    <div class="col-xl-9 col-lg-8 col-md-8">
      <ul class="configuration-steps">
        <li class="sub-step" data-valueur="25">
          <span class="list-number">1</span> <span class="list-point">Please select a product family <a
            href="javascript:void(0)" data-toggle="tooltip" data-placement="top" title=""
            data-original-title="Guiding Tips"></a></span>
          <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <li class="nav-item">
              <a class="nav-link" id="office365-tab" data-toggle="pill" href="#office365" role="tab"
                aria-controls="office365" aria-selected="true">Office 365</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile"
                role="tab" aria-controls="pills-profile" aria-selected="false">Microsoft 365</a>
            </li>
            <li class="nav-item gov-cloud">
              <a class="nav-link" id="government-cloud-tab" data-toggle="pill"
                href="#government-cloud" role="tab" aria-controls="government-cloud"
                aria-selected="false">Government Cloud</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact"
                role="tab" aria-controls="pills-contact" aria-selected="false">Polycom</a>
            </li>
          </ul>
        </li>
        <li class=" sub-step quiz-steps" data-valueur="50">
          <span class="list-number">2</span> <span class="list-point">What type of Office 365 are you
          placing? <a href="javascript:void(0)" data-toggle="tooltip" data-placement="top" title=""
            data-original-title="Guiding Tips"></a></span>
          <ul class="nav nav-pills mb-3 office-type-details" id="pills-tab" role="tablist">
            <li class="nav-item">
              <a class="nav-link" id="office365-tab" data-toggle="pill" href="#office365" role="tab"
                aria-controls="office365" aria-selected="true"><strong>New Order/Service</strong>
              <br><span>Creating a new order or adding a new<br> service to an existing CSP
              order.</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="office365-tab" data-toggle="pill" href="#office365" role="tab"
                aria-controls="office365" aria-selected="true"><strong>Transition</strong>
              <br><span>Creating a new order orTransitioning an<br> Advisor or Open subscription
              to CSP.</span></a>
            </li>
          </ul>
        </li>
        <li class="sub-step quiz-steps last" data-valueur="75">
          <span class="list-number">3</span> <span class="list-point">How would you describe your end
          user? <a href="javascript:void(0)" data-toggle="tooltip" data-placement="top" title=""
            data-original-title="Guiding Tips"></a></span>
          <ul class="nav nav-pills mb-3 end-user" id="pills-tab" role="tablist">
            <li class="nav-item">
              <a class="nav-link" id="office365-tab" data-toggle="pill" href="#office365" role="tab"
                aria-controls="office365" aria-selected="true">Commercial</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile"
                role="tab" aria-controls="pills-profile" aria-selected="false">Academic</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact"
                role="tab" aria-controls="pills-contact" aria-selected="false">Commercial Trial</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact"
                role="tab" aria-controls="pills-contact" aria-selected="false">Charity</a>
            </li>
          </ul>
        </li>
        <li class="sub-step quiz-steps " data-valueur="100">
          <span class="list-number modelNum">4</span> <span class="list-point">Which billing model
          would you prefer? <a href="javascript:void(0)" data-toggle="tooltip" data-placement="top"
            title="" data-original-title="Guiding Tips"></a></span>
          <div class="alert alert-info ml-5 hide-for-gov"><i></i><span>Monthly and yearly orders cannot
            be placed together on the same subscription or tenant.</span>
          </div>
          <ul class="nav nav-pills mb-3 subs" id="pills-tab" role="tablist">
            <li class="nav-item">
              <a class="nav-link " id="office365-tab" data-toggle="pill" href="#office365" role="tab"
                aria-controls="office365" aria-selected="true">CSP Monthly</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile"
                role="tab" aria-controls="pills-profile" aria-selected="false">CSP Annually</a>
            </li>
            <li class="nav-item hide-for-gov">
              <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact"
                role="tab" aria-controls="pills-contact" aria-selected="false">Yearly (Open)</a>
            </li>
            <li class="nav-item hide-for-gov">
              <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact"
                role="tab" aria-controls="pills-contact" aria-selected="false">CSP Trial</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="col-xl-3 col-lg-4 col-md-4">
      <div class="quetsionaire-right-section">
        <img src="images/graphic.png" />
        <div class="action-links">
          <a href="javascript:void(0)" class="disabled viewAllQues">View all</a>
          <a href="javascript:void(0)" class="disabled resetQues">Reset</a>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="quiz-box-bottom">
  <div class="row">
    <div class="col-md-9">
      <div class="quiz-progress">
        <div class="">
          <span class="answer-val"> <span class="answered-ques"> 0</span>/4</span>
          <span class="answer-text">Answered</span>
        </div>
        <div class="progress">
          <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="25"
            aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="quiz-btns">
        <button type="button" class="btn btn-primary disabled back"><i
          class="icon-arrow-bottom"></i>Back </button>
        <button type="button" class="btn btn-primary disabled next ml-2"><i
          class="icon-arrow-bottom"></i>Next </button>
      </div>
    </div>
  </div>
</div>
</div>