#preloader {
              content: '';
              position: fixed;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background-color: rgba(0, 0, 0, 0.8);
              z-index: 9999;
              display: flex;
              justify-content: center;
              align-items: center;
              opacity: 0;
              animation: fadeIn 1s forwards; /* Fade-in animation */
            }

            @keyframes fadeIn {
              0% {
                opacity: 0;
              }
              100% {
                opacity: 1;
              }
            }

            .loader {
              text-align: center;
            }
            .loader {
            border: 8px solid #f3f3f3; /* Cor do fundo */
            border-top: 8px solid #3498db; /* Cor da borda do loader */
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite; /* Animação de rotação */
            }


            /* Animação de rotação */
            @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
            }

            /* Adicionando um efeito de carregamento do conteúdo da página */
            .content {
            visibility: hidden; /* Inicialmente a página está invisível */
            }


    :root {
      --rosa: #ff8fab;
      --rosa-hover: #ff5e73;
      --fundo: #fef6f0;
      --borda: #ccc;
      --sombra: rgba(0, 0, 0, 0.1);
    }

 
    html {
      scroll-behavior: smooth;
    }  
    body {
      font-family: 'Poppins', Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: var(--fundo);
      color: #333;
    }
    @media (max-width: 768px) {

      body {
        /*background-color: #ff5e73;*/
        /*background-color: #ff8fab;*/
      }
    }

    .form-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;
      min-height: 100vh;
      background-color: var(--fundo);
      width: 100%;
      box-sizing: border-box;
    }

    .form-container {
      background: white;
      padding: 0 2rem 2rem 2rem;
      border-radius: 12px;
      box-shadow: 0 0 10px var(--sombra);
      width: 100%;
      max-width: 600px;
      box-sizing: border-box;
    }
    .logo-colorida {
      font-weight: bold;
      font-size: 2.5rem;
      text-decoration: none;
      display: block;
      text-align: center;
      margin-bottom: 1rem;
      word-break: break-word;
    }

    .form-container h2 {
      text-align: center;
      color: var(--rosa);
      margin-bottom: 1rem;
      font-size: 1.8rem;
    }

    .form-container input,
    .form-container button {
      width: 100%;
      padding: 1.2rem;
      border-radius: 8px;
      border: 1px solid var(--borda);
      font-size: 1.2rem;
      box-sizing: border-box;
      margin-bottom: 1rem;
    }

    .form-container button {
      background-color: var(--rosa);
      color: white;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .form-container button:hover {
      background-color: var(--rosa-hover);
    }

    .form-container small {
      font-size: 0.9rem;
      color: #777;
    }

    .form-container small.form-text {
      margin-top: 0.5rem;
      display: inline-block;
    }

    .captcha-wrapper {
      display: flex;
      flex-direction: column;
    }

    .captcha-wrapper img {
      width: 100%;
      border-radius: 8px;
      border: 1px solid var(--borda);
      box-shadow: 0 2px 5px var(--sombra);
      margin-bottom: 0.5rem;
    }

    .form-container label {
      font-weight: bold;
      margin-bottom: 0.3rem;
      display: block;
      font-size: 1.3rem;
    }

    .form-container a {
      color: var(--rosa);
      text-decoration: none;
      font-weight: 600;
      font-size: 1.3rem;
      transition: color 0.3s ease;
    }

    .form-container a:hover {
      color: var(--rosa-hover);
      text-decoration: underline;
    }

    .form-container p {
      text-align: center;
      margin: 0.5rem 0;
      font-size: 1.2rem;
    }

    .olho {
      height: 36px;
      margin-left: 10px;
      margin-top: 10px;
    }

    #olho {
      transform: translateY(-50%);
      cursor: pointer;
    }

    .form-group {
      position: relative;
    }

    .form-container input[type="password"] {
      padding-right: 50px;
    }

    .olho {
      position: absolute;
      right: 10px;
      transform: translateY(-50%);
      cursor: pointer;
      z-index: 10;
      top: 35%;
    }

    .loading {
      cursor: not-allowed;
      background-color: #ccc;
    }

    .loading:before {
      content: "Entrando...";
      color: white;
      font-weight: bold;
    }

    header  {
      background-color: #ff8fab;
      color: white;
      text-align: center;
      padding: 2rem 1rem;
      margin-top: 0;
    }

    #aceitarCookies, #revogar_Cookies {
      color: white; /* Texto branco */
      border: none; /* Sem borda */
      padding: 12px 24px; /* Espaçamento interno */
      font-size: 1.1rem; /* Tamanho do texto */
      font-weight: bold; /* Peso da fonte */
      border-radius: 30px; /* Bordas arredondadas */
      cursor: pointer; /* Cursor de mãozinha */
      transition: all 0.3s ease; /* Transição suave para efeitos */
      display: inline-flex;
      justify-content: center;
      align-items: center;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      background-color: #8e44ad; /* Cor roxa para o fundo */
      outline: 3px solid #3498db; /* Largura de 3px, estilo sólido, cor azul */
    }

    #aceitarCookies:hover, #revogar_Cookies:hover {
      background-color: var(--rosa-hover); /* Mudar para uma cor mais escura ao passar o mouse */
      transform: scale(1.05); /* Leve aumento de tamanho ao passar o mouse */
    }

    #aceitarCookies:focus, #revogar_Cookies:focus {
      outline: none; /* Remove o contorno padrão do foco */
      box-shadow: 0 0 10px rgba(255, 140, 140, 0.8); /* Adiciona um brilho ao botão quando focado */
    }

    #aceitarCookies::after, #revogar_Cookies::after {
      content: "✔"; /* Adiciona um ícone de check (pode ser personalizado com outro ícone) */
      margin-left: 10px; /* Espaço entre o texto e o ícone */
      font-size: 1.4rem; /* Tamanho do ícone */
    }

    /* Rodapé */
    footer {
      background-color: #8e44ad; /* Fundo roxo */
      color: white;
      text-align: center;
      padding: 2rem 1rem;
      margin-top: 3rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-top: 2px solid #ff8fab; /* Borda superior para dar um efeito de separação */
    }

    /* Links no rodapé */
    .footer-nav {
      display: flex;
      justify-content: center;
      gap: 1rem;
      flex-wrap: wrap;
      margin-bottom: 1rem;
    }

    /* Estilo para os links */
    .footer-link {
      color: white;
      font-weight: 600;
      text-decoration: none;
      padding: 0.5rem;
      font-size: 1.1rem;
      position: relative;
      transition: color 0.3s ease, transform 0.3s ease;
    }

    /* Hover do link */
    .footer-link:hover {
      color: #ff8fab; /* Cor de destaque */
      transform: translateY(-2px); /* Levanta o link ao passar o mouse */
    }

    /* Efeito de linha abaixo do link no hover */
    .footer-link::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 0;
      right: 0;
      height: 2px;
      background-color: #ff8fab;
      transform: scaleX(0);
      transition: transform 0.3s ease;
    }

    .footer-link:hover::after {
      transform: scaleX(1);
    }

    /* Botão de revogar consentimento */
    .footer-btn {
      background-color: #ff5e73;
      color: white;
      border: none;
      padding: 12px 24px;
      font-size: 1.1rem;
      font-weight: bold;
      border-radius: 30px;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-top: 1rem;
    }

    .footer-btn:hover {
      background-color: #ff8fab;
      transform: scale(1.05); /* Leve aumento de tamanho */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adiciona sombra ao passar o mouse */
    }

    .footer-btn:focus {
      outline: none;
      box-shadow: 0 0 10px rgba(255, 140, 140, 0.8);
    }

    /* Responsividade */
    @media (max-width: 768px) {
      footer {
        padding: 1.5rem 0.5rem;
      }

      .footer-nav {
        flex-direction: column;
        gap: 0.8rem;
      }

      .footer-link {
        font-size: 1rem;
      }

      .footer-btn {
        width: 100%; /* Faz o botão ocupar toda a largura em telas pequenas */
        font-size: 1.2rem;
      }
    }