body {
    font-family: 'Inter', sans-serif;
    background-color: #f8f8f8; /* Light gray background like the reference site */
    color: #111111;
}

/* Smooth transition for hover effects */
.project-card .overlay {
    transition: opacity 0.3s ease-in-out;
}

.project-card:hover .overlay {
    opacity: 1;
}

.project-card img {
    transition: transform 0.3s ease-in-out;
}

.project-card:hover img {
    transform: scale(1.05);
}

#hero-text {
    transition: transform 0.2s ease-out; /* Smooth transition for the effect */
}

.shape {
     transition: transform 0.2s ease-out;
}

/* Styles for scroll animation */
.project-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.project-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}