/* ============================================================
   about.css — Sun Technologies
   Custom styles for the About page
   Linked via includes/head.php conditionally on about page
   ============================================================ */

/* ── Marquee track wrapper ── */
.uni-track-wrap {
  overflow: hidden;
  padding: 16px 0;
}

/* ── Scrolling track ── */
.uni-track {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  width: max-content;
}

.uni-track-left  { animation: scrollLeft  60s linear infinite; }
.uni-track-right { animation: scrollRight 60s linear infinite; }

.uni-track-wrap:hover .uni-track {
  animation-play-state: paused;
}

@keyframes scrollLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes scrollRight {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* ── Single logo card ── */
.uni-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  width: 130px;
}

/* ── Circle ── */
.uni-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid #ccc;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
}
.uni-circle:hover {
  transform: translateY(-5px) scale(1.07);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

/* ── Logo image ── */
.uni-logo-img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

/* ── Fallback initials ── */
.uni-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* ── University name label ── */
.uni-name {
  font-size: 12px;
  text-align: center;
  color: var(--default-color);
  margin: 0;
  line-height: 1.35;
  font-weight: 500;
  max-width: 120px;
}

/* ── CTA buttons ── */
.about-btn-primary {
  display: inline-block;
  background: #fb8600;
  color: #fff;
  padding: 10px 28px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid #fb8600;
  transition: background 0.3s, color 0.3s;
}
.about-btn-primary:hover {
  background: #e07800;
  border-color: #e07800;
  color: #fff;
}

.about-btn-outline {
  display: inline-block;
  background: transparent;
  color: #fb8600;
  padding: 10px 28px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid #fb8600;
  transition: background 0.3s, color 0.3s;
}
.about-btn-outline:hover {
  background: #fb8600;
  color: #fff;
}

/* ── Responsive ── */
@media (prefers-reduced-motion: reduce) {
  .uni-track { animation: none !important; }
}

@media (max-width: 576px) {
  .uni-circle { width: 90px;  height: 90px; }
  .uni-item   { width: 100px; gap: 7px; }
  .uni-track  { gap: 24px; }
}