/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.0rem;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --black-color: hsl(220, 24%, 12%);
  --black-color-light: hsl(220, 24%, 15%);
  --black-color-lighten: hsl(220, 20%, 18%);
  --pink-color: #ff007f;
  --white-color: #fff;
  --body-color: hsl(220, 100%, 97%);

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Montserrat", sans-serif;
  --normal-font-size: .938rem;

  /*========== Font weight ==========*/
  --font-regular: 400;
  --font-semi-bold: 600;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

html, body {
    height: 100% !important;
    margin: 0;
    padding: 0;
}

.content-wrapper {
    min-height: 100vh !important; /* Faz o conteúdo principal ocupar toda a tela */
    display: flex;
    flex-direction: column;
}

section.bg-primary {
    min-height: 100vh; /* Faz o section ocupar toda a tela */
    display: flex;
    align-items: center; /* Centraliza o conteúdo verticalmente */
}


.navbar {
    background-color: #1b1e24 !important;
    padding: 15px 20px !important;
}

.navbar-brand {
    display: flex !important;
    align-items: center !important;
    font-weight: bold;
    color: white !important;
    margin-left: 4em; /* Move a logo um pouco para a direita */
}

.navbar-brand img {
    margin-right: 10px;
}

.navbar-nav {
    margin-right: 8em; /* Move os botões um pouco para a direita */
}

.navbar-nav .nav-item {
    margin: 0 15px;
}

.navbar-nav .nav-link {
    position: relative;
    color: white !important;
    font-weight: bold;
    transition: color 0.3s;
    font-size: 18px;
}

.navbar-nav .nav-link:hover {
    color: var(--white-color);
    background-color: var(--black-color-light);
    text-decoration: none; /* Garante que não volte a sublinhar */
}

.nav-link::before {
    content: ''; /* Cria o traçado */
    position: absolute;
    top: -5px; /* Coloca o traçado na parte superior */
    left: 0;
    width: 0; /* Começa com largura 0 */
    height: 2px; /* Altura do traçado */
    background-color: var(--pink-color); /* Cor rosa do traçado */
    transition: width 0.3s ease; /* Animação para o traçado */
}
  
.nav-link:hover::before {
    width: 100%; /* Expande o traçado para toda a largura do link */
}

footer {
    margin-top: auto; /* Empurra o footer para o final da página */
}

.footer__title {
    font-size: 1.5rem;
    font-weight: var(--font-semi-bold);
    margin-bottom: 0.5rem;
  }