/* ============================ Quality Section Css Start ==================== */
.quality-thumbs {
  margin-inline-start: -200px;
  @media (max-width: 768px) {
    margin-inline-start: -100px;
  }
  @media (max-width: 768px) {
    margin-inline-start: -100px;
  }
    &__image-two {
      position: absolute;
      bottom: 0;
      inset-inline-end: 0;
    }
}

.stick {
  position: relative;
  &::before {
    position: absolute;
    content: "";
    width: 12px;
    height: 194px;
    background-color: var(--theme-color);
    border-radius: 4px;
    inset-inline-end: 104px;
    inset-block-start: 0;
  }
}




/* Progress Css Start */
  .progress-container, .progress {
    background-color: #eee;
    border-radius: 5px;
    position: relative;
    height: 4px;
    width: 100%;
  }
  
  .progress {
    background-color: var(--theme-color);
    width: 0;
    transition: 0.8s linear;
  }
  
  .percentage {
    background-color: var(--theme-color);
    border-radius: 5px;
    box-shadow: 0 4px 5px #00000033;
    color: #fff;
    font-size: 12px;
    padding: 4px;
    position: absolute;
    bottom: 20px;
    inset-inline-start: 0;
    transform: translateX(-50%);
    width: 40px;
    text-align: center;
    transition: 0.8s linear;
    &::after {
        background-color: var(--theme-color);
        content: '';
        position: absolute;
        bottom: -5px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        height: 10px;
        width: 10px;
        z-index: -1;
      }
  }
  
  .progress.active {
    width: 0 !important;
  }
  .progress.active, .percentage.active {
    inset-inline-start: 0 !important;
  }
  // Progress Css End
/* ============================ Quality Section Css End ==================== */