I'm making a website using Bootstrap 5, but the index.css properties are not being applied to index.html. When I hover over the service card, the background should change, giving a transition effect. It should be from this to this. However, I think there may be an issue with the CSS linked to the HTML, because when I try to change the background of the site to a random color, the change doesn't appear on the site.

@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 -->