/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;500;600;700&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: hsl(14, 98%, 50%);
  --black-color: hsl(0, 0%, 0%);
  --black-color-light: hsl(0, 0%, 40%);
  --white-color: hsl(0, 0%, 95%);
  --title-color: hsl(0, 0%, 0%);
  --text-color: hsl(0, 0%, 35%);
  --text-color-light: hsl(0, 0%, 64%);
  --body-color: hsl(0, 0%, 87%);
  --container-color: hsl(0, 0%, 83%);

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Bai Jamjuree", sans-serif;
  --biggest-font-size: 2.5rem;
  --h1-font-size: 1.75rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1.125rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;

  /*========== Font weight ==========*/
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;
  --font-bold: 700;

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

/*========== Responsive typography ==========*/
@media screen and (min-width: 1150px) {
  :root {
    --biggest-font-size: 4.5rem;
    --h1-font-size: 3rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
  color: var(--text-color); 
  transition: background-color .4s;
}

h1, h2, h3, h4 {
  color: var(--title-color);
  font-weight: var(--font-bold);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

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

/*=============== THEME ===============*/

.nav-buttons{
  display: flex;
  align-items: center;
  column-gap: 1rem;
}

.change-theme{
  font-size: 1.25rem;
  color:var(--title-color);
  cursor: pointer;
  transition: color .3s;
}

/*========== Variables Dark theme ==========*/

body.dark-theme{
  --first-color: hsl(14, 80%, 50%);
  --black-color: hsl(0, 0%, 18%);
  --black-color-light: hsl(0, 0%, 30%);
  --title-color: hsl(0, 0%, 95%);
  --text-color: hsl(0, 0%, 70%);
  --body-color: hsl(0, 0%, 8%);
  --container-color: hsl(0, 0%, 12%);
}





/*========== 
	Color changes in some parts of 
	the website, in dark theme


==========*/
body.dark-theme .skills h3 {
  color: var(--title-color);
}

body.dark-theme .skill-per{
  color: var(--black-color);
}


.dark-theme .shadow-header{
  box-shadow: 0 1px 12px hsla(0, 0%, 0%, .6);

}

.dark-theme .section-title-1::after,
.dark-theme .section-title-2::after{

  background-color: hsla(14, 70%, 50%, .2);
}

.dark-theme :is(.home-arrow, .home-line, .about-line){
  filter: none;
}

.dark-theme .home-description strong{
  background: linear-gradient(90deg),
              hsla(14, 80%, 50%, 0); 
}

.dark-theme :is(.button-ghost){
  color: var(--white-color);
}

.dark-theme .pro-card:hover{
  background-color: var(--black-color);
}

.dark-theme :is(.contact-email, .contact-input, .contact-label){
  background-color: var(--container-color);
}

.dark-theme .footer{
  background-color: hsl(0, 0%, 4%);
}

.dark-theme::-webkit-scrollbar{
  background-color: hsl(0,0%, 20%);
}

.dark-theme::-webkit-scrollbar-thumb{
  background-color: hsl(0,0%, 30%);
}

.dark-theme::-webkit-scrollbar-thumb:hover{
  background-color: hsl(0,0%, 40%);
}


/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 1120px;
  margin-inline: 1.5rem;
}

.grid {
  display: grid;
  gap: 1.5rem;
}

.section {
  padding-block: 4rem 2rem;
}



section:nth-of-type(4){
  width: 100%;
  height: auto; 

  display: flex;
  flex-direction: column;
  }



.section-title-1, 
.section-title-2 {
  position: relative;
  font-size: var(--h1-font-size);
  width: max-content;
  margin: .75rem auto 2rem;
}

.section-title-1 span, 
.section-title-2 span {
  z-index: 5;
  position: relative;
}

.section-title-1::after, 
.section-title-2::after {
  content: "";
  width: 40px;
  height: 28px;
  background-color: hsla(14, 98%, 50%, .2);
  position: absolute;
  top: -4px;
  right: -8px;
}

.section-title-2::after {
  top: initial;
  bottom: -4px;
}

.geometric-box {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: var(--first-color);
  rotate: -30deg;
}

.geometric-box::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 3px solid var(--black-color);
  left: -5px;
  top: -5px;
}

