/* Add this new rule at the very top */
html {
    overflow-y: scroll;
}

/* General Body Styles */
body.homepage {
    padding-top: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
    padding-top: 15px; /* Adjust to match header height */
}


.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ================================== */
/* HEADER & NAVIGATION              */
/* ================================== */

.main-header {
    background: transparent; /* Default state for homepage */
    padding: 1.5rem 0;
    border-bottom: 1px solid transparent;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo container styling */
.logo {
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    color: #fff; /* Default text color is white */
    display: flex;
    align-items: center;
    position: relative; /* Anchor for the absolute positioned images */
    padding-left: 60px; /* Make space for the logo image */
    transition: color 0.4s ease;
}

/* Base style for BOTH logo images */
.main-header .logo-image {
    height: 40px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 0.4s ease;
}

/* Navigation link styling */
.main-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

.main-nav ul li {
    margin-left: 20px;
}

.main-nav ul li a {
    text-decoration: none;
    font-weight: 500;
    color: #fff; /* Default link color is white */
    transition: color 0.4s ease;
}
/* NEW: Hover effect for the transparent header state */
.main-header .main-nav ul li a:hover {
    color: #97c9ff; /* Makes the white text turn a subtle light grey on hover */
}

/* Hamburger menu styling */
.hamburger-menu {
    display: none;
    /* ... other hamburger styles */
}
.hamburger-bar {
    background-color: #fff; /* Default bar color is white */
    /* ... other hamburger bar styles */
}


/* ================================== */
/* HEADER STATES (Transparent vs Scrolled) */
/* ================================== */

/* By default, the white logo is visible, black is not */
.main-header .logo-default { opacity: 0; }
.main-header .logo-white { opacity: 1; }

/* --- SCROLLED STATE --- */
.main-header.scrolled {
    background-color: #fff;
    border-bottom-color: #eaeaea;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.main-header.scrolled .logo,
.main-header.scrolled .main-nav ul li a {
    color: #333; /* Revert text and links to dark color */
}

.main-header.scrolled .main-nav ul li a:hover {
    color: #97c9ff; /* Restore hover color */
}

.main-header.scrolled .hamburger-bar {
    background-color: #333; /* Revert hamburger to dark color */
}

/* When scrolled, the black logo is visible, white is not */
.main-header.scrolled .logo-default { opacity: 1; }
.main-header.scrolled .logo-white { opacity: 0; }

/* NEW: When scrolled, make the dropdown menu background white */
.main-header.scrolled .main-nav {
    background-color: rgba(255,255,255,0.95);
}


/* ================================== */
/* HERO & CONTENT SECTIONS            */
/* ================================== */

.hero {
    background-color: #090A0F;
    position: relative;
    overflow: hidden;
    text-align: center;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

#starfield {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-content h1, .hero-content p {
    color: #fff;
}
.hero-content p {
    margin-bottom: 30px;
    font-size: 1.1rem;
}

.content-section {
    padding: 60px 0;
}

/* ================================== */
/* RESPONSIVE STYLES (Media Query)    */
/* ================================== */
@media (max-width: 768px) {
    /* ... all your responsive styles here ... */
}

/* You will need to re-add your other styles for buttons, forms, footers etc. here.
   The provided snippet focuses on fixing the header, but all your other rules should be
   pasted back into their logical sections. */

/* (For your convenience, I am pasting the rest of your CSS below this comment, but the fix is all in the code above) */
.btn { display: inline-block; background: #007bff; color: #fff; padding: 10px 20px; text-decoration: none; border-radius: 5px; border: none; cursor: pointer; font-size: 1rem; }
.content-section h2 { text-align: center; margin-bottom: 40px; font-size: 2.5rem; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center; }
.bg-light { background: #f9f9f9; }
.feature-row { display: flex; align-items: center; gap: 50px; }
.feature-text { flex: 1; }
.feature-image { flex: 1; }
.feature-image img { max-width: 100%; height: auto; border-radius: 8px; }
.main-footer { background: #333; color: #fff; text-align: center; padding: 20px 0; margin-top: 60px; }
.hamburger-menu { display: none; flex-direction: column; justify-content: space-around; width: 30px; height: 25px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 10; }
.hamburger-bar { width: 30px; height: 3px; background-color: #fff; border-radius: 5px; transition: all 0.3s ease-in-out; }
.btn:hover { background-color: #0056b3; transform: translateY(-2px); transition: all 0.2s ease; }
.contact-form { max-width: 600px; margin: 0 auto; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
.form-group input, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; }
.form-group textarea { resize: vertical; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: left; padding: 40px 20px; }
.footer-column h4 { margin-top: 0; margin-bottom: 10px; font-size: 1.2rem; color: #fff; }
.footer-column p, .footer-column ul { margin: 0; padding: 0; list-style: none; color: #ccc; }
.footer-column a { color: #ccc; text-decoration: none; }
.footer-column a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr; }
    .main-nav { display: none; position: absolute; top: 87px; left: 0; width: 100%; background-color: rgba(255,255,255,0); backdrop-filter: blur(10px);   }
    .main-nav.active { display: block; }
    .main-nav ul { flex-direction: column; width: 100%; }
    .main-nav ul li { margin: 0; text-align: center;  }
    .main-nav ul li a { display: block; padding: 0.5rem; color: #9b9b9b}
    .hamburger-menu { display: flex; }
    .hamburger-menu.active .hamburger-bar:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
    .hamburger-menu.active .hamburger-bar:nth-child(2) { opacity: 0; }
    .hamburger-menu.active .hamburger-bar:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }
    .grid { grid-template-columns: 1fr; }
    .feature-row { flex-direction: column; }
}