/* Medical Billing service page — fixes from the enhancement/optimization plan.
   Loaded after post-770abec.css so these equal-specificity rules win. */

/* Hero container was 1400px wide, wider than every other /services/* page
   (which default to 1140px). Match the site-wide standard. */
.elementor-770 .elementor-element.elementor-element-5826014 {
    --content-width: 1370px;
}

/* Hero subheading label ("Medical Billing Service in California"): was red,
   now brand color. Size already 24px per the plan's H2-subheading spec. */
.elementor-770 .elementor-element.elementor-element-6653bf4 .elementor-heading-title {
    color: #0888A7;
    font-size: 38px;
}

/* Hero H1 main heading ("California's Trusted Medical Billing Service..."):
   was 55px, set to 38px per the plan. */
.elementor-770 .elementor-element.elementor-element-23347b4 .elementor-heading-title {
    font-size: 24px;
}

/* Remove the hero background stock image for a cleaner look. */
.elementor-770 .elementor-element.elementor-element-5826014:not(.elementor-motion-effects-element-type-background) {
    background-image: none !important;
    background-color: #F7FBFC;
}

/* "Why Outsource Medical Billing..." section: was a single centered block
   with no visual. Restructured into a 2-column layout — left: heading, body
   copy, and CTA left-aligned; right: supporting image. */
.elementor-770 .elementor-element.elementor-element-16f14eb.mb-why-outsource .e-con-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 48px;
}

.mb-why-outsource-left {
    display: flex;
    flex-direction: column;
    flex: 1 1 55%;
    min-width: 0;
}

.mb-why-outsource-media {
    flex: 1 1 45%;
    min-width: 0;
}

.mb-why-outsource-media img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}

@media (max-width: 767px) {
    .elementor-770 .elementor-element.elementor-element-16f14eb.mb-why-outsource .e-con-inner {
        flex-direction: column;
    }
}

.elementor-770 .elementor-element.elementor-element-644e0ac {
    text-align: left;
    width: 100%;
    max-width: 100%;
}

.elementor-770 .elementor-element.elementor-element-644e0ac .elementor-heading-title {
    font-size: 32px;
}

.elementor-770 .elementor-element.elementor-element-806c751 {
    text-align: left;
    width: 100%;
    max-width: 100%;
}

.elementor-770 .elementor-element.elementor-element-d9424c4.elementor-element {
    --align-self: flex-start;
    align-self: flex-start;
}

/* Process/workflow cards: "Step 1." etc. labels removed from the HTML;
   card titles standardized to 22px (were 25px). */
.elementor-770 .elementor-element.elementor-element-c399793 .elementor-heading-title,
.elementor-770 .elementor-element.elementor-element-bf8c04f .elementor-heading-title,
.elementor-770 .elementor-element.elementor-element-179f765 .elementor-heading-title,
.elementor-770 .elementor-element.elementor-element-245859b .elementor-heading-title,
.elementor-770 .elementor-element.elementor-element-f8dc70b .elementor-heading-title {
    font-size: 22px;
}

/* "Experience Incredibly Smooth Medical Billing Management" CTA: strip any
   stray outer spacing so the button sits flush with the paragraph above it. */
.elementor-770 .elementor-element.elementor-element-75faf0c,
.elementor-770 .elementor-element.elementor-element-75faf0c > .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
}

/* New section: Value Proposition Grid, placed directly below "Get Claims
   Accepted and Paid on the First Submission". */
.mb-value-prop {
    padding: 70px 20px;
    background: #F7FBFC;
}

.mb-value-prop__inner {
    max-width: 1140px;
    margin: 0 auto;
}

.mb-value-prop__title {
    margin: 0 0 48px;
    text-align: center;
    font-family: "Poppins", Sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #263159;
}

.mb-value-prop__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin-bottom: 40px;
}

.mb-value-prop__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}

.mb-value-prop__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #E1F0EE;
    color: #0888A7;
}

.mb-value-prop__icon svg {
    width: 34px;
    height: 34px;
}

.mb-value-prop__item h3 {
    margin: 0;
    font-family: "Poppins", Sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #00585F;
}

.mb-value-prop__callout {
    padding: 24px 32px;
    background: #FFFFFF;
    border: 1px solid #D9E9EC;
    border-radius: 12px;
    text-align: center;
}

.mb-value-prop__callout p {
    margin: 0;
    font-family: "Poppins", Sans-serif;
    font-style: italic;
    color: #242424;
}

