.hero {
    background: 
        radial-gradient(circle, rgba(214, 244, 255, 0.8) 0%, rgba(196, 234, 248, 0.5) 10%, rgba(255, 255, 255, 1) 70%),
        white; /* Radial gradient with a white background */
    position: relative;
    overflow: hidden; /* To hide overflow of tilted images */
}
.grid-lines {
    background-image: linear-gradient(90deg, rgba(211, 211, 211, 0.5) 0.5px, transparent 1px),
                      linear-gradient(180deg, rgba(211, 211, 211, 0.5) 1px, transparent 1px);
    background-size: 50px 50px; /* Adjust grid size */
}.tilted-image {
    width: 150px; /* Adjust image width */
    position: absolute;
    z-index: 100; /* Ensure images are above the grid lines */
    transition: transform 0.3s;
    background-color: none; /* Add a white background to block grid lines */
    padding: 10px; /* Add padding around the image */
    border-radius: 10px; /* Optional: Add rounded corners for better visuals */
}

.tilted-image:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
}