.milestone-block {
	position: relative;
	.milestone-content{
		.milestone-number-inner{
			.symbol{
				&.after{
					margin-left: -5px;
				}
				&.before{
					margin-right: -5px;
				}
			}
		}
	}
	.link-overlay{
		position: absolute;
		@include size(100%, 100%);
		top: 0;
		left: 0;
		z-index: 11;
	}
	&.style-1{
		text-align: center;
		padding-top: 5px;
		.milestone-icon{
			margin-bottom: 10px;
			.icon{
				font-size: 60px;
				color: $theme-color;
				@include media-breakpoint-down(lg){
					font-size: 50px;
				}
			}
		}
		.milestone-content{
			.milestone-number-inner{
				font-size: 42px;
				color: $headings-color;
				@include media-breakpoint-down(lg){
					font-size: 38px;
				}
			}
			.milestone-text{
				font-size: 16px;
				margin-top: 15px;
				line-height: 24px;
				color: $headings-color;
			}
		}
	}
	&.style-2{
		padding: 20px;
		.box-content{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: start;
			.milestone-icon{
				display: block;
				line-height: 1; 
				.icon{
					@include size(135px,100px);
					display: flex;
					align-items: center;
					justify-content: center;
					background: $bg-gray;
					color: $theme-color;
					@include transition(all 0.35s);
					svg{
						fill: $theme-color;
					}
					@include media-breakpoint-down(xl){
						@include size(110px,90px);
					}
				}
			}
			.milestone-content{
				text-align: left;
				.milestone-number-inner{
					font-size: 36px;
					line-height: 1;
					color: $theme-color-2;
					margin-bottom: 10px;
					font-weight: 400;
					@include media-breakpoint-down(xl){
						font-size: 30px;
					}
				}
				.milestone-text{
					font-weight: 400;
					font-size: 16px;
					line-height: 26px;
					margin: 0;
				}
			}
		}
	} 
	&.style-3{
		float: right;
		.box-content{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: end;
			.milestone-icon{
				line-height: 1; 
				order: 2;
				.icon{
					width: 120px;
					height: 120px;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #f5eceb;
					color: $theme-color;
					transition: all 0.35s;
					svg{
						fill: $theme-color;
					}
				}
			}
			.milestone-content{
				text-align: right;
				order: 1;
				.milestone-number-inner{
					font-size: 40px;
					line-height: 1;
					color: $theme-color-2;
					margin-bottom: 10px;
					font-weight: 400;
					@include media-breakpoint-down(xl){
						font-size: 36px;
					}
					@include media-breakpoint-down(lg){
						font-size: 32px;
					}
				}
				.milestone-text{
					font-weight: 400;
				}
			}
		}
	}
	&:hover{
		.milestone-icon{
			.icon{
				svg, i{
					animation: beat 1.5s ease 0s infinite;
				}
			}
		}
	}
}
