html, body {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden; 

}


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


body {
  font-family: "Poppins", sans-serif;
  background: #0f1a20;
  color: #fff;
  line-height: 1.6;
  padding-top: 80px;
}



.topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 40px;
  background: #101c249d;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}


.menu {
  position: absolute;
  left: 50%;
  transform: translateX(-52%);
}

.menu ul {
  list-style: none;
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}


.redes-topo {
  margin-left: auto;
  display: flex;
  gap: 15px;
  align-items: center;
}



.menu a {
  position: relative;
  color: #cfd8dc;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

.menu a::after {
  content: '';
  position: absolute;
  left: 0;
  top: 25px;
  height: 2px;
  width: 0;
  background-color: #b23a48;
  transition: width 0.3s;
}

.menu a:hover::after,
.menu a.ativo::after {
  width: 60%;
}

.menu a:hover,
.menu a.ativo {
  color: #b23a48;
}

.redes-topo a {
  color: #cfd8dc;
  margin-left: 15px;
  font-size: 18px;
  transition: 0.3s;
}

/* Seção Início */
.inicio {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 50px;
  min-height: calc(100vh - 80px);
  padding: 0 50px 50px 50px;
  flex-wrap: wrap;
}

.texto h1 {
  font-size: 42px;
  font-weight: bold;
}

.texto h1 span {
  color: #b23a48;
}

.texto h2 {
  font-size: 24px;
  margin: 10px 0 20px;
  font-weight: 400;
}

.texto h2 span {
  color: #b23a48;
}

.texto p {
  max-width: 550px;
  margin-bottom: 30px;
  color: #cfd8dc;
}

/* Botões */
.botoes {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 25px;
}

.btn-primario {
  background: #b23a48;
  color: #fff;
  padding: 12px 28px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

.btn-primario:hover {
  background: #922d3a;
}

.btn-secundario {
  border: 2px solid #b23a48;
  color: #b23a48;
  padding: 10px 26px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

.btn-secundario:hover {
  background: #b23a48;
  color: #fff;
}

/* Redes sociais */
.redes a {
  color: #cfd8dc;
  font-size: 20px;
  margin-right: 15px;
  transition: 0.3s;
}

.github:hover {
  color: #030303;
}

.linkedin:hover {
  color: #0a66c2;
}

.instagram:hover {
  color: #e1306c;
}

/* Imagem */
.imagem {
  position: relative;
}

.imagem img {
  width: 420px;
  max-width: 100%;
  border-radius: 12px;
  object-fit: cover;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.imagem img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(178, 58, 72, 0.3);
}

/* tag */
.tag {
  position: absolute;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  background: #101c24; 
  color: #cfd8dc;
  border: 1px solid #b23a48;
  box-shadow: 0 4px 12px rgba(178, 58, 72, 0.25);
  cursor: pointer;
  animation: flutuar 10s ease-in-out infinite;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}


.tag:hover {
  background: #b23a48;
  color: #fff;
  transform: scale(1.1);
}


.tag::after {
  content: attr(data-info);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #b23a48;
  color: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  box-shadow: 0 4px 15px rgba(178, 58, 72, 0.3);
}


.tag::before {
  content: "";
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #b23a48;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.tag:hover::after,
.tag:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}


@keyframes flutuar {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  20%  { transform: translate(20px, -15px) rotate(3deg) scale(1.05); }
  40%  { transform: translate(-25px, 20px) rotate(-2deg) scale(0.95); }
  60%  { transform: translate(15px, 25px) rotate(2deg) scale(1.08); }
  80%  { transform: translate(-15px, -20px) rotate(-3deg) scale(1); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}


.tag:nth-child(1) { animation-duration: 9s; animation-delay: 0s; }
.tag:nth-child(2) { animation-duration: 11s; animation-delay: 2s; }
.tag:nth-child(3) { animation-duration: 13s; animation-delay: 1s; }
.tag:nth-child(4) { animation-duration: 15s; animation-delay: 3s; }

.design {
  top: 20px;
  right: -70px;
  background: #ff4081;
}

.codigo {
  bottom: 40%;
  left: -90px;
  background: #4caf50;
}

.ideias {
  bottom: 20px;
  right: -70px;
  background: #ffc107;
  color: #000;
}

/* Seção Sobre */

.sobre-inicio {
  padding: 100px 20px;
  background: #0f1a20;
  text-align: center;
  overflow: hidden;
    margin-top: 1px;
}

.sobre-inicio h1 {
  margin-bottom: 5px;
  font-size: 40px;;
  opacity: 0;
  transform: translateY(-30px);
  animation: fadeDown 1s ease forwards;
}

.sobre-inicio p {
  color: #cfd8dc;
  max-width: 750px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1.2s ease forwards;
  animation-delay: 0.3s;
}

.secao-sobre {
  padding: 100px 20px;
  background: #0f1a20;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sobre-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  max-width: 1200px;
  margin-bottom: 60px;
}

.sobre-texto {
  flex: 1;
  min-width: 280px;
}

.sobre-texto .intro {
  display: block;
  font-size: 14px;
  letter-spacing: 2px;
  color: #b23a48;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.sobre-texto h1 {
  font-size: 36px;
  line-height: 1.4;
  margin-bottom: 20px;
}

.sobre-texto h1 span {
  color: #b23a48;
}

.sobre-texto p {
  color: #cfd8dc;
  margin-bottom: 18px;
  max-width: 600px;
  font-size: 16px;
  line-height: 1.8;
}

.botoes {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 20px;
}


/* Cards */
.sobre-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 1400px;
  margin-top: 40px;
}

.sobre-cards .card {
  background: #101c24;
  padding: 20px 25px 40px 25px;
  border-radius: 10px;
  text-align: left;
  position: relative;
  transition: 0.3s;
}

.sobre-cards .card:hover {
  box-shadow: 0 4px 15px #b23a4894;
  background: #182631;
  transform: translateY(-5px);
}

.sobre-cards h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.sobre-cards p {
  color: #cfd8dc;
  font-size: 14px;
}

/* Ícones */
.sobre-cards i.fa-pencil-ruler {
  color: #ffc107;
}

.sobre-cards i.fa-code {
  color: #ff4081;
}

.sobre-cards i.fa-mobile-screen {
  color: #4caf50;
}

.sobre-cards i.fa-laptop-code {
  color: #2725a8;
}

.sobre-cards i.fa-java {
  color: #f89820;
}

.sobre-cards i.fa-php {
  color: #777bb4;
}

.sobre-cards i.fa-git-alt {
  color: #f05032;
}

.sobre-cards i.fa-github {
  color: #fff;
}

/* Seção Habilidades */
.habilidades-inicio {
  padding: 100px 20px;
  background: #0f1a20;
  text-align: center;
}

.habilidades-inicio h1 {
  font-size: 36px;
  margin-bottom: 15px;
}

.habilidades-inicio p {
  color: #cfd8dc;
  max-width: 700px;
  margin: 0 auto 60px;
  font-size: 16px;
}

.habilidades-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 30px 40px;
  max-width: 1200px;
  margin: 0 auto;
  justify-items: stretch;
}

.habilidade-card {
  background: #101c24;
  padding: 25px 25px 40px 25px;
  border-radius: 10px;
  text-align: left;
  transition: 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.habilidade-card:hover {
  box-shadow: 0 4px 15px #b23a4894;
  transform: translateY(-5px);
}

.habilidade-card h3 {
  font-size: 18px;
  margin-bottom: 12px;
}



.habilidade-card p {
  color: #cfd8dc;
  font-size: 14px;
  margin-bottom: 15px;
}

.barra {
  background: #1c2b35;
  border-radius: 8px;
  height: 7px;
  overflow: hidden;
}

.progresso {
  height: 100%;
  background: #b23a48;
  border-radius: 8px;
}


/* Seção Currículo */

.curriculo {
  padding: 100px 20px;
  background: #0f1a20;
  text-align: center;
  overflow: hidden;
}


.curriculo .titulo-secao {
  font-size: 40px;
  margin-bottom: 15px;
  opacity: 0;
  transform: translateY(-30px);
  animation: fadeDown 1s ease forwards;
}

.curriculo .subtitulo {
  color: #cfd8dc;
  max-width: 750px;
  margin: 0 auto 60px;
  font-size: 16px;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1.2s ease forwards;
  animation-delay: 0.3s;
}

.linha-curriculo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}

.coluna h2 {
  font-size: 24px;
  margin-bottom: 20px;
  border-left: 4px solid #b23a48;
  padding-left: 10px;
}

.linha-tempo {
  position: relative;
  padding-left: 25px;
  border-left: 2px solid #1f262c;
}

.linha-tempo .item {
  margin-bottom: 40px;
  position: relative;
}

.linha-tempo .item::before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: #b23a48;
  border-radius: 50%;
  position: absolute;
  left: -31px;
  top: 5px;
}

.linha-tempo h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.linha-tempo .tempo {
  display: inline-block;
  background-color: #1c2b35;
  color: #1eb2a6;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 10px;
}

.linha-tempo p {
  color: #cfd8dc;
  margin-bottom: 8px;
  font-size: 14px;
}

.linha-tempo ul {
  padding-left: 18px;
  color: #cfd8dc;
  font-size: 14px;
  list-style: disc;
  margin-bottom: 10px;
}

.linha-tempo li {
  margin-bottom: 6px;
  line-height: 1.5;

}


/* Skill Card */
.skill-cards {
  display: grid;
  grid-template-columns: repeat(1, );
  gap: 20px;
  max-width: 1200px;
  margin: 40px auto 0;
}

.skill-card {
  background: #101c24;
  padding: 6px;
  border-radius: 10px;
  text-align: left;
  position: relative;
  transition: 0.3s;
}

.skill-card:hover {
  box-shadow: 0 4px 15px #b23a4894;
}

.skill-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}


