/*************
  HEADER LOGO (keep)
*************/
.elementor-location-header img {
  height: 90px !important;     /* adjust 72–100px */
  width: auto !important;
  max-height: none !important;
  display: block !important;
  object-fit: contain !important;
}
.elementor-location-header { min-height: 100px !important; line-height:1 !important; }

/*************
  ICON ROW (add class "icons-row" to that section)
*************/
.icons-row .elementor-widget-image img {
  width: auto !important;
  height: 120px !important;       /* 100–140px to taste */
  display: inline-block !important;
  background-color: #4DA1FF;      /* default light blue */
  border-radius: 50%;
  padding: 24px;
  box-sizing: content-box;
  transition: background-color .25s ease, transform .25s ease;
}
.icons-row .elementor-column:nth-child(2) .elementor-widget-image img,
.icons-row .elementor-column:nth-child(4) .elementor-widget-image img {
  background-color: #FFD166;      /* alternate to gold */
}
.icons-row .elementor-widget-image img:hover {
  background-color: #CC9A00;      /* dark gold hover */
  transform: translateY(-2px);
}
.icons-row .elementor-widget-heading,
.icons-row .elementor-widget-text-editor { text-align: center; }

/*************
  BLOG ROW (add class "blog-row" to the blog teasers section)
*************/
.blog-row .elementor-widget-image img {
  display: block;
  margin: 0 auto 22px auto;       /* pushes titles down so rings don’t overlap */
  border-radius: 50%;
  /* optional ring: uncomment below */
  /* border: 12px solid #4DA1FF; */
  overflow: hidden;
}

