.footer-container {
    display: flex;
    flex-direction: column; /*Alinha os elementos em uma coluna*/
    align-items: center; /* centraliza os elementos*/
    padding: 40px 20px; /* adiciona um espaco interno 40 superior e inferior 20 nas LATERAIS*/
    background-color: #111;
    color: #fff;
    border-top: 5px solid #ff5733; /* add uma borda na parte superior em 5px */
    border-radius: 19px;
    text-align: center; /* centraliza os textos */
    width: 100vw;
    height: 100%;

}

.footer-recommendations {
    display: flex; /* deixa o layout flexível */
    align-items: center; /* centraliza os itens verticalmente */
    margin-bottom: 20px;/* espacamento entre o bloco de recomendacoes e os links de rodape */
}

.footer-recommendations p { 
    font-size: 20px;
    font-weight: bold; /* deixa o texto como negrito */
    margin-right: 10px;/* espacamento entre o texto e os links */
}

.footer-recommendations a {
    display: inline-block; /* deixa bloco inline */
    background-color: #ff5733;
    color: #fff;
    text-decoration: none; /* remove decoracao do link  */
    font-size: 16px;
    padding: 10px 20px; /* 10px vertical e 20px horizontal */
    border-radius: 5px; /* deixa a borda redonda 5px de raio  */
    margin-right: 10px;/* espaco direito de 10px */
    transition: background-color 0.3s ease; /* 0.3s para alterar a cor */
}

.footer-recommendations a:hover {
    background-color: #fe3b00;
}

.footer-links ul {
    list-style: none; /*remove os pontos (sem isso vira tipo uma lista) */
    padding: 0; /* remove preenchimento interno */ 
    display: flex; /* deixa conteudo flexivel  */
    flex-wrap: wrap; /* quando diminui a tela a linha quebra para a proxima linha*/
    justify-content: center; /* centraliza os itens horizontalmente */
    margin-bottom: 20px; /*lado inferior  recebe um espaco*/
}

.footer-links ul li {
    margin: 0 15px; /* espaco na lateral em 15px */
}

.footer-links ul li a {
    color: #fff;
    text-decoration: none; /* remove decoracao do link */
    font-size: 16px;
    display: flex; /* layout flexivel*/
    align-items: center; /* centraliza os items no meio */
}

.footer-links ul li a:hover {
    color: #ff5733; /* altera a cor quando o mouse passa por cima */
}

.footer-links ul li a i {
    margin-right: 8px; /* espacamento da direita em 8px */
    font-size: 18px;
}

.footer-info {
    margin-top: 20px; /* espaco superior em 20px */
    font-size: 14px;
    color: #ccc;
}

.footer-extras {
    margin-top: 20px; /* espacamento superior em 20px*/
}

.footer-extras a {
    color: #fff;
    text-decoration: none; /* remova decoracao do link ou texto */
    font-size: 16px;
    margin: 0 10px; /* espaco lateral */
    display: inline-flex; /* deixa layout em inline*/
    align-items: center; /* centraliza os items*/
}

.footer-extras a:hover {
    color: #ff5733; /* muda a cor do texto quando passa o mouse*/
}

.footer-extras a i {
    margin-right: 5px; /* espaco direito */
    font-size: 20px;
}