.elementor-1633 .elementor-element.elementor-element-6b11c94{--display:flex;}.elementor-1633 .elementor-element.elementor-element-607abed{--spacer-size:84px;}.elementor-1633 .elementor-element.elementor-element-5babbfe{--display:flex;}/* Start custom CSS for html, class: .elementor-element-0cf83c9 *//* ═══════════════════════════════════════════════════════════════════
   RANKERFI — Elementor Custom CSS | On-Page SEO Services Page
   All rules scoped via Elementor's native `.elementor-1633 .elementor-element.elementor-element-0cf83c9` keyword.

   ⚠ GLOBAL SMOOTH SCROLL NOTE: The scroll-behavior property below
   scopes only to this widget. For true site-wide smooth scroll,
   also add  html { scroll-behavior: smooth; }  in:
   Elementor → Site Settings → Custom CSS
   ═══════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   1.  CSS CUSTOM PROPERTIES  (Brand Variables — Root Scope)
───────────────────────────────────────────────────────────────── */
.elementor-1633 .elementor-element.elementor-element-0cf83c9 {

  /* ── Core Brand Palette (Required) ── */
  --rf-dark:             #0A2540;
  --rf-accent:           #00E5FF;
  --rf-bg-white:         #FFFFFF;
  --rf-bg-light:         #F8F9FA;

  /* ── Extended Palette ── */
  --rf-dark-alt:         #0D2E4D;
  --rf-dark-deep:        #061929;
  --rf-accent-hover:     #00C8DF;
  --rf-accent-glow:      rgba(0, 229, 255, 0.15);
  --rf-accent-border:    rgba(0, 229, 255, 0.35);
  --rf-text-body:        #3D4F5E;
  --rf-text-muted:       #6B7280;
  --rf-text-light:       #9CA3AF;
  --rf-text-on-dark:     #E0EAF4;
  --rf-gold:             #F59E0B;
  --rf-border:           #E5E7EB;
  --rf-border-dark:      rgba(255, 255, 255, 0.10);

  /* ── Shadows ── */
  --rf-shadow-xs:        0 1px 3px  rgba(10, 37, 64, 0.06);
  --rf-shadow-sm:        0 2px 8px  rgba(10, 37, 64, 0.09);
  --rf-shadow-md:        0 4px 18px rgba(10, 37, 64, 0.13);
  --rf-shadow-lg:        0 8px 36px rgba(10, 37, 64, 0.18);
  --rf-shadow-accent:    0 4px 20px rgba(0, 229, 255, 0.25);

  /* ── Typography ── */
  --rf-font:             'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --rf-font-mono:        'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --rf-text-xs:          0.75rem;     /* 12px */
  --rf-text-sm:          0.875rem;    /* 14px */
  --rf-text-base:        1rem;        /* 16px */
  --rf-text-lg:          1.125rem;    /* 18px */
  --rf-text-xl:          1.25rem;     /* 20px */
  --rf-text-2xl:         1.5rem;      /* 24px */
  --rf-text-3xl:         1.875rem;    /* 30px */
  --rf-text-4xl:         2.25rem;     /* 36px */
  --rf-text-5xl:         3rem;        /* 48px */
  --rf-leading-tight:    1.2;
  --rf-leading-snug:     1.4;
  --rf-leading-base:     1.65;

  /* ── Spacing Scale ── */
  --rf-sp-1:   0.25rem;
  --rf-sp-2:   0.5rem;
  --rf-sp-3:   0.75rem;
  --rf-sp-4:   1rem;
  --rf-sp-5:   1.25rem;
  --rf-sp-6:   1.5rem;
  --rf-sp-8:   2rem;
  --rf-sp-10:  2.5rem;
  --rf-sp-12:  3rem;
  --rf-sp-16:  4rem;
  --rf-sp-20:  5rem;

  /* ── Layout ── */
  --rf-max-width:        1200px;
  --rf-article-width:    70%;
  --rf-sidebar-width:    28%;
  --rf-gap:              var(--rf-sp-12);
  --rf-radius-sm:        6px;
  --rf-radius-md:        12px;
  --rf-radius-lg:        20px;
  --rf-radius-full:      9999px;

  /* ── Motion ── */
  --rf-ease:             cubic-bezier(0.4, 0, 0.2, 1);
  --rf-duration-fast:    150ms;
  --rf-duration:         250ms;
  --rf-duration-slow:    400ms;

  /* ── Global ── */
  scroll-behavior:       smooth;
  box-sizing:            border-box;
  font-family:           var(--rf-font);
  color:                 var(--rf-text-body);
  line-height:           var(--rf-leading-base);
}


