.slide-from-left {
    opacity: 0;
    transform: translateX(-100px);
    transition: all 0.8s ease-out;
}

.slide-from-right {
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.8s ease-out;
}

.slide-from-top {
    opacity: 0;
    transform: translateY(-100px);
    transition: all 0.8s ease-out;
}

.slide-from-bottom {
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.8s ease-out;
}

.fade-in {
    opacity: 0;
    transition: all 0.8s ease-out;
}

.scale-up {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s ease-out;
}

.slide-visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-kite {
    opacity: 0;
    transform: translate(100px, -100px);
    transition: all 1.2s ease-out;
}

/* Circular floating animation for header boy */
@keyframes float-circle {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(7px, -7px);
    }
    50% {
        transform: translate(0, -14px);
    }
    75% {
        transform: translate(-7px, -7px);
    }
    100% {
        transform: translate(0, 0);
    }
}

/* Apply animation to header boy image */
img[src*="boy.png"], img[alt*="Visit Us"] {
    animation: float-circle 2.5s ease infinite;
}