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-clientes {
  width: 100%;
  height: 100vh;
  background-image: url('../assets/bannerUmAdvogados.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}
  
  .texto-bannerUm h1 {
    color: #fff;
    font-size: 40px;
    font-family: 'Playfair Display', serif;
    font-weight: 700; /* Negrito */
    margin-bottom: 10px;
  
  }
  
  .texto-bannerUm p {
    color: #fff;
    font-size: 19px;
    margin: 0;
    line-height: 1.5;
  }

  .texto-pos-banner {
    background-color: #f9d878; /* dourado claro */
    width: 70%;
    max-width: 900px;
    margin: 40px auto; /* centraliza horizontalmente com espaçamento em cima/baixo */
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* sombra leve para parecer card */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  
  .texto-pos-banner h1 {
    font-size: 1.6rem;
    margin: 0;
    color: #333; /* texto escuro para contraste */
  }
  

  .icon-circulo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border: 3px solid gold;
    border-radius: 50%;
    color: #0a0d11;
    background-color: rgb(236, 230, 230);
  }
  
  .icon-circulo:hover {
    transform: scale(1.1);
  }

  .linha-dourada {
    width: 100px;
    height: 3px;
    background-color: gold;
    margin-top: 5px;
  }

  .secao-vermelha-com-imagem {
    background-image: url('../assets/paralaxAdvogado.jpg'); /* troque pelo caminho real */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #6B0B0C; /* cor de fundo como fallback */
    color: white;
    padding-top: 60px;
    position: relative;
    z-index: 0;
    overflow: hidden;
  }

  .secao-vermelha-com-imagem::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(107, 11, 12, 0.9); /* vermelho escuro com transparência */
    z-index: 1;
  }
  
  .secao-vermelha-com-imagem .conteudo {
    max-width: 600px;
    margin: 0 auto 100px auto;
    text-align: left;
    position: relative;
    z-index: 2; /* garante que o conteúdo fique acima do overlay */
  }
  
  .timeline {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    padding: 40px 0;
    z-index: 2; /* garante que o conteúdo fique acima do overlay */
  }
  
  .timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 6px;
    background-color: #ccc;
    transform: translateX(-50%);
  }
  
  .timeline-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    position: relative;
    width: 100%;
  }
  
  .timeline-item.left .content {
    width: 40%;
    text-align: right;
  }
  
  .timeline-item.left .linha-com-icone-oposto {
    display: flex;              /* garante que o container alinhe filhos em linha */
    flex-direction: row;        /* ícone e linha ficam lado a lado, na horizontal */
    align-items: center;        /* alinha verticalmente no centro */
    gap: 8px;                   /* espaço entre ícone e linha */
  }  
  
  .timeline-item.right .content {
    width: 40%;
    text-align: left;
    order: 2;
  }
  
  .timeline-item.right .linha-com-icone-oposto {
    align-items: center;
    order: 1;
    gap:4px;
  }
  
  .linha-com-icone-oposto {
    position: relative;
  }
  
  .linha-horizontal {
    display: inline-block;
    width: 150px;
    height: 3px;
    background-color: #ccc;
    margin: 0 3px;
  }
  
  .icone-circulo {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    color: #a00;
    border: 4px solid #C6AD4A;
    border-radius: 50%;
    width: 140px;
    height: 140px;
  }

  .icone-circulo i {
    font-size: 48px;     /* Tamanho do ícone */
  }

  .timeline-item .content h3 {
    font-size: 25px;              /* aumenta o tamanho do texto */
    font-family: 'Playfair Display', serif;  /* troca a fonte */
    font-weight: 700;             /* negrito */
    margin-bottom: 10px;          /* espaçamento abaixo do h3 */
    line-height: 1.3;
    text-align:center;
    white-space:initial; /* <-- evita quebra de linha */
  }  

  .numero-etapa {
    font-weight: bold;
    font-size: 30px;
    padding-right: 5px;
    color: #e4b417; /* Exemplo: vinho */
  }
  
  .container-botao-contato {
    display: flex;
    flex-direction: column; /* Alinha os filhos em coluna */
    justify-content: center; /* Centraliza verticalmente dentro do container */
    align-items: center;     /* Centraliza horizontalmente */
    margin-top: 10px;        /* Pode ajustar conforme quiser */
    height: 30%;           /* Faz o container ocupar toda a altura da tela */
  }    
  
  .btn-contato {
    width: 25%;
    height: 25%;
    background: linear-gradient(45deg, #d4af37, #C6AD4A, #d4af37);
    background-size: 80% 90%;
    color: white;
    font-weight: bold;
    font-family: "Playfair Display", serif;
    margin-bottom: 10%;
    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;
    z-index: 2;
    text-decoration: none; /* Remove underline do link */
  }

  .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);   /* Aumenta um pouco no hover */
    color: #880000;          /* Muda cor ao passar o mouse (ex: dourado) */
  }

  .container-botao-contato h2 {
    font-size: 28px;
    font-family: "Lato", sans-serif;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.4;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
    z-index: 2;
  }

  .secao-branca {
    background-color: #fff;
  }
  
  .card-vermelho {
    background-color: #880000; /* vermelho escuro */
    border: none;
    border-radius: 3rem; /* arredondado */
    box-shadow: 0 4px 7px rgba(136, 0, 0, 0.3); /* sombra leve */
    min-height: 300px; /* altura mínima maior */
    width: auto; /* para ocupar toda largura da coluna */
    display: flex;
    flex-direction: column;
    justify-content: center; /* centralizar conteúdo verticalmente */
  }
  
  .card-vermelho .card-body {
    padding: 30px;
  }
  
  .card-vermelho p {
    color: #fff; /* texto branco */
    text-align: left;
    font-size: 20px;
    font-family:"Playfair Display";
  }

  .card-vermelho h5{
    background-color: aliceblue;
    color: #0a0d11;
    text-align: center;
    font-family: "Playfair Display";
    border-radius: 4px;
  }

  .card-vermelho {
    background-color: #b30000; /* vermelho escuro, você pode ajustar */
  }
  
  /* Altura individual de cada card */
  .altura-formacao {
    height: 250px;
  }
  
  .altura-inicio {
    height: 350px;
  }
  
  .altura-atuacao {
    height: 400px;
  }  
  
  .container-imagem {
    display: flex; /* ou block, dependendo do layout */
    width: 100%;
    flex-direction: column; /* para empilhar verticalmente */
    gap: 0; /* remove espaçamento entre os elementos */
    margin: 0;
    padding: 0;
  }
  
  .imagem-advogados {
    width: 90%;         /* Ocupa a largura da coluna */
    height: auto;
    object-fit: cover;   /* Mantém a proporção e cobre o espaço */
    border-radius: 8px;  /* Opcional: bordas arredondadas */
    padding: 0;  
  }
  
  .faixa-cinza {
    height: 40px; /* altura da faixa */
    background-color: #ccc; /* cinza claro */
    width: 344%;
    margin: 0;
    padding: 0;
  }

  .conteudo-horizontal {
    display: flex;
    align-items:flex-start; /* alinha o topo da imagem e do texto */
  }

  .texto-lateral {
    align-self: flex-end;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    transform: translateY(50px); /* move o bloco inteiro para baixo */
  } 

  .texto-lateral h2{
    margin: 0;
    font-size: 30px;
    padding: 4px 0;
    font-family: "lato";
  }

  .texto-lateral h3 {
    font-size: 20px;
    font-family: "lato";
  }

  .container-botao-contato-final {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch; /* Mudado para deixar os filhos ocuparem a largura toda */
    width: 100%;
    max-width: 100%;
    margin-top: 10px;
    padding: 10px;
  }  
  
  .btn-contato-final {
    width: 80%;
    max-width: 300px;           /* Limita o tamanho máximo */
    height: 50px;
    
    background: linear-gradient(45deg, #d4af37, #C6AD4A, #d4af37);
    background-size: 80% 80%;
    color: white;
    font-weight: bold;
    font-family: "Playfair Display", serif;
    font-size: 1rem;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
  
    display: flex;
    justify-content: center;
    align-items: center;
  
    border: none;
    border-radius: 40px;
    cursor: pointer;
  
    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;
  
    outline: none;
    box-shadow: none;
    opacity: 1;
    z-index: 2;
  }   
  
  .btn-contato-final:hover .icon-contato {
    transform: scale(1.2);   /* Aumenta um pouco no hover */
    color: #880000;          /* Muda cor ao passar o mouse (ex: dourado) */
  }
  
  .icon-contato {
    font-size: 1.1rem;
  }
  
  
  /*footer*/
.footer-personalizado {
    background-color: #880000; /* ou a cor desejada */
  }

.img-fluid{
  max-width: 100px;
}
    
  @media (max-width: 600px) {

    .navbar {
        width: 100% !important; /* Garante que não ultrapasse a tela */
        overflow-x: hidden;
        flex-direction: column;
        align-items: center;
        padding: 10px;
      }
    
      .nav-link {
        padding: 10px 0;
        width: 100%;
        text-align: center;
      }

    .banner-clientes {
      height: 30vh; /* menos altura no celular */
      background-position: top; /* foca na parte de cima da imagem */
      justify-content: center; /* centraliza horizontalmente */
      align-items: flex-start; /* alinha o texto mais para o topo */
      padding: 25px; /* espaço interno */
      padding-right: 0;
      overflow-x: hidden;
    }
  
    .container-banner {
        display: flex;
        justify-content: flex-end; /* joga o conteúdo para a direita */
        padding-left: 35%;
        box-sizing: border-box;
        overflow-x: hidden; /* evita scroll lateral */
      }

    .texto-bannerUm.text-start {
        left: 35%;
        max-width: 90%; /* largura controlada para caber na tela */
        text-align: right !important;
        padding: 0;
      }

      .texto-bannerUm {
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* conteúdo (h1 e p) alinhado à direita */
        max-width: 60%; /* controla a largura */
        padding: 20px;
        letter-spacing: -0.5px;
      }
      
      .texto-bannerUm h1 {
        font-size: 18px;
        margin: 0;
        left: 10%;
      }
      
      .texto-bannerUm p {
        font-size: 12px;
        text-align: right;
        margin-top: 8px;
        left: 15%;
      }

    .faixa-cinza {
        height: 20px; /* ou outro valor menor */
        width: 80%;
        font-size: 12px; /* se tiver texto dentro */
      }

      .secao-vermelha-com-imagem {
        background-attachment: scroll; /* evita bugs com 'fixed' no mobile */
        padding-top: 30px;
      }
    
      .secao-vermelha-com-imagem .conteudo {
        max-width: 90%;
        margin: 0 auto 50px auto;
        text-align: center;
      }
    
      .timeline {
        position: relative;
        max-width: 250px;
        margin: 0 auto;
        padding: 20px 0;
        z-index: 2; /* garante que o conteúdo fique acima do overlay */
      }
      
      .timeline::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 3px;
        transform: translateX(-50%);
      }
      
      .timeline-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 60px;
        position: relative;
        width: 62%;
      }
      
      .timeline-item.left .content {
        width: 20%;
        text-align: right;
      }
      
      .timeline-item.left .linha-com-icone-oposto {
        left: 50%;
        transform: translateX(); /* linha e ícone à direita */
        flex-direction: row;
        justify-content: flex-start;
      }  
      
      .timeline-item.right .content {
        width: 10%;
        text-align: left;
        order: 2;
      }
      
      .timeline-item.right .linha-com-icone-oposto {
        transform: translateX(); /* linha e ícone à direita */
        flex-direction: row;
        justify-content: flex-end;
        display: flex;             /* GARANTE linha + ícone lado a lado */
        flex-direction: row; 
        order: 1;
        gap:4px;
        left: 17%;
      }
      
      .linha-com-icone-oposto {
        position:relative;
      }
      
      .linha-horizontal {
        width: 45px;
        height: 3px;
        background-color: #ccc;
      }
      
      .icone-circulo {
        width: 50px;
        height: 50px;
        font-size: 24px;
        background: #fff;
        border: 4px solid #C6AD4A;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    
      .icone-circulo i {
        font-size: 18px;     /* Tamanho do ícone */
      }
    
      .timeline-item .content h3 {
        font-size: 10px;              /* aumenta o tamanho do texto */
        font-family: 'Playfair Display', serif;  /* troca a fonte */
        font-weight: 700;             /* negrito */
        margin-bottom: 10px;          /* espaçamento abaixo do h3 */
        line-height: 1.3;
        text-align:center;
        white-space:initial; /* <-- evita quebra de linha */
      }  
    
      .numero-etapa {
        font-weight: bold;
        font-size: 15px;
        padding-right: 5px;
        color: #e4b417; /* Exemplo: vinho */
      }

      .container-botao-contato h2 {
        font-size: 20px;
        margin-bottom: 10px;
      }
    
      .btn-contato {
        width: 80%;              /* botão mais estreito */
        height: auto;
        font-size: 0.75rem;      /* texto menor */
        padding: 6px 12px;       /* menos espaço interno */
        max-height: 100px;       /* altura máxima reduzida */
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-bottom: 40px;
      }
    
      .icon-contato {
        font-size: 1rem;         /* ícone um pouco menor */
        margin-right: 6px;
      }

      .secao-branca .row {
        display: flex;
        flex-direction: column;
      }
    
      .secao-branca .col-md-4 {
        width: 100%;
        max-width: 100%;
      }
    
      /* 👉 Reorganiza só a primeira coluna */
      .secao-branca .col-md-4:first-child {
        display: flex;
        flex-direction: column;
      }
    
      .imagem-advogados {
        width: 100%;
        height: auto;
        margin-top: 10px;
      }
    
      .card-vermelho {
        margin-bottom: 10px;
        width: 80%;
        height: 60%;
        align-items: center;
        margin: 0 auto 10px auto; /* centraliza horizontalmente e dá margem inferior */
      }
    
      .conteudo-horizontal {
        margin-bottom: 40px;
      }
    
      .faixa-cinza {
        margin-top: 10px;
      }
    
      .footer-personalizado .col-md-4 {
        text-align: center;        /* Centraliza o conteúdo */
      }
    
      .footer-personalizado .col-md-4 img {
        margin: 0 auto;            /* Centraliza a imagem como bloco */
        display: block;            /* Garante que o margin funcione */
      }
}
  

  @media (min-width: 601px) and (max-width: 992px) {
    .banner-texto {
        position: absolute; /* ou relative, dependendo da estrutura */
        top: 35%;
        left: auto;
        right: 6%; /* alinha à direita */
        max-width: 70%;
        height: 90vh; /* força o banner a ser maior */
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* texto alinhado à direita */
        justify-content: center;
        padding: 20px;
        box-sizing: border-box;
      }
  
      .banner-texto h1,
      .texto-bannerUm h1 {
        font-size: 28px; /* menor que desktop */
        text-align: right;
        margin: 0;
      }
  
      .texto-bannerUm p {
        font-size: 16px;
        text-align: right;
        margin: 0;
      }
  
    .texto-pos-banner {
      width: 85%;
    }
  
    .icon-circulo {
      width: 80px;
      height: 80px;
    }
  
    .icone-circulo {
      width: 110px;
      height: 110px;
    }
  
    .icone-circulo i {
      font-size: 38px;
    }
 
    .timeline-item.left .content,
    .timeline-item.right .content {
      width: 85%;
      order: initial;
    }
  
    .btn-contato {
      width: 60%;
    }
  }