/* Base layout */
.four-phases{
  margin-top: 30px;
}


.four-phases__list{
  display: block;
}

.four-phases__item{
  display: flex;              /* icon left, text right */
  align-items: flex-start;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid #1a1f2a;
  width: 100%;
}

/* Icon column: responsive width (instead of 810px) */
.four-phases__icon{
  flex: 0 0 clamp(72px, 12vw, 160px);
  max-width: clamp(72px, 12vw, 160px);
}

/* Make the icon/image responsive */
.four-phases__icon img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* Text column fills remaining space */
.four-phases__content{
  flex: 1;
  min-width: 0; /* prevents overflow issues in flex layouts */
}

/* Section spacing: use responsive padding instead of huge margins */
.four-phases__inner{
  padding: clamp(16px, 3vw, 32px);
  margin: 0 auto;
  max-width: 1200px; /* optional, keeps content from getting too wide */
}

p.four-phases__subtitle{
  font-weight: bold;
}

/* --- Breakpoints --- */

/* Tablet */
@media (max-width: 1024px){
  .four-phases__item{
    gap: 16px;
    padding: 20px 0;
  }

  .four-phases__inner{
    padding: 24px;
  }
}

/* Mobile */
@media (max-width: 640px){
  .four-phases__item{
    flex-direction: column;   /* stack icon above text */
    gap: 12px;
    padding: 16px 0;
  }

  .four-phases__icon{
    flex: 0 0 auto;
    max-width: 96px;          /* keep icon from being huge */
  }

  .four-phases__inner{
    padding: 16px;
  }
}