.main {
  overflow: hidden; /* For animation ScrollReveal */
}

/*=============== HEADER & NAV ===============*/

.header{
  position: fixed;
  width: 100%; 
  top:0; 
  left:0;
  background-color: var(--body-color);
  z-index: var(--z-fixed); 
  transition: box-shadow .4s, background-color .4s; 
}

.nav{
  position: relative;
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-logo{
  display: flex;
  column-gap: .5rem;
  align-items: center; 
  font-weight: var(--font-semi-bold);
  color:var(--title-color)

}

.nav-logo-circle, .nav-toggle{
  width: 32px;
  height: 32px;
  background-color: var(--black-color); 
  color:var(--white-color); 
  display: grid;
  place-items: center;
}

.nav-logo-circle{
  border-radius: 50%;
}

.nav-toggle{
  font-size: 1,25rem;
  cursor: pointer;
}


/* Navigation for mobile devices */



@media screen and (max-width: 1150px){

   .nav-menu{
    position: fixed;
    top: -100%;
    left:0; 
    background-color: hsla(0,0%, 0%, .75);
    width: 100%;
    text-align: center ;
    backdrop-filter: blur(8px) ;
    transition: top.4s; 
    padding-block: 1.8rem 5rem;
  }

}

.nav-title,
.nav-name,
.nav-close{
  color:var(--white-color); 
}

.nav-title{
  display: block;
  font-size: var(--smaller-font-size);
  font-weight: var(--font-semi-bold);
  margin-bottom: 3.5rem;
  cursor: default;
}

.nav-name{
  position: relative;
  width: max-content;
  margin: 0 auto 3rem; 
  font-size: var(--h2-font-size); 
  cursor:default; 

}

.nav-name::after,
.nav-name::before{
  content: '';
  width: 40px;
  height: 1px;
  background-color: var(--text-color);
  position: absolute;
  top:50%; 
  left: -4rem;

}


.nav-name::before {
 left: initial;
 right: -4rem;
}

.nav-list{
  display: flex;
  flex-direction: column;
  row-gap: 2.5rem ;
}

.nav-link{
  position: relative;
  color:var(--text-color-light);
  font-size: var(--h3-font-size);
  font-weight: var(--font-semi-bold);
  transition: color .3s;
}

.nav-link::after{
  content: '';
  width: 0%;
  height: 2px;
  background-color: var(--white-color);
  position: absolute;
  left:0;
  bottom: -.5rem;
  transition: width .3s;
}

.nav-link:hover{
  color:var(--white-color);

}

.nav-link:hover::after{
  width: 25%;
 

}

.nav-close{
  position: absolute;
  font-size: 1.5rem;
  top:1rem; 
  right: 1.5rem;
  cursor: pointer;
}


/* Show menu */
.show-menu{
  top:0
}



/* Add shadow header */

.shadow-header{
  box-shadow: 0 1px 16px hsla(0, 0%, 0%, .12);
}


.skill-wrapper{
  max-width: 48em;
}
/* Active link */

.active_link{
  color: var(--white-color); 
}

.active_link::after{
  width:25%; 
}

/*=============== HOME ===============*/
.home-container{
  padding-top: 2rem;
}

.home-name{
  font-size: var(--biggest-font-size);
  text-align: center;
}

.home-prefil{
  position: relative;
  justify-self: center ;
}

.home-image{
  width: 220px;
}

.home-img{
  position: relative;
  z-index: 10; 

}

.home-shadow{
  width: 100%;
  height: 100%;
  background-color: var(--container-color);
  position: absolute;
  bottom: -.75rem;
  right:-.75rem; 
  border: 4px solid var(--black-color);
  z-index: 5;
  transition: background-color .4s; 
}

.home-arrow,
.home-line{
  position: absolute;
  filter: invert(1);
  width: 50px;
  transition: filter .4s;

}

.home-arrow{
  left: 40%;
  bottom: -4rem;
}

.home-line{
 right: -2rem; 
 bottom: -.5rem;
}

.home-prefil .geometric-box{
  top: 2.5rem;
  left: -.7rem;
  z-index: 10;
}

.home-social{

  position: absolute;
  left: -3rem;
  top: 5rem;
  bottom: 0;
  margin: auto 0;
  display: flex; 
  flex-direction: column;
  
  row-gap: 1rem;

}



.home-social-link{
  background-color: var(--black-color-light);
  color:var(--white-color); 
  font-size: 1.25rem;
  padding:6px; 
  display: grid;
  place-items: center ;
  transition: background-color .3s;
}

.home-social-link:hover{
  background-color: var(--black-color);
}

.home-info{
  margin-top: 4rem;
}
.home-description{
  text-align: left;
  color:var(--title-color);
  margin-bottom: 1.5rem; 
}

.home-description strong{
  background: linear-gradient(90deg, hsla(14,98%,50%, .3),
  hsla(14,98%, 50%, 0));
}

.home-scroll{
  display: block;
  width: max-content;
  margin: 0 auto;
}

.home-scroll-text{
  display: none;
}

.home-scroll-box{
  background-color: var(--black-color);
  color:var(--white-color);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 1rem ;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 4s;
}

.home-scroll-box i{
  animation: scroll-down 3s infinite;
}

/* Animate scroll icon */
@keyframes scroll-down{
  0%{
    transform: translateY(-1rem);
    opacity: 0;

  }

  50%{
    transform: translateY(0);
    opacity: 1;
  }

  100%{
    transform: translateY(.6rem);
  }
}





/*=============== BUTTON ===============*/
.button,
.button-ghost{
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .5rem;
  background-color: #fff;
  
}

.button{
  background-color: var(--black-color);
  padding: 1.1rem 1.5rem;
  color:var(--white-color); 
  font-weight: var(--font-medium);
  transition: background-color .4s;

}

.button i {
  font-size: 1.25rem;
}

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

.button-ghost {
  border: 3px solid var(--black-color);
  color: var(--black-color); 
  padding: .5rem;
  transition: border .5s, color .4s;
}

.button-ghost i {
  font-size: 1.25rem;
  color:#000; 
}

.button-ghost:hover{
  border: 3px solid var(--first-color); 
}

.button-ghost i:hover{
  color:var(--first-color); 
}


/*=============== ABOUT ===============*/
.about{
  background-color: var(--container-color);
  transition: background-color .4s;
}

.about-container{
  row-gap: 0;

}

.about-prefil{
  position: relative;
  justify-self: center;
  margin-block: 2.5rem 4.5rem;
}

.about-image{
  width: 220px;
}

.about-img{
  position: relative;
  border: 4px solid var(--white-color);
  z-index: 1;

}

.about-shadow,
.about-line,
.about-box{
  position: absolute;
}

.about-shadow{
  width: 150px;
  height: 385px;
  background-color: var(--body-color); 
  top: -2.5rem;
  right:-3.5rem; 
  border-bottom: 4px solid var(--first-color);
  transition: background-color .4s;

}

.about-prefil .geometric-box{
  top: 1.5rem;
  right: -2.8rem; 
}

.about-line{
  filter: invert(1);
  right: -1.25rem;
  top: 6rem;
  width: 50px;
  transition: filter .4s;
}

.about-box{
  width: 40px;
  height: 40px;
  background-color: var(--first-color);
  right: -.5rem;
  bottom: 1.5rem;
}

.about-info{
  padding-left: 1.25rem;
}

.about-description{
  position: relative;
  color: var(--title-color); 
  margin-bottom: 1.5rem;
}

.about-description::after{
  content: '';
  width: 20px;
  height: 1px;
  background-color: var(--title-color);
  position: absolute;
  left: -1.75rem ;
  top: .5rem;
}

.about-list{
  list-style: square;
  color:var(--title-color); 
  margin-bottom: 3rem;
}

.about-buttons{
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 1rem ;
}

/*=============== PROJECTS ===============*/

.projects{
  background-color: var(--body-color);
  transition: background-color .4s;
}

.projects-container{
  row-gap: 2rem;
  
}

.pro-card{

  padding: 1rem 1rem 2rem;
  transition: background-color .4s; 
 
  
}

.pro-image{
  position: relative;
  margin-bottom: .75rem;

}



.projects-btn{
  position: absolute;
  right: 1rem;
  bottom: -1.5rem;
  padding: 1rem;
 
  
  
 
}

.projects-content{
  margin-bottom: 1.25rem;
}

.projects-subtitle{
  position: relative;
  display: inline-block;
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
  color:var(--text-color);
  margin-bottom: .75rem;
  padding-left: 1.75rem;
  margin-top: 1.75rem;
  
}

.projects-subtitle::after{
  content: '';
  width: 20px;
  height: 1px;
  background-color: var(--text-color);
  position: absolute;
  top: 50%;
  left: 0;
}

.projects-title{
  font-size: var(--h3-font-size);
  margin-bottom: .75rem;

}

.project-btn{
 display: flex;
 align-items: center;
 column-gap: 1rem;
}

.projects-link{
  display:flex ;
  align-items: center;
  column-gap: .25rem;
  color:var(--text-color); 
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
  transition: color .4s;

}

.projects-link i{
  font-size: 1rem;
  color:var(--title-color);
  transition: color .4s;
}

.projects-link:hover,
.projects-link:hover i{
  color:var(--first-color); 

}

.pro-card:hover{
  background-color: var(--white-color);
}




/*=============== Skills ===============*/
section:nth-of-type(4){
  display: flex;
  align-items: center;
  justify-content: center;
 
  padding-top: 5rem;
  padding-bottom: 5rem;
  

  
 

  
}

.skills.section{

width: 100%;
}

.wrapper{
  width: 90%;
  display: flex;
  align-items: center;
  
}

.skills1{
  width: 100%;
  
  padding:0 20 px; 
 
}

.skills1 h3{
  font-size: 18px;
  font-weight: 700;
  color: var(--black-color);
  margin: 20px 0;
}


.skill-bar{
  height: 14px;
  background-color: black;
  border-radius: 3px;
}

.skill-per{
  height: 14px;
  background-color: var(--black-color-light);
  border-radius: 3px;
  position: relative;
 
}

.skill-per::before{
  content: attr(per); 
  position: absolute;
  padding: 5px 6px;
  background-color: var(--white-color);
  border-radius: 4px;
  font-size: 12px;
  top: -35px;
  right: 0;
  transform: translateX(50%);
  

}



/*Animation skillbar*/ 

@keyframes fillBars{
  from{
    width: 0;
  }

  to{
    width: 100%;
  }
}


/*=============== CONTACT ===============*/

.contact{
  padding-bottom: 0;
}

.contact-container{
  position: relative;
  grid-template-rows: 300px max-content max-content;
  row-gap: 0;
}

.contact-data{
  position: relative; 
  width: 300px;
  height: 300px;
  background-color: var(--container-color);
  padding: 3rem 1.5rem 3.5rem; 
  margin-left: auto;
  border-bottom: 4px solid var(--first-color);
  z-index: 1;
  transition: background-color .4s;
}

.contact-data .section-title-2{
  margin: 0 0 1.5rem;
  transform: translateX(-3rem);
}

.contact-description-1{
color:var(--title-color); 
font-weight: var(--font-medium);
margin-bottom: 2rem;
}

.contact-description-2{
  color:var(--title-color);
  font-size:var(--small-font-size) ;

}

.contact-data .geometric-box{
  top: 2rem;
  right: 2.5rem; 
}

.contact-email{
  position: relative;
  background-color: var(--black-color);
  padding: 5rem 1.5rem 2.5rem;
  margin-top: -2.5rem;
  transition: background-color .4s;
  z-index: 0;
  


}

.contact-title{
  color:var(--white-color); 
  font-size: var(--h2-font-size);
  margin-bottom: 2rem;
  text-align: center;
}

.contact-form,
.contact-group{
  display: grid;
  row-gap: 1.25rem;
}

.contact-form{
  position: relative;

}

.contact-box{
  position: relative;
  width: 100%;
  height:58px; 
}

.contact-input,
.contact-button{
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  outline: none;
  border: none;
}

.contact-input{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--black-color);
  border: 3px solid var(--black-color-light);
  color:var(--white-color); 
  padding:.5rem 1rem; 
  font-weight: var(--font-medium);
  transition: border .4s, background-color .4s;
  z-index: 15;

}

