:root {
    /*colors*/
    /*main colors, blue*/
    --first-color: #007a9e; /*primary color*/
    --first-color-overlay: #00799e4d; /*primary color*/
    --second-color: #0799d2;
    --third-color: #3ebcbd;

    --fourth-color: #fff; /*white color*/
    --fifth-color: #000; /*black color*/
    --sixth-color: #e4e4e4; /*gray color, background and borders*/
    --seventh-color: #101010; /*header menu font color*/
    --eighth-color: #727272;
    --ninth-color: #f5f5f5; /*border color*/
    --tenth-color: #242424;
    --eleventh-color: #161616; /*footer copy rights background color*/
    --twelfth-color: #f1f1f1;
    --thirteenth-color: #e7e7e7;
    --fourteenth-color: #bababa;
    --fifteenth-color: rgba(7, 153, 210, 0.8); /*image overlay color on hover*/
    --sixteenth-color: #5c5b5b;
    --seventeenth-color: #e9e9e9;
    --eighteenth-color: #3b3b3b;
    --nineteenth-color: #f6f6f6;
    --twentieth-color: #666; /*font color*/
    --twenty-first-color: #272727; /*title font color*/
    --twenty-second-color: #3e3e3e; /*button background hover color*/
    --twenty-third-color: #ECECEC; /*project filter border color*/
    --twenty-fourth-color: #888888; /*project filter font color*/

    /*Font Family*/
    --font-family-en: 'Open Sans';
    --font-family-ar: 'Tajawal';

    /*Font size*/
    --font-size: 14px;
    --title-h2-font-size: 35px;
    --title-h3-font-size: 27px;
    --title-h4-font-size: 22px;
    --title-h5-font-size: 18px;
    --title-h6-font-size: 16px;
    --button-font-size: 14px;
    --project-filters-font-size: 12px;
}