feature-icons

Summary

Three-column band sitting on the cream --bg surface, each cell pairing a flaticon glyph in a circular accent badge with a short heading and a two-line description. The cards stagger in from the bottom via wow fadeInUp with .2s / .4s / .6s delays.

HTML structure (minimal)

<section class="feature-section section-padding fix section-bg">
  <div class="container">
    <div class="row g-4">
      <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" data-wow-delay=".2s">
        <div class="feature-card-items">
          <div class="icon"><i class="flaticon-support"></i></div>
          <div class="content">
            <h4>Best Client Support</h4>
            <p>Platea dictumst quisque sagittis purus sit amet volutpat.</p>
          </div>
        </div>
      </div>
      <!-- 2 more cards: flaticon-law / flaticon-solution -->
    </div>
  </div>
</section>

Key SCSS tokens

.feature-section.section-bg {
  background-color: var(--bg); /* cream #F9F7F3 */
  padding-block: 120px;
}
.feature-card-items {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 32px;
  background: var(--white);
  border-radius: 6px;
  transition: 0.4s;

  .icon {
    width: 70px; height: 70px;
    border-radius: 50%;
    background: var(--theme);
    color: var(--white);
    display: grid; place-items: center;
    font-size: 32px;
    flex-shrink: 0;
  }
  &:hover {
    transform: translateY(-6px);
    box-shadow: var(--box-shadow);
  }
}

Animation logic

// WOW.js scans for elements with `wow fadeInUp` and applies the keyframe
// when the element scrolls into view. Delay is read from `data-wow-delay`.
new WOW().init();

Notable details

• Uses a custom flacticon.css icon font (note the typo — keep it) instead of Font Awesome for the service glyphs, so service-specific iconography (flaticon-law, flaticon-prisoner) stays distinct from social/UI icons.
• The card hover is a single translateY(-6px) plus shadow — a minimal but effective lift.
• g-4 Bootstrap gutter gives 1.5rem horizontal/vertical spacing without custom margins.

Use when

• "Why us" three-pillar bands on professional-services sites.
• Anywhere you need icon-led teasers without an additional photo column.

Caveats

• The flaticon glyph names are tied to the bundled font; missing/renaming the font breaks the icons silently. List flacticon.css as required on copy.