/*comentários da primeira parte */


/* --- Variáveis CSS --- */
/* Definindo cores principais para fácil manutenção e consistência */
:root {
    --cor-fundo-principal: #000033; /* Preto muito escuro com toque azulado */
    --cor-texto-claro: #F0F0F0;     /* Cinza muito claro, quase branco */
    --cor-texto-escuro-sutil: #C0C0C0; /* Um cinza mais suave para parágrafos */
    --cor-laranja-principal: rgb(228, 138, 3); /* Laranja vibrante */
    --cor-azul-profundo: rgb(7, 66, 116); /* Azul escuro para ícones/títulos de caixa */
    --sombra-leve: rgba(0, 0, 0, 0.3); /* Sombra genérica para texto */
    --sombra-box: rgba(58, 39, 39, 0.5); /* Sombra específica para caixas */
    --transicao-padrao: 0.3s ease; /* Transição suave para hover effects */
}


/* --- Seção Home: Estilos do Contêiner Principal --- */
.home {
    min-height: 100vh; /* Ocupa a altura total da viewport */
    background-image: #000033;
    background-size: cover; /* Garante que a imagem de fundo cubra toda a área */
    background-position: center; /* Centraliza a imagem de fundo */
    background-attachment: fixed; /* Mantém a imagem de fundo fixa ao rolar */
    z-index: 0; /* Garante que outros elementos possam sobrepor */
    overflow: hidden; /* Esconde qualquer conteúdo que exceda a área da seção */
    position: relative; /* Essencial para posicionamento de elementos filhos (como o ::before) */
}

.home .background-video {
    position: absolute; /* Posição absoluta em relação à seção .home */
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1; /* Coloca o vídeo atrás de todo o conteúdo da seção */
    background-size: cover; /* Garante que o vídeo cubra toda a área, cortando se necessário */
    /* Você pode adicionar um filtro para escurecer o vídeo e melhorar a leitura do texto */
    /* filter: brightness(50%); */
}



/* --- Conteúdo Principal da Seção Home --- */
.home .content {
    /* Flexbox para centralizar e empilhar elementos */
    display: flex;
    flex-direction: column; /* Organiza os itens em coluna */
    align-items: center; /* Centraliza horizontalmente */
    justify-content: center; /* Centraliza verticalmente */
    text-align: center; /* Centraliza o texto dentro dos itens */

    /* Espaçamento interno para posicionar o conteúdo */
    padding-top: 14rem;
    padding-bottom: 8rem;
}

/* Título (h1) dentro do conteúdo da Home */
.home .content h1 {
    font-family: sans-serif; /* Fonte genérica sem serifa */
    font-size: 4rem; /* Tamanho grande para o título */
    color: var(--cor-texto-claro); /* Cor do texto branco usando variável */
    padding: 0 1rem; /* Pequeno padding lateral para garantir espaçamento */
    text-shadow: 0.3rem 0.5rem var(--sombra-leve); /* Sombra no texto para profundidade */
    text-transform: uppercase; /* Texto em maiúsculas */
}

/* Parágrafo (p) dentro do conteúdo da Home */
.home .content p {
    font-size: 2rem; /* Tamanho do texto do parágrafo */
    color: var(--cor-texto-escuro-sutil); /* Cor do texto cinza claro usando variável */
    padding: 1rem 10rem; /* Padding superior/inferior e um padding lateral muito grande */
    /* Considerar ajustar o padding lateral para responsividade em telas menores */
    @media (max-width: 768px) {
        padding: 1rem 2rem; /* Padding menor em telas médias/pequenas */
    }
}




/* --- Contêiner para as Caixas (Boxes) --- */
.home .box-container {
    display: flex; /* Habilita Flexbox */
    justify-content: center; /* Centraliza as caixas horizontalmente */
    flex-wrap: wrap; /* Permite que as caixas quebrem para a próxima linha em telas menores */
    margin-top: 4rem; /* Adiciona um espaço acima do container de caixas */
}

/* Estilo para cada "Box" individual */
.home .box-container .box {
    height: 18rem;
    width: 21rem;
    background: rgba(228, 239, 248, 0.2); /* Fundo semi-transparente (azul escuro) */
    text-align: center;
    border-radius: 1rem;
    box-shadow: 0 0.9rem 0.9rem var(--sombra-box); /* Sombra para profundidade */
    margin: 2rem; /* Espaçamento entre as caixas */
    
    transition: transform var(--transicao-padrao), box-shadow var(--transicao-padrao); /* Transição suave para hover */
}

/* Ícone (i) dentro da Box */
.home .box-container .box i {
    height: 6rem;
    width: 6rem;
    line-height: 6rem; /* Centraliza o ícone verticalmente */
    text-align: center;
    border-radius: 50%; /* Ícone circular */
    color: var(--cor-azul-profundo); /* Cor do ícone */
    background: var(--cor-laranja-principal); /* Fundo do ícone */
    font-size: 3rem;
    margin: 2rem 0; /* Margem superior e inferior */
    transition: background-color var(--transicao-padrao), color var(--transicao-padhao);
}

/* Título (h3) dentro da Box */
.home .box-container .box h3 {
    font-size: 2rem;
    color: white; /* Cor do título */
    transition: color var(--transicao-padrao);
}

/* Parágrafo (p) dentro da Box */
.home .box-container .box p {
    font-size: 1.3rem;
    padding: 0.7rem 2rem; /* Espaçamento interno */
    color: white; /* Cor do texto */
}

/* --- Efeitos Hover para as Caixas --- */
.home .box-container .box:hover {
    transform: translateY(-1rem); /* Move a caixa ligeiramente para cima */
    box-shadow: 0 1.2rem 1.2rem var(--sombra-box); /* Aumenta a sombra */
}

.home .box-container .box:hover i {
    background: var(--cor-azul-profundo); /* Ícone inverte cor de fundo para azul profundo */
    color: var(--cor-laranja-principal); /* Ícone inverte cor do ícone para laranja */
}

.home .box-container .box:hover h3 {
    color: var(--cor-laranja-principal); /* Título da caixa fica laranja no hover */
}


/* Home finaliza*/












