/* Estilos gerais para o nav-item */
.navbar-nav .nav-item {
  position: relative;
  padding: 0 10px; /* Espaçamento interno na horizontal */
  text-align: center; /* Centraliza o texto dentro de cada item */
}

.navbar-nav .nav-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 1px;
  background-color: #ddd; /* Linha separadora entre os itens */
}

/* Estilos para os links na barra de navegação */
.navbar-nav .nav-link {
  position: relative;
  color: #000; /* Cor padrão do texto */
  font-weight: normal; /* Define o peso da fonte padrão */
  text-align: center; /* Centraliza o texto */
  transition: color 0.3s, font-weight 0.3s; /* Transição suave para cor e peso */
}

/* Efeito hover: muda a cor do texto */
.navbar-nav .nav-link:hover {
  color: #f4c2c2; /* Cor rosa ao passar o mouse */
}

/* Link ativo: cor azul claro e negrito */
.navbar-nav .nav-link.active {
  color: #add8e6; /* Cor azul claro para o link ativo */
  font-weight: bold; /* Negrito para o link ativo */
  text-align: center; /* Certifica que o texto do item ativo também esteja centralizado */
}

/* Removendo o efeito de borda inferior e colocando a cor no texto ao passar o mouse */
.navbar-nav .nav-link::after {
  content: none; /* Remove a borda inferior animada */
}

  .img-icon {
    padding:0 40px;
  }

  /* Fundo Rosa Suave (#f4c2c2) */
.section-bg-rosa {
    background-color: #fff5f5; /* Cor de fundo */
    padding: 50px 0; /* Espaçamento vertical */
    width: 100vw; /* Ocupa 100% da largura da viewport */
    margin-left: calc(-50vw + 50%); /* Garante que o fundo ocupe toda a largura da página */
}

/* Fundo Azul Claro (#add8e6) */
.section-bg-azul {
    background-color: #f0fafc; /* Cor de fundo */
    padding: 50px 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* Fundo Lavanda (#e6e6fa) */
.section-bg-lavanda {
    background-color: #f4f4f9; /* Cor de fundo */
    padding: 50px 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.jumbotron.jumbotron-fluid {
    min-height: 500px; /* Altura mínima de 500px */
    background-size: cover; /* Faz com que a imagem de fundo cubra toda a área */
    background-position: center top; /* Centraliza a imagem */
    color: #fff; /* Texto em branco */
    display: flex; /* Usa flexbox para centralizar o conteúdo */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    text-align: center; /* Centraliza o texto */
    padding: 0; /* Remove o padding padrão */
}

.jumbotron .container h1,
.jumbotron .container p {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra leve no texto */
}

.jumbotron .container {
    padding: 100px 0; /* Espaçamento vertical no conteúdo */
}

.carousel-item {
  position: relative;
  width: 100%; /* Ocupa 100% da largura disponível */
  background-position: center top; /* Centraliza horizontalmente e alinha ao topo */
  background-size: cover; /* Garante que a imagem cubra todo o slide sem distorcer */
  padding-bottom: 0; /* Remove padding inferior */
  height: 80vh; /* Altura para telas grandes (80% da altura da viewport) */
}

.carousel-item img {
  width: 100%; /* Imagem ocupa 100% da largura do slide */
  height: 100%; /* A altura ocupa todo o container (controlada pelo container) */
  object-fit: cover; /* Cobre toda a área disponível sem distorcer */
}

.carousel-inner {
  width: 100%; /* Garante que o container ocupe 100% da largura */
}

/* Para telas grandes (Desktop) */
@media (min-width: 992px) {
  .carousel-item {
    height: 80vh; /* 80% da altura da tela (viewport height) para desktops */
  }
}

/* Para telas médias (Tablets) */
@media (min-width: 768px) and (max-width: 991px) {
  .carousel-item {
    height: 60vh; /* 60% da altura da tela para tablets */
  }
}

/* Para telas pequenas (Smartphones) */
@media (max-width: 767px) {
  .carousel-item {
    height: 50vh; /* 50% da altura da tela para smartphones */
  }

  .carousel-item img {
    width: 100%; /* O layout da imagem continua ocupando toda a largura */
    height: 100%; /* A altura se ajusta conforme a proporção da imagem */
    object-fit: cover; /* Mantém a proporção sem distorcer */
  }
}

.fade-section {
  opacity: 0; /* Iniciar com a seção invisível */
  transform: translateY(20px); /* Pequeno deslocamento para cima */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Animação suave */
}

.fade-section.visible {
  opacity: 1; /* Torna a seção visível */
  transform: translateY(0); /* Remove o deslocamento */
}

.img-custom {
  border: 2px solid #e6e6e6; /* Cor suave para a borda */
  border-radius: 8px; /* Arredonda os cantos da imagem */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra suave para dar profundidade */
  transition: box-shadow 0.3s ease-in-out; /* Transição suave ao passar o mouse */
}

.img-custom:hover {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Aumenta a sombra quando o usuário passar o mouse */
}