.stat-bar .stat {
    background: var(--color-light-grey);
  border-radius:12px;
    padding: 10px 0 10px 40px;
  position:relative;
}
.stat-orange:before {
  background-color: var(--color-dark-orange);
      content: "";
    width: 6px;
    position: absolute;
    left: 0;
    height: 70%;
    margin-top: auto;
    margin-bottom: auto;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.stat-teal:before{
    background-color: var(--color-teal);
      content: "";
    width: 6px;
    position: absolute;
    left: 0;
    height: 70%;
    margin-top: auto;
    margin-bottom: auto;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.stat-blue:before{
  background-color: var(--color-dark-blue);
      content: "";
    width: 6px;
    position: absolute;
    left: 0;
    height: 70%;
    margin-top: auto;
    margin-bottom: auto;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.stat-content{
font-size: var(--subheading-16-bold);
  font-family: var(--primary-font);
  font-weight:700;
}
.stat-bar h4 {margin-bottom:10px}
.stat-bar .row .col {
  padding: 0 15px; /* Add your desired padding here */
  flex: 1; /* Ensure columns are equal size */
}

.stat-bar .row .col:last-child {
  padding-right: 10px !important; /* Remove padding for the last column */
}
.stat-row { display:grid;  gap: 20px;
    grid-template-columns: repeat(3, 1fr);padding:0 10px;}
/*--------------------------------------------------------------
## Netbook
--------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {

}
/*--------------------------------------------------------------
## iPad Pro
--------------------------------------------------------------*/
@media only screen and (max-width: 960px) {

}
/*--------------------------------------------------------------
## iPad
--------------------------------------------------------------*/
@media only screen and (max-width: 834px) {
.stat-bar .row .col {
    width: 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .stat-row { display:grid;  gap: 20px;
    grid-template-columns: repeat(2, 1fr);}
}
/*--------------------------------------------------------------
## iPad sm
--------------------------------------------------------------*/
@media only screen and (max-width: 768px) {
  .stat-row { display:grid;  gap: 10px;
    grid-template-columns: repeat(1, 1fr);}
}
}

/*--------------------------------------------------------------
## iPhone
--------------------------------------------------------------*/
@media only screen and (max-width: 480px) {

}
/*--------------------------------------------------------------
## iPhone sm
--------------------------------------------------------------*/
@media only screen and (max-width: 375px) {
      .stat-bar .row .col {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

}