/* Definição das cores como variáveis CSS */
:root {
    --color-primary-dark: #272263; /* R: 39 G: 34 B: 99 */
    --color-primary-medium: #24458A; /* R: 36 G: 69 B: 138 */
    --color-primary-bright: #032EB8; /* R: 3 G: 46 B: 184 */
    --color-secondary-bright: #2665EF; /* R: 38 G: 101 B: 239 */
    --color-accent: #0096FC; /* R: 0 G: 150 B: 252 */
    --color-white: #FFFFFF; /* R: 255 G: 255 B: 255 */
}

body, html {
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif!important;
}

p {
    padding: 0;
    margin: 0;
}

.bg-primary {
    background-color: var(--color-primary-dark) !important;
}

footer {
    background-color: var(--color-primary-dark) !important;
    color: white;
    padding: 20px 0;
}


/* Personalizar o modal */
.modal-content {
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.modal-header .modal-title {
    color: #155724;
}

.modal-footer .btn-secondary {
    background-color: #28a745;
    border-color: #28a745;
}

/*      ------ESTILIZAÇÃO MENU------      */

.divSupMenu {
    background-color: var(--color-primary-dark); 
    height: 50px; 
    width: 100%; 
    display: flex;
    justify-content: center!important; 
    align-items: center!important;
}

.iconWhats {
    font-size: 24px!important;
}

.buttonContato {
    height: 30px;
    width: 200px;
    background-color: var(--color-white);
    border-radius: 20px;
    border: 0px;
    color: var(--color-primary-dark);
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-weight: bold;
    font-size: large;
    text-decoration: none; /* Remove o sublinhado */
}

.buttonContato:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
    text-decoration: none; /* Garante que o sublinhado não apareça no hover */
}

.menuItemsAlign {
    align-items: self-end !important;
}

.rounded {
    height: 70px !important;
    background-color: var(--color-white)!important;
    font-weight: bold;
    box-shadow: 5px 5px 8px #888888;
    justify-content: center!important;
}

.menuLinks {
    display: flex!important;
    justify-content: center!important;
    font-size: larger;
}

.nav-link {
    color: var(--color-primary-dark)!important;
}

.nav-link:hover {
    color: var(--color-primary-bright)!important;
}

.nav-link a {
    position: relative; /* Relativo ao seu local original */
    right: 0;
}

.textoJustificado {
    text-align: justify;
}

/*CSS GERADO PELO CHATGPT*/

.navbar {
    padding: 0.5rem 8%; /* Ajusta o espaçamento interno da navbar */
    display: flex!important;
    justify-content: space-between!important;
    width: 100%!important;
    padding-right: 15%;
    padding-left: 15%;
}

.sticky-navbar {
    position: sticky;
    top: 0; /* Fixa no topo da viewport quando atinge este ponto */
    z-index: 1020;  /*Garante que fique acima de outros elementos */
    width: 100%!important;
    background-color: white; /* Opcional: Definir fundo para evitar sobreposição visual */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra para destacar */
    transition: box-shadow 0.3s;
}

.navbar-collapse {
    background-color: var(--color-white);
    width: 100%!important;
    position: relative;
    text-align: center;
    z-index: 2000;
}

.navbar-logo {
    margin-top: 3px; /*-------------SOLUÇÃO PROVISÓRIA*/
    max-height: 60px; /* Ajusta o tamanho máximo da logo */
    height: auto;
    width: auto;
}

@media (max-width: 768px) {
    .navbar-logo {
        max-height: 50px;  /*Reduz o tamanho da logo em telas menores */
    }
}

/*      ------ESTILIZAÇÃO CARROUSSEL------      */

.slide {
    width: 100%!important;
}

.carousel-inner {
    width: 100%!important;
}

.carousel-item {
    width: 100%;
    height: 520px!important;
}

.carousel-caption {
    background-color: rgba(255, 255, 255, 1); 
    border: 0px;
    border-radius: 40px;
    color: var(--color-primary-dark);
    padding: 30px;
    text-align: left; /* Alinha o texto à esquerda */
    bottom: 10%;
}

.titleCarousel {
    font-size: 24px!important;
    font-weight: bold;
    color: var(--color-primary-bright);
}

.carousel-caption a {
    font-size: 14px; /* Tamanho padrão para telas grandes */
    color: var(--color-primary-dark) !important;
    text-decoration: none; /* Remove sublinhado */
    display: block; /* Força o link a ocupar espaço */
    text-align: right; /* Alinha o texto à direita */
    margin-top: 10px;
}

