@charset "UTF-8";

/* TASK06: all styles belong only to the approved solution section. */
#strengths { position: relative; isolation: isolate; padding: 0; overflow: clip; color: #06132b; background: #fff; }
#strengths .strengths-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
#strengths .strengths-layout { width: min(1300px, calc(100% - 80px)); display: grid; grid-template-columns: 48% 52%; min-height: 576px; }
#strengths .strengths-copy { min-width: 0; padding-block: 108px 64px; }
#strengths h2 { color: #030e2f; font-size: clamp(34px, 3.75vw, 54px); font-weight: 900; line-height: 1.5; letter-spacing: -.055em; overflow-wrap: normal; }
#strengths .strengths-title-line { display: block; white-space: nowrap; }
#strengths .strengths-title-ending { display: inline-block; }
#strengths h2 mark { display: inline-block; position: relative; isolation: isolate; color: #006dff; font-size: 1.17em; line-height: 1; padding: 0; background: none; }
#strengths h2 mark::before { content: ""; position: absolute; inset: auto 0 -.12em; height: .24em; background: #ffdc12; z-index: -1; }
#strengths .strengths-description { margin-top: 24px; max-width: 620px; color: #071521; font-size: 22px; font-weight: 500; line-height: 1.5; letter-spacing: -.025em; text-wrap: balance; }

#strengths .strengths-visual { position: relative; align-self: start; width: calc(100% + 36px); aspect-ratio: 985 / 698; margin-top: 52px; }
#strengths .strengths-connections { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #128dff; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0 18; }
#strengths .strengths-callouts { position: absolute; inset: 0; z-index: 1; }
#strengths .strengths-callouts li { position: absolute; width: 22%; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; padding: 10px 4px; border: 5px solid #daf1ff; border-radius: 50%; background: rgba(242,250,255,.92); }
#strengths .strengths-callouts li:nth-child(1) { left: 13.1%; top: 12%; }
#strengths .strengths-callouts li:nth-child(2) { left: 41.1%; top: 0; }
#strengths .strengths-callouts li:nth-child(3) { left: 70.8%; top: 12.3%; }
#strengths .strengths-callout-icon { width: 48px; height: 48px; fill: #0085ff; flex-shrink: 0; }
#strengths .strengths-callout-text { color: #071521; font-size: 18px; font-weight: 900; line-height: 1.4; letter-spacing: -.035em; text-align: center; }
#strengths .strengths-art { position: absolute; inset: auto 0 0; }
/* The first 22 source pixels contain remnants of the old circles/dots only. */
#strengths .strengths-illustration { width: 100%; height: auto; clip-path: inset(5.27% 0 0); }
#strengths .strengths-official-logo { position: absolute; left: 28.6%; top: 14.8%; width: 13.2%; height: auto; }

@media (min-width: 901px) and (max-width: 1250px) {
  #strengths .strengths-layout { width: calc(100% - 56px); min-height: 500px; }
  #strengths .strengths-copy { padding-block: 88px 60px; }
  #strengths .strengths-description { font-size: 17px; line-height: 1.8; }
  #strengths .strengths-visual { width: calc(100% + 18px); margin-top: 64px; }
  #strengths .strengths-callouts li { gap: 5px; border-width: 4px; padding-block: 8px; }
  #strengths .strengths-callout-icon { width: 36px; height: 36px; }
  #strengths .strengths-callout-text { font-size: clamp(12px, 1.25vw, 16px); }
}

@media (max-width: 900px) {
  #strengths { padding-block: 48px 24px; }
  #strengths .strengths-layout { width: min(680px, calc(100% - 40px)); grid-template-columns: 1fr; min-height: 0; }
  #strengths .strengths-copy { padding: 0; }
  #strengths h2 { font-size: clamp(34px, 6.5vw, 46px); }
  #strengths .strengths-title-line { white-space: normal; }
  #strengths .strengths-description { font-size: 18px; max-width: none; line-height: 1.8; text-wrap: wrap; }
  #strengths .strengths-visual { width: 100%; margin-top: 32px; }
  #strengths .strengths-callout-text { font-size: clamp(13px, 2.2vw, 17px); }
  #strengths .strengths-callout-icon { width: clamp(32px, 5.47vw, 42px); height: clamp(32px, 5.47vw, 42px); }
}

@media (max-width: 600px) {
  #strengths { padding-block: 40px 28px; }
  #strengths .strengths-backdrop { opacity: .55; }
  #strengths h2 { font-size: clamp(26px, 7.7vw, 33px); line-height: 1.5; letter-spacing: -.055em; }
  #strengths h2 mark { font-size: 1em; }
  #strengths .strengths-description { margin-top: 20px; font-size: 16px; line-height: 1.85; letter-spacing: 0; }
  #strengths .strengths-visual { aspect-ratio: auto; margin-top: 24px; }
  #strengths .strengths-connections { display: none; }
  #strengths .strengths-callouts { position: static; display: grid; gap: 8px; }
  #strengths .strengths-callouts li { position: static; width: 100%; aspect-ratio: auto; min-height: 64px; flex-direction: row; justify-content: flex-start; gap: 18px; padding: 9px 22px; border-width: 2px; border-radius: 16px; background: #f8fcff; }
  #strengths .strengths-callout-icon { width: 36px; height: 36px; }
  #strengths .strengths-callout-text { font-size: 15px; font-weight: 700; line-height: 1.4; letter-spacing: 0; text-align: left; }
  #strengths .strengths-art { position: relative; margin-top: 12px; }
}