.heading, .title {
    max-width: 800px; /* Define a largura máxima desejada para o texto */
    margin: 0 auto; /* Para centralizar o texto na página, se necessário */
    
}




.login-btn {
    background-color: rgb(228, 138, 3); 
    color: #0A0A1A;
    padding: 10px 20px;
    border-radius: 30px;
    transition: background-color 0.3s;
    cursor: pointer;
}

.login-btn:hover {
    background-color: rgba(228, 138, 3, 0.5);
    transform: scale(1.90);
    color: #0A0A1A;
}







:root{
    --pink: black;
    --violet: #105983;
}

*{
    font-family:'popins', 'roboto';
    text-decoration: none;
    outline: none;
    margin: 0; padding: 0;
    box-sizing: border-box;
}

::selection{
    background: rgb(10, 116, 202);
    color: #fff;

}

html{
    font-size: 62.5%;
    overflow-x: hidden;
}

.heading{
    font-size: 4rem;
    color: rgba(86, 154, 163, 0.582);
    text-align: center;
    padding:0 1rem;
    padding-top: 6rem;
    letter-spacing: .2rem;
    font-weight: 500;
}

.title{
    padding:0 1rem;
    font-size: 2rem;;
    text-align: center;
    font-weight: 400;
    color: rgb(0, 0, 0);
}


body{
    background: #000033;
    height: 3000px;

}



/*arrumar a visualização pelo celular*/



@media (max-width: 768px) {
    /* Ajustes para o header principal no mobile */
    header {
        justify-content: space-between; /* Mantém o logo e o hambúrguer separados */
        padding: 1rem 2rem; /* Ajuste o padding se necessário */
        width: 100%; /* Ocupa toda a largura */
        top: 0; /* Alinha no topo */
        border-radius: 0; /* Remove bordas arredondadas */
        transform: translateX(0); /* Remove transformação de centralização do desktop */
    }

    header img {
        width: 200px; /* Reduz o tamanho da imagem/logo para mobile */
    }

    /* Oculta a navegação (ul) por padrão no mobile */
    header .navbar ul {
        /*
           IMPORTANTE: Geralmente, esta navegação seria 'display: none;' aqui
           e depois exibida via JavaScript (como um menu dropdown ou sidebar)
           quando o ícone do hambúrguer for clicado.

           Se o seu menu for sempre visível, mas empilhado, mude o 'display' para 'flex'
           e 'flex-direction: column;'.
        */
        display: none; /* Esconde o menu de navegação completo no mobile */
        /*
            Se você está montando um menu que aparecerá via JS,
            você precisaria de estilos para quando uma classe for adicionada,
            ex: '.navbar.active ul { display: flex; flex-direction: column; ... }'
        */

        /* Estilos caso o menu seja exibido verticalmente */
        position: absolute; /* Para posicionar o menu sobre o conteúdo */
        top: 100%; /* Abaixo do header */
        left: 0;
        width: 100%;
        background-color: #fff; /* Fundo para o menu */
        border-top: 1px solid #eee;
        box-shadow: 0 .1rem .3rem rgba(0,0,0,.3);
        flex-direction: column; /* Empilha os itens verticalmente */
        align-items: center; /* Centraliza os itens do menu horizontalmente */
        margin-right: 0; /* Remove a margem extra do desktop */
        padding: 1rem 0; /* Adiciona padding vertical */
    }

    header .navbar ul li {
        margin: 1rem 0; /* Aumenta o espaçamento vertical entre os itens do menu */
    }

    header .navbar ul li a {
        font-size: 1.8rem; /* Ajusta o tamanho da fonte para mobile */
        padding: 0.8rem 0; /* Adiciona padding para facilitar o clique */
        width: 100%; /* Faz o link ocupar a largura do item */
        text-align: center;
    }

    /* Mostra o ícone de hambúrguer apenas em telas menores */
    header .fa-bars {
        display: block; /* Faz o ícone do hambúrguer aparecer */
        /* Opcional: Ajuste a posição do ícone se necessário */
        /* margin-left: auto; */ /* Para empurrar para a direita, se não estiver usando justify-content: space-between no header */
    }

    /* Opcional: Estilo para o botão de Login dentro do menu mobile */
    .login-btn {
        display: inline-block; /* Garante que o botão de login apareça no mobile */
        margin-top: 1rem; /* Espaço acima do botão */
        padding: 8px 15px; /* Ajusta o preenchimento para um tamanho menor no mobile */
        font-size: 1.4rem; /* Diminui o tamanho da fonte */
    }
}











header{
    width: 96%;
    background-color: #c7c5cd;
    position: fixed;
    top: 2rem; left: 50%;
    transform: translateX(-50%);
    border-radius: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    z-index: 1000;
    transition: .1s;
}

header img {
    width: 300px; 
    height: auto;
}


.header-active{
    top: 0;
    width: 100%;
    border-radius: 0;
    box-shadow: 0 .1rem .3rem rgba(0,0,0,.3);
}


header .navbar ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    margin-right: 45rem;
}

header .navbar ul li{
    margin:0 0.8rem;
    font-size: 1.7rem;
}

header .navbar ul li a{
    
    color: #0A0A1A;
    
}

header .navbar ul li .active, header .navbar ul li a:hover{
    color: rgb(228, 138, 3);
}

header .logo{
    font-size: 2.5rem;
    color: var(--violet);
    text-transform: uppercase;
}

header .logo i{
    color: var(--pink);
    padding: 0.2 rem;
}

header .fa-bars{
    font-size: 3rem;
    color: blue;
    cursor: pointer;
    transition: .2s;
}












.about {
    width: 100vw; /* pega toda a largura da viewport (tela) */
    margin: 0; /* remove margens externas */
    padding: 50px 20px; /* mantém um bom espaçamento interno */
    box-sizing: border-box; /* garante que padding não aumente o tamanho real */
    background-color: #000033;
    color: #fff;
    border-radius: 0; /* remove bordas arredondadas que podem dar a impressão de "recorte" */
}

.about .title {
    text-align: left; /* Alinha o texto à esquerda */
}



.about .heading {
    color: white;
}

.about .title {
    color: white;
}


.about .primeiro {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.7);; 
}



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

