* {
  padding:0;
  margin: 0;
  box-sizing: border-box;
 
}

html {
  scroll-behavior: smooth;
}

body{
 
  font-size:16px;
  font-family:"Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight:weight;
  font-style:normal; 
  color:#0C1013;
  letter-spacing: 1px;
  background-color: #10294b;  
  overflow-x: hidden;
 
}

.sidebar{
  display: none;
}

header {
  width: 100%; 
  position:relative;
  z-index:1; 
  height: 75px; 
  background-color: #10294b;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Apenas sombra inferior */

  
}

/* Tamanho padrão da imagem */
header .logo img {
height: 157px; /* Tamanho inicial */
transition: height 0.3s ease;
}

/* Tamanho reduzido da imagem ao rolar */
header.scrolled .logo img {
height: 60px; /* Tamanho reduzido */
}


.top{
  width: 100%;
  height: 30px;
  background-color: #10294b;
  text-align: center;
  color:white;
  position: fixed;
  bottom:0;
}

.navegacao{
display: flex;
justify-content: space-between;


}

.logo{
  color: white;
  font-size:24px;
  flex:1;
 
  background-repeat: no-repeat;
  height: 81px;   
}

.logo2{
  display: none;
  color:white;
  font-size: 30px;
  padding-left:20px;
  padding-top:10px;
  padding-bottom:10px;
  background-color: #10294b;
}

.hamburguer{
  display:none;

  }

/* Menu overlay */
.menu-toggle {
  font-size: 30px;
  cursor: pointer;
  position: fixed;
  top:18px;
  right: 20px;
  z-index: 1000; /* Para que o ícone fique acima de outros elementos */
  }
  
  .sidebar {
  position: fixed;
  top: 0;
  right: 100%; /* Inicialmente fora da tela */
  width: 100%;
  height: 100%;
  background:#1F3C5E;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  transition: right 0.3s ease; /* Transição suave */
  padding: 20px;
  z-index: 999; /* Para que a sidebar fique acima de outros elementos */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  }
  
  .sidebar a {
  color: white;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.041);
  margin: 7px 0;
  transition: color 0.3s; /* Transição suave para a cor */
  width: 100%;
  padding:10px;
  text-align: center;
  font-size: 20px;
  }
  
  .sidebar a:hover {
  color: #ffffff; /* Cor ao passar o mouse */
  background-color:#BD2635;
  }    


nav {
width: 100%;
flex: 3;
font-size: 24px;
}

/* Estilo geral para o menu */
.navegacao nav ul {
list-style: none; /* Remove os marcadores padrão da lista */
padding-top:15px;
margin: 0;
display: flex; /* Alinha os itens na horizontal */
gap: 15px; /* Espaçamento entre os itens */
display: flex; /* Garante que o texto seja tratado como bloco inline */
align-items: center;
justify-content: flex-end;

}

.navegacao nav ul li {
position: relative; /* Necessário para o pseudo-elemento ::after */

}

.navegacao nav ul li a {
font-size: 15px;
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-weight: bold; 

}

/* Adiciona a barra "/" após cada item, exceto o último */
.navegacao nav ul li:not(:last-child)::after {
content: "/";
font-size: 25px;
position: relative; /* Muda para relative para evitar conflitos */
margin-left: 5px; /* Adiciona espaço antes da barra */
color: #2F5596;
}

.whatsapp-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  background-color: #25D366;
  border-radius: 50px;
  padding: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  border-radius: 50px;
  color: white;
}

.navegacao .scrolled {
 background-color: red;
}

/* SESSÃO INICIAL*/

.inicial {
  display: flex;
  height:auto;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  background-color:#10294b;
  padding:100px 0;
  
}

.inicial h1{
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color:white;
}

.inicial p{
  font-size: 14px;
  color:aliceblue;
}

.inicial a{
  background-color: #2F5596;
  border-radius: 50px;
  width: 150px;
  padding:10px;
  color:white;
  text-decoration: none;
  text-align: center;
  font-size: 12px;
}

.inicial p a{
  background-color: #2F5596;
  border-radius: 50%;
  width: 150px;
  padding:10px 15px;
  color:white;
  text-decoration: none;
  text-align: center;
}


/* Tornar o vídeo responsivo */
.video-container {
  position: relative;
  width: 100%;
  max-width: 75%;
  margin: 0 auto; /* Centraliza na página */
  margin-bottom: 60px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra elegante */
}