/* Seção Portfólio */
.portfolio {
  padding: 100px 20px;
  text-align: center;
  background: #0f1a20;
}

.cabecalho-portfolio h1 {
  font-size: 40px;
  margin-bottom: 15px;
}

.cabecalho-portfolio p {
  color: #cfd8dc;
  max-width: 750px;
  margin: 0 auto 40px;
  font-size: 16px;
  line-height: 1.6;
}


.filtros {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 50px;
}

.filtro {
  background: #101c24;
  color: #cfd8dc;
  padding: 8px 18px;
  border-radius: 25px;
  border: none;
  cursor: pointer;
  transition: 0.3s;
  font-weight: 500;
}

.filtro:hover,
.filtro.ativo {
  background: #b23a48;
  color: #fff;
}


.lista-projetos {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 25px;
  max-width: 1200px;
  margin: 0 auto;
}

.projeto {
  background: #101c24;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  text-align: left;
}

.projeto:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(178, 58, 72, 0.3);
}

.projeto img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.link-projeto {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #1c2b35;
  color: #cfd8dc;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  font-size: 18px;
}

.projeto:hover .link-projeto {
  opacity: 1;
  transform: scale(1.1);
}

.link-projeto:hover {
  background: #b23a48;
  color: #fff;
}

.conteudo-projeto {
  padding: 20px;
}

