.fpsw-workpath{
  --fpsw-primary:#f59e0b;
  --fpsw-bg:#f5f8f9;
  --fpsw-text:#333;
  --fpsw-muted:#6b7280;
  background: transparent;
  padding: 40px 0 10px;
  direction: rtl;
}

.fpsw-workpath__inner{max-width:1200px;margin:0 auto;padding:0 20px;}
.fpsw-workpath__header{text-align:center;margin-bottom:30px;}
.fpsw-workpath__title{
  margin:0;
  color:var(--fpsw-primary);
  font-weight:800;
  font-size:48px;
  line-height:1.1;
}
.fpsw-workpath__subtitle{
  margin:14px auto 0;
  max-width:900px;
  color:var(--fpsw-muted);
  font-size:18px;
  line-height:1.9;
}

.fpsw-workpath__timeline{
  position:relative;
  padding: 10px 0 40px;
}

.fpsw-workpath__timeline:before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:2px;
  background: repeating-linear-gradient(
    to bottom,
    var(--fpsw-primary) 0 7px,
    rgba(0,0,0,0) 7px 14px
  );
  opacity:.9;
}

.fpsw-wp-item{
  position:relative;
  display:grid;
  grid-template-columns: minmax(0,1fr) 140px minmax(0,1fr);
  column-gap: 40px;
  align-items:center;
  padding: 48px 0;
}

.fpsw-wp-marker{
  grid-column:2;
  justify-self:center;
  width:70px;
  height:70px;
  border-radius:50%;
  background:#fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:22px;
  color:#2b2b2b;
  z-index:2;
}

.fpsw-wp-side{min-width:0;}
/* Hide empty sides to avoid spacing issues */
.fpsw-wp-side:empty{display:none;}

.fpsw-wp-left{grid-column:1;}
.fpsw-wp-right{grid-column:3;}

.fpsw-wp-block{
  max-width: 560px;
  margin: 0 auto;
  text-align:center;
}

.fpsw-wp-title{
  margin: 0 0 10px;
  color: var(--fpsw-text);
  font-size:38px;
  font-weight:800;
  line-height:1.2;
}

.fpsw-wp-desc{
  margin:0;
  color: var(--fpsw-muted);
  font-size:18px;
  line-height:1.9;
}

.fpsw-wp-media{margin: 0 auto; text-align:center;}
.fpsw-wp-media img{
  max-width: 100%;
  height:auto;
  display:inline-block;
  border-radius: 16px;
  /* keep it subtle like the video */
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.08));
}

.fpsw-wp-media--top{margin-bottom: 16px;}
.fpsw-wp-media--bottom{margin-top: 18px;}

.fpsw-wp-item.is-anim{
  opacity:0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}
.fpsw-wp-item.is-anim .fpsw-wp-left{opacity:0;transform:translateX(-28px);transition:opacity .7s ease, transform .7s ease;}
.fpsw-wp-item.is-anim .fpsw-wp-right{opacity:0;transform:translateX(28px);transition:opacity .7s ease, transform .7s ease;}
.fpsw-wp-item.is-visible{opacity:1;transform:none;}
.fpsw-wp-item.is-visible .fpsw-wp-left,
.fpsw-wp-item.is-visible .fpsw-wp-right{opacity:1;transform:none;}

@media (max-width: 1024px){
  .fpsw-workpath__title{font-size:40px;}
  .fpsw-wp-title{font-size:32px;}
  .fpsw-wp-item{grid-template-columns: minmax(0,1fr) 120px minmax(0,1fr);column-gap:26px;}
}

@media (max-width: 767px){
  .fpsw-workpath{padding:26px 0 8px;}
  .fpsw-workpath__title{font-size:34px;}
  .fpsw-workpath__subtitle{font-size:15px; line-height:1.9;}

  /* Mobile timeline aligned to the right (RTL friendly) */
  .fpsw-workpath__timeline:before{
    left:auto;
    right:34px; /* matches marker center */
    transform:none;
  }

  .fpsw-wp-item{
    direction:ltr; /* stabilize grid numbering (RTL swaps columns otherwise) */
    grid-template-columns: minmax(0,1fr) 68px;
    column-gap: 16px;
    padding: 26px 0;
    align-items:start;
  }

  .fpsw-wp-left,
  .fpsw-wp-right{
    grid-column:1;
    direction:rtl;
  }

  .fpsw-wp-left{grid-row:1;}
  .fpsw-wp-right{grid-row:2; margin-top: 14px;}

  .fpsw-wp-marker{
    grid-column:2;
    grid-row:1 / span 2;
    justify-self:center;
    width:50px;
    height:50px;
    font-size:17px;
    margin-top: 4px;
  }

  .fpsw-wp-block{
    max-width:100%;
    margin:0;
    text-align:right;
    background: rgba(255,255,255,.65);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,.06);
    backdrop-filter: blur(2px);
  }

  .fpsw-wp-title{font-size:22px; margin:0 0 8px;}
  .fpsw-wp-desc{font-size:14px; line-height:1.9;}
  .fpsw-wp-media{margin-top:10px;}
  .fpsw-wp-media img{border-radius:14px;}

  /* Mobile: handle steps where only one side exists */
  .fpsw-wp-item.fpsw-only-left .fpsw-wp-marker,
  .fpsw-wp-item.fpsw-only-right .fpsw-wp-marker{
    grid-row:1;
  }

  .fpsw-wp-item.fpsw-only-left .fpsw-wp-right{display:none;}
  .fpsw-wp-item.fpsw-only-right .fpsw-wp-left{display:none;}

  .fpsw-wp-item.fpsw-only-right .fpsw-wp-right{
    grid-row:1;
    margin-top:0;
  }

  /* If both sides exist, keep the stacked layout but tighten spacing */
  .fpsw-wp-item.fpsw-both .fpsw-wp-right{margin-top:12px;}

  /* Ensure blocks use full width on small screens */
  .fpsw-wp-block{max-width:100%;}
}

@media (max-width: 420px){
  .fpsw-workpath__title{font-size:30px;}
  .fpsw-wp-title{font-size:22px;}
}