.divButtonCar {
    background-color: rgba(255, 255, 255, 0.7);
    border: 0px;
    width: 40px!important;
    height: 40px!important;
    border-radius: 100%;
    color: var(--color-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

/*      ------ESTILIZAÇÃO SOBRE EMPRESA------      */

.logoAcordion {
    max-width: 350px;    
    height: auto;
}

.divLogoEmpresa {
    display: flex;
    max-height: 300px!important;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/*      ------ESTILIZAÇÃO SOLUÇÕES------      */

.card {
    border-radius: 15px; /* Ajuste o valor conforme necessário */
    width: 350px;
    height: 200px;
    text-align: justify;
}

.card-body {
position: relative;
padding-bottom: 40px; /* Espaço para o botão */
}

.card-body a {
position: absolute;
bottom: 0;
right: 0;
margin-top: 20px;
margin-bottom: 10px;
}



.cardContainerSol {
    display: flex;
    justify-content: space-around !important;
    align-items: center!important;
    margin-top: 10%;
}

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

#parcerias {
    align-items: center;
    justify-self: center;
    width: 100%;
}

.cardSolucoes {
    width: 350px;
    max-height: 150px;
    margin-left: 5px;
    background-color: #e3e3e3;
    color: var(--color-white);
    border: 0px;
    border-radius: 5px;
    color: var(--color-primary-medium);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4px;
    box-shadow: 3px 3px 8px #888888;
    transition: 0.5s;
}

.cardSolucoes:hover {
    background-color: var(--color-primary-medium);
    color: var(--color-white);
    transition: 0.5s;
    border-radius: 20px;
}

.card-title {
    color: var(--color-primary-bright);
    font-weight: 600; 
    font-size: 24px; 
    margin-bottom: 10px; 
    text-align: center; 
}


/*      ------ESTILIZAÇÃO CONTATO------      */

.form {
    overflow: visible!important;
    padding: 1em;
    justify-content: center;
    background-color: var(--color-white);
    color: var(--color-primary-dark);
}

#contato {
    margin-bottom: 10%;
}

/*      ------ESTILIZAÇÃO RODAPÉ------      */

.rodape {
    position: relative;
    bottom: 0!important;
    width: 100%;
    background-color: var(--color-primary-dark);
    color: var(--color-white);
    padding: 40px 10px 10px 10px; /* Ajustado o padding inferior */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: start;
}

.links {
    text-decoration: none;
    color: var(--color-white);
    margin-bottom: 45px!important;
}

.links:hover {
    color: var(--color-accent);
    cursor: pointer;
}

.menuRodape {
    margin-bottom: 2%;
}

.menuRodape ul {
    list-style: none;
}

.menuRodape ul li {
    margin-bottom: 4%;
}

#contatosRodape {
    display: flex;
    align-items: center;
}

#contatosRodape p {
    white-space: nowrap; /* Impede quebra de linha */
    margin-left: 4%; /* Para manter o espaçamento */
}

#contatosRodape a {
    display: flex;
    align-items: center; /* Alinha verticalmente */
    gap: 8px; /* Espaçamento entre o ícone e o número */
    text-decoration: none; /* Remove sublinhado */
    color: inherit; /* Mantém a cor padrão */
}

.iconInferior:hover {
    cursor: pointer;
    color: var(--color-accent);
}

/*      ------ESTILIZAÇÕES GERAIS------      */

.cardContainer {
    display: flex;
    justify-content: space-around !important;
    width: 100%!important;
}

#scrollToTop {    
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background-color: var(--color-primary-bright); /* Azul principal */
    color: var(--color-white);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;    
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);    
    transition: background-color 0.3s ease, transform 0.2s ease;

    /* Centralizando o ícone */
    display: flex;
    justify-content: center;
    align-items: center;
}

#scrollToTop i {
    font-size: 24px;
}

/* Efeito ao passar o mouse */
#scrollToTop:hover {
    background-color: var(--color-primary-medium); /* Mantendo harmonia com a paleta */
}

/* Efeito ao clicar */
#scrollToTop:active {
    transform: scale(0.9);
}


.visually-hiddenn {
    visibility: hidden;
    opacity: 0;
}

.title {
    margin-top: 2em;
    margin-bottom: 1.5em;
    justify-self: center;
    align-self: center;
    font-size: 32px;
    color: var(--color-primary-bright);
}

.bigTitle {
    margin-left: 5%;
    justify-self: center;
    align-self: center;
    color: var(--color-primary-dark);
}