/*************
  FOOTER COLORS
*************/
footer.site-footer, footer {
  background: #0B2545;   /* navy */
  color: #ffffff;
  border-top: 4px solid #4DA1FF;
}
footer a, footer p, footer li,
footer .elementor-widget, footer .elementor-widget-text-editor { color: #ffffff; }
footer a { color: #FFD166; }
footer a:hover { color: #CC9A00; }

/* icons section styling by class */
.icons-row .elementor-widget-image img,
.icons-row .elementor-widget-image-box img{
  height:120px !important; width:auto !important;
  background:#4DA1FF; border-radius:50%; padding:24px; box-sizing:content-box;
  display:inline-block; transition:background-color .25s ease, transform .25s ease;
}

/* alternate colors for columns 2 and 4 */
.icons-row .elementor-column:nth-child(2) .elementor-widget-image img,
.icons-row .elementor-column:nth-child(2) .elementor-widget-image-box img,
.icons-row .elementor-column:nth-child(4) .elementor-widget-image img,
.icons-row .elementor-column:nth-child(4) .elementor-widget-image-box img{
  background:#FFD166;
}

.icons-row .elementor-widget-image img:hover,
.icons-row .elementor-widget-image-box img:hover{
  background:#CC9A00; transform:translateY(-2px);
}

/* center the titles/paragraphs under icons */
.icons-row .elementor-widget-heading,
.icons-row .elementor-widget-text-editor{ text-align:center; }
/*************
  BLOG ROW – circular image rings (keep other CSS untouched)
*************/
.blog-row{
  --ring-size: clamp(180px, 18vw, 260px); /* circle diameter */
  --ring-thickness: 12px;                 /* ring/border thickness */
  --ring-blue: #4DA1FF;
  --ring-gold: #FFD166;
}

/* Turn the image wrapper into a perfect circular frame with blue ring */
.blog-row :is(.elementor-widget-image,
              .elementor-widget-image-box,
              .elementor-widget-icon-box)
       :is(a, figure, .elementor-image-box-img, .elementor-icon){
  width: var(--ring-size) !important;
  height: var(--ring-size) !important;
  border-radius: 50% !important;
  border: var(--ring-thickness) solid var(--ring-blue) !important;
  overflow: hidden !important;
  background: transparent !important;     /* kill any blue/oval fills */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 22px auto !important;    /* centers above titles */
  box-shadow: none !important;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

/* Make the image fill and center inside the circle */
.blog-row :is(.elementor-widget-image,
              .elementor-widget-image-box,
              .elementor-widget-icon-box)
       :is(a, figure, .elementor-image-box-img, .elementor-icon) img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 50% !important;
  display: block !important;
}

/* Hover: blue ring → gold (image unchanged) */
.blog-row :is(.elementor-widget-image,
              .elementor-widget-image-box,
              .elementor-widget-icon-box):hover
       :is(a, figure, .elementor-image-box-img, .elementor-icon){
  border-color: var(--ring-gold) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

/* Remove stray backgrounds inside the blog row only */
.blog-row :is(.elementor-widget-image,
              .elementor-widget-image-box,
              .elementor-widget-icon-box,
              .elementor-column,
              .elementor-container){
  background: transparent !important;
}
/* ===== Franchise Fit Finder Styles ===== */

/* Bullet list (under "Your full profile reveals") */
.fff-bullets-wrap { text-align: center; }

.fff-bullets-wrap > ul,
ul.fff-bullets {
  display: inline-block;         /* centers the list */
  text-align: left;              /* keeps text left-aligned inside */
  list-style: none;
  max-width: 640px;              /* match CTA/preview width */
  padding: 0;
  margin: 24px auto 40px;
}

.fff-bullets-wrap > ul > li,
ul.fff-bullets > li {
  position: relative;
  padding-left: 28px;
  margin: 14px 0;
  font-size: 17px;
  line-height: 1.55;
  color: #333;
}

.fff-bullets-wrap > ul > li::before,
ul.fff-bullets > li::before {
  content: "★";
  position: absolute;
  left: 0;
  top: .1em;
  color: #FFD166;
  font-size: 18px;
}

/* CTA + Preview Block */
.fff-cta-block {
  text-align:center;
  max-width:980px;
  margin:0 auto;
  padding:0 16px;
}

/* Hook line above the button */
.fff-hook {
  margin: 12px 0 28px;
  font-size: 18px;
  line-height: 1.5;
  color:#0B2545;
}

/* CTA button */
.fff-cta-btn {
  display:inline-block;
  background:#FFD166;
  color:#0B2545;
  font-weight:800;
  font-size: clamp(20px, 3.2vw, 34px);
  padding:18px 28px;
  border-radius:28px;
  text-decoration:none;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.fff-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.10);
  background:#FEC84B;
}

/* Reassurance line under button */
.fff-reassure {
  margin: 10px 0 40px;
  color:#6b7280;
  font-size:15px;
}

/* Preview image */
.fff-preview { margin: 60px auto 55px; }
.fff-preview img {
  max-width: 540px;
  width: 100%;
  height:auto;
  border:4px solid #2d3748;
  border-radius:4px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.12);
}
.fff-caption {
  margin-top: 12px;
  color:#6b7280;
  font-size:14px;
}

/* Credibility line */
.fff-cred {
  margin: 45px 0 0;
  font-weight:700;
  color:#0B2545;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.4;
}
.fff-cred .fff-nb { white-space: nowrap; }

/* Small screens */
@media (max-width: 640px){
  .fff-preview { margin: 48px auto 46px; }
  .fff-reassure { margin-bottom: 32px; }
}
/* === ICONS ROW — Image Box exact centering === */
.icons-row { --icon-diameter: 220px; } /* adjust 180–240px if needed */

/* Make the Image Box wrapper the circle AND a flex center */
.icons-row .elementor-widget-image-box .elementor-image-box-wrapper .elementor-image-box-img{
  width: var(--icon-diameter) !important;
  height: var(--icon-diameter) !important;
  border-radius: 50% !important;
  background: #4DA1FF !important;                       /* default blue */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 16px !important;
  line-height: 0 !important;                             /* kill baseline gap */
  font-size: 0 !important;
  box-sizing: border-box !important;
  transition: background-color .25s ease, transform .25s ease;
}

/* Alternate color for columns 2 & 4 */
.icons-row .elementor-column:nth-child(2) .elementor-image-box-img,
.icons-row .elementor-column:nth-child(4) .elementor-image-box-img{
  background: #FFD166 !important;                        /* gold */
}

/* The actual icon (SVG/PNG) inside the circle */
.icons-row .elementor-widget-image-box .elementor-image-box-wrapper .elementor-image-box-img img{
  width: 72% !important;
  height: 72% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;                             /* no inline gap */
  margin: 0 auto !important;
  transform: translateY(var(--icon-nudge, 0%)) !important;/* micro-adjust */
}

/* Micro-nudges for icons with extra bottom whitespace (tweak as needed) */
.icons-row .elementor-column:nth-child(1) .elementor-image-box-img{ --icon-nudge: -1%; } /* target */
.icons-row .elementor-column:nth-child(2) .elementor-image-box-img{ --icon-nudge: -2%; } /* bulb */
.icons-row .elementor-column:nth-child(3) .elementor-image-box-img{ --icon-nudge: -4%; } /* clipboard */
.icons-row .elementor-column:nth-child(4) .elementor-image-box-img{ --icon-nudge: -2%; } /* chart */

/* Hover */
.icons-row .elementor-widget-image-box .elementor-image-box-wrapper .elementor-image-box-img:hover{
  background: #CC9A00 !important;
  transform: translateY(-2px);
}

/* Center text under icons (extra specificity) */
.icons-row .elementor-widget-image-box .elementor-image-box-title,
.icons-row .elementor-widget-image-box .elementor-image-box-description{
  text-align: center !important;
}
/* === BLOG CIRCLES — perfect round, dead-centered images === */
/* Works for sections you tag with blog-circles (and also supports blog-row) */
.blog-circles,
.blog-row{
  --ring-size: clamp(180px, 18vw, 260px);
  --ring-thickness: 12px;
  --ring-blue: #4DA1FF;
  --ring-gold: #FFD166;
}

/* Make the frame a true 1:1 circle and create the ring */
.blog-circles :is(.elementor-widget-image, .elementor-widget-image-box, .elementor-widget-icon-box)
  :is(a, figure, .elementor-image-box-img, .elementor-icon),
.blog-row :is(.elementor-widget-image, .elementor-widget-image-box, .elementor-widget-icon-box)
  :is(a, figure, .elementor-image-box-img, .elementor-icon){
  position: relative !important;
  width: var(--ring-size) !important;
  aspect-ratio: 1 / 1 !important;        /* guarantees a square at all sizes */
  height: auto !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  margin: 0 auto 22px auto !important;
  background: #fff !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

/* Draw the ring with a pseudo-element so the image can fill edge to edge */
.blog-circles :is(.elementor-widget-image, .elementor-widget-image-box, .elementor-widget-icon-box)
  :is(a, figure, .elementor-image-box-img, .elementor-icon)::after,
.blog-row :is(.elementor-widget-image, .elementor-widget-image-box, .elementor-widget-icon-box)
  :is(a, figure, .elementor-image-box-img, .elementor-icon)::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 var(--ring-thickness) var(--ring-blue) inset; /* blue ring */
  pointer-events: none;
  transition: box-shadow .25s ease, transform .25s ease;
}

/* === BLOG CIRCLES — perfect round frames, centered images, no halos === */
/* Tag the section with class: blog-circles (works for blog-row too) */
.blog-circles,
.blog-row{
  --ring-size: clamp(180px, 18vw, 260px);   /* diameter of the circle */
  --ring-thickness: 12px;                   /* ring thickness */
  --ring-blue: #4DA1FF;                     /* default ring color */
  --ring-gold: #FFD166;                     /* hover ring color */
}

/* 1) Make the frame a true 1:1 round wrapper */
.blog-circles :is(.elementor-widget-image, .elementor-widget-image-box, .elementor-widget-icon-box)
  :is(a, figure, .elementor-image-box-img, .elementor-icon),
.blog-row :is(.elementor-widget-image, .elementor-widget-image-box, .elementor-widget-icon-box)
  :is(a, figure, .elementor-image-box-img, .elementor-icon){
  position: relative !important;
  width: var(--ring-size) !important;
  aspect-ratio: 1 / 1 !important;          /* guarantees perfect square */
  height: auto !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  margin: 0 auto 22px auto !important;
  background: #fff !important;
  line-height: 0 !important;
  font-size: 0 !important;
  border: 0 !important;                     /* kill any existing borders */
  box-shadow: none !important;              /* kill any default shadows */
}

/* 2) Draw the ring with a pseudo-element (default = blue) */
.blog-circles :is(.elementor-widget-image, .elementor-widget-image-box, .elementor-widget-icon-box)
  :is(a, figure, .elementor-image-box-img, .elementor-icon)::after,
.blog-row :is(.elementor-widget-image, .elementor-widget-image-box, .elementor-widget-icon-box)
  :is(a, figure, .elementor-image-box-img, .elementor-icon)::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 var(--ring-thickness) var(--ring-blue) inset;
  pointer-events: none;
  transition: box-shadow .25s ease, transform .25s ease;
}

/* 3) Image fills the circle and stays centered */
.blog-circles :is(.elementor-widget-image, .elementor-widget-image-box, .elementor-widget-icon-box)
  :is(a, figure, .elementor-image-box-img, .elementor-icon) img,
.blog-row :is(.elementor-widget-image, .elementor-widget-image-box, .elementor-widget-icon-box)
  :is(a, figure, .elementor-image-box-img, .elementor-icon) img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  transform: translateY(var(--shift-y, 0%)) !important; /* optional micro nudge */
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 4) Hover: blue ring → gold */
.blog-circles :is(.elementor-widget-image, .elementor-widget-image-box, .elementor-widget-icon-box):hover
  :is(a, figure, .elementor-image-box-img, .elementor-icon)::after,
.blog-row :is(.elementor-widget-image, .elementor-widget-image-box, .elementor-widget-icon-box):hover
  :is(a, figure, .elementor-image-box-img, .elementor-icon)::after{
  box-shadow: 0 0 0 var(--ring-thickness) var(--ring-gold) inset;
  transform: translateY(-2px);
}

/* 5) Hard reset: remove ANY halo/shadow/border from parent wrappers */
.blog-circles :is(.elementor-widget, .elementor-widget-container, .elementor-image, .elementor-image-box, .elementor-icon-box,
                  .elementor-widget-image, .elementor-widget-image-box, .elementor-widget-icon-box,
                  .elementor-column, .elementor-widget-wrap){
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background: transparent !important;
}

/* 6) Optional per-card vertical micro-adjusts (if a photo feels low/high) */
.blog-circles .elementor-column:nth-child(1) img{ --shift-y: 0%; }
.blog-circles .elementor-column:nth-child(2) img{ --shift-y: -2%; }
.blog-circles .elementor-column:nth-child(3) img{ --shift-y: -2%; }
.blog-circles .elementor-column:nth-child(4) img{ --shift-y: 0%; }
#about, #quiz, #blog { scroll-margin-top: 110px; } /* adjust to your header height */
html { scroll-behavior: auto; } /* prevents theme smooth-scroll fighting our script */
/******************************
 FFF — Global Tokens
******************************/
:root{
  --fff-navy:#0B2545;
  --fff-blue:#4DA1FF;
  --fff-gold:#FFD166;
  --fff-ink:#1A1F36;
  --fff-muted:#6B7280;
  --fff-bg:#F7FAFF;
  --fff-white:#FFFFFF;
  --fff-radius:18px;
  --fff-gap:24px;
  --fff-shadow:0 10px 24px rgba(11,37,69,.12);
  --fff-shadow-strong:0 14px 32px rgba(11,37,69,.18);
}

