* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Helvetica Neue', sans-serif;
  color: #333;
  line-height: 1.6;
}
header img {
  width: 100%;
  height: auto;
  display: block;
}
nav {
  background: #111;
  padding: 1rem;
  position: relative;
}
nav .menu-toggle {
  display: none;
  cursor: pointer;
  font-size: 24px;
  color: white;
}
nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
nav ul li {
  position: relative;
}
nav ul li a {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
}
nav ul li.has-submenu > a::after {
  content: " \25BE"; /* ▼ down arrow */
  font-size: 0.7em;
  margin-left: 4px;
}
nav ul li ul {
  display: none;
  position: absolute;
  background: #222;
  flex-direction: column;
  top: 100%;
  left: 0;
  z-index: 1;
  min-width: 180px; /* increase width to make submenu wider */
  padding: 0.5rem 0; /* optional for spacing */
}
nav ul li:hover ul {
  display: block;
}
h1 {
  color: rgb(49, 198, 171);
  margin: 1rem 0;
  font-size: 80;
}
.container {
  max-width: 960px;
  margin: auto;
  padding: 1rem;
  display: flex;
  align-items: center;      /* centers vertically */
  min-height: 80vh;         /* or 100vh to fill viewport height */
  padding: 1rem;
  flex-direction: column;   /* keep vertical flow */
}
.button {
  display: inline-block;
  position: relative;
  margin: 0 auto;
  background: rgba(46, 222, 190);
  color: white;
  padding: 0.6rem 1.2rem;
  margin-top: 1rem;
  text-decoration: none;
  border-radius: 5px;
  text-align: center;
}
.button.bottom-right {
  display: inline-block;
  background: rgb(46, 222, 190);
  color: white;
  padding: 0.6rem 1.2rem;
  margin-top: 1rem;
  text-decoration: none;
  border-radius: 5px;
  text-align: center;
  position: fixed;
  top: 80px;
  left: 40px;
  z-index: 10;
}
.float-left-img {
  float: left;
  width: 200px; /* adjust size */
  height: auto;
  margin: 60px;
  margin-right: 5rem; /* space between image and text */
  margin-bottom: 1rem;
}
.text-content {
  flex: 1;
}
@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    display: none;
  }
  nav.active ul {
    display: flex;
  }
  nav .menu-toggle {
    display: block;
  }
}
.text-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.text-block h1,
.text-block p {
  margin-bottom: 1rem;
}
.home-page {
  background-image: url("images/Startingpage.png");
  background-size: cover;       /* covers the full page */
  background-repeat: no-repeat; /* prevents tiling */
  background-position: center;  /* centers the image */
  min-height: 100vh;            /* ensures full height */
}
.home-page::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.60); /* semi-transparent black */
  z-index: -1; /* keep it behind content */
}
.text-highlight {
  background-color: rgb(46, 222, 190, 0.5); /* Set your desired background color */
}
footer {
  margin-top: 40px;
  padding: 20px;
  background-color: #f8f8f8;
  text-align: center;
  font-size: 0.9em;
  border-top: 1px solid #ccc;
}
footer a {
  margin: 0 10px;
  text-decoration: none;
  color: #333;
}
/* Three image containers (use 25% for four, and 50% for two, etc) */
.picturecolumn {
  float: left;
  width: 33.33%;
  padding: 25px;
}

/* Clear floats after image containers */
.picturerow::after {
  content: "";
  clear: both;
  display: table;
}