.cedro-wrapper{
  font-family:'Segoe UI',sans-serif;
  background: radial-gradient(circle at top,#0f172a,#020617);
  color: #fff !important;;
  padding:60px 20px;
  text-align:center;
}

/* TITLE */
.cedro-wrapper h1{
  font-size:42px;
}
.cedro-wrapper h2{
  color: white!important;
}
.cedro-wrapper h3{
  color: white!important;
}

.cedro-wrapper p{
  max-width:700px;
  margin:auto;
  color:#cbd5e1;
}

/* FLOW */
.cedro-flow{
  max-width:1100px;
  margin:50px auto;
}

.cedro-line{
  height:6px;
  background:#1e293b;
  border-radius:10px;
}

.cedro-progress{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#3b82f6,#8b5cf6,#f97316,#22c55e,#14b8a6);
  border-radius:10px;
  transition:0.5s;
}

/* STEPS */
.cedro-steps{
  display:flex;
  justify-content:space-between;
  margin-top:-23px;
}

.cedro-step{
  cursor:pointer;
}

.cedro-step .dot{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#1e293b;
  display:flex;
  align-items:center;
  justify-content:center;
}

.cedro-step.active .dot{
  background:#38bdf8;
  box-shadow:0 0 20px #38bdf8;
  transform:scale(1.2);
}

/* GRID */
.cedro-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  margin-top:60px;
}

@media(max-width:900px){
  .cedro-grid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:500px){
  .cedro-grid{grid-template-columns:1fr;}
}

/* CARD */
.cedro-card{
  padding:30px;
  border-radius:20px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  cursor:pointer;
  transition:0.4s;
}

.cedro-card:hover{
  transform:translateY(-10px);
}

.cedro-card.active{
  border:1px solid #38bdf8;
  box-shadow:0 0 25px #38bdf8;
}

.icon{
  font-size:30px;
}

.desc{
  opacity:0;
  max-height:0;
  transition:0.4s;
}

.cedro-card.active .desc{
  opacity:1;
  max-height:200px;
  margin-top:10px;
}
/* FORCE VERTICAL LAYOUT */
.cedro-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* ICON ALWAYS TOP */
.cedro-card .icon{
  display:block !important;
  width:100%;
  font-size:32px;
  margin-bottom:12px;
}

/* TITLE BELOW ICON */
.cedro-card h3{
  display:block !important;
  width:100%;
  margin:0;
}

/* REMOVE ANY INLINE BEHAVIOUR */
.cedro-card h3,
.cedro-card .icon{
  float:none !important;
  position:relative;
}

/* DESCRIPTION */
.cedro-desc{
  text-align:center;
}

.cedro-card h3 span{
  display:block;
}

.card::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,0.2),transparent);
  opacity:0;
  transition:0.4s;
}