*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Georgia', serif; line-height:1.7; color:#3a2a1a; background:#f9f6f0; }
img { max-width:100%; height:auto; display:block; }
a { color:#8b5a2b; text-decoration:none; }
a:hover { text-decoration:underline; }

.container { max-width:1200px; margin:0 auto; padding:0 1rem; }
section { padding:4rem 0; }
h1, h2, h3 { color:#6b4423; font-weight:bold; text-align:center; }
h1 { font-size:2.2rem; margin-bottom:1rem; }
h2 { font-size:1.8rem; margin:2rem 0 1.5rem; }
p { margin-bottom:1rem; text-align:center; max-width:800px; margin-left:auto; margin-right:auto; }
ul, ol { max-width:700px; margin:1.5rem auto; text-align:left; }
li { margin-bottom:0.5rem; }

header {
  background:#6b4423; color:#fff; padding:1rem 0; position:sticky; top:0; z-index:1000;
}
header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-logo {
  height: 75px; /* Adjust size as needed */
  width: auto;
  border-radius: 50%; /* Makes the image circular */
}
nav ul { display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; list-style:none; }
nav a { color:#fff; font-weight:600; font-size:1rem; }
nav a:hover { color:#deb887; }

nav {
  flex-grow: 1;
}

.nav-toggle {
  display: none; /* Hidden on desktop */
}


.nav-open nav {
  transform: translateX(0);
}

.hero {
  color:#fff; padding:8rem 1rem; text-align:center;
}
.hero h1 {color:#fff; font-size:2.5rem; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); }
.hero p { font-style:italic; font-size:1.2rem; }

/* Specific hero backgrounds */
.hero-home {
  background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url('images/20231207_182441.jpg') center/cover no-repeat;
}
.hero-subpage {
  background:#f0e6d2;
  color:#3a2a1a; /* Darker text for light background */
  padding:4rem 1rem;
}
.hero-subpage h1 {
  color: #9e2900; /* darker 534741 color for better pop */
  text-shadow: 1px 1px 3px rgba(58, 42, 26, 0.7); /* Stronger shadow for contrast */
}
.hero-subpage p { font-style:normal; font-size:1.1rem; }

.btn {
  display:inline-block; background:#8b5a2b; color:#fff; padding:0.8rem 1.8rem;
  border-radius:50px; font-weight:600; margin-top:1.5rem; transition:background 0.3s;
}
.btn:hover { background:#a57040; }

table {
  width:100%; max-width:800px; margin:2rem auto; border-collapse:collapse; font-size:0.95rem;
}
th, td { padding:0.8rem; text-align:left; border-bottom:1px solid #ddd; }
th { background:#8b5a2b; color:#fff; }
tr:nth-child(even) { background:#f9f6f0; }

footer { background:#3a2a1a; color:#deb887; text-align:center; padding:2rem 1rem; font-size:0.9rem; }

/* Gallery Styles */
.gallery { background:#f0e6d2; }
.gallery-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1.5rem;
}
.gallery-item {
  background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,0.1);
  transition:transform 0.3s;
  display:flex; flex-direction:column;
}
.gallery-item:hover { transform:translateY(-5px); }
.gallery-item .img-container {
  width:100%; padding-top:75%; /* 4:3 ratio */
  position:relative; overflow:hidden;
}
.gallery-item img {
  position:absolute; top:0; left:0; width:100%; height:100%;
  object-fit:contain;
}
.gallery-item .caption {
  padding:1rem; font-size:0.95rem; color:#6b4423;
  text-align:center; font-style:italic; flex-grow:1;
  display:flex; align-items:center; justify-content:center; min-height: 60px;
}

/* Objectives list styling */
.objectives {
  background:#fff8f0;
  border:1px solid #deb887;
  border-radius:8px;
  padding:1.5rem;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}
.objectives li {
  margin-bottom:0.75rem;
  color:#3a2a1a;
  line-height:1.5;
}

/* Centered list for specific cases */
.centered-list {
  display: inline-block;
  text-align: left;
}

/* Remove spacing for items in the centered list */
.centered-list li {
  margin-bottom: 0;
}

/* Call-to-action block */
.cta {
  text-align:center;
  margin:3rem auto;
  padding:2rem;
  background:#6b4423;
  color:#fff;
  border-radius:12px;
  max-width:800px;
}
.cta p {
  font-size:1.2rem;
  margin-bottom:1rem;
}
.cta .btn {
  background:#deb887;
  color:#3a2a1a;
}
.cta .btn:hover {
  background:#f0d2a0;
}

@media (max-width:768px) {
  .hero { padding:5rem 1rem; }
  h1 { font-size:2rem; }
  table { font-size:0.85rem; }
  .gallery-grid { grid-template-columns:1fr; }

  .nav-toggle {
    display: block;
    position: absolute;
    z-index: 1001;
    right: 1.5rem;
    top: 0.75rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0.5rem;
  }

  .hamburger {
    display: block;
    position: relative;
    width: 1.5em;
    height: 2px;
    background: white;
    transition: transform 250ms ease-in-out;
  }

  .hamburger::before,
  .hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: white;
    transition: transform 250ms ease-in-out, opacity 250ms linear;
  }

  .hamburger::before { top: -6px; }
  .hamburger::after { bottom: -6px; }

  nav {
    position: fixed;
    background: rgba(58, 42, 26, 0.95);
    color: white;
    top: 0;
    right: 0;
    width: 70%;
    max-width: 300px;  /* cap the width */
    height: 30%;      /* full height */
    background: rgba(58, 42, 26, 0.95);
    z-index: 100;
    transform: translateX(100%);
    transition: transform 250ms cubic-bezier(.5, 0, .5, 1);
  }

  nav ul {
    list-style: none;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    margin: 0;
    padding: 0;
  }

  nav a {
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
    text-decoration: none;
  }

  .nav-open .hamburger {
    transform: rotate(.625turn);
  }

  .nav-open .hamburger::before {
    transform: rotate(90deg) translateX(-6px);
  }

  .nav-open .hamburger::after {
    opacity: 0;
  }

  header .container {
    justify-content: space-between; /* Puts logo on left, hamburger on right */
    position: relative;
  }
}