/* GERAL */

:root 
{
    --altura-icone: 6vw;
    --altura-minima-icone: 60px;

    --laranja: rgb(248, 168, 48);
    --laranja-transparente: rgba(248, 168, 48, 0.1);

    --amarelo: rgb(255, 212, 77);
    --amarelo-transparente: rgba(255, 212, 77, 0.1);

    --azul: rgb(39, 92, 140);
    --azul-transparente: rgba(39, 92, 140, 0.1);

    --azul-escuro: rgb(0, 71, 128);

    --verde-claro: rgb(126, 169, 1);

    --verde: rgb(88, 145, 43);
    --verde-transparente: rgba(88, 145, 43, 0.1);

    --verde-limao: rgb(196, 195, 1);
    --verde-escuro: rgb(80, 101, 47);

    --cinza: rgb(100, 110, 130);
    --cinza-transpartene: rgba(100, 110, 130, 0.1);

    --transicao-navbar: 0.2s;
    --transicao-botao: 0.2s;

    --cor-navbar: var(--laranja);

    --cor-secao-home: var(--laranja);
    --cor-secao-servicos: var(--laranja);
    --cor-secao-projetos: var(--azul);
    --cor-secao-parceiros: var(--verde);
    --cor-secao-onde-estamos: var(--amarelo);
    --cor-secao-contato: var(--cinza);

    --cor-servico-1: var(--laranja);
    --cor-servico-2: var(--laranja);
    --cor-servico-3: var(--laranja);

    --arredondamento-borda-servico: 10px;
    --arredondamento-borda-projeto: 10px;

    --gradiente-servico: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
    --gradiente-projeto: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
    --gradiente-secao: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0),  rgba(0, 0, 0, 0.1));
    --gradiente-onde-estamos: linear-gradient(to bottom left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.75));
    --gradiente-onde-estamos-mobile: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.75));

    --imagem-index: url(/resources/images/compressed/cidade.jpg);
    --imagem-servico-1: url(/resources/images/solar.jpg);
    --imagem-servico-2: url(/resources/images/eficiencia.jpg);
    --imagem-servico-3: url(/resources/images/eltrica\ 2.jpg);
    --imagem-onde-estamos: url(/resources/images/compressed/trabalhando2.jpg);
    --imagem-onde-estamos-mobile: url(/resources/images/compressed/mobile/trabalhando2.jpg);
}

@media(max-width: 768px)
{
    :root
    {
        --altura-icone: var(--altura-minima-icone);
    }
}

.btn-orange
{
    background-color: var(--laranja) !important;
    color: white;
}

.btn-marine
{
    background-color: var(--azul) !important;
    color: white;
    
}

.btn-yellow
{
    background-color: var(--amarelo) !important;
    color: white;
}

.btn
{
    transition: var(--transicao-botao);
}

.btn:hover
{
    color: white;
    filter: brightness(1.1);
}

.fake-button
{
    cursor: pointer;
}

.fake-button:hover
{
    filter: brightness(1.1);
}

.text-marine
{
    color: var(--azul) !important;
}

html
{
    scroll-behavior: smooth;
}

body
{
    overflow-x: hidden;
    max-width: 100%;
    font-family: 'Nunito', cursive;
    background-color: var(--light);
}

h1
{
    font-weight: 600;
}

textarea
{
    resize: none;
}

.selector-for-some-widget 
{
    box-sizing: content-box;
}

