/*
 * Arquivo: style.css
 * Autor: Everaldo Santos de Oliveira
 * Versão: 1.0.0
 * Data de Criação: Julho de 2025
 * Descrição: Estilos globais e específicos para a seção "Equipe" do site da ONG.
 *
 * Direitos Autorais:
 * © 2025 [Centro Comunitário Unidos Pelo Social]. Todos os direitos reservados.
 * Este código não pode ser reproduzido, distribuído ou transmitido
 * de qualquer forma ou por qualquer meio, sem a permissão prévia por escrito do autor.
 */


/* =============================
   CORES
   ============================= */

/* Paleta baseada na logo */
:root {
  --azul-ccups: #2196F3;
  --amarelo-ccups: #FFEB3B;
  --laranja-ccups: #FF9800;
  --marrom-ccups: #795548;
  --vermelho-ccups: #F44336;
  --verde-limao-ccups: #CDDC39;
  --verde-ccups: #4CAF50;
  --verde-escuro-ccups: #255655;
  --preto-ccups: #000000;
  --cinza-ccups: #f1f3ef;
  --gold-ccups: #d4ac44;

  /* Cores auxiliares */
  --cor-fundo: #f9f9f9;
  --cor-texto: #222;
  --cor-branca: #ffffff;
  --cor-cinza-claro: #eeeeee;


  /* =============================
   TIPOGRAFIA
   ============================= */
  /* Tamanhos */
  --fs-base: 16px;
  --fs-pequeno: 14px;
  --fs-grande: 18px;
  --fs-h1: 2.5rem;
  --fs-h2: 2rem;
  --fs-h3: 1.75rem;
  --fs-h4: 1.5rem;
  --fs-h5: 1.25rem;
  --fs-h6: 1rem;

  /* Pesos */
  --fw-normal: 400;
  --fw-link: 500;
  --fw-semi: 600;
  --fw-bold: 700;
}


/* Classes utilitárias opcionais */
.bg-azul {
  background-color: var(--azul-ccups);
}

.bg-verde {
  background-color: var(--verde-ccups);
}

.bg-laranja {
  background-color: var(--laranja-ccups);
}

.bg-vermelho {
  background-color: var(--vermelho-ccups);
}

.bg-marrom {
  background-color: var(--marrom-ccups);
}

.bg-preto {
  background-color: var(--preto-ccups);
}

.text-azul {
  color: var(--azul-ccups);
}

.text-verde {
  color: var(--verde-ccups);
}

.text-laranja {
  color: var(--laranja-ccups);
}

.text-vermelho {
  color: var(--vermelho-ccups);
}

.text-marrom {
  color: var(--marrom-ccups);
}

.text-preto {
  color: var(--preto-ccups);
}



/* =============================
   RESET BÁSICO
   ============================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* Garante que padding e border sejam incluídos na largura/altura do elemento */
}

html {
  scroll-behavior: smooth;
  /* Para rolagem suave em links âncora */
}

body {
  -webkit-font-smoothing: antialiased;
  /* Suaviza a fonte no Chrome/Safari */
  -moz-osx-font-smoothing: grayscale;
  /* Suaviza a fonte no Firefox */
  font-family: 'Poppins', sans-serif;
  /* Exemplo de fonte, descomente se usar */
  font-size: 16px;
  color: var(--cor-texto);
  background-color: var(--cor-fundo);
}

html {
  overflow-y: scroll;
}

html,
body {
  width: 100%;
  overflow-x: hidden;

  /* previne vazamento */
}

body.modal-open .modal-backdrop.show {
  opacity: 0.15;
  /* valor suave – ajuste se quiser mais ou menos escuro */
  background-color: rgba(0, 0, 0, 0.15);
}

/* Reduz a opacidade do fundo escuro do MENU (offcanvas) */
.offcanvas-backdrop.show {
  opacity: 0.1;
  /* quase transparente */
  background-color: rgba(0, 0, 0, 0.05);
  /* toque bem leve */
}

