navy-practice-areas

Summary

Navy-on-navy practice-area block: a heading and CTA on the left, then a 2x3 grid of services on the right where each tile has a floating white-icon square positioned absolutely to the left of its title.

HTML structure (minimal)

<section class="bg-color text-light section-dark">
  <div class="container">
    <div class="row g-4">
      <div class="col-lg-4">
        <div class="relative h-100">
          <div class="subtitle text-light mb-3 wow fadeInUp">Practice Area</div>
          <h2 class="wow fadeInUp" data-wow-delay=".2s">Experienced Lawyers Protecting Your Rights</h2>
          <div class="abs bottom-0">
            <a href="practice-areas-1.html" class="btn-main bg-color-2 fx-slide">
              <span>All Practice Area</span>
            </a>
          </div>
        </div>
      </div>
      <div class="col-lg-8">
        <div class="row g-4">
          <div class="col-md-6 wow fadeInRight" data-wow-delay=".4s">
            <div class="relative">
              <img src="images/icons-white/1.png" class="w-80px abs overlay-white-2 p-10 rounded-10" alt="">
              <div class="ms-100px">
                <h3>Personal Injury</h3>
                <p>Representing victims in accident claims, negligence cases...</p>
              </div>
            </div>
          </div>
          <!-- 5 more practice tiles, delays .5s → .9s -->
        </div>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

section.bg-color { background: var(--primary-color); }     /* navy */
.btn-main.bg-color-2 { background: var(--secondary-color); color: #fff; }
.btn-main.fx-slide { position: relative; overflow: hidden; }
.btn-main.fx-slide::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,.15);
  transform: translateX(-100%);
  transition: transform .4s ease;
}
.btn-main.fx-slide:hover::before { transform: translateX(0); }
.w-80px { width: 80px; }
.abs { position: absolute; }
.overlay-white-2 { background: rgba(255,255,255,.1); }
.p-10 { padding: 10px; }
.rounded-10 { border-radius: 10px; }
.ms-100px { margin-left: 100px; }                          /* clears the absolute icon */

Notable details

• Icons are position: absolute inside a .relative parent, and the text is offset with ms-100px to clear them — cleaner than flex with align-items because the icon's vertical position can be tweaked independently.
• The 6 tiles use sequential data-wow-delay (.4s through .9s) so they cascade in left-to-right, top-to-bottom — choreography via attributes, no JS.
• The CTA uses fx-slide: a translateX overlay slides in on hover, layering motion onto an otherwise static gold pill.

Use when

• A service grid that should feel substantial and rooted in the brand color, not a light cards-on-white pattern.
• Sections that pair a single column of brand messaging with a denser service list.

Caveats

• Heavy reliance on id-color / bg-color / bg-color-2 utilities tied to CSS variables — porting requires bringing the variable system along.
• ms-100px is a fixed offset that breaks if you change icon size; convert to flex if icons might vary.