.contact-input::placeholder{
  color:var(--text-color-light);
  transition: opacity .4s; 

}

.contact-input:focus{
  border: 3px solid var(--white-color) ;

}

.contact-input:-webkit-autofill{
  transition: background-color 6000s, color 6000s ;
}

.contact-label{
 position: absolute;
 top: 8px; 
 left: 10px;
 color:var(--text-color-light);
 font-size: var(--small-font-size);
 font-weight: var(--font-medium);
 background-color: var(--black-color);
 padding: 8px;
 pointer-events: none;
 transition: top .4s, opacity .4s, background-color .4s;
 z-index: 17;
 opacity: 0;
}

.contact-form .contact-area{
  height: 10rem; 
}

.contact-area textarea{
  resize: none;
  padding-top: 1rem;
}

.contact-button{
  background-color: var(--first-color);
  cursor: pointer;
}


/* Opaque placeholder */
.contact-input:focus::placeholder{
  opacity: 0;
}

/* Move label up & sticky label */
.contact-input:focus + .contact-label,
.contact-input:not(:placeholder-shown).contact-input:not(:focus) + .contact-label{
  opacity:1 ;
  top: -16px ;
}

.contact-social{
  display: grid;
  row-gap: 1rem;
  background-color: hsl(0, 0%, 10%);
  padding-block: 1rem 2rem;
  text-align: center;
}

