body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

.header {
    background-color: RGBA(0, 139, 139, 0.5);
    /*color: #fff;*/
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer {
    /*background-color: #008b8b;*/
    background-color: RGBA(0, 139, 139, 0.5);
    /*color: #fff;*/
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center
}

.logo img {
    height: 40px;
}

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

.nav li {
    margin-left: 20px;
}

.nav a {
    color: #fff;
    text-decoration: none;
}

.nav a.active {
    background-color: #00008b; /* Dark blue for active state */
    color: #ffffff; /* Ensure text is readable on the dark background */
    border-radius: 5px; /* Optional: Add rounded corners */
}

.buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.buttons button.secondary {
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
}

.buttons button:hover {
    opacity: 0.8;
}

.buttons form {
    display: contents;
}

.tiles-wrapper {
  display: flex;
  flex-wrap: wrap;
  padding: 10px; /* Adjust as needed */
  margin: 10px; /* Adjust as needed */
  /* gap: 10px; /* Consider using gap for spacing if browser support is good */
}

.tile-container {
  /* flex-direction: column; Remove this if you want horizontal stacking within the tile */
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 300px; /* Set a fixed width for each tile */
  margin: 10px; /* Adjust spacing between tiles */
  background-color: #fff;
}

.tile-text {
  padding: 10px;
  text-align: center;
}

.tile-text h2 {
  margin: 0;
  font-size: 1.5em;
  color: #333;
}

.tile-text p {
  margin: 5px 0 10px;
  font-size: 1em;
  color: #666;
}

.tile-image img {
  width: 100%;
  height: auto;
  display: block;
}