/* ─────────────────────────────────────────────────────────────────
   2.  BASE RESET
───────────────────────────────────────────────────────────────── */
.elementor-1633 .elementor-element.elementor-element-0cf83c9 *, .elementor-1633 .elementor-element.elementor-element-0cf83c9 *::before, .elementor-1633 .elementor-element.elementor-element-0cf83c9 *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

.elementor-1633 .elementor-element.elementor-element-0cf83c9 img, .elementor-1633 .elementor-element.elementor-element-0cf83c9 svg {
  display: block;
  max-width: 100%;
}

.elementor-1633 .elementor-element.elementor-element-0cf83c9 a {
  color: inherit;
  text-decoration: none;
}


/* ─────────────────────────────────────────────────────────────────
   3.  PAGE WRAPPER
───────────────────────────────────────────────────────────────── */
.elementor-1633 .elementor-element.elementor-element-0cf83c9 .rf-page-wrapper {
  width: 100%;
  overflow-x: hidden;
  font-family: var(--rf-font);
}


/* ─────────────────────────────────────────────────────────────────
   4.  CONTAINER
───────────────────────────────────────────────────────────────── */
.elementor-1633 .elementor-element.elementor-element-0cf83c9 .rf-container {
  max-width: var(--rf-max-width);
  margin-left:  auto;
  margin-right: auto;
  padding-left:  var(--rf-sp-8);
  padding-right: var(--rf-sp-8);
}


/* ─────────────────────────────────────────────────────────────────
   5.  SECTION 1 — HERO
   Layout: 100% Column, Centered | Padding: 100px top/bottom
───────────────────────────────────────────────────────────────── */
.elementor-1633 .elementor-element.elementor-element-0cf83c9 .rf-hero {
  background-color: var(--rf-dark);
  padding: 100px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}


/* ─────────────────────────────────────────────────────────────────
   6.  SECTION 2 — CONTENT BODY (70 / 30 FLEX ROW)
   Padding: 80px top/bottom | Mobile: Stack, content first
───────────────────────────────────────────────────────────────── */
.elementor-1633 .elementor-element.elementor-element-0cf83c9 .rf-content-body {
  background-color: var(--rf-bg-white);
  padding: 80px 0;
}

.elementor-1633 .elementor-element.elementor-element-0cf83c9 .rf-content-grid {
  display: flex;
  flex-direction: row;
  gap: var(--rf-gap);
  align-items: flex-start;
}

.elementor-1633 .elementor-element.elementor-element-0cf83c9 .rf-main-article {
  flex: 0 0 var(--rf-article-width);
  max-width: var(--rf-article-width);
  min-width: 0;
}

.elementor-1633 .elementor-element.elementor-element-0cf83c9 .rf-sidebar {
  flex: 0 0 var(--rf-sidebar-width);
  max-width: var(--rf-sidebar-width);
  position: sticky;
  top: 30px;
  align-self: flex-start;
}


/* ─────────────────────────────────────────────────────────────────
   7.  SECTION 3 — FAQ
   Layout: 100% Column | Padding: 80px top/bottom
───────────────────────────────────────────────────────────────── */
.elementor-1633 .elementor-element.elementor-element-0cf83c9 .rf-faq-section {
  background-color: var(--rf-bg-light);
  padding: 80px 0;
}


