/* Media query for tablets and smaller screens */
@media screen and (max-width: 768px) {
    header {
        height: 40vh; /* Increase height for smaller screens */
    }

    .header-text {
        font-size: 4vw; /* Increase font size for readability */
    }

    .header-subtext {
        font-size: 3vw;
    }

    .navbar-img {
        max-height: 8vh; /* Adjust logo size for smaller screens */
    }

    .navbar {
        justify-content: center; /* Center navbar items */
        flex-direction: column; /* Stack items vertically */
    }
}

/* Media query for mobile phones */
@media screen and (max-width: 480px) {
    header {
        height: 50vh; /* Further increase height for mobile phones */
    }

    .header-text {
        font-size: 5vw;
    }

    .header-subtext {
        font-size: 4vw;
    }

    .navbar-img {
        max-height: 7vh; /* Further adjust logo size */
    }

    .navbar {
        justify-content: center; /* Ensure navbar items are centered */
        flex-direction: column; /* Ensure items are stacked vertically */
    }
}

.table-container {
    max-height: 400px; /* Adjust this height as needed */
    overflow-y: scroll;
    position: relative;
    width: 100%; /* Ensure the table container takes the full width */
}

.table-container table {
    width: 100%; /* Ensure the table takes the full width */
    table-layout: auto; /* Allow the table to adjust column widths based on content */
    word-wrap: break-word; /* Ensure words break properly within the cell */
}

.table-container thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: white;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    width: 20%; /* Adjust width as needed to fit your table */
}

.table-container tbody tr:hover {
    background-color: #f1f1f1;
}

/* Ensure the body takes up the full height of the viewport */
body, html {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Make sure the page content takes up all available space except the footer */
.page-content {
    flex: 1;
}

/* Style the footer */
.footer {
    background-color: #2e2e2e;
    color: white;
    padding: 5px;
    text-align: center;
    font-size: 12px;
    width: 100%;
    margin-top: 20px;  /* Add some spacing before the footer */
    box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.1);  /* Optional: adds a subtle shadow for depth */
    line-height: 1.0;  /* Reduce line height to remove spacing between paragraphs */
}

/* Custom styles for navigation tabs */
.nav-link {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #FFD700;  /* Gold color to make the text pop */
    text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.7);
}

.nav-link.active {
    background-color: #0056b3;  /* Darker blue for active tab */
    color: #ffffff;
}