/* GENERAL */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Poppins", sans-serif;
}

html {
  scroll-behavior: smooth;
}

p {
  color: rgb(85, 85, 85);
}

/* TRANSITION */

a,
.btn {
  transition: all 300ms ease;
}

/* DESKTOP NAV */

nav,
.nav-links {
  display: flex;
}

nav {
  justify-content: space-around;
  align-items: center;
  height: 17vh;
}

.nav-links {
  gap: 2rem;
  list-style: none;
  font-size: 1.5rem;
}

a {
  color: black;
  text-decoration: none;
  text-decoration-color: white;
}

a:hover {
  color: grey;
  text-decoration: underline;
  text-underline-offset: 1rem;
  text-decoration-color: rgb(181, 181, 181);
}
@keyframes slideInLeft {
  from {
    transform: translateX(-700px);


  }
  to {
    transform: translateX(0);
  }
  
}
@keyframes slideInRight {
  from {
    transform: translateX(700px);


  }
  to {
    transform: translateX(0);
  }
} 
.logo
{
  animation-name: slideInLeft;
  animation-duration: 5s;
  animation-timing-function: slideInLeft;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: slideInLeft;
  animation-fill-mode: slideInLeft;

}
.logo {
  font-size: 2rem;
}
.section__text{
  animation-name: slideInRight;
  animation-duration: 5s;
  animation-timing-function: slideInRight;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: slideInRight;
  animation-fill-mode: slideInRight;

}


