/* ================================= */
/* RESET */
/* ================================= */

*{

  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

html{

  scroll-behavior: smooth;

}

body{

  font-family: Arial, sans-serif;

  background: #ffffff;

  overflow-x: hidden;

}

/* ================================= */
/* HEADER */
/* ================================= */

.header{

  width: 100%;

  height: 75px;

  background: rgba(0,0,0,0.92);

  backdrop-filter: blur(10px);
  
  transition: 0.4s;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 40px;

  position: fixed;

  top: 0;
  left: 0;

  z-index: 9999;

}

.header-logo img{

  width: 85px;

}

/* ================================= */
/* MENU */
/* ================================= */

#nav{

  display: flex;

  align-items: center;

  gap: 30px;

}

#nav a{

  color: #ffffff;

  text-decoration: none;

  font-size: 16px;

  font-weight: 600;

  transition: 0.3s;

}

#nav a:hover{

  color: #dc2626;

}

/* ================================= */
/* MENU MOBILE */
/* ================================= */

.menu-mobile{

  display: none;

  color: #ffffff;

  font-size: 34px;

  cursor: pointer;

}

/* ================================= */
/* HERO */
/* ================================= */

.hero{

  min-height: 85vh;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 50px;

  padding: 100px 40px 40px;

  background: linear-gradient(
    90deg,
    #123b8f,
    #1a4fc9,
    #0f2c6e
  );

}

/* ================================= */
/* HERO TEXT */
/* ================================= */

.hero-text{

  width: 60%;

  max-width:700px;
}

.topo{

  display: flex;

  align-items: center;

  gap: 25px;

  margin-bottom: 30px;

}

.logo{

  width: 90px;

  background: #ffffff;

  padding: 8px;

  border-radius: 14px;

}

/* ================================= */
/* TÍTULO */
/* ================================= */

.hero h1{

  color: #ffffff;

  font-size: 56px;

  line-height: 1.2;

  font-weight: 800;
  letter-spacing: -2px;

}
.hero h1 span{

  color: #dc2626;

}

/* ================================= */
/* TEXTO */
/* ================================= */

.hero p{

  font-size: 22px;

  line-height: 1.7;

  color: #f1f1f1;

  max-width: 620px;

  margin-top: 25px;

  margin-bottom: 35px;

}
/* ================================= */
/* BOTÃO */
/* ================================= */

.hero a{

  display: inline-block;

  background: #dc2626;

  color: #ffffff;

  text-decoration: none;

  padding: 18px 34px;

  border-radius: 12px;

  font-size: 15px;

  font-weight: 700;

  transition: 0.3s;

}

.hero a:hover{

  transform: translateY(-3px);

  box-shadow: 0 10px 25px rgba(0,0,0,0.25);

}

/* ================================= */
/* HERO IMAGE */
/* ================================= */

.hero-image{

  width: 45%;

  display: flex;

  justify-content: center;

}

.hero-image img{

  width: 100%;

  max-width: 280px;

  border-radius: 24px;

}

/* ================================= */
/* LOADING SCREEN */
/* ================================= */

.loader{

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
  height: 100vh;

  background: #0f172a;
  
  backdrop-filter: blur(8px);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 999999;

  transition: 1s;

}

.loader img{

  width: 150px;

  animation: pulse 1.5s infinite;

  filter: drop-shadow(0 0 20px rgba(255,255,255,0.2));

}

.loader.hide{

  opacity: 0;

  visibility: hidden;

}

/* ================================= */
/* ANIMAÇÃO */
/* ================================= */

@keyframes pulse{

  0%{
    transform: scale(1);
  }

  50%{
    transform: scale(1.08);
  }

  100%{
    transform: scale(1);
  }

}

/* ================================= */
/* RESPONSIVIDADE */
/* ================================= */

@media(max-width: 768px){

  .header{

    padding: 0 20px;

  }

  .header-logo img{

    width: 75px;

  }

  .menu-mobile{

    display: block;

  }

  #nav{

  position: fixed;

  top: 75px;

  right: -100%;

  width: 260px;

  height: calc(100vh - 75px);

  background: #0f172a;

  flex-direction: column;

  align-items: center;

  justify-content: start;

  padding-top: 50px;

  gap: 30px;

  transition: 0.4s;

  display: flex;

}

#nav.active{

  right: 0;

}

  .hero{

    flex-direction: column;

    justify-content: center;

    text-align: center;

    padding: 120px 20px 60px;

    gap: 40px;

  }

  .hero-text{

    width: 100%;

  }

  .topo{

    flex-direction: column;

  }

  .logo{

    width: 120px;

  }

  .hero h1{

    font-size: 34px;

  }

  .hero p{

    font-size: 17px;

    max-width: 100%;

  }

  .hero-image{

    width: 100%;

  }

  .hero-image img{

    max-width: 320px;

  }

}
/* ================================= */
/* QUEM SOMOS */
/* ================================= */

.sobre{

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 60px;

  padding: 80px 40px;

  background: #ffffff;

}

.sobre-imagem{

  width: 45%;

}

