*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}
body{
    overflow-x: hidden;
    background-color: #090911;
}
header{
    width: 100vw;
    height: 60px;
    background-color: #090911;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    position: fixed;
    top: 0px;
    z-index: 99999;
}

header .div-foto{
    width: 60px;
    height: 60px;
    background-image: url(../img/logo.png);
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
}

header ul{
    width: 20%;
    height: 60px;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 30px;
    margin-right: 30px;
}

header ul a{
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    text-decoration: none;
    transition: transform 0.3s;
   
}

header ul a:hover{
    width: auto;
    height: 60px;
    background-color: #00d4ff;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(1.1);

}


main{
    width: 100vw;
    height: auto;
    margin-top: 60px;
}
.tela-base-aprees{
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 540px;
    overflow: hidden;
    /* border: 2px solid red; */
   
}

.slide-con{
    display: flex;
    transition: transform 0.5s ease-in-out;
}


.slid-compac{
min-width: 100%;
height: auto;
}

.btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
   
    text-shadow: 0px 0px 10px #00d4ff,0px 0px 30px #00d4ff,0px 0px 50px #00d4ff;
color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 7777;
    font-size: 70px;
    

}

.btn:hover{
   
    text-shadow: 0px 0px 10px #ff0000,0px 0px 30px #ff0000,0px 0px 50px #ff0000;
    color: #ff0000;
}
.btn.left{
    left: 10px;
}
.btn.right{
    right: 10px;
}


.pontinhos{
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
    /* border: 2px solid #fff; */
}

.pontinho{
    width: 15px;
    height: 15px;
    background-color: #00d5ff;
    cursor: pointer;
    transition: background-color 0.3s;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);

}


.pontinho.ativo{
    background-color: #ffffff;
    /* border: 2px solid #000000; */
    animation: altercolor 0.6s alternate infinite;
}
@keyframes altercolor{
    to{
        background-color: #000000;
    }
    from{
        background-color: #fff;
    }
}

.logo-autrer-spectrotec{
    width: auto;
    height: auto;
    position: absolute;
    z-index: 6666;
    /* background-color: #0800f3; */
    top: -16%;
    left:30%;
    transform: translate(-50%,50%);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 100px;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-weight: bolder;
    color: #fff;
}
#nomelogo{
    width: 360px;
    height: 360px;
    
    background-image: url(../img/nemologo.png);
    background-size: 110%;
    background-position: center;
    background-repeat: no-repeat;
}
#btnir{
    width: 80%;
    height: 55px;
    border-radius: 30px;
    border: 5px  solid #00d4ff;
    box-shadow: 10px 0px 300px #00d4ff;
    background-color: transparent;
    color: #fff;
    text-shadow: 0px 0px 10px #ffff,0px 0px 30px #ffff,0px 0px 50px #ffff;
    font-family: Audiowide;
    font-size: 20px;
    margin-top: 20px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  
    
}
#btnir::before{
    content: "";
    top: 0px;
    left: 0px;
    width: 0%;
    height: 100%;
    background: #00d4ff;

    transition: width 0.3s ease-in-out;
    z-index: -1;
    position: absolute;
    top: 0px;
    left: 0px;
}
#btnir:hover::before{
    width: 100%;

}

#btnir:hover{
    border: 5px  solid #ff0000;
    box-shadow: 10px 0px 300px #ff0000;
    color: #ff0000;
    text-shadow: 0px 0px 10px #ff0000,0px 0px 30px #ff0000,0px 0px 50px #ff0000;
}


