/* Public Sans is loaded from the official Google Fonts stylesheet in index.html.
   Keeping font delivery outside this component CSS avoids shipping a font binary
   while still locking the intended family and variable weight range. */
.why-choose-one {
  --why-ref-width: 1037px;
  --why-ref-height: 885px;
  --why-bg: #f3f9fd;
  --why-title: #17324a;
  --why-copy: #5a7185;
  --why-line-rgb: 84, 111, 132;
  --why-counter: rgba(23, 50, 74, 0.12);
  --why-counter-text: #17324a;
  --why-font: "Public Sans", Arial, Helvetica, sans-serif;

  width: 100%;
  overflow: hidden;
  background: var(--why-bg);
  color: var(--why-title);
  font-family: var(--why-font);
}

.why-choose-one,
.why-choose-one *,
.why-choose-one *::before,
.why-choose-one *::after {
  box-sizing: border-box;
}

/* Standalone preview helper only. It has no effect unless this opt-in class is used. */
.why-choose-demo {
  margin: 0;
  min-height: 100%;
  background: #f3f9fd;
}

.why-choose-one__stage {
  position: relative;
  width: min(100%, var(--why-ref-width));
  height: var(--why-ref-height);
  margin-inline: auto;
  overflow: hidden;
  isolation: isolate;
  background: var(--why-bg);
}

.why-choose-one__grid-wrap {
  position: absolute;
  left: 4.7252%;
  right: 4.0501%;
  top: 104px;
  height: 721px;
}

.why-choose-one__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 48.6824% 51.3176%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: why-item;
}

.why-choose-one__item {
  position: relative;
  display: block;
  width: auto;
  max-width: none;
  height: auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  counter-increment: why-item;
}

.why-choose-one__single {
  position: absolute;
  inset: 0;
}

.why-choose-one__copy {
  position: absolute;
  width: 367px;
}

/* Preserve the intentional source asymmetry. */
.why-choose-one__item--left .why-choose-one__copy {
  right: 76px;
  text-align: right;
}

.why-choose-one__item--right .why-choose-one__copy {
  left: 75px;
  text-align: left;
}

.why-choose-one__item--top .why-choose-one__copy { top: 91px; }
.why-choose-one__item--bottom .why-choose-one__copy { top: 144px; }

.why-choose-one__title {
  margin: 0;
  color: var(--why-title);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.65px;
  white-space: nowrap;
}

/* The host page assigns a Persian heading face to every h3; keep this package's
   supplied Public Sans typography scoped and deterministic inside the component. */
.why-choose-one .why-choose-one__title {
  font-family: var(--why-font);
  font-weight: 800;
}

.why-choose-one__text {
  width: 367px;
  margin: 25px 0 0;
  color: var(--why-copy);
  font-size: 24px;
  font-weight: 400;
  line-height: 39px;
  letter-spacing: -0.2px;
}

.why-choose-one__icon {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.why-choose-one__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.why-choose-one__item--planning .why-choose-one__icon {
  width: 76px;
  aspect-ratio: 76 / 84;
  right: 71px;
  top: -8px;
}

.why-choose-one__item--factory .why-choose-one__icon {
  width: 82px;
  aspect-ratio: 82 / 84;
  left: 67px;
  top: -8px;
}

.why-choose-one__item--design .why-choose-one__icon {
  width: 87px;
  aspect-ratio: 87 / 81;
  right: 66px;
  top: 45px;
}

.why-choose-one__item--worker .why-choose-one__icon {
  width: 84px;
  aspect-ratio: 84 / 85;
  left: 66px;
  top: 45px;
}

.why-choose-one__count {
  display: none;
}

.why-choose-one__count::before {
  content: counter(why-item, decimal-leading-zero);
}

.why-choose-one__divider {
  position: absolute;
  z-index: 5;
  display: block;
  pointer-events: none;
}

.why-choose-one__divider--vertical {
  left: calc(50% - 1px);
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(var(--why-line-rgb), .42) 0 50%,
    rgba(var(--why-line-rgb), .14) 50% 100%
  );
}

.why-choose-one__divider--horizontal {
  left: 0;
  top: calc(48.6824% - 1px);
  width: 100%;
  height: 3px;
  background: linear-gradient(
    to bottom,
    rgba(var(--why-line-rgb), .34) 0 33.333%,
    rgba(var(--why-line-rgb), .52) 33.333% 66.666%,
    rgba(var(--why-line-rgb), .16) 66.666% 100%
  );
}

