.list-custom-bullet li {
  /* This adds some space for your new bullet */
  padding-left: 28px; 
  position: relative;
}

.list-custom-bullet li::before {
  content: ''; /* Required to make the pseudo-element appear */
  display: inline-block;

  /* Size of your bullet image */
  width: 20px;
  height: 20px;

  /* Your image URL */
  background-image: url('/images/bullet-heart.png');
  background-size: contain; /* Ensures the image fits */
  background-repeat: no-repeat;
  
  /* Position the new bullet */
  position: absolute;
  left: 0;
  top: 1px; /* Adjust this to vertically align with your text */
}

.footer-image-circle {
  width: 230px;
  height: 230px;
  object-fit: cover;

  /* This is the fix: "circle closest-side" tells the gradient
    to make its 100% size the *edge* of the square (100px from center),
    not the *corner* (141px from center).
  */
  mask-image: radial-gradient(
    circle closest-side,  /* <-- This is the new, critical part */
    black calc(100% - 10px),
    transparent 100%
  );
  
  /* Vendor prefix for Safari/older browsers */
  -webkit-mask-image: radial-gradient(
    circle closest-side,
    black calc(100% - 10px),
    transparent 100%
  );
}