.sec_flow {
  background: linear-gradient(180deg, #08192c, #0a182b);
  .wrap { margin: 0 auto; padding: 100px 40px 105px; max-width: 1400px; }
  .heading { text-align: center; .kicker { margin-bottom: 18px; } h2 { font-size: 38px; font-weight: 800; line-height: 1.45em; letter-spacing: -.03em; } > p:last-child { margin-top: 15px; color: #bdcde4; font-size: 15px; } }
  .steps { position: relative; margin: 55px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; list-style: none; &::before { position: absolute; top: 57px; right: 8%; left: 8%; height: 1px; background: linear-gradient(90deg, #6bbdff, #739bff, #9d7bff); content: ""; } }
  .steps li { position: relative; text-align: center; .number { display: block; color: #95a8ff; font-family: var(--font-en); font-size: 14px; font-weight: 700; letter-spacing: .05em; } .circle { margin: 16px auto 19px; width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid #4e7dbe; border-radius: 50%; background: linear-gradient(145deg, #173e71, #143054); color: #d6e9ff; font-size: 23px; box-shadow: 0 0 25px #396ad283; } h3 { font-size: 17px; font-weight: 800; line-height: 1.5em; } p { margin: 10px auto 0; max-width: 190px; color: #aebfd7; font-size: 12px; line-height: 1.8em; } }
  .flow-note { margin-top: 36px; color: #a8bdd9; font-size: 13px; text-align: center; }
  .btn_ptn_2 { margin: 28px auto 0; width: fit-content; display: flex; }
  @media (max-width: 800px) { .wrap { padding: 80px 28px; } .steps { gap: 8px; } .steps li { h3 { font-size: 14px; } p { font-size: 11px; } } }
  @media (max-width: 650px) { .wrap { padding: 75px 18px; } .heading h2 { font-size: 29px; } .steps { margin: 40px auto 0; max-width: 460px; grid-template-columns: 1fr; gap: 0; &::before { top: 30px; bottom: 30px; left: 26px; right: auto; width: 1px; height: auto; } } .steps li { padding: 0 0 23px 0; display: grid; grid-template-columns: 54px 1fr; column-gap: 17px; text-align: left; .number { grid-column: 1; text-align: center; } .circle { margin: 5px 0 0; grid-column: 1; grid-row: 2 / 4; } h3 { margin-top: 7px; grid-column: 2; grid-row: 2; font-size: 16px; } p { margin: 4px 0 0; grid-column: 2; grid-row: 3; max-width: none; font-size: 12px; } } .flow-note { text-align: left; } }
}