body {
    margin: 0;
    font-family: 'Poppins', Arial, sans-serif;
    overflow-x: hidden;
    background-color: #252526;
    box-sizing: border-box;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #252526;
    padding: 1rem 3rem;
    color: white;
}

.logo {
    color: white;
    font-size: 1rem;
    font-weight: bold;
}

.nav-links {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    gap: 1.5rem;
}


.nav-links a {
    text-decoration: none;
    color: white;
    display: inline-block;
    transition: color 0.3s;
    transition: transform 0.5s ease;
}

.nav-links a:hover {
    color: #f4c121;
    transform: translateY(-5px);
}

.logo {
    height: 4vw;
}

.logo img {
    height: 100%;
    width: auto;
}

.wr img {
    max-width: 100%;
      height: auto;
      padding: 0;
      display: block; /* opcional, mas ajuda no controle */
      margin: auto; 
}

.container-retangulos {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
}

.retangulo1 {
    position: relative;
    margin: 0;
    padding: 0;
    margin-top: 15rem;
}

.retangulo1 img {
    width: 40vh;
    height: 80vh;
    object-fit: cover;
    border-radius: 1.25rem;
    display: block;
    margin: auto;
    object-position: center right ;
}
.txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;    
    color: white;
    font-size: 2rem;
    font-weight: 500;
    display: block;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.retangulo2 {
    position: relative;
    margin: 0;
    padding: 0;
    margin-top: 15rem;
}

.retangulo2 img{
    width: 40vh;
    height: 80vh;
    object-fit: cover;
    border-radius: 1.25rem;
    display: block;
    margin: auto;
    object-position: center ;
}

.txt2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;    
    color: white;
    font-size: 2rem;
    font-weight: 500;
    display: block;
    align-items: center;
    justify-content: center;
    margin: 0;
}


.retangulo3 {
    position: relative;
    margin: 0;
    padding: 0;
    margin-top: 15rem;
}


.retangulo3 img{
    width: 40vh;
    height: 80vh;
    object-fit: cover;
    border-radius: 1.25rem;
    display: block;
    margin: auto;
    object-position: center ;
}

.txt3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;    
    color: white;
    font-size: 2rem;
    font-weight: 500;
    display: block;
    align-items: center;
    justify-content: center;
    margin: 0;
}


.retangulo4 {
    position: relative;
    margin: 0;
    padding: 0;
    margin-top: 15rem;
}

.retangulo4 img{
    width: 40vh;
    height: 80vh;
    object-fit: cover;
    border-radius: 1.25rem;
    display: block;
    margin: auto;
    object-position: center ;
}


.txt4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;    
    color: white;
    font-size: 2rem;
    font-weight: 500;
    display: block;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.container3 {
color: white;
padding-top: 10rem;
}

.container3 img {
    max-width: 100%;
    height: auto;
    float: right;
    border-radius: 2.187rem;
    box-shadow: -0.625rem 0.9375rem 0.9375rem rgba(0, 0, 0, 0.4); 
}

.texto h1 {
    text-align: center;
}

.texto {
    text-align: left;
    font-weight: 800;
    font-size: clamp(1.25rem, 5vw, 2.5rem);
    padding-left: 5vw;
    margin-bottom: 0.625rem;

}

.texto span, .texto p {
    display: block;
    font-weight: 400;
    font-size: clamp(1.25rem, 4vw, 2rem);
    color: grey;
    margin-top: 3.125rem;
    margin-bottom: 0.3125rem;
}
.container4 {
    color: white;
    padding-top: 20rem;
}

.container4 img {
    max-width: 100%;
    height: auto;
    float: left; /* igual ao container6 */
     border-radius: 2.187rem;
    box-shadow: 0.625rem 0.9375rem 0.9375rem rgba(0, 0, 0, 0.4); 
}

.texto2 {
    text-align: center;
    font-weight: 800;
    font-size: clamp(1.25rem, 5vw, 2.5rem);
    padding-left: 5vw;
    margin-bottom: 0.625rem;
}

