/* =========================================================
   Shahrukh Steps — scoped styles (shk-st- prefix)
   Horizontal or vertical, optional connecting line.
   ========================================================= */
.shk-st{
  --shk-st-brand:#2547d0;
  --shk-st-numtxt:#ffffff;
  --shk-st-iconbg:#e9edfc;
  --shk-st-icon:#2547d0;
  --shk-st-title:#0f1533;
  --shk-st-desc:#5b6478;
  --shk-st-line:#c3d0f7;
  --shk-st-gap:30px;
  --shk-st-circle:68px;
  --shk-st-count:3;
  font-family:inherit;box-sizing:border-box;
}
.shk-st *{box-sizing:border-box;}

.shk-st-num{
  width:var(--shk-st-circle);height:var(--shk-st-circle);border-radius:50%;
  background:var(--shk-st-brand);color:var(--shk-st-numtxt);
  font-size:calc(var(--shk-st-circle) * .38);font-weight:800;
  display:flex;align-items:center;justify-content:center;
  border:5px solid #fff;box-shadow:0 10px 26px rgba(37,71,208,.30);
  flex:0 0 auto;
}
.shk-st-icon{
  width:46px;height:46px;border-radius:12px;background:var(--shk-st-iconbg);color:var(--shk-st-icon);
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.shk-st-icon svg{width:1em;height:1em;fill:currentColor;}
.shk-st-title{font-size:20px;font-weight:800;letter-spacing:-.01em;margin:0 0 10px;color:var(--shk-st-title);line-height:1.2;}
.shk-st-desc{font-size:14.5px;line-height:1.6;color:var(--shk-st-desc);margin:0;}

/* =====================================================
   HORIZONTAL
   ===================================================== */
.shk-st--horizontal{
  display:grid;grid-template-columns:repeat(var(--shk-st-count),1fr);gap:var(--shk-st-gap);
  position:relative;
}
.shk-st--horizontal .shk-st-item{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:16px;position:relative;z-index:1;padding:0 10px;
}
.shk-st--horizontal .shk-st-main{display:flex;flex-direction:column;align-items:center;gap:14px;}
.shk-st--horizontal .shk-st-text{max-width:300px;}
/* connecting line behind the circles */
.shk-st--horizontal.shk-st--line::before{
  content:"";position:absolute;top:calc(var(--shk-st-circle) / 2);
  left:calc((100% / var(--shk-st-count)) / 2);
  right:calc((100% / var(--shk-st-count)) / 2);
  height:2px;background:var(--shk-st-line);z-index:0;
}

/* =====================================================
   VERTICAL
   ===================================================== */
.shk-st--vertical{display:flex;flex-direction:column;gap:var(--shk-st-gap);}
.shk-st--vertical .shk-st-item{display:flex;gap:20px;position:relative;align-items:flex-start;}
.shk-st--vertical .shk-st-num{position:relative;z-index:1;}
.shk-st--vertical .shk-st-main{display:flex;flex-direction:column;gap:12px;padding-top:8px;flex:1;}
/* vertical connecting line */
.shk-st--vertical.shk-st--line .shk-st-item::before{
  content:"";position:absolute;left:calc(var(--shk-st-circle) / 2);top:var(--shk-st-circle);
  width:2px;height:calc(100% + var(--shk-st-gap) - var(--shk-st-circle));
  background:var(--shk-st-line);transform:translateX(-1px);z-index:0;
}
.shk-st--vertical.shk-st--line .shk-st-item:last-child::before{display:none;}

@media(max-width:820px){
  .shk-st--horizontal{grid-template-columns:1fr;gap:36px;max-width:420px;margin:0 auto;}
  .shk-st--horizontal.shk-st--line::before{display:none;}
}