/* =========================================
   Full-screen Card (Each Page)
   - Glassy Box Effect with dynamic background images.
   - UPDATED: Adjusted background scaling to "contain" for full image visibility.
========================================= */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: contain; /* Changed from 'cover' to 'contain' */
  background-repeat: no-repeat; /* Ensures the image doesn't tile */
  background-position: center; /* Center the image */
  opacity: 0.5; /* Adjust opacity for desired visibility */
  z-index: -1; /* Place behind card content */
}