svg[id^="service-icon"]{
	width: 6rem;
	overflow: visible;
}
.black {fill:var(--bs-body-color);}
.blue{fill:var(--bs-primary);}
.white{fill:var(--bs-white-color);}

svg#service-icon-website-design .ui{
	animation-name: ui-draw-pause;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	opacity: 1;
}
@keyframes ui-draw-pause{from{opacity: 1;} to{opacity: 1;}}
@keyframes ui-draw-play{from{opacity: 1;} to{opacity: 0;}}
.single-service-container:hover svg#service-icon-website-design .ui{
	animation-name: ui-draw-play;
}
svg#service-icon-website-design .brush{
	animation-name: brush-draw-pause;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}
.single-service-container:hover svg#service-icon-website-design .brush{
	animation-name: brush-draw-play;
}
@keyframes brush-draw-pause{
	from{transform: translate(0px, 0px);}
	to{transform: translate(0px, 0px);}
}
@keyframes brush-draw-play{
	from{transform: translate(0px, 0px);}
	to{transform: translate(-25px, -10px);}
}

svg#service-icon-website-developer .arrow{
	animation-name: arrow-blink-pause;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}
.single-service-container:hover svg#service-icon-website-developer .arrow{
	animation-name: arrow-blink-play;
}
@keyframes arrow-blink-pause{from{opacity: 1;} to{opacity: 1;}}
@keyframes arrow-blink-play{from{opacity: 1;} to{opacity: 0;}}
svg#service-icon-website-developer .gear{
	transform-origin: 49% 40%;
	animation-name: gear-round-pause;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}
.single-service-container:hover svg#service-icon-website-developer .gear{
	animation-name: gear-round-play;
}
@keyframes gear-round-pause{from {transform: rotate(0deg)} to{transform: rotate(0deg)}}
@keyframes gear-round-play{from {transform: rotate(0deg)} to{transform: rotate(360deg)}}

svg#service-icon-logo-designing .pen{
	animation-name: pen-move-pause;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}
.single-service-container:hover svg#service-icon-logo-designing .pen{
	animation-name: pen-move-play;
}
@keyframes pen-move-pause{
	0% {transform: translate(0px, 0px);}
	25% {transform: translate(0px, 0px);}
	50% {transform: translate(0px, 0px);}
	100% {transform: translate(0px, 0px);}
}
@keyframes pen-move-play{
	0% {transform: translate(0px, 0px);}
	25% {transform: translate(-7px, 22px);}
	50% {transform: translate(-7px, -7px);}
	100% {transform: translate(23px, -10px);}
}

svg#service-icon-html-mailer-designing .email-icon{
	transform-origin: 49% 40%;
	animation-name: email-icon-pause;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}
.single-service-container:hover svg#service-icon-html-mailer-designing .email-icon{
	animation-name: email-icon-play;
}
@keyframes email-icon-pause{from {transform: scale(1); opacity: 1;} to{transform: scale(1); opacity: 1}}
@keyframes email-icon-play{from {transform: scale(1); opacity: 1;} to{transform: scale(.5); opacity: 0}}

svg#service-icon-digital-marketing .mic{
	transform-origin: 49% 40%;
	animation-name: mic-movement-pause;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}
.single-service-container:hover svg#service-icon-digital-marketing .mic{
	animation-name: mic-movement-play;
}
@keyframes mic-movement-pause{
	0% {transform: translate(0px, 0px) rotate(0deg); opacity: 1;}
	50% {transform: translate(0px, 0px) rotate(0deg); opacity: 1;}
	100% {transform: translate(0px, 0px) rotate(0deg); opacity: 1;}
}
@keyframes mic-movement-play{
	0% {transform: translate(0px, 0px) rotate(0deg); opacity: 1;}
	50% {transform: translate(0px, 0px) rotate(0deg); opacity: 1;}
	100% {transform: translate(-5px, 3px) rotate(45deg); opacity: 0;} 
}
svg#service-icon-digital-marketing .talk-lines{
	animation-name: talk-lines-blink-pause;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}
.single-service-container:hover svg#service-icon-digital-marketing .talk-lines{
	animation-name: talk-lines-blink-play;
}
@keyframes talk-lines-blink-pause{0% {opacity: 1;} 50% {opacity: 1;} 100% {opacity: 1;}}
@keyframes talk-lines-blink-play{0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;}}

svg#service-icon-text-to-speech .talk-box{
		transform-origin: 49% 40%;
	animation-name: talk-box-pause;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}
.single-service-container:hover svg#service-icon-text-to-speech .talk-box{
	animation-name: talk-box-play;
}
@keyframes talk-box-pause{
	0% {opacity: 1; transform: scale(1);} 
	50% {opacity: 1; transform: scale(1);} 
	00% {opacity: 1; transform: scale(1);}
}
@keyframes talk-box-play{
	0% {opacity: 1; transform: scale(1);} 
	50% {opacity: 1; transform: scale(1);} 
	100% {opacity: 0; transform: scale(.5);}
}

