body {
      background-color: #e6f4ea;
    }
    .welcome-text {
      font-size: 26px;
      font-weight: 700;
      color: #1b5e20;
    }
    .subtitle-text {
      font-size: 16px;
      color: rgba(0, 0, 0, 0.54);
    }
    .btn-start {
      background-color: #198754;
      border-radius: 12px;
      padding: 12px 0;
      font-size: 18px;
      font-weight: 700;
      width: 250px;
    }
    .btn-start:hover {
      background-color: #157347;
    }
    .tab-container {
      display: flex;
      justify-content: flex-end;
      padding: 1rem 2rem 0 2rem;
      background-color: #198754; 
      border-bottom: 2px solid #157347;
    }
    .nav-tabs .nav-link {
      color: white;
      border: none;
      border-bottom: 3px solid transparent; 
      background-color: #198754; 
    }
    .nav-tabs .nav-link.active {
      background-color: #157347;
      border-bottom: 3px solid white;
      color: white;
    }

    .nav-tabs .nav-link:hover:not(.active) {
      background-color: #198754; 
      border-bottom: none; 
    }
    .center-content {
      min-height: 90vh;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    .text-justified {
      text-align: justify;
      max-width: 700px;  
      margin-left: auto;
      margin-right: auto;
      padding: 0 1rem;
      line-height: 1.6;
      color: rgba(0, 0, 0, 0.65);
    }
    #about h2 {
      margin-bottom: 1rem;
    }
    .about-text {
  text-align: justify;
}

.about-text {
  text-align: justify;

  /* Optional: Ensure word wrapping */
  overflow-wrap: break-word;

  /* Required for line-clamp to work */
  display: -webkit-box;
  display: box; /* Standard syntax (less supported but included for future-proofing) */
  -webkit-box-orient: vertical;
  box-orient: vertical; /* Standard (not widely supported yet) */

  /* Line clamping */
  -webkit-line-clamp: 5;  /* WebKit-specific (Chrome, Edge, Safari) */
  line-clamp: 5;          /* Future standard (not yet fully supported in all browsers) */
  overflow: hidden;
}

@media (min-width: 992px) {
  .about-text {
    text-align: justify;
    overflow-wrap: break-word;

    display: -webkit-box;
    display: box;
    -webkit-box-orient: vertical;
    box-orient: vertical;

    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
  }
}

footer small {
  font-size: 0.85rem;
}