* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --extra-light: #000;
  --max-width: 1200px;
  --text-light: #6c757d;
}

/* ======================================== Body ======================================== */

body {
  font-family: "Sora", sans-serif;
  background-color: black;
  color: white;
}

/* ======================================== Header ======================================== */

/* Estilos para a barra preta no topo */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 83px; /* Altura da barra preta */
  background-color: black;
  z-index: 1001; /* Um nível acima do cabeçalho */
}

header {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  top: 20px; /* Ajusta a posição para flutuar um pouco abaixo do topo */
  left: 50%;
  transform: translateX(-50%);
  width: 97%; /* Aumenta a largura para 90% */
  max-width: none; /* Remova o limite de largura máxima */
  background: #161616;
  color: white;
  height: 4rem;
  padding: 0 2rem;
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  border-radius: 7.5px;
  box-sizing: border-box;
}

@media screen and (max-width: 430px) {
  header {
      width: 90%; /* Tamanho para smartphones */
  }
}

@media screen and (max-width: 1024px) {
  header {
      width: 95%; /* Tamanho para iPads */
  }
}

@media screen and (min-width: 1025px) and (max-width: 1366px) {
  header {
      width: 96%; /* Tamanho para iPad Pro */
  }
}

@media screen and (max-width: 414px) {
  header {
      width: 90%; /* Tamanho para Galaxy Z Fold 5 */
  }
}

/* ======================================== Logo ======================================== */

.logo a {
  font-family: "transducer", sans-serif;
  color: #fff;
  text-decoration: none;
  font-size: 1.5em;
}

/* Media query para Galaxy Z Fold 5 (largura máxima de 280px) */
@media screen and (max-width: 344px) {
  .logo a {
    font-size: 1.3rem; /* Reduz o tamanho do logo para telas menores */
  }
}

/* ======================================== Nav ======================================== */

nav {
  position: relative;
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-links {
  list-style: none;
  display: none;
  flex-direction: column; /* Exibir em coluna */
  justify-content: center;
  align-items: center;
  background-color: #141414;
  position: fixed;
  top: 80px; /* Ajusta a posição para aparecer abaixo do header */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto; /* Ajuste de altura */
  transition: all 0.3s;
  text-align: center;
  padding: 1rem 0; /* Espaçamento interno */
  margin: 0; /* Removemos o margin para eliminar o espaço entre os itens */
  box-sizing: border-box; /* Inclui padding no tamanho total */
  border-radius: 7.5px;
  z-index: 1000; /* Abaixo do top-bar */
}

.nav-links.active {
  display: flex; /* Mostra o menu quando .active é aplicado */
}

.nav-links li {
  margin: 10px; /* Espaçamento entre os itens */
}

.nav-links a {
  display: block;
  padding: 15px; /* Espaçamento interno dos links ajustado */
  color: white;
  text-decoration: none;
  background-color: #222325; /* Cor de fundo para os links */
  border-radius: 7.5px; /* Borda arredondada */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
  transition: background-color 0.3s, color 0.3s;
  font-weight: 400; /* Peso da fonte */
  width: 150px; /* Largura reduzida para os retângulos */
  text-align: center; /* Centraliza o texto horizontalmente */
}

.nav-links a:hover {
  background-color: white;
  color: black;
}

.nav-links .close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  padding: 10px;
  margin-top: 10px;
}

.nav-links .close-btn:hover {
  color: #EF3D0B;
}


/* Estilos para o ícone do hamburger */
.hamburger {
  display: grid;
  grid-template-columns: repeat(3, 7px);
  grid-template-rows: repeat(3, 7px);
  gap: 3px;
  cursor: pointer;
  z-index: 2000;
}

.hamburger .line {
  background-color: #fff;
  width: 100%;
  height: 100%;
  transition: all 0.3s;
}

.hamburger.active .line:nth-child(1) {
  transform: rotate(45deg);
  background-color: red;
}

.hamburger.active .line:nth-child(2),
.hamburger.active .line:nth-child(4),
.hamburger.active .line:nth-child(6),
.hamburger.active .line:nth-child(8) {
  opacity: 0;
}

.hamburger.active .line:nth-child(3) {
  transform: rotate(-45deg);
  background-color: red;
}

.hamburger.active .line:nth-child(5) {
  background-color: #EF3D0B;
}

