html {
  scroll-behavior: smooth;
}
body {
  font-family: Arial, sans-serif;
  background-color: #1f2121;
  color: white;
  margin: 0;
}
.container {
  display: flex;
  justify-content: space-between;
  padding: 15vh 6vw;
}
.line {
  display: block;
  align-items: start;
}
.left-content {
  position: fixed;
}
.left-content > h1 {
  font-size: 50px;
  margin: 0px;
}
.left-content > h3 {
  font-size: large;
}
.left-content > P {
  font-size: medium;
  line-height: 1.7;
}

.sections > a {
  padding-top: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: small;
  font-weight: bold;
  color: white;
  text-decoration: none;
  /* transition: transform 0.3s ease-out, color 0.3s ease-out; */
  transition: 0.5s;
}
.sections a .line {
  display: block;
  width: 25px;
  height: 2px;
  background-color: grey;
  /* transition: width 0.3s ease-out, background-color 0.3s ease-out; */
  transition: 0.5s;
}
.sections a:hover {
  transform: translateX(25px);
}
.sections a:hover .line {
  width: 70px;
  background-color: #ffffff;
}
.resume {
  margin-top: 10vh;
}
.sections > .resume > a {
  text-decoration: none;
  color: white;
  font-size: large;
  gap: 10px;
  align-items: center;
  display: flex;
  transition: 0.5s;
}
@keyframes moveDiagonal {
  0% {
    transform: rotate(330deg) translate(0, 0);
  }
  100% {
    transform: rotate(330deg) translate(6px, -1px);
  }
}
.resume a:hover i {
  animation: moveDiagonal 0.5s;
}

.profile-button {
  font-size: x-large;
  margin-top: 17vh;
  display: flex;
  gap: 20px;
}
.right-content {
  position: absolute;
  right: 80px;
  padding-bottom: 20vh;
}
.right-content > .about > p {
  text-align: justify;
  line-height: 1.5;
  width: 600px;
}
.experience {
  margin-top: 15vh;
  width: 600px;
  text-align: justify;
}
.projectssss {
  margin-top: 20vh;
}
.experience > span {
  line-height: 1.6;
}