svg#service-icon-text-to-speech .talk-dots{
	animation-name: talk-dots-pause;
	animation-duration: .5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}
.single-service-container:hover svg#service-icon-text-to-speech .talk-dots{
	animation-name: talk-dots-play;
}
@keyframes talk-dots-pause{
	0% {opacity: 1;} 
	50% {opacity: 1;} 
	100% {opacity: 1;}
}
@keyframes talk-dots-play{
	0% {opacity: 0;} 
	50% {opacity: 1;} 
	100% {opacity: 0;}
}

svg#service-icon-graphic-designing .pen-rotate{
		transform-origin: 49% 40%;
	animation-name: pen-rotate-pause;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}
.single-service-container:hover svg#service-icon-graphic-designing .pen-rotate{
	animation-name: pen-rotate-play;
}
@keyframes pen-rotate-pause{
	0% {transform: rotate(0deg);} 
	100% {transform: rotate(0deg)}
}
@keyframes pen-rotate-play{
	0% {transform: rotate(0deg);} 
	100% {transform: rotate(360deg);}
}
svg#service-icon-graphic-designing .ring-blink, svg#service-icon-graphic-designing .ring-dot-blink{
		transform-origin: 49% 40%;
	animation-name: ring-and-dot-blink-pause;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}
.single-service-container:hover svg#service-icon-graphic-designing .ring-blink, .single-service-container:hover svg#service-icon-graphic-designing .ring-dot-blink{
	animation-name: ring-and-dot-blink-play;
}
@keyframes ring-and-dot-blink-pause{0% {opacity: 1;} 50% {opacity: 1;} 100% {opacity: 1;}}
@keyframes ring-and-dot-blink-play{0% {opacity: 1;} 50% {opacity: 0;} 100% {opacity: 1;}}

svg#service-icon-ui-ux-designing .desktop{
		transform-origin: 49% 40%;
	animation-name: desktop-movement-pause;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}
.single-service-container:hover svg#service-icon-ui-ux-designing .desktop{
	animation-name: desktop-movement-play;
}
@keyframes desktop-movement-pause{
	0% {transform: translateX(0px);} 
	100% {transform: translateX(0px);}
}
@keyframes desktop-movement-play{
	0% {transform: translateX(0px);} 
	100% {transform: translateX(-10px);}
}

svg#service-icon-ui-ux-designing .mobile{
		transform-origin: 49% 40%;
	animation-name: mobile-movement-pause;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}
.single-service-container:hover svg#service-icon-ui-ux-designing .mobile{
	animation-name: mobile-movement-play;
}
@keyframes mobile-movement-pause{
	0% {transform: translateX(0px);} 
	100% {transform: translateX(0px);}
}
@keyframes mobile-movement-play{
	0% {transform: translateX(0px);} 
	100% {transform: translateX(10px);}
}
svg#service-icon-ui-ux-designing .blue-blink{
		transform-origin: 49% 40%;
	animation-name: blue-blink-pause;
	animation-duration: .5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}
.single-service-container:hover svg#service-icon-ui-ux-designing .blue-blink{
	animation-name: blue-blink-play;
}
@keyframes blue-blink-pause{
	0% {opacity: 1;} 
	100% {opacity: 1;}
}
@keyframes blue-blink-play{
	0% {opacity: 1;} 
	100% {opacity: .5;}
}

svg#service-icon-logo-intro-animation .logo-icon{
		transform-origin: 49% 40%;
	animation-name: logo-icon-movement-pause;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}
.single-service-container:hover svg#service-icon-logo-intro-animation .logo-icon{
	animation-name: logo-icon-movement-play;
}
@keyframes logo-icon-movement-pause{
	0% {transform: translateY(0px); opacity: 1;} 
	100% {transform: translateY(0px); opacity: 1;} 
}
@keyframes logo-icon-movement-play{
	0% {transform: translateY(0px); opacity: 1;} 
	100% {transform: translateY(-5px); opacity: 0;}
}
svg#service-icon-logo-intro-animation .logo-text{
		transform-origin: 49% 40%;
	animation-name: logo-text-movement-pause;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}
.single-service-container:hover svg#service-icon-logo-intro-animation .logo-text{
	animation-name: logo-text-movement-play;
}
@keyframes logo-text-movement-pause{
	0% {transform: translateY(0px); opacity: 1;} 
	100% {transform: translateY(0px); opacity: 1;} 
}
@keyframes logo-text-movement-play{
	0% {transform: translateY(0px); opacity: 1;} 
	100% {transform: translateY(5px); opacity: 0;}
}