.texto2 span {
    display: block;
    font-weight: 400;
    font-size: clamp(1.25rem, 4vw, 2rem);
    color: grey;
    margin-top: 3.125rem;
    margin-bottom: 0.3125rem;
}

.item-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    margin-left: clamp(2rem, 5vh, 6rem);
    margin-top: 5rem;
}
.item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.esferas {
    background-color: #f4c121;
    border-radius: 50%;
    height: 0.5rem;
    width: 0.5rem;
}

.textos_esferas {
    color: white;
    font-weight: 400;
    font-size: clamp(1rem, 2vh, 1.25rem);
} 

.bnt-central {
    display: inline-block;
    margin-top: 5rem;
    margin-left: 4.5%;
    padding: 1.5rem 2.5rem;
    background-color: #f4c121;
    color: white;
    border: none;
    border-radius: 1.5625rem;
    font-size: clamp(1rem, 2.5vh, 1.5rem);
    font-weight: 300;
    font-family: 'Poppins', Arial, sans-serif;
    box-shadow: 0.3125rem 0.3125rem 0.9375rem rgba(0, 0, 0, 0.7);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.5s ease;
}

.bnt-central:hover {
      transform: translateY(-0.3125rem);
}

.item-container1 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    margin-top: 3rem;
    padding-left: 5vw;
}
.item1 {
    display: flex;
    align-items: center;
    gap: 1rem;

}
.esferas1 {
    background-color: #f4c121;
    border-radius: 50%;
    height: 0.5rem;
    width: 0.5rem;
}
.textos_esferas1 {
    color: white;
    font-weight: 400;
    font-size: clamp(1rem, 2vw, 1.25rem);
}
.bnt-central1 {
    display: inline-block;
    margin-top: 5rem;
    margin-left: 4.5%;
    padding: 1.5rem 2.5rem;
    background-color: #f4c121;
    color: white;
    border: none;
    border-radius: 1.5625rem;
    font-size: clamp(1rem, 2.5vh, 1.5rem);
    font-weight: 300;
    font-family: 'Poppins', Arial, sans-serif;
    box-shadow: 0.3125rem 0.3125rem 0.9375rem rgba(0, 0, 0, 0.7);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.5s ease;
}


.bnt-central1:hover {
      transform: translateY(-0.3125rem);
    
}
.container5 {
    color: white;
    padding-top: 20rem;
}

.container5 img {
    width: 100%;
    max-width: 1000px;
    height: auto;
    float: right;
    border-radius: 2.1875rem;
     box-shadow: -0.625rem 0.9375rem 0.9375rem rgba(0, 0, 0, 0.4);
}

.texto3 h1 {
    font-size: 4.9rem;
}

.texto3 {
    text-align: left;
    font-weight: 800;
    font-size: clamp(1.25rem, 5vw, 2.5rem);
    padding-left: 5vw;
    margin-bottom: 0.625rem;

}

.texto3 span  {
    display: block;
    font-weight: 400;
    font-size: clamp(1.25rem, 4vw, 2rem);
    color: grey;
    margin-top: 3.125rem;
    margin-bottom: 0.3125rem;
}


