/*** Begin Fonts ***/
@font-face {
font-family: 'JetBrains Mono';
src: url('/content/assets/fonts/JetBrainsMono/JetBrainsMono.woff2') format('woff2'),
url('/content/assets/fonts/JetBrainsMono/JetBrainsMono.woff') format('woff'),
url('/content/assets/fonts/JetBrainsMono/JetBrainsMono.ttf') format('truetype');
font-weight: 100 800;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Inter';
src: url('/content/assets/fonts/Inter/Inter.eot');
src: url('/content/assets/fonts/Inter/Inter.eot?#iefix') format('embedded-opentype'),
url('/content/assets/fonts/Inter/Inter.woff2') format('woff2'),
url('/content/assets/fonts/Inter/Inter.woff') format('woff'),
url('/content/assets/fonts/Inter/Inter.ttf') format('truetype'),
url('/content/assets/fonts/Inter/Inter.svg#Inter') format('svg');
}

@font-face {
font-family: 'Manrope';
src: url('/content/assets/fonts/Manrope/Manrope.eot');
src: url('/content/assets/fonts/Manrope/Manrope.eot?#iefix') format('embedded-opentype'),
url('/content/assets/fonts/Manrope/Manrope.woff2') format('woff2'),
url('/content/assets/fonts/Manrope/Manrope.woff') format('woff'),
url('/content/assets/fonts/Manrope/Manrope.ttf') format('truetype'),
url('/content/assets/fonts/Manrope/Manrope.svg#Manrope') format('svg');
}
/*** End Fonts ***/

/*** Begin Root ***/
:root {
--primary-color: #2D68C4;
--secondary-color: #1F3A5F;

--primary-link: #353839;
--secondary-link: #8B008B;

--primary-text: #353839;
--secondary-text: #FFFFFF;

--main-background: #FFFFFF;
--primary-background: #FFFAFA;
--secondary-background: #000080;

--primary-border: #FAFAFA;
--secondary-border: #E2E2E2;

--primary-font: 'Manrope', sans-serif;
--heading-font: 'Inter', sans-serif;
--logo-font: 'JetBrains Mono', monospace;
}
/*** End Root ***/

/*** Begin Main Tags ***/
*,
*::before,
*::after {
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

html {
width: 100%;
min-height: 100%;
}

body {
margin: 0;
line-height: 1.4;
background-color: var(--main-background);
overflow: hidden !important;
font-family: var(--primary-font);
}

h1, h2, h3, h4, h5, h6 {
font-weight: bold;
font-family: var(--heading-font);
}

p {
font-weight: lighter;
font-family: var(--primary-font);
}
/*** End Main Tags ***/

/*** Begin Links ***/
a:link,
a:active,
a:visited {
color: var(--primary-link);
transition: all 0.5s;
text-decoration: none;
text-decoration: none;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
font-family: var(--primary-font);
}

a:hover {
color: var(--secondary-link);
text-decoration: none;
}
/*** End Links ***/

/*** Begin Header ***/
#bng_header {
height: 80px;
padding: 0;
position: relative;
background-color: var(--primary-background);
border-bottom: 1px solid var(--secondary-border);
box-shadow: 0 2px 12px rgb(0 0 0 / 4%);
}
#bng_header::after {
left: 50%;
height: 2px;
content: "";
bottom: -1px;
width: 100px;
position: absolute;
transform: translateX(-50%);
background-color: var(--secondary-background);
}

#bng_header .bng_logo {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

#bng_header .bng_logo img {
width: 200px;
max-width: 100%;
height: auto;
display: block;
}
/*** End Header ***/

/*** Begin Wrapper ***/
#bng_wrapper {
width: calc(100% - 2 * clamp(16px, 4vw, 48px));
max-width: 1200px;
margin-inline: auto;
}
/*** End Wrapper ***/

