/* ========== SLIDE CONTAINER ========== */
.slide-container {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 20px auto;
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.slide-container iframe {
  display: block;
  width: 100%;
  height: auto;
  /* The Google Slides artwork is 960x540 (true 16:9). This was 960/569, which let
     the slide letterbox inside the frame — that gap is why the overlays never sat
     quite on their objects. Keep this in sync with the real slide size. */
  aspect-ratio: 960/540;
  /* The slide stays fully interactive so YouTube videos, links, and anything else
     embedded in the Google Slide still work. The overlay divs sit above it
     (z-index:10) and capture clicks only inside their own boxes; every other
     click falls through to the slide itself. */
}

/* ========== CLICKABLE OVERLAYS ========== */
.clickable-overlay {
  position: absolute;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  border-radius: 10px;
}

.clickable-overlay:hover {
  background: rgba(255, 215, 0, 0.3) !important;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
  transform: scale(1.02);
}

/* ========== HOME PAGE OVERLAY POSITIONS ========== */
.home-overlay-window { left: 65.5%; top: 29%; width: 16%; height: 23%; }
.home-overlay-calendar { right: 36.5%; top: 26%; width: 11%; height: 12%; }
.home-overlay-library { left: 85%; top: 31%; width: 12%; height: 42%; }
.home-overlay-laptop { left: 23%; top: 50%; width: 15%; height: 15%; }
.home-overlay-plant1 { left: 53%; bottom: 77%; width: 6%; height: 25%; }
.home-overlay-plant2 { right: 36.5%; bottom: 20%; width: 11%; height: 40%; }
.home-overlay-blm { right: 18.5%; top: 16%; width: 9%; height: 10%; }
.home-overlay-globe { left: 11%; top: 49%; width: 8%; height: 12%; }
.home-overlay-clock { left: 1%; top: 0%; width: 8%; height: 10%; }