/* TRACK */

.circle-track{
    width:max-content;
    gap:50px;
    animation:scrollSlider 25s linear infinite;
}

/* PAUSE ON HOVER */

.medical-category-section:hover .circle-track{
    animation-play-state:paused;
}

/* WRAPPER */

.circle-box-wrapper{
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* MAIN CIRCLE */

.circle-box{
    position:relative;
    width:250px;
    height:250px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

/* ROTATING BORDER */

.circle-box::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    border:3px dashed #ff7a00;

    animation:borderRotate 6s linear infinite;

    will-change:transform;
}



/* IMAGE */

.circle-image{
    width:210px;
    height:210px;
    border-radius:50%;
    overflow:hidden;
    background:#fff;
    border:3px solid #ff7a00;
    box-shadow:0 8px 25px rgba(0,0,0,0.15);
    transition:0.5s;
}

.circle-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* HOVER */

.circle-box:hover .circle-image{

    transform:scale(1.08);

    box-shadow:
        0 0 20px rgba(255,255,255,0.6),
        0 0 40px rgba(255,122,0,0.45),
        0 0 60px rgba(255,122,0,0.30);

}

.circle-box:hover::before{
    border-color:#000;
}

/* TEXT */

.category-name{
    margin-top:20px;
    font-size:22px;
    font-weight:700;
    color:#222;
    transition:0.4s;
}

.circle-box-wrapper:hover .category-name{
    color:#ff7a00;
    transform:translateY(-4px);
}

/* ANIMATION */

@keyframes borderRotate{
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}

@keyframes scrollSlider{
    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-50%);
    }
}

/* MOBILE */

@media(max-width:768px){

    .circle-box{
        width:180px;
        height:180px;
    }

    .circle-image{
        width:145px;
        height:145px;
    }

    .circle-track{
        gap:25px;
    }

    .category-name{
        font-size:16px;
    }

}