.item-container2 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    margin-left: clamp(2rem, 5vh, 6rem);
    margin-top: 5rem;
}
.item2 {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.esferas2 {
    background-color: #f4c121;
    border-radius: 50%;
    height: 0.5rem;
    width: 0.5rem;
}

.textos_esferas2 {
    color: white;
    font-weight: 400;
    font-size: clamp(1rem, 2vh, 1.25rem);
} 

.bnt-central2 {
    display: inline-block;
    margin-top: 5rem;
    margin-left: 4.5%;
    padding: 1.5rem 2.5rem;
    background-color: #f4c121;
    color: white;
    border: none;
    border-radius: 1.5625rem;
    font-size: clamp(1rem, 2.5vh, 1.5rem);
    font-weight: 300;
    font-family: 'Poppins', Arial, sans-serif;
    box-shadow: 0.3125rem 0.3125rem 0.9375rem rgba(0, 0, 0, 0.7);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.5s ease;
}

.bnt-central2:hover {
      transform: translateY(-0.3125rem);
}


.container6{
    color: white;
    padding-top: 20rem;
    padding-bottom: 10rem;
}

.container6 img {
    width: 100%;
    max-width: 1000px;
    height: auto;
    float: left;
    border-radius: 35px;
    box-shadow: -0.625rem 0.9375rem 0.9375rem rgba(0, 0, 0, 0.4);
    
}

.texto4 {
    text-align: center;
    font-weight: 800;
    font-size: clamp(1.25rem, 5vw, 2.5rem);
    padding-left: 5vw;
    margin-bottom: 0.625rem;
}

.texto4 span {
    display: block;
    font-weight: 400;
    font-size: clamp(1.25rem, 4vw, 2rem);
    color: grey;
    margin-top: 3.125rem;
    margin-bottom: 0.3125rem;
}

.item-container3 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    margin-top: 3rem;
    padding-left: 5vw;
}
.item3{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.esferas3 {
    background-color: #f4c121;
    border-radius: 50%;
    height: 0.5rem;
    width: 0.5rem;
}

.textos_esferas3 {
    color: white;
    font-weight: 400;
    font-size: clamp(1rem, 2vh, 1.25rem);
} 

.bnt-central3 {
    display: inline-block;
    margin-top: 5rem;
    margin-left: 4.5%;
    padding: 1.5rem 2.5rem;
    background-color: #f4c121;
    color: white;
    border: none;
    border-radius: 1.5625rem;
    font-size: clamp(1rem, 2.5vh, 1.5rem);
    font-weight: 300;
    font-family: 'Poppins', Arial, sans-serif;
    box-shadow: 0.3125rem 0.3125rem 0.9375rem rgba(0, 0, 0, 0.7);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.5s ease;
}

.bnt-central3:hover {
      transform: translateY(-0.3125rem);
}


.item-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    margin-left: clamp(2rem, 5vh, 6rem);
    margin-top: 5rem;
}
.item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.esferas {
    background-color: #f4c121;
    border-radius: 50%;
    height: 0.5rem;
    width: 0.5rem;
}

.textos_esferas {
    color: white;
    font-weight: 400;
    font-size: clamp(1rem, 2vh, 1.25rem);
} 

.bnt-central {
    display: inline-block;
    margin-top: 5rem;
    margin-left: 4.5%;
    padding: 1.5rem 2.5rem;
    background-color: #f4c121;
    color: white;
    border: none;
    border-radius: 1.5625rem;
    font-size: clamp(1rem, 2.5vh, 1.5rem);
    font-weight: 300;
    font-family: 'Poppins', Arial, sans-serif;
    box-shadow: 0.3125rem 0.3125rem 0.9375rem rgba(0, 0, 0, 0.7);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.5s ease;
}

.bnt-central:hover {
      transform: translateY(-0.3125rem);
}

.container7 {
    color: white;
    margin-top: 20rem;
}

.texto-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;

}
.texto5 {
    color: #f4c121;
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 400;
    margin-bottom: 2rem;
    display: block;
    align-items: initial;
    justify-content: initial;
    padding-top: initial;
}

.texto6 {
    display: flex;
    color: white;
    font-weight: 800;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    white-space: nowrap;
    align-items: initial;
    justify-content: initial;
    gap: initial;
    text-align: center;
}


.container7 img {
     width: 100%;
     max-width: 900px;
    height: auto;
    float: right;
    border-radius: 35px;
    margin-top: 20%;
    margin-right: 50px;
    box-shadow: 5px 10px 20px rgba(0,0,0,0.4); /* mais natural */
}

