

.stats{

    display:flex;
    justify-content:center;
    gap:10px;
    
   width: 100%;
}

.stat{

    position:relative;
     transition: all ease 111ms
}

.circle{

    width:100%;
    height:100%;
}

/* Main Purple Ring */

.outer{

    fill:#30286f;
    stroke:#3f3497;
    stroke-width:5;
}

/* Inner Light Blue Ring */

.inner{

    fill:none;
    stroke:#ff6500;
    stroke-width:5;

    animation:dashMove 4s ease-in-out infinite;
	transform-origin: center center
}

/* Orange Arc */

.orange{

    fill:none;
    stroke:#ff6500;
    stroke-width:5;
    stroke-linecap:round;

    stroke-dasharray:70 546;

     display: none;
}

@keyframes dashMove{

    0%{

        opacity:.35;
        stroke-width:1; transform: scale(1);
		
    }

    50%{

        opacity:.9;
        stroke-width:5;
		transform: scale(0.9);
		
    }

    100%{

        opacity:.35;
       stroke-width:1;
		transform: scale(1)
    }
}

/*.orange{

    fill:none;
    stroke:#ff6500;
    stroke-width:8;
    stroke-linecap:round;

   

    stroke-dasharray:70 546;

    transform-origin:center;
    transform-box:fill-box;

    animation:rotateArc 6s linear infinite;
}*/

/* Center Content */

.content{

    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    text-align:center;

    color:#fff;
}


.stat:hover{transform: translateY(-5px)}

.content h2{
    font-size: 42px;
    line-height: 1;
    font-weight: 700;
    color: #FFFFFF; 
}

.content h2.small{

    font-size:42px;
}

.content span{

    color:#ff6500; display:inline-block; font-size:40px; font-weight: 600
}

.content p{

    margin-top:10px;
    font-size:17px;
    line-height:1.25;
    font-weight:600;
}

/* Orange Ring Animation */





@media(max-width:768px){

    .stats{

        flex-wrap: wrap
    }
	
	.content{margin-top: 1.5em}

    .stat{

        width:250px;
        height:250px;
    }

    .content h2{
    font-size: 40px;
    color: #FFFFFF;
    }

    .content h2.small{

        font-size:42px;
    }

    .content p{

        font-size:15px;
    }
}