.conteudo-projeto h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.conteudo-projeto p {
  color: #cfd8dc;
  font-size: 14px;
  margin-bottom: 15px;
}

/* Tags */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tags span {
  background: #1c2b35;
  color: #cfd8dc;
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 20px;
  transition: 0.3s;
}

.tags span:hover {
  background: #b23a48;
  color: #fff;
}

.centro-fixo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}



.btn-repositorio {
  border: 2px solid #b23a48;
  color: #b23a48;
  padding: 10px 26px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

.btn-repositorio:hover {
  background: #b23a48;
  color: #fff;
}

/* Seção Contato */
.contato {
  padding: 100px 20px;
  background: #0f1a20;
  text-align: center;
  overflow: hidden;
}


.cabecalho-contato h1 {
  font-size: 40px;
  margin-bottom: 15px;
  opacity: 0;
  transform: translateY(-30px);
  animation: fadeDown 1s ease forwards;
}

.cabecalho-contato p {
  color: #cfd8dc;
  max-width: 750px;
  margin: 0 auto 60px;
  font-size: 16px;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1.2s ease forwards;
  animation-delay: 0.3s;
}


.container-contato {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}


.info-contato,
.form-contato {
  background: #101c24;
  padding: 30px;
  border-radius: 12px;
  text-align: left;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(50px);
  opacity: 0;
  animation: fadeUp 1s ease forwards;
}

.info-contato {
  animation-delay: 0.5s;
}

.form-contato {
  animation-delay: 0.7s;
}


.info-contato h2,
.form-contato h2 {
  font-size: 24px;
  margin-bottom: 15px;
  color: #fff;
  position: relative;
}

.info-contato h2::after,
.form-contato h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 50px;
  height: 3px;
  background: #b23a48;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.info-contato h2:hover::after,
.form-contato h2:hover::after {
  width: 100%;
}


.info-contato p,
.form-contato p {
  color: #cfd8dc;
  margin-bottom: 25px;
  font-size: 15px;
  line-height: 1.6;
}


.item-contato {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.item-contato:hover {
  transform: translateX(10px);
}

.item-contato i {
  font-size: 22px;
  color: #b23a48;
  margin-top: 4px;
  transition: transform 0.3s ease, color 0.3s ease;
}

.item-contato:hover i {
  color: #ff4d6d;
  transform: scale(1.2);
}


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

.linha-form {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.form-contato input,
.form-contato textarea {
  width: 100%;
  padding: 12px 15px;
  border: none;
  border-radius: 8px;
  background: #0f1a20;
  color: #fff;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
}

.form-contato input:focus,
.form-contato textarea:focus {
  border: 1px solid #b23a48;
  box-shadow: 0 0 8px rgba(178, 58, 72, 0.6);
  transform: scale(1.02);
}


.btn-enviar {
  background: #b23a48;
  color: #fff;
  padding: 12px 28px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.4s ease;
  align-self: flex-start;
  position: relative;
  overflow: hidden;
}

.btn-enviar::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: left 0.4s ease;
}

.btn-enviar:hover::after {
  left: 0;
}

.btn-enviar:hover {
  background: #922d3a;
  transform: translateY(-3px);
}

.btn-enviar.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

.btn-enviar.loading::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  transform: translateY(-50%);
}

@keyframes spin {
  to { transform: translateY(-50%) rotate(360deg); }
}


@keyframes fadeDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Rodapé */
#rodape {
  background: #0f1a20;
  padding: 30px 20px;
  text-align: center;
  position: relative;
  margin-top: 50px;
  border-top: 1px solid #1c2b35;
}

