.elementor-990393 .elementor-element.elementor-element-297b63e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-990393 .elementor-element.elementor-element-4a4be96{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-ff4c161 *//* ===== nAI Flow Lite – Onboarding (Refined) ===== */

/* Brand tokens */
:root {
  --brand-primary: #f17f30;       /* Navatech orange */
  --brand-dark: #0a0f1c;
  --brand-muted: #6b7487;
  --surface: #ffffff;
  --radius: 12px;                 /* Uniform 12px radius as requested */
  --shadow-1: 0 6px 24px rgba(10,15,28,0.08);
  --shadow-2: 0 10px 32px rgba(10,15,28,0.12);
  --ring: rgba(255,100,0,0.22);
}



/* Section with lighter Navatech gradient */
.naiflow-onboard {
  /* Fallback solid color */
  background: #fff7f2;
  /* Soft, light gradient of Navatech color */
  background:
    linear-gradient(135deg,
      rgba(255,100,0,0.08) 0%,
      rgba(255,100,0,0.04) 32%,
      rgba(255,100,0,0.02) 100%
    );
  padding: 56px 20px;
}

/* Container */
.naiflow-onboard .nf-container {
  max-width: 1080px;
  margin: 0 auto;
}

/* Hero */
.nf-hero {
  text-align: center;
  margin: 0 0 24px;
}
.nf-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 9.2vw, 40px);
  line-height: 1.15;
  color: var(--brand-dark);
  letter-spacing: -0.02em;
}
.nf-sub, .nf-sub-2 {
  margin: 0;
  color: var(--brand-muted);
}
.nf-sub { font-size: 18px; }
.nf-sub-2 { font-size: 16px; margin-top: 6px; }

/* Steps grid */
.nf-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;     /* tighter gap for flush alignment */
  margin-top: 20px;
}

/* Step card */
.nf-step-card {
  background: var(--surface);
  border: 1px solid rgba(10,15,28,0.06);
  border-radius: var(--radius);   /* 12px radius */
  box-shadow: var(--shadow-1);
  padding: 30px;

  display: flex;                  /* equal heights + internal control */
  flex-direction: column;
  gap: 10px;
  min-height: 100%;
}
.nf-step-card:hover { box-shadow: var(--shadow-2); }

/* Remove any stray bottom/last-child gaps causing “extra space” */
.nf-step-card > *:last-child { margin-bottom: 0 !important; }
.nf-step-card p:last-child,
.nf-step-card .nf-media:last-child,
.nf-step-card .nf-actions:last-child,
.nf-step-card .nf-list:last-child { margin-bottom: 0 !important; }

/* Step header */
.nf-step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;                     /* zero to avoid extra head spacing */
}
.nf-step-head h3 {
  margin: 0;
  font-size: 20px;
  color: var(--brand-dark);
  letter-spacing: -0.01em;
}

/* Number badge */
.nf-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  border-radius: 50%;
  background: rgba(255, 100, 0, 0.10);
  color: var(--brand-primary);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  border: 1px solid rgba(255, 100, 0, 0.28);
  box-shadow: 0 2px 6px var(--ring);
  flex-shrink: 0;
}

/* Text spacing normalized */
.nf-step-card p {
  margin: 0;                     /* reset */
  color: #2a2f3a;
  line-height: 1.55;
}
.nf-step-card p + p { margin-top: 8px; }  /* controlled vertical rhythm */
.nf-muted { color: var(--brand-muted); }

/* Buttons */
.nf-actions {
  margin: 0;                     /* no extra margin to avoid blank gaps */
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.nf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 600;
  border-radius: 10px;
  padding: 12px 16px;
  line-height: 1;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  border: 1px solid transparent;
  will-change: transform;
}
.nf-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }
.nf-btn:hover { transform: translateY(-1px); }

.nf-btn-primary {
  background: var(--brand-primary);
  color: #fff;
  box-shadow: 0 4px 16px var(--ring);
}
.nf-btn-primary:hover {
  background: #e05800;
}
.nf-btn-ghost {
  background: #fff;
  color: var(--brand-light);
  border-color: rgba(10,15,28,0.12);
}
.nf-btn-ghost:hover {
  background: rgba(255,100,0,0.06);
  border-color: rgba(255,100,0,0.24);
}

/* Media / Illustrations – now with 12px radius and zero extra margins */
.nf-media { margin: 0; }
.nf-illus {
  background: linear-gradient(180deg, #fff, #fafbff);
  border: 1px dashed rgba(10,15,28,0.15);
  border-radius: var(--radius);     /* 12px */
  padding: 10px;
  margin: 0;                        /* no external margins */
}
.nf-illus.wide { padding: 12px; }
.nf-illus svg {
  width: 100%;
  height: auto;
  display: block;
  fill: none;
  stroke: rgba(10,15,28,0.55);
  stroke-width: 2;
}
.nf-illus svg rect { fill: #fff; }
.nf-illus svg .nf-accent-fill { fill: rgba(255,100,0,0.16); }
.nf-illus svg .nf-accent-stroke { stroke: var(--brand-primary); }

.nf-caption {
  display: block;
  font-size: 12px;
  color: var(--brand-muted);
  margin-top: 8px;
}

/* Features list – compact and aligned */
.nf-list {
  list-style: none;
  padding: 0;
  margin: 0;                      /* remove default margins */
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.nf-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(10,15,28,0.06);
  border-radius: 10px;            /* slightly softer chips inside */
}
.nf-icon { font-size: 16px; line-height: 1.2; }

/* Equal-height cards & perfect alignment on desktop */
@media (min-width: 720px) {
  .nf-steps { grid-template-columns: 1fr 1fr 1fr; }
  .nf-step-card { height: 100%; }
}

/* Comfortable outer padding on wide screens */
@media (min-width: 1100px) {
  .naiflow-onboard { padding: 72px 24px; }
}

/* Global Quick Start button styling */
.nf-global {
  justify-content: center;
  margin-top: 32px;
}

.nf-illus img {
  pointer-events: none;
  user-select: none;
}

/* --- Heading responsive behavior --- */
.nf-heading {
  text-align: center;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.2;
  font-weight: 700;
  color: var(--brand-dark);
  margin: 0;
}

/* default (desktop) = one line */
.nf-line1,
.nf-line2 {
  display: inline;
  white-space: nowrap;
}

/* on mobile, break into 2 lines */
@media (max-width: 768px) {
  .nf-line1,
  .nf-line2 {
    display: block;           /* force line break */
  }
  .nf-line1 { margin-bottom: 4px; }  /* small gap between lines */
}/* End custom CSS */