/* Owl Carousel Animations */
.hero-container-carousel .owl-item.active .content h4 {
    animation: fadeInDown 1s ease 0.2s both;
}

.hero-container-carousel .owl-item.active .content h1 {
    animation: fadeInUp 1s ease 0.5s both;
}

.hero-container-carousel .owl-item.active .content p {
    animation: fadeInUp 1s ease 0.8s both;
}

.hero-container-carousel .owl-item.active .content .hero-cta {
    animation: fadeInUp 1s ease 1.1s both;
}

/* Custom Animation Keyframes */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -50px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 50px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-50px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(50px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.8, 0.8, 0.8);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

@keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

/* Slide-specific animations */
.hero-container-item-1 .content {
    transform: translateX(-50px);
    opacity: 0;
    transition: all 1s ease;
}

.hero-container-item-2 .content {
    transform: translateY(50px);
    opacity: 0;
    transition: all 1s ease;
}

.hero-container-item-3 .content {
    transform: scale(0.9);
    opacity: 0;
    transition: all 1s ease;
}

.owl-item.active .hero-container-item-1 .content {
    transform: translateX(0);
    opacity: 1;
}

.owl-item.active .hero-container-item-2 .content {
    transform: translateY(0);
    opacity: 1;
}

.owl-item.active .hero-container-item-3 .content {
    transform: scale(1);
    opacity: 1;
}

/* Stagger animations for CTA buttons */
.hero-cta a:first-child {
    animation-delay: 1.1s !important;
}

.hero-cta a:last-child {
    animation-delay: 1.4s !important;
}

/* Hover effects for buttons */
.hero-cta a {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.hero-cta a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.hero-cta a:hover::before {
    left: 100%;
}

/* Pulse animation for special elements */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.hero-container-carousel h4 span {
    animation: pulse 2s infinite;
}

/* Responsive animations */
@media (max-width: 768px) {
    .hero-container-carousel .owl-item.active .content h4 {
        animation: fadeInDown 0.8s ease 0.2s both;
    }
    
    .hero-container-carousel .owl-item.active .content h1 {
        animation: fadeInUp 0.8s ease 0.4s both;
    }
    
    .hero-container-carousel .owl-item.active .content p {
        animation: fadeInUp 0.8s ease 0.6s both;
    }
    
    .hero-container-carousel .owl-item.active .content .hero-cta {
        animation: fadeInUp 0.8s ease 0.8s both;
    }
}