@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/mizan/ibm-plex-sans-arabic-400.ttf")
         format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}


@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/mizan/ibm-plex-sans-arabic-500.ttf")
         format("truetype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}


@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/mizan/ibm-plex-sans-arabic-600.ttf")
         format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}


@font-face {
    font-family: "IBM Plex Sans Arabic";
    src: url("../fonts/mizan/ibm-plex-sans-arabic-700.ttf")
         format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}


@font-face {
    font-family: "Noto Sans Arabic";
    src: url("../fonts/mizan/noto-sans-arabic-400.ttf")
         format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}


@font-face {
    font-family: "Noto Sans Arabic";
    src: url("../fonts/mizan/noto-sans-arabic-500.ttf")
         format("truetype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}


@font-face {
    font-family: "Noto Sans Arabic";
    src: url("../fonts/mizan/noto-sans-arabic-600.ttf")
         format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}


@font-face {
    font-family: "Noto Sans Arabic";
    src: url("../fonts/mizan/noto-sans-arabic-700.ttf")
         format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}


:root {
    --mzn-font-ar-ui: "IBM Plex Sans Arabic", Tahoma, sans-serif;
    --mzn-font-ar-content: "Noto Sans Arabic", Tahoma, sans-serif;
}

html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select {
    font-family: var(--mzn-font-ar-ui);
}

html[lang="ar"] .mzn-ar-content,
html[lang="ar"] .chat-message-content,
html[lang="ar"] .archive-content {
    font-family: var(--mzn-font-ar-content);
}

.wordmark, .cta-wordmark {
    font-family: Arial, "Segoe UI", sans-serif;
}