/* ==========================================================
   Google Fonts
========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap");

/* ==========================================================
   Reset
========================================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ==========================================================
   HTML
========================================================== */

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

/* ==========================================================
   Body
========================================================== */

body{

    overflow-x:hidden;

    background:var(--bg);

    color:var(--text);

    font-family:"Inter",sans-serif;

    line-height:1.6;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;
}

/* ==========================================================
   Arabic
========================================================== */

html[lang="ar"] body{

    font-family:"IBM Plex Sans Arabic",sans-serif;

    line-height:1.9;

    letter-spacing:0;

}

/* ==========================================================
   English
========================================================== */

html[lang="en"] body{

    font-family:"Inter",sans-serif;

    line-height:1.6;

    letter-spacing:-0.01em;

}

/* ==========================================================
   Links
========================================================== */

a{

    color:inherit;

    text-decoration:none;

}

a:hover{

    text-decoration:none;

}

/* ==========================================================
   Lists
========================================================== */

ul,
ol{

    list-style:none;

}

/* ==========================================================
   Images
========================================================== */

img{

    display:block;

    max-width:100%;

    height:auto;

    user-select:none;

    -webkit-user-drag:none;

}

/* ==========================================================
   Form Elements
========================================================== */

button,
input,
textarea,
select{

    font:inherit;

}

button{

    cursor:pointer;

    border:none;

    background:none;

}