/* --- Para Firefox (mais limitado) --- */
body {
  scrollbar-color: var(--verde-ccups) var(--cor-fundo);
  /* thumb color track color */
  scrollbar-width: thin;
  /* 'auto', 'thin', or 'none' */
}
/* Remove o contorno padrão do foco do navegador/Bootstrap */
/* Remove outline e box-shadow no foco para todos inputs, textareas e selects dentro de forms */
form input:focus,
form textarea:focus,
form select:focus,
form button:focus {
  outline: none !important;
  box-shadow: none !important;
}


/* O main precisa crescer para empurrar o footer */
main {
  flex-grow: 1;
}

/* =============================
   BOTÕES
   ============================= */


/*Configuração do Botão Contato*/
.btn-contact {
  background-color: var(--verde-escuro-ccups);
  color: var(--cor-branca);
  padding: 8px 20px;
  border-radius: 10px;
  text-decoration: none;
  border: none;
  display: inline-block;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* sombra suave */
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.btn-contact:hover {
  background-color: var(--verde-ccups);
  transform: scale(1.06);
  /* leve crescimento */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.btn-more {
  background-color: var(--cor-branca);
  color: var(--verde-escuro-ccups);
  padding: 12px 20px;
  border-radius: 10px;
  text-decoration: none;
  border: none;
  display: inline-block;
  font-weight: 600;
  font-size: 1.2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* sombra suave */
  transition: all 0.3s ease-in-out;
  cursor: pointer;

}

.btn-more:hover {
  background-color: var(--verde-ccups);
  color: var(--cor-branca);
  transform: scale(1.06);
  /* leve crescimento */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.btn-danger {
  padding: 10px 20px;
  border-radius: 10px;
  text-decoration: none;
  border: none;
  display: inline-block;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* sombra suave */
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.btn-danger:hover {
  color: var(--cor-branca);
  transform: scale(1.06);
  /* leve crescimento */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.modal-backdrop.show {
  opacity: 0.1;
}

/*Configuração do Botão de fechar menu responsivo*/
.nav-toggler {
  border: none;
  font-size: 1.25rem;
}

.nav-toggler:focus,
.btn-close:focus {
  box-shadow: none;
  outline: none;
}

/* =============================
   LAYOUT
   ============================= */

.container {
  /* padding-left: 15px; */
  /* padding-right: 15px; */
}

header {
  /* background-color: var(--verde-ccups); */
  /* color: var(--cor-branca); */
  /* padding: 2rem 0; */
  /* text-align: center; */
}

/*Classes de efeitos - uso geral*/
.hover-zoom {
  transition: transform 0.3s ease;
}

.hover-zoom:hover {
  transform: scale(1.03);
}


/* Efeito de crescimento suave */
.hover-grow {
  transition: all 0.3s ease;
  transform-origin: center;
}

.hover-grow:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
  z-index: 10;
}

/* Melhoria para os cards de números */
.card-body .col-4 .hover-grow:hover {
  background-color: #f8f9fa;
  border-radius: 8px;
}


.navbar-brand {
  padding: 0.5rem 0;
  margin-right: 0;
  display: flex;
  /* ATIVADO O FLEXBOX para alinhar imagem e texto lado a lado */
  align-items: center;
  /* Centraliza verticalmente a imagem e o texto */
  color: var(--cor-branca);
  /* Cor do texto "CCUPS" */
  font-size: 1.rem;
  /* Ajuste o tamanho da fonte do CCUPS aqui se for diferente de fs-4 */
}


.logo-header {
  max-height: 50px;
  height: auto;
}

@media (max-width: 767.98px) {
  .navbar-brand {
    justify-content: center !important;
  }

  .logo-header {
    max-height: 40px;
  }
}

/*Configuração do Menu*/
.nav-link {
  color: var(--verde-escuro-ccups);
  font-weight: var(--fw-link);
  position: relative;
}

.nav-link:hover,
.nav-link.active {
  color: var(--verde-ccups);
}

.nav-link::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: var(--verde-escuro-ccups);
  visibility: hidden;
  transition: 0.3s ease-in-out;
}

.nav-link:hover::before,
.nav-link.active::before {
  width: 100%;
  visibility: visible;
}


/* ================================
   Section HOME */

#home {
  position: relative;
  min-height: 100vh;
  padding-top: calc(5rem + 70px);
  padding-bottom: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--cor-branca);
  overflow: hidden;
  background-color: #002200; /* verde escuro */
}

/* Fundo fixo e centralizado (sua foto, sem mexer aqui) */
#home::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(400px, 40vw, 1000px);
  height: clamp(400px, 40vw, 1000px);
  background: url('../img/fundo.png') no-repeat center;
  background-size: contain;
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
  filter: none;
}

