@charset "utf-8";
 /* Header Top */
.custom-header-top {
  background-color: #f8f9fa; /* Fundo mais claro e neutro */
  color: #343a40; /* Texto escuro para melhor contraste */
  border-bottom: 1px solid #dee2e6; /* Borda suave */
}

.custom-header-top a {
  color: #0d6efd; /* Azul moderno para links */
  text-decoration: none;
  transition: color 0.3s ease; /* Efeito suave ao passar o mouse */
}

.custom-header-top a:hover {
  color: #0b5ed7; /* Azul mais escuro no hover */
}

/* Barra de Busca */
.custom-logo-search {
  background-color: #ffffff; /* Fundo branco para limpeza visual */
  padding: 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Sombra leve para destacar a seção */
}

.custom-logo-search img {
  max-height: 80px; /* Reduz o tamanho da logo para um visual mais clean */
}

.custom-logo-search form {
  position: relative;
}

.custom-logo-search input {
  background-color: #f8f9fa; /* Fundo claro para o campo de busca */
  border: 1px solid #ced4da; /* Borda suave */
  border-radius: 25px; /* Bordas arredondadas para modernidade */
  padding: 10px 20px; /* Espaçamento interno */
  width: 100%;
  font-size: 1rem;
  transition: all 0.3s ease; /* Transição suave */
}

.custom-logo-search input:focus {
  background-color: #ffffff; /* Fundo branco ao focar */
  border-color: #0d6efd; /* Borda azul ao focar */
  box-shadow: 0 0 8px rgba(13, 110, 253, 0.25); /* Sombra sutil ao focar */
}

.custom-logo-search button {
  background-color: #0d6efd; /* Botão azul moderno */
  border: none;
  border-radius: 50%; /* Formato circular para o botão */
  width: 40px;
  height: 40px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.3s ease; /* Efeito suave ao passar o mouse */
}

.custom-logo-search button:hover {
  background-color: #0b5ed7; /* Azul mais escuro no hover */
}

/* Menu */
.custom-menu {
  background-color: #0d6efd; /* Azul moderno */
  border-bottom: 1px solid #0b5ed7; /* Borda mais escura */
}

.custom-menu .nav-link {
  color: #ffffff !important; /* Texto branco */
  font-weight: 500; /* Peso moderado para legibilidade */
  transition: color 0.3s ease; /* Efeito suave ao passar o mouse */
  text-transform:uppercase;
}

.custom-menu .nav-link:hover {
  color: #ffc107 !important; /* Amarelo vibrante no hover */
}

.custom-menu .dropdown-menu {
  border: none; /* Remove borda padrão */
  border-radius: 8px; /* Bordas arredondadas */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.custom-menu .dropdown-item {
  color: #343a40; /* Texto escuro */
  transition: background-color 0.3s ease, color 0.3s ease; /* Efeito suave */
    text-transform:uppercase;
}

.custom-menu .dropdown-item:hover {
  background-color: #0d6efd; /* Fundo azul no hover */
  color: #ffffff; /* Texto branco no hover */
}

    .custom-footer {
      background-color: #333;
      color: #fff;
    }
    .custom-footer a {
		text-decoration:none;
      color: #fff;
    }
    .custom-footer a:hover {
      color: #ffc107;
    }
	/* Estilização do Botão */
.btn-light {
  font-weight: bold; /* Texto em negrito para maior destaque */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animação suave */
}

.btn-light:hover {
  transform: scale(1.05); /* Aumenta o botão levemente ao passar o mouse */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* Sombra para efeito hover */
}

/* Estilização da Seção */
.bg-primary {
  background: linear-gradient(135deg, #1f86dd, #317fcb); /* Gradiente azul */
}
/* Estilização dos Cards */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-10px); /* Eleva o card levemente ao passar o mouse */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Sombra mais pronunciada */
}

