Add the !important all the places with the var() attribute:

<section id="l4l-pickup-delivery-how-it-works" class="px-3 py-4">
    <div class="container mt-5 l4l-container">
        <div class="text-center mb-2">
            <h2 class="display-5">How It Works</h2>
        </div>
        <div class="row">
            <div class="col-md-4 d-flex flex-column align-items-start p-3">
                <div class="cmg-bg-secondary rounded p-4 d-flex flex-column h-100">
                    <div class="d-flex justify-content-center align-items-center border rounded-circle bg-light" style="width: 100px; height: 100px; font-size: 24px; font-weight: bold; border: 4px solid var(--cmg-primary) !important;">
                        <span class="cmg-text-primary">1</span>
                    </div>
                    <h5 class="mt-3">Tap the “Schedule Pick Up” button to get started!</h5>
                </div>
            </div>

            <div class="col-md-4 d-flex flex-column align-items-start p-3">
                <div class="cmg-bg-secondary rounded p-4 d-flex flex-column h-100">
                    <div class="d-flex justify-content-center align-items-center border rounded-circle bg-light" style="width: 100px; height: 100px; font-size: 24px; font-weight: bold; border: 4px solid var(--cmg-primary);">
                        <span class="cmg-text-primary">2</span>
                    </div>
                    <h5 class="mt-3">Our driver will send you a text when he is en route at the time you schedule</h5>
                </div>
            </div>

            <div class="col-md-4 d-flex flex-column align-items-start p-3">
                <div class="cmg-bg-secondary rounded p-4 d-flex flex-column h-100">
                    <div class="d-flex justify-content-center align-items-center border rounded-circle bg-light" style="width: 100px; height: 100px; font-size: 24px; font-weight: bold; border: 4px solid var(--cmg-primary);">
                        <span class="cmg-text-primary">3</span>
                    </div>
                    <h5 class="mt-3">Our attendants will weigh, prep, and process your items to your specifications</h5>
                </div>
            </div>

            <div class="col-md-4 d-flex flex-column align-items-start p-3">
                <div class="cmg-bg-secondary rounded p-4 d-flex flex-column h-100">
                    <div class="d-flex justify-content-center align-items-center border rounded-circle bg-light" style="width: 100px; height: 100px; font-size: 24px; font-weight: bold; border: 4px solid var(--cmg-primary);">
                        <span class="cmg-text-primary">4</span>
                    </div>
                    <h5 class="mt-3">Once cleaned, folded, and packaged, our driver will notify you via text when he is en route</h5>
                </div>
            </div>

            <div class="col-md-4 d-flex flex-column align-items-start p-3">
                <div class="cmg-bg-secondary rounded p-4 d-flex flex-column h-100">
                    <div class="d-flex justify-content-center align-items-center border rounded-circle bg-light" style="width: 100px; height: 100px; font-size: 24px; font-weight: bold; border: 4px solid var(--cmg-primary);">
                        <span class="cmg-text-primary">5</span>
                    </div>
                    <h5 class="mt-3">Your laundry will be delivered back to you at the allotted time</h5>
                </div>
            </div>

            <div class="col-md-4 d-flex flex-column align-items-start p-3">
                <div class="cmg-bg-secondary rounded p-4 d-flex flex-column h-100">
                    <div class="d-flex justify-content-center align-items-center border rounded-circle bg-light" style="width: 100px; height: 100px; font-size: 24px; font-weight: bold; border: 4px solid var(--cmg-primary);">
                        <span class="cmg-text-primary">6</span>
                    </div>
                    <h5 class="mt-3">The fastest and most convenient way you’ve ever done laundry</h5>
                </div>
            </div>
        </div>
    </div>
</section>