html[lang="ar"] {
    font-family: 'Noto Naskh Arabic', Optima, Helvetica, Arial, sans-serif;
    font-feature-settings: "locl";
}

body {
    font-family: 'Noto Naskh Arabic', Optima, Helvetica, Arial, sans-serif;
}

[dir="rtl"] body,
[dir="rtl"] p,
[dir="rtl"] div {
    font-family: 'Noto Naskh Arabic', Optima, Helvetica, Arial, sans-serif;
}
[dir="rtl"] h1 {
    color: #8C6A10;
    font-family: "Alexandria", serif;
    font-size: calc(2vw + 1em);
    font-weight: 900;
    margin-bottom: 10px;
    margin-top: 20px;
}

[dir="rtl"] h2 {
    color: #8C6A10;
    font-family: "Alexandria", serif;
    font-size: calc(1.2vw + 1em);
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: 20px
}

[dir="rtl"] h3 {
    color: #8C6A10;
    font-family: "Alexandria", serif;
    font-size: calc(0.80vw + 0.8em);
    font-weight: 700;
}
[dir=rtl].mtitlea {
    color: wheat;
    font-family: "Alexandria", serif;
    font-size: calc(1vw + 1em);
    font-weight: 900;
}
@font-face {
    font-family: 'Alexandria';
    font-display: swap;
    src: url('../fonts/alexandria-variablefont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Naskh Arabic';
    font-display: swap;
    src: url('../fonts/NotoNaskhArabic-VariableFont_wght.ttf') format('truetype');
}
[dir=rtl] .fa-ul {
    margin-left: inherit;
    margin-right: 2.14286em;
    padding-left: inherit;
    padding-right: 0
}

[dir=rtl] .fa-li {
    left: inherit;
    right: -2.14286em
}
@media (min-width:768px) {
    [dir="rtl"] h1 {
        font-size: calc(1.5vw + 1em);
    }

    [dir="rtl"] h2 {
        font-size: calc(1vw + 1em);
    }

    [dir="rtl"] h3 {
        font-size: calc(0.7vw + 0.8em);
    }

    .container {
        width: 750px
    }
}