#rodape p {
  color: #cfd8dc;
  font-size: 14px;
  margin: 10px 0;
}

#rodape p strong {
  color: #fff;
}

.redes-rodape {
  margin: 15px 0;
}

.redes-rodape a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid #cfd8dc55;
  border-radius: 50%;
  color: #cfd8dc;
  font-size: 18px;
  margin: 0 8px;
  transition: all 0.3s ease;
}


.creditos {
  font-size: 13px;
}

.creditos a {
  color: #1eb2a6;
  text-decoration: none;
}

.creditos a:hover {
  text-decoration: underline;
}

/* Botão subir */
.botao-subir {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #b23a48;
  color: #fff;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-size: 18px;
  transition: all 0.3s ease;
}

.botao-subir:hover {
  background: #ffffff32;
  transform: translateY(-5px);
}

@media (min-width: 1600px) {
  .texto h1 {
    font-size: 64px;
  }

  .texto h2 {
    font-size: 32px;
  }

  .imagem img {
    width: 600px;
  }

  .sobre-container,
  .habilidades-cards,
  .lista-projetos,
  .linha-curriculo,
  .container-contato {
    max-width: 1400px;
  }
}

@media (min-width: 1280px) {
  body {
    font-size: 18px;
  }

  .texto h1 {
    font-size: 52px;
  }

  .texto h2 {
    font-size: 28px;
  }

  .texto p {
    font-size: 18px;
    max-width: 700px;
  }

  .imagem img {
    width: 500px;
  }

  .sobre-cards {
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
  }

  .habilidades-cards {
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
  }

  .lista-projetos {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }

  .linha-curriculo {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
  }

  .container-contato {
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
  }
}


