project.css

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}
.first-text, .second-text , .third-text ,.first-project,.second-project,.third-project {
    opacity: 0; /* Hide all texts before the animation starts */
    animation-fill-mode: forwards; /* Keep the final state after the animation ends */
}

.first-text {
    animation: fadeIn 0.7s ease-in-out forwards; /* First text appears immediately */
}

.second-text {
    animation: fadeIn 0.7s ease-in-out forwards 0.7s; /* Second text appears after 0.7s */
}
.third-text {
    animation: fadeSlideIn 0.7s ease-in-out forwards 1.4s; /* Second text appears after 0.7s */
}
.first-project {
    animation: fadeSlideIn 0.7s ease-in-out forwards 1.9s; /* Second text appears after 0.7s */
}
.second-project {
    animation: fadeSlideIn 0.7s ease-in-out forwards 2.4s; /* Second text appears after 0.7s */
}
.third-project {
    animation: fadeSlideIn 0.7s ease-in-out forwards 2.9s; /* Second text appears after 0.7s */
}

@keyframes fadeIn {
    0% {
        opacity: 0;
       
    }
    100% {
        opacity: 1;
       
    }
}
@keyframes fadeSlideIn {
    0% {
        opacity: 0;
        transform: translateY(30px); 
    }
    100% {
        opacity: 1;
        transform: translateX(0); /* Move the text back to its original position */
    }
}



.see-more  {
    opacity: 0;
    animation: fadeSlideIn 1s ease-in-out 1.5s forwards,pulse 1s infinite;
    box-shadow: 0px 10px 20px rgba(255, 193, 7, 0.6);
}