/* Estilos para a Segunda Seção */
 .secondary-section {
     background-color: #FFF;
     /* Um cinza claro de fundo */
     padding-top: 2rem;
     padding-bottom: 2rem;
 }

 /* Detalhe da linha de fundo (image_5.png) */
 .bg-line-detail {
     position: absolute;
     top: 0;
     /* Ajuste conforme a imagem real para alinhar */
     left: 0;
     width: 40%;
     height: auto;
     opacity: 0.6;
     /* Tornar um pouco transparente */
     z-index: 0;
     /* Fica bem no fundo */
 }

 /* Área de Imagens (col-lg-7) */
 .secondary-image-area {
     height: 600px;
     /* Altura fixa para posicionamento */
     display: flex;
     justify-content: center;
     align-items: flex-end;
     /* Alinha os elementos pela base */
 }

 /* Laptop Frame (image_2.png) - Subir um pouco mais */
 .laptop-frame {
     position: absolute;
     width: 80%;
     max-width: 800px;
     bottom: 35%;
     /* Aumentado de 0 para 5% para subir a imagem */
     z-index: 2;
 }

 /* Phones in Front (image_4.png) - Ajustar para acompanhar o laptop subindo */
 .phones-front {
     position: absolute;
     width: 45%;
     max-width: 450px;
     bottom: 20%;
     /* Ajustado de -10% para 0% ou até um pouco mais, para que pareça estar em cima da base do laptop */
     left: 30%;
     transform: translateX(-50%);
     z-index: 4;
 }

 /* Card "Um sistema inteligente de verdade" - Ajustar para acompanhar o laptop subindo */
 .card-feature {
     top: 75%;
     /* Ajustado de 100% para 75% para subir o card */
     left: 75%;
     transform: translate(-50%, -50%);
     width: 280px;
     text-align: center;
     z-index: 5;
     border: none;
     border-radius: 1rem;
 }



 .icon-brain {
     width: 50px;
     height: auto;
     margin-bottom: 10px;
 }

 .short-line {
     width: 50px;
     height: 4px;
     background-color: var(--cyan);
     /* Usa a cor ciano do gradiente */
     border-radius: 2px;
     margin-top: 15px;
 }

 /* Estilos de responsividade para telas menores */
 @media (max-width: 992px) {
     .secondary-section {
         padding-top: 3rem;
         padding-bottom: 3rem;
     }

     .secondary-image-area {
         height: auto;
         /* Deixa a altura flexível */
         min-height: 400px;
         margin-bottom: 3rem;
         align-items: center;
     }

     .laptop-frame,
     .laptop-screen,
     .phones-front {
         position: relative;
         /* Remove o posicionamento absoluto no mobile */
         transform: none;
         left: auto;
         top: auto;
         bottom: auto;
         width: 90%;
         /* Ajusta o tamanho */
         max-width: none;
         margin: auto;
         /* Centraliza */
         display: block;
     }

     .laptop-screen {
         display: none;
         /* Pode ser melhor esconder a tela interna no mobile */
     }

     .phones-front {
         width: 70%;
         /* Ajusta o tamanho para caber */
         margin-top: -10%;
         /* Sobrepõe um pouco o laptop */
     }

     .card-feature {
         position: relative;
         /* Remove absolute positioning */
         transform: none;
         left: auto;
         top: auto;
         margin-top: 2rem;
         /* Adiciona margem após os elementos */
     }

     .bg-line-detail {
         display: none;
         /* Esconde no mobile */
     }

     .features-card {
         padding: 2rem !important;
     }

     .features-section .col-lg-5 {
         text-align: center;
     }

     .features-section h2 {
         font-size: 2rem;
         margin-bottom: 2rem !important;
     }

     .features-section .col-6 {
         min-height: 150px;
         /* Garante que os boxes não fiquem esmagados */
     }
 }

 /* Container Principal com o Fundo Gradiente Arredondado */
 .features-card {
     /* Gradiente Copiado da Imagem (Azul Escuro para Ciano/Verde) */
     background: linear-gradient(135deg, var(--dark-blue), #00a0a0, var(--cyan));
     border-radius: 2rem;
     /* Cantos bem arredondados */
     position: relative;
     overflow: hidden;
 }

 /* Título Secundário (Cor mais clara dentro do gradiente) */
 .text-cyan-light {
     color: #40f0ff;
     /* Ciano/Azul claro para contraste */
 }

 /* Botão de Contorno (Outline) Customizado */
 .btn-custom-outline-cyan {
     /* Cor do texto e da borda */
     color: white;
     border: 2px solid white;
     padding: 0.75rem 2rem;
     border-radius: 50px;
     font-weight: 600;
     transition: all 0.3s ease;

     /* Efeito sutil de gradiente na borda (opcional, mas legal) */
     background-color: transparent;

 }

 .btn-custom-outline-cyan:hover {
     background: white;
     color: var(--blue);
     /* Texto fica azul no hover */
     border-color: white;
     transform: translateY(-2px);
 }

 /* Estilo dos Ícones (Garantir que sejam brancos) */
 .feature-icon {
     background-color: white;
     border-radius: 10px;
     width: 50px;
     align-items: center;
     justify-content: center;
     display: flex;
     height: 50px;
 }

 .feature-icon img {
     margin: 10px;
 }

 /* Estilos Globais */
 body {
     font-family: 'Poppins', sans-serif;
     overflow-x: hidden;
     /* Mantém a barra de rolagem lateral invisível */
 }

 /* Variáveis de Cores Estimadas */
 :root {
     --dark-blue: #27374D;
     /* Azul escuro para textos */
     --cyan: #00bfff;
     /* Ciano vibrante */
     --blue: #0055c7;
     /* Azul principal */
 }

 /* Título com Gradiente */
 .gradient-text {
     background: linear-gradient(to right, var(--blue), var(--cyan));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     color: transparent;
 }

 /* Estilo do Botão Principal (CTA) */
 .btn-custom-cyan {
     background: linear-gradient(to right, var(--cyan), var(--blue));
     border: none;
     color: white;
     padding: 1rem 2rem;
     border-radius: 50px;
     font-weight: 600;
     transition: all 0.3s ease;
 }

 .btn-custom-cyan:hover {
     background: linear-gradient(to right, var(--blue), var(--cyan));
     transform: translateY(-2px);
 }

 /* Estilos da Seção Principal */
 .hero-section {
     position: relative;
     /* Essencial para que o fundo se posicione corretamente */
     overflow: hidden;
     padding-top: 6rem;
     padding-bottom: 6rem;
 }

 /* Fundo Gradiente Estendido e Arredondado (Novo Estilo) */
 .hero-bg-shape {
     position: absolute;
     top: 0;
     /* Estende para 100% mais um valor grande para cobrir toda a tela, 
           mesmo que a coluna da imagem seja 50% */
     right: 0;
     width: 40vw;
     /* Ajuste para cobrir a área da imagem e um pouco mais */
     height: 80%;

     /* Gradiente de cor */
     background: linear-gradient(145deg, var(--blue), var(--cyan));

     /* O segredo da forma arredondada */
     border-bottom-left-radius: 100px;
     /* Ajuste o valor para mudar a curva */
     border-top-left-radius: 100px;
     z-index: 1;
     /* Fica atrás do conteúdo de texto, mas na frente da imagem principal */
 }

 /* Coluna da Imagem */
 .hero-image-area {
     min-height: 450px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     /* Para posicionar a imagem e o balão acima da forma de fundo */
     z-index: 2;
     /* Fica na frente do .hero-bg-shape */
 }

 /* Imagem principal em cima do fundo gradiente */
 .main-hero-image {
     max-width: 90%;
     height: auto;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     border-radius: 15px;
 }


 /* Estilo do Balão de 95% (Posicionamento Absoluto) */
 .percentage-box {
     position: absolute;
     top: 65%;
     left: -5%;
     z-index: 3;
     min-width: 180px;

     /* Efeitos visuais */
     border-radius: 1rem;
     border-left: 5px solid var(--cyan);
 }

 .circle-95 {
     width: 55px;
     height: 55px;
     border-radius: 50%;
     border: 4px solid var(--cyan);
     display: flex;
     justify-content: center;
     align-items: center;
     color: var(--blue);
     font-size: 1.2rem;
     font-weight: 700;
 }

 /* Estilos de responsividade para telas menores */
 @media (max-width: 992px) {
     .hero-image-area {
         order: -1;
         min-height: 300px;
         margin-bottom: 3rem;
     }

     .hero-bg-shape {
         display: none;
         /* Oculta a forma complexa no mobile para simplicidade */
     }

     .percentage-box {
         top: 85%;
         left: 50%;
         transform: translateX(-50%);
     }


 }

 .image_logo {
     width: 15%;
 }

 /* -- ESTILOS PARA A QUARTA SEÇÃO (BENEFÍCIOS) -- */

 .benefits-section {
     background-color: #FFF;
     /* Um fundo cinza/azul bem claro (quase branco) */
 }

 /* Estilo geral para todos os cards de benefício */
 .benefit-card {
     border: 1px solid #e0e0e0;
     /* Borda sutil */
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     min-height: 100%;
     /* Garante que todos os cards tenham a mesma altura */
     display: flex;
     flex-direction: column;
 }

 .benefit-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
 }

 /* Estilo para as imagens dentro dos cards (para dar o efeito de arredondamento superior) */
 .benefit-image {
     max-height: 200px;
     /* Limita a altura da imagem superior */
     width: 100%;
     object-fit: cover;
     border-radius: 5px;
 }

 .benefit-image-small {
     /* Imagens da linha inferior são mais quadradas e menores */
     max-height: 150px;
     width: 100%;
     object-fit: cover;
     border-radius: 5px;
 }

 /* Título de benefício */
 .benefit-card h3 {
     color: var(--dark-blue);
     font-size: 1.15rem;
     /* Um pouco menor que o padrão h3 */
 }

 /* Ajuste de Layout na Linha de Cards (Opcional) */
 @media (min-width: 992px) {

     /* Garante que a linha inferior (3 cards) ocupe a largura total */
     .benefits-section .row.justify-content-center:nth-of-type(2) {
         margin-top: 1rem;
     }
 }

 /* -- ESTILOS PARA A QUINTA SEÇÃO (DIFERENCIAIS E DEPOIMENTOS) -- */

 .differentiators-section {
     background-color: #FFF;
     /* Fundo cinza/azul claro */
 }

 /* -- NOVO ESTILO PARA CARDS HORIZONTAIS DE DIFERENCIAIS -- */

 /* Card de Diferencial (Horizontal) */
 .diff-card-horizontal {
     /* Define a altura do card, permitindo que o ícone e o texto fiquem na mesma linha */
     min-height: 120px;
     border: 1px solid #e0e0e0;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .diff-card-horizontal:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05) !important;
 }

 /* Imagem/Ícone do Diferencial (Horizontal) */
 .diff-icon-horizontal {
     width: 50px;
     /* Ajuste o tamanho da imagem/ícone conforme necessário */
     height: auto;
     /* Evita que a imagem encolha se o texto for muito grande */
     flex-shrink: 0;
 }

 /* Estilo do texto do Card */
 .diff-card-horizontal h3 {
     line-height: 1.3;
 }

 .diff-card-horizontal p {
     font-size: 0.8rem !important;
     /* Texto um pouco menor para caber */
 }

 /* Estilo da Linha de Onda Decorativa (image_16.png) */
 .decorative-wave-line {
     position: absolute;
     width: 40%;
     /* Ajuste para posicionar a curva. 
       Ajuste o valor 'top' até que a curva fique na posição desejada 
       entre os diferenciais e os depoimentos. */
     top: 36.3%;
     left: 62%;
     z-index: 1;
     /* Fica atrás dos depoimentos, mas na frente do fundo */
     /* Garante que a imagem se ajuste à largura */
     object-fit: cover;
     height: auto;
     transform: rotate(183deg);
 }

 /* Card de Depoimentos */
 .testimonial-card {
     position: relative;
     z-index: 2;
     top: -40%;
     /* Fica acima da linha de onda */
     min-height: 150px;
     /* Altura mínima para melhor visualização */
 }

 /* Círculo do Avatar (Círculo cinza placeholder) */
 .avatar-circle {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background-color: #ccc;
     /* Cinza do placeholder */
 }

 /* Pontos do Carrossel/Navegação */
 .testimonial-dots .dot {
     display: inline-block;
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background-color: #ddd;
     margin-left: 5px;
     transition: background-color 0.3s;
 }

 .testimonial-dots .dot.active {
     background-color: var(--cyan);
 }

 /* Ajustes de responsividade */
 @media (max-width: 992px) {
     .decorative-wave-line {
         display: none !important;
         /* Esconde a linha de onda no mobile */
     }

     .differentiators-section {
         padding-bottom: 2rem !important;
     }

     .testimonial-card {
         padding: 3rem 1.5rem !important;
         min-height: auto;
     }
 }

 .final-cta-section{
     /* Gradiente ajustado para ser mais escuro na esquerda e vibrante/ciano na direita */
     /* Usei um azul escuro mais saturado e o ciano/verde água */
     background: linear-gradient(to right, #003366, #008f8f);
     padding-top: 5rem;
     padding-bottom: 5rem;
     position: relative;
     overflow: hidden;
 }

 /* Título com fonte maior e negrito */
 .final-cta-section h2 {
     font-size: 3rem;
     /* Aumentado de 2rem para 3rem para ser mais impactante */
     font-weight: 700;
     /* Negrito */
     line-height: 1.2;
     margin-bottom: 1.5rem !important;
     /* Mais espaço antes do botão */
 }

 /* Botão com Fundo Branco e Borda/Texto Ciano */
 .btn-white-outline-cyan {
     /* Mantém o estilo para ser o CTA principal da seção */
     background-color: white;
     /* Borda e texto usam o ciano vibrante */
     border: 2px solid var(--cyan);
     color: var(--cyan);
     padding: 1rem 2rem;
     border-radius: 50px;
     font-weight: 700;
     transition: all 0.3s ease;
     align-self: center;
 }

 .btn-white-outline-cyan:hover {
     background: white;
     /* Mantém o fundo branco no hover */
     color: var(--blue);
     /* Mudar a cor do texto no hover é opcional */
     border-color: var(--blue);
     transform: translateY(-2px);
 }


 /* Responsividade: garantir bom espaçamento no mobile */
 @media (max-width: 768px) {
     .final-cta-section h2 {
         font-size: 2.2rem;
         /* Ajusta o título para telas menores */
     }

     .final-cta-section {
         padding-top: 3rem;
         padding-bottom: 3rem;
     }
 }

 .nav-item a {
     color: #27374D;
 }

 /* Footer */
 footer {
     background: linear-gradient(to right, #003366, #008f8f);
     color: white;
     padding: 50px 0 20px;
     margin-top: 100px;
 }

 .footer-links a {
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     /* Garante que não tenha sublinhado */
     transition: all 0.3s;
     display: block;
     margin-bottom: 10px;
     border-bottom: none;
     /* Remove qualquer borda inferior */
 }

 .footer-links a:hover {
     color: white;
     transform: translateX(5px);
     text-decoration: none;
     /* Remove sublinhado no hover */
     border-bottom: none;
     /* Remove borda inferior no hover */
 }

 .social-icon {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background-color: rgba(255, 255, 255, 0.1);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 10px;
     transition: all 0.3s;
     text-decoration: none !important;
     border-bottom: none !important;
 }

 .social-icon:hover {
     background-color: var(--primary);
     transform: translateY(-5px);
     text-decoration: none !important;
     border-bottom: none !important;
 }