.image-text.white .image-text-circle::after {
  background: radial-gradient(60% 60% at 50% 50%, #FFB74D 45%, rgba(255, 183, 77, 0) 95%);
}
.image-text.light-blue {
  background: var(--light-blue);
}
.image-text.light-blue .image-text-circle::after {
  background: radial-gradient(60% 60% at 50% 50%, #ffffff 70%, #ffffff 100%);
}
.image-text.light-blue a {
  color: var(--medium-navy);
}
.image-text.light-blue a:hover {
  color: var(--black);
}
.image-text.light-blue h1, .image-text.light-blue h2, .image-text.light-blue h3, .image-text.light-blue h4, .image-text.light-blue h5, .image-text.light-blue h6 {
  color: var(--navy);
}
.image-text.navy {
  color: white;
  background: linear-gradient(67deg, #0A314E 0%, #075074 100%);
}
.image-text.navy .image-text-circle::after {
  background: radial-gradient(60% 60% at 50% 50%, #03668F 70%, #084668 100%);
}
.image-text.navy a {
  color: var(--medium-blue);
}
.image-text.navy a:hover {
  color: var(--orange);
}
.image-text .wrapper {
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 3rem 6rem;
  align-items: center;
  padding: 8rem 0;
}
.image-text .wrapper.reverse {
  flex-direction: row-reverse;
}
@media (max-width: 859px) {
  .image-text .wrapper .image-text-circle {
    order: 2;
  }
}
.image-text-content {
  flex: 1 1 300px;
}
.image-text-circle {
  margin-right: 4rem;
  position: relative;
  flex: 1 1 300px;
}
.image-text-circle::after {
  content: "";
  position: absolute;
  top: -15%;
  left: -15%;
  width: 130%;
  height: 130%;
  border-radius: 50%;
  z-index: 0;
  /* Layer 1: conic mask */
  -webkit-mask-image: conic-gradient(from 45deg at 50% 50%, white 25%, transparent 25%);
  /* Layer 2: radial fade at edges */
  -webkit-mask-image: conic-gradient(from 45deg at 50% 50%, white 25%, transparent 25%), radial-gradient(circle at 50% 50%, white 58%, transparent 58%);
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center, center;
  -webkit-mask-size: cover, cover;
  /* Safari/Chrome need this syntax */
  -webkit-mask-composite: destination-in;
  mask-composite: subtract;
  mask-image: conic-gradient(from 45deg at 50% 50%, white 25%, transparent 25%), radial-gradient(circle at 50% 50%, white 58%, transparent 58%);
  mask-repeat: no-repeat, no-repeat;
  mask-position: center, center;
  mask-size: cover, cover;
}
.image-text-media {
  z-index: 1;
  aspect-ratio: 1/1;
  width: 100%;
  max-width: 100%;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}
.image-text-media img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* crop nicely inside circle */
  display: block;
}