/* Efeito suave apenas nas laterais, sem tocar o centro */
#home::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background:
    radial-gradient(circle at 10% 50%, rgba(255 255 255 / 0.12), transparent 60%),
    radial-gradient(circle at 90% 50%, rgba(255 255 255 / 0.12), transparent 60%);
  
  background-repeat: no-repeat;
  background-size: 20% 100%;
  background-position: left center, right center;

  animation: lateralGlow 30s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  opacity: 0.3;
}

@keyframes lateralGlow {
  0% {
    background-position: 5% 50%, 95% 50%;
  }
  50% {
    background-position: 10% 45%, 90% 55%;
  }
  100% {
    background-position: 5% 50%, 95% 50%;
  }
}

/* Conteúdo do home acima do efeito */
#home .container {
  position: relative;
  z-index: 2;
}


/* Títulos e subtítulos */
.title-ccups {
  font-size: clamp(2rem, 4vw + 1rem, 4rem);
  font-weight: var(--fw-bold);
  color: var(--cor-branca);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  line-height: 1.2;
}

.sub-title {
  color: var(--cor-branca);
  font-size: clamp(1rem, 2vw + 0.5rem, 1.4rem);
  max-width: 800px;
  margin: 1.5rem auto;
}

/* Responsividade extra */
@media (max-width: 768px) {
  #home {
    padding-top: 6rem;
    /* espaço pro menu fixo */
    background: linear-gradient(135deg, #198754 60%, var(--verde-escuro-ccups) 40%);
    /* ajusta ângulo */
  }
}


.ccups-c1 {
  color: var(--amarelo-ccups);
}

.ccups-c2 {
  color: var(--cor-branca);
}

.ccups-c3 {
  color: var(--vermelho-ccups);
}

.ccups-c4 {
  color: var(--verde-ccups);
}

.ccups-c5 {
  color: var(--verde-limao-ccups);
  /* Roxo Bootstrap */
}

.ccups-c6 {
  color: var(--azul-ccups);
}

.sub-title {
  color: var(--cor-branca);
  /* verde escuro para contraste */
  font-size: clamp(1.1rem, 2vw + 0.5rem, 1.4rem);
  font-weight: 500;
  line-height: 1.6;
  max-width: 800px;
  margin: 1.5rem auto 0;
  padding-top: 20px;
  padding-bottom: 10px;
}

.text-justify {
  text-align: justify !important;
}


/* ================================
   Section ABOUT - 
   ================================ */
.counter {
  transition: transform 0.3s ease;
}

.hover-grow:hover .counter {
  transform: scale(1.05);
}

/* ================================
   Section COURSES - 
   ================================ */
/* Seção com fundo diagonal */
/* Fundo diagonal da seção */
#courses {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  padding: 5rem 0;
  position: relative;
}

/* Removendo qualquer pseudo que possa travar */
#courses::before {
  content: none !important;
}

/* Estilo dos cards */
#courses .card {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

#courses .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

#courses .card-img-top {
  object-fit: cover;
  width: 100%;
  height: 250px;
  border-bottom: 4px solid #4caf50;
}

#courses .card-body {
  padding: 1.5rem;
  background: #fff;
}

#courses .card-title {
  font-size: 1.4rem;
  margin-bottom: 0.6rem;
  color: #2e7d32;
}

#courses .card-text {
  font-size: 0.95rem;
  color: #555;
}

/* Garantir modais acima de tudo */
.modal {
  z-index: 2000 !important;
}

.modal-backdrop {
  z-index: 1990 !important;
}


.sub-text {
  font-size: var(--fs-grande);
}


/* ================================
   Table and List 
   ================================ */

