@font-face {
    font-family: "raj";
    src: url("assets/raj.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden; /* Prevents the main window/body from scrolling */
    font-family: sans-serif;
}

.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.header {
    height: 15dvh; /* Sets the exact dynamic viewport height */
    display: flex; /* Flexbox aligns and contains the SVG child */
    align-items: center; /* Centers vertically (optional) */
    justify-content: center; /* Centers horizontally (optional) */

    opacity: 1; /* Adjust this value (0.0 to 1.0) to control background transparency */
    z-index: 100;
}

.main-content {
    flex-grow: 1;
    overflow-y: auto; /* Adds a scrollbar ONLY if content overflows */
    background-color: #fff;
    padding: 1%;
    color: black;
    isolation: isolate;
}

.main-content::before {
    content: "";
    position: absolute;
    inset: 0; /* Stretches the pseudo-element to perfectly fill the container */
    background-image: url("images/339changebridge.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    opacity: 0.4; /* Adjust this value (0.0 to 1.0) to control background transparency */
    z-index: -1; /* Pushes the image behind the text content */
}

ul {
    list-style-type: none; /* Removes the bullet points */
    margin: 0; /* Removes default spacing above/below the list */
}

li {
    padding: 10px 0; /* 10px top and bottom, 0px left and right */
}
.make-bold {
    font-weight: bold; /* Or use a numeric value like 700 */
}

h1 {
    text-align: center;
}

.footer {
    text-align: center;
    background-color: #ffffff00;
    bottom: 0;
    z-index: 100;
    font-family: "RAJ", sans-serif;
    /*    margin-top: auto; Magic line: pushes the footer to the bottom */
}