:root {
  --metallic-blue: #0368d0;
  --dark-blue: #022c54;
  --fi-dark-rgb: 255, 255, 255;
  --gradient-blue: linear-gradient(to top right, var(--dark-blue), var(--metallic-blue));

  --fi-primary: #3027b1;
  --fi-primary-rgb: 253, 86, 49;
}

/* Apply Metallic Blue to All Icons */
[class^="fi-"], [class*=" fi-"] {
  color: var(--metallic-blue) !important;
}

/* Apply Metallic Blue to Buttons */
.btn-primary, .btn {
  background-color: var(--metallic-blue);
  border-color: var(--metallic-blue);
}

/* Apply Metallic Blue to About Us Step Circles */
.steps .step-number {
  background-color: var(--metallic-blue);
}

/* Apply Metallic Blue to "What Sets Us Apart" Icons */
.section-what-sets-us-apart [class^="fi-"], .section-what-sets-us-apart [class*=" fi-"] {
  color: var(--metallic-blue);
}

/* Update navbar background color to match the new dark grey */
.navbar.bg-dark {
  background-color: rgba(var(--fi-dark-rgb), var(--fi-bg-opacity, 1)) !important;
}

/* Apply the gradient to SVGs directly */
.icon-gradient {
  background: var(--gradient-blue);
  -webkit-mask: var(--svg-url) no-repeat center;
  mask: var(--svg-url) no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: inline-block;
  width: 100%;
  height: 100%;
}

/* Adjust card icon size */
.card .icon-gradient {
  width: 180px;
  height: 180px;
  margin: 0 auto 1rem;
}

/* Change card text color to metallic blue */
.card .nav-link-light {
  color: var(--fi-gray-dark) !important;
}

/* Change card text color to metallic blue on hover */
.card .nav-link-light:hover {
  color: var(--fi-gray-dark) !important;
}

/* Change nav-link color to black */
.nav-link {
  color: black !important;
}

/* Change nav-link hover color to gray */
.nav-link:hover {
  color: gray !important;
}

/* Change nav-link-dark color to black */
.nav-link-dark {
  color: black !important;
}

/* Change nav-link-dark hover color to gray */
.nav-link-dark:hover {
  color: gray !important;
}