@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/cairo/cairo-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/cairo/cairo-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/cairo/cairo-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/cairo/cairo-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter/inter-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter/inter-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter/inter-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter/inter-700.woff2') format('woff2');
}

html[dir="rtl"] body,
html[lang="ar"] body {
    font-family: 'Cairo', Tahoma, Arial, sans-serif;
}

html[dir="ltr"] body,
html[lang="en"] body {
    font-family: 'Inter', Arial, sans-serif;
}

html[dir="rtl"] .bi,
html[lang="ar"] .bi {
    font-family: bootstrap-icons !important;
}