/* Reset and base styling */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  background: #FFFAF3;
  color: #696B6F;
  font-family: "Poppins", Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Container */
.container {
  text-align: center;
  padding: 2rem;
}

/* Main title */
h1 {
  font-size: 3rem;
  font-family: "PT Serif", serif;
  font-weight: 400;
  font-style: normal;
  color: #2F7497;
  letter-spacing: 1px;
}

h2 {
  font-size: 2rem;
  font-family: "Funnel Display", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  color: #FD8067;
  letter-spacing: 3px;
  margin-top: -0.4rem; /* moved up slightly to sit closer to h1 */
}

/* Tagline */
.tagline {
  margin-top: 1rem;
  font-size: 1.2rem;
}

/* Accent line */
.line {
  width: 60px;
  height: 3px;
  background: #7BC4C3;
  margin: 2rem auto;
  border-radius: 2px;
}

/* Small footer text */
.small-text {
  color: #7BC4C3;
  font-size: 1rem;
}

.hero-image {
  display: block;
  width: 320px;
  max-width: 90%;
  height: auto;
  margin: 1.25rem auto;
  border-radius: 12px;
  object-fit: cover;
}

/* Hero wrap for positioning stars */
.hero-wrap {
  position: relative;
  display: inline-block; /* shrink-wrap to image */
}

/* ensure the inline SVGs inherit sizing and use the desired color */
.star {
  position: absolute;
  fill: #F8B346; /* requested color */
  pointer-events: none;
  display: block;
  /* ensure SVG scales using width/height */
  width: 104px; /* doubled from 56px */
  height: 104px; /* doubled from 56px */
  will-change: transform;
}

/* top-left (larger) */
.star--tl {
  top: -18px;
  left: -40px;
    transform: rotate(-8deg);
}

/* bottom-right (smaller) */
.star--br {
  bottom: -8px;
  right: -18px;
  width: 72px; /* doubled from 36px */
  height: 72px; /* doubled from 36px */
  transform: rotate(10deg);
}

/* Responsive tweaks so stars scale down on small screens */
@media (max-width: 600px) {
  h1 {
    font-size: 2.2rem;
  }
  .tagline {
    font-size: 1rem;
  }
  h2 {
    margin-top: -0.25rem; /* gentler adjustment on small screens */
  }
  .star {
    width: 88px; /* doubled from 44px */
    height: 88px; /* doubled from 44px */
  }
  .star--br {
    width: 56px; /* doubled from 28px */
    height: 56px; /* doubled from 28px */
  }
}