/*Menu*/
header{
    position:absolute;
    z-index:2;
    width:100%;
    display:flex;
    align-items:center;
    justify-content: space-between;
    height:7vw;
}
header .logo{
    width:2vw;
    padding-left:5vw;
}
header nav{
    display:flex;
    align-items: center;
    gap:3vw;
    padding-right:5vw;
}
header nav a{
    text-decoration: none;
    color:#fff;
    font-family:arial;
    font-size:1vw;
    transition: 0.5s;
}
header nav a:hover{
    scale:1.1;
}

#navMobile{
    display:none;
}
.nav_destaque{
    border:2px solid var(--cor-degrade2);
    border-radius: 5vw;
    padding:0.4vw 1.2vw 0.4vw 1.2vw;
    color:var(--cor-degrade2);
}

#btn_navMobile{
    display:none;
}

/*Botão para subir*/
#upbtn{
    z-index: 2;
    transition: 0.5s;
    position: fixed;
    bottom:0;
    right:0;
    margin:3vw;
    width: 3vw;
    height: 3vw;
    background-color: var(--cor-padrao);
    border-radius: 2vw;
    box-shadow: 0vw 0.7vw 1vw var(--cor-fundo3);
    cursor: pointer;
    transition: 0.5s;
    display:flex;
    align-items:center;
    justify-content: center;
    opacity:0.5;
}
#upbtn:hover{
    transition: 1s;
    transform:translateY(-1vw);
    opacity:1;
}
#upbtn i{
    color:var(--cor-texto-padrao);
    font-size:1.5vw;
}

/*Layout*/
#layout{
    display:flex;
    flex-direction: column;
    justify-content: center;
}
#layout hr{
    width:35vw;
    height: 0.6vw;
    margin-left:auto;
    border:none;
    background-image: linear-gradient(-90deg, var(--cor-degrade1), var(--cor-degrade2));
    margin-top:-0.3vw;
}
.layout_video{
    width:100%;
    object-fit: cover;
    height:35vw;
}
.layout_mobile{
    display:none;
}
.layout_container{
    width:30vw;
    position:absolute;
    display:flex;
    flex-direction: column;
    padding-left:10vw;
    padding-top:2vw;
    gap:1.5vw;
}
.layout_container h1{
    color:var(--cor-texto-padrao);
    font-family:arial;
    font-weight: 600;
    font-size:2.2vw;
    line-height: 2.8vw;
}
.layout_container p{
    width:85%;
}
.layout_container h1 span{
    background-image: linear-gradient(-90deg, var(--cor-padrao) 40%, var(--cor-degrade2));
    background-clip: text; /* clipar a cor de fundo no texto */
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    font-weight: 900;
    font-size:3.2vw;
}
.layout_container a{
    width:42%;
}
.layout_container button{
    width:100%;
    padding:0.6vw 0vw;
    border-radius:0.3vw;
    border:none;
    background-color: var(--cor-padrao);
    color:var(--cor-texto-padrao);
    font-family:arial;
    font-weight: bold;
    font-size:0.8vw;
    cursor:pointer;
    transition: 0.5s;
}
.layout_container button:hover{
    background-color: var(--cor-padrao-escura);
}

/*Sobre*/
#sobre{
    margin-top:6vw;
    margin-bottom:3vw;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#sobre .sobre_container{
    width:75%;
    display:flex;
    align-items: center;
    justify-content: center;
    gap:8vw;
}
#sobre .sobre_container .sobre_text{
    display:flex;
    flex-direction: column;
    gap:1vw;
}
#sobre .sobre_container .sobre_text p{
    text-indent: 1vw;
    text-align: justify;
}
#sobre .sobre_container img{
    width:30vw;
}

/*Serviços*/

#servicos{
    height: 31vw;
    display: flex;
}

#servicos h3{
    position: absolute;
    margin: 5vw 0 0 20vw;
}

