@charset "UTF-8";

/* ======================================================
   STEPS TO IMPLEMENTATION — SHARED RULES (both sections)
   ====================================================== */

#steps_to_implementation + div.composite_box01 .wrapper_item,
#steps_to_implementation2 + div.composite_box01 .wrapper_item {
  --card-gap: 30px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
}

#steps_to_implementation + div.composite_box01 .inner_item,
#steps_to_implementation2 + div.composite_box01 .inner_item {
  position: relative;
  background-color: #e4f4fa;
  border-radius: 12px;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1 1 calc(25% - var(--card-gap) * 3 / 4);
  box-sizing: border-box;
}

#steps_to_implementation + div.composite_box01 .inner_item_txt,
#steps_to_implementation + div.composite_box01 .inner_item_txt .heading.block_header_4,
#steps_to_implementation2 + div.composite_box01 .inner_item_txt,
#steps_to_implementation2 + div.composite_box01 .inner_item_txt .heading.block_header_4 {
  display: contents;
}

#steps_to_implementation + div.composite_box01 .inner_item_txt .heading.block_header_4 h3.h,
#steps_to_implementation2 + div.composite_box01 .inner_item_txt .heading.block_header_4 h3.h {
  order: 1;
  color: #343434;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 18px;
}

#steps_to_implementation + div.composite_box01 .inner_item > a,
#steps_to_implementation2 + div.composite_box01 .inner_item > a {
  display: none;
}

#steps_to_implementation + div.composite_box01 .inner_item::before,
#steps_to_implementation2 + div.composite_box01 .inner_item::before {
  order: 2;
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 0 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#steps_to_implementation + div.composite_box01 .inner_item_txt .heading.block_header_4 p,
#steps_to_implementation2 + div.composite_box01 .inner_item_txt .heading.block_header_4 p {
  order: 3;
  color: #767676;
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

#steps_to_implementation + div.composite_box01 .inner_item::after,
#steps_to_implementation2 + div.composite_box01 .inner_item::after {
  content: "\203A";
  position: absolute;
  top: 50%;
  right: calc(-1 * (var(--card-gap) / 2) - 8px);
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 45px;
  line-height: 1;
  font-weight: 400;
  color: #7fb8d6;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 1;
}

#steps_to_implementation + div.composite_box01 .inner_item:nth-child(4)::after,
#steps_to_implementation2 + div.composite_box01 .inner_item:nth-child(4)::after {
  content: none;
}

#steps_to_implementation_icon + div.contents_hr  {
  display: none;
}

/* Custom arrow icon — using + to target the sibling that follows this anchor */
#steps_to_implementation_icon + div.contents_hr .inner_item::after {
  content: "\203A";
  position: absolute;
  top: 50%;
  right: calc(-1 * (var(--card-gap) / 2) - 8px);
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 45px;
  line-height: 1;
  font-weight: 400;
  color: #7fb8d6;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 1;
}

/* Selected state — same combinator pattern */
#steps_to_implementation_icon + div.contents_hr .inner_item.is-selected::after {
  content: "\203A";
  color: #ffffff;
  background-color: #7fb8d6;
  border-radius: 50%;
}


#steps_to_implementation_icon + .contents_hr.block_line_3 hr {
    width: 12px !important;
    height: 12px;
    top: calc(50% - 10px);
}

@media (max-width: 1071px) {

#steps_to_implementation_icon + div.contents_hr  {
  display: block;
}



  #steps_to_implementation + div.composite_box01 .wrapper_item,
  #steps_to_implementation2 + div.composite_box01 .wrapper_item {
    --card-gap: 36px;
    flex-direction: column;
  }
#steps_to_implementation + div.composite_box01 .wrapper_item,
#steps_to_implementation2 + div.composite_box01 .wrapper_item {
  gap: var(--card-gap);
}
  #steps_to_implementation + div.composite_box01 .inner_item,
  #steps_to_implementation2 + div.composite_box01 .inner_item {
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0 !important;
  }

  #steps_to_implementation + div.composite_box01 .inner_item::after,
  #steps_to_implementation2 + div.composite_box01 .inner_item::after {
    top: auto;
    right: 50%;
    bottom: calc(-1 * (var(--card-gap) / 2) - 12px);
    transform: translateX(50%) rotate(90deg);
  }

  #steps_to_implementation + div.composite_box01 .inner_item:nth-child(4)::after,
  #steps_to_implementation2 + div.composite_box01 .inner_item:nth-child(4)::after {
    content: none;
  }
}


/* ======================================================
   ICONS — the only part that differs between sections
   ====================================================== */

/* --- Section 1: Contact Us / Discussing Needs / Free Appraisal / Brokerage Agreement --- */

#steps_to_implementation + div.composite_box01 .inner_item:nth-child(1)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fb8d6' stroke-width='1.5'><path d='M4 5c0-1 1-2 2-2h2l2 4-2 1.5c1 2.5 3 4.5 5.5 5.5L15 12l4 2v2c0 1-1 2-2 2C10 18 4 12 4 5z'/></svg>");
}
#steps_to_implementation + div.composite_box01 .inner_item:nth-child(2)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fb8d6' stroke-width='1.5'><circle cx='9' cy='7' r='3'/><path d='M3 20c0-3 2.5-5 6-5s6 2 6 5'/><circle cx='17' cy='8' r='2.3'/><path d='M15.5 12c2.8 0 5 1.8 5 4.5'/></svg>");
}
#steps_to_implementation + div.composite_box01 .inner_item:nth-child(3)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fb8d6' stroke-width='1.5'><circle cx='10' cy='10' r='6'/><path d='M14.5 14.5L21 21'/><path d='M8 10h4M10 8v4'/></svg>");
}
#steps_to_implementation + div.composite_box01 .inner_item:nth-child(4)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fb8d6' stroke-width='1.5'><path d='M6 2h9l3 3v17H6z'/><path d='M15 2v3h3'/><path d='M9 12h6M9 15h4'/><path d='M9.5 19.5l2-4.5 4.5-4.5 2 2-4.5 4.5z'/></svg>");
}

/* --- Section 2: Sales Activities / Sales Contract / Settlement / Handover --- */

#steps_to_implementation2 + div.composite_box01 .inner_item:nth-child(1)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fb8d6' stroke-width='1.5'><path d='M3 10v4h3l5 4V6l-5 4H3z'/><path d='M15 9c1.2 1 1.2 5 0 6M18 6c2.3 2 2.3 10 0 12'/></svg>");
}
#steps_to_implementation2 + div.composite_box01 .inner_item:nth-child(2)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fb8d6' stroke-width='1.5'><path d='M6 2h9l3 3v17H6z'/><path d='M15 2v3h3'/><path d='M9.5 14.5l2 2 4-4.5'/></svg>");
}
#steps_to_implementation2 + div.composite_box01 .inner_item:nth-child(3)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fb8d6' stroke-width='1.5'><rect x='2.5' y='6' width='19' height='13' rx='1.5'/><path d='M2.5 10h19'/><circle cx='17' cy='14.5' r='1.2'/></svg>");
}
#steps_to_implementation2 + div.composite_box01 .inner_item:nth-child(4)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fb8d6' stroke-width='1.5'><circle cx='7.5' cy='15.5' r='4'/><path d='M10.8 12.2L20 3M16 7l3 3M13 10l2.5 2.5'/></svg>");
}