.popupOverlay { 
  margin: 0 auto  ; 
  padding: 0; 
  top: 0;
  height: 100vh; 
  background-color: #2C4436;
} 

.btn-open-popup { 
  padding: 12px 24px; 
  font-size: 18px; 
  background-color: green; 
  color: #fff; 
  border: none; 
  border-radius: 8px; 
  cursor: pointer; 
  transition: background-color 0.3s ease; 
} 

.btn-open-popup:hover { 
  background-color: #4caf50; 
} 

.overlay-container { 
  display: none; 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: rgba(0, 0, 0, 0.6); 
  justify-content: center; 
  align-items: center; 
  opacity: 0; 
  transition: opacity 0.3s ease;
  z-index: 999;
} 

.popup-box { 
  background-color: #2C4436;
  position: relative;
  padding: 24px; 
  border-radius: 12px; 
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); 
  width: 500px;  
  opacity: 0; 
  transform: scale(0.8); 
  animation: fadeInUp 0.5s ease-out forwards; 
} 

.form-container { 
  display: flex; 
  flex-direction: column; 
} 

/* .form-label { 
  margin-bottom: 10px; 
  font-size: 16px; 
  color: #444; 
  text-align: left; 
}  */

.form-input { 
  padding: 10px; 
  margin-bottom: 20px; 
  border: 1px solid #ccc; 
  border-radius: 8px; 
  font-size: 16px; 
  width: 100%; 
  box-sizing: border-box; 
} 
.form-h2{
  margin-bottom: 20px;
  color: rgb(236, 236, 236);
  font-family: 'Font Awesome 4 Pro';
  letter-spacing: 1.5px;
}
textarea{
  padding: 10px; 
  margin-bottom: 20px; 
  border: 1px solid #ccc; 
  border-radius: 8px; 
  font-size: 16px; 
  width: 100%; 
  box-sizing: border-box; 
}

.btn-submit { 
  padding: 12px 24px; 
  border: none; 
  border-radius: 8px; 
  cursor: pointer; 
  transition: background-color 0.3s ease, color 0.3s ease; 
} 

.btn-submit { 
  background-color: #E4C590; 
  color: #fff; 
  font-weight: bold;
  letter-spacing: 1.5px;
  font-size: 20px;
} 

.btn-close-popup {   
  color: #ffffff; 
  border: 1px solid rgb(255, 255, 255);
  padding: 5px 12px;  
  border-radius: 5px; 
  cursor: pointer; 
  transition: background-color 0.3s ease, color 0.3s ease; 
  font-weight: bold;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 9;
  background-color: transparent;
} 

.btn-submit:hover, 
.btn-close-popup:hover { 
  background-color: #0b0b0b; 
  color: #eaeaea;
} 

/* Keyframes for fadeInUp animation */ 
@keyframes fadeInUp { 
  from { 
    opacity: 0; 
    transform: translateY(-100px); 
  } 

  to { 
    opacity: 1; 
    transform: translateY(0); 
  } 
} 

/* Animation for popup */ 
.overlay-container.show { 
  display: flex; 
  opacity: 1; 
}