/* ====== CUSTOM BIODATA ====== */
:root{
    --blue: #1e73be;
    --blue-dark: #0f4a7a;
    --text: #333;
    --bg: #f6f8fb;
}

body{
    font-family: Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* Banner */
.home-banner{
    position: relative;
    height: 70vh;
    min-height: 520px;
}

.home-banner-inner{
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

.home-banner-overlay{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
}

.home-banner-content{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
}

.home-banner-content h1{
    font-size: 48px;
    margin-bottom: 10px;
}

.home-banner-content p{
    font-size: 18px;
    margin-bottom: 20px;
}

.btn-primary{
    display: inline-block;
    background: var(--blue);
    color: #fff;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
}

/* Acesso rápido */
.acesso-rapido{
    padding: 60px 0;
    background: #fff;
}

.acesso-rapido .container{
    max-width: 1100px;
    margin: 0 auto;
}

.acesso-rapido .title{
    text-align: center;
    margin-bottom: 40px;
}

.acesso-rapido .title h2{
    font-size: 32px;
}

.acesso-rapido .title span{
    color: var(--blue);
}

.cards{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.card{
    width: 230px;
    height: 150px;
    background: #f3f7fb;
    border: 1px solid #e1e7ee;
    border-radius: 12px;
    text-decoration: none;
    color: #333;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover{
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,.12);
}

.card .icon{
    font-size: 26px;
    color: var(--blue);
    margin-bottom: 10px;
}

.card h3{
    font-size: 18px;
}

/* CTA */
.cta{
    background: var(--blue);
    color: #fff;
    padding: 50px 0;
}

.cta-box{
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.cta-box h2{
    font-size: 34px;
}

.cta-box h2 span{
    color: #ffd400;
}

.btn-secondary{
    display: inline-block;
    margin-top: 20px;
    background: #ffd400;
    color: var(--blue);
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
}

/* Redes sociais */
.redes{
    padding: 50px 0;
}

.redes h2{
    text-align: center;
    font-size: 30px;
}

.redes h2 span{
    color: var(--blue);
}

.social-grid{
    margin-top: 30px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* Contato */
.contato{
    padding: 50px 0;
    background: #fff;
}

.contact-grid{
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.contact-grid .box{
    background: #f3f7fb;
    border: 1px solid #e1e7ee;
    border-radius: 12px;
    padding: 20px;
    width: 300px;
    text-align: center;
}
/* MENU ORGANIZADO */
.main-nav ul {
  list-style: none;       /* tira bullets */
  padding: 0;
  margin: 0;
  display: flex;          /* alinha horizontal */
  justify-content: center; /* centraliza */
  gap: 25px;              /* espaço entre itens */
}

.main-nav ul li {
  display: inline-block;  /* garante bloco ao lado */
}

.main-nav ul li a {
  color: #fff !important; /* cor branca */
  text-decoration: none;
  padding: 12px 18px;
  transition: background 0.3s ease;
}

.main-nav ul li a:hover {
  background: #0d5bbf;     /* azul mais claro ao passar */
  border-radius: 6px;
}
/* =========================
   MENU DE ACESSO RÁPIDO
   ========================= */

.service-tab-title-carousel .item a {
  background: #0d5bbf !important;   /* fundo azul */
  color: #fff !important;           /* texto branco */
  border-radius: 10px !important;
  padding: 15px 18px !important;
}

.service-tab-title-carousel .item a:hover {
  background: #0a4aa0 !important;   /* azul mais escuro no hover */
  color: #fff !important;
}

.service-tab-title-carousel .item.active a {
  background: #0a4aa0 !important;   /* botão ativo azul escuro */
  color: #fff !important;
}
/* =========================
   MENU PRINCIPAL DEFINITIVO
   ========================= */

/* Contêiner do menu */
.main-nav {
  background-color: #0d5bbf !important; /* fundo azul */
  padding: 12px 0 !important;
}

/* Lista de itens */
.main-nav ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 25px !important;
}

/* Cada item do menu */
.main-nav ul li {
  display: inline-block !important;
}

/* Links do menu */
.main-nav ul li a {
  color: #fff !important;        /* texto branco */
  font-weight: 600 !important;
  padding: 10px 16px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  font-size: 14px !important;
  border-radius: 6px !important;
}

/* Efeito hover */
.main-nav ul li a:hover {
  background-color: #0a4aa0 !important;
  color: #fff !important;
}

/* Botão “Resultados” */
.btn-resultados {
  background: #fff !important;
  color: #0d5bbf !important;
  padding: 10px 20px !important;
  border-radius: 30px !important;
  font-weight: bold !important;
  border: 2px solid #fff !important;
}

/* Hover no botão “Resultados” */
.btn-resultados:hover {
  background: #0a4aa0 !important;
  color: #fff !important;
  border-color: #0a4aa0 !important;
}
/* Alinha o menu e o botão de resultados no mesmo nível */
.header .thm-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Faz o menu ficar centralizado */
.header .main-navigation {
  flex: 1 !important;
}

/* Alinha o botão Resultados à direita */
.header .right-side-box {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}
/* ====== BOTÃO RESULTADOS (MENU) ====== */
.main-nav ul li .btn-resultados {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 6px;
    background: #1a6bff; /* azul forte */
    color: #fff !important;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    border: 2px solid #154fbf;
    transition: all 0.3s ease;
}

.main-nav ul li .btn-resultados:hover {
    background: #0f4dd1;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.3);
}
/* ====== BOTÃO RESULTADOS (MENU) ====== */
.main-nav .btn-resultados {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 6px;
    background: #1a6bff !important; /* azul forte */
    color: #fff !important; /* texto sempre branco */
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    border: 2px solid #154fbf;
    transition: all 0.3s ease;
}

.main-nav .btn-resultados:hover {
    background: #0f4dd1 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.3);
}
/* ====== CABEÇALHO COM IMAGEM DE FUNDO ====== */
.top-header {
    background: url('../images/header-biodata.jpg') no-repeat center center;
    background-size: cover;
    padding: 35px 0;
}

/* remover as infos (já estão na imagem) */
.top-header .top-info {
    display: none;
}
/* ====== CABEÇALHO COM BANNER ====== */
.top-header {
    background: url('../images/header-biodata.jpg') no-repeat center center;
    background-size: cover;
    padding: 0;
    height: 220px; /* pode ajustar se quiser mais alto ou mais baixo */
}

/* remover infos e logo antiga */
.top-header .logo,
.top-header .top-info {
    display: none !important;
}
.banner-link {
    display: block;
    width: 100%;
    height: 220px; /* deve ser igual ao height do top-header */
}