Praticando - Projeto Pessoal 2 :)

Fala galera! São incríveis essas ferramentas de hover para interação com o usuário. Muito simples, porém, já da uma visão mais agradável na web.

Estou tentando deixar o código mais organizado possível. Entretanto, como é um projeto pessoal acabo acrescentando algumas coisas e mudando outras diferentes da aula mas tudo está funcionando até agora. kkkkkk O projeto completo está lá no https://github.com/PhanthroX/studying-html-css

servicos.css

/*
    Adicionando cor ao fundo do cabeçalho e ajustando o padding.
    */

header {
    background: #eeb3f3;
    padding:0;
}

/*
    Criando a posição da div caixa e centralizando a logo e a home na página.
    */
.caixa {
    position: relative;
    width: 940px;
    margin: 0 auto;
}

/*
    Ajustando o tamanho da logo.
    */
#logo {
    width: 300px;
    height: 350px;
}

/*
    Ajustando a posição de navegação. 
    (Absolute serve para quebrar a posição padrão de um item, podendo assim, realocar o mesmo)
    */
nav {
    position: absolute;
    top: 170px;
    right: 40px;
}

/*
    Ajustando o display dos itens da home para que fiquem alinhados um ao lado do outro. (inline)
    */
nav li {
    display: inline;
    margin: 0 0 0 15px;
}

/*
    Estilizando os itens da home.
    (A tag <a> serve como âncora(link) para outra página html)
    */
nav a {
    text-transform: uppercase;
    color:aliceblue;
    font-weight:lighter;
    font-size: 25px;
}

/*
    Com o hover é possível interagir com o usuário a partir de onde estiver o mouse.
    Por exemplo, aplicar cor e sublimar o menu de navegação.
    */

nav a:hover {
    color:aqua;
    text-decoration:none;

}

/*
    Class Strong para os títulos importantes e itens para italico.
    A class servicos1 li possui a organização da margem dos itens.
    */

.servicos1 li{
    display: inline-block;
    margin-left: 08%;
    vertical-align: top;
    width: 30%;
    box-sizing: border-box;
    padding: 30px 20px;
    background: #f19595;
    margin: 0 1.5%;
    text-align: center;
    border: 2px solid #181618a6;
    border-radius: 10px;

}

.servicos1 {
    background: #ae04bea6;
}

/*
    hover específico para quando o mouse estiver em cima dos intes da li trocar a cor.
    */
.servicos1 li:hover {
    border-color: aqua;
}

/*
    Para aumentar a fonte do titulo de cada item para dar impressão de selecinado.
    */
.servicos1 li:hover h2 {
    font-size: 50px;
}

/*
    Troca a cor da borda quando o usuário clicar com o mouse em cima.
    */
.servicos1 li:active {
    border-color:#eeb3f3;
}

.strong {
    font-size: 40px;
    padding: 2%;
    text-align: center;  
    color:aliceblue; 
    font-weight:lighter;
}

.itens {
    font-style: italic;
    font-size: 30px;
    text-align: center;
    margin-top: 2%;
    color: #000000;
}



.fotos {
    weight: 380px;
    height: 540px;
    padding: 1%;
    margin-top: 2%;
}