.hero{background-size:cover;background-position:center;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.hero-overlay{background:rgba(0,0,0,.45);padding:6rem 0}
.feature-icon{width:3.5rem;height:3.5rem;display:inline-flex;align-items:center;justify-content:center;background:#0d6efd;color:#fff;border-radius:50%;font-size:1.75rem}
.status-message {
    max-width: 400px;
    margin: 1rem auto;
    padding: 1rem 1.5rem;
    background-color: #e6ffed;    /* pale green background */
    border: 1px solid #28a745;     /* green border */
    color: #155724;                /* dark green text */
    border-radius: 0.5rem;
    font-family: sans-serif;
    font-size: 1rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .error-message {
    max-width: 400px;
    margin: 1rem auto;
    padding: 1rem 1.5rem;
    background-color: #ffe6e6;   /* pale red background */
    border: 1px solid #dc3545;    /* bootstrap’s danger color */
    color: #721c24;               /* dark red text */
    border-radius: 0.5rem;
    font-family: sans-serif;
    font-size: 1rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }