html, body {
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body{
  font-family: "Poppins", sans-serif;
  background: linear-gradient(180deg,#005035,#007c52);
  color:#222222;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  min-height: 100vh;
  padding-bottom: 58px; /* match footer height exactly */
  box-sizing: border-box;
  overflow-x: hidden;
  margin: 0;
}

main{ width:100%; display:flex; flex-direction:column; align-items:center; }

/* Header */
header{  margin-top:1.3rem; text-align:center; }
h1{ font-size:2rem; font-weight:700; color: #f1e6b2; }
h2{ font-size:1.1rem; color:#899064; margin-top:0.25rem; }
h3{ font-size:.95rem; color:#899064; margin-top:0.3rem; }

/* Alma Mater Carousel */
.alma-mater-carousel {
  text-align: center;
  margin: 5px 0;
  max-height: 40px;
  display: block; /* Default display for desktop */
}

.carousel-text {
  color: #f1e6b2;
  font-size: 1rem;
  font-style: italic;
  opacity: 1;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.carousel-text.active {
  opacity: 1;
  transform: translateY(0);
}

/* Hide alma mater on mobile devices */
@media (max-width: 550px) {
  .alma-mater-carousel {
    display: none;
  }
}

/* Container */
.circle-container{
  position:relative;
  /* increased by 50% */
  /* now increased by an additional 15% */
  width:621px;
  height:621px;
  margin:0.5rem auto 2rem auto;
  top: -65px;
}

/* Center image */
.center-image{
  /* increased by 50% then an extra 15% */
  width:215px;
  height:215px;
  border-radius:50%;
  border:10px solid #005035;
  object-fit:cover;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  display:block; /* important for measurement */
  /* ensure the center image sits above orbiting images */
  z-index: 20;
  background: linear-gradient(135deg,#e6eefc,#ffffff); /* subtle fallback background */
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Orbit wrapper */
.orbit{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  pointer-events: none; /* allow clicks only on images */
}

/* Orbit images */
.orbit-image{
  position:absolute;
  /* increased by 50% then an extra 15% */
  width:145px;
  height:145px;
  border-radius:50%;
  border:10px solid #a49665;
  object-fit:cover;
  cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease;
  display:block; /* important for measurement */
  pointer-events: auto;
  background: #eef2ff; /* placeholder color if src missing */
  z-index: 5; /* sit below the center image by default */
}

/* Hover */
.orbit-image:hover{
  transform:scale(1.18);
  box-shadow:0 10px 20px rgba(0,0,0,0.18);
  z-index: 15; /* raise slightly on hover but still below center image */
}

/* Center image hover effect */
.center-image:hover {
  transform: translate(-50%, -50%) scale(1.10);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  z-index: 25;
}

/* Popup */
.popup{
  display:none;
  position:fixed;
  right:70%;
  top:50%;
  transform:translateY(-50%);
  background:#fff;
  padding:1rem 1.25rem;
  border-radius:12px;
  box-shadow:0 8px 30px rgba(0,0,0,0.12);
  max-width:360px;
}
.popup p{ color:#0f172a; }

/* Image Display */
.image-display {
  display: none;
  position: fixed;
  left: 70%;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.image-display img {
  max-width: 300px;
  max-height: 300px;
  border-radius: 8px;
  display: block;
}

.close-btn{ 
  position:absolute; 
  right:8px; 
  top:6px; 
  background:transparent; 
  border:none; 
  font-size:1.2rem; 
  cursor:pointer; 
}

/* Footer */
footer{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 0.9rem 0;
  background: #a49665;
  color: #ffffff;
  z-index: 50;
  height: 50px;
  box-sizing: border-box;
}

/* Responsive */
@media (max-width:550px){
  .circle-container{ width:90vw; height:90vw; max-width:483px; max-height:483px; top: -30px;}
  .center-image{ width:173px; height:173px; }
  .orbit-image{ width:107px; height:107px; }
  body{ justify-content:center; padding-bottom: 70px; }
  header{margin-bottom: 1.5rem; margin-top: 0;}
  main{ padding-bottom:70px; }
  footer { height: 70px; }
}

@media (max-width: 550px) and (max-height: 1000px) {
  .circle-container {
    height: auto !important;
    width: 100% !important;
    max-width: none !important;
    padding: 20px;
  }
  
  .center-image {
    position: relative;
    transform: none;
    margin: 0 auto 30px;
    left: auto;
    top: auto;
  }
  
  .center-image:hover, .center-image:active {
    transform: scale(1.10) !important;
  }
  
  .orbit {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }
  
  .orbit-image {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 120px;
    max-width: 120px;
    height: 120px;
    max-height: 120px;
  }
  
  .image-display {
    display: none !important;
  }
  
  .popup {
    right: auto !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90% !important;
    text-align: center !important;
    z-index: 30 !important;
  }
  
  .image-display {
    display: none !important;
  }

  footer{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 0.5rem 0;
  background: #222222;
  color: #ffffff;
  z-index: 50;
  height: 30px;
  box-sizing: border-box;
}
}