.sobre-imagem img{

  width: 100%;

  border-radius: 24px;

}

.sobre-texto{

  width: 55%;

}

.mini-titulo{

  color: #dc2626;

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 2px;

  margin-bottom: 15px;

}

.sobre-texto h2{

  font-size: 38px;

  color: #111827;

  margin-bottom: 25px;

  line-height: 1.2;

}

.sobre-texto p{

  color: #4b5563;

  font-size: 17px;

  line-height: 1.8;

  margin-bottom: 20px;

}

/* ================================= */
/* RESPONSIVIDADE SOBRE */
/* ================================= */

@media(max-width:768px){

  .sobre{

    flex-direction: column;

    padding: 60px 20px;

  }

  .sobre-imagem{

    width: 100%;

  }

  .sobre-texto{

    width: 100%;

    text-align: center;

  }

  .sobre-texto h2{

    font-size: 30px;

  }

}
/* ================================= */
/* SERVIÇOS */
/* ================================= */

.servicos{

  padding: 80px 40px;

  background: #f8fafc;

}

.servicos-topo{

  text-align: center;

  margin-bottom: 50px;

}

.servicos-topo h2{

  font-size: 38px;

  color: #111827;

  line-height: 1.2;

}

.servicos-grid{

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  gap: 25px;

}

/* ================================= */
/* CARD SERVIÇO */
/* ================================= */

.card-servico{

  background: #ffffff;

  padding: 35px;

  border-radius: 24px;

  transition: 0.3s;

  box-shadow: 0 10px 30px rgba(0,0,0,0.05);

}

.card-servico:hover{

  transform: translateY(-8px);

}

.card-servico h3{

  color: #123b8f;

  font-size: 24px;

  margin-bottom: 18px;

}

.card-servico p{

  color: #4b5563;

  font-size: 16px;

  line-height: 1.7;

}

/* ================================= */
/* RESPONSIVIDADE SERVIÇOS */
/* ================================= */

@media(max-width:768px){

  .servicos{

    padding: 60px 20px;

  }

  .servicos-topo h2{

    font-size: 30px;

  }

}
/* ================================= */
/* OPERAÇÕES REALIZADAS */
/* ================================= */

.operacoes{

  padding: 80px 40px;

  background: #123b8f;

}

.operacoes-topo{

  text-align: center;

  margin-bottom: 50px;

}

.operacoes-topo h2{

  color: #ffffff;

  font-size: 38px;

  line-height: 1.2;

}

/* ================================= */
/* GRID OPERAÇÕES */
/* ================================= */

.operacoes-grid{

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  gap: 25px;

}

/* ================================= */
/* IMAGENS */
/* ================================= */

.operacoes-grid img{

  width: 100%;

  height: 220px;

  object-fit: cover;

  border-radius: 24px;

  transition: 0.4s;

  cursor: pointer;

}

.operacoes-grid img:hover{

  transform: scale(1.04);

  box-shadow: 0 15px 35px rgba(0,0,0,0.25);

}

/* ================================= */
/* RESPONSIVIDADE OPERAÇÕES */
/* ================================= */

@media(max-width:768px){

  .operacoes{

    padding: 60px 20px;

  }

  .operacoes-topo h2{

    font-size: 30px;

  }

}
/* ================================= */
/* DIFERENCIAIS */
/* ================================= */

.diferenciais{

  padding: 80px 40px;

  background: #f8fafc;

}

.diferenciais-topo{

  text-align: center;

  margin-bottom: 50px;

}

.diferenciais-topo h2{

  font-size: 38px;

  color: #111827;

  line-height: 1.2;

}

/* ================================= */
/* GRID DIFERENCIAIS */
/* ================================= */

.diferenciais-grid{

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 25px;

}

/* ================================= */
/* CARD DIFERENCIAL */
/* ================================= */

.diferencial{

  background: #ffffff;

  padding: 35px;

  border-radius: 24px;

  transition: 0.3s;

  box-shadow: 0 10px 30px rgba(0,0,0,0.05);

}

.diferencial:hover{

  transform: translateY(-8px);

}

.diferencial h3{

  color: #123b8f;

  font-size: 24px;

  margin-bottom: 18px;

}

.diferencial p{

  color: #4b5563;

  font-size: 16px;

  line-height: 1.7;

}

/* ================================= */
/* RESPONSIVIDADE DIFERENCIAIS */
/* ================================= */

@media(max-width:768px){

  .diferenciais{

    padding: 60px 20px;

  }

  .diferenciais-topo h2{

    font-size: 30px;

  }

}
/* ================================= */
/* CONTATO */
/* ================================= */

.contato{

  padding: 80px 40px;

  background: #123b8f;

}

/* ================================= */
/* BOX CONTATO */
/* ================================= */

.contato-box{

  max-width: 800px;

  margin: auto;

  background: #ffffff;

  padding: 60px;

  border-radius: 28px;

  text-align: center;

  box-shadow: 0 10px 40px rgba(0,0,0,0.08);

}

