:root {
    --body-font: "Inter", "Tajawal", "saudi_riyal", sans-serif;
    --title-font: "Inter", "Tajawal", "saudi_riyal", sans-serif;
}

body {
    font-family: var(--body-font);
    font-size: 15px;
    line-height: 1.55;
    color: #1f2937;
}

html[dir="rtl"],
html[lang="ar"],
html[lang^="ar"],
html[lang="ur"],
html[lang^="ur"] {
    --body-font: "Tajawal", "Inter", "saudi_riyal", sans-serif;
    --title-font: "Tajawal", "Inter", "saudi_riyal", sans-serif;
}

html[dir="rtl"] body,
html[lang="ar"] body,
html[lang^="ar"] body,
html[lang="ur"] body,
html[lang^="ur"] body {
    font-family: var(--body-font) !important;
    direction: rtl;
}

html[dir="rtl"] .use-tawba-header,
html[lang="ar"] .use-tawba-header,
html[lang^="ar"] .use-tawba-header,
html[lang="ur"] .use-tawba-header,
html[lang^="ur"] .use-tawba-header {
    font-family: var(--body-font) !important;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang^="ar"] h1,
html[lang^="ar"] h2,
html[lang^="ar"] h3,
html[lang^="ar"] h4,
html[lang^="ar"] h5,
html[lang^="ar"] h6,
html[lang="ur"] h1,
html[lang="ur"] h2,
html[lang="ur"] h3,
html[lang="ur"] h4,
html[lang="ur"] h5,
html[lang="ur"] h6,
html[lang^="ur"] h1,
html[lang^="ur"] h2,
html[lang^="ur"] h3,
html[lang^="ur"] h4,
html[lang^="ur"] h5,
html[lang^="ur"] h6,
html[dir="rtl"] .sec-title,
html[dir="rtl"] .hero-title,
html[dir="rtl"] .th-hero-title,
html[dir="rtl"] .slider-title,
html[dir="rtl"] .title-anime,
html[dir="rtl"] .box-title,
html[lang="ar"] .sec-title,
html[lang="ar"] .hero-title,
html[lang="ar"] .th-hero-title,
html[lang="ar"] .slider-title,
html[lang="ar"] .title-anime,
html[lang="ar"] .box-title,
html[lang^="ar"] .sec-title,
html[lang^="ar"] .hero-title,
html[lang^="ar"] .th-hero-title,
html[lang^="ar"] .slider-title,
html[lang^="ar"] .title-anime,
html[lang^="ar"] .box-title,
html[lang="ur"] .sec-title,
html[lang="ur"] .hero-title,
html[lang="ur"] .th-hero-title,
html[lang="ur"] .slider-title,
html[lang="ur"] .title-anime,
html[lang="ur"] .box-title,
html[lang^="ur"] .sec-title,
html[lang^="ur"] .hero-title,
html[lang^="ur"] .th-hero-title,
html[lang^="ur"] .slider-title,
html[lang^="ur"] .title-anime,
html[lang^="ur"] .box-title {
    letter-spacing: 0 !important;
    word-spacing: normal !important;
    font-family: var(--title-font) !important;
}

h1 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
}

h2 {
    font-size: 30px;
    font-weight: 600;
}

h3 {
    font-size: 22px;
    font-weight: 600;
}

h4 {
    font-size: 18px;
    font-weight: 500;
}

p {
    font-size: 15px;
    font-weight: 400;
}

small {
    font-size: 13px;
}

.navbar a {
    font-size: 14px;
    font-weight: 500;
}

button,
.btn {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: 14px;
}

.card-title {
    font-size: 18px;
    font-weight: 600;
}

.card-description {
    font-size: 13px;
}