/* ─────────────────────────────────────────────────────────────────
   8.  SECTION 4 — FOOTER RESOURCES (3-COLUMN GRID)
   Padding: 40px top/bottom | Mobile: 1 column
───────────────────────────────────────────────────────────────── */
.elementor-1633 .elementor-element.elementor-element-0cf83c9 .rf-footer-resources {
  background-color: var(--rf-bg-white);
  padding: 40px 0;
  border-top: 1px solid var(--rf-border);
}

.elementor-1633 .elementor-element.elementor-element-0cf83c9 .rf-resources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rf-sp-8);
}


/* ─────────────────────────────────────────────────────────────────
   9.  COMPONENT CLASS REGISTRY
   (Fully populated in subsequent section builds)
──────────────────────────────────────────────────────────────────
   .rf-hero__badge          — Hero eyebrow badge
   .rf-hero__heading        — H1 element
   .rf-hero__intro          — Hero intro paragraph
   .rf-key-takeaways        — 3-column icon grid below hero CTA
   .rf-btn                  — Primary CTA button
   .rf-btn--accent          — Accent color variant
   .rf-micro-proof          — Muted text below CTA button
   .rf-callout              — Stat highlight card (dark bg)
   .rf-expert-quote         — Expert blockquote component
   .rf-icon-list            — SVG icon + text list rows
   .rf-icon-list__item      — Single icon-list row
   .rf-toc                  — Sticky Table of Contents widget
   .rf-toc__link            — TOC anchor link
   .rf-toc__link--active    — Active/highlighted TOC state
   .rf-faq-item             — Single FAQ question/answer unit
   .rf-faq-item__question   — FAQ question heading
   .rf-faq-item__answer     — FAQ answer body
   .rf-resource-card        — Footer resource link card
   .rf-section-label        — Small uppercase section eyebrow
   .rf-h2                   — Shared H2 typographic style
   .rf-h3                   — Shared H3 typographic style
───────────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────
   10. RESPONSIVE — TABLET  (≤ 1024px)
───────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .elementor-1633 .elementor-element.elementor-element-0cf83c9 .rf-main-article {
    flex: 0 0 62%;
    max-width: 62%;
  }
  .elementor-1633 .elementor-element.elementor-element-0cf83c9 .rf-sidebar {
    flex: 0 0 35%;
    max-width: 35%;
  }
  .elementor-1633 .elementor-element.elementor-element-0cf83c9 .rf-gap {
    --rf-gap: var(--rf-sp-8);
  }
}


/* ─────────────────────────────────────────────────────────────────
   11. RESPONSIVE — MOBILE  (≤ 767px)
───────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .elementor-1633 .elementor-element.elementor-element-0cf83c9 .rf-container {
    padding-left:  var(--rf-sp-5);
    padding-right: var(--rf-sp-5);
  }
  .elementor-1633 .elementor-element.elementor-element-0cf83c9 .rf-hero {
    padding: 60px 0;
  }
  .elementor-1633 .elementor-element.elementor-element-0cf83c9 .rf-content-body {
    padding: 50px 0;
  }
  .elementor-1633 .elementor-element.elementor-element-0cf83c9 .rf-content-grid {
    flex-direction: column;
    gap: var(--rf-sp-8);
  }
  .elementor-1633 .elementor-element.elementor-element-0cf83c9 .rf-main-article {
    flex: 0 0 100%;
    max-width: 100%;
    order: 1;
  }
  .elementor-1633 .elementor-element.elementor-element-0cf83c9 .rf-sidebar {
    flex: 0 0 100%;
    max-width: 100%;
    position: static;
    order: 2;
  }
  .elementor-1633 .elementor-element.elementor-element-0cf83c9 .rf-faq-section {
    padding: 50px 0;
  }
  .elementor-1633 .elementor-element.elementor-element-0cf83c9 .rf-footer-resources {
    padding: 30px 0;
  }
  .elementor-1633 .elementor-element.elementor-element-0cf83c9 .rf-resources-grid {
    grid-template-columns: 1fr;
    gap: var(--rf-sp-5);
  }
}/* End custom CSS */