/* First-Projest-design */
.first-project {
  margin-top: 10vh;
  padding: 20px;
  display: flex;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 10px;
}
.footer-image > img {
  width: 120px;
  border: 1px solid grey;
}
a {
  text-decoration: none;
  color: white;
}
.text-container {
  margin-left: 30px;
}
.first-project > .text-container > span {
  font-weight: bold;
  font-size: large;
}
.first-project .text-container p {
  width: 450px;
  text-align: justify;
  line-height: 1.5;
}
.first-project:hover {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
@keyframes moveDiagonal {
  0% {
    transform: rotate(330deg) translate(0, 0);
  }
  100% {
    transform: rotate(330deg) translate(6px, -1px);
  }
}
.first-project-design:hover .text-container i {
  animation: moveDiagonal 0.5s forwards;
}

/* Second-Projest-design */
.second-project {
  margin-top: 10vh;
  padding: 20px;
  display: flex;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 10px;
}
.footer-image > img {
  width: 120px;
  border: 1px solid grey;
}
a {
  text-decoration: none;
  color: white;
}
.second-project > .text-container > span {
  font-weight: bold;
  font-size: large;
}
.second-project .text-container p {
  width: 450px;
  text-align: justify;
  line-height: 1.5;
}
.second-project:hover {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
@keyframes moveDiagonal {
  0% {
    transform: rotate(330deg) translate(0, 0);
  }
  100% {
    transform: rotate(330deg) translate(6px, -1px);
  }
}
.second-project-design:hover .text-container i {
  animation: moveDiagonal 0.5s forwards;
}

/* Third-Projest-design */
.third-project {
  margin-top: 10vh;
  padding: 20px;
  display: flex;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 10px;
}
.footer-image > img {
  width: 120px;
  border: 1px solid grey;
}
a {
  text-decoration: none;
  color: white;
}
.third-project > .text-container > span {
  font-weight: bold;
  font-size: large;
}
.third-project .text-container p {
  width: 450px;
  text-align: justify;
  line-height: 1.5;
}
.third-project:hover {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
@keyframes moveDiagonal {
  0% {
    transform: rotate(330deg) translate(0, 0);
  }
  100% {
    transform: rotate(330deg) translate(6px, -1px);
  }
}
.third-project-design:hover .text-container i {
  animation: moveDiagonal 0.5s forwards;
}

/* Fourth-Projest-design */
.fourth-project {
  margin-top: 10vh;
  padding: 20px;
  display: flex;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 10px;
}
.footer-image > img {
  width: 120px;
  border: 1px solid grey;
}
a {
  text-decoration: none;
  color: white;
}
.fourth-project > .text-container > span {
  font-weight: bold;
  font-size: large;
}
.fourth-project .text-container p {
  width: 450px;
  text-align: justify;
  line-height: 1.5;
}
.fourth-project:hover {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
@keyframes moveDiagonal {
  0% {
    transform: rotate(330deg) translate(0, 0);
  }
  100% {
    transform: rotate(330deg) translate(6px, -1px);
  }
}
.fourth-project-design:hover .text-container i {
  animation: moveDiagonal 0.5s forwards;
}

/* Fivth-Projest-design */
.fivth-project {
  margin-top: 10vh;
  padding: 20px;
  display: flex;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 10px;
}
.footer-image > img {
  width: 120px;
  border: 1px solid grey;
}
a {
  text-decoration: none;
  color: white;
}
.fivth-project > .text-container > span {
  font-weight: bold;
  font-size: large;
}
.fivth-project .text-container p {
  width: 450px;
  text-align: justify;
  line-height: 1.5;
}
.fivth-project:hover {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
@keyframes moveDiagonal {
  0% {
    transform: rotate(330deg) translate(0, 0);
  }
  100% {
    transform: rotate(330deg) translate(6px, -1px);
  }
}
.fivth-project-design:hover .text-container i {
  animation: moveDiagonal 0.5s forwards;
}

.know {
  font-size: medium;
  margin-top: 30vh;
  line-height: 1.5;
  color: grey;
  margin-left: 25px;
}
.line {
  display: block;
  text-align: start;
}

#about-1 {
  scroll-margin-top: 115px;
}

#experience-1 {
  scroll-margin-top: 110px;
}
#my-projects-1 {
  scroll-margin-top: 95px;
}

/* ===========================================
   RESPONSIVE DESIGN (TABLETS & SMALL LAPTOPS)
   =========================================== */
@media (max-width: 992px) {
  .container {
    flex-direction: column;
    padding: 10vh 6vw;
  }

  .left-content {
    position: relative;
    margin-bottom: 6vh;
  }

  .right-content {
    position: relative;
    right: 0;
    padding-bottom: 10vh;
  }

  /* Text widths */
  .right-content > .about > p,
  .experience,
  .projectssss {
    width: 100%;
  }

  /* Project Cards Layout */
  .first-project,
  .second-project,
  .third-project,
  .fourth-project,
  .fivth-project {
    flex-direction: column;
    align-items: start;
  }

  .footer-image > img {
    width: 100%;
    max-width: 260px;
  }

  .text-container {
    margin-left: 0;
    margin-top: 10px;
  }
}

/* ===========================================
   RESPONSIVE DESIGN (MOBILE PHONES)
   =========================================== */
@media (max-width: 600px) {
  body {
    padding: 0;
  }

  /* Main Layout */
  .container {
    padding: 5vh 5vw;
  }

  /* Name + Title Size */
  .left-content > h1 {
    font-size: 32px;
  }

  .left-content > h3 {
    font-size: 16px;
  }
  /* Hide sidebar section links on mobile */

  /* Sidebar Links */
  .sections > a {
    font-size: 13px;
    transform: none !important;
    gap: 6px;
  }
  .sections a{
    display: none;
  }
  .sections .resume a{
    visibility: visible;
  }

  .sections a .line {
    width: 18px;
  }

  /* Social Icons size */
  .profile-button {
    font-size: 20px;
    gap: 15px;
  }

  /* Right Content Full Width */
  .right-content {
    width: 100%;
    right: 0;
  }

  /* Headings show above paragraphs */
  #about-1::before {
    content: "ABOUT";
    display: block;
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 18px;
  }

  #experience-1::before {
    content: "EXPERIENCE";
    display: block;
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 18px;
  }

  #my-projects-1::before {
    content: "PROJECTS";
    display: block;
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 18px;
  }

  /* Paragraph width fix */
  .right-content > .about > p,
  .experience span,
  .first-project .text-container p,
  .second-project .text-container p,
  .third-project .text-container p,
  .fourth-project .text-container p,
  .fivth-project .text-container p {
    width: 100%;
    line-height: 1.6;
    text-align: justify;
  }

  /* Project Cards column layout */
  .first-project,
  .second-project,
  .third-project,
  .fourth-project,
  .fivth-project {
    flex-direction: column;
    align-items: start;
    padding: 15px;
  }

  .footer-image > img {
    width: 100%;
    max-width: 240px;
    margin-bottom: 10px;
  }

  .text-container {
    margin-left: 0;
  }

  /* Spacing Adjustments */
  .experience,
  .projectssss {
    margin-top: 8vh !important;
  }

  .know {
    margin-top: 15vh;
    margin-left: 0;
    text-align: left;
    font-size: 14px;
  }
}
@media (max-width: 600px) {
  /* Make your pseudo-elements sticky */
  #about-1::before,
  #experience-1::before,
  #my-projects-1::before {
    position: sticky;
    top: 0;
    background: #1f2121; /* Prevents overlap */
    z-index: 10;
    display: block;
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 18px;
    padding: 10px 0;
  }
  .profile-button {
    font-size: x-large;
    margin-top: 3vh;
    display: flex;
    gap: 20px;
  }
}