body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
    scroll-behavior: smooth;
 
}

.scroll-container {
  overflow-y: auto;
  scroll-behavior: smooth;
}
header{
    width: 100%;
    background-color: #494949;
    height: 130px;
 
}
nav{
    display: flex;
    color: #fff;
    list-style: none;
 

}
.list{
    width: 100%;
    display: flex;
 text-align: center;
 margin: 20px;
 justify-content: end;
 margin-right: 180px;

}
li{
    margin: 35px;
    font-size: 20px;



}
.logo{
    margin-left: 200px;
    padding: 10px;
}
a{
    text-decoration: none;
    color: #fff;
}
.container-menu{
    width: 100%;
    height:  1043px;
    background-image: url(./assets/img/Grupo\ 246.png);
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
}
.acordo{
 
  width: 800px;
  height: 400px;
  text-align: center;
  font-size: 24px;
  color: #fff;
  margin-top: 450px;
}
.btn{
background-color: #CF872A;
color: #fff;
padding: 25px 100px;
border-radius: 27px;
font-size: 35px;
font-weight: 300px;
border: none;
cursor: pointer;
}
.btn:hover{
  background-color: #fff;
 transition: all 0.5s ease-in;
 color: #CF872A;

}
.one{
   text-shadow: 6px 6px #00000029;
 
}
 .linkado {
  color: #fff;
}
.linkado:hover{
 color:#CF872A; ;
}
.popup-images-new a{
  color:#CF872A;

}
.divida{
  color: #000;
}




details{
    display: none;
}

