/* ✅ Código CORRIGIDO */
@import url('https://googleapis.com');
@import url("https://fonts.googleapis.com/css?family=Raleway:100,300,400,500,700,900");


.container {
  max-width: 1200px;
}



body {
	font-family: "Raleway", sans-serif;
	font-size: 1.2em;
  color: #707070;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
a {
  transition: all 0.3s ease;
  color: #38B;
}

a:hover,
a:focus {
  text-decoration: none;
  color: #D40;
}

a:focus {
  outline: none;
}

.btn {
  padding: 8px 32px;
}

.btn:hover {
  background-color: #ced4da;
}

blockquote {
  font-size: 0.86em;
  line-height: 1.8em;
}

.tm-section-pad-top {
  padding-top: 80px;
  padding-bottom: 40px;
}

.tm-content-box {
  padding-top: 20px;
  padding-bottom: 40px;
}

.tm-text-primary {
  color: #37A;
}

.tm-font-big {
  font-size: 1.25rem;
}

.tm-btn-primary {
  color: white;
  background-color: #369;
  padding: 14px 30px;
}

.tm-btn-primary:hover,
.tm-btn-primary:focus {
  color: white;
  background-color: #38B;
}

/* Navbar */

.tm-navbar {
  position: fixed;
  width: 100%;
  z-index: 1000;
  background-color: transparent;
  transition: all 0.3s ease;
}

.tm-navbar.scroll {
  background-color: white;
  border-bottom: 1px solid #e9ecef;
}

.navbar-brand {
  color: white;
  font-size: 1.4rem;
  font-weight: bold;
}

.navbar-brand:hover,
.tm-navbar.scroll .navbar-brand:hover {
  color: #38B;
}

.tm-navbar.scroll .navbar-brand {
  color: #369;
}

.nav-item {
  list-style: none;
}

.tm-nav-link {
  color: white;
}

.tm-navbar.scroll .tm-nav-link {
  color: #369;
}

.tm-navbar.scroll .tm-nav-link:hover,
.tm-navbar.scroll .tm-nav-link.current,
.tm-nav-link:hover {
  color: #FFF;
  background-color: #369;
}

.navbar-toggler {
  border: 1px solid white;
  padding-left: 10px;
  padding-right: 10px;
}

.navbar-toggler-icon {
  color: white;
  padding-top: 6px;
}

.tm-navbar.scroll .navbar-toggler {
  border: 1px solid #707070;
}

.tm-navbar.scroll .navbar-toggler-icon {
  color: #707070;
}

/* Hero */

#infinite {
	background-color: #222;
  background-image: url(perfil2.jpg.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  
  
  background-position: center;
  height: 100vh;
  min-height: 375px;
  position: relative;
}

@media (min-height: 600px) and (min-width: 1920px) {
  #infinite {
    background-size: cover;
  }
}

@media (min-height: 830px) {
  #infinite {
    background-position: center -210px;
  }
}

@media (min-height: 680px) and (max-height: 829px) {
  #infinite {
    background-position: center -300px;
  }
}

@media (min-height: 500px) and (max-height: 679px) {
  #infinite {
    background-position: center -400px;
  }
}

@media (max-height: 499px) {
  #infinite {
    background-position: center -450px;
  }
}

.tm-hero-text-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.tm-hero-text-container-inner {
  margin-top: -90px;
}

.tm-hero-title {
  font-size: 3.5rem;
  text-shadow: 2px 2px 2px #333;
}

.tm-hero-subtitle {
  text-shadow: 2px 2px 2px #333;
}

.tm-intro-next {
  position: absolute;
  bottom: 100px;
  left: 0;
  right: 0;
}

@media (max-height: 480px) {
  .tm-hero-text-container-inner {
    margin-top: -40px;
  }

  .tm-intro-next {
    bottom: 20px;
  }
}

.tm-down-arrow-link {
  display: block;
  margin-top: 18%;
}

.tm-down-arrow {
  	color: #FFF;
    cursor: pointer;
    background: #357;
    padding: 15px 40px;
    transition: all 0.3s ease;
}

.tm-down-arrow:hover,
.tm-down-arrow:focus {
  color: #FFF;
  background: #37A;
  padding: 20px 50px;
}

/* Introduction */

#introduction {
  padding-bottom: 100px;
}

.tm-section-title {
  font-size: 2.6rem;
  font-weight: normal;
}

.tm-intro-text {
  font-size: 1.2rem;
}

.tm-icon {
  display: block;
  color: #37A;
}

.tm-continue {
	padding: 20px 0 30px 0;
}

/* Testimonials */
#testimonials {
  color: white;
  background-image: url(../img/infinite-loop-02.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
}

@media (max-width: 991px) {
  #testimonials {
    background-image: url(../img/infinite-loop-02-mobile.jpg);
  }
}

