/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
/*===== VARIABLES CSS =====*/
:root{
  --header-height: 3rem;
  --nav-width: 324px;


  /*===== Font weight =====*/
--font-medium:500;
--font-semi-bold:600;
--font-bold:700;
/*===== Colors =====*/
  --first-color: #cc4B2C;
  --first-color-dark : #662616;
  --first-color-draken: #290f09;
  --text-color : #54423D;
  --first-color-light : #EAE7E6;
  --first-color-lighten : #FFFAFA;


  /*===== Font and typography =====*/
  --body-font:'poppins',sans-serif;
  --h1-font-size:1.5rem;
  --h2-font-size:1.25rem;
  --h3-font-size:1rem;
  --normal-font-size: .938rem;
  --samll-font-size:.813rem;
  --samller-font-size:.75rem;

  /*===== Margenes =====*/
  
  --mb-1:.5rem;
  --mb-2: 1rem;
  --mb-3:1.5rem;
  --mb-4:2rem;
  --mb-5:2.5rem;

  /*===== z index =====*/
  --z-fixed: 100;
}

@media screen and (min-width: 768px){

  :root{
    --h1-font-size:2.5rem;
    --h2-font-size:1.5rem;
    --h3-font-size:1.25rem;
    --normal-font-size: 1rem;
    --samll-font-size:.875rem;
    --samller-font-size:.813rem;
  }
}




/*===== BASE =====*/
*,::before,::after{
  box-sizing:border-box ;
}
html{
  scroll-behavior: smooth;
}
body{
  margin: var(--header-height) 0 0 0;
  font-family: var(--body-font);
  font-size: var(--font-medium);
  background-color: var(--first-color-lighten);
  color: var(--text-color);
  line-height: 1.6;
}
h1, h2, h3,p{
margin: 0;

}

ul{
  margin: 0;
  padding: 0;
  list-style: none;

}

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

}
img{
  max-width: 100%;
  height: auto;
  display: block;
}
.img_home{
  max-width: 100%;
  height: 105%;
  display: block;
}



/*===== CLASS CSS ===== */
.section{
  padding: 4rem 0 2rem;

}
.section-title{
  font-size: var(--h1-font-size);
  color: var(--first-color);
  margin-bottom: var(--mb-3);
  text-align: center;
}

.section-subtitle{
  display: block;
  font-size: var(--samll-font-size);
  color: var(--first-color-draken);
  text-align: center;
  font-weight: var(--body-font);
  margin-bottom: .25rem;
}

/*===== LAYOUT =====*/
.bd-grid{
  /* max-width: 1024px; */
  display: grid;
  grid-template-columns: 100%;
  column-gap: 2rem;
  width: calc(100% - 2rem);
  margin-left: var(--mb-2);
  margin-right: var(--mb-2);
}
.l-header{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
  background-color: var(--first-color-lighten);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 1);

}

/*===== NAV =====*/
.nav{
height: var(--header-height);
display: flex;
justify-content: space-between;

align-items: center;
}
.nav_menu{
  position: fixed;
  top: 0;
  left: -100%;
  width: 90%;
  height: 100vh;
  padding: 3rem;
  display: flex;
  align-items: center;
  background-color: #1b1b1b;
  transition: .5s;
}
.nav_close{
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  color: var(--first-color-dark);
  cursor: pointer;
}
.nav-item{
  margin-bottom: var(--mb-4);
}
.nav_link{
  font-size: 1rem;
  text-transform: uppercase;
  color: var(--first-color-lighten);
  font-weight: var(--font-bold);
  transition: .3s;
}

.nav_link:hover{

  color: var(--text-color);
}
.nav_toggle{
  color: var(--first-color);
  font-size: 1.3rem;
  cursor: pointer;
 
}
/*=== Show menu ===*/
.show{
  left: 0;
}

/*Active menu*/
.active{
  color: var(--text-color);
}

/*===== HOME =====*/

.home_container{
  height:calc(100vh - var(--header-height)) ;
  align-items: center;
 
}
.home_data{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: max-content;
  text-align: center;
}
.home_img{
padding-top: 1.3rem;
padding-left: .8rem;
width: 160px;
height: 160px;
background-color: var(--first-color);
border-radius: 50%;
overflow: hidden;
margin-bottom: var(--mb-2);
}

.home_img img{
  width: 155px;
}

.home_title{
  font-size: var(--h1-font-size);
  color: var(--first-color);
  font-weight: var(--font-semi-bold);


}

.home_profession{
  font-size: var(--samll-font-size);
  color: var(--first-color-dark);
  margin-bottom: var(--mb-5);
} 

.home_social{
  margin-bottom: 5rem;

}