.center-cropped 
{
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.btn.botao-quadrado
{
    border-radius: 0;
}

@media (max-width: 768px) 
{
    body
    {
        font-size: small;
    }
    h1
    {
        font-size: 24px;
    }
}

/* BARRA DE NAVEGAÇÃO */

img.navbar-brand
{
    height: var(--altura-icone);
    min-height: var(--altura-minima-icone);
    width: auto;
}

nav.navbar
{
    z-index: 10;

    padding-top: 0px;
    padding-bottom: 0px;

    display: flex;
    align-items: center;

    transition: border var(--transicao-navbar);
    border-bottom: solid 2px var(--cor-navbar);

    width: 100vw;
    position: fixed;

    background: rgba(255, 255, 255, 1); /*linear-gradient(to bottom,rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.33));*/
}

.nav-item.desktop
{
    padding: 1vw;
    margin: 0;
    padding-top: 0px;
    padding-bottom: 0px;
    border-radius: 20px;
    margin-right: 0.5vw;
    margin-left: 0.5vw;
}

.nav-item.desktop > .nav-link
{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.nav-item.desktop:hover > a.nav-link
{
    font-weight: 600;
}

.nav-item.desktop.active
{
    background-color: var(--cor-navbar);
}

.nav-item.desktop.active > a.nav-link
{
    font-weight: bold;
    color: white !important;
}

#navbar-placeholder
{
    height: var(--altura-icone);
    width: 100vw;
}

@media (min-width: 768px) 
{
    .nav-item
    {
        margin-left: 2%;
        margin-right: 2%;
    }
}

@media (max-width: 768px)
{
    nav.navbar
    {
        border: none;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    }
    
    .nav-item.mobile > a.nav-link
    {
        color: var(--cor-navbar);
        transition-property: color, background-color;
        transition-duration: 0.25s;
    }

    .nav-item#botao-voltar-menu-lateral > a.nav-link
    {
        color: black;
    }

    .nav-item.mobile.active > a.nav-link
    {
        color: white;
        background-color: var(--cor-navbar);
    }
}

/* MENU LATERAL - MOBILE */

nav#menu-lateral
{
    z-index: 20;

    font-size: 1.2em;
    
    position: fixed;
    top: 0px;
    left: -65vw;
    margin: 0px;

    height: 100vh;
    width: 60vw;

    transition-duration: 0.5s;

    flex-direction: column;
    text-align: left;

    background-color: white;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}

#fundo-preto
{
    z-index: 19;

    width: 100vw;
    height: 100vh;

    position: fixed;
    margin: 0;
    left: 0;
    top: 0;

    display: none;

    background-color: rgba(0, 0, 0, 0.5);
}

.icone-navbar
{
    width: 20px !important;
}

/* INDEX */

#botao-index {
    border-radius: 0px;
}

#retangulo-index {
    background: rgba(0, 0, 0, 0.65);
    border-radius: 10px;
}

/* SEÇÕES DO SITE */

section
{
    padding-top: 0;
    padding-bottom: 0;
    min-height: 100vh;
    width: 100vw;
    background-image: var(--gradiente-secao);
    display: flex;
    align-items: center;
    justify-content: center;
}

