body {
      scroll-behavior: smooth;
    }
    .section-title {
      font-weight: bold;
      font-size: 2rem;
      margin-bottom: 1rem;
    }
    .bg-hero {
      background: linear-gradient(135deg, #0088ff, #00c6ff);
      color: white;
    }
    .card-hover:hover {
      transform: scale(1.03);
      box-shadow: 0 0 15px rgba(0,0,0,0.2);
      transition: 0.3s ease;
    }
    .section {
      padding: 4rem 0;
    }
    footer {
      background: #212529;
      color: white;
    }


    nav a {
  text-decoration: none !important;
}
.user-list img {
  width: 40px;
  height: 40px;
  object-fit: cover;
}

.message.sent {
  text-align: right;
}
.message.received {
  text-align: left;
}
.bubble {
  background: #fff;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 20px;
  position: relative;
  max-width: 75%;
}
.message.sent .bubble {
  background: #dcf8c6;
}
.unread-badge {
  font-size: 0.75rem;
  padding: 5px 7px;
  min-width: 24px;
  text-align: center;
}
.message.sent {
  text-align: right;
}
.message.received {
  text-align: left;
}
.bubble {
  display: inline-block;
  padding: 10px 15px;
  border-radius: 20px;
  max-width: 75%;
  position: relative;
  background: #fff;
}
.message.sent .bubble {
  background: #dcf8c6;
}