/* Utility (optional but handy) */
.fff-center{text-align:center;}
.fff-max{max-width:1200px;margin-inline:auto;}
.fff-hide-mobile{display:block;}
@media(max-width:767px){.fff-hide-mobile{display:none;}}

/******************************
 Broker Services Section (container class: fff-broker)
******************************/
.fff-broker{
  background:linear-gradient(180deg,var(--fff-bg) 0%, #fff 60%);
  padding:72px 20px;
  border-radius: var(--fff-radius);
  box-shadow: var(--fff-shadow);
  position:relative;
  overflow:hidden;
}

/* Free badge */
.fff-broker .fff-badge{
  position:absolute; top:18px; right:-42px;
  background:var(--fff-gold); color:#3A2E00;
  padding:10px 56px; font-weight:700; letter-spacing:.6px;
  transform:rotate(35deg);
  box-shadow:0 6px 18px rgba(255,209,102,.35);
}

/* Section heading */
.fff-broker .fff-title{
  color:var(--fff-navy);
  font-size:clamp(28px,4vw,44px);
  line-height:1.1; margin:0 0 10px;
  text-align:center;
  font-weight:800;
}
.fff-broker .fff-subtitle{
  color:var(--fff-muted);
  font-size:clamp(16px,2.2vw,18px);
  text-align:center; margin:0 auto 36px;
  max-width:800px;
}

/* Steps grid */
.fff-broker .fff-steps{
  display:grid; gap:var(--fff-gap);
  grid-template-columns:repeat(4,1fr);
  margin: 12px auto 28px; max-width:1100px;
}
@media(max-width:1024px){
  .fff-broker .fff-steps{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .fff-broker .fff-steps{grid-template-columns:1fr;}
}

/* Step card */
.fff-broker .fff-step{
  background:var(--fff-white);
  border:1px solid #E8EEF7;
  border-radius:var(--fff-radius);
  padding:22px 20px 22px 20px;
  box-shadow: var(--fff-shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}
.fff-broker .fff-step:hover{
  transform:translateY(-3px);
  box-shadow: var(--fff-shadow-strong);
}

/* Step header row */
.fff-broker .fff-step-head{
  display:flex; align-items:center; gap:14px; margin-bottom:10px;
}

/* Number pill */
.fff-broker .fff-num{
  min-width:38px; height:38px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background: radial-gradient(120% 120% at 30% 20%, var(--fff-blue), #2C6BB2);
  color:#fff; font-weight:800; font-size:16px; box-shadow:0 6px 16px rgba(77,161,255,.35);
}

/* Step title + text */
.fff-broker .fff-step-title{
  margin:0; color:var(--fff-ink); font-weight:800; font-size:18px;
}
.fff-broker .fff-step p{
  margin:8px 0 0; color:var(--fff-muted); font-size:16px; line-height:1.55;
}

/* Divider line between grid and benefits */
.fff-broker .fff-divider{
  height:1px; background:linear-gradient(90deg,transparent, #D7E6FA, transparent);
  margin:28px auto; max-width:920px;
}

/* Benefits list (with check icons) */
.fff-broker .fff-benefits{
  display:flex; flex-wrap:wrap; gap:14px 18px; justify-content:center;
  margin:0 auto 30px; max-width:1000px;
}
.fff-broker .fff-benefits .fff-chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:999px;
  background:#EFF6FF; border:1px solid #DBEAFE; color:#0B2545; font-weight:600;
}
.fff-broker .fff-chip:before{
  content:"✓"; font-weight:900; color:#1456A8;
}

/* CTA area */
.fff-broker .fff-cta{
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.fff-broker .fff-btn{
  appearance:none; border:0; cursor:pointer;
  padding:16px 28px; border-radius:999px;
  background:linear-gradient(180deg,var(--fff-gold), #F3C24E);
  color:#2B1E00; font-weight:800; font-size:18px;
  box-shadow:0 10px 22px rgba(255,209,102,.35), inset 0 -2px 0 rgba(0,0,0,.08);
  transition:transform .15s ease, box-shadow .15s ease;
  text-decoration:none; display:inline-flex; align-items:center; gap:10px;
}
.fff-broker .fff-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 26px rgba(255,209,102,.45), inset 0 -2px 0 rgba(0,0,0,.1);}
.fff-broker .fff-cta-note{ color:var(--fff-muted); font-size:14px; }

/******************************
 Broker Page Hero (optional)
 container class: fff-broker-hero
******************************/
.fff-broker-hero{
  background:linear-gradient(135deg, #e9f3ff 0%, #ffffff 60%);
  border:1px solid #E6EEF8; border-radius:var(--fff-radius);
  padding:60px 20px; box-shadow: var(--fff-shadow);
}
.fff-broker-hero h1{
  font-size:clamp(34px,5.2vw,56px); line-height:1.05; color:var(--fff-navy); margin:0 0 8px; font-weight:900;
}
.fff-broker-hero p{
  color:var(--fff-muted); font-size:18px; max-width:860px;
}
.fff-broker-hero .fff-hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:18px;}
.fff-broker-hero .fff-btn--outline{
  border:2px solid var(--fff-blue); color:#0B2545; background:transparent; box-shadow:none;
}
.fff-broker-hero .fff-btn--outline:hover{ background:#E8F1FF; }

/******************************
 Trust row (logos or stats)
 container class: fff-trust
******************************/
.fff-trust{
  display:flex; flex-wrap:wrap; gap:22px; justify-content:center;
  padding:20px 0; opacity:.9;
}
.fff-trust .fff-trust-item{
  background:#fff; border:1px solid #E8EEF7; border-radius:12px; padding:12px 16px;
  box-shadow: var(--fff-shadow);
  font-weight:700; color:var(--fff-navy);
}

/******************************
 FAQ tweaks (use on Broker page FAQ)
******************************/
.fff-faq .elementor-tab-title{
  border-radius:12px !important; border:1px solid #E8EEF7 !important;
  background:#FAFCFF !important; font-weight:700 !important; color:var(--fff-navy) !important;
}
.fff-faq .elementor-tab-content{
  background:#fff !important; border:1px solid #E8EEF7 !important; border-top:none !important;
  border-radius:0 0 12px 12px !important;
}

/******************************
 Small accessibility & link polish
******************************/
.fff-broker a, .fff-broker-hero a{ text-decoration:none; }
.fff-broker a:focus-visible, .fff-broker-hero a:focus-visible{
  outline:3px solid #9EC9FF; outline-offset:2px; border-radius:12px;
}
/* Step Section Layout */
.fff-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin: 40px 0;
}

.fff-step {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}

.fff-step:hover {
  transform: translateY(-5px);
}

/* Number Pill */
.fff-num {
  width: 36px;
  height: 36px;
  background: #FFD166;
  color: #0B2545;
  font-weight: bold;
  font-size: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

/* Title + Text */
.fff-step-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 10px;
}

.fff-step p {
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}
/* Make number + title sit inline */
.fff-step-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 10px;
}

/* Number pill (inline version) */
.fff-step-head .fff-num{
  width:36px; height:36px;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:#FFD166; color:#0B2545;
  font-weight:800; font-size:16px; line-height:1;
  margin:0; /* remove the bottom margin from your earlier rule */
}

/* Title next to the pill */
.fff-step-head .fff-step-title{
  margin:0;                  /* kill default H3 top margin */
  font-size:20px;            /* bump slightly if you like */
  font-weight:800;
  color:#0B2545;
}

/* Grid polish: centered, comfy gaps, responsive */
.fff-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  max-width:1100px;          /* keeps cards from getting too wide/narrow */
  margin:24px auto 36px;     /* center the grid in the section */
}

@media (max-width:1024px){
  .fff-steps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .fff-steps{ grid-template-columns:1fr; }
}

/* Card tidy + equal-ish feel */
.fff-step{
  background:#fff;
  border-radius:12px;
  padding:20px;
  box-shadow:0 4px 10px rgba(0,0,0,.05);
  transition:transform .2s ease;
  display:flex; flex-direction:column; gap:8px;
}

.fff-step:hover{ transform:translateY(-4px); }

.fff-step p{
  font-size:15px; line-height:1.55; margin:0;
}
.fff-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 1400px;   /* wider than before */
  margin: 40px auto;   /* center horizontally */
}
.fff-step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;   /* allow long titles to wrap naturally */
}

.fff-step-head .fff-num {
  flex: 0 0 auto;    /* number circle stays fixed size */
}

.fff-step-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #0B2545;
  line-height: 1.3;
  white-space: normal; /* ✅ let text wrap */
}

}
/* Force the step number to be a perfect circle, every time */
.fff-step-head .fff-num{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  min-height:36px !important;
  padding:0 !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  font-weight:800;
  font-size:16px;
  background:#FFD166;
  color:#0B2545;
  box-shadow:none;
  border:none;
}
/* === FFF Broker Steps — FINAL OVERRIDES === */

