@import url('https://fonts.googleapis.com/css2?family=Sansation:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
*{box-sizing:border-box}
:root{
	--brand-orange: #ff8500;
	--dark-orange: #994d00;
	
    /*--bg:#606060;*/
	--bg:white;
	--card:#150b00;
	--muted:rgb(255, 178, 102);
	/*--accent:#55ebff;
	--accent-2:#4dc6eb;*/
	/*--accent:#7c3aed;
	--accent-2:#06b6d4;*/
	--glass: rgba(0, 0, 0, 0.07);
	--radius:12px;
	--max-width:1300px;
	--gap:1.25rem;
	color-scheme: dark;
    
}
h1{font-size:3.5rem;margin:0 0 .6rem;line-height:1.05}
h2{font-size:1.5rem;margin:0 0 .6rem;color:#fff;line-height:1.05}
body{
	margin:0;
	/*font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;*/
    font-family: "Sansation", sans-serif;
    font-weight: 400;
    font-style: normal;
	/*background: linear-gradient(180deg,var(--muted) -100%, var(--bg) 60%);*/
	background: var(--bg);
	/*background: linear-gradient(180deg,#c0c0c0 0%, var(--bg) 60%);*/
	color: var(--brand-orange);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	line-height:1.45;
	padding:0 1rem 4rem;
}
.container{
	max-width:var(--max-width);
	margin:0 auto;
	padding:2rem 1rem;
}
.dlogo{width:20em;margin:2em}

nav{
	position:fixed;
	margin:0;
	padding:0;
	right:1.25rem;
    top:1rem;
	gap: 4vh;
	display:flex;
	flex-direction:row;
	align-items:inherit;
	background:var(--bg);
	border-radius:12px;
	box-shadow:0 8px 30px rgba(2,6,23,0.6);
	z-index:1000;
    writing-mode: vertical-lr;
    text-orientation: mixed;
	height:90vh;
	width:50px;
	transition: right 0.25s ease-in-out;
}
.logo{display:flex; align-items:center;}
.logo button{display: none; background:none; border:none; padding:0; cursor:pointer;}
.Loggo{width:auto; height: 3.5rem;}
#navhome{display:none;}

.nav-links{display:flex;flex-direction:row;align-items:center; height:100%; justify-content: space-between;overflow: hidden;padding-bottom: 3px;}
.nav-links a:hover{background:var(--brand-orange);color:#fff;}
.nav-links a{color:var(--muted);text-decoration:none;padding:1.5rem .6rem;border-radius: var(--radius);white-space: nowrap;}
/*nav .deployed{height:auto; width: 100%;padding-bottom: 2em;}*/

.headline{letter-spacing: 2px; }
h2.headline{/*text-transform: uppercase;*/margin:0 3rem 3rem;color: var(--brand-orange);font-size:1.75rem;text-shadow: 1px 4px 3px var(--glass); text-transform: capitalize; text-align: center;}
p.headline{margin:0 3rem 0;color:var(--muted); text-transform: capitalize; font-weight: bold; font-size: 1.25em; text-align: center;}

/* Services */
#services{padding:3rem 10px 10px 10px; background: var(--glass); margin-top: 2rem; border-radius: var(--radius);}
.services-grid{
	display:grid;
	gap:var(--gap);
	grid-template-columns:repeat(2,1fr);
	color: black;
}
.services-grid img{width: 100%}
.card{
	background:white;
	border-radius:12px;padding:1.25rem;border:1px solid rgba(255,255,255,0.03);
	transition:transform .18s ease, box-shadow .18s ease;
	min-height:150px;
	display:flex;flex-direction:row;gap:.75rem;
	text-decoration: none; color: inherit; cursor: pointer;
}
.card:hover{transform:translateY(-2px); background: var(--glass); box-shadow: 0 8px 30px rgba(2,6,23,0.2);}
.card:hover .stile p{color: black;}
.card:hover .stile h3{color: var(--brand-orange)}
.icon{aspect-ratio: 1 / 1;border-radius:10px;display:inline-grid;place-items:center;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));font-size:1.25rem}
.card h3{margin:0;font-size:1.05rem}
.card .stile p{margin:1em;color:var(--muted);font-size:.95rem}
.stile{display:flex;flex-direction:column;}

#process .headline{margin-bottom:2rem; margin-top: 2rem;}

#gallery{padding:3rem 10px 1rem 10px;}

/* Carousel styles */
.carousel-container{overflow-x:clip; display: flex;position:relative; background: rgba(0,0,0,.1);}
.carousel{padding-right: 16em; display:flex;align-items: center; justify-content: center; gap:2em;animation:spin 30s linear infinite;}
.carousel-container::-webkit-scrollbar{display:none;}
.carousel-item{flex:0 0 200px;display:flex;align-items:center;justify-content:center;padding:1rem;min-height:80px;}
.carousel-item img{max-width:8em;}

#aboutUs{
	padding-top:1rem;
	background-color: rgba(0,0,0,.5);
    border-radius: var(--radius);
    padding: 3rem 1rem 4rem 1rem;}
