.text-suggestion2 {
  color: #2bdab3;
}

.text-example {
  font-size: 1.2rem;
}

.text-desc {
  padding-right: 2rem;
  padding-left: 2rem;
  color: #2bdab3;
}
.img-subnav {
  width: 90% !important;
  height: auto;
}

.text-abs {
  position: absolute;
  left: 11%;
  top: 30%;
}
.text-abs1 {
  position: absolute;
  left: 25%;
  right: 25%;
  top: 30%;
}
.img-custom {
  width: 50%;
}

@media (max-width: 768px) {
  .img-custom {
    width: 100%;
  }
  .text-abs1 {
    left: 1%;
    right: 5%;
    top: 8%;
  }
}

@media screen and (max-width: 414px) {
  .text-desc {
    padding-bottom: 0rem !important;
  }
  .text-abs {
    font-size: 1.5em;
    left: 8%;
    top: 20%;
  }
}

@media screen and (min-width: 93.75rem) {
  .text-suggestion {
    padding: 6rem;
    font-size: 1.3rem;
  }
}
/* 500px */
@media screen and (max-width: 31.25rem) {
  .text-suggestion {
    padding: 1rem;
    height: 12.5rem;
    overflow: hidden;
  }
  .text-example {
    width: 100% !important;
    font-size: 1rem;
  }
  .text-desc {
    padding-bottom: 2rem;
  }
  .on-mobile {
    flex: none !important;
  }
}
/* 992px */
@media screen and (min-width: 93.75rem) {
  .text-suggestion2 {
    padding-left: 6rem;
    font-size: 1.1rem;
  }
  .text-example {
    width: 100%;
  }
}