.video-container video {
  width: 100%;
  height: 350px;
  object-fit: cover; /* Faz o vídeo preencher o contêiner sem faixas */
}


/* sessão sobre */

.sobre{
  padding:50px;
  background: linear-gradient(180deg, #f0f0f0, #ffffff); /* Exemplo de gradiente suave */
  color:#10294b;
}

.sobre h1{
  text-transform: uppercase;
   font-size: 35px;
  letter-spacing: 2px;
}

.sobre p{
  letter-spacing: 2px;
}

/* SESSÃO SERVIÇO*/

.servico{
  padding:50px 0;
  color:white;
  background-color:#10294b ;
 
}

/*efeito fade */
.image-slider {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}

.image-container {
display: flex;
animation: slide 36s infinite;
}

.image-container img {
width: 100%;
flex-shrink: 0;
transition: opacity 1s ease-in-out;
}

@keyframes slide {
0% { transform: translateX(0); }
25% { transform: translateX(-100%); }
50% { transform: translateX(-200%); }
75% { transform: translateX(-300%); }
100% { transform: translateX(0); }
}

/*chamada */
.chamada{
background: linear-gradient(180deg, #f0f0f0, #ffffff); /* Exemplo de gradiente suave */
padding: 50px 0;
}

.chamada h2{
color: #2F5596;
font-size: 45px;
text-align: center;
letter-spacing: 8px;
}



/* SESSÃO CONTATO*/

.contato{
  background: linear-gradient(180deg, #f0f0f0, #ffffff); /* Exemplo de gradiente suave */
  padding-bottom:5px;
  padding-top:50px;
  color:white;
  
}

footer{
  padding:10px 0;
  color:#BD2635;
}

.contato i{
  border-radius: 50%;
  background-color: #BD2635;
  padding: 5px 10px;
  color: white;
 
}

.contato h2{
color:#2F5596;
}

.contato label{
color: #2F5596;
}

hr {
color:#2F5596 !important;
}

.contato p{
color:#2F5596;
}

.btn-custom {
background-color: #2F5596 !important; /* Cor de fundo personalizada */
border-color: #2F5596 !important; /* Cor da borda */
color: white !important; /* Cor do texto */
margin-right: 5px;
}

.btn-custom:hover {
background-color: #0056b3 !important; /* Cor de fundo ao passar o mouse */
border-color: #0056b3 !important; /* Cor da borda */
}

.telefones{
  display: flex;  
  text-align: left;
  color: #2F5596;
}

.tags-container {
display: flex;
flex-wrap: wrap;
gap: 10px; /* Espaçamento entre as tags */
padding: 20px; /* Espaçamento interno para o container */
justify-content: center; /* Centraliza as tags no container */
}

.tag {
background-color: #007BFF; /* Azul */
color: #FFFFFF; /* Branco */
padding: 5px 10px; /* Espaçamento interno da tag */
font-size: 12px; /* Tamanho da fonte */
text-align: center;
white-space: nowrap; /* Impede quebra de linha dentro da tag */
}

@media (max-width: 768px) {
.tag {
  font-size: 12px; /* Reduz o tamanho da fonte para telas menores */
  padding: 8px 16px; /* Ajusta o espaçamento interno */
}
}



  /* Estilos para celulares que 768px */
  @media screen and (max-width: 768px) {  
     .navegacao nav{
        display: none;
      }



      
      .hamburguer{
          width: 100%;
          position: fixed;
          height: 70px;
          z-index: 1000; /* Para que o ícone fique acima de outros elementos */
          color:white;
          display:flex;
       
                    
      }

      .hamburguer-items{
          display: flex;
          justify-content: space-between;
          align-items: center;    
            
      }
  
       #menuIcon{        
      
     
        color:white;
       
       
       }

     .logo {
        display: none;
      }
    
      .logo2{
          display: inline-block;
          z-index: 999; /* Para que o ícone fique acima de outros elementos */                 
          width:100%;
         
          
      }

      .telefones{
          display: none;
      }

      .hero-items h1{
          font-size:2rem;
      }
       
      header{
        background-color:#10294b;
        border:0;
                                   
      }

      .sobre{
        padding:25px 10px;
      }

      .servico {
        padding:25px 10px;
      }

      .contato{
        padding:25px 10px;
      }

      .inicial{
        padding-left:15px;
        padding-right: 15px;
        text-align: center;
        width: 100%;
      }

      .inicial .row{
        margin-top:0 !important;
      }

      .inicial h1{
        font-size: 25px;
      }

      video{
        margin-top:40px;
      }
  
      }

      @media screen and (max-width: 1200px) {  
          .navegacao nav{
             display: none;
           }
           
           .hamburguer{
              display:flex;
              padding-right: 30px;
              padding-top:50px ;
              font-size: 20px;
               height: 70px;
           }
       
            #menuIcon{        
            
             color:white;
            
            
            }

            header{
              background-color:#10294b;
              border:0;
              height: 75px;
           
            }

         
   
          .logo {
             display: none;
           }
              
                     
           .top{
              bottom:0;
              position: fixed;
              z-index:1;
              background-color: #10294b;
           }

           .logo2{
              display: inline-block;
              z-index: 999; /* Para que o ícone fique acima de outros elementos */                           
              width:100%;
              
          }

          .telefones{
              display: none;
          }

          .hero-items h1{
              font-size:35px;
             
          }

          .hero-items h2{
              font-size:25px;
             
          }

          .sobre{
            padding:25px 10px;
          }
  
          .servico {
            padding:25px 10px;
          }
  
          .contato{
            padding:25px 10px;
          }
  
          .inicial{
            padding-left:15px;
            padding-right: 15px;
            text-align: center;
            width: 100%;
          }
  
          .inicial h1{
            font-size: 25px;
          }
  
          video{
            margin-top:40px;
          }
       
           }

           @media screen and (orientation: landscape) {
              /* Estilos para dispositivos menores em paisagem */
         
              .hero-items h1{
                  margin-top:80px;
              }

              .servico h2{
                  font-size:27px;
                 
              }
              .servico h4{
                  font-size:18px ;
              }

              .contato h2{
                  font-size: 30px;
              }
            }

            /* Quando a resolução for maior que 1368px, muda a imagem */
@media (min-width: 1368px) {
 body {
    background-image: url('../img/back02.jpg');
  }
}



/* Galeria de fotos */
#galeria {
padding-top: 0;
padding-bottom:80px;
background-color: #10294b;
}

