/* ===== Testimonials Elodie / Content 1 (live nafas.com/id-en/testimonials-elodie, frame "Content 1") =====
   Two Framer variants: desktop + phone (framer-1koff3a) and tablet (framer-1x62997), switched with the base
   visibility helpers. No links, no hover, press or click states on live. Every text box is a Framer appear:
   opacity 0 -> 1 at >= 50% visible, back to 0 below 50% (both edges, replays), 0.44s spring-like curve sampled
   on live (same curve as how-it-works). Charts are flat images inside the PNGs (dark rounded cards are part of the art). */

.nf-el-content-1 {
  --nf-el-content-1-ease: linear(0, 0.017 4.1%, 0.078 8.2%, 0.154 11.8%, 0.245 15.7%, 0.34 19.5%, 0.432 23.2%, 0.513 27%, 0.592 30.9%, 0.658 34.3%, 0.72 38.4%, 0.773 42.3%, 0.819 45.9%, 0.854 49.8%, 0.886 53.6%, 0.912 57.3%, 0.932 61.4%, 0.948 65%, 0.962 68.9%, 0.972 72.5%, 0.98 76.4%, 0.986 80%, 0.991 83.9%, 0.994 87.7%, 0.997 91.6%, 0.999 95.5%, 1);
  display: block; flex: 0 0 auto; width: 100%; position: relative;
}

/* ---------- Text (shared by both variants) ---------- */
.nf-el-content-1__title, .nf-el-content-1__body {
  margin: 0; color: var(--nf-black); text-transform: none; text-decoration: none; letter-spacing: normal;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
}
.nf-el-content-1__title {
  font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", sans-serif;
  font-size: 42px; font-weight: 500; line-height: 125%; text-align: start;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
}
.nf-el-content-1__body {
  font-family: "SF Pro Display Regular", "SF Pro Display Regular Placeholder", sans-serif;
  font-size: 20px; font-weight: 400; text-align: left;
}
.nf-el-content-1__body--15 { line-height: 150%; }
.nf-el-content-1__body--16 { line-height: 1.6em; }
.nf-el-content-1__body strong { font-weight: 700; }
/* Quote spans. Live declares the Semibold Italic face at weight 600, base.css at 400: block the synthetic bold
   Chrome would add on top. The italic (oblique) synthesis from em stays, as on live. */
.nf-el-content-1__q, .nf-el-content-1__qs {
  font-family: "SF Pro Display Semibold Italic", "SF Pro Display Semibold Italic Placeholder", sans-serif;
  font-weight: 600; line-height: 1.6em; font-synthesis-weight: none;
}
.nf-el-content-1__q { font-size: 24px; }
.nf-el-content-1__q em, .nf-el-content-1__qs em { font-style: italic; }

/* ---------- Desktop (>= 1440, base) and phone variant ---------- */
.nf-el-content-1__dp {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 75px;
  flex: 0 0 auto; width: 100%; height: min-content; padding: 80px 60px; position: relative; overflow: hidden;
}
.nf-el-content-1__row {
  display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start;
  flex: 0 0 auto; width: 100%; height: min-content; padding: 0; position: relative; overflow: clip;
}
.nf-el-content-1__title-box, .nf-el-content-1__body-box, .nf-el-content-1__col-title-box,
.nf-el-content-1__col-body-box, .nf-el-content-1__tbox {
  flex: 0 0 auto; max-width: 100%; height: auto; position: relative;
}
.nf-el-content-1__title-box { width: 366px; }
.nf-el-content-1__body-box { width: 800px; }
.nf-el-content-1__col {
  display: flex; flex-direction: column; justify-content: flex-start; align-content: center; align-items: center; gap: 42px;
  flex: 0 0 auto; align-self: stretch; width: 425px; max-width: 100%; height: auto; padding: 0; position: relative; overflow: clip;
}
.nf-el-content-1__col-title-box { width: 100%; }
.nf-el-content-1__col-body-box { width: 425px; }
.nf-el-content-1__charts {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px;
  flex: 0 0 auto; width: 800px; height: min-content; padding: 0; position: relative; overflow: clip;
}
.nf-el-content-1__chart { flex: 0 0 auto; width: 100%; height: auto; position: relative; overflow: visible; }
.nf-el-content-1__chart--score { aspect-ratio: 1.55382 / 1; }
.nf-el-content-1__chart--outdoor { aspect-ratio: 1.89619 / 1; }
.nf-el-content-1__chart img {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: 100%;
  object-position: center;
}
.nf-el-content-1__chart--score img { object-fit: contain; }
.nf-el-content-1__chart--outdoor img { object-fit: cover; }

/* ---------- Tablet variant (810 to 1439.98) ---------- */
.nf-el-content-1__t {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 48px;
  flex: 0 0 auto; width: 100%; height: min-content; padding: 60px 40px; position: relative; overflow: hidden;
}
.nf-el-content-1__trow, .nf-el-content-1__tcol {
  display: flex; flex-direction: column; justify-content: flex-start; align-content: flex-start; align-items: flex-start; gap: 32px;
  flex: 0 0 auto; width: 100%; height: min-content; padding: 0; position: relative; overflow: clip;
}
.nf-el-content-1__trow--data { gap: 100px; }
.nf-el-content-1__tcol { max-width: 101%; }
.nf-el-content-1__tbox { width: 100%; }
.nf-el-content-1__charts--t { width: 100%; }

/* ---------- Phone (<= 809.98) ---------- */
@media (max-width: 809.98px) {
  .nf-el-content-1__dp { gap: 32px; padding: 32px 16px; }
  .nf-el-content-1__row { flex-direction: column; justify-content: flex-start; gap: 16px; }
  .nf-el-content-1__title-box, .nf-el-content-1__body-box, .nf-el-content-1__col-body-box { width: 100%; }
  .nf-el-content-1__title { font-size: 29px; }
  .nf-el-content-1__body--15, .nf-el-content-1__body--16 { line-height: 140%; }
  .nf-el-content-1__q { font-size: 20px; line-height: 140%; }
  /* Live nests the charts inside the left column (gap 16px); here they follow it in the same column with the same gap */
  .nf-el-content-1__row--data { gap: 16px; }
  .nf-el-content-1__col { align-content: flex-start; align-items: flex-start; align-self: auto; gap: 16px; width: 100%; max-width: 101%; height: min-content; }
  .nf-el-content-1__charts { width: 100%; }
}

/* ---------- Scroll appear (JS adds .is-js on the root, then toggles .is-in per box) ---------- */
.nf-el-content-1 [data-el-content-1-reveal] { will-change: transform; }
.nf-el-content-1.is-js [data-el-content-1-reveal] { opacity: 0; transition: opacity 0.44s var(--nf-el-content-1-ease); }
.nf-el-content-1.is-js [data-el-content-1-reveal].is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .nf-el-content-1.is-js [data-el-content-1-reveal] { opacity: 1; transition: none; }
}