@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600&display=swap");





.root {

  padding: 1rem;

  border-radius: 5px;

  box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.3);

}



figure {

  display: flex;

}

figure img {

  width: 8rem;

  height: 8rem;

  border-radius: 15%;

  border: 1.5px solid #f05a00;

  margin-right: 1.5rem;

  padding:1rem;

}

figure figcaption {

  display: flex;

  flex-direction: column;

  justify-content: space-evenly;

}

figure figcaption h4 {

  font-size: 1.4rem;

  font-weight: 500;

}

figure figcaption h6 {

  font-size: 1.6rem;

  font-weight: 300;

}

figure figcaption h2 {

  font-size: 1rem;

  font-weight: 500;

}



.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;

  position: relative;

}

.order-track-status-dot {

  display: block;

  width: 2.2rem;

  height: 2.2rem;

  border-radius: 50%;

  background: #f05a00;

}

.order-track-status-line {

  display: block;

  margin: 0 auto;

  width: 2px;

  height: 7rem;

  background: #f05a00;

}

.order-track-status-dot-waitt {

  display: block;

  width: 2.2rem;

  height: 2.2rem;

  border-radius: 50%;

  background: #aaa;

}

.order-track-status-line-waitt {

  display: block;

  margin: 0 auto;

  width: 2px;

  height: 7rem;

  background: #aaa;

}

.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;

}



@media (max-width: 575.98px) { 

    figure img {

        width: 4rem;

        height: 4rem;

        border-radius: 15%;

        border: 1.5px solid #f05a00;

        margin-right: 1.5rem;

        padding:5px;

    }



    figure figcaption h4 {

        font-size: 1rem;

        font-weight: 500;

      }

      figure figcaption h6 {

        font-size: 0.9rem;

        font-weight: 300;

      }

      figure figcaption h2 {

        font-size: 0.6rem;

        font-weight: 500;

      }

      

      .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: 4rem;

      }

      .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;

        position: relative;

      }

      .order-track-status-dot {

        display: block;

        width: 1.2rem;

        height: 1.2rem;

        border-radius: 50%;

        background: #f05a00;

      }

      .order-track-status-line {

        display: block;

        margin: 0 auto;

        width: 2px;

        height: 4rem;

        background: #f05a00;

      }

      .order-track-status-dot-waitt {

        display: block;

        width: 1.2rem;

        height: 1.2rem;

        border-radius: 50%;

        background: #aaa;

      }

      .order-track-status-line-waitt {

        display: block;

        margin: 0 auto;

        width: 2px;

        height: 4rem;

        background: #aaa;

      }

      .order-track-text-stat {

        font-size: 1rem;

        font-weight: 500;

        margin-bottom: 3px;

      }

      .order-track-text-sub {

        font-size: 1rem;

        font-weight: 300;

      }

 }



.tems{

  transition: .5s ease-in-out;

}

.items:hover{

  filter: brightness(80%);

}





@media (max-width: 767.98px) { 

    

 }



@media (max-width: 991.98px) { 

    

 }





@media (max-width: 1199.98px) { 

    

 }