:root {
--primary-bg-dark: #1a1a1e;
--secondary-bg-dark: #2c2c32;
--text-light: #f8f9fa;
--text-muted: #adb5bd;
--purple-accent: #9d50ff;
--purple-accent-hover: #863dff;
--yellow-accent: #ffd700;
}




.nav-item{
padding-left: 10px!important;
padding-right: 10px!important;
}







/* 1. Declara a sua fonte personalizada */
@font-face {
font-family: 'Agencia'; /* Você pode dar o nome que quiser */
src: url('../fonts/agencia200.woff2') format('woff2'); /* Caminho para a fonte */
font-weight: normal;
font-style: normal;
}


/* 2. Aplica a fonte ao 'body' (parágrafos, links, listas, etc.) */
body {
font-family: 'Agencia', sans-serif; /* 'Agencia' é o padrão */
}





body {
background-color: var(--primary-bg-dark);
color: var(--text-light);
font-family: 'Agencia', sans-serif; /* Assumindo uma fonte semelhante */
}

/* --- CORREÇÃO 1: Container mais estreito --- */
.container {
max-width: 1140px; /* Limita a largura máxima do container */
}







.navbar {
background-color: var(--primary-bg-dark);
border-bottom: 1px solid var(--secondary-bg-dark);
padding: 1rem 0;
}

.navbar-brand {
color: var(--text-light) !important;
font-weight: 700;
display: flex;
align-items: center;
}

.navbar-brand .logo-icon {
width: 24px;
height: 24px;
margin-right: 8px;
/* Você pode usar um SVG ou uma imagem aqui */
background-color: var(--purple-accent); /* Placeholder para o ícone */
-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2L1 21h22L12 2zm0 6L5.6 19h12.8L12 8z"/></svg>') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2L1 21h22L12 2zm0 6L5.6 19h12.8L12 8z"/></svg>') no-repeat center / contain;
}


.navbar-nav .nav-link {
color: var(--text-muted) !important;
margin-right: 1.5rem;
font-weight: 500;
}

.navbar-nav .nav-link:hover {
color: var(--text-light) !important;
}

/* --- CORREÇÃO 2: Tamanhos de botão diferentes --- */
.btn-outline-secondary-custom {
color: var(--text-muted);
border-color: var(--secondary-bg-dark);
background-color: transparent;
padding: 0.25rem 0.75rem; /* Padding PEQUENO */
font-size: 0.875rem; /* Fonte pequena */
}

.btn-outline-secondary-custom:hover {
color: var(--text-light);
background-color: var(--secondary-bg-dark);
border-color: var(--secondary-bg-dark);
}

.btn-primary-custom {
background-color: var(--purple-accent);
border-color: var(--purple-accent);
color: var(--text-light);
font-weight: 600;
padding: 0.5rem 1.25rem; /* Padding MAIOR */
}
/* --- Fim da Correção 2 --- */

.btn-primary-custom:hover {
background-color: var(--purple-accent-hover);
border-color: var(--purple-accent-hover);
}

.hero-section {
text-align: center;
padding: 10rem 0 6rem 0;
}

 /*
 * =========================================
 * ESTILOS DO "ANNOUNCEMENT BADGE"
 * =========================================
 */

