/*=========================================================
= RTL
=========================================================*/

html[lang="ar"]{
    direction: rtl;
}

html[lang="ar"] body{
    direction: rtl;
    text-align: right;
    font-family: "Amiri", serif;
    font-weight: 400;
    line-height: 1.9;
    color: #222;
}

/*=========================================================
= TITRES
=========================================================*/

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"] .section-title,
html[lang="ar"] .hero-title,
html[lang="ar"] .page-title{
    font-family: "Aref Ruqaa", serif;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0;
    color: #000;
}

/*=========================================================
= PARAGRAPHES
=========================================================*/

html[lang="ar"] p,
html[lang="ar"] span,
html[lang="ar"] li,
html[lang="ar"] td,
html[lang="ar"] th,
html[lang="ar"] label{
    font-family: "Amiri", serif;
    line-height: 2;
}

/*=========================================================
= MENUS
=========================================================*/

html[lang="ar"] .navbar,
html[lang="ar"] .nav-menu,
html[lang="ar"] .nav-menu li a,
html[lang="ar"] .mobile-menu,
html[lang="ar"] .mobile-menu a,
html[lang="ar"] .top-bar,
html[lang="ar"] .lang-item{
    font-family: "Cairo", sans-serif;
    direction: rtl;
}

/*=========================================================
= BOUTONS
=========================================================*/

html[lang="ar"] button,
html[lang="ar"] .btn,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea{
    font-family: "Cairo", sans-serif;
}

/*=========================================================
= TOP BAR
=========================================================*/

html[lang="ar"] .top-bar-content{
    direction: rtl;
}

/*=========================================================
= NAVBAR
=========================================================*/

html[lang="ar"] .nav-menu{
    direction: rtl;
}

/*=========================================================
= MOBILE
=========================================================*/

html[lang="ar"] .mobile-menu{
    direction: rtl;
    text-align: right;
}

/*=========================================================
= FORMULAIRES
=========================================================*/

html[lang="ar"] input,
html[lang="ar"] textarea{
    text-align: right;
}

/*=========================================================
= TABLEAUX
=========================================================*/

html[lang="ar"] table{
    direction: rtl;
}