@font-face {
    font-family: 'AlArabiya Normal';
    src: url('/assets/fonts/alarabiya/Alarabiya-Normal.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu Local';
    src: url('/assets/fonts/ubuntu/Ubuntu-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu Local';
    src: url('/assets/fonts/ubuntu/Ubuntu-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu Local';
    src: url('/assets/fonts/ubuntu/Ubuntu-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --kara-font-latin: 'Ubuntu Local', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --kara-font-arabic: 'AlArabiya Normal', 'Noto Naskh Arabic', 'Tahoma', sans-serif;
}

html[lang^='en'],
html[lang^='en'] body,
html[lang^='en'] button,
html[lang^='en'] input,
html[lang^='en'] select,
html[lang^='en'] textarea,
html[lang^='fr'],
html[lang^='fr'] body,
html[lang^='fr'] button,
html[lang^='fr'] input,
html[lang^='fr'] select,
html[lang^='fr'] textarea,
html[lang^='es'],
html[lang^='es'] body,
html[lang^='es'] button,
html[lang^='es'] input,
html[lang^='es'] select,
html[lang^='es'] textarea,
html[lang^='id'],
html[lang^='id'] body,
html[lang^='id'] button,
html[lang^='id'] input,
html[lang^='id'] select,
html[lang^='id'] textarea {
    font-family: var(--kara-font-latin);
}

html[lang^='en'] .font-display,
html[lang^='en'] .font-heading,
html[lang^='en'] .font-body,
html[lang^='en'] .font-sans,
html[lang^='en'] .font-mono,
html[lang^='fr'] .font-display,
html[lang^='fr'] .font-heading,
html[lang^='fr'] .font-body,
html[lang^='fr'] .font-sans,
html[lang^='fr'] .font-mono,
html[lang^='es'] .font-display,
html[lang^='es'] .font-heading,
html[lang^='es'] .font-body,
html[lang^='es'] .font-sans,
html[lang^='es'] .font-mono,
html[lang^='id'] .font-display,
html[lang^='id'] .font-heading,
html[lang^='id'] .font-body,
html[lang^='id'] .font-sans,
html[lang^='id'] .font-mono {
    font-family: var(--kara-font-latin) !important;
}

html[lang^='en'] p,
html[lang^='en'] span,
html[lang^='en'] label,
html[lang^='en'] input,
html[lang^='en'] textarea,
html[lang^='en'] select,
html[lang^='en'] button,
html[lang^='fr'] p,
html[lang^='fr'] span,
html[lang^='fr'] label,
html[lang^='fr'] input,
html[lang^='fr'] textarea,
html[lang^='fr'] select,
html[lang^='fr'] button,
html[lang^='es'] p,
html[lang^='es'] span,
html[lang^='es'] label,
html[lang^='es'] input,
html[lang^='es'] textarea,
html[lang^='es'] select,
html[lang^='es'] button,
html[lang^='id'] p,
html[lang^='id'] span,
html[lang^='id'] label,
html[lang^='id'] input,
html[lang^='id'] textarea,
html[lang^='id'] select,
html[lang^='id'] button {
    font-weight: 400 !important;
}

html[lang^='en'] .font-medium,
html[lang^='en'] .font-semibold,
html[lang^='fr'] .font-medium,
html[lang^='fr'] .font-semibold,
html[lang^='es'] .font-medium,
html[lang^='es'] .font-semibold,
html[lang^='id'] .font-medium,
html[lang^='id'] .font-semibold {
    font-weight: 400 !important;
}

html[lang^='en'] h1,
html[lang^='en'] h2,
html[lang^='en'] h3,
html[lang^='en'] h4,
html[lang^='en'] .font-display,
html[lang^='en'] .font-heading,
html[lang^='fr'] h1,
html[lang^='fr'] h2,
html[lang^='fr'] h3,
html[lang^='fr'] h4,
html[lang^='fr'] .font-display,
html[lang^='fr'] .font-heading,
html[lang^='es'] h1,
html[lang^='es'] h2,
html[lang^='es'] h3,
html[lang^='es'] h4,
html[lang^='es'] .font-display,
html[lang^='es'] .font-heading,
html[lang^='id'] h1,
html[lang^='id'] h2,
html[lang^='id'] h3,
html[lang^='id'] h4,
html[lang^='id'] .font-display,
html[lang^='id'] .font-heading {
    font-weight: 700;
}

html[lang^='ar'],
html[lang^='ar'] body,
html[lang^='ar'] button,
html[lang^='ar'] input,
html[lang^='ar'] select,
html[lang^='ar'] textarea,
html[dir='rtl'],
html[dir='rtl'] body,
html[dir='rtl'] button,
html[dir='rtl'] input,
html[dir='rtl'] select,
html[dir='rtl'] textarea {
    font-family: var(--kara-font-arabic);
    font-synthesis: none;
    font-weight: 400;
}

html[lang^='ar'] body,
html[dir='rtl'] body {
    font-size: 1.08em;
    line-height: 1.8;
}

html[lang^='ar'] .font-display,
html[lang^='ar'] .font-heading,
html[lang^='ar'] .font-body,
html[lang^='ar'] .font-sans,
html[lang^='ar'] .font-mono,
html[dir='rtl'] .font-display,
html[dir='rtl'] .font-heading,
html[dir='rtl'] .font-body,
html[dir='rtl'] .font-sans,
html[dir='rtl'] .font-mono {
    font-family: var(--kara-font-arabic) !important;
}

html[lang^='ar'] .font-black,
html[lang^='ar'] .font-bold,
html[lang^='ar'] .font-semibold,
html[dir='rtl'] .font-black,
html[dir='rtl'] .font-bold,
html[dir='rtl'] .font-semibold {
    font-weight: 500 !important;
}

html[lang^='ar'] p,
html[lang^='ar'] span,
html[lang^='ar'] label,
html[lang^='ar'] input,
html[lang^='ar'] textarea,
html[lang^='ar'] select,
html[lang^='ar'] button,
html[dir='rtl'] p,
html[dir='rtl'] span,
html[dir='rtl'] label,
html[dir='rtl'] input,
html[dir='rtl'] textarea,
html[dir='rtl'] select,
html[dir='rtl'] button {
    font-weight: 400 !important;
}

html[lang^='ar'] .font-medium,
html[lang^='ar'] .font-normal,
html[dir='rtl'] .font-medium,
html[dir='rtl'] .font-normal {
    font-weight: 400 !important;
}

html[lang^='ar'] .text-xs,
html[dir='rtl'] .text-xs {
    font-size: 0.92rem !important;
}

html[lang^='ar'] .text-sm,
html[dir='rtl'] .text-sm {
    font-size: 1.02rem !important;
}

html[lang^='ar'] .text-base,
html[dir='rtl'] .text-base {
    font-size: 1.08rem !important;
}

html[lang^='ar'] h1,
html[lang^='ar'] h2,
html[lang^='ar'] h3,
html[lang^='ar'] h4,
html[dir='rtl'] h1,
html[dir='rtl'] h2,
html[dir='rtl'] h3,
html[dir='rtl'] h4 {
    line-height: 1.5;
}

html[lang^='ar'] .uppercase,
html[lang^='ar'] .tracking-tight,
html[lang^='ar'] .tracking-wide,
html[lang^='ar'] .tracking-widest,
html[dir='rtl'] .uppercase,
html[dir='rtl'] .tracking-tight,
html[dir='rtl'] .tracking-wide,
html[dir='rtl'] .tracking-widest {
    letter-spacing: normal !important;
}

html[lang^='ar'] .uppercase,
html[dir='rtl'] .uppercase {
    text-transform: none !important;
}

html[lang^='ar'] button,
html[lang^='ar'] input,
html[lang^='ar'] select,
html[lang^='ar'] textarea,
html[dir='rtl'] button,
html[dir='rtl'] input,
html[dir='rtl'] select,
html[dir='rtl'] textarea {
    font-size: inherit;
    line-height: inherit;
}

html[lang^='ar'] .kara-number,
html[lang^='ar'] .kara-number *,
html[dir='rtl'] .kara-number,
html[dir='rtl'] .kara-number * {
    font-family: var(--kara-font-latin) !important;
    font-variant-numeric: tabular-nums lining-nums;
    direction: ltr;
    unicode-bidi: isolate;
}