.home_social-link{
  display: inline-flex;
  background-color: var(--first-color);
  color: var(--first-color-lighten);
  font-size: 1.1rem;
  border-radius: 50%;
  padding: .40rem;
  margin: 0 var(--mb-1);
  transition: .3s;
}

.home_social-link:hover{
  background-color: var(--first-color-dark);
}

.home_button{
  width: 100%;
}


/*BUTTONS*/
.button{
  display: inline-block;
  background-color: var(--first-color);
  color: var(--first-color-lighten);
  padding: 1rem 2rem;
  font-weight: var(--font-semi-bold);
  border-radius:.5rem;
  transition: .3s;

}
.button:hover{
background-color: var(--first-color-dark);
}

.button_light{
  background-color: var(--first-color-lighten);
  color: var(--first-color);

}

.button_light:hover{
  background-color: var(--first-color-dark);
  color: #fff;

}





/* ===== ABOUT =====*/

.about_container{
  row-gap: 2rem;

}
.about_data{
  text-align: center;

}
.about_description{
  margin-bottom: var(--mb-4);
  text-align: justify;
  

}
.about_img{
  width: 150px;
  border-radius: .5rem;
  margin: 0 auto;
}


.about_information{
  margin-bottom: var(--mb-4);

}

.about_information-title{
  font-size: var(--h3-font-size);
  color: var(--first-color-dark);
  margin-bottom: var(--mb-2);
}
.about_information-data{
  display: flex;
  align-items: center;
  padding-left: 1.5rem;
  margin-bottom: var(--mb-3);
}
.about_info-icon{
  font-size: 1.5rem;
  color: var(--first-color);
  margin-right: var(--mb-4);
}
.about_info-subtitle{
  display: block;
  font-weight: var(--font-semi-bold);

}
.about_info-subtitle-small{
  font-size:var(--samll-font-size) ;
}


/* ===== SKILLS =====*/

.skill_container{
  row-gap: 2rem;
}


.skill_subtitle{
  font-size: var(--h3-font-size);
  color: var(--first-color-dark);
  margin-bottom: var(--mb-2) ;

}

.skill_data{
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 0 var(--mb-2);
  margin-bottom: var(--mb-4);
}
.Skill-name{
  text-transform: uppercase;
}
.Skill-bar{
  position: absolute;
  bottom: -.75rem;
  height: .25rem;
  background-color: var(--first-color) ;
}
.skill_html{
  width: 80%;
}
.skill_js{
  width: 90%;
}
.skill_react{
  width: 75%;
}
.skill_angular{
  width:60%;
}

.skill_php{
  width: 80%;
}
.skill_node{
  width: 90%;
}
.skill_firebase
{

  width: 70%;
}

.skill_python{
  width: 88%;
}
/* ===== EDUCATION =====*/

.education_container{
  row-gap: 2rem;

}
.education_content{
  display: grid;
  grid-template-columns: 1fr max-content 1fr;

}
.education_year, .education_reac{
  font-size: var(--h3-font-size);
  margin-bottom: .25rem;

}
.education_university, .education_specialty{
  display:block ;
  font-size: var(--samller-font-size) ;
}
.education_year, .education_university{
  text-align: right;
}
.education_time{
  padding: 0 1rem;
  justify-self: center;
}
.education_round{
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: var(--first-color);
  border-radius: 50%;
}
.education_round::after{
  content: '';
  position: absolute;
  transform: translate(-4px, -4px);
  width: 20px;
  height: 20px;
  border:1px solid var(--first-color) ;
  border-radius: 50%;
}
.education_line{
  display: block;
  height: 90%;
  width: 2px;
  background-color: var(--first-color);
  transform: translate(5px, -4px);
  

}

/* ===== SERVICES =====*/
.service-container{
  row-gap: 2rem;
}
.service-content{
  padding: 1.5rem .5rem;
  border: 2px solid var(--first-color-light);
  border-radius: .5rem;
  text-align: center;
}
.service_icon{
  font-size: 2rem;
  padding: .5rem;
  background-color: var(--first-color);
  color: var(--first-color-lighten);
  border-radius: 50%;
  margin: var(--mb-2);

}
.service_title{
  font-size: 1.25rem;
  color: var(--first-color-dark);
  margin-bottom: var(--mb-1);

}
.service-content, .service_icon, .service_title, .service_description{
  transition: 1s;
}
.service-content:hover{
  background-color: var(--first-color);
  
}
.service-content:hover .service_icon{
  background-color: var(--first-color-lighten);
  color: var(--first-color);

}
.service-content:hover .service_title{
  color: var(--first-color-lighten);

}
.service-content:hover .service_description{
  color: var(--first-color-lighten);

}

