@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');


* , body, ul{
    margin: 0px;
    padding: 0px;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}
body{
    height: 100vh;
    width: 100%;
    
}


#menu a{
    color: black;
    text-decoration: none;
    font-family: sans-serif;
    display: block;
    padding: .5rem;
    font-size: 20px;
    
}
#menu a:hover{
    
    color: rgb(0, 183, 255);
    transition: .3s;
}

#header{
    display: flex;
    align-items: center;
    height: 90px;
    padding: 1rem;
    box-sizing: border-box;
    justify-content: space-between;
    background: #e7e7e7;
    position: relative;
    top: -29px;
}

#menu{
    display: flex;
    list-style: none;
    gap: .5rem;
    position: relative;
    right: 29px;
    top: 17px;
}

#tel{
    margin: 0;
    position: relative;
    left: 275px;
    top: -14px;
    background: black;
    color: white;
    width: 140px;
    height: 25px;
    border-radius: 15px;
    text-align: center;
    
}
#tel a{
    text-decoration: none;
    color: white;
}

#tel:hover{
    background: rgb(0, 183, 255);
    transition: .3s;
}

#divtel{
    background-color: black;
    height: 30px;
    width: 100%;
    position: relative;
    visibility: hidden;
}
#divtel a{
    text-decoration: none;
    color: white;
}
#divtel h4{
    margin: 0;
    
}

#btn-mobile{
    display: none;
}



@media (max-width: 968px){

    

    #divtel{
        visibility: visible;
        text-align: center;
        color: white;
        display: flex;
        justify-content: center;
    }

    #divtel a{
        margin-left: 30px;
    }
    

    #divtel h4{
        position: relative;
        top: 3px;
        
    }
    

    #tel{
        display: none;
    }
   
    #header{
        position: relative;
        top: 1px;
    }

    #menu{
        display:block;
        position: absolute;
        width: 100%;
        top: 70px;
        right: 0px;
        background: #e7e7e7;
        height: 0px;
        transition: .6s;
        z-index: 1000;
        visibility: hidden;
        overflow-y: hidden;
    }
    #nav.active #menu{
        
        height: calc(100vh - 70px);
        visibility: visible;
        overflow-y: auto;
    }

    #menu a{
        padding: 1rem 0;
        margin:  0 1rem;
        border-bottom: 2px solid rgba(0,0,0, .05);
    }

    #btn-mobile{
        display:flex;
        padding: .5rem 1rem;
        font-size: 1rem;
        border: none;
        background: none;
        cursor: pointer;
        gap: .5rem;
        
    }

    #hamburguer{
        border-top: 2px solid black;
        width: 20px;
    }

    #hamburguer::after , #hamburguer::before{
        content:'';
        display: block;
        width: 20px;
        height: 2px;
        background: currentColor;
        margin-top: 5px;
        transition: .3s;
        position: relative;
    }

    #nav.active #hamburguer{
        border-top-color: transparent;
    }
    #nav.active #hamburguer::before{
        transform: rotate(135deg);
    }
    #nav.active #hamburguer::after{
        transform: rotate(-135deg);
        top: -7px;
    }


    #logo img{
        width: 100%;

    }
}





/*slide*/

.slider{
    margin-top: -29px;
    border-top: 2px solid rgb(177, 177, 177);
}
.slider img{
    width: 100%;
    height: 430px;
}
button.slick-prev{
    font-size: 0px;
    
    border: none;
    height: 51px;
    width: 51px;
    background: transparent;
    background-image: url("../img/arrowleft.png");
    background-repeat: no-repeat;
    z-index: 9;
    position:absolute;
    top: 35%;
    left: 10%;
}

button.slick-next{
    font-size: 0px;
    
    border: none;
    height: 51px;
    width: 37px;
    background: transparent;
    background-image: url("../img/arrowright.png");
    background-repeat: no-repeat;
    z-index: 9;
    position:absolute;
    top: 35%;
    left: 90%;
}

