body{
    overflow-x: hidden;
}


/* styles.css */
@layer components {
    .nav-link {
        @apply text-gray-700 hover:text-red-600 transition-colors font-medium;
    }

    .form-input {
        @apply w-full px-4 py-2 rounded-lg bg-white/20 backdrop-blur-md 
        border border-white/30 text-white placeholder-white/70 focus:outline-none
        focus:ring-2 focus:ring-red-500;
    }

    .curriculum-card {
        @apply bg-white p-6 rounded-xl shadow-lg transform hover:-translate-y-2 
        transition-all duration-300;
    }

    .gallery-item {
        @apply overflow-hidden rounded-lg transform hover:scale-105 
        transition-transform duration-300 shadow-lg;
    }
}
@layer utilities {
    .animate-slow-zoom {
        animation: slowZoom 20s infinite alternate;
    }

    .animate-fade-in-up {
        animation: fadeInUp 0.8s ease-out forwards;
    }

    .animation-delay-200 {
        animation-delay: 200ms;
    }

    .animation-delay-400 {
        animation-delay: 400ms;
    }
    .hover-scale {
        @apply transform transition-transform duration-300 hover:scale-105;
    }
    
    .card-shadow {
        @apply shadow-lg hover:shadow-xl transition-shadow duration-300;
    }
}

@keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@keyframes float-slow {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-10px, -15px); }
}

.animate-bounce-slow {
    animation: bounce-slow 3s ease-in-out infinite;
}

.animate-bounce-delay {
    animation: bounce-slow 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

.animate-bounce-delay-2 {
    animation: bounce-slow 3s ease-in-out infinite;
    animation-delay: 1s;
}

.animate-bounce-slow-2 {
    animation: bounce-slow 3s ease-in-out infinite;
    animation-delay: 1.5s;
}

.animate-float-slow {
    animation: float-slow 6s ease-in-out infinite;
}

.animate-float-delay {
    animation: float-slow 6s ease-in-out infinite;
    animation-delay: 2s;
}

.animate-float-slow-2 {
    animation: float-slow 6s ease-in-out infinite;
    animation-delay: 4s;
}


@keyframes wiggle {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
}

.animate-wiggle {
    animation: wiggle 3s ease-in-out infinite;
}

.animate-bounce-slow {
    animation: bounce 3s ease-in-out infinite;
}

.animate-float-slow {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
@keyframes slowZoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.aspect-w-4 {
    position: relative;
    padding-bottom: 75%; /* 4:3 Aspect Ratio */
}

.aspect-w-4 > * {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#lightbox {
    animation: fadeIn 0.3s ease-out;
}

#lightbox.hidden {
    animation: fadeOut 0.3s ease-out;
}

#lightbox-img {
    animation: scaleIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

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

/* Loading indicator */
.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid #fff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}