/* GENERAL RESET */
html {
scroll-behavior: smooth;
overflow-x: hidden;
}

body {
margin: 0;
padding: 0;
overflow-x: hidden;
width: 100%;
font-family: Orbitron, sans-serif;
background-color: #111;
color: #fff;
}

/* LOGO STYLING */
.logo {
max-width: 160px;
padding: 10px;
}

.logo img {
width: 100%;
height: auto;
display: block;
}

/* NAVIGATION */
nav {
background-color: transparent;
display: flex;
justify-content: center;
gap: 30px;
padding: 15px 0;
margin: 0;
}

nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 30px;
}

nav ul li {
margin: 0;
}

nav ul li a {
text-decoration: none;
color: white;
font-weight: bold;
font-size: 1.1em;
text-transform: uppercase;
padding: 8px 12px;
transition: background-color 0.3s ease;
}

nav ul li a:hover {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 5px;
}

/* HERO BANNER (shared) */
.hero {
position: relative;
width: 100%;
height: auto;
margin-bottom: 2rem;
}

.hero img.hero-bg {
width: 100%;
height: auto;
display: block;
object-fit: cover;
border-radius: 4px;
}

/* HOMEPAGE WELCOME SECTION */
.welcome-text {
background-color: #0a0a0a;
color: #f0f0f0;
font-family: Orbitron, sans-serif;
font-size: 1.1rem;
line-height: 1.7;
padding: 30px 25px;
border-radius: 6px;
max-width: 900px;
margin: 20px auto;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* ABOUT PAGE HERO TEXT */
.hero-text.about-hero-text {
position: absolute;
top: 12%;
left: 5%;
color: #fff;
font-family: Orbitron, sans-serif;
background-color: rgba(0, 0, 0, 0.65);
padding: 20px;
border-radius: 5px;
max-width: 85%;
}

.about-description {
background-color: #0d0d0d; /* matches homepage dark theme */
color: #f0f0f0; /* soft readable light text */
font-family: 'Orbitron', sans-serif;
font-size: 1.05rem;
line-height: 1.7;
padding: 30px 25px;
max-width: 1000px;
margin: 0 auto 50px auto;
border-radius: 6px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}