.wrap {
  padding: 40px 0;
}

h1, p {
  text-align: center;
}

.process-container {
  position: relative;
  margin-top: 50px;
  width: 100%;
  min-height: 450px;
}

/* Background S-Curve Path */
.snake-path {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.step-nodes {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}

/* Base style for individual step items */
.step-node {
  position: absolute;
  text-align: center;
  /* width: 160px; */
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-in-out;
}

.step-node.show {
  opacity: 1;
  transform: translateY(0);
}

.step-node .icon {
  font-size: 58px;
  margin-bottom: 4px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

.step-node .num {
  display: none;
  /* font-size: 10px; */
  font-weight: bold;
  color: #ff8a00;
  text-transform: uppercase;
}

.step-node h3 {
  margin: -23px 0 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

/* Positioning steps precisely on top of the S-curve line */

/* Row 1 (Left to Right) - Line Y ~ 100px */
.step-1 { top: -45px;  left: 5%; }
.step-2 { top: -45px;  left:40%; }
.step-3 { top: 95px;  left: 20%; }

/* Row 2 (Right to Left) - Line Y ~ 350px */
.step-4 { top: 95px; left: 60%; }
.step-5 { top: 225px; left: 30%; }

/* Row 3 (Left to Right) - Line Y ~ 600px */
.step-6 { top: 225px; left: 75%; }

/* Responsive Adjustments for Mobile Screens */
@media (max-width: 768px) {
  .snake-path {
    display: none; /* Hide curve on small screens for vertical stack */
  }

  .process-container {
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .step-node {
    position: relative;
    top: auto !important;
    left: auto !important;
    width: 100%;
    max-width: 280px;
    background: #fff;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  }
}