@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@800&family=Titan+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@800&family=Titan+One&display=swap");

/* About Me */
.about-container {
  padding: 10px;
  margin-top: 30px;
  margin-left: 40px;
  margin-right: 40px;
}

.description-outer-box {
  border: 2px solid #000;
  background-color: #f9f0df;
  border-radius: 15px;
  padding: 20px;
}

.description-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.description-content {
  flex: 1;
  padding-right: 20px;
  text-align: center;
}

.description-image {
  flex: 0 0 220px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-card {
  width: 100%;
  border: 2px solid #000;
  border-radius: 15px;
  overflow: hidden;
  background-color: #f9f0df;
  transition: transform 0.3s ease-in-out;
}

.image-card img {
  width: 100%;
  height: auto;
  display: block;
}

.description-section .section-title {
  font-family: "Lexend", sans-serif;
  font-size: 29px;
  margin-bottom: 15px;
  font-weight: 500;
  text-align: center;
}

.description-name {
  font-family: "Lexend", sans-serif;
  font-size: 22px;
  margin-bottom: 5px;
  text-align: center;
}

.description-title {
  font-family: "Lexend", sans-serif;
  font-size: 16px;
  margin-bottom: 10px;
  text-align: center;
}

.description-text {
  font-family: "Lexend", sans-serif;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.skills-section {
  width: 100%;
  height: auto;
  display: grid;
  place-items: center;
}

.skills-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  margin: 30px;
}

.skill {
  width: 160px;
  height: 160px;
  position: relative;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  margin: 20px;
}

.skill-title {
  text-align: center;
  margin-top: 10px;
  font-size: 15px;
}

.outer {
  height: 160px;
  width: 160px;
  padding: 20px;
  box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15),
    -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  position: relative; /* Ensure relative positioning */
}

.inner {
  height: 120px;
  width: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2),
    inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7),
    -0.5px -0.5px 0px rgba(255, 255, 255, 1),
    0.5px 0.5px 0px rgba(0, 0, 0, 0.15), 0px 12px 10px -10px rgba(0, 0, 0, 0.05);
  position: relative; /* Ensure relative positioning */
}

svg {
  position: absolute; /* Ensure absolute positioning */
  top: 50%; /* Center the SVG */
  left: 50%; /* Center the SVG */
  transform: translate(-50%, -50%); /* Center the SVG */
}

#number1,
#number2,
#number3,
#number4,
#number5,
#number6,
#number7,
#number8,
#number9 {
  font-weight: 600;
  color: #555;
  font-size: 30px;
  z-index: 1;
}

circle {
  fill: none;
  stroke-width: 20px;
  stroke-dasharray: 450;
  stroke-dashoffset: 450;
  animation: anim 2s linear forwards;
}