.logo:hover {
  cursor: default;
}

    /* HAMBURGER MENU */
  
    #hamburger-nav {
      display: none;
      
    }

    .hamburger-menu {
      position: relative;
      display: inline-block;
    }

    .hamburger-icon {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 24px;
      width: 30px;
      cursor: pointer;
    }

    .hamburger-icon span {
      width: 100%;
      height: 2px;
      background-color: black;
      transition: all 0.3 ease-in-out;
    }

    .menu-links {
      position: absolute;
      top: 100%;
      right: 0;
      background-color: white;
      width: fit-content;
      max-height: 0;
      overflow: hidden;
      transition: all 0.3 ease-in-out;
    }

    .menu-links a {
      display: block;
      padding: 10px;
      text-align: center;
      font-size: 1.5rem;
      color: black;
      text-decoration: none;
      transition: all 0.3 ease-in-out;
    }

    .menu-links li {
      list-style: none;
    }

    .menu-links.open {
      max-height: 300px;
    }

    .hamburger-icon.open span:first-child {
      transform: rotate(45deg) translate(10px, 5px);
    }

    .hamburger-icon.open span:nth-child(2) {
      opacity: 0;
    }

    .hamburger-icon.open span:last-child {
      transform: rotate(-45deg) translate(10px, -5px);
    }

    .hamburger-icon span:first-child {
      transform: none;
    }

    .hamburger-icon span:first-child {
      opacity: 1;
    }

    .hamburger-icon span:first-child {
      transform: none;
    }

    /* SECTIONS */

    section {
      padding-top: 4vh;
      height: 96vh;
      margin: 0 10rem;
      box-sizing: border-box;
      min-height: fit-content;
    }

    .section-container {
      display: flex;
    }

    /* PROFILE SECTION */

    #profile {
      display: flex;
      justify-content: center;
      gap: 5rem;
      height: 80vh;
    }

    .section__pic-container {
      display: flex;
      height: 400px;
      width: 400px;
      margin: auto 0;
    }

    .section__text {
      align-self: center;
      text-align: center;
    }

    .section__text p {
      font-weight: 600;
    }

    .section__text__p1 {
      text-align: center;
    }

    .section__text__p2 {
      font-size: 1.75rem;
      margin-bottom: 1rem;
    }

    .title {
      font-size: 3rem;
      text-align: center;
    }

    #socials-container {
      display: flex;
      justify-content: center;
      margin-top: 1rem;
      gap: 1rem;
    }

    /* ICONS */

    .icon {
      cursor: pointer;
      height: 2rem;
    }

    /* BUTTONS */

    .btn-container {
      display: flex;
      justify-content: center;
      gap: 1rem;
    }

    .btn {
      font-weight: 600;
      transition: all 300ms ease;
      padding: 1rem;
      width: 8rem;
      border-radius: 2rem;
    }

    .btn-color-1,
    .btn-color-2 {
      border: rgb(53, 53, 53) 0.1rem solid;
    }

    .btn-color-1:hover,
    .btn-color-2:hover {
      cursor: pointer;
    }

    .btn-color-1,
    .btn-color-2:hover {
      background: rgb(53, 53, 53);
      color: white;
    }

    .btn-color-1:hover {
      background: rgb(0, 0, 0);
    }

    .btn-color-2 {
      background: none;
    }

    .btn-color-2:hover {
      border: rgb(255, 255, 255) 0.1rem solid;
    }

    .btn-container {
      gap: 1rem;
    }

    /* ABOUT SECTION */

    #about {
      position: relative;
    }

    .about-containers {
      gap: 2rem;
      margin-bottom: 2rem;
      margin-top: 2rem;
    }

    .about-details-container {
      justify-content: center;
      flex-direction: column;
    }

    .about-containers,
    .about-details-container {
      display: flex;
    }

    .about-pic {
      border-radius: 2rem;
    }

    .arrow {
      position: absolute;
      right: -5rem;
      bottom: 2.5rem;
    }

    .details-container {
      padding: 1.5rem;
      flex: 1;
      background: white;
      border-radius: 2rem;
      border: rgb(53, 53, 53) 0.1rem solid;
      border-color: rgb(163, 163, 163);
      text-align: center;
    }

    .section-container {
      gap: 4rem;
      height: 80%;
    }

    .section__pic-container {
      height: 400px;
      width: 400px;
      margin: auto 0;
    }

    /* EXPERIENCE SECTION */

    #experience {
      position: relative;
    }

    .experience-sub-title {
      color: rgb(85, 85, 85);
      font-weight: 600;
      font-size: 1.75rem;
      margin-bottom: 2rem;
    }

    .experience-details-container {
      display: flex;
      justify-content: center;
      flex-direction: column;
    }

    .article-container {
      display: flex;
      text-align: initial;
      flex-wrap: wrap;
      flex-direction: row;
      gap: 2.5rem;
      justify-content: space-around;
    }

    article {
      display: flex;
      width: 10rem;
      justify-content: space-around;
      gap: 0.5rem;
    }

    article .icon {
      cursor: default;
    }

    /* PROJECTS SECTION */

    #projects {
      position: relative;
    }

    .color-container {
      border-color: rgb(163, 163, 163);
      background: rgb(250, 250, 250);
    }

    .project-img {
      border-radius: 2rem;
      width: 90%;
      height: 90%;
    }

    .project-title {
      margin: 1rem;
      color: black;
    }

    .project-btn {
      color: black;
      border-color: rgb(163, 163, 163);
    }

    /* CONTACT */

    #contact {
      display: flex;
      justify-content: center;
      flex-direction: column;
      height: 70vh;
    }

    .contact-info-upper-container {
      display: flex;
      justify-content: center;
      border-radius: 2rem;
      border: rgb(53, 53, 53) 0.1rem solid;
      border-color: rgb(163, 163, 163);
      background: (250, 250, 250);
      margin: 2rem auto;
      padding: 0.5rem;
    }

    .contact-info-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      margin: 1rem;
    }

    .contact-info-container p {
      font-size: larger;
    }

    .contact-icon {
      cursor: default;
    }

    .email-icon {
      height: 2.5rem;
    }

    /* FOOTER SECTION */

    footer {
      height: 26vh;
      margin: 0 1rem;
    }

    footer p {
      text-align: center;
    }