@media (min-width: 600px) and (max-width: 970px){


  .container-pontocard {
    flex-direction: column;
    gap: 50px;
  }

  .box-beneficios{
    width: 100%;
  }

  .beneficios {
    order: 2; /* fica depois */
  }

  .card {
    order: 1; /* fica primeiro */
  }

   .br-controlado {
    display: none;
  }
}



@media (min-width: 500px) and (max-width: 599px){


  .container-pontocard {
    flex-direction: column;
    gap: 50px;
  }

  .box-beneficios{
    width: 100%;
  }

  .beneficios {
    order: 2; /* fica depois */
  }

  .card {
    order: 1; /* fica primeiro */
  }

   .br-controlado {
    display: none;
  }
}



@media (min-width: 400px) and (max-width: 499px){


  .container-pontocard {
    flex-direction: column;
    gap: 50px;;
    width: 100%;
  }

  .box-beneficios{
    width: 100%;
  }

  .box-beneficios ul {
    grid-template-columns: 1fr;
  }

  .beneficios {
    order: 2; /* fica depois */
    width: 100%;
  }

  .card {
    order: 1; /* fica primeiro */
  }

   .br-controlado {
    display: none;
  }

  h1{
    font-size: 22px !important;
  }

  h2{
    font-size: 22px !important;
  }

  .logo{
    width: 80px;
  }

  .mensagem{
    font-size: 12px !important;
  }
}



@media (min-width: 350px) and (max-width: 399px){
  .logo{
    width: 80px;
  }

  .container-pontocard {
    flex-direction: column;
    gap: 50px;;
    width: 100%;
  }

  .box-beneficios{
    width: 100%;
  }

  .box-beneficios ul {
    grid-template-columns: 1fr;
  }

  .beneficios {
    order: 2; /* fica depois */
    width: 100%;
  }

  .card {
    order: 1; /* fica primeiro */
  }

   .br-controlado {
    display: none;
  }

  h1{
    font-size: 18px !important;
  }

  h2{
    font-size: 18px !important;
  }

  h3{
    font-size: 16px !important;
  }

  span{
    font-size: 13px !important;
  }
  
  .mensagem{
    font-size: 12px !important;
  }

  .card p {
    font-size: 15px !important;
  }

  input,select, button{
    font-size: 15px !important;
  }

  .footer{
    font-size: 12px;
  }



}



@media (max-width: 349px){
  .logo{
    width: 80px;
  }

  .container-pontocard {
    flex-direction: column;
    gap: 50px;;
    width: 100%;
  }

  .box-beneficios{
    width: 100%;
  }

  .box-beneficios ul {
    grid-template-columns: 1fr;
  }

  .beneficios {
    order: 2; /* fica depois */
    width: 100%;
  }

  .card {
    order: 1; /* fica primeiro */
  }

   .br-controlado {
    display: none;
  }

  h1{
    font-size: 16px !important;
  }

  h2{
    font-size: 16px !important;
  }

  h3{
    font-size: 15px !important;
  }

  span{
    font-size: 13px !important;
  }
  .card p {
    font-size: 13px !important;
  }

  input,select, button{
    font-size: 13px !important;
  }

  .footer{
    font-size: 10px;
  }

    .mensagem{
      font-size: 12px !important;
    }

}