:root {
    --cor-primaria: #333333;
    --preenchimento-lateral: 40px;
    --preenchimento-vertical: 10px;
}

* {
    font-family: "Afacad Flux", "Montserrat", sans-serif;
}

html {
    scroll-behavior: smooth;
}

.cabecalho {
    background-color: var(--cor-primaria);
    padding-block: var(--preenchimento-vertical);
    padding-inline: var(--preenchimento-lateral);
    display: flex;
}

.logotipo img {
    min-width: 190px;
    width: 10vw;
    max-width: 300px;
}

.menu-principal {
    width: 100%;
    margin-left: clamp(40px, 10vw, 300px);
}

.menu-principal menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;
    grid-area: mennu;
}

menu li {
    list-style: none;
    font-size: clamp(1.2rem, 1.5rem, 1.8rem);
}

menu a {
    color: white;
}

menu a:hover {
    text-decoration: underline;
}

.icones-menu {
    display: none;
}

section {
    min-height: 400px;
    padding-block: var(--preenchimento-vertical);
    padding-inline: var(--preenchimento-lateral);
}

.servicos {
    display: grid;
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    gap: 20px;
}

.servico {
    border: 1px solid black;
    padding: 10px;
    display: grid;
}

.icones-servico {
    margin-block: clamp(40px, 2vh, 100px);
    display: flex;
    justify-content: center;
}

.icones-servico i {
    font-size: 5em;
    color: var(--cor-primaria);
}

.descricao p {
    margin-bottom: 10px;
}


.sobre-nos {
    background-color: var(--cor-primaria);   
}

.sobre-nos .titulo {
    color: white;
    font-size: clamp(1.5rem, 1rem + .85vw, 2rem);;
    grid-area: titulo;
    text-align: center;
}

.corpo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    column-gap: clamp(10px, 2vw, 100px);
    margin-top: clamp(20px, 2vw, 100px);
}

.sobre-nos .foto-autor img {
    max-width: 100%;
}

.sobre-nos .biografia {
    font-size: clamp(1rem, .8rem + .55vw, 1.5rem);
    color: white;   
}

.biografia p {
    margin-bottom: 20px;
}

@media screen and (max-width: 1023px) {
    .cabecalho {
    display: grid;
    grid-template-rows: 30px auto;
    grid-template-areas: 
        'logotipo icone'
        'menu menu'
    ;
    }

    .logotipo {
        grid-area: logotipo;
    }

    .menu-principal {
        margin: 0;
        grid-area: menu;
    }

    .menu-principal menu {
        flex-direction: column;
        justify-content: space-evenly;
        height: auto;
        display: none;
    }

    .icones-menu {
        display: flex;
        justify-content: right;
        align-items: center;
        color: white;
        cursor: pointer;
        grid-area: icone;
    }

    .icones-menu span {
        display: none;
        font-size: 3rem;
    }

    #expandir {
        display: block;
    }

    /* aqui vou criar um menu ativo */

    .menu-aberto .menu-principal {
        min-height: 100vh;
    }

    .menu-aberto menu {
        flex-direction: column;
        justify-content: space-evenly;
        height: auto;
        display: flex;
        overflow: auto;
        min-height: 60%;
    }

    .menu-aberto #expandir {
        display: none;
    }

    .menu-aberto #fechar {
        display: block;
    }

    .servicos {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}