.tm-testimonials-content {
  position: relative;
  z-index: 100;
}

.tm-bg-overlay {
  width: 100%;
  height: 100%;
  background: rgba(20, 70, 80, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.tm-testimonials-carousel {
  max-width: 1050px;
  margin: 0 auto;
}

.tm-testimonial-item {
  max-width: 290px;
  margin-left: 35px;
  margin-right: 35px;
}

.tm-testimonial-item img {
  border-radius: 50%;
  margin-bottom: 35px;
}

.tm-testimonial-item figcaption {
  text-align: right;
  font-style: italic;
  font-size: 1.1rem;
}

/* Work */

.tm-section-desc {
  max-width: 650px;
  width: 100%;
  font-size: 0.9rem;
}

.tm-gallery-container {
  padding-top: 70px;
  padding-bottom: 120px;
}

.tm-gallery-item {
  margin: 0 15px;
}

.slick-dots {
  bottom: -65px;
}

.slick-dots li {
  margin: 0 13px;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before,
.slick-dots li.slick-active button:before {
  opacity: 1;
  color: #3ba0dd;
}

.tm-testimonials-carousel .slick-dots li button:before {
  color: white;
  opacity: 0.5;
}

.tm-testimonials-carousel .slick-dots li button:hover:before,
.tm-testimonials-carousel .slick-dots li button:focus:before,
.tm-testimonials-carousel .slick-dots li.slick-active button:before {
  color: white;
  opacity: 1;
}

.slick-dots li button:before {
  font-size: 18px;
}

/* Hover Effect */
/* Common style */
.grid figure {
  position: relative;
  float: left;
  overflow: hidden;
  background: #3085a3;
  text-align: center;
  cursor: pointer;
}

.grid figure img {
  position: relative;
  display: block;
  width: 100%;
  
  /* Defina a altura padrão desejada para os cards (ex: 250px ou 300px) */
  height: 280px; 
  
  /* TRUQUE PRINCIPAL: Preenche o espaço e corta os excessos sem distorcer */
  object-fit: cover; 
  
  /* Mantém o efeito padrão do tema */
  opacity: 0.8;
}

.grid figure figcaption {
  padding: 2em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
  pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
figure.effect-honey {
  background: #4a3753;
  width: 100%;       /* Ocupa toda a largura da coluna do Bootstrap */
  max-width: 100%;   /* Remove o limite antigo de 220px para preencher melhor a tela */
  height: 280px;     /* Deve ser a mesma altura definida na imagem acima */
}
/* Força o alinhamento perfeito de todas as colunas da galeria */
.tm-gallery-container .row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* Garante que todas as colunas tenham a mesma altura */
}

/* Ajusta o comportamento das figuras para não quebrarem o layout */
.tm-gallery-container .grid figure {
  float: none; /* Remove o float antigo que causa o efeito "caído" */
  display: inline-block;
  vertical-align: top;
  width: 100%;
  margin: 0 0 30px 0; /* Adiciona um espaçamento padrão embaixo de cada card */
  box-sizing: border-box;
}
/* Define um espaçamento padrão e idêntico para todos os itens da galeria */
.tm-gallery-container .grid figure {
  margin: 15px !important; /* Cria um espaço uniforme em todos os lados (cima, baixo, esquerda, direita) */
  box-sizing: border-box;
}

/* Centraliza os itens caso eles quebrem para a linha de baixo */
.tm-gallery-container .row {
  justify-content: center;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
}

.grid figure h2 {
  word-spacing: -0.15em;
  font-size: 0.9em;
  font-weight: 300;
}

.grid figure h2 span {
  font-weight: 600;
}

.grid figure h2,
.grid figure p {
  margin: 0;
}

.grid figure p {
  letter-spacing: 1px;
  font-size: 68.5%;
}

/*---------------*/
/***** Honey *****/
/*---------------*/

figure.effect-honey {
  background: #4a3753;
  max-width: 220px;
}

figure.effect-honey img {
  opacity: 1;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}

figure.effect-honey:hover img {
  opacity: 0.4;
}

figure.effect-honey figcaption::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: #38C;
  content: "";
  -webkit-transform: translate3d(0, 10px, 0);
  transform: translate3d(0, 10px, 0);
}

figure.effect-honey h2 {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1em 1.5em;
  width: 100%;
  text-align: left;
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
}

figure.effect-honey h2 i {
  font-style: normal;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
}

figure.effect-honey figcaption::before,
figure.effect-honey h2 {
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}

figure.effect-honey:hover figcaption::before,
figure.effect-honey:hover h2,
figure.effect-honey:hover h2 i {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.tm-container-gallery {
	padding-top: 30px;
	}

/* Contact */

/* Contact — Corrigido contra desfoques e sumiços */
#contact {
  color: white;
  position: relative;
  
  /* Mantém o fundo transparente para usar o pseudo-elemento fixo */
  background: transparent !important; 
}

/* Cria a camada de fundo isolada que não embaça ao rolar */
#contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* Sua imagem de contato original */
  background-image: url(contato.jpg); 
  
  /* Mantém ela fixa na tela de forma leve para o navegador */
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  
  /* Envia para trás do texto do formulário */
  z-index: -1; 
  
  /* TRUQUE ANTI-DESFOQUE: Ativa aceleração por hardware (GPU) */
  will-change: transform;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

.contact-item {
  margin-left: 20px;
  margin-bottom: 50px;
}

.item-link {
  display: flex;
  align-items: center;
}

.item-link i,
.item-link span {
  color: white;
  transition: all 0.3s ease;
}

.item-link:hover i,
.item-link:hover span {
  color: #3496d8;
}

.tm-input {
	margin: 0 0 20px 0;
	width: 90%;
  padding: 8px 20px;
  border-radius: 6px;
  border: 1px solid white;
  background: transparent;
  color: white;
}

.tm-btn-submit {
	font-size: 0.9em;
	color: #fff;
	background-color: #369;
	width: 50%;
	margin-bottom: 60px;
}

.tm-btn-submit:hover {
	color: #fff;
	background-color: #38B;
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: white;
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: white;
}

.tm-footer {
  position: absolute;
  bottom: 35px;
  left: 0;
  right: 0;
  padding: 0 15px;
}

.tm-footer a {
	color: #fff;
}

.tm-footer a:hover {
	color: #9CF;
}

.tm-footer-link {
  color: white;
}

.tm-footer-link:hover,
.tm-footer-link:focus {
  color: #38B;
  text-decoration: none;
}

p {
  line-height: 1.9;
}

@media (min-width: 768px) {
  .tm-intro-text-container {
    padding-left: 0px;
  }

  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 30px;
    padding-left: 30px;
  }
}

@media (min-width: 1200px) {
  .container {

    max-width: 1275px;
  }

  .tm-container-gallery {
  
    max-width: 1290px;
  }

  .tm-container-contact {
    max-width: 1063px;
  }
}

@media (max-width: 991px) {
  .tm-intro-text-container {
    padding-left: 15px;
    padding-top: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .tm-intro-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .tm-btn-submit {
    margin-left: 0;
    margin-top: 20px;
  }
}

@media (max-width: 767px) {

  .navbar-nav {
    max-width: 200px;
    text-align: right;
  }

  .navbar-collapse {
    background-color: rgb(255, 255, 255);
    padding: 10px;
    border-radius: 3px;
  }

  .navbar-collapse .nav-link {
    color: #707070;
	padding-right: 20px;
  }
}

@media (max-width: 300px) {
  .tm-gallery-container {
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
  }

  .tm-gallery-container-2 {
    max-width: 350px;
  }

  .slick-dots li {
    margin: 0 8px;
  }

  .tm-gallery-item {
    margin: 0;
  }
}
.tm-icon-big {
    color: black; /* Substitua pelo código da cor que você deseja */
}
p {
    color: #4a4a4a !important;
    font-size: 1.15rem !important;
    line-height: 1.6 !important;
}
/* Alvo específico para os parágrafos dentro da seção de contatos */
.tm-contact-section p, 
#contact p {
    color: #ffffff !important; /* Força a cor branca */
}
/* Tentativa com as classes padrão desse tipo de template */
.tm-welcome-section p,
.tm-welcome-container p,
.tm-banner-section p,
.tm-home-section p,
.tm-hero-text-container p {
    color: #ffffff !important;
    font-size: 2.0rem !important;
}
#testimonials, 
/* Oculta APENAS a faixa divisória pelo ID dela, deixando os contatos normais */
#testimonials {
    display: none !important;
}

