@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root{
    --color-white: #ffffff
}

*{
    margin: 0;
    padding: 0;
  	box-sizing: border-box;
}
html{
	scroll-behavior: smooth;
}
body{
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: #e2e8f0;
    background-color: #0a0a0a;
}
h1, h2, h3, h4, h5, h6 {
	color: var(--color-white);
	font-weight: 600;
	line-height: 1.2;
}
a {
	text-decoration: none;
	color: inherit;
}
img {
	max-width: 100%;
	height: auto;
	display: block;
}
header{
	position: fixed;
  	top: 0;
  	left: 0;
  	width: 100%;
  	background: rgba(10, 10, 10, 0.95);
	z-index: 2;
	backdrop-filter: blur(10px);
  	border-bottom: 1px solid #262626;
}
.nav__container{
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1240px;
	height: 4rem;
	padding: 0 1rem;
	margin: 0 auto;
}
.nav__menu{
    display: flex;
    justify-content: end;
    gap: 20px;
	z-index: 999;
}
a{
    text-decoration: none;
}
.nav__menu a {
    position: relative;
    color: var(--color-white);
    padding-bottom: 3px;
}
.nav__menu a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    background-color: #556b55;
    transition: width 0.3s ease;
}
.nav__menu a:hover,
.nav__menu a.active {
    color: #556b55;
}
.nav__menu a:hover::after,
.nav__menu a.active::after {
    width: 100%;
}
.nav__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: bold;
	font-size: 1.3em;
	color: var(--color-white);
}
.logo-icon{
    background-color: #0f251f;
    padding: 3px;
    border-radius: 10px;
}
section{
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;	
	padding: 0 5rem;
}

