/*
Based on Aerial by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;900&display=swap");

/* Reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p,
a, em, img, ul, li, footer, header, nav, section {
margin: 0; padding: 0; border: 0;
font-size: 100%; font: inherit; vertical-align: baseline;
}
header, footer, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }

/* Base */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

body {
background: #1a3a3a;
overflow: hidden;
}

body.is-preload *, body.is-preload *:before, body.is-preload *:after {
animation: none !important;
transition: none !important;
}

body, input, select, textarea {
color: #fff;
font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
font-size: 15pt;
font-weight: 300;
letter-spacing: -0.025em;
line-height: 1.75em;
}

a {
transition: border-color 0.2s ease-in-out;
border-bottom: dotted 1px rgba(255,255,255,0.5);
color: inherit;
outline: 0;
text-decoration: none;
}
a:hover { border-color: transparent; }

/* ── Icon (FontAwesome via :before) */
.icon {
text-decoration: none;
position: relative;
}

.icon:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
text-transform: none !important;
font-family: 'Font Awesome 6 Free';
font-weight: 400;
}

.icon > .label { display: none; }

.icon.solid:before { font-weight: 900; }

.icon.brands:before { font-family: 'Font Awesome 6 Brands'; }

/* ── Wrapper */
@keyframes wrapper {
0%   { opacity: 0; }
100% { opacity: 1; }
}

#wrapper {
animation: wrapper 3s forwards;
height: 100%; left: 0; opacity: 0;
position: fixed; top: 0; width: 100%;
}

/* ── Background */
@keyframes bg {
0%   { transform: translate3d(0,    0, 0) scale(1.05); }
50%  { transform: translate3d(-2%, 0, 0) scale(1.08); }
100% { transform: translate3d(0,    0, 0) scale(1.05); }
}

#bg {
animation: bg 30s ease-in-out infinite;
backface-visibility: hidden;
background: #1e4a46 url("bg.jpg") center center / cover no-repeat;
height: 110%; left: -5%;
position: fixed; top: -5%; width: 110%;
}

/* ── Overlay */
@keyframes overlay {
0%   { opacity: 0; }
100% { opacity: 1; }
}

#overlay {
animation: overlay 1.5s 1.5s forwards;
background:
radial-gradient(ellipse at center, rgba(10,40,38,0.15) 0%, rgba(10,40,38,0.70) 100%),
linear-gradient(to bottom, rgba(0,60,50,0.3) 0%, rgba(0,20,18,0.65) 100%);
height: 100%; left: 0; opacity: 0;
position: fixed; top: 0; width: 100%;
}

/* ── Main */
#main {
height: 100%; left: 0;
position: fixed; text-align: center;
top: 0; width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

/* ── Header */
@keyframes header {
0%   { transform: translate3d(0, 1em, 0); opacity: 0; }
100% { transform: translate3d(0, 0,   0); opacity: 1; }
}

@keyframes nav-icons {
0%   { transform: translate3d(0, 1em, 0); opacity: 0; }
100% { transform: translate3d(0, 0,   0); opacity: 1; }
}

#header {
animation: header 1s 2.25s forwards;
backface-visibility: hidden;
cursor: default;
display: inline-block;
opacity: 0;
position: relative;
text-align: center;
width: 90%;
padding: 0 1em;
}

#header h1 {
font-size: 4.35em;
font-weight: 900;
letter-spacing: -0.035em;
line-height: 1em;
text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}

#header p {
font-size: 1.25em;
margin: 0.75em 0 0.1em 0;
opacity: 0.85;
}

#header p.location {
font-size: 0.95em;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.6;
margin-top: 0.3em;
margin-bottom: 0;
}

#header p.location i {
margin-right: 0.35em;
font-size: 0.9em;
}

#header nav {
margin: 1.5em 0 0 0;
}

#header nav li {
animation: nav-icons 0.5s ease-in-out forwards;
backface-visibility: hidden;
display: inline-block;
height: 5.35em;
line-height: 5.885em;
opacity: 0;
position: relative;
top: 0;
width: 5.35em;
}

#header nav li:nth-child(1) { animation-delay: 2.5s; }
#header nav li:nth-child(2) { animation-delay: 2.75s; }
#header nav li:nth-child(3) { animation-delay: 3s; }
#header nav li:nth-child(4) { animation-delay: 3.25s; }
#header nav li:nth-child(5) { animation-delay: 3.5s; }

#header nav a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
border: 0;
display: inline-block;
}

#header nav a:before {
transition: all 0.2s ease-in-out;
border-radius: 100%;
border: solid 1px #fff;
display: block;
font-size: 1.75em;
height: 2.5em;
line-height: 2.5em;
position: relative;
text-align: center;
top: 0;
width: 2.5em;
}

#header nav a:hover { font-size: 1.1em; }
#header nav a:hover:before {
background-color: rgba(255,255,255,0.175);
color: #fff;
}
#header nav a:active { font-size: 0.95em; background: none; }
#header nav a:active:before { background-color: rgba(255,255,255,0.35); }
#header nav a span { display: none; }

/* ── Footer */
#footer {
background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
bottom: 0; cursor: default;
height: 6em; left: 0;
line-height: 8em;
position: absolute;
text-align: center;
width: 100%;
}

#footer .copyright {
font-size: 0.7em;
opacity: 0.65;
letter-spacing: 0.02em;
}

/* ── Responsive: Wide */
@media screen and (max-width: 1680px) {
body, input, select, textarea { font-size: 13pt; }
}

/* ── Responsive: Normal */
@media screen and (max-width: 1280px) {
body, input, select, textarea { font-size: 12pt; }
}

/* ── Responsive: Mobile */
@media screen and (max-width: 736px) {
body { min-width: 320px; }
body, input, select, textarea { font-size: 11pt; }
#header h1 { font-size: 2.5em; }
#header p  { font-size: 1em; }
#header nav li { height: 4.5em; line-height: 4.95em; width: 4.5em; }
}