/* Youssef profile photos */
.hero-image {
  position: relative;
  width: 450px;
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.profile-photo {
  display: block;
  width: 340px;
  height: 340px;
  max-width: none;
  object-fit: cover;
  object-position: center 35%;
  border-radius: 50%;
  border: 5px solid var(--cyan, #38bdf8);
  box-shadow: 0 0 35px rgba(56, 189, 248, .42);
  position: relative;
  z-index: 10;
  animation: profileGlow 3s ease-in-out infinite;
  transition: transform .35s ease;
}

.profile-photo:hover {
  transform: scale(1.035);
}

.hero-image::before {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  border: 2px dashed rgba(56, 189, 248, .28);
  border-radius: 50%;
  animation: profileOrbit 18s linear infinite;
}

.orbit-container { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.orbit {
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #111827;
  border: 2px solid var(--cyan, #38bdf8);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--cyan, #38bdf8);
  font-size: 25px;
  box-shadow: 0 0 20px rgba(56, 189, 248, .32);
}
.orbit-1 { top: -3px; left: 50%; transform: translateX(-50%); }
.orbit-2 { right: -3px; top: 50%; transform: translateY(-50%); }
.orbit-3 { bottom: -3px; left: 50%; transform: translateX(-50%); }
.orbit-4 { left: -3px; top: 50%; transform: translateY(-50%); }

.about-photo {
  display: block;
  width: min(340px, 80vw);
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 35%;
  border-radius: 28px;
  border: 2px solid rgba(56, 189, 248, .55);
  box-shadow: 0 0 40px rgba(56, 189, 248, .22);
  transition: transform .35s ease, box-shadow .35s ease;
}
.about-photo:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 50px rgba(56, 189, 248, .32);
}

@keyframes profileOrbit { to { transform: rotate(360deg); } }
@keyframes profileGlow {
  0%, 100% { box-shadow: 0 0 28px rgba(56, 189, 248, .28); }
  50% { box-shadow: 0 0 58px rgba(56, 189, 248, .62); }
}

@media (max-width: 992px) {
  .hero-image { width: 360px; height: 360px; }
  .profile-photo { width: 270px; height: 270px; }
  .hero-image::before { width: 345px; height: 345px; }
}
@media (max-width: 768px) {
  .hero-image { width: 320px; height: 320px; }
  .profile-photo { width: 230px; height: 230px; }
  .hero-image::before { width: 310px; height: 310px; }
  .orbit { width: 45px; height: 45px; font-size: 20px; }
}
@media (max-width: 380px) {
  .hero-image { width: 275px; height: 275px; }
  .profile-photo { width: 200px; height: 200px; }
  .hero-image::before { width: 265px; height: 265px; }
  .orbit { width: 40px; height: 40px; font-size: 17px; }
}