:root {
    --body-bg: #030321;
    --primary-bg: #030321;
    --primary-color: #fff;
    --secondary-color: blue;
    --text-color: rgb(245, 213, 6);
    --basic-gap: 10px;
    --icon-color: rgb(245, 213, 6);
    --header-bg: rgb(87, 129, 255);
    /* height controller */
    --header-height: 70px;
    --slider-height: 130px;
    --slider-weidth: 270px;
    --sidebar-weidth: 75%;
    --sidbar-heder-height: 200px;
    /* background controller */
    --header-bg: #060622;
    --main-content-bg: var(--primary-bg);
    --sidbar-bg: var(--primary-bg);
}

body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    position: relative;
    background-color: var(--body-bg);
}
.row{
    margin: 0 !important;
}

* {
    padding: 0;
    margin: 0;
    /* scrollbar-width: none; */
}

a {
    text-decoration: none;
}

li {
    list-style-type: none;
}

p {
    padding: 0;
    margin: 0;
}

/* baisc */
.icon-color {
    color: var(--icon-color);
}

.basic-gap-left {
    padding-left: var(--basic-gap);
}

.basic-gap-right {
    padding-right: var(--basic-gap);
}

.basic-gap-bottom {
    padding-bottom: var(--basic-gap);
}

.basic-gap-top {
    padding-top: var(--basic-gap);
}
.basic-gap {
    padding: var(--basic-gap);
}