.circle1 {
  stroke-dasharray: 440;
  stroke-dashoffset: 440; /* Start at 0% */
  animation: anim1 1s forwards;
  stroke: url(#GradientColor);
}
.circle2 {
  stroke-dasharray: 440;
  stroke-dashoffset: 440; /* Start at 0% */
  animation: anim2 1s forwards;
  stroke: url(#GradientColor);
}
.circle3 {
  stroke-dasharray: 440;
  stroke-dashoffset: 440; /* Start at 0% */
  animation: anim3 1s forwards;
  stroke: url(#GradientColor);
}
.circle4 {
  stroke-dasharray: 440;
  stroke-dashoffset: 440; /* Start at 0% */
  animation: anim4 1s forwards;
  stroke: url(#GradientColor);
}
.circle5 {
  stroke-dasharray: 440;
  stroke-dashoffset: 440; /* Start at 0% */
  animation: anim5 1s forwards;
  stroke: url(#GradientColor);
}
.circle6 {
  stroke-dasharray: 440;
  stroke-dashoffset: 440; /* Start at 0% */
  animation: anim6 1s forwards;
  stroke: url(#GradientColor);
}
.circle7 {
  stroke-dasharray: 440;
  stroke-dashoffset: 440; /* Start at 0% */
  animation: anim7 1s forwards;
  stroke: url(#GradientColor);
}
.circle8 {
  stroke-dasharray: 440;
  stroke-dashoffset: 440; /* Start at 0% */
  animation: anim8 1s forwards;
  stroke: url(#GradientColor);
}
.circle9 {
  stroke-dasharray: 440;
  stroke-dashoffset: 440; /* Start at 0% */
  animation: anim9 1s forwards;
  stroke: url(#GradientColor);
}

@keyframes anim1 {
  to {
    stroke-dashoffset: 0; /* 100% - Git */
  }
}
@keyframes anim2 {
  to {
    stroke-dashoffset: 44; /* 90% - Flutter */
  }
}
@keyframes anim3 {
  to {
    stroke-dashoffset: 88; /* 80% - Kotlin */
  }
}
@keyframes anim4 {
  to {
    stroke-dashoffset: 88; /* 80% - HTML, CSS, JavaScript */
  }
}
@keyframes anim5 {
  to {
    stroke-dashoffset: 110; /* 75% - SQL */
  }
}
@keyframes anim6 {
  to {
    stroke-dashoffset: 176; /* 60% - Laravel */
  }
}
@keyframes anim7 {
  to {
    stroke-dashoffset: 220; /* 50% - Python */
  }
}
@keyframes anim8 {
  to {
    stroke-dashoffset: 264; /* 40% - C# */
  }
}
@keyframes anim9 {
  to {
    stroke-dashoffset: 352; /* 20% - Java */
  }
}
.education-section,
.experience-section {
  width: 100%;
  height: auto;
  display: grid;
  place-items: center;
  border-radius: 20px;
  padding: 20px 0;
}

.education-section .section-title,
.experience-section .section-title {
  font-size: 29px;
  font-family: "Lexend", sans-serif;
  color: black;
  position: relative;
  margin-top: 0;
  margin-bottom: 80px;
  font-weight: 500;
}

.skills-section .section-title {
  font-size: 29px;
  font-family: "Lexend", sans-serif;
  color: black;
  position: relative;
  font-weight: 500;
}

.skill-title {
  margin-bottom: 20px;
  font-family: "Lexend", sans-serif;
}

.edu-container,
.experience-container {
  width: 70%;
  height: auto;
  margin: auto 0;
  position: relative;
}

.percentage {
  font-family: "Lexend", sans-serif;
}

.edu-container ul,
.experience-container ul {
  list-style: none;
}

.edu-container ul::after,
.experience-container ul::after {
  content: " ";
  position: absolute;
  width: 2px;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  background-image: linear-gradient(to bottom, #fdd23b, #f9f0df);
  border: 2px solid black;
}

.edu-container ul li,
.experience-container ul li {
  width: 50%;
  height: auto;
  padding: 15px 20px;
  background-color: #f9f0df;
  border-radius: 15px;
  border: 2px solid black;
  box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.218);
  position: relative;
  margin-bottom: 30px;
  z-index: 1;
}

.edu-container ul li:nth-child(4),
.experience-container ul li:nth-child(4) {
  margin-bottom: 0;
}

.edu-container ul li .edu-circle,
.experience-container ul li .experience-circle {
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #fdd23b;
  border: 2px solid black;
  top: 0;

  display: grid;
  place-items: center;
}

.edu-circle::after,
.experience-circle::after {
  content: " ";
  width: 12px;
  height: 12px;
  background-color: #e85c3b;
  border-radius: 50%;
}

.edu-container ul li:nth-child(odd) .edu-circle,
.experience-container ul li:nth-child(odd) .experience-circle {
  transform: translate(50%, -50%);
  right: -30px;
}

.edu-container ul li:nth-child(even) .edu-circle,
.experience-container ul li:nth-child(even) .experience-circle {
  transform: translate(-50%, -50%);
  left: -30px;
}

.edu-container ul li .edu-date {
  position: absolute;
  width: 100px;
  height: 35px;
  background-color: #e85c3b;
  border-radius: 15px;
  border: 2px solid black;
  top: -45px;
  color: black;
  font-size: 12px;
  font-family: "Lexend", sans-serif;
  box-shadow: 1px 2px 12px rgba(0, 0, 0, 0.318);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.experience-container ul li .experience-date {
  position: absolute;
  width: 140px;
  height: 35px;
  background-color: #e85c3b;
  border-radius: 15px;
  border: 2px solid black;
  top: -45px;
  color: black;
  font-size: 12px;
  font-family: "Lexend", sans-serif;
  box-shadow: 1px 2px 12px rgba(0, 0, 0, 0.318);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.edu-container ul li:nth-child(odd),
.experience-container ul li:nth-child(odd) {
  float: left;
  clear: right;
  text-align: right;
  transform: translateX(-30px);
}

.edu-container ul li:nth-child(odd) .edu-date,
.experience-container ul li:nth-child(odd) .experience-date {
  right: 50%;
  transform: translateX(50%);
}

.edu-container ul li:nth-child(even),
.experience-container ul li:nth-child(even) {
  float: right;
  clear: left;
  transform: translateX(30px);
}

.edu-container ul li:nth-child(even) .edu-date,
.experience-container ul li:nth-child(even) .experience-date {
  left: 50%;
  transform: translateX(-50%);
}

.edu-container ul li p,
.experience-container ul li p {
  font-size: 12px;
  color: #666;
  font-family: "Lexend", sans-serif;
  line-height: 18px;
}

.edu-title,
.experience-title {
  font-family: "Lexend", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .section {
    margin-top: 60px;
  }

  .skills-section .section-title {
    font-size: 20px;
  }

  .experience-section .section-title {
    font-size: 20px;
  }

  .education-section .section-title {
    font-size: 20px;
  }

  .edu-container ul li .edu-circle,
  .experience-container ul li .experience-circle {
    border: 1px solid #000;
  }

  .edu-container ul li,
  .experience-container ul li {
    border: 1px solid #000;
  }

  .edu-container ul::after,
  .experience-container ul::after {
    border: 1px solid #000;
  }

  .description-outer-box {
    border: 1px solid #000;
  }

  .image-card {
    border: 1px solid #000;
  }

  .edu-container ul li .edu-circle,
  .experience-container ul li .experience-circle {
    border: 1px solid #000;
  }

  .edu-container ul li .edu-date {
    border: 1px solid #000;
  }

  .experience-container ul li .experience-date {
    border: 1px solid #000;
  }

  .about-container {
    padding: 10px;
    margin-top: 90px;
    margin-left: 30px;
    margin-right: 30px;
  }

  .description-outer-box {
    border: 1px solid #000;
  }

  .description-section {
    flex-direction: column;
    text-align: center;
    font-size: 20px;
  }

  .description-content {
    padding-right: 0;
    text-align: center;
    font-size: 20px;
  }

  .description-image {
    margin-top: 20px;
    order: 2;
  }

  .description-name {
    text-align: center;
    font-size: 20px;
  }

  .description-title {
    text-align: center;
    font-size: 14px;
  }

  .description-text {
    text-align: center;
    font-size: 12px;
  }
}