/* About Section */
.about-section {
  color: #fff; /* White text for readability */
  /*padding: 60px 20px; /* Add spacing around the section */
  position: relative;
  padding-top: 7%;
  padding-bottom: 2%;
  margin-bottom: 40px;
  background-color: transparent;

}

.about-header {
  align-items: center; /* Vertically align items */
  gap: 20px; /* Add spacing between the image and text */
  margin-bottom: -3%; /* Add spacing below the header */
}

/* Background Animation */
#vantajs-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}


.about-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 90px; /* Space between columns */
  max-width: 1200px;
  margin: 0 auto; 
  position: relative;
  z-index: 1; /* Place the content above the animation */
}

/* Background Animation */
#about-background {
  background-color: #000000; /* Default background color */
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 0; /* Ensure the animation is behind the content */
}

#about-background canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Ensure the canvas stays behind everything */
}


.about-img {
  position: relative;
  margin-left: 0; /* Remove or reduce left margin */
}

.about-id-img {
  width: 500px; /* Fixed width for the image */
  height: 500px; /* Fixed height for the image */
  object-fit: cover; /* Ensure the image fits within the circle */
  border: 2px solid #ffffff; /* White border for contrast */
  justify-content: left;
  align-items: center;
  position: relative;

}


.about-bf-img {
  width: 100px;
  position: absolute;
  bottom: -7.5%;
  right: -10%;
  border-radius: 0; /* No border radius for the flag */
  border: 1px solid #fff; /* White border for consistency */
}

.about-name {
  font-size: 2rem;
  font-weight: bold;
  margin-top: 25px;
  letter-spacing: 1px;
  text-align: center;
}

.typed-container {
  font-size: 1.5rem;
  font-style: italic;
  margin-top: 10px;
  text-align: center;
}

.about-content {
  font-size: 1.2rem;
  max-width: 900px; /* Increased from 700px to 900px */
  text-align: left;
  line-height: 1.8;
  width: 100%;
  height: 100%;

}
.about-content p {
  margin-bottom: 20px;
}
.about-content .list {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 20px;
}
.about-content .list li {
  margin-bottom: 10px;
}

.blockquote {
  margin: 20px 0;
  padding: 20px;
  border-radius: 20px;
  background-color: rgb(62, 59, 59); /* Slightly transparent background */
  border-left: 8px solid var(--color2); /* Accent border */
  font-style: italic;
}

.blockquote-text {
  margin: 0;
  font-size: 1.2rem;
  color: #ffffff; /* Slightly lighter text for the quote */
}