:root {
  --azul-primario: #0b4fa1;
  --azul-escuro: #05386b;
  --dourado: #f0a500;
  --bg: #f7f9fb;
  --card: #ffffff;
  --muted: #6c757d;
}

body {
  background: var(--bg);
  color: #1f2937;
  font-family: "Poppins", sans-serif;
}

/* HEADER */
header.navbar {
  background: linear-gradient(90deg, var(--azul-primario), var(--azul-escuro));
  box-shadow: 0 4px 12px rgba(2, 6, 23, 0.12);
}

.brand-name {
  color: #fff;
  font-weight: 700;
}

.nav-contact {
  color: #fff;
  font-weight: 600;
}

.nav-contact:hover {
  text-decoration: underline;
}

/* HERO */
.hero {
  padding: 6.5rem 1.25rem 3rem;
  text-align: center;
}

.hero h1 {
  font-size: 1.7rem;
  color: var(--azul-escuro);
}

/* BOTÕES */
.btn, .cta-btn {
  font-weight: 700 !important;
  border-radius: 12px !important;
  transition: all 0.25s ease-in-out !important;
}

.btn-primary,
.cta-ao {
  background: linear-gradient(90deg, var(--azul-primario), var(--azul-escuro));
  color: #fff !important;
  border: none;
}

.btn-primary:hover,
.cta-ao:hover {
  background: linear-gradient(90deg, var(--azul-escuro), var(--azul-primario));
  transform: scale(1.03);
}

.btn-outline-primary,
.cta-pt {
  background: #fff;
  border: 2px solid var(--azul-primario);
  color: var(--azul-primario) !important;
}

.btn-outline-primary:hover,
.cta-pt:hover {
  background: var(--azul-primario);
  color: #fff !important;
  transform: scale(1.03);
}

.btn-warning {
  background: linear-gradient(90deg, var(--dourado), #f7c86b);
  border: none;
}

/* CARDS DE SERVIÇO */
.service-card {
  border-radius: 12px;
  background: var(--card);
  padding: 1.25rem;
  box-shadow: 0 6px 20px rgba(2, 6, 23, 0.06);
}

.price {
  font-weight: 700;
  color: var(--azul-escuro);
}

/* FOOTER */
footer {
  background: #0f1724;
  color: #dbeafe;
  padding: 2rem 1.25rem;
}

footer a {
  color: #dbeafe;
}

footer a:hover {
  color: #fff;
}

@media (max-width: 576px) {
  .cta-btn {
    min-width: 100%;
  }
}

/* === RESPONSIVIDADE: colocar sidebar abaixo em telas pequenas === */
/* breakpoint: 992px (igual ao Bootstrap lg) */
@media (max-width: 992px) {
  /* Mudamos a direção do container para column-reverse:
     isso faz o main-content aparecer primeiro e o sidebar depois. */
  .course-container {
    display: flex;           /* já deve existir, mas reforça */
    flex-direction: column-reverse;
    align-items: stretch;
  }

  /* Sidebar deixa de ser fixo e ocupa 100% da largura */
  #sidebar {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    border-right: none;
    padding: 12px 16px;
    margin-top: 12px;
  }

  /* Conteúdo principal ocupa toda a largura (sem margin-left) */
  #main-content {
    margin-left: 0 !important;
    padding: 20px;
    width: 100%;
  }

  /* Footer alinhado com o conteúdo (sem margin-left) */
  footer {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Ajustes visuais do menu quando empilhado */
  #sidebar h4 {
    padding-left: 8px;
  }
  #sidebar a {
    padding: 10px 12px;
    border-left: none; /* remove o efeito de borda na versão mobile */
  }
  #sidebar a.active {
    border-left: none;
    border-radius: 6px;
  }
}