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

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

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

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


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

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

    --white-color: #fff;
    --white-trans-color: #ffffff7a;
    --dark-color: #1a1e22;
    
    --dark-li-color: #efefef;
    --dark-li2-color: #92929f;
    

    --light-color: #fcfcfc;
    --card-color: #fcfcfc;

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

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


    --primary: #2D1C48;
    --primary-li: #7e359d67;
    --primary-lighttest: #5525172e;
    --secondary: #66A89F;
    --secondary-li: #d0ad83ca;

    --danger: #df6183;
    
    --input-color:#f2f2f2;

    --bg: #f0f0f0;
    --light-bg: #F6F6F6;
    --light-bage: #e0d0b9;
    --dark-bg: #371a0a;
    --blue: #00B8FB;
    --font: #42493A;
    --gradient: linear-gradient(to right, var(--primary), var(--secondary));
    --gradient-li: linear-gradient(to right, #7e359d39, #66a89f2b);
    --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, .1);
    --nav-mobile-bg: rgba(0, 0, 0, .9);

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

    --white-color: #1a1e22;
    --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: #23262f;
    --card-color: #2e313c;

    --input-color:#413c3c;

    /* --shadow-color: rgba(255, 255, 255, .18) */



    --white: #0000;
    --bg: #23262f;
    --light-bg: #42493A;
    --dark-bg: #F6F6F6;
    --font: #F6F6F6;


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

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


* {
    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;
}

.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;
    font-style: italic;
}

.card-color{
    background-color: var(--card-color);
}

.font_light{
    font-family: tajawal-li;
}

.font_mid{
    font-family: tajawal-400;
}
.font_bold{
    font-family: tajawal-700;
}

.pointer{
    cursor: pointer;
}