/* O container escuro principal */
.announcement-badge {
display: inline-flex;  /* Alinha os itens internos lado a lado */
align-items: center; /* Centraliza verticalmente */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

/* Cor de fundo escura (do container) */
background-color: #1a1a1f; 

/* Borda sutil roxa escura */
border: 1px solid #6366f1; 

/* Faz o container ter a forma de pílula */
border-radius: 9999px; 

/* Pequeno espaço interno */
padding: 4px; 

/* Sombra suave */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* A pílula roxa brilhante interna */
.announcement-badge .badge-highlight {
display: inline-flex;
align-items: center;

/* Cor roxa brilhante */
background-color: #4B46E2; 
color: #ffffff;

/* Forma de pílula interna */
border-radius: 9999px; 

padding: 6px 14px;
font-weight: 500;
font-size: 0.9rem; /* 14px */
}

/* O emoji/ícone */
.announcement-badge .emoji {
display: inline-block;
margin-right: 6px;
/* (Substitua 📣 por um <img> se quiser o ícone dourado) */
}

/* O texto "Introducing SaaS Pilot" */
.announcement-badge .badge-text {
color: #d4d4d4; /* Cor de texto cinza claro */
font-weight: 500;
font-size: 0.9rem; /* 14px */

/* Espaçamento para o texto */
margin-left: 12px;
margin-right: 16px; 
}
.hero-title {
font-size: 4rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 1rem;
margin-top: 1rem;
}

  .hero-title .highlight {
/* O gradiente da imagem (laranja -> roxo -> azul) */
background-image: linear-gradient(to right, #ea580c, #c026d3, #4f46e5);

/* Aplica o gradiente apenas ao texto */
-webkit-background-clip: text;
background-clip: text;

/* Torna o texto transparente para que o fundo apareça */
-webkit-text-fill-color: transparent;

/* Fallback para navegadores que não suportam */
color: #ea580c; 
}

.hero-subtitle {
font-size: 1.25rem;
color: #FFF;
max-width: 700px;
margin: 0 auto 1.5rem auto;
line-height: 1.6;
}

.btn-hero-documentation {
background-color: var(--secondary-bg-dark);
color: var(--text-light);
border: 1px solid #3c3c43;
padding: 0.8rem 2rem;
font-size: 1.1rem;
margin-right: 1rem;
font-weight: 500;
}

.btn-hero-documentation:hover {
background-color: #3c3c43;
color: var(--text-light);
}

.btn-hero-get-saaspilot {
background-color: var(--purple-accent);
border-color: var(--purple-accent);
color: var(--text-light);
padding: 0.8rem 2rem;
font-size: 1.1rem;
font-weight: 600;
}

.btn-hero-get-saaspilot:hover {
background-color: var(--purple-accent-hover);
border-color: var(--purple-accent-hover);
}

.btn-icon {
margin-right: 8px;
}

/* Ícone do sol/lua */
.theme-toggle-icon {
width: 20px;
height: 20px;
vertical-align: middle;
}

/* Ajustes responsivos */
@media (max-width: 991.98px) {
.navbar-collapse {
background-color: var(--primary-bg-dark);
padding: 1rem;
margin-top: 1rem;
border-radius: 8px;
}
.navbar-nav .nav-link {
margin-right: 0;
margin-bottom: 0.5rem;
}
.navbar-nav {
align-items: flex-start;
}
.hero-title {
font-size: 3rem;
}
.hero-subtitle {
font-size: 1.1rem;
}
.btn-hero-documentation, .btn-hero-get-saaspilot {
width: 100%;
margin-right: 0;
margin-bottom: 1rem;
}
}

@media (max-width: 767.98px) {
.hero-title {
font-size: 2.5rem;
}
}


/* --- ESTILOS CORRIGIDOS: Seção Challenges --- */

/* (Adicione estas 3 variáveis ao seu :root se ainda não o fez) */
:root {
/* ... (cores existentes) ... */
--purple-icon-bg: #2a223f;
--purple-icon-border: #4a3b6a;
--purple-icon-color: #b392ff;
}

.challenges-section {
padding-top: 0rem;
padding-bottom: 6rem;
/* Removi a borda inferior da seção inteira, pois não está na imagem */
}

.challenges-title {
font-size: 2.2rem; /* 40px */
font-weight: 400;
color: #FFF;
margin-bottom: 0.3rem;
}

.challenges-subtitle {
font-size: 1.125rem; /* 18px */
color: var(--text-muted);
line-height: 1.6;
}

/* * CORREÇÃO PRINCIPAL:
 * 1. Removemos o gutter (espaçamento) horizontal padrão do Bootstrap.
 * 2. Adicionamos a borda e o padding manualmente em cada coluna.
*/
.challenges-grid {
--bs-gutter-x: 0; /* Remove o espaçamento horizontal entre as colunas */
}

.challenge-column {
/* Adiciona a borda vertical à direita de cada coluna */
border-right: 1px solid var(--secondary-bg-dark);
}

/* * Movemos o conteúdo para dentro com padding.
 * O padding agora vai no .challenge-card em vez da coluna
 * para que a borda fique na borda real da coluna.
*/
.challenge-card {
padding: 0 2.5rem; /* Adiciona 40px de padding interno (esquerdo/direito) */
}


/* --- Regras Responsivas para as Bordas --- */

/* Em telas grandes (lg), remove a borda da ÚLTIMA coluna (a 4ª) */
@media (min-width: 992px) {
.challenge-column:last-child {
border-right: none;
}
}

/* * Em telas médias (md), temos 2 colunas por linha.
 * Remove a borda da 2ª e 4ª coluna (as do final da linha).
 * Adiciona uma borda inferior na primeira linha (colunas 1 e 2).
*/
@media (min-width: 768px) and (max-width: 991.98px) {
.challenge-column:nth-child(2n) { /* A cada 2 colunas */
border-right: none;
}

.challenge-column:nth-child(1),
.challenge-column:nth-child(2) {
border-bottom: 1px solid var(--secondary-bg-dark);
padding-bottom: 2.5rem; /* Espaçamento para a borda */
margin-bottom: 2.5rem; /* Espaçamento para a próxima linha */
}

/* O padding precisa ser ajustado no card também */
.challenge-column:nth-child(1) .challenge-card,
.challenge-column:nth-child(2) .challenge-card {
padding-bottom: 2.5rem;
}
}

/* * Em telas pequenas (sm), temos 1 coluna por linha.
 * Remove TODAS as bordas laterais.
 * Adiciona uma borda inferior em cada item, exceto no último.
*/
@media (max-width: 767.98px) {
.challenge-column {
border-right: none;
border-bottom: 1px solid var(--secondary-bg-dark);
}
.challenge-column:last-child {
border-bottom: none;
}

/* Ajusta o padding para telas pequenas */
.challenge-card {
padding: 2rem 1rem; /* Menos padding horizontal, mais vertical */
}
.challenge-column:last-child .challenge-card {
padding-bottom: 0;
}
}


/* --- Estilos do Conteúdo do Card (sem alteração) --- */

.challenge-card .icon-wrapper {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
    background-color: #18181f;
    border: 1px solid #2b2b52;
margin-bottom: 1rem;
}

.challenge-card .icon-wrapper svg {
width: 24px;
height: 24px;
color: var(--purple-icon-color);
}

.challenge-card .card-title {
font-size: 1.35rem;
font-weight: 600;
color: var(--text-light);
margin-bottom: 0.35rem;
}

.challenge-card .card-text {
font-size: 0.95rem;
color: var(--text-muted);
line-height: 1.6;
}







/* --- NOVOS ESTILOS: Seção Pricing --- */

/* Adicione estas novas cores ao seu seletor :root */
:root {
/* ... (cores existentes) ... */
--green-accent: #10b981; /* Verde para features positivas */
--red-accent: #ef4444;   /* Vermelho para features negativas */
}

.pricing-section {
padding-top: 0rem;
padding-bottom: 6rem;
}

.pricing-title {
font-size: 2.2rem; /* 40px */
font-weight: 400;
color: #FFF;
margin-bottom: 0.3rem;
}

.pricing-subtitle {
font-size: 1.125rem; /* 18px */
color: var(--text-muted);
line-height: 1.6;
}

/* Card de Preço */
.pricing-card {
background-color: #0d0d13;
border-radius: 16px; /* Borda bem arredondada */
border: 1px solid #151526;
padding: 2.5rem; /* Padding interno de 40px */
height: 100%; /* Faz todos os cards terem a mesma altura */
display: flex;
flex-direction: column;
position: relative;
transition: all 0.3s ease;
}

/* Card Recomendado */
.pricing-card.recommended {
border-color: var(--purple-accent); /* Borda roxa */
margin-top: 1.5rem; /* Espaço para o badge */
}

/* Badge "Recommended" */
.recommended-badge {
position: absolute;
top: -19px; /* Puxa o badge para cima */
left: 50%;
transform: translateX(-50%);
background-color: var(--purple-accent);
color: var(--text-light);
font-size: 0.875rem;
font-weight: 600;
padding: 0.5rem 1rem;
border-radius: 50px;
display: flex;
align-items: center;
white-space: nowrap;
}

.recommended-badge .star-icon {
width: 16px;
height: 16px;
margin-right: 0.5rem;
}

/* Conteúdo do Card */
.pricing-card .plan-name {
font-size: 1.5rem; /* 24px */
font-weight: 600;
color: #0d6efd!important;
}

.pricing-card .plan-description {
color: var(--text-muted);
font-size: 0.95rem;
margin-bottom: 1rem;
min-height: 0px; /* Garante alinhamento mesmo se um tiver 2 linhas */
}

.pricing-card .price {
margin-bottom: 1rem;
}

.pricing-card .price-amount {

font-weight: 700;
color: var(--text-light);
}

.pricing-card .price-term {
color: var(--text-muted);
font-size: 1rem;
}

/* Lista de Features */
.feature-list {
list-style: none;
padding-left: 0;
margin-bottom: 2.5rem; /* Mais espaço antes do botão */
flex-grow: 1; /* Empurra o botão para o final do card */
}

.feature-list li {
display: flex;
align-items: center;
margin-bottom: 1rem;
color: var(--text-muted); /* Cor padrão do texto */
font-size: 0.95rem;
}

.feature-list .icon {
width: 20px;
height: 20px;
margin-right: 0.75rem;
flex-shrink: 0; /* Impede o ícone de encolher */
}

/* Ícone de Check Roxo (padrão) */
.feature-list .icon-check {
color: #4B46E2;
}

/* Ícone de Check Verde (positivo) */
.feature-list li.positive {
color: var(--green-accent); /* Texto verde */
}
.feature-list .icon-check-alt {
color: var(--green-accent); /* Ícone verde */
}

/* Ícone de X Vermelho (negativo) */
.feature-list .icon-cross {
color: #343434;
}

/* Texto Vermelho (apenas para o plano Starter) */
.feature-list li.negative-item {
color: #343434;
}

/* Botão de Preço (Full-width) */
.btn-pricing {
background-color: #4B46E2;
border-color: #4B46E2;
color: var(--text-light);
font-weight: 600;
padding: 0.75rem 1.5rem;
width: 100%;
text-decoration: none;
display: block;
text-align: center;
border-radius: 8px;
transition: all 0.3s ease;
}

.btn-pricing:hover {
background-color: #4B46E2;
border-color: #4B46E2;
color: var(--text-light);
}

/* Ajustes Responsivos */
@media (max-width: 991.98px) {
.pricing-card.recommended {
margin-top: 3.5rem; /* Mais espaço para o badge em telas menores */
}
.pricing-card {
margin-bottom: 2rem;
}
}
@media (max-width: 767.98px) {
.pricing-card.recommended {
margin-top: 3.5rem; /* Mantém o espaço */
}
/* Empilha todos os cards */
.col-md-6 {
width: 100%;
}
}








/* --- NOVOS ESTILOS: Seção Stats --- */

.stats-section {
padding-top: 5rem;
padding-bottom: 6rem;
border-top: 1px solid var(--secondary-bg-dark); /* Adiciona um separador da seção de preços */
}

.stats-title {
font-size: 2.5rem; /* 40px */
font-weight: 700;
color: var(--text-light);
margin-bottom: 1rem;
}

.stats-subtitle {
font-size: 1.125rem; /* 18px */
color: var(--text-muted);
line-height: 1.6;
}

/* Card de Estatística */
.stats-card {
background-color: #0d0d13;
border-radius: 12px;
padding: 2rem;
position: relative;
overflow: hidden; /* Necessário para o pseudo-elemento não vazar */
height: 100%; /* Garante altura igual */
}

/* O brilho roxo no topo */
.stats-card::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 40%; /* Largura do brilho */
height: 3px;
background-color: 0d0d13;
border-radius: 0 0 10px 10px;
}

.stats-card .main-stat {
font-size: 3rem; /* 48px */
font-weight: 700;
color: var(--text-light);
margin-bottom: 0.5rem;
}

.stats-card .stat-description {
color: var(--text-muted);
font-size: 1rem;
margin-bottom: 1.5rem; /* Espaço antes do rodapé */
}

.stats-card .stat-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 0rem; /* Espaço acima do rodapé */
/* A linha divisória na imagem é muito sutil, 
   então vamos usar uma borda superior leve */
border-top: 1px solid #3c3c43; /* Cor de borda um pouco mais clara */
}

