.project-block {
            position: relative;
            width: 100%; /* Adjust size as needed */
            overflow: hidden;
            aspect-ratio: 1;
        }

        .project-block img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures square image without distortion */
            position: absolute;
            transition: opacity 0.5s ease-in-out;
        }

        .project-block .hover-img {
            opacity: 0; /* Hidden by default */
        }

        /* Hover effect */
        .project-block:hover .hover-img {
            opacity: 1; /* Show second image */
        }

        .project-block:hover .main-img {
            opacity: 0; /* Hide first image */
        }

        .project-info {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 10px;
            background: rgba(0, 0, 0, 0.7); /* Dark background behind title */
            color: #fff;
            text-align: center;
            opacity: 0; /* Hidden initially */
            transform: translateY(100%);
            transition: opacity 0.5s, transform 0.5s;
            color: #fff;
            text-decoration: none;
            font-size: 18px;
            font-weight: bold;
        }

        .project-block:hover .project-info {
                opacity: 1;
    transform: translateY(50%);
    bottom: 50%;
        }

        .project-info a {
            color: #fff;
            text-decoration: none;
            font-size: 18px;
            font-weight: bold;
        }