.navbar {
  display: flex; /* Alinha logo e menu horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  padding: 10px 20px; /* Espaçamento interno */
  justify-content: space-between; /* Garante espaço entre logo e menu */
  height: 90px; /* Ajuste a altura do contêiner para aumentar a área do fundo */
  width: 100%; /* Ocupa toda a largura da tela */
}

#portfolio {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.img-portfolio {
  width: 150px; /* ou qualquer valor que você queira */
  height: auto; /* mantém a proporção */
}

/* Logo */
.logo-custom {
  margin-left: 50px;
}

.img-container {
  position: relative;
  display: inline-block;
}

.img-portfolio {
  width: 100%;
  max-width: 800px;
  height: auto;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.text-overlay {
  display: none;
  color: white;
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-decoration: none; /* Remove o sublinhado do link */
}

/* Efeito ao passar o mouse */
.img-portfolio:hover {
  filter: grayscale(60%) blur(2px);
  opacity: 0.8;
}

/* Exibe o texto sobre a imagem ao passar o mouse */
.img-container:hover .text-overlay {
  display: block;
}

/* Menu */
.custom-nav {
  list-style: none; /* Remove os marcadores */
  display: flex; /* Links em linha */
  gap: 20px; /* Espaçamento entre os itens */
  padding: 0; /* Remove espaçamento padrão */
  margin: 0; /* Remove margens */
  justify-content: flex-start; /* Mantém os itens alinhados à esquerda do menu */
  position: relative;
  left: -50px; /* Move a lista para a direita */
}

/* Links */
.nav-link {
  text-decoration: none; /* Remove sublinhado */
  color: black; /* Cor padrão */
  font-size: 16px; /* Tamanho da fonte */
  font-weight: bold; /* Texto em negrito */
  transition: color 0.3s ease; /* Suaviza a transição */
}

/* Hover nos links */
.nav-link:hover {
  color: #007bff; /* Cor azul no hover */
}

header {
  font-family: "Nunito", sans-serif;
}

.navbar .nav-link {
  color: #f8f8f8; /* Cor amarela */
  font-size: 18px;
  text-decoration: none; /* Remove o sublinhado */
  transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out;
  font-weight: 600;
  line-height: 1.5em;
}


.navbar .nav-link:hover {
  color: #3bfff5; /* Cor amarela mais brilhante ao passar o mouse */
}

h1{
  font-size: 48px;
  font-weight: bold;
  color: white; /* Cor padrão do texto */
}

h1 span {
  font-size: 53px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-linear-gradient(-35deg, #2575fc 0, #6a11cb 100%);
}

h2 {
  font-size: 40px;
  font-weight: bold;
  color: white;
}

h2 span {
  font-size: 40px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-linear-gradient(-35deg, #2575fc 0, #6a11cb 100%);
}

h6 {
  color: #ffbb3b;
  margin-top: -50px;  /* Ajuste o valor conforme necessário */
}

/* CSS para a imagem */
.col-md-6 img {
  object-fit: cover;  /* Garante que a imagem preencha a área da coluna sem distorcer */
  border-radius: 15px;
  transition: filter 0.3s ease;
  min-height: 550px;  /* Defina uma altura mínima para a imagem */
  height: 100%;  /* Garante que a imagem ocupe toda a altura disponível na coluna */
  min-width: 500px;  /* Defina uma altura mínima para a imagem */
  width: 100%;  /* Garante que a imagem ocupe toda a altura disponível na coluna */
}

.col-md-6:first-child {
margin-top: -20px; /* Ajuste conforme necessário para mover a imagem mais para cima */
}

.highlight {
  color: #4A90E2; /* Azul para as palavras específicas */
}

p{
  font-size: 19px;
  text-align: center;
}

.container{
    top: 150px;
}

.button-container {
  text-align: center; /* Centraliza o botão na página */
  margin-top: -365px; /* Espaçamento acima do botão */
}



.custom-button {
  display: inline-block;
  padding: 15px 30px; /* Espaçamento interno para o botão */
  background-color: #FFC107; /* Cor de fundo amarela */
  color: #000; /* Cor do texto preto */
  font-size: 18px; /* Tamanho da fonte */
  font-weight: bold; /* Texto em negrito */
  text-decoration: none; /* Remove o sublinhado */
  border-radius: 30px; /* Bordas arredondadas */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra para efeito 3D */
  transition: all 0.3s ease; /* Efeito de animação suave */
  margin-left: 43%;
  margin-top: 35%;
}

.custom-button:hover {
  background-color: #FFA000; /* Cor ao passar o mouse */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); /* Aumenta a sombra no hover */
  transform: translateY(-2px); /* Efeito de "subir" ao passar o mouse */
}

/*  segundo botao */

/* Estilos para o botão Fale Conosco */
.btn-fale-conosco {
display: inline-block;
padding: 15px 30px; /* Espaçamento interno para o botão */
background-color: #FFC107; /* Cor de fundo amarela */
color: #000; /* Cor do texto preto */
font-size: 18px; /* Tamanho da fonte */
font-weight: bold; /* Texto em negrito */
text-decoration: none; /* Remove o sublinhado */
border-radius: 30px; /* Bordas arredondadas */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra para efeito 3D */
transition: all 0.3s ease; /* Efeito de animação suave */
margin-left: 190px;
}

/* Efeito de hover (quando o mouse passa por cima) */
.btn-fale-conosco:hover {
background-color: #FFA000; /* Cor ao passar o mouse */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); /* Aumenta a sombra no hover */
  transform: translateY(-2px); /* Efeito de "subir" ao passar o mouse */
}

body {
  background-color: #000000; /* Cor de fundo preta para o restante da página */
  color: white; /* Cor do texto branca, para contraste */
}
header {
  position: relative;
  z-index: 1;
}
header .navbar {
  background-color: rgba(0, 0, 0, 0.5); /* Menu com fundo semi-transparente */
}
.logo-custom {
  max-width: 90px;
  max-height: 90px;
}
.custom-nav .nav-link {
  color: white;
}

.icon-box {
  width: 100px; /* Tamanho do círculo */
  height: 100px;
  background-color: #4A15A3; /* Cor roxa */
  border-radius: 50%; /* Faz o fundo arredondado */
  display: flex; /* Ativa flexbox */
  align-items: center; /* Centraliza o ícone verticalmente */
  justify-content: center; /* Centraliza o ícone horizontalmente */
  margin: 0 auto; /* Centraliza o círculo */
}

.icon-box svg {
  width: 55px; /* Defina o tamanho desejado para o ícone */
  height: 55px; /* Ajuste o tamanho proporcional ao SVG */
  fill: white; /* Cor do ícone */
}

footer ul {
  list-style: none; /* Remove os marcadores das listas */
  padding: 0; /* Remove espaçamento interno */
  margin: 0; /* Remove espaçamento externo */
}

footer ul li a {
  color: #828282;
  text-decoration: none; /* Remove o sublinhado */
  font-size: 12px;
}

footer ul li a:hover {
  color: #007bff; ; /* Altere para a cor desejada ao passar o mouse */
}

.logo-icons img{
    display: block; /* Garante que a logo fique separada dos ícones */
    margin-bottom: 10px; /* Espaçamento abaixo da logo */
    margin-left: 15px; /* Move a logo para a esquerda */
    position: relative;
    top: -80px; /* Move a logo para cima */
    z-index: 10; /* Garante que a logo fique visível */
  }

footer .social-icons {
display: flex;
gap: 15px; /* Espaço entre os ícones */
justify-content: flex-start; /* Alinha os ícones à esquerda */
align-items: center;
margin-left: 0px; /* Move os ícones mais à esquerda */
margin-top: -30px;
}

.social-icons a {
display: flex;
justify-content: center;
align-items: center;
width: 40px; /* Tamanho do círculo de fundo */
height: 40px; /* Tamanho do círculo de fundo */
border-radius: 50%;
background-color: #444;
text-decoration: none;
color: #828282;
transition: background-color 0.3s ease;
}

.social-icons a:hover {
background-color: rgb(169, 168, 173); /* Cor de destaque */
}

.social-icons img {
width: 25px; /* Tamanho dos ícones */
height: 25px;
}

.social-icons i {
font-size: 24px; /* Ajusta o tamanho dos ícones de fonte */
}

html, body {
margin: 0; /* Remove margens padrão */
padding: 0; /* Remove paddings padrão */
width: 100%; /* Garante 100% de largura */
}

footer {
background-color: #1c1c1c;
margin-top: 500px;
}

.footer-bottom {
border-top: 1px solid #555; /* Linha divisória */
padding: 10px 0; /* Espaçamento interno */
color: #ffffff; /* Texto branco */
background-color: #1c1c1c; /* Fundo igual ao restante do rodapé */
}

.footer-bottom p{
font-size: 15px;
text-align: left;
color: #828282;
}


 /* Ajuste da estrutura das colunas do rodapé para que fiquem próximas */

footer .row .rodape {
  display: grid; /* Usa grid layout */
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); /* Cria colunas flexíveis */
  gap: -15px; /* Espaçamento entre colunas */
  justify-items: center; /* Centraliza conteúdo dentro das colunas */
}

footer .rodape .col-md-4{
  text-align: center; /* Centraliza o texto */
  margin-top: -180px;
}

/*  Notebook    */

@media screen and (min-width: 900px) and (max-width: 1500px){

  .navbar {
    display: flex; /* Alinha logo e menu horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    padding: 10px 20px; /* Espaçamento interno */
    justify-content: space-between; /* Garante espaço entre logo e menu */
    height: 90px; /* Ajuste a altura do contêiner para aumentar a área do fundo */
    width: 100%; /* Ocupa toda a largura da tela */
  }
  
  /* Logo */
  .logo-custom {
    margin-left: 50px;
    width:60px;
  }
  
  /* Menu */
  .custom-nav {
    list-style: none; /* Remove os marcadores */
    display: flex; /* Links em linha */
    gap: 20px; /* Espaçamento entre os itens */
    padding: 0; /* Remove espaçamento padrão */
    margin: 0; /* Remove margens */
    justify-content: flex-start; /* Mantém os itens alinhados à esquerda do menu */
    position: relative;
    left: -50px; /* Move a lista para a direita */
  }
  
  /* Links */
  .nav-link {
    text-decoration: none; /* Remove sublinhado */
    color: black; /* Cor padrão */
    font-size: 16px; /* Tamanho da fonte */
    font-weight: bold; /* Texto em negrito */
    transition: color 0.3s ease; /* Suaviza a transição */
  }
  
  /* Hover nos links */
  .nav-link:hover {
    color: #007bff; /* Cor azul no hover */
  }
  
  header {
    font-family: "Nunito", sans-serif;
  }
  
  .navbar .nav-link {
    color: #f8f8f8; /* Cor amarela */
    font-size: 18px;
    text-decoration: none; /* Remove o sublinhado */
    transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out;
    font-weight: 600;
    line-height: 1.5em;
  }
  
  
  .navbar .nav-link:hover {
    color: #3bfff5; /* Cor amarela mais brilhante ao passar o mouse */
  }
  
  h1{
    font-size: 48px;
    font-weight: bold;
    color: white; /* Cor padrão do texto */
  }
  
  h1 span {
    font-size: 53px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(-35deg, #2575fc 0, #6a11cb 100%);
  }
  
  h2 {
    font-size: 40px;
    font-weight: bold;
    color: white;
  }
  
  h2 span {
    font-size: 40px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(-35deg, #2575fc 0, #6a11cb 100%);
  }
  
  h6 {
    color: #ffbb3b;
    margin-top: -50px;  /* Ajuste o valor conforme necessário */
  }
  
  /* CSS para a imagem */
  .col-md-6 img {
    object-fit: cover;  /* Garante que a imagem preencha a área da coluna sem distorcer */
    border-radius: 15px;
    transition: filter 0.3s ease;
    min-height: 550px;  /* Defina uma altura mínima para a imagem */
    height: 100%;  /* Garante que a imagem ocupe toda a altura disponível na coluna */
    min-width: 500px;  /* Defina uma altura mínima para a imagem */
    width: 100%;  /* Garante que a imagem ocupe toda a altura disponível na coluna */
  }
  
  .col-md-6:first-child {
  margin-top: -20px; /* Ajuste conforme necessário para mover a imagem mais para cima */
  }
  
  .highlight {
    color: #4A90E2; /* Azul para as palavras específicas */
  }
  
  p{
    font-size: 19px;
    text-align: center;
  }
  
  .container{
      top: 150px;
  }
  
  .button-container {
    text-align: center; /* Centraliza o botão na página */
    margin-top: -10px; /* Espaçamento acima do botão */
  }
  
  .custom-button {
    display: inline-block;
    padding: 15px 30px; /* Espaçamento interno para o botão */
    background-color: #FFC107; /* Cor de fundo amarela */
    color: #000; /* Cor do texto preto */
    font-size: 18px; /* Tamanho da fonte */
    font-weight: bold; /* Texto em negrito */
    text-decoration: none; /* Remove o sublinhado */
    border-radius: 30px; /* Bordas arredondadas */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra para efeito 3D */
    transition: all 0.3s ease; /* Efeito de animação suave */
  }
  
  .custom-button:hover {
    background-color: #FFA000; /* Cor ao passar o mouse */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); /* Aumenta a sombra no hover */
    transform: translateY(-2px); /* Efeito de "subir" ao passar o mouse */
  }
  
  /*  segundo botao */
  
  /* Estilos para o botão Fale Conosco */
  .btn-fale-conosco {
  display: inline-block;
  padding: 15px 30px; /* Espaçamento interno para o botão */
  background-color: #FFC107; /* Cor de fundo amarela */
  color: #000; /* Cor do texto preto */
  font-size: 18px; /* Tamanho da fonte */
  font-weight: bold; /* Texto em negrito */
  text-decoration: none; /* Remove o sublinhado */
  border-radius: 30px; /* Bordas arredondadas */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra para efeito 3D */
  transition: all 0.3s ease; /* Efeito de animação suave */
  margin-left: 190px;
  }
  
  /* Efeito de hover (quando o mouse passa por cima) */
  .btn-fale-conosco:hover {
  background-color: #FFA000; /* Cor ao passar o mouse */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); /* Aumenta a sombra no hover */
    transform: translateY(-2px); /* Efeito de "subir" ao passar o mouse */
  }
  
  body {
    background-color: #000000; /* Cor de fundo preta para o restante da página */
    color: white; /* Cor do texto branca, para contraste */
  }
  header {
    position: relative;
    z-index: 1;
  }
  header .navbar {
    background-color: rgba(0, 0, 0, 0.5); /* Menu com fundo semi-transparente */
  }
  .logo-custom {
    max-width: 90px;
    max-height: 90px;
  }
  .custom-nav .nav-link {
    color: white;
  }
  
  .icon-box {
    width: 100px; /* Tamanho do círculo */
    height: 100px;
    background-color: #4A15A3; /* Cor roxa */
    border-radius: 50%; /* Faz o fundo arredondado */
    display: flex; /* Ativa flexbox */
    align-items: center; /* Centraliza o ícone verticalmente */
    justify-content: center; /* Centraliza o ícone horizontalmente */
    margin: 0 auto; /* Centraliza o círculo */
  }
  
  .icon-box svg {
    width: 55px; /* Defina o tamanho desejado para o ícone */
    height: 55px; /* Ajuste o tamanho proporcional ao SVG */
    fill: white; /* Cor do ícone */
  }
  
  footer ul {
    list-style: none; /* Remove os marcadores das listas */
    padding: 0; /* Remove espaçamento interno */
    margin: 0; /* Remove espaçamento externo */
  }
  
  footer ul li a {
    color: #828282;
    text-decoration: none; /* Remove o sublinhado */
    font-size: 12px;
  }
  
  footer ul li a:hover {
    color: #007bff; ; /* Altere para a cor desejada ao passar o mouse */
  }
  
  .logo-icons {
      display: block; /* Garante que a logo fique separada dos ícones */
      margin-bottom: 10px; /* Espaçamento abaixo da logo */
      margin-left: 15px; /* Move a logo para a esquerda */
      position: relative;
      top: 100px; /* Move a logo para cima */
      z-index: 10; /* Garante que a logo fique visível */
    }
  
  .social-icons {
  display: flex;
  gap: 15px; /* Espaço entre os ícones */
  justify-content: flex-start; /* Alinha os ícones à esquerda */
  align-items: center;
  margin-left: 0px; /* Move os ícones mais à esquerda */
  margin-top: -10px;
  }

  .social-icons a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px; /* Tamanho do círculo de fundo */
  height: 40px; /* Tamanho do círculo de fundo */
  border-radius: 50%;
  background-color: #444;
  text-decoration: none;
  color: #828282;
  transition: background-color 0.3s ease;
  }
  
  .social-icons a:hover {
  background-color: rgb(169, 168, 173); /* Cor de destaque */
  }
  
  .social-icons img {
  width: 25px; /* Tamanho dos ícones */
  height: 25px;
  }
  
  .social-icons i {
  font-size: 24px; /* Ajusta o tamanho dos ícones de fonte */
  }
  
  html, body {
  margin: 0; /* Remove margens padrão */
  padding: 0; /* Remove paddings padrão */
  width: 100%; /* Garante 100% de largura */
  }
  
  footer {
  background-color: #1c1c1c;
  margin-top: 500px;
  }
  
  .footer-bottom {
  border-top: 1px solid #555; /* Linha divisória */
  padding: 10px 0; /* Espaçamento interno */
  color: #ffffff; /* Texto branco */
  background-color: #1c1c1c; /* Fundo igual ao restante do rodapé */
  }
  
  .footer-bottom p{
  font-size: 15px;
  text-align: left;
  color: #828282;
  }

  footer .col-md-3{
    margin-top: -190px;
  }
  
  .menu-rodape {
    margin-top: -400px;
}

#portfolio {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

}

/*  celular    */

@media screen and (min-width: 200px) and (max-width: 700px){

    .navbar {
      display: flex; /* Alinha logo e menu horizontalmente */
      align-items: center; /* Centraliza verticalmente */
      padding: 0px 20px; /* Espaçamento interno */
      justify-content: space-between; /* Garante espaço entre logo e menu */
      height: 29px; /* Ajuste a altura do contêiner para aumentar a área do fundo */
      width: 100%; /* Ocupa toda a largura da tela */
    }
    
    /* Logo */
    .logo-custom {
      margin-left: 5px;
      width:15px;
    }
      .container .col-md-6 img {
        width: 300px !important; /* Define a largura fixa em pixels */
        height: auto !important; /* Mantém a proporção da imagem */
        margin: 0 auto; /* Centraliza a imagem horizontalmente */
        display: block; /* Garante o comportamento de bloco */
      }
    /* Menu */
    .custom-nav {
      list-style: none; /* Remove os marcadores */
      display: flex; /* Links em linha */
      gap: 10px; /* Espaçamento entre os itens */
      padding: 0; /* Remove espaçamento padrão */
      margin: 0; /* Remove margens */
      justify-content: flex-start; /* Mantém os itens alinhados à esquerda do menu */
      position: relative;
      left: -10px; /* Move a lista para a direita */
    }
    
    /* Links */
    .nav-link {
      text-decoration: none; /* Remove sublinhado */
      color: black; /* Cor padrão */
      font-size: 16px; /* Tamanho da fonte */
      font-weight: bold; /* Texto em negrito */
      transition: color 0.3s ease; /* Suaviza a transição */
    }
    
    /* Hover nos links */
    .nav-link:hover {
      color: #007bff; /* Cor azul no hover */
    }
    
    header {
      font-family: "Nunito", sans-serif;
    }
    
    .navbar .nav-link {
      color: #f8f8f8; /* Cor amarela */
      font-size: 5px;
      text-decoration: none; /* Remove o sublinhado */
      transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out;
      font-weight: 600;
      line-height: 1.5em;
    }
    
    
    .navbar .nav-link:hover {
      color: #3bfff5; /* Cor amarela mais brilhante ao passar o mouse */
    }
    
    .texto{
      margin-top: -230px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 100%;
      height: 100vh; /* Garante que o container ocupe a altura inteira da tela */
    }
  
    .texto h1{
      font-size: 15px;
      max-width: 600px; /* Limita a largura para boa leitura */
    }
  
    .texto span{
      font-size: 20px;
      max-width: 600px; /* Limita a largura para boa leitura */
    }
    
    /* CSS para a imagem */
  .col-md-6 img {
    object-fit: cover;  /* Garante que a imagem preencha a área da coluna sem distorcer */
    border-radius: 15px;
    transition: filter 0.3s ease;
    min-height: 280px;  /* Defina uma altura mínima para a imagem */
    height: 100%;  /* Garante que a imagem ocupe toda a altura disponível na coluna */
    min-width: 387px;  /* Defina uma altura mínima para a imagem */
    width: 100%;  /* Garante que a imagem ocupe toda a altura disponível na coluna */
    margin-top: -200px;
    }

    #sobre {
      margin-top: 150 !important; /* força a remoção do margin-top inline */
      position: relative;
      top: -200px; /* sobe o bloco inteiro */
  }

  #portfolio{
    margin-top: 150 !important; /* força a remoção do margin-top inline */
    position: relative;
    top: -200px; /* sobe o bloco inteiro */
  }

  #servicos {
    margin-top: 150 !important; /* força a remoção do margin-top inline */
    position: relative;
    top: -200px; /* sobe o bloco inteiro */
}
  
    .container-fluid {
      margin-top: 0; /* Remover a margem superior do contêiner, se não for necessário */
      position: relative;
    }
  
    .container .row {
      flex-direction: column; /* Organiza as colunas na vertical */
    }
  
    .container .col-md-4 {
      max-width: 100%; /* Faz a coluna ocupar toda a largura */
      margin-bottom: 20px; /* Espaço entre as colunas */
    }
  
     /* Ajuste da estrutura das colunas do rodapé para que fiquem próximas */

  .footer {
    text-align: center;
  }

  .footer h5 {
    font-size: 1rem; /* Tamanho menor para os títulos */
    margin-bottom: 10px;
  }

  .footer ul {
    list-style: none;
    padding: 0;
  }

  .footer ul li {
    margin-bottom: 8px;
  }

  .footer ul li a {
    font-size: 0.85rem; /* Texto menor */
    color: #fff;
    text-decoration: none;
  }

  .footer ul li a:hover {
    text-decoration: underline;
  }

  .footer-bottom {
    font-size: 0.75rem; /* Texto menor no rodapé */
    margin-top: 15px;
  }

  .logo-icons img{
    margin-top: 0px;
  }

  .footer .col-md-3 {
    margin-bottom: 20px; /* Espaçamento entre as seções */
    margin-top: 15px;
  }

  .social-icons {
    display: flex;
    gap: 15px; /* Espaço entre os ícones */
    justify-content: flex-start; /* Alinha os ícones à esquerda */
    align-items: center;
    margin-left: 78px; /* Move os ícones mais à esquerda */
    margin-top: -190px;
    }
  
    .social-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px; /* Tamanho do círculo de fundo */
    height: 40px; /* Tamanho do círculo de fundo */
    border-radius: 50%;
    background-color: #444;
    text-decoration: none;
    color: #828282;
    transition: background-color 0.3s ease;
    }
    
    .social-icons a:hover {
    background-color: rgb(169, 168, 173); /* Cor de destaque */
    }
    
    .social-icons img {
    width: 25px; /* Tamanho dos ícones */
    height: 25px;
    }
    
    .social-icons i {
    font-size: 24px; /* Ajusta o tamanho dos ícones de fonte */
    }

     /* SOBRE NÓS */ 
    .btn-fale-conosco{
      margin-left: 95px;
    }
	
    .button-container p {
      font-size: 10px;
      margin-top: 0px; /* Espaçamento acima do botão */
      text-align: center; /* Centraliza o botão na página */
  }

  .custom-button {
    display: inline-block;
    padding: 0.5px 3px; /* Espaçamento interno para o botão */
    background-color: #FFC107; /* Cor de fundo amarela */
    color: #000; /* Cor do texto preto */
    font-size: 18px; /* Tamanho da fonte */
    font-weight: bold; /* Texto em negrito */
    text-decoration: none; /* Remove o sublinhado */
    border-radius: 30px; /* Bordas arredondadas */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra para efeito 3D */
    transition: all 0.3s ease; /* Efeito de animação suave */
    margin-left: 37%;
    margin-top: 52%;
  }
  
  .custom-button:hover {
    background-color: #FFA000; /* Cor ao passar o mouse */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); /* Aumenta a sombra no hover */
    transform: translateY(-2px); /* Efeito de "subir" ao passar o mouse */
  }

  
  .img-container {
    position: relative;
    display: inline-block;
  }
  
  .img-portfolio {
    width: 100%;
    max-width: 800px;
    height: auto;
    border-radius: 10px;
    transition: all 0.3s ease;
  }
  
  .text-overlay {
    display: none;
    color: white;
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-decoration: none; /* Remove o sublinhado do link */
  }
  
  /* Efeito ao passar o mouse */
  .img-portfolio:hover {
    filter: grayscale(60%) blur(2px);
    opacity: 0.8;
  }
  
  /* Exibe o texto sobre a imagem ao passar o mouse */
  .img-container:hover .text-overlay {
    display: block;
  }
}