html,body {
    margin: 0;
    padding-top: 35px;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  
  .logo-clientes {
    max-width: 170px;
    height: auto;
    padding-top: 7px;
  }
  
  .navbar {
    position: fixed;
    background-color: #F5F4F2;
    opacity: 90%;
    padding: 0.5rem 1rem;
    margin: 0;
  }
  
  .navbar::before {
    content: "";
    display: block;
    width: 100%;
    height: 10px;
    background-color: #9C0001;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  
  .nav-link, i {
    font-family: "Lato";
    font-size: 100%;
    padding: 0%;
    margin: 0%;
  }
  
  .navbar .nav-link i {
    margin-right: 8px;
  }
  
  #navbartop {
    margin-bottom: 0%;
    padding: 0%;
  }
  
  #navbarNav {
    margin-top: 15px;
  }

  .banner-servicos {
    background-color: #880000; /* vermelho forte */
    height: 140px; /* ajuste a altura conforme necessário */
    padding: 2rem 1rem;
    text-align: center;
  }

  .banner-servicos p {
    font-family: "Playfair Display";
    font-size: 30px;
  }

  .banner-servicos h1 {
    font-family: "Playfair Display";
    font-size: 30px;
    font-weight: 570; /* ou use 'bold' */
  }
  
  .card__article {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
    padding: 0;
    margin: 0;
  }
  
  .card__article:hover {
    transform: scale(1.03);
  }
  
  .card__img {
    width: 80%;           /* reduz o tamanho da imagem */
    max-width: 350px;     /* limita o tamanho máximo */
    height: auto;
    object-fit: cover;
    border-radius: 8px;   /* borda arredondada */
    border: 3px solid #c0b024c9; /* borda colorida azul */
    box-shadow: 0 4px 12px rgba(224, 204, 25, 0.795); /* sombra azul suave */
    transition: transform 0.3s ease, filter 0.3s ease; /* efeito suave na transformação e filtro */
    display: block;       /* para centralizar, se precisar */
    margin: 0 auto;       /* centraliza horizontalmente */
  }
  
  .card__img:hover {
    filter: brightness(1.1);  /* imagem mais clara ao hover */
  }
  .container-botao-contato {
    margin-top: 20px;
  }

  .img-fluid-imagem{
    width: 100%;
  }

  .container-destaque {
    background-color: #f0f4ff; /* cor de fundo clara azulada */
    border-radius: 10px;
    padding: 40px 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    width: 100%;
  }  

  .extra-text {
    padding: 20px;
    color: #333;
  }
  
  .extra-text h3 {
    font-weight: 700;
  }
  
  .extra-text p {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-top: 10px;
  }
  
  .servico-text h5 {
    font-size: 1.25rem; /* tamanho da fonte */
    margin-bottom: 0.25rem; /* espaço abaixo do título */
    font-weight: 700; /* negrito */
    color: #333; /* cor do texto */
    font-family: "Playfair Display";
  }
  
  .servico-text p {
    /* estilos para o parágrafo */
    font-size: 1rem; /* tamanho da fonte */
    color: #070505; /* cor do texto */
    line-height: 1.5; /* espaçamento entre linhas */
    margin-bottom: 0; /* remove margem inferior */
    font-family: "lato";
  }
  
  .container-botao-contato {
    display: flex;
    justify-content: left;
    align-items: center;
    margin-top: 20px; /* ajuste conforme necessário */
  }  
  
  .btn-contato {
    width: 70%;
    height: 40%;
    background: linear-gradient(45deg, #d4af37, #C6AD4A, #d4af37);
    background-size: 70% 70%;
    color: white;
    font-weight: bold;
    font-family: "Playfair Display", serif;
    padding: 5px;
    border: none;
    border-radius: 40px;
    text-transform: uppercase;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: gradientMove 6s infinite ease, glow 2s infinite ease-in-out, pulse 2.5s infinite ease-in-out;
    font-size: 0.9rem;
    cursor: pointer;
    opacity: 1;
    transform: translateY(0);
    max-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .icon-contato {
    color: white;            /* Cor do ícone */
    font-size: 1rem;         /* Tamanho do ícone */
    margin-right: 5px;       /* Espaço entre ícone e texto */
    padding-top: 3px;
    transition: transform 0.3s ease; /* Suaviza transformações */
  }
  
  .btn-contato:hover .icon-contato {
    transform: scale(1.2);   /* Aumenta um pouco no hover */
    color: #880000;          /* Muda cor ao passar o mouse (ex: dourado) */
  }

  .imagem-advogados {
    padding: 20px;               /* Espaçamento interno ao redor da imagem */
    display: inline-block;       /* Faz o fundo se ajustar ao tamanho da imagem */
  }
  
  .imagem-advogados img {
    width: 350px;                /* Ajuste o tamanho como quiser */
    height: auto;                /* Mantém a proporção */
    display: block;              /* Remove espaçamento indesejado abaixo da imagem */
    margin-left: 70%;
    padding: 0;
  }  

  .secao-servicos {
    background-color:antiquewhite; /* ou qualquer outra cor */
    padding: 60px 0;           /* espaço interno acima/abaixo */
  }
  
  .faixa-cinza {
    background-color: #ccc;  /* cinza claro */
    height: 30px;            /* altura da faixa */
    width: 60%;             /* ocupa toda a largura da tela */
    margin-top: -47px;        /* cola a faixa na imagem, pode ajustar */
    padding: 0;
  }

  h3.texto-destaque {
    font-size: 30px;
    font-family: "Playfair Display", serif;
  }
  
  p.texto-destaque {
    font-size: 20px;
    font-family: "Playfair Display", serif;
  }
  
  
 /*footer*/
 .footer-personalizado {
    background-color: #880000; /* ou a cor desejada */
  }

  img.img-fluid{
    width: 30%;
  }

  @media (max-width: 768px) {
    /* Smartphones e tablets */
  
    .d-flex {
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
    }
  
    .d-flex .servico-text {
      text-align: center !important;
    }

    .servico-text h5,
    .servico-text p {
    text-align: center !important;
  }

    .servico-img {
      margin: 0 auto 1rem auto !important; /* centraliza imagem com margem inferior */
      width: 80%;
      max-width: 200px;
      height: auto;
      align-items: center;
    }
  
    .navbar {
      padding: 0.3rem 0.5rem;
    }
  
    .banner-servicos {
      height: auto;
      padding: 1.5rem 1rem;
    }
  
    .banner-servicos h1,
    .banner-servicos p {
      font-size: 22px;
      text-align: center;
    }

    .servico-text h5 {
      padding-top: 20px;
      font-size: 20px;
      text-align: center;
    }
  
    .servico-text p {
      font-size: 10px;
      text-align: center;
    }
  
    h3.texto-destaque {
      font-size: 24px;
      text-align: center;
    }
  
    p.texto-destaque {
      font-size: 16px;
      text-align: center;
    }
  
    .btn-contato {
      width: 90%;
      font-size: 0.85rem;
      padding: 8px;
    }
  
    .imagem-advogados img {
      width: 100%;
      margin-left: 0;
      padding: 0;
    }
  
    .faixa-cinza {
      width: 100%;
      height: 20px;
      margin-top: -30px;
    }
  
    .container-botao-contato {
      flex-direction: column;
      align-items: center;
    }

    .img-fluid-imagem{
      width: 60%;
      max-height: 60%;
    }

    img.img-fluid{
      align-items: center;
      margin-left: 35%;
      width: 100px;
    }

  }