@font-face {
    font-family: tajawal-li;
    src: url(../fonts/GE_SS_Two_Light-1.otf);
}

@font-face {
    font-family: tajawal;
    src: url(../fonts/GE_SS_Two_Medium-1.otf);
}

@font-face {
    font-family: tajawal-400;
    src: url(../fonts/Tajawal-Regular.ttf);
}

@font-face {
    font-family: tajawal-700;
    src: url(../fonts/GE_SS_Two_Bold.otf);
}

@font-face {
    font-family: bold;
    src: url(../fonts/Montserrat-Bold.ttf);
}

@font-face {
    font-family: mid;
    src: url(../fonts/Montserrat-Medium.ttf);
}

@font-face {
    font-family: light;
    src: url(../fonts/Montserrat-Light.ttf);
}


html {
    --nav-bg: rgba(255, 255, 255, .9);
    --nav-mobile-bg: rgba(255, 255, 255, .95);

    --trans-bg: rgba(255, 255, 255, .55);
    --trans-bg-li: rgba(255, 255, 255, .1);

    --nav-color: rgba(0, 0, 0 .8);

    --white-color: #fff;
    --white-trans-color: #ffffff7a;
    --dark-color: #444;

    --dark-li-color: #efefef;
    --dark-li2-color: #92929f;


    --light-color: #f5f5f7;

    --text-color: #000000;

    --shadow-color: rgba(0, 0, 0, .18);
    --shadow-li-color: rgba(0, 0, 0, .08);

    --opacity: .05;
    --brightness: .9;
    --brightness2: .1;


    --primary: #008376;
    --primary-li-70: #00aa9c;
    --primary-li-50: #61c2b8;
    --primary-li-30: #a6dbd4;
    --primary-li-10: #a6dbd47e;
    --info: #16becf;
    --danger: #d46d6e;
    --navy: #48314a;
    --gold: #ad9a76;
    --gold-li-10: #ad9a7678;


    --gold-li-30: #ad9a765d;

    --card-color: #fcfcfc;
    --bg: #f0f0f0;
    --light-bg: #F6F6F6;
    --light-bage: #e0d0b9;
    --dark-bg: #371a0a;
    --blue: #00B8FB;
    --font: #42493A;
    --gradient: linear-gradient(to right, var(--primary), var(--gold));
    --gradient-li: linear-gradient(to right, var(--primary-li-30), var(--gold-li-30));
    --gradient-li-10: linear-gradient(to right, var(--primary-li-10), var(--gold-li-10));
    --white: #FFFF;
    --text-color-light: #444444;
    --text-color-light2: #9f9f9d;
    --text-color-light3: #c2c2bf;


    --nav-items-color: #fafaf7;
}

html[data-theme='dark'] {
    --nav-bg: rgba(0, 0, 0, .9);
    --nav-mobile-bg: rgba(0, 0, 0, .95);

    --trans-bg: rgba(0, 0, 0, .55);
    --trans-bg-li: rgba(0, 0, 0, .20);


    --nav-color: rgba(255, 255, 255, .8);

    --text-color: #eeebeb;

    --white-color: #101110;
    --white-li-color: #101010;
    --white-trans-color: rgba(255, 255, 255, 0.414);

    --dark-color: #fff;
    --dark-li-color: #363434;
    --dark-li2-color: #92929f;

    --opacity: .5;
    --brightness: .3;
    --brightness: 60;


    --light-color: #56565b;

    --input-color: #413c3c;

    --shadow-color: rgba(255, 255, 255, .18);



    --white: #0000;
    --bg: #23262f;
    --card-color: #2e313c;
    --light-bg: #42493A;
    --dark-bg: #F6F6F6;
    --font: #F6F6F6;


    --nav-items-color: #f1f1f1;
}

body {
    scroll-behavior: smooth;
    background-color: var(--bg);
    font-family: tajawal;
}


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

a {
    text-decoration: none;
}

p {
    padding: 0;
    margin: 0;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.no_scroll::-webkit-scrollbar {
    display: none;
}

::-webkit-scrollbar-track {
    background-color: var(--bg);
    border-radius: 100px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--primary-li);
    border-radius: 100px;
}

.font-12 {
    font-size: 12px;
}

.font-14 {
    font-size: 14px;
    font-family: thin;
}

.bg_primary {
    background-color: var(--primary);
}

.bg_secondary {
    background-color: var(--secondary);
}

.color_primary {
    color: var(--primary);
}

.color_secondary {
    color: var(--secondary);
}

.bg_gradient {
    background: var(--gradient);
}

::placeholder {
    color: var(--text-color-light3) !important;
}

.btn_outline_primary {
    color: var(--primary);
    border-color: var(--primary);
}

.btn_outline_primary :hover {
    background-color: var(--primary);
    color: white;
}