.sep-servicos{
    margin: 2.8vw 2.5vw;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    width:30vw;
    height: 14.5vw;
}

  #servicos .swiper {
    margin-top:8vw;
    border-radius: 1.5vw;
    width: 58vw;
    height: 20.28vw;
  }

  #back-slides-servicos{
    margin: 12.3vw 0 0 20vw;
    position: absolute;
    width: 60vw;
    height: 16vw;
    background-color: var(--cor-padrao);
    border-radius: 1.2vw;
  }

  #servicos  .swiper-slide {
    border-radius: 1.5vw;
    background: #22222200;
    display: flex;
  }

  #p1-servicos{
    width: 26vw;
  }
  #p2-servicos{
    margin-top: 0.5vw;
    width: 20vw;
  }

  #desenvolvitento-sitemas{
    width: 20vw;
    margin-bottom:0.5vw ;
  }

  .btn-servico-comecar{
    text-decoration: none;
    margin-top: 1vw;
    background-color: var(--cor-fundo);
    width: 10vw;
    border-radius: 0.5vw;
    display:flex;
    align-items:center;
    justify-content: center;
    text-align: center;
    padding:0.8vw 0 0.8vw 0;
    font: bold 0.8vw Arial;
    color: var(--cor-texto);
    cursor: pointer;
    transition: 1s;
  }

  .btn-servico-comecar:hover{
    scale:1.05;
    margin-left: 0.5vw;
    transition: 0.5s;
    background-color: var(--cor-fundo2);
  }

  .servicos-img{
    animation: imgServico 5s ease-out infinite;
    position: absolute;
    margin: 0 27vw;
    width: 30vw;
  }


  @keyframes imgServico{
    0%{
        transform:translateY(1vw);
    }

    50%{
        transform:translateY(0vw);
    }

    100%{
        transform:translateY(1vw);
    }
  }

  #s1{
    margin: 0 29vw;
    width: 30vw;
  }
  
  #s2{
    margin: 0 31vw;
    width: 25vw;
  }
  


  #s5{
    margin: 0 29vw;
    width: 28vw;
  }

  #s6{
    margin: 0 30vw;
    width: 26vw;
  }


  #btn-servicos{
    position: absolute;
    margin: 3.5vw 16vw;
  }

  #desenvolvimento-sistemas{
    width: 20vw;
  }


/*Projetos*/
#projetos{
    background-image: url(../img/efeitos/ondaFundoProjetos.png);
    background-repeat: no-repeat;
    background-size:100%;
    background-position-y:10vw;
    padding-top:5vw;
    display:flex;
    flex-direction: column;
    align-items:center;
    gap:1vw;
    padding-bottom:8vw;
}
.projetos_container{
    display:flex;
    flex-direction: column;
    align-items: center;
    gap:0.5vw;
    width:30vw;
    text-align: center;
}

#projetos .swiper {
    width: 80vw;
    height: 20vw;
}
#projetos .swiper-slide{
    display:flex;
    align-items:center;
    justify-content: center;
    gap:3vw;
}
#projetos .swiper-slide a{
    text-decoration: none;
}
#projetos .swiper-button-prev, #projetos .swiper-button-next{
    color:var(--cor-texto);
}
#projetos .swiper-button-prev::after, #projetos .swiper-button-next::after{
    font-size:2vw;
    font-weight:900;
}

.projetos_card{
    width:20vw;
    height:13vw;
    background-color:#000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius:1vw;
    cursor: pointer;
    overflow: hidden;
}
.projetos_card_container{
    overflow: hidden;
    display:flex;
    flex-direction: column;
    gap:0.5vw;
    background-image:url(../img/efeitos/ondaProjetos.png);
    background-repeat: no-repeat;
    background-size:contain;
    width:80%;
    height:7vw;
    margin-top:6vw;
    padding-left:1.5vw;
}
.projetos_card_container h3{
    font-family:arial;
    font-weight: 800;
    color:var(--cor-texto-padrao);
    font-size:1.5vw;
    padding-top:0.5vw;
}

