@font-face {
  font-family: "Montserrat";
  src: url("/fonts/Montserrat/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

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

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

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

@font-face {
  font-family: "Tajawal";
  src: url("/fonts/Tajawal/Tajawal-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-latin: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-arabic: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
  --site-font-body: var(--font-latin);
  --site-font-heading: var(--font-latin);
  --site-font-nav: var(--font-latin);
  --default-font: var(--site-font-body);
  --heading-font: var(--site-font-heading);
  --nav-font: var(--site-font-nav);
}

html[lang="ar"],
html[dir="rtl"] {
  --site-font-body: var(--font-arabic);
  --site-font-heading: var(--font-arabic);
  --site-font-nav: var(--font-arabic);
}

body,
input,
select,
textarea,
button {
  font-family: var(--site-font-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-title h2,
.hero h2,
.hero .hero-subtitle,
.navmenu a,
.hero-btn,
.portfolio .portfolio-filters li {
  font-family: var(--site-font-heading);
}