/* Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* -------------------------------------------------------------
   SECTION 1 — TYPE-SCALE TOKENS
   Single source of truth for every heading and body size.
   Updated at each breakpoint to match the responsive scale.
   ------------------------------------------------------------- */
:root {
    --font-size-p: 14px;
    --line-height-p: 20px;

    --font-size-h1: 34px;
    --line-height-h1: 41px;

    --font-size-h2: 24px;
    --line-height-h2: 31px;

    --font-size-h3: 17px;
    --line-height-h3: 24px;

    --font-size-h4: 15px;
    --line-height-h4: 20px;

    --font-size-h5: 14px;
    --line-height-h5: 19px;

    --font-size-h6: 14px;
    --line-height-h6: normal;
}

html,
body,
.body1 {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    background-color:
        /*#F8FAFD;*/
        #f7faff;
}

.editor-content.body2 {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    line-height: 22px;
}

.editor-content.Lead2 p {
    font-size: 17px;
    line-height: 27px;
}

h1 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 34px;
    font-weight: 300;
    line-height: 41px;
}

h1.h2 {
    font-size: 24px;
    line-height: 31px;
}

h1 strong,
h1 b {
    font-weight: 500;
}

h2 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: 300;
    line-height: 31px;
}

h2 strong,
h2 b {
    font-weight: 500;
}

h3 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: var(--font-size-h3);
    font-weight: 400;
    line-height: var(--line-height-h3);
}

h3 strong,
h3 b {
    font-weight: 500;
}

h4 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
}

h5 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 19px;
}

h6 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
}

strong {
    font-weight: 500;
}

b {
    font-weight: 600;
}

.small {
    font-size: 12px;
    line-height: normal;
    font-weight: 300;
}

.small-italic {
    font-size: 12px;
    line-height: normal;
    font-style: italic;
}

.small-strong {
    font-size: 12px;
    line-height: normal;
    font-weight: 700;
}

.small-link {
    font-size: 12px;
    line-height: normal;
    text-decoration-line: underline;
}

.abbreviation {
    font-size: 14px;
    line-height: normal;
}

.mwa-bttn {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    padding: 12px 24px;
    border-radius: 222px;
    transition: all .5s ease;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
}

.mwa-bttn.link {
    box-shadow: none;
}

.mwa-bttn.clrs-bumblebee:hover {
    background-color: var(--lemon);
}

@media only screen and (min-width: 768px) {
    :root {
        --guther: 20px;

        --font-size-p: 15px;
        --line-height-p: 22px;

        --font-size-h1: 43px;
        --line-height-h1: 51px;

        --font-size-h2: 34px;
        --line-height-h2: 48px;

        --font-size-h3: 24px;
        --line-height-h3: 29px;

        --font-size-h4: 19px;
        --line-height-h4: 22px;

        --font-size-h6: 12px;
        --line-height-h6: 14px;
    }

    html,
    .body1 {
        font-size: 15px;
        line-height: 22px;
    }

    h1 {
        font-size: 43px;
        line-height: 51px;
    }

    h1.h2 {
        font-size: 31px;
        line-height: 41px;
    }

    h2 {
        font-size: 34px;
        line-height: 48px;
    }

    h4 {
        font-size: 19px;
        line-height: 22px;
    }

    h6 {
        font-size: 12px;
        line-height: 14px;
    }

    .mwa-bttn {
        font-size: 16px;
        padding: 14px 28px;
    }

    .editor-content.Lead2 p {
        font-size: 20px;
        line-height: 32px;
    }

}

@media only screen and (min-width: 900px) {

    :root {
        --font-size-h3: 27px;
        --line-height-h3: 36px;
    }

    /*Desktop font*/
    html,
    body,
    .body1 {
        font-size: 16px;
        line-height: 24px;
    }

    .editor-content.Lead2 p {
        font-size: 20px;
        line-height: 30px;
    }

}

@media only screen and (min-width: 1200px) {
    :root {
        --font-size-h1: 63px;
        --line-height-h1: 72px;

        --font-size-h2: 44px;
        --line-height-h2: 54px;

        --font-size-h3: 31px;
        --line-height-h3: 41px;

        --font-size-h4: 20px;
        --line-height-h4: 27px;

        --font-size-h5: 17px;
        --line-height-h5: 20px;

        --font-size-h6: 15px;
        --line-height-h6: 18px;
    }

    h1 {
        font-size: 63px;
        line-height: 72px;
    }

    h1.h2 {
        font-size: 44px;
        line-height: 54px;
    }

    h2 {
        font-size: 44px;
        line-height: 54px;
    }

    h4 {
        font-size: 20px;
        line-height: 27px;
    }

    h5 {
        font-size: 17px;
        line-height: 20px;
    }

    h6 {
        font-size: 15px;
        line-height: 18px;
    }

}

/* -------------------------------------------------------------
   SECTION 2 — UTILITY SIZE CLASSES
   Applied by the TinyMCE "Styles" dropdown or directly in
   templates. Each class overrides the visual size of any block
   element while keeping its semantic HTML tag intact.

   Example:  <h1 class="font-p">  — H1 for SEO, body text size
             <p  class="font-h1"> — paragraph that looks like H1
             <h2 class="font-h6"> — H2 for SEO, visually small
   ------------------------------------------------------------- */

.font-p {
    font-family: 'Poppins', sans-serif !important;
    font-size: var(--font-size-p) !important;
    line-height: var(--line-height-p) !important;
    font-weight: 300 !important;
}

.font-h1,
.font-h2,
.font-h3,
.font-h4,
.font-h5,
.font-h6 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

.font-h1 {
    font-size: var(--font-size-h1) !important;
    line-height: var(--line-height-h1) !important;
    font-weight: 300 !important;
}

.font-h2 {
    font-size: var(--font-size-h2) !important;
    line-height: var(--line-height-h2) !important;
    font-weight: 300 !important;
}

.font-h3 {
    font-size: var(--font-size-h3) !important;
    line-height: var(--line-height-h3) !important;
    font-weight: 300 !important;
}

.font-h4 {
    font-size: var(--font-size-h4) !important;
    line-height: var(--line-height-h4) !important;
    font-weight: 500 !important;
}

.font-h5 {
    font-size: var(--font-size-h5) !important;
    line-height: var(--line-height-h5) !important;
    font-weight: 500 !important;
}

.font-h6 {
    font-size: var(--font-size-h6) !important;
    line-height: var(--line-height-h6) !important;
    font-weight: 500 !important;
}