/**---------------------------------------- START: Circle CSS ----------------------------------------*/
:root {
    --tj-ff-body: 'Nunito Sans', sans-serif;
    --tj-ff-heading: 'Readex Pro', sans-serif;
    --tj-ff-fontawesome: "Font Awesome 6 Pro";
    --tj-fw-normal: normal;
    --tj-fw-thin: 100;
    --tj-fw-elight: 200;
    --tj-fw-light: 300;
    --tj-fw-regular: 400;
    --tj-fw-medium: 500;
    --tj-fw-sbold: 600;
    --tj-fw-bold: 700;
    --tj-fw-ebold: 800;
    --tj-fw-black: 900;
    --tj-fs-body: 16px;
    --tj-fs-h1: 70px;
    --tj-fs-h2: 50px;
    --tj-fs-h3: 40px;
    --tj-fs-h4: 30px;
    --tj-fs-h5: 22px;
    --tj-fs-h6: 18px;
    --tj-color-common-white: #ffffff;
    --tj-color-common-black: #000000;
    --tj-color-common-black-2: #030303;
    --tj-color-common-black-3: #333333;
    --tj-color-heading-primary: #4a326f;
    --tj-color-gradient-1: #926efb;
    --tj-color-gradient-2: #4a56ab;
    --tj-color-gradient-3: #465bd7;
    --tj-color-text-body: #6f7782;
    --tj-color-theme-primary: #754de9;
    --tj-color-theme-secondary: #4a326f;
    --tj-color-light-1: #9171ee;
    --tj-color-light-2: #bdaaf5;
    --tj-color-light-3: #c8b8f7;
    --tj-color-light-4: #d3c6f8;
    --tj-color-light-5: #ded4fa;
    --tj-color-light-6: #e9e3fc;
    --tj-color-light-7: #f4f1fd;
    --tj-color-grey-1: #6f7782;
    --tj-color-grey-2: #a1acb3;
    --tj-color-grey-3: #bdc5ca;
    --tj-color-grey-4: #dcdee7;
    --tj-color-grey-5: #f2f5f9;
    --tj-color-grey-6: #fafafc;
    --tj-color-extra-1: #ff647c;
    --tj-color-extra-2: #ffb800;
    --tj-color-extra-3: #5fcc8b;
    --tj-color-extra-4: #7b61ff;
    --tj-color-extra-5: #f1eeff;
    --tj-color-extra-6: #fff2f4;
    --tj-color-extra-7: #fffcf4;
    --tj-color-border-1: #ededed;
}

.tj-circle-box-one {
    position: absolute;
    width: max-content;
    min-width: 300px;
    top: 8rem;
    right: 0;
    z-index: -1;
    opacity: .25;
}
.tj-circle-box-one div {
    position: relative;
    width: 100%;
    height: 100%;
}

.tj-circle-box-one .circle_1 {
    position: absolute;
    top: 0;
    left: 80px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: inline-block;
    background: var(--tj-color-extra-3);
}
.tj-circle-box-one .circle_1::before {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    height: 1px;
    left: 15px;
    border: 1px dashed var(--tj-color-light-6);
}
.tj-circle-box-one .circle_2 {
    position: absolute;
    top: 25px;
    left: 40px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: inline-block;
    background: var(--tj-color-extra-2);
}
.tj-circle-box-one .circle_2::before {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    height: 1px;
    left: 15px;
    border: 1px dashed var(--tj-color-light-6);
}
.tj-circle-box-one .circle_3 {
    position: absolute;
    top: 50px;
    left: 80px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: inline-block;
    background: var(--tj-color-extra-4);
}
.tj-circle-box-one .circle_3::before {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    height: 1px;
    left: 15px;
    border: 1px dashed var(--tj-color-light-6);
}
.tj-circle-box-one .circle_4 {
    position: absolute;
    top: 75px;
    left: 120px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: inline-block;
    background: var(--tj-color-extra-3);
}
.tj-circle-box-one .circle_4::before {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    height: 1px;
    left: 15px;
    border: 1px dashed var(--tj-color-light-6);
}
.tj-circle-box-one .circle_5 {
    position: absolute;
    top: 100px;
    left: 25%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: inline-block;
    background: var(--tj-color-extra-2);
}
.tj-circle-box-one .circle_5::before {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    height: 1px;
    left: 15px;
    border: 1px dashed var(--tj-color-light-6);
}
.tj-circle-box-one .circle_6 {
    position: absolute;
    top: 125px;
    left: 120px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: inline-block;
    background: var(--tj-color-extra-4);
}
.tj-circle-box-one .circle_6::before {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    height: 1px;
    left: 15px;
    border: 1px dashed var(--tj-color-light-6);
}

.tj-circle-box-two {
    position: absolute;
    width: max-content;
    min-width: 300px;
    bottom: 2rem;
    left: 0;
    transform: rotate(180deg);
    z-index: -1;
    opacity: .25;
}
.tj-circle-box-two div {
    position: relative;
    width: 100%;
    height: 100%;
}

.tj-circle-box-two .circle_1 {
    position: absolute;
    top: 0;
    left: 80px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: inline-block;
    background: var(--tj-color-extra-3);
}
.tj-circle-box-two .circle_1::before {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    height: 1px;
    left: 15px;
    border: 1px dashed var(--tj-color-light-6);
}
.tj-circle-box-two .circle_2 {
    position: absolute;
    top: 25px;
    left: 40px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: inline-block;
    background: var(--tj-color-extra-2);
}
.tj-circle-box-two .circle_2::before {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    height: 1px;
    left: 15px;
    border: 1px dashed var(--tj-color-light-6);
}
.tj-circle-box-two .circle_3 {
    position: absolute;
    top: 50px;
    left: 80px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: inline-block;
    background: var(--tj-color-extra-4);
}
.tj-circle-box-two .circle_3::before {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    height: 1px;
    left: 15px;
    border: 1px dashed var(--tj-color-light-6);
}
.tj-circle-box-two .circle_4 {
    position: absolute;
    top: 75px;
    left: 120px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: inline-block;
    background: var(--tj-color-extra-3);
}
.tj-circle-box-two .circle_4::before {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    height: 1px;
    left: 15px;
    border: 1px dashed var(--tj-color-light-6);
}
.tj-circle-box-two .circle_5 {
    position: absolute;
    top: 100px;
    left: 25%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: inline-block;
    background: var(--tj-color-extra-2);
}
.tj-circle-box-two .circle_5::before {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    height: 1px;
    left: 15px;
    border: 1px dashed var(--tj-color-light-6);
}
.tj-circle-box-two .circle_6 {
    position: absolute;
    top: 125px;
    left: 120px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: inline-block;
    background: var(--tj-color-extra-4);
}
.tj-circle-box-two .circle_6::before {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    height: 1px;
    left: 15px;
    border: 1px dashed var(--tj-color-light-6);
}