.concont {
	display:flex;
	background-color: rgba(0,0,0,.5);
	border-radius: var(--radius);
	padding: 2rem;
	border-bottom: 4px solid var(--brand-orange);
}
#contact{
	padding-top: 3rem;
}

.team{display:flex;align-items: center;gap:1rem;margin-top:1rem; padding: 0 5em}
.member{background:white;padding:1rem;width:80%; border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content: baseline;min-height: 435px; border-bottom: 4px solid #ff8500;}
    /*.member img{width:50%; border-radius:8px;margin-top:.5rem}*/
.member h2{color: black}
.member p{margin:0;color:var(--brand-orange);font-size:.9rem}
.member div{width:80%; max-width: 300px; text-shadow: 1px 4px 2px var(--glass);}
.member div img{width:100%}
.contactBoard{padding-left:2em; align-content: center;}
.social img{
	width:3rem;
	margin-right:1rem;
	filter: brightness(0) invert(1);
	transition: filter 0.3s;
}


footer{text-align: center; opacity:.8;margin-top:3rem;font-size:.9rem}

@keyframes spin{
	from{translate:0}
	to{translate:-100%}
}
@media (max-width:1400px) and (min-width:651px) and (min-height: 651px){
	nav{width:10px; transition: width 0.5s;}
	.nav-links a{display: none;}
	nav:not(.nohover):hover{
		width:50px;
	}
	nav:not(.nohover):hover .nav-links a{
		display: block;
	}
	
}
@media (max-width:1075px){
	.services-grid{grid-template-columns:repeat(1,1fr)}
	h1{font-size:1.8rem}
	h2{font-size:1.2rem}
	/*.dlogo{width:20em;margin:2em}*/
	.member{min-height: 370px;}
	.services-grid img{min-width: none;width: 15vw;}

	.timeline{
				flex-direction: column;
				align-items: center;
			}
			.timeline::before{
				display: none;
			}
			.stage{
				margin-bottom: 1rem;
				width: 100%;
				max-width: 300px;
			}
			.stage::after{
				content: '';
				position: absolute;
				bottom: -10px;
				left: 50%;
				transform: translateX(-50%);
				width: 0;
				height: 0;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				border-top: 10px solid var(--brand-orange);
			}
			.stage .number{
				display: none;
			}
			.stage h3{
				margin-top: 0;
			}

			.stage:last-child::after{
				display: none;
			}
}
@media (max-height: 650px){
	.logo{justify-content: end;}
	.logo a{display: none;}
	.logo button{display: block;z-index: 1001;}
	.logo img{height: 4.0rem;}
	nav{background: var(--bg);flex-direction: column;gap:0;height:auto;width:auto;writing-mode: horizontal-tb; text-orientation: sideways;transition: right 0.25s ease-in-out;}
	.nav-links{flex-direction:column;gap:1rem; width:0px; height: 0px; padding-bottom: 0;}
	.nav-links a{display: block;padding: .5rem 5rem; font-size: 20px;}
	nav .deployed{height:auto; width: 100%;padding-bottom: 2em;}
	#navhome{display:block;}
	
}

@media (max-width:650px){
	h1{color:#fff}
	body{padding:0}
	.container{padding:0}
	.dlogo{width:50vw;margin:2em}
	.logo{justify-content: end;}
	.logo a{display: none;}
	.logo button{display: block;z-index: 1001;}
	.logo img{height: 4rem;}
	nav{background: var(--bg);flex-direction: column;gap:0;height:auto;width:auto;writing-mode: horizontal-tb; text-orientation: sideways;transition: right 0.25s ease-in-out;}
	.nav-links{flex-direction:column;gap:1rem; width:0px; height: 0px; padding-bottom: 0;}
	.nav-links a{display: block;padding: .5rem 5rem; font-size: 20px;}
	nav .deployed{height:auto; width: 100%;padding-bottom: 2em;}
	#navhome{display:block;}
	
	.container .hero {background-position: -7em;}
	.hero .hero-inner{padding:2rem; text-align: center;}
	.hero .hero-inner p{width:100%;}
	.hero .hero-inner h1{font-size:3.5rem;}
	#services{border-radius: 0;}
	.services-grid .card{flex-direction: column-reverse; align-items: center;}
	.card .stile p{line-height: 1.2em; margin: .25em;}
	.card .icon{width: 60%;}
	.services-grid img{width:100%}

	.carousel{padding-right: 27em; gap: 0.1em;}
	.carousel img{max-width:6em;}
	.concont{flex-direction: column; align-items: center; text-align: center;}

	.team{flex-direction: column; padding: 0 1em;}

	#form{width: 100%;}
	.contactBoard{
		padding-left: 0;
	}
	.faq-section{border-radius: 0;}
	.social{padding-top: 2em;}
	.member{width: 90%;}
	footer{display: flex; justify-content: center; margin-top: 1rem;}
	footer p{width:80vw}
}

.vWrapper{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    text-align: center;
	display:flex;
    align-items: end;
    justify-content: center;
}
#titleVid{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    /*filter: brightness(0.6);*/
}