.elementor-445 .elementor-element.elementor-element-20cfe5a{--display:flex;--overflow:auto;--margin-top:-20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;overflow:visible;}.elementor-445 .elementor-element.elementor-element-2877385{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;overflow:visible;}.elementor-445 .elementor-element.elementor-element-2877385.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-445 .elementor-element.elementor-element-2d7d0aa{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.5;overflow:visible;}.elementor-445 .elementor-element.elementor-element-2d7d0aa:not(.elementor-motion-effects-element-type-background), .elementor-445 .elementor-element.elementor-element-2d7d0aa > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-445 .elementor-element.elementor-element-2d7d0aa::before, .elementor-445 .elementor-element.elementor-element-2d7d0aa > .elementor-background-video-container::before, .elementor-445 .elementor-element.elementor-element-2d7d0aa > .e-con-inner > .elementor-background-video-container::before, .elementor-445 .elementor-element.elementor-element-2d7d0aa > .elementor-background-slideshow::before, .elementor-445 .elementor-element.elementor-element-2d7d0aa > .e-con-inner > .elementor-background-slideshow::before, .elementor-445 .elementor-element.elementor-element-2d7d0aa > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#FFFFFF;--background-overlay:'';}.elementor-445 .elementor-element.elementor-element-f259ee2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;overflow:visible;}.elementor-445 .elementor-element.elementor-element-f259ee2:not(.elementor-motion-effects-element-type-background), .elementor-445 .elementor-element.elementor-element-f259ee2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0637A4;}:root{--page-title-display:none;}body.elementor-page-445{margin:-5px 0px 0px 0px;padding:0px 0px 0px 0px;}@media(min-width:768px){.elementor-445 .elementor-element.elementor-element-20cfe5a{--content-width:70%;}.elementor-445 .elementor-element.elementor-element-2877385{--width:95%;}.elementor-445 .elementor-element.elementor-element-f259ee2{--content-width:100%;}}/* Start custom CSS for html, class: .elementor-element-4ef1a8d */<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demonstração - Hero Section Decisioni</title>
    <!-- Incluindo o Google Fonts para uma aparência mais profissional -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap" rel="stylesheet">
    <!-- Incluindo Font Awesome para os ícones -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        /* Adicionando um reset básico e definindo a fonte padrão */
        body {
            margin: 0;
            font-family: 'Poppins', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* --- CÓDIGO CSS FORNECIDO E CORRIGIDO --- */

        /* --- Estilos para a Seção Hero/CTA --- */
        .decisioni-hero-section {
            background-color: #f0f4f8; /* Fundo suave para a Hero Section */
            padding: 80px 20px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 70vh; /* Altura mínima para ocupar bem a tela inicial */
            box-shadow: 0 4px 8px rgba(0,0,0,0.05);
            position: relative;
            overflow: hidden; /* Garante que elementos extras não vazem */
        }

        /* Efeito de fundo sutil (opcional, pode ser uma imagem de fundo também) */
        .decisioni-hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(240,244,248,0.8) 100%);
            z-index: 1;
        }

        .decisioni-hero-content {
            max-width: 900px;
            margin: 0 auto;
            position: relative;
            z-index: 2; /* Garante que o conteúdo fique acima do background-effect */
        }

        .decisioni-hero-content h1 {
            font-size: 3.2em; /* Título maior e impactante */
            color: #0637A4; /* Seu azul de marca */
            margin-bottom: 20px;
            line-height: 1.2;
            font-weight: 800; /* Super negrito para impacto */
        }

        .decisioni-hero-content p {
            font-size: 1.2em;
            color: #555;
            margin-bottom: 40px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        .decisioni-cta-form-wrapper {
            background-color: #ffffff; /* Fundo branco para o bloco do formulário/CTA */
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            max-width: 500px; /* Largura do formulário */
            margin: 0 auto;
            border: 1px solid #e0e0e0;
        }

        .decisioni-cta-form-wrapper h2 {
            font-size: 2em;
            color: #0637A4; /* Seu azul de marca */
            margin-bottom: 10px;
            font-weight: 700;
        }

        .decisioni-cta-form-wrapper .cta-subtitle {
            font-size: 1em;
            color: #666;
            margin-bottom: 25px;
        }

        /* --- Estilo para o Texto de Privacidade (CORRIGIDO) --- */
        .privacy-text, .privacy-text small {
            color: #555 !important; /* Cor mais escura para melhor legibilidade */
            margin-top: 15px;
        }

        /* --- Estilos para o Formulário Contact Form 7 (Simulado) --- */
        .decisioni-cta-form-wrapper .wpcf7-form-control-wrap {
            margin-bottom: 15px !important; 
            text-align: left;
        }

        .decisioni-cta-form-wrapper .wpcf7-form p {
            margin-bottom: 0 !important;
            padding: 0 !important;
        }

        .decisioni-cta-form-wrapper input[type="text"],
        .decisioni-cta-form-wrapper input[type="email"],
        .decisioni-cta-form-wrapper input[type="tel"],
        .decisioni-cta-form-wrapper textarea.wpcf7-textarea {
            width: 100% !important; 
            padding: 12px 15px !important; 
            border: 1px solid #ccc !important; 
            border-radius: 5px !important; 
            font-size: 1em !important; 
            color: #333 !important;
            transition: border-color 0.3s ease !important;
            box-sizing: border-box !important; 
        }

        .decisioni-cta-form-wrapper input::placeholder,
        .decisioni-cta-form-wrapper textarea::placeholder {
            color: #aaa !important; 
            opacity: 1 !important;
        }

        .decisioni-cta-form-wrapper input[type="text"]:focus,
        .decisioni-cta-form-wrapper input[type="email"]:focus,
        .decisioni-cta-form-wrapper input[type="tel"]:focus,
        .decisioni-cta-form-wrapper textarea.wpcf7-textarea:focus {
            border-color: #0637A4 !important; 
            outline: none !important; 
            box-shadow: 0 0 0 3px rgba(6, 55, 164, 0.2) !important;
        }

        .decisioni-cta-form-wrapper .wpcf7-submit {
            display: inline-block !important;
            background-color: #0637A4 !important;
            color: #ffffff !important;
            padding: 15px 30px !important;
            border-radius: 8px !important;
            text-decoration: none !important;
            font-weight: 700 !important;
            font-size: 1.1em !important;
            border: none !important;
            cursor: pointer !important;
            transition: background-color 0.3s ease, transform 0.2s ease !important;
            margin-top: 15px !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }

        .decisioni-cta-form-wrapper .wpcf7-submit:hover {
            background-color: #042e88 !important;
            transform: translateY(-2px) !important;
        }

        .wpcf7-response-output {
            margin: 20px 0 0 0 !important;
            padding: 15px !important;
            border-radius: 5px !important;
            font-size: 1em !important;
            font-weight: 600 !important;
            text-align: center !important;
        }

        /* --- CORREÇÃO DA MENSAGEM DE SUCESSO --- */
        .wpcf7-response-output.wpcf7-mail-sent-ok {
            background-color: #0637A4 !important; /* Fundo azul da marca para alto contraste */
            color: #ffffff !important; /* Texto branco */
            border: 1px solid #042e88 !important; /* Borda azul mais escura */
        }
        
        .wpcf7-response-output.wpcf7-mail-sent-ng,
        .wpcf7-response-output.wpcf7-validation-errors,
        .wpcf7-response-output.wpcf7-spam-blocked {
            background-color: #f8d7da !important;
            color: #721c24 !important;
            border: 1px solid #f5c6cb !important;
        }

        /* --- Responsividade (Media Queries) --- */
        @media (max-width: 768px) {
            .decisioni-hero-section {
                padding: 50px 15px;
                min-height: auto;
            }

            .decisioni-hero-content h1 {
                font-size: 2.2em;
                line-height: 1.3;
            }

            .decisioni-hero-content p {
                font-size: 1em;
                margin-bottom: 30px;
            }

            .decisioni-cta-form-wrapper {
                padding: 25px;
            }

            .decisioni-cta-form-wrapper h2 {
                font-size: 1.8em;
            }
        }

    </style>
</head>
<body>

    <section class="decisioni-hero-section">
        <div class="decisioni-hero-content">
            <h1>Transforme sua Empresa com Tecnologia Estratégica.</h1>
            <p>A Decisioni oferece consultoria, desenvolvimento de sistemas e marketing digital para impulsionar seu crescimento e inovação.</p>
    
            <div class="decisioni-cta-form-wrapper">
                <h2>Pronto para Começar?</h2>
                <p class="cta-subtitle">Agende uma conversa e receba um diagnóstico gratuito para suas necessidades de TI.</p>
    
                <!-- Formulário Simulado para demonstração -->
                <form class="wpcf7-form">
                    <p class="wpcf7-form-control-wrap">
                        <input type="text" name="your-name" value="" size="40" class="wpcf7-form-control" placeholder="Seu nome">
                    </p>
                    <p class="wpcf7-form-control-wrap">
                        <input type="email" name="your-email" value="" size="40" class="wpcf7-form-control" placeholder="Seu e-mail">
                    </p>
                    <p>
                        <input type="submit" value="Solicitar Diagnóstico" class="wpcf7-submit">
                    </p>
                </form>

                <!-- Mensagem de sucesso (visível para demonstração) -->
                <div class="wpcf7-response-output wpcf7-mail-sent-ok">
                    Sua mensagem foi enviada com sucesso. Obrigado!
                </div>
    
                <p class="privacy-text"><small>Seus dados estão seguros. Não enviamos spam.</small></p>
            </div>
        </div>
    </section>

</body>
</html>/* End custom CSS */