/* =========================
   SUMÁRIO
   ========================= 
X0 - HEADER -> MENU + LOGO (34)
X1 - HERO (154)
X2 - JOURNEY-OVERVIEW -> SOBRE A SPAOX (304)
X3 - SERVICOS -> SERVIÇOS (O QUE PODEMOS FAZER POR VOCÊ) (414)
X4 - WHY-WE-DO -> A ESSÊNCIA DO QUE NOS IMPULSIONA (674)
X5 - TIMELINE-SECTION -> COMO FAZEMOS ACONTECER (884)
X6 - WHY-CHOOSE-US -> COMO TRANSFORMAMOS IDEIAS EM REALIDADE (1054)
X7 - PARALLAX-BANNER -> BANNER (EM CADA PÁGINA)
X8 - PORTFOLIO-OVERVIEW-SECTION -> PROJETOS QUE JÁ IDEALIZAMOS (1154)
X9 - FOOTER -> RODAPÉ (1594)
X10 - ABOUT - SOBRE A SPAOX (MAIN.CSS)
X11 - CONTACT-SECTION -> CONTATO (1754)
X12 - LEGAL -> INFORMAÇÕES INSTITUCIONAIS (1794)
X13 - TOP BAR -> BARRA DO TOPO (1824)
X14 - BREADCRUMB -> BREADCRUMB (1894)
X15 - SERVICES - SERVIÇOS (PÁGINA DE SERVIÇOS) (1964)
X16 - CARTOES - CARTÔES (PÁGINA DE SERVIÇOS E SOBRE A  SPAOX) (2104)

*/











/* =========================
   X0 - HEADER -> MENU + LOGO
   ========================= */
#header {
  background-color: #fff;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  border-bottom: 1px solid #e0e0e0;
}

#header a,
#header .sitename,
#header nav ul li a {
  color: #000;
  transition: color 0.3s ease;
}

/* Estado após sair da hero */
#header.scrolled {
  background-color: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #e0e0e0;
}

#header.scrolled a,
#header.scrolled nav ul li a {
  color: #000;
}

/* Logo e título */
#logo {
  height: 140px;
}

#header.scrolled #logo {
  display: block !important;
}

#header.scrolled #sitename {
  display: none;
}


/* Texto após scroll */
#header.scrolled a,
#header.scrolled nav ul li a {
  color: #000;
}

/* Reset básico */
#header nav ul li a {
  position: relative;
  text-decoration: none;
}

/* Traço central */
#header nav ul li a::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 70%; /* controla a altura do traço */
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 0.25s ease;
  z-index: -1;
}

/* Hover */
#header nav ul li a:hover::after {
  width: 70%; /* NÃO cobre a palavra inteira */
}

/* Ativo */
#header nav ul li a.active::after {
  width: 70%;
}

/* Dropdown base */
#header .dropdown ul {
  background-color: #ffffff;
  z-index: 9999;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  border-radius: 6px;
}

/* Links do dropdown */
#header .dropdown ul li a {
  color: #000;
  padding: 10px 20px;
  display: block;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover no dropdown */
#header .dropdown ul li a:hover {
  background-color: rgba(255,255,255,0.1);
}

/* Estado SCROLLED */
#header.scrolled .dropdown ul {
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

#header.scrolled .dropdown ul li a {
  color: #000;
}

#header.scrolled .dropdown ul li a:hover {
  background-color: rgba(0,0,0,0.05);
}









/* =========================
   X1 - HERO
   ========================= */
#hero {
  position: relative;
  overflow: hidden;
  height: 100vh;
  color: white;
  font-weight: 100;
}
.carousel-text {
    max-width: 100%; /* Limitar a largura total do conteúdo */
    flex: 1; /* Permitir que ocupe o espaço restante */
}
.carousel-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.carousel-slide.active {
  opacity: 1;
  z-index: 1;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55); /* ESCURECE A IMAGEM */
  z-index: 1;
  background-color: #000;
  font-weight: 100;
}
.carousel-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 90%;
  max-width: 800px;
}
.carousel-text h1 {
  margin-top: 100px;
    font-size: 72px;
    line-height: 1.2;
    font-weight: 100;
    width: 70%;
}
.carousel-text p {
  font-size: 2.0rem;
    margin-top: 30px;
    line-height: 1.5;
    max-width: 50%; /* Largura máxima para o parágrafo */
    margin-left: auto; /* Move o parágrafo para a direita */
    text-align: right; /* Alinha o texto à direita */
  font-weight: 100;
}
.carousel-dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 3;
}
.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  opacity: 0.5;
  cursor: pointer;
  background-color: white;
}
.dot.active {
  opacity: 1;
}

/* ===== HERO – LAPTOPS (13" / 14") ===== */
@media (max-width: 1440px){ 
  .carousel-text {
    top: 55%; /* desce levemente o conteúdo */
    transform: translate(-50%, -55%);
  }

  .carousel-text h1 {
    font-size: 58px;   /* reduz título */
    margin-top: 60px; /* menos espaço no topo */
    width: 75%;
  }

  .carousel-text p {
    font-size: 1.6rem; /* reduz parágrafo */
    margin-top: 20px;
    max-width: 45%;
  }
}

/* ===== HERO – CELULARES ===== */
@media (max-width: 768px) {
  .carousel-text {
    text-align: center;
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
  }

  .carousel-text h1 {
    width: 100%;
    font-size: 2.2rem;
    margin-top: 0;
    text-align: center;
  }

  .carousel-text p {
    max-width: 100%;
    margin: 20px auto 0;
    text-align: center;
    font-size: 1.2rem;
  }

}














