/* estilos base */

:root {
  --cor-primaria: #2ecc71;
  --primaria-escura: #27ae60;
  --primaria-clara: #a9dfbf;
  --cor-secundaria: #34495e;
  --cor-texto: #333;
  --texto-claro: #777;
  --cor-bg: #fff;
  --bg-claro: #f9f9f9;
  --bg-escuro: #2c3e50;
  --bg-card: #fff;
  --sombra: 0 5px 15px rgba(0, 0, 0, 0.1);
  --border-radius: 8px;
  --border-radius-tag: 20px;
  --transition: all 0.3s ease;
  --bg-header: rgba(255, 255, 255, 0.92);
  --bg-input: #fff;
  --borda-input: #ddd;
  --texto-h1: 3.5rem;
  --texto-h1-m: 3rem;
  --texto-h1-p: 2.5rem;
  --texto-h2: 2rem;
  --texto-h2-g: 2.5rem;
  --texto-h2-m: 1.5rem;
  --texto-h2-p: 1.3rem;
  --texto-h3-g: 1.8rem;
  --texto-p: 1.1rem;
  --texto-p-m: 1rem;
  --texto-p-p: 0.9rem;
  --texto-btn-m: 0.9rem;
  --texto-btn-p: 0.8rem;
  --texto-hero-card: 0.9rem;
  --texto-hero-card-p: 0.8rem;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
  color: var(--cor-texto);
  background-color: var(--cor-bg);
}

section#sobre {
  padding: 150px 0;
}

section#portfolio {
  padding: 150px 0 80px;
}

section#contato {
  padding: 150px 0;
}

a {
  text-decoration: none;
  color: var(--cor-texto);
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

/* global mq */

@media (max-width: 850px) {
  section#sobre {
    padding: 100px 0;
  }

  section#portfolio {
    padding: 100px 0 80px;
  }

  section#contato {
    padding: 100px 0;
  }
}

