/* Section itself can have page background or remain white */
#introduction {
  display: flex;
  justify-content: center; /* center the intro-text horizontally */
  padding: 40px 20px;  
      /* spacing around the card */

  /* gradient background: top black, bottom white */
   /* top black, bottom white */
  background: linear-gradient(to bottom, #000000 0%, #000000 50%, #ffffff 50%, #ffffff 100%);
      margin-top: 45px;
}

/* Intro-text is the white card */
/* Intro-text is the white card */
.intro-text {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 60px 30px;
  max-width: 900px;
  width: 100%;
  text-align: justify;
  /* Shadow only on top */
  box-shadow: 0 -8px 20px rgba(0,0,0,0.1);
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  line-height: 1.8;
  color: #222;
}


/* Optional: style bold text in paragraph for emphasis */
.intro-text b {
  font-weight: 600; /* slightly bolder for highlighted words */
}

.intro-text h2 {
  font-size: 32px;
  margin-bottom: 20px;
  color: #222;
}

.intro-text p {
  font-size: 15.6px;
  line-height: 1.6;
  color: #555;
  margin-bottom: 30px;
}

.intro-text .explore-btn {
  display: inline-block;
  padding: 12px 28px;
  background-color: #0077cc;
  color: #fff;
  font-weight: 600;
  border-radius: 12px;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.intro-text .explore-btn:hover {
  background-color: #005fa3;
  transform: translateY(-3px);
}