/*** Begin Content ***/
#bng-content {
display: flex;
width: calc(100% - 2 * clamp(16px, 2vw, 48px));
min-height: calc(100vh - 150px);
max-width: 1200px;
position: relative;
isolation: isolate;
text-align: center;
padding: 40px 20px;
align-items: center;
margin-inline: auto;
flex-direction: column;
justify-content: center;
}

#bng-content::before {
top: 50%;
left: 50%;
z-index: -1;
content: "";
width: 300px;
height: 300px;
opacity: 0.08;
position: absolute;
border-radius: 50%;
filter: blur(140px);
pointer-events: none;
background: var(--primary-color);
transform: translate(-50%, -50%);
}

.bng-light-spread {
position: absolute;
top: 50%;
left: 50%;
opacity: 0;
z-index: -1;
width: 300px;
height: 300px;
border-radius: 50%;
pointer-events: none;
filter: blur(140px);
transform: translate(-50%, -50%);
background: radial-gradient(circle, var(--primary-color) 0%, var(--primary-color) 20%, transparent 75%);
}

#bng-content .title {
margin-top: 8px;
padding-top: 24px;
position: relative;
margin-bottom: 2vw;
border-top: 1px solid var(--secondary-border);
}

#bng-content .title::before {
top: -2px;
left: 50%;
content: "";
width: 64px;
height: 2px;
position: absolute;
transform: translateX(-50%);
background-color: var(--primary-color);
}

#bng-content .title h1 {
margin: 0;
color: var(--secondary-color);
font-size: clamp(45px, 5vw, 60px);
font-weight: bold;
line-height: 1.8;
text-wrap: balance;
letter-spacing: -2px;
font-family: var(--heading-font);
}

#bng-content .description {
margin-bottom: 20px;
}

#bng-content .description a {
gap: 12px;
color: var(--primary-text);
flex-wrap: wrap;
display: inline-flex;
text-decoration: none;
align-items: baseline;
justify-content: center;
}

#bng-content .description h2 {
margin: 0;
color: var(--primary-color);
font-size: clamp(24px, 3vw, 32px);
line-height: 1.4;
letter-spacing: -0.5px;
}

#bng-content .description span {
color: var(--secondary-color);
font-size: clamp(16px, 2vw, 20px);
line-height: 1.5;
font-family: var(--logo-font);
}

#bng-content .about {
max-width: 650px;
}

#bng-content .about p {
margin: 0;
color: var(--primary-text);
font-size: clamp(15px, 1.5vw, 17px);
line-height: 1.9;
text-wrap: balance;
}

#bng-content .social {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--secondary-border);
position: relative;
}

#bng-content .social::before {
top: -1px;
left: 50%;
content: "";
width: 64px;
height: 2px;
position: absolute;
transform: translateX(-50%);
background-color: var(--primary-color);
}

#bng-content .social h3 {
margin: 0 0 16px;
font-family: var(--primary-font);
}

#bng-content .social a {
width: 35px;
height: 35px;
margin: 0 15px;
display: inline-block;
}

#bng-content .social img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
/*** End Content ***/

/*** Begin Coming Soon Animation ***/
#bng-content .title h1 .bng-dots span {
color: var(--primary-text);
opacity: 1;
transition: color 0.3s ease, opacity 0.3s ease;
}

#bng-content .title h1 .bng-dots span.active {
color: var(--primary-color);
}
/*** End Coming Soon Animation ***/

/*** Begin Footer ***/
footer {
min-height: 50px;
position: relative;
}

#bng_footer {
right: 0;
bottom: 0;
width: 100%;
display: flex;
min-height: 50px;
position: absolute;
align-items: center;
justify-content: center;
background-color: var(--primary-background);
border-top: 1px solid var(--secondary-border);
box-shadow: 0 -2px 8px rgb(0 0 0 / 5%);
}

#bng_footer .copyright {
text-align: center;
}

#bng_footer .copyright p {
margin: 0;
color: var(--primary-text);
font-size: 14px;
}
/*** End Footer ***/