html {
            scroll-behavior: smooth;
            scrollbar-gutter: stable;
            font-size: clamp(14px, 2vw, 18px);
        }

        h1,
        p,
        span {
            font-size: 16px;
        }


        /* Remove outlines, borders, and shadows for buttons, cards, and containers */
        button,
        .card,
        .tab-btn,
        .tabs-container,
        div,
        input,
        textarea {

            box-shadow: none !important;
        }


        @font-face {
            font-family: 'Akira';
            src: url('./font/Akira.otf') format('opentype');
            font-weight: normal;
            font-style: normal;
        }

        @font-face {
            font-family: 'Quahon';
            src: url('./font/Quahon.otf') format('opentype');
            font-weight: normal;
            font-style: normal;
        }

        @font-face {
            font-family: 'Verdana';
            src: url('./font/Verdana.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        @font-face {
            font-family: 'UniSansHeavy';
            src: url('./font/uni/Uni\ Sans\ Heavy.otf') format('opentype');
            font-weight: normal;
            font-style: normal;
        }

        .custom-line-height {
            line-height: 1;
        }


        .transparent-colored-text {
            background: linear-gradient(to right, #6b62f5, #cf56ff);
            /* Example: #FFA500 to red */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }


        /* Splash Intro Styling */
        @import url('https: //fonts.googleapis.com/css2?family=Inter: wght@700&display=swap');

        .grid-overlay {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 20px 20px;
            background-color: rgba(22, 4, 39, 0.2);
            /* Darken the background */
            /*backdrop-filter: blur(2px); */
            /* Remove this or naur */
        }

        #splash {
            background: radial-gradient(ellipse at center, #050011 0%, #0a0a2a 100%);
            background-size: 200% 200%;
            animation: glowPulse 5s ease-in-out infinite;
            position: fixed;
            inset: 0;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            opacity: 1;
            visibility: visible;
            transform: scale(1);
            transition: transform 0.5s ease;
        }

        #splash.zoom-blur-out {
            animation: zoomBlurOut 1.5s ease forwards;
        }

        /* Animate all contents together */
        #splash * {
            transition: opacity 2.5s ease-in-out;
        }

        #splash-icons {
            display: flex;
            gap: 2rem;
            margin-bottom: 1.5rem;
            animation: iconGlowPulse 6s ease-in-out infinite;
        }

        .glow-circle {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            border: 1.5px solid rgba(255, 255, 255, 0.15);
            background: rgba(255, 255, 255, 0.03);
            box-shadow: 0 0 20px rgba(140, 85, 255, 0.25), 0 0 35px rgba(28, 167, 236, 0.25) !important;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .glow-circle:hover {
            box-shadow: 0 0 30px rgba(173, 77, 252, 0.4), 0 0 60px rgba(122, 31, 162, 0.3);
        }

        .lucide-icon {
            width: 28px;
            height: 28px;
            stroke: #ffffff;
            transition: stroke 0.3s ease;
        }

        .glow-circle:hover .lucide-icon {
            stroke: #ffffff;
        }

        @keyframes zoomBlurOut {
            0% {
                transform: scale(1);
                opacity: 1;
                filter: blur(0px);
            }

            100% {
                transform: scale(1.3);
                opacity: 0;
                filter: blur(10px);
                visibility: hidden;
            }
        }


        /* Animate container children with stagger */
        #splash-icons .glow-circle {
            opacity: 0;
            transform: scale(0.5) translateY(20px);
            animation: iconEntrance 0.8s ease-out forwards;
        }

        #splash-icons .glow-circle:nth-child(1) {
            animation-delay: 0.2s;
        }

        #splash-icons .glow-circle:nth-child(2) {
            animation-delay: 0.4s;
        }

        #splash-icons .glow-circle:nth-child(3) {
            animation-delay: 0.6s;
        }

        #splash-icons .glow-circle:nth-child(4) {
            animation-delay: 0.8s;
        }

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

        @keyframes glowPulse {

            0%,
            100% {
                box-shadow: 0 0 60px rgba(28, 167, 236, 0.3), 0 0 90px rgba(122, 31, 162, 0.2) inset;
            }

            50% {
                box-shadow: 0 0 80px rgba(122, 31, 162, 0.6), 0 0 120px rgba(28, 167, 236, 0.4) inset;
            }
        }


        .flyin-container {
            display: flex;
            gap: 1rem;
            justify-content: center;
            margin-top: 1rem;
        }

        .flyin-word {
            font-family: 'Poppins', sans-serif;
            font-size: 4rem;
            font-weight: 700;
            opacity: 0;
            transform: translateX(-100px);
            background: linear-gradient(90deg, #8634e0, #9be2ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: flyIn 1.3s forwards;
        }

        .flyin-word.white {
            background: none;
            -webkit-text-fill-color: #fff9f9;
        }

        .flyin-word.delay-4 {
            animation-delay: 0.4s;
        }

        .flyin-word.delay-5 {
            animation-delay: 0.9s;
        }

        .flyin-word.from-bottom {
            transform: translateY(100px);
            /* from bottom */
            animation: flyInUp 1.3s forwards;
            font-family: 'UniSansHeavy';
            font-size: 4rem;
            font-weight: 700;
        }

        .flyin-word.from-bottom.delay-2 {
            animation-delay: 0.4s;
        }


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

        @keyframes flyIn {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes glowGradient {
            from {
                text-shadow: 0 0 10px #c506ff;
            }

            to {
                text-shadow: 0 0 25px #9b06ff, 0 0 40px #aaa;
            }
        }

        @keyframes iconEntrance {
            from {
                transform: translateY(-30px);
                opacity: 0;
            }

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


        body {
            font-family: 'Helvetica', sans-serif;
            scroll-behavior: smooth;
            position: relative;
            overflow-x: hidden;
            width: 100%;
            background: linear-gradient(to bottom, #0d011d, #1e0030);
        }

        .nav-pattern {
            background-image: url("data: image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http: //www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.15'%3E%3Cpath d='M0 0h20L0 20z'/%3E%3Cpath d='M20 0v20H0z' fill-opacity='0.1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }

        .footer-pattern {
            background-image: url("data: image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http: //www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.15'%3E%3Cpath d='M0 0h20L0 20z'/%3E%3Cpath d='M20 0v20H0z' fill-opacity='0.1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background-size: cover;
            background-position: center;
            pointer-events: none;
            animation: flowBackground 60s linear infinite;
        }

        @keyframes flowBackground {
            0% {
                background-position: 0% 0%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 0%;
            }
        }

        .gradient-bg {
            background: #2c0452;
            color: #fff9f9;
        }

        .gradient-bg-alt {
            background: #1a0030;
            color: #fff9f9;
        }

        .gradient-bg-light {
            background: #2a044f;
            color: #d9c6f7;
        }

        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .testimonial-card:hover {
            transform: scale(1.03);
        }

        .chat-message {
            animation: fadeIn 0.5s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

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

        .typing-indicator span {
            animation: blink 1.4s infinite both;
        }

        .typing-indicator span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .typing-indicator span:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes blink {
            0% {
                opacity: 0.1;
            }

            20% {
                opacity: 1;
            }

            100% {
                opacity: 0.1;
            }
        }

        .skill-bar {
            height: 8px;
            border-radius: 4px;
            background-color: #1c1232;
            overflow: hidden;
            position: relative;
            z-index: 10;
        }

        .skill-progress {
            height: 100%;
            border-radius: 4px;
            position: relative;
        }

        .skill-progress::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.2);
            animation: shimmer 2s infinite;
            transform: translateX(-100%);
        }

        @keyframes shimmer {
            100% {
                transform: translateX(100%);
            }
        }

        .expert {
            width: 98%;
            background: #1ca7ec;
        }

        .advanced {
            width: 80%;
            background: #1f2f98;
        }

        .knowledgeable {
            width: 60%;
            background: #6f4cff;
        }

        .basic {
            width: 40%;
            background: #3b1c65;
        }


        /* Holographic button hover effect */
        .holo-button {
            position: relative;
            display: inline-block;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 500;
            background: rgba(27, 0, 48, 0.8);
            /* semi-transparent */
            color: #e7d6ff;
            overflow: hidden;
            transition: transform 0.4s ease, box-shadow 0.4s ease;
            z-index: 1;
        }

        .holo-button::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(0deg,
                    transparent,
                    transparent 30%,
                    rgba(102, 0, 255, 0.129),
                    transparent 70%);
            transform: rotate(-45deg);
            animation: holoScan 3s linear infinite;
            z-index: 0;
            pointer-events: none;
        }

        .holo-button:hover {
            transform: scale(1.05);
            box-shadow: 0 0 30px rgba(173, 77, 252, 0.4), 0 0 60px rgba(122, 31, 162, 0.3);
        }

        .holo-button:hover::before {
            opacity: 1;
            transform: rotate(-45deg) translateY(100%);
        }


        .holo-btn {
            position: relative;
            display: inline-block;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 500;
            background: rgba(27, 0, 48, 0.8);
            /* semi-transparent */
            color: #e7d6ff;
            overflow: hidden;
            transition: transform 0.4s ease, box-shadow 0.4s ease;
            z-index: 1;
        }

        .holo-btn::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(0deg,
                    transparent,
                    transparent 30%,
                    rgba(0, 255, 255, 0.3),
                    transparent 70%);
            transform: rotate(-45deg);
            animation: holoScan 3s linear infinite;
            z-index: 0;
            pointer-events: none;
        }

        .holo-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(135, 0, 255, 0.4);
        }

        .holo-btn:hover::before {
            opacity: 0;
            transform: rotate(-45deg) translateY(100%);
        }


        /* Glow effect */
        .glow-button {
            box-shadow: 0 0 20px rgba(140, 85, 255, 0.25), 0 0 35px rgba(28, 167, 236, 0.25);
            /* subtle base glow */
        }

        .glow-button:hover {
            transform: scale(1.05);
            box-shadow:
                0 0 30px rgba(173, 77, 252, 0.4),
                0 0 60px rgba(122, 31, 162, 0.3);
        }


        /* Optional: Smooth text on top of effect */
        .holo-button span,
        .holo-button {
            position: relative;
            z-index: 2;
        }

        /*Double-sided card hover effect*/
        .card {
            perspective: 1000px;
            cursor: pointer;
            height: 100%;
            width: 100%;
            position: relative;
        }

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

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

        .card-front,
        .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 0.75rem;
            /* match Tailwind rounded-xl */
            overflow: hidden;
        }

        .card-front {
            z-index: 2;
            transform: rotateY(0deg);
        }

        .card-back {
            transform: rotateY(180deg);
            z-index: 1;
        }

        /* Work Sample Hover Zoom + Holographic Effect */
        .work-sample-card {
            position: relative;
            overflow: visible;
            transition: transform 0.4s ease-in-out;
            z-index: 1;
        }

        .work-img {
            width: 100%;
            height: auto;
            object-fit: cover;
            transition: transform 0.5s ease;
            transform: translateZ(0);
            backface-visibility: hidden;
            will-change: transform;
        }

        .work-sample-card:hover .work-img {
            transform: scale(1.2) translateY(-10px);
            z-index: 10;
            box-shadow: 0 0 30px rgba(0, 229, 255, 0.4);
        }

        .work-sample-card:hover {
            z-index: 20;
            position: relative;
        }


        /* Gradient text effect */
        .gradient-text {
            background: linear-gradient(to right, #221176, #56f0ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 600;
        }

        /* Gradient underline using pseudo-element */
        /* Default nav link style (l-r-w) */
        .nav-link {
            position: relative;
            padding: 0.25rem 0;
            color: #fff9f9 !important;
            /* Always l-r-w unless active */
            transition: all 0.3s ease;
        }

        /* Underline default: hidden */
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background: linear-gradient(to right, #8d75ff, #56f0ff);
            /* Gradient underline */
            transition: width 0.3s ease;
        }

        /* Show gradient underline only on active */
        .nav-link:hover::after,
        .nav-link.active::after {
            width: 100%;
        }

        /* Active link gradient text */
        .nav-link.active {
            background: linear-gradient(to right, #8d75ff, #56f0ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 600;
        }

        /* Compact navigation styles */
        .nav-compact {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            background: linear-gradient(to right, rgba(26, 26, 26, 0.95), rgba(51, 51, 51, 0.95), rgba(26, 26, 26, 0.95)) !important;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        .nav-blur {
            background-color: rgba(26, 26, 26, 0.3);
            /* dark transparent */
            backdrop-filter: blur(3px);
            /* actual blur */
            -webkit-backdrop-filter: blur(3px);
            transition: all 0.3s ease-in-out;
        }


        /* Profile Card Hover Effect */
        .profile-card {
            cursor: pointer;
            perspective: 1000px;
        }

        .profile-card:hover .card-front {
            transform: translateY(-20px);
            opacity: 0;
        }

        .profile-card:hover .card-back {
            transform: translateY(0);
            opacity: 1;
        }

        .card-front,
        .card-back {
            backface-visibility: hidden;
            will-change: transform, opacity;
        }

        .card-back {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
        }


        @keyframes holoScan {
            0% {
                transform: rotate(-45deg) translateY(-100%);
                opacity: 0.2;
            }

            50% {
                opacity: 0.5;
            }

            100% {
                transform: rotate(-45deg) translateY(100%);
                opacity: 0.2;
            }
        }

        /*Animation for Header after Splash Entrance*/
        @keyframes slideDown {
            0% {
                transform: translateY(-100%);
                opacity: 0;
            }

            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* NAV DEFAULT: transparent, no blur when idle */
        #main-nav {
            background: transparent !important;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            box-shadow: none;
            transition: all 0.4s ease;
        }

        /* NAV WHILE SCROLLING: slight glass + blur */
        #main-nav.scrolled {
            background: transparent !important;
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }

        /* NAV TEXTS stay l-r-w*/
        #main-nav a {
            color: #fff9f9 !important;
        }

        /* Compact style when scrolling down */
        #main-nav.nav-compact .container {
            padding-top: 0.25rem !important;
            padding-bottom: 0.25rem !important;
        }

        #main-nav.nav-compact img {
            height: 2.5rem !important;
            /* adjust as needed */
        }

        /* Shared animation base */
        .hero-animate {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeSlideUp 1.6s cubic-bezier(.4, 0, .2, 1) forwards;
        }

        @keyframes fadeSlideUp {
            0% {
                opacity: 0;
                transform: translateY(30px);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }


        /* Optional alternate directions */
        .hero-animate-left {
            transform: translateX(-80px);
            animation-name: fadeSlideLeft;
        }

        .hero-animate-right {
            transform: translateX(80px);
            animation-name: fadeSlideRight;
        }

        .hero-animate-scale {
            transform: scale(2);
            animation-name: fadeScaleUp;
        }

        .hero-animate-left-icons {
            transform: translateX(-200px);
            animation-name: fadeScaleUp;
        }

        /* Animation variants */
        @keyframes fadeSlideLeft {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes fadeSlideRight {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes fadeScaleUp {
            to {
                opacity: 1;
                transform: scale(1);
            }
        }


        /* 3D Transform Styles for Testimonials (Updated Scale + Consistent Transitions) */
        .testimonial-rotate-left {
            transform: perspective(1500px) rotateY(-22deg) scaleX(0.98);
            transform-origin: right;
            opacity: 0.75;
            transition: all 0.5s ease;
        }

        .testimonial-rotate-right {
            transform: perspective(1500px) rotateY(22deg) scaleX(0.98);
            transform-origin: left;
            opacity: 0.75;
            transition: all 0.5s ease;
        }

        .testimonial-hover:hover {
            transform: rotateY(0deg) scale(1.07);
            opacity: 1;
            z-index: 20;
        }

        .testimonial-center {
            transform: scale(1.08);
            z-index: 10;
        }


        /* When in view */
        .scroll-in-view {
            opacity: 1 !important;
            transform: translateY(0) scale(1) !important;
        }

        /* Initial hidden state with movement */
        .scroll-animate-fade,
        .scroll-animate-scale {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 1.6s cubic-bezier(.4, 0, .2, 1), transform 1.6s cubic-bezier(.4, 0, .2, 1);
        }

        /* Directional movement */
        .scroll-animate-scale {
            transform: scale(2);
        }

        .scroll-animate-fade {
            transform: none;
        }


        .glass-button {
            background: linear-gradient(to bottom right,
                    rgba(55, 40, 110, 0.164),
                    /* violet */
                    rgba(92, 60, 255, 0.08),
                    /* blueviolet */
                    rgba(50, 28, 95, 0.08)
                    /* dark violet */
                );
            border: 1px solid rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            color: #fff9f9;
            transition: all 0.3s ease;
            box-shadow: 0 0 20px rgba(140, 85, 255, 0.25), 0 0 35px rgba(28, 167, 236, 0.25);
        }

        .glass-button:hover {
            background: linear-gradient(to bottom right,
                    rgba(55, 40, 110, 0.234),
                    /* violet */
                    rgba(92, 60, 255, 0.123),
                    /* blueviolet */
                    rgba(50, 28, 95, 0.4)
                    /* dark violet */
                );
            box-shadow: 0 0 30px rgba(173, 77, 252, 0.4), 0 0 60px rgba(122, 31, 162, 0.3);
            border-color: rgba(255, 255, 255, 0.3);
        }

        /* Floating orb animations */
        @keyframes float {

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

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

        @keyframes spin-slower {
            to {
                transform: rotate(360deg);
            }
        }

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

        .animate-spin-slower {
            animation: spin-slower 20s linear infinite;
        }

        /* Orb styles */
        .orb {
            position: absolute;
            border-radius: 9999px;
            opacity: 0.4;
            filter: blur(70px);
            width: 250px;
            height: 250px;
            background: linear-gradient(135deg, #6d4aff, #00e5ff);
            z-index: 2;
            box-shadow: 0 0 40px rgba(255, 255, 255, 0.15);
            mix-blend-mode: screen;
        }

        .orb-1 {
            bottom: 50px;
            left: 5%;
        }

        .orb-2 {
            bottom: 100px;
            right: 10%;
        }

        .orb-3 {
            bottom: 300px;
            top: 10%;
        }


        @keyframes fill-bar-95 {
            from {
                width: 0%;
            }

            to {
                width: 95%;
            }
        }

        @keyframes fill-bar-97 {
            from {
                width: 0%;
            }

            to {
                width: 97%;
            }
        }

        @keyframes fill-bar-93 {
            from {
                width: 0%;
            }

            to {
                width: 93%;
            }
        }

        @keyframes fill-bar-90 {
            from {
                width: 0%;
            }

            to {
                width: 90%;
            }
        }

        @keyframes fill-bar-60 {
            from {
                width: 0%;
            }

            to {
                width: 60%;
            }
        }

        .animate-fill-bar-95 {
            animation: fill-bar-95 2s ease-in-out forwards;
        }

        .animate-fill-bar-97 {
            animation: fill-bar-97 2s ease-in-out forwards;
        }

        .animate-fill-bar-93 {
            animation: fill-bar-93 2s ease-in-out forwards;
        }

        .animate-fill-bar-90 {
            animation: fill-bar-90 2s ease-in-out forwards;
        }

        .animate-fill-bar-60 {
            animation: fill-bar-60 2s ease-in-out forwards;
        }


        @keyframes spin-slow {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .animate-spin-slow {
            animation: spin-slow 10s linear infinite;
        }


        @keyframes wavePulse {
            0% {
                d: path("M100,20 C145,20 180,55 180,100 C180,145 145,180 100,180 C55,180 20,145 20,100 C20,55 55,20 100,20Z");
            }

            50% {
                d: path("M100,25 C140,10 190,60 175,105 C170,150 140,175 100,175 C60,175 25,145 25,100 C25,55 60,25 100,25Z");
            }

            100% {
                d: path("M100,20 C145,20 180,55 180,100 C180,145 145,180 100,180 C55,180 20,145 20,100 C20,55 55,20 100,20Z");
            }
        }

        .wavy-path {
            animation: wavePulse 6s ease-in-out infinite;
        }


        /* ================= MOBILE RESPONSIVE FIXES ================= */

        @media (max-width: 640px) {

            h1 {
                font-size: 10vw !important;
                /* ~26px on 375px screen */
            }

            h2 {
                font-size: 7vw !important;
            }


            h5 {
                font-size: 4.5vw !important;
            }

            span,
            .text-lg,
            .text-xl {
                font-size: 3.8vw !important;
                /* ~14px */
            }

            /* General container adjustments */
            .hero-section,
            .about-section,
            .services-section,
            .work-section,
            .testimonials,
            .contact-section {
                padding-left: 1rem !important;
                padding-right: 1rem !important;
            }

            /* Remove excess padding/margin that causes overflow */
            .pl-20,
            .pr-20,
            .ml-20,
            .mr-20 {
                padding-left: 0 !important;
                padding-right: 0 !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
            }

            /* Manually override flex direction in HTML-defined elements */
            .flex-row {
                flex-direction: column !important;
            }

            /* Specific fix for work sample layout */
            .work-sample-grid {
                display: flex !important;
                flex-direction: column !important;
                gap: 1rem !important;
            }

            .card,
            .work-sample-card {
                width: 100% !important;
                max-width: 100% !important;
            }

            .w-130 {
                width: 100% !important;
            }

            .max-w-1440 {
                max-width: 100% !important;
            }

            .text-lg,
            .text-xl {
                font-size: 4.5vw !important;
            }

            .gap-6,
            .gap-4,
            .gap-3 {
                gap: 1rem !important;
            }


            .aspect-square,
            .aspect-video,
            .aspect-ratio-portrait {
                aspect-ratio: auto !important;
            }

            /* Hide overlapping glow buttons */
            .hide-on-mobile {
                display: none !important;
            }
        }


        @media (max-width: 640px) {

            /* Slightly reduce each profile card's size */
            #why-me .profile-card {
                height: 11.5rem !important;
                /* Slightly smaller than h-52 (13rem) */
                padding: 1rem !important;
                /* Reduce internal spacing */
                margin: 0.5rem 0 !important;
                /* Reduce vertical margin */
                border-radius: 0.75rem !important;
            }

            /* Tighter spacing inside front/back content */
            #why-me .card-front,
            #why-me .card-back {
                padding: 0.75rem !important;
            }

            /* Adjust grid spacing and container padding */
            #why-me .grid {
                gap: 1.25rem !important;
                padding-left: 1rem !important;
                padding-right: 1rem !important;
            }

            /* Keep icons readable and centered */
            #why-me .profile-card i {
                margin-bottom: 0.25rem !important;
                font-size: 1.75rem !important;
                /* Consistent icon size */
            }

            /* Title font sizes inside cards */
            #why-me .profile-card h3 {
                font-size: 1rem !important;
                line-height: 1.25rem;
            }

            /* Body text inside the card back */
            #why-me .profile-card p {
                font-size: 0.875rem !important;
                line-height: 1.3rem;
                text-align: center;
            }


            /* Force the square images sample container to two columns in mobile view  */
            /* Force the square images sample container to two columns in mobile view  */
            /* Force the square images sample container to two columns in mobile view */
            .work-section .square-sample-grid {
                display: grid !important;
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 1rem !important;
            }

            /* Each square card fits 50% width */
            .work-section .work-sample-card {
                width: 100% !important;
                padding: 0.25rem !important;
                margin: 0 auto !important;
                border-radius: 0.75rem !important;
            }

            .work-section .work-img.aspect-square {
                width: 100% !important;
                height: auto;
                aspect-ratio: 1 / 1;
                object-fit: cover;
            }

            .work-section .flex.flex-row.gap-6 {
                gap: 1rem !important;
                margin-top: 1.5rem !important;
            }


            /* Force the flip square image sample container to perfect square */
            /* Force the flip square image sample container to perfect square */
            /* Force the flip square image sample container to perfect square */

            .work-section .card.aspect-square {
                aspect-ratio: 1 / 1 !important;
                width: 100% !important;
                height: auto !important;
                max-width: none !important;
            }

            .work-section .card-inner,
            .work-section .card-front,
            .work-section .card-back {
                width: 100% !important;
                height: 100% !important;
                aspect-ratio: 1 / 1 !important;
            }

            .work-section .card-front img,
            .work-section .card-back img {
                width: 100% !important;
                height: 100% !important;
                object-fit: cover !important;
            }
        }


        /* for the buttom space for the footer */
        /* for the buttom space for the footer */
        /* for the buttom space for the footer */
        #contact {
            padding-bottom: 80px !important;
            /* Enough to avoid overlap with 80px footer */
            margin-bottom: 0 !important;
        }


        /* Mobile responsive adjustments for testimonial section */
        @media (max-width: 640px) {
            #testimonials .flex.justify-center {
                flex-direction: column;
                align-items: center;
                gap: 1.5rem;
                margin-top: 2rem;
            }

            #testimonials .glass-button {
                width: 90% !important;
                height: auto !important;
                padding: 1.25rem !important;
                margin: 0 auto;
            }

            #testimonials h2 {
                font-size: 2.1rem !important;
            }

            #testimonials p.text-xl {
                font-size: 1rem !important;
            }

            #testimonials p.italic {
                font-size: 0.95rem !important;
                text-align: justify !important;
            }

            #testimonials h4 {
                font-size: 1rem !important;
            }

            #testimonials p.text-sm {
                font-size: 0.875rem !important;
            }

            .testimonial-rotate-left,
            .testimonial-rotate-right,
            .testimonial-center {
                transform: none !important;
                margin: 0 !important;
            }

        }


        /* splash text size for mobile view*/
        @media (max-width: 640px) {
            #splash .flyin-word {
                font-size: 2.25rem !important;
                /* ~36px */
            }

            #splash .flyin-container {
                gap: 0.5rem;
            }

            #splash .custom-line-height {
                padding: 0 1rem;
            }
        }


        /* tools icon in hero section for mobile view*/
        @media (max-width: 640px) {
            .hero-section .work-img {
                justify-content: center !important;
                text-align: center;
            }
        }


        /* decrease font for mobile view*/
        @media (max-width: 640px) {

            /* More specific target to only apply inside the drop-up */
            .education h4 {
                font-size: 0.9rem !important;
                line-height: 1.3 !important;
            }

            .education p {
                font-size: 0.8rem !important;
                line-height: 1.3 !important;
            }

            .education p.italic {
                font-style: italic !important;
                opacity: 0.9;
            }

            .education .pl-3 {
                padding-left: 0.75rem !important;
            }

            .education {
                padding-left: 1rem !important;
                padding-right: 1rem !important;
            }
        }


        /* Tab responsiveness and spacing in mobile */
        @media (max-width: 640px) {
            .tabs-container .glass-button {
                flex-wrap: nowrap;
                justify-content: space-between;
                gap: 0.1rem !important;
                padding: 0.2rem !important;
            }

            .tab-btn {
                flex: 1;
                min-width: 0;
                padding: 0.2rem 0.3rem !important;
                font-size: 2.4vw !important;
                /* ✅ Even smaller text */
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                white-space: nowrap;
            }

            .tab-btn i {
                font-size: 2.8vw !important;
                /* ✅ Even smaller icon */
                margin-right: 0.2rem;
            }

            .tab-btn span {
                font-size: inherit;
            }
        }

        /* Tab responsiveness in mobile */
        @media (max-width: 640px) {
            .tab-btn.active {
                background: linear-gradient(to right, #7f5aff, #1ca7ec);
                /* Holo effect */
                color: #fff9f9 !important;
                box-shadow: 0 0 10px rgba(127, 90, 255, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.1);
                border-radius: 0.75rem;
                transition: all 0.3s ease-in-out;
            }

            .tab-btn:not(.active) {
                background: transparent;
                color: #ccc;
                border-radius: 0.75rem;
            }
        }

        @media (max-width: 640px) {
            .tab-btn:hover {
                opacity: 0.85;
                cursor: pointer;
            }
        }


        /* for about me's tabs*/
        .tabs {
            display: flex;
            gap: 1rem;
            border-bottom: 2px solid #3e3e3e;
        }

        .tab-btn {
            background: 0 0 20px rgba(140, 85, 255, 0.25), 0 0 35px rgba(28, 167, 236, 0.25);
            background-color: transparent;
            border: none;
            color: #fff9f9;
            padding: 0.5rem 1rem;
            margin: 0.5rem;
            cursor: pointer;
            font-weight: bold;
            border-bottom: 3px solid transparent;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;

        }

        .tab-btn i {
            font-size: 1rem;
        }

        .tab-btn.active {
            background: linear-gradient(135deg,
                    rgba(127, 90, 255, 0.15),
                    rgba(255, 249, 249, 0.15),
                    rgba(90, 214, 255, 0.15));
            color: #fff9f9;
            box-shadow: 0 0 12px rgba(127, 90, 255, 0.25), 0 0 25px rgba(28, 167, 236, 0.15);
            border-radius: 1rem;
            border: none;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }

        .tab-btn:not(.active):hover {
            background-color: rgba(28, 167, 236, 0.05);
            box-shadow: 0 0 6px rgba(28, 167, 236, 0.08);
        }

        .tab-pane {
            animation: fade 0.3s ease-in-out;
        }

        .tab-pane.hidden {
            display: none;
        }

        @keyframes fade {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

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

        .tab-btn:not(.active):hover {
            background: rgba(255, 255, 255, 0.05);
            box-shadow: 0 0 6px #5ad6ff88;
        }


        /* for services and why me cards*/
        .flip-card {
            perspective: 1000px;
        }

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

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

        .flip-card-front,
        .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }

        .flip-card-back {
            transform: rotateY(180deg);
        }

        .icon-glow {
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 0 40px rgba(255, 255, 255, 0.2) !important;
        }

        @media (max-width: 640px) {

            .flip-card-front,
            .flip-card-back {
                padding: 0.75rem;
                border-radius: 8px;
            }
        }


        /* for work samples*/
        .tab-cont {
            display: none;
        }

        .tab-cont.active {
            display: block;
        }

        .tab-button.active {
            background-color: #3b82f6;
            color: white;
        }

        .tab-button {
            transition: all 0.3s ease;
        }

        .tab-button:hover {
            background-color: #e5e7eb;
        }

        .tab-button.active:hover {
            background-color: #2563eb;
        }

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

        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .live-preview-btn {
            transition: all 0.3s ease;
        }

        .live-preview-btn:hover {
            background-color: #2563eb;
            transform: translateY(-1px);
        }

        .media-item {
            background-color: #f3f4f6;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6b7280;
            font-size: 14px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .media-item:hover {
            border-color: #9ca3af;
            background-color: #e5e7eb;
        }