.hamburger.active .line:nth-child(7) {
  transform: rotate(-45deg);
  background-color: #EF3D0B;
}

.hamburger.active .line:nth-child(9) {
  transform: rotate(45deg);
  background-color: #EF3D0B;
}

.hamburger.active .line:nth-child(1),
.hamburger.active .line:nth-child(3),
.hamburger.active .line:nth-child(7),
.hamburger.active .line:nth-child(9) {
  transition-delay: 0.15s;
}

/* ======================================== Main ======================================== */

main {
  min-height: calc(100vh - 8rem);
  padding-top: 6rem;
}

main.portfolio,
main.about,
main.contact,
main.afro-music,
main.glancine,
main.iem,
main.cais-do-peixe,
main.quality-life,
main.gallery {
  padding-top: 15rem;
}

/* Media query para iPad Pro */
@media screen and (min-width: 1025px) and (max-width: 1366px) {
  main {
    padding-top: 5rem; /* Reduz o espaçamento superior */
  }

  main.portfolio,
  main.about,
  main.contact,
  main.afro-music,
  main.glancine,
  main.iem,
  main.cais-do-peixe,
  main.quality-life,
  main.gallery {
    padding-top: 12rem; /* Reduz o espaçamento superior para seções específicas */
  }
}

/* ======================================== About ======================================== */

.about-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem; /* Espaçamento ao redor do conteúdo */
}

.about-text {
  margin-right: 13rem; /* Ajusta o espaçamento entre o texto e a imagem */
  color: #818181; /* Cor do texto */
  max-width: 480px; /* Define a largura máxima do texto */
}

.about-text p {
  font-size: 20px; /* Tamanho da fonte do texto */
  line-height: 1.5; /* Altura da linha para melhor legibilidade */
}

.section {
    position: relative;
    background-color: var(--extra-light);
    padding-top: 6rem; /* Aumenta o espaço superior da seção */
}

.section-container {
    position: relative;
    max-width: var(--max-width);
    margin: auto;
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
    overflow: hidden;
}

.section-container::before {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1380px;
    height: 362px;
    background-color: #ccc;
    z-index: -1;
}

/* Media Queries */
@media (max-width: 414px) {
  .section-container {
    grid-template-columns: 1fr;
  }
}

/* Para smartphones em modo retrato e tablets em modo retrato */
@media screen and (max-width: 384px) {
  .section-container {
    max-width: 100%; /* Largura máxima de 100% para ocupar toda a largura do dispositivo */
    padding: 20px; /* Reduz o espaçamento interno */
  }
}

/* Para smartphones em modo retrato e tablets em modo retrato */
@media screen and (max-width: 414px) {
  .section-container {
    max-width: 100%; /* Largura máxima de 100% para ocupar toda a largura do dispositivo */
    padding: 20px; /* Reduz o espaçamento interno */
  }
}

/* Media Queries para seção */
@media (max-width: 430px) {
  .section-container {
      grid-template-columns: 1fr;
      max-width: 100%;
      padding: 20px;
  }
}

/* Para smartphones em modo retrato e tablets em modo retrato */
@media screen and (max-width: 393px) {
  .section-container {
    max-width: 100%; /* Largura máxima de 100% para ocupar toda a largura do dispositivo */
    padding: 20px; /* Reduz o espaçamento interno */
  }
}

/* Para iPads Pro e dispositivos maiores */
@media screen and (min-width: 768px) {
  .section-container {
    max-width: 1200px; /* Aumenta a largura máxima para dispositivos maiores */
    padding: 50px; /* Restaura o espaçamento interno padrão */
  }
}

/* Para iPads Pro e dispositivos maiores */
@media screen and (max-width: 1025px) {
  .section-container {
    max-width: 1200px; /* Aumenta a largura máxima para dispositivos maiores */
    padding: 60px; /* Restaura o espaçamento interno padrão */
  }
}

.content {
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Alinha o conteúdo no topo */
    align-items: flex-start;
    margin-bottom: .5rem;
}

.subtitle {
    letter-spacing: 2px;
    color: var(--text-light);
    font-weight: 600;
    margin-bottom: .5rem;
}

.title {
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 3rem;
    color: var(--text-dark);
    margin-bottom: 5rem;
}

.title span {
    font-weight: 600;
}

