*{
padding: 0%;
margin: 0px;
box-sizing: border-box;
scroll-behavior: smooth;
}
body{
background-color: #222831;
}
header{

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2rem auto;
    max-width: 1200px;
    
   
}
.navigation ul{
    display: flex;
    list-style-type: none;
    gap: 2rem;
   
}
.navigation a {
text-decoration: none;
color: white;

}
.navigation a:hover{
color: #00adb5;
}
.hero{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5rem auto;
    max-width: 1200px;
}
.arrow {
position: absolute;
transform: translateX(-5.5rem) translateY(1.5rem);
}
.heroSup{
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.name{
font-size: 3rem;
color: white;
}
.title{
font-size: 4rem;
color: #00adb5;
}
.heroBtns{
display: flex;
gap: 1rem;
margin-top: 1.5rem

}
.tocommunicate{
background-color: #00adb5;
color: white;
border-radius: 16px;
text-decoration: none;
padding: 0.5rem 1.5rem;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);

}
 .mycard{
background-color: rgba(57, 62, 70, 0.75);
color: white;
border-radius: 24px;
text-decoration: none;
padding: 0.5rem 1.5rem;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
gap: 0.5rem;
backdrop-filter: blur(4px);


 }
 
 .aboutMe{
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin: 5REM auto;
max-width: 1200PX;
gap: 10REM;
 }
 .textcontainer{
display: flex;
flex-direction: column;
 }
 .textTitle{
display: flex;
align-items: center;
gap: 5px;
font-size: 2rem;
 }
 .aboutName{
color: white;
 }
 .aboutTitle{
    color: #00adb5;
 }
 .aboutMePar{
text-align: justify;
color: rgba(238, 238, 238, 0.75);

 }
.works{
background-image: url(background.svg);
padding: 10rem 10rem;
margin: 5rem 0rem;
}
.worksContainer{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: left;
margin: 5rem auto;
max-width: 1200px;
}
.projetTitle{
display: flex;
align-items: center;
justify-content:left;
gap: 5px;
font-size: 2rem;
}
.works ul{
display: flex;
list-style-type: none;
align-items: center;
justify-content: space-between;
}
  .works li{
border-radius: 16px;
background-color: rgba(56, 62, 70, o.75);
backdrop-filter: blur(4px);
padding: 1rem 4rem;
  }  
  .works li img{
width: 200px;
height: 200px;
object-fit: contain;
transition: transform 0.5s;

  }
  .works li:hover{
    transform: scale(2.3);
  }
 .contactContainer{
display: flex;
align-items: center;
justify-content: center;
gap: 5PX;
font-size: 3REM;
margin-bottom: 12PX;
 }   
 .contact{
display: flex;
align-items: center;
justify-content: center;
gap: 20rem;
margin-right: 5rem;

 }
 .contact h3 ,.contact a{

color: white;
text-decoration: none;

 }
 .emailAndPhone{
display: flex;
align-items: center;
justify-content: center;
gap: 5rem;
 }
.spcialMedia{
display: flex;
align-items: center;
justify-items: center;
gap: 3rem;

}
.socialMedia a {
    display: flex;
    align-items: center;
    justify-content: center;
border-radius: 50px;
background-color: rgba(57, 62, 70, 0.5);
backdrop-filter: blur(4px);
padding: 1rem;
}
.socialMedia img{
width: 24px;
height: 24px;
}
@media(max-width:1023px){
header{
margin-left: 1rem;
margin-right: 1rem;
}
.hero{
flex-direction: column;
align-items: center;
gap: 2rem;
}
.heroImg{
width: 400px;
}
.name,.title{font-size: 2rem;


}
.arrow{
display: none;


}
.aboutMe{
flex-direction: column-reverse;
align-items: center;
gap: 2rem;


}
.textcontainer{
align-items: center;
margin: 0rem 5rem;
}
.light{
width: 60px;


}
.aboutMeImg{
width: 400px;


}
.works{
padding: 0;

}
.worksContainer{
padding: 5rem 0rem;
gap: 3rem;
}
.projetTitle{
margin-left: 1rem;


}
.works ul{
flex-direction: column;
gap: 1rem;

}
.contactContainer{
margin: 10rem 5rem;
gap: 2rem;
}
.contact{
flex-direction: column;
gap: 2rem;
margin-right: 0;
}


}