/*ESTILOS PADRÕES*/
*{ /*define configurações para todos os elementos da página*/
    margin: 0;
    padding: 0;
    box-sizing: border-box; /*o tamanho dos elementos inclui margin e padding*/
    text-decoration: none; /*remove underline de links*/
    outline: none; /*retira a borda padrão de todos elementos*/
    font-family: "Fauna One";
}

html{ /*define padrão para todo o documento html*/
    font-size: 62.5%; /*macete para que 1rem=10px*/
}
/*FIM ESTILOS PADRÕES*/

/*PÁGINA INICIAL*/
.homepage{
    width: 100%;
    height: 100%;
    background-color: white;
    overflow: hidden; /*some com a scroll bar horizontal*/
}

/*BARRA DE NAVEGAÇÃO*/
.barra-nav{
    width: 100%;
    position: fixed; /*fixa a barra de navegação no topo da página*/
    top: 0;
    left: 0;
    height: 7rem;
    padding: 1rem 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
    background-color: #1D3B38;
}

/*Logo*/
.logo{
    display: flex;
    flex-direction: column;
    position: relative;
}

.logo span{
    text-align: center;
    color: white;
    transform: translate(7rem, -2.2rem);
}

.logo span:nth-child(2){ /*Anna Gasco*/
    font-size: 2.6rem;
    text-transform: uppercase;
}

.logo span:nth-child(3){ /*Arquitetura e Urbanismo*/
    font-size: 1.2rem;
    font-family: "Cinzel";
}

.logo img{ /*ícone logo*/
    width: 6rem;
    transform: translate(0rem, 2.5rem);
}
/*Fim Logo*/

/*Itens Seções*/
.itens-sec{
    width: 50%;
    display: flex;
    justify-content: space-evenly;
    padding: 0 7rem;
    align-items: center;
    transform: translateX(3rem);
}

.item-sec{
    list-style: none;
    position: relative;
}

.item-link{
    list-style: none;
    color: white;
    font-family: "Cinzel";
    font-size: 2rem;
    letter-spacing: 0.1rem;
}

.item-link:hover{ /*Traça uma linha abaixo dos itens de menu ao passar o mouse por cima*/
    border-bottom: 0.2rem solid #75ff69;
}
/*Fim Itens Seções*/

/*Ícones Redes Sociais*/
.icones-sociais{
    width: 20%;
    display: flex;
    justify-content: space-evenly;
    list-style: none;
    font-size: 2.3rem;
}

.sociais-link{
    font-size: 2.3rem;
    color: white;
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    transition: color 0.5s;
}

.sociais-link:hover{ /*muda o ícone de cor quando o mouse passa por cima*/
    color: #75ff69;
}
/*Fim Ícones Redes Sociais*/
/*Botão*/
.barra-nav button{
    width: 20rem;
    height: 3rem;
    background-color: #75ff69;
    border: none;
    border-radius: 3rem;
    font-size: 1.2rem;
    font-weight: bolder;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    color: #1D3B38;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s; /*diminui a transição do efeito hover*/
}

.barra-nav button:hover{ /*animação botão*/
    transform: translateY(-0.2rem);
}
/*Fim Botão*/
/*FIM BARRA DE NAVEGAÇÃO*/

/*CABEÇALHO*/
.cabecalho{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: wrap;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
}

/*Imagem de Fundo*/
.img-fundo{
    width: 100vw;
    height: 100vh;
    position: absolute;
}