/* Para smartphones em modo retrato e tablets em modo retrato */
@media screen and (max-width: 390px) {
  .title  {
    font-size: 1.7rem; /* Reduz o tamanho da fonte para dispositivos menores */
    margin-bottom: 15px; /* Reduz o espaçamento abaixo do título */
  }
}

/* Para iPads Pro e dispositivos maiores */
@media screen and (max-width: 1025px) {
  .title  {
    font-size: 3rem; /* Aumenta o tamanho da fonte para dispositivos maiores */
    margin-bottom: 25px; /* Aumenta o espaçamento abaixo do título */
  }
}

/* Para tablets em modo paisagem e iPads */
@media screen and (max-width: 375px) {
  .title  {
    font-size: 1.6rem; /* Ajusta o tamanho da fonte para tablets em modo paisagem */
    margin-bottom: 15px; /* Ajusta o espaçamento abaixo do título */
  }
}

/* Para tablets em modo paisagem e iPads */
@media screen and (max-width: 344px){
  .title  {
    font-size: 1.4rem; /* Ajusta o tamanho da fonte para tablets em modo paisagem */
    margin-bottom: 15px; /* Ajusta o espaçamento abaixo do título */
  }
}

/* Para tablets em modo paisagem e iPads */
@media screen and (max-width: 344px){
  .text  {
    font-size: 1rem; /* Ajusta o tamanho da fonte para tablets em modo paisagem */
    margin-bottom: 15px; /* Ajusta o espaçamento abaixo do título */
  }
}

.description {
    line-height: 1.5rem;
    color: var(--text-light);
    margin-bottom: 2rem;
    max-width: 480px;
}

.image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -3rem; /* Ajusta o posicionamento vertical da imagem */
}

.image img {
    max-width: 100%;
    height: auto;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}

.image-container {
    position: relative; /* Permite posicionar as imagens */
    display: inline-block; /* Mantém as imagens como elementos de bloco */
}

.image-container img {
    display: block; /* Garante que as imagens sejam tratadas como elementos de bloco */
}

.image-container img:first-child {
    margin-right: 10px; /* Espaçamento à direita apenas para a primeira imagem */
}

.image-container img:last-child {
    position: absolute; /* Posiciona a segunda imagem de forma absoluta */
    top: 50%; /* Ajusta a posição verticalmente */
    transform: translate(-50%, -50%); /* Move a imagem de volta 50% da sua largura e altura */
    left: 50%; /* Ajusta a posição horizontalmente */
}

.services {
  padding: 6rem 0;
}

.services .container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.services h2 {
  margin-bottom: 6rem;
  font-weight: 400; /* Altere o peso da fonte para negrito */
}

.services .service {
  display: inline-block;
  vertical-align: top;
  width: calc(33.33% - 20px); /* Ajuste conforme necessário */
  margin: 10px 10px;
  padding: 20px;
  background-color: #222325;
  border-radius: 7.5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: left;
}

.services .service h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
  font-weight: 200; /* Altere o peso da fonte para negrito */
}

.services .service p {
  font-size: 1rem;
  color: #666;
  font-weight: 400; /* Altere o peso da fonte para negrito */
}

/* Estilo para dispositivos (tablet e smartphone) */
@media screen and (max-width: 384px) {
  .services .service {
    width: 100%; /* Defina a largura como 100% */
    margin: 10px auto; /* Centralize os serviços */
    display: block; /* Altere a exibição para bloco */
  }
}

/* Estilo para dispositivos (tablet e smartphone) */
@media screen and (max-width: 393px) {
  .services .service {
    width: 100%; /* Defina a largura como 100% */
    margin: 10px auto; /* Centralize os serviços */
    display: block; /* Altere a exibição para bloco */
  }
}

/* Estilo para dispositivos (tablet e smartphone) */
@media screen and (max-width: 414px) {
  .services .service {
    width: 100%; /* Defina a largura como 100% */
    margin: 10px auto; /* Centralize os serviços */
    display: block; /* Altere a exibição para bloco */
  }
}

/* Estilo para dispositivos (tablet e smartphone) */
@media screen and (max-width: 430px) {
  .services .service {
    width: 100%; /* Defina a largura como 100% */
    margin: 10px auto; /* Centralize os serviços */
    display: block; /* Altere a exibição para bloco */
  }
}

