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

:root {
	--bg1: #080808;
	--bg2: #141414;
	--pill: #DE4362;
	--text1: #FFFFFF;
	--text2: #C21537;
	font-size: 16px;
}

* { max-width:100%; min-width:0; box-sizing:border-box;  }

body { margin:0; padding:0; width:100%; max-width:100vw; min-height:100vh; font-family: inter; background: #000; }

.container { width: 100%; max-width:1200px; padding:0 1rem; margin:0 auto;
	display:flex; justify-content:center; align-items:center; 
}

.flex {
	align-self:stretch;
	flex:1 0 0;
	display:flex; 
	flex-flow:row wrap; 
	gap:1rem; 
	justify-content:space-between; 
	_max-width:100%; 
}

.block { border-radius:8px; background-color: var(--bg2); }
.block.pad  { padding:1rem; }
.block > div { padding:1rem;  }

.blockhead { background-color: var(--text2); border-radius: 8px 8px 0 0; }

.quarter { width: 22%; }
.third 	 { width: 32%; }
.half 	 { width: 47%; }
.full 	 { width:100%; }

.italic { font-style: italic; }

.t2 { color:var(--text2); }

.text { color:pink; }

.small { font-size: 80%; }

.pill { border-radius: 20px; background-color:pink; justify-self:start; padding:0.3rem 0.6rem; }

.shadow { box-shadow:2px 2px 8px #000; }

.icon { height:64px; width:64px; border-radius:32px; background: var(--text2) center no-repeat; background-size:32px; }
.icon.chart {  background-image:url('chart.svg'); }
.icon.trend {  background-image:url('trend.svg'); }
.icon.pie {  background-image:url('pie.svg'); }
.icon.calc {  background-image:url('calc.svg'); }

.button1, .button2 { 
	font-weight:600;
	_font-size:18px;
	font-size:1.125rem;
	padding:1rem 2rem; text-align:center; border-radius:6px; border:1px solid var(--text2); }
.button1 { background-color: var(--text2); color:white; }

.button2 { background-color: var(--bg1); color: var(--text2);  }

li { display:inline-block;  
	padding:.4rem .7rem; margin:.3rem .4rem; 
	font-size:16px; font-weight:400;
 border-radius:10px; background:var(--pill); color:#000; }

h1, h2, h3 { color:white; margin-top:0; }
h1 { font-size:60px; line-height:.9; }
h2 { font-size:30px; }
h3 { font-size:20px; }

section { padding:2rem 0; }

#hero { background-color:var(--bg1); background: #4A0916; }
#expert { background-color:var(--bg2); }

#hero .container
{
	flex-flow: column;
	justify-content:center;
	align-items:center;
	min-height:200px;
	height:500px;
	max-height:95vh;
}
#hero h1 { margin-bottom:0; }
#hero .text { text-align:center;}
#hero .buttons { margin-top:2rem;}

#expert .container  { flex-flow:column; }
#expert .block { text-align:center; color:#cc667a; display: flex; flex-flow: column; align-items: center;}
#stories .container { flex-flow:column; }

#clients .container
{
	flex-direction:column;
	align-items:center;
}


@media screen and (max-width: 992px)
{
	.quarter { width:48%; }
	.third { width:32%; }
	.half { width:48%; }
}

@media screen and (max-width: 768px)
{
	.quarter { width:47%; }
	.third { width:100%; }
	.half { width:47%; }
}

@media screen and (max-width: 576px)
{
	.quarter { width:100%; }
	.third { width:100%; }
	.half { width:100%; }
}