#hero-tentangKami {
  /* background-color: var(--primary-color); */
  color: white;
  margin-top: 60.42px;
  padding: 24px 0 24px 0;
  background-image: url("/img/Banner Tentang Kami.png");
}

#hero-tentangKami .tagline {
  font-size: var(--font-size-seminormal-1);
}

#hero-tentangKami .tagar {
  font-size: var(--font-size-normal-2);
}

#apa-itu-boonda,
#tentang-boonda,
#visi-misi,
#apa-kata-mereka,
#benefit,
#fitur {
  padding: 16px 0;
}

#apa-itu-boonda .sub-title,
#tentang-boonda .sub-title,
#visi-misi .sub-title,
#apa-kata-mereka .sub-title,
#benefit .sub-title,
#fitur .sub-title {
  margin-bottom: 10px;
}

#apa-itu-boonda .media-img img {
  width: 100%;
  height: 100%;
}

#apa-itu-boonda .title-apa-itu-boonda {
  font-size: var(--font-size-seminormal-1);
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 24px;
}

#apa-itu-boonda p {
  margin: 0;
  font-size: var(--font-size-small-2);
}

#visi-misi .visi,
#visi-misi .misi {
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-normal-2);
  margin-bottom: 10px;
}

.visi .title,
.misi .title {
  font-size: var(--font-size-normal-2);
  font-weight: var(--font-weight-very-bold);
  color: var(--primary-color);
  margin: 0;
}

/* visi misi */
.container-review {
  background-color: var(--primary-color);
  border-radius: 12px;
  padding: 40px 32px;
  color: white;
  text-align: start;
  margin-top: 10px;
}

.container-review .tagline {
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-seminormal-1);
  text-align: start;
  margin-bottom: 8px;
}

.container-review .tagline-2 {
  font-weight: var(--font-weight-bold);
  font-size: 32px;
  margin-bottom: 8px;
}

.logo-boonda-biru {
  background-color: white;
  border-radius: 12px;
  width: 168px;
  height: auto;
  padding: 8px;
  margin-bottom: 20px;
}

.logo-boonda-biru img {
  width: 100%;
}

.container-review .text {
  font-size: var(--font-size-normal-2);
  font-weight: var(--font-weight-normal);
}

.app-store {
  margin: 20px 0;
}

.container-review .review {
  font-size: var(--font-size-normal-2);
}

.container-review .point {
  font-size: 32px;
}

.from {
  font-weight: var(--font-weight-seminormal);
  margin: 8px 0;
}

.star span {
  fill: white;
}

#tentang-boonda .container-content {
  display: grid;
  grid-template-columns: auto;
}

#tentang-boonda .shape-square {
  width: 100%;
  padding: 24px 16px;
  /* margin-right: 16px; */
  margin: 8px 0;
}

.img-tentang {
  width: 100%;
  display: flex;
  justify-content: center;
}

#tentang-boonda .circle {
  width: 120px;
  height: 120px;
}

#tentang-boonda .title {
  font-size: var(--font-size-normal-2);
  font-weight: var(--font-weight-very-bold);
  color: var(--text-color);
  text-align: center;
  margin: 24px 0 8px 0;
}

#tentang-boonda ul {
  color: var(--gray-1);
  padding-left: 16px;
  font-size: var(--font-size-normal-1);
}

.list-kata-mereka ul {
  overflow: auto;
}

.list-kata-mereka ul::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.list-kata-mereka li {
  margin: 0 10px;
}

.list-kata-mereka .shape-square {
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 1px;
  display: grid;
  grid-template-columns: 3fr auto;
  grid-column-gap: 16px;
}

.list-kata-mereka .media-logo {
  grid-row: 1;
  grid-column: 1;
}

.list-kata-mereka .circle {
  width: 72px;
  height: 72px;
  background-color: transparent;
}

.media-logo img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  object-fit: scale-down;
}

.list-kata-mereka .container-kata-mereka {
  grid-row: 1;
  grid-column: 2;
}

.list-kata-mereka .kata-reviewer {
  font-size: var(--font-size-normal-2);
  font-weight: var(--font-weight-seminormal);
}

.list-kata-mereka .pemilik {
  font-weight: var(--font-weight-bold);
  margin-top: 16px;
}

.lihat-semua-ulasan button {
  background-color: white;
  outline: #79747e;
  border: solid 1px #79747e;
  border-radius: 100px;
  padding: 10px 24px 10px 24px;
}

.lihat-semua-ulasan p {
  color: var(--primary-color);
}

#fitur ul li {
  margin-top: 16px;
}

@media screen and (min-width: 768px) {
  body {
    font-size: var(--font-size-normal-1);
  }

  #apa-itu-boonda,
  #tentang-boonda,
  #visi-misi,
  #apa-kata-mereka,
  #benefit,
  #fitur {
    padding: 32px 0;
  }

  #apa-itu-boonda .sub-title,
  #tentang-boonda .sub-title,
  #visi-misi .sub-title,
  #apa-kata-mereka .sub-title,
  #benefit .sub-title,
  #fitur .sub-title {
    margin-bottom: 20px;
  }

  #apa-itu-boonda {
    display: grid;
    grid-template-columns: 6fr 6fr;
    grid-column-gap: 36px;
  }

  .sub-title {
    grid-row: 1;
    grid-column: 1 / span 2;
  }

  .media-img {
    grid-row: 2;
    grid-column: 1;
  }

  .container-text {
    grid-row: 2;
    grid-column: 2;
  }

  #apa-itu-boonda .penjelasan p {
    font-size: var(--font-size-normal-1);
  }

  #tentang-boonda .container-content {
    display: flex;
    justify-content: space-between;
  }

  #tentang-boonda .shape-square {
    margin: 0 8px;
  }

  #tentang-boonda li {
    font-size: var(--font-size-normal-1);
  }

  #visi-misi {
    display: grid;
    grid-template-columns: 6fr 6fr;
    grid-column-gap: 36px;
  }

  .container-review {
    grid-row: 2 / span 3;
    grid-column: 2;
    margin-top: 0;
  }

  .visi {
    grid-row: 2;
    grid-column: 1;
  }

  .misi {
    grid-row: 3;
    grid-column: 1;
  }

  #tentang-boonda .container-tentang {
    height: auto;
  }

  #benefit ul {
    display: grid;
    grid-template-columns: 6fr 6fr;
    grid-column-gap: 36px;
  }

  #fitur {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 36px;
  }

  #fitur .img-fitur {
    margin-top: 0;
  }
}