/* Estilos para o contêiner do vídeo */
.video-container {
  padding: 30px; /* Preenchimento interno para separar dos elementos internos */
  position: relative;
  width: 100%;
  max-width: 1000px; /* Defina um valor máximo para o contêiner do vídeo, ajuste conforme necessário */
  margin: 0 auto;
  text-align: center;
}

/* Estilos para o vídeo dentro do contêiner */
.video-container video {
  width: 100%; /* Ocupa toda a largura do contêiner pai */
  height: auto; /* Altura automática para manter a proporção original do vídeo */
  max-width: 1000px; /* Largura máxima do vídeo */
  display: block; /* Remove margens indesejadas em alguns navegadores */
}

/* Estilos para os detalhes do vídeo (título, descrição, tipo) */
.video-details {
  position: absolute;
  bottom: 20px; /* Posição a partir do fundo do vídeo */
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7); /* Fundo semi-transparente para legibilidade */
  padding: 10px;
  color: #fff; /* Cor do texto */
  transition: opacity 0.3s ease-in-out; /* Transição de opacidade */
  opacity: 0; /* Inicia oculto */
}

/* Mostra os detalhes do vídeo ao passar o mouse sobre o contêiner */
.video-container:hover .video-details {
  opacity: 1;
}

/* Estilos para o título do vídeo */
.video-title {
  padding: 30px; /* Preenchimento interno para separar dos elementos internos */
  font-size: 1.5rem;
  font-weight: bold;
}

/* Estilos para a descrição do vídeo */
.video-tagline {
  font-size: 1rem;
  margin-top: 5px;
}

/* Estilos para o tipo do vídeo */
.video-type {
  font-size: 0.8rem;
  margin-top: 5px;
}


.project {
  position: relative;
  margin-bottom: 2rem;
  overflow: hidden;
  display: inline-block;
}

.project img {
  width: 100%;
  height: auto;
  transition: filter 0.3s;
  margin-bottom: 0.1rem; /* Adicionando margem inferior para separar do footer */
}

.project:hover img {
  filter: brightness(25%);
}

.project-title {
  position: absolute;
  top: 10px;
  left: 10px;
  color: white;
  padding: 10px;
  font-size: 3rem;
  opacity: 0;
  transition: opacity 0.3s;
}


.project-tagline {
  position: absolute;
  top: 60px;
  left: 10px;
  color: white;
  padding: 10px;
  font-size: 1.5rem;
  opacity: 0;
  transition: opacity 0.3s;
  margin-top: 25px
}

.project-type {
  position: absolute;
  top: 10px;
  right: 10px;
  color: white;
  padding: 10px;
  font-size: 1rem;
  opacity: 0;
  transition: opacity 0.3s;
}

.project:hover .project-title,
.project:hover .project-tagline,
.project:hover .project-type {
  opacity: 1;
}

.project-title-2 {
  font-size: 2rem;
  margin-bottom: 0.5rem; /* Espaçamento entre o título e o texto */
  color: white;
  text-align: left; /* Alinha o título à esquerda */
}

.project-text-2 {
  font-size: 1.2rem;
  color: #4d4d4d;
  max-width: 600px; /* Define a largura máxima do texto */
  margin: 2rem; /* Adiciona margem em todos os lados */
  padding: 10px; /* Adiciona um pouco de padding para espaço interno */
  line-height: 1.5; /* Ajusta a altura da linha para melhor legibilidade */
  text-align: justify; /* Justifica o texto para melhor aparência */
  text-align: left; /* Alinha o texto à esquerda */
}

.project-title-2, .project-text-2 {
  margin-bottom: 3rem; /* Espaçamento entre os elementos do título e texto */
}

/* Media query para smartphones (largura máxima de 768px) */
@media screen and (max-width: 375px) {
  .project-title-2 {
    font-size: 1.3rem; /* Tamanho de fonte menor para smartphones */
  }
}

/* Media query para smartphones */
@media screen and (max-width: 375px) {
  .project-text-2 {
    font-size: 0.9rem; /* Tamanho de fonte menor para smartphones */
    margin-top: 0rem;
  }
}

/* Media query para smartphones (largura máxima de 768px) */
@media screen and (max-width: 384px) {
  .project-title-2 {
    font-size: 1.3rem; /* Tamanho de fonte menor para smartphones */
  }
}

