/* Paleta de Cores */
:root {
  --cream: #ffffff;      /* Branco, para fundos claros */
  --navy-blue: #030203;  /* Preto, para o rodapé (anteriormente azul) */
  --orange-500: #e46140; /* Vermelho-alaranjado, para botões e CTAs */
  --orange-600: #f19a40; /* Laranja claro, para hover */
  --gray: #030203;       /* Preto, para texto secundário */
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--cream);
  color: var(--gray);
}

.text-navy-blue { color: #030203; } /* Mantém os cabeçalhos em preto */
.text-gray { color: var(--gray); }
.text-orange { color: var(--orange-500); }
.bg-cream { background-color: var(--cream); }
.bg-navy-blue { background-color: var(--navy-blue) !important; }
.bg-orange { background-color: var(--orange-500); }

header.bg-white {
  background-color: #ffffff !important;
  color: #030203; /* Ajustado para preto */
}

section.hero-section {
  position: relative;
  background-color: #030203; /* Mantém o hero section em preto */
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://i.postimg.cc/zG9MKb7v/Hero-Section.png');
  background-size: cover;
  background-position: center;
  z-index: 1;
}

/* Estilo para as imagens na seção Meus Cursos */
.course-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.course-images img {
  width: 200px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Hover para botões */
.bg-orange:hover {
  background-color: var(--orange-600);
}