.ct-counter-layout1:not(.elementor-widget) {
height: 184px;
width: 184px;
@include border-radius(184px);
@media #{$max-sm} {
width: 130px;
height: 130px;
}
position: relative;
z-index: 1;
overflow: hidden;
display: flex;
flex-wrap: wrap;
align-items: center;
text-align: center;
.ct-counter-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
opacity: 0;
@include transition(all 300ms linear 0ms);
}
&:before, &:after {
content: '';
@include border-radius(184px);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
@include transition(all 300ms linear 0ms);
}
&:before {
@include background-horizontal(rgba($gradient_color_from, 0.8), rgba($gradient_color_to, 0.8));
background-color: transparent;
opacity: 0;
}
&:after {
background-color: #2d2c2c;
}
.ct-counter-number {
font-size: 30px;
color: #fff;
line-height: 1;
@include font-family-heading($heading_default_font);
font-weight: 700;
margin-bottom: 7px;
@media #{$max-sm} {
font-size: 24px;
}
}
.ct-counter-title {
font-size: 18px;
line-height: 24px;
color: #ffffff;
@media #{$max-sm} {
font-size: 16px;
}
}
.ct-counter-holder {
padding: 20px 30px;
width: 100%;
@media #{$max-sm} {
padding: 20px;
}
}
&:hover {
.ct-counter-image, &:before {
opacity: 1;
}
&:after {
opacity: 0;
@include transform(scale(0));
}
}
&.size2 {
width: 150px;
height: 150px;
.ct-counter-holder {
padding: 20px;
}
@media #{$max-sm} {
width: 130px;
height: 130px;
}
}
}
.ct-counter-layout2 {
display: flex;
flex-wrap: wrap;
justify-content: center;
@media #{$max-lg} {
justify-content: flex-start;
}
.ct-counter-inner {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
&.style1 {
.ct-counter-icon {
margin-right: 25px;
line-height: 1;
i {
@extend .text-gradient;
font-size: 48px;
}
}
.ct-counter-title {
font-size: 18px;
}
.ct-counter-number {
font-size: 45px;
color: #0e0e0e;
line-height: 1;
@include font-family-heading($heading_default_font);
font-weight: 700;
margin-bottom: 3px;
display: inline-flex;
.ct-counter-number-suffix {
margin-left: 4px;
}
}
}
&.style2 {
.ct-counter-icon {
margin-right: 20px;
line-height: 1;
i {
font-size: 62px;
color: #e3e3e3;
@include transition(all .4s cubic-bezier(.645,.045,.355,1));
display: inline-block;
}
}
.ct-counter-title {
font-size: 16px;
font-weight: 600;
color: #3d3d3d;
font-family: "Nunito Sans";
}
.ct-counter-number {
font-size: 36px;
color: #000000;
line-height: 1;
@include font-family-heading($heading_default_font);
font-weight: 700;
margin-bottom: 3px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.ct-counter-number-prefix,
.ct-counter-number-suffix {
font-size: 20px;
color: $primary_color;
position: relative;
top: -5px;
margin: 0 3px;
}
&:hover .ct-counter-icon i {
@extend .text-gradient;
@include transform(rotateY(360deg));
}
}
&.style3 {
.ct-counter-icon {
line-height: 1;
margin-right: 20px;
i {
font-size: 50px;
color: $primary_color;
@include transition(all 200ms linear 0ms);
display: inline-block;
}
}
.ct-counter-number {
color: $primary_color;
@include font-family-heading($heading_default_font);
font-size: 35px;
line-height: 1;
font-weight: 700;
&:not(.color-active) {
@extend .text-gradient;
}
}
.ct-counter-title {
margin-top: 6px;
font-size: 17px;
line-height: 24px;
}
&:hover .ct-counter-icon i {
@include transform(rotateY(360deg));
}
.ct-counter-inner {
align-items: flex-start;
}
}
}
@media #{$min-xl} {
.counter-col-line1 {
.counter-line {
position: absolute;
height: 92px;
width: 2px;
background-color: $primary_color;
top: 50%;
left: -1px;
@include transform(translate(0, -50%));
&:before, &:after {
content: '';
position: absolute;
width: 10px;
height: 10px;
background-color: $primary_color;
left: -4px;
}
&:before {
top: 0;
}
&:after {
bottom: 0;
}
}
}
}
.ct-counter-layout3 {
text-align: center;
.ct-counter-icon {
line-height: 1;
margin-bottom: 20px;
i {
font-size: 48px;
@extend .text-gradient;
}
}
.ct-counter-number {
font-size: 60px;
line-height: 1;
color: #000000;
@include font-family-heading($heading_default_font);
font-weight: 700;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
letter-spacing: 0.01em;
margin-bottom: 26px;
cite {
font-size: 36px;
color: $gradient_color_from;
font-style: normal;
}
.ct-counter-number-prefix, .ct-counter-number-suffix {
align-items: center;
display: flex;
font-size: 36px;
font-style: normal;
margin: 0 3px;
@extend .text-gradient;
@include background-gradient-bottom($gradient_color_from, $gradient_color_to);
}
}
.ct-counter-title {
font-size: 22px;
font-weight: 700;
margin-bottom: 0;
color: #0e0e0e;
@media #{$max-lg} {
font-size: 18px;
}
cite {
font-style: normal;
font-weight: 400;
}
}
&.style2 {
text-align: left;
.ct-counter-number {
justify-content: left;
font-size: 48px;
font-weight: 300;
font-family: inherit;
color: $primary_color;
margin-bottom: 10px;
.ct-counter-number-prefix, .ct-counter-number-suffix {
color: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
}
.ct-counter-title {
font-size: 20px;
line-height: 24px;
position: relative;
padding-bottom: 15px;
&:before {
content: '';
width: 24px;
height: 3px;
background-color: $primary_color;
position: absolute;
bottom: 0;
left: 0;
}
}
}
&.style3 {
text-align: left;
display: flex;
flex-wrap: wrap;
justify-content: center;
.ct-counter-number {
justify-content: left;
font-size: 150px;
color: #000;
font-weight: 700;
margin-bottom: 0;
align-items: flex-start;
}
.ct-counter-number-suffix,
.ct-counter-number-prefix {
font-size: 60px;
@include background-gradient-bottom($primary_color, $primary_color);
position: relative;
top: -17px;
}
.ct-counter-title {
margin-top: -6px;
font-size: 28px;
font-weight: 600;
font-family: "Nunito Sans";
line-height: normal;
@media #{$max-md} {
font-size: 24px;
}
}
}
}
.ct-counter-layout4 {
.ct-counter-inner {
display: flex;
flex-wrap: nowrap;
}
.ct-counter-icon {
margin-right: 30px;
line-height: 1;
margin-top: 6px;
i {
color: $gradient_color_to;
font-size: 54px;
}
}
.ct-counter-title {
font-size: 18px;
line-height: 24px;
color: #aaa9ab;
}
.ct-counter-number {
display: flex;
flex-wrap: wrap;
font-size: 40px;
color: #fff;
line-height: 1;
@include font-family-heading($heading_default_font);
font-weight: 700;
margin-bottom: 12px;
}
}
.ct-counter-layout5 {
text-align: center;
.ct-counter-number {
font-size: 45px;
line-height: 130px;
width: 130px;
height: 130px;
@include border-radius(130px);
@include box-shadow(0 7px 20px rgba($gradient_color_to, 0.28));
@include font-family-heading($heading_default_font);
font-weight: 700;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
letter-spacing: 0.01em;
margin: 0 auto 14px auto;
background-color: #fff;
.ct-counter-number-value {
@extend .text-gradient;
}
.ct-counter-number-prefix, .ct-counter-number-suffix {
align-items: center;
display: flex;
font-style: normal;
font-weight: 400;
margin: 0 2px;
}
}
.ct-counter-title {
font-size: 22px;
font-weight: 700;
margin-bottom: 0;
color: #0e0e0e;
@media #{$max-lg} {
font-size: 18px;
}
cite {
font-style: normal;
font-weight: 400;
}
}
}
.ct-counter-layout6 {
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
.ct-counter-number {
display: inline-block;
background-color: $third_color;
color: #fff;
font-size: 36px;
line-height: 1;
font-weight: 600;
padding: 24px 20px;
@include border-radius(12px);
@include font-family-heading($heading_default_font);
min-width: 150px;
text-align: center;
margin-right: 22px;
background-image: url(../images/dot-light.png);
background-position: left center;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 14px;
.ct-counter-number-suffix {
font-size: 30px;
font-style: normal;
position: relative;
display: inline-block;
top: -15px;
}
@media #{$max-lg} {
min-width: 100px;
font-size: 30px;
padding: 20px 12px;
.ct-counter-number-suffix {
font-size: 24px;
}
}
.ct-counter-number-value-after {
margin-left: -7px;
}
}
.ct-counter-holder {
margin-bottom: 14px;
}
.ct-counter-title {
font-size: 24px;
font-weight: 700;
margin-bottom: 0;
@media #{$max-lg} {
font-size: 20px;
}
}
.ct-counter-desc {
color: #000000;
}
.ct-counter-inner {
margin-left: 42px;
padding: 17px 17px 3px 17px;
background-color: #fff;
@include border-radius(12px);
@include box-shadow(0 15px 84px rgba(#000000, 0.18));
margin-bottom: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
max-width: 510px;
position: relative;
@media #{$max-lg} {
@include box-shadow(0 15px 34px rgba(#000000, 0.12));
margin-bottom: 40px;
}
&:before {
content: '';
position: absolute;
top: 20px;
left: -42px;
height: auto;
width: auto;
border-style: solid;
border-color: transparent darken($third_color, 0.04) darken($third_color, 0.04) transparent;
border-width: 21px;
z-index: -1;
@media #{$max-sm} {
left: -30px;
top: 17px;
}
}
@media #{$max-lg} {
margin-left: 30px !important;
}
}
&:hover {
@include transform(translateY(-6px));
}
}
.ct-counter-layout7 {
.item--icon {
line-height: 1;
margin-bottom: 9px;
i {
font-size: 32px;
color: $primary_color;
}
}
.ct-counter-title {
font-size: 16px;
line-height: 24px;
font-weight: 500;
font-family: inherit;
margin-bottom: 0;
@include transition(all 300ms linear 0ms);
}
.ct-counter-number {
font-size: 30px;
line-height: 1;
font-weight: 700;
@include font-family-heading($heading_default_font);
color: #000000;
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: center;
}
.ct-counter-number-value {
margin: 0 3px;
display: inline-block;
}
.ct-counter-number-prefix, .ct-counter-number-suffix {
font-size: 18px;
position: relative;
top: -4px;
}
.ct-counter-holder {
background-color: #ebeef0;
border: 1px solid #e6e7e8;
padding: 25px 20px 21px;
@include border-radius(4px);
@include transition(all 300ms linear 0ms);
margin-bottom: 14px;
@media #{$max-sm} {
padding-left: 15px;
padding-right: 15px;
}
}
.ct-counter-inner {
text-align: center;
&:hover {
.ct-counter-holder {
@include box-shadow(0 18px 18px rgba(#000843, 0.15));
@include transform(translateY(-13px));
background-color: #fff;
}
.item--icon {
animation: icon-bounce 800ms ease-out infinite;
-webkit-animation: icon-bounce 800ms ease-out infinite;
}
}
}
&.style2 {
.ct-counter-holder {
display: inline-block;
background-color: rgba(#000000, 0.72);
@include border-radius(5px);
min-width: 120px;
margin-bottom: 11px;
z-index: 1;
position: relative;
border: none;
&:before {
content: '';
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
border: 1px solid rgba(#fff, 0.15);
@include border-radius(5px);
}
}
.ct-counter-number {
color: #fff;
font-family: inherit;
}
.ct-counter-inner {
text-align: center;
&:hover {
.ct-counter-holder {
@include transform(translateY(-13px));
background-color: rgba(#000000, 0.72);
}
.ct-counter-title {
@include transform(translateY(-5px));
}
}
}
.ct-counter-title {
font-weight: 700;
font-size: 22px;
line-height: 30px;
@include font-family-heading($heading_default_font);
color: #fff;
}
}
&.style3 {
.item--icon {
margin-bottom: 5px;
i {
@extend .text-gradient;
@include background-gradient-bottom($gradient_color_from, $gradient_color_to);
}
}
.ct-counter-holder {
padding: 0;
@include box-shadow(none !important);
background-color: transparent;
border: none;
}
.ct-counter-number {
font-family: inherit;
color: #000c3f;
}
.ct-counter-title {
font-size: 22px;
line-height: 30px;
color: #41496b;
@include font-family-heading($heading_default_font);
font-weight: 700;
}
.ct-counter-inner {
&:hover {
.ct-counter-holder {
@include transform(translateY(0px));
}
}
}
}
}
.ct-counter-layout8 {
text-align: center;
.item--icon {
line-height: 1;
margin-bottom: 30px;
i {
font-size: 80px;
color: #fff;
}
}
.ct-counter-number {
font-size: 42px;
line-height: 1;
font-weight: 700;
@include font-family-heading($heading_default_font);
@extend .text-gradient;
display: inline-table;
margin-bottom: 14px;
}
.ct-counter-title {
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
font-family: inherit;
color: #fff;
letter-spacing: 0.2em;
}
&:hover .item--icon {
animation: icon-bounce 800ms ease-out infinite;
-webkit-animation: icon-bounce 800ms ease-out infinite;
}
}
.ct-counter-layout9 {
.ct-counter-icon {
line-height: 1;
margin-right: 8px;
i {
color: $primary_color;
font-size: 38px;
}
}
.ct-counter-title {
font-size: 18px;
line-height: 24px;
color: #aaa9ab;
}
.ct-counter-number {
font-size: 40px;
color: #fff;
line-height: 1;
@include font-family-heading($heading_default_font);
font-weight: 700;
display: flex;
}
.ct-counter-meta {
display: flex;
flex-wrap: nowrap;
align-items: center;
margin-bottom: 6px;
}
.ct-counter-inner {
padding-left: 23px;
position: relative;
&:before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 4px;
background-color: rgba(#585858, .35);
}
&:after {
content: '';
width: 4px;
height: 22px;
background-color: $primary_color;
position: absolute;
top: 0;
left: 0;
@include transition(all .25s cubic-bezier(.645,.045,.355,1));
}
&:hover {
&:after {
top: 50%;
@include transform(translate(0, -50%));
}
}
}
}
.ct-counter-layout10 {
.ct-counter-icon {
margin-right: 32px;
i {
font-size: 54px;
color: $primary_color;
}
@media #{$max-lg} {
margin-right: 0;
margin-bottom: 22px;
}
}
.ct-counter-title {
margin-bottom: 0px;
font-weight: 600;
color: #444;
font-size: 18px;
}
.ct-counter-number {
line-height: 1;
font-size: 40px;
font-weight: 700;
color: $primary_color;
}
.ct-counter-inner {
background-color: #eef2f5;
@include border-radius(5px);
display: flex;
flex-wrap: nowrap;
align-items: center;
padding: 20px 20px 20px 34px;
@media #{$max-lg} {
display: block;
}
}
&.rm-box {
.ct-counter-inner {
padding: 0;
background-color: transparent;
text-align: center;
}
.ct-counter-number {
display: flex;
justify-content: center;
}
}
} |