@media(max-width:1200px){

    details{
        display: flex;
    }
    .logo{
      
        padding: 10px;
        width: 70px;
        height: 85px;
        margin-left: 0;
        padding-left: 30px;
      
    }
    .list{
        display: none;
    }

  
    details {
      position: absolute; /* Posiciona o elemento em relação ao contêiner pai */
      top: 20px;          /* Distância do topo do contêiner pai */
      right: 20px;        /* Distância da direita do contêiner pai */
      z-index: 1000;      /* Garante que o menu fique acima de outros elementos */
      border-radius: 28px;
      opacity: 1;
  }
      
      summary {
        writing-mode: vertical-lr;
        text-align: center;
        padding: 12px 10px;
        width: 23px;
        height: 17px;
        background-color: var(--primColor);
        border: 2px solid var(--secoColor);
        border-radius: var(--cornerRad);
        color: var(--secoColor);
        cursor: pointer;
        user-select: none;
        outline: none;
        transition: transform 200ms ease-in-out 0s;
        margin-right: 30px;
       
       
      }
      
      summary::before,
      summary::after {
        position: static;
        top: 0;
        left: 0;
      }
      
      summary::before {
        content: "";
      }
      
      summary::after {
        content: "III";
        letter-spacing: -1px;
        font-size: 30px;
        color:  #CF872A;
      }
      
      summary:hover {
        transform: scale(1.1);
      }
      
      summary::marker {
        font-size: 0;
      }
      
      summary::-webkit-details-marker {
        display: none;
      }
      
      details[open] .menu {
        animation-name: menuAnim;
      }
      
      details[open] summary::before {
        content: "X";
        font-size: 20px;
        color:  #CF872A;
      }
      
      details[open] summary::after {
        content: "";
      }
      
      .menu {
        height: 0;
        border-radius: var(--cornerRad);
        background-color: var(--primColor);
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
        margin-top: 8px;
        display: flex;
        flex-direction: column;
        border-radius: 28px;
        overflow: hidden;
        animation: closeMenu 300ms ease-in-out forwards;
        background-color: #494949;
        padding: 20px;
      }
      
      .menu a {
        padding: 10px 24px;
        color: var(--secoColor);
        text-decoration: none;
        text-align: left;
        transition: filter 200ms linear 0s;
        font-size: 20px;
        margin: 10px;
      
       
     
      
      }
      
      .menu a:nth-of-type(1) {
      padding-bottom: 20px;
      }
      
      .menu a:nth-last-of-type(1) {
        border-bottom: none;
      }
      
     
      
      details::before {
        color: var(--secoColor);
        position: absolute;
        margin-left: 80px;
        padding: 10px 10px;
        opacity: 0.4;
      }
      
      details[open]::before {
        animation: fadeMe 300ms linear forwards;
      }
      
      @keyframes menuAnim {
        0% {
          height: 0;
        }
        100% {
          height: 412px;
        }
      }
      
      @keyframes fadeMe {
        0% {
          opacity: 0.4;
        }
        100% {
          opacity: 0;
        }
      }
      .home{
        background-color: #CF872A;
        width: 200px;
        border-radius: 50px;
      height: 15px;
      
    
       
      }
      .home:hover{
        background-color: #494949;
        width: 200px;
        border-radius: 50px;
      height: 15px;
      transition: all 0.5s ease-in;
      
    
       
      }

      .sobre{
        background-color: #CF872A;
        width: 200px;
        border-radius: 50px;
      height: 22px;
     
      
    
       
      }
      .sobre:hover{
        background-color: #494949;
        width: 200px;
        border-radius: 50px;
      height: 22px;
      transition: all 0.5s ease-in;
      
    
       
      }

      .clientes{
        background-color: #CF872A;
        width: 200px;
        border-radius: 50px;
        height: 22px;
      
    
       
      }
      .clientes:hover{
        background-color: #494949;
        width: 200px;
        border-radius: 50px;
      height: 22px;
      transition: all 0.5s ease-in;
      
    
       
      }

      .localizacao{
        background-color: #CF872A;
        width: 200px;
        border-radius: 50px;
        height: 22px;
      
    
       
      }
      .localizacao:hover{
        background-color: #494949;
        width: 200px;
        border-radius: 50px;
      height: 22px;
      transition: all 0.5s ease-in;
      
    
       
      }
      .btn {
        background-color: #CF872A;
        color: #fff;
        padding: 25px 100px;
        border-radius: 27px;
        font-size: 35px;
        font-weight: 300; /* corrigi para 300 (sem px) */
        border: none;
        cursor: pointer;
        /* adiciona propriedades para tornar o botão responsivo */
        display: inline-block;
       
        max-width: 100%; /* faz com que o botão não ultrapasse a largura da tela */
        padding: 25px 40px; /* ajusta o padding para que o botão se adapte às telas menores */
        font-size: 5.5vw; /* ajusta o tamanho da fonte para que seja proporcional à tela */
      }

      .container-menu {

        width: 100%;
        height: 100%;
        background-color: black;
        background-image: url(./assets/img/Grupo\ 246.png);
        background-position: top center; /* ajusta a posição do background para o topo */
        background-size: 100% auto;
        display: flex;
        flex-direction: column; /* define a direção do conteúdo como coluna */
        justify-content: center; /* centraliza o conteúdo verticalmente */
        align-items: center; /* centraliza o conteúdo horizontalmente */
        padding-top: 200px; /* adiciona um padding para criar espaço para o background */
        background-repeat: no-repeat;
      }
      .acordo{
 
        width: 350px;
        height: 400px;
        text-align: center;
        font-size: 13px;
        color: #fff;
        margin-top: 0;
        position: relative; /* adiciona position relative */
        top: -40px; 
       
      }

      .popup-content-new {
        background-color: white;
        padding: 20px;
        border-radius: 10px;
        text-align: center;
        width: 70%;
        max-width: 600px;
        margin: auto;
        position: relative;
    
      }
      
      .popup-images-new a {
        display: inline-block;
        margin: 10px;
      }
      
      .popup-images-new img {
        width: 150px;
        height: auto;
        cursor: pointer;
      }
      
      /* Estilos para o botão de fechar do novo pop-up */
      .close-new {
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 30px;
        cursor: pointer;
      
      }
      
      .itau{
        transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55), background-position 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow 500ms linear;
      width: 150px !important;
      
      }
      .itau:hover{
        transform: scale(1.1);
        background-position: -60px;
      
      }
      .cred1{
        transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55), background-position 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow 500ms linear;
        width: 150px !important;
      }
      .cred1:hover{
        transform: scale(1.1);
        background-position: -60px;
        
      }
      .bv{
        transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55), background-position 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow 500ms linear;
        width: 150px !important;
      }
      .bv:hover{
        transform: scale(1.1);
        background-position: -60px
        
      }
      .mercadopago{
        transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55), background-position 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow 500ms linear;
        width: 150px !important;
      }
      .mercado:hover{
        transform: scale(1.1);
        background-position: -60px
        
      }
      .borda{
        display: none;
  
      }
      .boleto{
        border-bottom: 1px solid #000;
      
      }
     
    
      
      
      }