@import url("variables.css");

@import url("reset.css");

@import url("header.css");

@import url("hero.css");

@import url("sections.css");

@import url("cards.css");

@import url("footer.css");

@import url("responsive.css");

.whatsapp-float{

position:fixed;

right:25px;

bottom:95px;

width:60px;

height:60px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:#25D366;

box-shadow:0 10px 25px rgba(0,0,0,.25);

z-index:999;

transition:.3s;

}

.whatsapp-float:hover{

transform:scale(1.08);

}

.whatsapp-float img{

width:34px;

}

html {
    scroll-behavior: smooth;
}

<style>
    @keyframes flutuar {
        0% {
            transform: translateY(0px);
        }
        50% {
            transform: translateY(-12px); /* Altura do movimento de subida */
        }
        100% {
            transform: translateY(0px);
        }
    }
    
    .celular-animado {
        animation: flutuar 4s ease-in-out infinite; /* Movimento contínuo e suave de 4 segundos */
    }
</style>

<style>
    @keyframes vooSuave {
        0% {
            transform: translateY(0px);
            filter: drop-shadow(0 10px 20px rgba(0,0,0,0.05));
        }
        50% {
            transform: translateY(-12px);
            filter: drop-shadow(0 20px 30px rgba(0,0,0,0.1));
        }
        100% {
            transform: translateY(0px);
            filter: drop-shadow(0 10px 20px rgba(0,0,0,0.05));
        }
    }

    /* O bloco de imagens ganha uma transição suave ao receber o mouse */
    .bloco-imagens-voando {
        transition: transform 0.5s ease, filter 0.5s ease;
        cursor: pointer;
    }

    /* Quando passa o mouse, a animação de voo infinito é ativada */
    .bloco-imagens-voando:hover {
        animation: vooSuave 4s ease-in-out infinite;
    }
</style>

.whatsapp-float {
    position: fixed;
    bottom: 90px; /* Posicionado logo acima do botão laranja de voltar ao topo */
    right: 20px;
    background-color: #25D366; /* Verde oficial do WhatsApp */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    transition: transform 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1); /* Efeito sutil ao passar o mouse */
}

#btnScrollToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #f28123; /* Tom de laranja aproximado da imagem */
  border: none;
  cursor: pointer;
  display: none; /* Começa escondido */
  align-items: center;
  justify-content: center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s, opacity 0.3s;
  z-index: 1000; /* Garante que fica por cima de tudo */
}

#btnScrollToTop:hover {
  background-color: #e07016; /* Laranja um pouco mais escuro no hover */
}

/* Estilização da seta branca */
.arrow-up {
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  /* Ajuste fino para centralizar verticalmente se necessário */
  transform: translateY(-2px); 
}

html {
    scroll-behavior: smooth;
}