.destaque {
  color: var(--cor-primaria);
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* header */

.header {
  width: 100%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 15px 0;
  background: var(--bg-header);
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.container-header {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
}

.header h1 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-left: 5px;
}

.dino-icon {
  font-size: 1.8rem;
}

.menu {
  display: flex;
  gap: 30px;
}

.menu a {
  font-weight: 500;
}

.menu a:hover {
  color: var(--cor-primaria);
}

.menu a:after {
  content: '';
  display: block;
  height: 2px;
  width: 0;
  background-color: var(--cor-primaria);
  transition: var(--transition);
}

.menu a:hover::after {
  width: 100%;
}

/* header mq */

@media (max-width: 800px) {
  .container-header {
    flex-direction: column;
    gap: 10px;
  }
  .header {
    background: #ffffff;
  }
}

/* hero section */

.hero {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

/* hero area esquerda - texto */

.hero-txtarea {
  flex: 2;
}

.hero-txtarea h1 {
  font-size: var(--texto-h1);
}

.hero-txtarea h2 {
  font-size: var(--texto-h2);
  color: var(--texto-claro);
  margin-bottom: 20px;
}

.hero-txtarea p {
  font-size: var(--texto-p);
  max-width: 480px;
  margin-bottom: 30px;
}

.btn-area {
  display: flex;
  gap: 20px;
}

.btn {
  display: inline-block;
  padding: 12px 24px;
  border: 2px solid var(--cor-primaria);
  border-radius: var(--border-radius);
  font-weight: 500;
  transition: var(--transition);
  cursor: pointer;
}

.btn:hover {
  box-shadow: var(--sombra);
  transform: translateY(-3px);
  border: 2px solid var(--primaria-escura);
}

.btn-primario {
  color: #ffffff;
  background-color: var(--cor-primaria);
}

.btn-primario:hover {
  background-color: var(--primaria-escura);
}

.btn-secundario {
  color: var(--cor-primaria);
  background-color: transparent;
}

.btn-secundario:hover {
  background-color: var(--cor-primaria);
  color: #ffffff;
}

/* hero area direita - imagem */

.hero-img {
  flex: 1;
  position: relative;
  padding: 15px;
  background: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  border: 5px solid var(--cor-primaria);
}

.hero-img img {
  border-radius: var(--border-radius);
}

.hero-card {
  display: flex;
  gap: 2px;
  align-items: center;
  position: absolute;
  bottom: 25px;
  right: -43px;
  font-size: var(--texto-hero-card);
  font-weight: 500;
  background-color: #ffffff;
  padding: 5px;
  max-width: 190px;
  box-shadow: var(--sombra);
  border-radius: var(--border-radius);
}

.hero-card:hover {
  cursor: default;
}

/* hero footer */

.hero-footer {
  padding-top: 50px;
}

.hero-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-scroll p {
  font-size: var(--texto-btn-m);
  margin-bottom: 5px;
  color: var(--texto-claro);
}

.fa-chevron-down {
  color: var(--cor-primaria);
}

.hero-scroll {
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

/* hero mq */

@media (max-width: 1050px) {
  .hero-txtarea h1 {
    font-size: var(--texto-h1-m);
  }

  .hero-txtarea h2 {
    font-size: var(--texto-h2-m);
  }

  .hero-txtarea p {
    font-size: var(--texto-p-m);
  }
  .btn {
    padding: 10px 20px;
    font-size: var(--texto-btn-m);
  }
}

@media (max-width: 985px) {
  .hero-txtarea h1 {
    font-size: var(--texto-h1-p);
  }

  .hero-txtarea h2 {
    font-size: var(--texto-h2-p);
  }

  .hero-txtarea p {
    font-size: var(--texto-p-p);
  }

  .btn {
    padding: 8px 18px;
    font-size: var(--texto-btn-p);
  }
}

@media (max-width: 850px) {
  .hero-card {
    font-size: var(--texto-hero-card-p);
    right: -43px;
  }
  .hero-content {
    flex-direction: column-reverse;
    gap: 30px;
  }
  .hero-txtarea {
    text-align: center;
  }
  .hero-card {
    font-size: var(--texto-hero-card-p);
  }
  .hero-img {
    width: 65%;
    margin-top: 140px;
  }
  .btn-area {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding-bottom: 50px;
  }
  .hero-footer {
    display: none;
  }
}

@media (max-width: 500px) {
  .hero-img {
    width: 65%;
    margin-top: 40px;
  }
  .btn-area {
    padding-bottom: 0;
  }
}

/* sobre section */

.sobre {
  background-color: var(--bg-claro);
}

.sobre-header {
  margin-bottom: 50px;
}

.sobre-header h2 {
  text-align: center;
  font-size: var(--texto-h2-g);
}

.sobre-header h2:after {
  content: '';
  display: block;
  width: 50px;
  height: 4px;
  border-radius: var(--border-radius);
  margin: 0 auto;
  background-color: var(--cor-primaria);
}

.sobre-content {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
}

.sobre-txtarea {
  flex: 2;
  max-width: 50%;
}

.btn-sobre {
  margin-bottom: 30px;
}

.fa-download {
  margin-right: 10px;
}

.sobre-img {
  flex: 1;
}

.sobre-img img {
  padding-bottom: 130px;
}

/* about mq */

@media (max-width: 1080px) {
  .sobre-txtarea p {
    font-size: var(--texto-p-m);
  }
}

@media (max-width: 930px) {
  .sobre-txtarea {
    max-width: 100%;
  }
  .sobre-header h2 {
    font-size: var(--texto-h2-m);
  }
  .sobre-img {
    flex: 1;
    /* min-width: 300px; */
  }
  .sobre-content {
    flex-direction: column-reverse;
    gap: 10px;
  }
  .sobre-img {
    flex: 1;
    max-width: 50%;
  }
  .sobre-img img {
    padding-bottom: 30px;
  }
  .sobre-txtarea {
    text-align: center;
  }
}

@media (max-width: 500px) {
  .sobre-txtarea p {
    font-size: var(--texto-p-p);
  }
}

/* skills trail */

.skills-trail {
  margin-inline: auto;
  position: relative;
  height: 42px;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0)
  );
}

.skills-item {
  position: absolute;
  left: 100%;
  width: 42px;
  filter: invert(55%) sepia(25%) saturate(1110%) hue-rotate(93deg)
    brightness(95%) contrast(97%);
  animation: scroll-left 20s linear infinite;
}

/* skills trail keyframe and items config */

@keyframes scroll-left {
  to {
    left: -180px;
  }
}

.item1 {
  animation-delay: calc(20s / 12 * (12 - 1) * -1);
}

.item2 {
  animation-delay: calc(20s / 12 * (12 - 2) * -1);
}

.item3 {
  animation-delay: calc(20s / 12 * (12 - 3) * -1);
}

.item4 {
  animation-delay: calc(20s / 12 * (12 - 4) * -1);
}

.item5 {
  animation-delay: calc(20s / 12 * (12 - 5) * -1);
}

.item6 {
  animation-delay: calc(20s / 12 * (12 - 6) * -1);
}

.item7 {
  animation-delay: calc(20s / 12 * (12 - 7) * -1);
}

.item8 {
  animation-delay: calc(20s / 12 * (12 - 8) * -1);
}

.item9 {
  animation-delay: calc(20s / 12 * (12 - 9) * -1);
}

.item10 {
  animation-delay: calc(20s / 12 * (12 - 10) * -1);
}

.item11 {
  animation-delay: calc(20s / 12 * (12 - 11) * -1);
}

.item12 {
  animation-delay: calc(20s / 12 * (12 - 12) * -1);
}

/* portfolio section */

.portfolio-header {
  margin-bottom: 50px;
}

.portfolio-header h2 {
  text-align: center;
  font-size: var(--texto-h2-g);
}

.portfolio-header h2:after {
  content: '';
  display: block;
  width: 50px;
  height: 4px;
  border-radius: var(--border-radius);
  margin: 0 auto;
  background-color: var(--cor-primaria);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 60px;
}

.card {
  background: var(--bg-card);
  border-radius: var(--border-radius);
  box-shadow: var(--sombra);
  transition: var(--transition);
  overflow: hidden;
  padding: 20px;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.card-img {
  margin-bottom: 5px;
  overflow: hidden;
}

.card-info h3 {
  margin-bottom: 10px;
}

.card-info .p-descritivo {
  color: var(--texto-claro);
  margin-bottom: 5px;
}

.card-info .p-explicativo {
  font-size: var(--texto-btn-p);
  margin-bottom: 15px;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.card-tags span {
  font-size: var(--texto-btn-p);
  background: var(--primaria-clara);
  color: var(--cor-bg);
  padding: 5px 10px;
  border-radius: var(--border-radius-tag);
}

.btn.small {
  padding: 8px 20px;
  font-size: var(--texto-btn-m);
}

/* contato section */

.contato {
  background-color: var(--cor-bg);
}

.contato-header {
  margin-bottom: 50px;
}

.contato-header h2 {
  text-align: center;
  font-size: var(--texto-h2-g);
}

.contato-header h2:after {
  content: '';
  display: block;
  width: 50px;
  height: 4px;
  border-radius: var(--border-radius);
  margin: 0 auto;
  background-color: var(--cor-primaria);
}

.contato-info {
  display: flex;
  gap: 50px;
}

.contato-texto {
  flex: 1;
}

.contato-form {
  flex: 1;
}

.contato-texto h3 {
  font-size: var(--texto-h3-g);
  margin-bottom: 20px;
}

.contato-texto > p {
  margin-bottom: 30px;
}

.contato-detalhes {
  margin-bottom: 30px;
}

.contato-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.contato-item p {
  display: flex;
  align-items: center;
}

.contato-item i {
  width: 40px;
  height: 40px;
  background: var(--primaria-clara);
  color: var(--cor-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.contato-social {
  display: flex;
  gap: 15px;
}

.social-icon {
  width: 45px;
  height: 45px;
  background: var(--cor-primaria);
  color: var(--cor-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: var(--transition);
}

.social-icon:hover {
  background: var(--primaria-escura);
  transform: translateY(-5px);
}

/* formulario section */

.form-item {
  margin-bottom: 20px;
}

.form-item label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.form-item input,
.form-item textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--borda-input);
  border-radius: var(--border-radius);
  font-family: 'Poppins', sans-serif;
  transition: var(--transition);
  background-color: var(--bg-input);
  color: var(--cor-texto);
}

.form-item input:focus,
.form-item textarea:focus {
  outline: none;
  border: var(--cor-primaria);
  box-shadow: 0 0 0 3px var(--primaria-clara);
}

/* contato mq */

@media (max-width: 770px) {
  .contato-info {
    flex-direction: column;
    gap: 50px;
  }
}

/* footer */

footer {
  background: var(--bg-escuro);
  color: var(--cor-bg);
  padding: 50px 0 40px;
}

.footer-conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.footer-conteudo > p {
  font-size: var(--texto-btn-m);
}

.footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}