/*--------------------------------------------------------------
# Template Name: Interved Suprimentos
# Author: Luan Henrique Lopes Santana
# Version: 1.0
--------------------------------------------------------------*/

/*--------------------------------------------------------------
ÍNDICE
----------------------------------------------------------------
1.  Global Styles & Variáveis
2.  Componentes Reutilizáveis & Utilitários
3.  Header (Cabeçalho)
    3.1. Topbar
    3.2. Navegação Principal
4.  Seções do Conteúdo (Main)
    4.1. Seção Home (Banner Principal)
    4.2. Seção Qualidades
    4.3. Seção Sobre Nós
    4.4. Seção Catálogo
    4.5. Seção Produtos em Destaque
    4.6. Seção Banners de Produtos
    4.7. Seção Contato (Equipe)
    4.8. Seção Formulário de Contato
    4.9. Seção Clientes
    4.10. Seção Instagram
5.  Rodapé (Footer)
6.  Elementos Flutuantes
7.  Página Catálogo
    7.1. Breadcrumb
    7.2. Produtos do Catálogo
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# 1. Global Styles & Variáveis
--------------------------------------------------------------*/
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  /* Variáveis de Fontes */
  --heading-font: "Montserrat", sans-serif;
  --heading-font-weight: 400;
  --heading-color: #111;
  --heading-line-height: 1.24;
  --bs-body-font-family: "Montserrat", sans-serif;

  /* Variáveis de Cores Globais */
  --bs-primary: #000;
  --bs-secondary: #6c757d;
  --bs-black: #111;
  --bs-light: #f1f1f0;
  --bs-dark: #212529;
  --bs-gray: #9aa1a7;
  --bs-body-color: #8f8f8f;

  /* Variáveis de Cores RGB */
  --bs-primary-rgb: 140, 144, 126;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-black-rgb: 17, 17, 17;
  --bs-light-rgb: 241, 241, 240;
  --bs-dark-rgb: 33, 37, 41;
  --bs-body-color-rgb: 143, 143, 143;

  /* Variáveis de Links */
  --bs-link-color: #111;
  --bs-link-hover-color: #111;

  /* Variáveis Swiper */
  --swiper-theme-color: #8c907e;

  /* Estilos Base do Body */
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.03rem;
  padding-top: 100px; /* Garante que o conteúdo não fique atrás do header fixo */
}

@media (max-width: 991.98px) {
  body {
    padding-top: 70px;
  }
}

/* Tipografia Base */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  color: var(--heading-color);
  line-height: var(--heading-line-height);
}

h1,
h2,
h3 {
  margin: 25px 0;
}

h5,
h6 {
  letter-spacing: 1px;
}

h1,
.h1 {
  font-size: 4.5rem;
}
h2,
.h2 {
  font-size: 3.6rem;
}
h3,
.h3 {
  font-size: 2.8rem;
}
h4,
.h4 {
  font-size: 1.8rem;
}
h5,
.h5 {
  font-size: 1.4rem;
}
h6,
.h6 {
  font-size: 1rem;
}

a {
  text-decoration: none;
}

/*--------------------------------------------------------------
# 2. Componentes Reutilizáveis & Utilitários
--------------------------------------------------------------*/
/* Botão de Orçamento */
.btn-orcamento {
  border: 2px solid #2a3258;
  background-color: transparent;
  color: #2a3258;
  font-weight: 600;
  padding: 8px 18px;
  font-size: 14px;
  border-radius: 4px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: color 0.4s ease, background-color 0.4s ease;
}

.navbar-nav .btn-orcamento {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600; /* Garante a mesma espessura da fonte */
  display: block; /* Trata o botão como um bloco */
  margin-left: auto; /* Adiciona margem automática à esquerda */
  margin-right: auto; /* Adiciona margem automática à direita */
}

.btn-orcamento::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #2a3258;
  z-index: -1;
  transition: width 0.4s ease;
}

.btn-orcamento:hover {
  color: #fff; /* Cor do texto no hover */
}

