.container {
  width: 100%;
  max-width: 1200px; /* ou qualquer largura máxima que você prefira */
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px; /* Adiciona padding para não encostar nas bordas da tela */
}
@media (max-width: 768px) {
  .container {
    padding-right: 10px;
    padding-left: 10px; /* Reduz o padding em dispositivos menores */
  }
}

.row {
  display: flex;
  flex-wrap: wrap; /* Permite que os elementos filhos (colunas) quebrem em várias linhas conforme necessário */
}

/* Rodapé do site */
.site-footer {
  background-color:#26272b; /* Define a cor de fundo do rodapé para um cinza escuro. */
  padding: 20px 20px; /* Adiciona um espaço interno: 45px no topo, 0 nas laterais, e 20px na parte inferior. */
  font-size:15px; /* Define o tamanho da fonte para 15px. */
  line-height:24px; /* Define a altura da linha para 24px, afetando a distância entre as linhas de texto. */
  color: #b9b9b9; /* Define a cor do texto para um cinza médio. */
}
@media (max-width: 768px) {
  .site-footer [class*='col-'] {
    width: 100%;
    margin-bottom: 20px; /* Adiciona espaço entre as colunas quando elas quebram para nova linha */
  }
}
@media (max-width:767px) {
  .site-footer {
      padding: 20px 10px; /* Ajusta o padding para ser mais apropriado em telas menores */
  }
}

/* Linha Horizontal no Rodapé */
.site-footer hr {
  border-top-color:#bbb; /* Define a cor da borda superior da linha horizontal para um cinza claro. */
  opacity:0.5; /* Define a opacidade da linha horizontal, tornando-a semi-transparente. */
}
.site-footer hr.small {
  margin:20px 0; /* Para linhas horizontais com a classe 'small', define a margem superior e inferior como 20px. */
}

/* Títulos no Rodapé */
.site-footer h6 {
  color:#fff; /* Define a cor do texto dos títulos (h6) para branco. */
  font-size:16px; /* Define o tamanho da fonte para 16px. */
  text-transform:uppercase; /* Transforma o texto em letras maiúsculas. */
  margin-top:5px; /* Define a margem superior para 5px. */
  letter-spacing:2px; /* Define o espaçamento entre as letras para 2px. */
}

/* Links no Rodapé */
.site-footer a {
  color: #b9b9b9; /* Define a cor dos links para um cinza médio. */
}
.site-footer a:hover{
  color: #6699cc; /* Define a cor dos links quando o mouse está sobre eles para um azul. */
  text-decoration:none; /* Remove o sublinhado dos links quando o mouse está sobre eles. */
}

/* Lista de Links no Rodapé */
.footer-links{
  padding-left:0; /* Remove o espaçamento interno à esquerda, para listas que estão alinhadas à esquerda. */
  list-style:none; /* Remove os marcadores dos itens da lista. */
}
.footer-links li{
  display:block; /* Exibe os itens da lista em blocos, ou seja, um abaixo do outro. */
}
.footer-links a{
  color: #b9b9b9; /* Define a cor dos links dentro da lista para um cinza médio. */
  text-decoration: none; /* Remove o sublinhado dos links nessas condições. */
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover{
  color: #6699cc; /* Define a cor dos links na lista quando estão ativos, focados ou com o mouse sobre eles, para azul. */
  text-decoration: none; /* Remove o sublinhado dos links nessas condições. */
}
.footer-links.inline li{
  display:inline-block; /* Para listas com a classe 'inline', os itens são exibidos lado a lado. */
}

/* ícones sociais */
.site-footer .social-icons{
  text-align: right; /* Alinha os ícones sociais à direita. */
}
.site-footer .social-icons a{
  width: 46px; /* Define a largura dos ícones para 40px. */
  height: 40px; /* Define a altura dos ícones para 40px. */
  line-height:40px; /* Define a altura da linha (centralizando o ícone dentro do círculo) para 40px. */
  text-align: center;
  margin-left: 5px;
  border-radius: 100%; /* Torna os ícones redondos. */
  /* background-color: white; *//* Define a cor de fundo dos ícones para um cinza muito escuro. */
}

/* Textos de direitos autorais */
.copyright-text{
  margin: 0; /* Define a margem do texto de direitos autorais para 0, removendo qualquer espaço externo padrão. */
}

/* Responsividade */
@media (max-width:991px){
  .site-footer [class^=col-]
  {
    margin-bottom:30px; /* Em dispositivos com largura máxima de 991px, adiciona uma margem inferior de 30px para colunas. */
  }
}
@media (max-width:767px){
  .site-footer
  {
    padding-bottom:0; /* Em dispositivos com largura máxima de 767px, remove o espaçamento interno inferior do rodapé. */
  }
  .site-footer .copyright-text,.site-footer .social-icons
  {
    text-align:center; /* Centraliza o texto de direitos autorais e os ícones sociais nesses dispositivos. */
  }
}

/* ícones sociais */
.social-icons{
  padding-left:0; /* Remove o espaçamento interno à esquerda da lista de ícones sociais, alinhando-os à esquerda. */
  margin-bottom:0; /* Remove a margem inferior da lista. */
  list-style:none; /* Remove os marcadores dos itens da lista de ícones sociais. */
}
.social-icons li{
  display:inline-block; /* Exibe os ícones sociais lado a lado. */
  margin-bottom:4px; /* Define a margem inferior dos ícones para 4px. */
}
.social-icons li.title{
  margin-right:15px; /* Para itens com a classe 'title', adiciona uma margem à direita de 15px. */
  text-transform:uppercase; /* Transforma o texto em maiúsculas. */
  color:#96a2b2; /* Define a cor do texto para um cinza azulado claro. */
  font-weight:700; /* Torna o texto em negrito. */
  font-size:13px; /* Define o tamanho da fonte para 13px. */
}
.social-icons a{
  font-size:16px; /* Define o tamanho da fonte do ícone para 16px. */
  display:inline-block; /* Exibe os ícones lado a lado. */
  line-height:44px; /* Define a altura da linha, centralizando o ícone verticalmente. */
  width:44px; /* Define a largura do ícone para 44px. */
  height:44px; /* Define a altura do ícone para 44px. */
  text-align:center; /* Centraliza o ícone horizontalmente. */
  margin-right:8px; /* Define a margem à direita do ícone para 8px. */
  border-radius:100%; /* Torna o ícone redondo. */
  -webkit-transition:all .2s linear; /* Suaviza a transição de cores e fundo. */
  -o-transition:all .2s linear;
  transition:all .2s linear;
}

.social-icons.size-sm a{
  line-height:34px; /* Para ícones pequenos, ajusta a altura da linha para centralizar o ícone verticalmente. */
  height:34px; /* Ajusta a altura do ícone para ícones pequenos. */
  width:34px; /* Ajusta a largura do ícone para ícones pequenos. */
  font-size:14px; /* Ajusta o tamanho da fonte do ícone para ícones pequenos. */
}

/* ajustes para dispositivos móveis */
@media (max-width:767px){
  .social-icons li.title
  {
    display:block; /* Em dispositivos menores, exibe o título dos ícones sociais em bloco (uma linha para cada um). */
    margin-right:0; /* Remove a margem à direita do título dos ícones sociais. */
    font-weight:600; /* Ajusta o peso da fonte para um pouco menos negrito que no desktop. */
  }
}