.contact-social-arrow{
  width: 32px;
  margin: 0 auto; 

}

.contact-social-data{
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
}

.contact-social-description-1{
  color:var(--text-color-light);
  font-size: var(--small-font-size);
  margin-bottom: .5rem;
}

.contact-social-description-2{
  color:var(--white-color);
  font-size: var(--small-font-size);
  font-weight: var(--font-semi-bold);

}

.contact-social-links{
  display: flex;
  justify-content: center ;
  column-gap: .75rem;
}

.contact-social-link{
  background-color: var(--black-color-light);
  padding: 6px;
  color: var(--white-color);
  font-size: 1.25rem;
  display: grid;
  place-items: center ;
  transition: background-color .3s;
}

.contact-social-link:hover{
background-color: var(--first-color) ;




}

.contact-message{
  color:var(--white-color);
  font-size: var(--small-font-size);
  position: absolute;
  bottom: -1.6rem;
  left:0; 

}



/*=============== FOOTER ===============*/
.footer{
  background-color: var(--black-color);
}

.footer-container{
  padding-block: 3rem 2rem;
  row-gap: 2.5rem;
}

.footer-links{
  display: flex;
  justify-content: center;
  column-gap: 2rem;
}

.footer-link{
  color:var(--white-color);
  transition: color .4s;
}

