html, body {
  margin: 0; /* Reset any default margin */
  padding: 0; /* Reset any default padding */
}

html {
  height: 100%; /* Ensure html is at least the height of the viewport */
}

body {
  height: auto; /* Let the body grow with the content */
  display: flex;
  flex-direction: column;
  min-height: 100%; /* Ensure body is at least the height of the viewport */
  margin: 0; /* Reset any default margin */
}

#container {
  /* Remove min-height here */
  flex-grow: 1; /* Allow the container to grow and fill the space */
  display: flex; /* Make it a flex container */
  flex-direction: column; /* Stack children vertically */
}

#main {
  /* Ensure this element can grow with the content */
  flex-grow: 1;
  overflow-y: auto; /* Scroll if content is too long */
}

.footer {
  margin-top: auto;
  width: 100%; /* Footer should span the entire width */
}

.navbar-nav li {
    list-style-type: none;
}
.carousel-item img {
    height: 500px;
    object-fit: cover;
}
.navbar-expand-lg{
    background-color: #12477f;
}