.tm-gallery-item {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
    border-radius: 8px; /* Opcional: deixa as bordas levemente arredondadas */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important; /* Suaviza o movimento */
}

.tm-container-gallery {
    max-width: 1200px !important; /* Define uma largura máxima confortável para a tela */
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
}
.mfp-img {
    max-height: 80vh !important; /* A foto nunca vai ocupar mais que 80% da altura da tela */
    max-width: 90% !important;  /* Deixa uma margem confortável nas laterais */
    width: auto !important;     /* Mantém a proporção real da foto sem distorcer */
    height: auto !important;    /* Mantém a proporção real da foto sem distorcer */
    margin: 0 auto !important;
    display: block !important;
    padding: 40px 0 !important; /* Cria um respiro em cima e embaixo */
}

/* 2. Centraliza perfeitamente a caixa que segura a imagem */
.mfp-content {
    vertical-align: middle !important;
}

/* 3. Garante que os botões de navegação e o fundo acompanhem o tamanho correto */
.mfp-container {
    padding: 0 20px !important;
}
.grid figure figcaption h2,
.grid figure figcaption h2 i,
.effect-honey h2 {
    font-weight: 400 !important; /* Força o peso da fonte para normal/fino */
}
/* --- ESTILO PROFISSIONAL INSPIRADO NA BLIZZARD --- */

