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

            to {
                opacity: 1;
                transform: translate3d(0, 0, 0);
            }
        }

        @keyframes twinkle {

            0%,
            100% {
                opacity: 0.2;
            }

            50% {
                opacity: 1;
            }
        }

        @keyframes pulseSlow {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-15px);
            }
        }

        body {
            background-color: #0f172a;
            color: #e2e8f0;
            background-image:
                radial-gradient(circle at 10% 20%, rgba(123, 97, 255, 0.1) 0px, transparent 1px),
                radial-gradient(circle at 90% 80%, rgba(255, 107, 165, 0.1) 0px, transparent 1px),
                radial-gradient(circle at 30% 50%, rgba(14, 165, 233, 0.1) 0px, transparent 1px);
            background-size: 100% 100%;
        }

        .star {
            position: absolute;
            background-color: white;
            border-radius: 50%;
            animation: twinkle 4s infinite;
            box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.7);
        }

        .constellation-line {
            position: absolute;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.7), transparent);
            transform-origin: left;
        }

        .zodiac-card {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            background: rgba(30, 41, 59, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(139, 92, 246, 0.3);
        }

        .zodiac-card:hover {
            transform: translateY(-10px) scale(1.03);
            box-shadow: 0 20px 40px rgba(123, 97, 255, 0.2);
            border-color: rgba(139, 92, 246, 0.7);
        }

        .glass-effect {
            background: rgba(30, 41, 59, 0.6);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(139, 92, 246, 0.2);
        }

        .horoscope-card {
            background: linear-gradient(145deg, rgba(91, 33, 182, 0.3), rgba(14, 165, 233, 0.2));
            border: 1px solid rgba(139, 92, 246, 0.3);
        }

        .mystical-border {
            position: relative;
        }

        .mystical-border::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #8b5cf6, #06b6d4, transparent);
            border-radius: 100%;
        }

        .active-nav {
            color: #c4b5fd;
            position: relative;
        }

        .active-nav::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, #8b5cf6, #06b6d4);
            border-radius: 2px;
        }

        .scroll-top-btn {
            transform: translateY(100px);
            opacity: 0;
            transition: all 0.4s ease;
        }

        .scroll-top-btn.visible {
            transform: translateY(0);
            opacity: 1;
        }

        .moon-phase {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: linear-gradient(145deg, #1e293b, #0f172a);
            box-shadow:
                0 0 0 8px rgba(139, 92, 246, 0.2),
                0 0 30px rgba(123, 97, 255, 0.3);
            position: relative;
            overflow: hidden;
        }

        .moon-fill {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: linear-gradient(145deg, #c4b5fd, #8b5cf6);
            clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0);
        }

        .tarot-card {
            perspective: 1000px;
            transform-style: preserve-3d;
            transition: transform 0.6s;
        }

        .tarot-card:hover {
            transform: rotateY(15deg) rotateX(10deg) translateY(-10px);
        }

        .tarot-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }

        .tarot-card:hover .tarot-card-inner {
            transform: rotateY(180deg);
        }

        .tarot-card-front,
        .tarot-card-back {
            position: absolute;
            width: 100%;
            height: auto;
            backface-visibility: hidden;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .tarot-card-back {
            transform: rotateY(180deg);
            background: linear-gradient(145deg, rgba(91, 33, 182, 0.7), rgba(14, 165, 233, 0.5));
            border: 1px solid rgba(139, 92, 246, 0.5);
        }

        .tarot-card-front {
            background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.9));
            border: 1px solid rgba(139, 92, 246, 0.3);
        }

        #full {
            margin-top: 20%;
        }

        @media (min-width: 1024px) {
            .lg\:py-24 {
                padding-top: 2rem !important;
                padding-bottom: 2rem !important;
            }
        }