.btn-orcamento:hover::before {
  width: 100%;
}

/* Classes Utilitárias */
.scale-90 {
  transform: scale(0.9);
  transform-origin: top center;
}

.justify-text {
  text-align: justify;
  font-size: 14px;
  color: #000;
}

/* Estilos para Swiper (Setas de Navegação) */
.swiper-prev,
.swiper-next {
  width: 38px;
  height: 38px;
  line-height: 38px;
  background: #f1f1f1;
  color: #222222;
  padding: 0;
  text-align: center;
  border-radius: 10px;
  --bs-btn-border-color: transparent;
  --bs-btn-active-bg: #ec9b22;
  --bs-btn-active-border-color: transparent;
  --bs-btn-hover-bg: #ffc43f;
  --bs-btn-hover-border-color: transparent;
}

.swiper-prev:hover,
.swiper-next:hover {
  background: #ffc43f;
}

/*--------------------------------------------------------------
# 3. Header (Cabeçalho)
--------------------------------------------------------------*/
.site-header {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* 3.1. Topbar */
.topbar {
  font-size: 14px;
  padding: 6px 30px;
  color: white;
}

.topbar .contact-info {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
}

.topbar .contact-info small {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
}

.topbar .contact-info span {
  position: relative;
  top: -1px; /* Ajuste fino de alinhamento vertical */
}

.topbar .social-icons a {
  color: white;
  font-size: 14px;
  transition: color 0.3s ease;
}

.topbar .social-icons a:hover {
  color: #2a3258;
}

/* 3.2. Navegação Principal */
#header-nav .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.navbar-brand img {
  max-height: 50px;
}

.navbar-nav .nav-link {
  color: #222;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: #2a3258;
}

@media (max-width: 991.98px) {
  /* Controla o container principal do menu */
  .navbar-nav {
    flex-direction: column;
    gap: 10px;
    flex-grow: 0; /* Impede que o menu se estique verticalmente */
    padding-right: 0px;
  }

  /* Garante o alinhamento central dos itens da lista */
  #navbar .nav-item {
    text-align: center;
  }

  /* ADICIONADO: Ajuste fino para alinhar visualmente os links de texto com o botão */
  #navbar .nav-item .nav-link {
    display: inline-block;
    text-align: center !important; /* FORÇA o alinhamento de texto */
    width: 100% !important; /* FORÇA o link a ocupar todo o espaço */
  }

  .navbar-nav .btn-orcamento {
    padding: 6px 10px; /* 6px na vertical, 10px na horizontal (ajuste à vontade) */
  }

  /* AJUSTE DE ALINHAMENTO: Usa flexbox no PAI (<li>) para centralizar o botão */
  #navbar .nav-item:has(.btn-orcamento) {
    display: flex;
    justify-content: center;
  }
}
/* 3.3. Informações de Contacto no Menu Offcanvas (Mobile) */
.offcanvas-contact-info {
  display: flex; /* ADICIONADO */
  flex-direction: column; /* ADICIONADO */
  align-items: center; /* ADICIONADO para alinhar tudo à direita */
  margin-right: 2%;
}

.offcanvas-contact-info .info-item {
  margin-bottom: 15px; /* Espaçamento entre os itens */
}

.offcanvas-contact-info .info-item a {
  color: #333; /* Cor escura para contrastar com o fundo branco */
  font-size: 15px;
  transition: color 0.3s ease;
}

.offcanvas-contact-info .info-item a:hover {
  color: #2a3258; /* Cor de hover, igual aos links do menu */
}

.offcanvas-contact-info .info-item i {
  font-size: 18px;
  color: #2a3258;
}

#bdNavbar .offcanvas-header .fw-bold {
  font-size: 16px; /* Tamanho para "A MELHOR SOLUÇÃO" */
}

#bdNavbar .offcanvas-header .small {
  font-size: 14px; /* Tamanho para "EM SUPRIMENTOS INDUSTRIAIS" */
}