/* =========================
   X2 - JOURNEY-OVERVIEW -> SOBRE A SPAOX
   ========================= */
.journey-overview-section.section {
  background-color: #F8F7F4; 
   padding: 100px 0;
}

.journey-overview-section .container {
  max-width: 1200px;
}

.journey-overview-section .row {
}

/* --- Coluna Esquerda --- */
.journey-overview-section .content-left {
    width: 50%;
}

.journey-overview-section .section-title-main {
  font-size: 3.5rem; /* Tamanho do título grande */
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 30px;
  color: #222;
}

/* --- Coluna Direita --- */
.journey-overview-section .content-right {
    padding-left: 50px; /* Espaço entre a coluna esquerda e direita */
    width: 50%;
}

.journey-overview-section .content-right p {
    font-family: var(--default-font); /* Usa sua fonte padrão */
    font-size: 1em; /* Tamanho do texto do corpo */
    line-height: 1.6; /* Espaçamento entre linhas para melhor legibilidade */
    color: #555; 
    margin-bottom: 1.5em; /* Espaçamento entre parágrafos */
}
.journey-overview-section .btn-outline {
  display: inline-block;
  margin-top: 30px;
  padding: 14px 28px;
  border: 2px solid #000;
  color: #000;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.journey-overview-section .btn-outline:hover {
  background-color: #000;
  color: #fff;
}
/* ===== JOURNEY-OVERVIEW – CELULARES ===== */
@media (max-width: 768px) {
  .journey-overview-section .content-left,
  .journey-overview-section .content-right {
    width: 100%;

    padding-left: 0;
    text-align: center;
  }

  .journey-overview-section .section-title-main {
    margin-top: -20px;
    font-size: 2.2rem;
    line-height: 1.2;
    margin-bottom: 20px;
    text-align: center;
  }

  .journey-overview-section .content-right p {
    max-width: 93%;
    margin: 0 auto;
    font-size: 1rem;
    text-align: justify;
  }

  .journey-overview-section .btn-outline {
    margin: 30px auto 0;
  }

}
















/* =========================
   X3 - SERVICOS -> SERVIÇOS (O QUE PODEMOS FAZER POR VOCÊ)
   ========================= */
.servicos.new-style {
  background-color: #000; /* Fundo preto */
  color: #fff; /* Texto branco */
  padding: 80px 0; /* Padding superior e inferior, ajuste conforme necessário */
  /* Remova ou ajuste min-height se não quiser que a seção ocupe a altura total da tela */
  /* min-height: 100vh; */
  display: flex; /* Usar flexbox para ajudar no alinhamento */
  align-items: center; /* Centraliza verticalmente o conteúdo */
  overflow: hidden; /* Garante que elementos fora do container não apareçam */
}
.servicos.new-style .container {
  max-width: 1200px; /* Largura máxima do container, ajuste se precisar */
  width: 100%;
}
.servicos .section-title-main {
  font-size: 3.5rem; /* Tamanho do título grande */
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 30px;
  color: #fff;
}
.servicos-content-new-style {
  display: flex;
  flex-direction: column; /* Itens um abaixo do outro */
  justify-content: center; /* Centraliza o conteúdo */
  flex-grow: 1; /* Permite que o container se estenda */
  position: relative; /* Para posicionamento do botão no final */
}
.service-item-large {
  position: relative; /* Crucial para o posicionamento absoluto do hover-pre-text */
  padding: 40px 0; /* Espaçamento interno de cada item */
  text-align: left; /* Alinha o texto à esquerda */
  width: 100%; /* Garante que o item ocupe toda a largura disponível */
  cursor: pointer; /* Indica que o elemento é interativo */
  overflow: hidden; /* Importante para esconder partes do texto que podem sair do limite */
}
.servicos-content-new-style a{
  color:#fff;
}
.service-item-large h2.display-1 {
  font-size: 4.5rem; /* Tamanho da fonte grande, ajuste se necessário */
  font-weight: 400; /* Peso da fonte para negrito */
  line-height: 1.2;
  margin-bottom: 0;
  color: #fff; /* Cor do texto para branco */
  /* Adiciona transição para o h2 para um possível efeito de movimento, se quiser */
  transition: transform 0.3s ease;
  /* Garante que o h2 esteja acima do hover-pre-text, se houver sobreposição */
  position: relative;
  z-index: 1;
}
/* Estilo para o texto que aparece ao passar o mouse */
.service-item-large .hover-pre-text {
  position: absolute;
  top: 50%; /* Alinhado verticalmente no centro */
  right: 0; /* Alinha o texto à direita do service-item-large */
  transform: translateY(-50%) translateX(20px); /* Começa 20px para a direita (fora da vista) */
  font-size: 1.2rem; /* Tamanho da fonte menor */
  color: rgba(255, 255, 255, 0.7); /* Cor branca mais sutil */
  font-weight: 400; /* Peso da fonte normal */
  white-space: nowrap; /* Impede que o texto quebre linha */
  opacity: 0; /* Inicialmente invisível */
  visibility: hidden; /* Inicialmente escondido */
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; /* Transição suave */
  pointer-events: none; /* Garante que o span não bloqueie eventos de mouse no h2 */
  z-index: 2; /* Garante que ele fique acima do h2 */
}
/* Efeito ao passar o mouse sobre o item grande */
.service-item-large:hover .hover-pre-text {
  opacity: 1; /* Fica visível */
  visibility: visible;
  transform: translateY(-50%) translateX(0); /* Desliza para sua posição final */
}
.service-item-large:hover .hover-pre-text .icon-circle {
  background-color: #FFFFFF; /* Fundo branco */
  border-color: #000;    /* Borda azul */
  color: #000;          /* Ícone azul */
}
.service-item-large .hover-pre-text .icon-circle {
    background-color: transparent; /* Ou a cor que você quer antes do hover */
    border-color: #CCC;
    color: #FFF; /* Cor do ícone antes do hover (se o texto do hover-pre-text for branco) */
    /* Certifique-se que o ícone tem um tamanho razoável */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
/* Linhas divisórias entre os itens */
.service-item-large:not(:last-of-type)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.3); /* Linha branca sutil */
}
/* Estilos para a área inferior (botão) */
.bottom-area {
  width: 100%;
  padding-top: 50px; /* Espaço acima do botão */
  display: flex;
  justify-content: flex-end; /* **ISSO ALINHA O BOTÃO À DIREITA** */
  /* align-items: flex-end; */ /* Removido, não é necessário e pode causar conflito */
  /* min-height: 100px; */ /* Removido, deixe o conteúdo determinar a altura */
  padding-right: 15px; /* Adicionado: Para compensar o padding padrão do container e ir para a extremidade */
}
/* Estilos para o botão padrão */
.cta-button-bottom-right .btn-secondary {
  background-color: #43597A; /* Seu azul padrão */
  border-color: #43597A; /* Cor da borda igual ao fundo */
  color: #fff; /* Cor do texto */
  padding: 12px 30px;
  border-radius: 5px; /* Ajuste o raio se necessário */
  text-decoration: none;
  font-size: 1rem;
  transition: background-color 0.3s ease, border-color 0.3s ease; /* Transição suave */
}
/* Estilos para o botão ao passar o mouse (hover) */
.cta-button-bottom-right .btn-secondary:hover {
  background-color: #8299ba; /* Vermelho padrão do Bootstrap */
  border-color: #8299ba;     /* Borda também vermelha */
  color: #fff;               /* Mantém o texto branco */
}