.stat-label,
.stat-trend {
display: flex;
align-items: center;
font-size: 0.9rem;
}

.stat-label {
color: var(--text-muted);
}

.stat-trend {
color: var(--green-accent); /* Cor verde definida na seção anterior */
font-weight: 500;
}

.stat-label .icon,
.stat-trend .icon {
width: 16px;
height: 16px;
margin-right: 0.5rem;
}

/* Em telas menores, adiciona espaço abaixo dos cards */
@media (max-width: 991.98px) {
.col-md-6 {
margin-bottom: 1.5rem; /* g-4 já faz isso, mas podemos garantir */
}
}





/* --- NOVOS ESTILOS: Seção Feature (Inspiration) --- */

.feature-section {
padding-top: 6rem;
padding-bottom: 6rem;
border-top: 1px solid var(--secondary-bg-dark); /* Separador */
}

.eyebrow-heading {
display: flex;
align-items: center;
font-size: 1rem;
font-weight: 600;
color: var(--text-light); /* Texto "Inspiration" */
margin-bottom: 1rem;
}

.eyebrow-heading .eyebrow-icon {
width: 24px;
height: 24px;
color: var(--purple-accent); /* Ícone roxo */
margin-right: 0.75rem;
}

.feature-title {
font-size: 3rem; /* ~56px */
font-weight: 700;
color: var(--text-light);
line-height: 1.2;
margin-bottom: 1.5rem;
}

.feature-description {
font-size: 1.125rem; /* 18px */
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 2.5rem;
padding-right: 40px;
}

.feature-checklist {
list-style: none;
padding-left: 0;
}

.feature-checklist li {
display: flex;
align-items: center;
font-size: 1.1rem;
font-weight: 500;
color: var(--text-light);
margin-bottom: 1.25rem;
}

.feature-checklist li .icon {
width: 24px;
height: 24px;
color: var(--purple-accent);
margin-right: 1rem;
}

/* Imagem do Dashboard */
.dashboard-image {
border-radius: 12px;
border: 1px solid #3c3c43; /* Borda sutil como na imagem */
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); /* Sombra para dar profundidade */
}

