.cta {
  position: relative;
  width: 100%;
  height: 100svh;
  margin-top: -0.75rem;
  padding: 0.75rem;
  background-color: var(--base-200);
}

.cta .container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  border-radius: 0.75rem;
  background-color: var(--base-400);
}

.cta-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  transform: translate(-50%, -50%);
}

.cta-inner h2 {
  font-size: clamp(2rem, 4vw, 4rem);
  color: var(--base-100);
}

.cta-compass {
  display: flex;
  justify-content: center;
  align-items: center;
}

#cta-compass-svg {
  width: 500px;
  height: 500px;
}

.cta-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.375rem;
  color: var(--base-100);
}

@media (max-width: 600px) {
  #cta-compass-svg {
    width: 300px;
    height: 300px;
  }
}