@font-face {
  font-family: "Bold";
  src: url("/assets/fonts/Mulish-Bold.ttf");
}
@font-face {
  font-family: "Semibold";
  src: url("/assets/fonts/Mulish-SemiBold.ttf");
}
@font-face {
  font-family: "Regular";
  src: url("/assets/fonts/Mulish-Regular.ttf");
}
@font-face {
  font-family: "ExtraBold";
  src: url("/assets/fonts/Mulish-ExtraBold.ttf");
}
.officerCardContainer {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, calc(-2.2857142857px + 2.380952381vw), 32px);
}
.officerCardContainer .officerCard {
  padding: 24px;
  background-color: #f8f9fb;
  border-radius: 8px;
  border: 1px solid #dee3ed;
}
.officerCardContainer .officerCard .trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.officerCardContainer .officerCard .trigger .title {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.officerCardContainer .officerCard .trigger h3 {
  font-family: "Semibold" !important;
  font-size: 0.75rem !important;
  color: #586473;
}
.officerCardContainer .officerCard .trigger h2 {
  font-family: "Bold" !important;
  font-size: 1.25rem !important;
}
.officerCardContainer .officerCard .trigger .moreButtonContainer {
  display: flex;
  justify-content: end;
}
.officerCardContainer .officerCard .trigger .moreButtonContainer .moreButton {
  width: 270px;
  height: 44px;
  border: 1px solid #002855;
  background-color: #fff;
  font-family: "Semibold" !important;
  font-size: 1rem !important;
  border-radius: 100px;
  color: #002855;
}
.officerCardContainer .officerCard:has(.trigger.active) .trigger {
  padding-bottom: 24px;
}
.officerCardContainer .officerCard:has(.trigger.active) .triggered {
  display: flex;
}
.officerCardContainer .officerCard .triggered {
  display: none;
  gap: 12px;
}
.officerCardContainer .officerCard .triggered .officerCardImage {
  width: 277px;
  height: 252px;
  border-radius: 4px;
}
.officerCardContainer .officerCard .triggered .officerCardTextContainer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.officerCardContainer .officerCard .triggered .officerCardTextContainer h3 {
  font-family: "Semibold" !important;
  font-size: 0.75rem !important;
  color: #586473;
}
.officerCardContainer .officerCard .triggered .officerCardTextContainer h2 {
  font-family: "Bold" !important;
  font-size: 1.25rem !important;
}
.officerCardContainer .officerCard .triggered .officerCardTextContainer p {
  font-family: "Regular" !important;
  font-size: 1rem !important;
  color: #414c5b;
}

@media (max-width: 768px) {
  .officerCardContainer .officerCard {
    flex-direction: column;
  }
  .officerCardContainer .officerCard .officerCardImage {
    display: flex;
    align-self: center;
  }
  .officerCardContainer .officerCard .officerCardTextContainer {
    gap: 12px;
  }
  .officerCardContainer .officerCard .trigger {
    flex-direction: column;
    gap: 12px;
  }
  .officerCardContainer .officerCard .triggered {
    flex-direction: column;
  }
}/*# sourceMappingURL=officerCard.css.map */