/* The Glassmorphism Text Box - Centered */
     body {
        background-color: #f8f9fa;
        padding-top: 0px;
      }

      .adv-3d-effect {
        /* Subtle 1px border that acts like a highlight */
        border: 1px solid rgba(255, 255, 255, 0.4);
        /* Outer shadow for depth */
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 0 4px 6px rgba(0, 0, 0, 0.1);
        /* Smooth transition for parallax movement */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-radius: 8px; 
      }

      /* Container for the text overlay to ensure it clips with the image corners */
      .overlay-container {
        position: relative;
        display: block;
        width: 100%;
        text-decoration: none;
        overflow: hidden;
        border-radius: 8px;
      }

      /* The Glassmorphism Text Box */
      .text-overlay {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%); 

  /* FIXED SIZE: This will not change regardless of image size */
  width: 250px;   /* Set this to your preferred fixed width */
  height: 40px;   /* Set this to your preferred fixed height */
  
  /* Flexbox to keep text centered inside the fixed height */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Appearance */
  background: rgba(255, 255, 255, 0.15); 
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  pointer-events: none;
  z-index: 10;
  
  /* Padding only on sides to protect ellipsis */
  padding: 0 10px; 
}

.text-overlay span {
  color: white;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 700;
  font-size: 14px; /* Fixed font size for a fixed box */
  
  /* Ensure text stays on one line */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}