.about .row .image img{
    height: 70vh;
    width: 50vw;
    
}

.about .row .content{
    padding-right: 20rem;
    padding-left: 10rem;
    margin: 30px;
}



.about .row .content h3{
    font-size: 3rem;
    color: white;
}


.about .row .content p{
    font-size: 1.6rem;
    color: #999;
    padding: 1rem 0;
}

.about .row .content button{
    height: 3.5rem;
    width: 17rem;
    background:  rgb(228, 138, 3);;
    color: black;
    border: none;
    border-radius: 5rem;
    box-shadow:0 .3rem 1rem rgba(0,0,0, .3);
    cursor: pointer;
    font-size: 2rem;
    transition: .2s;
}

.about .row .content button:hover{
    letter-spacing: .2rem;
    opacity: .8;
}







#abrirContaBtn button {
  background-color: rgb(228, 138, 3); 
  color: #0A0A1A;
  padding: 12px 24px;
  border: none;
  border-radius: 30px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
 
}

#abrirContaBtn button:hover {
  background-color: rgba(228, 138, 3, 0.5);
  transform: scale(1.02);
}

#abrirContaBtn button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.5);
}















.teacher{
     /* Degradê de um azul muito claro para um azul ligeiramente mais intenso */
    background-color: #000033;
    margin-bottom: 200px;
}

.teacher .card-container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 2rem 0;
}

.teacher .card-container .card{
    padding: 2rem;
    margin: 2rem;
    background: linear-gradient(135deg, #a4bdd3, #0A0A1A);
    text-align: center;
    width: 28rem;
    box-shadow: 0 .3rem .5rem rgba(0,0,0, .3);
    border-radius: 2rem; /* Esta linha arredonda os cantos */
}



.teacher .card-container .card img{
    height: 30rem;
    width: 100%;
    object-fit: cover;
    transition: .2s;
}

.teacher .card-container .card:hover img{
    filter: grayscale();
}



.teacher .card-container .card h3{
    color: white;
    font-size: 2rem;
    padding: .5rem 0;
}

.teacher .card-container .card p{
    font-size: 1.7rem;
    color: whitesmoke;
}


.teacher .card-container .card .icons a{
    font-size: 1.9rem;
    padding: 1.5rem .5rem;
    color: rgb(228, 138, 3);
}

.teacher .card-container .card .icons a:hover{
    color: rgb(228, 138, 3);
}

.teacher .heading{
    color:white;
}

.teacher .title{
    color: var(--cor-texto-escuro-sutil);
}














/* Estilos para o contêiner geral dos cards */
.box-container-3 {
    display: flex;
    flex-wrap: wrap; /* Permite que os cards quebrem para a próxima linha em telas menores */
    justify-content: center; /* Centraliza os cards horizontalmente */
    gap: 3rem; /* Espaço entre os cards */
    padding: 5rem 0; /* Espaçamento interno superior e inferior */
    max-width: 1200px; /* Limita a largura máxima do contêiner */
    margin: 0 auto; /* Centraliza o contêiner na página */
}

/* Estilos para cada box/card individual */
.box-card-3 {
    margin: 1rem;
    background-color: #adc1d3; /* Fundo branco para os cards */
    border-radius: 1.5rem; /* Bordas levemente arredondadas */
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1); /* Sombra suave para profundidade */
    padding: 3rem; /* Espaçamento interno generoso */
    width: calc(33% - 2rem); /* Ocupa cerca de um terço da largura, com ajuste para o gap */
    min-width: 300px; /* Largura mínima para o card em telas menores */
    text-align: left; /* Alinha o texto à esquerda */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição suave para hover */
    cursor: default; /* Mantém o cursor padrão */
}

/* Efeito ao passar o mouse sobre o card */
.box-card-3:hover {
    transform: translateY(-0.5rem); /* Levanta o card um pouco */
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15); /* Sombra mais pronunciada */
}

/* Estilos para o título (h4) dentro do card */
.box-card-3 h4 {
    font-size: 2.2rem; /* Tamanho da fonte do título */
    color: rgb(7, 66, 116); /* Cor azul mais escura para o título */
    margin-bottom: 1rem; /* Espaço abaixo do título */
    display: flex; /* Para alinhar o ícone e o texto */
    align-items: center; /* Centraliza verticalmente o ícone com o texto */
}

/* Estilos para o ícone (i) dentro do título */
.box-card-3 h4 i {
    font-size: 2.8rem; /* Tamanho do ícone um pouco maior */
    color: rgb(228, 138, 3); /* Cor laranja para o ícone */
    margin-right: 1.2rem; /* Espaço entre o ícone e o texto do título */
}

/* Estilos para o parágrafo (p) dentro do card */
.box-card-3 p {
    font-size: 1.6rem; /* Tamanho da fonte do parágrafo */
    color: #555555; /* Cor cinza escuro para o texto do parágrafo */
    line-height: 1.6; /* Espaçamento entre linhas para melhor leitura */
}

/* --- Media Queries para Responsividade --- */

/* Para tablets e telas menores que 991px */
@media (max-width: 991px) {
    .box-container-3 {
        padding: 4rem 2rem; /* Ajusta o padding para telas menores */
        gap: 2.5rem;
    }

    .box-card-3 {
        width: calc(48% - 2rem); /* Dois cards por linha */
        padding: 2.5rem;
    }

    .box-card-3 h4 {
        font-size: 2rem;
    }

    .box-card-3 h4 i {
        font-size: 2.5rem;
    }

    .box-card-3 p {
        font-size: 1.5rem;
    }
}

/* Para celulares e telas menores que 768px */
@media (max-width: 768px) {
    .box-container-3 {
        padding: 3rem 1.5rem;
        gap: 2rem;
    }

    .box-card-3 {
        width: 100%; /* Um card por linha para telas muito pequenas */
        padding: 2rem;
        margin: 0; /* Remove margens que possam atrapalhar no mobile */
    }

    .box-card-3 h4 {
        font-size: 1.8rem;
        justify-content: center; /* Centraliza ícone e título no mobile */
        text-align: center;
    }

    .box-card-3 h4 i {
        font-size: 2.2rem;
        margin-right: 1rem; /* Ajusta o espaço */
    }

    .box-card-3 p {
        font-size: 1.4rem;
        text-align: center; /* Centraliza o texto do parágrafo */
    }
}





