html {
            scroll-behavior: smooth;
        }

        body {
            background-color: #0d0221;
            color: #ffffff;
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
        }

        .cyber-glass {
            background: rgba(13, 2, 33, 0.7);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 42, 109, 0.3);
        }

        .cyber-card {
            background: rgba(13, 2, 33, 0.5);
            border: 1px solid rgba(255, 42, 109, 0.3);
            transition: all 0.3s ease;
        }

        .cyber-card:hover {
            border-color: rgba(255, 42, 109, 0.8);
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(255, 42, 109, 0.2);
        }

        .cyber-button {
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .cyber-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 42, 109, 0.4), transparent);
            transition: 0.5s;
            z-index: -1;
        }

        .cyber-button:hover::before {
            left: 100%;
        }

        /* .skill-bar {
            height: 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            overflow: hidden;
        }

        .skill-progress {
            height: 100%;
            background: linear-gradient(90deg, #ff2a6d, #d300c5);
            border-radius: 3px;
            transition: width 1.5s ease-in-out;
        } */

        .skill-bar {
  position: relative;      /* required for absolute child */
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
  direction: ltr;          /* ensure container is LTR */
}

.skill-progress {
  position: absolute;      /* anchor to left with left:0 */
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;                /* start collapsed at 0 */
  height: 100%;
  border-radius: 3px 0 0 3px;   /* round left side while filling */
  background: linear-gradient(90deg, #ff2a6d, #d300c5);
  transition: width 1.5s cubic-bezier(.2,.9,.2,1);
  transform-origin: left center; /* grow from LEFT */
  transform: none !important;    /* cancel any inherited flips */
}

        .nav-link {
            position: relative;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: #ff2a6d;
            transition: width 0.3s ease;
        }

        .nav-link:hover::after,
        .nav-link.active::after {
            width: 100%;
        }

        #particles-js {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
        }

        .typing-cursor {
            border-right: 2px solid #ff2a6d;
            animation: blink-caret .75s step-end infinite;
        }

        @media print {
            .no-print {
                display: none !important;
            }

            body {
                background-color: white !important;
                color: black !important;
            }

            .cyber-glass,
            .cyber-card {
                background: white !important;
                backdrop-filter: none !important;
                box-shadow: none !important;
                border: 1px solid #ddd !important;
            }
        }