.welcome {
  display: flex;
  flex-direction: row;
  height: 50vw;
}

.welcome-box {
  flex: 1;
  align-content: center;
  padding-right: 1rem;
}

.headshot {
  flex: 1;
}

.welcome .headshot img {
  position: absolute;
  left: 50vw;
  width: 50vw;
}

.welcome-message-0 {
  font-size: 1.8rem;
  font-weight: 400;
  font-family: "Oxanium";
  margin-left: 0.1rem;
  margin-top: 0.4rem;
  margin-bottom: -0.1rem;

}

.welcome-message-1,
.welcome-message-2 {
  font-size: 4rem;
  font-weight: 600;
  font-family: "Oxanium";
  letter-spacing: -0.03rem;
  line-height: 0.82em;
  margin-bottom: 0;
}

.welcome-message-3 {
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.3em;
  margin-top: 1.2rem;
}

.profile-buttons {
  margin-top: 2.8rem;
}

.profile-buttons a {
  border: 1.7px solid #2d2d2d;
  border-radius: 5px;
}

.profile-buttons img {
  height: 1.4rem;
  filter: saturate(0) brightness(0.4);
  padding: 1px 4px 3px 4px;
}

.section {
  padding: 3.5rem 0 4.5rem 0;
}

.section-title {
  text-align: center;
  justify-self: center;
  margin-bottom: 1.4rem;
}

.about-wrapper {
  width: 80%;
  justify-self: center;
}

.about p {
  text-align: center;
}

.about-emphasis {
  color: var(--clr-accent-dark);
}

.what-wrapper {
  display: grid;
  gap: 3rem;
  place-self: center;
  margin: 0 10px;
  max-width: 800px;
}

.what-block {
  display: flex;
  flex-direction: row;
}

.what-block-text,
.what-block-img {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.what-block-img img {
  width: 24vw;
  height: 24vw;
  min-width: 140px;
  min-height: 140px;
  max-width: 300px;
  max-height: 300px;
  overflow: clip;
  border: 2px solid var(--clr-accent-light);
  border-radius: 30px;
}

.how-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.how-block {
  width: 14rem;
  margin: 12px;
  /* border: 1.5px solid var(--clr-accent-light); */
  border-radius: 30px;
  background-color: var(--clr-accent-light);
}

/* this pseudo-div stretches the block to the right height */
.how-block:after {
  content: '';
  display: block;
  margin-top: 100%;
  /* margin-top sets proportion relative to width */
}

.how-block-inside {
  float: left;
  /* float allows div to overlap pseudo-div */
  width: 100%;
  height: 100%;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.how-title {
  font-family: "Oxanium";
  font-size: 1.1rem;
  font-weight: bold;
  height: 2rem;
  margin-top: 0.4rem;
}

.how-block-inside img {
  height: 4rem;
}

.how-text {
  height: 4.5rem;
  align-content: center;
  text-align: center;
  line-height: 1.2rem;
}

.promise-wrapper {
  display: grid;
  gap: 3.0rem;
  justify-items: center;
}

.promise-block {
  width: 96%;
  max-width: 800px;
  display: flex;
  flex-direction: row;
}

.promise-icon {
  margin-right: 1.2em;
  font-size: 2rem;
  align-content: center;
}

.promise-title {
  display: flex;
  flex-direction: row;
}

.promise-title p {
  font-size: 1.2rem;
  font-weight: bold;
  font-family: "Oxanium";
  margin-bottom: 0.3rem;
}

.promise-title-number,
.promise-title-text {
  border-bottom: outset var(--clr-accent-dark);
}

.promise-title-number {
  width: 1rem;
  text-align: end;
}

.promise-title-text {
  padding-left: 0.2rem;
}

.promise-body {
  padding-left: 1.5rem;
  line-height: 1.7em;
}

.faq-wrapper {
  display: grid;
  gap: 1.3rem;
  justify-items: center;
}

.faq-block {
  width: 96%;
  max-width: 600px;
  background-color: var(--clr-accent-light);
  --bs-accordion-bg: none;
  --bs-accordion-border-color: none;
}

.faq-title {
  font-size: 1.2rem;
  font-weight: bold;
  font-family: "Oxanium";
  background-color: none;
  --bs-accordion-active-color: var(--bs-body-color);
  --bs-accordion-active-bg: none;
}

.faq-body {
  padding: 0.5rem var(--bs-accordion-btn-padding-x) var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
  line-height: 1.8em;
  border-top: outset var(--clr-accent-dark);
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.contact-top-pad {
  height: 12rem;
}

.contact {
  position: relative;
  top: -8rem;
  border-radius: 30px;
  padding: 3rem 0;
  background-color: var(--clr-accent-dark);
  justify-items: center;
}

.contact-form {
  max-width: 30em;
  width: 90%;
}

.form-group {
  margin-bottom: 1em;
}

.text-danger {
  color: rgb(255 186 186) !important;
}

@media (max-width: 900px) {
  .welcome-box {
    padding-top: 3rem;
  }
}

@media (max-width: 767px) {
  .welcome {
    height: 21rem;
  }

  .welcome-box {
    padding-top: 1rem;
    padding-right: 0;
  }

  .headshot {
    display: none;
  }
}