Untitled

<style>
.eg-overview-container {
    padding: 0 30px 30px;
}

.eg-overview-wrapper {
    width: 100%;
    max-width: 1170px;
    margin-inline: auto;
}

.eg-callouts-container {
    display: flex;
    gap: 20px;
}

.eg-callouts img {
    width: 56px;
    height: 56px;
    display: block;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

.eg-callouts {
    position: relative;
    border: 2px solid #e1efff;
    padding: 0 16px 16px 16px;
    background: rgb(153 204 238 / 14%);
    flex:1;
}

.eg-callouts .eg-title {
    font-weight: 600;
    font-size: 20px;
    margin: 38px 0 8px 0;
}

.eg-callouts .eg-info {
    font-size: 15px;
    line-height: 1.5;
}

.eg-callouts a svg {
    width: 9px;
    fill: #1f3d5c;
    height: 9px;
}

.eg-callouts a {
    font-size: 13px;
    display: flex;
    align-items: center;
    margin-block: 7px;
    justify-content: flex-end;
    gap: 5px;
    color: #1f3d5c;
    font-weight: 600;
    letter-spacing: 0.4px;
}


.eg-callouts::before {
    content: '';
    position: absolute;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: white;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

.eg-overview-wrapper>.eg-heading {
    font-size: 30px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 40px;
}

@media(max-width: 1099px) {
    .eg-callouts {
        flex-basis: 46%;
    }

    .eg-callouts-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 36px;
    }
}

@media(max-width: 767px) {
    .eg-callouts {
        flex-basis: 100%;
        max-width: 500px;
    }

    .eg-callouts-container {
        gap: 50px;
    }

    .eg-overview-wrapper>.eg-heading {
        margin-bottom: 50px;
    }
}
</style>

(function() {
    try {
        /* main variables */
        var debug = 0;
        var variation_name = "";

        /* all Pure helper functions */


        // selector would be the parent div where your are changing css/js
        function waitForElement(selector, trigger, delayInterval, delayTimeout) {
            var interval = setInterval(function() {
                if (
                    document &&
                    document.querySelector(selector) &&
                    document.querySelectorAll(selector).length > 0
                ) {
                    clearInterval(interval);
                    trigger();
                }
            }, delayInterval);
            setTimeout(function() {
                clearInterval(interval);
            }, delayTimeout);
        }

        let egGreaterthanSvg = `<svg aria-hidden="true" focusable="false" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                             width="103.536px" height="103.536px" viewBox="0 0 103.536 103.536" style="enable-background:new 0 0 103.536 103.536;"
                                             xml:space="preserve">
                                                <path d="M0.65,91.928c1.221,2.701,3.881,4.3,6.665,4.3c1.006,0,2.029-0.209,3.006-0.65l88.917-40.195
                                                    c2.688-1.216,4.381-3.925,4.295-6.873c-0.085-2.948-1.934-5.554-4.687-6.609L9.929,7.794C6.17,6.352,1.933,8.23,0.489,12.001
                                                    c-1.447,3.769,0.438,7.995,4.207,9.44l72.569,27.834L4.299,82.255C0.62,83.92-1.012,88.249,0.65,91.928z"/>
                                            </svg>`;

        let egOverviewHTML = `
        <section class="eg-overview-container">
            <div class="eg-overview-wrapper">
                <h2 class="eg-heading">Top Services</h2>
                <div class="eg-callouts-container">

                    <!--Certified Translation-->
                    <div class="eg-callouts">
                        <img src="https://thespanishgroup.org/wp-content/uploads/2020/08/Group-8.png" alt="callout-icon">
                        <h3 class="eg-title">Certified Translation</h3>
                        <p class="eg-info">Affordable certified translations for any type of immigration process in over 90 languages. Same-day delivery available. USCIS guaranteed approval.</p>
                        <a href="https://thespanishgroup.org/translations/certified-translations-for-official-civil-documents/">Learn more ${egGreaterthanSvg}</a>
                    </div>

                    <!--Professional Translation-->
                    <div class="eg-callouts">
                        <img src="https://thespanishgroup.org/wp-content/uploads/2020/08/Group-9.png" alt="callout-icon">
                        <h3 class="eg-title">Translation for businesses (Professional Translation)</h3>
                        <p class="eg-info"> The best option to translate business documents such as employee manuals, product descriptions, financial statements, advertising materials and more.</p>
                        <a href="https://thespanishgroup.org/translations/spanish-document-translations/">Learn more ${egGreaterthanSvg}</a>
                    </div>

                    <!--Legal Translation-->
                    <div class="eg-callouts">
                        <img src="https://thespanishgroup.org/wp-content/uploads/2020/08/Group-7.png" alt="callout-icon">
                        <h3 class="eg-title">Legal Translation</h3>
                        <p class="eg-info">Trusted by more than 10 000 law firms. Our field-specialized translators guarantee a high-quality and accurate translation.</p>
                        <a href="https://thespanishgroup.org/translations/legal-translation-services/">Learn more ${egGreaterthanSvg}</a>
                    </div>

                    <!--90+ Languages Supported-->
                    <div class="eg-callouts">
                        <img src="https://thespanishgroup.org/translations/wp-content/themes/translations/img/global-icon.png" alt="callout-icon">
                        <h3 class="eg-title">90+ Languages Supported</h3>
                        <p class="eg-info">No matter the language, all translations are carefully examined and checked with the highest quality standards.</p>
                        <a href="https://thespanishgroup.org/translations/document-translations-in-90-plus-languages/">Learn more ${egGreaterthanSvg}</a>
                    </div>
                </div>
            </div>
        </section>`;

        /* Variation functions */
        function init() {
            document.querySelector("section#processinfo").insertAdjacentHTML("afterend",egOverviewHTML);

        }


        /* Initialize variation */
        waitForElement("section#processinfo", init, 50, 15000);
    } catch (e) {
        if (debug) console.log(e, "error in Test" + variation_name);
    }
})();