/* Make the grid wide, centered, and responsive. 
   This beats any earlier .fff-broker .fff-steps or theme rules. */
.fff-broker .fff-steps,
.fff-steps{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:32px !important;
  max-width:1400px !important;
  width:100% !important;
  margin:40px auto !important;
}

/* Tablet & mobile */
@media (max-width:1024px){
  .fff-broker .fff-steps,
  .fff-steps{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width:640px){
  .fff-broker .fff-steps,
  .fff-steps{ grid-template-columns:1fr !important; }
}

/* Card */
.fff-step{
  background:#fff !important;
  border-radius:12px !important;
  padding:20px !important;
  box-shadow:0 4px 10px rgba(0,0,0,.05) !important;
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  height:100%;
}

/* Number + title row: allow long titles to wrap */
.fff-step-head{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:wrap !important;           /* ← fixes “Franchise Matchmaking” bleed */
  margin:0 0 8px !important;
}

/* Force perfect number circle */
.fff-step-head .fff-num{
  width:36px !important; height:36px !important;
  min-width:36px !important; min-height:36px !important;
  padding:0 !important; border-radius:999px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  line-height:1 !important; font-weight:800 !important; font-size:16px !important;
  background:#FFD166 !important; color:#0B2545 !important;
  border:none !important; box-shadow:none !important;
}

/* Title */
.fff-step-title{
  margin:0 !important;
  font-size:20px !important; font-weight:800 !important; line-height:1.3 !important;
  color:#0B2545 !important;
  white-space:normal !important;       /* allow wrapping */
  max-width:100% !important;
}

/* Paragraph */
.fff-step p{ margin:0 !important; line-height:1.55 !important; font-size:15px !important; }
/* === FFF Broker Steps — FINAL CLEAN RESET === */

/* Parent grid */
.fff-broker .fff-steps,
.fff-steps {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 32px !important;
  max-width: 1400px !important;
  width: 100% !important;
  margin: 40px auto !important;
  align-items: stretch !important;
}

/* Reset flex/widths from Elementor */
.fff-steps > * {
  width: auto !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
}

/* Responsive */
@media (max-width: 1024px) {
  .fff-broker .fff-steps,
  .fff-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .fff-broker .fff-steps,
  .fff-steps {
    grid-template-columns: 1fr !important;
  }
}

/* Card styling */
.fff-step {
  background: #fff !important;
  border-radius: 12px !important;
  padding: 20px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* Number + title row */
.fff-step-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin: 0 0 8px !important;
}

/* Number pill */
.fff-step-head .fff-num {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #FFD166 !important;
  color: #0B2545 !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Title + text */
.fff-step-title {
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0B2545 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}
.fff-step p {
  margin: 0 !important;
  line-height: 1.55 !important;
  font-size: 15px !important;
}
/* Force child cards to auto-size inside the grid */
.fff-steps > .elementor-container,
.fff-steps > .elementor-widget-container,
.fff-steps > * {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}
.fff-video video {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

@media (max-width: 768px) {
  .fff-video video {
    height: 220px;
  }
}
/* ---------------------------
   GLOBAL ELEMENTOR SPACING
   --------------------------- */

/* 1. Normalize vertical padding on all top-level Elementor sections */
body.elementor-page .elementor-section.elementor-top-section {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* 2. Reduce the space between the header and the FIRST section on each page */
body.elementor-page .elementor-section.elementor-top-section:first-of-type {
    padding-top: 25px;
}

/* 3. Remove unintended margins between sections */
body.elementor-page .elementor-top-section + .elementor-top-section {
    margin-top: 0 !important;
}

/* 4. If any section feels too tight/loose, we can override it with a class */
body.elementor-page .elementor-section.no-padding-top {
    padding-top: 0 !important;
}
body.elementor-page .elementor-section.no-padding-bottom {
    padding-bottom: 0 !important;
}
/* ----------------------------------
   HERO BUTTON: GOLD GLOW ON HOVER
   ---------------------------------- */

.hero-btn {
    transition: all 0.25s ease-in-out !important;
    box-shadow: 0 0 0 rgba(255, 209, 102, 0); /* no glow by default */
}

.hero-btn:hover {
    transform: translateY(-3px); /* slight lift */
    box-shadow: 0 0 22px rgba(255, 209, 102, 0.8), 
                0 0 12px rgba(255, 209, 102, 0.6);
}