ul.slick-dots button {
    font-size: 0px;
    border: 3px solid rgb(0, 0, 0);
    border-radius: 70%;
    width: 15px;
    height: 15px;
    font-size: 0px;
    background: transparent;
    
}

ul.slick-dots li{
    display: inline-block;
    margin-right: 10px;
    
}
.slick-dots{
    margin: 0 auto;
    width: 30%;
    left: 35%;
    text-align: center;
    position: absolute;
    top: 90%;
}

ul.slick-dots li.slick-active {
    background-color: rgb(255, 255, 255);
    font-size: 0px;
    border-radius: 50%;
}

@media screen and (max-width:970px){
    .slider{
        margin-top: 2px;
    }
}
@media screen and(max-width:420px){
    .slider{
        height: 10px;
    }
}
    



/*end slide*/













/*footer start*/








.rodape{
    background-color: rgb(241, 240, 240);
    margin-top: 50px;
    position: absolute;
    width: 100%;
    height: 500px;
}

.sub-footer{
    border-bottom: 1px solid black;
    height: 100%;
    margin: 0;
}

.ft{
    margin: 0;
    height: 100%;
}

.lista-mapa{
    list-style: none;
}



.lista-servicos{
    list-style: none;
}


.lista-atendimento{
    list-style: none;
}
.lista-atendimento li{
    padding-top: 10px;

}

.mapa-footer{
    width: 130px;
    position: absolute;
    left: 150px;
    top: 50px;
    font-family: "Poppins", sans-serif;
}
.mapa-footer h3{
    margin:0px;
}
.mapa-footer a{
    text-decoration: none;
    color: black;

}
.mapa-footer a:hover{
    color: rgb(23, 152, 238);
    padding-left: 10px;
    transition: .3s;
}
.mapa-footer h3{
    position: relative;
    top: -18px;
}

.servicos-footer{
    width: 270px;
    position:absolute;
    left: 450px;
    top: 51px;
    font-family: "Poppins", sans-serif;
    
}

.servicos-footer h3{
    position: relative;
    top: -18px;
    margin: 0px;;
}
.servicos-footer a{
    text-decoration: none;
    color: black;
}
.servicos-footer a:hover{
    color:rgb(23, 152, 238);
    padding-left: 10px;
    transition: .3s;
}

.atendimento-footer{
    width: 30%;
    position:absolute;
    left: 850px;
    margin: 0 ;
    top: 33px;
    
}
.atendimento-footer h3{
    margin: 0px;
}



#telefone a{
    text-decoration: none;
    color: black;
}
#telefone-ar a{
    text-decoration: none;
    color: black;
}


#telefone {
    background-position-y: 9px;
    background-image: url("../img/telefonepreto.png");
    background-repeat: no-repeat;
    text-align: right;
    width: 235px;
    height: 40px;
}
#telefone-ar{
    background-position-y: 9px;
    background-image: url("../img/telefonepreto.png");
    background-repeat: no-repeat;
    text-align: right;
    width: 210px;
    height: 40px;
}
#whats{
    background-image: url("../img/whatsapp.png");
    background-position-y: 9px;
    background-repeat: no-repeat;
    text-align: right;
    width: 140px;
    height: 40px;
    position: relative;
    
}
#email{
    background-image: url("../img/email.png");
    background-position-y: 10px;
    background-repeat: no-repeat;
    text-align: right;
    width: 215px;
    height: 40px;
    position: relative;
}
#email a{
    text-decoration: none;
    color: black;
}
#endereco-sp{
    background-image: url("../img/pin.png");
    background-position-y: 10px;
    background-repeat: no-repeat;
    text-indent: 30px;
    width: 330px;
    height: 75px;
    
}

#endereco-sp a{
    text-decoration: none;
    color: black;

}
#endereco-sp a:hover{
    padding-left: 10px;
    color: rgb(23, 152, 238); 
    transition: .3s;
}
#endereco-ar{
    background-image: url("../img/pin.png");
    background-position-y: 10px;
    background-repeat: no-repeat;
    text-indent: 30px;
    width: 340px;
    height: 75px;
    
    
}

