@charset "UTF-8";
:root{
    --cor-primaria: #407080;
    --cor-secundaria: #394E55;
    --cor-fundo: #e9f0fe;
    --cor-fundo-secundario: #F5F5F5;
    --cor-terciaria: lightgray;
    --cor-quaternaria: #398EAA;
    --cor-quintaria: #2b3133;
    --cor-sextaria: whitesmoke;
    --cor-setaria: #012340;
    --cor-oitaria: #DAA520;
}
  *{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: "Plus Jakarta Sans", sans-serif;
    }

   .interface {
    max-width: 1400px;
    padding: 0 4%; 
    margin: 0 auto;
    }

    body{
        font-family: Arial, Helvetica, sans-serif;
        background-color: var(--cor-quintaria); 
        margin: 0px;
    }
    header {
        background-color: var(--cor-setaria);
        /* background: linear-gradient(180deg,#012340,#026873); */
        min-width: 300px;
        width: 100%;
        padding: 10px 0;
        position: fixed;
        top: 0;
        z-index: 999999999;
    }
    header > .interface { 
        max-width: 1400px;
        height: 80px;
        padding: 0 4%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    header .logotipo-cabecalho img {  
         max-width: 180px;
         
    } 

   header nav.menu-desktop ul{
  
    display: flex;
    align-items: center;
    list-style: none;
    gap: 56px;
    flex-wrap: nowrap;
    white-space: nowrap;

    }

    header nav.menu-desktop ul li {
        white-space: nowrap;
    }

    header nav.menu-desktop ul li a {
        text-decoration: none;
        color: white;
        font-size: 18px;
        font-weight: 500;
        transition: .5s;
        
    }

header nav.menu-desktop ul li a:hover {
        color: var(--cor-oitaria);
        text-decoration: underline;
        font-weight: 900;
    }
header:hover {
    background-color: var(--cor-primaria);
}

    /* Estilo do Menu Mobile */

.btn-menu-mobile {
    display: none;

}
    .menu-mobile {
        position: fixed;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100vh;
        background-color: var(--cor-oitaria);
        text-align: right;
        padding: 28px 0;
        transition: 1s;
        pointer-events: none;
        
    }

    .menu-mobile ul{
      list-style: none;
      padding: 32px 0;
    
    }

    .menu-mobile ul li a {
        text-decoration: none;
        color: var(--cor-quintaria);
        font-size: 1.4rem;
        font-weight: 500;
        display: block;
        padding: 24px;
        transition: .5s;
    }

    .menu-mobile ul li a:hover {
        color: var(--cor-secundaria);
        background-color: whitesmoke;
        font-weight: 900;
    }

    .menu-mobile .bi-x-lg {
        color: var(--cor-quintaria);
        font-size: 1.5rem;
        padding: 24px;
    }
    .btn-menu-mobile {
        color: var(--cor-oitaria);
        font-size: 30px;
        margin: 20px;
    }
    .menu-mobile.abriMenu {
        left: 0;
        pointer-events: initial;
    }

       main {
        /*background-color: whitesmoke;*/
        background-color: #e9f0fe;
        padding: 100px 16px 16px 16px;
        min-width: 300px; 
        max-width: 1400px; 
        margin: auto;
        border-radius: 0 0 10px 10px;
    }
    
    main h1 {
        color: var(--cor-setaria);
        font-size: 48px;
        padding: 0px 15px 16px 15px;
        text-align: center;
        font-weight: 600;
        text-align: center;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

        }
  
    h2.titulo-hero  { 
        font-size: 2em;
        padding: 15px;
        text-align: center;
        color: var(--cor-setaria);
        font-weight: 600;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }

 h2.titulo-hero span  { 
        font-size: 1.5em;
        padding: 15px 0 15px 15px;
        text-align: center;
        color: var(--cor-oitaria);
        font-weight: 600;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }
     
    h3.titulo-jobs {
    font-size: 2em;
    padding: 15px 0 15px 30px;
    color: var(--cor-setaria);
    font-weight: 600;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }

    h3.titulo-jobs span{
    font-size: 1.5em;
    padding: 15px 0 15px 15px;
    color: var(--cor-oitaria);
    font-weight: 600;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }

    h4.titulo-portfolio {
    font-size: 2em;
    padding: 15px 0 15px 30px;
    color: var(--cor-setaria);
    font-weight: 600;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }
    
    h4.titulo-portfolio span {
    font-size: 1.5em;
    padding: 15px 0 15px 15px;
    color: var(--cor-oitaria);
    font-weight: 600;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }

   h5.titulo-sobre {
    font-size: 2em;
    padding: 15px 15px 30px 80px;
    color: var(--cor-setaria);
    font-weight: 600;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }

   h5.titulo-sobre span {
    font-size: 1.5em;
    padding: 15px 0 15px 15px;
    color: var(--cor-oitaria);
    font-weight: 600;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }
    
    h6.titulo-faq {
    font-size: 2em;
    padding: 15px 15px 30px 80px;
    color: var(--cor-setaria);
    font-weight: 600;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }

    h6.titulo-faq span {
    font-size: 1.5em;
    padding: 15px 0 15px 15px;
    color: var(--cor-oitaria);
    font-weight: 600;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }
    
    h7.titulo-contato {
    font-size: 2em;
    padding: 15px 15px 30px 80px;
    color: var(--cor-setaria);
    font-weight: 600;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }

    h7.titulo-contato span {
    font-size: 1.5em;
    padding: 15px 15px 15px 15px;
    color: var(--cor-oitaria);
    font-weight: 600;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }

    main h3{
      font-size: 35px;
      text-align: left;
      padding: 15px 0px 15px 60px;
      font-weight: 600;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }

    main aside {
        display: block;
        font-size: 48px;
        color: var(--cor-oitaria);
        font-weight: 600;
        text-align: center;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }

    h1.titulo-section {
    font-size: 3em;
    color: #F5F5F5;

    }

    h1.titulo-section span {
    color: var(--cor-oitaria);
    }
  
    h2.titulo-section {
      font-size: 10px;
      color: #130449;
    }
   
      /* Slider Banner Principal */

  .container-slide {
  position: relative;
  width: 100%;
  max-width: 1400px;
  height: 320px;
  overflow: hidden;
 }

.slide-imagem {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; 
  animation: efeitoSlide 10s infinite;
}

/* Garante que a tag img se ajuste ao container */
.slide-imagem img {
  width: 100%;
  height: 100%;
 /* object-fit: cover;*/
}

.slide-imagem source {
 width: 100%;
 height: 100%;
 /* object-fit: cover;*/
}

/* Define o tempo de cada imagem no ciclo */
.slide-imagem:nth-child(1) {
  animation-delay: 0s;
}

.slide-imagem:nth-child(2) {
  animation-delay: 5s;
}

/* Animação de transição (efeito slide) */
@keyframes efeitoSlide {
  0% { opacity: 0; }
  10s { opacity: 0; }
  
  /* Imagem aparece suavemente */
  10% { opacity: 1; }
  40% { opacity: 1; }
  
  /* Imagem desaparece suavemente */
  50% { opacity: 0; }
  100% { opacity: 0; }
}

/* Estilo da Seção Habilidades */

.skill {
  
  padding: 5px;
  background-color: var(--cor-fundo);
  
}
.slider-container {

  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr 1fr;
  gap: 16px;
}

.slider-container h2 {
  padding: 30px 0px;
}

.slider-container .slider-item {
background-color: var(--cor-sextaria);
padding: 40px 20px;
border-radius: 16px;
margin:auto;
box-shadow: 2px 2px 4px black;
}

.slider-item .icon-skills {
    display: flex;
    align-items: center;
    gap: 29px;
}    

.slider-item .icon-skills img {
  max-width: 60px;

}
.slider-item p {
  color:var(--cor-secundaria);
  text-align: justify;
  padding: 10px;

}
     .box {
        flex: 1 1 300px;
        background-color: var(--cor-quaternaria);
        color: white;
        padding: 20px;
        text-align: center;
        border-radius: 10px;
        box-shadow: 2px 2px 4px black;
        font-size:20px;
        font-weight: 600;
        transition: box-shadow 0.3s ease-in-out; /* Smooth transition */
     }
    .box:hover {
        box-shadow: 0 0 8px #00d2ff, 0 0 10px #00d2ff; /* Neon effect on hover */
    }
    
     .jobs { 
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 20px 0px;
                
     }

    .skill h2 {
    display: inline-block; 
    margin-left: 30px;
    max-width: fit-content; 
    font-size: 30px;
    text-align: center;
    }
/*
    #cases-de-sucesso h2 {
     display: inline-block;
     margin-left: 50px;
     max-width: fit-content;
     font-size: 30px;
     text-align: center;
     }
    
    .Clientes {
        width: 100%;
        height: 100%;
        background-image: url(/imagens/fundo.jpg);
        background-size: cover; 
        background-position: center;center;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        border-radius: 10px;
        box-shadow: 2px 2px 4px black;
        margin: 15px 0px;
     }
     .cartao {
        width: 400px;
        height: 247px;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px) /* For Safari */;
     /*   border: 1px solid white;
        padding: 25px;
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: all 1s ease-out;
     }
     .cartao:hover {
        cursor: pointer;
        transform: scale(1.05);
        transition: all 1s ease-out;
     }
    .cartao .cartao.topo{
        width: 60%;
        height: 60%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
     } */

/* Estilo Seção Portfolio */

 #Portfolio h2 {
     display: inline-block;
     margin-left: 10px;
     max-width: fit-content;
     font-size: 30px;
     }

