.hero-section {
  margin: 0 !important;
  padding: 10rem 0 !important;
  /* border: 1px solid red; */
  background-image: url("../img/bg/bg-facebook.webp");
  color: white !important;
}

.hero-title .label {
  width: 35% !important;
}

.title-wrapper h1 {
  font-weight: 700 !important;
  color: white !important;
  letter-spacing: normal;
}

.title-wrapper p {
  color: rgba(255, 255, 255, 0.856) !important;
  letter-spacing: normal;
}

.label {
  width: 10% !important;
  border: 1px solid rgba(255, 255, 255, 0.295);
}

.label2 {
  width: 33% !important;
}

.content-manfaat2 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2rem !important;
  padding: 0;
  /* margin-top: 2rem !important; */
  /* border: 1px solid red; */
}

.manfaat-item-desc {
  width: 75% !important;
}

.manfaat-item2 {
  padding: 0;
  border-radius: 0;
  border: none !important;
  width: 47% !important;
  /* border: 1px solid green; */
  flex-direction: row;
  font-size: 17px !important;
  /* border: 1px solid red !important; */
  align-items: center;
}

.manfaat-item2 h3 {
  /* border: 1px solid green; */
  width: 100% !important;
  font-size: 15px !important;
}

.manfaat-wrapper {
  /* width: 30% !important; */
  display: flex !important  ;
  justify-content: center !important;
  align-items: center;
  aspect-ratio: 1/1 !important;
  /* border: 1px solid red; */
}

.manfaat-wrapper2 {
  /* border: 1px solid green; */
  width: 16% !important;
}

.manfaat-wrapper2 img {
  width: 100% !important;
  aspect-ratio: 1/1 !important;
}

.manfaat-section2 {
  display: flex;
  flex-direction: row !important;
  /* border: 1px solid blue; */
}

.title-manfaat {
  /* border: 1px solid green; */
}

.manfaat-section .title-manfaat2 h2 {
  width: 80% !important;
}

.manfaat-section .title-manfaat2 p {
  width: 80% !important;
}

.desc-manfaat {
  align-items: flex-start;
}

.kenapa {
  align-items: center;
}

.desc-manfaat2 p {
  margin-top: 1rem !important;
  font-size: 16px !important;
  color: rgba(0, 0, 0, 0.7) !important;
  text-align: left;
  /* border: 1px solid red; */
}

.container2 {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between;
}

.container2 .gap-4.w-55 {
  width: 60% !important;
}

.banner-section {
}

.promo {
  padding: 4rem 2rem;
  user-select: none;
}

.bn2 {
  display: none;
}

/* MOBILE: keep bootstrap default behavior (no hover open), remove any rotate */
@media (max-width: 1199px) {
  .manfaat-section .title-manfaat h2 {
    width: 70% !important;
  }

  .manfaat-section .title-manfaat p {
    width: 60% !important;
  }

  .hero-title .label {
    width: 45% !important;
  }
}

/* MOBILE: keep bootstrap default behavior (no hover open), remove any rotate */
@media (max-width: 991px) {
  .container2 {
    display: flex !important;
    flex-direction: column !important;
  }

  .container2 .w-55 {
    width: 100% !important;
  }

  .container2 .w-30 {
    margin: 0 auto !important;
    width: 70% !important;
  }

  .hero-title.w-55 {
    width: 80% !important;
  }

  .title-wrapper2 {
    width: 100% !important;
    /* border: 1px solid red !important; */
  }

  .title-wrapper2 h1 {
    font-size: 35px !important;
  }

  .d-mobile {
    display: none;
  }

  .container2 .gap-4.w-55 {
    width: 100% !important;
  }
}

/* MOBILE: keep bootstrap default behavior (no hover open), remove any rotate */
@media (max-width: 757px) {
  .manfaat-item2 {
    width: 80% !important;
  }

  .manfaat-wrapper2 {
    width: 15% !important;
  }

  .manfaat-section2 .title-manfaat2 p {
    width: 100% !important;
  }

  .manfaat-section .title-manfaat h2 {
    width: 80% !important;
  }

  .manfaat-section .title-manfaat p {
    width: 80% !important;
  }
}

/* MOBILE: keep bootstrap default behavior (no hover open), remove any rotate */
@media (max-width: 575px) {
  .container2 {
    padding: 1rem 2rem !important;
    display: flex !important;
    flex-direction: column !important;
  }
}

/* MOBILE: keep bootstrap default behavior (no hover open), remove any rotate */
@media (max-width: 530px) {
  .manfaat-section .title-manfaat2 {
    justify-content: center !important;
  }

  .desc-manfaat2 {
    align-items: center !important;
  }

  .manfaat-wrapper2 {
    width: 15% !important;
  }

  .manfaat-item2 {
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .manfaat-section .title-manfaat2 h2 {
    width: 100% !important;
  }

  .content-manfaat2 {
    justify-content: center !important;
    align-items: center !important;
  }

  .desc-manfaat2 p {
    margin-top: 1rem !important;
    font-size: 16px !important;
    color: rgba(0, 0, 0, 0.7) !important;
    text-align: left;
    /* border: 1px solid red; */
  }

  .button-wrapper2 {
    flex-direction: row !important;
  }

  .manfaat-item-desc {
    text-align: left !important;
  }

  .label2 {
    width: 50% !important;
  }

  .bn1 {
    display: none;
  }

  .bn2 {
    display: block;
  }

  .promo {
    padding: 4rem 1rem;
  }

  .hero-title .label {
    width: 47% !important;
  }
}

/* MOBILE: keep bootstrap default behavior (no hover open), remove any rotate */
@media (max-width: 500px) {
  .button-wrapper2 {
    flex-direction: column !important;
    justify-content: center;
  }

  .button-wrapper2 .w-50 {
    width: 100% !important;
  }

  .hero-title.w-55 {
    width: 90% !important;
  }

  .hero-title .label {
    width: 47% !important;
  }
}

/* MOBILE: keep bootstrap default behavior (no hover open), remove any rotate */
@media (max-width: 465px) {
  .hero-title .label {
    width: 55% !important;
  }
}

/* MOBILE: keep bootstrap default behavior (no hover open), remove any rotate */
@media (max-width: 430px) {
  .button-wrapper2 {
    flex-direction: column !important;
  }

  .button-wrapper2 a {
    width: 100% !important;
    margin-bottom: 1rem !important;
  }

  .title-wrapper2 h1 {
    font-size: 30px !important;
  }

  .label2 {
    width: 50% !important;
  }

  .manfaat-wrapper2 {
    width: 20% !important;
  }

  .hero-title .label {
    width: 60% !important;
  }
}

/* MOBILE: keep bootstrap default behavior (no hover open), remove any rotate */
@media (max-width: 380px) {
  .button-wrapper2 {
    flex-direction: column !important;
  }

  .button-wrapper2 a {
    width: 100% !important;
    margin-bottom: 1rem !important;
  }

  .label2 {
    width: 60% !important;
  }

  .manfaat-wrapper2 {
    width: 20% !important;
  }

  .hero-title .label {
    width: 66% !important;
  }
}