/* --- Tags --- */
.detail-entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* Espaço entre as tags */
  margin-top: 5px; /* Espaço acima das tags */
  margin-bottom: 10px; /* Espaço abaixo das tags */
}

.tag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px; /* Cantos arredondados */
  border: 1px solid #E0E0E0; /* Borda da tag */
  font-size: 0.8em;
  color: #555;
  background-color: #FFF;
  white-space: nowrap;
}

/* --- Informações do Autor --- */
.detail-entry-author {
  margin-top: 10px;
}
.detail-entry-author .author-name {
  display: block;
  font-size: 0.9em;
  font-weight: 600;
  color: #333;
}
.detail-entry-author .author-role {
  display: block;
  font-size: 0.8em;
  color: #777;
}


/* --- Ícone de Ação (Seta ou Olho) --- */
.detail-entry-action-icon {
  flex-shrink: 0; /* Impede que o ícone diminua */
  margin-left: auto; /* Empurra o ícone para a direita */
}

/* ===== SERVICOS – TABLETS ===== */
@media (max-width: 992px) { /* Para tablets e telas menores */
  .detail-entry-link {
    flex-direction: column; /* Colunas empilhadas */
    align-items: flex-start; /* Alinha o conteúdo à esquerda */
  }

  .detail-entry-text-content {
    width: 100%; /* Ocupa toda a largura */
    padding-right: 0; /* Remove padding */
    margin-bottom: 20px; /* Espaçamento entre o texto e o ícone em mobile */
  }

  .detail-entry-action-icon {
    width: 100%;
    text-align: right; /* Alinha o ícone à direita da linha em mobile */
    margin-left: 0;
  }
}

@media (max-width: 576px) { /* Para celulares */
  .detail-entry-title {
    font-size: 1.3em;
  }
  .detail-entry-description {
    font-size: 0.9em;
  }
  .tag {
    font-size: 0.75em;
    padding: 5px 10px;
  }
  .icon-circle {
    width: 35px;
    height: 35px;
    font-size: 1em;
  }
}
/* ===== SERVICOS – LAPTOPS (13" / 14") ===== */
@media (max-width: 1440px){ 
  .servicos .section-title-main {
    margin-top:30px;
  }
}

/* ===== SERVICOS – CELULARES ===== */
@media (max-width: 768px) {
  .service-item-large h2.display-1 {
    font-size: 2.5rem;
    padding: 20px 0;
  }
  .service-item-large .hover-pre-text {
    font-size: 0.9rem;
    transform: translateY(-50%) translateX(5px); /* Ainda mais ajustado para telas muito pequenas */
  }
}

/* ===== SERVICOS – CELULARES ===== */
@media (max-width: 768px) {
  .servicos .section-title-main {
    font-size: 2.2rem;
    line-height: 1.2;
    margin-bottom: 20px;
    text-align: left;
  }
}
















/* =========================
   X4 - WHY-WE-DO -> A ESSÊNCIA DO QUE NOS IMPULSIONA
   ========================= */
.why-we-do-section.section {
  background-color: #F8F7F4; /* Cor de fundo creme/cinza claro, como na imagem */
  padding: 100px 0;
  color: #333;
}

.why-we-do-section .container {
  margin-top:-20px;
  max-width: 1200px;
}

/* --- Coluna Esquerda --- */
.why-we-do-section .content-left {
  padding-right: 50px; /* Espaço entre as colunas */
  position: relative; /* Para posicionamento absoluto do logo */
}

.why-we-do-section .section-title-main {
  font-size: 3.5rem; /* Tamanho do título grande */
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 30px;
  color: #222;
}