#endereco-ar a{
    text-decoration: none;
    color: black;
}

#endereco-ar a:hover{
    padding-left: 10px;
    color: rgb(23, 152, 238); 
    transition: .3s;
}

#pro{
    padding-top: 10px;
}
#baixas{
    padding-top: 10px;
}
#plan{
    padding-top: 10px;
}

#l-empresa{
    padding-top: 10px;
}
#l-servicos{
    padding-top: 10px;
}
#l-blog{
    padding-top: 10px;
}

.midias-sociais a{
    display: inline-flex;
    align-items: center;
    justify-content:center;
    height:40px;
    width: 40px;
    margin: 0 10px 10px 0;
    text-decoration: none;
    border-radius: 50%;
    color: black;
    border: 1px solid rgb(0, 0, 0);
    transition: all 0.5s ease ;
    position: relative;
    left: 620px;
    top: 5px;
    
  }
  .midias-sociais{
    padding-top: 10px;
    background-color: rgb(241, 240, 240);
  }
  .midias-sociais a i{
    font-size: 20px;
  }
  .midias-sociais a:hover{
    color: white ;
    background-color: rgb(23, 152, 238);
    border-color: white;
  }


  @media (max-width:412px){
    .mapa-footer{
        left: 30px;
    }
    .servicos-footer{
        left: 200px;
        width: 150px;
    }
    .sub-footer{
        height: 740px;
    }
    .ft{
        height: 600px;
    }
    .rodape{
        height: 780px;
    }
    .atendimento-footer{
        left: 10px;
        top: 350px;
    }
    .midias-sociais a{
        left: 150px;
    }
    

  }

  @media (min-width:412px) and (max-width:810px){

    .mapa-footer{
        left: 30px;
    }
    .servicos-footer{
        left: 225px;
        width: 150px;
    }
    .sub-footer{
        height: 730px;
    }
    .ft{
        height: 600px;
    }
    .rodape{
        height: 790px;
    }
    .atendimento-footer{
        left: 30px;
        top: 350px;
    }
    .midias-sociais a{
        left: 150px;
    }
  }

  @media (min-width:810px) and (max-width:1024px){
    .mapa-footer{
        left: 30px;
    }
    .servicos-footer{
        left: 230px;
        width: 160px;
    }
    .atendimento-footer{
        left: 470px;
        top: 35px;
    }
    .midias-sociais a{
        left: 350px;
    }
  }

  /*footer*/





  /* cards*/

.texto-nosso{
    text-align: center;
    width: 290px;
    position: relative;
    left: 39%;
    margin-top: 30px;
    border-bottom: 3px solid rgb(218, 217, 217);
    padding-bottom: 20px ;
}
.texto-nosso h2{
    text-align: center;
}


  main.cards{
    display: flex;
    padding: 32px;
    justify-content: center;
    
  }

  main.cards section.card{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    max-height: 256px;
    margin-left:32px ;
  }
  main.cards section.card:first-child{
    margin-left:0 ;
  }

  main.cards section.card img{
    width: 100%;
  }
  main.cards section.card .icon{
    width: 64%;
    height: 64%;
  }

  main.cards section.card .icon img{
    width: 60px;
    height: 75px;
    padding-top: 20px;
  }

  

main.cards section.card button{
    padding: 0.5rem 1rem;
    text-transform: uppercase;
    border-radius: 32px;
    border: 0;
    cursor: pointer;
    font-size: 80%;
    font-weight: 500%;
    width: 110px;
}

main.cards section.card h4{
    margin: 16px 0px;
    padding-top: 10px;
}



