/* Gradient Color Variables */
:root {
  --purple-main: #a855f7;
  --pink-main: #ec4899;
  --gradient-bg: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
  --gradient-shadow: rgba(168, 85, 247, 0.4);
}

/* Background and Header Section (UPDATED) */
.hero {
  /* CHANGED: Use a vibrant linear gradient from pink to purple, matching the image */
  background: linear-gradient(
    90deg,
    var(--pink-main) 0%,
    var(--purple-main) 100%
  );
  /* Note: I used 90deg (left-to-right) for the gradient direction based on the image, 
           and swapped the colors to match the image's pink (left) to purple (right) flow. */

  padding-top: 5rem;
  padding-bottom: 2rem;
  /* The border radius for the bottom edge is kept for the curve effect */
  border-radius: 2px 2px 2px 2px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Gradient Title Fix (UPDATED) --- */
.title {
  font-size: 3.5rem;
  font-weight: 900;
  margin-bottom: 0;
  text-align: center;
}

.title-text {
  /* CHANGED: Text color must be white (#fff) as it's sitting on a dark background */
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  /* Standard property */
  line-height: 1;
  /* Removing gradient clip to make the text solid white */
  -webkit-background-clip: unset;
  background-clip: unset;
}