:root {
     --bs-success: #28a745;
     --bs-primary: #0d6efd;
     --step-bg: #e9ecef;
 }

 /* Stepper Logic */
 .track-line {
     height: 4px !important;
     background-color: var(--step-bg);
     top: 20px;
     position: relative;
     z-index: 1;
 }

 .dot {
     height: 40px;
     width: 40px;
     margin-left: 0px;
     margin-right: 0px;
     margin-top: 0px;
     background-color: var(--step-bg);
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     z-index: 2;
     position: relative;
     transition: all 0.3s ease;
     color: #adb5bd;
     border: 4px solid #fff;
 }

 /* Active & Completed States */
 .step-active .dot {
     background-color: var(--bs-primary);
     color: #fff;
     box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.2);
 }

 .step-complete .dot {
     background-color: var(--bs-success);
     color: #fff;
 }

 .step-text {
     font-size: 0.85rem;
     font-weight: 600;
     margin-top: 10px;
     color: #6c757d;
 }

 .step-complete .step-text,
 .step-active .step-text {
     color: #212529;
 }

 .card {
     border: none;
     border-radius: 15px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }

 .item-img {
     width: 80px;
     height: 80px;
     object-fit: cover;
     border-radius: 10px;
 }

 @media (max-width: 576px) {
     .step-text {
         font-size: 0.7rem;
     }

     .dot {
         height: 30px;
         width: 30px;
         top: -5px;
     }

     .track-line {
         top: 10px;
     }
 }