<div class="container px-1 px-md-4 py-5 mx-auto">
    <div class="card">
      <div class="d-flex justify-content-between px-3 top">
        <div class="d-flex">
          <h5>
            ORDER
            <span class="text-primary font-weight-bold">#YWSNWDAAW</span>
          </h5>
        </div>
        <div class="d-flex flex-column text-sm-right">
          <p class="mb-0">
            Expected Arrival <span class="font-weight-bold">29 Aug 2022</span>
          </p>
          <p>
            USPS <span class="font-weight-bold">2374723467163473124234</span>
          </p>
        </div>
      </div>
      <!-- Add class "active" to progress -->
      <div class=" d-flex justify-content-center">
        <div class="col-12">
          <ul id="progressbar" class="text-center">
            <li class="active step0"></li>
            <li class="active step0"></li>
            <li class="active step0"></li>
            <li class="step0"></li>
          </ul>
        </div>
      </div>
      <div class=" justify-content-between top">
        <div class="row d-flex icon-content">
          <img src="./images/icon/CheckList.png" alt="" class="icon" />
          <div class="d-flex flex-column">
            <p class="font-weight-bold">Order <br />Processed</p>
          </div>
        </div>
        <div class=" d-flex icon-content">
          <img src="./images/icon/Delivery.png" alt="" class="icon" />
          <div class="d-flex flex-column">
            <p class="font-weight-bold">Order <br />Shipped</p>
          </div>
        </div>
        <div class=" d-flex icon-content">
          <img src="./images/icon/Shipping.png" alt="" class="icon" />
          <div class="d-flex flex-column">
            <p class="font-weight-bold">Order <br />En Route</p>
          </div>
        </div>
        <div class="row d-flex icon-content">
          <img src="./images/icon/Home.png" alt="" class="icon" />
          <div class="d-flex flex-column">
            <p class="font-weight-bold">Order <br />Arrival</p>
          </div>
        </div>
      </div>
      <div class="tracking-info-detail">
          <div class="tracking-box">
              <div class="tracking-time-box">
                  <div class="tracking-time">Nov 26, 2018</div>
                  <span>03:36 AM</span>
              </div>
              <div class="tracking-location">
                  <strong>Delivered in California </strong>
                  Carga Office Near 10-G Location South
              </div>
          </div>
          
          <div class="tracking-box">
              <div class="tracking-time-box">
                  <div class="tracking-time">Nov 28, 2018</div>
                  <span>05:40 PM</span>
              </div>
              <div class="tracking-location style-two">
                  <strong>Out For Delivery </strong>
                  Union WareHouse 5th Avenue Block
              </div>
          </div>
          
          <div class="tracking-box">
              <div class="tracking-time-box">
                  <div class="tracking-time">Nov 29, 2018</div>
                  <span>12:35 PM</span>
              </div>
              <div class="tracking-location style-three">
                  <span class="dott"></span>
                  <strong>Arrive at Post Office</strong>
                  Local Post Office In Near Vicinity
              </div>
          </div>
          
          <div class="tracking-box">
              <div class="tracking-time-box">
                  <div class="tracking-time">Dec 02, 2018</div>
                  <span>03:10 AM</span>
              </div>
              <div class="tracking-location style-three">
                  <span class="dott"></span>
                  <strong>Departed Shipping Facility</strong>
                  Carga Office Departure Location Road
              </div>
          </div>
          
          <div class="tracking-box">
              <div class="tracking-time-box">
                  <div class="tracking-time">Dec 04, 2018</div>
                  <span>09:00 AM</span>
              </div>
              <div class="tracking-location style-three">
                  <span class="dott"></span>
                  <strong>Picked up by Shipping Partner </strong>
                  Will Be Delivered at Your Location
              </div>
          </div>
          
      </div>
    </div>
    
  </div>