.container7 span  {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-weight: 400;
    font-size: clamp(1.25rem, 2vw, 2rem);
    padding-left: 5vw;
    padding-right: 5vh;
}

.texto5 {
    padding-top: 5vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    font-weight: 400;
    font-size: clamp(0.75rem, 2vw, 1rem);
    color: #f4c121;
    white-space: nowrap;
    text-align: center;
    
}

.container8 {
    color: white;
    margin-top: 20rem;
}

.texto-container2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 5vh;
    gap: 0.5rem;

}

.texto7 {
    color: #f4c121;
    margin-bottom: 0.125rem;
}

.texto8 {
    font-size: xx-large;
    font-weight: 400;
    margin-top: 0;
}

.imagens {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

}

.imagens img {
    margin-top: 3.125rem; /* Equivalent to 50px */
    width: 9.375rem;    /* Equivalent to 150px */
    height: auto;

}

.wrapper-branco {
    background-color: white;
    width: 100vw;
}

.container9 {

    /* Centraliza o contêiner e limita sua largura */
    width: 90vw;
    max-width: 100%;
    margin: auto;
    
    /* Outras propriedades */
    margin-top: 3.125rem;
    padding-bottom: 6.25rem;
    height: auto;
    display: block;
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
}

.container9 img {
  /* Use auto para centralizar o elemento horizontalmente */
  margin-left: 1rem;
  margin-right: auto;

  /* Use um valor relativo para a margem superior */
  margin-top: 2rem;

  /* Limita o tamanho para evitar que ele fique muito grande */
  width: 12.5rem;
  max-width: 90%;

  /* Garante que a altura se ajuste para manter a proporção */
  height: auto;
  
  /* Use um valor responsivo para o padding */
  padding-top: 1rem;

  /* Estilos de texto */
  color: #929292;
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.5rem);
  text-align: center;


}

.texto9 p {
    color: gray;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.3125rem; 
    padding-top: 1rem;
    
}

.texto9 a {

    display: block;
    text-decoration: none;
    color: inherit;
    font-weight: 200;
    color: #9B9B9B;
    cursor: pointer;
    /* Use a responsive unit for margin */
    margin: 0.3125rem 0; 
}

.texto9 span {
    cursor: pointer;
    font-weight: 200;
    color: #9B9B9B;
}

.container-textos {

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 10rem;
    padding-top: 1rem;
    font-weight:700;
    
}

.texto10 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.3125rem; 
}

.texto11 {
    font-weight: 700;
    font-size: 1rem;
}

.texto11 img {

    max-width: 2.5rem; /* Converte 40px para rem (40/16 = 2.5) */
    height: auto;
    margin-top: 0.3125rem; /* Converte 5px para rem (5/16 = 0.3125) */
    background-color: white;

}

.texto10 {
    display: flex;
    align-items: flex-start;
    color: #9B9B9B;
    font-weight: 700;
    
    /* Responsive font size */
    font-size: clamp(1rem, 2vw, 1.5rem); 
    
    /* Responsive margins */
    margin-top: 1.25rem;
    margin-top: 1.25rem;
}

.texto10 p {
    color: #929292;
    /* Use 'clamp()' for a responsive and fluid font size */
    font-size: clamp(1rem, 2vw, 1rem);
    font-weight: 700;
}

.texto10 span {
    font-weight: 200;
    color: #9B9B9B;
    font-size: 1rem;
}

.texto11 {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
}

.texto11 p{

    display: flex;
    align-items: flex-start;
    color: #9B9B9B;
    font-weight: 700;
    
    /* Use clamp() for responsive font sizing */
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    
    /* Use a fluid value for horizontal margin */
    margin-left: 1vw; 
    
    /* Use rem for consistent vertical spacing */
    margin-top: 1.25rem;
    padding-top: 0.9375rem;

}

.imagens_socias {

    display: flex;
    gap: 0.125rem; /* Converte 2px para rem (2 / 16 = 0.125) */
    flex-direction: row;
   

}