.portfolio-container {
  display: grid;
  grid-template: 1fr / 1fr 1fr 1fr;
  gap: 24px;
  padding: 25px 0px;
}
.portfolio-container .portfolio-box {
min-width: 200px;
height: 500px;
border: 2px solid var(--cor-quintaria);
border-radius: 16px;
background-size: cover;
background-position-y: 0%;
transition: background-position-y 10s;
position: relative;
}

.portfolio-container .portfolio-box:hover {
  background-position-y: 100%;
  
}

.infor-portfolio {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.364);
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 20px;
  font-weight: 600;
  font-weight: 500;
}
.projeto1 {
background-image: url(..//imagens/Portfolio/presentenacesta.jpeg);
}

.projeto2 {
background-image: url(..//imagens/Portfolio/lematec.jpeg);
}

.projeto3 {
background-image: url(..//imagens/Portfolio/siteseo.jpeg);
}

/* Estilo CSS Sobre Nós */

#section.sobre-nos
{
  padding: 60px 0px;
}
#sobre-nos  .interface{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #398EAA;
  gap: 90px;
  border-radius: 16px;
  min-width: 300px;
  max-width: 1260px;
  padding: 20px;
}

#sobre-nos .txt-sobre p{
 color: var(--cor-fundo-secundario);
 text-align: justify;
 line-height: 1.7;
 margin: 24px 0;
 padding: 20;
}    

#sobre-nos .btn-redes button{

width: 40px;
height: 40px;
font-size: 28px;
margin-right: 8px;

}
  .PerguntasFrequentes {
    max-width: 1255px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 15px auto;
    padding: 20px;
    background-color: #e9f0fe;
    border-radius: 10px;
    box-shadow: 2px 2px 4px black;
  }
  .PerguntasFrequentes h2 {
    font-size: 36px;
    margin-bottom: 60px;
    text-align: center;
  }
  .faq {
    width: 100%;
    list-style: none;
  }
  .faq li {
    width: 100%;
    margin-bottom: 10px;
  }
  .faq li label {
  padding: 10px 10px;
  font-size: 16px;
  font-weight: 500;
  background-color: #fff;
  display: flex;
  align-items: center;
  cursor: pointer;
  }

  .faq li label span {
    display: inline-block;
    padding: 8px;
    background-color: #000;
    color: #fff;
    border-radius: 8px;
    margin-right: 10px;
  }
    .faq li label::before {
    content: '+';
     margin-right: 10px;
     font-size: 24px;
    } 
  
  .faq input[type="radio"] {
    display: none;
  }

  .faq .Resposta {
    color: #535353;
    background-color: #fff;
    padding: 0 14px;
    line-height: 26px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s, padding .5s;
  }

  .faq .Resposta p {
    padding: 0 50px;
    text-align: justify;
  }
  .faq input[type="radio"]:checked + label + .Resposta {
    max-height: 1000px;
    padding: 10px 10px 20px;
  }
  .faq input[type="radio"]:checked + label span {
    background-color: var(--cor-oitaria);
  } 
  .faq input[type="radio"]:checked + label::before {
    content: '-';
  }