.course {
    background-color: #000033;
    padding: 5rem 0; /* Add some vertical padding */
    text-align: center; /* Center the headings */
}

.course .heading {
    color: #fff;
    font-size: 3.5rem; /* Larger heading */
    margin-bottom: 1rem;
}

.course .title {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.8rem;
    margin-bottom: 3rem; /* Space below the subtitle */
}

/* Updated to target the correct class: box-container-3 */
.course .box-container-3 {
    width: 90%; /* Adjust width for better responsiveness */
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allows cards to wrap to the next line */
    gap: 2rem; /* Space between cards */
    margin: 0 auto; /* Center the container */
}

/* Updated to target the correct class: box-card-3 */
.course .box-card-3 {
    background-color: #1a1a2e; /* Slightly lighter background for cards */
    border-radius: 0.8rem;
    padding: 2.5rem; /* Increased padding inside cards */
    flex: 1 1 28rem; /* Flex shorthand: grow, shrink, basis. Makes cards responsive */
    max-width: 35rem; /* Max width for individual cards */
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3); /* Softer, more modern shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effects */
    text-align: center; /* Center content within the card */
}

.course .box-card-3:hover {
    transform: translateY(-0.7rem); /* Lift effect on hover */
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4); /* Stronger shadow on hover */
}

.course .box-card-3 i {
    height: 7rem; /* Smaller icon size */
    width: 7rem;
    line-height: 7rem; /* Center icon vertically */
    color: #fff;
    border-radius: 50%; /* Make it a perfect circle */
    background: linear-gradient(45deg, rgb(228, 138, 3), var(--violet)); /* Gradient background for icon */
    margin-bottom: 2rem; /* Space below icon */
    font-size: 3rem; /* Adjusted icon font size */
    display: inline-flex; /* Use flexbox for perfect centering of icon inside circle */
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.2) inset; /* Subtle inner shadow */
}

.course .box-card-3 h4 {
    font-size: 2.2rem; /* Slightly larger heading inside card */
    color: #fff;
    margin-bottom: 1rem;
}

.course .box-card-3 p {
    font-size: 1.6rem; /* Adjusted paragraph font size */
    color: rgba(255, 255, 255, 0.8); /* Slightly lighter text color */
    line-height: 1.6; /* Improve readability */
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .course .box-container-3 {
        width: 95%; /* Wider on smaller screens */
    }

    .course .box-card-3 {
        flex: 1 1 90%; /* Stack cards on very small screens */
        max-width: 90%;
    }
}

@media (max-width: 480px) {
    .course .heading {
        font-size: 2.8rem;
    }

    .course .title {
        font-size: 1.5rem;
    }

    .course .box-card-3 {
        padding: 2rem;
    }

    .course .box-card-3 h4 {
        font-size: 2rem;
    }

    .course .box-card-3 p {
        font-size: 1.4rem;
    }
}





/* Seus estilos existentes para .review e títulos */


.review {
    width: 100%;
    margin: 0;
    padding: 50px 0;
    box-sizing: border-box;
    text-align: center;
    background-color: #000033;
    margin-top: 100px;
    margin-bottom: 100px;
    position: relative;
}

.review .heading {
    color: white;
}

.review .title {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 40px;
}

/* NOVO: Estilos para o contêiner do carrossel */
.carousel-container {
    position: relative;
    width: 90%; /* Ajuste a largura do contêiner do carrossel */
    max-width: 1200px; /* Largura máxima */
    margin: 0 auto; /* Centraliza o carrossel */
    overflow: hidden; /* **ESSENCIAL** para ocultar o que está fora da vista */
    padding: 20px 0; /* Espaçamento vertical, botões vão ficar nas laterais */
}

/* Antigo .box-container, agora também carousel-wrapper */
.review .box-container {
    display: flex;
    gap: 20px;
    transition: transform 0.5s ease; /* Transição suave para a rolagem */
    /* Remove o wrap para que os itens fiquem em uma única linha */
    flex-wrap: nowrap;
}

.review .box-container .box {
    /* Mantenha 0 0 para que os itens não encolham nem cresçam */
    /* A largura é crucial. Calc para 3 itens, considerando o gap. */
    flex: 0 0 calc(33.333% - (40px / 3)); /* 3 boxes por linha com 20px de gap */
    /* Explicação: (20px * (itemsPerSlide - 1) / itemsPerSlide)
       Para 3 itens, são 2 gaps. 20px * 2 = 40px. Divida 40px por 3 itens. = 13.333px */
    width: auto; /* Deixe o flex controlar a largura */
    padding-bottom: 1rem;
    text-align: center;
    box-shadow: 0 .3rem .5rem rgba(0,0,0,.3);
    background: #a4bdd3;
    margin: 4rem 0; /* Apenas margem vertical, o gap cuida da horizontal */
    border-radius: 20px;
    box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura */
}

/* Seus outros estilos de .box img, h2, h3, p, stars... permanecem */
.review .box-container .box img {
    height: 8.5rem;
    width: 8.5rem;
    object-fit: cover;
    border-radius: 50%;
    margin-top: -4rem;
    border: .6rem solid rgb(228, 138, 3);
    border-left: .6rem solid var(--violet); /* Se --violet não definida, defina ou use um valor */
    border-bottom: .6rem solid var(--violet); /* Se --violet não definida, defina ou use um valor */
}

.review .box-container .box h2{
    font-size: 2rem;
    color:rgb(7, 66, 116);
    padding:0 .5rem;
}

.review .box-container .box h3{
    font-size: 2rem;
    color:rgb(7, 66, 116);
    padding:0 .5rem;
}

.review .box-container .box p{
    font-size: 1.4rem;
    color: #555555;
    padding:0 1.3rem;
    min-height: 120px; /* Adicionado: Ajuda a manter a altura das caixas mais uniforme */
    display: -webkit-box; /* Para ellipsis em múltiplas linhas */
    overflow: hidden; /* Oculta o texto que excede as linhas */
}

