/* Animations CSS */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromBottom {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Apply animations to elements */
.hero-content {
    animation: slideInFromLeft 1s ease-out forwards;
}

.hero-image {
    animation: slideInFromRight 1s ease-out forwards;
}

.section-header {
    animation: fadeIn 1.2s ease-out forwards;
}

.service-card, .portfolio-item, .testimonial-item {
    opacity: 0;
}

.service-card.animate, .portfolio-item.animate, .testimonial-item.animate {
    animation: slideInFromBottom 0.6s ease-out forwards;
}

.about-text {
    animation: slideInFromLeft 1s ease-out forwards;
}

.about-image {
    animation: slideInFromRight 1s ease-out forwards;
}

.cta {
    animation: fadeIn 1.2s ease-out forwards;
}

.btn-primary:hover {
    animation: pulse 1s infinite;
}

/* Ensure animations play properly on mobile devices */
@media (prefers-reduced-motion: reduce) {
    .hero-content, .hero-image, .section-header, 
    .service-card, .portfolio-item, .testimonial-item, 
    .about-text, .about-image, .cta {
        animation: none !important;
        opacity: 1 !important;
    }
    
    .service-card.animate, .portfolio-item.animate, .testimonial-item.animate {
        animation: none !important;
        opacity: 1 !important;
    }
    
    .btn-primary:hover {
        animation: none !important;
    }
}