.about-section {
   margin-top: clamp(5rem, 3.7676rem + 5.2582vw, 8.5rem);
   margin-bottom: clamp(5.5rem, 4.9718rem + 2.2535vw, 7rem);
   /* margin-bottom: clamp(9.5rem, 8.6197rem + 3.7559vw, 12rem); */
}

.about-heading-container {
   /* border-bottom: .59px solid var(--works-border-color); */
   display: flex;
   flex-direction: column;
   gap: .5rem;
   margin-bottom: clamp(3rem, 1.9437rem + 4.5070vw, 6rem);
}

.about-title {
   color: var(--main-section-title-color);
   font-family: var(--font-family-heading);
   font-size: var(--font-size-h2);
   opacity: 0;
   animation: bounce .55s ease-in-out 500ms forwards;
   -webkit-animation: bounce .55s ease-in-out 500ms forwards;
}

.about-desc {
   font-size: var(--font-size-text);
   opacity: 0;
   animation: bounce .55s ease-in-out 620ms forwards;
   -webkit-animation: bounce .55s ease-in-out 620ms forwards;
}

.about-content {
   display: flex;
   flex-wrap: wrap;
   gap: clamp(3rem, 2.2958rem + 3.0047vw, 5rem);
}

.about-content-text-container {
   display: flex;
   flex-direction: column;
   gap: 2rem;
   max-width: 35rem;
}

.about-content-text-container-top,
.about-content-text-container-middle,
.about-content-text-container-bottom {
   display: flex;
   flex-direction: column;
   gap: .5rem;
}

.about-content-text-heading {
   color: var(--main-section-title-color);
   font-size: var(--font-size-text);
   font-weight: 500;
}

.about-content-text-body {
   font-size: var(--font-size-text);
}

.about-content-text-body-last {
   font-size: var(--font-size-text);
   margin-top: clamp(0rem, -0.7042rem + 3.0047vw, 2rem);
}

.about-content-text-body-last a {
   color: var(--main-section-title-color);
}

.about-content-image-container {
   background-color: var(--profile-bg-color);
   border: 2.5px solid var(--profile-bg-color);
   border-radius: .3rem;
   width: clamp(17.5rem, 16.6197rem + 3.7559vw, 20rem);
   height: clamp(18.5rem, 17.2676rem + 5.2582vw, 22rem);
   position: relative;
}

.about-content-image {
   border-radius: .3rem;
   width: clamp(17.5rem, 16.6197rem + 3.7559vw, 20rem);
   height: clamp(18.5rem, 17.2676rem + 5.2582vw, 22rem);
   object-fit: cover;
   position: absolute;
   right: 1.1rem;
   top: 1.1rem;
}



@media screen and (max-width: 75em) {
   .about-content {
      justify-content: center;
   }
   .about-content-text-container {
      max-width: 100%;
   }
}