.header-tabs {
    margin-top: 20px;
    margin-right: 20px;
    display: inline-block; /* Ensures the tabs are aligned inline */
}

.header-tab {
    margin-left: 10px;
    font-size: 16px;
    color: #007bff; /* Bootstrap primary color */
    text-decoration: none;
    padding: 8px 12px; /* Adds padding around the text for a larger clickable area */
    border-radius: 5px; /* Rounds the corners */
    transition: all 0.3s ease; /* Smooth transition for background and color changes */
    display: inline-block; /* Treat each tab as an inline block for proper padding and margin application */
}

.header-tab:hover, .header-tab:focus {
    color: #ffffff; /* Changes text color to white on hover/focus */
    background-color: #0056b3; /* Darker shade for hover effect */
    text-decoration: none; /* Removes underline on hover */
    border-radius: 5px; /* Ensures rounded corners are maintained on hover */
}

.footer {
    border-top: 1px solid #e7e7e7;
    color: rgb(1, 0, 0);
    font-size: 14px;
    padding: 8px 0; /* Adds vertical padding */
    text-align: center; /* Ensures the text is centered */
}