@font-face {
    font-family: 'Segoe UI';
    src: url('../fonts/segoe-ui/segoeui.ttf') format('ttf');
    font-style: normal;
}

@font-face {
    font-family: 'Segoe UI';
    src: url('../fonts/segoe-ui/segoeuib.ttf') format('ttf');
    font-style: bold;
}

@font-face {
    font-family: 'Segoe UI';
    src: url('../fonts/segoe-ui/segoeuii.ttf') format('ttf');
    font-style: italic;
}

@font-face {
    font-family: 'Segoe UI';
    src: url('../fonts/times-new-roman/times.ttf') format('ttf');
    font-style: normal;
}

@font-face {
    font-family: 'Segoe UI';
    src: url('../fonts/times-new-roman/timesbd.ttf') format('ttf');
    font-style: bold;
}

@font-face {
    font-family: 'Segoe UI';
    src: url('../fonts/times-new-roman/timesi.ttf') format('ttf');
    font-style: italic;
}

:root {
    --fonte-principal: 'Times New Roman', serif;
    --fonte-secundaria: 'Segoe UI', sans-serif;
    --cor-principal: #DDB26C;
    --cor-secundaria: #CFCFCF;
    --cor-terciaria: black;
    --tamanho-fonte: 16px;
}


.linha-divisao {
    position: relative;
}

.linha-divisao::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-image: linear-gradient(to right, var(--cor-terciaria), var(--cor-principal), var(--cor-principal), var(--cor-principal), var(--cor-principal), var(--cor-terciaria));
}


main {
    background-image: linear-gradient(115deg, #000000 0%, #00000099 81%, #00000000 100%), url('../images/imagem-tela-principal.webp');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: auto;
    padding-bottom: 160px;
    margin-top: 116px;
}

.container {
    align-items: center;
    width: 66%;
    margin: auto;
}

h1 {
    font-family: var(--fonte-principal);
    font-size: 120px;
    color: var(--cor-principal);
    padding-top: 160px;
}

h2 {
    font-family: var(--fonte-principal);
    font-size: 80px;
    color: var(--cor-principal);
    padding-top: 22px;
}

h3 {
    font-family: var(--fonte-principal);
    font-size: 60px;
    color: var(--cor-principal);
    padding-top: 80px;
}

h4 {
    font-family: var(--fonte-secundaria);
    font-size: 24px;
    font-weight: 500;
    color: var(--cor-secundaria);
    margin: 18px;
}

p {
    font-family: var(--fonte-secundaria);
    font-size: 36px;
    color: var(--cor-secundaria);
    padding-top: 40px;
}

.texto-24px {
    font-size: 24px;
}

.texto-18px {
    font-size: 18px;
    line-height: 24px;
    padding-top: 10px;
}

.icones-texto-principal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 40px;
    gap: 80px;
}

.icone-texto {
    display: flex;
    align-items: center;
}

.icones-principal {
    height: 71px;
}

.texto-icones-principal {
    padding: 0 10px;
}

.botoes-principal {
    display: flex;
    padding-top: 40px;
    gap: 40px;
    align-items: center;
}

.botao-porfolio {
    background-color: var(--cor-principal);
    font-size: 36px;
    color: var(--cor-terciaria);
    height: 80px;
    width: 400px;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
}

.botao-Orcamento {
    border: 1px solid;
    font-size: 36px;
    height: 80px;
    width: 400px;
    text-align: center;
    align-items: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sobre_nos {
    background-image: url(../images/background-sobre-nos.webp);
    background-size: cover;
    background-position: center;
    width: 100%;
    height: auto;
    padding-bottom: 300px;
}

.sobre_nos-texto {
    padding-top: 200px;
}

.sobre_nos p {
    width: 35%;
}

.o_que_fazemos, .portfolio, .contato {
    text-align: center;
    background-color: var(--cor-terciaria);
    height: auto;
    width: 100%;
    padding-bottom: 160px;
}

.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 40px;
    margin-top: 60px;
}

.cards_cartao {
    display: flex;
    flex-direction: column;
    text-align: center;

    max-width: 260px;
    padding: 60px 10px;
    border: 1px solid var(--cor-principal);
}

.mosaico-imagens {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 10px auto;
    align-items: center;
    margin-top: 60px;
}

.link-imagem-01 {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    border: unset;
    background-color: unset;
    cursor: pointer;
    margin-top: 10px;

}

.link-imagem-01:hover {
    filter: none;
}

.conteudo-contato {
    padding-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 40px;
}


.informacoes-atendimento {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: left;
}

.texto-contato {
    font-size: 24px;
    line-height: 32px;
    text-align: left;
    padding: 0;
}

.texto-contato_2 {
    font-size: 24px;
    line-height: 32px;
    text-align: left;
    padding-top: 40px;
}

.texto-contato-icone {
    font-size: 24px;
    line-height: 32px;
    text-align: left;
    padding: 0;
}

.contatos-icone-texto {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 30px;
}

footer {
    padding: 60px 0 80px 0;
    background-color: var(--cor-terciaria);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.display-none {
    display: none !important;
}