/* Estilização do Botão */
.btn-primary {
  font-weight: bold;
  background-color:#1f86dd; 
  border:0px;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #317fcb; /* Escurece o botão ao passar o mouse */
}
 /* Estilização do Botão Flutuante */
  .whatsapp-float {
    position: fixed; /* Fixa o botão na tela */
    bottom: 20px; /* Distância da parte inferior */
    right: 20px; /* Distância da lateral direita */
    width: 60px; /* Largura do botão */
    height: 60px; /* Altura do botão */
    background-color: #00db00; /* Cor verde do WhatsApp */
    color: #fff; /* Cor do ícone */
    border-radius: 50%; /* Formato circular */
    text-align: center;
    font-size: 30px; /* Tamanho do ícone */
    line-height: 60px; /* Centraliza o ícone verticalmente */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Sombra para efeito 3D */
    z-index: 1000; /* Garante que o botão fique acima de outros elementos */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animação suave */
    text-decoration: none; /* Remove sublinhado do link */
  }

  /* Efeito ao passar o mouse */
  .whatsapp-float:hover {
    transform: scale(1.1); /* Aumenta o botão levemente */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Sombra mais pronunciada */
  }
  footer{color:#fff;}
  footer a{color:#fff;}
    /* Estilização dos Ícones de Redes Sociais */
  .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #333;
    border-radius: 50%;
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

  .social-icon:hover {
    background-color: #007bff; /* Cor azul ao passar o mouse */
    transform: scale(1.1); /* Aumenta levemente o ícone */
  }

  /* Estilização dos Links */
  .list-unstyled a {
    transition: color 0.3s ease;
  }

  .list-unstyled a:hover {
    color: #007bff; /* Cor azul ao passar o mouse */
  }/* CSS Document */
/* Estilização do Breadcrumb */
.breadcrumb {
  font-size: 0.9rem; /* Tamanho menor para o texto */
  background-color: transparent; /* Remove o fundo padrão */
}

.breadcrumb a {
  transition: color 0.3s ease; /* Efeito suave ao passar o mouse */
}

.breadcrumb a:hover {
  color: #007bff; /* Altera a cor do link ao passar o mouse */
}
.text-primary{color:#317fcb;}
.titulo{color:#333;}
.destaque{text-transform:uppercase; color:#1f86dd;}
/* Estilização da Seção de Download */
.areadownload {
  background-color: #0d6efd; /* Azul moderno para destaque */
  color: #ffffff; /* Texto branco para contraste */
  padding: 60px 20px; /* Espaçamento interno generoso */
}

.areadownload h2 {
  font-size: 2.5rem; /* Tamanho responsivo para o título */
  font-weight: 700; /* Peso do texto para impacto */
  margin-bottom: 1.5rem; /* Espaçamento abaixo do título */
  line-height: 1.2; /* Linha compacta para melhor leitura */
  text-transform: uppercase; /* Título em maiúsculas para destaque */
  letter-spacing: 1px; /* Espaçamento entre letras para elegância */
}

.areadownload p {
  font-size: 1.25rem; /* Tamanho confortável para o texto */
  font-weight: 400; /* Peso leve para legibilidade */
  margin-bottom: 2rem; /* Espaçamento abaixo do parágrafo */
  max-width: 800px; /* Limita a largura do texto para centralização */
  margin-left: auto; /* Centraliza horizontalmente */
  margin-right: auto; /* Centraliza horizontalmente */
  line-height: 1.6; /* Linha espaçada para melhor leitura */
}

.areadownload .btn {
  background-color: #ffffff; /* Fundo branco para o botão */
  color: #0d6efd; /* Texto azul para contraste */
  font-size: 1.1rem; /* Tamanho do texto do botão */
  font-weight: 600; /* Peso moderado para destaque */
  padding: 12px 30px; /* Espaçamento interno generoso */
  border-radius: 50px; /* Bordas arredondadas para modernidade */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil para elevação */
  transition: all 0.3s ease; /* Transição suave para hover */
}

.areadownload .btn:hover {
  background-color: #f8f9fa; /* Fundo mais claro no hover */
  color: #0b5ed7; /* Azul mais escuro no hover */
  transform: translateY(-2px); /* Efeito de elevação ao passar o mouse */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Sombra mais pronunciada no hover */
}

.areadownload .btn i {
  margin-right: 8px; /* Espaçamento entre o ícone e o texto */
  font-size: 1.2rem; /* Tamanho maior para o ícone */
}

/* Estilização do Card Body */
.card-body {
  padding: 20px; /* Espaçamento interno generoso */
  background-color: #ffffff; /* Fundo branco para limpeza visual */
  border-radius: 12px; /* Bordas arredondadas para modernidade */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil para elevação */
}

.card-body .tituloProduto {
  font-size: 1.75rem; /* Tamanho responsivo para o título */
  font-weight: 700; /* Peso forte para destaque */
  color: #343a40; /* Texto escuro para contraste */
  margin-bottom: 0.5rem; /* Espaçamento abaixo do título */
  line-height: 1.2; /* Linha compacta para melhor leitura */
}

.card-body .categoria {
  font-size: 1rem; /* Tamanho moderado para a categoria */
  color: #6c757d; /* Cinza suave para informações secundárias */
  margin-bottom: 0.5rem; /* Espaçamento abaixo da categoria */
}

.card-body .codigo {
  font-size: 0.9rem; /* Tamanho menor para o código */
  color: #6c757d; /* Cinza suave para informações secundárias */
  margin-bottom: 1rem; /* Espaçamento abaixo do código */
}

.card-body p {
  font-size: 1rem; /* Tamanho confortável para o texto */
  color: #343a40; /* Texto escuro para legibilidade */
  line-height: 1.6; /* Linha espaçada para melhor leitura */
  margin-bottom: 1.5rem; /* Espaçamento abaixo do parágrafo */
}

/* Botão de WhatsApp */
.card-body .btn {
  background-color: #1f86dd; /* Verde WhatsApp oficial */
  color: #ffffff; /* Texto branco para contraste */
  font-size: 1rem; /* Tamanho moderado para o texto */
  font-weight: 600; /* Peso moderado para destaque */
  padding: 12px 20px; /* Espaçamento interno generoso */
  border-radius: 50px; /* Bordas arredondadas para modernidade */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil para elevação */
  transition: all 0.3s ease; /* Transição suave para hover */
  text-align: center; /* Centraliza o texto */
  width: 100%; /* Ocupa toda a largura disponível */
}

.card-body .btn:hover {
  background-color: #128c7e; /* Verde mais escuro no hover */
  transform: translateY(-2px); /* Efeito de elevação ao passar o mouse */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Sombra mais pronunciada no hover */
}

.card-body .btn i {
  margin-right: 8px; /* Espaçamento entre o ícone e o texto */
  font-size: 1.2rem; /* Tamanho maior para o ícone */
}
*{font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;}