body{
	margin:0;
	font-size:1.25vw;
	font-family:'Public Sans Thin';
	overflow-x:hidden;
	color:hsl(233, 8%, 62%)

}




.header{
	display:flex;
	justify-content:space-around;
	padding:1.5em;
	padding-bottom:1.25em;
	box-shadow: 5px 2px 5px hsl(0, 0%, 98%);
	position:relative;
	background-color:white;
}
.logoimg{
	margin-bottom:1.5%;
	margin-top:.75%;
}

.header button{
	margin-left:1em;
}


.buttons button{

	margin-left:1em;
	padding-bottom:0.75em;
	
	padding-top:0.75em;
	color:hsl(233, 8%, 62%);

}
.buttons{
	display:flex;
	justify-content:space-around;
	width:30%;
}
.buttons button:hover{
	 border-width: 3px;
	 border-style: solid;
	 border-image:linear-gradient(to right ,hsl(136, 65%, 51% ), hsl(192, 70%, 51% )) 0 0 1 0 ;
}

.homebutton, .aboutbutton, .contactbutton, .blogcontactbutton , .careersbutton{


	all:unset;
	cursor:pointer;
	position:relative;
}


.requestinvbutton{

	all:unset;
	background:linear-gradient(to right ,hsl(136, 65%, 51% ), hsl(192, 70%, 51% ));
	cursor:pointer;
	border-radius:2em;
	padding:0 3%  0% 3%;
	margin-right:5%;
	color:white;	
}






.paraandbglogo{
	display:flex;
	justify-content:space-between;
	
}
.first{
	width:100%;
	padding-top:10%;
	padding-left:10%;
}
.firstheadline{
	font-weight:400;
	font-size:4.097vw;
	color:hsl(233, 26%, 24%);
	width:70%;
	margin:0;

}
.firstparagraph{
		color:hsl(233, 8%, 62%);
		width:66%;
		font-size:1.25vw;

}

.firstbutton{
	all:unset;
	background:linear-gradient(to right ,hsl(136, 65%, 51% ), hsl(192, 70%, 51% ));
	cursor:pointer;
	border-radius:2em;
	padding:2% 5%  2% 5%;
	margin-right:5%;
	color:white;
	font-size:1.25vw;

}

.bglogo{
	background:
		url(../images/bg-intro-desktop.svg)
		no-repeat
		padding-box
		content-box;
	background-position:15% 30%;
	margin-right:-8%;
	margin-top:-10%;
	width:100%;
}
.phones{
	width:100%;
}




.second{
	padding-left:10%;

}

.secondheadline{
	font-weight:300;
	font-size:3vw;
	color:hsl(233, 26%, 24%);
	margin:0% 0 2% 0;
}

.secondparagraph{
	width:50%
}





.reasons{
	display:flex;
	justify-content:space-around;
	margin: 5% 5% 0 10%;

}

.reason1{
	margin-right:3%;
}

.reason2{
	margin-right:3%;

}

.reason3{
	
	margin-right:3%;

}

.reason4{
	margin-right:3%;
}

.reasonheadline{
	font-weight:300;
	font-size:1.75vw;
	color:hsl(233, 26%, 24%);
	margin:0;
}
.online , .budget , .onboarding , .api{

	height:33%;
}

.articlesheadline{
	font-weight:300;
	font-size:3vw;
	color:hsl(233, 26%, 24%);
	
	margin:10% 0 5% 10% ;
}

.articles{
	display:flex;
	width:90%;
	margin-left:9%;
	margin-bottom:5%;
}

.moneypic{
	width:90%;
	height:18vh;
}
.article1, .article2, .article3, .article4{
	margin:1%;
}
.srouce1 , .srouce2, .srouce3, .srouce4{
	font-size:0.972vw;
	margin-top:20%;
}
.articleheadline1 ,.articleheadline2,.articleheadline3 ,.articleheadline4{
	all:unset;
	color:hsl(233, 26%, 24%);

}
.headline1p , .headline2p, .headline3p, .headline4p{
	margin:0;
}
.articleheadline1:hover ,.articleheadline2:hover,.articleheadline3:hover ,.articleheadline4:hover{
	color:hsl(136, 65%, 51%);
	cursor:pointer;
}

