.two-col-stats-comp {padding: 20px 0 40px 0;}
.two-col-stats-comp .stat-row .col {width: 100%; max-width: 60%; margin: 0 auto;}
.two-col-stats-comp .stat-row .col.has-doughnut {padding: 0 30px; margin-bottom: 30px; position: relative;}
.two-col-stats-comp .stat-row .col .dynamic-stat {display: flex; flex-direction: column;}
.two-col-stats-comp .stat-row .col .pre-chart {position: absolute; top: 0; left: 0;}
.two-col-stats-comp .stat-row .col .chart-js-chart {position: relative; width: 100%; min-height: 100px;}
.two-col-stats-comp .stat-row .has-doughnut .stat-number.counter-value {font-size: 70rem; line-height: 1;}
.two-col-stats-comp span.percentage {line-height: 1; font-size: 70rem;}
.two-col-stats-comp .stat-row .col .doughnut-chart {position: relative; transform: rotate(180deg);}
.two-col-stats-comp .stat-row .col.has-doughnut .pre-chart {position: absolute; top: 0; left: 0; transform: rotate(180deg);}
.two-col-stats-comp .stat-row .stat-description {font-size: 18px; line-height: 24px;}
.two-col-stats-comp .stat-row .stat-description.center {text-align: center;}
.two-col-stats-comp .stat-row .stat-description.right {text-align: right;}
.two-col-stats-comp .stat-row.swap .stat-description {order: 1;}
.two-col-stats-comp .stat-row.swap .has-doughnut {order: 2;}
.two-col-stats-comp .dynamic-stat {position: absolute; left: 50%; display: flex; font-size: 72px; top: 50%; z-index: 9; transform: translate(-50%, -50%);}
.two-col-stats-comp p {font-size: 16px; margin-bottom: 15rem;}
.two-col-stats-comp .animated-numbers {display: flex; justify-content: center;}
.two-col-stats-comp .two-col-title {max-width: 100%; margin-bottom: 40px;}
.two-col-stats-comp .two-col-title.center {text-align: center;}
.two-col-stats-comp .two-col-title.left {text-align: left; margin-left: 0;}
.two-col-stats-comp .two-col-title.right {text-align: right; margin-right: 0;}
.two-col-stats-comp .stat-row .col.hide-chart .chart-js-chart canvas {opacity: 0;}
.two-col-stats-comp .stat-row .col.hide-chart {max-width: 50%;}
.two-col-stats-comp .stat-row .col.has-doughnut::after {content: ""; position: absolute; width: 80%; height: 13%; border-radius: 50%; background: transparent radial-gradient(closest-side at 50% 50%, #000000 0%, #00000000 100%) 0% 0% no-repeat padding-box; left: 50%; bottom: -22px; transform: translateX(-50%); mix-blend-mode: multiply; opacity: .2;}


@media(max-width: 576px) {
  .two-col-stats-comp .stat-row .has-doughnut .stat-number.counter-value {font-size: 80rem;}
  .two-col-stats-comp .stat-row .col .chart-js-chart, .two-col-stats-comp .stat-row .col {max-width: 100%;}
}

@media(min-width: 769px) {
  .two-col-stats-comp .two-col-title {max-width: 800rem; margin-left: auto; margin-right: auto;}
  .two-col-stats-comp .stat-row {display: flex; align-items: center;}
  .two-col-stats-comp .stat-row .col {width: calc(100% / 2); max-width: 100%;}
  .two-col-stats-comp .stat-row .has-doughnut .stat-number.counter-value {font-size: 83rem;}
  .two-col-stats-comp .stat-row .col.has-doughnut {margin-bottom: 0;}
  .two-col-stats-comp .stat-row .col.hide-chart {max-width: 30%;}
}

@media(min-width: 1280px) {
  .two-col-stats-comp .stat-row .col .chart-js-chart {max-width: 60%; margin: 0 auto;}
}