Не появляется фон rgba

никак не могу понять что не так. Когда я пробую использовать свойство rgba() для main-text___form, ничего нет (делаю по видео) делала как там одной строчкой не получилось, потом через before и тоже никак :

<section class="main">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-5">
            <div class="main-img">
                <img src="img/main.png" alt="">
            </div>
        </div>
        <!-- /.col-5 -->
        <div class="col-7">
            <div class="main-text">
                <h1 class="main-text__title">
                Производство упаковки из гофрокартона
            </h1>
                <!-- /.main-text__title -->
                <div class="main-text__subtitle">
                с доставкой по всей России
            </div>
                <!-- /.main-text__subtitle -->
                <div class="main-text__form">
                    <div class="form-title">
                        Получите индивидуальное предложение на производство и поставку гофропродукции
                        <span class="form-title_uppercase">
                        Образцы упаковки бесплатно!</span>
                    </div>  
                <form action="#" class="form">
                    <input type="tel" placeholder="Введите номер телефона">
                    <button type="submit" class="button">Оставить заявку!</button>
                </form>
                <small class="form-small">*Минимальный заказ 500шт</small>
                </div>
                <!-- /.main-text__form -->
            </div>
            <!-- /.main-text -->
        </div>
        <!-- /.col-7 -->
        </div>
    </div>
    <!-- /.container -->
</section>

css:

    .main {
  position: relative;
  padding: 4.0625rem 0 3.75rem;
  background: #373737 url("../img/fon.jpg") center no-repeat;
  color: #ffffff;
  z-index: -1;
  }
.main::before {
  content: '';
  display: block;
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 0;
}
.main-img {
  position: relative;
}
.main-img::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 24.375rem;
  height: 24.375rem;
  left: 50%;
  top: 15px;
  margin-left: -9.375rem;
  border: 1px solid  #fff;
  border-radius: 50%;
}
.main-text__title {
  font-size: 2.5625rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.main-text__subtitle {
  font-size: 1.75rem;
  font-weight: 300;
}
.main-text___form {
  position: relative;
  z-index: 4;
}
.main-text___form::before {
  content: '';
  position: absolute;
  display: block;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  z-index: 3;
}

вот как у меня в браузере