html[lang="ar"],
html[lang^="ar-"] {
  font-family: "Cairo", "SF Pro Text", "Roboto", sans-serif;
}

html[lang="ar"] body,
html[lang^="ar-"] body,
html[lang="ar"] button,
html[lang^="ar-"] button,
html[lang="ar"] input,
html[lang^="ar-"] input,
html[lang="ar"] select,
html[lang^="ar-"] select,
html[lang="ar"] textarea,
html[lang^="ar-"] textarea,
html[lang="ar"] .form-control,
html[lang^="ar-"] .form-control,
html[lang="ar"] h1,
html[lang^="ar-"] h1,
html[lang="ar"] h2,
html[lang^="ar-"] h2,
html[lang="ar"] h3,
html[lang^="ar-"] h3,
html[lang="ar"] h4,
html[lang^="ar-"] h4,
html[lang="ar"] h5,
html[lang^="ar-"] h5,
html[lang="ar"] h6,
html[lang^="ar-"] h6,
html[lang="ar"] p,
html[lang^="ar-"] p,
html[lang="ar"] a,
html[lang^="ar-"] a,
html[lang="ar"] li,
html[lang^="ar-"] li,
html[lang="ar"] span:not([class*="icon"]):not(.fa):not(.far):not(.fas):not(.fab),
html[lang^="ar-"] span:not([class*="icon"]):not(.fa):not(.far):not(.fas):not(.fab),
html[lang="ar"] label,
html[lang^="ar-"] label,
html[lang="ar"] div,
html[lang^="ar-"] div {
  font-family: "Cairo", "SF Pro Text", "Roboto", sans-serif !important;
}

html[lang="ar"] .select2-container .select2-selection--single .select2-selection__rendered,
html[lang^="ar-"] .select2-container .select2-selection--single .select2-selection__rendered,
html[lang="ar"] .select2-container .select2-selection--multiple,
html[lang^="ar-"] .select2-container .select2-selection--multiple {
  font-family: "Cairo", "SF Pro Text", "Roboto", sans-serif !important;
}