/* 1. Fundo da Página (O tom escuro e gélido profundo da Blizzard) */
body, .tm-main-content {
    background-color: #0b0e14 !important; /* Azul escuro quase preto oficial */
    color: #ade0f6 !important; /* Texto claro com leve toque azulado gélido */
}

/* 2. Menu de Navegação Superior */
.navbar, .tm-nav {
    background-color: #07090e !important; /* Um tom ainda mais escuro para a barra */
    border-bottom: 2px solid #00aeff; /* Linha fina azul elétrica clássica */
}
.tm-site-name {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(0, 174, 255, 0.5); /* Leve brilho de interface nos logos */
}
.nav-link {
    color: #94a3b8 !important;
    font-weight: 600;
}
.nav-link:hover, .nav-link.active {
    color: #00aeff !important; /* Destaque azul elétrico ao passar o mouse */
}

/* 3. Título Principal ("Soluções em Impressão 3D") */
h1, .tm-text-primary {
    color: #ffffff !important;
    text-transform: uppercase; /* Deixa os títulos imponentes como nos jogos da Blizzard */
    letter-spacing: 1px;
}

/* 4. Descrições e Textos de Suporte */
p, .tm-text-gray {
    color: #8a99ad !important; /* Cinza fosco de alta leitura usado nas notícias da Blizzard */
}

/* 5. Subtítulos dos Serviços ("Protótipos", "Modelagem", etc.) */
h2, h3, .tm-service-title {
    color: #ffffff !important;
}

/* 6. Ícones (O Azul Icônico de Destaque da Blizzard) */
.tm-service-icon, .fa, .fab, .fas {
    color: #00aeff !important; /* Tom azul neon controlado e limpo */
    filter: drop-shadow(0 0 4px rgba(0, 174, 255, 0.3));
}

/* 7. Botões personalizados (Estilo o botão "Compre Agora" deles) */
.btn-disponibilidade {
    background-color: #00aeff !important;
    color: #ffffff !important;
    border: 1px solid #0077b6 !important;
    text-transform: uppercase;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0, 174, 255, 0.2);
    transition: all 0.2s ease;
}
.btn-disponibilidade:hover {
    background-color: #0077b6 !important;
    box-shadow: 0 0 15px rgba(0, 174, 255, 0.5);
}
/* Ajuste na barra de navegação principal */
.navbar, .tm-nav {
    background-color: #07090e !important;
    border-bottom: 2px solid #00aeff !important;
    box-shadow: 0 4px 20px rgba(0, 174, 255, 0.15); /* Sombra sutil azul sob o menu */
    padding: 15px 0 !important;
}

/* Estilização base de cada botão do menu */
.nav-link {
    color: #94a3b8 !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.9rem;
    padding: 10px 20px !important;
    margin: 0 5px;
    border: 1px solid transparent;
    border-radius: 4px; /* Cantos levemente suavizados */
    background: transparent !important; /* Remove o fundo azul sólido antigo */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Transição suave de interface */
}

/* Efeito ao passar o mouse (Hover) e quando o botão está ativo (Active) */
.nav-link:hover, .nav-link.active {
    color: #ffffff !important;
    background: rgba(0, 174, 255, 0.08) !important; /* Fundo translúcido tecnológico */
    border: 1px solid rgba(0, 174, 255, 0.4) !important; /* Borda fina brilhante */
    box-shadow: inset 0 0 10px rgba(0, 174, 255, 0.2), 0 0 10px rgba(0, 174, 255, 0.2); /* Brilho neon interno e externo */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6); /* Texto levemente brilhante */
}
.tm-gallery {
    display: grid !important;
    /* Cria colunas automáticas com tamanho mínimo de 220px e máximo de 1 fração igual */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 20px !important; /* Espaço confortável entre os cards */
    padding: 20px 0 !important;
}

/* Garante que os cards e links se adaptem ao novo tamanho do Grid */
.tm-gallery-item, .tm-gallery a {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: block !important;
}
/* 1. Importa as fontes profissionais do Google Fonts */
@import url('https://googleapis.com');

/* 2. Aplica a fonte Inter em todo o texto padrão do site */
body, p, span, .nav-link {
    font-family: 'Inter', sans-serif !important;
    letter-spacing: -0.01em; /* Ajuste milimétrico para leitura em modo escuro */
}

