.owl-dots {
    text-align: center;
}

div.owl-carousel{
    counter-reset:dot;
}
.owl-carousel button.owl-dot{
    background-color: rgb(195, 195, 212);
    width:20px;
    height:20px;
    margin: 0px 4px;
    border-radius: 20px;
    font-size: 0.625rem;
}

.owl-carousel button.owl-dot.active{
    background-color: rgb(255, 0, 140);
    color: white;
}

.owl-carousel button.owl-dot::before {
    counter-increment: dot;
    content: counter(dot) "";
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

.num {
  font-family: "Arial Narrow", Roboto, "Helvetica Neue", sans-serif;
}