/* !- Fonts */
/* !- Sizes */
/* !- Spaces */
/* !- Layout breakpoints and spacing */
/* !- Layout */
.bc-row.approach-graphic-row {
  grid-column-gap: 0px;
}

.approach-copy-col {
  grid-column: span 5;
}

.approach-copy-content {
  border-bottom: 1px solid #FAFAFA;
  min-height: 50%;
}

.approach-circles-col {
  grid-column: span 7;
  max-height: 200px;
}

.approach-circle-wrapper {
  width: 38%;
  border-radius: 50%;
  border: 1px solid #FAFAFA;
  display: flex;
  flex: 1; /* Each child div takes equal width */
  aspect-ratio: 1/1; /* Ensures a 1:1 width-to-height ratio */
  margin-left: -4.677%;
  transition: all 0.5s ease; /* Apply animation to all properties */
  overflow: visible;
  position: relative;
}

.approach-circle-wrapper:first-child {
  margin-left: 0px;
}

.approach-circle-expander {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  display: flex;
  transition: all 0.4s ease;
  border-radius: 50%;
}

.approach-circle-expanded {
  background-color: #F9B840;
  width: 120%; /* Grow by 10% on each side (10% + 10% = 20%) */
  height: 120%;
  transform: translate(-50%, -50%); /* Keep it centered */
  z-index: 999;
}
.approach-circle-expanded .custom-approach-icon {
  display: none;
}
.approach-circle-expanded .custom-approach-icon-hover {
  display: initial;
}

.approach-circle-content {
  align-self: center;
  margin: auto;
  text-align: center;
  max-width: 131px;
}
.approach-circle-content h4 {
  color: #FAFAFA;
}

.approach-circle-read-more-wrapper {
  display: none;
}

.approach-circle-content h4.col-charcoal {
  color: #282828;
}

.approach-circle-content-hover {
  background-color: #F9B840;
}

.approach-icon-dark path {
  fill: #282828;
}

/* ! Custom Approach Icons */
.custom-approach-icon,
.custom-approach-icon-hover {
  width: 33px;
  height: 33px;
  margin: auto;
}
.custom-approach-icon img,
.custom-approach-icon-hover img {
  max-width: 33px;
}

.custom-approach-icon-hover {
  display: none;
}

@media screen and (max-width: 1200px) {
  .approach-copy-content {
    border-bottom: none;
  }
  .approach-circles-col {
    grid-column: span 8;
    max-height: none;
  }
}
@media screen and (max-width: 900px) {
  .approach-circles-col {
    flex-direction: column;
    text-align: center;
  }
  .approach-circle-wrapper {
    width: 100%;
    max-width: 224px;
    margin-top: -4.677%;
    margin-left: auto;
    margin-right: auto;
  }
  .approach-circle-wrapper:first-child {
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
  }
}

/*# sourceMappingURL=style.css.map */