:root {

    --blue: #003864;

    --green: #A8E063;

    --rose: #F2EDED;

    --black: #3E3E3E;

    --chat--color-primary: #005aac; /* Cor principal para botões, cabeçalhos, etc. */
    --chat--color-secondary: #f0f2f5; /* Cor secundária para fundos, bordas. */
    --chat--color-text: #333333; /* Cor do texto principal. */
    --chat--color-background: #ffffff; /* Cor de fundo do chat. */

    --chat--window--width: 400px; /* Largura da janela do chat (modo 'window'). */
    --chat--window--height: 600px; /* Altura da janela do chat (modo 'window'). */
    --chat--window--border-radius: 12px; /* Borda arredondada da janela. */
    --chat--window--box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* Sombra da janela. */

    --chat--header--background: #003864; /* Fundo do cabeçalho. */
    --chat--header--text-color: #ffffff; /* Cor do texto do cabeçalho. */

    --chat--message--background-user: #e0f2f7; /* Fundo da bolha de mensagem do usuário. */
    --chat--message--background-bot: #f0f0f0; /* Fundo da bolha de mensagem do bot. */
    --chat--message--border-radius: 18px; /* Borda arredondada das bolhas de mensagem. */

    --chat--input--background: #f9f9f9; /* Fundo do campo de entrada de texto. */
    --chat--input--border-color: #cccccc; /* Cor da borda do campo de entrada. */
    --chat--input--text-color: #333333; /* Cor do texto do campo de entrada. */

    /* E muitas outras variáveis para controle granular de fontes, espaçamentos, etc. */

}



html {

    scroll-behavior: smooth;

}



body {

    color: var(--black) !important;

    font-family: 'Montserrat', sans-serif;

}



.navbar {

    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);

    padding: 20px;

}



.slick-prev:before,

.slick-next:before {

    color: var(--black) !important;

}



.section {

    padding-top: 3rem;

    padding-bottom: 3rem;

}



.backgroundColor {

    background-color: var(--rose);

}



.backgroundImageHeader {

    background-image: url('../_assents/Rectangle\ 33.png');

    background-repeat: no-repeat;

    background-size: 100% 100%;

}



.buttonLink {

    color: white;

    background-color: var(--green);

    border-radius: 20px;

    margin-left: 10px;

}



.flexCenter {

    display: flex;

    flex-direction: column;

    align-items: center;

}



.buttonLink2 {

    color: white;

    background-color: var(--green);

    border-radius: 20px;

    padding: 5px 40px;

    font-size: x-large;

    white-space: nowrap;

}



.buttonLink2Header {

    color: white;

    background-color: var(--green);

    border-radius: 20px;

    padding: 5px 40px;

    font-size: x-large;

}



.buttonLink2Mobile {

    color: white;

    display: none;

    background-color: var(--green);

    border-radius: 20px;

    padding: 5px 40px;

    font-size: x-large;

}

.nav-link {

    margin: 10px;

}



.primary {

    color: var(--blue);

}



.secondary {

    color: var(--green);

}

.form select,

.form input {

    margin-bottom: 15px;

    padding: 10px;

    background-color: transparent;

}

.form select:focus,

.form input:focus {

    box-shadow: none;

    background-color: transparent;

}



.textHover:hover {

    color: var(--blue);

}



.maxWidth {

    max-width: 70%;

}

.maxWidth2 {

    max-width: 70%;

}

.maxWidth80 {

    max-width: 80%;

}



.sectionTextP {

    max-width: 70%;

    display: block;

    margin: auto;

}



.form {

    background-color: #FCF7F7;

    padding: 50px;

    border-radius: 20px;

    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;



}



.options-sec {

    background-color: #FCF7F7;

    padding: 50px;

    border-radius: 50px;

    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;



}



.center {

    display: block;

    margin: auto;

}

.btn-send{

    padding: 15px;

    margin-top: 10px;

    border-radius: 10px;

    color: white;

    background-color: var(--green);

    border: none;

    float: right;

}

.input input {

    border: none;

    width: 100%;

}



.input img {

    height: 20px;

    margin: 20px;

}



.input button {

    border: none;

    background-color: var(--green);

    padding: 25px 70px;

    border-radius: 30px;

    color: white;

}



.input input:focus {

    outline: none;

}



.input {

    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);

    border-radius: 30px;

    margin: auto;

}



.card-cases {

    background: #7DAACE;

    border-radius: 21px 21px 21px 114px;

    font-weight: 500;

    color: #FFFFFF;

    padding: 40px;

    margin: 30px;

}



.card-cases h5 {

    color: var(--blue)

}



.card-plano li {

    list-style: none;

    line-height: 40px;

}



.flex img {

    margin: 5px;

}



.flex {

    display: flex;

}



.card-plano-footer {

    border-radius: 0px 0px 21px 114px;

    padding: 30px;

    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

}



.card-plano-footer a {

    text-decoration: none;

    text-align: center;

    color: var(--black);

    border: 1px solid var(--black);

    padding: 5px;

    border-radius: 20px;

    margin: auto;

    display: block;

    max-width: 150px;

}



.card-plano-footer a:hover {

    background: var(--black);

    color: white;

    transition: all 250ms ease-in-out;

}





.card-plano {

    background: var(--rose);

    color: var(--black);

    border-radius: 21px 21px 0px 0px;

    font-weight: 500;

    padding: 20px;

    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

}



.card-plano p {

    font-size: small;

    line-height: 25px;

}



.start .card-plano h3 {

    color: var(--green);

}



.plus .card-plano h3 {

    color: #7CACDA;

}



.full .card-plano h3 {

    color: #B88ED9;

}



.start .card-plano-footer {

    background: var(--green);

}



.plus .card-plano-footer {

    background: #7CACDA;

}



.full .card-plano-footer {

    background: #B88ED9;

}



.start .card-plano li::before {

    content: '---';

    color: transparent;

    font-size: large;

    margin-right: 5px;

    background-image: url('../_assents/icon-green.png');

    background-size: 100% 100%;

}



.plus .card-plano li::before {

    content: '---';

    color: transparent;

    font-size: large;

    margin-right: 5px;

    background-image: url('../_assents/icon-blue.png');

    background-size: 100% 100%;

}



.full .card-plano li::before {

    content: '---';

    color: transparent;

    font-size: large;

    margin-right: 5px;

    background-image: url('../_assents/icon-rose.png');

    background-size: 100% 100%;

}



footer li {

    list-style: none;

    color: white;

    line-height: 40px;

    list-style-position: inside;

}



footer a {

    text-decoration: none;

    color: white;

    line-height: 40px;

}



footer a:hover {

    color: var(--green);

}



.wpp{

    position: fixed !important;

    bottom: 110px;

    right: 20px;

}



.n8n-chat {
    right: 20px !important;
    left: auto !important; /* Garante que não haja conflito com 'left' */
    bottom: 24px !important;
    top: auto !important;   /* Garante que não haja conflito com 'top' */
    position: fixed !important;
    z-index: 10000; /* Alto valor para garantir que o chat fique visível sobre outros elementos */
}