.why-choose-one__counter {
  --why-counter-size: 132px;
  --why-counter-piece-size: calc(var(--why-counter-size) * 0.462121);
  --why-counter-pad-x: calc(var(--why-counter-size) * 0.106061);
  --why-counter-pad-top: calc(var(--why-counter-size) * 0.075758);
  --why-counter-pad-bottom: calc(var(--why-counter-size) * 0.060606);

  position: absolute;
  z-index: 4;
  left: 50%;
  top: 48.6824%;
  width: var(--why-counter-size);
  height: var(--why-counter-size);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.why-choose-one__counter-piece {
  position: absolute;
  display: flex;
  width: var(--why-counter-piece-size);
  height: var(--why-counter-piece-size);
  align-items: center;
  justify-content: center;
  color: var(--why-counter-text);
  background: var(--why-counter);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.6px;
}

.why-choose-one__counter-piece::before {
  display: block;
  line-height: 1;
}

.why-choose-one__counter-piece--tl::before { content: "01"; }
.why-choose-one__counter-piece--tr::before { content: "02"; }
.why-choose-one__counter-piece--bl::before { content: "03"; }
.why-choose-one__counter-piece--br::before { content: "04"; }

/* The central topology keeps its original number pseudo-content so the
   counter can be restored by removing data-counter-mode="led" (or setting it
   to "numbers"). LED mode only changes the presentation layer. */
.why-choose-one[data-counter-mode="led"] .why-choose-one__counter-piece {
  color: transparent;
  font-size: 0;
}

.why-choose-one[data-counter-mode="led"] .why-choose-one__counter-piece::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: clamp(12px, 0.9vw, 14px);
  aspect-ratio: 1;
  flex: none;
  transform: translate(-50%, -50%);
  border: 2px solid var(--afg-surface);
  border-radius: 50%;
  background: var(--afg-accent);
  box-shadow: 0 0 0 1px rgb(var(--afg-shadow-rgb) / 18%);
}

.why-choose-one__counter::after {
  content: "";
  position: absolute;
  z-index: 8;
  left: 49.2424%;
  top: 50%;
  width: 1px;
  height: 1px;
  background: rgba(var(--why-line-rgb), .16);
}

.why-choose-one__counter-piece--tl {
  left: 0;
  top: 0;
  border-radius: var(--why-counter-piece-size) 0 0 0;
  padding: var(--why-counter-pad-top) 0 0 var(--why-counter-pad-x);
}

.why-choose-one__counter-piece--tr {
  right: 0;
  top: 0;
  border-radius: 0 var(--why-counter-piece-size) 0 0;
  padding: var(--why-counter-pad-top) var(--why-counter-pad-x) 0 0;
}

.why-choose-one__counter-piece--bl {
  left: 0;
  bottom: 0;
  border-radius: 0 0 0 var(--why-counter-piece-size);
  padding: 0 0 var(--why-counter-pad-bottom) var(--why-counter-pad-x);
}

.why-choose-one__counter-piece--br {
  right: 0;
  bottom: 0;
  border-radius: 0 0 var(--why-counter-piece-size) 0;
  padding: 0 var(--why-counter-pad-x) var(--why-counter-pad-bottom) 0;
}

/* Fluid 2×2 scaling down to the tablet bridge. */
@media (max-width: 1036px) and (min-width: 821px) {
  .why-choose-one__stage {
    width: 100%;
    height: max(700px, 85.3423vw);
  }

  .why-choose-one__grid-wrap {
    top: clamp(82px, 10.029vw, 104px);
    height: clamp(571px, 69.5275vw, 721px);
  }

  .why-choose-one__copy {
    width: 77.59%;
  }

  .why-choose-one__item--left .why-choose-one__copy { right: 16.07%; }
  .why-choose-one__item--right .why-choose-one__copy { left: 15.86%; }
  .why-choose-one__item--top .why-choose-one__copy { top: 25.93%; }
  .why-choose-one__item--bottom .why-choose-one__copy { top: 38.92%; }

  .why-choose-one__title {
    font-size: clamp(27px, 3.28vw, 34px);
  }

  .why-choose-one__text {
    width: 100%;
    margin-top: clamp(20px, 2.41vw, 25px);
    font-size: clamp(19px, 2.31vw, 24px);
    line-height: clamp(31px, 3.76vw, 39px);
  }

  .why-choose-one__item--planning .why-choose-one__icon {
    width: 16.07%; right: 15.01%; top: -2.28%;
  }
  .why-choose-one__item--factory .why-choose-one__icon {
    width: 17.34%; left: 14.16%; top: -2.28%;
  }
  .why-choose-one__item--design .why-choose-one__icon {
    width: 18.39%; right: 13.95%; top: 12.16%;
  }
  .why-choose-one__item--worker .why-choose-one__icon {
    width: 17.76%; left: 13.95%; top: 12.16%;
  }

  .why-choose-one__counter {
    --why-counter-size: clamp(106px, 12.73vw, 132px);
  }

  .why-choose-one__counter-piece {
    font-size: clamp(19px, 2.31vw, 24px);
  }
}

