/* Modern CSS Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* ensure the viewport is known */
html, body { height: 100%; 
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10.67pt;   /* or 10.67px if you prefer exact pixel equivalent */
  font-weight: bold;
  line-height: 1.0;
  color: #333;}

body::before {
  content: "";
  position: fixed;     /* stays put while content scrolls */
  inset: 0;            /* full-viewport */
  z-index: -1;         /* sits behind everything */
  background-image: var(--site-bg);
  background-size: cover;     /* fills screen, keeps aspect */
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;       /* ignore clicks */
}

/* Header Styling */
header {
  background-color: white;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  
}

header h1 {
  margin: 0;
  color: #3A833C; /* Green color */
  font-weight: 600;
  text-align: center;
  font-size: 2.5rem;
  text-decoration-skip-ink: none;
  webkit-text-decoration-skip: none;
}

/* NAVIGATION BAR */
nav {
  background-color: #4CAF50; /* green background */
  padding: 15px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* FLEX MENU */
nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;          /* allows wrapping on smaller screens */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* NAV ITEMS */
nav li {
  margin: 8px 16px;
}

/* NAV LINKS */
nav a {
  color: black;
  text-decoration: none;
  font-weight: 600;
  padding: 8px 10px;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent; /* reserved for active underline */
}

/* HOVER EFFECT */
nav a:hover {
  color: #2C632F;            /* darker green text for contrast */
  background-color: #A7E9AF; /* light green background */
  border-radius: 4px;
}

/* ACTIVE PAGE UNDERLINE */
nav a.active {
  border-bottom: 3px solid #fff; /* white underline for current page */
}

/* Homepage Styling */
.homepage {
  padding: 0px;
}

/* Slideshow styling - added more details */
.slideshow-container {
  position: relative;
  height: 800px; /* Increased height for better viewing */
  overflow: hidden;
  margin-top: 20px;
  margin-bottom: 20px;
}

.slide {
  position: absolute;
  inset: 0;             /* top:0; right:0; bottom:0; left:0 */
  opacity: 0;
  pointer-events: none; /* avoid clicking hidden slides */
  transition: opacity 0.6s ease;
  display: block;       /* ensure block since we’re absolutely positioned */
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* show full image */
  background: #000; 
}

.caption {
  position: absolute;
  top: 30px;
  left: 50%;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 15px;
  text-align: center;
  opacity: 0;
  transform: translateX(-50%);
  transform: translateY(20px);
  transition: all 0.3s ease;
  font-size: 1.2rem;
}

.slide.active {
  opacity: 1;
  pointer-events: auto;
}

.slide.active .caption {
  opacity: 1;
  transform: translateY(0);
}

/* Navigation buttons */
.slideshow-buttons {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.arrow {
  background-color: rgba(255, 255, 255, 0.7);
  color: #333;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  margin: 0 10px;
  transition: all 0.3s ease;
}

.arrow:hover {
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Dots */
.dots {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  margin: 0 5px;
  cursor: pointer;
}

.dot.active {
  background-color: #4CAF50; /* Green color */
}

.featured-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
}

.feature-tile {
  width: calc(33.33% - 20px);
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.feature-tile:hover {
  background-color: #f5f5f5;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.feature-tile h3 {
  margin-top: 0;
  font-size: 1.4rem;
  color: #4CAF50;
}

.icon {
  font-size: 2rem;
  margin-bottom: 10px;
}

/* Page Content Styling */
.page-content {
  padding: 0px;
  text-align: justify;
}

/* Footer Styling */
footer {
  background-color: #f8f9fa;
  text-align: center;
  border-top: 1px solid #eaeaea;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8pt;   /* or 10.67px if you prefer exact pixel equivalent */
}

.dollar-sign {
  font-size: 3rem;
  color: #2D7659;
  display: block;
  margin: 40px auto;
}

/* Responsive Design */
@media (max-width: 768px) {
  .homepage .slideshow-container {
    height: 800px;
  }

  .feature-tile {
    width: calc(50% - 20px);
  }
}

@media (max-width: 480px) {
  .feature-tile {
    width: 100%;
  }
  nav ul {
    flex-direction: column;
    align-items: center;
  }
  nav li {
    margin: 10px 0;
  }
}
/* ----- Page / Word-like layout ----- */
    :root {
      --page-width: 9.5in;
      --page-height: 11in;
      --margin: 1in;           /* typical Word default */
      --font-size: 10pt;       /* requested size */
      --line-height: 1.35;     /* close to Word default with 10pt */
      --para-indent: 0.25in;   /* mimic first-line indent visible in doc */
        /* point this to your 16:9 image (jpg/png/webp) */
      --site-bg: url("background.png");
    }


    bodyt {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      font-size: var(--font-size);
      line-height: var(--line-height);
      color: #111;
    }

    .page {
      font-family: 'Arial', Helvetica, sans-serif;
      font-size: 10pt;
      line-height: var(--line-height);
      font-weight: bold;
      width: calc(var(--page-width) - 2 * var(--margin));
      min-height: calc(var(--page-height) - 2 * var(--margin));
      margin: calc(var(--margin) - 0.25in) auto; /* slight visual balance on web */
      padding: var(--margin);
      background: #fff;
      box-shadow: 0 4px 24px rgba(0,0,0,.12);

    }

    /* ----- Typography to match Word feel ----- */
    h1t, h2t {
      font-weight: bold;
      margin: 0 0 0.2in 0;
      text-transform: uppercase; /* headings in doc are uppercase */
      letter-spacing: 0.5px;
      text-decoration-skip-ink: none;
      webkit-text-decoration-skip: none;
    }
    h1t {
      text-align: center;
      font-size: 14pt;  /* modestly larger but still conservative */
      margin-top: 0;
      text-decoration-skip-ink: none;
      webkit-text-decoration-skip: none;
    }
    h2t {
      font-size: 11pt;
      margin-top: 0.3in;
      text-decoration-skip-ink: none;
      webkit-text-decoration-skip: none;
    }
     h1 {
      color: #3A833C; /* Green color */
      text-decoration-skip-ink: none;
      webkit-text-decoration-skip: none;
     } 

      h1 u{
        text-decoration: underline;
      }
     h2 {
      text-decoration: underline;
      text-decoration-skip-ink: none;
      webkit-text-decoration-skip: none;
}

    p {
      margin: 0 0 0.14in 0;   /* compact Word-like spacing */
      text-indent: var(--para-indent);
      font-weight: bold;
      white-space: pre-wrap;  /* preserves the “soft hyphenation-like” breaks if present */
    }

    /* If your document uses bulleted lists anywhere, these styles
       make bullets look like Word defaults at 10pt Arial. */
    ult {
      margin: 0 0 0.14in 0.2in;
      padding-left: 0.18in;
    }
    lit {
      margin: 0 0 0.06in 0;
    }

    /* Optional small caps for the company line if desired */
    .kicker {
      text-align: center;
      font-variant: small-caps;
      font-size: 11pt;
      margin-bottom: 0.2in;
      text-transform: none; /* small-caps handles casing */
    }
.columns3 {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
}

.columns3 div {
  flex: 1;
}

.centered-section {
  width: 60%;              /* or any width you want for the centered block */
  margin: 0 auto;          /* centers the section itself on the page */
  text-align: left;        /* keeps the text inside left-aligned */
}

.star-list {
  list-style: none;            /* remove default bullets */
  padding-left: 1.2em;         /* indent list items slightly */
}

.star-list li::before {
  content: "*  ";               /* or use "★" if you prefer */
  color: #000;                 /* change color if you like */
  font-weight: bold;
}

/* Remove default bullets for all lists */
ul.custom-list {
  list-style: none;
  padding-left: 0;
  margin-left: 30px;
}

/* Top-level (*) */
ul.custom-list > li {
  position: relative;
  padding-left: 1.2em;
}

ul.custom-list > li::before {
  content: "*";
  position: absolute;
  left: 0;
  color: black; /* your site green */
  font-weight: bold;
}

/* Second level (-) */
ul.custom-list ul > li {
  position: relative;
  padding-left: 1.2em;
}

ul.custom-list ul > li::before {
  content: "-";
  position: absolute;
  left: 0;
  color: black; /* slightly darker green or your choice */
  font-weight: bold;
}

/* Third level (~) */
ul.custom-list ul ul > li {
  position: relative;
  padding-left: 1.2em;
}

ul.custom-list ul ul > li::before {
  content: "~";
  position: absolute;
  left: 0;
  color: black;
  font-weight: bold;
}


    /* Print support: keep the Word-like page on paper */
    @media print {
      body::before { display: none; }
      body { background: #fff; }
      .page {
        box-shadow: none;
        margin: 0;
        width: auto;
        min-height: auto;
        padding: 1in;
      }
    }