/* ===== Phrase Section ===== */
#phrase {
  position: relative;
  background-color: #ffffff;   /* brand green background */
  color: #2E8B57;              /* white text for contrast */
  text-align: center;
  padding: 3rem 1rem;
  margin-bottom: 0.3rem;
  overflow: hidden;
}

/* Decorative subtle overlay (optional, adds depth) */
#phrase::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background: rgba(0, 0, 0, 0.1); */
  z-index: 0;
}

/* The phrase text */
#phrase h2 {
  position: relative;
  z-index: 1;
  font-family: 'Pacifico', cursive; /* signature-style font */
  font-size: 4rem;
  font-weight: 400;
    /* Gradient text */
  background: linear-gradient(90deg, #195232, #2E8B57);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
  margin: 0;
  line-height: 2;
  /*text-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); /* gives soft depth */
  animation: fadeInUp 1s ease-in-out;
}

/* ===== Scroll Ease-In Animation ===== */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px); /* small offset like iOS "bounce up" */
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================
      PHRASE – 768px
========================== */
@media (max-width: 768px) {
  #phrase {
    padding: 2.5rem 0rem;
  }

  #phrase h2 {
    font-size: 2.8rem;
    line-height: 1.2;
  }
}

/* ==========================
      PHRASE – 480px
========================== */
@media (max-width: 480px) {
  #phrase {
    padding: 2rem 0.8rem;
  }

  #phrase h2 {
    font-size: 2.6rem;
    letter-spacing: 0.5px;
    line-height: 1.15;
  }
}