/* css/style.css */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background: #fff;
  color: #222;
  margin: 0;
  padding: 0;
}

.hero-section {
  background-color: #3dac78;
  min-height: 300px;
  padding: 3rem 1rem;
}

.max-600 {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.btn-primary {
  background-color: #3dac78;
  border-color: #3dac78;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #2b865b;
  border-color: #2b865b;
}

.card-title {
  color: #3dac78;
}

/* Modal overlay base styles */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1050;
  text-align: center;
  padding: 2rem 1rem;
}

/* Show modal when targeted */
.modal-overlay:target {
  display: block;
}

/* Background overlay acts as close button */
.modal-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  z-index: 1050;
}

/* Modal content box */
.modal-content {
  position: relative;
  display: inline-block;
  max-width: 400px;
  width: 90%;
  margin: 5% auto;
  background-color: #fff;
  padding: 2rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 1100;
  text-align: left;
}

.modal-content h3 {
  margin-top: 0;
  margin-bottom: 1rem;
}

.modal-content p {
  margin-bottom: 1rem;
}

.modal-content .btn {
  display: inline-block;
}

/* Responsive adjustments */
@media (max-width: 576px) {
  .hero-section {
    min-height: 250px;
  }
  .modal-content {
    max-width: 90%;
    padding: 1.5rem;
  }
}

/* Footer styling */
footer {
  font-size: 0.85rem;
}

/* Utility: max container width for paragraphs in About */
.container p {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}