/*Divulgacao*/
.divulgacao_container{
    margin-top:3vw;
    width:50vw;
    display:flex;
    flex-direction: column;
    align-items:center;
    gap:2vw;
    text-align:center;
    box-shadow:0.1vw 0.1vw 1.3vw 0.2vw #000;
    background-color: var(--cor-fundo);
    border-radius:1vw;
    padding:3.5vw 0vw;
}
.divulgacao_conteudo{
    position: relative;
    z-index:1;
    display:flex;
    flex-direction: column;
    align-items:center;
    gap:1.5vw;
}
.divulgacao_container .divulgacao_conteudo p{
    width:22vw;
}
.divulgacao_container .divulgacao_conteudo button{
    width:100%;
    padding:0.8vw 0vw;
    border-radius:0.3vw;
    border:none;
    background-color: var(--cor-padrao);
    color:var(--cor-texto-padrao);
    font-family:arial;
    font-weight: bold;
    font-size:0.8vw;
    cursor:pointer;
    transition: 0.5s;
}
.divulgacao_container .divulgacao_conteudo button:hover{
    background-color: var(--cor-padrao-escura);
    scale:1.05;
}
.divulgacao_container .divulgacao_conteudo a{
    width:15vw;
}

.divulgacao_container .elemento_Fundo1{
    overflow: hidden;
    position: absolute;
    margin-top:-3.5vw;
    margin-right:40vw;
    width:10vw;
    height:18.6vw;
    border-radius:1vw;
}
.divulgacao_container .elemento_Fundo1 img{
    position: relative;
    right:8vw;
    bottom:2vw;
    width:18vw;
}

.divulgacao_container .elemento_Fundo2{
    overflow: hidden;
    position: absolute;
    width:25vw;
    height:15.1vw;
    margin-left:25vw;
    border-radius:1vw;
}
.divulgacao_container .elemento_Fundo2 img{
    position: relative;
    left:1vw;
    bottom:2vw;
    width:35vw;
}


/*Funcionalidade*/
#funcionalidade{
    width: 100%;
    height: 51vw;
}

#container_funcionalidades{
    width: 100%;
    display: flex;
}

#container_img{
    width: 100%;
    height: 25vw;
    overflow: hidden;
}

#img_corp{
    width: 100%;
}

#degrade{
    position: absolute;
    width: 100%;
    height: 25vw;
    background-image: linear-gradient(to right, var(--cor-fundo) 10%, #1e1e1ef5, #1e1e1e00);
    z-index:1;
}

#text_funcionalidade{
    z-index: 12;
    position: absolute;
    width: 25vw;
    height: 20vw;
    margin: 2.5vw 0 0 14vw;
    display: flex;
    flex-direction: column;
    gap:1vw;
}
#text_funcionalidade ul li{
    list-style: none;
}
#text_funcionalidade li:before {
    content: '';
    width:0.5vw;
    height:0.5vw;
    border-radius:2vw;
    background-color: var(--cor-padrao);
    display: block;
    position: absolute;
    color:var(--cor-padrao);
    left:0;
    margin-top:0.1vw;
  }

#list_funcionalidades{
    margin-left: 1.5vw;
    height: 9vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#ranking{
    padding-top: 5vw;
    margin: 0 auto;
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.dados{
    width: 20vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap:1vw;
}
.dadosCentro{
    margin-top:-1vw;
}

.title_dados2{
    margin-top: 5vw;
    font: bold 4vw Arial;
    color: var(--cor-padrao);
}

.title_dados1{
    font: bold 8vw Arial;
    color: var(--cor-padrao);
}

.sub_title{
    font: bold 1.7vw Arial;
    color: var(--cor-texto);
}

.paragraph_dado1{
    font: normal 1.1vw Arial;
    color:var(--cor-texto);
}

.paragraph_dado2{
    margin-left: 2.5vw;
    width: 15vw;
    font: normal 0.9vw Arial;
    color:var(--cor-texto);
}


/*Planos*/
#planos{
    margin-top:5vw;
    width: 100%;
    height: 48vw;
    text-align: center;
    justify-content: center;
    display: flex;
}

#back_blur{
    position: absolute;
    width: 100%;
    height: 30vw;
    overflow: hidden;
}

