/* Reset */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
	
	html {
	  scroll-behavior: smooth;
	}

    body {
      font-family: 'Space Grotesk', sans-serif;
      color: #111;
      background-color: #fff;
    }

    /* Barra lateral */
    .sidebar {
      width: 20%;
      /background-color: #f9f9f9;/
      color: #fff;
      height: 100vh;
      padding: 20px;
      position: fixed;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .sidebar h2 {
      margin-bottom: 20px;
      font-size: 24px;
    }

	.menu-container {
	  flex: 1; /* Expande para ocupar o espaço restante */
	  display: flex;
	  align-items: center;
	}

	.menu {
	  list-style: none;
	  display: flex;
	  gap: 30px; /* Espaçamento entre os itens */
	  margin: 0;
	}

	/* Esconde o botão e ajusta o menu no desktop */
	.menu-toggle {
	  display: none;
	}

	.menu li {
	  position: relative;
	}

    .menu a {
      color: #000;
      text-decoration: none;
      font-size: 16px;
	  position: relative;
	  display: inline-block;
      transition: color 0.3s ease;
    }

	.menu a::after {
	  content: "";
	  position: absolute;
	  bottom: -5px; /* Coloca a linha 5px abaixo do texto */
	  left: 0;
	  width: 100%;
	  height: 1px;
	  background-color: #000; /* Cor da linha */
	  transform: scaleX(0); /* Inicialmente invisível (linhas achatadas) */
	  transform-origin: left; /* Começa a animação da esquerda */
	  transition: transform 0.3s ease; /* Transição suave para a linha */
	}

	/* Efeito ao passar o mouse */
	.menu a:hover::after {
	  transform: scaleX(1); /* Expande a linha de 0 a 100% (esquerda para direita) */
	}

	/* Efeito ao remover o mouse */
	.menu a:not(:hover)::after {
	  transform: scaleX(0); /* Retorna a linha de 100% para 0% (esquerda para direita) */
	}

    .menu a:hover {
      color: #000;
    }

    /* Conteúdo da galeria */
    .gallery-container {
      width: 100%;
      padding: 0 10%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 50px;
    }

    .gallery-item {
      width: 100%;
      position: relative;
      overflow: hidden;
    }

	.project-thumbnail {
		width: 100%;
		aspect-ratio: 1 / 1;
		background-color: #f9f9f9;
		position: relative;
		cursor: pointer;
		overflow: hidden; /* Corta a imagem que exceder o limite */
		clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); /* Chanfrado no canto superior direito */
	}

    .gallery-item a {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      color: #333;
      font-size: 18px;
      font-weight: bold;
    }

    .project-thumbnail:hover {
      background-color: #bbb;
    }

    /* Responsividade */
    @media (max-width: 768px) {
      .gallery-container {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 480px) {
      .gallery-container {
        grid-template-columns: 1fr;
      }
    }
	
	/* Estilo para o contêiner da informação do projeto */
.project-info {
  display: flex;
  align-items: center;
  margin-top: 33px;
  margin-bottom: 30px;
}

/* Estilo para o círculo */
.circle {
    width: 36px;
	height: 36px;
    border-radius: 50%;
    margin-right: 18px;
    margin-left: 8px;
    aspect-ratio: 1 / 1;
}

.circle img {
    width: 100%;
    height: 100%;
}

/* Estilo para o nome do projeto */
.project-name {
font-size: 15px;
font-weight: bold;
margin: 0;
text-transform: uppercase;
}

/* Estilo para o subtítulo */
.project-subtitle {
  font-size: 13px;
  color: #666;
  margin: 0;
}

.project-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Faz a imagem cobrir o quadrado */
  object-position: center; /* Centraliza a imagem */
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s ease; /* Transição suave para o efeito de zoom */
}

/* Efeito de zoom ao passar o mouse */
.project-thumbnail:hover img {
  transform: scale(1.05); /* Aumenta levemente o tamanho da imagem */
}

