body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-image: url('sss.png'); /* Corrija o caminho da imagem aqui */
  background-size: cover; /* Faz a imagem cobrir o corpo */
  background-position: center; /* Centraliza a imagem */
  background-repeat: no-repeat; /* Não repete a imagem */
  height: 100vh; /* A altura do body é ajustada à tela inteira */
  display: flex;
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  overflow: hidden; /* Remove barras de rolagem */
}

.container {
  width: 100%; /* O container ocupa todo o espaço disponível */
  display: flex; /* O container é um flex container */
  flex-direction: column; /* O container é orientado verticalmente */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Efeito de sombra */
  text-align: center; /* Centraliza o conteúdo dentro do container */
  max-width: 350px; /* Limita o tamanho do container */
  padding: 30px 10px;
  padding-top: 10px;
  margin-top: -50px;
  padding-bottom: 45px;
  background-color: rgba(0, 0, 0, 0.6); /* Fundo com leve transparência */
  backdrop-filter: blur(3px); /* Efeito de blur leve */
  border-radius: 10px; /* Arredondamento das bordas */
}

/* Ajustes para dispositivos móveis */
@media (max-width: 768px) {
  .container {
    max-width: 85%; /* Reduz a largura do container */
    padding: 30px 5px; /* Reduz o padding */
    border-radius: 8px; /* Ajusta o arredondamento */
  }

  .header-logo {
    width: 170px; /* Reduz o tamanho da logo */
    margin-bottom: 15px;
  }

  .title {
    font-size: 18px; /* Reduz o tamanho da fonte do título */
    margin-bottom: 50px;
  }

  .button {
    padding: 8px 25px; /* Reduz o padding dos botões */
    font-size: 14px; /* Reduz o tamanho da fonte */
    border-radius: 12px; /* Ajusta as bordas */
  }

  .social-link img {
    width: 30px; /* Reduz o tamanho das logos */
  }

  .modal-content {
    width: 90%; /* Ajusta a largura do modal */
    padding: 15px; /* Reduz o padding do modal */
  }

  .modal-img {
    width: 80px; /* Reduz o tamanho da imagem do modal */
    height: 80px;
  }
  
  .footer {
    font-size: 12px; /* Reduz o tamanho do texto no footer */
    padding: 5px 0; /* Ajusta o padding */
  }
}

.header-logo {
    width: 150px;
    margin-bottom: 20px;
}

.title {
    font-size: 24px;
    margin-top: -30px;
    margin-bottom: 40px;
    color: white;
}

/* Estilo dos botões */
.button-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.button {
    display: flex;
    align-items: center;
    padding: 10px 40px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 15px;
    font-size: 16px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #0056b3;
}

.icon {
    margin-right: 10px;
}

/* Botão Whatsapp com estilo personalizado */
.whatsapp {
  background: linear-gradient(45deg, #00b80f, #19ff38, #3cbe00, #1eff00);
  background-size: 200% 200%;
  animation: gradient-wave 4s ease infinite;
}

.whatsapp:hover {
  background: linear-gradient(45deg, #19ff38, #00b80f, #3cbe00, #1eff00);
  transform: scale(1.05);
}

/* Botão Instagram com estilo personalizado */
.instagram {
    background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4);
    background-size: 200% 200%;
    animation: gradient-wave 4s ease infinite;
}

.instagram:hover {
    background: linear-gradient(45deg, #dd2a7b, #f58529, #8134af, #515bd4);
    transform: scale(1.05);
}

/* Botão facebook com estilo personalizado */
.facebook {
  background: linear-gradient(45deg, #0077ff, #00aeff, #0026ff, #5a68ff);
  background-size: 200% 200%;
  animation: gradient-wave 4s ease infinite;
}

.facebook:hover {
  background: linear-gradient(45deg,  #00aeff, #0077ff, #0026ff, #5a68ff);
  transform: scale(1.05);
}

/* Botão site com estilo personalizado */
.rtec {
  background: linear-gradient(45deg, #6b42ff, #ab51ff, #d817ff, #a12fff);
  background-size: 200% 200%;
  animation: gradient-wave 4s ease infinite;
}

.rtec:hover {
  background: linear-gradient(45deg, #ab51ff, #6b42ff, #d817ff, #a12fff);
  transform: scale(1.05);
}

  .button-text0{
    margin-right: 75px;
      }
  .button-text1{
margin-right: 75px;
  }
  .button-text2{
    margin-right: 75px;
      }
      .button-text3{
        margin-right: 72px;
          }
          .button-text4{
            margin-right: 75px;
              }

   
   

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.modal-content {
    background-color: white;

    color: black;
    width: 80%;
    max-width: 400px;
    margin: 100px auto;
    padding: 20px;
    border-radius: 18px;
    position: relative;
    text-align: center;
}

.modal-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 20px;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    font-size: 40px;
}


.social-links {
  display: flex;
  justify-content: center;
  gap: 20px; /* Espaçamento entre os botões */
  margin-top: 20px;
}

.social-link {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.social-link img {
  width: 40px; /* Tamanho das logos */
  height: auto;
}


/* Estilização do botão principal e ícone fixo com alinhamento padrão */

  
  .icon {
    font-size: 24px;
    margin-right: 10px; /* Espaço entre ícone e o texto */
  }
  
  .divider {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.7);
    justify-content: start;
    margin-right: 10px;
  }
  
  .modal-btn {
    cursor: pointer;
    font-size: 25px;
    color: white;
    background-color: transparent;
    animation: gradient-wave 4s ease infinite;

}
  
  .modal-btn:hover {
    color: #ffffff; /* Cor do botão ao passar o mouse */
    transform: scale(1.05);

  }


/* Footer */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.600); /* Fundo escuro transparente */
  backdrop-filter: blur(3px); /* Efeito de blur leve */    
  color: #fff; /* Cor do texto */
  text-align: center;
  padding: 1px 0;
  font-size: 14px;
}

.footer-link {
  color: #00bfff; /* Cor do link */
  text-decoration: none;
 
}

.footer-link:hover {
  text-decoration: underline; /* Efeito de sublinhado no hover */
}

/* Animacao do efeito de onda para Instagram */
@keyframes gradient-wave {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
}