/* Basic reset */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* Container for the entire header section */
.header-container {
    background-color: #fff;
    padding: 10px 0; /* Adjust padding for a thinner header */
    text-align: center;
    position: fixed; /* Fix the header at the top */
    top: 0;
    width: 100%; /* Ensure it spans the entire width */
    z-index: 1000; /* Ensure it stays on top of other elements */
}

/* Container for the navigation bar */
.topnav {
    background-color: #fff;
    display: flex;
    justify-content: center; /* Center the links inside the bar */
    padding: 0; /* Remove extra padding */
    margin: 0; /* Ensure no extra margin */
}

/* Style for each navigation link */
.custom-bar-item {
    color: #000; /* Set text color to black */
    text-align: center;
    padding: 10px 15px; /* Adjust padding for a thinner header */
    text-decoration: none;
    font-size: 16px;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

/* Change border and text color on hover */
.custom-bar-item:hover {
    border-bottom: 3px solid #007BFF; /* Blue color for bottom border on hover */
    color: #007BFF; /* Change text color on hover */
}

/* Style for active navigation link */
.custom-bar-item.active {
    border-bottom: 3px solid #007BFF; /* Highlight color */
    color: #007BFF; /* Change text color to match highlight */
    font-weight: bold; /* Optional: make the text bold */
}


/* Add a separator between links */
.custom-bar-item:not(:last-child)::after {
    content: " | "; /* Add the separator */
    color: #000; /* Set separator color to black */
    margin-left: 8px; 
}

/* Styles for the search bar */
.search-container {
    margin: 10px auto; /* Center the search bar container */
    max-width: 500px; /* Optional: set a maximum width for the search bar */
    display: flex;
    justify-content: center; /* Center the search bar and button horizontally */
}

.search-container form {
    display: flex; /* Ensure the form's children are aligned in a row */
    margin: 0; /* Remove extra margin */
    padding: 0; /* Remove extra padding */
}

.search-input {
    width: 100%; /* Make input take up available space */
    padding: 8px; /* Adjust padding for a thinner header */
    border: 2px solid #ddd;
    border-radius: 4px 0 0 4px; /* Rounded corners for the left side */
    font-size: 16px;
}

.search-button {
    padding: 8px 16px; /* Adjust padding for a thinner header */
    border: 2px solid #007BFF;
    border-left: none; /* Remove left border to blend with input */
    border-radius: 0 4px 4px 0; /* Rounded corners for the right side */
    background-color: #007BFF;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}

.search-button:hover {
    background-color: #0056b3; /* Slightly darker blue on hover */
}

h2, h3 {
    margin: 20px 0; /* Add some space above and below headings */
    text-align: center; /* Center the text */
}

/* Ensure content is not hidden behind the fixed header */
body {
    padding-top: 80px; /* Adjust this value based on the height of your header */
}

/* Adjust content styling to ensure it appears below the header */
.content {
    padding: 20px; /* Add padding for spacing from the header */
}