:root {
  /* Global Font Styles */
  --primary: #045639;
  --primaryLight: #ffffff;
  --footerColor: #124122;
  --bodyTextColor: #000000;
  --bodyTextColorWhite: #ffffff;

  /* Font Sizes */
  --topperFontSize: clamp(1rem, 1.6vw, 2.5rem);  /* 13px - 16px */
  --headerFontSize: clamp(3rem, 5vw, 8rem);  /* 31px - 49px */
  --bodyFontSize: 1rem;

  /* Padding */
  --footerPadding: clamp(1rem, 2.82vw, 3rem) 1rem;  /* 60px - 100px top and bottom */
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}

/* Ensure full height for the body and html */
html, body {
  height: 100%;
  margin: 0;
  font-size: var(--bodyFontSize);
}

/* Set up the grid layout for the body */
body {
  display: grid;
  grid-template-rows: 1fr auto;  /* Main content takes available space, footer at the bottom */
}

/* Fullscreen background image */
#background {
  background-image: url('./assets/park.jpg');  /* Replace with your image path */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100vw;
  position: relative;
  z-index: 0;
}

/* Black overlay on background image */
#background::before {
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);  /* Black with 0.3 opacity */
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;  /* Prevent interaction */
}

/* Centered content */
#content {
  z-index: 2;  /* Ensure content is above the background and overlay */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--bodyTextColorWhite);
  text-align: center;
  padding: clamp(20rem, 7.82vw, 5rem) 1rem;  /* 60px - 100px top and bottom */
}

/* Title styles */
.title {
  font-size: var(--headerFontSize);  /* Responsive font size */
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  line-height: 1.0em;
  margin-bottom: 0.3rem;
}

/* Subheading styles */
.subheading {
  font-size: var(--topperFontSize);  /* Responsive font size */
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  font-weight: 600;
  color: var(--primaryLight);
  margin-bottom: 1rem;
}

/* Main text styles */
.main-text {
  font-size: clamp(1rem, 1.95vw, 1.25rem);  /* Responsive font size */
  line-height: 1.5em;
  margin: 0 auto clamp(2rem, 4vw, 2.5rem) 0;
  margin-bottom: clamp(2.5rem, 4vw, 3rem);
}

/* Footer settings */
#footer {
  padding: var(--footerPadding);
  background-color: var(--footerColor);
  color: var(--bodyTextColorWhite);
  text-align: center;  /* Align content to the center */
  width: 100%;
  height: 80px;
  box-sizing: border-box;
  margin-top: auto;  /* Push the footer to the bottom */
}

/* Footer Container */
.footer-container-1 {
  max-width: 100%;
  margin: 0;  /* Center align the footer container */
  display: flex;
  flex-direction: column;
  align-items: center;  /* Align items to the center */
  gap: 0.5rem;
}

/* Icon and Font Style */
.footer-icon {
  width: auto;
  height: 1.0rem;
  margin-right: 0.5rem;
}

.footer-text {
  font-size: clamp(0.65rem, 2.2vw, 0.8rem);  /* Responsive font size */
  line-height: 1.1em;
  width: 100%;  /* Full width */
  max-width: 26.25rem;
}

.footer-header {
  font-size: 0.9rem;
  line-height: 1rem;
  text-transform: uppercase;
  font-weight: 200;
  margin-bottom: 0.1rem;
}

/* Navigation Link List Style */
.footer-nav-container {
  display: flex;
  flex-direction: column;
  align-items: center;  /* Align items to the center */
  gap: 0.5rem;
}

.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;  /* Align items to the left */
  gap: 0.5rem;
}

/* Navigation Link Style */
.footer-nav-link {
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--bodyTextColorWhite);
  transition: color 0.3s;
}

.footer-nav-link:hover {
  color: #d4d4d4;  /* Slightly lighter color on hover */
}