/*CSS based on Courtney DeRuiter */
h1 {
  font-family: "Roboto Slab", serif;
  font-size: 32px;
  line-height: 40px;
  font-weight: bold;
}
h2 {
  font-family: "Roboto Slab", serif;
  font-size: 24px;
  line-height: 32px;
  font-weight: bold;
}

h3 {
  font-family: "sofia-pro", sans-serif;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}

h4 {
  font-family: "sofia-pro", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.txtMembership {
  font-family: "sofia-pro", sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #5069ac !important;
}
.txtMembershipDetail {
  font-family: "Roboto Slab", serif;
  font-size: 20px;
  font-weight: bold;
  color: #181948;
}
.nav-tabs-scrollable {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-tabs-scrollable .nav-link {
  white-space: nowrap;
}
.nav-tabs-scrollable .nav-link.active {
  border-bottom: 1px solid #425fa5 !important; /* Change this to your desired color */
  color: #425fa5 !important; /* Change this to your desired text color */
}
.selected-box .txtMembershipOverview,
.selected-box .txtMembershipDetail {
  color: white !important;
}

.btn-lg-grey {
  background-color: #f5f6fb !important;
  border: 1px solid #bbc6e3 !important;
  transition: border 0.3s ease;
  flex: 1; /* Ensure equal width */
  margin: 0 5px; /* Add margin between buttons */
}
.btn-lg-grey:hover,
.btn-lg-grey:active {
  border: 3px solid #bbc6e3 !important;
}

.selected-box {
  background-color: #181948 !important;
  color: white !important;
  border-color: #e16e47 !important;
}
.navyText {
  color: #181948 !important;
}
.selectedCard {
  background-color: #f3f6fb !important;
  border: 3px solid #bbc6e3 !important;
}
.selectedCard .card-header {
  background-color: #f3f6fb !important;
  border-bottom: 3px solid #bbc6e3 !important;
}

.btn-select-hover {
  border: 1px solid #bbc6e3 !important;
  transition: border 0.3s ease;
  flex: 1; /* Ensure equal width */
}

.btn-select-hover:hover,
.btn-select-hover:active {
  border: 3px solid #bbc6e3 !important;
}
.line-container {
  position: relative;
}
.line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-color: black;
}
.line.top {
  top: 50%;
  transform: translateY(-50%);
}
.line.bottom {
  bottom: 0;
}