/* Ajuste responsivo: adiciona espaço entre texto e imagem quando empilhados */
@media (max-width: 991.98px) {
.feature-text-column {
margin-bottom: 3rem;
}

.feature-title {
font-size: 2.5rem; /* Reduz o título em telas menores */
}
}







/* --- NOVOS ESTILOS: Seção Testimonials --- */

.testimonial-section {
padding-top: 5rem;
padding-bottom: 6rem;
border-top: 1px solid var(--secondary-bg-dark); /* Separador */
/* Container-fluid não é usado aqui, o scroller 
   deve ficar dentro do .container-lg ou .container-xl
   para que o fade funcione corretamente nas bordas.
   Vamos garantir que o .container padrão seja largo. */
}

@media (min-width: 1200px) {
.container {
max-width: 1320px; /* Garante que o container seja largo */
}
}

.testimonial-title {
font-size: 2.5rem; /* 40px */
font-weight: 700;
color: var(--text-light);
margin-bottom: 1rem;
}

.testimonial-subtitle {
font-size: 1.125rem; /* 18px */
color: var(--text-muted);
line-height: 1.6;
}

/* O "trilho" por onde os cards correm */
.scroller-track {
overflow: hidden;
position: relative;

/* Efeito de FADE nas bordas */
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* Pausa a animação no hover */
.scroller-track:hover .scroller-inner {
animation-play-state: paused;
}

/* O container flex que segura os cards */
.scroller-inner {
display: flex;
gap: 1.5rem; /* Espaço entre os cards (24px) */
width: max-content; /* ESSENCIAL: permite o flex ultrapassar a tela */
padding-block: 1rem; /* Espaço em cima e embaixo dos cards */
}

/* Animação */
@keyframes scrollLeft {
from { transform: translateX(0); }
to   { transform: translateX(-50%); } /* Move -50% (o comprimento dos cards originais) */
}

/* Aplica a animação */
#row1 .scroller-inner {
animation: scrollLeft 40s linear infinite;
}

#row2 .scroller-inner {
animation: scrollLeft 40s linear infinite;
animation-direction: reverse; /* Faz a fileira 2 ir para a direita */
}


/* Estilo do Card de Depoimento */
.testimonial-card {
background-color: #0d0d12;
border-radius: 12px;
padding: 1.5rem; /* 24px */
width: 380px; /* Largura fixa para os cards */
flex-shrink: 0; /* ESSENCIAL: impede que os cards sejam espremidos */
border: 1px solid #151526;
}

.testimonial-card .card-header {
display: flex;
align-items: center;
margin-bottom: 1rem;
}

.testimonial-card .avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 0.75rem;
object-fit: cover;
}

.testimonial-card .avatar-initials {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--purple-accent);
color: var(--text-light);
font-weight: 600;
}

.testimonial-card .user-info {
line-height: 1.3;
}

.testimonial-card .user-name {
display: block;
font-weight: 600;
color: var(--text-light);
}

.testimonial-card .user-handle {
display: block;
color: var(--text-muted);
font-size: 0.875rem;
}

.testimonial-card .card-body {
color: var(--text-light); /* Texto do corpo mais claro que o muted */
font-size: 0.95rem;
line-height: 1.6;
}



/* --- NOVOS ESTILOS: Seção Logo Cloud --- */

.logo-section {
padding-top: 5rem;
padding-bottom: 6rem;
border-top: 1px solid var(--secondary-bg-dark); /* Separador */
}

.logo-title {
font-size: 2.5rem; /* 40px */
font-weight: 700;
color: var(--text-light);
margin-bottom: 1rem;
}

.logo-subtitle {
font-size: 1.125rem; /* 18px */
color: var(--text-muted);
line-height: 1.6;
}

