.milestone-one{
	&__single{
		position: relative;
	}
	&__content{
		display: flex;
		align-items: center;
	}
	&__number{
		font-size: 40px;
		font-weight: 600;
		color: $headings-color;
		display: inline-flex;
		align-items: center;
		flex: 0 0 40px; 
		margin-right: 10px;
	}
	&__title{
		font-size: 16px;
		line-height: 20px;
		font-weight: 500;
	}
	&__link{
		position: absolute;
		@include size(100%, 100%);
		top: 0;
		left: 0;
		z-index: 11;
	}
	&__single{
		&:hover{
			.milestone-one__icon{
				.icon{
					svg, i{
						animation: beat 1.5s ease 0s infinite;
					}
				}
			}
		}
	}
}

// Style 02
.milestone-two{
	&__single{
		position: relative;
	}
	&__content{
		position: relative;
		text-align: center;
	}
	&__icon{
		width: 100px;
		height: 100px;
		border: 1px solid $border-color;
		border-radius: 100%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: $white;
		color: $theme-color;
		font-size: 44px;
		transition: all 0.5s;
		svg{
			fill: $theme-color;
			width: 44px;
		}
	}
	&__number{
		font-size: 40px;
		font-weight: 700;
		color: $link-color;
		margin-top: 20px;
      @media(max-width: 1200px){
         font-size: 36px;
      }
      @media(max-width: 1024px){
         font-size: 30px;
      }
		.symbol{
			&.after{
				
			}
			&.before{
				
			}
		}
	}
	&__title{
		position: relative;
		font-size: 16px;
		font-weight: 500;
		color: $body-color;
		transition: all 0.5s;
		margin: 10px 0 0;
	}
	&__desc{
		margin-top: 10px;
	}
	&__link{
		position: absolute;
		@include size(100%, 100%);
		top: 0;
		left: 0;
		z-index: 11;
	}
	&__single{
		&:hover{
			.milestone-two__icon{
				background: $theme-color-2;
				color: $white;
				border-color: $theme-color-2;
				svg{
					fill: $white;
				}
			}
		}
	}
}

// Style 03
.milestone-three{
	&__single{
		position: relative;
		width: 192px;
		height: 192px;
		background: $theme-color;
		padding: 20px;
		border-radius: 50%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		@media(max-width: 1024px){
			width: 160px;
			height: 160px;
			padding: 15px;
		}
	}
	&__wrap{ 
		text-align: center;
	}
	&__icon{
		width: 62px;
		height: 62px;
		border-radius: 50%;
		background: $white;
		color: $headings-color;
		font-size: 28px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: -30px;
		left: 50%;
		margin-left: -31px;
		@media(max-width: 1024px){
			width: 50px;
			height: 50px;
			margin-left: -25px;
			bottom: -25px;
			font-size: 24px;
		}
	}
	&__number{
		font-size: 40px;
		font-weight: 800;
		color: $white;
		margin: 10px 0 5px;
		@media(max-width: 1200px){
			font-size: 36px;
		}
		.symbol{
			
		}
	}
	&__title{
		position: relative;
		display: inline-block;
		font-size: 14px;
		font-weight: 500;
		margin-top: 10px;
		transition: all 0.5s;
		line-height: 20px;
		color: $white;
		opacity: 0.6;
		text-transform: uppercase;
	}
	&__link{
		position: absolute;
		@include size(100%, 100%);
		top: 0;
		left: 0;
		z-index: 11;
	}
	&__single{
		&:hover{
			.milestone-three__icon{
				svg, i{
					animation: beat 1.5s ease 0s infinite;
				}
			}
		}
	}
}

.icon-top{
	.milestone-three__icon{
		top: -30px;
	}
}