:root{
	--blue:#001F40;
	--orange:#FF8A5B;
	--beige:#EAE8DC;
}
@font-face {
  font-family: "Sofia Sans";
  src:
    local("Sofia Sans"),
    url("assets/fonts/SofiaSans-VariableFont_wght.ttf") format("truetype");

}
@font-face {
	font-family:"Poppins";
	src:
		local("Poppins"),
		url("assets/fonts/Poppins-SemiBold.ttf") format("truetype");
}
html{
	scroll-behavior:smooth;
}
*{
	padding:0;
	margin:0;
}
body{
	font-family: 'Sofia Sans', sans-serif;
	font-size:1.125rem;
    font-weight: 300;
    line-height: 1.6;
	color:white;
	background:var(--blue);
}
h1, h2, h3{
	font-family:"Poppins", sans-serif;
}
h1{
	font-size:clamp(1.5rem, 3vw, 2.5rem);
	font-weight:300;
	line-height:1.4;
	background:var(--lightgreen);
	color:white;
	padding:.25em 1em;
	margin-bottom:-.5em;
	width:100%;
	text-align:center;
}
h2{
	font-size:clamp(2rem, 3vw, 2.5rem);
	color:var(--orange);
	text-transform:uppercase;
	margin-bottom:1em;
}
h3{
	margin-bottom:1em;
}
p{
	margin-bottom:1em;
}
a{
	color:var(--lightgreen);
	text-underline-offset:2px;
}
a:hover{
	text-decoration:none;
}
.btn{
	display:block;
    padding: .75em 2em .75em 1em;
    border-radius: 0 1.75em 1.75em 0;
    line-height: 1;
    font-weight: 500;
    transition-duration: .3s;
    gap: 0px;
    position: relative;
	background:var(--beige);
	color:var(--blue);
	max-width:100%;
	font-family:inherit;
	text-decoration:none;
	margin-top:2em;
}
.button:hover{
	border-color:transparent;
	background-color:rgba(255,255,255,.25);
}
.txt-block{
	max-width:520px;
	position:relative;
}
section{
	width:100%;
	overflow:hidden;
	max-width:100vw;
}
.section-inner{
	width:100%;
	max-width:1200px;
	padding:80px 16px;
	margin:auto;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	gap:40px;
	row-gap:0;
	
}
header{
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:999;
	
	
	.section-inner{
		padding-top:8px;
		padding-bottom:8px;
		flex-direction:row;
		justify-content: space-between;
		align-items: center;
		min-height:120px;
		
	}
	
}
.menu-wrap{
	margin-left:auto;
}
.menu-wrap ul{
		display:flex;
		flex-direction:column;
		gap:1em;
		list-style-type:none;
		
		li a{
			text-transform:uppercase;
			font-weight:500;
			color:var(--green);
			text-decoration:none;
		}
	}
.logo{
	max-width:clamp(160px, 20vw, 240px);
}
#hero{
	
	background-image:url('assets/cellspace-hero.png');
	background-color:#001F40;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:right;

	
	.section-inner{
		justify-content: center;
		align-items: flex-start;
		align-items: center;
		position:relative;
		padding-bottom:0;
		min-height:50dvh;
	}	
}
#logo-wrap{
	padding:12px 56px 4px;
	padding-left:calc((100% - 1200px)/2);
	background:var(--orange);
	width:max-content;
	position:sticky;
	top:0;
	z-index:99;
	
	img{
		margin-left:20px;
		max-width:clamp(160px, 20vw, 280px);
	}
	
}
#technology{
	video{
		max-width:100%;
	}
	.txt-block{
		margin-bottom:2em;
		
	}
} 
#team, #technology{
	.section-inner{
		flex-wrap:wrap;
	}
	h2{
		width:100%;
	}
}
.team-wrap{
	display:flex;
	flex-direction:row;
	gap:clamp(8px, 1vw, 20px);
	
	.team-item{
		display:flex;
		flex-direction:column;
		max-width:clamp(112px, 10vw, 120px);
	
		
		img{
			aspect-ratio:4/5;
			border-radius:0.125em;
			object-fit:cover;
			object-position:top;
			
		}
		span{
			font-size:1rem;
			line-height:1.1;
			margin-top:.5em;
		}
	}
}
.funding-wrap{
	display:flex;
	gap:8px;
	flex-wrap:wrap;
	img{
		background:white;
		padding:1em;
		border-radius:0.125em;
		max-height:clamp(36px, 4.6vw, 56px);
	}
}
#contact{
	img{
		margin-left:-20px;
	}
}
footer{
	background:var(--green);
	color:white;
	p, a{
		margin:0;
	}
}
#footer-top{
	background:var(--orange);
	color:var(--blue);
	.section-inner{
		padding-top:24px;
		padding-bottom:20px;
		gap:1em;
	}
}
#footer-mb{
	background:white;
	color:#0080B3;
	display:flex;
	align-items:baseline;
	justify-content:center;
	gap:.5em;
	font-size:.9rem;
	padding:8px;
	
	img{
		height:1em;
	}
}


@media screen and (max-width:991px){
	.menu-wrap ul{
		display:none;
	}
	#logo-wrap{
		position:fixed;
		top:0;
	}
	
	
}
@media screen and (min-width:992px){
	.section-inner{
		padding:80px 40px;
	}
	.menu-wrap ul{
		flex-direction:row;
	}
	#hero .section-inner{
		min-height:90vh;
	}
	#logo-wrap{
		padding:24px 56px 16px;
		padding-left:calc((100% - 1200px)/2);
		position:sticky;
		top:0;
		img{
			margin-left:40px;
		}
	} 
	#technology, #team, #contact{
		.section-inner{
			flex-direction:row;
			justify-content: space-between;
		}
	}
	#contact{
		background:url('assets/cellspace-hero-flipped.jpg');
		background-repeat:no-repeat;
		background-size:contain;
		.txt-block{
			margin-left:auto;
		}
		img{
			display:none;
		}
	}
}