:root {
  --vc-pgn-width: 12px;
  --vc-pgn-height: 12px;
  --vc-pgn-margin: 4px;
  --vc-pgn-border-radius: 50%;
  --vc-pgn-background-color: #ffffff;
  --vc-pgn-active-color: #0672ba;
}

.carousel__pagination {
  display: flex;
  justify-content: center;
  list-style: none !important;
  line-height: 0;
  bottom: -20px;
  left: 50%;
  gap: 10px;
}

.carousel__pagination-button {
  display: block;
  border: 0;
  margin: 0;
  cursor: pointer;
  background: transparent;
}

.carousel__pagination-button::after {
  display: block;
  content: '';
  width: var(--vc-pgn-width);
  height: var(--vc-pgn-height);
  border-radius: var(--vc-pgn-border-radius);
  background-color: var(--vc-pgn-background-color);
  border: 1px solid var(--vc-pgn-active-color);
}

.carousel__pagination-button--active::after {
  background-color: var(--vc-pgn-active-color);
}

@media (hover: hover) {
  .carousel__pagination-button:hover::after {
    background-color: var(--vc-pgn-active-color);
  }
}

.carousel__prev,
.carousel__next {
  background: #0672ba;
  color: #ffffff;
}