body {
  margin: 0;
  font-family: sans-serif;
  text-align: center;
  background: #fffcf5; /* sky blue background */
  overflow-x: hidden;
}

/* A fixed container the same size as your Canva design */
.page {
  display: none;
  position: relative;
  width: 1366px;   /* set to the exact width of your Canva screenshot */
  height: 768px;   /* set to the exact height of your Canva screenshot */
  margin: 0 auto;  /* keeps it centered */
}

.page img {
  position: absolute;
  top: 0;
  left: 0;
  width: 1366px;
  height: 768px;
}

.page.active {
  display: block;
}

/* Hotspot (invisible buttons) */
.hotspot {
  position: absolute;
  background: rgba(255, 0, 0, 0); /* invisible */
  border: none;
  cursor: pointer;
}


/* Example positions for Page 1 (adjust as needed) */
.academic { top: 195px; left: 110px; width: 190px; height: 100px; }
.anxiety { top: 220px; left: 410px; width: 190px; height: 100px; }
.depression { top: 240px; left: 760px; width: 190px; height: 100px; }
.family { top: 250px; left: 1130px; width: 190px; height: 100px; }

.relationship { top: 550px; left: 80px; width: 200px; height: 100px; }
.bullying { top: 560px; left: 420px; width: 190px; height: 100px; }
.talk { top: 570px; left: 780px; width: 190px; height: 100px; }
.unsure { top: 520px; left: 1140px; width: 190px; height: 100px; }

/* Page 2 buttons */
.fine { top: 310px; left: 90px; width: 200px; height: 180px; }
.littleoff { top: 310px; left: 460px; width: 200px; height: 180px; }
.coping { top: 310px; left: 810px; width: 200px; height: 180px; }
.crisis { top: 310px; left: 1160px; width: 200px; height: 180px; }

/* Page 3 buttons (visible email buttons) */
.counselor1, .counselor2, .counselor3, .counselor4, .counselor5, .counselor6 {
  position: absolute;
  left: 650px;
  width: 200px;
  height: 50px;
  background: white;
  border: 2px solid #000;
  border-radius: 25px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

/* Counselor grid (2 columns × 3 rows) */
.counselor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  position: absolute;
  top: 275px;   /* adjust to match your white bubbles */
  left: 500px;  /* adjust to center on your template */
  width: 800px; /* total width for two columns */
}

.counselor-grid button {
  padding: 15px;
  background: white;
  border: 2px solid #000;
  border-radius: 15px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  width: 100%;   /* each button fills its grid cell */
  height: 60px;
}