Shadow and Circle number Carousel Bootstrap 4

I'm trying to do 2 things in a carousel in Bootstrap 4

1- Shadow in img text, in carousel-caption use this dark effect below the text

2- Indicators in circle format and with a number inside

This 2 things just like this IMG: https://i.imgur.com/gH9TGQ0.png

I've trid this:

<script>
/* shadow */
.carousel-caption {
  background: rgba(0,0,0,0.5);
  background-color: rgba(0,0,0,.5);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

/* circle indicators and numbers */
.carousel-indicators-numbers {
    li {
      text-indent: 0;
      margin: 0 2px;
      width: 30px;
      height: 30px;
      border: none;
      border-radius: 100%;
      line-height: 30px;
      color: #fff;
      background-color: #999;
      transition: all 0.25s ease;
      &.active, &:hover {
        margin: 0 2px;
        width: 30px;
        height: 30px;
        background-color: #337ab7;        
      }
    }
}
</script>


<!-- carrousel NEWS -->
<div class="col-md-9" style="height:550px; width: 900px;">

<div class="container">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

  <!-- indicators dot nov -->
  <ol class="carousel-indicators carousel-indicators-numbers">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active">1</li>
    <li data-target="#carousel-example-generic" data-slide-to="1">2</li>
    <li data-target="#carousel-example-generic" data-slide-to="2">3</li>
  </ol>

  <!-- wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
        <img class="d-block img-fluid" src="http://placehold.it/850x500" style="width: 850px; height:500px;" alt="Third slide">
        <div class="carousel-caption">
            <a href="#"><h3>News 1</h3></a>
            <p>Bla bla bla bla bla bla bla bla bla bla bla</p>
        </div>
    </div>
    <div class="carousel-item">
        <img class="d-block img-fluid" src="http://placehold.it/850x500" style="width: 850px; height:500px;" alt="Third slide">
        <div class="carousel-caption">
            <a href="#"><h3>News 2</h3></a>
            <p>Bla bla bla bla bla bla bla bla bla bla bla</p>
        </div>
    </div>
    <div class="carousel-item">
        <img class="d-block img-fluid" src="http://placehold.it/850x500" style="width: 850px; height:500px;" alt="Third slide">
        <div class="carousel-caption">
            <a href="#"><h3>News 3</h3></a>
            <p>Bla bla bla bla bla bla bla bla bla bla bla</p>
        </div>
    </div>
  </div>

  <!-- controls or next and prev buttons -->
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>

</div>

But with no effect, it's just show like default bootstrap carousel: https://i.imgur.com/xcLAPk1.png