<?php include('header.php'); ?>

            <section class="bg-white">
        <div class="container ">
        <div class="row">
                <div class="col-12 ">
                    <div class="mt-3 ">
                        <h2>Tracking Your Complaint Status</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12 p-0 text-center">
                    <div class=" coll"></div>
                </div>
            </div>
            <div class="row ptb-30 text-center justify-content-center">             
              <div class=" col-12  col-lg-3 col-md-3 mb-3 ">             
                    <div class="trackc">
                        <img src="assets/okweb/tick-circle.svg" class="mb-3">
                        <h3 class="hds-body-color-four fs-20">Submit <br>Complaint</h3>
                    </div>
               </div> 
               <div class=" col-12  col-lg-3 col-md-3  mb-3">             
                    <div class="trackc">
                        <img src="assets/okweb/consen.png" class="mb-3">
                        <h3 class="hds-body-color-four fs-20">Review<br>
Complaint</h3>
                    </div>
               </div> 
               <div class=" col-12  col-lg-3 col-md-3 mb-3">             
                    <div class="trackc">
                        <img src="assets/okweb/s2.svg" class="mb-3">
                        <h3 class="hds-body-color-four fs-20">Send to<br>
Ruling Party</h3>
                    </div>
               </div>   
               <div class=" col-12  col-lg-3 col-md-3  mb-3">             
                    <div class="trackc">
                        <img src="assets/okweb/s1.svg" class="mb-3">
                        <h3 class="hds-body-color-four fs-20">Resolved<br>
Issue</h3>
                    </div>
               </div>                
             </div>
            </div>
        </section>

        <section class="root bg-white">

 
<div class="container ">
  <div class="row">
    <div class="col-12 shadow-sm p-3 mb-5 bg-white rounded">
    <h3>Tracking Info</h3>
    </div>
  </div>
  <div class="row">
    <div class=" col col-md-2 ">
    <div class="order-track">
  <div class="order-track-step">
    
    <div class="order-track-text">
      <p class="order-track-text-stat dco">2024/08/12</p>
     
    </div>
  </div>
  <div class="order-track-step">
    
    <div class="order-track-text">
      <p class="order-track-text-stat dco"> 2024/08/12 </p>
     
    </div>
  </div>
  <div class="order-track-step">
   
    <div class="order-track-text">
      <p class="order-track-text-stat dco"> 2024/08/12</p>  
    </div>
  </div>
  <div class="order-track-step">
   
    <div class="order-track-text">
      <p class="order-track-text-stat dco"> 2024/08/12</p>  
    </div>
  </div>
</div>

    </div>

    <div class=" col col-md-4  ">
    <div class="order-track">
  <div class="order-track-step">
    <div class="order-track-status">
      <span class="order-track-status-dott"></span>
      <span class="order-track-status-line"></span>
    </div>
    <div class="order-track-text">
      <p class="order-track-text-stat trco">Submit Complaint</p>
     
    </div>
  </div>
  <div class="order-track-step">
    <div class="order-track-status">
      <span class="order-track-status-dot"></span>
      <span class="order-track-status-line"></span>
    </div>
    <div class="order-track-text">
      <p class="order-track-text-stat trco"> Review Complaint</p>
     
    </div>
  </div>
  <div class="order-track-step">
    <div class="order-track-status">
      <span class="order-track-status-dot"></span>
      <span class=""></span>
    </div>
    <div class="order-track-text">
      <p class="order-track-text-stat trco"> Send to Ruling Party</p>  
    </div>
  </div>
  <div class="order-track-step">
    <div class="order-track-status">
      <span class=""></span>
      <span class=""></span>
    </div>
    <div class="order-track-text">
      <p class="order-track-text-stat trco"> &nbsp; &nbsp;&nbsp;Resolved Issue</p>  
    </div>
  </div>
</div>
    </div>
    <div class=" col col-md-6">
    <div class="order-track">
  <div class="order-track-step">   
    <div class="order-track-text">
      <p class="order-track-text-stat tracco">Your Complaint Submit 2024/08/12 </p>
    
    </div>
  </div>
  <div class="order-track-step">  
    <div class="order-track-text">
      <p class="order-track-text-stat tracco" > Your Complaint Submit 2024/08/12 </p>
     
    </div>
  </div> 
</div>
    </div>
  </div>
</div> 
</section>
<style>
.order-track {
  margin-top: 2rem;
  padding: 0 1rem;
  /* border-top: 1px dashed #2c3e50; */
  padding-top: 2.5rem;
  display: flex;
  flex-direction: column;
}
.order-track-step {
  display: flex;
  height: 7rem;
}
.order-track-step:last-child {
  overflow: hidden;
  height: 4rem;
}
.order-track-step:last-child .order-track-status span:last-of-type {
  display: none;
}
.order-track-status {
  margin-right: 1.5rem;
  /* margin-left: 2.5rem; */
  position: relative;
}


@media screen (max-width:600px) {
  .order-track-status{
    margin-right: 1rem;
  }
}
/* @media screen (min-width:601px) {
  .order-track-status{
    margin-right: 5.5rem;
  }
} */
.order-track-status-dot {
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #0079B8;
}

.order-track-status-dott {
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #D6D326;
}
.order-track-status-line {
  display: block;
  margin: 0 auto;
  width: 3px;
  height: 7rem;
  /* background: #f05a00; */
  background: #000;
}
.order-track-text-stat {
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 3px;
}
.order-track-text-sub {
  font-size: 1rem;
  font-weight: 300;
}

.order-track {
  transition: all .3s height 0.3s;
  transform-origin: top center;
}
</style>
      


<?php include('footer.php'); ?>