.weblabs-step-service{
  /* layout */
  --wss-cols: 4;
  --wss-gap: 26px;
  --wss-head-space: 18px;

  /* header */
  --wss-header-bar: #c8a85a;
  --wss-header-line: #0b2f39;

  /* card */
  --wss-head-h: 92px;
  --wss-badge-w: 56px;
  --wss-radius: 0px;

  --wss-head-bg: #0b3a46;
  --wss-head-bg2: #092f38;
  --wss-overlay-w: 58%;

  --wss-badge-top: #c8a85a;
  --wss-badge-bottom: #195968;

  --wss-body-bg: #f3f3f3;
  --wss-body-pt: 18px;
  --wss-body-pr: 18px;
  --wss-body-pb: 18px;
  --wss-body-pl: 18px;

  position: relative;
  width: 100%;
}

/* ===== Header (same family as your previous widgets) ===== */
.weblabs-step-service__header{
position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: var(--wss-head-space);
    flex-direction:row-reverse;
}

.weblabs-step-service__header-deco{
  flex: 0 0 auto;
  padding-top: 6px;
}
.weblabs-step-service__header-bar{
  display: block;
  width: 100px;
  height: 16px;
  background: var(--wss-header-bar);
}

.weblabs-step-service__header-text{
  /*flex: 1 1 auto;*/
  /*direction: rtl;*/
  /*text-align: right;*/
  
  display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}

.weblabs-step-service__header-top{
  /*display: inline-flex;*/
  /*flex-direction: column;*/
  /*align-items: flex-end;*/
  /*gap: 10px;*/

        display: inline-flex;
    flex-direction: column;
    gap: 6px;
}

.weblabs-step-service__header-title{
  /*margin: 0;*/
  /*font-weight: 800;*/
  /*font-size: 18px;*/
  /*line-height: 1.25;*/
  /*color: #0b2f39;*/
    margin: 0;
    font-weight: 700;
    line-height: 1.2;
}

.weblabs-step-service__header-underline{
  /*display: block;*/
  /*width: 34px;*/
  /*height: 2px;*/
  /*background: var(--wss-header-line);*/
      width: 46px;
    height: 2px;
    background: var(--wss-header-line);
    display: block;
}

.weblabs-step-service__header-subtitle{
opacity: .8;
    font-weight: 300;
}

/* ===== Cards Grid ===== */
.weblabs-step-service__grid{
  display: grid;
  grid-template-columns: repeat(var(--wss-cols), minmax(0, 1fr));
  gap: var(--wss-gap);
  direction: rtl; /* card order: 1 on the right */
}

/* ===== Card ===== */
.weblabs-step-service__card{
  border-radius: var(--wss-radius);
  overflow: hidden;
  background: transparent;
}

/* head */
.weblabs-step-service__card-head{
  height: var(--wss-head-h);
  display: flex;
  background: var(--wss-head-bg);
  position: relative;
}

.weblabs-step-service__head-main{
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 14px;
  overflow: hidden;
}

.weblabs-step-service__head-main:before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--wss-overlay-w);
  background: var(--wss-head-bg2);
  z-index: 0;
}

.weblabs-step-service__card-title{
  position: relative;
  z-index: 1;
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

/* badge strip */
.weblabs-step-service__badge{
  width: var(--wss-badge-w);
  display: flex;
  flex-direction: column;
}

.weblabs-step-service__num{
  height: calc(var(--wss-head-h) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wss-badge-top);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
}

.weblabs-step-service__badge-bottom{
  flex: 1 1 auto;
  background: var(--wss-badge-bottom);
}

/* body */
.weblabs-step-service__card-body{
  background: var(--wss-body-bg);
  padding: var(--wss-body-pt) var(--wss-body-pr) var(--wss-body-pb) var(--wss-body-pl);
}

.weblabs-step-service__card-desc{
  margin: 0;
  text-align: center;
  line-height: 2;
  font-size: 13px;
  color: #3b3b3b;
  opacity: .95;
}

/* mobile */
@media (max-width: 767px){
  .weblabs-step-service{
    --wss-cols: 1;
  }
}