/* 3. Aplica a fonte Orbitron para dar o visual de alta tecnologia nos títulos */
h1, h2, h3, .tm-text-primary, .tm-site-name {
    font-family: 'Orbitron', sans-serif !important;
    letter-spacing: 1px; /* Espaçamento imponente entre as letras */
}
/* 1. O container do item ganha cantos arredondados, bordas sutis e sombra */
.tm-gallery-item {
    border-radius: 12px !important; /* Suaviza as pontas duras dos cards */
    overflow: hidden !important;    /* Garante que a imagem não saia das bordas redondas */
    border: 1px solid rgba(255, 255, 255, 0.05) !important; /* Borda cirúrgica quase invisível */
    background: #0f1219 !important; /* Fundo escuro para dar contraste se a imagem carregar */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; /* Sombra tridimensional profunda */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important; /* Transição ultra suave */
}

/* 2. Efeito na imagem: ela cresce levemente ao passar o mouse (Interatividade) */
.tm-gallery-item img {
    border-radius: 12px !important;
    transition: transform 0.5s ease !important;
}

/* 3. Comportamento ao passar o mouse (Hover) */
.tm-gallery a:hover .tm-gallery-item {
    transform: translateY(-8px) !important; /* O card flutua levemente para cima */
    border-color: rgba(0, 174, 255, 0.4) !important; /* A borda acende no azul Blizzard */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 15px rgba(0, 174, 255, 0.15) !important; /* Brilho de interface sutil */
}

.tm-gallery a:hover .tm-gallery-item img {
    transform: scale(1.05) !important; /* Efeito de aproximação cinematográfica na foto */
}

/* 4. Ajuste no texto "Verifique disponibilidade" (Figcaption) */
figcaption {
    background: linear-gradient(to top, rgba(7, 9, 14, 0.9) 0%, rgba(7, 9, 14, 0.2) 100%) !important; /* Degradê de cinema sobre a foto */
    border-radius: 12px !important;
}

figcaption h2 i {
    font-family: 'Orbitron', sans-serif !important; /* Mantém a fonte tecnológica integrada */
    font-size: 1.1rem !important;
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}
.divisor-tecnologico {
    height: 1px;
    width: 100%;
    background: linear-gradient(to right, transparent, rgba(0, 174, 255, 0.5), transparent);
    box-shadow: 0 0 10px rgba(0, 174, 255, 0.3);
    margin: 60px 0;
}
/* Aplica a linha de luz diretamente na seção do catálogo para separá-la do Sobre */
#gallery, .tm-section-2, .tm-gallery-container { 
    position: relative;
    /* Cria um espaçamento confortável entre o texto e a linha */
    padding-top: 80px !important; 
    margin-top: 40px !important;
}

/* Cria a linha cirúrgica brilhante usando um elemento virtual (Before) */
#gallery::before, .tm-section-2::before, .tm-gallery-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 5%;
    width: 90%; /* Deixa uma pequena folga nas laterais para o degradê sumir suavemente */
    height: 1px;
    /* Degradê: transparente nas pontas e azul elétrico da Blizzard no centro */
    background: linear-gradient(to right, transparent, rgba(0, 174, 255, 0.6), transparent) !important;
    /* Efeito de brilho neon suave */
    box-shadow: 0 0 12px rgba(0, 174, 255, 0.4); 
}
.tm-contact-link, .tm-social-link {
    transition: transform 0.3s ease !important;
}

/* 1. WHATSAPP (Verde Oficial) */
.fa-whatsapp, 
[class*="whatsapp"] {
    color: #25D366 !important;
    filter: drop-shadow(0 0 5px rgba(37, 211, 102, 0.2)) !important;
}

/* 2. INSTAGRAM (Rosa/Roxo Oficial - Como o CSS não faz o degradê perfeito em ícones de fonte antiga, usamos o tom magenta principal) */
.fa-instagram, 
[class*="instagram"] {
    color: #E1306C !important;
    filter: drop-shadow(0 0 5px rgba(225, 48, 108, 0.2)) !important;
}

/* 3. FACEBOOK (Azul Oficial da Marca) */
.fa-facebook, .fa-facebook-f, 
[class*="facebook"] {
    color: #1877F2 !important;
    filter: drop-shadow(0 0 5px rgba(24, 119, 242, 0.2)) !important;
}
/* --- PADRONIZAÇÃO DE TAMANHO DO ÍCONE DO INSTAGRAM --- */