.textarticles , .textarticles2 , .textarticles3 , .textarticles4{
	margin:5%;
}

.bottom{
	height:25vh;
	background-color:hsl(233, 26%, 24%);
	display:flex;
	justify-content:space-evenly;
}
.bottombuttons{
	display:flex;
	justify-content:space-evenly;
	margin-top:2%;
}
.group1bottom{
	width:20%;

}
.group2bottom{
	width:30%;
}

.homebutton2 ,.aboutusbutton2, .contactbutton2, .blogcontactbutton2, .careersbutton2, .privacy{
	all:unset;
	cursor:pointer;
	font-size:1vw;
	margin-top:20px;
}

.homebutton2:hover ,.aboutusbutton2:hover, .contactbutton2:hover, .blogcontactbutton2:hover, .careersbutton2:hover, .privacy:hover{
	color:hsl(136, 65%, 51%);
}

.buttonreq{
	display:flex;
	flex-direction:column;
	justify-content:space-around;
}

.requestinvbutton2{
	all:unset;
	width:45%;
	background:linear-gradient(to right ,hsl(136, 65%, 51% ), hsl(192, 70%, 51% ));
	cursor:pointer;
	border-radius:2em;
	padding:5% 15%  5% 15%;
	color:white;	
	margin-left:24%;
	margin-top:10%;
}

.sociallogs{
	display:flex;
	justify-content:space-around;
}

.logobottom{
}

.bottomlogos{
	display:flex;
	flex-direction:column;
	justify-content:space-around;
}


@media screen and (max-width:375px){
	.paraandbglogo{
		flex-direction:column;
	}
	.first{
		order:2
	}
	.bglogo{
		margin-top:-25%;
	}
	.firstheadline{
		font-size:11vw;
		width:100%;
	}
	.firstparagraph{
		width:90%;
		font-size:4vw;
	}
	.firstbutton{
		margin-left:18%;
		padding:4% 10% 4% 10%;
		font-size:4vw;
	}
	.secondheadline{
		font-size:8vw;
		width:50%;
		margin-left:24%;
		text-align:center;
		margin-top:20%;

	}
	.secondparagraph{
		width:100%;
		text-align:center;
		font-size:4vw;
	}
	.second{
		padding-left:2.5%;
	}
	.online, .api, .budget, .onboarding{
		margin-bottom:9%;
	}
	.homebutton2 ,.aboutusbutton2, .contactbutton2, .blogcontactbutton2, .careersbutton2, .privacy{
		margin:0;
		margin-bottom:25%;
		font-size:4vw;
	}
	
	.reasons{
		flex-direction:column;
		text-align:center;
	}
	.reasonheadline{
		font-weight:400;
		font-size:4.5vw;
	}
	.reasonpara{
		font-size:3.7vw;
		text-align:center;
	}
	.articlesheadline{
		font-size:8vw;
		margin:10% 0 5% 0;
		text-align:center;
	}
	.articleheadline1, .articleheadline2,.articleheadline3,.articleheadline4{
		width:100%;
	}
	.articles{
		flex-direction:column;
		width:100%;
		margin:0;
		font-size:4vw;
		text-align:center;
	}

	.srouce1,.srouce2,.srouce3,.srouce4{
		margin:0;
		font-size:3vw;
		text-align:start;

	}
	.headline1p,.headline2p,.headline3p,.headline4p{
		font-size:4vw;
		width:85%;
		text-align:start;


	}
	.articlepara1, .articlepara2, .articlepara3, .articlepara4{
		text-align:start;
	}
	.bottom{
		flex-direction:column;
		margin-top:15%;
		height:auto;
	}
	.logobottom{
		margin:10% 25% 6% 25%;
	}
	.sociallogs{
		justify-content:none;
		margin-left:40%;
		margin-right:5%;
		width:10%;

	}
	.bottombuttons{
		justify-content:none;
		flex-direction:column;
	}
	.group1bottom{
		display:flex;
		flex-direction:column;
		margin-left:35%;
	}
	.group2bottom{
		display:flex;
		flex-direction:column;
		margin-left:35%;
	}
	.requestinvbutton2{
		width:30%;
		padding: 5% 10% 5% 13%;
		font-size:4vw;
		margin-top:1%;
	}
	.rights{
		font-size:4vw;
		margin-left:20%;
	}





}