:root{
  --op-dark:#0C675F;
  --op-lime:#CCD518;
  --op-black:#1D1D1B;
  --op-soft:#F6F8F5;
  --op-line:#DDE4E0;
}

.optima-roadmap-wrap{
  width:100%;
  font-family:"Instrument Sans",Arial,sans-serif;
  color:var(--op-black);
  background:#fff;
  overflow:hidden;
}

.optima-roadmap{
  width:min(1200px,96vw);
  margin:0 auto;
  padding:0 0 24px;
}

.optima-roadmap *{
  box-sizing:border-box;
}

.optima-steps{
  position:relative;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:16px;
  padding:26px 20px 44px;
}

.optima-steps:before{
    display:none;
}

.optima-step{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-align:center;
}

.optima-icon{
  position:relative;
  width:104px;
  height:104px;
  margin:0 auto 14px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:var(--op-dark);
  box-shadow:0 14px 25px rgba(12,103,95,.18);
}

.optima-step:nth-child(2) .optima-icon,
.optima-step:nth-child(4) .optima-icon,
.optima-step:nth-child(6) .optima-icon{
  background:#07565B;
}

.optima-step:nth-child(1) .optima-icon,
.optima-step:nth-child(3) .optima-icon,
.optima-step:nth-child(5) .optima-icon{
  background:#82A900;
}

.optima-num{
  position:absolute;
  top:-8px;
  right:18%;
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--op-lime);
  color:#fff;
  font-size:20px;
  font-weight:800;
  z-index:3;
}

.optima-step:nth-child(even) .optima-num{
  background:var(--op-dark);
}

.optima-icon img{
  width:52px;
  height:52px;
  display:block;
  object-fit:contain;
  filter:brightness(0) invert(1);
}

.optima-step h3{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  min-height:58px;
  margin:0 0 18px;
  font-size:16px;
  line-height:1.22;
  font-weight:750;
}

.optima-top{
  flex:1;
  min-height:130px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:18px 14px;
  color:#fff;
  background:linear-gradient(135deg,var(--op-dark),#3f8f00);
  border-radius:6px;
  font-size:13px;
  line-height:1.22;
  font-weight:750;
}

@media(max-width:1600px){

  .optima-roadmap{
    width:min(1000px,96vw);
  }

  .optima-steps{
    gap:12px;
    padding-left:8px;
    padding-right:8px;
  }

  .optima-icon{
    width:86px;
    height:86px;
  }

  .optima-icon img{
    width:44px;
    height:44px;
  }

  .optima-num{
    width:34px;
    height:34px;
    font-size:18px;
    right:15%;
  }

  .optima-step h3{
    min-height:54px;
    margin-bottom:14px;
    font-size:14px;
  }

  .optima-top{
    min-height:140px;
    padding:15px 11px;
    font-size:11.5px;
  }

}


@media(max-width:1024px){

  .optima-steps{
    grid-template-columns:repeat(3,1fr);
    gap:34px 18px;
    padding:20px 8px 34px;
  }

  .optima-steps:before{
    display:none;
  }

  .optima-icon{
    width:96px;
    height:96px;
  }

  .optima-step h3{
    min-height:54px;
    margin-bottom:14px;
    font-size:15px;
  }

  .optima-top{
    min-height:130px;
    margin:0;
    padding:18px 16px;
    font-size:14px;
  }

}


@media(max-width:640px){

  .optima-roadmap{
    width:100%;
    padding:0 12px 20px;
  }

  .optima-steps{
    grid-template-columns:1fr;
    gap:30px;
  }

  .optima-num{
    right:calc(50% - 62px);
  }

  .optima-step h3{
    min-height:auto;
    margin-bottom:14px;
    font-size:15px;
  }

  .optima-top{
    width:min(100%,420px);
    min-height:auto;
    margin:0 auto;
    padding:20px;
    font-size:14px;
  }

}