@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
body {margin:font-family: 'Lato', sans-serif; margin:0; overflow:hidden; }
.holderCircle { width:580px; height:560px; border-radius: 100%; margin:30px auto; position: relative; }
.dotCircle { width: 100%; height: 100%; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; border-radius: 100%; z-index: 20; }
.dotCircle .itemDot {display:block; width:80px; height:80px; border-radius:80px; position: absolute; text-align:center; z-index:1; cursor: pointer; border:2px solid transparent; background:transparent;}
.div_icon {border:4px solid #fff; border-radius:50%; height:100%;z-index: -2;position: relative; width:100%; display:flex; align-items:center; justify-content:center; -moz-box-shadow:0 0 20px rgba(0, 0, 0, .13); box-shadow:0 0 20px rgba(0, 0, 0, .13);}
.div_icon i {display: inherit;}
.div_icon i img { max-height:36px;
	-webkit-filter: invert(1) sepia(18) saturate(20) hue-rotate(5deg);
    filter: invert(1) sepia(18) saturate(20) hue-rotate(5deg);
}
.dotCircle .itemDot{ background: #fff;color: #000; }
.dotCircle .itemDot.active:hover, .dotCircle .itemDot.active, .dotCircle .itemDot:hover  {
    background: #f36d28;
border-color:#f26629; color: #ffffff; transition: 0.5s; -webkit-transition: 0.5s; transform: scale(1.1); 
background-image: -moz-linear-gradient( 0deg, rgb(247,139,34) 0%, rgb(242,98,42) 100%);
background-image: -webkit-linear-gradient( 0deg, rgb(247,139,34) 0%, rgb(242,98,42) 100%);
background-image: -ms-linear-gradient( 0deg, rgb(247,139,34) 0%, rgb(242,98,42) 100%);
}
/* .dotCircle .itemDot.active .div_icon i img, .dotCircle .itemDot:hover .div_icon i img   {
	-webkit-filter: none;
	filter: none;
} */
.dotCircle .itemDot.active:hover .div_icon i img, .dotCircle .itemDot.active .div_icon i img, .dotCircle .itemDot:hover .div_icon i img  {
	-webkit-filter: none;
	filter: none;
} 
.dotCircle .itemDot .forActive { width:100%; height:100%; position: absolute; top:0; left: 0; right: 0; bottom: 0; display: none;}
.dotCircle .itemDot.active .forActive {display: block;}

.round { position: absolute; left: 60px; top:60px; width:460px; height:460px; border:6px solid #f5f5f5; border-radius: 100%; -webkit-animation: rotation 100s infinite linear; }
.cicle_inside {position:absolute; left:15%; top:15%; width:70%; height:70%; background:#000; border-radius:50%; background-color: rgb(255, 255, 255); box-shadow: 0px 0px 46px 0px rgba(137, 136, 136, 0.22); border: 4px solid #F26628;}
.cicle_inside:before {
	content:'';
	position:absolute;
	top:2%;
	left:2%;
	width:96%;
	height:96%;
	border-radius:50%;
	border:2px solid #f5f5f5;
	z-index:0;
	background: #f36d28;
	background-image: -moz-linear-gradient( 0deg, rgb(247,139,34) 0%, rgb(242,98,42) 100%);
	background-image: -webkit-linear-gradient( 0deg, rgb(247,139,34) 0%, rgb(242,98,42) 100%);
	background-image: -ms-linear-gradient( 0deg, rgb(247,139,34) 0%, rgb(242,98,42) 100%);
}

.contentCircle {width:250px; border-radius:100%; color: #222222; position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);}
.contentCircle .CirItem { border-radius: 100%; color: #222222; position: absolute; text-align: center; bottom: 0; left:5px; opacity: 0; transform: scale(0); transition: 0.5s; font-size: 15px; width: 100%; height: 100%; top: 0; right: 0; margin: auto; display:flex; align-items:center; justify-content:center; flex-direction:column;}
.CirItem.active { z-index: 1; opacity: 1; transform: scale(1); transition: 0.5s; }
.contentCircle .CirItem i img{ max-height:80px; }
.title-box .title {position: relative; z-index: -1; }
.title-box span { font-weight: 600; font-size:2rem; color:#fff; margin:6px 0 0;}
.title-box h2 {font-size:1.1rem; color:#fff; font-weight:400; margin:0;}

/**Media **/
@media(max-width: 991px){
	.achiev_area{flex-direction: column-reverse;}
}

@media only screen and (min-width:300px) and (max-width:599px) {
.holderCircle {width:280px; height:270px;    left: -20px;}
.holderCircle::after { width: 100%; height: 100%; }
.round {left:20px; top:22px; width:230px; height:230px; border:3px solid #f5f5f5; }
.cicle_inside {width:80%; height:80%; left:10%; top:10%;}
.div_icon i img {max-height:30px;}
.dotCircle .itemDot {width:50px; height:50px}
.contentCircle .CirItem {left:0;}
.contentCircle .CirItem i img {max-height: 40px;}
.title-box span {margin:0; font-size:1.6rem;}
.title-box h2 {font-size:1rem;}
.contentCircle {width:50%;}
}