/* ===== Hero Section ===== */
#hero {
  background: #141414; /* light background */
  padding: 80px 0;
}

#hero h1 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

#hero h1 span {
  color: #128fff; /* highlight color */
}

#hero p {
  font-size: 18px;
  color: #fff;
  margin-top: 15px;
}

#hero .btn-primary {
  background: #128fff;   /* your brand color */
  border: none;
  padding: 12px 28px;
  font-weight: 600;
  border-radius: 8px;
  transition: 0.3s;
}

#hero .btn-primary:hover {
  background: #4dacff;
}

#hero .btn-outline-dark {
  border: 2px solid #fff;
  color: #ffffff;
  padding: 12px 28px;
  font-weight: 600;
  border-radius: 8px;
  transition: 0.3s;
}

#hero .btn-outline-dark:hover {
  background: #fff;
  color: #141414;
}

/* Hero Image */
#hero img {
  max-width: 100%;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}