#header-nav .fw-bold,
#bdNavbar .offcanvas-header .fw-bold {
  font-size: 14px;
}

/* Aplica o estilo à segunda linha de texto (small) em ambos os locais */
#header-nav .small,
#bdNavbar .offcanvas-header .small {
  font-size: 12px;
}

/*--------------------------------------------------------------
# 4. Seções do Conteúdo (Main)
--------------------------------------------------------------*/

/* 4.1. Seção Home (Banner Principal) */
@media only screen and (max-width: 767px) {
  #home {
    margin-top: -110px;
  }

  /* Centraliza o conteúdo de texto */
  #home .banner-content {
    text-align: center;
  }

  /* Garante que a imagem não tenha margem no topo */
  #home .image-holder {
    margin-top: 0;
  }

  /* ADICIONADO: Diminui o tamanho do TÍTULO no mobile */
  #home .banner-content h1 {
    font-size: 2.5rem; /* Ajuste este valor como preferir */
  }

  /* ADICIONADO: Diminui o tamanho do PARÁGRAFO no mobile */
  #home .banner-content p {
    font-size: 0.9rem; /* Ajuste este valor como preferir */
  }

  /* Cria espaço no fundo do slider para a paginação */
  #home .swiper {
    padding-bottom: 50px;
  }
}

/* 4.2. Seção Qualidades */
.icon-1 {
  font-size: 30px;
  color: #263055;
}

.icon-box .card-title {
  font-size: 18px;
  padding-left: 15px;
  font-weight: bold;
  color: #000;
}

.icon-box .icon-box-text {
  font-size: 16px;
  color: #888;
  margin: 0;
  padding-left: calc(
    30px + 15px
  ); /* Alinha com o início do título (largura_icone + padding_titulo) */
}

@media (max-width: 767.98px) {
  /* Adiciona as margens laterais no mobile */
  .icon-box-mobile {
    margin-left: 12px;
    margin-right: 12px;
  }

  /* Define o espaço entre o par (ícone+título) e o parágrafo abaixo */
  .icon-box-mobile .icon-title {
    margin-bottom: -10px;
  }

  .icon-box-mobile .icon-1 {
    flex-shrink: 0;
  }

  /* Adiciona um espaço entre o ícone e o título */
  .icon-box-mobile .card-title {
    font-size: 18px;
    font-weight: bold;
    color: #000;
    margin: 0;
    padding-left: 15px; /* Espaço entre o ícone e o texto */
  }

  /* Alinha o parágrafo com o início do título */
  .icon-box-mobile .icon-box-text-mobile {
    font-size: 16px;
    color: #888;
    margin: 0;
    /* (Largura do ícone 30px) + (Padding do título 15px) = 45px */
    padding-left: 45px;
  }
}

/* 4.3. Seção Sobre Nós */
#sobreNos .subtitle {
  color: #555;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 10px;
  display: inline-block; /* Garante que o span se comporte como um bloco para o estilo */
}

#sobreNos .features {
  margin-top: 25px;
}

#sobreNos .features li {
  color: #333;
}

/* Ícone de check na lista de valores */
#sobreNos .features .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background-color: transparent; /* Remove o fundo do span */
  color: #263055; /* Cor do ícone de check */
  font-size: 1.2rem;
  line-height: 1;
}

/* Box "Nossa Missão" */
#sobreNos .mission-statement {
  background-color: #263055; /* Fundo azul escuro */
  color: #fff; /* Cor do texto branca */
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

#sobreNos .mission-header {
  display: flex;
  align-items: center;
  gap: 15px;
}

#sobreNos .mission-header h3 {
  font-size: 1.2rem;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
}

#sobreNos .mission-statement p {
  font-size: 1rem;
  color: #f1f1f1;
  margin: 15px 0 0 0;
  padding: 0;
  line-height: 1.6;
}

#sobreNos .mission-icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

#sobreNos .mission-icon i {
  color: #fff;
  font-size: 1.5rem;
}