.review .box-container .box .stars i{
    font-size: 1.6rem;
    color: rgb(228, 138, 3);
    padding: 1.3rem .1rem;
}

/* Estilos para os botões e pontos (permanecem os mesmos) */
.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    padding: 12px 18px;
    cursor: pointer;
    font-size: 1.8em;
    border-radius: 50%;
    z-index: 10;
    transition: background-color 0.3s ease;
}

.carousel-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.carousel-button.prev {
    left: -20px; /* Ajuste para fora do container se desejar */
}

.carousel-button.next {
    right: -20px; /* Ajuste para fora do container se desejar */
}














/* NOVO: Estilos para os botões de navegação */
.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.6); /* Cor de fundo escura, semi-transparente */
    color: white;
    border: none;
    padding: 12px 18px;
    cursor: pointer;
    font-size: 1.8em;
    border-radius: 50%; /* Botões redondos */
    z-index: 10; /* Garante que os botões fiquem acima dos depoimentos */
    transition: background-color 0.3s ease;
}

.carousel-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.carousel-button.prev {
    left: 0; /* Alinhado à esquerda do carousel-container */
}

.carousel-button.next {
    right: 0; /* Alinhado à direita do carousel-container */
}

/* NOVO: Estilos para os pontos de navegação */






@media (max-width: 768px) {
    .review .box-container .box {
        /* Para exibir 1 box por vez, sem encolher */
        flex: 0 0 100%;
        margin: 2rem 0;
    }
    .carousel-button {
        padding: 8px 12px;
        font-size: 1.4em;
    }
    .carousel-button.prev {
        left: 0;
    }
    .carousel-button.next {
        right: 0;
    }
}




/* --- Estilos para a Seção do Cartão UltraBlue --- */
.cartao {
    background-color: #0A0A1A; /* Fundo escuro pra contrastar */
    padding: 80px 20px; /* Espaçamento interno em cima/baixo e laterais */
    text-align: center; /* Centraliza todo o texto */
    color: white; /* Cor do texto padrão para branco */
}

.cartao .heading {
    /* Herda de .heading global, mas podemos ajustar aqui se necessário */
    font-size: 3.8rem; /* Um pouco menor que o da Home, mas ainda impactante */
    color: var(--cor-texto-claro); /* Cor do texto branco usando variável */
    margin-bottom: 1.5rem; /* Espaço abaixo do título */
    text-transform: uppercase; /* Texto em maiúsculas */
    letter-spacing: 0.1em; /* Pequeno espaçamento entre as letras */
    /* text-shadow: 0.2rem 0.3rem var(--sombra-leve); */ /* Opcional: Adicione sombra se quiser mais destaque */
    max-width: 900px; /* Limita a largura do título, se ele for muito longo */
    margin-left: auto; /* Centraliza o título */
    margin-right: auto; /* Centraliza o título */
}

.cartao .title {
    

    /* Herda de .title global, mas ajustamos para a cor e tamanho da seção */
    font-size: 2.2rem; /* Tamanho do subtítulo */
    color: var(--cor-texto-escuro-sutil); /* Cor do texto cinza sutil usando variável */
    margin-bottom: 4rem; /* Mais espaço abaixo do subtítulo antes da row */
    max-width: 900px; /* Limita a largura do subtítulo para melhor leitura */
    margin-left: auto; /* Centraliza o subtítulo */
    margin-right: auto; /* Centraliza o subtítulo */
    line-height: 1.5; /* Espaçamento entre as linhas do subtítulo */
    
   
}



.cartao .row {
    display: flex; /* Usa Flexbox para alinhar a imagem e o conteúdo da lista */
    flex-wrap: wrap; /* Permite que os itens quebrem a linha em telas pequenas */
    justify-content: center; /* Centraliza os itens horizontalmente */
    align-items: center; /* Alinha os itens verticalmente */
    gap: 50px; /* Espaçamento entre a imagem e o conteúdo da lista */
    max-width: 1200px; /* Limita a largura máxima da linha */
    margin: 0 auto; /* Centraliza a linha */
}

.cartao .row .image {
    flex: 1 1 500px; /* A imagem pode crescer/diminuir, com base de 500px */
    padding: 20px; /* Espaçamento interno na caixa da imagem */
    box-sizing: border-box; /* Inclui padding e borda no tamanho total */
}

.cartao .row .image img {
    max-width: 100%; /* Garante que a imagem não transborde */
    height: auto; /* Mantém a proporção da imagem */
    display: block; /* Remove espaços extras abaixo da imagem */
    border-radius: 15px; /* Bordas levemente arredondadas para a imagem */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Sombra suave para destacar a imagem */
}

/* --- NOVOS ESTILOS: Para a Lista de Tópicos --- */
.cartao .row .content-list {
    flex: 1 1 400px; /* O container da lista pode crescer/diminuir, com base de 400px */
    background: #1a1a2e; /* Fundo mais escuro para o container da lista */
    padding: 40px 30px; /* Espaçamento interno */
    border-radius: 15px; /* Bordas arredondadas */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Sombra igual à da imagem */
    box-sizing: border-box; /* Inclui padding e borda no tamanho total */
    max-width: 500px; /* Limita a largura máxima do container da lista */
    text-align: left; /* Alinha o texto da lista à esquerda */
}

.cartao .row .content-list ul {
    list-style: none; /* Remove os marcadores padrão da lista */
    padding: 0; /* Remove o padding padrão da lista */
    margin: 0 0 30px 0; /* Margem inferior para separar do botão */
}

.cartao .row .content-list ul li {
    font-size: 1.8rem; /* Tamanho da fonte dos tópicos */
    color: white; /* Cor do texto dos tópicos */
    margin-bottom: 15px; /* Espaçamento entre os tópicos */
    line-height: 1.4; /* Altura da linha para melhor leitura */
    display: flex; /* Para alinhar o ícone com o texto */
    align-items: flex-start; /* Alinha o ícone e o texto ao topo */
}

.cartao .row .content-list ul li i {
    color: rgb(228, 138, 3); /* Cor do ícone (laranja/dourado) */
    margin-right: 15px; /* Espaço entre o ícone e o texto */
    font-size: 2.2rem; /* Tamanho maior para o ícone */
    margin-top: 2px; /* Pequeno ajuste vertical do ícone */
}

