/* =====================
   Fundo da página
===================== */
body {
  background-image: url(fundo.png);
  background-size: cover;       /* cobre toda a tela */
  background-position: center;  /* centraliza a imagem */
  background-repeat: no-repeat;
  height: 100vh;
  background-attachment: fixed;
  margin: 0; /* remove margens padrão */
}

/* =====================
   Container de ícones
===================== */
.social-container {
  position: fixed;
  top: 80%;              /* centro vertical no desktop */
  left: 50%;             /* centro horizontal */
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row;   /* ícones lado a lado */
  gap: 60px;             /* espaço entre ícones */
}

/* =====================
   Ícones SVG
===================== */
.icon svg {
  width: 80px;
  height: 80px;
  fill: white;
  transition: transform .2s ease;
}

.icon:hover svg {
  transform: scale(1.15);
}

/* =====================
   Responsividade para celulares
===================== */
@media (max-width: 600px) {
  .social-container {
    top: auto;           /* remove centralização vertical */
    bottom: 5vh;         /* coloca os ícones próximos à parte inferior */
    left: 50%;           /* centraliza horizontalmente */
    transform: translateX(-50%);
    gap: 20px;           /* espaçamento menor para caber na tela */
  }

  .icon svg {
    width: 50px;         /* ícones menores */
    height: 50px;
  }
}