main.cards section.card.adm{
    box-shadow: 5px 5px 10px  rgb(160, 163, 165);
    background: linear-gradient(to right, rgb(93, 135, 197), rgb(71, 161, 218) );
    color: white;
    width: 200px;
}
main.cards section.card.adm button a{
    text-decoration: none;
    color: rgb(0, 153, 255);
}
main.cards section.card.pro{
    box-shadow: 5px 5px 10px  rgb(160, 163, 165);
    background: linear-gradient(to right, rgb(93, 135, 197), rgb(71, 161, 218) );
    color: white;
    width: 200px;
}
main.cards section.card.pro button a{
    text-decoration: none;
    color: rgb(0, 153, 255);
}
main.cards section.card.baixa{
    box-shadow: 5px 5px 10px  rgb(160, 163, 165);
    background: linear-gradient(to right, rgb(93, 135, 197), rgb(71, 161, 218) );
    color: white;
    width: 200px;
}
main.cards section.card.baixa button a{
    text-decoration: none;
    color: rgb(0, 153, 255);
}
main.cards section.card.plan{
    box-shadow: 5px 5px 10px  rgb(160, 163, 165);
    background: linear-gradient(to right, rgb(93, 135, 197), rgb(71, 161, 218) );
    color: white;
    width: 200px;
}
main.cards section.card.plan button a{
    text-decoration: none;
    color: rgb(0, 153, 255);
}
main.cards section.card.plan button {
    margin-top: -10px;
}

@media screen and (max-width:780px){
    main.cards{
        display: block;
        margin-left: 15%;
    }
    main.cards section.card{
        margin-left: 0;
        margin-bottom: 32px;
    }
    main.cards section.card:last-child{
        margin-bottom: 0;
    }
    main.cards section.card .icon img{
        width: 50px;
        height: 70px;
        padding-top: 20px;
      }
}
@media screen and (max-width: 766px){
    .texto-nosso{
        left:15%
    }
}


/*quem somos*/

.quem-somos{
    background-color: rgb(241, 240, 240);
    
}
.setting-quemsomos{
    margin-left: 90px;
    margin-right: 90px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.setting-quemsomos p{
    font-family: 'Poppins', sans-serif;
    height: 10%;
}
#img-quemsomos img{
    width: 300px;
    padding: 20px 20px;
}
#img-quemsomos{
    width: 30%;
}

.texto-quemsomos p {
    
    width: 500px;
    
}
.texto-quemsomos  {
    width: 500px;
    
}
#titulo-quemsomos{
    font-family: "Poppins", sans-serif;
    
}


#pessoa-feliz img{
    width: 30vw;
    
    border-radius: 20px;
}
#pessoa-feliz{
    width: 40%;
    position: absolute;
    left: 60%;
    
    
}
#saiba-quemsomos{
    background-color: rgb(109, 109, 109);
    height: 30px;
    width: 140px;
    border-radius: 20px;
    font-size: 15px;

}
#saiba-quemsomos a{
    text-decoration: none;
    color: rgb(255, 255, 255);
}

.setting-quemsomos button{
    margin-top: 20px;
    border: none;
    
}
#saiba-quemsomos:hover{
    
    background-color: rgb(23, 152, 238);
    transition: .3s;
}
#saiba-quemsomos h3 a{
    font-family: "Heebo" , sans-serif;
    font-size: 18px;
    text-decoration: none;
    color: white;
    position: relative;
    left: 21px;
    top: 2px;
}

@media screen and (max-width:1000px){
    .texto-quemsomos p {
        font-size: clamp(1em, 0.5em + 1vw, 1em);
        width: 70%;
    }
    .setting-quemsomos{
        margin-left: 15px;
    }
}
@media screen and (max-width: 810px){
    #pessoa-feliz{
        display: none;
    }
    .texto-quemsomos{
        width: 340px;
        
    }
    .texto-quemsomos p{
        width: 325px;
        
    }
    
    .setting-quemsomos{
        margin-left: 15px;
       
    }
    
}


/* sobre nós  e serviços*/

.about-image{
    background-image: url("../img/mesaescritorio.jpg");
    background-repeat: no-repeat;
    height: 150px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -25px;
    filter: blur(3px);
    -webkit-filter: blur(1px);
}
.about-title{
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0, 0.4); 
    color: white;
    font-weight: bold;
    border: 3px solid #f1f1f1;
    position: absolute;
    top: 27%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 80%;
    padding: 20px;
    text-align: center;
}

