/* CSS to change Image Background Design to Layered Card (without altering index.php structure) */

.hero-images {
    position: relative;
    z-index: 2;
    margin: 20px;
}

/* Hide the old shape image */
.hero-shape img {
    display: none !important;
}

/* The shiny grey box representing the main background */
.hero-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #9ca4b0 0%, #e1e6ec 30%, #12a89d; 100%); /* Premium shiny metallic grey */
    border-radius: 24px;
    z-index: -1;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

/* The rotated gold outline box behind it */
.hero-shape::before {
    content: '';
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: -5px;
    right: -5px;
    border: 2px solid #bba36a; /* Gold/Coral contour matching screenshot */
    border-radius: 24px;
    transform: rotate(5deg) translate(2px, 2px);
    z-index: -2;
    transition: all 0.4s ease-in-out;
}

.hero-images:hover .hero-shape::before {
    transform: rotate(8deg) scale(1.02) translate(4px, 4px);
}

/* Ensure the hero image matches the box perfectly */
.hero-images > img {
    border-radius: 24px;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    display: block;
}