*{
      margin: 0;
      padding: 0;
      font-family: 'Poppins', sans-serif;
}

.header{
      display: flex;
      justify-content: space-around;
      margin: 2rem auto;
}
#name{
      font-size: 1.5rem;
}

.nav-options ul{
      display: flex;
      list-style: none;
      gap: 2rem;
}

.nav-options ul li{
      cursor: pointer;
}

.nav-options ul li:hover{
      text-decoration: underline;
}

li a:hover{
      color: gray;
      text-decoration: underline;
}

li a{
      text-decoration: none;
}


#hero-section{
      display: flex;
}

.profile-img img{
      height: 17vw;
}

.buttons{
      display: flex;
      gap:1rem;
}
.buttons button{
      padding: 0.7rem;
      border-radius: 24px;
}

#contact-info{
      background-color: black;
      color: white;
}


.social-media-icons{
      display: flex;
      gap: 1rem;
      margin-top: 0.7rem;
}
.social-media-icons img{
      width: 2rem;
      height: 2rem;
}

#hero-section{
      display: flex;
      justify-content: center;
      gap: 3rem;
      margin-top: 6rem;
}

.description{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap:0.5rem;
}

/* About Me Section */
.about-me-heading, .skills-heading, .projects-heading, .contact-me-heading{
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      align-items: center;
      margin: 7rem 2rem auto;
}

.about-me-left img{
      width: 18rem;
}

.exp-edu-section img{
      width: 2rem;
}

.about-me{
      display: flex;
      align-items: center;
      justify-content: center;
      gap:3rem;
      margin: 2rem 6rem;
}

.about-me-right, .experience{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 1.5rem;
}

.exp-edu-section{
      display: flex;
      gap: 7.5rem;
}

.experience, .education{
      border: 1px solid black;
      border-radius: 24px;
      display: flex;
      gap: 0.5rem;
      flex-direction: column;
      align-items: center;
      padding: 2rem 4rem;
      width: 18rem;
      height: 7rem;
}


.skills-and-experiences{
      display: flex;
      justify-content: center;
      gap: 2rem;
      margin-top: 2rem;
}

.skills{
      display: flex;
      width: 33%;
      height: 33%;
      gap: 2rem;
      flex-wrap: wrap;
}

.skill-cell{
      display: flex;
      flex-direction: column;
      align-items: center;
}

.skill-cell img{
      width: 5rem;
}

.experiences{
      width: 33%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap:3rem;
}

.experience-cell{
      display: flex;
      align-items:flex-start;
      gap: 3rem;
}

.project{
      border: 2px solid black;
      border-radius: 24px;
      width: 22rem;
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
      align-items: center;
      padding: 1rem;
}

.project img{
      width: 80%;
      height: 80%;
      border-radius: 24px;
}

.project-buttons{
      display: flex;
      gap: 2rem;
}

.project-buttons button{
      border-radius: 16px;
      width: 6rem;
      height: 2rem;
      font-weight: 600;
}

.projects{
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-top: 2rem;
      margin-left: 12%;
}

.contact-section{
      display: flex;
      align-items: center;
      justify-content: center;
}

.contact-me{
      border: 2px solid black;
      border-radius: 24px;
      width: fit-content;
      height: fit-content;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      gap: 4rem;
      padding: 1rem;
      margin-bottom: 6rem;
      margin-top: 2rem;
}

.contact-me img{
      width: 2rem;
      height: 2rem;
}

.contact-me .email, .contact-me .linkedin{
      display: flex;
      gap: 1rem;
      align-items: center;
}

.linkedin a{
      text-decoration: none;
}

.linkedin a:hover{
      text-decoration: underline;
}

button{
      cursor: pointer;
}