/* General Body Styles */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f8f9fa; /* Light grey background */
}

/* Main Content Area */
main {
    flex: 1;
}

/* Footer Styles */
.footer {
    background-color: #343a40; /* Dark background for footer */
    color: white;
    padding: 20px 0;
}

.footer a {
    color: #f8f9fa;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

/* Navbar Logo */
.navbar-logo {
    height: 40px; /* Set a fixed height for the logo */
    width: auto;
    margin-right: 10px;
}

/* Highlight style for updated questions */
.highlight {
    animation: highlight-animation 2s ease-out;
}

@keyframes highlight-animation {
    0% { background-color: #ffc107; } /* Bootstrap's warning yellow */
    100% { background-color: transparent; }
}

/* Home Page Banner */
.home-banner-container {
    height: 40vh; /* Set height relative to the viewport height */
    min-height: 300px; /* Minimum height */
    max-height: 550px; /* Maximum height */
    overflow: hidden; /* Hide any overflow */
}

.home-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the area without distortion */
}

/* Highlight for active navbar links */
.navbar-nav .nav-item .nav-link.active {
    background-color: rgba(255, 255, 255, 0.15); /* Slightly lighter background for active link */
    border-radius: 5px; /* Optional: add some rounded corners */
}

/* Highlight for active dropdown items */
.dropdown-menu .dropdown-item.active {
    background-color: #0d6efd; /* Bootstrap primary blue for active dropdown item */
    color: white;
}