.cftPage {
  background: #fff;
}

.cft h2,
.cft h3 {
  color: #2A2F36;
}

.cftProcess {
  background: #F4F7FB;
  padding: 56px 0 80px;
  overflow: hidden;
}

.cftProcess .titleBlock h2 {
  /*text-transform: capitalize;*/
}

.cftProcess .titleBlock p {
  max-width: 620px;
}

.cftDiagram {
  width: 940px;
  max-width: 100%;
  min-height: 540px;
  margin: 48px auto 0;
  position: relative;
}

.teamPills {
  position: absolute;
  top: 34px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 39px;
}

.teamPills.left {
  left: 0;
}

.teamPills.right {
  right: 0;
}

.teamPills span {
  width: 198px;
  height: 50px;
  border: 1px solid #CFDAE4;
  border-radius: 25px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  color: #2A2F36;
  line-height: 20px;
  position: relative;
}

.teamPills.left span::after,
.teamPills.right span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 132px;
  border-top: 1px dashed #CFDAE4;
  z-index: -1;
}

.teamPills.left span::after {
  left: 100%;
  transform: rotate(24deg);
  transform-origin: left center;
}

.teamPills.right span::after {
  right: 100%;
  transform: rotate(-24deg);
  transform-origin: right center;
}

.triangle {
  width: 540px;
  height: 420px;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  background: #0B3A5C;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  z-index: 4;
}

.triTop,
.triLeft,
.triRight {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
}

.triTop {
  left: 50%;
  top: 48px;
  width: 156px;
  height: 180px;
  color: #fff;
  background: #0086EC;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: translateX(-50%);
  padding-top: 68px;
}

.triLeft {
  left: 66px;
  bottom: 38px;
  width: 154px;
  height: 136px;
  color: #004D80;
  background: #4EE5FD;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  padding-top: 80px;
}

.triRight {
  right: 66px;
  bottom: 38px;
  width: 154px;
  height: 136px;
  color: #004D80;
  background: #7FB0D2;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  padding-top: 80px;
}

.cftCore {
  position: absolute;
  left: 50%;
  top: 275px;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: 26px;
  color: #fff;
  line-height: 34px;
  letter-spacing: 1px;
}

.flow {
  position: absolute;
  display: block;
}

.flow::before,
.flow::after {
  content: "";
  position: absolute;
}

.flowLeft,
.flowRight {
  width: 82px;
  height: 3px;
  top: 272px;
  background: #fff;
}

.flowLeft {
  left: 172px;
  transform: rotate(-55deg);
}

.flowRight {
  right: 172px;
  transform: rotate(55deg);
}

.flowBottom {
  left: 50%;
  bottom: 85px;
  width: 88px;
  height: 3px;
  background: #fff;
  transform: translateX(-50%);
}

.flowLeft::before,
.flowRight::before,
.flowBottom::before {
  top: -5px;
  left: -2px;
  width: 0;
  height: 0;
  border-right: 9px solid #fff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.flowLeft::after,
.flowRight::after,
.flowBottom::after {
  top: -5px;
  right: -2px;
  width: 0;
  height: 0;
  border-left: 9px solid #fff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.manager {
  width: 252px;
  height: 40px;
  background: #0B3A5C;
  border-radius: 20px;
  position: absolute;
  left: 50%;
  top: 454px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  z-index: 2;
}

@media (max-width: 1024px) {
  .cftProcess {
    padding: 64px 0;
  }

  .cftDiagram {
    width: 760px;
    min-height: 430px;
  }

  .teamPills span {
    width: 168px;
  }

  .teamPills.left span::after,
  .teamPills.right span::after {
    width: 96px;
  }

  .triangle {
    width: 300px;
    height: 300px;
  }

  .triTop {
    width: 110px;
    height: 135px;
    padding-top: 48px;
  }

  .triLeft,
  .triRight {
    bottom: 35px;
    width: 116px;
    height: 102px;
    padding-top: 38px;
  }

  .triLeft {
    left: 42px;
  }

  .triRight {
    right: 42px;
  }

  .cftCore {
    top: 172px;
  }

  .flowLeft,
  .flowRight {
    top: 174px;
  }

  .flowLeft {
    left: 94px;
  }

  .flowRight {
    right: 94px;
  }

  .flowBottom {
    bottom: 84px;
  }

  .manager {
    top: 354px;
  }
}

@media (max-width: 768px) {
  .cftProcess {
    padding: 52px 0;
  }

  .cftDiagram {
    min-height: 680px;
    margin-top: 40px;
  }

  .teamPills {
    top: 430px;
    gap: 12px;
  }

  .teamPills.left,
  .teamPills.right {
    width: calc(50% - 8px);
  }

  .teamPills.left {
    left: 0;
  }

  .teamPills.right {
    right: 0;
  }

  .teamPills span {
    width: 100%;
    height: 44px;
    font-size: 13px;
  }

  .teamPills span::after {
    display: none;
  }

  .triangle {
    top: 0;
    width: 300px;
    height: 300px;
  }

  .manager {
    top: 350px;
  }
}

@media (max-width: 480px) {
  .cftDiagram {
    min-height: 720px;
  }

  .triangle {
    width: min(320px, calc(100vw - 48px));
    height: min(320px, calc(100vw - 48px));
  }

  .triTop {
    width: 118px;
    height: 145px;
    top: 36px;
    padding-top: 54px;
    font-size: 14px;
    line-height: 20px;
  }

  .triLeft,
  .triRight {
    bottom: 36px;
    width: 124px;
    height: 110px;
    padding-top: 42px;
    font-size: 13px;
    line-height: 19px;
  }

  .triLeft {
    left: 42px;
  }

  .triRight {
    right: 42px;
  }

  .cftCore {
    top: 183px;
    font-size: 26px;
  }

  .flowLeft,
  .flowRight {
    top: 184px;
    width: 70px;
  }

  .flowLeft {
    left: 98px;
  }

  .flowRight {
    right: 98px;
  }

  .flowBottom {
    bottom: 90px;
    width: 72px;
  }

  .teamPills {
    top: 452px;
  }

  .manager {
    top: 374px;
    width: 250px;
  }
}