.carousel-item img {
max-height: 550px;
object-fit: cover;
}

@media (max-width: 768px) {
.carousel-item img {
    max-height: 300px;
}
}

.carousel-control-prev-icon{

background-color: black ; /* Cor de fundo branco com transparência */
width: 40px;
height: 120px;
}

.carousel-control-next-icon{
background-color: black; /* Cor de fundo branco com transparência */
width: 40px;
height: 120px;
}

/* Botão Instagram */
.button-instagram {
display: inline-block;
padding: 20px 30px;
font-size: 16px;
font-weight: bold;
color: white;
text-align: center;
text-decoration: none;
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
transition: background 0.8s ease;
margin-top:10px;
}

.button-instagram:hover {
background: linear-gradient(45deg, #bc1888 0%, #cc2366 25%, #dc2743 50%, #e6683c 75%, #f09433 100%);
transform: scale(1.05); /* Aumenta ligeiramente o botão ao passar o mouse */
}

/* Botão Facebook */
.button-facebook {
display: inline-block;
padding: 20px 30px;
font-size: 16px;
font-weight: bold;
color: white;
text-align: center;
text-decoration: none;
background: linear-gradient(45deg, #3b5998 0%, #8b9dc3 100%);
transition: background 0.8s ease;/* Transição suave */
margin-left: 10px;
margin-top:10px;
}

.button-facebook:hover {
background: linear-gradient(45deg, #8b9dc3 0%, #3b5998 100%);
transform: scale(1.05); /* Aumenta ligeiramente o botão ao passar o mouse */
}

/* Botão LinkedIn */
.button-linkedin {
  display: inline-block;
  padding: 20px 40px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(45deg, #0077b5 0%, #00a0dc 100%); /* Cores oficiais do LinkedIn */
  transition: background 0.8s ease, transform 0.3s ease; /* Transições suaves */
  margin-left: 10px;
  margin-top:10px;
}

.button-linkedin:hover {
  background: linear-gradient(45deg, #00a0dc 0%, #0077b5 100%);
  transform: scale(1.05); /* Aumenta ligeiramente ao passar o mouse */
}