/* Alinha o tamanho do ícone com os outros blocos de contato */
.tm-contact-icon.fa-instagram, 
.tm-contact-icon.fab.fa-instagram {
    font-size: 32px !important;    /* Ajuste este valor caso os seus outros ícones sejam maiores ou menores */
    width: 40px !important;        /* Força uma largura fixa para alinhar os textos ao lado */
    text-align: center !important;  /* Centraliza o desenho do ícone dentro desse espaço */
    display: inline-block !important;
}
.fa-map-marker, 
.fa-map-marker-alt, 
.fa-map-pin,
[class*="map-marker"] {
    color: #ea4335 !important; /* O vermelho oficial de localização/Google Maps */
    filter: drop-shadow(0 0 5px rgba(234, 67, 53, 0.25)) !important; /* Brilho tecnológico vermelho */
}
/* --- BOTÃO SOLICITAR ORÇAMENTO ULTRA TECH --- */
.btn-orcamento-tech {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    font-family: 'Orbitron', sans-serif !important; /* Fonte tecnológica */
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff !important;
    background: rgba(0, 174, 255, 0.05) !important; /* Fundo semi-transparente */
    border: 1px solid rgba(0, 174, 255, 0.4) !important; /* Borda azul elétrica sutil */
    border-radius: 8px;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0, 174, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin-top: 20px;
    cursor: pointer;
}

/* Efeito ao passar o mouse (Hover) */
.btn-orcamento-tech:hover {
    background: #00aeff !important; /* Preenche com o azul elétrico da Blizzard */
    color: #07090e !important; /* Texto fica escuro para dar contraste perfeito */
    border-color: #00aeff !important;
    box-shadow: 0 0 20px rgba(0, 174, 255, 0.6); /* Brilho neon externo expandido */
    transform: translateY(-2px); /* Leve flutuação de interface */
}

/* Garante o espaçamento correto do ícone de cifrão dentro do botão */
.btn-orcamento-tech i {
    margin-right: 8px;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}
/* --- MELHORIA DE LEITURA NA CAPA (TEXT SHADOW) --- */
.tm-gallery-item-container h1, 
.tm-gallery-item-container p,
body > section.tm-section-1 p {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.85), 
                 -1px -1px 4px rgba(0, 0, 0, 0.9) !important;
}
/* --- BOTÃO ORÇAMENTO AMPLIADO E CENTRALIZADO --- */
.btn-orcamento-tech {
    display: flex !important;
    width: 360px !important; /* Aumentado de 280px para 360px para dar mais presença */
    max-width: 90% !important; /* Evita que o botão quebre em telas de celulares pequenos */
    height: 60px !important;  /* Aumentado de 50px para 60px de altura */
    
    margin: 50px auto 20px auto !important; /* Espaçamento confortável ao redor */

    align-items: center;
    justify-content: center;
    
    font-family: 'Orbitron', sans-serif !important;
    font-size: 1.15rem; /* Fonte aumentada para melhor leitura e impacto */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px; /* Espaçamento entre as letras ligeiramente maior */
    color: #ffffff !important;
    background: rgba(0, 174, 255, 0.05) !important;
    border: 1px solid rgba(0, 174, 255, 0.4) !important;
    border-radius: 8px;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0, 174, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
}

.btn-orcamento-tech:hover {
    background: #00aeff !important;
    color: #07090e !important;
    border-color: #00aeff !important;
    box-shadow: 0 0 25px rgba(0, 174, 255, 0.7);
    transform: translateY(-2px) !important;
}
a:has(.fa-whatsapp), a:has([class*="whatsapp"]),
a:has(.fa-instagram), a:has([class*="instagram"]),
a:has(.fa-facebook), a:has(.fa-facebook-f), a:has([class*="facebook"]),
.tm-social-link, /* Classe comum em templates para links sociais */
.contact-section a {
    display: inline-block !important; /* Força o link a aceitar movimentos verticais */
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; /* Deixa a subida suave */
}

/* Efeito ao passar o mouse: faz o link subir */
a:has(.fa-whatsapp):hover, a:has([class*="whatsapp"]):hover,
a:has(.fa-instagram):hover, a:has([class*="instagram"]):hover,
a:has(.fa-facebook):hover, a:has(.fa-facebook-f):hover, a:has([class*="facebook"]):hover,
.tm-social-link:hover,
.contact-section a:hover {
    transform: translateY(-8px) !important; /* Sobe o ícone em 8 pixels */
}
/* Seleciona os links do e-mail, mapa/localização e qualquer outro ícone de contato */
a:has(.fa-envelope), a:has(.fa-paper-plane),
a:has(.fa-map-marker-alt), a:has(.fa-map-pin), a:has(.fa-map),
a:has(.fa-phone), a:has(.fa-mobile-alt) {
    display: inline-block !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Efeito ao passar o mouse para e-mail e localização */
a:has(.fa-envelope):hover, a:has(.fa-paper-plane):hover,
a:has(.fa-map-marker-alt):hover, a:has(.fa-map-pin):hover, a:has(.fa-map):hover,
a:has(.fa-phone):hover, a:has(.fa-mobile-alt):hover {
    transform: translateY(-8px) !important;
}
/* Container que segura a imagem */
.container-topo-pelicula {
    position: relative !important;
    display: block;
    width: 100%;
    height: 100%;
}

/* A película escura propriamente dita */
.container-topo-pelicula::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.6) !important; /* 0.6 é o nível do escuro. Se quiser mais escuro, mude para 0.8 */
    z-index: 1 !important;
    pointer-events: none; /* Garante que cliques passem pela película */
}