/* Barra Superior */
.top-bar {
  width: 100%;
  height: 120px;
  background-color: #fff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 80px;
  border-bottom: 1px solid #ededed; /* Borda inferior cinza */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

.top-bar p {
    color: #777;
    font-size: 17px;
    margin: auto;
    margin-left: 15px;
}

/* Logo */
.logo {
  height: 30px;
}

/* Botão "Fale Conosco" */
.contact-button {
    background-color: #fff;
    color: #000;
    border: 1px solid #ededed;
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.contact-button:hover {
    background-color: #ededed;
    border: 1px solid #ededed;
}

/* Conteúdo Principal */
.content {
  text-align: center;
  width: 100%;
  display: block;
  padding: 7% 50px;
  opacity: 0; /* Inicialmente invisível */
  animation: fadeIn 1s ease forwards; /* Animação de surgimento */
  animation-delay: 0.5s; /* Atraso para que aconteça após o carregamento */
}

.main-title {
    font-size: 70px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 25px;
    color: #000;
    line-height: 1.1;
}

.subtext {
  font-size: 20px;
  color: #666;
  margin-bottom: 50px;
}

.parent-container {
  display: flex;
  flex-direction: column; /* Alinha itens verticalmente */
}

.more-project {
    display: grid;
    padding: 40px 0px 0px 0px;
}

.more-project a {
    text-align: center;
}

.gallery-container, .content {
  width: 100%;
}

/* Animação de surgimento */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Animação de elevação */
@keyframes elevateIn {
  from {
    opacity: 0;
    transform: translateY(20px); /* Começa 20px abaixo */
  }
  to {
    opacity: 1;
    transform: translateY(0); /* Termina na posição original */
  }
}

/* Aplicação da animação */
.parent-container {
  opacity: 0; /* Inicialmente invisível */
  animation: elevateIn 1s ease forwards; /* Animação de elevação */
  animation-delay: 1.5s; /* Começa após a animação de .content */
}

/* Seção Sobre Mim */
.about-me {
    width: 80%;
    margin: 5% 10%;
    padding: 5% 5%;
    display: flex;
    align-items: center;
    gap: 20px;
    border-top: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
}

.profile-info {
    width: 40%;
}

.section-title {
    font-size: 50px;
    font-weight: 500;
    position: relative;
    margin-bottom: 30px;
    line-height: 1;
}

.about-text {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

.contact-bar {
    display: flex;
    margin-top: 60px;
}

.network-button {
    aspect-ratio: 1 / 1;
    width: 40px;
    border-radius: 50%;
    background-color: #ededed;
    margin-right: 12px;
	display: flex;
}

.network-button svg {
    width: 15px;
    margin: auto;
}

.profile-circle {
    width: 250px;
    border-radius: 50%;
    background-color: #ededed;
    aspect-ratio: 1 / 1;
    margin: auto;
    overflow: hidden;
}

.profile-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Seção Processo Criativo */
.creative-process {
  width: 70%;
  margin: 0 auto;
  display: flex;
}

.process-title {
	width: 50%;
	height: 200px;
	position: relative;
}

.process-title h2 {
    font-size: 30px;
    font-weight: 500;
    position: relative;
    margin-bottom: 30px;
    line-height: 1;
}

.process-title p {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  padding-right: 150px;
  margin-bottom: 40px;
}

.process-info {
width: 40%;
}

.process-step {
  margin-bottom: 20px;
}

.process-step h3 {
	font-size: 19px;
    margin-bottom: 20px;
    font-weight: 500;
    display: flex;
	line-height: 1.6;
}

.process-step p {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}

.process-step h3 > p {
    font-size: 19px;
    font-weight: 200;
    margin-right: 20px;
}

hr {
  border: none;
  border-top: 1px solid #ededed;
  margin: 20px 0;
}

/* Seção Solicitar Orçamento */
.quote-request {
    width: 80%;
    margin: 5% auto;
    padding: 4% 10%;
    background-color: #111;
    text-align: center;
    clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
}

.quote-request p {
  color: #fff;
  margin-bottom: 35px;
  font-weight: 100;
}

.quote-request h2 {
    font-size: 40px;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 500;
    line-height: 1.1;
}

.quote-request a {
    color: #fff;
}

/* Barra Inferior */
.footer {
	color: #999999;
    text-align: center;
    padding-bottom: 50px;
    margin: 0 50px;
}

.footer p {
  font-size: 14px;
  margin: 0;
}

.fotter-contact-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

.profile-circle {
	position: relative;
}

.profile-status {
	margin: auto;
    display: flex;
    align-items: flex-end;
}

.profile-circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.online-status {
    position: relative;
    bottom: 20px;
    right: 50px;
    width: 25px !important;
    height: 25px !important;
    min-width: 25px; /* Garante que não encolha */
    min-height: 25px; /* Garante que não encolha */
    max-width: 25px; /* Garante que não aumente */
    max-height: 25px; /* Garante que não aumente */
    background-color: rgb(47, 212, 83);
    border: 3px solid #fff;
    border-radius: 50%;
}

.contact-info {
    margin-top: 10px;
    text-align: left;
    font-size: 14px;
    position: relative;
    bottom: 20px;
    left: -10px;
}

.contact-info p {
	margin: 0;
	line-height: 1.5;
}

.contact-info a {
	color: #000;
	text-decoration: none;
	font-weight: 400;
}

.contact-info a:hover {
	text-decoration: underline;
}

section {
    padding: 0; /* Ajuste conforme necessário */
    box-sizing: border-box;
}

.menu-logo {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
}

.menu-logo a {
    color: #000;
    text-decoration: none;
    font-size: 16px;
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;
}

	/* Responsivo */
	
	@media (max-width: 768px) {
  .top-bar {
    flex-direction: column; /* Organiza os itens em coluna */
    height: auto; /* Permite altura dinâmica */
    padding: 20px 20px; /* Reduz o espaçamento */
  }

  .menu-logo {
    justify-content: center;
  }

  .menu {
    flex-direction: column; /* Alinha os itens verticalmente */
  }

  .menu a {
    font-size: 14px; /* Reduz o tamanho da fonte */
  }

  .gallery-container {
    grid-template-columns: 1fr; /* Um item por linha */
    gap: 20px; /* Reduz o espaçamento entre itens */
  }

  .gallery-item {
    margin: 0 auto; /* Centraliza os itens */
  }

  .content {
    padding: 60px 20px;
	margin-top: 85px;
  }


  .subtext {
    font-size: 16px; /* Ajusta o tamanho do subtítulo */
  }

  .contact-button {
    font-size: 14px;
    padding: 8px 16px; /* Reduz o botão */
  }

  .about-me {
    flex-direction: column; /* Muda para uma coluna */
    text-align: center; /* Centraliza o texto */
    padding: 60px 10px; /* Reduz o padding */
  }

.section-title {
    font-size: 35px;
}

.contact-bar {
margin-top: 40px;
justify-content: center;
}

  .profile-info {
    width: 100%; /* Usa largura total */
  }

  .profile-circle {
    margin: 20px auto; /* Centraliza o círculo */
  }

  .quote-request {
    padding: 10% 10%;
	margin: 60px auto;
  }
  
  .quote-request h2 {
    font-size: 30px; /* Reduz o tamanho do título */
  }
  
  .quote-request p {
    font-size: 15px; /* Ajusta o texto */
  }
  
	.creative-process {
		margin: 40px auto;
		display: block;
		width: 80%;
	}
	
	.process-info {
		width: auto;
	}
	
	.process-title {
		width: auto;
		height: auto;
		position: relative;
		margin-bottom: 40px;
	}

  .main-title {
    font-size: 40px; /* Reduz ainda mais o título */
  }

.more-project {
    display: grid;
    padding: 20px 0px;
}

}

@media (max-width: 640px) {

  .main-title {
    font-size: 30px; /* Reduz ainda mais o título */
  }

}

@media (max-width: 480px) {

  .gallery-container {
    gap: 15px; /* Ajusta o espaçamento */
  }

  .quote-request {
    padding: 10% 10%;
	margin: 60px auto;
  }

  .quote-request h2 {
    font-size: 24px; /* Reduz o tamanho do título */
  }

  .quote-request p {
    font-size: 14px; /* Ajusta o texto */
  }

	.process-title h2 {
		font-size: 25px;
	}

	.process-title p {
		font-size: 16px;
		color: #666;
		line-height: 1.6;
		padding-right: inherit;
		margin-bottom: 40px;
	}

}

/* Modo responsivo */
@media (max-width: 940px) {
  .menu {
    display: none; /* Oculta o menu por padrão */
    flex-direction: column; /* Mostra o menu em coluna */
    position: absolute;
    top: 100%; /* Abaixo da barra superior */
    right: 0;
    background-color: #fff;
    width: 100%; /* Ocupa toda a largura */
    z-index: 10;
	gap: 10px; /* Reduz ainda mais o espaçamento */
	padding: 20px;
  }

  .menu.show {
    display: flex; /* Mostra o menu quando a classe 'show' é adicionada */
	border-bottom: 1px solid #ededed;
    border-top: 1px solid #ededed;
  }

  .menu-toggle {
    display: block; /* Mostra o botão no mobile */
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
  }

  .menu-logo {
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .menu-text {
    display: none; /* Oculta o texto ao lado da logo */
  }
  
  .top-bar p {
	display: none;
  }
  
  .logo {
    height: 27px;
    display: block;
  }
}

.menu-toggle {
  display: none;
  font-size: 24px;
  text-decoration: none;
  color: #000;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
    position: fixed;
    right: 24px;
  }

  .mobile-popup {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .mobile-popup.hidden {
    display: none;
  }

  .close-button {
    position: absolute;
    top: 20px;
    right: 24px;
    font-size: 32px;
    text-decoration: none;
    color: #000;
    background: none;
    border: none;
    cursor: pointer;
  }

  .mobile-popup ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .mobile-popup li {
    margin: 20px 0;
  }

  .popup-link {
    font-size: 20px;
    font-weight: 400;
    color: #000;
    text-decoration: none;
    position: relative;
    padding-bottom: 4px;
  }

  .popup-link:hover::after,
  .popup-link.active::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #000;
    left: 0;
    bottom: 0;
  }
}