/* Media query para smartphones */
@media screen and (max-width: 384px) {
  .project-text-2 {
    font-size: 0.9rem; /* Tamanho de fonte menor para smartphones */
    margin-top: 0rem;
  }
}

/* Media query para smartphones (largura máxima de 768px) */
@media screen and (max-width: 393px) {
  .project-title-2 {
    font-size: 1.3rem; /* Tamanho de fonte menor para smartphones */
  }
}

/* Media query para smartphones */
@media screen and (max-width: 393px) {
  .project-text-2 {
    font-size: 0.9rem; /* Tamanho de fonte menor para smartphones */
    margin-top: 0rem;
  }
}

/* Media query para smartphones (largura máxima de 768px) */
@media screen and (max-width: 414px) {
  .project-title-2 {
    font-size: 1.3rem; /* Tamanho de fonte menor para smartphones */
  }
}

/* Media query para smartphones */
@media screen and (max-width: 414px) {
  .project-text-2 {
    font-size: 0.9rem; /* Tamanho de fonte menor para smartphones */
    margin-top: 0rem;
  }
}

/* Media query para smartphones (largura máxima de 768px) */
@media screen and (max-width: 430px) {
  .project-title-2 {
    font-size: 1.3rem; /* Tamanho de fonte menor para smartphones */
  }
}

/* Media query para smartphones */
@media screen and (max-width: 430px) {
  .project-text-2 {
    font-size: 0.9rem; /* Tamanho de fonte menor para smartphones */
    margin-top: 0rem;
  }
}

/* Media query para smartphones (largura máxima de 768px) */
@media screen and (max-width: 1024px) {
  .project-title-2 {
    font-size: 1.3rem; /* Tamanho de fonte menor para smartphones */
  }
}

/* Media query para smartphones */
@media screen and (max-width: 1024px) {
  .project-text-2 {
    font-size: 0.9rem; /* Tamanho de fonte menor para smartphones */
    margin-top: 0rem;
  }
}

/* Media query para telas menores */
@media screen and (max-width: 430px) {
  .project {
      flex-direction: column;
  }

  .project img {
      width: 100%;
      margin-bottom: 1rem;
  }

  .project-title {
      font-size: 1.3rem;
      padding: 0.5rem;
  }

  .project-tagline {
      font-size: 0.7rem;
      padding: 0.5rem;
      margin-top: 0rem;
  }

  .project-type {
      font-size: 0.5rem;
      padding: 0.5rem;
  }
}

/* ======================================== Footer ======================================== */