.footer-link:hover{
  color: var(--text-color-light);
}

.footer-copy{
  color: var(--text-color-light);
  font-size: var(--small-font-size);
  text-align: center;
  cursor: default;
}

.footer-copy a{
  color: var(--white-color);
  font-weight: var(--font-medium);
}
/*=============== SCROLL BAR ===============*/

::-webkit-scrollbar{
  width:.6rem;
  border-radius: .5rem;
  background-color: hsla(0, 0%, 65%);
}

::-webkit-scrollbar-thumb{

  border-radius: .5rem;
  background-color: hsla(0, 0%, 55%);
}

::-webkit-scrollbar-thumb:hover{


  background-color: hsla(0, 0%, 45%);
}

/*=============== SCROLL UP ===============*/
.scrollup{
  position: fixed;
  right: 1rem;
  bottom: -50%;
  background-color: var(--black-color);
  display: inline-flex;
  padding: 8px;
  font-size: 1.25rem;
  color:var(--white-color);
  z-index: var(--z-tooltip);
  transition: bottom .4s, transform .4s, background-color .4s;  
}

.scrollup:hover{
  transform: translateY(-.5rem);
}

/* Show Scroll Up */

.show-scroll{
  bottom: 3rem;
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen  and (max-width:340px){
 .container{
  margin-inline:1rem ;
 }

 .home-image{
  width:180px; 
 }

 .about-image{
  width: 180px;
 }

 .about-shadow{
  height:330px; 
  right:-2.5rem
 }

 .contact-data{
  width: 100%;
 }
}

.contact-data .section-title-2{
  transform: translateX(0);
}

/* For medium devices */

@media screen and (min-width: 576px){
  .home-container,
  .about-container,
  .projects-container{
   grid-template-columns: 350px;
   justify-content: center;
  }

  .contact-data{
    width: 350px;
    padding: 4rem 1.5rem;
    margin-inline: auto;
  }

  .contact-container{
    grid-template-columns: 500px;
    justify-content: center;
  }

  .contact-group{
    
    column-gap: 1rem;
  }

  .contact-social{
    background-color: transparent;
  }

  .contact-social-arrow{
    filter: invert(1); 
  }
  .contact-social-description-1{
    color:var(--text-color);
  }
  .contact-social-description-2{
    color:var(--title-color);
  }
  .dark-theme .contact-social-arrow{
    filter:none;
  }
}

@media screen and (min-width: 768px){
  .skills1{
    max-width: 75%;
    margin: auto;
    
  }

  .projects-container{
    grid-template-columns: repeat(2, 350px);
  }

 }



/* For large devices */

@media screen and (min-width: 1150px){
  .container{
    margin-inline: auto;
    
  }
  .section{
    padding-block: 7rem 2rem;
  }
  .section-title-1::after,
  .section-title-2::after{
    width: 70px;
    height: 48px;
  }

  .geometric-box{
    transform: scale(1.2);
  }
  .nav{
    height: calc(var(--header-height) + 2rem); 
    column-gap: 4rem;
  }

  .nav-close,
  .nav-toggle,
  .nav-title,
  .nav-name{
    display: none;
  }

  .nav-list{
    flex-direction: row;
    column-gap: 4rem;
  }

  .nav-menu{
    margin-left: auto;
  }
  .nav-link{
    color: var(--text-color);
    font-size: var(--normal-font-size);
  }

  .nav-link:hover{
    color:var(--title-color); 
  }

  .nav-link::after{
    background-color: var(--title-color);
  }

  .active_link{
    color: var(--title-color);
  }
  
  .nav-link-button{
    background-color: var(--black-color);
    color:var(--white-color);
    padding: 1.1rem 1.5rem
  }

  .nav-link-button:hover{
    color:var(--white-color);
    background-color: var(--first-color);
    
  }
  .nav-link-button::after{
   background-color: transparent;
  }

  .change-theme{
    color:var(--text-color)
  }
  .change-theme:hover{
    color:var(--title-color);
  }

  .home-container{
    grid-template-columns: repeat(2,460px);
    gap: 2rem 4rem;
    align-items: center;
    padding-block: 5.5rem;
  }

  .home-prefil{
    grid-column: 2/3;
    grid-row: 1/3
  }

  .home-image{
    width: 350px;
  }

  .home-shadow{
    right: -1.25rem ;
    bottom: -1,25rem;
    border: 6px solid var(--black-color);
  }

  .home-name,
  .home-description{
    text-align: initial;
  }

  .home-name{
    align-self: flex-end;
    
  }

  .home-info{
    margin-top: 0;
    align-self: flex-start;
  }

  .home-description{
    position: relative;
    font-size: var(--h2-font-size);
    margin-bottom: 5.5rem ;
    padding-left: 3rem;
  }

  .home-description::after{
    content: '';
    width:32px;
    height: 2px;
    background-color: var(--title-color);
    position: absolute;
    top:14px;
    left: 0;
  }

  .home-scroll{
    margin: 0;
    display: flex;
    align-items: center;
    column-gap: .75rem;
  }

  .home-scroll-text{
    display: block;
    color: var(--text-color);
  }

  .home-scroll-box{
    width: 44px;
    height: 44px;
  }

  .home-scroll-box i{
    font-size: 1.25rem;
  }

  .home-prefil .geometric-box{
    top: 15rem;
  }

  .home-arrow{
    top: 4.5rem;
    left: -8rem;
    rotate: 80deg;
    width: 80px;
  }

  .home-line{
    left: -15rem;
    bottom: 4rem;
    width: 80px;
    rotate: 30deg;
  }

  .home-social{
    left:initial; 
    right: -6rem;
  }

  .home-social-link{
    font-size: 1.5rem;
    padding: .5rem
  }
  .skills1{
    max-width: 75%;
    margin: auto;
    font-size: var(--h2-font-size);
    
  }

  .about-container{
    grid-template-columns: 440px 525px;
    gap: 1rem 9rem;
    align-items: center;
    padding-block: 1rem;
  }

  .about-prefil{
    order:-1;
    grid-row: 1/3;
   
  }

  .about-image{
    width: 350px;
  }

  .about-img{
    border: 8px solid var(--white-color);
  }

  .about-shadow{
    width: 240px;
    height: 615px;
    top:-4rem;
    right:-5.5rem;
    border-bottom: 6px solid var(--first-color);
  }

  .about-prefil .geometric-box{
    right: -4rem;
    top: auto4.5rem;
  }

  .about-line{
    width: 80px;
    right: -2rem;
    top: 10rem;
  }

  .about-box{
    width:64px;
    height: 64px;
    right: -.75rem;
  }

  .about-container .section-title-1{
    align-self: flex-end;
    margin-inline: 0;
  }

  .about-info{
    align-self: flex-start;
    padding-left: 3rem;
  }

  .about-description{
    font-size: var(--h2-font-size);
    margin-bottom: 2rem;
  }

  .about-description::after{
    width: 32px;
    height: 2px;
    left:-3rem;
    top:14px;
  }

  .about-buttons{
    justify-content: initial;
  }

  .button-ghost{
    padding: .75rem;
  }

  .button-ghost i{
    font-size: 1.5rem;
  }

  .projects-container{
    grid-template-columns: 3, 352px ;
    padding-block: 3rem 1rem;

  }

  .pro-card{
    padding: 1.25rem 1.25rem 2.5rem;
  }

  .pro-image{
    margin-bottom: 1rem;
  }

  .projects-content{
    margin-bottom: 2rem;

  }

  .projects-btn{
    right: 1.25rem;
  }

  .contact-container{
    grid-template-columns: 440px 670px;
    grid-template-rows: initial;
  }
  .contact-email{
    grid-column: 2/3;
    grid-row: 1/3; 
    padding: 7rem 5.5rem 6rem 7.5rem;
    margin-top: 0;
  }

  .contact-title{
    font-size: var(--h3-font-size);
    text-align: initial;
  }

  .contact-box{
    height: 60px;
  
  }

  .contact-form .contact-area{
   
    height: 11rem;
  }

  .contact-button{
    margin-top: 1.25rem;
    width: max-content;
  }

  .contact-data{
    width: 392px;
    height: 375px;
    padding: 4.5rem 3.5rem 3.5rem;
    margin: 7.5rem 0 0 8rem;
    border-bottom: 6px solid var(--first-color);
  }

  .contact-data .section-title-2{
    margin: 0 0 2rem;
    transform: translateX(-6-rem);
  }

  .contact-social{
    margin-left: 8rem;
    text-align: initial;
  }

  .contact-social-data{
    flex-direction: row;
    align-items: center;
    column-gap: 1.25rem;
  }

  .contact-social-arrow{
    width: 40px;
  }

  .contact-social-link{
   font-size: 1.5rem;
   padding: .5rem;
   
}

.contact-message{
  bottom: -2.5rem;

}

.dark-theme .contact-data{
  box-shadow: 4px 0 8px hsla(0,0%, 4%, .3);
}

.footer-container{
  padding-block: 4rem;
  grid-template-columns: repeat(2, max-content);
  justify-content: space-between;
}

.footer-links{
  column-gap: 3rem;
  order: 1;
}

.scrollup{
  right: 3rem;
}

.skills1{
  max-width: 50%;
  margin: auto;
  
}

}