/* Navbar container styling */
.navbar {
    position: fixed; /* Makes the navbar fixed at the top of the viewport */
    top: 0;
    left: 0;
    width: 100%; /* Spans the full width */
    background-color: #1e293b; /* Dark background */
    color: white; /* White text color */
    z-index: 1000; /* Ensures it appears above other elements */
    display: flex; /* Align items */
    justify-content: space-between; /* Space between logo and links */
    align-items: center; /* Vertically center items */
    padding: 10px 20px; /* Add some padding */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow for better visuals */
}

/* Logo styling */
.nav-logo img {
    max-height: 50px; /* Adjust logo height */
    display: block;
}

/* Navigation links */
.nav-links {
    display: flex;
    gap: 20px; /* Space between links */
}

.nav-links a {
    color: white; /* White link color */
    text-decoration: none; /* Remove underline */
    font-size: 16px; /* Adjust font size */
    padding: 8px 12px; /* Add padding for clickable area */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effect */
}

.nav-links a:hover {
    background-color: #2563eb; /* Background color on hover */
    color: white; /* Text color on hover */
    border-radius: 5px; /* Slightly rounded edges */
}

/* Add spacing to prevent content overlap */
body {
    margin-top: 70px; /* Add space equal to navbar height */
}


/* Responsive Design */
@media (max-width: 768px) {
    .nav-links {
        flex-direction: column;
        background: rgba(0, 0, 0, 0.9);
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        display: none; /* Hidden by default for mobile */
        padding: 1rem 0;
    }

    .nav-links.active {
        display: flex;
    }
}