html{
    font-family: var(--font-ui, "Vazirmatn", sans-serif);
}
body{
    background-color: var(--bg);
    color: var(--text);
    font-family: inherit;
    line-height: 1.7;
    overflow-x: hidden;
    font-weight: 400;
}
p, li , article{
    font-weight: 400;
}
menu,button,input{
    font-weight: 500;
}
a{
    text-decoration: none;
    color: inherit;
    font-weight: 500;
}
ul{
    list-style: none;
}
img{
    display: block;
    max-width: 100%;
}
button{
    border: none;
    outline: none;
    cursor: pointer;
}
button, input, select, textarea, option, optgroup{
    font-family: inherit;
}
::selection{
    background: var(--bg);
    color: white;
}
::-webkit-scrollbar{
    width: 10px;
}
::-webkit-scrollbar-track{
    background: var(--bg);
}
::-webkit-scrollbar-thumb{
    background: var(--primary);
    border-radius: 20px;
}
h1,h2,h3,h4,h5,h6{
    line-height: 1.2;
    font-weight: 700;
}
.container{
    width: min(1200px,90%);
    margin-inline: auto;
}
.container-sm{
    width: min(900px,90%);
    margin-inline: auto;
}
.grid{
    display: grid;
}
.grid-2{
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
.grid-3{
    display: grid;
    grid-template-columns: repeat(3,1fr);
}
.grid-4{
    display: grid;
    grid-template-columns: repeat(4,1fr);
}
.gap_1{gap:10px}
.gap_2{gap:20px}
.gap_3{gap:30px}
.gap_4{gap:40px}
.gap_5{gap:50px}
.flex{display: flex;}
.flex-center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-between{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex-around{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.flex-start{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.flex-end{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.flex-dir-row{
    flex-direction: row;
}
.flex-dir-row-r{
    flex-direction: row-reverse;
}
.flex-dir-column{
    flex-direction: column;
}
.flex-dir-column-r{
    flex-direction: column-reverse;
}
.flex-grow-0{flex-grow:0;}
.flex-grow-1{flex-grow: 1;}
.flex-grow-2{flex-grow: 2;}
.flex-grow-3{flex-grow: 3;}
.flex-grow-4{flex-grow: 4;}
.flex-grow-5{flex-grow: 5;}
.flex-grow-6{flex-grow: 6;}
.flex-grow-7{flex-grow: 7;}
.flex-grow-8{flex-grow: 8;}
.flex-grow-9{flex-grow: 9;}
.flex-grow-10{flex-grow: 10;}
.w-100{width: 100%;}
.w-75{width: 75%;}
.w-50{width:50%}
.w-25{width: 25%;}
.h-100{height: 100%;}
.h-75{height: 75%;}
.h-50{height: 50%;}
.h-25{height: 25%;}
.text-center{text-align: center;}
.text-right{text-align: right;}
.text-left{text-align: left;}
.d-none{display: none;}
.d-block{display: block;}
.mt-1{margin-top: 10px;}
.mt-2{margin-top: 20px;}
.mt-3{margin-top: 30px;}
.mt-4{margin-top: 40px;}
.mt-5{margin-top: 50px;}
.mt-6{margin-top: 60px;}
.mt-7{margin-top: 70px;}
.mt-8{margin-top: 80px;}
.mt-9{margin-top: 90px;}
.mt-10{margin-top: 100px;}
.mb-1{margin-bottom: 10px;}
.mb-2{margin-bottom: 20px;}
.mb-3{margin-bottom: 30px;}
.mb-4{margin-bottom: 40px;}
.mb-5{margin-bottom: 50px;}
.mb-6{margin-bottom: 60px;}
.mb-7{margin-bottom: 70px;}
.mb-8{margin-bottom: 80px;}
.mb-9{margin-bottom: 90px;}
.mb-10{margin-bottom: 100px;}
.ml-1{margin-left: 10px;}
.ml-2{margin-left: 20px;}
.ml-3{margin-left: 30px;}
.ml-4{margin-left: 40px;}
.ml-5{margin-left: 50px;}
.mr-1{margin-right: 10px;}
.mr-2{margin-right: 20px;}
.mr-3{margin-right: 30px;}
.mr-4{margin-right: 40px;}
.mr-5{margin-right: 50px;}
.m-auto{
    margin: auto;
}
.py-1{padding-top:10px;padding-bottom: 10px;}
.py-2{padding-top:20px;padding-bottom: 20px;}
.py-3{padding-top:30px;padding-bottom: 30px;}
.py-4{padding-top:40px;padding-bottom: 40px;}
.py-5{padding-top:50px;padding-bottom: 50px;}
.py-6{padding-top:60px;padding-bottom: 60px;}
.py-7{padding-top:70px;padding-bottom: 70px;}
.py-8{padding-top:80px;padding-bottom: 80px;}
.py-9{padding-top:90px;padding-bottom: 90px;}
.py-10{padding-top:100px;padding-bottom: 100px;}
@media only screen and(max-width:600px){
    /* .sm-column{} */
}
@media only screen and(max-width:768px){
    /* .md-column{} */
}
@media only screen and(max-width:992px){
    /* .lg-column{} */
}
@media only screen and(max-width:1200px){}