.animation-container {
  position: absolute;
  top: 50px;     /* Decreased from 100px to move it higher */
  right: -20px;  /* Changed from 10px to move it more right */
  width: 200px;
  height: 200px;
  perspective: 1000px;
  perspective-origin: center top;
  transform-style: preserve-3d;
}
  
  .circle {
    width: 150px;
    height: 150px;
    transform-style: preserve-3d;
    position: relative;
    display: block;
  }
  
  .circle::before,
  .circle::after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: center/cover url('../images/education_avatar.png');
  }
  
  .circle::before {
    animation: frontRotate 4s both;
  }
  
  .circle::after {
    filter: brightness(0.2);
    transform: rotateY(-180deg);
    animation: backRotate 4s both;
  }
  
  .circle {
    animation: tiltCircle 1s both;
    transform-origin: center bottom;
  }
  
  @keyframes frontRotate {
    from { clip-path: inset(0 80% 0 0); }
    50%, to { clip-path: inset(0 0% 0 0); }
  }
  
  @keyframes backRotate {
    from { 
      clip-path: inset(0 0 0 20%);
      transform-origin: 20% 0;
    }
    50%, to { 
      clip-path: inset(0 0 0 100%);
      transform-origin: 100% 0;
    }
  }
  
  @keyframes tiltCircle {
    from { transform: rotate(-50deg) }
    to { transform: rotate(-40deg) }
  }