/* التهيئات الأساسية */
:root {

    /*اللون الأسود ودرجاته*/

    --black-one-color: #000000; 
    --black-two-color: #171717;
    --black-three-color: #2E2E2E;
    --black-four-color: #464646;
    --black-five-color: #5D5D5D;
    --black-six-color: #747474;


    /*اللون الأبيض ودرجاته*/

    --white-one-color: #FFFFFF;
    --white-two-color: #E8E8E8;
    --white-three-color: #D1D1D1; 
    --white-four-color: #B9B9B9; 
    --white-five-color: #A2A2A2; 
    --white-six-color: #8B8B8B; 

}  

/* تهيئة الخطوط [هوية الموقع] */

@font-face {
    /* تهيئة خط المستخدم */
    font-family: 'Lyon';
    src: url('../fonts/lyon-arabic-display-light.otf') format('opentype'); /* الخط الخفيف | المراجع */
    font-weight: lighter;
    font-style: normal;
}

@font-face {
    /* تهيئة خط المستخدم */
    font-family: 'Lyon';
    src: url('../fonts/lyon-arabic-display-regular.otf') format('opentype'); /* الخط العادي | المتن */
    font-weight: normal;
    font-style: normal;
}
@font-face {
    /* تهيئة خط المستخدم */
    font-family: 'Lyon';
    src: url('../fonts/lyon-arabic-display-medium.otf') format('opentype'); /* الخط المتوسط | عنوان فرعي */
    font-weight: 500;
    font-style: normal;
}
@font-face {
    /* تهيئة خط المستخدم */
    font-family: 'Lyon';
    src: url('../fonts/lyon-arabic-display-bold.otf') format('opentype'); /* الخط الغليظ | العنواين */
    font-weight: bold;
    font-style: normal;
}

@font-face {
    /* تهيئة خط الأرقام */
    font-family: 'NumberFont';
    src: url('../fonts/Bison-Bold.ttf') format('opentype'); /* الخط الغليظ | العنواين */
    font-weight: normal;
    font-style: normal;
}

* {

    box-sizing: border-box;
    -mo-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin: 0;
    direction: rtl;
}
*::selection{
    background-color: var(--white-two-color);
    color: var(--black-two-color);
} 
a {
    text-decoration: none;
    color: var(--white-one-color);
}
a:visited {
    color: var(--white-two-color);
}
ul {
    list-style: none;
    padding: 0;
}
body {
    min-width: 250px;
    font-family: 'lyon',Arial, Helvetica, sans-serif;
    font-weight: normal;
    background-color: var(--black-one-color);
}
.container {
    width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left : 25px;
    padding-right: 25px;
}

/* loeding style */
.loeding {
    position: fixed;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: var(--black-one-color);
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
.loeding span {
    position: relative;
    color: var(--white-three-color);
    padding: 7.5px;
    width: 120px;
    height: 40px;
    border-bottom: 1px solid;
    border-top: 1px solid;
    border-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(46,46,46,1) 50%, rgba(0,0,0,0) 100%) 1;
    text-align: center;
}
.loeding span::before {
    content: '';
    width: 5px;
    height: 5px;
    position: absolute;
    top: 15.5px;
    right: -10px;
    background-color: var(--white-one-color);
    animation-name: loeding;
    animation-iteration-count: infinite;
    animation-duration: 1000ms;
    animation-direction:alternate;
    animation-timing-function: ease-in-out;
}

.loeding span::after {
    content: '';
    width: 5px;
    height: 5px;
    position: absolute;
    top: 15.5px;
    left: -10px;
    background-color: var(--white-one-color);
    animation-name: loeding;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;


}

@keyframes loeding {
    0% {
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}