footer {
  position: relative;
  background-color: black;
  padding: 2rem 7rem; /* Adicionando padding nas laterais */
  text-align: center;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.footer-line {
  position: absolute;
  width: 100%; /* Define a largura como 100% da largura do elemento pai */
  max-width: 651px; /* Define a largura máxima */
  height: 27px;
  left: 50%; /* Centralizando horizontalmente */
  transform: translateX(-50%); /* Centraliza horizontalmente */
  bottom: -27px; /* Posicionando abaixo do rodapé */
  background: linear-gradient(to right, #EF3D0B, #5356ff); /* Gradiente de cores */
}

/* Estilo para smartphones */
@media screen and (max-width: 600px) {
  footer {
    padding: 0.5rem 2rem; /* Ajusta o padding para telas menores */
  }
  
  .footer-line {
    max-width: 90%; /* Ajusta a largura para 80% do contêiner */
    height: 15px; /* Ajusta a altura */
    bottom: -15px; /* Ajusta a posição inferior */
  }
}

/* Estilo para tablets */
@media screen and (min-width: 601px) and (med-width: 820px) and (max-width: 1024px) {
  footer {
    padding: 1rem 3rem; /* Ajusta o padding para tamanhos intermediários */
  }
  
  .footer-line {
    max-width: 90%; /* Ajusta a largura para 90% do contêiner */
    height: 20px; /* Ajusta a altura */
    bottom: -20px; /* Ajusta a posição inferior */
  }
}

/* Estilo para telas maiores que 1024px */
@media screen and (min-width: 540px) and (med-width: 912px) and (max-width: 1280px) {
  footer {
    padding: 1rem 5rem; /* Ajusta o padding para tamanhos maiores */
  }
  
  .footer-line {
    max-width: 651px; /* Mantém a largura máxima */
    height: 27px; /* Mantém a altura */
    bottom: -27px; /* Mantém a posição inferior */
  }
}

/* ======================================== Contact info ======================================== */

.contact-info p {
  text-decoration: none;
  color: #fff;
  margin: 0;
  font-size: 1rem;
}

/* Media query para IPhone SE */
@media screen and (min-width: 300px) {
  /* Ajuste do tamanho da fonte para os links de redes sociais */
  .contact-info p {
    font-size: 15px; /* Reduz o tamanho da fonte para smartphones */
    line-height: 2; /* Altura da linha para melhor legibilidade */
  }
}

/* Media query para IPhone SE */
@media screen and (width: 393px) {
  /* Ajuste do tamanho da fonte para os links de redes sociais */
  .contact-info p {
    font-size: 10px; /* Reduz o tamanho da fonte para smartphones */
  }
}

/* ======================================== Social links ======================================== */

.social-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.social-links li {
  display: inline;
  margin-right: 11px;
}

/* Último elemento não terá margem à direita */
.social-links li:last-child {
  margin-right: 0;
}

.social-links a {
  color: #4D4D4D;
  text-decoration: none;
  font-size: 1rem;
}

.social-links a:hover {
  color: #ddd;
}

/* Media query para IPhone SE */
@media screen and (min-width: 300px) {
  /* Ajuste do tamanho da fonte para os links de redes sociais */
  .social-links a {
    font-size: 15px; /* Reduz o tamanho da fonte para smartphones */
  }
}

/* Media query*/
@media screen and (min-width: 321px) {
  /* Ajuste do tamanho da fonte para os links de redes sociais */
  .social-links a {
    font-size: 15px; /* Reduz o tamanho da fonte para smartphones */
  }
}

/* Media query*/
@media screen and (max-width: 437px) {
  /* Ajuste do tamanho da fonte para os links de redes sociais */
  .social-links a {
    font-size: 11px; /* Reduz o tamanho da fonte para smartphones */
  }
}

/* Media query para IPhone SE */
@media screen and (width: 375px) {
  /* Ajuste do tamanho da fonte para os links de redes sociais */
  .social-links a {
    font-size: 8.8px; /* Reduz o tamanho da fonte para smartphones */
  }
}

/* Media query para IPhone 15 */
@media screen and (width: 393px) {
  /* Ajuste do tamanho da fonte para os links de redes sociais */
  .social-links a {
    font-size: 9.5px; /* Reduz o tamanho da fonte para smartphones */
  }
}

/* Media query para IPhone XR */
@media screen and (width: 414px) {
  /* Ajuste do tamanho da fonte para os links de redes sociais */
  .social-links a {
    font-size: 10.3px; /* Reduz o tamanho da fonte para smartphones */
  }
}

/* Media query para IPhone 12 Pro */
@media screen and (width: 390px) {
  /* Ajuste do tamanho da fonte para os links de redes sociais */
  .social-links a {
    font-size: 9.4px; /* Reduz o tamanho da fonte para smartphones */
  }
}

/* Media query para IPhone 14 Pro Max */
@media screen and (width: 430px) {
  /* Ajuste do tamanho da fonte para os links de redes sociais */
  .social-links a {
    font-size: 10.9px; /* Reduz o tamanho da fonte para smartphones */
  }
}

@media screen and (width: 425px) {
  /* Ajuste do tamanho da fonte para os links de redes sociais */
  .social-links a {
    font-size: 10.7px; /* Reduz o tamanho da fonte para smartphones */
  }
}

/* Media query para Galaxy S20 Ultra */
@media screen and (width: 412px) {
  /* Ajuste do tamanho da fonte para os links de redes sociais */
  .social-links a {
    font-size: 10.2px; /* Reduz o tamanho da fonte para smartphones */
  }
}

/* Media query para Iphone 13 */
@media screen and (width: 460px) {
  /* Ajuste do tamanho da fonte para os links de redes sociais */
  .social-links a {
    font-size: 12px; /* Reduz o tamanho da fonte para smartphones */
  }
}

@media screen and (width: 384px) {
  .social-links a {
    font-size: 9.4px; /* Novo tamanho de fonte para telas com largura mínima de 384px */
  }
}

/* Media query para Surface Duo */
@media screen and (width: 540px) {
  /* Ajuste do tamanho da fonte para os links de redes sociais */
  .social-links a {
    font-size: 15px; /* Reduz o tamanho da fonte para smartphones */
  }
}

/* Media query para Galaxy Z Fold 5 */
@media screen and (width: 344px) {
  /* Ajuste do tamanho da fonte para os links de redes sociais */
  .social-links a {
    font-size: 7.6px; /* Reduz o tamanho da fonte para smartphones */
  }
}

/* Media query para Asus Zenbook Fold */
@media screen and (min-width: 853px) {
  /* Ajuste do tamanho da fonte para os links de redes sociais */
  .social-links a {
    font-size: 20px; /* Reduz o tamanho da fonte para smartphones */
  }
}

/* Media query para Asus Zenbook Fold */
@media screen and (max-width: 320px) {
  /* Ajuste do tamanho da fonte para os links de redes sociais */
  .social-links a {
    font-size: 6.7px; /* Reduz o tamanho da fonte para smartphones */
  }
}

.container-1 {
  margin-bottom: 6rem;
  padding: 6rem;
}

.container-2 {
  width: 90%;
  max-width: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
  background-color: #111;
  border-radius: 10px;
}

.container-4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 6rem; /* Adicione margem inferior */
}

.slide-project {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0; /* Remover margens */
  padding: 0; /* Remover preenchimento */
}

.slide-project img {
  width: 100%;
  max-width: 1200px; /* Defina o tamanho máximo desejado */
  height: auto; /* Mantenha a proporção */
  transition: filter 0.3s;
  margin: 0; /* Remover margens */
}

.group-container {
  position: relative; /* Permite posicionar o contêiner do grupo */
  display: inline-block; /* Mantém o grupo como um elemento de bloco */
  text-align: center; /* Alinha horizontalmente o grupo no centro */
  margin-bottom: 50px; /* Ajusta a margem superior da seção */
}

.group {
  position: relative; /* Permite posicionar as imagens dentro deste grupo */
  display: inline-block; /* Mantém as imagens como elementos de bloco */
  text-align: center; /* Alinha as imagens horizontalmente no centro */
}

.img-container {
  display: flex; /* Utiliza flexbox para alinhar itens */
  justify-content: center; /* Alinha os itens horizontalmente no centro */
  align-items: center; /* Alinha os itens verticalmente no centro */
}

.img-1, .img-3 {
  width: 200px; /* Define a largura das imagens */
  height: auto; /* Mantém a proporção das imagens */
  display: block; /* Garante que as imagens sejam tratadas como elementos de bloco */
}

.img-1 {
  height: auto; /* Mantém a proporção da img-1 */
  display: block; /* Exibe a img-1 como bloco */
  position: relative; /* Permite o posicionamento relativo */
  animation: spin 20s linear infinite; /* Aplica a animação spin à imagem img-1 */
}

.img-3 {
  height: auto; /* Mantém a proporção da img-3 */
  display: block; /* Exibe a img-3 como bloco */
  position: absolute; /* Permite o posicionamento absoluto */
  top: 50%; /* Alinha a img-3 ao centro verticalmente */
  left: 50%; /* Alinha a img-3 ao centro horizontalmente */
  transform: translate(-50%, -50%); /* Move a img-3 de volta em 50% da sua largura e altura */
}

@keyframes spin {
  from {
      transform: rotate(0deg); /* Comece a rotação a partir de 0 graus */
  }
  to {
      transform: rotate(360deg); /* Termine a rotação em 360 graus */
  }
}

/* Estilo para a galeria de imagens */
.gallery {
  padding: 60px 0; /* Espaçamento interno da galeria */
}

.gallery img {
  width: 100%; /* Imagens ocupam toda a largura da coluna */
  margin: 1px auto 50px; /* Espaçamento inferior entre as imagens */
  justify-content: center;
  display: grid;
}

.img-gallery {
  width: 80%;
  margin: 100px auto 50px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

input, textarea {
  width: 100%;
  padding: 10px;
  background-color: #444;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
}

input:focus, textarea:focus {
  outline: none;
  background-color: #555;
}

button {
  padding: 10px;
  border: 2px;
  background-color: #161616;
  border-radius: 5px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
button:hover, button:focus {
  background: linear-gradient(to right, #EF3D0B, #5356ff); /* Gradiente de cores */
  color: #fff;
}
button:focus {
  outline: none;
}