image and text

<style>
  .stylobug-section {
    width: 100%;
    padding: 60px 00px;
    background: #fff;
    box-sizing: border-box;
  }

  .stylobug-wrapper {
    max-width: 1505px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
  }

  .stylobug-image {
    flex: 1.2;
  }

  .stylobug-image img {
    width: 100%;
    border-radius: 20px;
    display: block;
    object-fit: cover;
  }

  .stylobug-content {
    flex: 1;
    text-align: center;
  }

  .stylobug-content h2 {
    font-size: 35px;
    font-weight: 700;
    line-height: 1.2;
    color: #101010;
    margin-bottom: 28px;
    font-family: Nunito, sans-serif;
    font-style: normal;
    letter-spacing: normal;
  }

  .stylobug-content h2 span {
    color: #ff3aa3;
  }

  .stylobug-content p {
    font-size: 16px;
    line-height: 24px;
    color: #101010;
    max-width: 445px;
    margin: auto;
    font-family: sans-serif;
    font-weight: 400;
    letter-spacing: normal;
  }

  .stylobug-section .section-image-overlay {
    width: 6%;
    /* top: 5%; */
    left: 9%;
  }

  .section-image-overlay.ambient {
    animation: animateAmbientOverlay 9s ease-in-out infinite;
  }

  .section-image-overlay {
    position: absolute;
    object-fit: contain;
    height: auto;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
  }

  .stylobug-section .section-image-overlay.overlay-2 {
    width: 7%;
    /* top: 79%; */
    left: 1%;
  }

  @keyframes animateAmbientOverlay {
    0% {
      transform: translate(-50%, -50%) scale(1) rotate(0);
    }

    25% {
      transform: translate(-45%, -55%) scale(.96) rotate(-4deg);
    }

    50% {
      transform: translate(-55%, -45%) scale(1.03) rotate(4deg);
    }

    75% {
      transform: translate(-45%, -55%) scale(.96) rotate(-4deg);
    }

    100% {
      transform: translate(-50%, -50%) scale(1) rotate(0);
    }
  }

  /* Tablet */
  @media screen and (max-width: 1024px) {
    .stylobug-wrapper {
      gap: 40px;
    }

    .stylobug-content h2 {
      font-size: 42px;
    }

    .stylobug-content p {
      font-size: 22px;
    }
  }

  /* Mobile */
  @media screen and (max-width: 768px) {
    .stylobug-section {
      padding: 40px 0px;
    }

    .stylobug-wrapper {
      flex-direction: column;
      gap: 30px;
    }

    .stylobug-content {
      text-align: center;
    }

    .stylobug-content h2 {
      font-size: 28px;
      margin-bottom: 18px;
    }

    .stylobug-content p {
      font-size: 16px;
      line-height: 1.6;
    }

    .stylobug-image img {
      border-radius: 18px;
    }

    .stylobug-section .section-image-overlay {
      width: 15%;
      /* top: 3%; */
      left: 7%;
    }

    .stylobug-section .section-image-overlay.overlay-2 {
      width: 10%;
      /* top: 93%; */
      left: 1%;
    }
  }
</style>

<div class="stylobug-section">
  <img
    src="https://cdn.shopify.com/s/files/1/0743/8175/4566/files/a0a0f0e2-a4ec-4597-8baa-0b477e431e44.png?v=1779342728&width=188"
    alt="background shape" width="188" height="188" loading="lazy" sizes="(min-width: 1600px) 100vw,
  (min-width: 750px) calc(100vw - 130px), calc(100vw - 50px)" class="section-image-overlay ambient">

  <div class="stylobug-wrapper">

    <div class="stylobug-image">
      <img src="https://cdn.shopify.com/s/files/1/0743/8175/4566/files/middle_banner.png?v=1779342750"
        alt="StyloBug Shark Tank">
    </div>

    <div class="stylobug-content">
      <h2>
        Pitched. Praised. <span>Kidsy Clothing.</span>
      </h2>

      <p>
        Kidsy Clothing was featured on Shark Tank India, where we shared our vision of stylish,
        comfortable, and affordable kidswear with India’s top entrepreneurs.
        This milestone reflects our focus on quality, thoughtful design, and happy little wearers.
      </p>
    </div>

  </div>

  <img
    src="https://cdn.shopify.com/s/files/1/0743/8175/4566/files/07ce868f-32d3-43c3-ad4d-ee919d4d2236.png?v=1779342729&width=188"
    alt="background shape" width="188" height="188" loading="lazy" sizes="(min-width: 1600px) 100vw,
  (min-width: 750px) calc(100vw - 130px), calc(100vw - 50px)" class="section-image-overlay overlay-2 ambient">
</div>