#footer {
    background-color: #004AAD;
    color: white;
    padding: 20px;
    text-align: center;
    width: 100%;
    margin-top: auto; /* Mantém o rodapé colado na parte inferior */
}

@media (max-width: 767px) {
    #footer {
        position: relative; /* Altera para posição relativa em dispositivos móveis */
        margin-top: 0; /* Remove a margem superior para evitar deslocamentos */
    }
}


#footer h3 {
    font-weight: bold;
    margin-bottom: 10px;
}

.social-icons {
    list-style: none;
    display: flex;
    margin-bottom: 10px;
    margin-left: -35px;
}

.social-icons li {
    margin-right: 10px;
}

.social-icons a {
    color: white;
    text-decoration: none;
    display: inline-block;
    width: 40px;
    /* Largura do botão quadrado */
    height: 40px;
    /* Altura do botão quadrado */
    border-radius: 5px;
    /* Borda arredondada */
    text-align: center;
    line-height: 40px;
    /* Centralizar o ícone verticalmente */
    background: linear-gradient(to top, #310485 50%, #030303 50%);
    /* Efeito de transição vertical */
    background-size: 100% 200%;
    /* Tamanho da transição vertical */
    transition: background-position 0.3s ease;


}

.social-icons a:hover {
    background-position: 0% 100%;
    /* Altera a posição do fundo ao passar o mouse */
}

.social-icons i {
    font-size: 20px;
    position: relative;


    /* Tamanho do ícone */
}

.copy {
    font-size: 12px;
}

.copy a {
    color: white;
    text-decoration: none;
}

/* Adicionando centralização aos textos internos */
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Ajustes nas colunas internas */
.col-md-4 {
    flex: 1;
    max-width: 300px;
    margin: 0 15px;
    text-align: left;
}

/* Adicionando mais itens ao layout do footer */
.additional-items {
    margin-top: 20px;
}

.additional-items p {
    font-size: 14px;
    margin-bottom: 15px;
}
.icon-container {
    display: inline-block;
    margin-right: 10px;
    position: relative;
}

.icon-square {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;

    border-radius: 5px; /* Borda arredondada, ajuste conforme necessário */
    transition: transform 0.3s ease-in-out, background-position 0.3s ease-in-out;
    background-image: linear-gradient(to bottom, #3498db 50%, red 50%);
    background-size: 100% 200%;
    background-position: 0 0;
}

.icon-square i {
    font-size: 20px; /* Ajuste o tamanho do ícone conforme necessário */
}

.icon-container:hover .icon-square {
    transform: scale(1.2);
    background-position: 0 100%;
}

@media screen and (max-width: 768px) {
    .col-md-4 {
        flex: 1 1 100%;
        max-width: 100%;
        margin: 0 0 20px 0;
    }
}