Untitled

(function (w) {
	"use strict";

	var tag = "cv-3-1",
		utils,
		window = typeof unsafeWindow !== "undefined" ? unsafeWindow : w,
		isTimedOut,
		timeout = setTimeout(function () {
			isTimedOut = true;
		}, 5000),
		checkForProjectJS = function () {
			try {
				var isLoaded = typeof window["cv-pjs"] !== "undefined";
				if (isTimedOut) return;
				else if (!isLoaded) window.requestAnimationFrame(checkForProjectJS);
				else {
					clearTimeout(timeout);

					utils = window["cv-pjs"];

					//window[tag].variation = "variation-1";
					//window[tag].init();
					initVariation();
				}
			} catch (err) {
				if (utils) utils.log(err, tag);
			}
		};

	window.requestAnimationFrame(checkForProjectJS);

	function initVariation() {
		var modClass = `${tag}_module`;
		utils.waitForElement("#gatsby-focus-wrapper  section[data-qa='hero']", function (heroContent) {
			utils.applyChanges(`.${modClass}`, function () {
				var cont = document.createElement("div");
				cont.innerHTML = `
					<div class="cv-overview-wrapper">
						<div class="cv-callouts-container">
			
							<!--Certified Translation-->
							<div class="cv-callouts">
			
							<div class="cv-img">
							   <img src="https://cfactory-img.s3.amazonaws.com/CLS/3.1/convicon1.svg" alt="callout-icon"> 
							</div>
								 
							<div class ="cv-rows">
							   <h3 class="cv-title">Your free credit score & report, updated weekly</h3>
							   <p class="cv-info">Enter your details once, and get free credit reports forever.</p>
							   </div>   
							</div>
			
							<!--Professional Translation-->
							<div class="cv-callouts">
							<div class="cv-img">
								<img src="https://cfactory-img.s3.amazonaws.com/CLS/3.1/convicon2.svg" alt="callout-icon">
						   </div>
			
						   <div class="cv-rows">
								<h3 class="cv-title">Support to <br/> improve your score</h3>
								<p class="cv-info">Get clear, personalised insights about your credit, plus tips on how to improve it.</p>
			
								</div>
							</div>
			
							<!--Academic Translation-->
							<div class="cv-callouts">
							<div class="cv-img">
								<img src="https://cfactory-img.s3.amazonaws.com/CLS/3.1/convicon3.svg" alt="callout-icon">
							 </div>
							 
							 <div class="cv-rows">
								<h3 class="cv-title">The UK’s number 1 free credit score and report app</h3>
								<p class="cv-info">Over 12 million people  trust ClearScore to help them with their financial future.</p>
			
								</div>
							</div>
			
							<!--90+ Languages Supported-->
							<div class="cv-callouts">
			
							<div class="cv-img">
								<img src="https://cfactory-img.s3.amazonaws.com/CLS/3.1/convicon4.svg" alt="callout-icon">
								</div>
			
								<div class="cv-rows">
								<h3 class="cv-title">Personalised and pre-approved credit offers</h3>
								<p class="cv-info">Get pre-approved for exclusive offers you won’t see anywhere else.</p>
								</div>
							</div>
						</div>
					</div>`;

				cont.classList.add(modClass);
				cont.classList.add('cv-overview-container');

				heroContent.insertAdjacentElement("afterend", cont);
                 document.querySelector("#gatsby-focus-wrapper section[class ^= 'featureSection'] > div[class ^= 'ctaContainer'] > a > div").innerText = "Sign up for free";

				utils.log("module inserted", tag);
			});
		});
		
	}

	
})(window);



.cv-3-1 section[data-qa="hero"] {
    height: auto;
}

.cv-3-1 div[class ^="heroIntro"] {
    height: auto;
}


.cv-3-1 div[class ^="featureLists"] {
    display: none !important;
}

.cv-3-1 .cv-overview-container {
    padding: 0 30px 14px;
    margin-top: 50px;
    margin-bottom: -9%;
    padding-bottom: 0;
}

.cv-3-1 .cv-overview-wrapper {
    width: 100%;
    margin-inline: auto;
}

.cv-3-1 .cv-callouts-container {
    display: flex;
    justify-content: center !important;
}

.cv-3-1 .cv-callouts img {
    width: 32px;
    height: 40px;
    margin: auto;
    display: block;
}

.cv-3-1 .cv-callouts {
    position: relative;
    text-align: center;
    flex-basis: 19%;
    margin: auto;
}

.cv-3-1 .cv-callouts .cv-title {
    font-weight: 700;
    font-size: 16px;
    margin: 25px 0 8px 0;
    color: #000;
}

.cv-3-1 .cv-callouts .cv-info {
    font-size: 14px;
    line-height: 21px;
    padding-top: 12px;
}


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


.cv-3-1 div[class ^="featureLists"] {
    margin: auto;
}


.cv-3-1 section[class ^='featureSection']>div[class ^='ctaContainer']>a {
    max-width: 350px !important;
    width: 100% !important;
}

@media(max-width: 1099px) {
    .cv-3-1  .cv-callouts {
        flex-basis: 38%;
    }

    .cv-3-1 .cv-callouts-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 34px 0;
    }
}

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

    .cv-3-1 .cv-callouts-container {
        gap: 0;
    }

    .cv-3-1 .cv-overview-wrapper>.cv-heading {
        margin-bottom: 50px;
    }

    .cv-3-1 .cv-overview-container {
        padding: 0 30px 30px;
        margin-top: 0;
        margin-bottom: -8%;
    }

    .cv-3-1 .cv-callouts .cv-info {
        font-size: 14px;
        line-height: 21px;
        padding-top: 3px;
    }

    .cv-3-1 .cv-rows {
        padding-top: 0;
        margin-top: -2px;
        padding-left: 30px;
    }

    .cv-3-1 .cv-overview-container {
        padding: 0 30px 10px;
        border-top: 2px solid #fff !important;
    }

    .cv-3-1 .cv-callouts {
        display: flex;
        align-items: center;
        text-align: left;
    }

    .cv-3-1 section.cv-overview-container>div>div>div:nth-child(2)>div.cv-rows>h3 br {
        display: none;
    }

    .cv-3-1 .cv-img {
        margin-top: 20px;
    }

    .cv-3-1  div[class ^="sectionContent"] div[class ^="featureLists"] {
        display: block !important;
    }

    .cv-3-1 div[class ^="featureLists"] div[class ^="featureContainer"] div[class ^="featureItem"] {
        display: none;
    }


    .cv-3-1 div[class ^="featureLists"] {
        background: #fff;
        border-bottom: 10px solid #fff !important;
    }
    .cv-3-1 section[class ^="featureSection"]>div[class ^="ctaContainer"] {
    text-align: center;
    margin-top: 0px;
}

}

.cv-3-1 .cv-overview-container+section[class ^="featureSection"] {
    padding-bottom: 35px;
    align-items: center;
    padding-right: 0 !important;
}


.cv-3-1 section[class ^="featureSection"]>div[class ^="ctaContainer"] {
    text-align: center;
    margin-top: 40px !important;
}


.cv-3-1 div[class ^="ctaContainer"] div[class ^="component"] {
    font-size: 14px;
}