/* ========================= 
   RESPONSIVE CSS COMPLETO CORRIGIDO
========================= */

/* =========================
   MOBILE PHONE (até 768px)
========================= */
@media (max-width: 768px) {

  body {
    overflow-x: hidden !important;
  }

  /* Banner */
  .banner {
    background-size: cover !important;
    padding: 20px 5% !important;
    min-height: auto !important;
    text-align: center;
  }

  #banner .single_banner img {
    width: 70% !important;
    max-width: 90% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  .single_banner_text h1 {
    font-size: 1.2rem !important;
  }

  .single_banner_text p {
    font-size: 1rem !important;
  }

  /* Imagens Abouts / Portões */
  .single_abouts_img img,
  #clients .clients_img img {
    width: 95% !important;
    margin: 0 auto !important;
  }

  /* Botões join */
  .main_joine_content .main_joinus a {
    width: 80% !important;
    margin: 20px auto !important;
  }

  /* Footer */
  #footer .single_footer img.spiral-logo {
    width: 25% !important;
    max-width: 80px !important;
  }

  /* CONTACTOS */
  #contactos .single_customiz {
    text-align: center !important;
    margin-bottom: 20px !important;
  }

  #contactos .single_customiz img {
    width: 25% !important;
    max-width: 120px !important;
    margin: 0 auto 10px auto !important;
  }

  #contactos .single_customiz p {
    font-size: 0.9rem !important;
  }
} /* <-- FECHA MOBILE */


/* =========================
   TABLET (769px a 991px)
========================= */
@media (min-width: 769px) and (max-width: 991px) {

  #banner .single_banner img {
    width: 80% !important;
  }

  .single_abouts_img img,
  #clients .clients_img img {
    width: 90% !important;
  }

  #footer .single_footer img.spiral-logo {
    width: 20% !important;
    max-width: 100px !important;
  }

  #contactos .single_customiz img {
    width: 20% !important;
    max-width: 100px !important;
  }

  #contactos .single_customiz p {
    font-size: 1rem !important;
  }
} /* <-- FECHA TABLET */


/* =========================
   DESKTOP LARGE (992px a 1199px)
========================= */
@media (min-width: 992px) and (max-width: 1199px) {

  #banner .single_banner img {
    width: 60% !important;
  }

  #clients .clients_img img {
    width: 85% !important;
  }

  #footer .single_footer img.spiral-logo {
    width: 15% !important;
  }

  #contactos .single_customiz img {
    width: 15% !important;
    max-width: 120px !important;
  }
} /* <-- FECHA LARGE */


/* =========================
   DESKTOP XL (1200px+)
========================= */
@media (min-width: 1200px) {

  #banner .single_banner img {
    width: 50% !important;
  }

  #clients .clients_img img {
    width: 90% !important;
  }

  #footer .single_footer img.spiral-logo {
    width: 12% !important;
  }

  #contactos .single_customiz img {
    width: 12% !important;
    max-width: 120px !important;
  }
} 


/* NÃO MOSTRAR O BACKGROUND NOS CONTACTOS EM MOBILE E TABLETS */
@media (max-width: 991px) {
  .main_customiz {
    background: none !important;
  }
}



/* =======================================
   MENU MOBILE E TABLET CORRIGIDO
======================================= */
@media (max-width: 991px) {

  /* Fundo branco apenas */
  .navbar-collapse {
    background: #ffffff !important;
    padding: 20px 0 !important;
    /* nada de z-index nem position nem display */
  }

  /* Links visíveis e bem separados */
  .navbar-nav > li > a {
    color: #000 !important;
    padding: 12px 20px !important;
    font-size: 1.1rem !important;
    display: block !important;
  }

  /* Garantir que o banner fica atrás do menu */
  #banner, 
  .banner, 
  header,
  .main_header {
    z-index: 1 !important;
    position: relative !important;
  }

  /* Navbar mantém comportamento original */
  .navbar {
    /* sem alterações */
  }
}