.elementor-228 .elementor-element.elementor-element-d573646{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;--padding-top:100px;--padding-right:0px;--padding-bottom:0100px;--padding-left:0px;}.elementor-228 .elementor-element.elementor-element-d573646:not(.elementor-motion-effects-element-type-background), .elementor-228 .elementor-element.elementor-element-d573646 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://sandbox.renoveenergiasolar.com.br/wp-content/uploads/2023/10/fundo-ouvidora-renove-ernergia-solar-01.jpg");background-position:center center;background-size:cover;}.elementor-228 .elementor-element.elementor-element-d573646, .elementor-228 .elementor-element.elementor-element-d573646::before{--border-transition:0.3s;}.elementor-228 .elementor-element.elementor-element-a8e5449{text-align:center;}.elementor-228 .elementor-element.elementor-element-a8e5449 .elementor-heading-title{color:#FFFFFF;}.elementor-228 .elementor-element.elementor-element-618b7c8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;--padding-top:020px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;}.elementor-228 .elementor-element.elementor-element-8ceb8ea{font-family:"Manrope", Sans-serif;font-size:20px;font-weight:700;color:var( --e-global-color-139896e );}.elementor-228 .elementor-element.elementor-element-8ceb8ea a{color:#000000;}.elementor-228 .elementor-element.elementor-element-c509c27 > .elementor-widget-container{background-color:#F5F5F5;}/* Start custom CSS for html, class: .elementor-element-c509c27 */.form-step {
        display: none;
    }

    .form-step.active {
        display: block;
    }

    .hidden {
        display: none;
    }

    .progress {
        height: 20px;
        background-color: #f3f3f3;
        border-radius: 10px;
        margin-top: 20px;
    }

    .progress-bar {
        height: 100%;
        background-color: #4caf50;
        width: 0%;
        border-radius: 8px;
    }

    .input-group {
        text-align: center;
        display: block;
    }

    label {
        display: block;
        font-size: 1.2em;
        margin-bottom: 10px;
        text-align: center;
    }

    #numeroPessoasBtnGroup,
    #quantidadeBanheirasBtnGroup {
        display: inline-block;
    }

    /* Estilo padrão para botões */
    .number-btn,
    .yes-no-btn,
    .quantity-btn {
        font-size: 1.5em;
        padding: 10px 20px;
        margin: 5px;
        background-color: #f3f4f6; /* Cinza */
        color: rgb(120, 120, 120); /* Texto Preto */
        border: none;
    }

    /* Estilo para botões selecionados */
    .number-btn.selected,
    .yes-no-btn.selected,
    .quantity-btn.selected {
        background-color: #4caf00; /* Verde */
        color: #fff; /* Texto Branco */
    }

    .navigation {
        text-align: center;
        margin-top: 20px;
    }

    .prev-step,
    .next-step {
        font-size: 1.2em;
        padding: 10px 20px;
    }

    #resultMessage {
        font-size: 1.2em; /* Define o tamanho da fonte para ser igual ao dos rótulos */
        text-align: center; /* Centraliza o texto horizontalmente */
        margin-top: 20px; /* Adiciona uma margem superior para separá-lo dos outros elementos */
        margin-bottom: 20px; /* Adiciona uma margem inferior para separá-lo dos outros elementos */
    }

    /* Estilo padrão para botões de navegação e solicitação de orçamento */
    .prev-step,
    .next-step,
    #requestQuote,
    #restartForm{
        font-size: 1.2em;
        padding: 10px 20px;
        background-color: #f3f4f6; /* Cinza */
        color: rgb(120, 120, 120); /* Texto cinza */
        border: none;
        margin: 5px;
    }

    /* Estilo para botões de navegação e solicitação de orçamento quando selecionados */
    .prev-step:hover,
    .next-step:hover,
    #requestQuote:hover,
    .number-btn:hover,
    .yes-no-btn:hover,
    .quantity-btn:hover,
    #restartForm:hover {
        background-color: #4caf50; /* Verde */
        color: #fff; /* Texto Branco */
    }

    .number-btn:focus,
    .yes-no-btn:focus,
    .quantity-btn:focus,
    .prev-step:focus,
    .next-step:focus,
    #requestQuote:focus {
        outline: none;
    }

    .number-btn:focus-visible,
    .yes-no-btn:focus-visible,
    .quantity-btn:focus-visible,
    .prev-step:focus-visible,
    .next-step:focus-visible,
    #requestQuote:focus-visible {
        outline: none !important;
    }

    .recommendation {
    border-radius: 10px;
    background-color: white;
    padding: 10px;
    margin-top: 10px;
    display: inline-block;  /* Adicionado */
    box-shadow: 3px 1px 5px rgba(0, 0, 0, 0.1);  /* Adicionado */
}

    #resultTitle {
        text-align: center;
        margin-bottom: 20px;
    }

.recommendation-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.recommendation-flex > div {
    flex: 1;  
    text-align: center;
    padding: 10px;
}

#box-text {
    text-align: left;
}

.product-name {
    font-weight: 600;
}/* End custom CSS */