/* Títulos e destaques com Space Grotesk Bold */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
}

/* Textos corridos com Mulish Regular */
body, span, div {
  font-family: 'Mulish', sans-serif;
  font-weight: 400;
}

/* Tamanho da fonte para elementos <p> */
p {
  font-size: 20px; /* Ajuste o tamanho da fonte conforme necessário */
}



/* Reset de estilos básicos */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* Estilo dos botões */
.btn {
  cursor: pointer;
}


/* Estilo do banner */
.banner {
  background-image: url('imagens/1920x1080/Banner\ 004\ -\ parceiros.png');
  background-size: 100% 100%; /* Isso garante que a imagem cubra todo o espaço do banner */
  background-repeat: no-repeat;
  background-position: center; /* Centraliza a imagem */
  color: white;
  text-align: right;
  padding: 100px 20px 100px 50px;
  height: 25cm; /* Altura definida para 20cm */
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: left;
  align-items: center; /* Alinha os itens verticalmente */
  margin-top: -80px; /* Ajusta o menu mais para cima */
}

.menu ul .logo {
  margin-right: 60px; /* Espaçamento à esquerda do logotipo */
}

.menu ul li {
  margin: 0 50px; /* Adiciona espaçamento entre os itens do menu */
}

.menu ul li a {
  color: white; /* Cor do texto do menu */
  text-decoration: none;
  font-weight: none;
  font-size: 18px;
  transition: color 0.3s;
}

.menu ul li a:hover {
  color: rgba(255, 255, 255, 0.8); /* Cor do texto do menu ao passar o mouse */
}



.banner h1 {
  font-size: 36px;
}

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

.buttons {
  display: flex;
  align-items: center; /* Alinha os itens verticalmente */
  margin-top: 20px;
}

.buttons p {
  margin-right: 20px; /* Adiciona espaçamento entre o texto e as imagens */
}

.buttons img {
  width: 150px; /* Ajuste o tamanho conforme necessário */
}

/* Estilo dos cards */
.features {
  display: flex;
  justify-content: center; /* Centralizando os cards horizontalmente */
  padding: 80px 0; /* Adicionando espaçamento vertical entre os cards */
}

.card {
  flex-basis: calc(30% - 0.1cm); /* Definindo a largura dos cards com 1cm de espaçamento entre eles */
  margin: 0 0.25cm; /* Adicionando espaçamento lateral entre os cards */
  padding: 15px;
  border-radius: 12px;
  text-align: center;
}

.card img {
  width: 100%;
  border-radius: 12px;
}

.card .icon {
  margin-top: 5px;
  margin-bottom: 5px;
}

.card .icon img {
  width: 40px;
}

.card h3 {
  font-weight: bold;
  font-size: 20px;
}

.card p {
  font-size: 14px;
}

/* Estilo do campo Explore */
.explore {
  text-align: center;
  padding: 50px 0;
}

.explore h2 {
  margin-bottom: 20px;
}

/* Estilo do footer */
footer {
  text-align: center;
  padding: 20px 0;
}

footer img {
  max-width: 100%;
  margin-bottom: 10px;
}

/* Estilo do botão Contato */
.btn-success {
  color: #000000;
  background-color: transparent;
  border-color: #33D38A;
  font-size: 18px; /* Reduz o tamanho da fonte */
  padding: 8px 16px; /* Reduz o espaçamento interno do botão */
}

/* Cor Padrão Botão Verde Esmeralda */
.btn-success:hover {
  background-color: #33D38A;
  border-color: #33D38A;
}

/* Estilo da seção Saiba Mais */
.saiba-mais {
  background-color: #335956; /* Cor de fundo desejada */
  color: #fff;
  text-align: center;
  padding: 100px 20px;
  height: 8cm; /* Altura da seção */
}


.saiba-mais .content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.saiba-mais h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

.saiba-mais h2 span {
  font-weight: bold;
}

.saiba-mais h2 span:first-child {
  color: #28a745; /* Cor verde claro */
}

.saiba-mais p {
  font-size: 18px;
  margin-bottom: 20px;
}

.saiba-mais .btn {
  padding: 10px 20px;
  border: 1px solid #fff;
  background-color: transparent;
  color: #fff;
  cursor: pointer;
}

.saiba-mais .btn:hover {
  background-color: rgba(255, 255, 255, 0.2); /* Cor de fundo ao passar o mouse */
}

.features-carousel {
  padding: 50px 0;
}

.feature-item {
  text-align: center;
}