.why-we-do-section .section-description-main {
  line-height: 1.6;
  color: #555;
}

.why-we-do-section .bottom-left-logo {
  position: absolute;
  bottom: -50px; /* Ajuste para posicionar o logo */
  left: 15px; /* Ajuste para o padding do container */
}
.why-we-do-section .bottom-left-logo img {
    opacity: 0.7; /* Logo sutil */
}
/* --- Coluna Direita: Acordeão --- */
.why-we-do-section .content-right {
  padding-left: 50px; /* Espaço entre as colunas */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centraliza o acordeão verticalmente se a coluna esquerda for mais alta */}

.accordion-wrapper {
  width: 100%;
}

.accordion-item {
  border:none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Linha divisória */
  padding: 20px 0;
  background-color: transparent;
}

.accordion-item:last-child {
  border-bottom: none; /* Último item sem linha divisória */
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 10px 0;
  color: #fff;
}

.accordion-header h3 {
  font-size: 1.5em; /* Tamanho do título do item */
  font-weight: 500;
  margin-bottom: 0; /* Remove margem padrão do h3 */
  line-height: 1.3;
}

.accordion-icon {
  width: 40px; /* Tamanho do círculo do ícone */
  height: 40px;
  border-radius: 50%;
  border: 1px solid #43597A; /* Borda azul */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
  color: #43597A; /* Cor do ícone mais/menos azul */
  transition: all 0.3s ease;
  flex-shrink: 0; /* Impede que o ícone encolha */
}

/* Ícone de mais */
.accordion-icon .bi-plus-circle {
  display: block;
}
/* Ícone de menos */
.accordion-icon .bi-minus-circle {
  display: none; /* Por padrão, o ícone de menos está oculto */
}

/* --- Estado Ativo do Acordeão --- */
.accordion-item.active .accordion-header h3 {
    font-weight: 600; /* Título mais negrito quando ativo */
}

.accordion-item.active .accordion-icon {
  background-color: #43597A; /* Fundo azul quando ativo */
  color: #FFF; /* Ícone branco quando ativo */
}
.accordion-item.active .accordion-icon .bi-plus {
  display: none; /* Esconde o mais quando ativo */
  color: #FFF; /* Ícone branco quando ativo */
}
.accordion-item.active .accordion-icon .bi-minus {
  display: block; /* Mostra o menos quando ativo */
  color: #fff; /* Ícone branco quando ativo */
}


.accordion-item.active .accordion-icon{
  display: block; /* Mostra o menos quando ativo */
  color: #fff; /* Ícone branco quando ativo */
}


.accordion-content {
  max-height: 0; /* Conteúdo oculto por padrão */
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s ease-out, opacity 0.5s ease-out, padding 0.5s ease-out; /* Transição suave */
  padding-top: 0; /* Remove padding quando fechado */
  padding-bottom: 0;
}

.accordion-item.active .accordion-content {
  max-height: 500px; /* Altura máxima para mostrar o conteúdo, ajuste se o seu conteúdo for muito maior */
  opacity: 1;
  padding-top: 20px; /* Adiciona padding quando aberto */
  padding-bottom: 10px;
}

.accordion-content p {
  font-size: 0.95em;
  line-height: 1.6;
  color: #555;
  margin-bottom: 10px;
}
.accordion-content p:last-child {
  margin-bottom: 0; /* Remove margem do último parágrafo */
}


/* --- Responsividade --- */
@media (max-width: 992px) {
  .why-we-do-section .content-left,
  .why-we-do-section .content-right {
    padding-left: 15px; /* Ajusta padding para telas menores */
    padding-right: 15px;
  }
  .why-we-do-section .content-left {
      margin-bottom: 60px; /* Espaçamento entre as colunas em mobile */
  }
  .why-we-do-section .section-title-main {
    font-size: 2.8rem;
    text-align: center;
  }
  .why-we-do-section .section-description-main {
      text-align: center;
  }
  .why-we-do-section .bottom-left-logo {
      position: relative; /* Remove o posicionamento absoluto em mobile */
      bottom: auto;
      left: auto;
      text-align: center; /* Centraliza o logo */
      margin-top: 30px;
  }
  .accordion-header h3 {
    font-size: 1.3em;
  }
}

/* ===== WHY-WE-DO – CELULARES ===== */
@media (max-width: 768px) {
  .why-we-do-section .section-title-main {
    margin-top:-18px;
    font-size: 2.2rem;
  }
  .why-we-do-section .section-description-main {
      text-align: justify;
  }

  .accordion-header h3 {
    font-size: 1.1em;
  }
  .accordion-icon {
    width: 35px;
    height: 35px;
    font-size: 1em;
  }
}








/* =========================
   X5 - TIMELINE-SECTION -> COMO FAZEMOS ACONTECER
   ========================= */
.timeline-section{
  background-color: #000;
}
    :root {
      --bg: #fff;
      --accent: #43597A;
      --text: #fff;
      --line: #43597A;
    }
.timeline-section .container {
  margin-top: -70px;
  max-width: 1200px;
}

.timeline-section .section-title-main {
  margin-top:90px;
  font-size: 3.5rem; /* Tamanho do título grande */
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 30px;
  color: #fff;
}

.timeline-section .section-description-main {
  line-height: 1.6;
  color: #fff;
  margin-bottom: 30px;
}

.ct {
    justify-content: space-between; /* Espaça os itens */
    align-items: center; /* Alinha verticalmente ao centro */
    padding: 20px; /* Espaçamento interno, ajuste conforme necessário */
}