/* Tablet bridge: preserve the same 2×2 topology and center-cross identity used
   above 820px. Geometry gains vertical room as the viewport narrows, while
   typography recovers toward the original tablet scale instead of staying
   compressed. This removes the 821↔820 topology discontinuity altogether. */
@media (max-width: 820px) and (min-width: 576px) {
  .why-choose-one__stage {
    width: 100%;
    height: clamp(705px, calc(1407.37px - 85.66vw), 914px);
  }

  .why-choose-one__grid-wrap {
    left: clamp(28px, 4.7252%, 39px);
    right: clamp(24px, 4.0501%, 34px);
    top: clamp(62px, calc(16.4px + 8vw), 82px);
    height: clamp(571px, calc(1323.8px - 91.8vw), 795px);
  }

  .why-choose-one__grid {
    grid-template-columns: 50% 50%;
    grid-template-rows: 48.6824% 51.3176%;
  }

  .why-choose-one__copy {
    width: 78%;
  }

  .why-choose-one__item--left .why-choose-one__copy {
    right: 16%;
    text-align: right;
  }

  .why-choose-one__item--right .why-choose-one__copy {
    left: 16%;
    text-align: left;
  }

  .why-choose-one__item--top .why-choose-one__copy {
    top: clamp(65px, calc(41.5px + 3.72vw), 72px);
  }

  .why-choose-one__item--bottom .why-choose-one__copy {
    top: clamp(108px, calc(145px - 4.5vw), 120px);
  }

  .why-choose-one__title {
    font-size: clamp(27px, calc(59.8px - 4vw), 32px);
    line-height: 1.12;
    white-space: normal;
  }

  .why-choose-one__text {
    width: 100%;
    margin-top: clamp(20px, calc(10.8px + 1.5vw), 22px);
    font-size: clamp(19px, calc(27.2px - 1vw), 21px);
    line-height: clamp(31px, calc(37.4px - .78vw), 33px);
  }

  .why-choose-one__item--planning .why-choose-one__icon {
    width: clamp(58px, 16.07%, 60px);
    right: 15%;
    top: -2.2%;
  }

  .why-choose-one__item--factory .why-choose-one__icon {
    width: clamp(60px, 17.34%, 64px);
    left: 14.2%;
    top: -2.2%;
  }

  .why-choose-one__item--design .why-choose-one__icon {
    width: clamp(61px, 18.39%, 66px);
    right: 14%;
    top: 12.2%;
  }

  .why-choose-one__item--worker .why-choose-one__icon {
    width: clamp(60px, 17.76%, 64px);
    left: 14%;
    top: 12.2%;
  }

  .why-choose-one__counter {
    --why-counter-size: clamp(94px, calc(70.4px + 4.34vw), 106px);
  }

  .why-choose-one__counter-piece {
    font-size: clamp(18px, calc(15.64px + .434vw), 19px);
  }
}

/* Converge typography toward the mobile stack before the topology switch. */
@media (max-width: 699px) and (min-width: 576px) {
  .why-choose-one__title {
    font-size: clamp(30px, calc(20.71px + 1.61vw), 32px);
  }

  .why-choose-one__text {
    font-size: clamp(20px, calc(15.355px + .806vw), 21px);
    line-height: clamp(32px, calc(27.355px + .806vw), 33px);
  }
}

/* Mobile stack. The topology changes only after the two-column composition has
   naturally run out of horizontal room. Row height is tuned so 576↔575 also
   converges geometrically instead of introducing a replacement height jump. */