#sobreNos .subtitle {
  display: inline-block;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 10px;
  background-color: #f1f1f0;
  color: #555;
  padding: 5px 15px;
  border-radius: 7px;
}

#sobreNos .features {
  margin-top: 25px;
}

#sobreNos .features li {
  color: #333;
}

#sobreNos .features .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background-color: #263055;
}

#sobreNos .features .icon i {
  color: #fff;
}

@media (max-width: 767.98px) {
  .d-none.d-md-block .mission-statement {
    margin-top: 20px;
  }

  #sobreNos .d-block.d-md-none .features {
    flex-direction: column;
    align-items: flex-start !important;
  }

  #sobreNos .d-block.d-md-none .mission-icon {
    margin-left: auto;
    margin-right: auto;
  }

  #sobreNos .d-block.d-md-none .mission-statement p {
    margin-top: 8px; /* Adiciona um pequeno espaço abaixo do título */
    text-align: left;
  }

  /* Ajusta o título da Missão para alinhar à esquerda */
  #sobreNos .d-block.d-md-none .mission-statement h3 {
    color: white;
    text-align: left;
  }
}

/* 4.4. Seção Catálogo */
.category-carousel .category-item {
  background: #ffffff;
  border: 1px solid #fbfbfb;
  box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  text-align: center;
  padding: 60px 20px;
  margin: 20px 0;
  transition: box-shadow 0.3s ease-out, transform 0.3s ease-out;
}

.category-carousel .category-item:hover {
  transform: translate3d(0, -10px, 0);
  box-shadow: 0px 21px 44px rgba(0, 0, 0, 0.08);
}

.category-carousel .category-item .category-icon {
  height: 48px;
  width: auto;
  display: block;
  margin: 0 auto 1rem;
}

.category-carousel .category-item .category-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  text-transform: capitalize;
  color: #222222;
  margin-top: 20px;
}

.category-carousel .category-item .category-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  text-transform: capitalize;
  color: #222222;
  margin-top: 20px;
}

#catalogo .btn-link {
  color: #000; /* Deixa o texto preto */
  font-weight: 600; /* Deixa a fonte um pouco mais forte (opcional) */
  margin-right: 1.5rem; /* Adiciona um espaçamento à direita (o "gap") */
  transition: color 0.3s ease;
}

#catalogo .btn-link:hover {
  color: #555; /* Cor do link ao passar o mouse */
}

/* 4.5. Seção Produtos em Destaque */
.product-section {
  padding: 7rem 0;
}

.product-section .product-item {
  text-align: center;
  text-decoration: none;
  display: block;
  position: relative;
  padding-bottom: 50px;
  cursor: pointer;
}

.product-section .product-item .product-thumbnail {
  margin-bottom: 30px;
  position: relative;
  top: 0;
  transition: 0.3s all ease;
}

.product-section .product-item h3 {
  font-weight: 600;
  font-size: 24px;
  color: #2f2f2f;
  text-decoration: none;
}

.product-section .product-item .icon-cross {
  position: absolute;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #2f2f2f;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: -17.5px;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s all ease;
}

.product-section .product-item .icon-cross i {
  color: #ffffff;
  font-size: 1.1rem;
  -webkit-text-stroke: 0.5px;
}

.product-section .product-item:before {
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  content: "";
  background: #dce5e4;
  height: 0%;
  z-index: -1;
  border-radius: 10px;
  transition: 0.3s all ease;
}

.product-section .product-item:hover .product-thumbnail {
  top: -25px;
}

.product-section .product-item:hover .icon-cross {
  bottom: 0;
  opacity: 1;
  visibility: visible;
}

.product-section .product-item:hover:before {
  height: 70%;
}

/* 4.6. Seção Banners de Produtos */
.block1 {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform: scale(0.95);
}