/* Scroller de Logos */
.logo-scroller {
overflow: hidden;
position: relative;
/* Efeito de fade nas bordas */
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.logo-scroller:hover .logo-scroller-inner {
animation-play-state: paused;
}

.logo-scroller-inner {
display: flex;
align-items: center; /* Centraliza verticalmente os logos */
gap: 5rem; /* 80px de espaço entre os logos */
width: max-content;
/* Reutiliza a mesma animação de keyframes dos depoimentos */
animation: scrollLeft 40s linear infinite;
}

.logo-scroller-inner img {
max-height: 100px; /* Define uma altura máxima, mas permite larguras variadas */
width: auto;
filter: grayscale(1); /* Deixa em escala de cinza */
opacity: 0.7; /* Cor esmaecida padrão */
transition: opacity 0.3s ease;
}

.logo-scroller-inner img:hover {
opacity: 1; /* Opacidade total no hover */
}

/* * Se você não adicionou os keyframes 'scrollLeft' 
 * na seção de depoimentos, adicione-os agora:
 */
@keyframes scrollLeft {
from { transform: translateX(0); }
to   { transform: translateX(-50%); }
}






/* --- NOVOS ESTILOS: Seção FAQ --- */

.faq-section {
padding-top: 5rem;
padding-bottom: 6rem;
border-top: 1px solid var(--secondary-bg-dark); /* Separador */
}

.faq-title {
font-size: 2.2rem; /* 40px */
font-weight: 400;
color: var(--text-light);
margin-bottom: 1rem;
}

.faq-subtitle {
font-size: 1.125rem; /* 18px */
color: var(--text-muted);
line-height: 1.6;
}

/* Override do Acordeão do Bootstrap */
.accordion-item {
background-color: var(--secondary-bg-dark);
border: 1px solid var(--secondary-bg-dark); /* Borda padrão escura */
border-radius: 12px !important; /* Arredondamento */
margin-bottom: 1rem;
transition: all 0.3s ease-in-out;
}

/* O brilho roxo! 
 * Usa :has() para selecionar o .accordion-item que
 * contém um .accordion-button que NÃO está 'collapsed'.
 */
.accordion-item:has(.accordion-button:not(.collapsed)) {

}

.accordion-header {
border: none;
}

.accordion-button {
background-color: transparent !important;
color: var(--text-light) !important;
font-size: 1.1rem;
font-weight: 600;
padding: 1.5rem;
border-radius: 12px !important;
box-shadow: none !important; /* Remove o box-shadow padrão do Bootstrap */
}

/* Estilo do ícone de Seta (Chevron) */
.accordion-button::after {
/* Substitui o ícone padrão do Bootstrap */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%234B46E2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' /%3e%3c/svg%3e");
background-size: 1.25rem;
height: 1.25rem;
width: 1.25rem;
transition: transform 0.3s ease;
}

/* Gira o ícone quando o botão NÃO está 'collapsed' (aberto) */
.accordion-button:not(.collapsed)::after {
transform: rotate(-180deg);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%234B46E2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' /%3e%3c/svg%3e");
}

.accordion-body {
padding: 0 1.5rem 1.5rem 1.5rem; /* Remove padding-top */
color: var(--text-muted);
font-size: 1rem;
line-height: 1.6;
}

.accordion-body ul {
list-style: disc;
padding-left: 1.5rem; /* Indentação da lista */
margin-top: 1rem;
margin-bottom: 0;
}

.accordion-body ul li {
margin-bottom: 0.5rem;
}






/* --- NOVOS ESTILOS: Seção CTA & Rodapé --- */

/* Adicione esta nova cor ao seu seletor :root */
:root {
/* ... (cores existentes) ... */
--blue-accent: #3b82f6; /* Azul do botão CTA */
--blue-accent-hover: #2563eb;
}

/* --- Seção CTA --- */
.cta-section {
padding-top: 6rem;
padding-bottom: 6rem;
border-top: 1px solid var(--secondary-bg-dark); /* Separador */
}

.cta-icon-wrapper {
width: 64px;
height: 64px;
background-color: var(--secondary-bg-dark);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
border: 1px solid #3c3c43;
}

.cta-icon-wrapper svg {
width: 32px;
height: 32px;
color: var(--text-muted);
}

.cta-title {
font-size: 2.5rem; /* 40px */
font-weight: 700;
color: var(--text-light);
margin-bottom: 1rem;
}

.cta-subtitle {
font-size: 1.125rem; /* 18px */
color: var(--text-muted);
line-height: 1.6;
max-width: 600px;
margin: 0 auto 2.5rem auto;
}

.btn-cta {
background-color: var(--blue-accent);
border-color: var(--blue-accent);
color: var(--text-light);
font-weight: 600;
padding: 0.75rem 1.5rem;
border-radius: 8px;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem; /* Espaço entre texto e seta */
text-decoration: none;
}

.btn-cta:hover {
background-color: var(--blue-accent-hover);
border-color: var(--blue-accent-hover);
color: var(--text-light);
}

/* --- Rodapé Principal --- */
.main-footer {
padding-top: 6rem;
padding-bottom: 6rem;
background-color: #000; /* Fundo um pouco diferente? Não, parece o mesmo */
border-top: 1px solid var(--secondary-bg-dark); /* Separador */
}

.footer-logo {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.5rem;
font-weight: 700;
color: var(--text-light);
text-decoration: none;
margin-bottom: 0.5rem;
}

.footer-logo .logo-icon {
width: 32px;
height: 32px;
color: var(--purple-accent);
}

.footer-description {
color: var(--text-muted);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 2rem;
}

.footer-social .social-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-light);
margin-bottom: 1rem;
}

.social-links {
display: flex;
gap: 1.25rem;
}

.social-links a {
color: var(--text-muted);
transition: color 0.3s ease;
}

.social-links a:hover {
color: var(--purple-accent);
}

.footer-links h5 {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-light);
margin-bottom: 1.25rem;
}
.footer-links ul li a:hover
.footer-links ul {
list-style: none;
padding-left: 0;
}

.footer-links ul li {
margin-bottom: 0.75rem;
}

.footer-links ul li a {
color: var(--text-muted);
text-decoration: none;
font-size: 0.95rem;
transition: color 0.3s ease;
}

.footer-links ul li a:hover {
color: #4B46E2;
}



/* --- ESTILOS CORRIGIDOS: Seção Hosting Features --- */

/* Adicione estas novas cores ao seu seletor :root */
:root {
/* ... (cores existentes) ... */

/* Gradientes para o FUNDO do card (sutil) */
--gradient-blue-start: #3b82f620;
--gradient-blue-end: #3b82f600;
--gradient-purple-start: #9d50ff20;
--gradient-purple-end: #9d50ff00;
--gradient-green-start: #10b98120;
--gradient-green-end: #10b98100;
--gradient-yellow-start: #facc1520;
--gradient-yellow-end: #facc1500;

/* Gradientes para o CÍRCULO do Ícone (mais forte) */
--icon-bg-gray-start: #4b4b52;
--icon-bg-gray-end: #3c3c43;
--icon-bg-purple-start: #583c8f;
--icon-bg-purple-end: #3c2f5a;
--icon-bg-blue-start: #3559a1;
--icon-bg-blue-end: #294270;
--icon-bg-green-start: #2a7a5e;
--icon-bg-green-end: #225a45;
--icon-bg-yellow-start: #a37c1b;
--icon-bg-yellow-end: #705615;
}

.hosting-features-section {
padding-top: 6rem;
padding-bottom: 6rem;
background-color: var(--primary-bg-dark);
}

.section-tag {
display: inline-block;
background-color: var(--secondary-bg-dark);
color: var(--text-muted);
font-size: 0.875rem;
padding: 0.5rem 1rem;
border-radius: 50px;
margin-bottom: 1.5rem;
border: 1px solid #3c3c43;
}

.section-title {
font-size: 3.5rem; /* 56px */
font-weight: 700;
color: var(--text-light);
line-height: 1.2;
margin-bottom: 1.5rem;
}

.section-description {
font-size: 1.125rem; /* 18px */
color: var(--text-muted);
line-height: 1.6;
}

