@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Roboto&display=swap");
* {
  font-family: 'Poppins', sans-serif;
}

html {
  scroll-behavior: smooth !important;
}

/************* Header ******************/
.navbar {
  background-color: #212529;
}

.navbar .nav-item .nav-link {
  color: #fafafa;
}

header .container {
  position: relative;
  z-index: 2;
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  /*  height: 75%;*/
  width: 100%;
  /*  background-color: black;*/
  /*  opacity: 0.5;*/
  z-index: 1;
}

header .navbar {
  position: absolute;
  width: 100%;
  z-index: 3;
}

.jumbotron {
  position: relative;
  padding: 10rem 2rem 0 2rem;
}

/* header .overlay is a purely decorative darkening layer, but header
   never had position: relative -- so its position: absolute escaped to
   the viewport/document instead of staying scoped to this header, and
   on mobile (where some pages give it an explicit height in a media
   query) it could stretch far enough down the page to sit on top of,
   and swallow taps meant for, real content well below the header.
   pointer-events: none is the actual fix (it should never intercept
   clicks regardless of size); position: relative below restores proper
   containment so it cannot escape the header at all. */
header .overlay {
  pointer-events: none;
}

header {
  position: relative;
  background-image: url("../../assets/images/butterfly.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 75vh;
  min-height: 20rem;
}

/************* Description ******************/
.description .check-icon {
  margin-right: 1rem;
}

.description {
  background-color: #D4E8D2;
  padding: 1rem;
}

.card_description {
  border: 0;
  background: transparent;
}

.card_description {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/************* Footer ******************/
.footer {
  background-color: #c25929 !important;
  color: white !important;
  padding: 2rem !important;
}

.footer-item {
  list-style: none !important;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.85;
}

.footer-item:hover {
  color: black !important;
  cursor: pointer !important;
}

.footer-list {
  -webkit-padding-start: 0% !important;
          padding-inline-start: 0% !important;
}

/* Fixed/sticky icon bar (vertically aligned 50% from the top of the screen) */
.icon-bar {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 4;
}

/* Style the icon bar links */
.icon-bar a {
  display: block;
  text-align: center;
  padding: 4px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

/* Style the social media icons with color, if you want */
.icon-bar a:hover {
  background-color: #000;
}

.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.google {
  background: #dd4b39;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.youtube {
  background: #bb0000;
  color: white;
}

/*********** Scroll Top ***********/
#myBtn {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Fixed/sticky position */
  bottom: 20px;
  /* Place the button at the bottom of the page */
  right: 30px;
  /* Place the button 30px from the right */
  z-index: 99;
  /* Make sure it does not overlap */
  border: none;
  /* Remove borders */
  outline: none;
  /* Remove outline */
  background-color: #5D8220;
  /* Set a background color */
  color: #fafafa;
  /* Text color */
  cursor: pointer;
  /* Add a mouse pointer on hover */
  padding: 10px;
  /* Some padding */
  border-radius: 10px;
  /* Rounded corners */
  font-size: 18px;
  /* Increase font size */
}

@media screen and (max-width: 768px) {
  /*********** Jumbotron ***********/
  .jumbotron {
    position: relative;
    padding: 10rem 2rem 0 2rem;
  }
  /*********** Header ***********/
  header .overlay {
    height: 70%;
  }
  header {
    height: 70vh;
  }
  .navbar {
    background-color: #212529;
  }
  .navbar .nav-item .nav-link {
    color: #fafafa;
  }
}

@media screen and (min-width: 1024px) {
  .navbar .nav-item .dropdown-menu {
    display: none;
  }
  .navbar .nav-item:hover .nav-link {
    color: #fff;
  }
  .navbar .nav-item:hover .dropdown-menu {
    display: block;
  }
  .navbar .nav-item .dropdown-menu {
    margin-top: 0;
  }
  .navbar .nav-item:hover .dropdown-menu1 {
    display: none;
  }
  .navbar .dropend:hover .dropdown-menu1 {
    display: block;
  }
  .navbar .nav-item .dropdown-menu,
  .drop {
    font-size: .9rem !important;
  }
  .dropdown-menu1 {
    position: absolute;
    inset: 0px auto auto 0px;
    margin: 0px;
    -webkit-transform: translate(110px, 0px);
            transform: translate(110px, 0px);
    left: 15%;
    z-index: 2;
    display: none;
    min-width: 10rem;
    padding: .5rem 0;
    margin: 0;
    font-size: .9rem !important;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: .25rem;
  }
  .navbar {
    background-color: transparent !important;
  }
  .navbar-collapse {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
  .navbar-nav .nav-item .nav-link {
    color: white !important;
    font-size: .9rem !important;
    font-weight: lighter;
  }
  .jumbotron {
    position: relative;
    padding: 15rem 2rem 0 2rem !important;
  }
}
/*# sourceMappingURL=disclaimer.css.map */

/************* Hero ******************/
/* assets/images/sitemap.png -- a wide (2048x768) node/network graph, a fitting
   visual for a sitemap page. Already landscape-shaped (2.67:1), reasonably
   close to the hero's own aspect ratio at most screen sizes, so the base
   template's background-size:cover only crops modestly here -- no need to
   override it to contain, which (combined with the base template's fixed
   attachment, kept for the parallax effect) resolves sizing against the
   full viewport rather than the header's own 75vh box and left a visible
   gap at the top instead of filling the section. */
header {
  background-image: url("../../assets/images/sitemap.png") !important;
  background-position: center !important;
}

/* Page background matches the card's pale green instead of staying white,
   so the card blends into the body rather than sitting on a mismatched
   white gutter on either side of it. */
body {
  background-color: #D4E8D2;
}

/* Description card floats over the hero rather than spanning full width:
   on laptops/desktops it's a centered 62%-wide panel, so ~19% of hero photo
   stays visible on each side (the "peeking" effect) instead of the card
   wall-to-wall blocking the whole hero. Below lg it goes back to full width
   since a narrow centered card doesn't work on small screens. */
.description {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: -10rem auto 0;
  border-radius: 1.5rem 1.5rem 0 0;
}

@media screen and (min-width: 992px) {
  .description {
    width: 62%;
  }
}

@media screen and (max-width: 768px) {
  .description {
    margin-top: -5rem;
    border-radius: 1rem 1rem 0 0;
  }
}

/************* Sitemap page ******************/
.sitemap-section {
  margin-top: 2rem;
}

.sitemap-section h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #2f5d1f;
  border-bottom: 2px solid #94c590;
  padding-bottom: 0.4rem;
  margin-bottom: 0.75rem;
}

.sitemap-list {
  /* Multi-column flow instead of a grid: items of very different lengths
     (a 19-char "Board of Directors" next to a 70-char charter name) don't
     force each other into row-aligned tracks, so there's no dense-packing
     gaps or misaligned columns -- each item just takes the vertical space
     its own text needs, flowing down one column before starting the next. */
  list-style: none;
  padding-left: 0;
  margin: 0;
  columns: 300px 3;
  column-gap: 2rem;
}

.sitemap-list li {
  break-inside: avoid;
  margin-bottom: 0.6rem;
}

@media screen and (max-width: 600px) {
  .sitemap-list {
    columns: 1;
  }
}

.sitemap-list li a {
  display: flex;
  align-items: flex-start;
  gap: 0.45em;
  color: #212529;
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.5;
}

.sitemap-list li a::before {
  content: "";
  flex: 0 0 auto;
  width: 1.2em;
  height: 1.2em;
  margin-top: 0.17em;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cmask%20id%3D%22cut%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M9.5%207.5L15%2012L9.5%2016.5%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20fill%3D%22none%22%2F%3E%3C%2Fmask%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20fill%3D%22%23c25929%22%20mask%3D%22url(%23cut)%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Animated underline via a background gradient (not an absolutely
   positioned ::after) -- position:absolute inside a CSS multi-column
   container is unreliable across browsers and can paint against the wrong
   column fragment, showing up next to an unrelated item in another column.
   A background-size transition on the label span avoids that entirely. */
.sitemap-label {
  background-image: linear-gradient(#c25929, #c25929);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 2px;
  transition: background-size 0.3s ease;
  padding-bottom: 2px;
}

.sitemap-list li a:hover .sitemap-label {
  background-size: 100% 2px;
}