.content5-title {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: transparent;
        flex-direction: column;
        text-align: center;
}

.content5-title p {
        background-color: transparent;
}
.content5-title p:nth-child(1) {
        font-size: clamp(24px, 8vw, 48px);
        font-family: 'supershiny';
}
.content5-title span {
        font-size: clamp(24px, 8vw, 48px);
        font-family: 'supershiny';
        color: var(--primary);
}
.content5-title p:nth-child(2){
        margin-top: 10px;
        background-color: transparent;
        font-size: 16px;
        line-height: 1.2;
        color: var(--text-muted);
}

.content5-title p:nth-child(3){
        margin-top: 10px;
        background-color: var(--primary);
        width: 10%;
        height: 5px;
        border-radius: 10px;
}

/* ############################################################################### */
.content5-main {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
  overflow: hidden;
}

.content5-main p {
        font-size: clamp(16px, 8vw, 32px);
        font-family: 'supershiny';
        z-index: 10000;
        background-color: transparent;
}
.content5-main span {
        font-size: clamp(16px, 8vw, 32px);
        font-family: 'supershiny';
        z-index: 10000;
        color: var(--primary);
        background-color: transparent;
}

/* 88888888888888888888888888888888888888 */

/* Student Circles */
.student {
  background-color: transparent;      
  position: absolute;
  width: 80px;
  text-align: center;
  animation: drift 15s ease-in-out infinite, fade 9s ease-in-out infinite;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.student img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  object-fit: cover;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.student .stars {
        text-align: center;
        background-color: transparent;
  margin-top: 4px;
  font-size: 14px;
  color: gold;
}

.student .comment {
        background-color: transparent;
  display: none;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
  width: 120px;
  text-align: center;
  line-height: 1.3;
}

/* Hover */
.student:hover {
  animation-play-state: paused;
  z-index: 5;
}
.student:hover .comment {
  display: block;
}

/* Motion animation */
@keyframes drift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(40px, -30px); }
  50% { transform: translate(-30px, 50px); }
  75% { transform: translate(50px, 20px); }
  100% { transform: translate(0, 0); }
}

/* Independent fading */
@keyframes fade {
  0%, 100% { opacity: 0; }
  25%, 75% { opacity: 1; }
}

/* Random positions + timing */
.student1 { top: 10%; left: 10%; animation-duration: 16s, 8s; animation-delay: 0s, 0s; }
.student2 { top: 15%; left: 70%; animation-duration: 17s, 9s; animation-delay: 2s, 3s; }
.student3 { top: 30%; left: 25%; animation-duration: 19s, 7s; animation-delay: 3s, 1s; }
.student4 { top: 60%; left: 75%; animation-duration: 20s, 10s; animation-delay: 1s, 2s; }
.student5 { top: 80%; left: 15%; animation-duration: 18s, 12s; animation-delay: 4s, 0s; }
.student6 { top: 40%; left: 60%; animation-duration: 21s, 9s; animation-delay: 3s, 4s; }
.student7 { top: 55%; left: 35%; animation-duration: 19s, 8s; animation-delay: 5s, 1s; }
.student8 { top: 20%; left: 50%; animation-duration: 17s, 11s; animation-delay: 0s, 2s; }
.student9 { top: 75%; left: 60%; animation-duration: 22s, 9s; animation-delay: 2s, 3s; }
.student10 { top: 40%; left: 80%; animation-duration: 18s, 10s; animation-delay: 1s, 1s; }
.student11 { top: 50%; left: 10%; animation-duration: 20s, 11s; animation-delay: 3s, 4s; }
.student12 { top: 25%; left: 85%; animation-duration: 16s, 9s; animation-delay: 4s, 0s; }
.student13 { top: 65%; left: 45%; animation-duration: 21s, 8s; animation-delay: 2s, 2s; }
.student14 { top: 70%; left: 25%; animation-duration: 19s, 10s; animation-delay: 1s, 3s; }
.student15 { top: 30%; left: 40%; animation-duration: 18s, 12s; animation-delay: 3s, 2s; }
.student16 { top: 85%; left: 50%; animation-duration: 22s, 8s; animation-delay: 0s, 1s; }
.student17 { top: 35%; left: 15%; animation-duration: 17s, 11s; animation-delay: 2s, 4s; }
.student18 { top: 45%; left: 70%; animation-duration: 20s, 9s; animation-delay: 1s, 3s; }
.student19 { top: 10%; left: 55%; animation-duration: 23s, 10s; animation-delay: 2s, 0s; }
.student20 { top: 75%; left: 85%; animation-duration: 19s, 8s; animation-delay: 4s, 1s; }
@media (max-width: 550px) {
        .content5 {
                margin-top: 10px;
        }
        .content5-main {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 700px;
  overflow: hidden;
}
}
@media (min-width: 600px) {
        .page5 {
                width: 100%;
                height: 100vh;
        }
        .content5 {
                height: 100%;
                width: 100%;
                display: grid;
                grid-template-rows: 1fr 5fr;
        }
}