@media (max-width: 575px) {
  .why-choose-one {
    --why-compact-edge-x: clamp(18px, calc(1.742px + 3.871vw), 24px);
    --why-compact-indent: clamp(78px, calc(40.065px + 9.032vw), 92px);
    --why-compact-copy-right: clamp(40px, calc(23.742px + 3.871vw), 46px);
    --why-compact-icon-size: clamp(58px, calc(41.742px + 3.871vw), 64px);
    --why-compact-wrap-top: clamp(36px, calc(65.419px - 5.161vw), 44px);
    --why-compact-wrap-bottom: clamp(40px, calc(72.516px - 5.677vw), 49px);
    --why-compact-item-top: clamp(34px, calc(63.161px - 5.161vw), 42px);
    --why-compact-item-bottom: clamp(28px, calc(50.581px - 3.871vw), 34px);
    --why-compact-row-min: clamp(205px, calc(483.226px - 48.387vw), 280px);
  }

  .why-choose-one__stage {
    width: 100%;
    height: auto;
    min-height: 0;
  }

  .why-choose-one__grid-wrap {
    position: relative;
    inset: auto;
    height: auto;
    padding:
      var(--why-compact-wrap-top)
      var(--why-compact-edge-x)
      var(--why-compact-wrap-bottom);
  }

  .why-choose-one__grid {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
  }

  .why-choose-one__item {
    min-height: var(--why-compact-row-min);
    border-bottom: 1px solid rgba(var(--why-line-rgb), .32);
  }

  .why-choose-one__item:last-child { border-bottom: 0; }

  .why-choose-one__single {
    position: relative;
    inset: auto;
    min-height: var(--why-compact-row-min);
    padding:
      var(--why-compact-item-top)
      0
      var(--why-compact-item-bottom)
      var(--why-compact-indent);
  }

  .why-choose-one__item .why-choose-one__copy {
    position: static;
    inset: auto;
    width: auto;
    padding-right: var(--why-compact-copy-right);
    text-align: left;
  }

  .why-choose-one__title {
    font-size: clamp(27px, calc(18.871px + 1.935vw), 30px);
    white-space: normal;
  }

  .why-choose-one__text {
    width: auto;
    margin-top: clamp(18px, calc(12.581px + 1.29vw), 20px);
    font-size: clamp(17px, calc(8.871px + 1.935vw), 20px);
    line-height: 1.55;
  }

  .why-choose-one__item .why-choose-one__icon {
    left: 0;
    right: auto;
    top: var(--why-compact-item-top);
    width: var(--why-compact-icon-size);
    height: var(--why-compact-icon-size);
    aspect-ratio: auto;
  }

  .why-choose-one__count {
    position: absolute;
    right: 0;
    top: var(--why-compact-item-top);
    display: block;
    color: rgba(23, 50, 74, .46);
    font-size: clamp(18px, calc(12.581px + 1.29vw), 20px);
    font-weight: 800;
  }

  .why-choose-one__divider,
  .why-choose-one__counter {
    display: none;
  }
}

/* In-page compact variant: scale the supplied desktop geometry inside the two-column service column. */
@media (min-width: 1121px) {
  .why-choose-one--compact {
    --why-package-scale: .68;
    --why-package-grid-top: 72px;
  }

  .why-choose-one--compact .why-choose-one__stage {
    width: calc(var(--why-ref-width) * var(--why-package-scale));
    height: calc(var(--why-ref-height) * var(--why-package-scale));
    margin-inline: auto;
  }

  .why-choose-one--compact .why-choose-one__grid-wrap {
    top: calc(var(--why-package-grid-top) * var(--why-package-scale));
    right: auto;
    left: calc(49px * var(--why-package-scale));
    width: 946px;
    height: 721px;
    transform: scale(var(--why-package-scale));
    transform-origin: top left;
  }
}

/* Persian content variant: keep the supplied topology while using the site's
   Persian face and the project's Material Design icon font. */