/* Estilo do Formulário de Contato */

.formulario-contato {
display: flex;
justify-content: space-between;
background-color: var(--cor-sextaria);
padding: 80px;
border-radius: 10px;
box-shadow: 2px 2px 4px black;
margin-top: 20px;
}

.formulario-contato form {
width: 50%;
}


.formulario-contato form input, .formulario-contato form textarea {
width: 100%;
padding: 16px 10px;
background-color: transparent;
border-radius: 9px;
border: 2px solid var(--cor-quintaria);
outline: none;
font-size: 18px;
margin-bottom: 6px;
}

.formulario-contato form .tel-proj {
display: flex;
align-items: center;
gap: 8px;
}

.formulario-contato form textarea {
resize: none;
height: 150px;
}
.formulario-contato form .btn-enviar input{
background-color: var(--cor-oitaria);
transition: .5s;
cursor: pointer;
font-size: 16px;
font-weight: 500;
}

.formulario-contato form .btn-enviar input:hover {
background-color: var(--cor-setaria);
color: white;
border-color: #130449;
}

.formulario-contato .txt-contato p i {
    color: #130449;
    font-size: 18px;
    }

.formulario-contato .txt-contato p {
    color: black;
    font-size: 18px;
    display: flex;
    align-items: center;
    display: flex;
    gap: 16px;
    margin: 16px 0px;
}


    .btn-whatsapp-flutuante {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px;       /* Distância da borda inferior */
    right: 30px;        /* Distância da borda direita (mude para 'left' se quiser na esquerda) */
    background-color: #25d366; /* Cor oficial do WhatsApp */
    color: #fff;
    border-radius: 50%; /* Torna o botão redondo */
    text-align: center;
    font-size: 35px;
    line-height: 60px;  /* Alinha o ícone verticalmente */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999;      /* Garante que ele fique por cima de tudo */
    text-decoration: none;
    transition: background-color 0.3s, transform 0.3s;
    animation: pulsarBotao 2s infinite; /* Ativa a animação contínua */
}

/* Efeito ao passar o mouse */
.btn-whatsapp-flutuante:hover {
    background-color: #1ebd5b;
    transform: scale(1.1); /* Aumenta levemente de tamanho */
    color: #fff;
}

/* Animação de pulso para chamar atenção do cliente */
@keyframes pulsarBotao {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}
     
     footer {
        /* background-color: var(--cor-quintaria); */
        background: linear-gradient(180deg,#012340,#026873);
        color: var(--cor-oitaria);
        text-align: center;
        padding: 6px;
        margin: 0px;
    }
    footer > p {
        margin: 0px;
      }