Impedir rolagem lateral (Desktop e mobile)

				
					/* Impedir rolagem lateral Desktop */
body {
    overflow-x: hidden;
}

/* Limitar rolagem lateral em dispositivos móveis */
@media only screen and (max-width: 767px) {
    body {
        overflow-x: hidden;
    }
}

Animação de Float

				
					@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}

.object {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: float 3s ease-in-out infinite;
}

Efeito Vidro

				
					/* Adicione a classe "coluna-de-vidro" à sua coluna WordPress */

.coluna-de-vidro {
    background: rgba(255, 255, 255, 0.5); /* Cor de fundo com transparência */
    border-radius: 10px; /* Borda arredondada, ajuste conforme necessário */
    padding: 20px; /* Espaçamento interno, ajuste conforme necessário */
    margin: 20px 0; /* Espaçamento externo, ajuste conforme necessário */
    backdrop-filter: blur(10px); /* Efeito de desfoque no fundo, ajuste conforme necessário */
}

Degradê em texto

				
					.text-gradient {
    background: linear-gradient(90deg, #f3ec29, #88c987, #39b1d3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

Animação: Rotação de elemento

				
					/* Cria rotação no elemento aplicado*/
.rotate {
    animation: rotate 2s linear infinite;
}

Animação: Pra cima e pra baixo

				
					/* Cria animação de movimento para cima para baixo*/

@keyframes moveUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px); /* Ajuste este valor para controlar a distância do movimento */
  }
  100% {
    transform: translateY(0);
  }
}

.up-down {
  animation: moveUpDown 2s infinite; /* 2s é a duração da animação, infinite faz com que ela repita indefinidamente */
}

Botões Flutuantes

HTML

				
					<div class="floating-buttons">
    <a href="AQUI VAI O LINK DO WHATSAPP" target="_blank" class="whatsapp-button" aria-label="WhatsApp">
        <img decoding="async" src="AQUI VAI O LINK DA IMAGEM" alt="WhatsApp">
    </a>
    <a href="AQUI VAI O LINK DO INSTAGRAM" target="_blank" class="instagram-button" aria-label="Instagram">
        <img decoding="async" src="AQUI VAI O LINK DA IMAGEM" alt="Instagram">
    </a>
</div>

CSS

				
					/* Estilos dos botões flutuantes */
.floating-buttons {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 999;
}

.floating-buttons a {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.floating-buttons a:hover {
    transform: scale(1.1);
}

/* Imagens de ícones dentro dos botões */
.floating-buttons img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Cores de fundo para WhatsApp e Instagram */
.whatsapp-button {
    background-color: #25D366;
}

.instagram-button {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

Altera o estilo de Prev e Next do carrossel

				
					.elementor-swiper-button.elementor-swiper-button-prev

{   background: #266CFF;
    padding: 5px;
    border-radius: 10px;
}


.elementor-swiper-button.elementor-swiper-button-next
{   background: #266CFF;
    padding: 5px;
    border-radius: 10px;
}