/* ===== PROJECT IN MIND  =====*/
.project{
 background-color: var(--first-color);
 padding-bottom: 0;
}
.project_container{
  row-gap: 2rem;
}
.project_data{
  text-align: center;
}
.project_title, .project_description{
  color: var(--first-color-lighten);
}
.project_description{
  margin-bottom: var(--mb-4);
}
.project_img{
  width: 220px;
  justify-self: center;
  border-radius: 5px;
}

/* ===== WORKS =====*/
.works_container{
  justify-items: center;
  row-gap: 2rem;
}
.work-img{
  position: relative;
  overflow: hidden;
  border-radius: .5rem;
}
.works-data{
  position: absolute;
 bottom: -100%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(204, 75, 44, .7);
  transition: .3s;
}
.works_link{
  display: inline-flex;
  font-size: 1.5rem;
  background-color: var(--first-color-lighten);
  color: var(--first-color);
  padding: .25rem;
  border-radius: .25rem;
  margin-bottom: var(--mb-2);
}
.works_title{
  font-size: var(--h2-font-size);
  color:var(--first-color-lighten) ;

}
.work-img:hover .works-data{
  bottom: 0;

}

/* ===== CONTACT =====*/
.contat_container{
  row-gap: 3rem;
  
}
.contact-input{
  width: 100%;
  padding: 1rem;
  outline: none;
  border: none;
  background-color: var(--first-color-light);
  font-size:var(--normal-font-size);
  margin-bottom: var(--mb-2);
  border-radius: .5rem;
}
.textarea{
  height:100px ;
}
.contact::placeholder{
  color: var(--first-color-dark);
  font-family: var(--body-font);
  font-weight: var(--font-medium);

}
.contact_button{
  outline: none;
  border: none;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);

}
.contact_info{
  margin-bottom: var(--mb-3);
  
}
.contact_subtitle{
  font-size: var(--h3-font-size);
  color: var(--first-color-dark);
  margin-bottom: var(--mb-1);
}
.contact_text{
  display: block;
  padding-left: 1rem;
}
/* ===== FOOTER =====*/
.footer{
  background-color: var(--first-color-draken);
  color: var(--first-color-lighten);
  text-align: center;
  
}
.footer_title{
  font-size: var(--h1-font-size);
  margin-bottom: var(--mb-2);
}
.footer_description{
  margin-bottom: var(--mb-2);
}
.footer_social{
  margin-bottom: 3rem;
}
.footer-link{
  display: inline-flex;
  background-color: var(--first-color);
  color: var(--first-color-lighten) ;
  font-size: 1.1rem;
  border-radius: 50%;
  padding: .40rem ;
  margin: 0 var(--mb-1);
  transition: .3s;
}
.footer-link:hover{
  background-color: var(--first-color-lighten);
  color: var(--first-color);
}
.footer_copy{
  font-size: var(--samll-font-size);
  color: var(--text-color);
}


/* ===== MEDIA QUERIES=====*/
@media screen and (min-width: 768px){
  .home_button{
    width: initial;
  }
  .nav_menu{
    width: var(--nav-width);
  }
  .about_container, .skill_container, .service-container, .works_container, .contat_container {
    grid-template-columns: repeat(2, 1fr);
    
  }
  .about_data{
    text-align: initial;
  }
  .about_description{
    margin-bottom: var(--mb-5);
  }
  .about_img{
    width: 220px;
  }
  .about_information{
    padding-left: 4rem ;
  }
  .education_time{
    padding: 0 2rem;
  }

  .project{
    background: none ;
  }
  .project_container{
    background-color: var(--first-color);
    grid-template-columns: 2fr 1.2fr;
    padding: 0 2rem;
    border-radius: .5rem;
  }
  .project_data{
    padding: 3rem 0;

  }
  .project_title, .project_data{
    text-align: initial;
  }
  .project_img{
    width: 230px;
    align-self: flex-end;
  }
  .contat_container{
    display: grid;
    column-gap: 1.5rem;

  }
  .contact_info{
    padding-left: 3rem;
  }
  .footer{
    background: none;


  }
  .footer_container{
    background-color: var(--first-color-draken);
    padding: 3rem 0;
    border-radius: .5rem;
  }

}
@media screen and (min-width:1024px){
  body{
    margin: 0;
    padding-left: var(--nav-width);
  }
  .l-header{
    width: 0;
  }
  .nav_toggle, .nav_logo, .nav_close{
    display: none;
  }
  .nav_menu{
    left: 0;
  }
  .home_container{
    height: 100vh;
  }
  .section{
    padding: 3rem 0 2rem; 
  }
  .bd-grid{
    margin-left: auto;
    margin-right: auto;

  }
  .service-container, .works_container{
    grid-template-columns: repeat(3, 1fr);

  }
  
}