@media only screen and (max-width: 576px) {
  .ellipse {
    height: 422px;
  }

  .hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .text-left {
    align-items: center;
  }

  .title-body {
    align-items: center;
  }

  .start-your-journey {
    font-size: clamp(
      2.5rem,
      -1.3076923076923075rem + 6.41025641025641vw,
      2.5rem
    );
  }

  .quis-nostrud-exercit {
    font-size: clamp(
      0.9rem,
      -1.3076923076923075rem + 6.41025641025641vw,
      0.9rem
    );
    line-height: 1.5rem;
  }

  .illus {
    width: 100%;
    height: 20rem;
  }

  .text-wrapper-10 {
    font-size: clamp(
      1.5rem,
      -1.3076923076923075rem + 6.41025641025641vw,
      1.5rem
    );
  }

  .list-card {
    gap: clamp(1rem, -1.3076923076923075rem + 6.41025641025641vw, 1rem);
  }

  .card-3 {
    width: 100%;
  }

  .card-4 {
    max-width: 100%;
  }

  .frame-7 {
    height: 30%;
    padding: 0.2rem 0.5rem;
    justify-content: center;
  }

  .frame-4 {
    gap: clamp(0.5rem, -1.3076923076923075rem + 6.41025641025641vw, 0.5rem);
  }

  .text-wrapper-11 {
    font-size: clamp(
      0.875rem,
      -1.3076923076923075rem + 6.41025641025641vw,
      0.875rem
    );
  }

  .frame-9 {
    padding: 0.2rem 0.5rem;
  }

  .section {
    flex-direction: column;
    padding-top: 3rem;
    padding-bottom: 3rem;
    gap: clamp(1rem, -1.3076923076923075rem + 6.41025641025641vw, 1rem);
  }

  .illustrasi {
    width: 15rem;
    height: 15rem;
  }

  .frame-12 {
    gap: clamp(1.5rem, -1.3076923076923075rem + 6.41025641025641vw, 1.5rem);
  }

  .text-wrapper-15 {
    font-size: clamp(
      1.5rem,
      -1.3076923076923075rem + 6.41025641025641vw,
      1.5rem
    );
  }

  .frame .button {
    align-items: center;
  }

  .frame .button-wrapper {
    padding: 0.125rem 0.25rem;
  }

  .frame .very-good {
    text-align: center;
  }

  .frame .span {
    text-align: center;
  }

  .frame .div-7 {
    align-items: center;
    margin-top: 1rem;
  }

  .frame .element-night {
    text-align: left;
  }

  .frame .text-wrapper-4 {
    text-align: center;
  }

  .frame .text-wrapper-5 {
    text-align: center;
  }

  .frame .div-8 {
    align-items: center;
  }

  .frame .style-layer-wrapper {
    align-items: center;
  }

  .frame .style-layer {
    width: 3rem;
    height: 2.5rem;
  }

  .frame .div-wrapper {
    width: 100%;
    align-items: center;
  }

  .frame .style-layer-2 {
    height: 2.5rem;
  }

  .frame2 .div {
    flex: none;
    width: 100%;
  }

  .frame2 .button {
    right: 1.2rem;
    bottom: 0.5rem;
  }

  .frame2 .style-layer {
    height: 2.5rem;
  }

  .frame3 {
    margin-top: 2rem;
  }

  .frame3 .linear {
    height: 0.03125rem;
  }

  .frame3 .div-3 {
    flex-direction: column;
    align-items: center;
  }

  .frame3 .frame-wrapper {
    width: 100%;
    padding: 1rem;
  }

  .frame3 .div-wrapper {
    width: 100%;
    padding: 1rem;
  }

  .frame3 .div-5 {
    width: 100%;
  }

  .frame3 .div-6 {
    width: 100%;
  }

  .frame3 .div-7 {
    width: 100%;
  }

  .frame3 .div-8 {
    width: 100%;
  }

  .frame3 .div-9 {
    flex-direction: column;
    align-items: flex-start;
  }

  .frame3 .div-10 {
    flex-direction: column;
    align-items: flex-start;
  }

  .frame3 .img {
    width: 100%;
    height: auto;
    border-radius: 0.25rem;
  }

  .frame3 .div-11 {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(1rem, -1.3076923076923075rem + 6.41025641025641vw, 1rem);
  }

  .frame3 .element-night {
    text-align: center;
  }

  .frame3 .span {
    text-align: center;
  }

  .frame3 .text-wrapper-6 {
    text-align: center;
  }

  .frame3 .button {
    width: 100%;
    align-items: center;
  }

  .frame3 .style-layer {
    padding: 0.5rem;
  }

  .frame3 .text-wrapper-7 {
    text-align: center;
  }

  .frame3 .style-layer-wrapper {
    align-items: center;
  }

  .frame3 .rectangle-2 {
    height: 15rem;
  }

  .frame3 .div-14 {
    align-items: center;
  }

  .frame3 .div-15 {
    flex-direction: column;
    gap: clamp(1.5rem, -1.3076923076923075rem + 6.41025641025641vw, 1.5rem);
  }

  .frame4 .div-2 {
    flex-direction: column;
    justify-content: inherit;
    gap: 1rem;
  }

  .frame4 .frame-wrapper {
    align-items: inherit;
  }

  .frame4 .element-night-wrapper {
    align-items: center;
  }

  .frame4 .div-4 {
    gap: 1rem;
  }

  .frame4 .download {
    width: 5rem;
    height: 5rem;
  }

  .frame4 .div-5 {
    align-items: inherit;
  }

  .frame4 .div-6 > svg {
    width: 2rem;
    height: 2rem;
  }

  .frame4 .div-7 {
    align-items: center;
  }

  .frame5 .div {
    gap: 1rem;
  }

  .frame5 .div-2 .img {
    width: 14rem;
    height: 8rem;
  }
}