.feature-item img {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.funcionalidades-app {
  background-color: #fff; /* Cor de fundo */
  padding: 50px 0; /* Espaçamento interno */
}

.funcionalidades-app h2 {
  font-weight: bold; /* Negrito */
  color: #33D38A; /* Cor verde */
  font-size: 36px; /* Tamanho da fonte */
}

.funcionalidades-app h3 {
  font-weight: bold; /* Negrito */
}

.funcionalidades-app p {
  font-size: 16px; /* Tamanho da fonte */
}

/* Estilo dos botões de navegação do carrossel */
.carousel-control-prev, .carousel-control-next {
  width: auto; /* Largura automática */
  height: auto; /* Altura automática */
  font-size: 30px; /* Tamanho da seta */
  background: none; /* Sem fundo */
  border: none; /* Sem borda */
  outline: none; /* Sem contorno */
}

.carousel-control-prev-icon, .carousel-control-next-icon {
  background-color: transparent; /* Cor de fundo transparente */
}

.carousel-item {
  text-align: center; /* Alinhamento central */
}

.carousel-item img {
  max-width: 100%; /* Imagem responsiva */
  height: auto; /* Altura automática */
}

.carousel-item.active {
  display: flex; /* Exibir como flexbox */
  justify-content: center; /* Centralizar conteúdo */
  align-items: center; /* Centralizar conteúdo */
}


/* Adicione suas regras de estilo CSS aqui */

.features-carousel {
  padding: 50px 0;
}

.feature-item {
  text-align: center;
}

.feature-item img {
  max-width: 100%;
  height: auto;
  margin-bottom: 40px;
}

.disseminar-compartilhar-cuidar .card {
  background-color: #D9FFB4;
  color: #fff; /* para definir a cor do texto como branco */
}

.disseminar-compartilhar-cuidar .card h5,
.disseminar-compartilhar-cuidar .card p {
  color: #fff; /* para definir a cor do texto como branco */
}

.col-md-5 p {
  margin-top: 0; /* Removendo o espaçamento superior do parágrafo */
  margin-bottom: 30px; /* Aumentando a margem inferior */
}


#botoes-controle {
  visibility: visible !important;
}


#parallax-section {
  background-image: url('imagens/1920x1080/10.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.funcionalidades {
  background-attachment: fixed;
}



/*  ================================================================================================================================= */
      /* Estilos Responsivo Mobile Menu */
/*  ================================================================================================================================= */

@media only screen and (max-width: 768px) {
  /* Ajusta o tamanho do logo para dispositivos móveis */
  .navbar-brand img {
      width: 100px; /* Tamanho do logo em dispositivos móveis */
  }

  /* Ajusta o tamanho do título do banner para dispositivos móveis */
  .banner-topo h1 {
      font-size: 1em; /* Tamanho do título em dispositivos móveis */
  }

  /* Alinha o menu no centro em dispositivos móveis */
  .navbar-nav {
      text-align: center;
  }

  /* Exibe o menu corretamente em dispositivos móveis */
  .navbar-collapse {
      display: none; /* Esconde o menu por padrão */
      position: absolute; /* Define a posição do menu como absoluta */
      background-color: transparent !important; /* Fundo transparente do menu */
      left: 0; /* Posiciona o menu no canto esquerdo */
      width: 100%; /* Define a largura do menu como 100% */
      top: 100%; /* Posiciona o menu abaixo do botão do menu */
  }

  /* Exibe o menu quando o botão de toggler é clicado */
  .navbar-toggler:focus + .navbar-collapse,
  .navbar-collapse.show {
      display: block !important;
  }

  /* Estiliza os links do menu em dispositivos móveis */
  .navbar-nav .nav-item {
      margin-bottom: 10px; /* Adiciona espaçamento entre os itens do menu */
  }
}


/*  ================================================================================================================================= */
      /* Estilos Responsivo Mobile Banner */
/*  ================================================================================================================================= */

@media only screen and (max-width: 768px) {
  /* Ajusta o tamanho do título principal para dispositivos móveis */
  .banner-topo h1 {
      font-size: 1em; /* Tamanho do título principal em dispositivos móveis */
  }

  /* Ajusta o tamanho do subtítulo para dispositivos móveis */
  .banner-topo span {
      font-size: 1em; /* Tamanho do subtítulo em dispositivos móveis */
  }
}


/*  ================================================================================================================================= */
      /* Estilos Responsivo Mobile Saiba Mais */
/*  ================================================================================================================================= */

/* Estilos para dispositivos móveis */
@media only screen and (max-width: 768px) {
  /* Reduz o tamanho da fonte */
  .saiba-mais h2 {
      font-size: 20px;
  }
  
  .saiba-mais p {
      font-size: 16px;
  }
}


/*  ================================================================================================================================= */
      /* Estilos Responsivo Mobile Cards */
/*  ================================================================================================================================= */

@media only screen and (max-width: 768px) {
  /* Altera a exibição para os cards empilharem verticalmente */
  .features {
      flex-direction: column;
      align-items: center; /* Centraliza os cards verticalmente */
  }
  
  /* Ajusta a largura dos cards para ocupar a largura total da tela */
  .card {
      flex-basis: 100%;
      margin: 0 0 20px; /* Adiciona espaçamento entre os cards */
  }
  
  /* Oculta a imagem menor nos dispositivos móveis */
  .card .icone-1 {
      display: none;
  }
}


/*  ================================================================================================================================= */
      /* Estilos Responsivo Mobile Contato */
/*  ================================================================================================================================= */

@media only screen and (max-width: 768px) {
  /* Reduz o tamanho dos botões e adiciona espaçamento */
  .explore .btn {
    font-size: 14px;
    padding: 10px 20px;
    margin-bottom: 10px;
  }

  /* Ajusta o tamanho e o espaçamento dos elementos de texto */
  .explore h1 {
    font-size: 30px;
    text-align: center;
  }

  .explore p {
    font-size: 18px;
    text-align: center;
  }
}


/*  ================================================================================================================================= */
      /* Estilos Responsivo Mobile Inteligencia Artificial */
/*  ================================================================================================================================= */

/* Estilos para dispositivos móveis */
@media only screen and (max-width: 768px) {
  /* Centraliza a imagem */
  .funcionalidades .banner .col-md-6 img {
    display: block;
    margin: 0 auto;
    width: 100%; /* Ajuste conforme necessário */
  }

  /* Ajusta o espaçamento entre os blocos de texto */
  .funcionalidades .banner .col-md-6 {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}