/* ------------------------ */
/* Body & Layout */
/* ------------------------ */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* full viewport height */
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background: #fafafa;
}

/* ------------------------ */
/* Main Content & Sections */
/* ------------------------ */
main {
  flex: 1;
  padding: 20px 40px; /* add horizontal padding */
  box-sizing: border-box; /* ensures padding included in width */
}

section {
  padding: 40px 0;      /* vertical spacing between sections */
  text-align: center;
}



section p, .hero p {
  max-width: 700px;     /* limit line width for readability */
  margin: 15px 0;       /* vertical spacing between paragraphs */
  padding: 0;           /* no extra inner padding needed */
  text-align: left;     /* left-aligned text */
  line-height: 1.6;     /* comfortable line spacing */
  margin: 15px auto; 
}

section h1,
section h2,
section h3,
section p {
  margin: 15px auto;    /* vertical spacing + horizontal centering */
  line-height: 1.6;     /* comfortable line spacing */
  max-width: 700px;     /* keeps text readable */
  text-align: center;
}


/* ------------------------ */
/* Site Title */
/* ------------------------ */

.site-title {
  text-align: center;
  padding: 20px 0;
  background: #fafafa; 
  color: #2e7d32;
}


.site-title h1 {
  margin: 0;
  font-size: 2rem;
}

/* ------------------------ */
/* Navbar */
/* ------------------------ */
nav.navbar {
  display: flex;
  justify-content: center; /* center nav links */
  background: #2e7d32;
  padding: 10px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

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

nav ul.nav-links li a {
  text-decoration: none;
  color: white;
  font-weight: 500;
}

nav ul.nav-links li a:hover {
  text-decoration: underline;
}

/* ------------------------ */
/* Hero Section */
/* ------------------------ */
.hero {
  text-align: center;
  padding: 70px 20px;
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  color: white;
}

.hero h2 {
  margin-bottom: 10px;
}

.hero p {
  max-width: 650px;
  margin: 10px auto;
}

/* Button */
.btn {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  background: white;
  color: #2e7d32;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
}

.btn:hover {
  background: #e8f5e9;
}

/* ------------------------ */
/* Footer */
/* ------------------------ */
/* ------------------------ */
/* Footer (Fixed at Bottom) */
/* ------------------------ */
footer {
  position: fixed;       /* fix at bottom */
  bottom: 0;             /* align to bottom */
  left: 0;
  width: 100%;           /* full width */
  background: #222;
  color: white;
  text-align: center;
  padding: 12px 0;       /* medium height */
  font-size: 0.95rem;    /* slightly smaller text */
  z-index: 1000;         /* above other content */
}