/* 
  1) Reset and smooth scrolling
  2) Layout with flexbox/grid
  3) Modern card styling with shadows
*/

/* 1) Global Reset and Smooth Scrolling */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Enable smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
  font-family: "Segoe UI", Tahoma, sans-serif;
  background: #f9f9f9;
  color: #333;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 2) Make body a flex container in column direction */
body {
  display: flex;
  flex-direction: column;
}

/* 3) main (or .content-wrapper) grows to fill extra space */
main {
  flex: 1 0 auto; /* This ensures main grows to push footer down */
  /* No special styling needed unless you want padding, etc. */
}

/* 4) Footer remains at the bottom */
.site-footer {
  margin-top: auto; /* Tells the footer to "stick" at the bottom if content is short */
}

/* Keep your other existing site-footer styles:
   background: #3e8e41;
   color: #fff;
   text-align: center;
   padding: 1rem;
   etc.
*/

/* ------------------------------------------------------------------
   UPDATED HEADER & NAVIGATION SECTION (Sticky, Professional Look)
   ------------------------------------------------------------------ */


.logo-banner {
  background-color: #fff; /* Optional background color */
  text-align: center;       /* Center the logo horizontally */

}

.logo-banner .logo-img {
  max-height: 80px; /* Adjust as needed for your logo size */
  height: auto;
  width: auto;
}


/* ===== Sticky Navigation ===== */
.main-nav {
  position: sticky;
  top: 0;             /* Sticks to the top of the viewport */
  z-index: 999;       /* Ensures it's above other elements when scrolling */
  background-color: #3e8e41; /* Example color – adjust to your brand */
  padding: 1rem 0;   
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional subtle shadow */
}

.main-nav ul {
  list-style: none;
  display: flex;
  justify-content: center; /* Center all nav items horizontally */
  gap: 2rem;               /* Space between items */
  margin: 0;
  padding: 0;
}

.main-nav li a {
  color: #fff;             /* White text on the nav background */
  text-decoration: none;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.main-nav li a:hover {
  background: rgba(0, 0, 0, 0.1); /* Slight hover highlight */
}


.logo-img {
  max-height: 80px;   /* Adjust the size to your preference */
  height: auto;       /* Let the browser scale proportionally */
  width: auto;        /* or set a specific width if needed */
  display: block;     /* Or inline-block, depending on your layout */
  margin: 0 auto;     /* If you want to center the image horizontally */
}

.site-header {
  position: sticky;       /* Keep the header fixed at top on scroll */
  top: 0;
  z-index: 999;           /* Ensure it stays above other elements */
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #3e8e41;    /* Keep the brand color background */
  padding: 1rem 2rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow for a professional feel */
}

.logo h1 {
  color: #fff;
  font-size: 1.5rem;
  margin: 0;        /* Remove default heading margin */
  font-weight: bold;/* Emphasize organization name */
}

.navbar ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}

.navbar ul li a {
  color: #fff;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.navbar ul li a:hover,
.navbar ul li a.active {
  background: #2f6d2f;
}

/* ------------------------------------------------------------------
   BELOW HERE: Your existing sections remain unchanged
   ------------------------------------------------------------------ */



/* 3) Hero Section */
.hero {
  position: relative;
  background: url('../images/image.webp') center/cover no-repeat;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-text {
  text-align: center;
  color: #fff;
  max-width: 600px;
  margin: 0 auto;
  padding: 1rem;
}

.hero-text h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.hero-text p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

.hero-button {
  background: #3e8e41;
  color: #fff;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  transition: background 0.3s ease;
}
.hero-button:hover {
  background: #2f6d2f;
}

/* 4) Container helper class */
.container {
  width: 90%;
  max-width: 1100px;
  margin: 2rem auto;
}

/* 5) Highlights - using cards with flex or grid */
.highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 2rem;
}

.highlight-card {
  background: #fff;
  padding: 1.5rem;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  text-align: center;
}

.highlight-card h3 {
  margin-bottom: 0.5rem;
  color: #3e8e41;
}

.highlight-card p {
  margin-bottom: 1rem;
}

.card-btn {
  display: inline-block;
  background: #3e8e41;
  color: #fff;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s ease;
}
.card-btn:hover {
  background: #2f6d2f;
}

/* 6) Content Sections */
.content h2 {
  margin-bottom: 1rem;
  color: #3e8e41;
  font-size: 1.75rem;
}
.content p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

/* 7) Staff Cards (Grid) */
.staff-section {
  margin-top: 2rem;
}
.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1.5rem;
  margin-top: 1rem;
}
.staff-card {
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  padding: 1rem;
  text-align: center;
}
.staff-card h3 {
  color: #3e8e41;
  margin-bottom: 0.5rem;
}

/* 8) Consultancy Grid */
.consultancy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 1.5rem;
  margin-top: 1.5rem;
}
.consultancy-card {
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  padding: 1rem;
}
.consultancy-card strong {
  display: block;
  margin-bottom: 0.5rem;
  color: #3e8e41;
}

/* 9) Contact Form */
.contact-form {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
}
.contact-form label {
  font-weight: bold;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  margin: 0.5rem 0 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.contact-form button {
  align-self: start;
  background: #3e8e41;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.contact-form button:hover {
  background: #2f6d2f;
}

/* 10) Footer */
.site-footer {
  background: #3e8e41;
  color: #fff;
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
}

/******************************
 * Pagination styling 
 ******************************/
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;  /* center horizontally */
  gap: 1rem;                /* space between elements */
  margin-top: 2rem;
}

/* The button (Prev / Next) style */
.pagination button {
  background-color: #3e8e41;
  color: #fff;
  border: none;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;  /* pill shape */
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s ease;
}
.pagination button:hover {
  background-color: #2f6d2f;
}

/* Disabled state for clarity */
.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Page info text styling */
.pagination #pageInfo {
  font-weight: bold;
  font-size: 1rem;
  background: #eee;        /* or transparent */
  color: #333;             /* or brand color */
  padding: 0.5rem 1rem;
  border-radius: 999px;    /* optional pill shape for text too */
}

/*******************************
 * If you want STICKY to viewport
 *******************************/
/* 
.pagination {
  position: sticky;
  bottom: 0;
  background-color: #f9f9f9; 
  padding: 1rem;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.15);
}
*/

/* 
  This will keep the pagination bar pinned at the bottom 
  of the viewport as you scroll. 
  Make sure your container or main has enough height for scrolling, 
  so you can see the effect.
*/