@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* Globais*/

*{
    margin: 0;
    font-size: 18px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    outline: 0;
}

a{
    text-decoration: none;
}

.background{
    width: 100%;
    background-image: url(./img/background.png);
    background-size: cover;
    min-height: 739px;
}

.fundo_paginas{
    position: relative;
    width: 100%;
    height: 650px;
    backdrop-filter: blur(5px);
    top: 89px;
    align-items: center;
    border-radius: 5px;
}

.paginas-servicos{
    position: fixed;
    top: 30px;
    left: 220px;
    width: auto;
    text-align: center;
    color: #fff;
}

.botao_sair{
    position: fixed;
    top: 8px;
    right: 20px;
    font-size: 20px;
    color: #fff;
}
.botao_sair:hover{
    color: #ff0000;
    background-color: #0000002a;
}

/*js*/

#logo{
    position: fixed;
    top: 3px;
    display: flex;
    left: 10px;
    width: 140px;
    
}

#info{
    position: fixed;
    top: 15px;
    right: 15px;
    width: 40px;
    filter: invert(100%);
}

#info:hover{
    background-color: #00f7ff54;
    border-radius: 50px;
}


/*Paginas em contrução*/

.construindo{
    width: 100%;
    height: 100%;
    background-image: url(./img/construindo.png);
    background-size: 1500px;
    background-position: 0px;
    min-height: 739px;
}

/*Pagina sobre*/

.sair_sobre{
    position: fixed;
    top: 10px;
    right: 15px;
    font-size: 30px;
    color: #ffffffc2;
}

.sair_sobre:hover{
    color: #ff0000c4;
}

.text_sobre{
    position: fixed;
    width: 850px;
    top: 200px;
    left: 320px;
    background-color: #00000048;
    border-radius: 20px;
    margin: auto;
}
.text_sobre p{
    font-size: 20px;
    text-align: center;
    margin: 35px 20px;
    color: #fff;
}


/*home*/

.botoes-paginas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 10px;
  }
  
  .botoes-paginas a {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    margin: 11px;
    color: #fff; 
  }
  
  .texto_icones {
    margin-top: 7px;
    margin-bottom: 3px;
    text-align: center;
  }
  
  .icones-paginas {
    width: 50px;
    filter: invert(100%);
  }
  
 
  .container {
    position: fixed; 
    padding: 40px 0px;
    background-color: rgba(75, 69, 95, 0.192);
    backdrop-filter: blur(5px);
    top: 190px; 
    left: 460px;
    border-radius: 15px;
    margin: auto;
  }


/*Botões das Redes sociais*/

.redes{
    position: fixed;
    top: 498px;
    left: 630px;
    margin: auto;
}

.redes-socias{
    width: 20px;
    margin: 10px;
    filter: invert();
}



/* Pagina câmeras*/

.fundo_cameras{
    position: relative;
    width: 100%;
    height: 650px;
    background-color: rgba(238, 238, 238, 0.192);
    backdrop-filter: blur(5px);
    top: 89px;
    align-items: center;
    border-radius: 5px;
}

.pag_cameras{
    position: absolute;
    top: 30px;
    left: 220px;
    width: 1100px;
    text-align:center;
    color: #fff;
}

.texto_servicos{
    margin-bottom: 90px;
}


#camera_bolinha{
    margin-right: 50px;
    width: 190px;
}

#DVR{
    margin-right: 50px;
    width: 280px;
}

#camera{
    width: 200px;
}

/*Pagina Redes*/

.fundo_rede{
    background-color: rgba(99, 221, 252, 0.24);
}


.ilustracoes_rede{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}


.fotos_rede{
    margin-top: 20px;
    max-width: 400px;
}

#cabos-coloridos{
    width: 200px;
    margin-left: 80px;
}

#patch_fibra{
    width: 300px;
        margin-left: 5px;
}

#switch{
   
}

#servidores{
    width: 300px;
}

/* Pagina Helpdesk*/

.fundo_helpdesk{
    background-color: rgba(129, 107, 252, 0.288);
}
.fotos_helpdesk{
    max-width: 350px;
}


/* Pagina Antivirus*/
.fundo_seguranca{
    background-color: rgba(153, 51, 248, 0.281);
}

.fotos_seguranca{
    max-width: 320px;
}
#monitor-virus{
    width: 250px;
    margin-bottom: 120px;
}

#escudo-MR{
    margin-left: 130px;
}

#no-bug{
    width: 250px;
    margin-bottom: 120px;
}

/* Pagina Controle de acesso*/

.fundo_controle-acesso{
    background-color: rgba(151, 221, 118, 0.24);
}

.fotos_controle{
    max-width: 310px;
}

#leitor-dedo{
    margin-left: 30px;
}

#leitor-digital{
    margin-left: 30px;
}

/* Pagina Telefonia*/

.fundo_telefonia{
    background-color: rgba(142, 236, 133, 0.5);
}

.fotos_telefonia{
    max-width: 450px;
}


#Impacta{
    margin-bottom: 35px;
    margin-right: 30px;
    margin-bottom: 59px;
}

#central-voip{
    width: 290px;
    margin-bottom: 120px;
}

#telefone{
    width: 250px;
    margin-left: 50px;
    margin-bottom: -8px;
}

@media screen and (max-width: 1120px) {

.paginas-servicos{
   left: 42px;
}

.text_sobre{
    margin: auto;
    width: auto;
    left: 150px;
    right: 165px;
}
.text_sobre p{
    font-size: 16px;
}
.container{
    left: 280px;
    }
.redes{
    left: 480px;
}

 }

@media screen and (max-width:830px) {
    .text_sobre{
        left: auto;
        right: auto;
        top: 185px;
    }

    .container{
        left: 180px;
        }
    .redes{
        left: 380px;
    }
    
}

@media screen and (max-width: 730px){
    .text_sobre{
        left: auto;
        right: auto;
    }
    .text_sobre p{
        font-family: 16px;
    }
    .container{
        left: 125px;
        }
    .redes{
        left: 310px;
    }
}

@media screen and (max-width:488px) {
    .text_sobre{
        top: 180px;
        left: 0px;
    }
    .text_sobre p{
        font-family: 14px;
    }
    .container{
        left: 0px;
        }
    .redes{
        top: 520px;
        left: 150px;
    }
}

@media screen and (max-width:365px){
    .text_sobre{
        top: 140px;
    }

    .text_sobre p{
        font-family: 10px;
    }
    .redes{
        top: 530px;
        left: 105px;
    }
}