@charset "UTF-8";
/* MyScoreIQ Rebrand 2025 CSS */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

@import url("https://use.typekit.net/tcz5pun.css");

.padding-section-large {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

.container {
	padding-left: 40px;
	padding-right: 40px;
}

#hero .container {
	max-width: 1280px;
}
.hero_content {
	padding: 0px !important;
}

body {
	font-family: "Roboto", sans-serif !important;
  	font-weight: 400 !important;
  	font-style: normal !important;
	text-wrap: pretty !important;
	color: #020236;
	font-size: 20px;
}

#hero {
	background-position: center !important;
}

h1 { 
	font-family: all-round-gothic, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 58px;
}

h2 { 
	font-family: all-round-gothic, sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 44px;
}

.h2-smaller {
	font-size: 36px;
}

h3 {
	font-family: all-round-gothic, sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 28px;
}

#hero h1 {
	color: #020236;
	font-weight: 400;
}

#hero h2 {
	font-family: all-round-gothic, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 30px;
	color: #0081FF;
}

.h2-sub {
	text-transform: none !important;
	letter-spacing: 0px !important;
	color: #0081FF !important;
	font-weight: 600;
	font-style: italic;
}

#hero ul {
	color: #020236;
	list-style-image: none;
	list-style: disc;
	padding-left: 18px;
	font-weight: 400;
	font-size: 20px;
}

.btn, input[type="submit"] {
	grid-column-gap: .75rem;
    grid-row-gap: .75rem;
	text-align: center;
    background-position: 0 0, 0 0 !important;
    background-repeat: no-repeat, repeat !important;
	background-size: cover, auto;
    border-radius: 200px;
    justify-content: center;
    align-items: center;
    padding: 1.25rem 3.5rem;
    font-family: all-round-gothic, sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s;
    display: flex;
	text-transform: none !important;
	margin-bottom: 25px;
	border: none !important;
}

.btn-primary {
    background-color: #020236 !important;
    background-image: url(https://cdn.prod.website-files.com/67ac1d34de86fe6d88c63ed0/6851952d2e4818b52d9f571b_button-highlight.png), radial-gradient(circle farthest-corner at 50% 50%, #1f1f44, #020236) !important;
    color: #fff;
    box-shadow: 0 20px 25px rgba(13, 13, 60, 0.65) !important;
}

.btn-secondary {
	background-color: #fff !important;
    color: #020236 !important;
    background-image: none !important;
    box-shadow: 
		inset 0 -4.65px 6.68px rgba(2, 2, 54, 0.2),
  		0 20px 25px rgba(13, 13, 60, 0.23) !important;
}

.btn-disclaimer {
	text-transform: none !important;
	color: #020236 !important;
	text-align: left;
	font-size: 18px;
	font-style: italic;
}

#social_proof {
	background-color: #F8FCFF;
	border: none;
}

.large-box {
	padding: 70px;
	border-radius: 50px 50px 0px 50px;
	height: 100%;
}

.is-green {
	background-color: #E9FBDE;
}

.is-blue {
	background-color: #E5F2FF;
}

.cta-box {
	background-image: linear-gradient(140deg, #0081FF, #8FE958);
    background-repeat: no-repeat;
	color: #fff;
	border-radius: 50px 50px 0px 50px;
	padding: 40px 70px 0px 70px;
	position: relative;
}

.cta-bg-thumbprint {
	position: absolute;
	z-index: 0;
	width: 700px;
    top: -200px;
    left: -100px;
}

.w-85 { width: 85%; }

.footer-top {
	border-bottom: solid #020236 1px;
	margin-bottom: 3rem;
}



@media only screen and (max-width: 991px){
	.container {
		max-width: 991px;
	}
	#social_proof img {
		width: 70%;
	}
    #features {
        padding-bottom: 90px;
    }
	.large-box {
		padding: 40px;
		border-radius: 25px 25px 0px 25px;
	}
	.cta-box {
		border-radius: 25px 25px 0px 25px;
	}
}

@media only screen and (max-width: 767px){
	.padding-section-large {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	.container {
		padding-left: 20px;
		padding-right: 20px;
	}
	.hero_content {
		text-align: left;
	}
	#social_proof img {
		width: 80%;
	}
	h2 {
		font-size: 30px;
	}
	h3 {
		font-size: 26px;
	}
	.h2-smaller {
		font-size: 30px;
	}
	.cta-box {
		padding: 40px 40px 0px 40px;
	}
	.btn_left {
		float: none !important;
	}
}



/*------------------------------------------*/
/*	 Animation
/*------------------------------------------*/

.hidden {
	opacity: 0;
	filter: blur(5px);
	transform: translateX(-20%);
	transition: all 1s;
}
.shown {
	opacity: 1 !important;
	filter: blur(0);
	transform: translateX(0);
}

.hidden-vertical {
	opacity: 0;
	filter: blur(5px);
	transform: translateY(20%);
	transition: all 1s;
}
.shown-vertical {
	opacity: 1 !important;
	filter: blur(0);
	transform: translateY(0);
}

.animate-order-2:nth-child(2){
	transition-delay: 200ms;
}
.animate-order-3:nth-child(3){
	transition-delay: 400ms;
}
.animate-order-4:nth-child(4){
	transition-delay: 600ms;
}
.animate-order-5:nth-child(5){
	transition-delay: 800ms;
}
.animate-order-6:nth-child(6){
	transition-delay: 800ms;
}

.hero-animate:nth-child(2){
	transition-delay: 200ms;
}
.hero-animate:nth-child(3){
	transition-delay: 400ms;
}

.social-proof-animate:nth-child(2){
	transition-delay: 200ms;
}
.social-proof-animate:nth-child(3){
	transition-delay: 400ms;
}
.social-proof-animate:nth-child(4){
	transition-delay: 600ms;
}
.social-proof-animate:nth-child(5){
	transition-delay: 800ms;
}
.social-proof-animate:nth-child(6){
	transition-delay: 800ms;
}

.how-hero-hidden {
	opacity: 0;
	filter: blur(5px);
	transform: translateX(-30%);
	transition: all 1s;
}
.how-hero-show {
	opacity: 1 !important;
	filter: blur(0);
	transform: translateX(0);
}

.how-hero-animate:nth-child(2){
	transition-delay: 200ms;
}
.how-hero-animate:nth-child(3){
	transition-delay: 400ms;
}
.how-hero-animate:nth-child(4){
	transition-delay: 600ms;
}
.how-hero-animate:nth-child(5){
	transition-delay: 800ms;
}

	.social-proof-logo-1-hidden {
	opacity: 0;
	filter: blur(5px);
	transform: translateX(-20%);
	transition: all 1s;
}
.social-proof-logo-1-show {
	opacity: 1 !important;
	filter: blur(0);
	transform: translateX(0);
}



@media only screen and (max-width: 767px) {
	
	
}


@media(prefers-reduces-motion) {
	.hidden {
		transition: none;
	}
	.how-hero-hidden {
		transition: none;
	}
	.social-proof-logo-1-hidden {
		transition: none;
	}
	
}