.ct p {
    max-width: 60%; /* Limita a largura do parágrafo */
    color: #fff;
}
  .ct  h1 {
  font-size: 3.5em; /* Tamanho do título principal */
      color: #fff;
      font-weight: 400;
      margin-bottom: 40px;
    }

    .timeline {
      position: relative;
    }

    .item {
      position: relative;
      display: flex;
      margin-bottom: 60px;
    }

    .item.left {
      justify-content: flex-start;
    }

    .item.right {
      justify-content: flex-end;
    }

    .content {
      width: 70%;
      padding: 20px 30px;
      border: 2px solid var(--line);
      border-radius: 20px;
      position: relative;
      color: #fff;
    }

    .content h3 {
      margin-top: 0;
      color: #a9bad4;
      font-size: 20px;
      font-weight: 600;
    }

    .content p {
      margin-bottom: -40;
      line-height: 1.6;
    }

    .circle {
      width: 44px;
      height: 44px;
      background-color: var(--accent);
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      position: absolute;
      top: 20px;
    }

    .item.left .circle {
      left: -30px;
    }

    .item.right .circle {
      right: -30px;
    }

    
/* ===== TIMELINE-SECTION – CELULARES ===== */
    @media (max-width: 768px) {
      .item,
      .item.left,
      .item.right {
        justify-content: center;
      }

      .content {
        width: 100%;
      }

      .circle {
        left: -22px !important;
        right: auto !important;
      }

      .item .content::before {
        left: -40px !important;
        right: auto !important;
      }
      .timeline-section .section-title-main {
        font-size: 2.2rem;
        line-height: 1.2;
        margin-bottom: 20px;
        text-align: center;
        margin-top:20px;
      }
      .timeline-section .section-description-main{
        max-width: 100%;
        margin: 0 auto;
        font-size: 1rem;
        text-align: justify;
        margin-bottom: 20px;
      }
    }

/* ===== TIMELINE-SECTION – LAPTOPS (13" / 14") ===== */
@media (max-width: 1440px){ 
  .timeline-section .section-title-main {
    margin-top:110px;
  }
}















/* =========================
   X6 - WHY-CHOOSE-US -> COMO TRANSFORMAMOS IDEIAS EM REALIDADE
   ========================= */
.why-choose-us .container {
  margin-top:15px;
  max-width: 1200px;
    /* As propriedades max-width e margin: 0 auto; geralmente são gerenciadas pelo .container do Bootstrap */
    /* ou pelo seu próprio CSS global do .container */
}

.why-choose-us .row {
    align-items: relative; /* Alinha o conteúdo ao topo das colunas */
}

/* --- Coluna Esquerda --- */
.why-choose-us .content-left {
    padding-right: 50px; /* Espaço entre a coluna esquerda e direita */
}

.why-choose-us p{
  color: #555;
}

.why-choose-us .sub-heading {
    font-family: var(--default-font); /* Pode usar a fonte padrão ou uma específica */
    font-size: 0.95em;
    color: #777; /* Cor cinza mais clara */
    margin-bottom: 15px;
    font-weight: 600; /* Um peso médio */
    line-height: 1.4;
}

.why-choose-us .main-heading {
    font-family: var(--heading-font); /* Usa sua fonte para títulos */
    font-size: 3.5rem; /* Tamanho da fonte grande, ajuste conforme necessário */
    font-weight: 600; /* Semibold, como na imagem */
    line-height: 1.2;
    color: #222;
    margin-bottom: 0;
}
.service-item {
    overflow: hidden;
    border-bottom: 2px solid #43597A;
    margin-bottom: 20px;
    margin-top: 20px;

}

/* ===== WHY-CHOOSE-US – CELULARES ===== */
@media (max-width: 768px) {

 .why-choose-us.section {
  }

  .why-choose-us .content-left{
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }

  .why-choose-us .main-heading {
    font-size: 2.2rem;
    line-height: 1.2;
    margin-bottom: 20px;
    margin-top:-70px;
    text-align: center;
  }

  .why-choose-us .content-right p {
    max-width: 100%;
    margin: 0 auto;
    font-size: 1rem;
    text-align: justify;
  }
}

/* ===== WHY-CHOOSE-US – LAPTOPS (13" / 14") ===== */
@media (max-width: 1440px){ 
  .why-choose-us .container {
    margin-top:35px;
  }
}

















/* =========================
   X8 - PORTFOLIO-OVERVIEW-SECTION -> PROJETOS QUE JÁ IDEALIZAMOS
   ========================= */
:root {
  --brand-primary-color: #007bff; /* Exemplo de azul, da imagem */
  --case-study-orange: #FF5722; /* Laranja vibrante da imagem */
  --case-study-gray-bg: #F8F8F8; /* Fundo cinza claro da seção */
  --text-dark: #333;
  --text-light: #FFF;
}

/* --- Seção de Casos de Sucesso --- */
.portfolio-overview-section.section  h1{
  color: #222;
  margin-top:-85px;
}

.portfolio-overview-section.section p {
  color: #555;
}


.portfolio-overview-section .section-title {
  margin-bottom: 60px;
}

.portfolio-overview-section .section-title h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #222;
}

.portfolio-overview-section .section-title p {
  font-size: 1.1em;
  color: #555;
  max-width: 800px;
  margin: 15px auto 0 auto;
}

@media (max-width: 1440px){ 
.portfolio-overview-section.section  h1{
  margin-top:-70px;
}
}

/* --- Estilo do Card Completo --- */
.case-study-card-link {
  display: block; /* Para que o link ocupe todo o espaço do card */
  text-decoration: none; /* Remover sublinhado do link */
  color: inherit;
}