.cabecalho img{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/*Fim Imagem de Fundo*/

/*Slogan*/
.slogan{
    z-index: 1; /*traz o texto para a frente da imagem de fundo*/
    text-align: right;
    position: absolute;
    top: 20%;
    left: 0;
    color: white;
    letter-spacing: 0.1rem;
    /*tarja de fundo*/
    width: 70rem;
    padding: 2rem;
    background-color: rgba(29, 59, 56, 0.75);
    border-radius: 0 1rem 1rem 0;
}

.slogan h1{ /*Arquitetura Consciente*/
    font-size: 4rem;
    font-family: "Cinzel";
    text-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
}

.slogan h2{ /*Integrando Tecnologia à Natureza*/
    font-size: 2.5rem;
    font-weight: lighter;
    text-transform: lowercase;
    text-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
}

.slogan button{
    width: 20rem;
    height: 3rem;
    background-color: #75ff69;
    border: none;
    border-radius: 3rem;
    font-size: 1.2rem;
    font-weight: bolder;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    color: #1D3B38;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
    margin-top: 2rem;
    cursor: pointer;
    transition: transform 0.3s; /*diminui a transição do efeito hover*/
}

.slogan button:hover{ /*animação botão*/
    transform: translateY(-0.2rem);
}
/*Fim Slogan*/
/*FIM CABEÇALHO*/

/*SEÇÃO SOBRE*/
.sec-sobre{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: wrap;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
    background: linear-gradient(to bottom, #1D3B38, #4A6260, #75ff69);
}

/*Bibliografia*/
.bibliografia{ /*posiciona o texto e título*/
    width: 60%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 15rem 10rem 0 10rem;
}

.bibliografia h1{ /*Sobre*/
    font-size: 7rem;
    letter-spacing: 0.5rem;
    margin-bottom: 2rem;
    font-family: "Cinzel";
    color: white;
    text-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3);
}

.bibliografia p{
    width: 60rem;
    font-size: 1.6rem;
    font-weight: 300;
    letter-spacing: 0.1rem;
    color: #e2e2e2;
    text-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.1);
    margin-bottom: 3rem;
}

.bibliografia button{ /*Fale Comigo*/
    width: 20rem;
    height: 4rem;
    border: none;
    border-radius: 1rem;
    background-color: #1D3B38;
    cursor: pointer;
    text-transform: uppercase;
    color: white;
    font-size: 1.6rem;
    letter-spacing: 0.1rem;
    margin-top: 1.5rem;
    transition: all 0.3s;
}

.bibliografia button:hover{ /*aumenta o tamanho do botão*/
    transform: scale(1.1);
}
/*Fim Bibliografia*/

/*Foto Anna Gasco*/
.foto{
    width: 40%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
}

.foto img{
    position: absolute;
    width: 35rem;
    top: 20%;
    border-radius: 1rem;
    box-shadow: 0 2rem 7rem rgba(0, 0, 0, 0.4);
}
/*Fim Foto Anna Gasco*/
/*FIM SEÇÃO SOBRE*/

/*SEÇÃO SERVIÇOS*/
.sec-servicos{
    width: 100%;
    height: 140vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to top, #1D3B38, #4A6260, #75ff69);
}

/*Cabeçalho Serviços*/
.cabecalho-serv{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: 10%;
    z-index: 2;
}

.cabecalho-serv h1{ /*Serviços*/
    font-size: 7rem;
    font-family: "Cinzel";
    letter-spacing: 0.5rem;
    color: rgb(255, 255, 255);
    text-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3);
}

.cabecalho-serv span{ /*Conheça mais sobre os serviços disponibilizados*/
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: 0.1rem;
    color: #e2e2e2;
    text-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.1);
}
/*Fim Cabeçalho Serviços*/

/*Quadros Serviços*/
.servicos{
    width: 70%;
    height: 45rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 1rem;
}

.servico{
    width: 30rem;
    height: 25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    text-align: center;
    border-radius: 1rem;
    box-shadow: 0 2rem 7rem rgba(0, 0, 0, 0.4);
    color: #1D3B38;
    background-color: rgb(203, 203, 203);
    margin: 2rem;
}

.servico i{
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #1D3B38;
}

.servico span{
    font-size: 2.3rem;
    margin-bottom: 1rem;
    font-family: "Cinzel";
    letter-spacing: 0.1rem;
    font-weight: bold;
}

.servico p{
    font-size: 1.2rem;
    justify-content: justify;
}
/*Fim Quadros Serviços*/

/*Botão*/
.sec-servicos button{
    width: 30rem;
    height: 4rem;
    background-color: #75ff69;
    border: none;
    border-radius: 1rem;
    font-size: 1.3rem;
    font-weight: bolder;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    color: #1D3B38;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s; /*diminui a transição do efeito hover*/
    margin-bottom: 4rem;
}

