/* steps */
.steps-container{
  border-bottom: 2px solid var(--border);
  }
.steps{
    display:flex;
    justify-content:space-between;
    max-width:800px;
    margin:40px auto;
    position:relative;
    font-family:Arial;
  }

  /* grey line */
  .steps::before{
    content:"";
    position:absolute;
    top:17px;
    left:8%;
    width:84%;
    height:3px;
    background:rgba(var(--theme), .1);
    z-index: -1;
  }

  /* green progress line */
  .steps::after{
    content:"";
    position:absolute;
    top:17px;
    left:8%;
    width:var(--step-progress); /* এখানে control হবে (step অনুযায়ী) */
    height:3px;
    background:rgba(var(--theme), 1);
    z-index: -1;
  }

  .steps .step{
    width:25%;
    text-align:center;
    font-size:12px;
    color:rgba(var(--text), .5);
  }

  .steps .step span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:35px;
    margin:0 auto 8px;
    border:2px solid rgba(var(--theme), .3);
    border-radius:50%;
    background:rgba(var(--div-bg), 1);
    font-size: 17px;
    font-weight: 700;
  }

  .steps .done span{
    border-color: rgba(var(--theme), 1);
    color: rgba(var(--op-theme), 1);
    background-color: rgba(var(--theme), 1);
  }
  .steps .active,.steps  .done{
    color: rgba(var(--theme), 1);
  }
  .steps  .active span{
    border-color: rgba(var(--theme), 1);
    color: rgba(var(--op-theme), 1);
    background-color: rgba(var(--theme), 1);
  }
  /* end steps */