html, body {
    position: relative;
    margin: 0;
    padding: 0;
    font-family: 'Work Sans', sans-serif;
    font-weight: 100;
    height: 100%;
    color: #666;
}

/* Navbar container styling */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;  /* Pushes the brand left and the nav-links right */
  padding: 16px;
  background-color: #f5f5f5;
}

/* Brand link styling */
.brand {
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  color: black;
}

/* Container for the navigation links */
.nav-links {
  display: flex;
}

/* Individual nav links styling */
.nav-links .nav-item {
  text-decoration: none;
  color: black;
  transition: text-decoration 0.3s;
  /* Using padding to space out the links instead of gap */
  padding: 0 16px;
}

/* Add hover effect on nav items */
.nav-item:hover {
  text-decoration: underline;
}


/* Home image container styling */
.home-image-container {
  height: calc(100vh - 64px); /* Full viewport height minus navbar height */
  width: 100%;
}

/* Home image container styling using a background image */
.home-image-container {
  height: calc(100vh - 64px); /* Full viewport height minus the navbar height */
  background: url('../meta_images/helenaHomeBackground.png') no-repeat center center;
  background-size: cover; /* Ensures the image expands in both directions until it covers the area */
  width: 100%;
}


.gallery-container {
  width: 100%;
  margin: 0 auto;
}

/* Style each image in the gallery */
.gallery-image {
  display: block;           /* Forces each image to be on its own row */
  margin: 20px auto;         /* Centers the image horizontally and adds vertical spacing */
  max-width: 25%;           /* Constrain the width to a maximum of 25% of the container */
  max-height: 25%;          /* Constrain the height to a maximum of 25% of the container */
  width: auto;              /* Allow natural scaling while preserving aspect ratio */
  height: auto;
}

.contact-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.contact-container h1 {
  text-align: center;
}

/* Basic styling for labels and inputs */
.contact-container label {
  display: block;
  margin-top: 15px;
  font-weight: bold;
}

.contact-container input,
.contact-container textarea {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  box-sizing: border-box;
}

/* Submit button styling */
.contact-container button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  cursor: pointer;
}

/* Asterisk styling for required fields */
.required {
  color: red;
}

/* Container for the About page content pushed to the left */
.about-container {
  display: flex;
  align-items: flex-start; /* Align items at the top */
  gap: 20px;             /* Space between the image and the text */
  max-width: 1000px;
  margin: 20px 20px 20px 0; /* Top, right, bottom margins set, left margin 0 */
  padding: 20px;
}

/* About page image container set to 20% of the container width */
.about-image {
  flex: 0 0 20%; /* Do not grow or shrink; fixed width at 20% */
}

/* Ensure the image fits within its container */
.about-image img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #ddd;
  border-radius: 5px;
}

/* Content section takes up the remaining space */
.about-content {
  flex: 1;
}

/* Responsive behavior: stack layout vertically on smaller screens */
@media (max-width: 768px) {
  .about-container {
    flex-direction: column;
    text-align: center;
    margin: 20px auto; /* Center on narrow screens if desired */
  }
  
  .about-image {
    flex: none;
    width: 60%;
    margin: 0 auto;
  }
}