/* Desktop: mantém padrão alinhado à esquerda */
.table-mobile {
  width: 100%;
  border-collapse: collapse;
}

.table-mobile thead th {
  text-align: left;
  padding: 0.75rem 1rem;
  background-color: #2e7d32;
  /* Verde forte para cabeçalho */
  color: white;
}

/* Linhas zebradas - Verde fraco (odd) e médio (even) */
.table-mobile tbody tr:nth-child(odd) {
  background-color: #e8f5e9;
  /* Verde bem claro */
}

.table-mobile tbody tr:nth-child(even) {
  background-color: #c8e6c9;
  /* Verde claro */
}

.table-mobile td {
  text-align: left;
  padding: 0.75rem 1rem;
  vertical-align: middle;
}

.table-mobile td:first-child {
  font-weight: 700;
}

/* Mobile: abaixo de 768px */
@media (max-width: 767.98px) {

  /* Esconde cabeçalho */
  .table-mobile thead {
    display: none;
  }

  /* Transforma tabela em bloco */
  .table-mobile,
  .table-mobile tbody,
  .table-mobile tr,
  .table-mobile td {
    display: block;
    width: 100%;
  }

  /* Cada linha vira um card com efeito zebrado */
  .table-mobile tr {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }

  /* Mantém o zebrado no mobile */
  .table-mobile tr:nth-child(odd) {
    background-color: #e8f5e9;
  }

  .table-mobile tr:nth-child(even) {
    background-color: #c8e6c9;
  }

  .table-mobile td {
    padding-left: 8rem;
    position: relative;
    text-align: left;
    border: none;
    background: transparent !important;
  }

  .table-mobile td::before {
    content: attr(data-label);
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
    color: #2e7d32;
    /* Verde forte para labels */
    white-space: nowrap;
    min-width: 6rem;
    text-align: left;
    pointer-events: none;
    z-index: 1;
  }

  /* Nome do curso destacado no mobile */
  .table-mobile td:first-child {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    padding-left: 1rem;
  }

  /* Remove label do nome do curso (primeira coluna) */
  .table-mobile td:first-child::before {
    display: none;
  }
}

/* =========================================
  SECTION SERVICES
  =========================================*/
#services .card-img-top {
  width: 100%;
  height: 200px;
  object-fit: cover;
}



/* ================================
   Section TEAM - 
   ================================ */
#team {
  background: linear-gradient(135deg, #198754 50%, var(--verde-escuro-ccups) 50%);
  position: relative;
  overflow: hidden;
}

.team-carousel-wrapper {
  position: relative;
}

.team-carousel {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.4s ease-in-out;
  will-change: transform;
}

.team-card {
  min-width: calc(100% / 4 - 1rem);
  /* 4 por vez */
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 15px;
}

.member-photo {
  width: 100%;
  max-width: 240px;
  /* limite ideal para telas pequenas */
  height: 220px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 auto;
  display: block;
}


.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #198754;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 10;
}

.prev-btn {
  left: -20px;
}

.next-btn {
  right: -20px;
}

/* Responsivo */
@media (max-width: 991px) {
  .team-card {
    min-width: calc(100% / 2 - 1rem);
    /* 2 por vez */
  }
}

@media (max-width: 576px) {
  .team-card {
    min-width: 100%;
    /* 1 por vez */
  }
}


/* =========================================
  SECTION DONATE-NOW
   ========================================= */
#donate-now {
  /* bg definido no HTML como bg-light; pode reforçar aqui */
  background: #f8f9fa;
}

#doe-agora h2 {
  color: #198754;
}

#doe-agora .donation-list .list-group-item {
  background: transparent;
  border: none;
  padding-left: 0;
  padding-right: 0;
  font-size: 1rem;
}

#doe-agora .donation-list .list-group-item i {
  font-size: 1.25rem;
}

#doe-agora .donation-impact {
  list-style: none;
  padding-left: 0;
}

#doe-agora .donation-impact li {
  margin-bottom: 0.5rem;
}

#doe-agora .btn.btn-success {
  border-radius: 30px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* -------- Modal Donate -------- */
.modal-donate .modal-content {
  border-radius: 12px;
  overflow: hidden;
}

