/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* Animations */
@keyframes zoomBackground {
    from {
        background-size: 100%; /* Start with original size */
    }
    to {
        background-size: 110%; /* Increase background size on hover (zoom effect) */
    }
}

@keyframes growAndFadeIn {
    0% {
        opacity: 0; /* Start with opacity 0 */
        transform: scaleX(0); /* Start with no width */
        transform-origin: left; /* Set the transform origin to the left */
    }
    100% {
        opacity: 1; /* End with opacity 1 */
        transform: scaleX(1); /* End with full width */
        transform-origin: left; /* Set the transform origin to the left */
    }
}

.proj-list {
    transition: opacity 1s ease-in-out, transform 0.5s ease-in-out; /* Specify transitions for opacity and transform */
}

.proj-list:hover {
    animation: zoomBackground 0.7s ease-in-out forwards; /* Apply the animation on hover */
}

.proj-hover {
    transition: all 0.3s ease-in-out;
    opacity: 0;
}

.proj-list:hover .proj-hover {
     opacity: 1;
}
.proj-list:hover .proj-hover img {
    animation-delay: 5s; /* Add a delay of 0.2 seconds */
    animation: growAndFadeIn 0.3s ease forwards; /* Apply the animation */
}