body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 10%;
}

#hero-text {
  max-width: 900px;
  font-family: "Inter", Arial;
  font-size: 3em;
  font-weight: 600;
  color: #000000;
}

.highlight {
  color: #FFFFFF;
  text-shadow: 2px 2px 1px #000000, 2px -1px 1px #000000, -1px 1px 1px #000000, -1px -1px 1px #000000;
}

.highlight:hover {
  color: #000000;
  text-shadow: none;
}

.highlight.c1:hover {
  background-color: #D9EDF8;
}

.highlight.c2:hover {
  background-color: #FFADAD;
}

.highlight.c3:hover {
  background-color: #FFD6A5;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    position: relative; /* Importante para que o botão .buy-button seja posicionado em relação ao body */
}

#hero-text {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 100px);
}

footer {
    color: white;
    padding: 20px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.buy-button {
    background-color: #4CAF50;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.2em;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
	font-family: 'Montserrat', sans-serif;

    /* Novas propriedades para posicionamento absoluto */
    position: absolute; /* O botão será posicionado em relação ao 'body' */
    bottom: 90px; /* Ajuste este valor para mover o botão para cima. Quanto maior, mais para cima. */
    left: 50%; /* Centraliza horizontalmente */
    transform: translateX(-50%); /* Ajuste final para centralizar precisamente */
}

.buy-button:hover {
    background-color: #45a049;
}