.modal-donate .pix-qr-wrapper {
  max-width: 220px;
  margin: 0 auto;
}

.modal-donate .pix-qr-img {
  width: 100%;
  height: auto;
  display: block;
}

.modal-donate .pix-key-wrapper .form-control {
  font-size: 0.9rem;
}

.modal-donate .bank-info {
  max-width: 320px;
}

/* Social icons (caso queira usar no modal) */
.modal-donate .social-icons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.modal-donate .social-icons .social-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e9ecef;
  color: #198754;
  border-radius: 50%;
  font-size: 1.2rem;
  transition: 0.25s;
  text-decoration: none;
}

.modal-donate .social-icons .social-icon:hover {
  background: #198754;
  color: #fff;
}

/* =========================================
  SECTION CONTACT
  =========================================
 */
#contact {
  position: relative;
  background: linear-gradient(135deg, #ffffff 60%, #dff6e0 100%);
  padding: 5rem 0;
}

#imageModal img {
  max-width: 90%;
  max-height: 90vh;
  margin: auto;
  display: block;
}

.card-img-top {
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.card-img-top:hover {
  transform: scale(1.05);
  opacity: 0.95;
  cursor: zoom-in;
}


#contact .card {
  border-radius: 12px;
}

.contact-img {
  height: 260px;
  /* mantém altura consistente */
  object-fit: cover;
  /* preenche sem distorcer */
  border-radius: 8px;
  /* bordas arredondadas */
  margin: 8px;
  /* pequeno espaço para não colar nas bordas */
}

/*ALERTA DO EMAIL*/
/* Estilos para os alertas */
.alert {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px 25px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1000;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.alert-success {
  background: #4CAF50;
  color: white;
}

.alert-error {
  background: #f44336;
  color: white;
}

.alert-icon {
  font-weight: bold;
  font-size: 18px;
}

.fade-out {
  opacity: 0;
}

/* ============================================= */
/* ESTADO HOVER (OPCIONAL) */
/* ============================================= */
@media (hover: hover) {
  .form-control:hover {
    border-color: var(--verde-ccups);
  }
}

/* Botão de envio */
.btn-success {
  transition: all 0.3s ease;
}

/* Feedback visual */
#ccupsFormFeedback {
  transition: all 0.3s ease;
}

.social-icon {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.5rem;
  color: #fff;
  transition: transform 0.3s;
}

.social-icon.facebook {
  background: #3b5998;
}

.social-icon.instagram {
  background: linear-gradient(45deg, #fd1d1d, #833ab4, #fcb045);
}

.social-icon.whatsapp {
  background: #25d366;
}

.social-icon:hover {
  transform: scale(1.1);
}


/* -------- Responsividade -------- */
@media (max-width: 768px) {
  #doe-agora .donation-list .list-group-item {
    font-size: 0.95rem;
  }

  #doe-agora .donation-list .list-group-item i {
    font-size: 1.1rem;
  }

  #doe-agora .donation-impact li {
    font-size: 0.95rem;
  }

  .modal-donate .bank-info {
    max-width: 100%;
  }
}

@media (max-width: 576px) {
  #doe-agora h2 {
    font-size: 2rem;
  }

  #doe-agora .lead {
    font-size: 1rem;
  }
}


/* ================================
   Footer Estilizado - CCUPS
   ================================ */

.logo-footer {
  max-width: 100px;
  /* Ajuste para o tamanho desejado */
  height: auto;
  /* Mantém a proporção */
}


.bg-verde {
  background: linear-gradient(to right, #006400, #2e8b57);
}
footer a {
  color: var(--cor-branca);
  position: relative;
  display: inline-block;
  padding-left: 0;
  text-decoration: none;
  transition: padding-left 0.5s ease; /* transição mais suave */
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer;
}

/* Setinha antes do texto */
footer a::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.5s ease, left 0.5s ease; /* transição mais suave */
  color: var(--cor-branca);
  font-weight: 700;
  font-size: 1em;
  pointer-events: none;
}

/* No hover: aumenta padding para abrir espaço e desloca a seta */
footer a:hover {
  padding-left: 28px; /* mais espaço pro texto e seta */
}

