.counter-item {
position: relative;
margin-bottom: 50px;
transition: all 300ms ease;
}
@media (prefers-reduced-motion: reduce) {
.counter-item {
transition: none;
}
}
.counter-item:hover .counter-icon {
background-color: #ffffff;
color: var(--theme-color1);
border-radius: 50%;
}
.counter-item .text {
padding-left: 100px;
position: relative;
}
.counter-item .counter-icon {
position: absolute;
left: 0;
top: 0;
top: 5px;
display: flex;
align-items: center;
justify-content: center;
height: 80px;
width: 80px;
background-color: var(--theme-color1);
color: #ffffff;
font-size: 48px;
border-radius: 5px;
transition: all 300ms ease;
}
@media (prefers-reduced-motion: reduce) {
.counter-item .counter-icon {
transition: none;
}
}
.counter-item .counter {
font-size: 48px;
margin-top: 0;
line-height: 1;
margin-bottom: 10px;
}
.counter-item .title {
font-weight: 400;
color: var(--headings-color);
}
.counter-block-two {
position: relative;
margin-bottom: 50px;
transition: all 300ms ease;
}
@media (prefers-reduced-motion: reduce) {
.counter-block-two {
transition: none;
}
}
.counter-block-two .text {
padding-left: 75px;
position: relative;
}
.counter-block-two .counter-icon {
position: absolute;
color: var(--theme-color1);
font-size: 48px;
line-height: 1em;
border-radius: 5px;
transition: all 300ms ease;
}
@media (prefers-reduced-motion: reduce) {
.counter-block-two .counter-icon {
transition: none;
}
}
.counter-block-two .counter {
font-size: 48px;
margin-top: 0;
line-height: 1;
margin-bottom: 10px;
}
.counter-block-two .title-wrapper {
position: relative;
}
.counter-block-two .title-wrapper .title {
padding-top: 10px;
}
@media (max-width: 767.98px) {
.counter-block-two .title-wrapper .title {
padding-top: 0px;
}
}
.counter-block-two .title-wrapper:before {
position: absolute;
left: 0;
top: 0;
width: 150px;
border-top: 1px solid #e3e3e3;
content: "";
}
@media (max-width: 767.98px) {
.counter-block-two .title-wrapper:before {
display: none;
}
}
.counter-block-three {
padding: 50px 30px 40px;
border-radius: 7px;
background-color: #fff;
border: 1px solid #333f4d;
transition: all 300ms ease;
z-index: 1;
position: relative;
text-align: center;
}
@media (prefers-reduced-motion: reduce) {
.counter-block-three {
transition: none;
}
}
.counter-block-three:hover {
border-color: var(--theme-color1);
}
.counter-block-three .counter-icon {
font-size: 60px;
margin-bottom: 15px;
line-height: 1;
color: var(--headings-color);
}
.counter-block-three .text .counter {
margin-top: 0;
color: var(--theme-color1);
margin-bottom: 10px;
font-size: 48px;
line-height: 60px;
}
.counter-block-four {
position: relative;
margin-bottom: 50px;
}
.counter-block-four:nth-child(even) .counter-icon {
color: var(--theme-color2);
}
.counter-block-four .inner:hover .counter-icon {
-webkit-transform: scale(-1) rotate(180deg);
-moz-transform: scale(-1) rotate(180deg);
-ms-transform: scale(-1) rotate(180deg);
transform: scale(-1) rotate(180deg);
}
.counter-block-four .count-box {
position: relative;
padding: 60px 30px 30px;
text-align: center;
background-color: #ffffff;
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.07);
margin: 0 auto;
border-radius: 10px;
}
.counter-block-four .counter-icon {
position: absolute;
left: 0px;
right: 0;
margin: 0 auto;
top: -40px;
height: 80px;
width: 80px;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
line-height: 1em;
color: var(--theme-color1);
background-color: #ffffff;
border-radius: 50%;
border: 2px solid var(--theme-color1);
transition: all 300ms ease;
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.counter-block-four .counter-icon {
transition: none;
}
}
.counter-block-four .counter {
font-size: 48px;
line-height: 1;
color: var(--theme-color2);
margin-bottom: 0px;
}
.counter-block-five {
position: relative;
margin-bottom: 50px;
z-index: 3;
}
.counter-block-five:nth-child(even) .inner .count-box .counter-icon {
background-color: var(--theme-color2);
}
.counter-block-five .inner {
position: relative;
padding-left: 32px;
transition: all 300ms ease;
}
@media (max-width: 575.98px) {
.counter-block-five .inner {
padding-left: 0;
}
}
.counter-block-five .inner:hover .counter-icon {
background-color: #ffffff;
color: var(--theme-color1);
box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.07);
}
.counter-block-five .count-box {
position: relative;
padding: 20px 30px;
padding-left: 65px;
background-color: #ffffff;
box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.07);
border-radius: 10px;
}
@media (max-width: 575.98px) {
.counter-block-five .count-box {
padding-left: 30px;
padding-top: 50px;
margin-top: 32px;
text-align: center;
}
}
.counter-block-five .counter-icon {
position: absolute;
z-index: 1;
left: 0;
top: 30px;
height: 70px;
width: 70px;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
line-height: 1em;
border-radius: 50px;
color: #ffffff;
background-color: var(--theme-color1);
transition: all 300ms ease;
}
@media (prefers-reduced-motion: reduce) {
.counter-block-five .counter-icon {
transition: none;
}
}
@media (max-width: 575.98px) {
.counter-block-five .counter-icon {
left: 0;
right: 0;
margin: 0 auto;
top: -32px;
}
}
.counter-block-five .count-box .counter {
font-size: 48px;
line-height: 1em;
color: var(--theme-color2);
margin-bottom: 7px;
}
.counter-block-six {
position: relative;
margin-bottom: 30px;
}
.counter-block-six .inner {
position: relative;
border-radius: 10px;
text-align: center;
padding: 30px 30px;
height: 100%;
transition: all 300ms ease;
}
@media (prefers-reduced-motion: reduce) {
.counter-block-six .inner {
transition: none;
}
}
.counter-block-six .inner::before {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: var(--theme-color2);
opacity: 0.05;
border-radius: 10px;
content: "";
transition: all 300ms ease;
z-index: -1;
}
@media (prefers-reduced-motion: reduce) {
.counter-block-six .inner::before {
transition: none;
}
}
.counter-block-six .inner:hover::before {
opacity: 1;
}
.counter-block-six .inner:hover .counter-icon {
-webkit-transform: scale(-1) rotate(180deg);
-moz-transform: scale(-1) rotate(180deg);
-ms-transform: scale(-1) rotate(180deg);
transform: scale(-1) rotate(180deg);
}
.counter-block-six .inner:hover .counter,
.counter-block-six .inner:hover .counter-icon,
.counter-block-six .inner:hover .title {
color: #ffffff;
}
.counter-block-six .counter-icon {
display: inline-block;
font-size: 60px;
line-height: 1em;
transition: all 300ms ease;
margin-bottom: 18px;
color: var(--headings-color);
}
@media (prefers-reduced-motion: reduce) {
.counter-block-six .counter-icon {
transition: none;
}
}
.counter-block-six .count-box .counter {
font-size: 48px;
margin-top: 0;
}
.counter-block-saven {
position: relative;
margin-bottom: 50px;
}
.counter-block-saven .inner {
position: relative;
transition: all 300ms ease;
}
@media (prefers-reduced-motion: reduce) {
.counter-block-saven .inner {
transition: none;
}
}
@media (max-width: 1199.98px) {
.counter-block-saven .inner {
text-align: center;
}
}
.counter-block-saven .inner:hover .counter-icon {
-webkit-transform: scale(-1) rotate(180deg);
-moz-transform: scale(-1) rotate(180deg);
-ms-transform: scale(-1) rotate(180deg);
transform: scale(-1) rotate(180deg);
}
.counter-block-saven .counter-icon {
display: inline-block;
font-size: 60px;
line-height: 1em;
transition: all 300ms ease;
margin-bottom: 25px;
color: var(--headings-color);
}
@media (prefers-reduced-motion: reduce) {
.counter-block-saven .counter-icon {
transition: none;
}
}
.counter-block-saven .count-box .counter {
font-size: 48px;
line-height: 58px;
margin-top: 0;
}
.counter-block-eight {
position: relative;
margin-bottom: 50px;
}
.counter-block-eight .inner {
position: relative;
transition: all 300ms ease;
background-color: #ffffff;
box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.07);
border-radius: 10px;
padding: 40px 30px 30px;
max-width: 230px;
margin: 30px auto 0;
}
@media (prefers-reduced-motion: reduce) {
.counter-block-eight .inner {
transition: none;
}
}
.counter-block-eight .inner:hover .counter-icon {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
color: #ffffff;
background-color: var(--theme-color2);
}
.counter-block-eight .counter-icon {
position: absolute;
top: -30px;
left: 30px;
width: 60px;
height: 60px;
line-height: 60px;
display: inline-block;
text-align: center;
background-color: var(--theme-color1);
color: #ffffff;
font-size: 36px;
border-radius: 10px;
transition: all 300ms ease;
}
@media (prefers-reduced-motion: reduce) {
.counter-block-eight .counter-icon {
transition: none;
}
}
.counter-block-eight .count-box .counter {
font-size: 48px;
line-height: 58px;
margin-bottom: 10px;
color: var(--theme-color2);
}
.counter-block-eight .title {
margin-bottom: 0;
}
.counter-block-nine {
position: relative;
margin-bottom: 30px;
}
.counter-block-nine .inner {
position: relative;
transition: all 300ms ease;
background-color: #ffffff;
padding: 54px 34px 34px;
text-align: center;
border-radius: 10px;
border: 1px solid #e3e3e3;
}
@media (prefers-reduced-motion: reduce) {
.counter-block-nine .inner {
transition: none;
}
}
.counter-block-nine .inner:before {
position: absolute;
left: 10px;
top: 10px;
right: 10px;
bottom: 10px;
border: 1px dashed #e3e3e3;
content: "";
}
.counter-block-nine .inner:hover .counter-icon {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
color: #ffffff;
background-color: var(--theme-color2);
}
.counter-block-nine .counter-icon {
position: relative;
display: inline-block;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
background-color: var(--theme-color1);
color: #ffffff;
font-size: 48px;
border-radius: 100px;
transition: all 300ms ease;
margin-bottom: 20px;
}
@media (prefers-reduced-motion: reduce) {
.counter-block-nine .counter-icon {
transition: none;
}
}
.counter-block-nine .count-box .counter {
font-size: 48px;
line-height: 58px;
margin-bottom: 10px;
color: var(--theme-color2);
}
.counter-block-nine .title {
margin-bottom: 0;
}
@media (max-width: 767.98px) {
.counter-block-nine .title {
padding-top: 0px;
}
}