* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary: #4361ee;
            --primary-light: #4895ef;
            --accent: #f72585;
            --dark: #1e293b;
            --light: #f8fafc;
            --gray: #64748b;
            --light-gray: #e2e8f0;
            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            --body: #1e293b;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: var(--body);
            color: var(--light);
            line-height: 1.6;
            overflow-x: hidden;
            position: relative;
        }

        body::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 10% 20%, rgba(67, 97, 238, 0.1) 0%, transparent 40%),
                        radial-gradient(circle at 90% 80%, rgba(247, 37, 133, 0.1) 0%, transparent 40%);
            z-index: -1;
        }

        .section {
            margin: 0 auto;
        }

        .redirect-container {
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .redirect-bx {
            border-radius: 20px;
            padding: 30px;
            background: rgba(67, 97, 238, 0.1);
            min-width: 450px;
            max-width: 560px;
            margin: auto;
        }

        .redirect-bx .content {
            text-align: center;
            margin: 2rem auto;
        }

        .redirect-bx .content p {
            margin-bottom: 2rem;
        }

        .redirect-bx h3 {
            text-align: center;
            font-size: 1.5rem;
            margin-bottom: 25px;
            color: var(--primary-light);
        }

        .content {
            margin-bottom: 25px;
        }


        .skill-bar {
            height: 16px;
            background: rgba(100, 116, 139, 0.2);
            border-radius: 8px;
            overflow: hidden;
            margin-top: 10px;
        }

        .skill-progress {
            height: 100%;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            border-radius: 8px;
            position: relative;
            width: 100%;
            animation: unfillBar 5s linear forwards;
        }

        .skill-progress::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            animation: progressShine 2s infinite;
        }

        .countdown-text {
            text-align: center;
            margin: 10px 0;
            font-size: 0.9rem;
            color: var(--gray);
        }

        @keyframes unfillBar {
            from {
                width: 100%;
            }
            to {
                width: 0%;
            }
        }

        @keyframes moveCar {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(-450%);
            }
        }

        @keyframes progressShine {
            0% {
                transform: translateX(-100%);
            }
            50% {
                transform: translateX(100%);
            }
            100% {
                transform: translateX(100%);
            }
        }

        @media screen and (max-width: 600px) {
            .redirect-bx{
            max-width: 450px;
            min-width: 350px;
            width: 100%;
            }
        }