body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #F5F5DC; /* Beige yellow background for the entire website */
  overflow-x: hidden;
}
.p {
  color:#0B3D2E;
}
.container {
  width: 100%;
  max-width: 100%; /* Ensure container does not exceed the viewport width */
  margin: 0 auto;
  word-wrap: break-word; 
}

.z1 {
  z-index: 1;
}

.z2 {
  z-index: 2;
}

.z3 {
  z-index: 3;
  max-width: 50%;
}

.spacer {
  height: 200px; /* Adjust the height as needed to create sufficient space */
  width: 100%; /* Ensures the spacer takes full width */
}


.centered-container {
  display: flex;
  align-items: center;  /* Aligns vertically center */
  justify-content: center;  /* Aligns horizontally center */
  min-height: 75vh;  /* At least the height of the viewport */
  margin: 0 10%;  /* Adds 10% margin to left and right */
}


.image-container {
  /* Ensures the image does not overflow its container */
  max-width: 100%;  /* Limits the image width to the container's width */
  overflow: hidden;  /* Prevents any overflow */
}

.image-container img {
  /* width: 100%;  Makes the image fill the container */
  height: auto;  /* Maintains aspect ratio */
  max-height: 90vh;  /* Adjusts height so it's slightly less than the viewport to account for any top/bottom margins */
}

.image{
  width: 75vw;
  height: auto;
}

.top-header, .sub-header {
  padding: 32px 16px;
  text-align: left;
  margin-top: 1%;
}

.sub-header {
  width: 100%;
  text-align: center;
  display: block;
  max-width: 100%; /* Change from a fixed width to max-width to prevent overflow */
}

.sub-header h2 {
  font-size: 36px;
}

.sub-header .image-overlay-container {
  position: relative;
  text-align: center; /* Helps keep the image centered in all resolutions */
}

.sub-header .image-overlay-container img {
  display: block; /* Removes bottom margin/gap */
  max-width: 100%; /* Ensures the image is responsive */
  height: auto; /* Maintains the aspect ratio */
}

.sub-header .image-overlay-container .centered-image {
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust the position to truly center the image */
  max-width: 100%; /* Optional: limits the size of the overlay image */
}

#header-txt-overlay {
  max-width: 90%;
}

.image-overlay-container {
  top:10px;
  bottom: 10px;
}

.sub-header p, .text-section p, p {
  font-size: 24px;
}

.text-section {
  padding: 8px 16px;
}

.text-section h1, .text-section h2, .text-section h3 {
  margin: 0;
  padding: 16px 0;
  font-size: 24px;
}

.grid-container, .eco-trail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two-column layout */
  gap: 1em;
  margin: 1.5em;
  align-items: center;
  justify-content: center;
  color: #006400; /* Dark green text color */
}

.eco-trail-grid p {
  align-items: start;
}

.grid-item, .eco-grid-item {
  padding: 1em;
  text-align: center;
  color: #006400; /* Dark green text color */
  height: auto;
}

#stats {
  height: 0px;
}

/* .item1, .item2, .item5, .item6 {
  grid-column: 1 / -1; /* Span all columns */


/* .item3, .item4, .item7, .item8 {
  grid-column: span 1 / auto; /* Single column span */


.text-left {
  text-align: left; /* Aligns text to the left */
}

.text-right {
  text-align: right; /* Aligns text to the right */
}

.statistic {
  font-size: 48px;
  margin: px;
  font-size: 100px; /* Larger font size for statistics */
  font-weight: bold; /* Makes the statistic bold */
  color: #008000; /* A different shade of green for emphasis */
}


.image-text-container {
  display: flex;
  flex-direction: column;
}

.image-container img, .rain-image img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

@media (max-width: 768px) {
  .grid-container, .eco-trail-grid {
    grid-template-columns: 1fr; /* Stack to one column on smaller screens */
  }

  .top-header, .sub-header {
    padding: 16px 8px;
  }

  .item-1 {
      order: 2;
  }

  .item-2 {
      order: 1;
  }

  .item-3 {
      order: 3;
  }

  .item-4 {
      order: 4;
  }

  .item-5 {
    order: 1;
  }

  .item-6 {
      order: 2;
  }

  .item-7 {
      order: 4;
  }

  .item-8 {
      order: 3;
  }
}

@keyframes drop-in {
  0% {
    transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

span.space {
  white-space: pre; /* This preserves whitespace */
}

p span {
  display: inline-block;
  opacity: 0;
  animation: drop-in 0.6s forwards;
}