/* ---------- Card Gallery ---------- */
        .card-hand {
            perspective: 1000px;
        }

        .playing-card {
            transform-origin: bottom center;
            transition: transform 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6),
                box-shadow 0.6s ease;
        }

        .playing-card:hover {
            transform: rotate(25deg) translateX(30px) translateY(-20px) !important;
            box-shadow: -15px 20px 40px rgba(0, 0, 0, 0.3);
        }



        /* ---------- Hanging Card ---------- */
        .card-container {
            position: absolute;
            top: 40px;
            right: 10px;
            /* Align right on small devices */
            z-index: 10;
            max-width: 100%;
            /* Prevent overflow */
        }

        .attached-card {
            width: 180px;
            /* smaller width for mobile */
        }

        /* Hanger Rope with Animation */
        .hanger-rope {
            position: absolute;
            height: 80px;
            width: 4px;
            background: linear-gradient(to bottom, #d1d5db, #9ca3af);
            left: 50%;
            top: -80px;
            transform: translateX(-50%);
            transform-origin: top center;
            animation: swing 4s ease-in-out infinite alternate;
            z-index: 10;
            border-radius: 2px;
        }

        .hanger-rope::before {
            content: "";
            position: absolute;
            top: -12px;
            left: -10px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, #fcd34d, #f59e0b);
            border: 2px solid #d97706;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        /* Attached Card */
        .attached-card {
            position: relative;
            margin-top: 80px;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(12px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
            padding: 1.5rem;
            width: 210px;
            transform-origin: top center;
            animation: swing 4s ease-in-out infinite alternate;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }


        /* Word Art Styling */
        .attached-card:hover {
            transform: scale(1.03) rotate(2deg);
            box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
        }

        /* ---------- Animations ---------- */
        @keyframes swing {
            0% {
                transform: translateX(-50%) rotate(-8deg);
            }

            100% {
                transform: translateX(-50%) rotate(8deg);
            }
        }

        @keyframes scroll-left {
            0% {
                transform: translateX(0);
            }

            95% {
                transform: translateX(-95%);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .animate-scroll-left {
            animation: scroll-left 100s linear infinite;
        }

        /* ---------- Responsive Fixes ---------- */
        @media screen and (min-width: 1024px) {
            .card-container {
                left: 1088px;
            }
        }

        @media screen and (min-width: 1280px) {
            .card-container {
                left: 1188px;
            }
        }

        @media screen and (min-width: 1440px) {
            .card-container {
                left: 1263px;
            }
        }


        @media screen and (min-width: 2560px) {
            .card-container {
                left: 1863px;
            }
        }


        /* ---------- Project Section ---------- */
        .active-tab {
            background-color: white;
            border-radius: 0.5rem;
            font-weight: 600;
        }

        .inactive-tab {
            background-color: transparent;
        }

        .project-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .hidden-project {
            display: none;
        }

        .fade-in {
            animation: fadeIn 0.5s;
        }

        /* <!-- design display popup  --> */
        .hidden-project {
            display: none !important;
        }

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

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: scale(0.95);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }