why-choose-us

Summary

Split section combining bullet-style supporting features on the left (icon + heading + microcopy rows) with a portrait photograph and stacked 30+ years funfact crest on the right.

HTML structure (minimal)

<section class="why_chose_wrapper section-bottom">
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <div class="single_chose_us wow fadeInLeft" data-wow-duration="1s">
          <div class="section-title">
            <h6><img src="bage_head.svg" alt="">About Us</h6>
            <h2>We're very experienced in professional Law solutions…</h2>
          </div>
          <p>Lorem ipsum…</p>
          <div class="single_support d-flex align-items-center">
            <div class="icon"><img src="layer.svg" alt=""></div>
            <div class="content"><h5>Knowledgeable Attorneys</h5><p>Lorem ipsum…</p></div>
          </div>
          <div class="single_support d-flex align-items-center">
            <div class="icon"><img src="money.svg" alt=""></div>
            <div class="content"><h5>Affordable Fees</h5><p>Exercitation ullamco laboris…</p></div>
          </div>
          <div class="single_support d-flex align-items-center">
            <div class="icon"><img src="time.svg" alt=""></div>
            <div class="content"><h5>Quick & Positive Result</h5><p>Consectetur adipiscing elit…</p></div>
          </div>
        </div>
      </div>
      <div class="col-lg-6 pl-60 wow fadeInRight" data-wow-duration="1s">
        <div class="single_chose_us position-relative">
          <div class="single_right bg-center bg-cover" style="background-image: url(about_570x550.jpg)">
            <div class="box"></div>
          </div>
          <div class="single_funfact">
            <div class="single_funfact_items text-center">
              <h1><span class="counter">30</span><sub>+</sub></h1>
              <h3>Years <br>of Experience</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

.why_chose_wrapper {
  .single_support {
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(34,33,39,0.08);
    .icon {
      width: 56px; height: 56px;
      border-radius: 6px;
      background: #ebe6e3;
      display: grid; place-items: center;
      img { width: 28px; }
    }
    h5 { font-family: 'Crimson Pro', serif; color: #222127; }
  }

  .single_right {
    aspect-ratio: 570/500;
    border-radius: 4px;
    overflow: hidden;
  }
  .single_funfact {
    position: absolute;
    left: -40px; bottom: 40px;
    background: #c8242f;
    color: #fff;
    padding: 28px 36px;
    border-radius: 4px;
    h1 { font-family: 'Crimson Pro', serif; font-size: 80px; line-height: 1; color: #fff; }
    h3 { font-family: 'Crimson Pro', serif; color: #fff; font-size: 18px; }
  }
}

Animation logic

new WOW().init(); // fadeInLeft / fadeInRight on each column
$('.counter').counterUp({ delay: 10, time: 3000 });

Notable details

• Three .single_support rows act as a vertical "feature-list" — a hybrid between checkmark bullets and full feature cards.
• The 30+ funfact crest hangs off the left edge of the image, tying it visually to the bullet column.
• Each row uses a softly tinted square icon container (#ebe6e3) so the SVGs don't have to ship background paths.

Use when

• Mid-page "why us" section that needs to balance copy density with imagery.
• Brand wants a single highlighted stat to anchor the photo without a full counter row.
• Layouts that intentionally avoid checkmark icons.

Caveats

• Negative left on .single_funfact can cause horizontal overflow at tablet widths if the row container isn't overflow: hidden.
• Image and bullet column heights must stay close, otherwise the funfact crest floats away from the photo.