* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}

body {
    /* background-color: var(--bg-color); */
    font-family: var(--font-ar);
}
body,input,textarea,button,select{
    font-family: var(--font-ar);
}
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
}

html[dir="ltr"] input,
html[dir="ltr"] textarea,
html[dir="ltr"] select {
    text-align: left;
}



h2 {
    text-align: center;
    font-size: 46px;
    margin-bottom: 20px;
    color: var(--bg-color);
}

.container {
    width: 80%;
    margin: 0 auto;
}



 ::-webkit-scrollbar {
     width: 12px;
 }

 ::-webkit-scrollbar-track {
     background: var(--second-color);
 }

 ::-webkit-scrollbar-thumb {
     background-color: var(--bg-color);
     border-radius: 6px;
     border: 3px solid var(--main-color);
 }

 ::-webkit-scrollbar-thumb:hover {
     background-color: var(--second-bg-color);
 }