/* Para telas maiores que 768px */
.copyright {
    order: 4; /* Faz o copyright aparecer depois das redes sociais */
    border-top: solid 2px var(--color-white); /* Borda superior branca */
    padding-top: 20px; /* Maior espaçamento no topo */
    width: 100%;
    background-color: var(--color-primary-dark); /* Fundo escuro, mesmo do rodapé */
    text-align: center; /* Centraliza o conteúdo */
    padding-bottom: 20px; /* Aumenta o padding inferior para mais espaçamento */
    margin-top: 30px; /* Adiciona um pouco de espaço no topo */
}

.copyright p {
    color: #ffffff; /* Cor do texto para branco */
    font-size: 16px; /* Aumenta o tamanho da fonte para visibilidade na versão web */
    font-weight: bold; /* Deixa o texto em negrito para dar mais destaque */
}



/* **************************************************************** */
/* MEDIA = PARA TELAS MENORES                                       */ 
/* **************************************************************** */
@media (max-width: 600px) {
    .carousel-caption {
        background-color: rgba(255, 255, 255, 1); 
        position: sticky!important;
        border: 0px;
        border-radius: 20px;
        color: var(--color-primary-dark);
        padding: 4px 8px 0 8px!important;
        text-align: left; /* Alinha o texto à esquerda */
        margin-bottom: 20px;
    }
    .carousel-item {
        width: 100%;
    }
    .slide {
        width: 100%;
    }

    .carousel-inner {
        width: 100%;
    }
    .carousel-caption p {
        margin: 0;
        padding: 0;
        font-size: 12px;
    }

    .titleCarousel {
        font-size: 14px!important;
        font-weight: bold;
        color: var(--color-primary-bright);
    }

    .carousel-caption a {
        font-size: 12px !important; /* Tamanho menor */
        position: relative; /* Muda para posição relativa */
        right: 0;
        bottom: 0;
        top: 0;
        text-align: right; /* Garante alinhamento */
    }
}