@media (max-width: 1024px) {
  .menu ul {
    gap: 20px;
  }

  .inicio {
    flex-direction: column;
    text-align: center;
    padding: 40px 20px;
  }

  .texto h1 {
    font-size: 32px;
  }

  .texto h2 {
    font-size: 20px;
  }

  .imagem img {
    width: 320px;
  }

  
  .botoes {
    justify-content: center;
  }

  .sobre-cards,
  .habilidades-cards,
  .lista-projetos {
    grid-template-columns: repeat(2, 1fr);
  }

  .linha-curriculo {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .container-contato {
    grid-template-columns: 1fr;
  }

}

.hamburguer {
  display: none;
  font-size: 28px;
  cursor: pointer;
  color: #cfd8dc;
  z-index: 1100;
}


@media (max-width: 991px) {


  .hamburguer {
    display: block;
    font-size: 22px;
    cursor: pointer;
    color: #cfd8dc;
    z-index: 2100; 
  }

  
  .menu {
    position: fixed ;
    top: 0;
    left: -100% ;     
    width: 100%;
    height: 100vh;   
    background: #101c24;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding-top: 0;
    transition: left 0.35s ease;
    z-index: 2000;              
    transform: none;    
  }

  
  .menu.menu-open {
    left: 0;
  }

  .menu ul {
    flex-direction: column;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .menu a {
    font-size: 20px;
  }

  
  .redes-topo {
    position: absolute;
    top: 14px;
    right: 16px;
    margin-left: 0;
    display: flex;
    gap: 12px;
    z-index: 2100;
  }

  
  body.menu-open {
    overflow: hidden;
    touch-action: none;
  }


  .inicio {
    padding: 20px;
    gap: 30px;
  }

  .texto h1 {
    font-size: 28px;
  }

  .texto h2 {
    font-size: 18px;
  }

  .botoes {
    justify-content: center;
  }

  .imagem img {
    width: 250px;
  }

  .sobre-cards,
  .habilidades-cards,
  .lista-projetos {
    grid-template-columns: 1fr;
  }

  .sobre-texto h1 {
    font-size: 28px;
  }

  .habilidades-inicio h1,
  .curriculo .titulo-secao,
  .cabecalho-portfolio h1,
  .cabecalho-contato h1 {
    font-size: 28px;
  }

  .container-contato {
    grid-template-columns: 1fr;
  }

  .info-contato,
  .form-contato {
    padding: 20px;
  }

  #rodape p {
    font-size: 12px;
  }
}


@media (max-width: 480px) {
  body {
    padding-top: 70px;
  }

  .texto h1 {
    font-size: 24px;
  }

  .texto h2 {
    font-size: 16px;
  }

  .imagem img {
    width: 200px;
  }

  .btn-primario,
  .btn-secundario,
  .btn-enviar,
  .btn-repositorio {
    padding: 10px 20px;
    font-size: 14px;
  }

  .tags span {
    font-size: 12px;
    padding: 4px 10px;
  }

  .redes-topo a {
    font-size: 16px;
  }
}