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

header {
    background-color: #0066cc; /* Blue background */
    padding: 10px;
    text-align: center;
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.main-nav ul li {
    margin: 0 15px;
}

.main-nav ul li a {
    text-decoration: none;
    color: white; /* White font color */
    padding: 10px 20px;
    background-color: #0066cc;
    transition: background-color 0.3s, color 0.3s;
}

.main-nav ul li a:hover,
.main-nav ul li a.active {
    background-color: red; /* Red background when active or hovered */
    color: white;
}

main {
    padding: 20px;
}

footer {
    background-color: #f0f0f0;
    padding: 10px;
    text-align: center;
}
/* General styling for logo */
.header .brand-logo img {
    max-width: 100%;
    height: auto;
    /* Adjust max-width as needed to fit within the menu bar */
}

/* Ensure the menu bar height is controlled */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px; /* Adjust height as needed */
    padding: 0 10px; /* Adjust padding as needed */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .header {
        height: 50px; /* Adjust height for tablets and smartphones */
        padding: 0 5px; /* Adjust padding */
    }

    .header .brand-logo img {
        max-height: 100%; /* Ensure logo scales within header */
    }
}

@media (max-width: 480px) {
    .header {
        height: 40px; /* Adjust height for smaller smartphones */
        padding: 0 2px; /* Adjust padding */
    }

    .header .brand-logo img {
        max-height: 80%; /* Scale logo appropriately */
    }
}