/* Animate counter_unit up with a single spin/flip effect */
@keyframes spinInFromBottom {
  0% {
    opacity: 0;
    transform: translateY(20px) rotateX(90deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
  }
}

.counter_unit {
  display: inline-block;
  opacity: 0; /* Start hidden */

  /* Ensure origin for rotateX is bottom center */
  transform-origin: bottom center;
}

.counter_unit.animate-in {
  animation: spinInFromBottom .6s ease forwards;
}

/* Ensure counter_number is above */
.counter_number {
  position: relative;
  z-index: 1;
  display: inline-block;
}

.wp-container .cfmoto_counter {
  width: 100%;
  max-width: 100%;

  height: 228px;

}

.cfmoto_counter a {
  color: #fff;
}

.cfmoto_counter .cfmoto_counters {
  display: flex;
  height: 100%;
  margin: auto;
}

.cfmoto_counter .column {
  display: flex;
  flex: 1 1 0;
  align-items: center; /* vertical centering of inner content */

}


.cfmoto_counter .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* left alignment of both rows */
  color: #fff;
}

/* Positioning the content inside each column */
.cfmoto_counter .col-left {
  justify-content: flex-start; /* left align content container */
}

.cfmoto_counter .col-center {
  justify-content: center; /* center content container */
}

.cfmoto_counter .col-right {
  justify-content: flex-end; /* right align content container */
}

.cfmoto_counters .counter_label {
  width: auto;
  font-size: 24px;
  font-weight: 400;
  line-height: 25px;
}

.cfmoto_counters .counter_data {
  width: auto;
  font-size: 65px;
  font-weight: 900;
  line-height: 1.5;
}

/* Responsive: stack columns vertically on screen width <= 991px */
@media (max-width: 991px) {
  .wp-container .cfmoto_counter {
    width: 100%;
    max-width: 100%;

    height: auto;
    padding-right: 0;
    padding-left: 0;

  }
  .cfmoto_counter .cfmoto_counters {
    flex-direction: column;
    width: 100%;
    max-width: 300px;
    height: auto; /* let height grow automatically */
    margin: auto;
  }
  .cfmoto_counter .column {
    flex: none;      /* disable flex-grow */
    flex-wrap: wrap;
    justify-content: flex-start; /* left align content containers */
    max-width: 100%;
    padding: 30px 0; /* vertical spacing */
    white-space: normal; /* allow wrapping */
    border-left: none; /* remove vertical borders */
  }

  .cfmoto_counter .content {
    max-width: 100%;
  }
  .cfmoto_counter .column:first-child {
    border-top: none; /* remove top border on first */
  }

  /* Align all contents to left for stacked */
  .cfmoto_counter .col-left,
  .cfmoto_counter .col-center,
  .cfmoto_counter .col-right {
    justify-content: flex-start;
  }

  .cfmoto_counters .counter_label {
    max-width: 100%;
    margin-bottom: 20px;
    font-size: 20px;
    overflow-wrap: break-word;
  }

  .cfmoto_counters .counter_data {
    width: 100%;
    font-size: 44px;
    overflow-wrap: break-word;
  }

}

@media (min-width: 991px) and  (max-width: 1279px){
  .cfmoto_counters .counter_label {
    margin-bottom: 20px;
    font-size: 20px;
  }

  .cfmoto_counters .counter_data {
    font-size: 50px;
  }
}