#home, #contatos{
  	background: linear-gradient(135deg, #0a0a0a 0%, #0f251f 20%, #141414 100%);
}
#sobre-mim{
  	background-color: #141414;
}
.hero__container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
	max-width: 1200px;
	align-items: center;
}
.section__title {
	font-size: 3rem;
	font-weight: 700;
	margin-bottom: 1rem;
	line-height: 1.1;
}
.hero__subtitle {
	font-size: 1.5rem;
	color: #556b55;
	margin-bottom: 1.5rem;
	font-weight: 500;
}
.hero__description, .sobre__description{
	font-size: 1.125rem;
	color: #cbd5e0;
	margin-bottom: 2rem;
	line-height: 1.6;
	text-align: justify;
}
.text-accent {
  	color: #556b55;
}
.hero__buttons {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	gap: 25px;
}
.hero__buttons  a{
	background: linear-gradient(135deg, #0f251f 0%, #4a5d4a 100%);
	padding: 0.75rem 1.5rem;
	border-radius: 10px;
	font-weight: 500;
}
.hero__buttons a:hover{
  	background: linear-gradient(135deg, #4a5d4a 0%, #4a5d4a 100%);
}
.hero__image, .sobre__image {
	display: flex;
	justify-content: center;
}
.image__blob{
	position: relative;
	width: 18.75rem;
	height: 18.75rem;
	background: linear-gradient(135deg, #1a332e 0%, #0a0a0a 50%, #4a5d4a 100%);
	border-radius: 50%;
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.image__blob:hover {
	transform: scale(1.05);
	transition: transform 0.3s ease;
}
.img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

/* Sobre */
#sobre-mim{
	flex-direction: column;
}
.sobre__container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: 2rem;
	align-items: center;
	max-width: 1200px;
	align-items: center;
	padding: 1rem 2rem;
}

/* Projetos */
.project{
	text-align: center;
}
.projetos__container{
	display: grid;
	gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    padding: 20px;
}
.projeto__content{
	padding: 6rem 0;
	width: 100%;
}
.card {
    border: 1px solid #262626;
	overflow: hidden;
	align-items: center;
	border-radius: 1.5rem;
    transition: transform 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-5px);
	border: 1px solid #1a332e;
}

.card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.card-content {
    padding: 15px;
}

.card-content h2 {
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.card-content p {
    margin-bottom: 8px;
	text-align: justify;
	color: #cbd5e0;
}

.card-content .tech {
    font-size: 0.9rem;
    color: #556b55;
}

.projetos__links {
    display: flex;
    gap: 10px;
}

.projetos__links a {
    display: inline-block;
    padding: 8px 12px;
    background: linear-gradient(135deg, #0f251f 0%, #4a5d4a 100%);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 0.9rem;
    transition: background 0.3s;
}

.projetos__links a:hover {
    background: #4a5d4a;
  	transition: background 0.3s ease;
}

/* Habilidades */
#habilidades{
	display: flex;
	align-items: center;
	flex-direction: column;
}

.habilidades__container{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	justify-items: center;
	width: 100%;
	gap: 2rem;
	padding: 2rem 0;
}
.habilidade__card{
	background-color: #141414;
	border: 1px solid #262626;
	border-radius: 10px;
	padding: 1rem;
	text-align: center;
	width: 20rem;
}
.skills__container{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.title__skills{
	display: flex;
	justify-content: space-between;
	width: 100%;
}
.habilidade__skills{
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	gap: 0.5rem;
	margin-top: 1rem;
	width: 95%;
}
.habilidade__skill{
	background-color: #2d3748;
	padding: 0;
	margin: 0;
	height: 1rem;
	border-radius: 50px;
	font-size: 0.9rem;
	width: 100%;
	text-align: center;
	font-size: 0.5em;
	z-index: 1;
}
.progress{
	display: flex;
	height: 100%;
	background-color: #0f251f;
	overflow: hidden;
	border-radius: 50px 0 0 50px;
}
/* contatos */
#contatos{
	flex-direction: column;
	padding-top: 5rem;
}
.contatos__content{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	padding: 3rem 0;
}
.contact__info-items{
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding: 2rem 0;
}
.contact__info-item{
	display: flex;
	gap: 1rem;
}
.contact__details{
	display: flex;
	flex-direction: column;
}
.contact__icon{
	background-color: #1a332e;
	width: 2.9em;
	height: 2.9em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	font-size: 1.2em;
}
.contact__label{
	font-weight: 600;
	font-size: 1.1em;
}
.contact__value{
	color: #4a5d4a;
	font-size: 1.1em;
	font-weight: 500;
}
.disponibilidade{
	background: linear-gradient(135deg, #141414 0%, #0f251f 100%);
	padding: 2rem;
	border-radius: 25px;
	border: 1px solid #1a332e;
}
.disponibilidade h4{
	font-size: 1.3rem;
	margin-bottom: 1rem;
}
.disponibilidade p{
	font-size: 1.1rem;
	line-height: 1.5;
	color: #cbd5e0;
	text-align: justify;
}
.contact__form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 600px;
}

.form__group {
  display: flex;
  gap: 1.5rem;
}

.form__group .form__field {
  flex: 1;
}

.form__field input,
.form__field textarea {
  background-color: #0a0a0a;
  border: 1px solid #262626;
  border-radius: 10px;
  padding: 1rem;
  font-size: 1.2em;
  color: var(--color-white);
  font-family: inherit;
  outline: none;
  transition: border-color 0.3s ease;
  width: 100%;
}

.form__field textarea {
  resize: vertical;
  height: 100px;
}

.btnContact{
  background: linear-gradient(135deg, #0f251f 0%, #4a5d4a 100%);
  padding: 1rem 1.5rem;
  border-radius: 10px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  font-size: 1.2em;
  font-family: inherit;
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btnContact:hover {
  background: #4a5d4a;
  transition: background 0.3s ease;
}

.footer{
	background: linear-gradient(135deg, #0a0a0a 0%, #0f251f 100%);
	text-align: center;
	padding: 1rem 0;
	border-top: 1px solid #262626;
}
.footer__socials{
	font-size: 1.5em;
}
.footer__socials a {
	display: inline-flex;
	align-items: center;
	margin: 1rem;
	padding: 0.5rem;
	background-color: #4a5d4a;
	border-radius: 50px;

}
.footer__socials a:hover {
	background-color: #556b55;
	transform: scale(1.2);
	transition: transform 0.3s;
}