.why-choose-one[lang="fa"] {
  --why-font: "IRANSansX", "IRANYekanX", Tahoma, Arial, sans-serif;
  --why-icon: var(--slc-color-action, #176a9f);
}

.why-choose-one[lang="fa"] .why-choose-one__copy {
  direction: rtl;
}

.why-choose-one[lang="fa"] .why-choose-one__title {
  white-space: normal;
  text-wrap: balance;
}

.why-choose-one[lang="fa"] .why-choose-one__icon {
  display: none;
  place-items: center;
  color: var(--why-icon);
}

.why-choose-one[lang="fa"] .why-choose-one__icon .mdi {
  display: block;
  color: currentColor;
  font-size: 72px;
  line-height: 1;
}

.why-choose-one[lang="fa"][data-show-icons="true"] .why-choose-one__icon {
  display: grid;
}

@media (min-width: 1121px) {
  .why-choose-one--compact[lang="fa"] .why-choose-one__title {
    font-size: 40px;
    line-height: 1.16;
  }

  .why-choose-one--compact[lang="fa"] .why-choose-one__text {
    font-size: 28px;
    line-height: 42px;
  }
}

/* The Persian copy is longer than the supplied English sample. Give the
   compact desktop grid a little more vertical room and move its divider with
   the tracks so every paragraph stays inside its own quadrant. */
@media (min-width: 1121px) {
  .why-choose-one--compact[lang="fa"] {
    --why-package-grid-height: 820px;
    --why-package-stage-height: 900px;
    --why-package-top-row: 47.5%;
  }

  .why-choose-one--compact[lang="fa"][data-show-icons="true"] {
    --why-package-grid-height: 880px;
    --why-package-stage-height: 960px;
  }

  .why-choose-one--compact[lang="fa"] .why-choose-one__stage {
    height: calc(var(--why-package-stage-height) * var(--why-package-scale));
  }

  .why-choose-one--compact[lang="fa"] .why-choose-one__grid-wrap {
    height: var(--why-package-grid-height);
  }

  .why-choose-one--compact[lang="fa"] .why-choose-one__grid {
    grid-template-rows: var(--why-package-top-row) calc(100% - var(--why-package-top-row));
  }

  .why-choose-one--compact[lang="fa"][data-show-icons="true"] .why-choose-one__item--top .why-choose-one__copy {
    top: 78px;
  }

  .why-choose-one--compact[lang="fa"][data-show-icons="true"] .why-choose-one__item--bottom .why-choose-one__copy {
    top: 120px;
  }

  .why-choose-one--compact[lang="fa"]:not([data-show-icons="true"]) .why-choose-one__item--top .why-choose-one__copy {
    top: 28px;
  }

  .why-choose-one--compact[lang="fa"]:not([data-show-icons="true"]) .why-choose-one__item--bottom .why-choose-one__copy {
    top: 72px;
  }

  .why-choose-one--compact[lang="fa"] .why-choose-one__divider--horizontal {
    top: calc(var(--why-package-top-row) - 1px);
  }

  .why-choose-one--compact[lang="fa"] .why-choose-one__counter {
    top: var(--why-package-top-row);
  }
}

.why-choose-one[lang="fa"] .why-choose-one__item--left .why-choose-one__copy {
  text-align: right;
}

.why-choose-one[lang="fa"] .why-choose-one__item--right .why-choose-one__copy {
  text-align: left;
}

@media (max-width: 1036px) and (min-width: 821px) {
  .why-choose-one[lang="fa"] .why-choose-one__icon .mdi {
    font-size: clamp(56px, 7vw, 72px);
  }
}

@media (max-width: 820px) and (min-width: 576px) {
  .why-choose-one[lang="fa"] .why-choose-one__icon .mdi {
    font-size: clamp(52px, 8vw, 64px);
  }
}

@media (max-width: 575px) {
  .why-choose-one[lang="fa"] .why-choose-one__item .why-choose-one__copy {
    text-align: right;
  }

  .why-choose-one[lang="fa"]:not([data-show-icons="true"]) .why-choose-one__item .why-choose-one__copy {
    padding-right: 0;
  }

  .why-choose-one[lang="fa"][data-show-icons="true"] .why-choose-one__item .why-choose-one__copy {
    padding-right: var(--why-compact-copy-right);
  }

  .why-choose-one[lang="fa"] .why-choose-one__icon .mdi {
    font-size: var(--why-compact-icon-size);
  }
}

/* Keep Persian copy in a consistent RTL reading order.  The final line of
   each paragraph remains flush with the right edge while preceding lines use
   the available measure for a clean justified block. */
.why-choose-one[lang="fa"] .why-choose-one__copy,
.why-choose-one[lang="fa"] .why-choose-one__title,
.why-choose-one[lang="fa"] .why-choose-one__text {
  direction: rtl;
}

.why-choose-one[lang="fa"] .why-choose-one__copy,
.why-choose-one[lang="fa"] .why-choose-one__title {
  text-align: right;
}

.why-choose-one[lang="fa"] .why-choose-one__text {
  text-align: justify;
  text-align-last: right;
}

@media (min-width: 1121px) {
  .why-choose-one--compact[lang="fa"] .why-choose-one__title {
    font-size: 32px;
    line-height: 1.12;
    white-space: nowrap;
    text-wrap: nowrap;
  }
}