.case-study-card {
  position: relative;
  background-color: #FFF; /* Cor de fundo padrão se a imagem não carregar */
  border-radius: 10px; /* Cantos arredondados */
  overflow: hidden; /* Garante que a imagem e o conteúdo respeitem os cantos */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Sombra sutil */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição para o hover */
  height: 100%; /* Garante que o card ocupe a altura total da coluna */
}

/* Efeito de hover no card */
.case-study-card-link:hover .case-study-card {
  transform: translateY(-5px); /* Efeito de "levantar" */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}


/* --- Área da Imagem --- */
.card-image-container {
  position: relative;
  height: 250px; /* Altura fixa para a imagem, ajuste conforme necessário */
  overflow: hidden;
  border-radius: 10px; /* Cantos arredondados para a imagem */
}

.card-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Garante que a imagem cubra o contêiner sem distorcer */
  display: block;
}

/* --- Ícone de Seta na Imagem --- */
.card-arrow-circle {
  position: absolute;
  bottom: 20px; /* Posição do fundo */
  right: 20px; /* Posição da direita */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8); /* Fundo branco semi-transparente */
  border: 9px solid var(--case-study-orange); /* Borda azul */
  color: var(--case-study-orange); /* Ícone azul */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  transition: all 0.3s ease;
  z-index: 2; /* Garante que esteja acima da imagem */
}

/* Efeito de hover no ícone de seta */
.case-study-card-link:hover .card-arrow-circle {
  background-color: #43597A;
  color: var(--text-light);
  border-color: #43597A;
}


/* --- Conteúdo de Texto do Card (Overlay Laranja) --- */
.card-content {
  background-color: #000; /* Cor laranja */
  padding: 25px;
  margin-top: -30px; /* **Crucial para fazer o conteúdo laranja sobrepor a imagem** */
  position: relative; /* Para garantir z-index acima da imagem */
  z-index: 1; /* Abaixo do ícone de seta */
  color: var(--text-light); /* Texto branco */
  border-bottom-left-radius: 10px; /* Manter os cantos arredondados */
  border-bottom-right-radius: 10px;
}

.card-category {
  display: inline-block;
  font-size: 0.8em;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 50px; /* Para o formato de "pílula" */
  background-color: rgba(255, 255, 255, 0.2); /* Fundo sutil */
  color: var(--text-light);
}

.card-title {
  font-size: 1.6em;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0;
  color: var(--text-light);
}

.service-item-project {
    overflow: hidden;
    
}

.service-item-project {
  background-color: #fff;
  border-radius: 16px;
  padding: 40px 32px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
  position: relative;
  margin-bottom: 30px;
  height: 550px;
}

/* Linha azul no topo */
.service-item-project::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #43597A;
  border-radius: 16px 16px 0 0;
}

.service-item .btn-square {
    width: 65px;
    height: 65px;color: #43597A;
}

/* Botão circular */
.image-action {
  position: absolute;
  bottom:20px;

  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #43597A;

  background-color: #43597A; /* ajuste para sua cor */
  color: #fff;
  
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 20px;
  transition: all 0.3s ease;
  float: right;
}

/* Hover elegante */
.image-action:hover {
  transform: translateX(4px);
  background-color: #a9bad4;
  color: #fff;
}


.service-item-project a {
    position: relative;
    padding: 0;
    line-height: 14px;
    text-transform: uppercase;
    transition: .5s;
}

.service-item-project a::after {
    position: absolute;
    content: "";
    width: 500%;
    height: 0;
    left: 100%;
    bottom: 3px;
    margin-left: 10px;
}



.service-item h3{
font-weight: 400;
color: #000;
font-size: 1.15em;
}

.service-item-project h6{
font-weight: 600;
color: #000;
font-size: 1.15em;
margin-top: 10px;
}

.service-item-project img{
  height: 294px;
}

/* Imagem com altura fixa */
.service-item-project img {
  height: 294px;
  width: 100%;
  object-fit: cover;
  flex-shrink: 0;
}


/* Texto cresce de forma uniforme */
.service-item-project p {
  flex-grow: 1;
  margin-bottom: 0;
}

/* Responsivo */
@media (max-width: 768px) {
  .service-item-project {
    height:650px;
    padding: 32px 24px 80px;
  }

  .service-item-project img {
    height: 220px;
  }
}

.btn-square{
  padding: 12px;
  padding-top: 17px;
}

.btn-square i{

  color: #43597A;
}

/*** Service Start ***/
.service .nav .nav-item {
    width: 75%;
    border: 1px solid #43597A;
    background: var(--bs-light);
}

.service h1{
  color: #000;
}

.service .nav .nav-item a {
    display: flex;
    justify-content: center;
}


.owl-stage-outer {
    margin-right: -1px;
}
.service .nav-item a.active {
    background: var(--bs-primary);
}

.service .nav-item a span {
    color: var(--bs-dark);
}

.service .nav-item a.active span {
    color: var(--bs-white);
}

.service-carousel {
    position: relative; /* Garante que elementos dentro possam ser posicionados de forma absoluta */
}

.service-carousel .owl-nav {
    position: absolute;
    bottom: -50px; /* Ajuste conforme necessário para posicionar abaixo das imagens */
    left: 50%; /* Centraliza os botões horizontalmente dentro do carrossel */
    transform: translateX(-50%); /* Ajusta para uma centralização perfeita */
    width: auto;
    display: flex; /* Coloca os botões lado a lado */
    justify-content: center; /* Centro de alinhamento dentro do contêiner */
    margin-top:140px;
}

