*{margin: 0px; padding:0px;}

body{
    
    height: auto;
    font-family: 'Times New Roman', Times, serif;    
    border: 2px solid #265180;
    
}
.container-logo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
.container-logo img{
    width: clamp(50px,25vw,250px);
    filter: contrast(3.9);
}

#container-index1{   
    background-image:url(../img/ninguem-na-estacao-de-trabalho-call-center-vazio-com-computadores-e-instrumentos-de-audio-nao-ha-pessoas-nos-balcoes-de-atendimento-ao-cliente-com-tecnologia-de-telecomunicacoes-oferecendo-assistencia-de-linha-de-a.jpg);
    background-repeat: no-repeat;
    background-size: 100vw;
    min-height: 100vh;       
}
#container-index2{
    background-image: url(../img/trabalhoTi.jpg);
    background-repeat: no-repeat;
    background-size: 100vw;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
        
}
.container-h1{
    /* width: 1000px; */
    font-size: clamp(15px,3vw,32px);
    color: #265180;
    display: flex;
    align-items: center;    
    justify-content: center;    
    flex-direction: column;
    min-height: 100vh;
    text-align: center;
    font-family: 'Times New Roman', Times, serif;

}
.container-anuncio{
    font-size: clamp(23px,5vw,70px);
    width: 100%;
    text-align: center;
    height: 150px;
    /* background-color: #00000085; */
    border-radius: 10px;
    display: flex;
    justify-content: center;
}
.container-anuncio span{
    color:#265180;
    font-weight:bolder;
    -webkit-text-stroke: #fff 0.1px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-transform: bold;
    letter-spacing: 0px;
}
.container-p{
    font-size: clamp(15px,4vw,24px);
    color: #265180;
    /* width: 1000px;    */
    text-align: center;   
    /* gap:50px; */
    height: 100px;
    display: block;
    width: 100%;
    line-height: 30px;
    }
#container-index3{
    background-image: url(../img/making-deal-young-people-working-call-center-new-deals-is-coming.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100vw;
    min-height: 100vh;
   
}

.container-index3b{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
   
}
.container-h2 {
    display: flex;    
    justify-content: center;
    align-items: center;    
    color: #265180;
    font-size: clamp(15px,3vw,32px);
    text-align: center;
    max-width: 1000px;
    width: 100%;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.container-h2 h1{
   -webkit-text-stroke: #fff 0.9px;
    flex-wrap: nowrap;
}
.container-p2{
    font-size: clamp(13px,5vw,18px);
    color: #265180;
    max-width: 1000px;
    width: 100%;   
    text-align: center;   
    gap:50px;
    
    }
    #container-index4{
    width: 100%;
    min-height: 100vh;    
}
nav{
    display: none;
}
.container-index4b{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    
    
}
.container-h3{
    max-width: 1000px;
    width: 100%;
    font-size: clamp(13px,3vw,32px);
    color: #265180;
    height: 150px;
    /* text-align: center; */
    font-family: 'Times New Roman', Times, serif;
    display: flex;
    justify-content: center;
    text-align: center;
}
.container-p3{
    font-size: clamp(12px,4vw,18px);
    color: #265180;
    max-width: 1000px;
    width: 100%;
    line-height: 25px;
    
    }
    .container-server{
        display: flex;
        justify-content: center;
    }
    #container-servico{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    #container-servico div{
    width: clamp(75px, 25vw, 290px);
    height:clamp(108px, 25vw, 260px);
    border: 1px solid #265180;
    display: inline-block;
    /* flex-wrap: wrap; */
    /* outline: 1px solid #898989;
    outline-offset: 4px; */
}
#container-servico img{
    /* max-width: 150px; */
    width: clamp(75px, 25vw, 290px);
    height:clamp(108px, 25vw, 260px);
}
.container-img{
    width: 925px;
    position:absolute;
    top: 20px;
    border-radius: 0px 13px 13px 0px;
    right: 20px;
    position: absolute;
    z-index: 1;
}
.container-texto{
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    height: 80px;
}
.container-index5{
    width: 100;
    min-height: auto;
    display: flex;
    justify-content: center;
}
.container-alinhar{
    display: flex;    
    align-items: center;
    min-height: 55vh; 
    justify-content: center;
   
   } 
   .container-texto h2{
    font-size: clamp(20px,5vw,40px);
    font-family: 'Times New Roman', Times, serif;
    color:#265180;
    -webkit-text-stroke: #898989 1px;
   }
   .container-form{
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
   }
   form input, textarea{
    width: clamp(353px, 50vw, 700px);
    height: 20px;
    margin: 8px 5px 5px 15px;
    padding: 5px;
    text-transform: capitalize;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /* height: 0px; */
   }
   textarea{
    width: clamp(353px, 50vw, 700px);
    padding: 6px;
    height: 100px;
    font-size: clamp(15px,5vw,18px);
    font-family:Arial, Helvetica, sans-serif;
    margin: 10px 5px 5px 15px;
   }
   form input{
    font-size: clamp(15px,5vw,18px);
   }
   
    .btn-submit{
    border: 1px solid #696565; 
    margin-top: 10px;
    width: clamp(370px, 50vw,713px);
    background-color: #265180;
    cursor: pointer;
    font-size: clamp(15px, 5vw, 20px);
    display: flex;
    align-items: center;
    height: 50px;
    font-family:'Times New Roman', Times, serif;
    text-transform: uppercase;
    font-weight: 700;
    color: #FFf;
}
footer{
    width: auto;
    height: 150px;
    background-color: #265180;
    border: 1px solid#0f04fc;
    padding: 40px;
}