.barra-decor{
    width: 100%;
    height: 50px;
    background:linear-gradient(to  top,#090911,#ff0000d0,#090911);
    position: relative;
    top: 30px;
    justify-content: space-between;
    align-items: center;
    z-index: 333;
    display: flex;
}

.barra-decor P{
    color: #fff;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.conteiner-apress{
    width: 100%;
    height: auto;
    min-height: 400px;
    /* border: 2px solid red; */
    top: 90px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.con-txt{
    width: 44%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    /* border: 2px solid palevioletred; */
    padding: 10px;
    padding-left: 60px;
    color: #cfcfcf;
}

.con-txt h1{
 
font-size: 30px;
font-family: Audiowide;
font-weight: 100;
text-shadow: 0px 0px 10px #00d4ff,0px 0px 30px #00d4ff,0px 0px 50px #00d4ff;
color: #fff;
}
.con-txt h3{
font-size: 17px;
font-family: Arial, Helvetica, sans-serif;
font-weight: 100;
text-align: start;
}
.con-fts{
    width: 44%;
    height: 500px;
    background-image: url(../img/69c006de986609796ff1c74627969d86.png);
    background-size: 74%;
    background-position: center;
    background-repeat: no-repeat;
}


.letras{
    width: 100%;
    height: auto;
    /* background-color: #00d4ff; */
    top: 130px;
    text-align: center;
    font-size: 30px;
    font-family: Audiowide;
    position: relative;
    color: #cfcfcf;
}

.quemsomo-div{
    width: 100%;
    height: auto;
    min-height: 400px;
    /* border: 2px solid green; */
    position: relative;
    top: 200px;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.divquem{
    width: 80%;
    height: auto;
    min-height: 400px;
    background-color: #090911;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    
}

.divquem p{
    font-size: 20px;
    color: #cfcfcf;
    font-family: Audiowide;
    font-weight: 400;
    margin-top: 10px;
    margin-bottom: 20px;
    

}
.divquem h3{
    font-size: 17px;
    color: #cfcfcf;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 10px;
    padding-left: 20px;
    text-align: start;

}

.btacao1{
    width: 30%;
    height: 55px;
    clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
    background-color: #ff0000;
    color: #fff;
    border: none;
    font-family: Audiowide;
    font-size: 20px;
    margin-top: 20px;
    cursor: pointer;
 
    transition: transform 0.8s;
}

.btacao1::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: #00d4ff;
    transition: width 0.1s ease-in-out;
    z-index: -1;
}


.btacao1:hover::before {
    width: 100%;
}
.foto-quem{
    width: 20%;
    height: auto;
    min-height: 400px;
    background-image: url(../img/291a67e5ee22fd4f92bc263ba8fa3b7b.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;


}

.letras2{
    width: 100%;
    height: auto;
    /* background-color: #00d4ff; */
    top: 250px;
    text-align: center;
    font-size: 30px;
    font-family: Audiowide;
    position: relative;
    color: #cfcfcf;
}


.tela-cards-benefique{
    width: 100%;
    height: auto;
    min-height: 400px;
    /* border: 2px solid green; */
    position: relative;
    top: 300px;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(3,300px);
    grid-template-rows: 300px 300px;
    gap: 20px;
    background-color: #090911;
   
    
}


.card{
    width: 300px;
    height: auto;
    background-color: transparent;
    border: 2px solid #00d5ff;
    border-radius: 20px;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    transition: transform 0.2s ease-in-out;
}
.card:hover{
    transform: scale(1.05);
    box-shadow: 0px 0px 10px #00d5ff67,0px 0px 20px #00d5ff67;
    cursor: pointer;
}
.icones{
    width: auto;
    height: auto;
    background-color: transparent;
    color: #00d4ff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
.icones svg{
    width: 40px;
    height: 40px;
    margin-top: 10px;
}
.card p{
    font-size: 17px;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    padding: 10px;
    text-align: center;
}

.card h3{
    font-size: 17px;
    color: #cfcfcf;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    font-weight: 100;
    margin-top: 10px;
    padding: 10px;
    text-align: center;
}



.tell-main-contrutcture{
    width: 100%;
    height: auto;
    /* border: 2px solid #00d4ff; */
    position: relative;
    top: 420px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fts-contrutcture{
    width: 400px;
    height: 300px;
    /* background: #00d4ff; */
    background-image: url(../img/549ddd1923b97151b4fec8936470f625.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 78%;
    border-radius: 20px;
    margin-left: 20px;
}

.txt-contrutcture{
    width: 70%;
    height: 300px;
    background-color: #090911;
    margin-right: 20px;
    border-radius: 20px;
    display: flex;
    justify-items: flex-start;
    align-items: center;
    flex-direction: column;
}

.txt-contrutcture p{
    font-size: 19px;
    font-family: Audiowide;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #cfcfcf;
}
.txt-contrutcture h3{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: 100;
    padding: 10px;
    color: #cfcfcf;
}

.div-contler-gel{
    width: 100%;
    height: 400px;
    background-color: #090911;
    position: relative;
    top: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.quadro-letras{
    width: 600px;
    height: 400px;
    background-image: url(../img/f0b1df23e0a963fd2c8d338cf7ffd054.png);
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px 0px 20px 0px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 120px;
    color: #fff;
    box-shadow: 10px 10px 10px #1e1e1e;
    word-break: break-all;
    text-align: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    padding-right: 70px;
}

.div-alto-barras{
    width: 50%;
    height: auto;
    /* background-color:brown; */
    position: relative;
    left: -60px;
}

.barras{
    width: 100%;
    height: auto;
    min-height: 100px;
    background-color: #1e1e1e;
    padding: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: 20px 0px 20px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
}

.barras p{
    font-family: Audiowide;
    font-size: 17px;
    margin-bottom: 10px;
    color: #cfcfcf;
}
.barras h3{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: 100;
    color: #cfcfcf;
    text-align: center;
}

.info-design{
    width: 100%;
    height: auto;
    /* min-height: ; */
    position: relative;
    top: 560px;
    /* border: 2px solid red; */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

.info-design p{
    font-size: 20px;
    color: #cfcfcf;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 30px;
    border-bottom: 1px solid #cfcfcf;
    font-weight: 100;
}
.info-design h2{
    width: 90%;
    
    font-size: 17px;
    color: #cfcfcf;
    font-weight: 100;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 30px;
    text-align: center;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

.info-design h2 ul{
    width: 80%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* border: 2px solid red; */
}
.info-design h2 ul li{
    font-size: 17px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bolder;
}

.silder-auto-gr{
    display: flex;
    height: auto;
    margin: auto;
    overflow: hidden;
    align-items: center;
    /* background-color: red; */
    position: relative;
    top: 600px;
}

.silder-auto-gr::before{
    position: absolute;
    z-index: 1;
    left: 0;
    content: --;
    width: 23%;
  
    height: 110px;
    
    
}
.silder-auto-gr::after{
    position: absolute;
    z-index: 1;
    right: 0;
    content: --;
    width: 23%;
    height: 110px;
    
    
}

.silder-auto-gr  .slide-track{
    display: flex;
    animation:  scroolauto 60s linear infinite;
    -webkit-animation: scroolauto 60s linear infinite;
    width: calc(240px * 10);
}

.silder-auto-gr .sliss{
    display: flex;
}
.silder-auto-gr .sliss img{
   width: 400px;
   height: 210px;
   padding: 10px;
   /* background-color: #00d4ff; */
   border-radius: 10px;
   cursor: pointer;
   margin: 20px;
   overflow: hidden;

}


@keyframes scroolauto{
    0%{
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    
    100%{
        -webkit-transform: translateX(calc(-240px * 5));
        transform: translateX(calc(-240px * 5));
    }
}


.silder-auto-gr2{
    display: flex;
    height: auto;
    margin: auto;
    overflow: hidden;
    align-items: center;
    /* background-color: red; */
    position: relative;
    top: 600px;
}

.silder-auto-gr2::before{
    position: absolute;
    z-index: 1;
    left: 0;
    content: --;
    width: 23%;
  
    height: 110px;
    
    
}
.silder-auto-gr2::after{
    position: absolute;
    z-index: 1;
    right: 0;
    content: --;
    width: 23%;
    height: 110px;
    
    
}

.silder-auto-gr2  .slide-track2{
    display: flex;
    animation:  scroolauto2 60s linear infinite reverse;
    -webkit-animation: scroolauto2 60s linear infinite reverse;
    width: calc(240px * 10);
}

.silder-auto-gr2 .sliss2{
    display: flex;
}
.silder-auto-gr2 .sliss2 img{
   width: 400px;
   height: 210px;
   padding: 10px;
   /* background-color: #00d4ff; */
   border-radius: 10px;
   cursor: pointer;
   margin: 20px;
   overflow: hidden;

}


@keyframes scroolauto2{
    0%{
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    
    100%{
        -webkit-transform: translateX(calc(-240px * 5));
        transform: translateX(calc(-240px * 5));
    }
}

.nossos-produtos{
    width: 100%;
    height: auto;
    /* min-height: 300px; */
    background-color: #090911;
    position: relative;
    top: 700px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.produtos{
    width: 100%;
    height: 250px;
    /* background-color: #00d4ff; */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #fff;
    font-size: 20px;
    flex-direction: column;
    transition: transform 0.3s;
}

.produtos:hover{
    transform: scale(1.1);
    filter:grayscale(1);
    border-radius: 20px 0px 20px 0px;   

}

.imp1{
    background-image: url(../img/pexels-tranmautritam-326503.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.imp2{
    background-image: url(../img/pexels-fotios-photos-1092671.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.imp3{
    background-image: url(../img/pexels-karolina-grabowska-5717968.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.imp4{
    background-image: url(../img/pexels-antonio-batinic-2573434-4164418.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.imp5{
    background-image: url(../img/pexels-pixabay-262508.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.imp6{
    background-image: url(../img/pexels-markusspiske-177598.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}



.letras3{
    width: 100%;
    height: auto;
    /* background-color: #00d4ff; */
    top: 650px;
    text-align: center;
    font-size: 30px;
    font-family: Audiowide;
    position: relative;
    color: #cfcfcf;
}


.dedicao-divtemple{
    width: 100%;
    height: 500px;
    /* border: 2px solid green; */
    position: relative;
    top: 800px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.txt-divtemple{
    width: 55%;
    height: 500px;
    text-align: start;
    padding: 10px;
    padding-left: 30px;
    /* border: 2px solid rgb(73, 10, 150); */
    word-break: break-all;
}


.txt-divtemple h5{
    color: #cfcfcf;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 100;
    margin-top: 20px;
}
.txt-divtemple h2{
    color: #cfcfcf;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 100;
    margin-top: 20px;
}
.txt-divtemple p{
    color: #cfcfcf;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 100;
    margin-top: 20px;
    text-align: center;
    word-wrap: break-word;
}

.acaosecidn{
    width: 30%;
    height: 55px;
    clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
    background-color: #00d4ff;
    color: #fff;
    border: none;
    font-family: Audiowide;
    font-size: 20px;
    margin-top: 20px;
    cursor: pointer;
    transition: clip-path 0.3s;
}


.acaosecidn::before{
    width: 0%;
    height: 100%;
    content: "";
    z-index: -1;
    background-color: #ff0000;
    transition: width 0.3s ease-in-out;
    position: absolute;
    top: 0px;
    left: 0px;
    transform: scale(1.1);
}

.acaosecidn:hover::before{
    width: 100%;
    
}
.foto-divtemple{
    width: 40%;
    height: 500px;
    background-image: url(../img/9492371ff80e27300a4328ea73d902c2.png);
    background-size: 80%;
    background-repeat: no-repeat;
    /* border: 2px solid red; */
    left: -30px;
    position: relative;
    background-position: center;
}

.elementos-add{
    width: 100%;
    height: auto;
    min-height: 500px;
    background: radial-gradient(circle,#00bfe570 -90%,#000);
    /* border: 2px solid #000; */
    position: relative;
    top: 990px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.elementes{
    width: 20%;
    height: auto;
    /* border: 2px solid #000; */
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.logo-incon{
    width: auto;
    height: auto;
    margin-bottom: 20px;
    color: #cfcfcf;

}

.tetx-elem{
    width: 100%;
    padding: 10px;
    color: #cfcfcf;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}

.chadade-final{
    width: 100%;
    height: auto;
    position: relative;
    top: 1040px;
    /* background-color: #00d4ff; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}

.chadade-final h1{
    width: 80%;

    font-size: 17px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 100;
    padding: 10px;
    color: #cfcfcf;
    text-align: center;
}

#chadamabt{
    width: 30%;
    height: 55px;
    clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
    background-color: #ff0000;
    color: #fff;
    border: none;
    font-family: Audiowide;
    font-size: 20px;
    margin-top: 20px;
    cursor: pointer;
    transition: clip-path 0.3s;
    margin-bottom: 10px;
}


#chadamabt::before{
    width: 0%;
    height: 100%;
    top: 0px;
    left: 0px;
    transition: width 0.3s ease-in-out;
    background-color: #00d4ff;
    content: "";
    position: absolute;
    z-index: -1;
}

#chadamabt:hover::before{
    width: 100%;
}

.ativa-menu{
    display: none;
}

.menu-celular-mobile{
display: none;
}

#btwhaappfixo{
    width: 80px;
    height: 80px;
    background-image: url(../fotos/social.png);
    background-size: 88%;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 88%;
    left: 94%;
    transform: translate(-50%,-50%);
    position: fixed;
    cursor: pointer;
    z-index: 9999999;
}

#btwhaappfixo svg{
    color: #ff0000;
       width:60px;
    height: 60px;
}
/* Estiliza a largura e a altura da barra de rolagem */
::-webkit-scrollbar {
    width: 10px; /* Largura da barra vertical */
    height: 10px; /* Altura da barra horizontal */
}

/* Estiliza o fundo da barra de rolagem */
::-webkit-scrollbar-track {
    background: #090911; /* Cor de fundo */
    border-radius: 5px;
}

/* Estiliza o "thumb" (a parte que você arrasta) */
::-webkit-scrollbar-thumb {
    background: #00d4ff; /* Cor do thumb */
    border-radius: 5px;
}

/* Efeito ao passar o mouse sobre o thumb */
::-webkit-scrollbar-thumb:hover {
    background: #ff0000;
}

#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: #000000d2;
    border-top: 4px solid #00d4ff ;
    box-shadow: 0px -10px 30px #00d5ff5e;
    color: white;
    text-align: center;
    padding: 10px;
    display: none; 
    font-size: 18px;
    font-family: Audiowide;
    z-index: 99999999;
}

#cookie-banner .org{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 2px solid #00d4ff; */
    position: relative;
    left: 50%;
    transform: translate(-50%);

}
#cookie-banner button {
    margin-left: 10px;
    background: #181818;
    height: 50px;
    border-radius: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
    /* border: none; */
    width: 30%;
    font-size: 20px;
    font-family: Audiowide;
    cursor: pointer;
    color: white;
    transition:  transform 0.3s ease;
}

#cookie-banner button:hover{
    transform: scale(1.04);
}

.vision_spectro{
    width: 100%;
    height: 600px;
    /* background-color: green; */
    background: radial-gradient(circle,#00252c,#000000);
    position: relative;
    top: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}

.vision_spectro > h2{
    color: #ffffff;
    text-shadow: 0px 0px 10px #00d4ff;
    font-family: Anta;
    font-size: 160px;
}
.vision_spectro > h3{
    color: #ffffff;
    text-shadow: 0px 0px 10px #ff0000;
    font-family: Anta;
    font-size: 100px;
}

.vi_img{
    width: 400px;
    height: 600px;
    background-image: url(../img/6a9b7de02a82a02e44e66763c4b83a39.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* border: 2px solid red; */
    position: absolute;
    top: 53%;
    transform: translateY(-50%);
}


.vi_buttons{
    width: auto;
    height: auto;
    /* min-height: ; */
    /* border: 2px solid red; */
    position: absolute;
    left: 15%;
    top: 70%;
    transform: translate(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* From Uiverse.io by cssbuttons-io */ 
.fancy {
 background-color: transparent;
 border: 2px solid #00d4ff;
 border-radius: 0;
 box-sizing: border-box;
 color: #fff;
 cursor: pointer;
 display: inline-block;
 float: right;
 font-weight: 700;
 letter-spacing: 0.05em;
 margin: 0;
 outline: none;
 overflow: visible;
 padding: 1.25em 2em;
 position: relative;
 text-align: center;
 text-decoration: none;
 text-transform: none;
 transition: all 0.3s ease-in-out;
 user-select: none;
 font-size: 13px;
 margin-bottom: 20px;
 font-family: Anta;
}

.fancy::before {
 content: " ";
 width: 1.5625rem;
 height: 2px;
 background:#ffffff;
 top: 50%;
 left: 1.5em;
 position: absolute;
 transform: translateY(-50%);
 transform-origin: center;
 transition: background 0.3s linear, width 0.3s linear;
}

.fancy .text {
 font-size: 1.125em;
 line-height: 1.33333em;
 padding-left: 2em;
 display: block;
 text-align: left;
 transition: all 0.3s ease-in-out;
 text-transform: uppercase;
 text-decoration: none;
 color: #fff;
}

.fancy .top-key {
 height: 2px;
 width: 1.5625rem;
 top: -2px;
 left: 0.625rem;
 position: absolute;
 background: #e8e8e8;
 transition: width 0.5s ease-out, left 0.3s ease-out;
}

.fancy .bottom-key-1 {
 height: 2px;
 width: 1.5625rem;
 right: 1.875rem;
 bottom: -2px;
 position: absolute;
 background: #e8e8e8;
 transition: width 0.5s ease-out, right 0.3s ease-out;
}

.fancy .bottom-key-2 {
 height: 2px;
 width: 0.625rem;
 right: 0.625rem;
 bottom: -2px;
 position: absolute;
 background: #e8e8e8;
 transition: width 0.5s ease-out, right 0.3s ease-out;
}

.fancy:hover {
 color: white;
 background: #ff0000;
 border: 2px solid #fff;
 transform: scale(1.1);
}

.fancy:hover::before {
 width: 0.9375rem;
 background: white;
}

.fancy:hover .text {
 color: white;
 padding-left: 1.5em;
}

.fancy:hover .top-key {
 left: -2px;
 width: 0px;
}

.fancy:hover .bottom-key-1,
 .fancy:hover .bottom-key-2 {
 right: 0;
 width: 0;
}


.vi_h{
    width: 20%;
    height: auto;
    min-height: 100px;
    /* border: 2px solid red; */
    top: 60%;
    left: 88%;
    transform: translate(-50%);
    position: absolute;
    color: #fff;
    text-shadow: 0px 0px 10px #00d4ff;
    text-align: center;
    font-family: anta;
    font-size: 19px;
    text-align: end;
}
.form_pedidos{
    width: 60%;
    height: auto;
    min-height: 300px;
    /* border: 2px solid #fff; */
    border-radius: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    position: relative;
    top: 1300px;
       position: relative;
     left: 50%;
     transform: translateX(-50%);
     background-color: #181818;

}

.form_pedidos h1{
    color: #fff;
     font-family: Audiowide;
     margin-bottom: 30px;
     font-size: 21px;
     margin-top: 10px;
     /* border-bottom: 2px solid #fff; */
     padding-bottom: 6px;
  
}

.org_input{
    width: 90%;
    height: auto;
    /* border: 2px solid green; */
    display: flex;
    justify-content: space-between;
    align-items: center;

    border-radius: 10px;
}
.org_input label{
     color: #fff;
     font-family: Audiowide;
     font-size: 21px;
     margin-right: 10px;
     margin-left: 10px;
     width: 30%;
     /* border: 2px solid rebeccapurple; */
     text-align: center;
     margin-top: 20px;
}


.org_input input{
    width: 40%;
    outline: none;
    height: 55px;
    border-radius: 11px;
    padding-left: 10px;
    font-size: 17px;
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    border: none;
    margin-top: 20px;

}

.org_area{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 20px;
}


.org_area label{
    color: #fff;
     font-family: Audiowide;
     font-size: 17px;
     margin-bottom: 10px;
}

.org_area textarea{
    width: 70%;
    height: 300px;  
    border: none;
    border-radius: 10px;
    outline: none;
    padding: 10px;
    font-size: 17px;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
}

.button_form_cliente{
    width: 60%;
    height: 55px;
    text-align: center;
    color: #ffffff;
    font-family: Audiowide;
    text-align: center;
    margin-top: 20px;
    background-color: #00d4ff;
    border: none;
    font-size: 18px;
    cursor: pointer;
    border-radius: 11px;
    position: relative;
    margin-bottom: 20px;
     transition: width 0.3s ease;
     overflow: hidden;
}

.button_form_cliente::before{
    width: 0%;
    height: 100%;
    background-color: red;
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    transition: width 0.3s ease;
}

.button_form_cliente:hover:before{
    width: 100%;
     transition: width 0.3s ease;
}


.tella_marketing{
    width: 100%;
    height: 400px;
    background: linear-gradient(to left top,#00d5ff91 -20%,#000000);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 1100px;

}


.markis{
    width: 40%;
    height: auto;
    /* border: 2px solid #fff; */
}


.markis h1{
    color: #ffff;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 10px;
    font-size: 20px;
}

.markis p{
    color: #ffff;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 10px;
    font-size: 18px;
}
.fts_marketing{
    width: 400px;
    height: 400px;
    background-image: url(../img/d1981ffbfddfa9cf46ddabdfa330b04f.png);
    background-repeat: no-repeat;
    background-size: 78%;
    background-position: center;
    /* border: 2px solid #fff; */

}

#numero_cliente{
   color: #717171;
     font-family: Audiowide;
     font-size: 21px;
     margin-right: 10px;
     margin-left: 10px;
     width: 50%;
     height: 60px;
     /* border: 2px solid rebeccapurple; */
     text-align: center;
     margin-top: 20px;
     outline: none;
     border-radius: 10px;
}

.p_contas{
       font-family: Audiowide;
    color: #fff;
}
@media (min-width:320px) and (max-width:740px){

    header{
        width: 100vw;
        height: 60px;
        /* background-color: #090911; */
        display: flex;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
        position: fixed;
        top: 0px;
        z-index: 8888;
    }
    
    header .div-foto{
        width: 60px;
        height: 60px;
        background-image: url(../img/logo.png);
        background-position: center;
        background-size: 80%;
        background-repeat: no-repeat;
    }
    
    header ul{
        width: 20%;
        height: 60px;
        background-color: transparent;
        display: flex;
        justify-content: space-between;
        align-items: center;
        display: none;
        margin-left: 30px;
        margin-right: 30px;
    }
    
    header ul a{
        /* color: #fff; */
        /* font-family: Arial, Helvetica, sans-serif; */
        font-size: 17px;
        text-decoration: none;
        transition: transform 0.3s;
       
    }
    
    header ul a:hover{
        width: auto;
        height: 60px;
        /* background-color: #00d4ff; */
        display: flex;
        justify-content: center;
        align-items: center;
        transform: scale(1.1);
    }    

    .ativa-menu{
        width: 60px;
        height: 60px;
        /* background-color: #26ff00; */
        display: flex;
        justify-content: center;
        align-items: center;
        color: #00d4ff;
    }
.mobel-cll-smarth{
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 40px;

}
    .menu-celular-mobile{
    width: 100%;
    height: 100vh;
    top: -888px;
    /* background-color: pink; */
    position: absolute;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    z-index: 99999;
    }
    
    .menu-celular-mobile-on{
    width: 70%;
    height: 100vh;
    top: 0px;
    left: 0px;
    background-color: #090911;
    position: absolute;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    z-index: 99999;
    animation:  menu-celular-mobile-on 0.3s;
    }
    
    @keyframes menu-celular-mobile-on {
        from{
            left: -777px;
        }
        to{
            left: 0px;
        }
    }
    .menu-celular-mobile-off{
    width: 70%;
     height: 100vh;
    top: 0px;
    left: -888px;
    background-color: #090911;
    position: absolute;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    z-index: 99999;
    animation:  menu-celular-mobile-off 0.3s;
    }
    
    @keyframes menu-celular-mobile-off {
        from{
            left: 0px;
        }
        to{
            left: -888px;
        }
    }
    .moebl-link{
        width:80%;
        height: auto;
        padding: 12px;
        background-color: transparent;
        border: 2px solid #00d5ff65;
        border-radius: 11px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
        text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bolder;
        color: #fff;
        text-shadow: 0px 0px 10px #ffffff80,0px 0px 20px #ffffff80;
        font-size: 20px;
    }

    .tela-base-aprees{
        position: relative;
        width: 100%;
        max-width: 100%;
        height: auto;
        overflow: hidden;
        /* border: 2px solid rgb(21, 189, 40); */
       
    }
    
    .slide-con{
        display: flex;
        transition: transform 0.5s ease-in-out;
    }
    
    
    .slid-compac{
    min-width: 100%;
    height: auto;
    }
    
    .btn{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: transparent;
        /* color: #00d4ff; */
        border: none;
        padding: 10px;
        cursor: pointer;
        z-index: 7777;
        font-size: 40px;
        
    
    }
    
    .btn.left{
        left: 10px;
    }
    .btn.right{
        right: 10px;
    }
    
    .logo-autrer-spectrotec{
        width: auto;
        height: auto;
        position: absolute;
        z-index: 333;
        /* background-color: #0800f3; */
        top: -3%;
        left:50%;
        transform: translate(-50%,50%);
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size: 40px;
        /* font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; */
        font-weight: bolder;
        /* color: #fff; */
    }
    
    #nomelogo{
        width: 160px;
        height: 160px;
        
        background-image: url(../img/nemologo.png);
        background-size: 110%;
        background-position: center;
        background-repeat: no-repeat;
    }
    #btnir{
        width: 90%;
        height: 55px;
        border-radius: 30px;
        border: 5px  solid #00d4ff;
        box-shadow: 10px 0px 300px #00d4ff;
        background-color: transparent;
        color: #fff;
        /* font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; */
        font-size: 17px;
        margin-top: 10px;
        cursor: pointer;
        transition: transform 0.3s;
        
    }
    #btnir:hover{
        transform: scale(1.1);
        border: 5px  solid #ff0000;
        box-shadow: 10px 0px 300px #ff0000;
        background: transparent;
        color: #ff0000;
    }
    
    .barra-decor{
        width: 100%;
        height: 50px;
        /* background:linear-gradient(to left top,#ff0000,#090911); */
        position: relative;
        top: 30px;
        justify-content: space-between;
        align-items: center;
        display: flex;
    }
    
    .barra-decor P{
        /* color: #fff; */
        /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
    }

    .conteiner-apress{
        width: 100%;
        height: auto;
        min-height: 400px;
        /* border: 2px solid red; */
        top: 90px;
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
    }
    
    .con-txt{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        /* border: 2px solid palevioletred; */
        padding: 10px;   
        padding-left: 0px;
    }
    
    .con-txt h1{
    font-size: 30px;
    /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
    font-weight: 100;
    }
    .con-txt h3{
    font-size: 17px;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-weight: 100;
    text-align: center;
    padding: 10px;
    }
    .con-fts{
        width: 70%;
        height: 400px;
        background-image: url(../img/69c006de986609796ff1c74627969d86.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        border-bottom: 2px solid red;
    }
    
    .conflutuando{
        width: 80%;
        height: 180px;
        background-image: url(../fotos/pexels-markusspiske-1089438.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        left: 50%;
        top: 70%;
        transform: translate(-50%,-50%);
    }

    .letras{
        width: 100%;
        height: auto;
        /* background-color: #00d4ff; */
        top: 130px;
        text-align: center;
        font-size: 30px;
        /* font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; */
        position: relative;
        /* color: #1e1e1e; */
    }

    .quemsomo-div{
        width: 100%;
        height: auto;
        min-height: 400px;
        /* border: 2px solid green; */
        position: relative;
        top: 200px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
    
    }
    
    .divquem{
        width: 100%;
        height: auto;
        min-height: 400px;
        /* background-color: #090911; */
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        
    }
    
    .divquem p{
        font-size: 17px;
        /* color: #cfcfcf; */
        text-align: center;
        /* font-family: Arial, Helvetica, sans-serif; */
        font-weight: 400;
        margin-top: 10px;
        margin-bottom: 20px;
    }
    .divquem h3{
        font-size: 17px;
        /* color: #cfcfcf; */
        /* font-family: Arial, Helvetica, sans-serif; */
        font-weight: 400;
        margin-top: 10px;
        margin-bottom: 20px;
        text-align: center;
        padding: 30px;
        padding-left: 0px;
        word-spacing: 3px;
    }
    
    .btacao1{
        width: 80%;
        height: 55px;
        clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
        /* background-color: #ff0000; */
        /* color: #fff; */
        border: none;
        /* font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; */
        font-size: 20px;
        margin-top: 20px;
        cursor: pointer;
        transition: clip-path 0.3s;
    }
    .foto-quem{
        width: 100%;
        height: auto;
        min-height: 400px;
        background-image: url(../fotos/pexels-markusspiske-1089438.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    
    
    }

    .tela-cards-benefique{
        width: 100%;
        height: 400px;
        min-height: 400px;
        /* border: 2px solid green; */
        position: relative;
        top: 300px;
        display: flex;
        /* grid-template-columns: repeat(3,300px); */
        /* grid-template-rows: 300px 300px; */
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        gap: 20px;
        /* background-color: #090911; */
        overflow-y: scroll;
        
    }
    
    
    .card{
        width: 300px;
        height: auto;
        /* background-color: #1e1e1e; */
        border-radius: 20px;
        position: relative;
        left: 0%;
        transform: translate(0%);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
    }
.icones{
    width: auto;
    height: auto;
    background-color: transparent;
    /* color: #00d4ff; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.card p{
    font-size: 17px;
    /* color: #fff; */
    /* font-family: Arial, Helvetica, sans-serif; */
    font-weight: bolder;
    padding: 10px;
    text-align: center;
}

.card h3{
    font-size: 17px;
    /* color: #cfcfcf; */
    /* font-family: Arial, Helvetica, sans-serif; */
    font-weight: bolder;
    font-weight: 100;
    margin-top: 10px;
    padding: 10px;
    text-align: center;
}



.tell-main-contrutcture{
    width: 100%;
    height: auto;
    /* border: 2px solid #00d4ff; */
    position: relative;
    top: 420px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

.fts-contrutcture{
    width: 400px;
    height: 300px;
    /* background: #00d4ff; */
    border-radius: 20px;
    margin-left: 0px;
    background-image: url(../img/549ddd1923b97151b4fec8936470f625.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 78%;
}

.txt-contrutcture{
    width: 90%;
    height: auto;
    /* background-color: #ff0000; */
    margin-right: 0px;
    border-radius: 20px;
    display: flex;
    justify-items: flex-start;
    align-items: center;
    flex-direction: column;
}

.txt-contrutcture p{
    font-size: 19px;
    /* font-family: Audiowide; */
    margin-top: 10px;
    margin-bottom: 10px;
}
.txt-contrutcture h3{
    /* font-family: Arial, Helvetica, sans-serif; */
    font-size: 18px;
    padding: 10px;
    text-align: center;
}

.div-contler-gel{
    width: 100%;
    height: auto;
    /* background-color: #090911; */
    position: relative;
    top: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.quadro-letras{
    width: 100%;
    height: 400px;
    /* background-color: #00d4ff; */
    border-radius: 20px 0px 20px 0px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 120px;
    /* color: #ff0000; */
    word-break: break-all;
    text-align: center;
    /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
    padding-right: 70px;
}

.div-alto-barras{
    width: 100%;
    height: auto;
    /* background-color:brown; */
    position: relative;
    left: 0px;
}

.barras{
    width: 100%;
    height: auto;
    min-height: 100px;
    /* background-color: #1e1e1e; */
    padding: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: 20px 0px 20px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
}

.barras p{
    /* font-family: Arial, Helvetica, sans-serif; */
    font-size: 17px;
    text-align: center
    /* color: #cfcfcf; */
}
.barras h3{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    /* color: #cfcfcf; */
}

.info-design{
    width: 100%;
    height: auto;
    /* min-height: ; */
    position: relative;
    top: 560px;
    /* border: 2px solid red; */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

.info-design p{
    font-size: 19px;
    /* color: #1e1e1e; */
    /* font-family: Arial, Helvetica, sans-serif; */
    font-weight: 100;
    margin-bottom: 10px;
    padding: 10px;
    text-align: center;
}
.info-design h2{
    font-size: 19px;
    /* color: #1e1e1e; */
    /* font-family: Arial, Helvetica, sans-serif; */
    font-weight: 100;
    margin-bottom: 10px;
    text-align: center;
}

.silder-auto-gr{
    display: flex;
    height: auto;
    margin: auto;
    overflow: hidden;
    align-items: center;
    /* background-color: red; */
    position: relative;
    top: 600px;
}

.silder-auto-gr::before{
    position: absolute;
    z-index: 1;
    left: 0;
    content: --;
    width: 23%;
  
    height: 110px;
    
    
}
.silder-auto-gr::after{
    position: absolute;
    z-index: 1;
    right: 0;
    content: --;
    width: 23%;
    height: 110px;
    
    
}

.silder-auto-gr  .slide-track{
    display: flex;
    animation:  scroolauto 60s linear infinite;
    -webkit-animation: scroolauto 60s linear infinite;
    width: calc(240px * 10);
}

.silder-auto-gr .sliss{
    display: flex;
}
.silder-auto-gr .sliss img{
   width: 380px;
   height: 200px;
   padding: 10px;
   /* background-color: #00d4ff; */
   border-radius: 10px;
   cursor: pointer;
   margin: 20px;
   overflow: hidden;

}


@keyframes scroolauto{
    0%{
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    
    100%{
        -webkit-transform: translateX(calc(-240px * 5));
        transform: translateX(calc(-240px * 5));
    }
}


.silder-auto-gr2{
    display: flex;
    height: auto;
    margin: auto;
    overflow: hidden;
    align-items: center;
    /* background-color: red; */
    position: relative;
    top: 600px;
}

.silder-auto-gr2::before{
    position: absolute;
    z-index: 1;
    left: 0;
    content: --;
    width: 23%;
  
    height: 110px;
    
    
}
.silder-auto-gr2::after{
    position: absolute;
    z-index: 1;
    right: 0;
    content: --;
    width: 23%;
    height: 110px;
    
    
}

.silder-auto-gr2  .slide-track2{
    display: flex;
    animation:  scroolauto2 60s linear infinite reverse;
    -webkit-animation: scroolauto2 60s linear infinite reverse;
    width: calc(240px * 10);
}

.silder-auto-gr2 .sliss2{
    display: flex;
}
.silder-auto-gr2 .sliss2 img{
    width: 380px;
    height: 200px;
   padding: 10px;
   /* background-color: #00d4ff; */
   border-radius: 10px;
   cursor: pointer;
   margin: 20px;
   overflow: hidden;

}


@keyframes scroolauto2{
    0%{
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    
    100%{
        -webkit-transform: translateX(calc(-240px * 5));
        transform: translateX(calc(-240px * 5));
    }
}

.nossos-produtos{
    width: 100%;
    height: 300px;
    /* min-height: 300px; */
    /* background-color: #090911; */
    position: relative;
    top: 700px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    overflow-y: scroll;
}


.produtos{
    min-width: 100%;
    min-height: 250px;
    /* background-color: #00d4ff; */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
    /* color: #fff; */
    font-size: 20px;
    flex-direction: column;
    transition: transform 0.3s;
    margin-bottom: 10px;
    margin-top: 10px;
}

.produtos:hover{
    transform: scale(1.1);
    /* background-color: #ff0000; */
    
}

.produtos:active{
    /* background-color: #26ff00; */

}


.dedicao-divtemple{
    width: 100%;
    height: auto;
    /* border: 2px solid green; */
    position: relative;
    top: 800px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

.txt-divtemple{
    width: 100%;
    height: 500px;
    text-align: center;
    padding: 10px;
    padding-left: 0px;
    /* border: 2px solid rgb(73, 10, 150); */
    word-break: break-all;
}


.txt-divtemple h5{
    /* color: #090911; */
    /* font-family: Arial, Helvetica, sans-serif; */
    font-weight: 100;
    margin-top: 20px;
}
.txt-divtemple h2{
    /* color: #090911; */
    /* font-family: Arial, Helvetica, sans-serif; */
    font-weight: 100;
    margin-top: 20px;
}
.txt-divtemple p{
    /* color: #090911; */
    /* font-family: Arial, Helvetica, sans-serif; */
    font-weight: 100;
    padding: 10px;
    margin-top: 20px;
}

.acaosecidn{
    width: 80%;
    height: 55px;
    clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
    /* background-color: #00d4ff; */
    /* color: #fff; */
    border: none;
    /* font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; */
    font-size: 20px;
    margin-top: 20px;
    cursor: pointer;
    transition: clip-path 0.3s;
}

.foto-divtemple{
    width: 100%;
    height: 300px;
    background-image: url(../img/9492371ff80e27300a4328ea73d902c2.png);
    background-size: 80%;
    background-repeat: no-repeat;
    /* border: 2px solid red; */
    left: 0px;
    margin-top: 130px;
    position: relative;
    background-position: center;
}

.elementos-add{
    width: 100%;
    height: auto;
    min-height: 400px;
    /* border: 2px solid #000; */
    position: relative;
    top: 900px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.elementes{
    width: 96%;
    height: auto;
    /* border: 2px solid #000; */
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.logo-incon{
    width: auto;
    height: auto;
    margin-bottom: 20px;
}

.tetx-elem{
    width: 100%;
    padding: 10px;
    text-align: center;
    /* font-family: Arial, Helvetica, sans-serif; */
}


.chadade-final{
    width: 100%;
    height: auto;
    position: relative;
    top: 940px;
    /* background-color: #00d4ff; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}

.chadade-final h1{
    width: 100%;
    font-size: 17px;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-weight: 100;
    text-align: center;
    padding: 10px;
}

#chadamabt{
    width: 70%;
    height: 55px;
    clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
    /* background-color: #ff0000; */
    /* color: #fff; */
    border: none;
    /* font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; */
    font-size: 20px;
    margin-top: 20px;
    cursor: pointer;
    transition: clip-path 0.3s;
    margin-bottom: 10px;
}

#btwhaappfixo{
    width: 68px;
    height: 68px;
    background-image: url(../fotos/social.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    top: 89%;
    left: 82%;
    transform: translate(-50%,-50%);
    position: fixed;
    z-index: 9999999;

}

/* Estiliza a largura e a altura da barra de rolagem */
::-webkit-scrollbar {
    width: 20px; /* Largura da barra vertical */
    height: auto; /* Altura da barra horizontal */
}

/* Estiliza o fundo da barra de rolagem */
::-webkit-scrollbar-track {
    background: #090911; /* Cor de fundo */
    border-radius: 5px;
}

/* Estiliza o "thumb" (a parte que você arrasta) */
::-webkit-scrollbar-thumb {
    background: #00d4ff; /* Cor do thumb */
    border-radius: 5px;
}

/* Efeito ao passar o mouse sobre o thumb */
::-webkit-scrollbar-thumb:hover {
    background: #ff0000;
}

#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: #000000d2;
    border-top: 4px solid #00d4ff ;
    box-shadow: 0px -10px 30px #00d5ff5e;
    color: white;
    text-align: center;
    padding: 10px;
    display: none; 
    font-size: 18px;
    font-family: Audiowide;
    z-index: 99999999;
}

#cookie-banner .org{
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 2px solid #00d4ff; */
    position: relative;
    left: 50%;
    transform: translate(-50%);

}
#cookie-banner button {
    margin-left: 10px;
    background: #181818;
    height: 50px;
    border-radius: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
    /* border: none; */
    width: 90%;
    font-size: 20px;
    font-family: Audiowide;
    cursor: pointer;
    color: white;
    transition:  transform 0.3s ease;
}

#cookie-banner button:hover{
    transform: scale(1.04);
}


.vision_spectro{
    width: 100%;
    height: 600px;
    /* background-color: green; */
    background: radial-gradient(circle,#00252c,#000000);
    position: relative;
    top: 1200px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;

}

.vision_spectro > h2{
    /* border: 2px solid green; */
    width: 80%;
    height: auto;
    color: #ffffff;
    text-shadow: 0px 0px 10px #00d4ff;
    font-family: Anta;
    font-size: 40px;
}
.vision_spectro > h3{
  /* border: 2px solid green; */
    width: 80%;
    height: auto;
    color: #ffffff;
    text-shadow: 0px 0px 10px #ff0000;
    font-family: Anta;
    font-size: 20px;
}

.vi_img{
    width: 250px;
    height: 250px;
    background-image: url(../img/6a9b7de02a82a02e44e66763c4b83a39.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* border: 2px solid red; */
    position: absolute;
    top: 48%;
    transform: translateY(-50%);
}


.vi_buttons{
    width: auto;
    height: auto;
    /* min-height: ; */
    /* border: 2px solid red; */
    position: absolute;
    left: 50%;
    top: 70%;
    transform: translate(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* From Uiverse.io by cssbuttons-io */ 
.fancy {
 background-color: transparent;
 border: 2px solid #00d4ff;
 border-radius: 0;
 box-sizing: border-box;
 color: #fff;
 cursor: pointer;
 display: inline-block;
 float: right;
 font-weight: 700;
 letter-spacing: 0.05em;
 margin: 0;
 outline: none;
 overflow: visible;
 padding: 1.25em 2em;
 position: relative;
 text-align: center;
 text-decoration: none;
 text-transform: none;
 transition: all 0.3s ease-in-out;
 user-select: none;
 font-size: 13px;
 margin-bottom: 20px;
 font-family: Anta;
}

.fancy::before {
 content: " ";
 width: 1.5625rem;
 height: 2px;
 background:#ffffff;
 top: 50%;
 left: 1.5em;
 position: absolute;
 transform: translateY(-50%);
 transform-origin: center;
 transition: background 0.3s linear, width 0.3s linear;
}

.fancy .text {
 font-size: 1.125em;
 line-height: 1.33333em;
 padding-left: 2em;
 display: block;
 text-align: left;
 transition: all 0.3s ease-in-out;
 text-transform: uppercase;
 text-decoration: none;
 color: #fff;
}

.fancy .top-key {
 height: 2px;
 width: 1.5625rem;
 top: -2px;
 left: 0.625rem;
 position: absolute;
 background: #e8e8e8;
 transition: width 0.5s ease-out, left 0.3s ease-out;
}

.fancy .bottom-key-1 {
 height: 2px;
 width: 1.5625rem;
 right: 1.875rem;
 bottom: -2px;
 position: absolute;
 background: #e8e8e8;
 transition: width 0.5s ease-out, right 0.3s ease-out;
}

.fancy .bottom-key-2 {
 height: 2px;
 width: 0.625rem;
 right: 0.625rem;
 bottom: -2px;
 position: absolute;
 background: #e8e8e8;
 transition: width 0.5s ease-out, right 0.3s ease-out;
}

.fancy:hover {
 color: white;
 background: #ff0000;
 border: 2px solid #fff;
 transform: scale(1.1);
}

.fancy:hover::before {
 width: 0.9375rem;
 background: white;
}

.fancy:hover .text {
 color: white;
 padding-left: 1.5em;
}

.fancy:hover .top-key {
 left: -2px;
 width: 0px;
}

.fancy:hover .bottom-key-1,
 .fancy:hover .bottom-key-2 {
 right: 0;
 width: 0;
}


.vi_h{
    width: 20%;
    height: auto;
    min-height: 100px;
    /* border: 2px solid red; */
    top: 60%;
    left: -100%;
    transform: translate(-50%);
    position: absolute;
    color: #fff;
    text-shadow: 0px 0px 10px #00d4ff;
    text-align: center;
    font-family: anta;
    font-size: 19px;
    text-align: end;
}















.form_pedidos{
    width: 100%;
    height: auto;
    min-height: 300px;
    /* border: 2px solid #fff; */
    border-radius: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    position: relative;
    top: 1200px;
       position: relative;
     left: 50%;
     transform: translateX(-50%);
     background-color: #181818;

}

.form_pedidos h1{
    color: #fff;
     font-family: Audiowide;
     margin-bottom: 30px;
     font-size: 21px;
     margin-top: 10px;
     /* border-bottom: 2px solid #fff; */
     padding-bottom: 6px;
  
}

.org_input{
    width: 100%;
    height: auto;
    /* border: 2px solid green; */
    display: flex;
    justify-content:center;
    flex-direction: column;
    align-items: center;

    border-radius: 10px;
}
.org_input label{
     color: #fff;
     font-family: Audiowide;
     font-size: 17px;
     margin-right: 10px;
     margin-left: 10px;
     width: 30%;
     /* border: 2px solid rebeccapurple; */
     text-align: center;
}

#lebar_org1{
    position: relative;
    top: 30px;
}

#lebar_org1{
    position: relative;
    top: 40px;
}
#lebar_org2{
    position: relative;
    top: 110px;
    z-index: 555;
    color: rgb(255, 255, 255);
}

.org_input input{
    width: 90%;
    outline: none;
    height: 55px;
    border-radius: 11px;
    padding-left: 10px;
    font-size: 17px;
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    border: none;
    margin-bottom: 30px;

}

.org_area{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 20px;
}


.org_area label{
    color: #fff;
     font-family: Audiowide;
     font-size: 17px;
     margin-bottom: 10px;
}

.org_area textarea{
    width: 90%;
    height: 300px;  
    border: none;
    border-radius: 10px;
    outline: none;
    padding: 10px;
    font-size: 17px;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
}

.button_form_cliente{
    width: 60%;
    height: 55px;
    text-align: center;
    color: #ffffff;
    font-family: Audiowide;
    text-align: center;
    margin-top: 20px;
    background-color: #00d4ff;
    border: none;
    font-size: 18px;
    cursor: pointer;
    border-radius: 11px;
    position: relative;
    margin-bottom: 20px;
     transition: width 0.3s ease;
     overflow: hidden;
}

.button_form_cliente::before{
    width: 0%;
    height: 100%;
    background-color: red;
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    transition: width 0.3s ease;
}

.button_form_cliente:hover:before{
    width: 100%;
     transition: width 0.3s ease;
}





.tella_marketing{
    width: 100%;
    height: auto;
    background: linear-gradient(to left top,#00d5ff91 -20%,#000000);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    top: 1100px;

}


.markis{
    width: 100%;
    height: auto;
    /* border: 2px solid #fff; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.markis h1{
    color: #ffff;
   font-family: Audiowide;
    margin-bottom: 10px;
    font-size: 20px;
    
}

.markis p{
    color: #ffff;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 10px;
    font-size: 17px;
    text-align: center;
    padding:5px;
}
.fts_marketing{
    width: 400px;
    height: 400px;
    background-image: url(../img/b964d80fb548bcad62d69d2f98ee4f5e.png);
    background-repeat: no-repeat;
    background-size: 78%;
    background-position: center;
    /* border: 2px solid #fff; */

}


#numero_cliente{
   color: #717171;
     font-family: Audiowide;
     font-size: 21px;
     margin-right: 10px;
     margin-left: 10px;
     width: 90%;
     height: 60px;
     /* border: 2px solid rebeccapurple; */
     text-align: center;
     margin-top: 20px;
     outline: none;
     border-radius: 14px;
}

.p_contas{
       font-family: Audiowide;
    color: #fff;
    text-align: center;
    width: 90%;
}



.pontinhos{
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
    /* border: 2px solid #fff; */
    display: none;
}

.pontinho{
    width: 15px;
    height: 15px;
    background-color: #00d5ff;
    cursor: pointer;
    transition: background-color 0.3s;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    display: none;

}


.pontinho.ativo{
    background-color: #ffffff;
    /* border: 2px solid #000000; */
    animation: altercolor 0.6s alternate infinite;
    display: none;
}
@keyframes altercolor{
    to{
        background-color: #000000;
    }
    from{
        background-color: #fff;
    }
}
}