/* Estilo do Card Individual */
.feature-card {
background-color: var(--secondary-bg-dark);
border-radius: 16px;
padding: 2.5rem; /* 40px */
height: 100%;
display: flex;
flex-direction: column;
position: relative; /* ESSENCIAL para o emblema */
overflow: visible; /* PERMITE que o emblema saia para fora */
border: 1px solid #3c3c43;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* --- CORREÇÃO: Posição dos Emblemas --- */
.card-badge {
position: absolute;
font-size: 0.8rem;
font-weight: 600;
padding: 0.3rem 0.8rem;
border-radius: 50px;
top: -14px; /* Puxa para cima, para fora do card */
}

.recommended-badge {
background-color: var(--green-accent);
color: #fff;
right: 20px; /* Alinha à direita */
}

.popular-badge {
background-color: #facc15; /* Amarelo sólido, como na imagem */
color: var(--primary-bg-dark); /* Texto escuro para contraste */
left: 50%;
transform: translateX(-50%); /* Centraliza */
}
/* --- Fim da Correção --- */


/* --- CORREÇÃO: Fundo dos Ícones com Gradiente --- */
.card-icon-wrapper {
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
border: 1px solid #4a4a4a;
flex-shrink: 0; /* Impede que o ícone encolha */
}

/* Aplica os gradientes escuros */
.card-icon-wrapper.icon-gray {
background: linear-gradient(145deg, var(--icon-bg-gray-start) 0%, var(--icon-bg-gray-end) 100%);
}
.card-icon-wrapper.icon-purple,
.card-icon-wrapper.icon-purple-alt { /* Usando duas classes para os dois roxos */
background: linear-gradient(145deg, var(--icon-bg-purple-start) 0%, var(--icon-bg-purple-end) 100%);
}
.card-icon-wrapper.icon-blue {
background: linear-gradient(145deg, var(--icon-bg-blue-start) 0%, var(--icon-bg-blue-end) 100%);
}
.card-icon-wrapper.icon-green {
background: linear-gradient(145deg, var(--icon-bg-green-start) 0%, var(--icon-bg-green-end) 100%);
}
.card-icon-wrapper.icon-yellow {
background: linear-gradient(145deg, var(--icon-bg-yellow-start) 0%, var(--icon-bg-yellow-end) 100%);
}
/* --- Fim da Correção --- */

.card-icon {
width: 32px;
height: 32px;
color: var(--text-light); /* Ícones brancos/claros */
}

.card-title {
font-size: 1.5rem; /* 24px */
font-weight: 600;
color: var(--text-light);
margin-bottom: 0.5rem;
}

.card-tag {
display: inline-block;
font-size: 0.875rem; /* 14px */
color: var(--text-muted);
margin-bottom: 1rem;
min-height: 20px;
}

.card-description {
color: var(--text-muted);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 1.5rem;
flex-grow: 1; /* Empurra o link "See Pricing" para baixo */
}

/* Link "See Pricing" (Mantido roxo para consistência com o tema) */
.see-pricing-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--purple-accent);
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}

.see-pricing-link:hover {
color: var(--purple-accent-hover);
}

.see-pricing-link .eye-icon {
width: 20px;
height: 20px;
color: var(--purple-icon-color);
}


/* Gradientes de FUNDO dos Cards (sutis) */
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.3;
z-index: 0;
pointer-events: none;
border-radius: 16px;
}

.feature-card.gradient-blue::before {
background: radial-gradient(circle at top left, var(--gradient-blue-start) 0%, var(--gradient-blue-end) 50%);
}
.feature-card.gradient-purple::before {
background: radial-gradient(circle at top left, var(--gradient-purple-start) 0%, var(--gradient-purple-end) 50%);
}
.feature-card.gradient-green::before {
background: radial-gradient(circle at top left, var(--gradient-green-start) 0%, var(--gradient-green-end) 50%);
}
.feature-card.gradient-yellow::before {
background: radial-gradient(circle at top left, var(--gradient-yellow-start) 0%, var(--gradient-yellow-end) 50%);
}

/* Garante que o conteúdo fique sobre o gradiente ::before */
.feature-card > * {
position: relative;
z-index: 1;
}

/* Ajustes responsivos */
@media (max-width: 991.98px) {
.section-title {
font-size: 2.5rem; /* Título menor */
}
.col-lg-5 {
margin-bottom: 3rem; /* Espaço entre o texto e a grade em telas menores */
}
}



/* --- NOVOS ESTILOS: Seção IT Solutions (About) --- */

/* Adicione estas novas cores ao seu seletor :root */
:root {
/* ... (cores existentes) ... */
--blue-accent-bg: #3b82f61a; /* Azul com ~10% de opacidade */
--purple-accent-bg: #9d50ff1a; /* Roxo com ~10% de opacidade */
--yellow-accent-bg: #facc151a; /* Amarelo com ~10% de opacidade */
}

.about-it-section {
padding-top: 6rem;
padding-bottom: 6rem;
border-top: 1px solid var(--secondary-bg-dark); /* Separador */
}

/* Coluna da Imagem */
.it-image-wrapper {
position: relative;
/* Adiciona um efeito sutil na imagem de placeholder */
}
.it-main-image {
filter: grayscale(1);
opacity: 0.8;
border-radius: 20px;
}

/* Coluna de Texto */
.it-section-tag {
display: inline-block;
background-color: var(--blue-accent);
color: var(--text-light);
padding: 0.4rem 1rem;
border-radius: 50px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 1.5rem;
}

.it-section-title {
font-size: 2.8rem; /* 44px */
font-weight: 700;
color: var(--text-light);
line-height: 1.3;
margin-bottom: 1.5rem;
}

.it-section-description {
font-size: 1.1rem;
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 2.5rem;
}

/* Features (Ambition/Purpose) */
.it-feature-icon {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-right: 1rem;
}

.it-feature-icon.icon-blue {
background-color: var(--blue-accent-bg);
color: var(--blue-accent);
}

.it-feature-icon svg {
width: 24px;
height: 24px;
}

.it-feature-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-light);
margin-bottom: 0.25rem;
}

.it-feature-text {
font-size: 0.9rem;
color: var(--text-muted);
line-height: 1.5;
}

/* Checklist Badges */
.it-checklist {
display: flex;
flex-wrap: wrap; /* Permite quebrar a linha em telas pequenas */
gap: 1rem;
}

.it-check-badge {
padding: 0.5rem 1rem;
border-radius: 50px;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 500;
font-size: 0.9rem;
}

.it-check-badge svg {
width: 20px;
height: 20px;
}

.it-check-badge.check-yellow {
background-color: var(--yellow-accent-bg);
color: #facc15; /* Amarelo sólido para o texto/ícone */
}

.it-check-badge.check-purple {
background-color: var(--purple-accent-bg);
color: var(--purple-accent); /* Roxo sólido para o texto/ícone */
}

/* Client Reviews */
.it-avatar-stack {
display: flex;
padding-left: 10px; /* Espaço para o primeiro avatar não ser cortado */
}

.it-avatar-stack img {
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid var(--primary-bg-dark); /* Borda da cor do fundo para o efeito de sobreposição */
margin-left: -15px; /* Sobreposição */
}

