Arkadaşlar merhaba, aşağıdaki gibi bir kod yazdım.

<section id="features" class="pt-5">
  <div class="container">
    <div class="row mt-5">
      <div class="col-md-3 text-center">
        <div class="features">
          <i class="fa fa-history"></i>
          <h3>Tarih</h3>
          <p>Test</p>
        </div>

      </div>
      <div class="col-md-3 text-center">
        <div class="features">
          <i class="fa fa-tree"></i>
          <h3>Doğa</h3>
          <p>Test</p>
        </div>

      </div>
      <div class="col-md-3 text-center">
        <div class="features">
          <i class="fa fa-leaf"></i>
          <h3>Kültür</h3>
          <p>test</p>
        </div>

      </div>
      <div class="col-md-3 text-center">
        <div class="features">
          <i class="fa fa-podcast"></i>
          <h3>Turizm</h3>
          <p>test</p>
        </div>

      </div>

    </div>

  </div>

</section>

Bu kodun css kısmı ise şöyle

#features .fa {
  color: red;
}
#features h3 {
  font-size: 50px;
}

Fakat istediğim gibi renklenmiyor.

css olarak fontawesome'daki css'i görüyor.

Nerde hata yapıyorum acaba?