/* -------- font family -------- */
@font-face {
    font-family: "JumboMindset-Regular";
    src: url("/assets/fonts/JumboMindset-Regular.otf") format("opentype");
    font-display: auto;
    font-style: normal;
    font-stretch: normal;
}
.JumboMindset-Regular {
    font-family: "JumboMindset-Regular";
}
@font-face {
    font-family: "JumboMindset-Slim";
    src: url("/assets/fonts/JumboMindset-Slim.otf") format("opentype");
    font-display: auto;
    font-style: normal;
    font-stretch: normal;
}
.JumboMindset-Slim {
    font-family: "JumboMindset-Slim";
}

@font-face {
    font-family: "JumboIntroHead-Regular";
    src: url("/assets/fonts/JumboIntroHead-Regular.otf") format("opentype");
    font-display: auto;
    font-style: normal;
    font-stretch: normal;
}
.JumboIntroHead-Regular {
    font-family: "JumboIntroHead-Regular";
}



.spinner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 420px;
    width: 370px;
    margin: auto;
    position: relative;
    font-family: "JumboMindset-Regular";
}

.spinner {
    width: 370px;
    height: 370px;
    border-radius: 50%;
    position: relative;
    overflow: hidden; /* Hide overflow for segments */
    transition: transform var(--spin-duration) ease-out; /* Smooth transition for variable duration */
    border: solid 7px #000;
    box-shadow: 0px 0px 150px #fbd803;
}

.segment {
    position: absolute;
    width: 50%; /* Half width of the spinner */
    height: 50%; /* Half height of the spinner */
    transform-origin: 100% 100%; /* Rotate around the outer edge */
}

.arrow-center {
    position: absolute;
    width: 40px;
    top: 4%;
    left: 44.6%;
}

.segment-label {
    position: absolute;
    left: 34%;
    top: 43%;
    width: 100%;
    white-space: nowrap;
    font-weight: 400;
    transform: rotate(250deg);
    color: var(--black-color);
    font-family: "JumboMindset-Regular";
    font-weight: normal;
    font-size: 15px;
}

.segment.segment-label.active  {
    left: 22%;
    transform: rotate(60deg);
}
.segment.segment-label.inactive {
    left: 28%;
    transform: rotate(70deg);
}

.segment:nth-child(even) .segment-label {
    color: var(--primary-color);
}
.spin_btn_top_margin{
    position: relative;
    top: 50px;
}
.white_doct{
    width: 10px;
    height: 10px;
    /* background-color: var(--white-color); */    
    border-radius: 50%;
    position: relative;
    left: 65%;
    bottom: -10%;
    box-shadow: 0 0 20px 10px #FFE500;
    background: radial-gradient(50% 50% at 50% 50%, #FFFFFF 25%, #FFFE73 50%);
    /* box-shadow: 0px 0px 30px 12px #FFE900; */
}

.white_doct::after{
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    z-index: 1;
    box-shadow: 2px -2px 3px 0px #2b2b2b;
    border-radius: 50%;
    left: 10%;
    
}
/* .white_doct:nth-child(odd){
    box-shadow: 0 0 25px 10px 12px #CB5322;
} */
.circle_middle {
    width: 74px;
    height: 65px;
    position: absolute;
    top: 42%;
    display: flex;
    cursor: pointer;
}

.circle_middle::after {
    content: "";
    position: absolute;
    width: 59px;
    height: 60px;
    z-index: 9;
    box-shadow: 0px 8px 20px 6px rgb(0 0 0);
    border-radius: 50%;
    left: 7px;
}

@media only screen and (max-width:767px) {
    .spinner-container {
        height: 370px;
        width: 320px;
    }
    .spinner {
        width: 320px;
        height: 320px;
    }
    .spinline{
        width: 320px;
    }
    .spinline::before{
        width: 18%;
        height: 33%;
        transform: rotate(-8deg);
        z-index: 1;
        top: 19%;
        left: -11%;  
    }
    .spinline::after {
        width: 18%;
        height: 33%;
        transform: rotate(11deg);
        z-index: 1;
        top: 19%;
        right: -10%;
    }

    .arrow-center {
        left: 44%;
    }
}

.rad-loader {
    position: absolute;
    top: 16px;
    left: 12px;
}

@media(max-width:325px){
    .spinline {
        width: 100%;
    }

    .spinner {
        width: 100%;
        height: 100%;
    }

    .spinner-container {
        height: 256px;
        width: 100%;
    }
    .segment-label {
        font-size: 11px;
    }
    .circle_middle::after {
        width: 45px;
        height: 48px;
    }
    .circle_middle {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-55%, -50%);
}
    .arrow-center {
        left: 43%;
        top: -10px;
    }
    .rad-loader {
    position: absolute;
    top: 9px;
    left: 4px;
}
}