#intro_planos{
    position: absolute;
    height: 4vw; 
    margin: 4vw auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#colors_blur{
    width: 100%;
}

  #sep_planos{
    margin-top: 12.6vw;
    position: absolute;
    height: 30vw;
    width: 80vw;
    justify-content: space-between;
    display: flex;
  }

  .config_planos{
    overflow: hidden;
    border-radius: 1vw;
    background-color: var(--cor-fundo2);
    width: 18vw;
    margin:0 auto;
}

#configp1{
    height: 32vw;
}

#i1img{
    display: none;
}

#configp2{
    height: 32VW;
}

#i2img2{
    display: none;
}

#configp4{
    height: 32vw;
}

#i4img{
    display: flex;
}

#i4img2{
    display: none;
}

#configp1 .textos_planos{
    height: 14vw;
}
#configp2 .textos_planos{
    height: 14vw;
}
#configp3 .textos_planos{
    height: 14vw;
}
#configp4 .textos_planos{
    height: 14vw;
}

.img_plano_config{
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 10vw;
}
.img_plano{
    width: 100%;
}

.efeito_degrade_img{
    position: absolute;
    margin: 9.9vw 0 0 8vw;
    width: 10vw;
    height: 0.3vw;
    background-image: linear-gradient(to right, var(--cor-degrade2), var(--cor-degrade1));
}

.textos_planos{
    width: 14vw;
    height: 12.5vw;
    margin: 1.5vw auto 0 1.5vw;
    text-align: left;
    flex-direction: column;
    gap:0.5vw;
    display: flex;
}

.list_descri_planos{
    margin: 0.5vw 0 0 1vw;
    display: flex;
    flex-direction: column;
    gap:0.5vw;
    list-style: none;
}
.list_descri_planos li::before {
    content: '';
    width:0.3vw;
    height:0.3vw;
    border-radius:2vw;
    background-color: var(--cor-padrao);
    display: block;
    position: absolute;
    color:var(--cor-padrao);
    margin-top:0.2vw;
    margin-left:-1vw;
}

#configp2 .list_descri_planos{
    height: 5vw;
}
#configp3 .list_descri_planos{
    height: 4vw;
}
#configp4 .list_descri_planos{
    height: 10vw;
}


.btns_planos{
    text-decoration: none;
    cursor: pointer;
    position: absolute;
    margin: 3vw 0 0 4.8vw;
    background: none;
    border: none;
    font: bold 1.6vw Arial;
    color: #fff;
}

.img_btn_planos{
    width: 15.3vw;
    margin-left: 2.7vw;
}


/*Perguntas*/
#perguntas{
    padding:5vw 20vw 0vw 20vw;
    display:flex;
    flex-direction: column;
    gap:1.2vw;
}

#perguntas .title{
    padding-bottom:1vw;
}

.perguntas_card{
    display:flex;
    flex-direction: column;
    border-radius:0.5vw;
    width:100%;
    overflow: hidden;
}

.perguntas_card .card_fechado{
    position: relative;
    z-index:1;
    background-color: var(--cor-fundo2);
    height:3vw;
    display:flex;
    align-items:center;
}
.perguntas_card .card_fechado::before{
    content:"";
    width:0.5vw;
    height:100%;
    background-color:var(--cor-padrao);
    
}
.perguntas_card .card_fechado span{
    font-size:1vw;
    color:var(--cor-texto);
    font-family: arial;
    font-weight:700;
    padding-left:2vw;
    width:85%;
}

.perguntas_card .card_aberto{
    position: relative;
    z-index:0;
    display:flex;
    background-color: var(--cor-fundo3);
    height:8vw;
    align-items:center;
    transition: 0.5s;
}
.perguntas_card .card_aberto::before{
    content:"";
    width:0.5vw;
    height:100%;
    background-color:var(--cor-padrao);
    
}
.perguntas_card .card_aberto p{
    padding-left:2vw;
    width:85%;
}

.perguntas_card .card_seta{
    color:var(--cor-padrao);
    font-size:1.2vw;
    padding-left:3vw;
    cursor:pointer;
}