/* Garante que a imagem ocupe o espaço correto */
.container-topo-pelicula img {
    display: block;
    width: 100%;
    height: auto;
}
@media (max-width: 768px) {
  h1 {
    font-size: 1.8rem; /* Diminui o tamanho do título principal */
  }
  h2 {
    font-size: 1.5rem; /* Diminui os subtítulos */
  }
}
@media (max-width: 768px) {
  .sua-classe-de-secao {
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 15px;
  }
}
@media (max-width: 768px) {
  .seu-formulario-container {
    width: 90%; /* Garante que não vai grudar 100% nas bordas do celular */
    margin: 0 auto;
  }
}
/* ==========================================================================
   CORREÇÕES ESPECÍFICAS PARA O CELULAR (COLE NO FINAL DO SEU ARQUIVO)
   ========================================================================== */
@media (max-width: 767px) {
    /* Força a imagem de topo aparecer com um tamanho bom no celular */
    #infinite {
        background-attachment: scroll !important; /* Desativa parallax que quebra no mobile */
        background-position: center center !important;
        background-size: cover !important;
        min-height: 100vh !important; /* Ocupa a tela inteira */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    /* Ajusta os textos do topo para não sumirem ou cortarem */
    .tm-hero-text-container {
        padding-top: 100px !important;
        display: block !important;
    }

    .tm-hero-title {
        font-size: 3rem !important; /* Diminui o título para caber na tela */
        margin-bottom: 15px !important;
    }

    .tm-hero-subtitle {
        font-size: 1.2rem !important;
        padding: 0 15px !important;
    }

    /* Corrige o menu do celular (Garante que os links apareçam ao abrir) */
    .navbar-collapse {
        background-color: rgba(0, 0, 0, 0.95) !important; /* Fundo escuro para dar leitura */
        padding: 15px !important;
        border-radius: 8px !important;
        margin-top: 10px !important;
    }

    .nav-item {
        text-align: center !important;
        margin: 10px 0 !important;
    }

    /* Impede que o site ganhe aquela barra de rolagem para os lados */
    body, html {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
/* ==========================================================================
   CORREÇÃO DA BARRA DE MENU E IMAGENS GRANDES (COLE NO FINAL DO ESTILO.CSS)
   ========================================================================== */
@media (max-width: 767px) {
    
    /* 1. CORREÇÃO DO MENU: Força a barra a fixar no topo da tela */
    .tm-navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 9999 !important; /* Garante que fique acima de tudo */
        background-color: rgba(0, 0, 0, 0.85) !important; /* Fundo escuro para leitura */
    }

    /* Empurra o texto do topo um pouco para baixo para o menu não cobrir o título */
    .tm-hero-text-container {
        padding-top: 140px !important;
    }

    /* 2. CORREÇÃO DAS IMAGENS: Ajusta o tamanho da galeria no celular */
    .tm-gallery-container {
        max-width: 100% !important;
        padding: 0 15px !important;
    }

    /* Força as imagens a ficarem em um tamanho adequado e centralizadas */
    .tm-gallery-item {
        max-width: 280px !important; /* Limita a largura máxima da foto */
        margin: 0 auto 20px auto !important; /* Centraliza e dá espaço para a foto de baixo */
    }

    .tm-gallery-item img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        border-radius: 8px !important; /* Deixa os cantos arredondados e modernos */
    }

    /* Ajusta a grade para colocar as fotos uma embaixo da outra perfeitamente */
    .grid.tm-gallery {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        max-width: 100% !important;
    }
}
  ENQUADRAMENTO DE TEXTOS E ESTILOS PARA MOBILE
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. Ajusta o container geral para não deixar o site escapar das bordas */
    .container, .container-fluid {
        padding-left: 20px !important;
        padding-right: 20px !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* 2. Força os blocos de conteúdo a virarem uma linha por vez (uma coluna) */
    .row.tm-content-box {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important; /* Centraliza o texto para melhor leitura no mobile */
        margin-bottom: 30px !important;
    }

    /* 3. Centraliza e dá espaço para os ícones grandes (Boxes, Cogs, Magic, Clock) */
    .tm-icon-big {
        margin: 0 auto 15px auto !important;
        display: inline-block !important;
    }

    /* 4. Ajusta as margens e larguras dos blocos de texto para preencherem a tela */
    .col-lg-5, .col-lg-12, .col-xl-12 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* 5. Alinha os títulos e diminui o tamanho da fonte para não quebrar linha feio */
    .tm-text-primary {
        font-size: 1.8rem !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    .tm-intro-text {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 20px !important;
    }

    /* 6. Ajusta o botão de "Solicitar Orçamento" para ficar lindo no dedão */
    .btn-orcamento-tech {
        display: block !important;
        width: 100% !important;
        max-width: 280px !important;
        margin: 30px auto !important;
        padding: 12px 20px !important;
        text-align: center !important;
        font-size: 1.1rem !important;
    }
}
/* Substitua '.seu-banner' pela classe ou ID real da sua seção do banner */
.seu-banner {
    padding-top: 80px; /* Ajuste o valor até o título "3DInfo" aparecer inteiro */
}
@media (max-width: 768px) {
    /* Diminui o título principal */
    .seu-titulo-principal { 
        font-size: 2rem; 
        margin-bottom: 15px;
    }
    
    /* Diminui o texto de apoio */
    .seu-texto-banner { 
        font-size: 1.2rem;
        line-height: 1.4;
        padding: 0 15px; /* Evita que o texto encoste nas bordas da tela */
    }
}
/* Ajustes específicos para o Bootstrap 4 em telas de celular */
@media (max-width: 768px) {
    
    /* 1. Remove o posicionamento absoluto do Bootstrap que joga o texto no meio da imagem */
    .carousel-caption,
    .hero-container,
    .banner .container,
    div[class*="-caption"] {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        padding: 40px 20px !important;
        background: rgba(0, 0, 0, 0.6); /* Cria um fundo escuro suave para dar leitura no texto */
        width: 100% !important;
    }

    /* 2. Empurra a seção principal para baixo para não sumir atrás da Navbar fixa */
    header + section,
    .navbar + div,
    .main-banner,
    section:first-of-type {
        margin-top: 76px !important; /* Espaço exato da altura do menu preto */
        padding-top: 20px !important;
    }

    /* 3. Redimensiona o título "3DInfo" e a frase para caberem na tela */
    .carousel-caption h2, 
    .carousel-caption h1,
    section h2:first-of-type {
        font-size: 2rem !important;
        margin-bottom: 15px !important;
        word-wrap: break-word !important;
    }

    .carousel-caption p,
    .carousel-caption h3 {
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
    }
}
/* ==========================================================================
   FORÇA COMPLETA: EXIBIR TEXTOS DA GALERIA O TEMPO TODO
   ========================================================================== */
/* 1. Força o container da legenda a ficar visível */
.grid figure.effect-honey figcaption,
.grid figure.effect-honey figcaption::before {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* 2. Força o título H2 a aparecer */
.grid figure.effect-honey h2 {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 10px !important;
    background: rgba(0, 0, 0, 0.75) !important; /* Tarja escura para dar leitura */
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
}

/* 3. ATENÇÃO: Força as tags internas (i e span) a perderem o efeito invisível do template */
.grid figure.effect-honey h2 i,
.grid figure.effect-honey h2 span,
.grid figure.effect-honey h2 i span {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: block !important;
    font-style: normal !important; /* Remove o itálico antigo */
    color: #ffffff !important;
}/* ==========================================================================
   CORREÇÃO DE ESPAÇAMENTO DAS PALAVRAS NA GALERIA
   ========================================================================== */
/* Garante que o navegador respeite os espaços do HTML e não junte as palavras */
.grid figure.effect-honey h2 span {
    word-spacing: normal !important;
    white-space: normal !important;
    display: inline-block !important;
}

/* Caso o template use spans separados para cada palavra, isso força o espaço entre eles */
.grid figure.effect-honey h2 span + span {
    margin-left: 5px !important;
}
/* Remove o fundo branco e mantém o estilo quando o e-mail for preenchido automaticamente */
.tm-input:-webkit-autofill,
.tm-input:-webkit-autofill:hover, 
.tm-input:-webkit-autofill:focus,
.tm-input:-webkit-autofill:active {
    /* Altera a cor do texto que o navegador tenta forçar (coloque a cor original do seu texto aqui) */
    -webkit-text-fill-color: #ffffff !important;
    
    /* Isso faz o fundo branco chato sumir, mostrando o fundo original da sua caixa */
    transition: background-color 5000s ease-in-out 0s;
    
    /* Opcional: Se você usa uma borda específica, adicione aqui para garantir que ela não suma */
    /* box-shadow: 0 0 0px 1000px transparent inset; */
}