img{max-width: 100%;}
body{
	background-image: url(./fundo_roxo.jpg);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	display: grid;
	place-content: center;
	min-height: 99.8vh;
}
.conteudo {
	background-image: url(./fundo_branco.jpg);
	background-size: cover;
	background-position: center;
	display: grid;
	padding: 50px;
	max-width: 80vw;
	grid-auto-flow: column;
	grid-template-columns: 1fr 1.5fr;
}


/* Estilização para o ícone flutuante do WhatsApp */
.whatsapp-flutuante {
    position: fixed; /* Fixa o elemento na tela */
    bottom: 5vw;    /* 20 pixels da borda inferior */
    right: 5vw;     /* 20 pixels da borda direita */
    z-index: 9999;   /* Garante que o ícone fique acima de outros elementos */
    display: block;  /* Para garantir que o link se comporte como um bloco */
    transition: transform 0.3s ease; /* Adiciona uma transição suave ao passar o mouse */
}

/* Efeito ao passar o mouse */
.whatsapp-flutuante:hover {
    transform: scale(1.1); /* Aumenta um pouco o tamanho ao passar o mouse */
}

.whatsapp-flutuante img {
    width: 60px;  /* Tamanho da imagem do ícone */
    height: auto; /* Mantém a proporção da imagem */
}
.whatsapp-flutuante {
    position: fixed;
    bottom: 5vw;
    right: 5vw;
    z-index: 9999;
    display: block;
    transition: transform 0.3s ease;
    animation: shake-whatsapp 0.5s infinite alternate; /* Adiciona a animação */
}

.whatsapp-flutuante:hover {
    transform: scale(1.1);
    animation-play-state: paused; /* Pausa a animação ao passar o mouse (opcional) */
}

.whatsapp-flutuante svg,
.whatsapp-flutuante img {
    width: 60px;
    height: auto;
}
@keyframes shake-whatsapp {
  0% { transform: translate(0); }
  25% { transform: translate(-5px, 0); }
  50% { transform: translate(5px, 0); }
  75% { transform: translate(-5px, 0); }
  100% { transform: translate(0); }
}

@media only screen and (max-width: 750px) {
.conteudo {
	grid-auto-flow: row;
	grid-template-columns: 1fr;
	grid-gap: 50px;
}
}