/* Hero image */

box-sizing: border-box;

width: 1240px;
height: 2347px;

border: 1px dashed #9747FF;
border-radius: 5px;

/* Inside auto layout */
flex: none;
order: 17;
flex-grow: 0;

.floating-card {
  background: #f5f5f5;
  padding: 20px;
  border-radius: 15px;
  transition: transform 0.4s ease;
}
.floating-card:hover {
  transform: translateY(-10px) rotate(-1deg);
}
.glassy {
  background: rgba(255, 255, 255, 0.2);   /* semi-transparent white */
  backdrop-filter: blur(10px);            /* frosted glass effect */
  -webkit-backdrop-filter: blur(10px);    /* Safari support */
  border: 1px solid rgba(255, 255, 255, 0.3); /* subtle border */
  border-radius: 15px;                     /* rounded corners */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); /* soft shadow */
  padding: 20px;                           /* internal spacing */
  color: #fff;                             /* text color */
  transition: all 0.3s ease;              /* smooth hover/animation */
}
.cube-hover {
  position: relative;
  display: inline-block;
  padding: 20px 40px;
  background: #1f1f1f;
  color: #f1f1f1;
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
  box-shadow:
    inset 0 0 0 0 rgba(255, 255, 255, 0),
    0 4px 0 #000; /* subtle base edge */
  transform-style: preserve-3d;
}

 .cube-hover {
  background-color: white;         /* keep base color white */
  color: black;                    /* base text color */
  transition: all 0.3s ease;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0); /* no shadow initially */
}

/* the 3D pop effect on hover */
.cube-hover:hover {
  background-color: white;         /* still white on hover */
  color: black;                    /* text stays readable */
  transform: translateY(-6px);
  box-shadow:
    0 6px 0 #00bfff,               /* bright front edge */
    0 12px 20px rgba(0, 191, 255, 0.3); /* soft glow behind */
}