.mb-value-prop__cta {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.mb-value-prop__button {
    display: inline-block;
    padding: 15px 32px;
    background: #0888A7;
    color: #FFFFFF;
    font-family: "Poppins", Sans-serif;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
}

.mb-value-prop__button:hover,
.mb-value-prop__button:focus {
    background: #066e87;
}

@media (max-width: 767px) {
    .mb-value-prop__grid {
        grid-template-columns: 1fr;
    }
}

/* "Medical Billing Solutions For 50+ Specialties": heading standardized to
   32px (was 44px), plus a centered "Get Started Now" CTA below the copy. */
.elementor-770 .elementor-element.elementor-element-523a477 .elementor-heading-title {
    font-size: 32px;
}

.mb-specialties-cta {
    margin: 24px 0 0 50px;
    text-align: left;
}

/* "Your profits are just a contract away..." heading: H2 standard at 32px. */
.elementor-770 .elementor-element.elementor-element-9123c3f .elementor-heading-title {
    font-size: 32px;
}

/* "Trusted by Healthcare Providers Like You" / "Committed to Compliance...":
   elementor-element-e041dda is an empty leftover testimonials-carousel
   placeholder still taking up vertical space between the two headings.
   Hide it, tighten the section margins, and standardize both headings. */
.elementor-770 .elementor-element.elementor-element-e041dda {
    display: none;
}

.elementor-770 .elementor-element.elementor-element-2196945 {
    --margin-top: 40px;
}

.elementor-770 .elementor-element.elementor-element-be6aceb {
    --margin-top: 15px;
}

.elementor-770 .elementor-element.elementor-element-162d5c7 .elementor-heading-title {
    font-size: 32px;
}

.elementor-770 .elementor-element.elementor-element-0af1f3d .elementor-heading-title {
    font-size: 32px;
}

/* "Collect 20% More With Managed Revenue Cycle Services" callout banner:
   a 476px forced min-height with vertically-centered content left large
   empty gaps above/below the icon+heading+text+button; also brand-align
   the button color. */
.elementor-770 .elementor-element.elementor-element-51a3ece {
    --min-height: 300px;
    --margin-top: 24px;
}

/* All CTA buttons on this page share the same background color, typography,
   and shape, regardless of which section they're in. */
.elementor-770 .elementor-element.elementor-element-5329018 .elementor-button,
.elementor-770 .elementor-element.elementor-element-012d3e0 .elementor-button,
.elementor-770 .elementor-element.elementor-element-d9424c4 .elementor-button,
.elementor-770 .elementor-element.elementor-element-cd52efe .elementor-button,
.elementor-770 .elementor-element.elementor-element-75faf0c .elementor-button,
.elementor-770 .elementor-element.elementor-element-38073f6 .elementor-button,
.elementor-770 .elementor-element.elementor-element-e55e126 .elementor-button,
.elementor-770 .elementor-element.elementor-element-fced47e .elementor-button,
.elementor-770 .elementor-element.elementor-element-0254b2d .elementor-button {
    background-color: #0888A7;
    font-family: "Poppins", Sans-serif;
    font-weight: 700;
    border-radius: 8px;
}

.elementor-770 .elementor-element.elementor-element-5329018 .elementor-button:hover,
.elementor-770 .elementor-element.elementor-element-5329018 .elementor-button:focus,
.elementor-770 .elementor-element.elementor-element-012d3e0 .elementor-button:hover,
.elementor-770 .elementor-element.elementor-element-012d3e0 .elementor-button:focus,
.elementor-770 .elementor-element.elementor-element-d9424c4 .elementor-button:hover,
.elementor-770 .elementor-element.elementor-element-d9424c4 .elementor-button:focus,
.elementor-770 .elementor-element.elementor-element-cd52efe .elementor-button:hover,
.elementor-770 .elementor-element.elementor-element-cd52efe .elementor-button:focus,
.elementor-770 .elementor-element.elementor-element-75faf0c .elementor-button:hover,
.elementor-770 .elementor-element.elementor-element-75faf0c .elementor-button:focus,
.elementor-770 .elementor-element.elementor-element-38073f6 .elementor-button:hover,
.elementor-770 .elementor-element.elementor-element-38073f6 .elementor-button:focus,
.elementor-770 .elementor-element.elementor-element-e55e126 .elementor-button:hover,
.elementor-770 .elementor-element.elementor-element-e55e126 .elementor-button:focus,
.elementor-770 .elementor-element.elementor-element-fced47e .elementor-button:hover,
.elementor-770 .elementor-element.elementor-element-fced47e .elementor-button:focus,
.elementor-770 .elementor-element.elementor-element-0254b2d .elementor-button:hover,
.elementor-770 .elementor-element.elementor-element-0254b2d .elementor-button:focus {
    background-color: #066e87;
}