.floating-element {
            position: absolute;
            font-size: 30px; /* Tamanho do ícone */
            color: rgba(0, 76, 102, 0.8); /* Cor do ícone */
            animation: float 6s ease-in-out infinite;
			z-index:8;
        }

        @keyframes float {
            0% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0); }
        }
	body {
            font-family: 'Poppins', sans-serif; /* Define a fonte Poppins */
            margin: 0; /* Remove margens padrão do body */
            padding: 0; /* Remove preenchimento padrão do body */
            background-color: #00D7DF; /* Cor de fundo (opcional) */
            color: #333; /* Cor do texto (opcional) */
        }
        /* Estilos da Header */
        .header {
            background-color: #021C37;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding:50px;
			border-radius: 0% 0% 50% 50%;
			padding-left:10%;
			padding-right:10%;
			
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Sombra leve */
        }

        .header img {
            height: 50px; /* Ajuste a altura conforme necessário */
			
        }

        .btn-cta {
            background-color: #FFCC00; /* Cor chamativa para o botão */
            color: #004C66;
            border: none;
            border-radius: 25px;
            padding: 10px 20px;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }

        .btn-cta:hover {
            background-color: #FFD24D; color: #004C66; /* Cor mais escura ao passar o mouse */
        }

        /* Estilos da Section */
        .modern-section {
            background-color: #ECECFB; /* Cor da seção */
            padding: 60px 20px;
            margin: 40px auto;
            border-radius: 15px;
        }

        .modern-section h2 {
            color: #004C66;
            font-size: 2.5rem;
            margin-bottom: 20px;
            letter-spacing: 1px;
        }

        .modern-section p {
            font-size: 1.2rem;
            color: #555;
            margin-bottom: 30px;
        }

        .cta-button {
            background-color: #6DD900;
            color: #fff;
            padding: 15px 30px;
            font-size: 1.2rem;
            border: none;
            border-radius: 50px;
            text-transform: uppercase;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }

        .cta-button:hover {
            background-color:#F60;
			color:#fff;
        }

        /* Estilizando os cards */
        .info-card {
            background-color: #f0f0f0;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .info-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        }

        .info-card h3 {
            color: #004C66;
            font-size: 1.5rem;
            margin-bottom: 15px;
        }

        .info-card p {
            color: #555;
            font-size: 1rem;
            line-height: 1.6;
        }

        .info-card i {
            font-size: 3rem;
            color: #004C66;
            margin-bottom: 20px;
        }
		/* Estilos para o Formulário de Contato */
form input:focus {
    border-color: #004C66;
    box-shadow: 0 0 8px rgba(0, 76, 102, 0.5);
    transition: all 0.3s ease-in-out;
}

form button:hover {
    background-color: #006688;
    transition: background-color 0.3s ease-in-out;
}
footer {
    text-align: center;
}

footer img {
    max-width: 100%; /* Certifique-se de que a logo seja responsiva */
}

footer p {
    margin: 0;
    font-size: 14px; /* Tamanho de texto legível, mas discreto */
    color: white;
}
/* Efeito inicial de opacidade zero para todas as sections */
section {
    opacity: 0;
    transform: translateY(20px); /* Deslocamento inicial para baixo */
    transition: opacity 1s ease-out, transform 1s ease-out; /* Transição suave */
}

/* Classe que será adicionada automaticamente ao rolar a página */
section.visible {
    opacity: 1;
    transform: translateY(0); /* Remover deslocamento */
}

/* Estilo do botão de WhatsApp flutuante */
.whatsapp-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25D366; /* Cor característica do WhatsApp */
    border-radius: 50%; /* Torna o botão circular */
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra suave */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efeito de hover suave */
    z-index: 1000; /* Certifique-se de que o botão fica acima de outros elementos */
}

.whatsapp-button img {
    width: 30px; /* Tamanho do ícone */
    height: 30px;
}

.whatsapp-button:hover {
    transform: scale(1.1); /* Efeito de aumento no hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* Aumenta a sombra no hover */
}
/* Aplicar transições suaves a todos os links */
a {
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease; /* Transição suave para cor e transformações */
}

/* Efeito hover para links */
a:hover {
    color: #25D366; /* Exemplo de nova cor ao passar o mouse */
    transform: scale(1.05); /* Aumenta o tamanho no hover */
}

/* Adicionar transições a outros elementos, se necessário */
button,
.input,
.whatsapp-button {
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; /* Adicione outros efeitos conforme necessário */
}

/* Efeito hover para botões */
button:hover,
.whatsapp-button:hover {
    background-color: #006688; /* Exemplo de nova cor ao passar o mouse */
    transform: scale(1.05); /* Aumenta o tamanho no hover */
}
.offer-timer {
    background-color: #0D6EFD; /* Cor de fundo da seção */
    color: #fff; /* Cor do texto */
    text-align: center; /* Centraliza o texto */
    padding: 20px; /* Espaçamento interno */
    border-radius: 30px; /* Bordas arredondadas */
    margin: 20px 0; /* Margem superior e inferior */
    font-family: Arial, sans-serif; /* Fonte */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Sombra para profundidade */
}

h2 {
    margin: 0; /* Remove margem do título */
    font-size: 24px; /* Tamanho do título */
}

.offer-timer {
    background-color: #0D6EFD; /* Cor de fundo da seção */
    color: #fff; /* Cor do texto */
    text-align: center; /* Centraliza o texto */
    padding: 20px; /* Espaçamento interno */
    border-radius: 30px; /* Bordas arredondadas */
    margin: 20px 0; /* Margem superior e inferior */
    font-family: Arial, sans-serif; /* Fonte */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Sombra para profundidade */
}

