@font-face {
	font-family: 'SF-Pro';
	font-weight: 700;
	font-style: normal;
	src: url(./fonts/sf-pro-display_bold.woff2) format('woff');
}

@font-face {
	font-family: 'SF-Pro';
	font-weight: 400;
	font-style: normal;
	src: url(./fonts/sf-pro-display_regular.woff2) format('woff');
}

*,*::before,*::after {
	box-sizing: border-box;
}

a {
	text-decoration: none;
	color: inherit;
}

body {
	font-family: 'SF-Pro';
    font-weight: 400;
	background-color: #f5f5f7;
}

.header {
	background-color: rgba(255,255,255,0.72);
	position: fixed;
	width: 100%;
	opacity: 1;

	background: rgba( 255, 255, 255, 0.15 );
	box-shadow: -1px 0 24px -8px rgba(31, 38, 135, 0.37);
	backdrop-filter: blur( 20px );
	-webkit-backdrop-filter: blur( 20px );


}

.header__wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 50px;
}

.container {
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 10px;
}
/* 
.second__container {
	margin: 0 auto;
    max-width: 980px;
    padding: 0 22px;
} */

.title {
    font-family: 'SF-Pro';
    font-size: 72px;
    font-weight: 700;
	margin-top: 18px;
	text-align: center;
	margin-bottom: 30px;
}

.purple {
    color: #a945e3;
}

.blue {
    color: #0071e3;
}

.logo {
	font-size: 21px;
	font-weight: 400;
}

.button {
	text-align: center;
	transition: all .3s ease;
	background-color: #852dc4;
	color: rgb(255, 255, 255);
	padding-left: 11px;
    padding-right: 11px;
    padding-top: 4px; 
    padding-bottom: 4px;
	font-size: 12px;
	border-radius: 980px;
}

.button:hover {
	background-color: #a945e3;
}

.hero {
	padding-top: 144px;
}

.image {
	width: 84px;
	height: 84px;
}

.hero__wrapper {
	display: flex;
	justify-content: center;	
}

.hero__main {
    justify-content: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}

.hero__title {
	padding-top: 10px;
	font-size: 17px;
    font-weight: 400;
}

.button__wrapper {
	display: flex;
	justify-content: center;
}

.hero-button {
	margin-top: 6px;
	text-align: center;
	transition: all .3s ease;
	background-color: #852dc4;
	color: rgb(255, 255, 255);
	padding: 18px 35px;
	font-size: 17px;
	border-radius: 980px;
}

.hero-button:hover {
	transition: all .3s ease;
	background-color: #a945e3;
}