.it-review-text {
display: flex;
flex-direction: column;
margin-left: 1rem;
line-height: 1.3;
}

.it-review-text strong {
font-size: 1.1rem;
color: var(--text-light);
}

.it-review-text span {
font-size: 0.9rem;
color: var(--text-muted);
}



/*
 * Estilos para a Barra de Navegação Inferior Mobile
 */

/* Garante que o conteúdo da página não seja coberto pela barra inferior */
body {
padding-bottom: 70px; /* Altura aproximada da barra inferior */
}

@media (min-width: 992px) { /* lg breakpoint */
/* Remove o padding no desktop */
body {
padding-bottom: 0; 
}
}

/*
 * =========================================
 * ESTILOS DA NAVBAR DESKTOP (DARK MODE)
 * =========================================
 */
.navbar.fixed-top {
/* Cor de fundo escura da sua imagem */
background-color: #0d0d13; 
padding: 0.5rem 0;
}

/* Ícone do Logo (Triângulo Roxo) */
.logo-icon {
display: inline-block;
width: 0;
height: 0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 15px solid #7A42A8; /* Cor roxa do botão Register */
margin-right: 8px;
vertical-align: -2px; /* Ajuste fino de alinhamento */
}

/* Marca "SaaS Pilot" */
.navbar-brand {
color: #ffffff;
font-weight: bold;
}

/* Links da Navbar (Pricing, Features, etc.) */
.navbar-nav .nav-link {
color: #f0f0f0;
font-weight: 500;
margin: 0 0.5rem;
font-size: 1.3rem;
}

.navbar-nav .nav-link:hover {
color: #ffffff;
}

/* Ícone do Sol (Theme Toggle) */
.theme-toggle-icon {
width: 24px;
height: 24px;
color: #f0f0f0;
}

/* Botão "Log In" (Customizado) */
.btn-outline-secondary-custom {
color: #f0f0f0;
border: 1px solid #555555;
padding: 0.5rem 1.25rem;
border-radius: 8px;
font-weight: 500;
}

.btn-outline-secondary-custom:hover {
background-color: #333;
color: #ffffff;
}

/* Botão "Register" (Customizado) */
.btn-primary-custom {
background-color: #7A42A8; /* Roxo da imagem */
color: #ffffff;
border: none;
padding: 0.5rem 1.25rem;
border-radius: 8px;
font-weight: 500;
}

.btn-primary-custom:hover {
background-color: #8b53bf; /* Um roxo um pouco mais claro no hover */
}


/*
 * =========================================
 * ESTILOS DA NAVBAR MOBILE (BARRA INFERIOR)
 * =========================================
 */

/* Garante que o conteúdo da página não seja coberto pela barra inferior */
@media (max-width: 991.98px) { /* < 'lg' */
body {
padding-bottom: 70px; /* Altura da barra inferior */
}
}

/* Estilo da barra inferior */
.navbar.fixed-bottom {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
/* Espaço de segurança para iPhones com barra de gestos */
padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
}

/* Estilo de cada link da barra */
.nav-link-mobile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: none;
color: #6c757d; /* Cinza Padrão */
font-size: 0.75rem;
font-weight: 500;
line-height: 1.2;
width: 20%;
}

/* Estilo do ícone */
.nav-link-mobile i {
font-size: 1.4rem;
margin-bottom: 4px;
}

/* Cor do link ativo */
.nav-link-mobile:hover,
.nav-link-mobile.active {
color: #7A42A8; /* Cor primária roxa */
}




/*
 * =========================================
 * ESTILOS DO FOOTER (DARK MODE)
 * =========================================
 */
.main-footer {
/* Cor de fundo escura */
background-color: #000; 
/* Cor do texto principal */
color: #cccccc; 
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
padding: 60px 0 40px 0;
border-top: 1px solid #333; /* Linha de separação */
}

/* Logo na Coluna 1 */
.footer-logo {
display: inline-flex;
align-items: center;
text-decoration: none;
color: #ffffff; /* Branco brilhante para a marca */
font-size: 1.6rem;
font-weight: 600;
margin-bottom: 5px;
}

.footer-logo .logo-icon {
width: 28px;
height: 28px;
margin-right: 10px;
/* Cor roxa (você pode alterar para a cor da sua marca) */
color: #7A42A8; 
}

/* Descrição na Coluna 1 */
.footer-description {
font-size: 0.95rem;
line-height: 1.6;
color: #a0a0a0; /* Cinza mais claro para descrição */
margin-bottom: 30px;
}

/* Título "Get Connected" */
.social-title {
color: #ffffff;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 15px;
}

/* Links de Ícones Sociais */
.social-links a {
display: inline-block;
color: #a0a0a0; /* Cor padrão dos ícones */
margin-right: 18px;
transition: all 0.3s ease;
}

.social-links a:hover {
color: #ffffff; /* Cor ao passar o mouse */
transform: scale(1.1);
}

.social-links svg {
width: 24px;
height: 24px;
}

/*
 * =========================================
 * ESTILOS DO FOOTER (DARK MODE)
 * =========================================
 */
.main-footer {
background-color: #000; 
color: #cccccc; 
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
padding: 60px 0 40px 0;
border-top: 1px solid #333;
}

/* Coluna 1: Logo */
.footer-logo {
display: inline-flex;
align-items: center;
text-decoration: none;
color: #ffffff; 
font-size: 1.6rem;
font-weight: 600;
margin-bottom: 5px;
}

.footer-logo .logo-icon {
width: 28px;
height: 28px;
margin-right: 10px;
color: #7A42A8; 
}

/* Coluna 1: Descrição */
.footer-description {
font-size: 0.95rem;
line-height: 1.6;
color: #a0a0a0; 
margin-bottom: 30px;
}

/* Coluna 1: Título Social */
.social-title {
color: #ffffff;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 15px;
}

/* Coluna 1: Ícones Sociais */
.social-links a {
display: inline-block;
color: #a0a0a0; 
margin-right: 18px;
transition: all 0.3s ease;
}

.social-links a:hover {
color: #ffffff; 
transform: scale(1.1);
}

.social-links svg {
width: 24px;
height: 24px;
}

/*
 * Estilo das Listas de Links (Colunas 2, 3, 4)
 */
.footer-links h5 {
color: #ffffff;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 20px;
}

.footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}