.aberto{
    margin-top:0vw;
}

.fechado{
    margin-top:-8vw;
}

/*Footer*/
#footer{
    width:100%;
    padding-top:5vw;
}

.footer_container{
    background-image: linear-gradient(var(--cor-fundo3) 20%, var(--cor-degrade3));
    width:100%;
    padding:4vw 0vw 7vw 0vw;
    display:flex;
    align-items:center;
    justify-content: space-around;
}
.footer_container .logo2{
    width:8vw;
}

.footer_redes{
    display:flex;
    flex-direction: column;
    gap:5vw;
}
.footer_redes .email, .footer_redes .redesSociais{
    display:flex;
    flex-direction: column;
    gap:1vw;
}
.footer_redes .email a{
    text-decoration: none;
}
.footer_redes .email span{
    font-size:1vw;
    color:var(--cor-texto);
    font-family:arial;
}
.footer_redes .email span:hover{
    text-decoration:underline;
}
.footer_redes .redesSociais .conjuntoRedes{
    display:flex;
    gap:1vw;
    color:var(--cor-texto);
    font-size:1.2vw;
}
.footer_redes .redesSociais .conjuntoRedes a{
    color:var(--cor-texto);
}
.footer_redes .redesSociais .conjuntoRedes i{
    transition:0.5s;
    cursor:pointer;
}
.footer_redes .redesSociais .conjuntoRedes i:hover{
    color:var(--cor-padrao);
}

.footer_forms{
    display:flex;
    flex-direction: column;
    align-items:center;
    gap:1.5vw;
    width:20vw;
}
.footer_forms textarea{
    max-width:100%;
    min-width:100%;
    max-height:4vw;
    min-height:1.2vw;
}
.footer_forms input, .footer_forms textarea{
    height:1.2vw;
    width:100%;
    font-size:0.9vw;
    font-family:arial;
    color:var(--cor-texto);
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom:0.2vw solid var(--cor-padrao);
    padding:0.3vw;
    background-color: transparent;
}
.footer_forms input:focus, .footer_forms textarea:focus{
    outline:0;
}
.footer_forms button{
    width:100%;
    border-radius:0.6vw;
    border:none;
    font-size:1vw;
    font-family:arial;
    font-weight:bold;
    padding:0.3vw;
    background-color: var(--cor-padrao);
    color:var(--cor-texto-padrao);
    cursor:pointer;
    transition: 0.5s;
}
.footer_forms button:hover{
    background-color: var(--cor-padrao-escura);
}

#footer .copyright{
    margin-top:-3vw;
    background-image:url(../img/efeitos/ondaFooter.png);
    background-repeat: no-repeat;
    background-size:cover;
    width:100%;
    height:2.5vw;
    display:flex;
    align-items:center;
    justify-content: center;
    color:var(--cor-texto-padrao);
    font-family:arial;
    font-size:0.8vw;
    font-weight: bold;
    padding:0.5vw 0vw 0vw 0vw;
}

/*Elementos fundo*/
#layout, #servicos, #projetos, #funcionalidade, #planos, #perguntas, #footer{
    position: relative;
    z-index:1;
}
.imgFundo1, .imgFundo2, .imgFundo3, .imgFundo4, .imgFundo5{
    position:absolute;
    z-index:-1;
    object-fit: cover;
    opacity:0.6;
}
.imgFundo1{
    height:85vw;
    width:24vw;
    object-position: right;
    top:30vw;
    left:0vw;
}
.imgFundo2{
    height:90vw;
    width:38vw;
    object-position: left;
    top:35vw;
    right:0vw;
}
.imgFundo3{
    height:80vw;
    width:20vw;
    object-position: right;
    top:125vw;
    left:0vw;
    z-index:2;
}
.imgFundo4{
    rotate:180deg;
    height:100vw;
    width:38vw;
    object-position: right;
    top:145vw;
    right:0vw;
}
.imgFundo5{
    rotate:180deg;
    height:72vw;
    width:50vw;
    object-position: left;
    top:215vw;
    left:0vw;
}