@media (max-width: 900px) {

    /*      ESTILO PARA TELA MENORES QUE 768px    */

    .divSupMenu {
        background-color: var(--color-primary-dark); 
        height: 80px; 
        width: 100%; 
        display: flex;
        justify-content: center!important; 
        align-items: center!important;
    }

    .iconWhats {
        font-size: 32px!important;
        text-align: center;
        display: flex;
        align-items: center;
    }

    .buttonContato {
        height: 50px;
        width: 260px;
        background-color: var(--color-white);
        border-radius: 20px;
        border: 0px;
        color: var(--color-primary-dark);
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-weight: bold;
        font-size: 24px;
        text-decoration: none;
    }

    .buttonContato p {
        margin: 0 0 5px 0; /*----------------SOLUÇÃO PROVISÓRIA*/
        line-height: 0;
        display: flex;
        align-items: center;
    }

    .buttonContato:hover {
        background-color: var(--color-accent);
        color: var(--color-white);
        text-decoration: none; /* Garante que o sublinhado não apareça no hover */
    }

    .navbar-logo {
        margin: auto;
        max-height: 60px; /* Ajusta o tamanho máximo da logo */
        height: auto;
        width: auto;
    }

    .navbar-collapse {
        background-color: var(--color-primary-dark);
        width: 100%!important;
        position: relative;
        text-align: center;
        z-index: 1000;
        border-radius: 20px;
    }

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

    .menuLinks {
        position: static;
        width: 100%!important;
        display: flex!important;
        justify-content: center!important;
        font-size: larger;
    }

    .nav-link {
        color: var(--color-white)!important;
    }

    .nav-link:hover {
        color: var(--color-primary-bright)!important;
    }

    /*CSS GERADO PELO CHATGPT*/

    .navbar {
        display: flex!important;
        justify-content: space-between!important;
        width: 100%!important;
        padding-right: 15%;
        padding-left: 15%;
    }

    .sticky-navbar {
        position: sticky;
        top: 0; /* Fixa no topo da viewport quando atinge este ponto */
        z-index: 1020; /* Garante que fique acima de outros elementos */
        width: 100%!important;
        background-color: white; /* Opcional: Definir fundo para evitar sobreposição visual */
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra para destacar */
        transition: box-shadow 0.3s;
    }

    /*      ------ESTILIZAÇÃO CARROUSSEL------      */


    .slide {
        width: 100%!important;
    }

    .carousel-inner {
        width: 100%!important;
    }

    .carousel-item {
        width: 100%;
        height: auto!important;
    }

    .carousel-caption {
        background-color: rgba(255, 255, 255, 1); 
        position: absolute!important;
        border: 0px;
        border-radius: 20px;
        color: var(--color-primary-dark);
        padding: 20px 20px 0 20px;
        text-align: left; /* Alinha o texto à esquerda */
        bottom: 10%;
    }

    .carousel-caption p {
        margin: 0;
        padding: 0;
        font-size: 12px;
    }

    .titleCarousel {
        font-size: 16px!important;
        font-weight: bold;
        color: var(--color-primary-bright);
    }

    .carousel-caption a {
        font-size: 12px !important; /* Tamanho menor */
        position: relative; /* Muda para posição relativa */
        right: 0;
        bottom: 0;
        top: 0;
        text-align: right; /* Garante alinhamento */
    }

    .divButtonCar {
        background-color: rgba(255, 255, 255, 0.7);
        border: 0px;
        width: 40px!important;
        height: 40px!important;
        border-radius: 100%;
        color: var(--color-primary-dark);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /*      ------ESTILIZAÇÃO SOBRE EMPRESA------      */

    .title {
        text-align: center; /* Centraliza o texto horizontalmente */
        justify-self: center; /* Centraliza em containers grid */
        margin-left: auto; /* Ajuste para garantir centralização */
        margin-right: auto;
    }

    .logoAcordion {
        max-width: 300px;
        margin-top: 5%;
        margin-bottom: 2%;
        order: 2; /* Logo no meio */
    }

    .divLogoEmpresa {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        max-height: none;  /* Remove a limitação de altura */
    }

    .textoJustificado {
        /*padding-left: 20px;  Ajuste para telas pequenas */
        /* padding-right: 10px; Ajuste para telas pequenas */
        text-align: justify;
    }
    

    /*      ------ESTILIZAÇÃO SOLUÇÕES------      */

    .cardContainerSol {
        display: flex;
        justify-content: space-around !important;
        align-items: center!important;
        margin-top: 10%;
        margin-bottom: 10%;
    }

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

    #solucoes {
        align-items: center;
        justify-self: center;
        width: 100%;
    }

    .cardSolucoes {
        width: 350px;
        max-height: 150px;
        margin-left: 5px;
        background-color: #e3e3e3;
        color: var(--color-white);
        border: 0px;
        border-radius: 5px;
        color: var(--color-primary-medium);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 4px;
        box-shadow: 3px 3px 8px #888888;
        transition: 0.5s;
    }

    .cardSolucoes:hover {
        background-color: var(--color-primary-medium);
        color: var(--color-white);
        transition: 0.5s;
        border-radius: 20px;
    }

    .card-title {
        color: var(--color-primary-bright); /* Cor do texto */
        font-weight: 600; /* Negrito */
        font-size: 16px; /* Tamanho da fonte */
        margin-bottom: 10px; /* Espaço entre o título e o texto */
        text-align: center; /* Centralizar o texto */
    }


    /*      ------ESTILIZAÇÃO CONTATO------      */

    .form {
        overflow: visible!important;
        padding: 1em;
        justify-content: center;
        background-color: var(--color-white);
        color: var(--color-primary-dark);
        margin-bottom: 15%;
    }

    /*      ------ESTILIZAÇÃO RODAPÉ------      */

    .rodape {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /*
    .rodape {
        position:relative;
        bottom: 0!important;
        max-height: 550px;
        background-color: var(--color-primary-dark);
        color: var(--color-white);
        padding: 40px 10px 0px 10px;
    }*/

    .menuRodape {
        margin-bottom: 2%;
        order: 1; /* Mantém menu e contatos acima */
    }

    .menuRodape ul {
        list-style: none;
    }

    .menuRodape li:hover {
        color: var(--color-accent);
        cursor: pointer;
    }

    .redes-sociais {
        order: 3; /* Redes sociais antes do copyright */
    }

    .copyright {
        order: 4; /* Faz o copyright aparecer depois das redes sociais */
        border-top: solid 2px var(--color-white); /* Borda superior branca */
        padding-top: 10px;
        width: 100%;
        background-color: var(--color-primary-dark); /* Fundo escuro, mesmo do rodapé */
        text-align: center; /* Centraliza o conteúdo */
        padding-bottom: 10px; /* Um pouco de padding inferior para dar mais espaçamento */
    }
    
    .copyright p {
        color: #ffffff; /* Cor do texto para branco */
        font-size: 14px; /* Ajuste de tamanho de fonte */
        font-weight: bold; /* Deixa o texto em negrito para dar mais destaque */
    }

    #contatosRodape {
        flex-direction: column; /* Empilha os itens verticalmente */
        align-items: center; /* Centraliza os itens */
        gap: 5px; /* Espaço entre os elementos */
        text-align: center; /* Garante que o texto também fique centralizado */
    }

    #contatosRodape a {
        justify-content: center; /* Centraliza os elementos */
        gap: 5px; /* Reduz o espaçamento */
    }

    #contatosRodape p {
        margin-left: 0; /* Remove margem para evitar desalinhamento */
    }
}