@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
    font-family: 'Inter', sans-serif;
}

.gradient-bg {
    /* background: linear-gradient(135deg, #059669 0%, #10b981 50%, #d97706 100%); */
    background: linear-gradient(135deg, #f59e0b 0%, #eab308 25%, #84cc16 50%, #22c55e 75%, #f59e0b 100%);
}

.gold-gradient {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.green-gradient {
    background: linear-gradient(135deg, #059669, #10b981);
}

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

.pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
    opacity: 0;
    transform: translateY(30px);
}

.scale-hover {
    transition: transform 0.3s ease;
}

.scale-hover:hover {
    transform: scale(1.05);
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-400 { animation-delay: 0.4s; }
.animate-delay-600 { animation-delay: 0.6s; }

.islamic-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M30 30c0-11.046-8.954-20-20-20s-20 8.954-20 20 8.954 20 20 20 20-8.954 20-20zm-20-18c9.941 0 18 8.059 18 18s-8.059 18-18 18S-8 39.941-8 30s8.059-18 18-18z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* 3d  */
.card-3d {
    transform-style: preserve-3d;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
}

.card-3d:hover {
    transform: rotateY(5deg) rotateX(5deg) translateZ(20px);
}

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

.floating-delayed {
    animation: floating 3s ease-in-out infinite;
    animation-delay: 1s;
}

.floating-delayed-2 {
    animation: floating 3s ease-in-out infinite;
    animation-delay: 2s;
}

@keyframes floating {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

.slide-in {
    animation: slideIn 0.8s ease-out forwards;
}

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

.fade-in {
    animation: fadeIn 1s ease-out forwards;
}

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

.glassmorphism {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.text-shadow {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.gradient-text {
    background: linear-gradient(45deg, #f59e0b, #eab308, #84cc16);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
    from {
        box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
    }
    to {
        box-shadow: 0 0 40px rgba(245, 158, 11, 0.8);
    }
}

.perspective-1000 {
    perspective: 1000px;
}

.transform-3d {
    transform-style: preserve-3d;
}