/* ============================
   MEDIA QUERIES ESSENCIAIS
============================= */

/* Telas grandes: desktops acima de 1200px */
@media screen and (min-width: 1200px) {
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Impede rolagem horizontal */
  width: 100%;
} /* Layout amplo, fontes maiores, espaçamento generoso */

}

/* Telas médias: laptops e tablets em paisagem (entre 992px e 1199px) */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Impede rolagem horizontal */
  width: 100%;
}/* Ajustes para largura intermediária */
}

/* Telas pequenas: tablets em retrato e celulares grandes (entre 768px e 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {

  /* Redução de fontes, reorganização de colunas */
  * {
    font-size: 17px;
  }

  .section_img_form {
    flex-direction: column-reverse;
  }

  form {
    width: 100% !important;
    border-radius: 10px !important;

  }

  .section_img_form img {
    width: 500px;
    height: 400px;
    margin: 0 auto;
    margin-top: 0;
    border-radius: 10px;

  }


html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Impede rolagem horizontal */
  width: 100%;
}
}

/* Telas muito pequenas: celulares padrão (até 767px) */
@media screen and (max-width: 767px) {
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Impede rolagem horizontal */
  width: 100%;
}
  /* Menu mobile, empilhamento de elementos, botões maiores */
  * {
    font-size: 17px;
  }
  .servicos_content h1{
    font-size: 40px;
  }
  .section_img_form {
    flex-direction: column-reverse;

  }
  .div_group_images_sobre_nos img {
   
  }
  .sobre_nos_content{
    background-color: transparent;
  }
  .barra {
    margin: 30px 0px;
  }

  .grafico-container {
    gap: 300px;
  }

  .grafico-container h2 {
    font-size: 30px;
  }

  .grafico-container h2 i {
    font-size: 30px;
    color: red;
  }

  form {
    max-width: 600px;
    max-height: 1000px;
    padding: 30px 20px !important;
    border-radius: 10px !important;
  }

  form h2 {
    margin-bottom: 30px !important ;
    width: 100%;
    font-size:1.6rem !important;
  }

  form h2 i {
    display: none !important;
  }

  .section_img_form img {
    max-width: 360px;
    max-height: 350px;
    border-radius: 10px;
  }

  .sobre_nos_content {
    padding: 20px;
  }

  .sobre_nos_content .div_group_images_sobre_nos img {
    width: 100%;
    height: 150px;

  }

  .div_group_text_sobre_nos h2 {
    font-size: 2.5rem;
 

  }

  .div_group_text_sobre_nos h2 span {
    font-size: 2.5rem;
  }

  .subtitle_sobre_nos {
    font-size: 18px;
  }

  .hs-section {
    max-width: 600px;
    padding: 0;
  }

  .hs-container {
    padding: 20px !important;
  }



  .hs-container .hs-text {
padding: 0;
    text-align: start !important;
    font-size: 20px;
  }

  .hs-container .hs-text ul li {
    font-size: 20px;
    gap: 20px;
    align-items: center;
  }
  iframe{
    width: 100%;
  }
}

/* Telas extra pequenas: celulares compactos (até 480px) */
@media screen and (max-width: 480px) {
  html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Impede rolagem horizontal */
  width: 100%;
}/* Fontes menores, imagens otimizadas, layout vertical */
}

/* Telas mínimas: dispositivos muito estreitos (até 320px) */
@media screen and (max-width: 320px) {
  html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Impede rolagem horizontal */
  width: 100%;
}/* Ajustes extremos para acessibilidade e legibilidade */
}