.service-carousel .owl-nav .owl-prev,
.service-carousel .owl-nav .owl-next {
    padding: 10px 35px;
    border: 1px solid #43597A;
    color: #43597A;
    background: var(--bs-light);
    transition: 0.5s;
    margin: 0 15px; /* Espaço entre os botões */
    margin-top:140px;
    border-radius: 3px;
    background-color: #fff;
}

.service-carousel .owl-nav .owl-prev:hover,
.service-carousel .owl-nav .owl-next:hover {
    background: #43597A;
    color: var(--bs-white);
}


/* ===== PORTFOLIO-OVERVIEW-SECTION  – TABLETS ===== */
@media (min-width: 992px) {
    .service-carousel .owl-nav .owl-prev {
        top: 0;
        left: -115px;
    }
    
    .service-carousel .owl-nav .owl-next {
        bottom: 0;
        left: -115px;
    }
}

/* ===== PORTFOLIO-OVERVIEW-SECTION  – TABLETS ===== */
@media (max-width: 991px) {
    .owl-stage-outer {
        margin-bottom: 70px;
    }
    .service-carousel .owl-nav .owl-prev {
        bottom: -70px;
        left: 0;
    }

    .service-carousel .owl-nav .owl-next {
        bottom: -70px;
        right: 0;
    }

    .service .nav {
        display: flex;
        justify-content: center;
    }
}
/*** Service End ***/

/* ===== PORTFOLIO-OVERVIEW-SECTION – TABLET ===== */
@media (max-width: 992px) { /* Tablets e menores */
  .portfolio-overview-section .section-title p {
    font-size: 1em;
  }
  .card-content {
    padding: 20px;
    margin-top: -20px;
  }
  .card-title {
    font-size: 1.4em;
  }
  .card-arrow-circle {
    width: 40px;
    height: 40px;
    font-size: 1.2em;
    bottom: 15px;
    right: 15px;
  background-color: #43597A;
  }
}

/* ===== PORTFOLIO-OVERVIEW-SECTION – CELULARES ===== */
@media (max-width: 768px) { /* Celulares */
  .portfolio-overview-section h1 {
    margin-top:-75px;
    font-size: 2rem;
  }
  .card-title {
    font-size: 1.2em;
  }
  .card-category {
    font-size: 0.7em;
  }
}

/* ===== PORTFOLIO-OVERVIEW-SECTION – LAPTOPS (13" / 14") ===== */
@media (max-width: 1440px){ 
  .portfolio-overview-section h1 {
    margin-top:-65px;
  }
}

















/* =========================
   X9 - FOOTER -> RODAPÉ
   ========================= */
