/* Main Styles */
:root {
  --color-primary: #87cefa;
  --color-primary-hover: #679dbe;
  --color-bg: #000000;
  --color-bg-secondary: #0a0f14;
  --color-text: #ffffff;
  --color-text-secondary: #9ca3af;
  --max-width: 1280px;
  --border-radius: 0.5rem;
}

body.no-scroll {
  overflow: hidden;
}
/* Personalização da barra de rolagem */
::-webkit-scrollbar {
  width: 12px; /* Largura da barra de rolagem */
}

::-webkit-scrollbar-track {
  background-color: #17202a; /* Cor do fundo da trilha (cinza com azul claro) */
  border-radius: 10px; /* Bordas arredondadas para a trilha */
}

::-webkit-scrollbar-thumb {
  background-color: #87cefa; /* Cor do "polegar" (parte que o usuário arrasta) */
  border-radius: 10px; /* Bordas arredondadas para o polegar */
  border: 3px solid #17202a; /* Borda que separa o polegar da trilha */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #679dbe; /* Cor quando o usuário passa o mouse sobre o polegar */
}

::-webkit-scrollbar-corner {
  background-color: #17202a; /* Cor do canto da barra de rolagem */
}

body {
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
  min-height: 100vh;
}

span {
  color: var(--color-primary);
}

.division {
  width: 100%;
  height: 2px;
  background-color: #87cefa;
  margin: 5.5rem 0;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-bg);
  padding: 0.75rem 1.5rem;
  border-radius: var(--border-radius);
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background-color 0.3s;
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
}

.main2 {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 4rem 1rem;
}

.hero {
  text-align: center;
  margin-bottom: 2rem;
}

.hero h1 {
  font-size: 3.75rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.hero h1 span {
  color: var(--color-primary);
}

.hero p {
  color: var(--color-text-secondary);
}