/* =======================================================
   FazilatPro — Interaction Polish (Safe Override)
   File: interaction.polish.css
   Purpose:
   - DO NOT change layout, colors, or shapes
   - ONLY unify animation speed & smoothness
   - Affects: pills + why-pills + generic cards
   ======================================================= */

/* 1) Section pills (labels above headings)
   ---------------------------------------- */
.fp .pill,
.fp .why-pill{
  /* Keep your existing visual styles.
     We ONLY add consistent transitions. */
  transition:
    transform 200ms ease-out,
    box-shadow 200ms ease-out,
    filter 200ms ease-out,
    background-color 200ms ease-out,
    border-color 200ms ease-out;
  will-change: transform, box-shadow, filter;
}

/* 2) Generic cards (non-services specific)
   ---------------------------------------- */
.fp .card{
  /* Your base card styles stay as defined in style.final.css.
     This only makes any hover/active transforms animate smoothly
     with the same timing everywhere. */
  transition:
    transform 200ms ease-out,
    box-shadow 200ms ease-out,
    border-color 200ms ease-out,
    background-color 200ms ease-out,
    filter 200ms ease-out;
  will-change: transform, box-shadow, filter;
}

/* 3) Optional: tiny boost for focus-visible (keyboard users)
   ---------------------------------------------------------- */
/* This does NOT change layout; it only makes keyboard focus
   look smoother if you Tab through cards. Remove if you don't want it. */
.fp .card:focus-visible,
.fp .pill:focus-visible,
.fp .why-pill:focus-visible{
  transition:
    transform 200ms ease-out,
    box-shadow 200ms ease-out,
    border-color 200ms ease-out;
}


/* ===========================================
   FazilatPro – Interaction polish
   Unify Why Us CTA with About CTA
   =========================================== */

/* Heading – make it behave like the About CTA heading */
.fp.why-page .cta-ready .head h2{
  font-family: "Montserrat", system-ui;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Paragraph – match About CTA body feel */
.fp.why-page .cta-ready p{
  font-family: "Inter", system-ui;
  line-height: 1.6;
}