/* Setinha aparece e fica mais afastada da borda */
footer a:hover::before {
  opacity: 1;
  left: 10px; /* espaçamento maior da borda */
}



footer .border-top {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

/* Aviso de Cookies - Mobile First */
.cookie-notice {
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
}

.cookie-notice.show {
  transform: translateY(0);
}

@media (max-width: 767.98px) {
  .cookie-notice {
    padding: 1rem !important;
  }

  .cookie-notice small {
    font-size: 0.75rem;
    line-height: 1.3;
  }

  #aceitarCookies {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
  }
}

/* Modal de Privacidade para mobile */
@media (max-width: 575.98px) {
  #privacidadeModal .modal-dialog {
    margin: 0;
    max-width: 100%;
    height: 100%;
  }

  #privacidadeModal .modal-content {
    height: 100%;
    border-radius: 0;
  }
}
#scrollToTopBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;

  width: 48px;
  height: 48px;
  background: #fff; /* fundo branco */
  color: #006400; /* seta verde escura */
  border: none;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 179, 0, 0.3);

  font-size: 24px;
  line-height: 48px;
  text-align: center;
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transition: 
    opacity 0.4s ease, 
    transform 0.3s ease, 
    background-color 0.3s ease, 
    color 0.3s ease;

  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

#scrollToTopBtn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#scrollToTopBtn:hover {
  background: linear-gradient(135deg, #006400, #00b300); /* fundo verde degradê */
  color: #fff; /* seta branca */
  box-shadow: 0 6px 16px rgba(0, 153, 0, 0.7);
  transform: scale(1.1);
}

@media (max-width: 576px) {
  #scrollToTopBtn {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    font-size: 20px;
    line-height: 40px;
  }
}


/* =============================
   RESPONSIVO
   ============================= */

/* Estilo base (funciona em todas as telas) */
.nav-link {
  position: relative;
}

.nav-link::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: var(--verde-escuro-ccups);
  visibility: hidden;
  transition: width 0.3s ease-in-out;
}

/* Hover e ativo (inicialmente com traço pequeno) */
.nav-link:hover::before,
.nav-link.active::before {
  width: 40%;
  /* largura padrão em telas menores */
  visibility: visible;
}

/* =============================
   RESPONSIVIDADE
   ============================= */

/* Estilo base (funciona em todas as telas) */

.nav-link {
  position: relative;
}

.nav-link::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: var(--verde-escuro-ccups);
  visibility: hidden;
  transition: width 0.3s ease-in-out;
}

/* Hover e ativo (inicialmente com traço pequeno) */
.nav-link:hover::before,
.nav-link.active::before {
  width: 40%;
  /* largura padrão em telas menores */
  visibility: visible;
}

/* Telas pequenas (smartphones) */
/* =============== ESTILO BASE =============== */

.nav-link {
  position: relative;
  transition: all 0.3s ease-in-out;
  font-weight: 600;
}


/* Traço padrão (invisível no início) */
.nav-link::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: var(--verde-escuro-ccups);
  visibility: hidden;
  transition: width 0.3s ease-in-out;
}

/* Aumenta levemente o texto ao passar o mouse */
.nav-link:hover {
  transform: scale(1.05);
}

/* Texto ativo (destacado) */
.nav-link.active {
  color: var(--verde-ccups);
  /* cor diferente para ativo */
}


/* =============== TELAS GRANDES (DESKTOP) =============== */

@media (min-width: 993px) {

  .nav-link:hover::before,
  .nav-link.active::before {
    width: 100%;
    visibility: visible;
  }
}

/* =============== TELAS MENORES (CELULAR/TABLET) =============== */

@media (max-width: 992px) {
  .nav-link::before {
    display: none;
    /* oculta totalmente o traço */
  }

  .nav-link:hover {
    transform: scale(1.1);
    /* texto cresce levemente */
  }

  .nav-link.active {
    color: var(--verde-ccups);
  }
}

@media (max-width: 767.98px) {
  .logo-header {
    display: none;
  }

  .text-justify-sm {
    text-align: justify !important;
  }

  #services p {
    text-align: justify !important;
  }
}