icon and text

<style>
    .product-block {
        margin-bottom: 25px;
        text-align: left;
    }

    .trustmarker_container {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .trustmarker_banner {
        background-color: #E6F0F8;
        display: flex;
        align-items: center;
        height: 93px;
        width: 100%;
        position: relative;
        padding: 0;
        border-radius: 4px;
    }

    .trustmarker_checkmark-container {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-inline: 20px;
        width: 100%;
    }

    .trustmarker_checkmark {
        margin-top: 5px;
        transform: scale(1);
    }

    svg:not(:root) {
        overflow: hidden;
    }

    .trustmarker_svg {
        width: 60px;
        height: 60px;
    }

    .trustmarker_text {
        display: flex;
        align-items: center;
        margin-left: 20px;
        font-family: 'Poppins';
        gap: 16px;
        text-align: left;
    }

    .trustmarker_percentage {
        font-size: 48px;
        font-family: 'Poppins';
        font-weight: 500;
        color: #1A1818;
    }

    .trustmarker_description {
        font-weight: 500;
        font-size: 18px;
        color: #1A1818;
        align-self: center;
        line-height: 27px;
        font-family: 'Poppins';
    }
</style>

<div class="product-block product-block--tab">
    <div class="trustmarker_container">
        <div class="trustmarker_banner">
            <div class="trustmarker_checkmark-container">
                <div class="trustmarker_checkmark">
                    <svg class="trustmarker_svg" viewBox="0 0 87 87" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="43.5" cy="43.5" r="40" stroke="black" stroke-width="7"></circle>
                        <path d="M23 45.5246L32.9067 55.6253C34.0603 56.8015 35.9465 56.8273 37.1319 55.6832L64 29.75"
                            stroke="black" stroke-width="7" stroke-linecap="round"></path>
                    </svg>
                </div>
                <div class="trustmarker_text">
                    <div class="trustmarker_percentage">77%</div>
                    <div class="trustmarker_description">Decrease in Joint Stiffness</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const percentageElement = document.querySelector('.trustmarker_percentage');
            const targetString = "77%";

            let processedTarget = targetString.trim();

            const numericMatch = processedTarget.match(/d+/);
            if (!numericMatch) {
                percentageElement.textContent = processedTarget.replace(/ /g, '');
                return;
            }

            const numericValue = parseInt(numericMatch[0]);

            const numStartPosition = processedTarget.indexOf(numericMatch[0]);

            const numLength = numericMatch[0].length;

            let prefix = processedTarget.substring(0, numStartPosition);
            let suffix = processedTarget.substring(numStartPosition + numLength);

            prefix = prefix.replace(/ /g, '');
            suffix = suffix.replace(/ /g, '');

            const duration = 1000;
            let startTime;

            function animateCounter(timestamp) {
                if (!startTime) startTime = timestamp;
                const elapsed = timestamp - startTime;
                const progress = Math.min(elapsed / duration, 1);
                const currentNumber = Math.floor(progress * numericValue);

                percentageElement.textContent = prefix + currentNumber + suffix;

                if (progress < 1) {
                    requestAnimationFrame(animateCounter);
                } else {
                    percentageElement.textContent = processedTarget.replace(/ /g, '');
                }
            }

            percentageElement.textContent = prefix + "0" + suffix;

            requestAnimationFrame(animateCounter);
        });
    </script>
</div>