.hero-banner {
  border: ;
  font-size: ;
  padding: ;
  background-color: ;
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 768px) {
  .hero-banner {
    flex-direction: row;
    border: ;
    font-size: ;
    padding: 1.79rem;
    background-color: #f8f8f8;
    height: 15.09rem;
  }
}

.hero-banner__content {
  border: ;
  padding: var(--font-24);
  background-color: #f8f8f8;
  position: relative;
  height: 18.5rem;
}
@media screen and (min-width: 768px) {
  .hero-banner__content {
    padding: 0;
    height: auto;
    z-index: 1;
  }
}

.hero-banner__title {
  margin-bottom: ;
  color: var(--brandClr);
  font-size: var(--font-24);
  line-height: 1.4;
  font-weight: 700;
  width: 14.13rem;
}
@media screen and (min-width: 768px) {
  .hero-banner__title {
    width: 11.86rem;
    line-height: 1.3;
    font-size: 0.905rem;
  }
}

.hero-banner__features {
  list-style: ;
  padding: ;
  margin: 0.6rem 0;
  width: 9.31rem;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .hero-banner__features {
    /* width: 8.07rem; */
    line-height: 1.3;
  }
}
.hero-banner__features li {
  display: ;
  align-items: ;
  margin-bottom: ;
  font-size: var(--font-16);
  font-weight: 500;
  line-height: 1.3;
  display: flex;
  margin-top: var(--font-12);
}
@media screen and (min-width: 768px) {
  .hero-banner__features li {
    font-size: var(--font-lg-24);
    margin-top: 0.698rem;
  }
}

.hero-banner__point {
  width: var(--font-16);
  height: var(--font-16);
  background-color: var(--brandLightClr);
  border-radius: 0.4rem 0;
  flex-shrink: 0;
  margin-right: 0.5rem;
  margin-top: 0.25rem;
}
@media screen and (min-width: 768px) {
  .hero-banner__point {
    width: var(--font-lg-24);
    height: var(--font-lg-24);
    border-radius: 0.25rem 0;
    margin-top: 0.1rem;
  }
}

.hero-banner__feature-item {
  font-size: ;
  color: ;
  line-height: ;
}

.hero-banner__doctor-img {
  width: 12.54rem;
  height: 14.36rem;
  /* border: 1px solid red; */
  position: absolute;
  bottom: 0rem;
  right: 0rem;
}
.hero-banner__doctor-img-lg {
  display: none;
}
@media screen and (min-width: 768px) {
  .hero-banner__doctor-img {
    display: none;
  }
  .hero-banner__doctor-img-lg {
    display: block;
    width: 18.15rem;
    height: 13.56rem;
    /* border: 1px solid red; */
    position: absolute;
    bottom: -1.8rem;
    right: -13rem;
  }
}

.hero-banner__form {
  border: ;
  font-size: ;
  padding: var(--font-12);
  box-shadow: ;
  border-radius: 0.363rem;
  margin: var(--font-16);
  box-shadow: 0px 2px 8px 0px #00000026;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .hero-banner__form {
    width: 10.94rem;
    height: 12.45rem;
    padding: var(--font-lg-24);
    margin-left: auto;
    margin-top: 0;
    margin-right: -1rem;
    z-index: 11;
  }
}

.hero-banner__form-heading {
  font-size: var(--font-24);
  font-weight: 700;
  line-height: 100%;
  color: var(--brandClr);
  margin-bottom: ;
}

@media screen and (min-width: 768px) {
  .hero-banner__form-heading {
    font-size: var(--font-lg-36);
    font-weight: 700;
  }
}

.hero-banner__form p {
  margin-bottom: 1rem;
  color: #242424cc;
  font-size: var(--font-14);
}
@media screen and (min-width: 768px) {
  .hero-banner__form p {
    font-size: var(--font-lg-20);
    margin-bottom: 0.6rem;
  }
}

.hero-banner__input {
  display: ;
  width: ;
  height: 2.45rem;
  padding: 0 0.5rem;
  margin-bottom: var(--font-16);
  font-size: ;
  border: 0.045rem solid #74747466;
  border-radius: 0.181rem;
  align-self: stretch;
  outline: none;
}
@media screen and (min-width: 768px) {
  .hero-banner__input {
    height: 1.2rem;
    flex-shrink: 0;
    margin-bottom: var(--font-lg-24);
  }
}

.hero-banner__input.message {
  height: 5.45rem;
  color: black;
  padding: .5rem;
}
@media screen and (min-width: 768px) {
  .hero-banner__input.message {
    height: 3.39rem;
    color: black;
  }
}

.hero-banner__submit-btn {
  background-color: var(--brandClr);
  color: white;
  border: 0;
  padding: ;
  font-size: ;
  cursor: ;
  border-radius: 2.18rem;
  transition: ;
  width: 10.77rem;
  height: 2.18rem;
  margin-top: 0.5rem;
}
@media screen and (min-width: 768px) {
  .hero-banner__submit-btn {
    width: 7.16rem;
    height: 1.32rem;
    font-size: var(--font-lg-24);
    margin-top: 0.6rem;
  }
}

.hero-banner__submit-btn:hover {
  background-color: ;
}

/* Next */

.stats-banner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: var(--brandClr);
  padding: ;
  border: white;
  height: 4.54rem;
  color: white;
}

.stats-banner__item {
  text-align: ;
  padding: ;
  border-right: 1px solid white; /* optional divider */
  padding: 0 1rem;
  line-height: 1.3;
}
@media screen and (min-width: 768px) {
  .stats-banner__item {
    padding: 0 4rem;
  }
}

.stats-banner__item:last-child {
  border-right: none;
}

.stats-banner__number {
  font-size: 1.63rem;
  font-weight: 500;
  color: ;
  margin-bottom: ;
}
@media screen and (min-width: 768px) {
  .stats-banner__number {
    font-size: 1.509rem;
  }
}

.stats-banner__label {
  font-size: 0.454rem;
  color: ;
  line-height: ;
  margin-top: -0.25rem;
}
@media screen and (min-width: 768px) {
  .stats-banner__label {
    font-size: var(--font-lg-24);
    font-weight: 600;
  }
}