@font-face {
    font-family: "Manrope";
    src: url("../fonts/Manrope-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../fonts/Manrope-Medium.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../fonts/Manrope-SemiBold.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../fonts/Manrope-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans24pt-ExtraLight.woff2") format("woff2");
    font-style: normal;
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans24pt-ExtraLightItalic.woff2") format("woff2");
    font-style: italic;
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans24pt-Light.woff2") format("woff2");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans24pt-LightItalic.woff2") format("woff2");
    font-style: italic;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans24pt-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans24pt-Italic.woff2") format("woff2");
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans24pt-Medium.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans24pt-MediumItalic.woff2") format("woff2");
    font-style: italic;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans24pt-SemiBold.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans24pt-SemiBoldItalic.woff2") format("woff2");
    font-style: italic;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans24pt-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans24pt-BoldItalic.woff2") format("woff2");
    font-style: italic;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans24pt-ExtraBold.woff2") format("woff2");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans24pt-ExtraBoldItalic.woff2") format("woff2");
    font-style: italic;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans24pt-Black.woff2") format("woff2");
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans24pt-BlackItalic.woff2") format("woff2");
    font-style: italic;
    font-weight: 900;
    font-display: swap;
}

:root {
    --font-heading: "Manrope";
    --font-body: "DM Sans";
}

html,
body,
[data-component-root],
button,
input,
textarea,
select,
option,
label,
legend,
summary,
p,
a,
li,
dt,
dd,
time,
small,
strong,
b,
em,
blockquote,
figcaption,
th,
td,
pre,
code,
kbd,
samp,
address,
[data-content-role],
[class*="font-["],
[class*="[font-family:"],
[style*="font-family"],
[data-typography-role="body"] {
    font-family: var(--font-body) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 *,
[data-typography-role="heading"],
[data-typography-role="heading"] * {
    font-family: var(--font-heading) !important;
}
