.about-me-container {
    padding: var(--gap);
}

.about-me-section {
    display: flex;
    align-items: center;
    gap: 80px;  
    justify-content: center;
    max-width: var(--container-width);
    margin: 0 auto;
}

.about-me-content {
    flex: 1;
    max-width: 600px;
}

.about-me-image {
    position: relative;
    z-index: 2; /* Sits on top of SVG */
}

.about-me-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius:0;
    object-fit: cover;
    max-width: 400px;
}

.about-me-visual {
    position: relative;
    flex: 0 0 400px;
    max-width: 400px;
}

.about-me-button {
    margin-top: 12px;
}

.about-socials {
    display: flex;
    gap: 32px;
    margin-top: 30px; /* Space between text and icons */
}

.social-link {
    font-size: 40px;
    color: var(--white);
    transition: transform 0.3s ease, color 0.3s ease;
    text-decoration: none;
}

/* Brand Colors on Hover */
.social-link.tiktok:hover { color: #ff0050; transform: translateY(-3px); }
.social-link.instagram:hover { color: #e1306c; transform: translateY(-3px); }
.social-link.youtube:hover { color: #ff0000; transform: translateY(-3px); }

/* Center them on mobile to match your previous layout change */
@media (max-width: 992px) {
    .about-socials {
        justify-content: center;
    }
}

/* Mobile Shrink */
@media (max-width: 500px) {
    #animated-circle {
        transform: scale(0.5) !important; 
        transform-origin: center; 
    }
}

#animated-circle {
  background:var(--black);
  padding:10px;
  height:80px;
  width:80px;
  border-radius:50%;
  position:absolute;
  top:calc(50% - 40px);
  left:calc(50% - 40px);
  box-shadow:
    178px 0 0 -25px var(--black),
    178px 0 0 -20px var(--white),
    -178px 0 0 -25px var(--black),
    -178px 0 0 -20px var(--white), 
    0 0 0 20px var(--black),
    0 0 0 30px var(--white),
    0 0 0 130px var(--black),
    0 0 0 135px var(--white);
  -webkit-animation: rotate 3s linear infinite;
  animation: rotate 3s linear infinite;
}

#animated-circle::before {
  content: " ";
  position: absolute;
  height:50px;
  width:50px;
  border-radius:50%;
  top: -155px;
  left: 20px;
  background:var(--black);
  border: 5px solid var(--white);
  box-shadow:
    0 355px 0 -5px var(--black),
    0 355px 0 0px var(--white);
  -webkit-animation: reverseRotate 3s linear infinite;
  animation: reverseRotate 3s linear infinite;
}

#animated-circle::after {
  /* Segmented circle code goes here */
  content: " ";
  position: absolute;
  height:280px;
  width:280px;
  left:-90px;
  top:-90px;
  background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSAiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDEwMCAxMDAiID4NCiAgICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlLWRhc2hhcnJheT0iMC45NTIiIHN0cm9rZS13aWR0aD0iOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIvPg0KPC9zdmc+");
  background-repeat: no-repeat;
  z-index:2;
  -webkit-animation: segmentRotate 300s linear infinite;
  animation: segmentRotate 300s linear infinite;
}

@keyframes rotate {
  0%   { transform: rotate(  0deg); }  
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 
    background: var(--black); 
    box-shadow:
      178px 0 0 -25px var(--black),
      178px 0 0 -20px var(--white),
      -178px 0 0 -25px var(--black),
      -178px 0 0 -20px var(--white), 
      0 0 0 20px var(--black),
      0 0 0 30px var(--white),
      0 0 0 130px var(--black),
      0 0 0 135px var(--white);
  }
  12.5%, 37.5%, 62.5%, 87.5% { 
    background: var(--white); 
    box-shadow:
      178px 0 0 -25px var(--white),
      178px 0 0 -20px var(--white),
      -178px 0 0 -25px var(--white),
      -178px 0 0 -20px var(--white), 
      0 0 0 20px var(--black),
      0 0 0 30px var(--white),
      0 0 0 130px var(--black),
      0 0 0 135px var(--white);
  }    
  100% { transform: rotate(360deg); }
}

@keyframes reverseRotate {
  0%   { transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg); }  
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 
    background: var(--black); box-shadow: 0 355px 0 -5px var(--black), 0 355px 0 0px var(--white); 
  }
  12.5%, 37.5%, 62.5%, 87.5% { 
    background: var(--white); box-shadow: 0 355px 0 -5px var(--white), 0 355px 0 0px var(--white); 
  }    
  100% { transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg); }
}
@keyframes segmentRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-32000deg); }
}

@-webkit-keyframes rotate {
  0%   { -webkit-transform: rotate(  0deg); }  
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 
    background: var(--black); 
    box-shadow:
      178px 0 0 -25px var(--black),
      178px 0 0 -20px var(--white),
      -178px 0 0 -25px var(--black),
      -178px 0 0 -20px var(--white), 
      0 0 0 20px var(--black),
      0 0 0 30px var(--white),
      0 0 0 130px var(--black),
      0 0 0 135px var(--white);
  }
  12.5%, 37.5%, 62.5%, 87.5% { 
    background: var(--white); 
    box-shadow:
      178px 0 0 -25px var(--white),
      178px 0 0 -20px var(--white),
      -178px 0 0 -25px var(--white),
      -178px 0 0 -20px var(--white), 
      0 0 0 20px var(--black),
      0 0 0 30px var(--white),
      0 0 0 130px var(--black),
      0 0 0 135px var(--white);
  }    
  100% { -webkit-transform: rotate(360deg); }
}

@-webkit-keyframes reverseRotate {
  0%   { -webkit-transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg); }  
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 
    background: var(--black); box-shadow: 0 355px 0 -5px var(--black), 0 355px 0 0px var(--white); 
  }
  12.5%, 37.5%, 62.5%, 87.5% { 
    background: var(--white); box-shadow: 0 355px 0 -5px var(--white), 0 355px 0 0px var(--white); 
  }    
  100% { -webkit-transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg); }
}
@-webkit-keyframes segmentRotate {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(-32000deg); }
}

/* Responsive: Stack them on mobile */
@media (max-width: 992px) {
    .about-me-section {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }
    
    .about-me-content, 
    .about-me-image {
        flex: 0 0 100%;
    }
    
    .about-me-image {
        width: 100%;
        max-width: 300px; /* Smaller on mobile */
    }
}