我正在使用 Bootstrap 5 製作網站，但 index.css 屬性未應用於 index.html。當我將滑鼠懸停在服務卡上時，背景應該會發生變化，從而產生過渡效果。應該是從這個到這個。但是，我認為連結到 HTML 的 CSS 可能有問題，因為當我嘗試將網站的背景更改為隨機顏色時，該更改不會出現在網站上。

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
  background: #f1f2fa;
  font-family: 'Poppins', sans-serif;
}

hr {
  border: 1.5px solid #0b5ed7
}

.crd {
  background-color: #f1f2fa;
  transition: all;
}

.crd:hover {
  background: #0b5ed7;
  color: #fff;
  transition: 0.5s;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/index.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- SERVICES SECTION START -->
<section>
  <div class="container">
    <div class="row py-5">
      <h2 class="display-6 mb-4">Our Services</h2>
      <!-- <div class="col-lg-4 col-md-6">
                    <div class="card text-center p-4 mb-2">
                        <i class="fas fa-camera fa-3x"></i>
                        <h4>CCTV Services</h4>
                        <p class="p-2">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
                            voluptatum, voluptate, quibusdam, quia voluptas quod quos
                            exercitationem quae voluptatibus doloribus quidem. Quisquam
                        </p>
                    </div>
          </div> -->
      <div class="col-lg-4 col-md-6">
        <div class="card text-center p-4 mb-2 crd">
          <i class="fas fa-database fa-3x"></i>
          <h4>Datacenter Support</h4>
          <p class="p-2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
          </p>
        </div>
      </div>
      <!-- <div class="col-lg-4 col-md-6">
              <div class="card text-center p-4 mb-2">
                <i class="fas fa-sign-hanging fa-3x"></i>
                <h4>Digital Signage</h4>
                <p class="p-2">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
                  voluptatum, voluptate, quibusdam, quia voluptas quod quos
                  exercitationem quae voluptatibus doloribus quidem. Quisquam
                </p>
              </div>
            </div> -->
      <div class="col-lg-4 col-md-6">
        <div class="card text-center p-4 mb-2 crd">
          <i class="fas fa-headset fa-3x"></i>
          <h4>General Support</h4>
          <p class="p-2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
          </p>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div class="card text-center p-4 mb-2 crd">
          <i class="fas fa-server fa-3x"></i>
          <h4>Network Support</h4>
          <p class="p-2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
          </p>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div class="card text-center p-4 mb-2 crd">
          <i class="fas fa-cash-register fa-3x"></i>
          <h4>POS Services</h4>
          <p class="p-2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
          </p>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div class="card text-center p-4 mb-2 crd">
          <i class="fas fa-tower-cell fa-3x"></i>
          <h4>Telecom Services</h4>
          <p class="p-2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
          </p>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div class="card text-center p-4 mb-2 crd">
          <i class="fa-solid fa-bars fa-3x"></i>
          <h4>Additional Services</h4>
          <p class="p-2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, voluptate, quibusdam, quia voluptas quod quos exercitationem quae voluptatibus doloribus quidem. Quisquam
          </p>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- SERVICES SECTION CLOSE -->