section > div
{
    padding: 0;
    margin: 0;
    padding-top: var(--altura-icone);
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

section > div > div.row
{
    width: 100%;
    min-height: calc(100vh - var(--altura-icone))
}

section#home
{
    background-image: var(--imagem-index);
    height: 100vh;
}

section#home > div
{
    align-items: center;
    height: 100%;
}

section#servicos
{
    background-color: var(--laranja-transparente);
}

section#projetos
{
    background-color: var(--azul-transparente);
}

section#parceiros
{
    background-color: var(--verde-transparente);
}

section#onde-estamos
{
    background-color: var(--amarelo-transparente);
}

section#contato
{
    background-color: var(--cinza-transparente);
}

header > hr
{
    border-width: 2px;
    border-radius: 2px;
}

header.n1
{
    color: var(--laranja);
}

header.n1 > hr
{
    border-color: var(--laranja);
}

header.n2
{
    color: var(--azul);
    text-align: right;
}

header.n2 > hr
{
    border-color: var(--azul);
}

header.n3
{
    color: var(--verde);
    text-align: left;
}

header.n3 > hr
{
    border-color: var(--verde);
}

header.n4
{
    color: var(--amarelo);
    text-align: right;
}

header.n4 > hr
{
    border-color: var(--amarelo);
}

header.n5
{
    color: var(--cinza);
    text-align: left;
}

header.n5 > hr
{
    border-color: var(--cinza);
}

.em-construcao
{
    background-color: rgba(255, 255, 255, 0.25);
    color: rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 60vh;
}

select, select > option
{
    font-family: fontAwesome, Nunito;
}

@media (max-width: 768px) 
{
    section
    {
        height: auto;
        min-height: 100vh;
    }
    section#home
    {
        height: 100vh;
    }
    section > div > div.row
    {
        width: auto;
    }
}


/* SERVIÇOS */

#lista-servicos
{
    display: flex;
    justify-content: center;
    align-items: stretch;
    min-height: 60vh;
}

.servico
{
    height: auto;
}

.servico > div
{
    height: 100%;
    margin: 0px;
    padding: 0px;

    /*border: solid 2px;*/
    border-radius: var(--arredondamento-borda-servico);

    background-color: var(--light);

    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}

.imagem-servico
{
    height: 30vh;
    display: flex;
    flex-direction: column-reverse;
    border-radius: var(--arredondamento-borda-servico) var(--arredondamento-borda-servico) 0px 0px;
    padding: 20px !important;
}

.icone-topico-servico
{
    color: var(--laranja);
}

@media (min-width: 768px) 
{
    .imagem-servico
    {
        height: 30vh;
        padding-bottom: 0px;
        margin: 0px;
    }
}

.nome-servico
{
    text-align: left;
    font-size: 1.25em;
    font-weight: bold;

    color: var(--laranja);
    
    display: flex !important;
    align-items: center;

    border-left: none;

    padding: 0px;
    width: 100%;

    background-color: transparent;
}

.nome-servico.mobile
{
    display: none !important;
}

.descricao-servico
{
    padding: calc(16px + 1.5vw);

    text-align: left;
    font-size: small;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.topico-servico
{
    display: flex;
    justify-content: start;
    align-content: flex-start;
    margin-top: 5px;
    margin-bottom: 5px;
}

.texto-servico > hr
{
    border-color: rgba(0, 0, 0, 0.25);
}

.icone-servico
{
    font-size: 2em !important;
    margin-bottom: 0px;
}

.botao-servico {
    border-radius: 0;
}

@media (max-width: 768px) 
{
    .servico
    {
        margin-bottom: 16px;
    }
    
    .servico > div
    {
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: stretch;
    }

    .imagem-servico
    {
        height: 25vh;
    }

    .descricao-servico
    {
        text-align: left;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-content: center;
    }

    .topico-servico
    {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .nome-servico
    {
        display: none;
    }

    .nome-servico.mobile
    {
        text-align: left;
        font-size: 1.25em;
        font-weight: bold;
        
        display: flex !important;
        align-items: center;

        border-left: none;
        border-bottom: solid 1px rgba(0, 0, 0, 0.1);

        padding: 0px;
        padding-bottom: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
        width: 100%;

        background-color: transparent;
    }

    .icone-servico
    {
        font-size: 16px !important;
        margin-bottom: 0px;
    }

    .botao-servico {
        font-size: 1em;
    }
}

/* PROJETOS */

.projeto
{
    height: 30vh;
    margin-bottom: 30px;
}

.projeto > div
{
    height: 100%;
    margin: 0px;
    padding: 0px;

    transition: filter 0.2s;

    cursor: pointer;

    /*border: solid 2px;*/
    border-radius: var(--arredondamento-borda-servico);

    background-color: var(--light);

    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}

.projeto > div:hover
{
    filter: brightness(1.15);
}

#lista-projetos-ocultos, #ver-menos
{
    display: none;
}

.imagem-projeto
{
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    border-radius: var(--arredondamento-borda-servico);
    margin-bottom: 0px;
    padding: 10px !important;
}

.nome-projeto
{
    display: flex;
    justify-content: start;
    align-items: center;

    text-align: left;

    color: white;
    border-left: none;

    padding: 10px;
    padding-left: 0;
    width: 100%;

    background-color: transparent;
}

.nome-projeto > div > .titulo
{
    font-size: 1em;
    font-weight: bold;
}

.nome-projeto > div > .descricao
{
    margin-top: -3px;
    font-size: 0.75em;
    font-weight: normal;
}

.botao-projeto {
    margin-top: 4%;
    border-radius: 0;
}

/* ONDE ESTAMOS */

.imagem-grande
{
    background-image: var(--gradiente-onde-estamos), var(--imagem-onde-estamos);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left !important;
    padding: calc(10px + 4%);
    height: 60vh;
}

.imagem-grande > div
{
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
    margin-top: 3%;
    margin-left: 10%;
    font-size: 1em;
    /*border-left: solid 5px white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    padding-right: 50px;*/
}

.imagem-grande > div > #topicos
{
    display: flex;
    flex-direction: column;
}

.imagem-grande > div > hr
{
    border-color: rgba(0, 0, 0, 0.25);
}

.icone-onde-estamos
{
    color: var(--amarelo);
    width: 50px !important;
    margin-right: 20px;
    text-align: center;
}

.topico-onde-estamos
{
    display: flex;
    align-items: center;
}

.botao-onde-estamos
{
    border-radius: 0;
    font-weight: bolder;
    text-shadow: none !important;
}

@media (max-width: 768px)
{
    .imagem-grande
    {
        background-image: var(--gradiente-onde-estamos-mobile), var(--imagem-onde-estamos-mobile);
        justify-content: flex-end;
        height: 80vh;
    }

    .imagem-grande > div
    {
        margin: 0;
    }

    /*.imagem-grande > div > #topicos
    {
        flex-direction: row;
        justify-content: center;
        text-align: center;
    }

    .icone-onde-estamos
    {
        width: 50px !important;
        margin-right: 0;
        font-size: 1.5em;
    }

    .topico-onde-estamos
    {
        justify-content: center;
    }

    .topico-onde-estamos
    {
        flex-direction: column;
    }*/
}

/* PARCEIROS */

#lista-parceiros
{
    justify-content: center;
}

.parceiro
{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    margin-top: 25px;
}

.parceiro > img
{
    width: 65%;
}

@media (max-width: 768px)
{
    .parceiro
    {
        margin-bottom: 25px;
        margin-top: 25px;
    }

    .parceiro > img
    {
        width: 80%;
    }
}

/* CONTATO */

.input-group-prepend
{
    width: 45px;
}

.input-group-prepend > .input-group-text
{
    width: 100%;
    justify-content: center;
}

section#contato
{
    min-height:85vh;
}

section#contato > div
{
    min-height:85vh;
}

section#contato > div > div.row
{
    min-height:auto;
}


@media (max-width: 768px) 
{
    .nome-projeto
    {
        padding: 5px;
    }
}

/* RODAPÉ */

#rodape
{
    font-size: 0.9em;
    width: 100vw;
    display: flex;
    flex-direction: row;
    min-height:15vh;
    align-items: center;
}

#conteudo-rodape
{
    display: flex;
    flex-direction: column;
    justify-content: start;
    width: 100%;
}

#rodape-topo
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#rodape-topo > #info-empresa
{
    display: flex;
    flex-direction: row;
    justify-content: start;
}

#rodape-topo > #midias-sociais
{
    display: flex;
    flex-direction: row;
    justify-content: end;
}

.info-contato
{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0px;
}

.info-contato.clicavel
{
    cursor: pointer;
}

.info-contato.clicavel:hover
{
    filter: brightness(1.1);
}

.icone-contato
{
    font-size: 2em;
    color: var(--laranja);
}

#lista-contatos
{
    display: flex;
}

#lista-contatos > img
{
    margin-left: 20px;
    filter: hue-rotate(8deg) brightness(1.3);
    transition: filter var(--transicao-botao);
    cursor: pointer;
}

#lista-contatos > img:hover
{
    filter: hue-rotate(8deg) brightness(1.45);
}

.margem-rodape
{
    margin-left: calc(10px + 1vw);
}

#endereco > #hifen
{
    display: inline;
}

#endereco > br#quebra-de-linha
{
    display: none;
}

#lista-whatsapp-mobile
{
    display: none;
}

@media(max-width: 768px)
{
    #rodape
    {
        font-size: 0.75em;
    }

    .conteudo-site.rodape
    {
        justify-content: space-between;
    }

    #conteudo-rodape
    {
        width: auto;
    }

    #conteudo-rodape > hr
    {
        display: none;
    }

    #lista-contatos
    {
        flex-direction: column;
    }

    #rodape-topo > #info-empresa
    {
        flex-direction: column;
    }

    #info-empresa > #endereco
    {
        margin-left: 0 !important;
        margin-top: 8px;
    }

    #endereco > #hifen
    {
        display: none;
    }

    #endereco > br#quebra-de-linha
    {
        display: inherit;
    }

    .info-contato
    {
        margin-top: 8px;
        margin-right: 0;
        margin-left: 0;
    }

    #lista-contatos > img
    {
        width: 30px;
        margin-left: 2vw;
        filter: hue-rotate(8deg) brightness(1.3);
        transition: filter var(--transicao-botao);
        cursor: pointer;
    }

    #lista-whatsapp-mobile
    {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        margin: 0;
        padding: 0;
    }

    #lista-whatsapp-mobile > .info-contato
    {
        margin: 0;
        margin-top: 8px;
    }
}