.about-office img{
    width: 70%;
    
    margin-top: 40px;
    position: relative;
    left: 14%;
    border-radius: 15px;
}
.about-text p{
    color: rgb(49, 49, 49);
    width: 68%;
    position: relative;
    left: 15%;
    margin-top: 20px;
    
}


@media  screen and (max-width: 1000px) {
    .about-image {
        margin-top: 5px;
    }
    .about-title{
        top: 30%;
    }
}

.planning-text ul li{
    color: rgb(49, 49, 49);
    width: 68%;
    position: relative;
    left: 15%;
    margin-top: 20px;
    font-weight: 100;
}

.planning-text h2{
    color: rgb(49, 49, 49);
    width: 68%;
    position: relative;
    left: 15%;
    margin-top: 20px;
}
.planning-text h4{
    color: rgb(49, 49, 49);
    width: 68%;
    position: relative;
    left: 15%;
    margin-top: 20px;
    font-weight: 200;
}



/* sobre nós  e serviços fim*/



/*blog*/

.posts{
    margin-top: 40px;
    margin-left: 4%;
    display: flex;
}
.news1{
    margin-bottom: 50px;
    padding: 20px 20px 20px 20px;
    border-radius: 10px;
    width: 45%;
    min-width: 330px;
    
}

.news1 img{
    width: 100%;
}
.news1 h4{
    padding-top: 20px;
    padding-bottom: 10px;
    
    
}
.news1 h4 a{
    text-decoration: none;
    color: black;
}
.news1 h4 a:hover{
    text-decoration: none;
    color: rgb(1, 150, 209);
    transition: .3s;
}
.news1 img{
    border-radius: 10px;
    
}
.news1 button{
    margin-top: 40px;
    position: relative;
    left:15vw;
    cursor: pointer;
    padding: 10px 10px 10px 10px;
    border-radius: 20px;
    border: 0;
}
.news1 button a{
    text-decoration: none;
    color: black;
    font-size: 1rem;
    font-weight: 100;
}
.news1 button a:hover{
    color: white;
}
.news1 button:hover{
    background-color: rgb(1, 150, 209);
    transition: .2s;
}


.news2{
    margin-bottom: 50px;
    padding: 20px 20px 20px 20px;
    border-radius: 10px;
    width: 45%;
    min-width: 330px;
    
}
.news2 img{
    width: 100%;
}
.news2 h4{
    padding-top: 20px;
    padding-bottom: 10px;
    
    
}
.news2 h4 a{
    text-decoration: none;
    color: black;
}
.news2 h4 a:hover{
    text-decoration: none;
    color: rgb(1, 150, 209);
    transition: .3s;
}
.news2 img{
    border-radius: 10px;
    
}
.news2 button{
    margin-top: 40px;
    position: relative;
    left:15vw;
    cursor: pointer;
    padding: 10px 10px 10px 10px;
    border-radius: 20px;
    border: 0;
}
.news2 button a{
    text-decoration: none;
    color: black;
    font-size: 1rem;
    font-weight: 100;
}
.news2 button a:hover{
    color: white;
}
.news2 button:hover{
    background-color: rgb(1, 150, 209);
    transition: .2s;
}

@media (max-width:688px) {
    .posts{
        display: block;
    }
    
}

.news{
    color: rgb(49, 49, 49);
    width: 68%;
    position: relative;
    left: 15%;
    margin-top: 20px;
}
.news h4{
    margin-bottom: 5x;
    margin-top: 30px;
}

.news h5{
    margin-bottom: 20px;
    margin-top: 5px;
}
.news h2{
    margin-top: 40px
}
.news ol li{
    margin-top: 10px;
}
.news img{
    width: 70%;
    margin-top: 10px;
    margin-bottom: 40px;
    border-radius: 20px;
}

/*end blog*/


.index-blog-title h2{
    text-align: center;
    
    
    margin-top: 30px;
    
    padding-bottom: 20px ;
}

@media screen and (max-width:768px){
    .desktop-whatsapp{
        display:none;
    }
}