@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 {
    --primary: #81654c;
    --primary-li: #55251779;
    --primary-lighttest: #5525172e;
    --secondary: #d0ad83ff;
    --secondary-li: #d0ad83ca;
    --bg: #FCFCFC;
    --light-bg: #F6F6F6;
    --light-bage: #e0d0b9;
    --dark-bg: #371a0a;
    --blue: #00B8FB;
    --font: #42493A;
    --gradient: linear-gradient(to bottom, #20b750, #a8eb12);
}

html[data-theme='dark'] {
    --bg: #0000;
    --light-bg: #42493A;
    --dark-bg: #F6F6F6;
    --font: #F6F6F6;
}

body {
    scroll-behavior: smooth;
}


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

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