/* Estilos para o botão "Saiba Mais" */
.cartao .row .content-list .btn-saiba-mais {
    display: inline-block;
    width: auto;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    background-color: rgb(228, 138, 3); /* Cor de destaque (laranja/dourado) */
    color: #0A0A1A; /* Cor do texto do botão para contrastar */
    font-size: 1.8rem;
    font-weight: bold;
    text-decoration: none; /* Remove sublinhado do link */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.cartao .row .content-list .btn-saiba-mais:hover {
    background-color: rgb(255, 150, 0); /* Escurece o botão ao passar o mouse */
    transform: translateY(-2px); /* Efeito sutil de "pulo" */
}



















.contact{
    width: 100%;
    margin: 0;
    padding: 50px 0;
    box-sizing: border-box;
    text-align: center;
    background-image: linear-gradient(to bottom, #000033, white) !important;
}

.contact .row{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 0;
    flex-wrap: wrap;
}

.contact .row .image  img{
    width: 50vw;
    height: 70vh;
}




.contact .row .form-container {
    width: 100%; /* Ocupa 100% da largura do contêiner pai */
    max-width: 500px; /* Limita a largura máxima para não ficar muito largo em desktops */
    background-image: linear-gradient(to bottom, #1a1a2e, black);
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

.contact .row .form-container form {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza os campos horizontalmente */
    gap: 20px; /* Adiciona espaçamento entre os campos */

}

.contact .row .form-container form input,
.contact .row .form-container form textarea {
   width: 100%;
    max-width: 350px; /* Limita a largura máxima dos campos para centralizar */
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1.6rem;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}



.contact .row .form-container input:focus, textarea:focus{
      border:.2rem solid rgb(228, 138, 3);
}


.contact .row .form-container input[type="submit"]{
    width:17rem;
    background: rgb(228, 138, 3);
    color: black;
    cursor: pointer;
    font-size: 2rem;
    transition: .2s;
}

.contact .row .form-container input[type="submit"]:hover{
    letter-spacing: .2rem;;
    opacity: 0.8;
    background: rgba(255, 165, 0, 0.5);
}

.contact .heading{
    color: #fff;
}
.contact .title{
    color: var(--cor-texto-escuro-sutil);
}



.contact .form-container{
    margin: 30px;
}

.contact .image{
    margin: 30px;
}


/* Media Query para telas de dispositivos móveis */
@media (max-width: 768px) {
    /* O contêiner principal se torna uma coluna */
    .contact .row {
        flex-direction: column;
        align-items: center; /* Centraliza a imagem e o formulário */
        gap: 3rem;
    }

    /* A imagem ocupa toda a largura disponível */
    .contact .row .image {
        flex: 1 1 100%;
    }

    /* O contêiner do formulário também ocupa toda a largura */
    .contact .row .form-container {
        flex: 0 0 60%;
        padding:  20px; /* Adiciona um padding para não "grudar" nas bordas */
    }

     .contact .row .form-container .form {
        width: 5px;
        padding: 5px; 
    }

    /* Ajuste na largura da imagem para garantir que ela se ajuste */
    .contact .row .image img {
        width: 100%;
        height: auto;
    }
}






.footer{
    background-color: #fff ;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer h4 {
    margin-right: 300px;
    margin-left: 300px;
    font-size: 11px;
}




.footer .icons{
    padding: 3rem 0;
}

.footer .icons a{
    height: 4.5rem;
    width: 4.5rem;
    line-height: 4.2rem;
    text-align: center;
    border-radius: 50%;
    color: var(--violet);
    border:.2rem solid var(--violet);
    font-size: 2rem;
    margin: 0 .1rem;
    transition: .2s linear;
}

.footer .icons a:hover{
    color: #fff;
    background: blue;
    border-color: blue;
}

.footer .credit{
    font-size: 2rem;
    border-top: .1rem solid #999;
    margin: 0 auto;
    margin-bottom: 2rem;
    color: #666;
    width: 90%;
    padding: 1rem 0;
}

.footer .credit span{
   color: var(--pink);
}



.contact .row .form-container textarea{
    height: 20rem;
    border-radius: 1rem;
    padding: 1rem;
    resize: none;   
}


.footer .end{
    margin-top: 10px;
    line-height: 1.8;
    color: rgb(7, 66, 116);
}


.footer .end h1{
    color:rgb(7, 66, 116);
    font-weight: bold;
}



/* 1. Esconda o ícone de hambúrguer por padrão (para telas de PC) */
.fas.fa-bars { /* Use ambas as classes para maior especificidade */
    display: none; /* Isso esconde o elemento em desktops e telas maiores */
}










/* --- Media Query para Telas Menores (Mobile/Tablet) --- */
/*
   Esta regra só será aplicada quando a largura da tela for
   igual ou menor que 768px (um ponto de quebra comum para mobile).
   Ajuste '768px' se precisar de um breakpoint diferente.
*/
@media (max-width: 768px) {
    .fas.fa-bars {
        display: block; /* Ou 'inline-block', 'flex' dependendo do seu layout. Isso faz o ícone aparecer novamente */
        /* Você pode adicionar estilos específicos para mobile aqui, se quiser: */
        /* font-size: 3rem; */
        /* color: blue; */
        /* cursor: pointer; */
    }
}








header .fa-times{
    transform: rotate(180deg);
    color: rgb(228, 138, 3);
}






.form-container button[type="submit"]{
    height: 3.5rem;
    width: 17rem;
    background:  rgb(228, 138, 3);;
    color: black;
    border: none;
    border-radius: 5rem;
    box-shadow:0 .3rem 1rem rgba(0,0,0, .3);
    cursor: pointer;
    font-size: 2rem;
    transition: .2s;
}

.form-container button[type="submit"]:hover{
    opacity: .8;
}











.corpo {
    width: 100%;
    height: 100vh; /* Define a altura da classe corpo como 100% da altura da janela do navegador */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza verticalmente */
    align-items: center; /* Centraliza horizontalmente */
    background-color: #074274; /* Define o fundo como azul escuro */
    color: #ffffff; /* Define a cor do texto como branco */
    font-size: 24px; /* Aumenta o tamanho da letra para 24 pixels */
}

.corpo h1, .corpo h2, .corpo a {
    display: block; /* Cada elemento aparece em uma linha separada */
}

.retangulo {
    color: #074274;
    background-color: #ffffff; /* Define o fundo do retângulo como branco */
    padding: 10px 20px; /* Adiciona preenchimento ao redor do texto */
    border-radius: 5px; /* Adiciona bordas arredondadas */
    text-decoration: none; /* Remove a sublinhado padrão */
}

.retangulo:hover {
    background-color: #cccccc; /* Define a cor de fundo ao passar o mouse */
}











@media (max-width: 768px){
    html{
        font-size: 55%;
    }

    header .fa-bars{
        display: block;
    }
    header .navbar{
        position: fixed;
        top: -100rem; left: 0;
        width: 100%;
        background: #fff;
        border-radius: 1rem;
        opacity: 0;
        transition: .2s linear;
    }

    header .navbar ul{
        flex-flow: column;
        padding: 1rem 0;
    }

    header .navbar ul li{
        margin: 1rem 0;
        width: 100%;
        text-align: center;
    }

    header .navbar ul li a{
        font-size: 3rem;
        display: block;
    }

    header .nav-toggle{
        top: 5.5rem;
        opacity: 1;
    }

    .home .content p{
        padding: 1.5rem 2rem;
    }

    .home::before{
        display: none;
    }

    .about .row{
        flex-flow: column-reverse;
    }

    .about .row .image img{
        height: 60vh;
        width: 90vw;
    }

    .about .row .content{
        padding: 0 2.5rem;
    }
    .course .box-container{
        width: 100%;
    }
    .contact .row{
        flex-flow: column;
    }
    .contact .row .image img{
        height: 50vh;
        width: 90vw;
    }
    .contact .row .form-container{
        width: 90%;
        padding: 0;
    }
}




/*ajuste para telas menores do formulário /


/* Media Query para telas menores que 768px */
@media (max-width: 768px) {
  .contact .row .form-container {
    padding: 0 rem; /* Adiciona um espaçamento nas laterais para não "grudar" nas bordas */

  }
}


/* --- Estilos para o Contêiner Principal que Agrupa as Caixas --- */
.container-caixas {
    /* Transforma este div em um contêiner flexível */
    display: flex;
    
    /* Permite que as caixas quebrem para a próxima linha */
    flex-wrap: wrap;
    
    /* Centraliza as caixas horizontalmente */
    justify-content: center;
    
    /* Adiciona um espaço uniforme entre as caixas */
    gap: 30px;
    
    /* Limita a largura do contêiner para uma melhor leitura */
    max-width: 1200px;
    
    /* Centraliza o contêiner na página */
    margin: 4rem auto;
}


/* --- Estilos para cada uma das Caixas de Benefício --- */
.content-list {
    /* Define o tamanho da caixa e a torna responsiva */
    /* flex-grow | flex-shrink | flex-basis */
    flex: 1 1 300px; /* Base de 300px. As caixas crescem e encolhem para caber. */
    
    /* Adiciona um fundo e bordas suaves */
    background: #1a1a2e;
    border-radius: 15px;
    
    /* Espaçamento interno para o conteúdo */
    padding: 40px 30px;
    
    /* Adiciona uma sombra para criar um efeito de profundidade (card) */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    
    /* Transição suave para efeitos de hover */
    transition: transform 0.3s ease;
    
    /* Alinha o texto à esquerda */
    text-align: left;
}

/* Efeito ao passar o mouse sobre a caixa */
.content-list:hover {
    transform: translateY(-5px); /* Move a caixa 5px para cima, criando um efeito sutil */
}

/* --- Estilos para o Ícone dentro da Caixa --- */
.content-list ul li i {
    color: rgb(228, 138, 3); /* Cor de destaque para o ícone */
    margin-right: 15px; /* Espaço entre o ícone e o texto */
    font-size: 2.2rem;
}


/* --- Media Query para Telas de Celular (Responsividade) --- */
@media (max-width: 768px) {
    /* Em telas menores, as caixas se empilham em uma única coluna */
    .container-caixas {
        flex-direction: column;
        align-items: center; /* Centraliza as caixas na tela do celular */
    }

    /* Cada caixa ocupa quase a largura total da tela */
    .content-list {
        max-width: 90%;
    }
}


/* --- Estilos Gerais --- */

/* Estilos para a seção principal, adicionando padding e cor de fundo */
.divisoes {
    padding: 60px 20px;
}

/* --- Estilos para os Títulos de Seção --- */

/* Estilos para o título principal (Vantagens) */
.heading {
    color: white;
}

/* Estilos para o subtítulo (Macaw você escolhe...) */
.title {
    color: rgba(255, 255, 255, 0.7);
}

/* Os estilos abaixo foram combinados e otimizados para um código mais limpo e eficiente. */

/* --- Estilos para o Layout e Caixas de Conteúdo --- */

/* O container principal das caixas, usando Flexbox para organizar em linha */
.container-caixas {
    display: flex;
    flex-wrap: wrap; /* Permite que as caixas quebrem para a próxima linha em telas menores */
    justify-content: center; /* Centraliza as caixas horizontalmente */
    gap: 30px; /* Espaço entre as caixas */
    max-width: 1200px;
    margin: 4rem auto;
}

/* A caixa individual que contém o título, subtítulo e lista */
.content-list {
    flex: 1 1 300px;
    background: #1a1a2e; /* Mantive a cor do segundo bloco para a coerência visual */
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Sombra mais destacada */
    transition: transform 0.3s ease;
    padding: 30px;
    box-sizing: border-box;
    overflow: hidden;
}

/* --- Estilos para a Funcionalidade de Acordeão --- */

/* Título e subtítulo clicáveis, funcionando como o cabeçalho do acordeão */
.accordion-header {
    cursor: pointer;
    text-align: center;
    display: flex; /* Permite alinhar a seta com o texto */
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 2px solid transparent; /* Seta um border-bottom para a transição */
    transition: border-bottom 0.3s ease-out;
}

.accordion-header:hover {
    border-bottom: 2px solid #333; /* Adiciona uma linha sutil no hover */
}

/* Estilo para a seta de expansão (fechado por padrão) */
.accordion-header::after {
    content: '+';
    font-size: 2.5rem;
    font-weight: bold;
    color: rgb(228, 138, 3);
    transition: transform 0.3s ease-out;
    line-height: 1; /* Alinha verticalmente */
}

/* Anima a seta quando o item está ativo (aberto) */
.accordion-item.active .accordion-header::after {
    content: '-';
    transform: rotate(0deg);
}

/* Oculta a lista de benefícios por padrão */
.lista-escondida {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0; /* A chave para a animação de sanfona */
    transition: max-height 0.5s ease-out;
    overflow: hidden;
    color: white;
}

/* Mostra a lista quando a classe 'active' é adicionada ao item */
.accordion-item.active .lista-escondida {
    max-height: 500px; /* Valor grande o suficiente para o conteúdo */
    padding-top: 20px;
    transition: max-height 0.5s ease-in;
}

/* --- Estilos de Texto e Ícones --- */

.lista-titulo {
    font-size: 1.8em;
    font-weight: bold;
    color: white;
    margin-bottom: 10px;
}

.texto-caixas {
    font-size: 1.5em;
    color: white;
    margin-bottom: 25px;
}

.content-list h2,
.content-list h3 {
    margin: 0;
}

.lista-escondida li {
    font-size: 1.6rem;
    margin-bottom: 10px;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
}

.lista-escondida li i {
    color: white; /* Cor do ícone de check */
    margin-right: 10px;
    font-size: 1.8rem;
    margin-top: 2px;
}

/* Estilos para o botão "Saiba Mais" - não estava no HTML, mas mantive as regras */
.btn-saiba-mais {
    display: inline-block;
    padding: 12px 25px;
    background-color: #1c2a4f;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.btn-saiba-mais:hover {
    background-color: #0d1a38;
}

/* --- Responsividade --- */

/* Media Query para telas menores */
@media (max-width: 768px) {
    .heading {
        font-size: 2em;
    }

    .container-caixas {
        flex-direction: column; /* As caixas ficam em coluna em telas pequenas */
    }
}



/*sessão de assessores*/






/* --- CSS Otimizado e Moderno --- */

/* Seção Principal */
.aai {
    /* Fundo da seção: Degradê de azul escuro, ideal para um visual premium */
    /*background: linear-gradient(180deg, #0A0A1A 0%, #000033 100%); */
    padding: 80px 0; /* Mais espaçamento no topo e rodapé */
    margin-bottom: 0; /* Removido o margin-bottom para integrar melhor */
}

/* Título da Seção */
.aai .heading {
    color: #FFFFFF; /* Branco puro */
    text-align: center;
    font-size: 3.5rem; /* Título maior */
    font-weight: 800; /* Mais impacto */
    margin-bottom: 3rem; 
    letter-spacing: 1px; /* Para um visual mais profissional */
}

/* Container dos Cards (Flexbox) */
.aai .card-container {
    display: flex;
    align-items: stretch; /* Garante que todos os cards tenham a mesma altura */
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 10%; /* Padding lateral para telas grandes */
    gap: 3rem; /* Aumentei o espaçamento entre os cards */
}

/* Card Individual (Melhoria do Design) */
.aai .card-container .card {
    padding: 2.5rem; /* Mais padding interno */
    background-color: rgba(255, 255, 255, 0.05); /* Fundo sutilmente transparente e escuro */
    /* backdrop-filter: blur(10px); /* Efeito "Glassmorphism" (vidro embaçado) - opcional, dependendo do fundo */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borda fina para definição */
    text-align: center;
    width: 30rem; /* Ligeiramente mais largo */
    max-width: 90%; /* Responsividade melhorada */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); /* Sombra mais difundida e suave */
    border-radius: 1.5rem;
    transition: all 0.4s ease-out; /* Transição mais suave e para mais propriedades */
}

/* Efeito Hover do Card (Mais Dinâmico) */
.aai .card-container .card:hover {
    transform: translateY(-15px) scale(1.02); /* Elevação maior e ligeiro aumento de escala */
    box-shadow: 0 15px 40px rgba(0, 255, 255, 0.2), 0 0 15px rgba(0, 255, 255, 0.1); /* Sombra com brilho ciano */
    background-color: rgba(255, 255, 255, 0.08);
}

/* Imagem */
.aai .card-container .card img {
    height: 35rem; /* Imagem mais alta */
    width: 100%;
    object-fit: cover;
    border-radius: 1rem; /* Arredondamento da imagem */
    margin-bottom: 1.5rem;
    filter: grayscale(0%); /* Remove a escala de cinza inicial */
    transition: filter 0.5s ease;
}

/* Efeito Hover da Imagem */
.aai .card-container .card:hover img {
    filter: grayscale(50%) brightness(1.1); /* Efeito mais sutil e iluminado */
}

/* Nome do Assessor */
.aai .card-container .card h3 {
    color: #00FFFF; /* Destaque com cor ciano/turquesa */
    font-size: 2.8rem;
    padding: 0 0 0.8rem 0;
    font-weight: 700;
}

/* Descrição do Assessor */
.aai .card-container .card p {
    font-size: 1.6rem;
    color: #CCCCCC; /* Cinza claro para melhor leitura no fundo escuro */
    line-height: 1.7;
    margin-bottom: 2rem;
    flex-grow: 1; /* Permite que o texto preencha o espaço para o alinhamento de altura */
}

/* Ícones de Redes Sociais */
.aai .card-container .card .icons a {
    font-size: 2.4rem; /* Ícones ligeiramente maiores */
    padding: 0 1rem; /* Ajustado para melhor espaçamento horizontal */
    color: #FFFFFF; /* Branco no estado normal */
    transition: color 0.3s ease, transform 0.3s ease;
}

/* Efeito Hover do Ícone */
.aai .card-container .card .icons a:hover {
    color: #00FFFF; /* Brilho ciano */
    transform: scale(1.1); /* Ligeiro aumento para chamar a atenção */
}