@font-face {
    font-family: "Magnify";
    src: url("../fonts/Magnify-Hairline.ttf") format('truetype');
}

@font-face {
    font-family: "Magnify";
    src: url("../fonts/Magnify-Regular.ttf") format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: "Magnify";
    src: url("../fonts/Magnify-Bold.ttf") format('truetype');
    font-weight: 700;
}

:root {
    --FFFFFF: #FFFFFF;
    --000000: #000000;
    --F1F1F1: #F1F1F1;
    --FFA206: #FFA206;
    --FF6700: #FF6700;
    --262626: #262626;
    --9C9C9C: #9C9C9C;
    --7C7C7C: #7C7C7C;
    --BCBCBC: #BCBCBC;
    --DCDCDC: #DCDCDC;
    --D9D9D9: #D9D9D9;
    --616161: #616161;
    --F1F1F1: #F1F1F1;
    --E7E7E7: #E7E7E7;
    --757575: #757575;
    --E0E0E0: #E0E0E0;
    --6D6D6D: #6D6D6D;
    --FF8400: #FF8400;
    --637596: #637596;
    --C8D3E3: #C8D3E3;
    --000839: #000839;
    --C4D0E1: #C4D0E1;
    --262D33: #262D33;
    --ADA7A7: #ADA7A7;
    --F8F8F8: #F8F8F8;
    --EAEAEA: #EAEAEA;
    --B1B1B1: #B1B1B1;
    --808080: #808080;
    --A0A0A0: #A0A0A0;
    --737373: #737373;
    --0F172B: #0F172B;
}

* {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-family: "Magnify", sans-serif;
}

/* circle percentage */
.circlePercent {
    position: relative;
    width: 5.625rem;
    height: 5.625rem;
    margin-top: -5.625rem;
    margin-left: 142px;
}

.circlePercent svg {
    position: relative;
    width: 5.625rem;
    height: 5.625rem;
    transform: rotate(270deg);
}

.circlePercent svg circle {
    width: 100%;
    height: 100%;
    fill: transparent;
    stroke-width: 2;
    stroke: rgb(241, 241, 241, 0.4);
    transform: translate(5px, 5px);
}

.circlePercent svg circle:nth-child(2) {
    stroke: var(--clr);
    stroke-dasharray: 255;
    stroke-dashoffset: calc(255 - (255 * var(--num)) / 100);
}

.numberCirclePercent {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.numberCirclePercent h3 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.5rem;
    margin-top: 10px;
    margin-left: 5px;
}

.numberCirclePercentMobile{
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.numberCirclePercentMobile h3 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 10.39px;
    margin-top: 8px;
    margin-left: 5px;
}

/* btn */

.btnOrangeFFA206 {
    background: var(--FFA206);
    color: var(--FFFFFF);
}

.btnOrangeFF6700 {
    background: var(--FF6700);
    color: var(--FFFFFF);
}

/* text-color */

.textFFFFFF {
    color: var(--FFFFFF);
}

.text000000{
    color: var(--000000);
}

.text262626{
    color: var(--262626);
}

.text757575 {
    color: var(--757575);
}

.textF1F1F1{
    color: var(--F1F1F1);
}

.textFFA206{
    color: var(--FFA206);
}

.textFF6700{
    color: var(--FF6700);
}

.textBCBCBC{
    color: var(--BCBCBC);
}

/* background-color */

.bg000000{
    background-color: var(--000000);
}

.bgFF6700{
    background-color: var(--FF6700);
}

.bgFFA206{
    background-color: var(--FFA206);
}

.bg262626{
    background-color:var(--262626);
}

.bgDCDCDC{
    background-color: var(--DCDCDC);
}

.bgF1F1F1{
    background-color: var(--F1F1F1) !important;
}

.bg808080{
    background-color: var(--808080) !important;
}

/* border */

.borderNone{
    border: none !important;
}

.borderBottom{
    border-bottom: 1px solid var(--616161);
}

.m0 {
    margin: 0px !important;
}

.mt21 {
    margin-top: 21px !important;
}

.cNDrop {
    cursor:no-drop;
}

.mb22 {
    margin-bottom: 22px !important;
}