@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&family=Cairo:wght@300;400;500;600;700;800&display=swap");

:root {
  --font-en: "Barlow", Arial, sans-serif;
  --font-ar: "Cairo", Arial, sans-serif;
}

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

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

html[lang="ar"] .brand-text .top,
html[lang="ar"] .brand-text .sub,
html[lang="ar"] .nav-cta,
html[lang="ar"] .btn-primary,
html[lang="ar"] .btn-white,
html[lang="ar"] .btn-ghost,
html[lang="ar"] .stat-card .num,
html[lang="ar"] .about-card-accent .big,
html[lang="ar"] .step-num,
html[lang="ar"] .form-submit,
html[lang="ar"] .lang-switcher a,
html[lang="ar"] .mobile-lang-switcher a {
  font-family: var(--font-ar);
}

html[lang="ar"] .brand-text .sub,
html[lang="ar"] .eyebrow,
html[lang="ar"] .hero-eyebrow,
html[lang="ar"] .project-sector,
html[lang="ar"] .job-dept,
html[lang="ar"] .blog-cat,
html[lang="ar"] .ci-label {
  letter-spacing: .08em;
  text-transform: none;
}