*{
      margin: 0;
      padding: 0;
      color: #c4c4c4;
      text-decoration: none;
}

body{
      font-family:  poppins, sans-serif;
      font-size: 14px; 
      background-color: rgba(0, 0, 0, 0.9);
}
.active {
      color: white;
}
.deactive {
      color: #c4c4c4;
}

i {
      font-size: 15px;
      color: #ffffff;
}

header{
      padding: 20px;
      display: flex;
      position: sticky; top: 0;
      justify-content: space-between;
      backdrop-filter: blur(45px);
      align-items: center;
      border-bottom: 2px solid #c4c4c4;
      z-index: -9999px;
}

header nav {
      display: flex;
      gap: 20px;
}

header .logo  a h2 {
      color: whitesmoke;
      font-weight: 600;
      text-decoration: none;
}

header .nav-one a img {
      width: 20px;
      height: 20px;
}
header .nav-two a img{
      width: 22px;
      height: 22px;
}

header nav div a{
      font-weight: 600;
      color: #ffffff; 
      text-decoration: none;
}

header .nav-one .nav-links a span:hover{
      color: #fefefe;
      border-bottom: 2px solid #fefefe;
      padding-bottom: 2px;
      transition: all 0.1s 
}

header nav .logo a{
      display: flex;
      align-items: center;
      text-decoration: none;
      gap: 1rem;
}


header .nav-one {
      display: flex;
      width: 40%;
      justify-content: space-between;
}


header .nav-two .social-media{
      display: flex;
      gap: 1rem;
}

header .nav-one .nav-links{
      display: flex;
      gap: 1rem;
}

header .nav-one .nav-links a{
      display: flex;
      align-items: center;
      text-decoration: none;
      color: #c4c4c4;
      gap: 8px;
}

main {
      display: flex;

      padding: 5rem;
}
main .container {
      padding: 4rem;
      display: flex ;
      flex-direction: column;
      align-items: center;
      gap: 10rem;
}
main .container .bio {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
}
main .container .bio h1 {
      color: whitesmoke;
      font-size: 40px;
      line-height: 1em;
      text-align: center;
     
}

main .container .bio img {
      width: 300px;
      aspect-ratio: 1/1;
      border-radius: 100%;
      border: 2px solid #fefefe;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
main .container .bio p {
      font-size: 15px;
      line-height: 1.5em;
      text-align: center;
      color: #c4c4c4;
}
main .container .about-me h2 {
      color: whitesmoke;
      line-height: 1.2em;
}
main .container .about-me {
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      /* border: 2px solid #c4c4c4; */
      border-radius: 20px;
      padding: 2rem;
}

main .container .about-me div {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      box-shadow: 0 0 10px rgba(83, 83, 83, 0.5);
      border-radius: 20px;
      padding: 2rem;
}

/* HIGHLIGHT */
main .container .highlight {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2rem;
      text-align: center;
}

main .container .highlight .highlight-header h2{
      color: whitesmoke;
      font-size: 30px;
      line-height: 1.2em;
}

main .container .highlight .highlight-header p{
      font-size: 15px;
}
main .container .highlight .journey {
      display: flex;
      justify-content: center;
}
main .container .highlight  .journey .journey-content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 2rem;
}
main .container .highlight  .journey .journey-content .content {
      display: flex;
      flex-direction: column;
      padding: 2rem;
     border: 2px solid #c4c4c4;
      border-radius: 20px;
      text-align: start;
}

main .container .highlight  .journey .journey-content .content h2 {
      color: whitesmoke;
      font-size: 20px;
      line-height: 1.2em;
}

main .container .highlight .projects {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 2rem;
}
main .container .highlight .projects .project-item {
      width: 1fr;
      display: flex;
      flex-direction: column;
      padding: 2rem;
      border: 2px solid #c4c4c4;
      border-radius: 20px;
      text-align: start;
      gap: 1rem;
}
main .container .highlight .projects .project-item img{
      width: 100%;
      aspect-ratio: 1/1;
}

main .container .highlight .projects .project-item a{
      color: violet;
      font-weight: 700;
}

footer .footer-content {
      padding: 2rem;
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      border-top: 2px solid #c4c4c4;
      text-align: center;
}