.contato-box h2{

  font-size: 40px;

  color: #111827;

  margin-bottom: 20px;

  line-height: 1.2;

}

.contato-texto{

  color: #4b5563;

  font-size: 17px;

  line-height: 1.7;

  margin-bottom: 35px;

}

/* ================================= */
/* INFORMAÇÕES */
/* ================================= */

.contato-info{

  margin-bottom: 35px;

}

.contato-info p{

  font-size: 18px;

  color: #111827;

  margin-bottom: 12px;

}

/* ================================= */
/* BOTÃO WHATSAPP */
/* ================================= */

.btn-whats{

  display: inline-block;

  background: #25d366;

  color: #ffffff;

  text-decoration: none;

  padding: 14px 28px;

  border-radius: 14px;

  font-size: 16px;

  font-weight: 700;

  transition: 0.3s;

}

.btn-whats:hover{

  transform: scale(1.05);

}

/* ================================= */
/* RESPONSIVIDADE CONTATO */
/* ================================= */

@media(max-width:768px){

  .contato{

    padding: 60px 20px;

  }

  .contato-box{

    padding: 40px 25px;

  }

  .contato-box h2{

    font-size: 30px;

  }

}
/* ================================= */
/* FOOTER */
/* ================================= */

.footer{

  background: #0f172a;

  padding: 70px 40px 30px;

  color: #ffffff;

}

/* ================================= */
/* GRID FOOTER */
/* ================================= */

.footer-grid{

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 40px;

  margin-bottom: 40px;

}

/* ================================= */
/* COLUNAS */
/* ================================= */

.footer-col{

  display: flex;

  flex-direction: column;

}

.footer-logo{

  width: 100px;

  margin-bottom: 20px;

}

.footer-col h3{

  margin-bottom: 20px;

  font-size: 22px;

}

.footer-col p{

  color: #cbd5e1;

  line-height: 1.7;

  margin-bottom: 12px;

  font-size: 15px;

}

.footer-col a{

  color: #ffffff;

  text-decoration: none;

  margin-bottom: 12px;

  transition: 0.3s;

}

.footer-col a:hover{

  color: #dc2626;

}

/* ================================= */
/* COPY */
/* ================================= */

.footer-copy{

  border-top: 1px solid #334155;

  padding-top: 25px;

  text-align: center;

  color: #94a3b8;

  font-size: 14px;

}

/* ================================= */
/* RESPONSIVIDADE FOOTER */
/* ================================= */

@media(max-width:768px){

  .footer{

    padding: 60px 20px 30px;

    text-align: center;

  }

}
/* ================================= */
/* WHATSAPP FLUTUANTE */
/* ================================= */

.whatsapp{

  position: fixed;

  right: 20px;

  bottom: 20px;

  width: 65px;

  height: 65px;

  background: #25d366;

  color: #ffffff;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

   text-decoration: none;

  box-shadow: 0 10px 30px rgba(0,0,0,0.2);

  z-index: 9999;

  transition: 0.3s;

}

.whatsapp:hover{

  transform: scale(1.08);

}
.whatsapp img{

  width: 34px;

}
/* ================================= */
/* HEADER SCROLL */
/* ================================= */

.header.scrolled{

  background: rgba(15,23,42,0.98);

  box-shadow: 0 5px 25px rgba(0,0,0,0.2);

}
/* ================================= */
/* FORMULÁRIO */
/* ================================= */

.formulario{

  padding: 80px 40px;

  background: #f8fafc;

}

/* ================================= */
/* BOX FORMULÁRIO */
/* ================================= */

.formulario-box{

  max-width: 800px;

  margin: auto;

  background: #ffffff;

  padding: 60px;

  border-radius: 28px;

  box-shadow: 0 10px 40px rgba(0,0,0,0.08);

  text-align: center;

}

.formulario-box h2{

  font-size: 40px;

  color: #111827;

  margin-bottom: 30px;

  line-height: 1.2;

}

/* ================================= */
/* FORM */
/* ================================= */

.formulario form{

  display: flex;

  flex-direction: column;

  gap: 20px;

}

.formulario input,
.formulario textarea{

  width: 100%;

  padding: 18px;

  border: 1px solid #d1d5db;

  border-radius: 14px;

  font-size: 16px;

  outline: none;

  transition: 0.3s;

}

.formulario input:focus,
.formulario textarea:focus{

  border-color: #123b8f;

}

.formulario textarea{

  min-height: 140px;

  resize: none;

}

/* ================================= */
/* BOTÃO */
/* ================================= */

.formulario button{

  background: #dc2626;

  color: #ffffff;

  border: none;

  padding: 16px;

  border-radius: 14px;

  font-size: 16px;

  font-weight: 700;

  cursor: pointer;

  transition: 0.3s;

}

.formulario button:hover{

  transform: scale(1.02);

}

/* ================================= */
/* RESPONSIVIDADE */
/* ================================= */

@media(max-width:768px){

  .formulario{

    padding: 60px 20px;

  }

  .formulario-box{

    padding: 40px 25px;

  }

  .formulario-box h2{

    font-size: 30px;

  }

}