/* === General Reset / Fullscreen Layout === */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: #000;
  font-family: sans-serif;
  overflow: hidden; /* optional, hides scrollbars if not needed */
}

/* Container for everything */
.landing-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* === Center Circle === */
.center-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Scale with viewport so it remains centered and responsive */
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  background-color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* Make the logo bigger */
.center-logo {
  max-width: 200%;
  max-height: 200%;
  z-index: 2; 
}

/* Text overlay (appears on hover) */
.center-text {
  position: absolute;
  color: #fff;
  padding: 1rem;
  font-size: 1.2rem;
  width: 80%;
  z-index: 3;
  display: none; /* hidden by default */
}

/* === Options Container === */
.options-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* zero width/height so our absolute transforms pivot at this center point */
  width: 0;
  height: 0;
  pointer-events: none; /* let the .option elements handle clicks */
}

/* === Each Option === */
.option {
  position: absolute;
  display: flex;         /* so the circle and text can sit side by side */
  align-items: center;
  color: #fff;
  font-weight: 700;      /* thicker text */
  cursor: pointer;
  pointer-events: auto;  /* make it clickable */
  text-decoration: none; /* just in case */
  white-space: nowrap;
}

/* Optional hover style */
.option:hover {
  opacity: 0.8;
}

/* White circle next to text */
.option-circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  margin-right: 8px;
}

/* === Position each button radially ===
   Adjust the translate() distance (e.g., 15vw) as desired. */
.option1 {
  transform: translate(15vw, 0);
}
.option2 {
   transform: translate(0, -15vw);
}
.option3 {
  transform: translate(0, 15vw);
}