h1 {
  font-size: 2.5em; 
      color: #024a08; 
}

h2 {
  font-size: 2.2em; 
      color: #024a08; 
}

h3 {
  font-size: 2em; 
      color: #024a08; 
}

h4 {
  font-size: 1.8em; 
      color: #024a08; 
}

p, li, ul {
  font-size: 1.2em; 
      color: black; 
}

.navbar-nav a {
  color: black !important;
    }

.navbar-nav a:hover {
    color: lightgray; /* Change the color on hover */
}


a:hover {
    color: #000000;
}

a {
    color: #024a08; 


}

.custom-container {
	background-color: #ffffff;
	 padding: 40px;
	 max-width: 100%;
	 border-top: 14px solid #ffffff;
}
.footer {
    width: 100%;
    background-color: #fff; /* Light gray background color */
    padding: 20px 0; /* Add padding for spacing */
    color: #333; /* Text color for the footer */
    text-align: center; /* Center-align the text */
}
.panel-default > .panel-heading {
    background-color:#024a08;
}
.image-container {
   position: relative;
   display: inline-block;
}

.image-container img {
    max-width: 100%;
    height: auto;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
        }

.overlay a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
        }

        .image-container:hover .overlay {
            opacity: 1;
        }
.image-container {
  position: relative;
  display: inline-block;
}

.thumbnail {
  max-width: 100%;
  height: auto;
}

.popup {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 50%;
  height: auto;
  opacity: 0; 
  transition: opacity 0.3s ease;
  z-index: 1; /* Ensure the pop-up image appears on top */
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-container:hover .popup {
  opacity: 1; /* Show the pop-up image on hover */
}

.pagination .page-link {
    color: darkgreen !important;
  }


@media (max-width: 700px) {
                div[style^='position: absolute;'] {
                    width: 80%;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }