@charset "utf-8";
/* --- 核心結構 --- */
.Features02 {
  max-width:1024px;
  margin: 0 auto;
  padding: 50px 15px;
  font-family: "Microsoft JhengHei", sans-serif;
}

.header-section {
  text-align: center;
  margin-bottom: 60px;
}

.timeline-wrapper {
  position: relative;
  padding: 20px 0;
}

/* --- 背景曲線 --- */
.curve-svg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  /* 寬度增加到 250px-300px，曲線才會看起來更彎 */
  width: 280px; 
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* --- 單個步驟佈局 (關鍵) --- */
.step-item {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 150px; /* 控制步驟之間的間隔高度 */
  z-index: 2;
}

/* 圓圈節點 */
.node {
  width: 55px;
  height: 55px;
  background: linear-gradient(135deg, #87CEEB, #5185c5);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  margin: 0 10px; /* 文字與圓圈的間距 */
}

/* 文字方塊 */
.content {
	width:40%; /* 限制文字寬度 */
  border-radius:30px;
    background: #fff;
    transition:all 0.3s ease-in-out;
	border: 3px solid #eee;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	padding:20px;
}

.content h3 { color: #5185c5; margin:0; font-size: 1.2rem; }
.content p { color: #666; margin: 0; line-height: 1.4; }

/* --- 左右交錯逻辑 --- */
/* 奇數項 (1, 3, 5): 文字在右側 */
.step-item:nth-child(odd) {
  flex-direction: row; 
}
.step-item:nth-child(odd) .content {
  text-align: left;
}

/* 偶數項 (2, 4, 6): 文字在左側 */
.step-item:nth-child(odd) {
  flex-direction: row-reverse;
}
.step-item:nth-child(odd) .content {
  text-align: right;
}

/* --- RWD 手機版切換 --- */
@media (max-width: 768px) {
  .curve-svg { display: none; } /* 手機版隱藏曲線 */

  .step-item, 
  .step-item:nth-child(even), 
  .step-item:nth-child(odd) {
    flex-direction: row; /* 全部統一靠左排列 */
    justify-content: flex-start;
    text-align: left;
    margin-bottom: 30px;
    min-height: auto;
  }

  .node {
    margin: 0 20px 0 0;
    width: 45px;
    height: 45px;
  }

  .content {
    width: 100%;
  }

  /* 手機版補一條直線 */
  .timeline-wrapper::before {
    content: '';
    position: absolute;
    left: 22px;
    top: 0;
    width: 2px;
    height: 100%;
    background: #e0f2f1;
    z-index: 1;
  }
  .step-item:nth-child(odd) .content {
  text-align: left;
}
}