.footer-links li {
margin-bottom: 12px;
}

.footer-links a {
color: #a0a0a0; 
text-decoration: none;
transition: all 0.2s ease-in-out;
display: flex; /* Alinha o ícone e o texto */
align-items: center;
}

.footer-links a:hover {
color: #ffffff; 
padding-left: 5px; /* Efeito de hover */
}

/* ★★★ NOVO CSS PARA OS ÍCONES DA LISTA ★★★ */
.footer-links i {
font-size: 0.9em;
margin-right: 10px;
width: 20px; /* Garante alinhamento */
color: #4B46E2; /* Cor roxa para combinar com o logo */
}

.footer-links a:hover i {
color: #ffffff; /* O ícone também fica branco no hover */
}




/*
 * =========================================
 * ESTILOS DA IMAGEM DO DASHBOARD
 * =========================================
 */
.dashboard-mockup {
margin-top: 00px; /* Espaço entre os botões e a imagem */
margin-bottom: 0px; /* Espaço abaixo da imagem, se houver mais conteúdo */
text-align: center; /* Centraliza a imagem */
}

.dashboard-mockup img {
max-width: 90%; /* Ajusta a largura máxima da imagem para ser responsiva */
height: auto; /* Mantém a proporção da imagem */
border-radius: 10px; /* Arredonda as bordas da imagem */
}

/* Você pode precisar ajustar a variável dark-bg se o fundo da imagem for ligeiramente diferente */
body {
background-color: #000; /* Fundo mais escuro */
}






/* 1. Estilo do seu botão "Register" (roxo) */
.btn-primary-custom {
background-color: #6366F1; /* Roxo */
color: #ffffff;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s ease;
}

.btn-primary-custom:hover {
background-color: #4f46e5;
}

/*
 * =========================================
 * 2. Estilização do Modal "Idêntico"
 * =========================================
 */
.modal-custom {
border-radius: 16px; /* Bordas arredondadas pedidas */
border: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.modal-custom .modal-header {
border-bottom: none; /* Remove a linha do header */
padding: 2rem 2rem 1rem;
}

.modal-custom .modal-title {
font-size: 1.75rem; /* 28px */
font-weight: bold;
color: #222; /* Cor do título */
}

.modal-custom .modal-body {
padding: 0rem 2rem 0rem;
}

.modal-custom .form-label {
font-weight: 500;
color: #555;
margin-bottom: 0.25rem;
font-size: 1rem;
}

.modal-custom .form-control {
font-size: 1rem;
padding: 0.9rem 1rem;
border-radius: 8px;
background-color: #fff; /* Fundo do input */
border: 1px solid #ced4da; /* Borda do input */
}

.modal-custom .form-control:focus {
border-color: #888;
box-shadow: 0 0 0 1px #888;
}

.modal-custom .form-control::placeholder {
color: #adb5bd;
}

.modal-custom .form-text {
font-size: 0.85rem;
color: #6c757d;
margin-top: 5px;
}

.modal-custom .modal-footer {
border-top: none; /* Remove a linha do footer */
padding: 0 2rem 2rem;
}

/* Botão "Continuar" (estilo da imagem) */
.modal-custom .btn-continuar {
background-color: #323482; /* Cinza claro (como na imagem) */
color: #FFF; /* Texto cinza escuro */
font-weight: 500;
padding: 0.9rem;
border-radius: 8px;
font-size: 1rem;
border: none;
transition: background-color 0.3s ease;
}

/* Opcional: estado hover/ativo */
.modal-custom .btn-continuar:hover {
background-color: #b0b0b0;
}


.btn-whatsapp {
  /* Ativa o modo Flexbox. Usamos 'inline-flex' para
     que o botão não ocupe a largura toda da linha. */
  display: inline-flex;
  
  /* Esta é a chave: alinha verticalmente 
     todos os itens (SVG e texto) ao centro. */
  align-items: center;
  
  /* (Opcional) Centraliza horizontalmente. 
     Pode remover se o seu 'btn' já fizer isso. */
  justify-content: center;
  
  /* Cria um espaçamento de 8px entre o ícone e o texto. */
  gap: 8px; /* ou 0.5rem */
}f

/* Estilo opcional para o SVG. 
  '1.2em' faz o ícone ser 20% maior que o tamanho da fonte (font-size) do botão. 
  Você pode ajustar '1.2em' para '1em' (mesmo tamanho) ou '1.3em' (maior)
  conforme seu gosto.
*/
.btn-whatsapp svg {
  width: 1.2em;
  height: 1.2em;
}


.btn-icon-left {
  /* 1. Ativa o Flexbox. Usamos 'inline-flex' para
       o botão não ocupar 100% da largura.
  */
  display: inline-flex;
  
  /* 2. Esta é a chave: Alinha o ícone e o texto
       verticalmente ao centro.
  */
  align-items: center; 
  
  /* 3. (Opcional) Garante que o conteúdo fique
       centralizado se o botão tiver um 'width' fixo.
  */
  justify-content: center;
  
  /* 4. Define um espaçamento padrão entre
       o ícone e o texto.
  */
  gap: 8px; /* ou 0.5rem */
}

/* Estilo opcional para os SVGs dentro do botão.
  '1.1em' = 10% maior que o texto. 
  '1em' = exatamente do mesmo tamanho do texto.
  Ajuste como preferir.
*/
.btn-icon-left svg {
  width: 1.1em;
  height: 1.1em;
  /* Não permite que o ícone "achate" ou "encolha" */
  flex-shrink: 0; 
}




  /* Target para os links dentro da lista principal da navegação.
    Adicionamos uma transição para o efeito de hover ficar suave.
  */
  .navbar-nav .nav-link {
    transition: background-color 0.2s ease-in-out;
    border-radius: 8px; /* Pré-definir o radius ajuda na transição */
    
    /* Adiciona um pequeno espaçamento lateral para os fundos não colarem */
    margin: 0 0.25rem;
  }

  /* Este é o efeito que será aplicado no :hover 
  */
  .navbar-nav .nav-link:hover {
    /* Define a cor de fundo. Usei um cinza claro, mas você pode mudar. */
    background-color: #2c2c33; 
      border-radius: 8px; 
      padding-bottom: 11px;
  }




.text-muted {

    color:#ccc !important;
}

@media (max-width: 767px) {
  .feature-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}