@font-face{
	font-family:avertastd;
	font-style:normal;
	font-weight:400;
	src:url(AvertaStd-Regular.woff2) format("woff2")
}

@font-face{
	font-family:avertastd;
	font-style:normal;
	font-weight:700;
	src:url(AvertaStd-Bold.woff2) format("woff2")
}

*{
	margin:0;
	padding:0;
	box-sizing:border-box
}

html{
	margin:0;
	scroll-behavior:smooth;
	font-family:avertastd,sans-serif;overflow:hidden}

:root{
	--primary-500: 76 69 181;
	--primary-100: 233 232 246;
	--typo-default: 31 31 31;
	--typo-secondary: 112 112 112;
	--typo-outline: 217 217 217;
	--light: 245 245 245;
	--white: 255, 255, 255;
	--clr-primary-500: rgb(var(--primary-500));
	--clr-primary-100: rgb(var(--primary-100));
	--clr-typo-default: rgb(var(--typo-default));
	--clr-typo-secondary: rgb(var(--typo-secondary));
	--clr-typo-outline: rgb(var(--typo-outline));
	--clr-light: rgb(var(--light));
	--clr-white: rgb(var(--white))
	}

h1{
	font-weight:700;
	font-size:max(calc(50vw/12),36px);
	color:#44a116;}

h2{
	font-weight:400;
	font-size:max(calc(50vw/24),18px);
	color:var(--clr-typo-default)}

h3{
	font-weight:700;
	font-size:1.125rem;}

h4{
	font-weight:400;
	font-size:1rem;}

@keyframes go-up{
	0%{transform:translateY(0)}
	50%{transform:translateY(0.5rem)}
	100%{transform:translateY(0)}}

body{
	width:100%;
	position:relative;
	display:flex;
	background-color:var(--clr-light)}

main{
	max-width:68.75rem;
	margin:0 auto;
	width:calc(100%/12 * 10);
	min-height:100vh;
	z-index:1;
	display:flex;
	flex-direction:row;
	row-gap:2rem}

.bg-text{
	position:absolute;
	right:0;
	top:50%;
	transform:translateY(-50%)}

.bg-desktop{display:block}
.bg-phone{display:none}
.bg-text>text{stroke:var(--clr-typo-outline);
	white-space:pre;
	font-weight:700;
	line-height:normal;
	font-size:12rem;
	stroke-width:.5px}
.content-text{
	display:flex;
	flex-direction:column;
	justify-content:center;
	row-gap:.75rem;width:50%}
.content-card{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	width:50%}
.content-card-wrapper{
	display:flex;
	flex-direction:row;
	align-items:center;
	column-gap:1rem;
	padding:1rem;
	padding-right:2rem;
	background-color:#dfdcdd;
	border-radius:99px;
	box-shadow:16px 16px 100px rgba(68,161,220,.1);
	backdrop-filter:blur(16px);
	animation:go-up 3s infinite ease}
.card-img-wrapper{
	width:4rem;
	background-color:var(--clr-primary-100);
	border-radius:99px}
.card-text-wrapper{
	padding-left: 10px;
	display:flex;
	flex-direction:column;
	row-gap:.25rem}

@media screen and (max-width:640px)
{main{flex-direction:column;justify-content:center}
h1,h2{text-align:center}
h3,h4{font-size:smaller}
.content-text{width:100%}
.content-card{width:100%;justify-content:center}
.content-card-wrapper{padding:.75rem;padding-right:1.5rem}
.card-img-wrapper{width:2.5rem;height:2.5rem}
.bg-desktop{display:none}
.bg-phone{display:block;opacity:.5}
.bg-text>text{font-size:9rem}}