.ring {
    transition: 0.6s ease-in-out;
    animation: ring 10s linear infinite;
    transform-origin: center; /* Ensures the rotation occurs around the center */
}

@keyframes ring {
    0% {
        transform: rotate(0deg) translateY(10px); /* Start position */
    }
    50% {
        transform: rotate(180deg) translateY(5px); /* Mid-point of the rotation */
    }
    100% {
        transform: rotate(360deg) translateY(10px); /* End position matches the start for smooth looping */
    }
}


.service-flex .box .heading_line .circle::before {
   animation: circle 5s linear 0s infinite normal;
}

@keyframes circle {

	0%{
		 right: -28%;
	}
	50% {
		 right: 0%;
	}
   100% {
		 right: -28%;
	}
}

.service-flex .box .heading_line .circle::after {
     animation: circle2 5s linear 0s infinite normal;
}

@keyframes circle2 {

	0%{
		 left: -35%;
	}
	50% {
		 left: 0%;
	}
   100% {
		 left: -35%;
	}
}

.service-flex .box .image_circle .icon-image img {
	 animation: icon_img 5s linear 0s infinite normal;
}

.image_circle .icon-image {
	animation: icon_img 5s linear 0s infinite normal;
}

@keyframes icon_img {

	0%{
		 transform: scale(0.8);
	}
	50% {
		 transform: scale(1);
	}
   100% {
		 transform: scale(0.8);
	}
}

.recruiter_section .box .heading_line::after{
  animation: cicle_move_right 3s linear infinite;
}

@keyframes cicle_move_right {
    0% {
       right: -31%;
    }
    25% {
       right: -15%;
    }
    50% {
        right: 0%;
    }
    75% {
        right: -15%;
    }
    100% {
       right: -31%;
    }
}

.performance_section .box .heading_line::after {
	 animation: cicle_move_left 3s linear infinite;
}

@keyframes cicle_move_left {
    0% {
       left: -25%%;
    }
    25% {
       left: -15%;
    }
    50% {
        left: 0%;
    }
    75% {
        left: -15%;
    }
    100% {
       left: -25%%;
    }
}

/*hover*/

.sevice_section .box{
	 transition: 0.6s;
}

.sevice_section .box::hover{
  transform: scale(1.2);
}


@media only screen and (max-width: 499px){ 

.service-flex .box .heading_line .circle::before {
   animation: circle 5s linear 0s infinite normal;
}


@keyframes circle {

	0%{
		 right: 50px;
	}
	50% {
		 right: 0%;
	}
   100% {
		 right: 50px;
	}
}


}