.block1:hover {
  transform: translateY(-8px) scale(0.98);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.block1 img {
  width: 100%;
  display: block;
}

.block1-txt {
  position: absolute;
  inset: 0;
  background-color: rgba(
    42,
    50,
    88,
    0
  ); /* Usando a cor principal com transparência */
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: 34px 38px;
  transition: background-color 0.4s ease;
}

.block1-name {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  transition: color 0.4s;
}

.block1-link {
  position: relative;
  display: inline-block;
  color: #fff;
  font-size: 14px;
  transform: translateY(10px);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.block1-link::before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.block1:hover .block1-txt {
  background-color: rgba(42, 50, 88, 0.8); /* Overlay mais escuro */
}

.block1:hover .block1-name {
  color: #fff;
}

.block1:hover .block1-link {
  transform: translateY(0);
  opacity: 1;
}

.block1:hover .block1-link::before {
  transform: scaleX(1);
}

@media (max-width: 767px) {
  .block1 {
    transform: scale(1); /* Remove o scale em mobile para ocupar mais espaço */
  }
  .block1-txt {
    padding: 20px;
  }
}

/* 4.7. Seção Contato (Equipe) */
.team .member {
  background-color: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  text-align: left;
  transition: transform 0.3s ease;
}

.team .member:hover {
  transform: translateY(-5px);
}

.team .member .pic img {
  width: 100%;
  height: auto;
}

.team .member .member-info {
  padding: 20px;
}

.team .member h4 {
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 10px;
}

.team .member h4::after {
  content: "";
  display: block;
  width: 50px;
  height: 1px;
  background: rgba(0, 0, 0, 0.2);
  margin-top: 8px;
}

.team .member .social {
  display: flex;
  align-items: center;
}

.team .member .social a {
  color: rgba(0, 0, 0, 0.5);
  margin-left: 8px;
  font-size: 16px;
  transition: color 0.3s;
}

.team .member .social a:first-child {
  margin-left: 0;
}

.team .member .social a:hover {
  color: #2a3258;
}

/* 4.8. Seção Formulário de Contato */
.contact .info-item {
  background-color: #f8f9fa;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08);
  padding: 30px;
  height: 100%;
}

.contact .info-item i {
  font-size: 24px;
  color: #2a3258;
  width: 56px;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 2px dotted #2a3258;
}

.contact .info-item h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 15px 0 5px 0;
}

.contact .info-item p,
.contact .info-item a {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
  color: #555;
}
.contact .info-item a:hover {
  color: #2a3258;
}

.contact .php-email-form {
  background-color: #f8f9fa;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08);
  height: 100%;
  padding: 30px;
}

.contact .php-email-form input,
.contact .php-email-form textarea,
.contact .php-email-form select {
  font-size: 14px;
  padding: 10px 15px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus,
.contact .php-email-form select:focus {
  border-color: #2a3258;
  box-shadow: none;
}

.contact .php-email-form button[type="submit"] {
  font-size: 14px;
  padding: 6px 14px;
  border: 2px solid #2a3258;
  background-color: transparent;
  color: #2a3258;
  font-weight: 600;
  border-radius: 4px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: color 0.4s ease;
}

.contact .php-email-form button[type="submit"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #2a3258;
  z-index: -1;
  transition: width 0.4s ease;
}

.contact .php-email-form button[type="submit"]:hover {
  color: #fff;
}
.contact .php-email-form button[type="submit"]:hover::before {
  width: 100%;
}

@media (max-width: 575px) {
  .contact .php-email-form {
    padding: 20px;
  }
}

/* 4.9. Seção Clientes */
.clients {
  padding: 20px 0;
}

.clients .client-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.clients .client-logo img {
  padding: 20px 40px;
  max-width: 90%;
  transition: 0.3s;
  filter: grayscale(100%);
  opacity: 0.7;
}
.clients .client-logo img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

@media (max-width: 640px) {
  .clients .client-logo img {
    padding: 20px;
  }
}

/* 4.10. Seção Instagram */
.instagram .insta-item {
  position: relative;
  overflow: hidden;
}

.instagram .insta-item a {
  display: block;
  position: relative;
}

.instagram .insta-item a::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.instagram .insta-item .insta-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 24px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.instagram .insta-item:hover a::after,
.instagram .insta-item:hover .insta-icon {
  opacity: 1;
}

/*--------------------------------------------------------------
# 5. Rodapé (Footer)
--------------------------------------------------------------*/
.footer-menu-004.border-animation-left a {
  color: #2a3258;
}

.footer-menu .social-links a i {
  color: #2a3258;
  font-size: 20px;
  transition: color 0.3s ease;
}

.footer-menu .social-links a:hover i {
  color: #4a558c;
}

.border-animation-left .item-anchor {
  position: relative;
  padding-bottom: 5px;
}

.border-animation-left .item-anchor:after {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  left: 0;
  bottom: 0;
  z-index: 9;
  background: var(--bs-dark);
  transition: all 0.5s ease;
}

.border-animation-left .item-anchor:hover:after,
.border-animation-left .item-anchor:focus:after {
  width: 100%;
}

.footer-menu-002 .item-anchor {
  color: #000;
}

.footer-menu-002 .menu-item {
  margin-bottom: 5px;
}

.map-container {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-in-out;
}

.map-container:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/*--------------------------------------------------------------
# 6. Elementos Flutuantes
--------------------------------------------------------------*/
.whatsapp-flutuante {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 30px;
  right: 30px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

.whatsapp-flutuante:hover {
  transform: scale(1.1);
  color: #fff;
}

.whatsapp-flutuante i {
  font-size: 30px;
}

/*--------------------------------------------------------------
# 7. Página Catálogo
--------------------------------------------------------------*/
/* 7.1. Breadcrumb */
.breadcrumb {
  font-size: 0.85rem; /* Deixa o texto pequeno */
  margin-left: 1%; /* ADICIONADO: Margem de 10% à esquerda */
  margin-bottom: 0; /* Garante que não tenha margem inferior */
}

.breadcrumb-item a {
  color: #2a3258; /* Cor azul padrão do site para o link */
  text-decoration: none; /* Remove o sublinhado padrão */
}

.breadcrumb-item a:hover {
  text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
}

.breadcrumb-item.active {
  color: #6c757d; /* Cor cinza para a página ativa */
}

/* 7.2. Produtos do Catálogo */

/* NOVO: Adiciona margens laterais de 5% à seção do catálogo */
#produtos > .container-fluid {
  padding-left: 10%;
  padding-right: 10%;
}

.filter-sidebar {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.filter-title {
  font-weight: 700;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}

.filter-group {
  margin-bottom: 25px;
}

.filter-group h6 {
  font-weight: 600;
  margin-bottom: 10px;
}

.filter-group .form-check {
  margin-bottom: 8px;
}

.filter-group .form-check-label {
  font-size: 0.9rem;
}

/* Estilo dos Cards de Produto */
.product-card {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  transition: box-shadow 0.3s ease;
  background-color: #fff;
  height: 100%; /* Garante que todos os cards tenham a mesma altura */
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.product-card .product-image-wrapper {
  background-color: #fff;
  padding: 15px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card img {
  max-height: 100%;
  max-width: 100%;
}

.product-card .product-info {
  padding: 15px;
  border-top: 1px solid #dee2e6;
  flex-grow: 1; /* Faz esta área crescer para ocupar o espaço */
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card .product-name {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}

#product-list.list-view .col-md-3 {
  width: 100%; /* Ocupa a largura total */
}

#product-list.list-view .product-card {
  flex-direction: row; /* Alinha imagem e texto lado a lado */
  text-align: left;
}

#product-list.list-view .product-image-wrapper {
  height: auto;
  width: 150px; /* Largura fixa para a imagem */
  flex-shrink: 0; /* Impede que a imagem encolha */
}

#product-list.list-view .product-info {
  border-top: none;
  border-left: 1px solid #dee2e6;
  justify-content: flex-start; /* Alinha o texto à esquerda */
}