:root {
     --cor-preta: #000000;
     --cor-branca: #ffffff;
     --cor-dourada: #ffd700;
     --cor-dourada-escura: #b8860b;
     --cor-ouro: #daa520;
 }

 body {
     background-color: var(--cor-preta);
     color: var(--cor-branca);
 }

 .navbar {
    background-color: rgba(0, 0, 0, 0.26); /* transparente */
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
 }

 /* Quando rolar a página */
.navbar.scrolled {
    background-color: var(--cor-preta); /* usa sua cor preta */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* sombra opcional para destacar */
}
 .navbar-brand img {
     height: 40px;
 }

 .nav-link {
     color: var(--cor-branca) !important;
 }

 .nav-link:hover,
 .nav-link.active {
     color: var(--cor-dourada) !important;
 }

 .hero {
     height: 100vh;
     background-image: url('img/carrosel/7.jpg');
     color: var(--cor-branca);
     text-shadow: 1px 1px 2px var(--cor-preta);
 }

 .section-title {
     color: var(--cor-dourada-escura);
 }

 .card-service {
     width: 100%;
     max-width: 350px;
     min-height: 500px;
     background-color: #1a1a1a;
     color: var(--cor-branca);
     border: 1px solid var(--cor-dourada-escura);
 }

 .card-service img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border: 1px solid var(--cor-dourada);
}

 .testimonial {
    
     background-color: #1a1a1a;
     color: var(--cor-branca);
     border-left: 5px solid var(--cor-dourada);
 }


 

 .btn-primary {
     background-color: var(--cor-dourada);
     border-color: var(--cor-dourada);
     color: var(--cor-preta);
 }

 .btn-primary:hover {
     background-color: var(--cor-dourada-escura);
     border-color: var(--cor-dourada-escura);
 }

 footer {
     background-color: var(--cor-preta);
     color: var(--cor-dourada);
     text-align: center;
     padding: 20px 0;
 }

 /* Ajuste para compensar o navbar fixo */
 section[id] {
     scroll-margin-top: 40px;
 }

 /*efeito para aparecer e desaparecer os elementos*/

 /* Animações de entrada e saída */
 @keyframes fadeInUp {
     0% {
         opacity: 0;
         transform: translateY(30px);
     }

     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes fadeOutDown {
     0% {
         opacity: 1;
         transform: translateY(0);
     }

     100% {
         opacity: 0;
         transform: translateY(30px);
     }
 }

/*carrosel  de imagens*/
  #carouselProjetos .carousel-item img {
    height: 500px;           /* altura fixa para todas as imagens */
    object-fit: cover;       /* preenche o espaço cortando excessos */
    width: 100%;             /* garante largura total */
    border-radius: 12px;     /* mantém o arredondamento bonito */
  }


 /* Estilo base para os elementos que irão animar */
 .animated-scroll {
     opacity: 0;
     transform: translateY(30px);
     transition: opacity 0.6s ease, transform 0.6s ease;
     will-change: opacity, transform;
 }

 /* Classe ativada quando visível */
 .animated-scroll.visible {
     animation: fadeInUp 0.8s forwards;
 }

 /* Classe removida quando sai da tela (opcional) */
 .animated-scroll.hide {
     animation: fadeOutDown 0.6s forwards;
 }


/*icone flutuante para chamada no whatsApp*/
 .whatsapp-float {
    position: fixed;
    bottom: 30px;       /* distância do rodapé */
    right: 30px;        /* distância da lateral */
    z-index: 9999;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #25D366; /* verde WhatsApp */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

.whatsapp-float img {
    width: 35px;
    height: 35px;
}