/home/blackyak/www/wordpress/wp-content/themes/travivu/assets/sass/template/elements/_counter.scss
.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;
}
}