/* General Navbar Styles */
.navbar {
    background-color: #333; /* Dark background for the navbar */
    color: white;
    padding: 10px 20px; /* Padding around the navbar */
    display: flex;
    justify-content: space-between; /* Space between logo and navigation links */
    align-items: center; /* Align items vertically */
    overflow: hidden; /* Prevents overflow */
}

/* Logo Style */
.navbar .logo a {
    text-decoration: none;
    color: white;
    font-size: 24px; /* Logo font size */
}

/* Navigation Link Styles */
.navbar ul {
    list-style: none;
    display: flex; /* Ensures nav items are in line */
    padding: 0;
    margin: 0; /* Removes default margin */
}

.navbar ul li {
    padding: 10px; /* Spacing between nav items */
}

.navbar ul li a {
    text-decoration: none;
    color: white; /* Links are white */
    transition: color 0.3s; /* Smooth transition for hover effect */
}

.navbar ul li a:hover {
    color: #4CAF50; /* Green color on hover */
}

/* Burger Menu Styles */
.burger-menu {
    display: none; /* Hide burger menu by default */
    font-size: 24px; /* Icon font size */
    background: none;
    border: none;
    color: white; /* Icon color */
    cursor: pointer;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .burger-menu {
        display: block; /* Show burger menu on smaller screens */
    }

    .nav-links {
        display: none; /* Initially hide nav links on smaller screens */
        flex-direction: column; /* Stack links vertically */
        width: 100%; /* Full width */
        position: absolute;
        top: 60px; /* Position below the navbar */
        left: 0;
        background-color: #333; /* Background color for dropdown */
    }

    .nav-links li {
        text-align: center; /* Center-align the links */
    }

    .nav-links li a {
        display: block; /* Make links block to fill horizontal space */
        padding: 10px; /* Larger clickable area */
    }
}

/* Display nav links on larger screens */
@media (min-width: 769px) {
    .nav-links {
        display: flex; /* Ensure nav links are displayed on larger screens */
    }
}