Проблема с z-index в Bootstrap carousel

Есть секция, фон которой в итоге решил сделать переключающимся на стрелках и точках с помощью bootstrap.

Стрелки становятся не активны после назначения .carousel отрицательного z-index. Не получается решить.

 <section class="promo">
        <div class="container">
            <div class="promo__header">
                <div class="promo__logo">
                    <picture>
                        <a href="#"><img src="img/logo.png" alt="Prengi"></a>
                    </picture>
                </div>
                <nav class="promo__menu">
                    <ul>
                        <li><a href="#">Главная</a></li>
                        <li><a href="#">Модули</a></li>
                        <li><a href="#">Отрасли</a></li>
                        <li><a href="#">О нас</a></li>
                        <li><a href="#">Наши обязательства</a></li>
                    </ul>
                </nav>
                <div class="hamburger">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            <h1 class="promo__title">
                Управляй своим бизнесом через Smartphone
            </h1>
            <h2 class="promo__subtitle">
                <span>PRENGI</span> - Платформа для прозрачного
                управления бизнесом
            </h2>
            <button class="btn promo__btn">Получить доступ</button>
            <picture class="promo__phones">
                <img src="img/promo_phones.png" alt="Phones">
            </picture>
        </div>
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
              <div class="carousel-item active carousel-item_1"></div>
              <div class="carousel-item carousel-item_2"></div>
              <div class="carousel-item carousel-item_3"></div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            </a>
        </div>
    </section>

.carousel {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    &-item{
        width: 100%;
        min-height: 700px;
        &_1{
            background: url('../../img/promo_background.png');
        }
        &_2{
            background: url('../../img/promo_background.png');
        }
        &_3{
            background: url('../../img/promo_background.png');
        }
    }
    &-inner{
        z-index: -10;
    }
}


a.carousel-control-prev{
    width: 50px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -50%;
    height: 50px;
    z-index: 10 !important; // нет даёт эффекта
}

.carousel-control-prev-icon{
    z-index: 15 !important; // нет даёт эффекта
}