/* Base styles for all columns */
.col-md-4 {
    transition: transform 0.3s ease-in-out;
    transform-origin: center center;
    cursor: pointer;
}

/* Hover effect - scale up by 20% */
.col-md-4:hover {
    transform: scale(1.2);
    z-index: 10;
    /* Bring hovered column to front */
    position: relative;
}

/* Ensure images scale smoothly */
.col-md-4 img {
    transition: inherit;
}

/* Ensure overlay boxes scale with the column */
.col-md-4 .shBox {
    transition: inherit;
}

/* Optional: Add subtle shadow on hover for better visual effect */
.col-md-4:hover img {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Prevent layout jumping by adding margin compensation */
.row {
    perspective: 1000px;
    /* Adds depth to the 3D transformation */
}

/* Alternative version with more dramatic effect (uncomment if preferred) */
/*
.col-md-4:hover {
    transform: scale(1.2) translateZ(20px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}
*/

/* Smooth animation for the entire container to prevent layout shifts */
.container {
    overflow: visible;
}

/* Ensure proper spacing during hover */
.col-md-4 {
    margin-bottom: 30px;
    padding: 10px;
}

/* Mobile responsiveness - reduce scale on smaller screens */
@media (max-width: 768px) {
    .col-md-4:hover {
        transform: scale(1.1);
        /* Smaller scale on mobile to prevent overflow */
    }
}