.footer {
  background: radial-gradient(circle at top, #0b0f1a, #05070d);
  color: #cfd3dc;
  font-family: system-ui, sans-serif;
}

.footer-container {
  max-width: 1200px;
  margin: auto;
  padding: 80px 24px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 48px;
}

/* Logo */
.footer-logo {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
}

/* Títulos */
.footer h4 {
  color: #fff;
  font-size: 16px;
  margin-bottom: 16px;
  position: relative;
}

.footer h4::after {
  content: "";
  width: 24px;
  height: 2px;
  background: #ED6009;
  display: block;
  margin-top: 6px;
}

/* Texto */
.footer p {
  font-size: 14px;
  line-height: 1.6;
}

/* Links */
.footer-links ul {
  list-style: none;
  padding: 0;
}

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

.footer-links a {
  color: #cfd3dc;
  text-decoration: none;
  font-size: 14px;
  transition: 0.3s;
}

.footer-links a:hover {
  color: #ED6009;
}


/* Contato */
.contact-item {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

.contact-item .icon {
  background: rgba(255, 138, 0, 0.15);
  color: #ED6009;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Redes sociais */
.social-icons {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.social-icons a {
  width: 36px;
  height: 36px;
  background: #1c1f2a;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 14px;
  transition: 0.3s;
}

.social-icons a:hover {
  background: #ff8a00;
}

/* Barra inferior */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: auto;
  font-size: 13px;
}

.footer-bottom-links a {
  margin-left: 16px;
  color: #cfd3dc;
  text-decoration: none;
}

.footer-bottom-links a:hover {
  color: #ED6009;
}

/* ===== FOOTER – TABLETS ===== */
@media (max-width: 992px) {
  .footer-container {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}












/* =========================
   X11 - CONTACT-SECTION -> CONTATO
   ========================= */
.contact.section {
  padding: 100px 0;
  color: #333;
  font-family: var(--default-font); /* Usa sua fonte padrão */
}
.contact-section .section-title-main {
    margin-top:150px;
    font-size: 3.5rem;
  }

/* ===== CONTACT-SECTION – CELULARES ===== */
@media (max-width: 768px) { /* Celulares */
  .contact-section .section-title-main {
    margin-top:45px;
    font-size: 3.5rem;
  }
  .contact-section .map-container {
    margin-bottom:-90px;
  }
}

/* ===== CONTACT-SECTION – LAPTOPS (13" / 14") ===== */
@media (max-width: 1440px){ 
  .contact-section .section-title-main {
    margin-top:150px;
  }
}










/* =========================
   X12 - LEGAL -> INFORMAÇÕES INSTITUCIONAIS
   ========================= */
.legal{
  margin-top:50px;
}

/* ===== LEGAL  – CELULARES ===== */
@media (max-width: 768px) {
  .legal {
    margin-top:-45px;
  }
}

















/* =========================
   X13 - TOP BAR -> BARRA DO TOPO
   ========================= */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: #000;
  color: #cfd3dc;
  z-index: 999;
}

.top-bar-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 24px;

  display: flex;
  justify-content: flex-end;
  gap: 32px;
}

.top-bar-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-bar-item i {
  color: #cfd3dc;
  font-size: 16px;
}

.top-bar-item a {
  color: #cfd3dc;
  text-decoration: none;
}

.top-bar-item a:hover {
  text-decoration: underline;
}
.scrolled .top-bar {
  transform: translateY(-100%);
}

.scrolled .header {
  top: 0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
/* ===== TOP BAR – CELULARES ===== */
@media (max-width: 768px) {
  .top-bar {
    display: none;
  }
}













/* =========================
   X14 - BREADCRUMB -> BREADCRUMB
   ========================= */
.breadcrumb-wrapper {
  background-color: #f5f5f5;
  padding: 16px 0;
}

.breadcrumb {
  max-width: 1200px;
  margin: 0;
  margin-left: 60px;
  padding: 0 24px;

  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 14px;
  color: #777;
}

.breadcrumb-item a {
  color: #777;
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: #000;
  text-decoration: underline;
}

.breadcrumb-item::after {
  margin-left: 8px;
  color: #aaa;
}

.breadcrumb-item:last-child::after {
  content: "";
}

.breadcrumb-item.active {
  color: #999;
  font-weight: 500;
}

/* ===== BREADCRUMB – CELULARES ===== */
@media (max-width: 768px) {
  .breadcrumb {
    font-size: 13px;
    margin-left:0px;
  }
}

















/* =========================
   X15 - SERVICES - SERVIÇOS (PÁGINA DE SERVIÇOS)
   ========================= */
.details-section .section-title-main {
  font-size: 3.5rem; /* Tamanho do título grande */
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 30px;
  color: #222;
}


.details-section {
  max-width: 1200px;
  margin: 900px auto;
  padding: 0 24px;
}

/* MENU */
.details-tabs {
  display: flex;
  gap: 48px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 40px;
  list-style: none;
  padding: 0;
  margin-left:10px;
}

.details-tabs li {
  padding: 12px 0;
  cursor: pointer;
  font-size: 16px;
  color: #555;
  position: relative;
}

.details-tabs li.active {
  color: #000; /* tom elegante (pode ajustar para sua marca) */
  font-weight: 600;
}

.details-tabs li.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 3px;
  background-color: #000;
}

/* ===== SERVICES  – CELULARES ===== */
@media (max-width: 768px) {

  .details-tabs {
    gap: 24px;                 /* reduz o espaçamento */
    overflow-x: auto;          /* permite scroll horizontal */
    white-space: nowrap;       /* impede quebra de linha */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    margin-left: 0;
  }

  .details-tabs::-webkit-scrollbar {
    display: none;             /* esconde a barra de rolagem */
  }

  .details-tabs li {
    font-size: 15px;
    padding: 10px 0;
    flex-shrink: 0;            /* impede que os itens encolham */
  }

  .details-tabs li.active::after {
    height: 2px;               /* traço mais fino no mobile */
  }
}
/* CONTEÚDO */
.details-content h3 {
  margin-bottom: 16px;
  font-weight: 600;
  color: #222;
}

.details-content h4 {
  margin-top: 32px;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 600;
  color: #222;
}

.details-content p {
  line-height: 1.5;
  color: #222;
}

.details-content ul {
  list-style: none;
  padding: 0;
  margin-top: 16px;
}

.details-content ul li {
  margin-bottom: 10px;
  padding-left: 24px;
  position: relative;
  color: #555;
}

.details-content ul li::before {
  position: absolute;
  left: 0;
  color: #000;
}

/* ABA */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.tab-content p{
  color: #555;
}










/* =========================
   X16 - CARTOES - CARTÔES (PÁGINA DE SERVIÇOS E SOBRE A  SPAOX)
   ========================= */
.cartoes {
  background-color: #ffffff;
  padding: 80px 0;
}

.cartoes-section .section-title-main {
  font-size: 3.0rem; /* Tamanho do título grande */
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 30px;
  color: #222;
  text-align:center;
}



.cartoes-section p {
  color: #555;
}


.cartoes-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.cartoes-section .about-content p {
  text-align:center;
}


/* CARD */
.cartao {
  background-color: #fff;
  border-radius: 16px;
  padding: 40px 32px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
  position: relative;
}

/* Linha azul no topo */
.cartao::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #43597A;
  border-radius: 16px 16px 0 0;
}

/* Título */
.cartao h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #0b1f33;
}

.cartao h3 span {
  color: #43597A;
}

/* Texto */
.cartao p {
  font-size: 15px;
  line-height: 1.6;
  color: #555;
}
.cartao ul {
  list-style: none;
  padding: 0;
  margin-top: 16px;
}

.cartao ul li {
  margin-bottom: 10px;
  padding-left: 24px;
  position: relative;
  color: #555;  
  font-size: 15px;
}

.cartao ul li::before {
  position: absolute;
  left: 0;
  color: #555;
}
.cartao a{
  font-weight: bolder;
  float: right;
}

.cartao i{
  color: #43597A;
  font-weight: bolder;
  font-size: 18px;
}

.read-more{
  color: #43597A;
}

/* ===== CARTÕES – CELULARES ===== */
@media (max-width: 768px) {
  .cartoes-section .section-title-main{
    font-size: 2.7rem;
  }
  .cartoes-section .about-content p {
  text-align:justify;
  }
}


/* ===== CARTÕES – TABLETS ===== */
@media (max-width: 992px) {
  .cartoes-container {
    grid-template-columns: 1fr;
  }
}