/*
 * Ajustes responsivos para telas de notebook (<=1400px)
 * Corrige elementos grandes em telas HD 1366x768.
 */


/* =============================================================
   1. MARGEM LATERAL GERAL — aplicada em secoes (nao no header)
      Usamos "section .container" para nao quebrar o menu de topo.
   ============================================================= */
@media (max-width: 1400px) {

  /* Padding lateral nas secoes, preservando o header */
  section .container {
    padding-left: 100px;
    padding-right: 100px;
  }

  /* Garante que o header nao receba o padding extra */
  .header-area .container,
  .header-area .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Hero: restaura espaco com o menu (nao reduz pt-120 no hero) */
  .hero.pt-120 {
    padding-top: 120px;
  }

  /* Titulos de secao */
  .sec-title .title      { font-size: 36px; }
  .sec-title--two .title { font-size: 36px; line-height: 44px; }
  .sec-title--four .title{ font-size: 46px; }

  /* Hero */
  .hero-style-two .xb-hero .xb-item--title  { font-size: 40px; line-height: 48px; margin-bottom: 24px; }
  .hero-style-two .xb-hero .xb-item--content{ font-size: 17px; font-weight: 600; }
  .hero-style-two .xb-hero .xb-item--item li{ font-size: 15px; }

  /* Frase "Da infraestrutura..." — igual ao paragrafo do hero */
  .sec-title--two .content {
    font-size: 17px;
    font-weight: 600;
    line-height: 26px;
  }

  /* Espacamentos de secao (exceto hero que foi tratado acima) */
  .pb-120 { padding-bottom: 80px; }
  .pt-150 { padding-top: 90px; }
  .pb-150 { padding-bottom: 90px; }
  .pt-100 { padding-top: 70px; }
  .pb-100 { padding-bottom: 70px; }
  .mt-120 { margin-top: 80px; }
  .mb-120 { margin-bottom: 80px; }

  /* Ultimas materias — titulo dos cards de blog */
  .hd-blog .xb-item--title { font-size: 22px; }

  /* FAQ — pergunta do accordion */
  .xb-faq .accordion_box .block .acc-btn {
    font-size: 16px;
    padding: 20px 40px;
  }
  /* FAQ — resposta */
  .xb-faq .accordion_box .block .content {
    font-size: 14px;
    line-height: 24px;
    padding: 20px 100px 28px 30px;
  }
}


/* =============================================================
   2. MEGAMENU DE SERVICOS — reduz para notebooks
   ============================================================= */
@media (max-width: 1400px) {

  /* Painel do megamenu mais estreito */
  .mega_menu_wrapper {
    max-width: 860px;
  }

  /* Padding interno do painel */
  .mega_menu_wrapper_inner {
    padding: 18px;
    padding-bottom: 22px;
  }

  /* Cada card de servico: menos padding */
  .mega_menu_wrapper .iconbox_block_2 {
    padding: 10px !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
  }

  /* Titulo do servico */
  .mega_menu_wrapper .iconbox_block_2 .iconbox_title {
    font-size: 14px;
    margin: 4px 0 0;
  }

  /* Descricao do servico */
  .mega_menu_wrapper .iconbox_block_2 .description {
    font-size: 12px;
  }

  /* Icone do servico */
  .mega_menu_wrapper .iconbox_block_2 .icon_title_wrap {
    gap: 8px;
    margin-bottom: 6px;
  }
}


/* =============================================================
   3. BOTOES — reduz padding/font-size
   ============================================================= */
@media (max-width: 1400px) {

  .thm-btn              { font-size: 16px; }
  .thm-btn--aso         { padding: 18px 28px; }

  .thm-btn--header,
  .thm-btn--header-azul { font-size: 15px; padding: 12px 18px !important; }

  .thm-btn--fill_icon   { padding: 18px 0; }
  .thm-btn--fill_icon .xb-item--icon { height: 36px; width: 36px; margin: 0 16px; }
  .thm-btn--fill_icon .xb-item--text { font-size: 16px; }

  .cp-btn               { font-size: 16px; padding: 18px 30px; }
}


/* =============================================================
   3. CARDS DE SERVICO — reduz altura fixa
   ============================================================= */
@media (max-width: 1400px) {

  .service-box                                    { min-height: 260px; }
  .service-box .service-item                      { height: 300px; min-height: 300px; }
  .service-box .service-item .xb-item--holder.mb-85 { margin-bottom: 40px !important; }
  .service-box .service-item .xb-item--title      { font-size: 18px; }
}


/* =============================================================
   4. CARDS DE CASOS DE SUCESSO
   — slider vai ate a borda (sem margem lateral na secao)
   — metricas ficam na lateral em linha horizontal (nao empilhadas)
   — fonte reduzida para caber na viewport 1366x768
   ============================================================= */
@media (max-width: 1400px) {

  /* Padding interno reduzido */
  .sa-project-item {
    padding: 28px 40px !important;
  }

  /* Impede que o flex quebre a linha — metricas sempre a direita */
  .sa-project-item .xb-item--inner.ul_li_between {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 32px;
  }

  /* Coluna de texto: nao expande demasiado */
  .sa-project-item .xb-item--project_title {
    max-width: 52%;
    flex-shrink: 0;
  }

  /* Titulo do caso */
  .sa-project-item .xb-item--title {
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 8px;
  }

  /* Descricao */
  .sa-project-item .xb-item--content {
    font-size: 13px;
    line-height: 20px;
  }

  /* Subtitulo (nome do cliente) */
  .sa-project-item .xb-item--project_title h3 {
    font-size: 12px;
    margin-bottom: 4px !important;
  }

  /* Botao ver estudo */
  .sa-project-item .xb-btn {
    margin-top: 14px !important;
  }

  /* Coluna de metricas — exibe em LINHA HORIZONTAL para economizar altura */
  .sa-project-item .xb-item--item-box {
    display: flex !important;   /* sobrescreve d-lg-block */
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 0 !important;
    align-self: center;
    flex: 1;
    min-width: 0;
  }

  /* Cada bloco de metrica */
  .sa-project-item .xb-item--item {
    padding-left: 14px;
    margin-top: 0;
    max-width: 160px;
    min-width: 110px;
    flex: 1;
  }

  /* Numero grande (ex: 82, 80%, 98%) */
  .sa-project-item .xb-item--number {
    font-size: 22px;
    margin-bottom: 5px;
    line-height: 1.2;
  }

  /* Descricao da metrica */
  .sa-project-item .xb-item--text {
    font-size: 12px;
    line-height: 1.4;
  }
}


/* =============================================================
   5. AJUSTES PARA <=1199px (notebooks menores)
   ============================================================= */
@media (max-width: 1199px) {

  section .container { padding-left: 36px; padding-right: 36px; }

  .sec-title .title          { font-size: 32px; margin-bottom: 10px; }
  .sec-title--five .title    { font-size: 30px; line-height: 44px; }

  .sa-project-item           { padding: 22px 28px !important; }
  .sa-project-item .xb-item--project_title { max-width: 50%; }

  .service-box .service-item { height: 270px; min-height: 270px; }

  .hd-blog .xb-item--title { font-size: 18px; }

  .pt-120 { padding-top: 70px; }
  .pb-120 { padding-bottom: 70px; }
  .pt-150 { padding-top: 80px; }
  .pb-150 { padding-bottom: 80px; }
}