.main_sobre{
    padding: 7.283vh 3.49vw;
    height: 92vh;
    background-image: url("../images/bg_sobre.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
}
.text{
    padding: 5.435vh 4.167vw 0vh;
}
.title{
    text-transform: uppercase;
    line-height: 1;
}

.alt_color{
    color: #b87f3b;
}

.container{
  background: #f2f1ee;
  font-size: 4.348vh;
  border-radius: 5.435vh;
  width: 74.375vw;
  font-family:"figtree", sans-serif;
  height: 78.152vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 2.717vh rgba(0,0,0,0.4);

}

.subtitle{
    padding-top: 3.261vh;
    font-size: 4.348vh;
}

.advantage-list{
    padding-top: 2.174vh;
    list-style: none;
    font-size: 3.587vh;
    font-weight: bold;
}
.advantage-list li{
    padding-top: 1.087vh;
}

.fine-print-list{
    list-style: none;
    padding-top: 3.261vh;
}
.fine-print-list li{
    font-size: 2.717vh;
    font-weight: lighter;
}

.fine_link{
    color: blue;
    text-decoration: underline;
}

/* Coloque isso no final do seu arquivo CSS */

@media (max-width: 768px) {

  /* Primeiro, ajustamos a seção principal.
    Damos um padding melhor para celular e deixamos a altura ser automática
    para que o container caiba nela.
  */
  .main_sobre {
    height: auto; /* Deixa a altura crescer com o conteúdo */
    min-height: 92vh; /* Garante que ainda ocupe a tela */
    padding: 10vh 5vw; /* Mais padding vertical, menos horizontal */
    background-position: center; /* Centraliza o BG em telas menores */
  }

  /*
    Agora, o container. 
    É a mudança mais importante.
  */
  .container {
    /* 1. Ocupa mais da tela do celular */
    width: 90vw; 

    /* 2. MUITO IMPORTANTE: Deixa a altura ser automática! */
    height: auto; 

    /* 3. Um 'border-radius' fixo fica melhor que em 'vh' */
    border-radius: 25px;
    
    /* 4. Define um font-size base razoável para o container */
    font-size: 1rem; /* (algo como 16px) */
  }

  /*
    Ajusta os paddings internos para telas menores
  */
  .text {
    padding: 5vh 6vw; /* Um pouco mais de espaço nas laterais */
  }

  /* Finalmente, corrigimos todas as fontes
    trocando 'vh' por 'rem', que são estáveis.
  */
  .title {
    font-size: 2.5rem; /* (Ex: 40px) - Ajuste se necessário */
  }

  .subtitle {
    font-size: 1.5rem; /* (Ex: 24px) */
    padding-top: 2.5vh;
  }

  .advantage-list {
    font-size: 1.1rem; /* (Ex: 18px) */
    padding-top: 2vh;
  }
  .advantage-list li {
    padding-top: 1.5vh;
  }

  .fine-print-list {
    padding-top: 2.5vh;
  }
  .fine-print-list li {
    font-size: 0.9rem; /* (Ex: 14px) */
  }
}