h2 {
    margin: 0; /* Remove margem do título */
    font-size: 24px; /* Tamanho do título */
}

.countdown-timer {
    display: flex; /* Flexbox para layout horizontal */
    justify-content: center; /* Centraliza o conteúdo */
    gap: 15px; /* Espaço entre os itens do cronômetro */
}

.timer-box {
    background-color: #fff; /* Cor de fundo das caixas */
    color: #004C66; /* Cor do texto */
    padding: 20px 25px; /* Espaçamento interno */
    border-radius: 5px; /* Bordas arredondadas */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra nas caixas */
    font-size: 48px; /* Tamanho da fonte do cronômetro */
    font-weight: bold; /* Negrito */
    transition: transform 0.3s ease; /* Transição suave para o hover */
}

.timer-box:hover {
    transform: scale(1.1); /* Aumenta o tamanho no hover */
}
#countdown{background:#fff; color:#006; font-weight:bold; border-radius:5px; padding:10px;}

   .section-computer {
            width: 100%;
            padding: 50px;
            text-align: center;
			
        }

        .computer-container {
            position: relative;
            width: 500px;
            margin: 0 auto;
            animation: float 4s ease-in-out infinite;
			
        }

        .computer-container img {
            max-width: 100%;
        }

        .screen {
            position: absolute;
            top: 1%;
            left: -72%;
            width: 163%;
            height: 90%;
			border-radius:5px;
            overflow: hidden;
        }

        .screen img {
            position: absolute;
            width: 50%; /* Ajuste para o tamanho desejado */
            height: 100%; /* Mantenha a proporção */
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
		.screen img.active {
            opacity: 1;
        }
        /* Animação de troca de imagens */
        @keyframes changeImage {
            0% { opacity: 1; }
            20% { opacity: 0; }
            25% { opacity: 0; }
            45% { opacity: 1; }
            100% { opacity: 1; }
        }

        .screen img:nth-child(2) {
            animation-delay: 4s;
        }

        /* Efeito de flutuação suave */
        @keyframes float {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
            100% {
                transform: translateY(0);
            }
        }
        /* Section de Teste Grátis */
        .section-teste-gratis {
			margin-top:5%;
            background-color: #021C37;
            color: white;
            padding: 80px 0;
            text-align: center;
            position: relative;
        }

        .section-teste-gratis h2 {
            font-size: 36px;
            font-weight: 700;
            margin-top: 40px;
        }

        .section-teste-gratis p {
            font-size: 18px;
            margin-bottom: 30px;
        }

        .btn-teste-gratis {
            background-color: #ffcc00;
            color: #004C66;
            font-size: 20px;
            font-weight: 600;
            padding: 15px 30px;
            border-radius: 50px;
            border: none;
            transition: background-color 0.3s ease;
        }

        .btn-teste-gratis:hover {
            background-color: #FFD24D;
            color: #004C66;
        }

        /* Estilos para o selo com animação */
        .selo-teste-gratis {
            background-color: #ffcc00;
            color: #004C66;
            padding: 15px 25px;
            font-size: 18px;
            font-weight: bold;
            border-radius: 50px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            transform: rotate(-10deg);
            display: inline-block;
            margin: 0 auto 20px auto;
            animation: float 2s ease-in-out infinite, pulse 1.5s ease-in-out infinite;
        }

        .selo-teste-gratis span {
            display: block;
            font-size: 24px;
        }

        /* Animação de flutuação */
        @keyframes float {
            0%, 100% {
                transform: translateY(0) rotate(-10deg);
            }
            50% {
                transform: translateY(-10px) rotate(-10deg);
            }
        }

        /* Animação de pulso */
        @keyframes pulse {
            0%, 100% {
                transform: scale(1) rotate(-10deg);
            }
            50% {
                transform: scale(1.1) rotate(-10deg);
            }
        }

        /* Ajustes responsivos */
        @media (max-width: 768px) {
			        .computer-container {
            position: relative;
			height:auto;
            width: 100%;
            margin: 0 auto;
            animation: float 4s ease-in-out infinite;
			
        }
			#logo{position:absolut; display:inline-block;}
			.offer-timer {
				display:inline-block;
				position:absolute;
				width:70%;
				
    background-color: #004C66; /* Cor de fundo da seção */
    color: #fff; /* Cor do texto */
    text-align: center; /* Centraliza o texto */
    padding: 20px; /* Espaçamento interno */
    border-radius: 50px; /* Bordas arredondadas */
    margin-top:55%;
	margin-left:5%;
	z-index:999;
    font-family: Arial, sans-serif; /* Fonte */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Sombra para profundidade */
}
#logo{padding-right:10%;}
#countdown{margin-top:5%; background:none;}
.floating-element{display:none;}
            .section-teste-gratis h2 {
                font-size: 28px;
            }

            .section-teste-gratis p {
                font-size: 16px;
            }

            .selo-teste-gratis {
                font-size: 16px;
                margin: 0 auto 15px auto;
            }

            .selo-teste-gratis span {
                font-size: 20px;
            }
        }
		.box{max-height:160px; min-height:130px; padding:10px;}
		 /* Estilo para quando a seta aponta para baixo */
		 #scroll-arrow {
            position: fixed;
            bottom: 20px;
            right: 44%;
            font-size: 24px;
            transition: transform 0.2s ease;
			z-index:999;
			 animation: bounce 1s infinite alternate; /* Animação de "bounce" */
        }
		@keyframes bounce {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(-10px); /* Move para cima */
            }
        }
        .down {
            transform: rotate(0deg);
        }

        /* Estilo para quando a seta aponta para cima */
        .up {
            transform: rotate(180deg);
        }