.sec-servicos button:hover{ /*animação botão*/
    transform: translateY(-0.2rem);
}
/*Fim Botão*/
/*FIM SEÇÃO SERVIÇOS*/

/*SEÇÃO CONTATO*/
.sec-contato{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: wrap;
    justify-content: space-evenly;
    align-items: center;
    background-image: url(../imagens/contato_fundo.jpg);
    background-size: contain; 
}

/*Formulário*/
.contato-formulario{
    width: 35%;
    height: 35rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    font-size: 1.5rem;
    color: #1D3B38;
    font-weight: bold;
}

.contato-formulario h1{ /*Contato*/
    font-family: "Cinzel";
    font-size: 7rem;
    letter-spacing: 0.5rem;
    color: #1D3B38;
    text-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3);
    margin-bottom: 2rem;
}

.formulario{
    display: flex;
    flex-direction: column;
}

.formulario input, .formulario textarea{
    width: 100%;
    background-color: #f2f2f2;
    margin-top: 0.3rem;
    border: 1px solid #4A6260;
    border-radius: 0.5rem;
    padding: 0.5rem;
    font-size: 1.3rem;
    color: #444;
}

.formulario input::placeholder, .formulario textarea::placeholder{
    font-size: 1.3rem;
    color: #888;
}

.formulario input{
    margin-bottom: 1rem;
    height: 3rem;
}

.formulario textarea{
    height: 10rem;
}

/*Botão Enviar*/
.contato-formulario button{
    width: 100%;
    border: none;
    background-color: #1D3B38;
    cursor: pointer;
    text-transform: uppercase;
    color: white;
    font-size: 1.4rem;
    padding: 1rem;
    letter-spacing: 0.1rem;
    margin-top: 2.5rem;
    transition: color 0.3s;
}

.contato-formulario button:hover{
    background-color: #4A6260;
}
/*Fim Botão*/
/*Fim Formulário*/

/*Mapa*/
.contato-mapa{
    transform: translateY(5rem);
    filter: grayscale(100%) invert(0%); /*deixa o mapa cinza*/
}
/*Fim Mapa*/
/*FIM SEÇÃO CONTATO*/

/*RODAPÉ*/
.rodape{
    width: 100%;
    height: 11rem;
    display: flex;
    flex-direction: wrap;
    justify-content: space-evenly;
    align-items: center;
    background-color: #F2F2F2;
}

/*Logo Rodapé*/
.logo-rodape img{
    height: 7rem;
}
/*Fim Logo Rodapé*/

/*Informações Contato*/
.info-rodape{
    list-style: none;
}

.rodape-link{
    color: #1D3B38;
}

.rodape-link:hover{ /*muda de cor quando o mouse passa por cima*/
    color: #4A6260;
}

.item-info i{
    font-size: 1.6rem;
    margin-right: 0.5rem;
    margin-bottom: 1rem;
}

.item-info span{
    font-size: 1.3rem;
    font-weight: 600;
}
/*Fim Informações Contato*/

/*Ícones Redes Sociais*/
.rodape-sociais{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.lista-sociais{
    font-size: 2.3rem;
    list-style: none;
    display: flex;
    flex-direction: wrap;
    margin-bottom: 1.5rem;
}

.rodape-link i{
    margin-left: 0.3rem;
}

.rodape-sociais button{
    width: 20rem;
    height: 3rem;
    background-color: #1D3B38;
    border: none;
    border-radius: 3rem;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    color: #F2F2F2;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s; /*diminui a transição do efeito hover*/
}

.rodape-sociais button:hover{ /*animação botão*/
    transform: translateY(-0.2rem);
}
/*Fim Ícones Redes Sociais*/
/*FIM RODAPÉ*/

/*CRÉDITOS*/
.creditos{
    width: 100%;
    height: 3vh;
    background-color: #1D3B38;
    color: white;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    text-transform: uppercase;
    font-family: "Cinzel";
    letter-spacing: 0.1rem;
    font-size: 0.9rem;
}
/*FIM CRÉDITOS*/
/*FIM PÁGINA INICIAL*/