footer p{
    text-transform:none;
    text-align: center;
    text-overflow: clip;
    font-size: 15px;
    font-family: 'poly';
    font-style: normal;
    color: #F6F6F6;
}
.container-caixa2{
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   height: 150px; 
   gap: 200px;
}
.container-social {    
    display: flex;
    flex-direction: row;
    gap: 5px;
    cursor: pointer;
}
.container-social div{
     width: 30px;
    height: 30px;
    display: flex;
    flex-direction: row;
}
.container-social img{
     width: 30px;
    height: 30px;
    display: flex;
    flex-direction: row;
}

 .container-contato{
    display: flex;
    flex-direction: column;
    cursor: pointer;
 }
 .container-contato div{
    display: flex;
    justify-content: center;

}
.container-contato img{
    width: 30px;
    height: 30px;
    display: flex;
    flex-direction: column;
    margin-top: -5px;
    
}
.contaner-contato span{
    display: flex;
    align-items: center;
    
}
.container-endereco{
    display: flex;
    flex-direction: column;
    width: clamp(250px);
    justify-content: center;
    flex-wrap: wrap;
    /* border: 1px solid #fff; */
    cursor: pointer;
    
}
.container-endereco div{
    display: flex;
    justify-content: center;
    
}
.container-endereco img{
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: row;
    margin-right: 78px;
    margin-top: -15px;
    
}
.container-endereco span{
    display: flex;
    flex-direction: row;
    align-items: center;
     
}
.container-endereco a{
    color: #F6F6F6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0px;
    flex-direction: row;
    text-decoration: none;
    margin-left: 70px;
}
/* .container-endereco div{
    margin: ;
} */

iframe{
    width: 150px;
    height: 100px;
    border: none;
    border-radius: 3px;
    margin-left: 20px;
}

/*Efeito com javascript, opacity:0 some as paginas e opacity:1 aparecem */

.hidden{
    opacity: 0;
    filter: blur(15px);
    transition: all 1s;
    transform: translateX(-100%);
 }
 .show{
    opacity:1;
    filter: blur(0px);
    transition: all 2s;
    transform: translateX(0);
 }

.container-servico :nth-child(2){
    transition-delay: 300ms;
}
.container-servico :nth-child(3){
    transition-delay: 700ms;
}
.container-servico :nth-child(4){
    transition-delay: 1000ms;
}
.container-servico :nth-child(5){
    transition-delay: 1300ms;
}
.container-servico :nth-child(1){
    transition-delay: 1600ms;
}
  

/* -----------------------------Inciando definiçao responsiva--------------------------- */

@media screen and (max-width: 768px)   {
    
    
    #container-index1{
        background-image: url(../img/escritorio-moderno-com-ninguem-presente.jpg);   
        background-repeat: no-repeat;
        background-size: cover;
    }
    #logo-anuncio{
        display: flex;
        flex-direction: column;        
        justify-content: center;
        height: 400px;
    }
    #container-index{
        width: 50%;
    }
    .container-anuncio{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 108px;
    }
    #container-index2{
        background-image: url(../img/img-movel.jpg);
        background-repeat: no-repeat;          
        background-size: cover;
        width: 100%;
        min-height: 100vh;
           }
    #container-index3{
        background-image: url(../img/profissional-de-ti-que-trabalha-para-garantir-o-funcionamento-eficiente-equipamento-centro-de-dados\ \(1\).jpg);
        background-repeat: no-repeat;          
        background-size: cover;
        min-height: 100vh;
    }       
    .container-h1{
        position: relative;
        bottom: 70px;
    }
    .container-p3{
    position: relative;
    bottom: 20px;
    text-align: center;
    }
    #container-servico{
     position: relative;
    top: 20px;   
    }

    
   /* menu hamburguer------------------ */

.container-nav{
    width: auto;
    height: 60px;
    background-color: #265180;
    /* display: none; */
}

.container-navbar{
   display: flex;
   align-items: center;
   justify-content: center;
   height: 50px;
   width: 60px;   

}
.container-hamburguer div{
    width:40px;
    height:5px;
    background-color:#fff;
    margin-top:7px;
    
   
}
  #menu {
        display: none;
        flex-direction: column;
    }
    
    #menu.active {
        display: flex;
    }

    .container-hamburguer {
        display: block;
    } 
   nav{
    display: block;
    
    }
  nav ul{
    list-style: block;
    margin-top: 10px;
}

nav ul li{
    display:block;
    
} 
nav ul li a{
    padding: 0px 0px;
    text-decoration: none;
    font-size: 125x;
    color:red;
    text-transform: uppercase;
    font-weight:bold;
    position: relative;
    left: 10px;
    /* margin: 0px 20px 0px 0px; */
    
}
nav ul li a:hover{
background-color: red;
border-radius: 25px;
color: #F6F6F6;
opacity: 0.5

} 

.container-caixa2{
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 10px;
   align-items:safe;

}
.container-social {    
    display: flex;
    flex-direction: row;
    gap: 15px;
    cursor: pointer;
}
.container-social div{
     width: 30px;
    height: 30px;
    display: flex;
    flex-direction: row;
    
}
.container-social img{
     width: 30px;
    height: 30px;
    display: flex;
    flex-direction: row;
    margin:5px 5px 5px 5px;
}

.container-endereco a{
    
    margin-left: 25gi0px;
}
   
}