{"id":11,"date":"2026-09-30T17:43:13","date_gmt":"2026-09-30T17:43:13","guid":{"rendered":"https:\/\/vishal.yenexa.com\/?page_id=11"},"modified":"2026-10-04T10:35:16","modified_gmt":"2026-10-04T10:35:16","slug":"home","status":"publish","type":"page","link":"https:\/\/vishal.yenexa.com\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"11\" class=\"elementor elementor-11\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e65c020 e-con e-atomic-element e-flexbox-base e-default-div e-e4d9fc8 \" data-id=\"e65c020\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"e65c020\">\n    \t\t<div class=\"elementor-element elementor-element-9bd44e0 elementor-widget elementor-widget-html\" data-id=\"9bd44e0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n     VISHAL PORTFOLIO - FULL WIDTH + FULL RESPONSIVE HOME\r\n========================================================= -->\r\n\r\n<section id=\"home\" class=\"vp-home\">\r\n\r\n    <!-- BACKGROUND -->\r\n    <div class=\"vp-bg\" aria-hidden=\"true\">\r\n\r\n        <span class=\"vp-particle vp-p1\"><\/span>\r\n        <span class=\"vp-particle vp-p2\"><\/span>\r\n        <span class=\"vp-particle vp-p3\"><\/span>\r\n        <span class=\"vp-particle vp-p4\"><\/span>\r\n        <span class=\"vp-particle vp-p5\"><\/span>\r\n        <span class=\"vp-particle vp-p6\"><\/span>\r\n        <span class=\"vp-particle vp-p7\"><\/span>\r\n        <span class=\"vp-particle vp-p8\"><\/span>\r\n\r\n        <span class=\"vp-grid\"><\/span>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- MAIN CONTAINER -->\r\n    <div class=\"vp-container\">\r\n\r\n\r\n        <!-- ================= CONTENT ================= -->\r\n\r\n        <div class=\"vp-content\">\r\n\r\n\r\n            <!-- AVAILABLE -->\r\n\r\n            <div class=\"vp-available\">\r\n\r\n                <span class=\"vp-status-dot\"><\/span>\r\n\r\n                Available for Work\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- INTRO -->\r\n\r\n            <p class=\"vp-intro\">\r\n                Hello, I'm\r\n            <\/p>\r\n\r\n\r\n            <!-- NAME -->\r\n\r\n            <h1 class=\"vp-title\">\r\n                <span class=\"vp-name-white\">Vishal<\/span>\r\n                <span class=\"vp-name-gradient\"> Pandey<\/span>\r\n            <\/h1>\r\n\r\n\r\n            <!-- DESIGNATION -->\r\n\r\n            <div class=\"vp-designation\">\r\n\r\n                <span class=\"vp-static\">\r\n                    I'm a\r\n                <\/span>\r\n\r\n                <span id=\"vp-typing\"><\/span>\r\n\r\n                <span class=\"vp-cursor\">|<\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- MOBILE \/ TABLET IMAGE -->\r\n\r\n            <div class=\"vp-mobile-image\">\r\n\r\n                <div class=\"vp-image-area\">\r\n\r\n                    <div class=\"vp-image-glow\"><\/div>\r\n\r\n                    <div class=\"vp-orbit vp-orbit-one\"><\/div>\r\n\r\n                    <div class=\"vp-orbit vp-orbit-two\"><\/div>\r\n\r\n\r\n                    <div class=\"vp-profile\">\r\n\r\n                        <div class=\"vp-profile-ring\"><\/div>\r\n\r\n                        <div class=\"vp-profile-image\">\r\n\r\n                            <img fetchpriority=\"high\" decoding=\"async\"\r\n                                src=\"https:\/\/vishal.yenexa.com\/wp-content\/uploads\/2026\/10\/vishal-Pandey.png\"\r\n                                alt=\"Vishal Pandey - Web Designer and Developer\"\r\n                                width=\"420\"\r\n                                height=\"420\"\r\n                                fetchpriority=\"high\"\r\n                            >\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <!-- EXPERIENCE -->\r\n\r\n                    <div class=\"vp-card vp-experience\">\r\n\r\n                        <strong>3+<\/strong>\r\n\r\n                        <span>\r\n                            Years<br>\r\n                            Experience\r\n                        <\/span>\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <!-- WORDPRESS -->\r\n\r\n                    <div class=\"vp-card vp-wordpress\">\r\n\r\n                        <div class=\"vp-card-icon\">\r\n                            WP\r\n                        <\/div>\r\n\r\n                        <div>\r\n\r\n                            <strong>WordPress<\/strong>\r\n\r\n                            <small>\r\n                                Developer\r\n                            <\/small>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <!-- SEO -->\r\n\r\n                    <div class=\"vp-card vp-seo\">\r\n\r\n                        <div class=\"vp-seo-icon\">\r\n                            \u2197\r\n                        <\/div>\r\n\r\n                        <div>\r\n\r\n                            <strong>SEO<\/strong>\r\n\r\n                            <small>\r\n                                Optimization\r\n                            <\/small>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- DESCRIPTION -->\r\n\r\n            <p class=\"vp-description\">\r\n\r\n                I create modern, responsive and SEO-friendly websites\r\n                with clean design, smooth user experience and\r\n                performance-focused development.\r\n\r\n            <\/p>\r\n\r\n\r\n            <!-- SKILLS -->\r\n\r\n            <div class=\"vp-tech\">\r\n\r\n                <span>HTML<\/span>\r\n\r\n                <span>CSS<\/span>\r\n\r\n                <span>JavaScript<\/span>\r\n\r\n                <span>WordPress<\/span>\r\n\r\n                <span>MySQL<\/span>\r\n\r\n                <span>SEO<\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- BUTTONS -->\r\n\r\n            <div class=\"vp-buttons\">\r\n\r\n                <a\r\n                    href=\"#contact\"\r\n                    class=\"vp-btn vp-btn-primary\"\r\n                >\r\n                    Hire Me\r\n                    <span>\u2192<\/span>\r\n                <\/a>\r\n\r\n\r\n                <a\r\n                    href=\"#projects\"\r\n                    class=\"vp-btn vp-btn-outline\"\r\n                >\r\n                    View Projects\r\n                    <span>\u2197<\/span>\r\n                <\/a>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- ================= DESKTOP IMAGE ================= -->\r\n\r\n        <div class=\"vp-desktop-image\">\r\n\r\n            <div class=\"vp-image-area\">\r\n\r\n                <div class=\"vp-image-glow\"><\/div>\r\n\r\n                <div class=\"vp-orbit vp-orbit-one\"><\/div>\r\n\r\n                <div class=\"vp-orbit vp-orbit-two\"><\/div>\r\n\r\n\r\n                <div class=\"vp-profile\">\r\n\r\n                    <div class=\"vp-profile-ring\"><\/div>\r\n\r\n\r\n                    <div class=\"vp-profile-image\">\r\n\r\n                        <img decoding=\"async\"\r\n                            src=\"https:\/\/vishal.yenexa.com\/wp-content\/uploads\/2026\/10\/vishal-Pandey.png\"\r\n                            alt=\"Vishal Pandey - Web Designer and Developer\"\r\n                            width=\"420\"\r\n                            height=\"420\"\r\n                            loading=\"eager\"\r\n                        >\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <!-- EXPERIENCE -->\r\n\r\n                <div class=\"vp-card vp-experience\">\r\n\r\n                    <strong>3+<\/strong>\r\n\r\n                    <span>\r\n                        Years<br>\r\n                        Experience\r\n                    <\/span>\r\n\r\n                <\/div>\r\n\r\n\r\n                <!-- WORDPRESS -->\r\n\r\n                <div class=\"vp-card vp-wordpress\">\r\n\r\n                    <div class=\"vp-card-icon\">\r\n                        WP\r\n                    <\/div>\r\n\r\n                    <div>\r\n\r\n                        <strong>WordPress<\/strong>\r\n\r\n                        <small>\r\n                            Developer\r\n                        <\/small>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <!-- SEO -->\r\n\r\n                <div class=\"vp-card vp-seo\">\r\n\r\n                    <div class=\"vp-seo-icon\">\r\n                        \u2197\r\n                    <\/div>\r\n\r\n                    <div>\r\n\r\n                        <strong>SEO<\/strong>\r\n\r\n                        <small>\r\n                            Optimization\r\n                        <\/small>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- SCROLL -->\r\n\r\n    <div class=\"vp-scroll\">\r\n\r\n        <span>SCROLL DOWN<\/span>\r\n\r\n        <i>\u2193<\/i>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   FULL WIDTH FIX\r\n   Elementor ke parent padding ko bypass karta hai\r\n========================================================= *\/\r\n\r\nhtml,\r\nbody {\r\n\r\n    overflow-x: hidden !important;\r\n\r\n}\r\n\r\n\r\n#home.vp-home {\r\n\r\n    --vp-dark: #0B1120;\r\n    --vp-blue: #3B82F6;\r\n    --vp-purple: #8B5CF6;\r\n\r\n    --vp-white: #FFFFFF;\r\n    --vp-text: #CBD5E1;\r\n    --vp-muted: #94A3B8;\r\n\r\n\r\n    \/* MAIN FULL WIDTH FIX *\/\r\n\r\n    width: 100vw !important;\r\n\r\n    max-width: 100vw !important;\r\n\r\n    margin-left: calc(50% - 50vw) !important;\r\n\r\n    margin-right: 0 !important;\r\n\r\n\r\n    min-height: 100vh;\r\n\r\n    min-height: 100svh;\r\n\r\n\r\n    padding: 0 !important;\r\n\r\n\r\n    position: relative;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n\r\n    overflow: hidden;\r\n\r\n\r\n    background: var(--vp-dark);\r\n\r\n    color: var(--vp-white);\r\n\r\n\r\n    isolation: isolate;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BOX SIZING\r\n========================================================= *\/\r\n\r\n#home.vp-home,\r\n#home.vp-home *,\r\n#home.vp-home *::before,\r\n#home.vp-home *::after {\r\n\r\n    box-sizing: border-box;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BACKGROUND\r\n========================================================= *\/\r\n\r\n.vp-bg {\r\n\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    width: 100%;\r\n\r\n    height: 100%;\r\n\r\n    overflow: hidden;\r\n\r\n    pointer-events: none;\r\n\r\n    z-index: -1;\r\n\r\n}\r\n\r\n\r\n.vp-bg::before {\r\n\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    width: 600px;\r\n\r\n    height: 600px;\r\n\r\n    top: -300px;\r\n\r\n    right: -150px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background:\r\n        rgba(59,130,246,.12);\r\n\r\n    filter: blur(100px);\r\n\r\n}\r\n\r\n\r\n.vp-bg::after {\r\n\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    width: 550px;\r\n\r\n    height: 550px;\r\n\r\n    bottom: -300px;\r\n\r\n    left: -150px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background:\r\n        rgba(139,92,246,.12);\r\n\r\n    filter: blur(100px);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   GRID\r\n========================================================= *\/\r\n\r\n.vp-grid {\r\n\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    opacity: .025;\r\n\r\n    background-image:\r\n\r\n        linear-gradient(\r\n            rgba(255,255,255,.5) 1px,\r\n            transparent 1px\r\n        ),\r\n\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(255,255,255,.5) 1px,\r\n            transparent 1px\r\n        );\r\n\r\n    background-size: 70px 70px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PARTICLES\r\n========================================================= *\/\r\n\r\n.vp-particle {\r\n\r\n    position: absolute;\r\n\r\n    width: 4px;\r\n\r\n    height: 4px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: #60A5FA;\r\n\r\n    box-shadow:\r\n        0 0 12px #3B82F6;\r\n\r\n    animation:\r\n        vpParticle 8s ease-in-out infinite;\r\n\r\n}\r\n\r\n\r\n.vp-p1 {\r\n    top: 15%;\r\n    left: 8%;\r\n}\r\n\r\n.vp-p2 {\r\n    top: 25%;\r\n    left: 48%;\r\n    animation-delay: 1s;\r\n}\r\n\r\n.vp-p3 {\r\n    top: 70%;\r\n    left: 8%;\r\n    animation-delay: 2s;\r\n}\r\n\r\n.vp-p4 {\r\n    top: 80%;\r\n    left: 40%;\r\n    animation-delay: 3s;\r\n}\r\n\r\n.vp-p5 {\r\n    top: 18%;\r\n    right: 15%;\r\n    animation-delay: 4s;\r\n}\r\n\r\n.vp-p6 {\r\n    top: 60%;\r\n    right: 8%;\r\n    animation-delay: 1.5s;\r\n}\r\n\r\n.vp-p7 {\r\n    bottom: 12%;\r\n    right: 35%;\r\n    animation-delay: 2.5s;\r\n}\r\n\r\n.vp-p8 {\r\n    top: 40%;\r\n    left: 35%;\r\n    animation-delay: 4.5s;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MAIN CONTAINER\r\n========================================================= *\/\r\n\r\n.vp-container {\r\n\r\n    width: 100%;\r\n\r\n    max-width: 1180px;\r\n\r\n    margin: 0 auto;\r\n\r\n    padding:\r\n        100px 30px 70px;\r\n\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n        minmax(0,1.05fr)\r\n        minmax(0,.95fr);\r\n\r\n    align-items: center;\r\n\r\n    gap: 50px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTENT\r\n========================================================= *\/\r\n\r\n.vp-content {\r\n\r\n    position: relative;\r\n\r\n    z-index: 2;\r\n\r\n}\r\n\r\n\r\n.vp-available {\r\n\r\n    display: inline-flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 9px;\r\n\r\n    padding: 8px 15px;\r\n\r\n    margin-bottom: 20px;\r\n\r\n    border:\r\n        1px solid rgba(59,130,246,.25);\r\n\r\n    border-radius: 50px;\r\n\r\n    background:\r\n        rgba(59,130,246,.07);\r\n\r\n    color:\r\n        #93C5FD;\r\n\r\n    font-family:\r\n        Arial,sans-serif;\r\n\r\n    font-size: 13px;\r\n\r\n    font-weight: 500;\r\n\r\n}\r\n\r\n\r\n.vp-status-dot {\r\n\r\n    width: 8px;\r\n\r\n    height: 8px;\r\n\r\n    flex-shrink: 0;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: #22C55E;\r\n\r\n    box-shadow:\r\n        0 0 10px #22C55E;\r\n\r\n    animation:\r\n        vpPulse 1.8s infinite;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   INTRO\r\n========================================================= *\/\r\n\r\n.vp-intro {\r\n\r\n    margin: 0 0 5px;\r\n\r\n    color:\r\n        var(--vp-text);\r\n\r\n    font-family:\r\n        Arial,sans-serif;\r\n\r\n    font-size:\r\n        clamp(18px,2vw,22px);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   NAME\r\n========================================================= *\/\r\n\r\n.vp-title {\r\n\r\n    margin: 0;\r\n\r\n    padding: 0;\r\n\r\n\r\n    \/* IMPORTANT *\/\r\n\r\n    white-space: nowrap;\r\n\r\n    display: block;\r\n\r\n\r\n    font-family:\r\n        Arial,sans-serif;\r\n\r\n\r\n    \/* Automatically fits screen *\/\r\n\r\n    font-size:\r\n        clamp(34px,7vw,82px);\r\n\r\n\r\n    line-height:\r\n        1.05;\r\n\r\n\r\n    font-weight:\r\n        800;\r\n\r\n\r\n    letter-spacing:\r\n        -3px;\r\n\r\n}\r\n\r\n\r\n.vp-name-white {\r\n\r\n    color:\r\n        #FFFFFF !important;\r\n\r\n}\r\n\r\n\r\n.vp-name-gradient {\r\n\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            var(--vp-blue),\r\n            var(--vp-purple)\r\n        );\r\n\r\n    -webkit-background-clip:\r\n        text;\r\n\r\n    background-clip:\r\n        text;\r\n\r\n    color:\r\n        transparent !important;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DESIGNATION\r\n========================================================= *\/\r\n\r\n.vp-designation {\r\n\r\n    min-height: 48px;\r\n\r\n    margin-top: 15px;\r\n\r\n    font-family:\r\n        Arial,sans-serif;\r\n\r\n    font-size:\r\n        clamp(23px,3vw,34px);\r\n\r\n    line-height:\r\n        1.3;\r\n\r\n    font-weight: 700;\r\n\r\n}\r\n\r\n\r\n.vp-static {\r\n\r\n    color:\r\n        #E2E8F0;\r\n\r\n}\r\n\r\n\r\n#vp-typing {\r\n\r\n    color:\r\n        var(--vp-blue);\r\n\r\n}\r\n\r\n\r\n.vp-cursor {\r\n\r\n    color:\r\n        var(--vp-purple);\r\n\r\n    animation:\r\n        vpBlink .7s infinite;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DESCRIPTION\r\n========================================================= *\/\r\n\r\n.vp-description {\r\n\r\n    max-width: 620px;\r\n\r\n    margin:\r\n        20px 0 28px;\r\n\r\n    color:\r\n        var(--vp-text);\r\n\r\n    font-family:\r\n        Arial,sans-serif;\r\n\r\n    font-size: 16px;\r\n\r\n    line-height: 1.8;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE IMAGE HIDDEN ON DESKTOP\r\n========================================================= *\/\r\n\r\n.vp-mobile-image {\r\n\r\n    display: none;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DESKTOP IMAGE\r\n========================================================= *\/\r\n\r\n.vp-desktop-image {\r\n\r\n    display: block;\r\n\r\n}\r\n\r\n\r\n.vp-image-area {\r\n\r\n    position: relative;\r\n\r\n    min-height: 520px;\r\n\r\n    display: flex;\r\n\r\n    justify-content: center;\r\n\r\n    align-items: center;\r\n\r\n}\r\n\r\n\r\n.vp-image-glow {\r\n\r\n    position: absolute;\r\n\r\n    width: 330px;\r\n\r\n    height: 330px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            var(--vp-blue),\r\n            var(--vp-purple)\r\n        );\r\n\r\n    filter:\r\n        blur(90px);\r\n\r\n    opacity: .22;\r\n\r\n    animation:\r\n        vpGlow 4s ease-in-out infinite;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PROFILE\r\n========================================================= *\/\r\n\r\n.vp-profile {\r\n\r\n    position: relative;\r\n\r\n    width:\r\n        clamp(270px,32vw,410px);\r\n\r\n    aspect-ratio: 1;\r\n\r\n    z-index: 3;\r\n\r\n    animation:\r\n        vpFloat 5s ease-in-out infinite;\r\n\r\n}\r\n\r\n\r\n.vp-profile-ring {\r\n\r\n    position: absolute;\r\n\r\n    inset: -12px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background:\r\n        conic-gradient(\r\n            from 0deg,\r\n            var(--vp-blue),\r\n            var(--vp-purple),\r\n            transparent,\r\n            var(--vp-blue)\r\n        );\r\n\r\n    animation:\r\n        vpRotate 7s linear infinite;\r\n\r\n}\r\n\r\n\r\n.vp-profile-ring::after {\r\n\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    inset: 3px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background:\r\n        var(--vp-dark);\r\n\r\n}\r\n\r\n\r\n.vp-profile-image {\r\n\r\n    position: absolute;\r\n\r\n    inset: 5px;\r\n\r\n    overflow: hidden;\r\n\r\n    border-radius: 50%;\r\n\r\n    border:\r\n        4px solid rgba(255,255,255,.08);\r\n\r\n    background:\r\n        #111827;\r\n\r\n}\r\n\r\n\r\n.vp-profile-image img {\r\n\r\n    width: 100%;\r\n\r\n    height: 100%;\r\n\r\n    display: block;\r\n\r\n    object-fit: cover;\r\n\r\n    object-position: center;\r\n\r\n    transition:\r\n        transform .5s ease;\r\n\r\n}\r\n\r\n\r\n.vp-profile:hover\r\n.vp-profile-image img {\r\n\r\n    transform:\r\n        scale(1.05);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ORBITS\r\n========================================================= *\/\r\n\r\n.vp-orbit {\r\n\r\n    position: absolute;\r\n\r\n    border:\r\n        1px solid rgba(59,130,246,.16);\r\n\r\n    border-radius: 50%;\r\n\r\n    pointer-events: none;\r\n\r\n}\r\n\r\n\r\n.vp-orbit-one {\r\n\r\n    width: 480px;\r\n\r\n    height: 250px;\r\n\r\n    transform:\r\n        rotate(-30deg);\r\n\r\n    animation:\r\n        vpOrbit 10s linear infinite;\r\n\r\n}\r\n\r\n\r\n.vp-orbit-two {\r\n\r\n    width: 430px;\r\n\r\n    height: 220px;\r\n\r\n    transform:\r\n        rotate(35deg);\r\n\r\n    border-color:\r\n        rgba(139,92,246,.14);\r\n\r\n    animation:\r\n        vpOrbitReverse 12s linear infinite;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARDS\r\n========================================================= *\/\r\n\r\n.vp-card {\r\n\r\n    position: absolute;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 10px;\r\n\r\n    padding:\r\n        11px 14px;\r\n\r\n    border:\r\n        1px solid rgba(148,163,184,.15);\r\n\r\n    border-radius: 10px;\r\n\r\n    background:\r\n        rgba(15,23,42,.75);\r\n\r\n    backdrop-filter:\r\n        blur(8px);\r\n\r\n    -webkit-backdrop-filter:\r\n        blur(8px);\r\n\r\n    box-shadow:\r\n        0 15px 35px rgba(0,0,0,.25);\r\n\r\n    z-index: 5;\r\n\r\n    font-family:\r\n        Arial,sans-serif;\r\n\r\n}\r\n\r\n\r\n.vp-card strong {\r\n\r\n    display: block;\r\n\r\n    color: #fff;\r\n\r\n    font-size: 14px;\r\n\r\n}\r\n\r\n\r\n.vp-card small {\r\n\r\n    display: block;\r\n\r\n    margin-top: 2px;\r\n\r\n    color:\r\n        #94A3B8;\r\n\r\n    font-size: 10px;\r\n\r\n}\r\n\r\n\r\n.vp-experience {\r\n\r\n    top: 13%;\r\n\r\n    left: 1%;\r\n\r\n    animation:\r\n        vpCardFloat 4s ease-in-out infinite;\r\n\r\n}\r\n\r\n\r\n.vp-experience strong {\r\n\r\n    color:\r\n        #60A5FA;\r\n\r\n    font-size:\r\n        22px;\r\n\r\n}\r\n\r\n\r\n.vp-experience span {\r\n\r\n    color:\r\n        #94A3B8;\r\n\r\n    font-size:\r\n        10px;\r\n\r\n    line-height:\r\n        1.3;\r\n\r\n}\r\n\r\n\r\n.vp-wordpress {\r\n\r\n    right: 0;\r\n\r\n    top: 25%;\r\n\r\n    animation:\r\n        vpCardFloat 5s ease-in-out infinite .5s;\r\n\r\n}\r\n\r\n\r\n.vp-card-icon {\r\n\r\n    display: grid;\r\n\r\n    place-items: center;\r\n\r\n    width: 35px;\r\n\r\n    height: 35px;\r\n\r\n    border-radius: 8px;\r\n\r\n    background:\r\n        rgba(59,130,246,.15);\r\n\r\n    color:\r\n        #60A5FA;\r\n\r\n    font-size:\r\n        11px;\r\n\r\n    font-weight:\r\n        800;\r\n\r\n}\r\n\r\n\r\n.vp-seo {\r\n\r\n    bottom: 17%;\r\n\r\n    left: 3%;\r\n\r\n    animation:\r\n        vpCardFloat 4.5s ease-in-out infinite 1s;\r\n\r\n}\r\n\r\n\r\n.vp-seo-icon {\r\n\r\n    display: grid;\r\n\r\n    place-items: center;\r\n\r\n    width: 35px;\r\n\r\n    height: 35px;\r\n\r\n    border-radius: 8px;\r\n\r\n    background:\r\n        rgba(139,92,246,.15);\r\n\r\n    color:\r\n        #A78BFA;\r\n\r\n    font-size:\r\n        20px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SKILLS\r\n========================================================= *\/\r\n\r\n.vp-tech {\r\n\r\n    display: flex;\r\n\r\n    flex-wrap: wrap;\r\n\r\n    gap: 9px;\r\n\r\n    margin-top: 30px;\r\n\r\n}\r\n\r\n\r\n.vp-tech span {\r\n\r\n    padding:\r\n        6px 11px;\r\n\r\n    border:\r\n        1px solid rgba(148,163,184,.15);\r\n\r\n    border-radius: 5px;\r\n\r\n    background:\r\n        rgba(255,255,255,.025);\r\n\r\n    color:\r\n        var(--vp-muted);\r\n\r\n    font-family:\r\n        Arial,sans-serif;\r\n\r\n    font-size:\r\n        12px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BUTTONS\r\n========================================================= *\/\r\n\r\n.vp-buttons {\r\n\r\n    display: flex;\r\n\r\n    flex-wrap: wrap;\r\n\r\n    gap: 14px;\r\n\r\n    margin-top: 28px;\r\n\r\n}\r\n\r\n\r\n.vp-btn {\r\n\r\n    display: inline-flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    gap: 10px;\r\n\r\n    min-width: 145px;\r\n\r\n    padding:\r\n        13px 22px;\r\n\r\n    border-radius:\r\n        9px;\r\n\r\n    text-decoration:\r\n        none;\r\n\r\n    font-family:\r\n        Arial,sans-serif;\r\n\r\n    font-size:\r\n        15px;\r\n\r\n    font-weight:\r\n        600;\r\n\r\n    transition:\r\n        transform .25s ease,\r\n        box-shadow .25s ease,\r\n        background .25s ease;\r\n\r\n}\r\n\r\n\r\n.vp-btn span {\r\n\r\n    font-size:\r\n        19px;\r\n\r\n}\r\n\r\n\r\n.vp-btn-primary {\r\n\r\n    color: #fff;\r\n\r\n    background:\r\n        linear-gradient(\r\n            100deg,\r\n            var(--vp-blue),\r\n            var(--vp-purple)\r\n        );\r\n\r\n    box-shadow:\r\n        0 8px 25px\r\n        rgba(59,130,246,.20);\r\n\r\n}\r\n\r\n\r\n.vp-btn-primary:hover {\r\n\r\n    color: #fff;\r\n\r\n    transform:\r\n        translateY(-3px);\r\n\r\n    box-shadow:\r\n        0 12px 30px\r\n        rgba(59,130,246,.30);\r\n\r\n}\r\n\r\n\r\n.vp-btn-outline {\r\n\r\n    color: #fff;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(139,92,246,.5);\r\n\r\n    background:\r\n        rgba(139,92,246,.05);\r\n\r\n}\r\n\r\n\r\n.vp-btn-outline:hover {\r\n\r\n    color: #fff;\r\n\r\n    transform:\r\n        translateY(-3px);\r\n\r\n    background:\r\n        rgba(139,92,246,.12);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SCROLL\r\n========================================================= *\/\r\n\r\n.vp-scroll {\r\n\r\n    position:\r\n        absolute;\r\n\r\n    bottom:\r\n        18px;\r\n\r\n    left:\r\n        50%;\r\n\r\n    transform:\r\n        translateX(-50%);\r\n\r\n    display:\r\n        flex;\r\n\r\n    flex-direction:\r\n        column;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    gap:\r\n        4px;\r\n\r\n    color:\r\n        #64748B;\r\n\r\n    font-family:\r\n        Arial,sans-serif;\r\n\r\n    font-size:\r\n        10px;\r\n\r\n    letter-spacing:\r\n        1px;\r\n\r\n}\r\n\r\n\r\n.vp-scroll i {\r\n\r\n    font-style:\r\n        normal;\r\n\r\n    font-size:\r\n        18px;\r\n\r\n    animation:\r\n        vpScroll 1.5s infinite;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ANIMATIONS\r\n========================================================= *\/\r\n\r\n@keyframes vpPulse {\r\n\r\n    50% {\r\n\r\n        opacity: .4;\r\n\r\n        transform:\r\n            scale(.75);\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes vpBlink {\r\n\r\n    50% {\r\n\r\n        opacity: 0;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes vpFloat {\r\n\r\n    0%,100% {\r\n\r\n        transform:\r\n            translateY(0);\r\n\r\n    }\r\n\r\n    50% {\r\n\r\n        transform:\r\n            translateY(-10px);\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes vpRotate {\r\n\r\n    to {\r\n\r\n        transform:\r\n            rotate(360deg);\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes vpGlow {\r\n\r\n    0%,100% {\r\n\r\n        opacity: .18;\r\n\r\n        transform:\r\n            scale(.95);\r\n\r\n    }\r\n\r\n    50% {\r\n\r\n        opacity: .28;\r\n\r\n        transform:\r\n            scale(1.05);\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes vpOrbit {\r\n\r\n    to {\r\n\r\n        transform:\r\n            rotate(330deg);\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes vpOrbitReverse {\r\n\r\n    to {\r\n\r\n        transform:\r\n            rotate(-325deg);\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes vpCardFloat {\r\n\r\n    0%,100% {\r\n\r\n        transform:\r\n            translateY(0);\r\n\r\n    }\r\n\r\n    50% {\r\n\r\n        transform:\r\n            translateY(-8px);\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes vpParticle {\r\n\r\n    0%,100% {\r\n\r\n        transform:\r\n            translate(0,0);\r\n\r\n        opacity: .25;\r\n\r\n    }\r\n\r\n    50% {\r\n\r\n        transform:\r\n            translate(25px,-30px);\r\n\r\n        opacity: 1;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes vpScroll {\r\n\r\n    50% {\r\n\r\n        transform:\r\n            translateY(5px);\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 900px) {\r\n\r\n\r\n    #home.vp-home {\r\n\r\n        display:\r\n            block;\r\n\r\n        min-height:\r\n            auto;\r\n\r\n    }\r\n\r\n\r\n    .vp-container {\r\n\r\n        width:\r\n            100%;\r\n\r\n        max-width:\r\n            100%;\r\n\r\n        margin:\r\n            0;\r\n\r\n        padding:\r\n            110px 30px 80px;\r\n\r\n        display:\r\n            block;\r\n\r\n        text-align:\r\n            center;\r\n\r\n    }\r\n\r\n\r\n    .vp-content {\r\n\r\n        width:\r\n            100%;\r\n\r\n    }\r\n\r\n\r\n    \/* DESKTOP IMAGE OFF *\/\r\n\r\n    .vp-desktop-image {\r\n\r\n        display:\r\n            none;\r\n\r\n    }\r\n\r\n\r\n    \/* MOBILE IMAGE ON *\/\r\n\r\n    .vp-mobile-image {\r\n\r\n        display:\r\n            block;\r\n\r\n        width:\r\n            100%;\r\n\r\n    }\r\n\r\n\r\n    .vp-mobile-image\r\n    .vp-image-area {\r\n\r\n        min-height:\r\n            470px;\r\n\r\n        margin:\r\n            10px 0 5px;\r\n\r\n    }\r\n\r\n\r\n    .vp-description {\r\n\r\n        max-width:\r\n            650px;\r\n\r\n        margin:\r\n            0 auto 20px;\r\n\r\n    }\r\n\r\n\r\n    .vp-tech {\r\n\r\n        justify-content:\r\n            center;\r\n\r\n        margin-top:\r\n            15px;\r\n\r\n    }\r\n\r\n\r\n    .vp-buttons {\r\n\r\n        justify-content:\r\n            center;\r\n\r\n        margin-top:\r\n            24px;\r\n\r\n    }\r\n\r\n\r\n    .vp-scroll {\r\n\r\n        display:\r\n            none;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 600px) {\r\n\r\n\r\n    #home.vp-home {\r\n\r\n        width:\r\n            100vw !important;\r\n\r\n        max-width:\r\n            100vw !important;\r\n\r\n        margin-left:\r\n            calc(50% - 50vw) !important;\r\n\r\n        margin-right:\r\n            0 !important;\r\n\r\n    }\r\n\r\n\r\n    .vp-container {\r\n\r\n        width:\r\n            100%;\r\n\r\n        padding:\r\n            95px 15px 65px;\r\n\r\n    }\r\n\r\n\r\n    .vp-available {\r\n\r\n        font-size:\r\n            11px;\r\n\r\n        padding:\r\n            7px 12px;\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       NAME - ALWAYS ONE LINE\r\n    ===================================================== *\/\r\n\r\n    .vp-title {\r\n\r\n        width:\r\n            100%;\r\n\r\n        white-space:\r\n            nowrap;\r\n\r\n        font-size:\r\n            clamp(32px,10vw,60px);\r\n\r\n        letter-spacing:\r\n            -2px;\r\n\r\n        line-height:\r\n            1.05;\r\n\r\n    }\r\n\r\n\r\n    .vp-intro {\r\n\r\n        font-size:\r\n            18px;\r\n\r\n    }\r\n\r\n\r\n    .vp-designation {\r\n\r\n        font-size:\r\n            21px;\r\n\r\n        min-height:\r\n            35px;\r\n\r\n        margin-top:\r\n            12px;\r\n\r\n    }\r\n\r\n\r\n    \/* IMAGE *\/\r\n\r\n    .vp-mobile-image\r\n    .vp-image-area {\r\n\r\n        min-height:\r\n            370px;\r\n\r\n        margin-top:\r\n            5px;\r\n\r\n    }\r\n\r\n\r\n    .vp-profile {\r\n\r\n        width:\r\n            min(68vw,290px);\r\n\r\n    }\r\n\r\n\r\n    .vp-image-glow {\r\n\r\n        width:\r\n            240px;\r\n\r\n        height:\r\n            240px;\r\n\r\n    }\r\n\r\n\r\n    .vp-orbit-one {\r\n\r\n        width:\r\n            330px;\r\n\r\n        height:\r\n            180px;\r\n\r\n    }\r\n\r\n\r\n    .vp-orbit-two {\r\n\r\n        width:\r\n            300px;\r\n\r\n        height:\r\n            160px;\r\n\r\n    }\r\n\r\n\r\n    \/* DESCRIPTION *\/\r\n\r\n    .vp-description {\r\n\r\n        max-width:\r\n            100%;\r\n\r\n        margin:\r\n            0 auto 20px;\r\n\r\n        font-size:\r\n            14px;\r\n\r\n        line-height:\r\n            1.7;\r\n\r\n    }\r\n\r\n\r\n    \/* SKILLS *\/\r\n\r\n    .vp-tech {\r\n\r\n        justify-content:\r\n            center;\r\n\r\n        gap:\r\n            6px;\r\n\r\n        margin-top:\r\n            15px;\r\n\r\n    }\r\n\r\n\r\n    .vp-tech span {\r\n\r\n        font-size:\r\n            10px;\r\n\r\n        padding:\r\n            5px 8px;\r\n\r\n    }\r\n\r\n\r\n    \/* BUTTONS *\/\r\n\r\n    \/*.vp-buttons {*\/\r\n\r\n    \/*    flex-direction:*\/\r\n    \/*        column;*\/\r\n\r\n    \/*    align-items:*\/\r\n    \/*        center;*\/\r\n\r\n    \/*    width:*\/\r\n    \/*        100%;*\/\r\n\r\n    \/*    margin-top:*\/\r\n    \/*        24px;*\/\r\n\r\n    \/*}*\/\r\n\r\n\r\n    \/*.vp-btn {*\/\r\n\r\n    \/*    width:*\/\r\n    \/*        min(100%,260px);*\/\r\n\r\n    \/*}*\/\r\n    \r\n    \r\n    \r\n    .vp-buttons {\r\n\r\n    flex-direction:\r\n        row;\r\n\r\n    flex-wrap:\r\n        nowrap;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    justify-content:\r\n        center;\r\n\r\n    width:\r\n        100%;\r\n\r\n    gap:\r\n        10px;\r\n\r\n    margin-top:\r\n        24px;\r\n\r\n}\r\n\r\n\r\n.vp-btn {\r\n\r\n    width:\r\n        auto;\r\n\r\n    min-width:\r\n        0;\r\n\r\n    flex:\r\n        1 1 0;\r\n\r\n    padding:\r\n        12px 10px;\r\n\r\n    font-size:\r\n        14px;\r\n\r\n}\r\n\r\n\r\n    \/* CARDS *\/\r\n\r\n    .vp-card {\r\n\r\n        padding:\r\n            8px 10px;\r\n\r\n    }\r\n\r\n\r\n    .vp-card small {\r\n\r\n        font-size:\r\n            9px;\r\n\r\n    }\r\n\r\n\r\n    .vp-experience {\r\n\r\n        top:\r\n            7%;\r\n\r\n        left:\r\n            0;\r\n\r\n    }\r\n\r\n\r\n    .vp-wordpress {\r\n\r\n        top:\r\n            17%;\r\n\r\n        right:\r\n            0;\r\n\r\n    }\r\n\r\n\r\n    .vp-seo {\r\n\r\n        bottom:\r\n            8%;\r\n\r\n        left:\r\n            0;\r\n\r\n    }\r\n\r\n\r\n    .vp-bg::before {\r\n\r\n        width:\r\n            350px;\r\n\r\n        height:\r\n            350px;\r\n\r\n    }\r\n\r\n\r\n    .vp-bg::after {\r\n\r\n        width:\r\n            350px;\r\n\r\n        height:\r\n            350px;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   VERY SMALL MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 380px) {\r\n\r\n\r\n    .vp-container {\r\n\r\n        padding:\r\n            90px 12px 60px;\r\n\r\n    }\r\n\r\n\r\n    \/* Name still one line *\/\r\n\r\n    .vp-title {\r\n\r\n        font-size:\r\n            31px;\r\n\r\n        letter-spacing:\r\n            -1.5px;\r\n\r\n        white-space:\r\n            nowrap;\r\n\r\n    }\r\n\r\n\r\n    .vp-designation {\r\n\r\n        font-size:\r\n            18px;\r\n\r\n    }\r\n\r\n\r\n    .vp-mobile-image\r\n    .vp-image-area {\r\n\r\n        min-height:\r\n            330px;\r\n\r\n    }\r\n\r\n\r\n    .vp-profile {\r\n\r\n        width:\r\n            230px;\r\n\r\n    }\r\n\r\n\r\n    .vp-orbit-one {\r\n\r\n        width:\r\n            280px;\r\n\r\n        height:\r\n            150px;\r\n\r\n    }\r\n\r\n\r\n    .vp-orbit-two {\r\n\r\n        width:\r\n            250px;\r\n\r\n        height:\r\n            130px;\r\n\r\n    }\r\n\r\n\r\n    .vp-card {\r\n\r\n        transform:\r\n            scale(.85);\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n    #home.vp-home *,\r\n    #home.vp-home *::before,\r\n    #home.vp-home *::after {\r\n\r\n        animation-duration:\r\n            .01ms !important;\r\n\r\n        animation-iteration-count:\r\n            1 !important;\r\n\r\n    }\r\n\r\n}\r\n\r\n.elementor .e-flexbox-base {\r\n    padding: 0px;\r\n\r\n<\/style>\r\n\r\n\r\n\r\n<script>\r\n\r\n\/* =========================================================\r\n   LIGHTWEIGHT TYPING EFFECT\r\n========================================================= *\/\r\n\r\n(function () {\r\n\r\n\r\n    const typingElement =\r\n        document.getElementById(\"vp-typing\");\r\n\r\n\r\n    if (!typingElement) {\r\n\r\n        return;\r\n\r\n    }\r\n\r\n\r\n    const words = [\r\n\r\n        \"Web Designer\",\r\n\r\n        \"WordPress Developer\",\r\n\r\n        \"UI\/UX Designer\",\r\n\r\n        \"Front-End Developer\",\r\n\r\n        \"SEO Specialist\"\r\n\r\n    ];\r\n\r\n\r\n    let wordIndex = 0;\r\n\r\n    let charIndex = 0;\r\n\r\n    let deleting = false;\r\n\r\n\r\n    function typeEffect() {\r\n\r\n\r\n        const currentWord =\r\n            words[wordIndex];\r\n\r\n\r\n        if (!deleting) {\r\n\r\n\r\n            typingElement.textContent =\r\n                currentWord.substring(\r\n                    0,\r\n                    charIndex + 1\r\n                );\r\n\r\n\r\n            charIndex++;\r\n\r\n\r\n            if (\r\n                charIndex ===\r\n                currentWord.length\r\n            ) {\r\n\r\n\r\n                deleting = true;\r\n\r\n\r\n                setTimeout(\r\n                    typeEffect,\r\n                    1500\r\n                );\r\n\r\n\r\n                return;\r\n\r\n            }\r\n\r\n\r\n        } else {\r\n\r\n\r\n            typingElement.textContent =\r\n                currentWord.substring(\r\n                    0,\r\n                    charIndex - 1\r\n                );\r\n\r\n\r\n            charIndex--;\r\n\r\n\r\n            if (charIndex === 0) {\r\n\r\n\r\n                deleting = false;\r\n\r\n\r\n                wordIndex =\r\n                    (wordIndex + 1)\r\n                    % words.length;\r\n\r\n            }\r\n\r\n        }\r\n\r\n\r\n        setTimeout(\r\n            typeEffect,\r\n            deleting ? 45 : 80\r\n        );\r\n\r\n    }\r\n\r\n\r\n    typeEffect();\r\n\r\n\r\n})();\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-64ae1b3 e-con e-atomic-element e-flexbox-base e-default-div e-648a685 \" data-id=\"64ae1b3\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"64ae1b3\">\n    \t\t<div class=\"elementor-element elementor-element-94f21c0 elementor-widget elementor-widget-html\" data-id=\"94f21c0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<!-- =========================================================\r\n     VISHAL PANDEY - ABOUT SECTION\r\n     WordPress Elementor HTML Widget (fixed typing animation)\r\n========================================================= -->\r\n<section class=\"vp-about\" id=\"about\">\r\n<div class=\"vp-bg-grid\"><\/div>\r\n<div class=\"vp-bg-glow vp-glow-one\"><\/div>\r\n<div class=\"vp-bg-glow vp-glow-two\"><\/div>\r\n<div class=\"vp-particles\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n\r\n<div class=\"vp-about-container\">\r\n\r\n<div class=\"vp-about-content vp-reveal\">\r\n  <span class=\"vp-about-label\"><span class=\"vp-label-dot\"><\/span>ABOUT ME<\/span>\r\n  <h2>Turning Ideas Into <span class=\"vp-gradient-text\">Digital Experiences.<\/span><\/h2>\r\n\r\n  <div class=\"vp-typing-wrapper\">\r\n    <span class=\"vp-typing-prefix\">I am a <\/span>\r\n    <span id=\"vp-typing-text\"><\/span>\r\n    <span class=\"vp-typing-cursor\">|<\/span>\r\n  <\/div>\r\n\r\n  <p class=\"vp-about-description\">I'm <strong>Vishal Pandey<\/strong>, a Web Designer &amp; Developer with <strong>3+ years of experience<\/strong> in creating modern, responsive and user-friendly websites.<\/p>\r\n\r\n  <p class=\"vp-about-description\">I work across <strong>Frontend Development, Backend Development, Database Management, WordPress and SEO<\/strong>. My focus is to build websites that look modern, work smoothly and provide a great experience on every device.<\/p>\r\n\r\n  <div class=\"vp-about-stats\">\r\n    <div class=\"vp-stat-card\"><span class=\"vp-stat-number\">3+<\/span><span class=\"vp-stat-title\">Years Experience<\/span><\/div>\r\n    <div class=\"vp-stat-card\"><span class=\"vp-stat-number\">15+<\/span><span class=\"vp-stat-title\">Skills<\/span><\/div>\r\n    <div class=\"vp-stat-card\"><span class=\"vp-stat-number\">100%<\/span><span class=\"vp-stat-title\">Responsive<\/span><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"vp-skill-tags\">\r\n    <span>HTML5<\/span><span>CSS3<\/span><span>JavaScript<\/span><span>React.js<\/span><span>Bootstrap<\/span><span>PHP<\/span><span>MySQL<\/span><span>WordPress<\/span><span>Elementor<\/span><span>SEO<\/span>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"vp-about-visual vp-reveal\">\r\n  <div class=\"vp-visual-glow\"><\/div>\r\n  <div class=\"vp-floating-skill vp-skill-html\">HTML<\/div>\r\n  <div class=\"vp-floating-skill vp-skill-css\">CSS<\/div>\r\n  <div class=\"vp-floating-skill vp-skill-js\">JS<\/div>\r\n  <div class=\"vp-floating-skill vp-skill-react\">React<\/div>\r\n  <div class=\"vp-floating-skill vp-skill-db\">MySQL<\/div>\r\n\r\n  <div class=\"vp-code-window\">\r\n    <div class=\"vp-code-header\">\r\n      <div class=\"vp-window-buttons\"><span><\/span><span><\/span><span><\/span><\/div>\r\n      <div class=\"vp-file-name\"><span>&lt;\/&gt;<\/span> developer.js<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"vp-code-body\">\r\n<pre class=\"vp-pre\"><code class=\"vp-code\"><span class=\"vp-code-purple\">const<\/span> <span class=\"vp-code-blue\">developer<\/span> = {\r\n\r\n  <span class=\"vp-code-key\">name<\/span>:\r\n    <span class=\"vp-code-string\">\"Vishal Pandey\"<\/span>,\r\n\r\n  <span class=\"vp-code-key\">role<\/span>:\r\n    <span class=\"vp-code-string\">\"Web Designer &amp; Developer\"<\/span>,\r\n\r\n  <span class=\"vp-code-key\">experience<\/span>:\r\n    <span class=\"vp-code-number\">\"3+ years\"<\/span>,\r\n\r\n  <span class=\"vp-code-key\">frontend<\/span>: [\r\n    <span class=\"vp-code-string\">\"HTML\"<\/span>,\r\n    <span class=\"vp-code-string\">\"CSS\"<\/span>,\r\n    <span class=\"vp-code-string\">\"JavaScript\"<\/span>,\r\n    <span class=\"vp-code-string\">\"React\"<\/span>,\r\n    <span class=\"vp-code-string\">\"Bootstrap\"<\/span>\r\n  ],\r\n\r\n  <span class=\"vp-code-key\">backend<\/span>: [\r\n    <span class=\"vp-code-string\">\"PHP\"<\/span>,\r\n    <span class=\"vp-code-string\">\"REST API\"<\/span>\r\n  ],\r\n\r\n  <span class=\"vp-code-key\">database<\/span>: [\r\n    <span class=\"vp-code-string\">\"MySQL\"<\/span>,\r\n    <span class=\"vp-code-string\">\"SQL\"<\/span>\r\n  ],\r\n\r\n  <span class=\"vp-code-key\">cms<\/span>: [\r\n    <span class=\"vp-code-string\">\"WordPress\"<\/span>,\r\n    <span class=\"vp-code-string\">\"Elementor\"<\/span>\r\n  ],\r\n\r\n  <span class=\"vp-code-key\">seo<\/span>: [\r\n    <span class=\"vp-code-string\">\"On-Page\"<\/span>,\r\n    <span class=\"vp-code-string\">\"Technical SEO\"<\/span>,\r\n    <span class=\"vp-code-string\">\"Off-Page\"<\/span>\r\n  ]\r\n\r\n};<\/code><\/pre>\r\n    <\/div>\r\n\r\n    <div class=\"vp-code-status\">\r\n      <span class=\"vp-status-dot\"><\/span>\r\n      Available for new projects\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"vp-tech-orbit\">\r\n    <div class=\"vp-orbit-item vp-orbit-html\">HTML<\/div>\r\n    <div class=\"vp-orbit-item vp-orbit-css\">CSS<\/div>\r\n    <div class=\"vp-orbit-item vp-orbit-js\">JS<\/div>\r\n    <div class=\"vp-orbit-item vp-orbit-db\">DB<\/div>\r\n    <div class=\"vp-orbit-center\">&lt;\/&gt;<\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<\/div>\r\n<\/section>\r\n\r\n<style>\r\n\/* ===== MOBILE + TABLET: reduce vertical gaps ===== *\/\r\n@media (max-width:1000px){\r\n  .vp-about-container{gap:12px!important}\r\n  .vp-about-label{margin-bottom:0!important}\r\n  .vp-about-visual{margin-top:0!important;padding-top:0!important;padding-bottom:0!important}\r\n  .vp-typing-wrapper{margin-top:0!important}\r\n  .vp-about-description{margin-top:0!important}\r\n  .vp-about-description+.vp-about-description{margin-top:0!important}\r\n  .vp-about-stats{margin-top:12px!important}\r\n  .vp-skill-tags{margin-top:12px!important}\r\n}\r\n\r\n@media (max-width:600px){\r\n  .vp-about-container{gap:8px!important}\r\n  .vp-about-label{margin-bottom:0!important}\r\n  .vp-about-visual{padding:0!important;margin:0!important}\r\n  .vp-typing-wrapper{margin-top:0!important;min-height:30px}\r\n  .vp-about-description{margin-top:0!important}\r\n  .vp-about-description+.vp-about-description{margin-top:0!important}\r\n  .vp-about-stats{margin-top:10px!important}\r\n  .vp-skill-tags{margin-top:10px!important}\r\n}\r\n\r\n@media (max-width:380px){\r\n  .vp-about-container{gap:6px!important}\r\n  .vp-about-stats{margin-top:8px!important}\r\n  .vp-skill-tags{margin-top:8px!important}\r\n}\r\n\r\n@media (min-width:601px) and (max-width:1000px){\r\n  .vp-about-visual{min-height:500px}\r\n  .vp-code-window{width:88%}\r\n  .vp-about-description+.vp-about-description{margin-top:-50px}\r\n}\r\n\r\n@media (max-width:600px){\r\n  .vp-about-visual{width:100%;min-height:auto;padding:0}\r\n  .vp-code-window{width:84%}\r\n  .vp-about-description+.vp-about-description{margin-top:-32px}\r\n}\r\n\r\n@media (max-width:380px){\r\n  .vp-code-window{width:82%}\r\n  .vp-about-description+.vp-about-description{margin-top:-28px}\r\n}\r\n\r\n\/* ===== RESET ===== *\/\r\n.vp-about,.vp-about *{box-sizing:border-box}\r\n\r\n.vp-about{\r\n  width:100%;\r\n  max-width:100%;\r\n  margin:0;\r\n  padding:110px 0;\r\n  position:relative;\r\n  overflow:hidden;\r\n  background:#0B1120;\r\n  color:#fff;\r\n  isolation:isolate\r\n}\r\n\r\n\/* ===== BACKGROUND ===== *\/\r\n.vp-bg-grid{\r\n  position:absolute;\r\n  inset:0;\r\n  z-index:-3;\r\n  opacity:.18;\r\n  pointer-events:none;\r\n  background-image:\r\n    linear-gradient(rgba(59,130,246,.055) 1px,transparent 1px),\r\n    linear-gradient(90deg,rgba(139,92,246,.055) 1px,transparent 1px);\r\n  background-size:55px 55px;\r\n  animation:vpGridMove 18s linear infinite\r\n}\r\n\r\n@keyframes vpGridMove{\r\n  from{background-position:0 0}\r\n  to{background-position:55px 55px}\r\n}\r\n\r\n.vp-bg-glow{\r\n  position:absolute;\r\n  width:430px;\r\n  height:430px;\r\n  border-radius:50%;\r\n  filter:blur(110px);\r\n  pointer-events:none;\r\n  z-index:-2\r\n}\r\n\r\n.vp-glow-one{\r\n  top:-170px;\r\n  left:-180px;\r\n  background:#3B82F6;\r\n  opacity:.1;\r\n  animation:vpGlowOne 8s ease-in-out infinite alternate\r\n}\r\n\r\n.vp-glow-two{\r\n  right:-170px;\r\n  bottom:-170px;\r\n  background:#8B5CF6;\r\n  opacity:.1;\r\n  animation:vpGlowTwo 9s ease-in-out infinite alternate\r\n}\r\n\r\n@keyframes vpGlowOne{\r\n  from{transform:translate(0,0) scale(1)}\r\n  to{transform:translate(100px,80px) scale(1.2)}\r\n}\r\n\r\n@keyframes vpGlowTwo{\r\n  from{transform:translate(0,0) scale(1)}\r\n  to{transform:translate(-90px,-80px) scale(1.18)}\r\n}\r\n\r\n\/* ===== PARTICLES ===== *\/\r\n.vp-particles{\r\n  position:absolute;\r\n  inset:0;\r\n  z-index:-1;\r\n  pointer-events:none\r\n}\r\n\r\n.vp-particles i{\r\n  position:absolute;\r\n  display:block;\r\n  width:3px;\r\n  height:3px;\r\n  border-radius:50%;\r\n  background:#3B82F6;\r\n  opacity:.35;\r\n  box-shadow:0 0 12px #3B82F6;\r\n  animation:vpParticleFloat linear infinite\r\n}\r\n\r\n.vp-particles i:nth-child(1){left:8%;top:20%;animation-duration:8s}\r\n.vp-particles i:nth-child(2){left:18%;top:75%;animation-duration:11s}\r\n.vp-particles i:nth-child(3){left:31%;top:35%;animation-duration:9s}\r\n.vp-particles i:nth-child(4){left:43%;top:82%;animation-duration:12s}\r\n.vp-particles i:nth-child(5){left:54%;top:15%;animation-duration:10s}\r\n.vp-particles i:nth-child(6){left:65%;top:65%;animation-duration:8s}\r\n.vp-particles i:nth-child(7){left:74%;top:30%;animation-duration:13s}\r\n.vp-particles i:nth-child(8){left:82%;top:80%;animation-duration:10s}\r\n.vp-particles i:nth-child(9){left:90%;top:22%;animation-duration:9s}\r\n.vp-particles i:nth-child(10){left:96%;top:58%;animation-duration:12s}\r\n\r\n@keyframes vpParticleFloat{\r\n  0%{transform:translateY(30px);opacity:0}\r\n  20%{opacity:.35}\r\n  50%{transform:translateY(-40px);opacity:.7}\r\n  80%{opacity:.25}\r\n  100%{transform:translateY(-90px);opacity:0}\r\n}\r\n\r\n\/* ===== CONTAINER ===== *\/\r\n.vp-about-container{\r\n  width:100%;\r\n  max-width:1450px;\r\n  margin:0 auto;\r\n  padding:0 5%;\r\n  display:grid;\r\n  grid-template-columns:minmax(0,1fr) minmax(0,1fr);\r\n  align-items:center;\r\n  gap:70px;\r\n  position:relative;\r\n  z-index:2\r\n}\r\n\r\n.vp-about-content{\r\n  width:100%;\r\n  max-width:680px\r\n}\r\n\r\n.vp-about-label{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:10px;\r\n  color:#60A5FA;\r\n  font-size:13px;\r\n  font-weight:700;\r\n  letter-spacing:2px;\r\n  margin-bottom:20px\r\n}\r\n\r\n.vp-label-dot{\r\n  width:8px;\r\n  height:8px;\r\n  flex:0 0 8px;\r\n  border-radius:50%;\r\n  background:#3B82F6;\r\n  box-shadow:0 0 10px #3B82F6,0 0 20px rgba(59,130,246,.5);\r\n  animation:vpPulseDot 1.8s infinite\r\n}\r\n\r\n@keyframes vpPulseDot{\r\n  0%,100%{transform:scale(1);opacity:1}\r\n  50%{transform:scale(1.45);opacity:.55}\r\n}\r\n\r\n\/* ===== HEADING ===== *\/\r\n.vp-about-content h2{\r\n  margin:0;\r\n  padding:0;\r\n  font-size:clamp(38px,4vw,64px);\r\n  line-height:1.08;\r\n  font-weight:800;\r\n  letter-spacing:-2px;\r\n  color:#fff\r\n}\r\n\r\n.vp-gradient-text{\r\n  display:block;\r\n  background:linear-gradient(90deg,#3B82F6,#8B5CF6,#3B82F6);\r\n  background-size:200% auto;\r\n  -webkit-background-clip:text;\r\n  background-clip:text;\r\n  color:transparent;\r\n  animation:vpGradientMove 4s linear infinite\r\n}\r\n\r\n@keyframes vpGradientMove{\r\n  0%{background-position:0 center}\r\n  100%{background-position:200% center}\r\n}\r\n\r\n\/* ===== TYPING ===== *\/\r\n.vp-typing-wrapper{\r\n  margin-top:24px;\r\n  min-height:35px;\r\n  font-size:clamp(20px,2vw,27px);\r\n  line-height:1.4;\r\n  font-weight:600;\r\n  white-space:nowrap\r\n}\r\n\r\n.vp-typing-prefix{\r\n  color:#94A3B8\r\n}\r\n\r\n#vp-typing-text{\r\n  color:#60A5FA;\r\n  display:inline-block;\r\n  min-width:1px\r\n}\r\n\r\n.vp-typing-cursor{\r\n  color:#8B5CF6;\r\n  animation:vpCursorBlink .8s infinite\r\n}\r\n\r\n@keyframes vpCursorBlink{\r\n  50%{opacity:0}\r\n}\r\n\r\n\/* ===== DESCRIPTION ===== *\/\r\n.vp-about-description{\r\n  max-width:650px;\r\n  margin:18px 0 0;\r\n  color:#94A3B8;\r\n  font-size:16px;\r\n  line-height:1.8\r\n}\r\n\r\n.vp-about-description strong{\r\n  color:#E2E8F0\r\n}\r\n\r\n\/* ===== STATS ===== *\/\r\n.vp-about-stats{\r\n  width:100%;\r\n  display:grid;\r\n  grid-template-columns:repeat(3,minmax(0,1fr));\r\n  gap:14px;\r\n  margin-top:30px\r\n}\r\n\r\n.vp-stat-card{\r\n  min-width:0;\r\n  padding:17px 15px;\r\n  border:1px solid rgba(59,130,246,.18);\r\n  border-radius:14px;\r\n  background:rgba(15,23,42,.65);\r\n  backdrop-filter:blur(10px);\r\n  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease\r\n}\r\n\r\n.vp-stat-card:hover{\r\n  transform:translateY(-5px);\r\n  border-color:#3B82F6;\r\n  box-shadow:0 10px 35px rgba(59,130,246,.12)\r\n}\r\n\r\n.vp-stat-number{\r\n  display:block;\r\n  font-size:25px;\r\n  line-height:1.2;\r\n  font-weight:800;\r\n  color:#fff\r\n}\r\n\r\n.vp-stat-title{\r\n  display:block;\r\n  margin-top:4px;\r\n  color:#64748B;\r\n  font-size:11px;\r\n  line-height:1.3\r\n}\r\n\r\n\/* ===== SKILLS ===== *\/\r\n.vp-skill-tags{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  gap:9px;\r\n  margin-top:28px\r\n}\r\n\r\n.vp-skill-tags span{\r\n  padding:8px 13px;\r\n  border-radius:50px;\r\n  font-size:12px;\r\n  line-height:1;\r\n  font-weight:600;\r\n  color:#CBD5E1;\r\n  background:rgba(59,130,246,.07);\r\n  border:1px solid rgba(59,130,246,.18);\r\n  transition:transform .3s ease,color .3s ease,border-color .3s ease,background .3s ease\r\n}\r\n\r\n.vp-skill-tags span:hover{\r\n  color:#fff;\r\n  background:rgba(59,130,246,.14);\r\n  border-color:#3B82F6;\r\n  transform:translateY(-3px)\r\n}\r\n\r\n\/* ===== VISUAL ===== *\/\r\n.vp-about-visual{\r\n  width:100%;\r\n  min-height:600px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  position:relative\r\n}\r\n\r\n.vp-visual-glow{\r\n  position:absolute;\r\n  width:330px;\r\n  height:330px;\r\n  border-radius:50%;\r\n  background:linear-gradient(135deg,#3B82F6,#8B5CF6);\r\n  filter:blur(100px);\r\n  opacity:.13;\r\n  pointer-events:none\r\n}\r\n\r\n\/* ===== CODE CARD ===== *\/\r\n.vp-code-window{\r\n  width:min(100%,570px);\r\n  position:relative;\r\n  z-index:5;\r\n  overflow:hidden;\r\n  border:1px solid rgba(139,92,246,.35);\r\n  border-radius:18px;\r\n  background:linear-gradient(160deg,rgba(15,23,42,.96),rgba(8,15,31,.98));\r\n  box-shadow:0 25px 70px rgba(0,0,0,.45),0 0 45px rgba(59,130,246,.1);\r\n  transform:perspective(1000px) rotateY(-3deg);\r\n  transition:transform .5s ease,border-color .5s ease,box-shadow .5s ease;\r\n  animation:vpCardFloat 6s ease-in-out infinite\r\n}\r\n\r\n.vp-code-window:hover{\r\n  transform:perspective(1000px) rotateY(0deg) translateY(-8px);\r\n  border-color:rgba(59,130,246,.6);\r\n  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 45px rgba(59,130,246,.18)\r\n}\r\n\r\n@keyframes vpCardFloat{\r\n  0%,100%{translate:0 0}\r\n  50%{translate:0 -10px}\r\n}\r\n\r\n.vp-code-window::before{\r\n  content:\"\";\r\n  position:absolute;\r\n  left:0;\r\n  right:0;\r\n  top:0;\r\n  height:2px;\r\n  z-index:3;\r\n  background:linear-gradient(90deg,transparent,#3B82F6,#8B5CF6,#22D3EE,transparent);\r\n  background-size:200% 100%;\r\n  animation:vpTopLine 3s linear infinite\r\n}\r\n\r\n@keyframes vpTopLine{\r\n  from{background-position:200% 0}\r\n  to{background-position:-200% 0}\r\n}\r\n\r\n.vp-code-window::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  left:0;\r\n  right:0;\r\n  top:0;\r\n  height:90px;\r\n  z-index:2;\r\n  pointer-events:none;\r\n  background:linear-gradient(180deg,transparent,rgba(59,130,246,.09),transparent);\r\n  animation:vpScan 5s ease-in-out infinite\r\n}\r\n\r\n@keyframes vpScan{\r\n  0%{transform:translateY(-100px)}\r\n  100%{transform:translateY(620px)}\r\n}\r\n\r\n.vp-code-header{\r\n  height:52px;\r\n  padding:0 18px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  background:rgba(15,23,42,.9);\r\n  border-bottom:1px solid rgba(255,255,255,.06)\r\n}\r\n\r\n.vp-window-buttons{\r\n  display:flex;\r\n  gap:7px\r\n}\r\n\r\n.vp-window-buttons span{\r\n  width:10px;\r\n  height:10px;\r\n  border-radius:50%;\r\n  background:#334155\r\n}\r\n\r\n.vp-window-buttons span:nth-child(1){background:#EF4444}\r\n.vp-window-buttons span:nth-child(2){background:#F59E0B}\r\n.vp-window-buttons span:nth-child(3){background:#22C55E}\r\n\r\n.vp-file-name{\r\n  font-size:12px;\r\n  color:#64748B\r\n}\r\n\r\n.vp-file-name span{\r\n  color:#60A5FA\r\n}\r\n\r\n.vp-code-body{\r\n  padding:24px 22px;\r\n  overflow-x:auto;\r\n  scrollbar-width:thin;\r\n  background:transparent!important\r\n}\r\n\r\n.vp-about .vp-code-body pre,\r\n.vp-about .vp-code-body pre.vp-pre,\r\n.vp-about .vp-code-body code,\r\n.vp-about .vp-code-body code.vp-code{\r\n  margin:0!important;\r\n  padding:0!important;\r\n  border:0!important;\r\n  border-radius:0!important;\r\n  box-shadow:none!important;\r\n  text-shadow:none!important;\r\n  background:transparent!important;\r\n  background-color:transparent!important;\r\n  color:#CBD5E1!important;\r\n  font-family:\"SFMono-Regular\",Consolas,\"Liberation Mono\",monospace!important;\r\n  font-size:12px;\r\n  line-height:1.8;\r\n  white-space:pre;\r\n  overflow:visible!important;\r\n  max-width:none!important\r\n}\r\n\r\n.vp-about .vp-code-body span{\r\n  background:transparent!important;\r\n  text-shadow:none!important\r\n}\r\n\r\n.vp-about .vp-code-body .vp-code-purple{color:#C084FC!important}\r\n.vp-about .vp-code-body .vp-code-blue{color:#60A5FA!important}\r\n.vp-about .vp-code-body .vp-code-key{color:#67E8F9!important}\r\n.vp-about .vp-code-body .vp-code-string{color:#86EFAC!important}\r\n.vp-about .vp-code-body .vp-code-number{color:#FCD34D!important}\r\n\r\n.vp-code-status{\r\n  padding:12px 18px;\r\n  border-top:1px solid rgba(255,255,255,.06);\r\n  font-size:11px;\r\n  color:#94A3B8;\r\n  display:flex;\r\n  align-items:center;\r\n  gap:8px;\r\n  position:relative;\r\n  z-index:3\r\n}\r\n\r\n.vp-status-dot{\r\n  width:7px;\r\n  height:7px;\r\n  flex:0 0 7px;\r\n  border-radius:50%;\r\n  background:#22C55E;\r\n  box-shadow:0 0 10px #22C55E;\r\n  animation:vpPulseDot 1.8s infinite\r\n}\r\n\r\n\/* ===== FLOATING SKILLS ===== *\/\r\n.vp-floating-skill{\r\n  position:absolute;\r\n  z-index:8;\r\n  padding:10px 15px;\r\n  border-radius:10px;\r\n  font-size:11px;\r\n  font-weight:700;\r\n  color:#E2E8F0;\r\n  background:rgba(15,23,42,.88);\r\n  border:1px solid rgba(59,130,246,.3);\r\n  box-shadow:0 10px 25px rgba(0,0,0,.25);\r\n  backdrop-filter:blur(10px)\r\n}\r\n\r\n.vp-skill-html{top:7%;left:2%;animation:vpFloatOne 4s ease-in-out infinite}\r\n.vp-skill-css{top:17%;right:1%;animation:vpFloatTwo 5s ease-in-out infinite}\r\n.vp-skill-js{bottom:18%;left:1%;animation:vpFloatTwo 4.5s ease-in-out infinite}\r\n.vp-skill-react{bottom:7%;right:7%;animation:vpFloatOne 5s ease-in-out infinite}\r\n.vp-skill-db{top:48%;right:-2%;animation:vpFloatTwo 4s ease-in-out infinite}\r\n\r\n@keyframes vpFloatOne{\r\n  0%,100%{transform:translateY(0)}\r\n  50%{transform:translateY(-12px)}\r\n}\r\n\r\n@keyframes vpFloatTwo{\r\n  0%,100%{transform:translateY(0)}\r\n  50%{transform:translateY(12px)}\r\n}\r\n\r\n\/* ===== ORBIT ===== *\/\r\n.vp-tech-orbit{\r\n  position:absolute;\r\n  width:390px;\r\n  height:390px;\r\n  border:1px dashed rgba(59,130,246,.13);\r\n  border-radius:50%;\r\n  animation:vpOrbitRotate 22s linear infinite;\r\n  pointer-events:none\r\n}\r\n\r\n@keyframes vpOrbitRotate{\r\n  to{transform:rotate(360deg)}\r\n}\r\n\r\n.vp-orbit-center{\r\n  position:absolute;\r\n  left:50%;\r\n  top:50%;\r\n  transform:translate(-50%,-50%);\r\n  width:60px;\r\n  height:60px;\r\n  display:grid;\r\n  place-items:center;\r\n  border-radius:50%;\r\n  color:#fff;\r\n  font-weight:800;\r\n  background:linear-gradient(135deg,#3B82F6,#8B5CF6);\r\n  box-shadow:0 0 35px rgba(59,130,246,.35)\r\n}\r\n\r\n.vp-orbit-item{\r\n  position:absolute;\r\n  width:45px;\r\n  height:45px;\r\n  display:grid;\r\n  place-items:center;\r\n  border-radius:50%;\r\n  font-size:10px;\r\n  font-weight:800;\r\n  color:#fff;\r\n  background:#111827;\r\n  border:1px solid rgba(59,130,246,.35);\r\n  box-shadow:0 0 20px rgba(59,130,246,.12)\r\n}\r\n\r\n.vp-orbit-html{top:-22px;left:50%;transform:translateX(-50%)}\r\n.vp-orbit-css{right:-22px;top:50%;transform:translateY(-50%)}\r\n.vp-orbit-js{bottom:-22px;left:50%;transform:translateX(-50%)}\r\n.vp-orbit-db{left:-22px;top:50%;transform:translateY(-50%)}\r\n\r\n\/* ===== REVEAL ===== *\/\r\n.vp-reveal{\r\n  opacity:0;\r\n  transform:translateY(30px);\r\n  transition:opacity .8s ease,transform .8s ease\r\n}\r\n\r\n.vp-reveal.vp-show{\r\n  opacity:1;\r\n  transform:translateY(0)\r\n}\r\n\r\n\/* ===== TABLET ===== *\/\r\n@media (max-width:1000px){\r\n  .vp-about{padding:90px 0}\r\n\r\n  .vp-about-container{\r\n    display:flex;\r\n    flex-direction:column;\r\n    gap:50px;\r\n    padding:0 5%\r\n  }\r\n\r\n  .vp-about-content{\r\n    display:contents\r\n  }\r\n\r\n  .vp-about-label{\r\n    order:1;\r\n    justify-content:center;\r\n    margin-bottom:-25px\r\n  }\r\n\r\n  .vp-about-content h2{\r\n    order:2;\r\n    width:100%;\r\n    text-align:center\r\n  }\r\n\r\n  .vp-about-visual{\r\n    order:3;\r\n    width:100%;\r\n    min-height:560px\r\n  }\r\n\r\n  .vp-typing-wrapper{\r\n    order:4;\r\n    width:100%;\r\n    text-align:center\r\n  }\r\n\r\n  .vp-about-description:nth-of-type(1){order:5}\r\n  .vp-about-description:nth-of-type(2){order:6}\r\n\r\n  .vp-about-description{\r\n    width:100%;\r\n    max-width:850px;\r\n    margin-left:auto;\r\n    margin-right:auto;\r\n    text-align:center\r\n  }\r\n\r\n  .vp-about-stats{\r\n    order:7;\r\n    width:100%;\r\n    max-width:700px;\r\n    margin-left:auto;\r\n    margin-right:auto\r\n  }\r\n\r\n  .vp-skill-tags{\r\n    order:8;\r\n    justify-content:center\r\n  }\r\n\r\n  .vp-about-content h2{\r\n    font-size:clamp(40px,6vw,58px)\r\n  }\r\n}\r\n\r\n\/* ===== MOBILE ===== *\/\r\n@media (max-width:600px){\r\n  .vp-about{padding:75px 0}\r\n\r\n  .vp-about-container{\r\n    gap:32px;\r\n    padding:0 16px\r\n  }\r\n\r\n  .vp-about-content h2{\r\n    font-size:clamp(32px,9vw,43px);\r\n    line-height:1.08;\r\n    letter-spacing:-1.2px\r\n  }\r\n\r\n  .vp-about-label{\r\n    font-size:11px;\r\n    letter-spacing:1.7px;\r\n    margin-bottom:-17px\r\n  }\r\n\r\n  .vp-about-visual{\r\n    min-height:auto;\r\n    padding:5px 0 10px\r\n  }\r\n\r\n  .vp-code-window{\r\n    width:100%;\r\n    transform:none;\r\n    border-radius:14px\r\n  }\r\n\r\n  .vp-code-window:hover{\r\n    transform:translateY(-4px)\r\n  }\r\n\r\n  .vp-code-header{\r\n    height:46px;\r\n    padding:0 13px\r\n  }\r\n\r\n  .vp-code-body{\r\n    padding:17px 13px\r\n  }\r\n\r\n  .vp-about .vp-code-body pre,\r\n  .vp-about .vp-code-body pre.vp-pre,\r\n  .vp-about .vp-code-body code,\r\n  .vp-about .vp-code-body code.vp-code{\r\n    font-size:8.5px;\r\n    line-height:1.7\r\n  }\r\n\r\n  .vp-code-status{\r\n    padding:10px 13px;\r\n    font-size:10px\r\n  }\r\n\r\n  .vp-typing-wrapper{\r\n    font-size:19px;\r\n    min-height:30px;\r\n    white-space:nowrap\r\n  }\r\n\r\n  .vp-about-description{\r\n    font-size:14px;\r\n    line-height:1.75;\r\n    margin-top:14px\r\n  }\r\n\r\n  .vp-about-stats{\r\n    width:100%;\r\n    display:grid;\r\n    grid-template-columns:repeat(3,minmax(0,1fr));\r\n    gap:7px;\r\n    margin-top:22px\r\n  }\r\n\r\n  .vp-stat-card{\r\n    min-width:0;\r\n    padding:12px 5px;\r\n    border-radius:11px\r\n  }\r\n\r\n  .vp-stat-number{\r\n    font-size:19px;\r\n    text-align:center\r\n  }\r\n\r\n  .vp-stat-title{\r\n    margin-top:3px;\r\n    font-size:8px;\r\n    text-align:center;\r\n    white-space:nowrap\r\n  }\r\n\r\n  .vp-skill-tags{\r\n    gap:6px;\r\n    margin-top:20px\r\n  }\r\n\r\n  .vp-skill-tags span{\r\n    padding:7px 9px;\r\n    font-size:9px\r\n  }\r\n\r\n  .vp-floating-skill,\r\n  .vp-tech-orbit{\r\n    display:none\r\n  }\r\n\r\n  .vp-visual-glow{\r\n    width:230px;\r\n    height:230px\r\n  }\r\n\r\n  @keyframes vpScan{\r\n    0%{transform:translateY(-100px)}\r\n    100%{transform:translateY(420px)}\r\n  }\r\n}\r\n\r\n\/* ===== VERY SMALL MOBILE ===== *\/\r\n@media (max-width:380px){\r\n  .vp-about{padding:65px 0}\r\n\r\n  .vp-about-container{\r\n    padding:0 12px;\r\n    gap:28px\r\n  }\r\n\r\n  .vp-about-content h2{\r\n    font-size:31px\r\n  }\r\n\r\n  .vp-typing-wrapper{\r\n    font-size:17px\r\n  }\r\n\r\n  .vp-about-description{\r\n    font-size:13px\r\n  }\r\n\r\n  .vp-about-stats{\r\n    gap:5px\r\n  }\r\n\r\n  .vp-stat-card{\r\n    padding:10px 3px\r\n  }\r\n\r\n  .vp-stat-number{\r\n    font-size:17px\r\n  }\r\n\r\n  .vp-stat-title{\r\n    font-size:7px\r\n  }\r\n\r\n  .vp-about .vp-code-body pre,\r\n  .vp-about .vp-code-body pre.vp-pre,\r\n  .vp-about .vp-code-body code,\r\n  .vp-about .vp-code-body code.vp-code{\r\n    font-size:7.5px\r\n  }\r\n}\r\n\r\n@media (min-width:1600px){\r\n  .vp-about-container{\r\n    max-width:1500px;\r\n    padding:0 40px\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion:reduce){\r\n  .vp-about *,.vp-about *::before,.vp-about *::after{\r\n    animation:none!important;\r\n    transition:none!important\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n\/* =========================================================\r\n   FIXED TYPING EFFECT\r\n   Roles:\r\n   Web Designer\r\n   UI\/UX Designer\r\n   Frontend Developer\r\n   Backend Developer\r\n   WordPress Developer\r\n   SEO Specialist\r\n   Full Stack Developer\r\n========================================================= *\/\r\n(function(){\r\n\r\n  function initVPTyping(){\r\n\r\n    var el = document.getElementById(\"vp-typing-text\");\r\n\r\n    if(!el || el.dataset.vpTypingStarted === \"true\"){\r\n      return;\r\n    }\r\n\r\n    el.dataset.vpTypingStarted = \"true\";\r\n\r\n    var words = [\r\n      \"Web Designer\",\r\n      \"UI\/UX Designer\",\r\n      \"Frontend Developer\",\r\n      \"Backend Developer\",\r\n      \"WordPress Developer\",\r\n      \"SEO Specialist\",\r\n      \"Full Stack Developer\"\r\n    ];\r\n\r\n    var wordIndex = 0;\r\n    var charIndex = 0;\r\n    var deleting = false;\r\n\r\n    function type(){\r\n\r\n      var currentWord = words[wordIndex];\r\n\r\n      if(!deleting){\r\n\r\n        charIndex++;\r\n\r\n        el.textContent = currentWord.substring(0,charIndex);\r\n\r\n        if(charIndex >= currentWord.length){\r\n\r\n          deleting = true;\r\n\r\n          setTimeout(type,1600);\r\n\r\n          return;\r\n        }\r\n\r\n        setTimeout(type,75);\r\n\r\n      }else{\r\n\r\n        charIndex--;\r\n\r\n        el.textContent = currentWord.substring(0,charIndex);\r\n\r\n        if(charIndex <= 0){\r\n\r\n          charIndex = 0;\r\n          deleting = false;\r\n\r\n          wordIndex++;\r\n\r\n          if(wordIndex >= words.length){\r\n            wordIndex = 0;\r\n          }\r\n\r\n          setTimeout(type,350);\r\n\r\n          return;\r\n        }\r\n\r\n        setTimeout(type,42);\r\n      }\r\n    }\r\n\r\n    type();\r\n  }\r\n\r\n  \/*\r\n   * Elementor sometimes loads scripts after DOM creation.\r\n   * These two methods make the typing animation more reliable.\r\n   *\/\r\n  if(document.readyState === \"loading\"){\r\n    document.addEventListener(\"DOMContentLoaded\",initVPTyping);\r\n  }else{\r\n    initVPTyping();\r\n  }\r\n\r\n  setTimeout(initVPTyping,300);\r\n\r\n})();\r\n\r\n\r\n\/* =========================================================\r\n   SCROLL REVEAL\r\n========================================================= *\/\r\n(function(){\r\n\r\n  var els = document.querySelectorAll(\".vp-reveal\");\r\n\r\n  if(!els.length)return;\r\n\r\n  if(!(\"IntersectionObserver\" in window)){\r\n\r\n    els.forEach(function(e){\r\n      e.classList.add(\"vp-show\");\r\n    });\r\n\r\n    return;\r\n  }\r\n\r\n  var ob = new IntersectionObserver(function(entries){\r\n\r\n    entries.forEach(function(en){\r\n\r\n      if(en.isIntersecting){\r\n\r\n        en.target.classList.add(\"vp-show\");\r\n\r\n        ob.unobserve(en.target);\r\n      }\r\n\r\n    });\r\n\r\n  },{\r\n    threshold:.12\r\n  });\r\n\r\n  els.forEach(function(e){\r\n    ob.observe(e);\r\n  });\r\n\r\n})();\r\n<\/script>\r\n\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-fa6b3f9 e-con e-atomic-element e-flexbox-base e-default-div e-ce65cde \" data-id=\"fa6b3f9\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"fa6b3f9\">\n    \t\t<div class=\"elementor-element elementor-element-366c77b elementor-widget elementor-widget-html\" data-id=\"366c77b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n     VISHAL PORTFOLIO - INTERACTIVE SKILLS SECTION\r\n     Theme: #0B1120 + #3B82F6 + #8B5CF6\r\n     Elementor HTML Widget - Ready to Paste\r\n========================================================= -->\r\n\r\n<section class=\"vp-skills\" id=\"skills\">\r\n\r\n  <!-- Animated Background -->\r\n  <div class=\"vp-skills-bg\" aria-hidden=\"true\">\r\n    <span class=\"vp-orb vp-orb-1\"><\/span>\r\n    <span class=\"vp-orb vp-orb-2\"><\/span>\r\n    <span class=\"vp-grid\"><\/span>\r\n\r\n    <span class=\"vp-dot vp-dot-1\"><\/span>\r\n    <span class=\"vp-dot vp-dot-2\"><\/span>\r\n    <span class=\"vp-dot vp-dot-3\"><\/span>\r\n    <span class=\"vp-dot vp-dot-4\"><\/span>\r\n    <span class=\"vp-dot vp-dot-5\"><\/span>\r\n    <span class=\"vp-dot vp-dot-6\"><\/span>\r\n  <\/div>\r\n\r\n  <div class=\"vp-skills-container\">\r\n\r\n    <!-- Section Heading -->\r\n    <div class=\"vp-skills-heading\">\r\n\r\n      <div class=\"vp-section-tag\">\r\n        <span class=\"vp-tag-dot\"><\/span>\r\n        MY SKILLS\r\n      <\/div>\r\n\r\n      <h2>\r\n        Technologies I <span>Work With<\/span>\r\n      <\/h2>\r\n\r\n      <p>\r\n        A combination of modern frontend, backend, database,\r\n        WordPress and SEO technologies to create fast,\r\n        responsive and user-friendly websites.\r\n      <\/p>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- Skills Grid -->\r\n    <div class=\"vp-skills-grid\">\r\n\r\n\r\n      <!-- ================= FRONTEND ================= -->\r\n      <article class=\"vp-skill-card\">\r\n\r\n        <div class=\"vp-card-top\">\r\n\r\n          <div class=\"vp-skill-icon vp-blue\">\r\n            &lt;\/&gt;\r\n          <\/div>\r\n\r\n          <div>\r\n            <span class=\"vp-card-number\">01<\/span>\r\n            <h3>Frontend Development<\/h3>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n        <p class=\"vp-card-description\">\r\n          Building modern, responsive and interactive interfaces\r\n          with clean and maintainable frontend code.\r\n        <\/p>\r\n\r\n        <div class=\"vp-skill-list\">\r\n\r\n          <div class=\"vp-skill-item\">\r\n            <div class=\"vp-skill-name\">\r\n              <span>HTML5<\/span>\r\n              <b>95%<\/b>\r\n            <\/div>\r\n            <div class=\"vp-progress\">\r\n              <span style=\"--width:95%\"><\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"vp-skill-item\">\r\n            <div class=\"vp-skill-name\">\r\n              <span>CSS3<\/span>\r\n              <b>92%<\/b>\r\n            <\/div>\r\n            <div class=\"vp-progress\">\r\n              <span style=\"--width:92%\"><\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"vp-skill-item\">\r\n            <div class=\"vp-skill-name\">\r\n              <span>JavaScript<\/span>\r\n              <b>85%<\/b>\r\n            <\/div>\r\n            <div class=\"vp-progress\">\r\n              <span style=\"--width:85%\"><\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"vp-skill-item\">\r\n            <div class=\"vp-skill-name\">\r\n              <span>React.js<\/span>\r\n              <b>75%<\/b>\r\n            <\/div>\r\n            <div class=\"vp-progress\">\r\n              <span style=\"--width:75%\"><\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"vp-skill-item\">\r\n            <div class=\"vp-skill-name\">\r\n              <span>Bootstrap<\/span>\r\n              <b>90%<\/b>\r\n            <\/div>\r\n            <div class=\"vp-progress\">\r\n              <span style=\"--width:90%\"><\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"vp-tech-tags\">\r\n          <span>Responsive<\/span>\r\n          <span>UI\/UX<\/span>\r\n          <span>Mobile First<\/span>\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n\r\n      <!-- ================= BACKEND ================= -->\r\n      <article class=\"vp-skill-card\">\r\n\r\n        <div class=\"vp-card-top\">\r\n\r\n          <div class=\"vp-skill-icon vp-purple\">\r\n            { }\r\n          <\/div>\r\n\r\n          <div>\r\n            <span class=\"vp-card-number\">02<\/span>\r\n            <h3>Backend Development<\/h3>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n        <p class=\"vp-card-description\">\r\n          Working with backend technologies and website\r\n          functionality to build reliable web solutions.\r\n        <\/p>\r\n\r\n        <div class=\"vp-skill-list\">\r\n\r\n          <div class=\"vp-skill-item\">\r\n            <div class=\"vp-skill-name\">\r\n              <span>PHP<\/span>\r\n              <b>75%<\/b>\r\n            <\/div>\r\n            <div class=\"vp-progress\">\r\n              <span style=\"--width:75%\"><\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"vp-skill-item\">\r\n            <div class=\"vp-skill-name\">\r\n              <span>WordPress<\/span>\r\n              <b>95%<\/b>\r\n            <\/div>\r\n            <div class=\"vp-progress\">\r\n              <span style=\"--width:95%\"><\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"vp-skill-item\">\r\n            <div class=\"vp-skill-name\">\r\n              <span>REST API<\/span>\r\n              <b>70%<\/b>\r\n            <\/div>\r\n            <div class=\"vp-progress\">\r\n              <span style=\"--width:70%\"><\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"vp-skill-item\">\r\n            <div class=\"vp-skill-name\">\r\n              <span>Elementor<\/span>\r\n              <b>95%<\/b>\r\n            <\/div>\r\n            <div class=\"vp-progress\">\r\n              <span style=\"--width:95%\"><\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"vp-skill-item\">\r\n            <div class=\"vp-skill-name\">\r\n              <span>Custom WP Development<\/span>\r\n              <b>85%<\/b>\r\n            <\/div>\r\n            <div class=\"vp-progress\">\r\n              <span style=\"--width:85%\"><\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"vp-tech-tags\">\r\n          <span>PHP<\/span>\r\n          <span>WordPress<\/span>\r\n          <span>API<\/span>\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n\r\n      <!-- ================= DATABASE ================= -->\r\n      <article class=\"vp-skill-card\">\r\n\r\n        <div class=\"vp-card-top\">\r\n\r\n          <div class=\"vp-skill-icon vp-blue\">\r\n            DB\r\n          <\/div>\r\n\r\n          <div>\r\n            <span class=\"vp-card-number\">03<\/span>\r\n            <h3>Database & Data<\/h3>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n        <p class=\"vp-card-description\">\r\n          Managing structured data, database operations and\r\n          dynamic website content efficiently.\r\n        <\/p>\r\n\r\n        <div class=\"vp-skill-list\">\r\n\r\n          <div class=\"vp-skill-item\">\r\n            <div class=\"vp-skill-name\">\r\n              <span>MySQL<\/span>\r\n              <b>85%<\/b>\r\n            <\/div>\r\n            <div class=\"vp-progress\">\r\n              <span style=\"--width:85%\"><\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"vp-skill-item\">\r\n            <div class=\"vp-skill-name\">\r\n              <span>Database Management<\/span>\r\n              <b>82%<\/b>\r\n            <\/div>\r\n            <div class=\"vp-progress\">\r\n              <span style=\"--width:82%\"><\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"vp-skill-item\">\r\n            <div class=\"vp-skill-name\">\r\n              <span>CRUD Operations<\/span>\r\n              <b>78%<\/b>\r\n            <\/div>\r\n            <div class=\"vp-progress\">\r\n              <span style=\"--width:78%\"><\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"vp-skill-item\">\r\n            <div class=\"vp-skill-name\">\r\n              <span>Data Handling<\/span>\r\n              <b>80%<\/b>\r\n            <\/div>\r\n            <div class=\"vp-progress\">\r\n              <span style=\"--width:80%\"><\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"vp-tech-tags\">\r\n          <span>MySQL<\/span>\r\n          <span>Database<\/span>\r\n          <span>CRUD<\/span>\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n\r\n      <!-- ================= SEO & TOOLS ================= -->\r\n      <article class=\"vp-skill-card\">\r\n\r\n        <div class=\"vp-card-top\">\r\n\r\n          <div class=\"vp-skill-icon vp-purple\">\r\n            SEO\r\n          <\/div>\r\n\r\n          <div>\r\n            <span class=\"vp-card-number\">04<\/span>\r\n            <h3>SEO & Tools<\/h3>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n        <p class=\"vp-card-description\">\r\n          Optimizing websites for search engines, performance,\r\n          visibility and better user experience.\r\n        <\/p>\r\n\r\n        <div class=\"vp-skill-list\">\r\n\r\n          <div class=\"vp-skill-item\">\r\n            <div class=\"vp-skill-name\">\r\n              <span>On-Page SEO<\/span>\r\n              <b>90%<\/b>\r\n            <\/div>\r\n            <div class=\"vp-progress\">\r\n              <span style=\"--width:90%\"><\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"vp-skill-item\">\r\n            <div class=\"vp-skill-name\">\r\n              <span>Technical SEO<\/span>\r\n              <b>80%<\/b>\r\n            <\/div>\r\n            <div class=\"vp-progress\">\r\n              <span style=\"--width:80%\"><\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"vp-skill-item\">\r\n            <div class=\"vp-skill-name\">\r\n              <span>Off-Page SEO<\/span>\r\n              <b>78%<\/b>\r\n            <\/div>\r\n            <div class=\"vp-progress\">\r\n              <span style=\"--width:78%\"><\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"vp-skill-item\">\r\n            <div class=\"vp-skill-name\">\r\n              <span>Git \/ GitHub<\/span>\r\n              <b>75%<\/b>\r\n            <\/div>\r\n            <div class=\"vp-progress\">\r\n              <span style=\"--width:75%\"><\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"vp-skill-item\">\r\n            <div class=\"vp-skill-name\">\r\n              <span>Figma<\/span>\r\n              <b>82%<\/b>\r\n            <\/div>\r\n            <div class=\"vp-progress\">\r\n              <span style=\"--width:82%\"><\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"vp-tech-tags\">\r\n          <span>SEO<\/span>\r\n          <span>GitHub<\/span>\r\n          <span>Figma<\/span>\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- ================= TECH STACK ================= -->\r\n\r\n    <div class=\"vp-stack\">\r\n\r\n      <div class=\"vp-stack-heading\">\r\n        <span>TECH STACK<\/span>\r\n        <i><\/i>\r\n      <\/div>\r\n\r\n      <div class=\"vp-stack-items\">\r\n\r\n        <span class=\"vp-stack-item\">HTML5<\/span>\r\n        <span class=\"vp-stack-item\">CSS3<\/span>\r\n        <span class=\"vp-stack-item\">JavaScript<\/span>\r\n        <span class=\"vp-stack-item\">React<\/span>\r\n        <span class=\"vp-stack-item\">Bootstrap<\/span>\r\n        <span class=\"vp-stack-item\">PHP<\/span>\r\n        <span class=\"vp-stack-item\">MySQL<\/span>\r\n        <span class=\"vp-stack-item\">WordPress<\/span>\r\n        <span class=\"vp-stack-item\">Elementor<\/span>\r\n        <span class=\"vp-stack-item\">SEO<\/span>\r\n        <span class=\"vp-stack-item\">Git<\/span>\r\n        <span class=\"vp-stack-item\">Figma<\/span>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- ================= BOTTOM CODE LINE ================= -->\r\n\r\n    <div class=\"vp-code-line\">\r\n\r\n      <span class=\"vp-code-symbol\">&lt;<\/span>\r\n\r\n      <span class=\"vp-code-text\">\r\n        Building <strong>Digital Experiences<\/strong>\r\n        with Code & Creativity\r\n      <\/span>\r\n\r\n      <span class=\"vp-code-symbol\">\/&gt;<\/span>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   RESET \/ MAIN SECTION\r\n========================================================= *\/\r\n\r\n.vp-skills,\r\n.vp-skills * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.vp-skills {\r\n  width: 100vw;\r\n  max-width: 100vw;\r\n  margin-left: calc(50% - 50vw);\r\n  margin-right: calc(50% - 50vw);\r\n\r\n  position: relative;\r\n  overflow: hidden;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 15% 20%,\r\n      rgba(59,130,246,.10),\r\n      transparent 28%\r\n    ),\r\n    radial-gradient(\r\n      circle at 85% 80%,\r\n      rgba(139,92,246,.10),\r\n      transparent 30%\r\n    ),\r\n    #0B1120;\r\n\r\n  color: #ffffff;\r\n\r\n  padding: 100px 20px;\r\n\r\n  font-family:\r\n    Inter,\r\n    -apple-system,\r\n    BlinkMacSystemFont,\r\n    \"Segoe UI\",\r\n    Arial,\r\n    sans-serif;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BACKGROUND\r\n========================================================= *\/\r\n\r\n.vp-skills-bg {\r\n  position: absolute;\r\n  inset: 0;\r\n  pointer-events: none;\r\n  overflow: hidden;\r\n}\r\n\r\n.vp-grid {\r\n  position: absolute;\r\n  inset: 0;\r\n\r\n  background-image:\r\n    linear-gradient(\r\n      rgba(255,255,255,.025) 1px,\r\n      transparent 1px\r\n    ),\r\n    linear-gradient(\r\n      90deg,\r\n      rgba(255,255,255,.025) 1px,\r\n      transparent 1px\r\n    );\r\n\r\n  background-size: 55px 55px;\r\n\r\n  mask-image: linear-gradient(\r\n    to bottom,\r\n    transparent,\r\n    black 20%,\r\n    black 80%,\r\n    transparent\r\n  );\r\n}\r\n\r\n\r\n.vp-orb {\r\n  position: absolute;\r\n\r\n  width: 280px;\r\n  height: 280px;\r\n\r\n  border-radius: 50%;\r\n\r\n  filter: blur(80px);\r\n\r\n  opacity: .18;\r\n\r\n  animation: vpFloat 10s ease-in-out infinite alternate;\r\n}\r\n\r\n.vp-orb-1 {\r\n  background: #3B82F6;\r\n\r\n  left: -120px;\r\n  top: 15%;\r\n}\r\n\r\n.vp-orb-2 {\r\n  background: #8B5CF6;\r\n\r\n  right: -120px;\r\n  bottom: 10%;\r\n\r\n  animation-delay: -4s;\r\n}\r\n\r\n\r\n@keyframes vpFloat {\r\n\r\n  0% {\r\n    transform: translate3d(0,0,0);\r\n  }\r\n\r\n  100% {\r\n    transform: translate3d(50px,-35px,0);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FLOATING DOTS\r\n========================================================= *\/\r\n\r\n.vp-dot {\r\n  position: absolute;\r\n\r\n  width: 4px;\r\n  height: 4px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: #3B82F6;\r\n\r\n  box-shadow:\r\n    0 0 12px rgba(59,130,246,.8);\r\n\r\n  animation: vpDotMove 7s ease-in-out infinite;\r\n}\r\n\r\n.vp-dot-1 {\r\n  left: 12%;\r\n  top: 15%;\r\n}\r\n\r\n.vp-dot-2 {\r\n  left: 82%;\r\n  top: 20%;\r\n  animation-delay: -2s;\r\n}\r\n\r\n.vp-dot-3 {\r\n  left: 20%;\r\n  top: 80%;\r\n  animation-delay: -4s;\r\n}\r\n\r\n.vp-dot-4 {\r\n  left: 75%;\r\n  top: 72%;\r\n  animation-delay: -1s;\r\n}\r\n\r\n.vp-dot-5 {\r\n  left: 48%;\r\n  top: 10%;\r\n  animation-delay: -3s;\r\n}\r\n\r\n.vp-dot-6 {\r\n  left: 92%;\r\n  top: 50%;\r\n  animation-delay: -5s;\r\n}\r\n\r\n\r\n@keyframes vpDotMove {\r\n\r\n  0%,\r\n  100% {\r\n    transform: translateY(0);\r\n    opacity: .3;\r\n  }\r\n\r\n  50% {\r\n    transform: translateY(-25px);\r\n    opacity: 1;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTAINER\r\n========================================================= *\/\r\n\r\n.vp-skills-container {\r\n  position: relative;\r\n  z-index: 2;\r\n\r\n  width: 100%;\r\n  max-width: 1180px;\r\n\r\n  margin: 0 auto;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADING\r\n========================================================= *\/\r\n\r\n.vp-skills-heading {\r\n  max-width: 760px;\r\n\r\n  margin: 0 auto 55px;\r\n\r\n  text-align: center;\r\n}\r\n\r\n\r\n.vp-section-tag {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 9px;\r\n\r\n  padding: 8px 15px;\r\n\r\n  border: 1px solid rgba(59,130,246,.3);\r\n\r\n  border-radius: 50px;\r\n\r\n  background: rgba(59,130,246,.08);\r\n\r\n  color: #60A5FA;\r\n\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n\r\n  letter-spacing: 2px;\r\n\r\n  margin-bottom: 18px;\r\n}\r\n\r\n\r\n.vp-tag-dot {\r\n  width: 7px;\r\n  height: 7px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: #3B82F6;\r\n\r\n  box-shadow: 0 0 10px #3B82F6;\r\n\r\n  animation: vpPulse 1.8s infinite;\r\n}\r\n\r\n\r\n@keyframes vpPulse {\r\n\r\n  0%,\r\n  100% {\r\n    opacity: 1;\r\n    transform: scale(1);\r\n  }\r\n\r\n  50% {\r\n    opacity: .45;\r\n    transform: scale(.65);\r\n  }\r\n\r\n}\r\n\r\n\r\n.vp-skills-heading h2 {\r\n  margin: 0;\r\n\r\n  font-size: clamp(34px, 5vw, 58px);\r\n\r\n  line-height: 1.08;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: -1.8px;\r\n\r\n  color: #ffffff;\r\n}\r\n\r\n\r\n.vp-skills-heading h2 span {\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      #3B82F6,\r\n      #8B5CF6\r\n    );\r\n\r\n  -webkit-background-clip: text;\r\n  background-clip: text;\r\n\r\n  color: transparent;\r\n}\r\n\r\n\r\n.vp-skills-heading p {\r\n  max-width: 680px;\r\n\r\n  margin: 20px auto 0;\r\n\r\n  color: #94A3B8;\r\n\r\n  font-size: 16px;\r\n\r\n  line-height: 1.75;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SKILL GRID\r\n========================================================= *\/\r\n\r\n.vp-skills-grid {\r\n  display: grid;\r\n\r\n  grid-template-columns: repeat(2, minmax(0, 1fr));\r\n\r\n  gap: 22px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SKILL CARD\r\n========================================================= *\/\r\n\r\n.vp-skill-card {\r\n\r\n  position: relative;\r\n\r\n  padding: 28px;\r\n\r\n  border: 1px solid rgba(148,163,184,.13);\r\n\r\n  border-radius: 22px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      145deg,\r\n      rgba(255,255,255,.055),\r\n      rgba(255,255,255,.018)\r\n    );\r\n\r\n  backdrop-filter: blur(8px);\r\n  -webkit-backdrop-filter: blur(8px);\r\n\r\n  overflow: hidden;\r\n\r\n  transition:\r\n    transform .35s ease,\r\n    border-color .35s ease,\r\n    box-shadow .35s ease;\r\n}\r\n\r\n\r\n.vp-skill-card::before {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  width: 180px;\r\n  height: 180px;\r\n\r\n  top: -110px;\r\n  right: -100px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: #3B82F6;\r\n\r\n  opacity: .06;\r\n\r\n  filter: blur(20px);\r\n\r\n  transition: .4s ease;\r\n}\r\n\r\n\r\n.vp-skill-card:hover {\r\n  transform: translateY(-7px);\r\n\r\n  border-color: rgba(59,130,246,.42);\r\n\r\n  box-shadow:\r\n    0 18px 55px rgba(0,0,0,.28),\r\n    0 0 35px rgba(59,130,246,.08);\r\n}\r\n\r\n\r\n.vp-skill-card:hover::before {\r\n  transform: scale(1.5);\r\n\r\n  opacity: .12;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD TOP\r\n========================================================= *\/\r\n\r\n.vp-card-top {\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 16px;\r\n\r\n  margin-bottom: 18px;\r\n}\r\n\r\n\r\n.vp-skill-icon {\r\n\r\n  flex: 0 0 52px;\r\n\r\n  width: 52px;\r\n  height: 52px;\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  border-radius: 14px;\r\n\r\n  font-size: 17px;\r\n  font-weight: 800;\r\n\r\n  letter-spacing: -.5px;\r\n\r\n  transition: transform .35s ease;\r\n}\r\n\r\n\r\n.vp-skill-card:hover .vp-skill-icon {\r\n  transform: rotate(-5deg) scale(1.08);\r\n}\r\n\r\n\r\n.vp-blue {\r\n\r\n  color: #60A5FA;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(59,130,246,.18),\r\n      rgba(59,130,246,.05)\r\n    );\r\n\r\n  border: 1px solid rgba(59,130,246,.25);\r\n\r\n  box-shadow:\r\n    inset 0 0 20px rgba(59,130,246,.04);\r\n}\r\n\r\n\r\n.vp-purple {\r\n\r\n  color: #A78BFA;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(139,92,246,.18),\r\n      rgba(139,92,246,.05)\r\n    );\r\n\r\n  border: 1px solid rgba(139,92,246,.25);\r\n\r\n  box-shadow:\r\n    inset 0 0 20px rgba(139,92,246,.04);\r\n}\r\n\r\n\r\n.vp-card-number {\r\n  display: block;\r\n\r\n  color: #64748B;\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 700;\r\n\r\n  letter-spacing: 1.5px;\r\n\r\n  margin-bottom: 4px;\r\n}\r\n\r\n\r\n.vp-card-top h3 {\r\n\r\n  margin: 0;\r\n\r\n  color: #F8FAFC;\r\n\r\n  font-size: 20px;\r\n\r\n  font-weight: 750;\r\n\r\n  line-height: 1.2;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DESCRIPTION\r\n========================================================= *\/\r\n\r\n.vp-card-description {\r\n\r\n  margin: 0 0 23px;\r\n\r\n  color: #8492A6;\r\n\r\n  font-size: 13px;\r\n\r\n  line-height: 1.65;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SKILL PROGRESS\r\n========================================================= *\/\r\n\r\n.vp-skill-list {\r\n  display: grid;\r\n\r\n  gap: 15px;\r\n}\r\n\r\n\r\n.vp-skill-name {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n  justify-content: space-between;\r\n\r\n  margin-bottom: 7px;\r\n\r\n  color: #CBD5E1;\r\n\r\n  font-size: 12px;\r\n\r\n  font-weight: 600;\r\n}\r\n\r\n\r\n.vp-skill-name b {\r\n\r\n  color: #64748B;\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 600;\r\n}\r\n\r\n\r\n.vp-progress {\r\n\r\n  width: 100%;\r\n  height: 5px;\r\n\r\n  overflow: hidden;\r\n\r\n  border-radius: 50px;\r\n\r\n  background: rgba(148,163,184,.10);\r\n}\r\n\r\n\r\n.vp-progress span {\r\n\r\n  display: block;\r\n\r\n  width: var(--width);\r\n\r\n  height: 100%;\r\n\r\n  border-radius: inherit;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      #3B82F6,\r\n      #8B5CF6\r\n    );\r\n\r\n  box-shadow:\r\n    0 0 9px rgba(59,130,246,.35);\r\n\r\n  transform-origin: left;\r\n\r\n  animation: vpProgress 1.3s ease both;\r\n}\r\n\r\n\r\n@keyframes vpProgress {\r\n\r\n  from {\r\n    transform: scaleX(0);\r\n  }\r\n\r\n  to {\r\n    transform: scaleX(1);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TAGS\r\n========================================================= *\/\r\n\r\n.vp-tech-tags {\r\n\r\n  display: flex;\r\n\r\n  flex-wrap: wrap;\r\n\r\n  gap: 7px;\r\n\r\n  margin-top: 24px;\r\n}\r\n\r\n\r\n.vp-tech-tags span {\r\n\r\n  padding: 6px 9px;\r\n\r\n  border-radius: 6px;\r\n\r\n  color: #94A3B8;\r\n\r\n  background: rgba(255,255,255,.035);\r\n\r\n  border: 1px solid rgba(148,163,184,.09);\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 600;\r\n\r\n  transition: .25s ease;\r\n}\r\n\r\n\r\n.vp-tech-tags span:hover {\r\n\r\n  color: #BFDBFE;\r\n\r\n  border-color: rgba(59,130,246,.35);\r\n\r\n  background: rgba(59,130,246,.08);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TECH STACK\r\n========================================================= *\/\r\n\r\n.vp-stack {\r\n\r\n  margin-top: 58px;\r\n\r\n  padding: 25px 28px;\r\n\r\n  border: 1px solid rgba(148,163,184,.10);\r\n\r\n  border-radius: 18px;\r\n\r\n  background: rgba(255,255,255,.018);\r\n}\r\n\r\n\r\n.vp-stack-heading {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 12px;\r\n\r\n  margin-bottom: 20px;\r\n}\r\n\r\n\r\n.vp-stack-heading span {\r\n\r\n  color: #64748B;\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: 2px;\r\n}\r\n\r\n\r\n.vp-stack-heading i {\r\n\r\n  display: block;\r\n\r\n  width: 45px;\r\n  height: 1px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      #3B82F6,\r\n      transparent\r\n    );\r\n}\r\n\r\n\r\n.vp-stack-items {\r\n\r\n  display: flex;\r\n\r\n  flex-wrap: wrap;\r\n\r\n  gap: 9px;\r\n}\r\n\r\n\r\n.vp-stack-item {\r\n\r\n  padding: 8px 13px;\r\n\r\n  border-radius: 8px;\r\n\r\n  color: #CBD5E1;\r\n\r\n  background: #111B31;\r\n\r\n  border: 1px solid rgba(148,163,184,.09);\r\n\r\n  font-size: 11px;\r\n\r\n  font-weight: 600;\r\n\r\n  transition:\r\n    transform .25s ease,\r\n    color .25s ease,\r\n    border-color .25s ease,\r\n    background .25s ease;\r\n}\r\n\r\n\r\n.vp-stack-item:hover {\r\n\r\n  color: #ffffff;\r\n\r\n  transform: translateY(-3px);\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(59,130,246,.15),\r\n      rgba(139,92,246,.15)\r\n    );\r\n\r\n  border-color: rgba(59,130,246,.35);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CODE LINE\r\n========================================================= *\/\r\n\r\n.vp-code-line {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  gap: 8px;\r\n\r\n  margin-top: 38px;\r\n\r\n  color: #64748B;\r\n\r\n  font-size: 13px;\r\n\r\n  text-align: center;\r\n}\r\n\r\n\r\n.vp-code-symbol {\r\n\r\n  color: #3B82F6;\r\n\r\n  font-weight: 800;\r\n}\r\n\r\n\r\n.vp-code-text strong {\r\n\r\n  color: #A78BFA;\r\n\r\n  font-weight: 700;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 900px) {\r\n\r\n  .vp-skills {\r\n\r\n    padding: 80px 22px;\r\n\r\n  }\r\n\r\n  .vp-skills-grid {\r\n\r\n    gap: 18px;\r\n\r\n  }\r\n\r\n  .vp-skill-card {\r\n\r\n    padding: 23px;\r\n\r\n  }\r\n\r\n  .vp-skills-heading {\r\n\r\n    margin-bottom: 42px;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n  .vp-skills {\r\n\r\n    padding: 65px 15px;\r\n\r\n  }\r\n\r\n  .vp-skills-container {\r\n\r\n    width: 100%;\r\n\r\n  }\r\n\r\n  .vp-skills-heading {\r\n\r\n    margin-bottom: 35px;\r\n\r\n  }\r\n\r\n  .vp-section-tag {\r\n\r\n    font-size: 10px;\r\n\r\n    padding: 7px 12px;\r\n\r\n    letter-spacing: 1.5px;\r\n\r\n  }\r\n\r\n  .vp-skills-heading h2 {\r\n\r\n    font-size: 34px;\r\n\r\n    letter-spacing: -1px;\r\n\r\n  }\r\n\r\n  .vp-skills-heading p {\r\n\r\n    font-size: 13px;\r\n\r\n    line-height: 1.65;\r\n\r\n    margin-top: 15px;\r\n\r\n  }\r\n\r\n  .vp-skills-grid {\r\n\r\n    grid-template-columns: 1fr;\r\n\r\n    gap: 15px;\r\n\r\n  }\r\n\r\n  .vp-skill-card {\r\n\r\n    padding: 21px 18px;\r\n\r\n    border-radius: 18px;\r\n\r\n  }\r\n\r\n  .vp-card-top {\r\n\r\n    gap: 13px;\r\n\r\n  }\r\n\r\n  .vp-skill-icon {\r\n\r\n    flex-basis: 46px;\r\n\r\n    width: 46px;\r\n    height: 46px;\r\n\r\n    font-size: 15px;\r\n\r\n  }\r\n\r\n  .vp-card-top h3 {\r\n\r\n    font-size: 18px;\r\n\r\n  }\r\n\r\n  .vp-card-description {\r\n\r\n    font-size: 12px;\r\n\r\n    margin-bottom: 20px;\r\n\r\n  }\r\n\r\n  .vp-skill-list {\r\n\r\n    gap: 13px;\r\n\r\n  }\r\n\r\n  .vp-stack {\r\n\r\n    margin-top: 35px;\r\n\r\n    padding: 20px 17px;\r\n\r\n  }\r\n\r\n  .vp-stack-items {\r\n\r\n    gap: 7px;\r\n\r\n  }\r\n\r\n  .vp-stack-item {\r\n\r\n    font-size: 10px;\r\n\r\n    padding: 7px 10px;\r\n\r\n  }\r\n\r\n  .vp-code-line {\r\n\r\n    margin-top: 28px;\r\n\r\n    font-size: 11px;\r\n\r\n    line-height: 1.5;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SMALL MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 380px) {\r\n\r\n  .vp-skills {\r\n\r\n    padding-left: 12px;\r\n    padding-right: 12px;\r\n\r\n  }\r\n\r\n  .vp-skills-heading h2 {\r\n\r\n    font-size: 30px;\r\n\r\n  }\r\n\r\n  .vp-skill-card {\r\n\r\n    padding: 18px 15px;\r\n\r\n  }\r\n\r\n  .vp-card-top h3 {\r\n\r\n    font-size: 16px;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCE MOTION ACCESSIBILITY\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n  .vp-orb,\r\n  .vp-dot,\r\n  .vp-tag-dot,\r\n  .vp-progress span {\r\n\r\n    animation: none !important;\r\n\r\n  }\r\n\r\n  .vp-skill-card,\r\n  .vp-skill-icon,\r\n  .vp-stack-item {\r\n\r\n    transition: none !important;\r\n\r\n  }\r\n\r\n}\r\n\r\n<\/style>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-666af79 e-con e-atomic-element e-flexbox-base e-default-div e-5860be8 \" data-id=\"666af79\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"666af79\">\n    \t\t<div class=\"elementor-element elementor-element-839d430 elementor-widget elementor-widget-html\" data-id=\"839d430\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n     VISHAL PORTFOLIO - SERVICES SECTION\r\n     Colors:\r\n     #0B1120 - Dark Background\r\n     #3B82F6 - Blue\r\n     #8B5CF6 - Purple\r\n     Elementor HTML Widget Ready\r\n========================================================= -->\r\n\r\n<section class=\"vp-services\" id=\"services\">\r\n\r\n    <!-- BACKGROUND -->\r\n    <div class=\"vp-services-bg\" aria-hidden=\"true\">\r\n        <span class=\"vp-orb vp-orb-1\"><\/span>\r\n        <span class=\"vp-orb vp-orb-2\"><\/span>\r\n        <span class=\"vp-grid\"><\/span>\r\n    <\/div>\r\n\r\n    <div class=\"vp-services-container\">\r\n\r\n        <!-- SECTION HEADER -->\r\n        <div class=\"vp-services-heading\">\r\n\r\n            <div class=\"vp-section-tag\">\r\n                <span class=\"vp-tag-dot\"><\/span>\r\n                MY SERVICES\r\n            <\/div>\r\n\r\n            <h2>\r\n                What I <span>Can Build<\/span>\r\n            <\/h2>\r\n\r\n            <p>\r\n                From interactive front-end interfaces to WordPress,\r\n                databases and SEO \u2014 I build modern, responsive and\r\n                performance-focused digital experiences.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- SERVICES GRID -->\r\n        <div class=\"vp-services-grid\">\r\n\r\n\r\n            <!-- 01 FRONTEND -->\r\n            <article class=\"vp-service-card\">\r\n\r\n                <div class=\"vp-card-top\">\r\n                    <span class=\"vp-number\">01<\/span>\r\n\r\n                    <div class=\"vp-service-icon\">\r\n                        &lt;\/&gt;\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <h3>Frontend Development<\/h3>\r\n\r\n                <p>\r\n                    Modern and responsive interfaces using HTML5, CSS3,\r\n                    JavaScript, Bootstrap and React with clean,\r\n                    maintainable code.\r\n                <\/p>\r\n\r\n                <div class=\"vp-tech-list\">\r\n                    <span>HTML5<\/span>\r\n                    <span>CSS3<\/span>\r\n                    <span>JavaScript<\/span>\r\n                    <span>React<\/span>\r\n                    <span>Bootstrap<\/span>\r\n                <\/div>\r\n\r\n                <div class=\"vp-card-line\"><\/div>\r\n\r\n            <\/article>\r\n\r\n\r\n            <!-- 02 BACKEND -->\r\n            <article class=\"vp-service-card\">\r\n\r\n                <div class=\"vp-card-top\">\r\n                    <span class=\"vp-number\">02<\/span>\r\n\r\n                    <div class=\"vp-service-icon\">\r\n                        { }\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <h3>Backend Development<\/h3>\r\n\r\n                <p>\r\n                    Server-side functionality, dynamic website features,\r\n                    APIs and business logic designed for reliable\r\n                    website performance.\r\n                <\/p>\r\n\r\n                <div class=\"vp-tech-list\">\r\n                    <span>PHP<\/span>\r\n                    <span>REST API<\/span>\r\n                    <span>WordPress<\/span>\r\n                    <span>Backend Logic<\/span>\r\n                <\/div>\r\n\r\n                <div class=\"vp-card-line\"><\/div>\r\n\r\n            <\/article>\r\n\r\n\r\n            <!-- 03 DATABASE -->\r\n            <article class=\"vp-service-card\">\r\n\r\n                <div class=\"vp-card-top\">\r\n                    <span class=\"vp-number\">03<\/span>\r\n\r\n                    <div class=\"vp-service-icon\">\r\n                        DB\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <h3>Database Management<\/h3>\r\n\r\n                <p>\r\n                    Structured database solutions for storing, managing\r\n                    and connecting website data with dynamic\r\n                    applications.\r\n                <\/p>\r\n\r\n                <div class=\"vp-tech-list\">\r\n                    <span>MySQL<\/span>\r\n                    <span>CRUD<\/span>\r\n                    <span>Database Design<\/span>\r\n                    <span>Data Integration<\/span>\r\n                <\/div>\r\n\r\n                <div class=\"vp-card-line\"><\/div>\r\n\r\n            <\/article>\r\n\r\n\r\n            <!-- 04 WORDPRESS -->\r\n            <article class=\"vp-service-card\">\r\n\r\n                <div class=\"vp-card-top\">\r\n                    <span class=\"vp-number\">04<\/span>\r\n\r\n                    <div class=\"vp-service-icon\">\r\n                        W\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <h3>WordPress Development<\/h3>\r\n\r\n                <p>\r\n                    Custom WordPress websites, Elementor pages,\r\n                    theme customization, functionality improvements\r\n                    and responsive layouts.\r\n                <\/p>\r\n\r\n                <div class=\"vp-tech-list\">\r\n                    <span>WordPress<\/span>\r\n                    <span>Elementor<\/span>\r\n                    <span>Custom CSS<\/span>\r\n                    <span>Plugins<\/span>\r\n                <\/div>\r\n\r\n                <div class=\"vp-card-line\"><\/div>\r\n\r\n            <\/article>\r\n\r\n\r\n            <!-- 05 UI UX -->\r\n            <article class=\"vp-service-card\">\r\n\r\n                <div class=\"vp-card-top\">\r\n                    <span class=\"vp-number\">05<\/span>\r\n\r\n                    <div class=\"vp-service-icon\">\r\n                        UX\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <h3>UI \/ UX & Responsive Design<\/h3>\r\n\r\n                <p>\r\n                    Clean, user-friendly interfaces designed to work\r\n                    smoothly across desktops, tablets and mobile\r\n                    devices.\r\n                <\/p>\r\n\r\n                <div class=\"vp-tech-list\">\r\n                    <span>UI Design<\/span>\r\n                    <span>UX<\/span>\r\n                    <span>Responsive<\/span>\r\n                    <span>Mobile First<\/span>\r\n                <\/div>\r\n\r\n                <div class=\"vp-card-line\"><\/div>\r\n\r\n            <\/article>\r\n\r\n\r\n            <!-- 06 SEO -->\r\n            <article class=\"vp-service-card\">\r\n\r\n                <div class=\"vp-card-top\">\r\n                    <span class=\"vp-number\">06<\/span>\r\n\r\n                    <div class=\"vp-service-icon\">\r\n                        SEO\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <h3>SEO & Website Optimization<\/h3>\r\n\r\n                <p>\r\n                    Search-friendly websites with on-page SEO,\r\n                    technical optimization, performance improvements\r\n                    and better website structure.\r\n                <\/p>\r\n\r\n                <div class=\"vp-tech-list\">\r\n                    <span>On-Page SEO<\/span>\r\n                    <span>Technical SEO<\/span>\r\n                    <span>Speed<\/span>\r\n                    <span>Optimization<\/span>\r\n                <\/div>\r\n\r\n                <div class=\"vp-card-line\"><\/div>\r\n\r\n            <\/article>\r\n\r\n\r\n            <!-- 07 LANDING PAGE -->\r\n            <article class=\"vp-service-card\">\r\n\r\n                <div class=\"vp-card-top\">\r\n                    <span class=\"vp-number\">07<\/span>\r\n\r\n                    <div class=\"vp-service-icon\">\r\n                        LP\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <h3>Landing Page Development<\/h3>\r\n\r\n                <p>\r\n                    Fast, responsive and visually engaging landing pages\r\n                    built for products, services, campaigns and\r\n                    business websites.\r\n                <\/p>\r\n\r\n                <div class=\"vp-tech-list\">\r\n                    <span>HTML<\/span>\r\n                    <span>CSS<\/span>\r\n                    <span>JavaScript<\/span>\r\n                    <span>CTA<\/span>\r\n                <\/div>\r\n\r\n                <div class=\"vp-card-line\"><\/div>\r\n\r\n            <\/article>\r\n\r\n\r\n            <!-- 08 MAINTENANCE -->\r\n            <article class=\"vp-service-card\">\r\n\r\n                <div class=\"vp-card-top\">\r\n                    <span class=\"vp-number\">08<\/span>\r\n\r\n                    <div class=\"vp-service-icon\">\r\n                        &lt;\u2713&gt;\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <h3>Website Maintenance<\/h3>\r\n\r\n                <p>\r\n                    Website updates, bug fixes, content changes,\r\n                    performance improvements and ongoing technical\r\n                    support.\r\n                <\/p>\r\n\r\n                <div class=\"vp-tech-list\">\r\n                    <span>Bug Fixes<\/span>\r\n                    <span>Updates<\/span>\r\n                    <span>Security<\/span>\r\n                    <span>Performance<\/span>\r\n                <\/div>\r\n\r\n                <div class=\"vp-card-line\"><\/div>\r\n\r\n            <\/article>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- BOTTOM SKILL STRIP -->\r\n        <div class=\"vp-skill-strip\">\r\n\r\n            <div class=\"vp-skill-title\">\r\n                <span class=\"vp-live-dot\"><\/span>\r\n                TECHNOLOGIES I WORK WITH\r\n            <\/div>\r\n\r\n            <div class=\"vp-skill-scroll\">\r\n\r\n                <span>HTML5<\/span>\r\n                <i>\u2022<\/i>\r\n\r\n                <span>CSS3<\/span>\r\n                <i>\u2022<\/i>\r\n\r\n                <span>JavaScript<\/span>\r\n                <i>\u2022<\/i>\r\n\r\n                <span>React<\/span>\r\n                <i>\u2022<\/i>\r\n\r\n                <span>Bootstrap<\/span>\r\n                <i>\u2022<\/i>\r\n\r\n                <span>PHP<\/span>\r\n                <i>\u2022<\/i>\r\n\r\n                <span>MySQL<\/span>\r\n                <i>\u2022<\/i>\r\n\r\n                <span>WordPress<\/span>\r\n                <i>\u2022<\/i>\r\n\r\n                <span>Elementor<\/span>\r\n                <i>\u2022<\/i>\r\n\r\n                <span>SEO<\/span>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- CTA -->\r\n        <div class=\"vp-services-cta\">\r\n\r\n            <div>\r\n                <small>HAVE A PROJECT IN MIND?<\/small>\r\n\r\n                <h3>\r\n                    Let's build something\r\n                    <span>great together.<\/span>\r\n                <\/h3>\r\n            <\/div>\r\n\r\n            <a href=\"#contact\" class=\"vp-service-btn\">\r\n                <span>Let's Talk<\/span>\r\n                <b>\u2192<\/b>\r\n            <\/a>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   VARIABLES\r\n========================================================= *\/\r\n\r\n.vp-services{\r\n    --vp-dark:#0B1120;\r\n    --vp-blue:#3B82F6;\r\n    --vp-purple:#8B5CF6;\r\n    --vp-white:#ffffff;\r\n    --vp-text:#94A3B8;\r\n    --vp-border:rgba(148,163,184,.13);\r\n\r\n    position:relative;\r\n    width:100%;\r\n    min-height:100vh;\r\n    overflow:hidden;\r\n    background:\r\n        radial-gradient(\r\n            circle at 20% 10%,\r\n            rgba(59,130,246,.10),\r\n            transparent 35%\r\n        ),\r\n        radial-gradient(\r\n            circle at 85% 80%,\r\n            rgba(139,92,246,.09),\r\n            transparent 35%\r\n        ),\r\n        var(--vp-dark);\r\n\r\n    color:var(--vp-white);\r\n    box-sizing:border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RESET\r\n========================================================= *\/\r\n\r\n.vp-services *,\r\n.vp-services *::before,\r\n.vp-services *::after{\r\n    box-sizing:border-box;\r\n}\r\n\r\n.vp-services h2,\r\n.vp-services h3,\r\n.vp-services p{\r\n    margin:0;\r\n}\r\n\r\n.vp-services a{\r\n    text-decoration:none;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BACKGROUND\r\n========================================================= *\/\r\n\r\n.vp-services-bg{\r\n    position:absolute;\r\n    inset:0;\r\n    pointer-events:none;\r\n    overflow:hidden;\r\n}\r\n\r\n.vp-grid{\r\n    position:absolute;\r\n    inset:0;\r\n\r\n    background-image:\r\n        linear-gradient(\r\n            rgba(59,130,246,.035) 1px,\r\n            transparent 1px\r\n        ),\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(59,130,246,.035) 1px,\r\n            transparent 1px\r\n        );\r\n\r\n    background-size:50px 50px;\r\n\r\n    mask-image:linear-gradient(\r\n        to bottom,\r\n        black,\r\n        transparent 90%\r\n    );\r\n}\r\n\r\n.vp-orb{\r\n    position:absolute;\r\n    border-radius:50%;\r\n    filter:blur(80px);\r\n    opacity:.18;\r\n    animation:vpFloat 8s ease-in-out infinite;\r\n}\r\n\r\n.vp-orb-1{\r\n    width:280px;\r\n    height:280px;\r\n    background:var(--vp-blue);\r\n    top:5%;\r\n    left:-100px;\r\n}\r\n\r\n.vp-orb-2{\r\n    width:300px;\r\n    height:300px;\r\n    background:var(--vp-purple);\r\n    right:-100px;\r\n    bottom:10%;\r\n    animation-delay:-4s;\r\n}\r\n\r\n@keyframes vpFloat{\r\n\r\n    0%,100%{\r\n        transform:translate3d(0,0,0);\r\n    }\r\n\r\n    50%{\r\n        transform:translate3d(30px,-25px,0);\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTAINER\r\n========================================================= *\/\r\n\r\n.vp-services-container{\r\n    position:relative;\r\n    z-index:2;\r\n\r\n    width:100%;\r\n    max-width:1400px;\r\n\r\n    margin:0 auto;\r\n    padding:100px 5%;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================= *\/\r\n\r\n.vp-services-heading{\r\n    max-width:760px;\r\n    margin:0 auto 60px;\r\n    text-align:center;\r\n}\r\n\r\n.vp-section-tag{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    gap:9px;\r\n\r\n    padding:8px 14px;\r\n\r\n    border:1px solid rgba(59,130,246,.25);\r\n    border-radius:100px;\r\n\r\n    background:rgba(59,130,246,.06);\r\n\r\n    color:#93C5FD;\r\n\r\n    font-size:12px;\r\n    font-weight:700;\r\n    letter-spacing:1.5px;\r\n}\r\n\r\n.vp-tag-dot{\r\n    width:7px;\r\n    height:7px;\r\n\r\n    border-radius:50%;\r\n\r\n    background:var(--vp-blue);\r\n\r\n    box-shadow:\r\n        0 0 10px var(--vp-blue);\r\n\r\n    animation:vpPulse 1.8s infinite;\r\n}\r\n\r\n@keyframes vpPulse{\r\n\r\n    0%,100%{\r\n        opacity:1;\r\n        transform:scale(1);\r\n    }\r\n\r\n    50%{\r\n        opacity:.4;\r\n        transform:scale(.7);\r\n    }\r\n\r\n}\r\n\r\n.vp-services-heading h2{\r\n    margin-top:22px;\r\n\r\n    font-size:clamp(34px,5vw,58px);\r\n    line-height:1.05;\r\n    font-weight:800;\r\n    letter-spacing:-2px;\r\n    color: white;\r\n}\r\n\r\n.vp-services-heading h2 span{\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            var(--vp-blue),\r\n            var(--vp-purple)\r\n        );\r\n\r\n    -webkit-background-clip:text;\r\n    background-clip:text;\r\n    -webkit-text-fill-color:transparent;\r\n}\r\n\r\n.vp-services-heading p{\r\n    max-width:680px;\r\n    margin:20px auto 0;\r\n\r\n    color:var(--vp-text);\r\n\r\n    font-size:16px;\r\n    line-height:1.8;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SERVICES GRID\r\n========================================================= *\/\r\n\r\n.vp-services-grid{\r\n    display:grid;\r\n\r\n    grid-template-columns:\r\n        repeat(4,minmax(0,1fr));\r\n\r\n    gap:20px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SERVICE CARD\r\n========================================================= *\/\r\n\r\n.vp-service-card{\r\n    position:relative;\r\n\r\n    min-height:350px;\r\n\r\n    padding:28px 25px;\r\n\r\n    border:1px solid var(--vp-border);\r\n    border-radius:20px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            rgba(255,255,255,.055),\r\n            rgba(255,255,255,.018)\r\n        );\r\n\r\n    backdrop-filter:blur(8px);\r\n\r\n    overflow:hidden;\r\n\r\n    transition:\r\n        transform .35s ease,\r\n        border-color .35s ease,\r\n        box-shadow .35s ease;\r\n\r\n    isolation:isolate;\r\n}\r\n\r\n\r\n\/* CARD GLOW *\/\r\n\r\n.vp-service-card::before{\r\n    content:\"\";\r\n\r\n    position:absolute;\r\n\r\n    width:180px;\r\n    height:180px;\r\n\r\n    right:-90px;\r\n    top:-90px;\r\n\r\n    border-radius:50%;\r\n\r\n    background:\r\n        radial-gradient(\r\n            circle,\r\n            rgba(59,130,246,.22),\r\n            transparent 70%\r\n        );\r\n\r\n    transition:.4s ease;\r\n\r\n    z-index:-1;\r\n}\r\n\r\n.vp-service-card::after{\r\n    content:\"\";\r\n\r\n    position:absolute;\r\n\r\n    left:0;\r\n    right:0;\r\n    bottom:0;\r\n\r\n    height:2px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            transparent,\r\n            var(--vp-blue),\r\n            var(--vp-purple),\r\n            transparent\r\n        );\r\n\r\n    transform:scaleX(0);\r\n\r\n    transform-origin:center;\r\n\r\n    transition:.4s ease;\r\n}\r\n\r\n\r\n.vp-service-card:hover{\r\n    transform:translateY(-8px);\r\n\r\n    border-color:\r\n        rgba(59,130,246,.35);\r\n\r\n    box-shadow:\r\n        0 20px 50px rgba(0,0,0,.28),\r\n        0 0 30px rgba(59,130,246,.07);\r\n}\r\n\r\n.vp-service-card:hover::before{\r\n    transform:scale(1.5);\r\n}\r\n\r\n.vp-service-card:hover::after{\r\n    transform:scaleX(1);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD TOP\r\n========================================================= *\/\r\n\r\n.vp-card-top{\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:space-between;\r\n\r\n    margin-bottom:30px;\r\n}\r\n\r\n.vp-number{\r\n    color:rgba(148,163,184,.45);\r\n\r\n    font-family:monospace;\r\n\r\n    font-size:12px;\r\n    font-weight:700;\r\n\r\n    letter-spacing:1px;\r\n}\r\n\r\n.vp-service-icon{\r\n    display:flex;\r\n\r\n    align-items:center;\r\n    justify-content:center;\r\n\r\n    width:48px;\r\n    height:48px;\r\n\r\n    border-radius:13px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            rgba(59,130,246,.16),\r\n            rgba(139,92,246,.16)\r\n        );\r\n\r\n    border:1px solid rgba(59,130,246,.22);\r\n\r\n    color:#BFDBFE;\r\n\r\n    font-family:monospace;\r\n    font-size:14px;\r\n    font-weight:800;\r\n\r\n    box-shadow:\r\n        inset 0 0 20px rgba(59,130,246,.05);\r\n\r\n    transition:.35s ease;\r\n}\r\n\r\n.vp-service-card:hover .vp-service-icon{\r\n    transform:rotate(-5deg) scale(1.08);\r\n\r\n    border-color:\r\n        rgba(139,92,246,.45);\r\n\r\n    box-shadow:\r\n        0 0 25px rgba(59,130,246,.15);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD CONTENT\r\n========================================================= *\/\r\n\r\n.vp-service-card h3{\r\n    margin-bottom:13px;\r\n\r\n    color:#F8FAFC;\r\n\r\n    font-size:20px;\r\n    line-height:1.3;\r\n    font-weight:750;\r\n}\r\n\r\n.vp-service-card p{\r\n    min-height:82px;\r\n\r\n    color:#94A3B8;\r\n\r\n    font-size:14px;\r\n    line-height:1.7;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TECH TAGS\r\n========================================================= *\/\r\n\r\n.vp-tech-list{\r\n    display:flex;\r\n\r\n    flex-wrap:wrap;\r\n\r\n    gap:7px;\r\n\r\n    margin-top:23px;\r\n}\r\n\r\n.vp-tech-list span{\r\n    padding:6px 9px;\r\n\r\n    border-radius:7px;\r\n\r\n    border:1px solid rgba(148,163,184,.10);\r\n\r\n    background:rgba(255,255,255,.035);\r\n\r\n    color:#AFC1D7;\r\n\r\n    font-size:10px;\r\n    font-weight:600;\r\n\r\n    transition:.25s ease;\r\n}\r\n\r\n.vp-service-card:hover\r\n.vp-tech-list span{\r\n    border-color:rgba(59,130,246,.18);\r\n    color:#DCEBFF;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD LINE\r\n========================================================= *\/\r\n\r\n.vp-card-line{\r\n    position:absolute;\r\n\r\n    left:25px;\r\n    bottom:22px;\r\n\r\n    width:35px;\r\n    height:2px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            var(--vp-blue),\r\n            var(--vp-purple)\r\n        );\r\n\r\n    opacity:.7;\r\n\r\n    transition:.35s ease;\r\n}\r\n\r\n.vp-service-card:hover .vp-card-line{\r\n    width:70px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TECHNOLOGY STRIP\r\n========================================================= *\/\r\n\r\n.vp-skill-strip{\r\n    display:flex;\r\n\r\n    align-items:center;\r\n\r\n    gap:25px;\r\n\r\n    margin-top:55px;\r\n\r\n    padding:18px 22px;\r\n\r\n    border:1px solid var(--vp-border);\r\n    border-radius:14px;\r\n\r\n    background:rgba(255,255,255,.025);\r\n\r\n    overflow:hidden;\r\n}\r\n\r\n.vp-skill-title{\r\n    flex:0 0 auto;\r\n\r\n    display:flex;\r\n    align-items:center;\r\n    gap:9px;\r\n\r\n    color:#CBD5E1;\r\n\r\n    font-size:10px;\r\n    font-weight:700;\r\n\r\n    letter-spacing:1.2px;\r\n\r\n    white-space:nowrap;\r\n}\r\n\r\n.vp-live-dot{\r\n    width:6px;\r\n    height:6px;\r\n\r\n    border-radius:50%;\r\n\r\n    background:#22C55E;\r\n\r\n    box-shadow:\r\n        0 0 10px #22C55E;\r\n}\r\n\r\n.vp-skill-scroll{\r\n    display:flex;\r\n    align-items:center;\r\n    gap:14px;\r\n\r\n    min-width:0;\r\n\r\n    color:#64748B;\r\n\r\n    font-family:monospace;\r\n    font-size:12px;\r\n\r\n    white-space:nowrap;\r\n\r\n    overflow:hidden;\r\n}\r\n\r\n.vp-skill-scroll span{\r\n    color:#94A3B8;\r\n\r\n    transition:.25s ease;\r\n}\r\n\r\n.vp-skill-scroll span:hover{\r\n    color:#60A5FA;\r\n}\r\n\r\n.vp-skill-scroll i{\r\n    font-style:normal;\r\n    color:#334155;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CTA\r\n========================================================= *\/\r\n\r\n.vp-services-cta{\r\n    display:flex;\r\n\r\n    align-items:center;\r\n    justify-content:space-between;\r\n\r\n    gap:30px;\r\n\r\n    margin-top:25px;\r\n\r\n    padding:35px;\r\n\r\n    border:1px solid rgba(59,130,246,.14);\r\n    border-radius:20px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            100deg,\r\n            rgba(59,130,246,.08),\r\n            rgba(139,92,246,.06)\r\n        );\r\n}\r\n\r\n.vp-services-cta small{\r\n    display:block;\r\n\r\n    margin-bottom:9px;\r\n\r\n    color:#64748B;\r\n\r\n    font-size:10px;\r\n    font-weight:700;\r\n    letter-spacing:1.5px;\r\n}\r\n\r\n.vp-services-cta h3{\r\n    color:#F8FAFC;\r\n\r\n    font-size:clamp(22px,3vw,30px);\r\n    line-height:1.25;\r\n}\r\n\r\n.vp-services-cta h3 span{\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            var(--vp-blue),\r\n            var(--vp-purple)\r\n        );\r\n\r\n    -webkit-background-clip:text;\r\n    background-clip:text;\r\n    -webkit-text-fill-color:transparent;\r\n}\r\n\r\n\r\n\/* BUTTON *\/\r\n\r\n.vp-service-btn{\r\n    display:inline-flex;\r\n\r\n    align-items:center;\r\n    justify-content:center;\r\n\r\n    gap:15px;\r\n\r\n    min-width:145px;\r\n\r\n    padding:14px 18px;\r\n\r\n    border-radius:10px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            100deg,\r\n            var(--vp-blue),\r\n            var(--vp-purple)\r\n        );\r\n\r\n    color:#fff;\r\n\r\n    font-size:13px;\r\n    font-weight:700;\r\n\r\n    box-shadow:\r\n        0 10px 25px rgba(59,130,246,.15);\r\n\r\n    transition:.3s ease;\r\n}\r\n\r\n.vp-service-btn b{\r\n    font-size:18px;\r\n\r\n    transition:.3s ease;\r\n}\r\n\r\n.vp-service-btn:hover{\r\n    transform:translateY(-3px);\r\n\r\n    box-shadow:\r\n        0 15px 35px rgba(59,130,246,.25);\r\n}\r\n\r\n.vp-service-btn:hover b{\r\n    transform:translateX(5px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width:1100px){\r\n\r\n    .vp-services-container{\r\n        padding:80px 4%;\r\n    }\r\n\r\n    .vp-services-grid{\r\n        grid-template-columns:\r\n            repeat(2,minmax(0,1fr));\r\n    }\r\n\r\n    .vp-service-card{\r\n        min-height:330px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SMALL TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width:768px){\r\n\r\n    .vp-services-container{\r\n        padding:70px 20px;\r\n    }\r\n\r\n    .vp-services-heading{\r\n        margin-bottom:40px;\r\n    }\r\n\r\n    .vp-services-heading h2{\r\n        font-size:38px;\r\n        letter-spacing:-1.2px;\r\n    }\r\n\r\n    .vp-services-heading p{\r\n        font-size:14px;\r\n        line-height:1.7;\r\n    }\r\n\r\n    .vp-services-grid{\r\n        grid-template-columns:1fr;\r\n        gap:15px;\r\n    }\r\n\r\n    .vp-service-card{\r\n        min-height:auto;\r\n        padding:24px 22px;\r\n    }\r\n\r\n    .vp-service-card p{\r\n        min-height:auto;\r\n    }\r\n\r\n    .vp-skill-strip{\r\n        display:block;\r\n        padding:18px;\r\n    }\r\n\r\n    .vp-skill-title{\r\n        margin-bottom:14px;\r\n    }\r\n\r\n    .vp-services-cta{\r\n        align-items:flex-start;\r\n        flex-direction:column;\r\n\r\n        padding:25px;\r\n    }\r\n\r\n    .vp-service-btn{\r\n        width:100%;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width:480px){\r\n\r\n    .vp-services-container{\r\n        padding:60px 15px;\r\n    }\r\n\r\n    .vp-services-heading{\r\n        margin-bottom:32px;\r\n    }\r\n\r\n    .vp-section-tag{\r\n        font-size:10px;\r\n        padding:7px 11px;\r\n    }\r\n\r\n    .vp-services-heading h2{\r\n        margin-top:17px;\r\n\r\n        font-size:32px;\r\n    }\r\n\r\n    .vp-services-heading p{\r\n        margin-top:15px;\r\n\r\n        font-size:13px;\r\n    }\r\n\r\n    .vp-service-card{\r\n        padding:21px 19px;\r\n        border-radius:16px;\r\n    }\r\n\r\n    .vp-card-top{\r\n        margin-bottom:24px;\r\n    }\r\n\r\n    .vp-service-icon{\r\n        width:44px;\r\n        height:44px;\r\n        border-radius:11px;\r\n    }\r\n\r\n    .vp-service-card h3{\r\n        font-size:18px;\r\n    }\r\n\r\n    .vp-service-card p{\r\n        font-size:13px;\r\n    }\r\n\r\n    .vp-tech-list{\r\n        gap:6px;\r\n        margin-top:18px;\r\n    }\r\n\r\n    .vp-tech-list span{\r\n        font-size:9px;\r\n        padding:5px 7px;\r\n    }\r\n\r\n    .vp-skill-strip{\r\n        margin-top:35px;\r\n    }\r\n\r\n    .vp-skill-scroll{\r\n        font-size:10px;\r\n    }\r\n\r\n    .vp-services-cta{\r\n        margin-top:15px;\r\n        padding:22px 20px;\r\n        border-radius:16px;\r\n    }\r\n\r\n    .vp-services-cta h3{\r\n        font-size:22px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCE MOTION\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion:reduce){\r\n\r\n    .vp-services *,\r\n    .vp-services *::before,\r\n    .vp-services *::after{\r\n        animation:none !important;\r\n        transition:none !important;\r\n    }\r\n\r\n}\r\n\r\n<\/style>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-751ab0b e-con e-atomic-element e-flexbox-base e-default-div e-77dd696 \" data-id=\"751ab0b\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"751ab0b\">\n    \t\t<div class=\"elementor-element elementor-element-960966a elementor-widget elementor-widget-html\" data-id=\"960966a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<!-- =========================================================\r\n     VISHAL PORTFOLIO - PROJECTS\r\n     CSS-ONLY POPUP\r\n     ELEMENTOR READY\r\n     NO JAVASCRIPT\r\n     FAST + FULL RESPONSIVE\r\n========================================================= -->\r\n\r\n<section class=\"vp-projects\" id=\"vp-projects\">\r\n\r\n    <div class=\"vp-project-bg\">\r\n        <span class=\"vp-glow vp-glow-1\"><\/span>\r\n        <span class=\"vp-glow vp-glow-2\"><\/span>\r\n        <span class=\"vp-grid-bg\"><\/span>\r\n    <\/div>\r\n\r\n    <div class=\"vp-project-wrap\">\r\n\r\n        <!-- HEADER -->\r\n        <div class=\"vp-project-header\">\r\n\r\n            <span class=\"vp-project-mini-title\">\r\n                <i><\/i> MY PROJECTS <i><\/i>\r\n            <\/span>\r\n\r\n            <h2>\r\n                Building <span>Digital Experiences<\/span>\r\n            <\/h2>\r\n\r\n            <p>\r\n                Projects created using modern frontend, backend,\r\n                database, WordPress, UI\/UX and SEO technologies.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- PROJECT GRID -->\r\n        <div class=\"vp-project-grid\">\r\n\r\n\r\n            <!-- =================================================\r\n                 PROJECT 01\r\n            ================================================== -->\r\n\r\n            <article class=\"vp-project-card\">\r\n\r\n                <div class=\"vp-project-top\">\r\n                    <span>01<\/span>\r\n                    <b>FRONTEND<\/b>\r\n                <\/div>\r\n\r\n                <div class=\"vp-project-icon\">\r\n                    &lt;\/&gt;\r\n                <\/div>\r\n\r\n                <h3>E-Commerce Website<\/h3>\r\n\r\n                <p>\r\n                    Modern responsive e-commerce website with\r\n                    product sections and interactive frontend UI.\r\n                <\/p>\r\n\r\n                <div class=\"vp-tags\">\r\n                    <span>HTML5<\/span>\r\n                    <span>CSS3<\/span>\r\n                    <span>JavaScript<\/span>\r\n                    <span>MySQL<\/span>\r\n                <\/div>\r\n\r\n                <input type=\"checkbox\" id=\"vp-pop-1\" class=\"vp-popup-toggle\">\r\n\r\n                <label for=\"vp-pop-1\" class=\"vp-details-btn\">\r\n                    View Details <strong>\u2197<\/strong>\r\n                <\/label>\r\n\r\n\r\n                <!-- POPUP -->\r\n                <div class=\"vp-popup\">\r\n\r\n                    <label for=\"vp-pop-1\" class=\"vp-popup-overlay\"><\/label>\r\n\r\n                    <div class=\"vp-popup-box\">\r\n\r\n                        <label for=\"vp-pop-1\" class=\"vp-popup-close\">\r\n                            \u00d7\r\n                        <\/label>\r\n\r\n                        <div class=\"vp-popup-head\">\r\n\r\n                            <div class=\"vp-popup-icon\">\r\n                                &lt;\/&gt;\r\n                            <\/div>\r\n\r\n                            <div>\r\n                                <small>PROJECT DETAILS<\/small>\r\n                                <h4>E-Commerce Website<\/h4>\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                        <div class=\"vp-popup-content\">\r\n\r\n                            <div>\r\n                                <b>How I Built It<\/b>\r\n                                <p>\r\n                                    Designed a responsive shopping\r\n                                    interface with structured product\r\n                                    sections, reusable UI components\r\n                                    and mobile-friendly layouts.\r\n                                <\/p>\r\n                            <\/div>\r\n\r\n                            <div>\r\n                                <b>Technologies<\/b>\r\n                                <p>\r\n                                    HTML5, CSS3, JavaScript,\r\n                                    Bootstrap, MySQL\r\n                                <\/p>\r\n                            <\/div>\r\n\r\n                            <div>\r\n                                <b>Features<\/b>\r\n                                <p>\r\n                                    Product cards, category sections,\r\n                                    responsive layout, interactive\r\n                                    elements and database-ready structure.\r\n                                <\/p>\r\n                            <\/div>\r\n\r\n                            <div class=\"vp-popup-two\">\r\n\r\n                                <div>\r\n                                    <b>Skills Used<\/b>\r\n                                    <p>\r\n                                        Frontend Development,\r\n                                        Responsive Design,\r\n                                        JavaScript,\r\n                                        UI Development\r\n                                    <\/p>\r\n                                <\/div>\r\n\r\n                                <div>\r\n                                    <b>Development Time<\/b>\r\n                                    <p>Approx. 10\u201314 Days<\/p>\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/article>\r\n\r\n\r\n            <!-- =================================================\r\n                 PROJECT 02\r\n            ================================================== -->\r\n\r\n            <article class=\"vp-project-card\">\r\n\r\n                <div class=\"vp-project-top\">\r\n                    <span>02<\/span>\r\n                    <b>REACT<\/b>\r\n                <\/div>\r\n\r\n                <div class=\"vp-project-icon vp-react\">\r\n                    \u269b\r\n                <\/div>\r\n\r\n                <h3>React Admin Dashboard<\/h3>\r\n\r\n                <p>\r\n                    Interactive dashboard interface with reusable\r\n                    components and responsive layouts.\r\n                <\/p>\r\n\r\n                <div class=\"vp-tags\">\r\n                    <span>React<\/span>\r\n                    <span>JavaScript<\/span>\r\n                    <span>CSS3<\/span>\r\n                    <span>API<\/span>\r\n                <\/div>\r\n\r\n                <input type=\"checkbox\" id=\"vp-pop-2\" class=\"vp-popup-toggle\">\r\n\r\n                <label for=\"vp-pop-2\" class=\"vp-details-btn\">\r\n                    View Details <strong>\u2197<\/strong>\r\n                <\/label>\r\n\r\n\r\n                <div class=\"vp-popup\">\r\n\r\n                    <label for=\"vp-pop-2\" class=\"vp-popup-overlay\"><\/label>\r\n\r\n                    <div class=\"vp-popup-box\">\r\n\r\n                        <label for=\"vp-pop-2\" class=\"vp-popup-close\">\r\n                            \u00d7\r\n                        <\/label>\r\n\r\n                        <div class=\"vp-popup-head\">\r\n\r\n                            <div class=\"vp-popup-icon vp-react\">\r\n                                \u269b\r\n                            <\/div>\r\n\r\n                            <div>\r\n                                <small>PROJECT DETAILS<\/small>\r\n                                <h4>React Admin Dashboard<\/h4>\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                        <div class=\"vp-popup-content\">\r\n\r\n                            <div>\r\n                                <b>How I Built It<\/b>\r\n                                <p>\r\n                                    Created a component-based dashboard\r\n                                    with reusable React components,\r\n                                    responsive sections and clean UI.\r\n                                <\/p>\r\n                            <\/div>\r\n\r\n                            <div>\r\n                                <b>Technologies<\/b>\r\n                                <p>\r\n                                    React, JavaScript, HTML5, CSS3,\r\n                                    REST API\r\n                                <\/p>\r\n                            <\/div>\r\n\r\n                            <div>\r\n                                <b>Features<\/b>\r\n                                <p>\r\n                                    Dashboard cards, responsive layout,\r\n                                    reusable components, data sections\r\n                                    and API-ready architecture.\r\n                                <\/p>\r\n                            <\/div>\r\n\r\n                            <div class=\"vp-popup-two\">\r\n\r\n                                <div>\r\n                                    <b>Skills Used<\/b>\r\n                                    <p>\r\n                                        React Development,\r\n                                        JavaScript, Component Design,\r\n                                        API Integration\r\n                                    <\/p>\r\n                                <\/div>\r\n\r\n                                <div>\r\n                                    <b>Development Time<\/b>\r\n                                    <p>Approx. 7\u201310 Days<\/p>\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/article>\r\n\r\n\r\n            <!-- =================================================\r\n                 PROJECT 03\r\n            ================================================== -->\r\n\r\n            <article class=\"vp-project-card\">\r\n\r\n                <div class=\"vp-project-top\">\r\n                    <span>03<\/span>\r\n                    <b>BACKEND<\/b>\r\n                <\/div>\r\n\r\n                <div class=\"vp-project-icon vp-php\">\r\n                    PHP\r\n                <\/div>\r\n\r\n                <h3>Service Booking System<\/h3>\r\n\r\n                <p>\r\n                    Booking system with customer forms, backend\r\n                    processing and MySQL database management.\r\n                <\/p>\r\n\r\n                <div class=\"vp-tags\">\r\n                    <span>PHP<\/span>\r\n                    <span>MySQL<\/span>\r\n                    <span>JavaScript<\/span>\r\n                    <span>CRUD<\/span>\r\n                <\/div>\r\n\r\n                <input type=\"checkbox\" id=\"vp-pop-3\" class=\"vp-popup-toggle\">\r\n\r\n                <label for=\"vp-pop-3\" class=\"vp-details-btn\">\r\n                    View Details <strong>\u2197<\/strong>\r\n                <\/label>\r\n\r\n\r\n                <div class=\"vp-popup\">\r\n\r\n                    <label for=\"vp-pop-3\" class=\"vp-popup-overlay\"><\/label>\r\n\r\n                    <div class=\"vp-popup-box\">\r\n\r\n                        <label for=\"vp-pop-3\" class=\"vp-popup-close\">\r\n                            \u00d7\r\n                        <\/label>\r\n\r\n                        <div class=\"vp-popup-head\">\r\n\r\n                            <div class=\"vp-popup-icon vp-php\">\r\n                                PHP\r\n                            <\/div>\r\n\r\n                            <div>\r\n                                <small>PROJECT DETAILS<\/small>\r\n                                <h4>Service Booking System<\/h4>\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                        <div class=\"vp-popup-content\">\r\n\r\n                            <div>\r\n                                <b>How I Built It<\/b>\r\n                                <p>\r\n                                    Developed a booking workflow where\r\n                                    users submit service details and\r\n                                    information is processed through\r\n                                    backend logic and stored in MySQL.\r\n                                <\/p>\r\n                            <\/div>\r\n\r\n                            <div>\r\n                                <b>Technologies<\/b>\r\n                                <p>\r\n                                    PHP, MySQL, JavaScript,\r\n                                    HTML5, CSS3\r\n                                <\/p>\r\n                            <\/div>\r\n\r\n                            <div>\r\n                                <b>Features<\/b>\r\n                                <p>\r\n                                    Booking form, service selection,\r\n                                    validation, database records,\r\n                                    CRUD operations and admin-ready flow.\r\n                                <\/p>\r\n                            <\/div>\r\n\r\n                            <div class=\"vp-popup-two\">\r\n\r\n                                <div>\r\n                                    <b>Skills Used<\/b>\r\n                                    <p>\r\n                                        Backend Development,\r\n                                        PHP, MySQL, CRUD,\r\n                                        Form Handling\r\n                                    <\/p>\r\n                                <\/div>\r\n\r\n                                <div>\r\n                                    <b>Development Time<\/b>\r\n                                    <p>Approx. 12\u201318 Days<\/p>\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/article>\r\n\r\n\r\n            <!-- =================================================\r\n                 PROJECT 04\r\n            ================================================== -->\r\n\r\n            <article class=\"vp-project-card\">\r\n\r\n                <div class=\"vp-project-top\">\r\n                    <span>04<\/span>\r\n                    <b>WORDPRESS<\/b>\r\n                <\/div>\r\n\r\n                <div class=\"vp-project-icon vp-wp\">\r\n                    W\r\n                <\/div>\r\n\r\n                <h3>Business WordPress Website<\/h3>\r\n\r\n                <p>\r\n                    Professional business website built with\r\n                    WordPress, Elementor, custom CSS and SEO.\r\n                <\/p>\r\n\r\n                <div class=\"vp-tags\">\r\n                    <span>WordPress<\/span>\r\n                    <span>Elementor<\/span>\r\n                    <span>PHP<\/span>\r\n                    <span>SEO<\/span>\r\n                <\/div>\r\n\r\n                <input type=\"checkbox\" id=\"vp-pop-4\" class=\"vp-popup-toggle\">\r\n\r\n                <label for=\"vp-pop-4\" class=\"vp-details-btn\">\r\n                    View Details <strong>\u2197<\/strong>\r\n                <\/label>\r\n\r\n\r\n                <div class=\"vp-popup\">\r\n\r\n                    <label for=\"vp-pop-4\" class=\"vp-popup-overlay\"><\/label>\r\n\r\n                    <div class=\"vp-popup-box\">\r\n\r\n                        <label for=\"vp-pop-4\" class=\"vp-popup-close\">\r\n                            \u00d7\r\n                        <\/label>\r\n\r\n                        <div class=\"vp-popup-head\">\r\n\r\n                            <div class=\"vp-popup-icon vp-wp\">\r\n                                W\r\n                            <\/div>\r\n\r\n                            <div>\r\n                                <small>PROJECT DETAILS<\/small>\r\n                                <h4>Business WordPress Website<\/h4>\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                        <div class=\"vp-popup-content\">\r\n\r\n                            <div>\r\n                                <b>How I Built It<\/b>\r\n                                <p>\r\n                                    Created a professional business\r\n                                    website using WordPress and\r\n                                    Elementor with custom styling\r\n                                    and responsive sections.\r\n                                <\/p>\r\n                            <\/div>\r\n\r\n                            <div>\r\n                                <b>Technologies<\/b>\r\n                                <p>\r\n                                    WordPress, Elementor, PHP,\r\n                                    CSS3, JavaScript, SEO\r\n                                <\/p>\r\n                            <\/div>\r\n\r\n                            <div>\r\n                                <b>Features<\/b>\r\n                                <p>\r\n                                    Responsive pages, custom sections,\r\n                                    contact forms, SEO structure,\r\n                                    reusable elements and optimized UI.\r\n                                <\/p>\r\n                            <\/div>\r\n\r\n                            <div class=\"vp-popup-two\">\r\n\r\n                                <div>\r\n                                    <b>Skills Used<\/b>\r\n                                    <p>\r\n                                        WordPress Development,\r\n                                        Elementor, Custom CSS,\r\n                                        SEO, Responsive Design\r\n                                    <\/p>\r\n                                <\/div>\r\n\r\n                                <div>\r\n                                    <b>Development Time<\/b>\r\n                                    <p>Approx. 5\u20138 Days<\/p>\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/article>\r\n\r\n\r\n            <!-- =================================================\r\n                 PROJECT 05\r\n            ================================================== -->\r\n\r\n            <article class=\"vp-project-card\">\r\n\r\n                <div class=\"vp-project-top\">\r\n                    <span>05<\/span>\r\n                    <b>JAVASCRIPT<\/b>\r\n                <\/div>\r\n\r\n                <div class=\"vp-project-icon vp-js\">\r\n                    JS\r\n                <\/div>\r\n\r\n                <h3>Interactive Portfolio<\/h3>\r\n\r\n                <p>\r\n                    Modern portfolio website with responsive\r\n                    layouts, animations and interactive components.\r\n                <\/p>\r\n\r\n                <div class=\"vp-tags\">\r\n                    <span>HTML5<\/span>\r\n                    <span>CSS3<\/span>\r\n                    <span>JavaScript<\/span>\r\n                    <span>UI\/UX<\/span>\r\n                <\/div>\r\n\r\n                <input type=\"checkbox\" id=\"vp-pop-5\" class=\"vp-popup-toggle\">\r\n\r\n                <label for=\"vp-pop-5\" class=\"vp-details-btn\">\r\n                    View Details <strong>\u2197<\/strong>\r\n                <\/label>\r\n\r\n\r\n                <div class=\"vp-popup\">\r\n\r\n                    <label for=\"vp-pop-5\" class=\"vp-popup-overlay\"><\/label>\r\n\r\n                    <div class=\"vp-popup-box\">\r\n\r\n                        <label for=\"vp-pop-5\" class=\"vp-popup-close\">\r\n                            \u00d7\r\n                        <\/label>\r\n\r\n                        <div class=\"vp-popup-head\">\r\n\r\n                            <div class=\"vp-popup-icon vp-js\">\r\n                                JS\r\n                            <\/div>\r\n\r\n                            <div>\r\n                                <small>PROJECT DETAILS<\/small>\r\n                                <h4>Interactive Portfolio<\/h4>\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                        <div class=\"vp-popup-content\">\r\n\r\n                            <div>\r\n                                <b>How I Built It<\/b>\r\n                                <p>\r\n                                    Designed a modern portfolio layout\r\n                                    with responsive sections, hover\r\n                                    effects, lightweight animations\r\n                                    and interactive components.\r\n                                <\/p>\r\n                            <\/div>\r\n\r\n                            <div>\r\n                                <b>Technologies<\/b>\r\n                                <p>\r\n                                    HTML5, CSS3, JavaScript,\r\n                                    UI\/UX, Responsive Design\r\n                                <\/p>\r\n                            <\/div>\r\n\r\n                            <div>\r\n                                <b>Features<\/b>\r\n                                <p>\r\n                                    Animated sections, project cards,\r\n                                    responsive design, smooth hover\r\n                                    interactions and mobile optimization.\r\n                                <\/p>\r\n                            <\/div>\r\n\r\n                            <div class=\"vp-popup-two\">\r\n\r\n                                <div>\r\n                                    <b>Skills Used<\/b>\r\n                                    <p>\r\n                                        Frontend Development,\r\n                                        JavaScript, CSS Animation,\r\n                                        UI\/UX, Responsive Design\r\n                                    <\/p>\r\n                                <\/div>\r\n\r\n                                <div>\r\n                                    <b>Development Time<\/b>\r\n                                    <p>Approx. 5\u20137 Days<\/p>\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/article>\r\n\r\n\r\n            <!-- =================================================\r\n                 PROJECT 06\r\n            ================================================== -->\r\n\r\n            <article class=\"vp-project-card\">\r\n\r\n                <div class=\"vp-project-top\">\r\n                    <span>06<\/span>\r\n                    <b>SEO<\/b>\r\n                <\/div>\r\n\r\n                <div class=\"vp-project-icon vp-seo\">\r\n                    \u2197\r\n                <\/div>\r\n\r\n                <h3>SEO & Content Website<\/h3>\r\n\r\n                <p>\r\n                    Content-focused website with blog structure,\r\n                    on-page SEO and performance optimization.\r\n                <\/p>\r\n\r\n                <div class=\"vp-tags\">\r\n                    <span>WordPress<\/span>\r\n                    <span>SEO<\/span>\r\n                    <span>MySQL<\/span>\r\n                    <span>Blog<\/span>\r\n                <\/div>\r\n\r\n                <input type=\"checkbox\" id=\"vp-pop-6\" class=\"vp-popup-toggle\">\r\n\r\n                <label for=\"vp-pop-6\" class=\"vp-details-btn\">\r\n                    View Details <strong>\u2197<\/strong>\r\n                <\/label>\r\n\r\n\r\n                <div class=\"vp-popup\">\r\n\r\n                    <label for=\"vp-pop-6\" class=\"vp-popup-overlay\"><\/label>\r\n\r\n                    <div class=\"vp-popup-box\">\r\n\r\n                        <label for=\"vp-pop-6\" class=\"vp-popup-close\">\r\n                            \u00d7\r\n                        <\/label>\r\n\r\n                        <div class=\"vp-popup-head\">\r\n\r\n                            <div class=\"vp-popup-icon vp-seo\">\r\n                                \u2197\r\n                            <\/div>\r\n\r\n                            <div>\r\n                                <small>PROJECT DETAILS<\/small>\r\n                                <h4>SEO & Content Website<\/h4>\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                        <div class=\"vp-popup-content\">\r\n\r\n                            <div>\r\n                                <b>How I Built It<\/b>\r\n                                <p>\r\n                                    Structured the website around\r\n                                    SEO-friendly content, blog pages,\r\n                                    internal linking and optimized\r\n                                    page structure.\r\n                                <\/p>\r\n                            <\/div>\r\n\r\n                            <div>\r\n                                <b>Technologies<\/b>\r\n                                <p>\r\n                                    WordPress, HTML5, CSS3,\r\n                                    MySQL, SEO\r\n                                <\/p>\r\n                            <\/div>\r\n\r\n                            <div>\r\n                                <b>Features<\/b>\r\n                                <p>\r\n                                    Blog structure, optimized headings,\r\n                                    internal linking, SEO-friendly\r\n                                    pages and performance improvements.\r\n                                <\/p>\r\n                            <\/div>\r\n\r\n                            <div class=\"vp-popup-two\">\r\n\r\n                                <div>\r\n                                    <b>Skills Used<\/b>\r\n                                    <p>\r\n                                        On-Page SEO, WordPress,\r\n                                        Content Structure,\r\n                                        Performance Optimization\r\n                                    <\/p>\r\n                                <\/div>\r\n\r\n                                <div>\r\n                                    <b>Development Time<\/b>\r\n                                    <p>Approx. 7\u201312 Days<\/p>\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/article>\r\n\r\n\r\n            <!-- =================================================\r\n                 PROJECT 07\r\n            ================================================== -->\r\n\r\n            <article class=\"vp-project-card\">\r\n\r\n                <div class=\"vp-project-top\">\r\n                    <span>07<\/span>\r\n                    <b>DATABASE<\/b>\r\n                <\/div>\r\n\r\n                <div class=\"vp-project-icon vp-db\">\r\n                    DB\r\n                <\/div>\r\n\r\n                <h3>Admin Management System<\/h3>\r\n\r\n                <p>\r\n                    Database-driven management system for records,\r\n                    users, forms and structured information.\r\n                <\/p>\r\n\r\n                <div class=\"vp-tags\">\r\n                    <span>PHP<\/span>\r\n                    <span>MySQL<\/span>\r\n                    <span>CRUD<\/span>\r\n                    <span>API<\/span>\r\n                <\/div>\r\n\r\n                <input type=\"checkbox\" id=\"vp-pop-7\" class=\"vp-popup-toggle\">\r\n\r\n                <label for=\"vp-pop-7\" class=\"vp-details-btn\">\r\n                    View Details <strong>\u2197<\/strong>\r\n                <\/label>\r\n\r\n\r\n                <div class=\"vp-popup\">\r\n\r\n                    <label for=\"vp-pop-7\" class=\"vp-popup-overlay\"><\/label>\r\n\r\n                    <div class=\"vp-popup-box\">\r\n\r\n                        <label for=\"vp-pop-7\" class=\"vp-popup-close\">\r\n                            \u00d7\r\n                        <\/label>\r\n\r\n                        <div class=\"vp-popup-head\">\r\n\r\n                            <div class=\"vp-popup-icon vp-db\">\r\n                                DB\r\n                            <\/div>\r\n\r\n                            <div>\r\n                                <small>PROJECT DETAILS<\/small>\r\n                                <h4>Admin Management System<\/h4>\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                        <div class=\"vp-popup-content\">\r\n\r\n                            <div>\r\n                                <b>How I Built It<\/b>\r\n                                <p>\r\n                                    Developed a structured admin\r\n                                    interface connected to database\r\n                                    records for organized information\r\n                                    management.\r\n                                <\/p>\r\n                            <\/div>\r\n\r\n                            <div>\r\n                                <b>Technologies<\/b>\r\n                                <p>\r\n                                    PHP, MySQL, JavaScript,\r\n                                    HTML5, CSS3, CRUD\r\n                                <\/p>\r\n                            <\/div>\r\n\r\n                            <div>\r\n                                <b>Features<\/b>\r\n                                <p>\r\n                                    Admin dashboard, record management,\r\n                                    create\/read\/update\/delete operations,\r\n                                    forms and structured data handling.\r\n                                <\/p>\r\n                            <\/div>\r\n\r\n                            <div class=\"vp-popup-two\">\r\n\r\n                                <div>\r\n                                    <b>Skills Used<\/b>\r\n                                    <p>\r\n                                        Backend Development,\r\n                                        PHP, MySQL, CRUD,\r\n                                        Database Management\r\n                                    <\/p>\r\n                                <\/div>\r\n\r\n                                <div>\r\n                                    <b>Development Time<\/b>\r\n                                    <p>Approx. 10\u201315 Days<\/p>\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/article>\r\n\r\n\r\n            <!-- =================================================\r\n                 PROJECT 08\r\n            ================================================== -->\r\n\r\n            <article class=\"vp-project-card\">\r\n\r\n                <div class=\"vp-project-top\">\r\n                    <span>08<\/span>\r\n                    <b>UI \/ UX<\/b>\r\n                <\/div>\r\n\r\n                <div class=\"vp-project-icon vp-ui\">\r\n                    \u2726\r\n                <\/div>\r\n\r\n                <h3>High-Converting Landing Page<\/h3>\r\n\r\n                <p>\r\n                    Modern landing page with strong visual hierarchy,\r\n                    CTA sections and SEO-friendly structure.\r\n                <\/p>\r\n\r\n                <div class=\"vp-tags\">\r\n                    <span>HTML<\/span>\r\n                    <span>CSS<\/span>\r\n                    <span>Bootstrap<\/span>\r\n                    <span>SEO<\/span>\r\n                <\/div>\r\n\r\n                <input type=\"checkbox\" id=\"vp-pop-8\" class=\"vp-popup-toggle\">\r\n\r\n                <label for=\"vp-pop-8\" class=\"vp-details-btn\">\r\n                    View Details <strong>\u2197<\/strong>\r\n                <\/label>\r\n\r\n\r\n                <div class=\"vp-popup\">\r\n\r\n                    <label for=\"vp-pop-8\" class=\"vp-popup-overlay\"><\/label>\r\n\r\n                    <div class=\"vp-popup-box\">\r\n\r\n                        <label for=\"vp-pop-8\" class=\"vp-popup-close\">\r\n                            \u00d7\r\n                        <\/label>\r\n\r\n                        <div class=\"vp-popup-head\">\r\n\r\n                            <div class=\"vp-popup-icon vp-ui\">\r\n                                \u2726\r\n                            <\/div>\r\n\r\n                            <div>\r\n                                <small>PROJECT DETAILS<\/small>\r\n                                <h4>High-Converting Landing Page<\/h4>\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                        <div class=\"vp-popup-content\">\r\n\r\n                            <div>\r\n                                <b>How I Built It<\/b>\r\n                                <p>\r\n                                    Created a clean landing page with\r\n                                    strong visual hierarchy, responsive\r\n                                    sections and clear call-to-action\r\n                                    areas.\r\n                                <\/p>\r\n                            <\/div>\r\n\r\n                            <div>\r\n                                <b>Technologies<\/b>\r\n                                <p>\r\n                                    HTML5, CSS3, Bootstrap,\r\n                                    JavaScript, SEO\r\n                                <\/p>\r\n                            <\/div>\r\n\r\n                            <div>\r\n                                <b>Features<\/b>\r\n                                <p>\r\n                                    Hero section, CTA buttons,\r\n                                    responsive layout, service sections,\r\n                                    mobile-first design and SEO markup.\r\n                                <\/p>\r\n                            <\/div>\r\n\r\n                            <div class=\"vp-popup-two\">\r\n\r\n                                <div>\r\n                                    <b>Skills Used<\/b>\r\n                                    <p>\r\n                                        UI\/UX, Frontend Development,\r\n                                        Responsive Design,\r\n                                        Bootstrap, SEO\r\n                                    <\/p>\r\n                                <\/div>\r\n\r\n                                <div>\r\n                                    <b>Development Time<\/b>\r\n                                    <p>Approx. 3\u20135 Days<\/p>\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/article>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- CTA -->\r\n        <div class=\"vp-project-cta\">\r\n\r\n            <div>\r\n                <small>HAVE A PROJECT IN MIND?<\/small>\r\n\r\n                <h3>\r\n                    Let's build something\r\n                    <span>awesome.<\/span>\r\n                <\/h3>\r\n            <\/div>\r\n\r\n            <a href=\"#contact\">\r\n                Let's Talk <b>\u2197<\/b>\r\n            <\/a>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   RESET\r\n========================================================= *\/\r\n\r\n#vp-projects,\r\n#vp-projects *,\r\n#vp-projects *::before,\r\n#vp-projects *::after {\r\n    box-sizing:border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MAIN\r\n========================================================= *\/\r\n\r\n#vp-projects {\r\n\r\n    width:100vw;\r\n    max-width:100vw;\r\n\r\n    margin-left:calc(50% - 50vw);\r\n\r\n    position:relative;\r\n\r\n    overflow:hidden;\r\n\r\n    background:#0B1120;\r\n\r\n    color:#fff;\r\n\r\n    font-family:inherit;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BACKGROUND\r\n========================================================= *\/\r\n\r\n.vp-project-bg {\r\n\r\n    position:absolute;\r\n    inset:0;\r\n\r\n    pointer-events:none;\r\n\r\n}\r\n\r\n.vp-grid-bg {\r\n\r\n    position:absolute;\r\n    inset:0;\r\n\r\n    opacity:.10;\r\n\r\n    background-image:\r\n        linear-gradient(\r\n            rgba(59,130,246,.25) 1px,\r\n            transparent 1px\r\n        ),\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(59,130,246,.25) 1px,\r\n            transparent 1px\r\n        );\r\n\r\n    background-size:65px 65px;\r\n\r\n}\r\n\r\n.vp-glow {\r\n\r\n    position:absolute;\r\n\r\n    width:350px;\r\n    height:350px;\r\n\r\n    border-radius:50%;\r\n\r\n    filter:blur(100px);\r\n\r\n    opacity:.10;\r\n\r\n}\r\n\r\n.vp-glow-1 {\r\n\r\n    background:#3B82F6;\r\n\r\n    left:-180px;\r\n    top:-130px;\r\n\r\n}\r\n\r\n.vp-glow-2 {\r\n\r\n    background:#8B5CF6;\r\n\r\n    right:-180px;\r\n    bottom:-130px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   WRAPPER\r\n========================================================= *\/\r\n\r\n.vp-project-wrap {\r\n\r\n    position:relative;\r\n\r\n    z-index:2;\r\n\r\n    width:100%;\r\n\r\n    max-width:1250px;\r\n\r\n    margin:auto;\r\n\r\n    padding:100px 22px 80px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================= *\/\r\n\r\n.vp-project-header {\r\n\r\n    max-width:750px;\r\n\r\n    margin:0 auto 45px;\r\n\r\n    text-align:center;\r\n\r\n}\r\n\r\n.vp-project-mini-title {\r\n\r\n    display:inline-flex;\r\n\r\n    align-items:center;\r\n\r\n    gap:10px;\r\n\r\n    color:#60A5FA;\r\n\r\n    font-size:11px;\r\n\r\n    font-weight:800;\r\n\r\n    letter-spacing:2.5px;\r\n\r\n    margin-bottom:15px;\r\n\r\n}\r\n\r\n.vp-project-mini-title i {\r\n\r\n    width:25px;\r\n    height:1px;\r\n\r\n    background:linear-gradient(\r\n        90deg,\r\n        #3B82F6,\r\n        #8B5CF6\r\n    );\r\n\r\n}\r\n\r\n.vp-project-header h2 {\r\n\r\n    margin:0;\r\n\r\n    color:#fff;\r\n\r\n    font-size:clamp(34px,5vw,56px);\r\n\r\n    line-height:1.1;\r\n\r\n    font-weight:800;\r\n\r\n    letter-spacing:-1.5px;\r\n\r\n}\r\n\r\n.vp-project-header h2 span {\r\n\r\n    background:linear-gradient(\r\n        90deg,\r\n        #3B82F6,\r\n        #8B5CF6\r\n    );\r\n\r\n    -webkit-background-clip:text;\r\n\r\n    background-clip:text;\r\n\r\n    color:transparent;\r\n\r\n}\r\n\r\n.vp-project-header p {\r\n\r\n    margin:17px auto 0;\r\n\r\n    max-width:650px;\r\n\r\n    color:#94A3B8;\r\n\r\n    font-size:15px;\r\n\r\n    line-height:1.7;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   GRID\r\n========================================================= *\/\r\n\r\n.vp-project-grid {\r\n\r\n    display:grid;\r\n\r\n    grid-template-columns:\r\n        repeat(2,minmax(0,1fr));\r\n\r\n    gap:20px;\r\n\r\n    align-items:stretch;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD\r\n========================================================= *\/\r\n\r\n.vp-project-card {\r\n\r\n    position:relative;\r\n\r\n    display:flex;\r\n\r\n    flex-direction:column;\r\n\r\n    min-width:0;\r\n\r\n    height:100%;\r\n\r\n    overflow:hidden;\r\n\r\n    padding:26px;\r\n\r\n    border-radius:20px;\r\n\r\n    border:1px solid\r\n        rgba(148,163,184,.13);\r\n\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            rgba(15,23,42,.97),\r\n            rgba(15,23,42,.75)\r\n        );\r\n\r\n    box-shadow:\r\n        0 15px 50px rgba(0,0,0,.18);\r\n\r\n    transition:\r\n        border-color .3s ease;\r\n\r\n}\r\n\r\n\r\n\/* Hover without transform.\r\n   This prevents fixed popup positioning\r\n   from becoming unstable. *\/\r\n\r\n.vp-project-card:hover {\r\n\r\n    border-color:\r\n        rgba(59,130,246,.38);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TOP\r\n========================================================= *\/\r\n\r\n.vp-project-top {\r\n\r\n    display:flex;\r\n\r\n    justify-content:space-between;\r\n\r\n    align-items:center;\r\n\r\n    flex-shrink:0;\r\n\r\n    margin-bottom:22px;\r\n\r\n}\r\n\r\n.vp-project-top span {\r\n\r\n    color:#64748B;\r\n\r\n    font-size:11px;\r\n\r\n    font-weight:800;\r\n\r\n    letter-spacing:2px;\r\n\r\n}\r\n\r\n.vp-project-top b {\r\n\r\n    padding:6px 9px;\r\n\r\n    border-radius:999px;\r\n\r\n    color:#60A5FA;\r\n\r\n    background:\r\n        rgba(59,130,246,.08);\r\n\r\n    border:1px solid\r\n        rgba(59,130,246,.14);\r\n\r\n    font-size:9px;\r\n\r\n    letter-spacing:1px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ICON\r\n========================================================= *\/\r\n\r\n.vp-project-icon {\r\n\r\n    width:58px;\r\n    height:58px;\r\n\r\n    display:flex;\r\n\r\n    align-items:center;\r\n    justify-content:center;\r\n\r\n    flex-shrink:0;\r\n\r\n    margin-bottom:19px;\r\n\r\n    border-radius:15px;\r\n\r\n    color:#60A5FA;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            rgba(59,130,246,.14),\r\n            rgba(139,92,246,.14)\r\n        );\r\n\r\n    border:1px solid\r\n        rgba(96,165,250,.15);\r\n\r\n    font-size:20px;\r\n\r\n    font-weight:900;\r\n\r\n}\r\n\r\n.vp-react {\r\n    font-size:29px;\r\n}\r\n\r\n.vp-php {\r\n    font-size:13px;\r\n}\r\n\r\n.vp-wp {\r\n    font-size:28px;\r\n}\r\n\r\n.vp-js,\r\n.vp-db {\r\n    font-size:13px;\r\n}\r\n\r\n.vp-seo,\r\n.vp-ui {\r\n    font-size:25px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTENT\r\n========================================================= *\/\r\n\r\n.vp-project-card h3 {\r\n\r\n    margin:0 0 10px;\r\n\r\n    color:#F8FAFC;\r\n\r\n    font-size:21px;\r\n\r\n    line-height:1.3;\r\n\r\n}\r\n\r\n.vp-project-card > p {\r\n\r\n    margin:0 0 19px;\r\n\r\n    color:#94A3B8;\r\n\r\n    font-size:13px;\r\n\r\n    line-height:1.7;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TAGS\r\n========================================================= *\/\r\n\r\n.vp-tags {\r\n\r\n    display:flex;\r\n\r\n    flex-wrap:wrap;\r\n\r\n    gap:6px;\r\n\r\n    margin-top:auto;\r\n\r\n    margin-bottom:20px;\r\n\r\n    padding-top:10px;\r\n\r\n}\r\n\r\n.vp-tags span {\r\n\r\n    padding:6px 8px;\r\n\r\n    border-radius:6px;\r\n\r\n    color:#CBD5E1;\r\n\r\n    background:#1E293B;\r\n\r\n    border:1px solid\r\n        rgba(148,163,184,.08);\r\n\r\n    font-size:9px;\r\n\r\n    font-weight:700;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DETAILS BUTTON\r\n========================================================= *\/\r\n\r\n.vp-details-btn {\r\n\r\n    display:flex;\r\n\r\n    align-items:center;\r\n\r\n    justify-content:center;\r\n\r\n    gap:8px;\r\n\r\n    width:100%;\r\n\r\n    min-height:42px;\r\n\r\n    flex-shrink:0;\r\n\r\n    padding:10px;\r\n\r\n    border-radius:9px;\r\n\r\n    border:1px solid\r\n        rgba(59,130,246,.25);\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            rgba(59,130,246,.12),\r\n            rgba(139,92,246,.10)\r\n        );\r\n\r\n    color:#fff;\r\n\r\n    font-size:11px;\r\n\r\n    font-weight:800;\r\n\r\n    cursor:pointer;\r\n\r\n    transition:\r\n        background .25s ease,\r\n        border-color .25s ease;\r\n\r\n}\r\n\r\n.vp-details-btn:hover {\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            #3B82F6,\r\n            #8B5CF6\r\n        );\r\n\r\n    border-color:transparent;\r\n\r\n}\r\n\r\n.vp-details-btn strong {\r\n\r\n    font-size:14px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HIDDEN CHECKBOX\r\n========================================================= *\/\r\n\r\n.vp-popup-toggle {\r\n\r\n    position:absolute;\r\n\r\n    width:1px;\r\n    height:1px;\r\n\r\n    opacity:0;\r\n\r\n    pointer-events:none;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   POPUP\r\n========================================================= *\/\r\n\r\n.vp-popup {\r\n\r\n    position:fixed;\r\n\r\n    top:0;\r\n    right:0;\r\n    bottom:0;\r\n    left:0;\r\n\r\n    width:100vw;\r\n    height:100vh;\r\n\r\n    z-index:999999;\r\n\r\n    display:flex;\r\n\r\n    align-items:center;\r\n    justify-content:center;\r\n\r\n    padding:20px;\r\n\r\n    opacity:0;\r\n\r\n    visibility:hidden;\r\n\r\n    pointer-events:none;\r\n\r\n    overflow:hidden;\r\n\r\n    transition:\r\n        opacity .25s ease,\r\n        visibility 0s linear .25s;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   OPEN\r\n========================================================= *\/\r\n\r\n.vp-popup-toggle:checked ~ .vp-popup {\r\n\r\n    opacity:1;\r\n\r\n    visibility:visible;\r\n\r\n    pointer-events:auto;\r\n\r\n    transition:\r\n        opacity .25s ease,\r\n        visibility 0s linear 0s;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   OVERLAY\r\n========================================================= *\/\r\n\r\n.vp-popup-overlay {\r\n\r\n    position:absolute;\r\n\r\n    top:0;\r\n    right:0;\r\n    bottom:0;\r\n    left:0;\r\n\r\n    background:\r\n        rgba(2,6,23,.78);\r\n\r\n    cursor:pointer;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   POPUP BOX\r\n========================================================= *\/\r\n\r\n.vp-popup-box {\r\n\r\n    position:relative;\r\n\r\n    z-index:2;\r\n\r\n    width:100%;\r\n\r\n    max-width:560px;\r\n\r\n    max-height:calc(100vh - 40px);\r\n\r\n    overflow-y:auto;\r\n\r\n    overflow-x:hidden;\r\n\r\n    padding:25px;\r\n\r\n    margin:0;\r\n\r\n    border-radius:18px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            145deg,\r\n            #111827,\r\n            #0B1120\r\n        );\r\n\r\n    border:1px solid\r\n        rgba(96,165,250,.25);\r\n\r\n    box-shadow:\r\n        0 30px 90px rgba(0,0,0,.65),\r\n        0 0 40px rgba(59,130,246,.08);\r\n\r\n    transform:\r\n        translate3d(0,14px,0)\r\n        scale(.97);\r\n\r\n    opacity:0;\r\n\r\n    transition:\r\n        transform .25s cubic-bezier(.2,.8,.2,1),\r\n        opacity .25s ease;\r\n\r\n    scrollbar-width:thin;\r\n\r\n}\r\n\r\n\r\n\/* Smooth opening *\/\r\n\r\n.vp-popup-toggle:checked\r\n~ .vp-popup\r\n.vp-popup-box {\r\n\r\n    transform:\r\n        translate3d(0,0,0)\r\n        scale(1);\r\n\r\n    opacity:1;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CLOSE\r\n========================================================= *\/\r\n\r\n.vp-popup-close {\r\n\r\n    position:absolute;\r\n\r\n    top:12px;\r\n    right:12px;\r\n\r\n    width:32px;\r\n    height:32px;\r\n\r\n    display:flex;\r\n\r\n    align-items:center;\r\n    justify-content:center;\r\n\r\n    border-radius:50%;\r\n\r\n    background:#172033;\r\n\r\n    border:1px solid\r\n        rgba(148,163,184,.15);\r\n\r\n    color:#CBD5E1;\r\n\r\n    font-size:22px;\r\n\r\n    line-height:1;\r\n\r\n    cursor:pointer;\r\n\r\n    transition:\r\n        color .2s ease,\r\n        background .2s ease,\r\n        transform .2s ease;\r\n\r\n}\r\n\r\n.vp-popup-close:hover {\r\n\r\n    color:#fff;\r\n\r\n    background:#3B82F6;\r\n\r\n    transform:rotate(90deg);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   POPUP HEADER\r\n========================================================= *\/\r\n\r\n.vp-popup-head {\r\n\r\n    display:flex;\r\n\r\n    align-items:center;\r\n\r\n    gap:13px;\r\n\r\n    padding-right:35px;\r\n\r\n    margin-bottom:20px;\r\n\r\n}\r\n\r\n.vp-popup-icon {\r\n\r\n    flex:0 0 auto;\r\n\r\n    width:48px;\r\n    height:48px;\r\n\r\n    display:flex;\r\n\r\n    align-items:center;\r\n    justify-content:center;\r\n\r\n    border-radius:12px;\r\n\r\n    color:#60A5FA;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            rgba(59,130,246,.15),\r\n            rgba(139,92,246,.14)\r\n        );\r\n\r\n    border:1px solid\r\n        rgba(96,165,250,.17);\r\n\r\n    font-weight:900;\r\n\r\n}\r\n\r\n.vp-popup-head small {\r\n\r\n    display:block;\r\n\r\n    margin-bottom:4px;\r\n\r\n    color:#60A5FA;\r\n\r\n    font-size:8px;\r\n\r\n    font-weight:800;\r\n\r\n    letter-spacing:1.8px;\r\n\r\n}\r\n\r\n.vp-popup-head h4 {\r\n\r\n    margin:0;\r\n\r\n    color:#F8FAFC;\r\n\r\n    font-size:20px;\r\n\r\n    line-height:1.25;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   POPUP CONTENT\r\n========================================================= *\/\r\n\r\n.vp-popup-content {\r\n\r\n    display:grid;\r\n\r\n    gap:13px;\r\n\r\n}\r\n\r\n.vp-popup-content > div {\r\n\r\n    padding:12px 13px;\r\n\r\n    border-radius:10px;\r\n\r\n    background:\r\n        rgba(15,23,42,.75);\r\n\r\n    border:1px solid\r\n        rgba(148,163,184,.08);\r\n\r\n}\r\n\r\n.vp-popup-content b {\r\n\r\n    display:block;\r\n\r\n    margin-bottom:5px;\r\n\r\n    color:#F8FAFC;\r\n\r\n    font-size:11px;\r\n\r\n    font-weight:800;\r\n\r\n}\r\n\r\n.vp-popup-content p {\r\n\r\n    margin:0;\r\n\r\n    color:#94A3B8;\r\n\r\n    font-size:11px;\r\n\r\n    line-height:1.65;\r\n\r\n}\r\n\r\n.vp-popup-two {\r\n\r\n    display:grid !important;\r\n\r\n    grid-template-columns:\r\n        1.5fr 1fr;\r\n\r\n    gap:10px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CTA\r\n========================================================= *\/\r\n\r\n.vp-project-cta {\r\n\r\n    display:flex;\r\n\r\n    align-items:center;\r\n\r\n    justify-content:space-between;\r\n\r\n    gap:20px;\r\n\r\n    margin-top:55px;\r\n\r\n    padding:25px;\r\n\r\n    border-radius:17px;\r\n\r\n    border:1px solid\r\n        rgba(96,165,250,.13);\r\n\r\n    background:\r\n        linear-gradient(\r\n            110deg,\r\n            rgba(59,130,246,.08),\r\n            rgba(139,92,246,.08)\r\n        );\r\n\r\n}\r\n\r\n.vp-project-cta small {\r\n\r\n    display:block;\r\n\r\n    color:#60A5FA;\r\n\r\n    font-size:9px;\r\n\r\n    font-weight:800;\r\n\r\n    letter-spacing:2px;\r\n\r\n    margin-bottom:6px;\r\n\r\n}\r\n\r\n.vp-project-cta h3 {\r\n\r\n    margin:0;\r\n\r\n    color:#fff;\r\n\r\n    font-size:22px;\r\n\r\n}\r\n\r\n.vp-project-cta h3 span {\r\n\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            #3B82F6,\r\n            #8B5CF6\r\n        );\r\n\r\n    -webkit-background-clip:text;\r\n\r\n    background-clip:text;\r\n\r\n    color:transparent;\r\n\r\n}\r\n\r\n.vp-project-cta a {\r\n\r\n    flex-shrink:0;\r\n\r\n    padding:12px 19px;\r\n\r\n    border-radius:9px;\r\n\r\n    color:#fff !important;\r\n\r\n    text-decoration:none !important;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            #3B82F6,\r\n            #8B5CF6\r\n        );\r\n\r\n    font-size:11px;\r\n\r\n    font-weight:800;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width:900px) {\r\n\r\n    .vp-project-wrap {\r\n\r\n        padding:\r\n            80px 20px 65px;\r\n\r\n    }\r\n\r\n    .vp-project-grid {\r\n\r\n        gap:16px;\r\n\r\n    }\r\n\r\n    .vp-project-card {\r\n\r\n        padding:21px;\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       TABLET POPUP FIX\r\n    ===================================================== *\/\r\n\r\n    .vp-popup {\r\n\r\n        position:fixed;\r\n\r\n        top:0;\r\n        right:0;\r\n        bottom:0;\r\n        left:0;\r\n\r\n        width:100%;\r\n\r\n        height:100vh;\r\n        height:100dvh;\r\n\r\n        min-height:0;\r\n\r\n        padding:\r\n            16px\r\n            max(16px, env(safe-area-inset-right))\r\n            16px\r\n            max(16px, env(safe-area-inset-left));\r\n\r\n        align-items:center;\r\n\r\n        justify-content:center;\r\n\r\n        overflow:hidden;\r\n\r\n    }\r\n\r\n    .vp-popup-box {\r\n\r\n        width:100%;\r\n\r\n        max-width:560px;\r\n\r\n        height:auto;\r\n\r\n        max-height:\r\n            calc(100vh - 32px);\r\n\r\n        max-height:\r\n            calc(100dvh - 32px);\r\n\r\n        min-height:0;\r\n\r\n        flex:0 1 auto;\r\n\r\n        overflow-y:auto;\r\n\r\n        overflow-x:hidden;\r\n\r\n        -webkit-overflow-scrolling:touch;\r\n\r\n        overscroll-behavior:contain;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width:650px) {\r\n\r\n    .vp-project-wrap {\r\n\r\n        padding:\r\n            65px 14px 50px;\r\n\r\n    }\r\n\r\n    .vp-project-header {\r\n\r\n        margin-bottom:30px;\r\n\r\n    }\r\n\r\n    .vp-project-header h2 {\r\n\r\n        font-size:34px;\r\n\r\n    }\r\n\r\n    .vp-project-header p {\r\n\r\n        font-size:13px;\r\n\r\n    }\r\n\r\n    .vp-project-grid {\r\n\r\n        grid-template-columns:1fr;\r\n\r\n        gap:14px;\r\n\r\n    }\r\n\r\n    .vp-project-card {\r\n\r\n        min-height:0;\r\n\r\n        padding:20px;\r\n\r\n        border-radius:17px;\r\n\r\n    }\r\n\r\n    .vp-project-card h3 {\r\n\r\n        font-size:20px;\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       MOBILE POPUP FIX\r\n    ===================================================== *\/\r\n\r\n    .vp-popup {\r\n\r\n        position:fixed;\r\n\r\n        top:0;\r\n        right:0;\r\n        bottom:0;\r\n        left:0;\r\n\r\n        width:100%;\r\n\r\n        height:100vh;\r\n        height:100dvh;\r\n\r\n        min-height:0;\r\n\r\n        display:flex;\r\n\r\n        align-items:center;\r\n\r\n        justify-content:center;\r\n\r\n        padding:\r\n            10px\r\n            max(10px, env(safe-area-inset-right))\r\n            10px\r\n            max(10px, env(safe-area-inset-left));\r\n\r\n        overflow:hidden;\r\n\r\n    }\r\n\r\n    .vp-popup-box {\r\n\r\n        width:100%;\r\n\r\n        max-width:560px;\r\n\r\n        height:auto;\r\n\r\n        max-height:\r\n            calc(100vh - 20px);\r\n\r\n        max-height:\r\n            calc(100dvh - 20px);\r\n\r\n        min-height:0;\r\n\r\n        flex:0 1 auto;\r\n\r\n        padding:21px 16px 16px;\r\n\r\n        border-radius:16px;\r\n\r\n        overflow-y:auto;\r\n\r\n        overflow-x:hidden;\r\n\r\n        -webkit-overflow-scrolling:touch;\r\n\r\n        overscroll-behavior:contain;\r\n\r\n        scrollbar-width:thin;\r\n\r\n    }\r\n\r\n    .vp-popup-head {\r\n\r\n        padding-right:34px;\r\n\r\n        margin-bottom:16px;\r\n\r\n    }\r\n\r\n    .vp-popup-head h4 {\r\n\r\n        font-size:18px;\r\n\r\n    }\r\n\r\n    .vp-popup-content {\r\n\r\n        gap:9px;\r\n\r\n    }\r\n\r\n    .vp-popup-content > div {\r\n\r\n        padding:11px;\r\n\r\n    }\r\n\r\n    .vp-popup-two {\r\n\r\n        grid-template-columns:1fr !important;\r\n\r\n    }\r\n\r\n\r\n    \/* CTA *\/\r\n\r\n    .vp-project-cta {\r\n\r\n        flex-direction:column;\r\n\r\n        text-align:center;\r\n\r\n        margin-top:35px;\r\n\r\n    }\r\n\r\n    .vp-project-cta a {\r\n\r\n        width:100%;\r\n\r\n        text-align:center;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SMALL MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width:380px) {\r\n\r\n    .vp-project-wrap {\r\n\r\n        padding-left:11px;\r\n        padding-right:11px;\r\n\r\n    }\r\n\r\n    .vp-project-header h2 {\r\n\r\n        font-size:30px;\r\n\r\n    }\r\n\r\n    .vp-project-card {\r\n\r\n        padding:17px;\r\n\r\n    }\r\n\r\n    .vp-popup {\r\n\r\n        padding:\r\n            8px\r\n            max(8px, env(safe-area-inset-right))\r\n            8px\r\n            max(8px, env(safe-area-inset-left));\r\n\r\n    }\r\n\r\n    .vp-popup-box {\r\n\r\n        width:100%;\r\n\r\n        max-height:\r\n            calc(100vh - 16px);\r\n\r\n        max-height:\r\n            calc(100dvh - 16px);\r\n\r\n        padding:20px 14px 14px;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   EXTRA SMALL HEIGHT DEVICES\r\n   Keeps popup completely inside viewport\r\n========================================================= *\/\r\n\r\n@media (max-width:650px) and (max-height:600px) {\r\n\r\n    .vp-popup {\r\n\r\n        align-items:center;\r\n\r\n        padding:\r\n            6px\r\n            max(6px, env(safe-area-inset-right))\r\n            6px\r\n            max(6px, env(safe-area-inset-left));\r\n\r\n    }\r\n\r\n    .vp-popup-box {\r\n\r\n        max-height:\r\n            calc(100vh - 12px);\r\n\r\n        max-height:\r\n            calc(100dvh - 12px);\r\n\r\n        padding:17px 13px 13px;\r\n\r\n    }\r\n\r\n    .vp-popup-head {\r\n\r\n        margin-bottom:11px;\r\n\r\n    }\r\n\r\n    .vp-popup-content {\r\n\r\n        gap:7px;\r\n\r\n    }\r\n\r\n    .vp-popup-content > div {\r\n\r\n        padding:9px 10px;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion:reduce) {\r\n\r\n    #vp-projects *,\r\n    #vp-projects *::before,\r\n    #vp-projects *::after {\r\n\r\n        transition:none !important;\r\n\r\n        animation:none !important;\r\n\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-afc4212 e-con e-atomic-element e-flexbox-base e-default-div e-0f8f8d0 \" data-id=\"afc4212\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"afc4212\">\n    \t\t<div class=\"elementor-element elementor-element-db0dd84 elementor-widget elementor-widget-html\" data-id=\"db0dd84\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n     VISHAL PORTFOLIO - CONTACT SECTION\r\n     Elementor HTML Widget Ready\r\n     \r\n     EMAIL:\r\n     FormSubmit -> vpvishal8934@gmail.com\r\n\r\n     WHATSAPP:\r\n     +91 89340 94921\r\n\r\n     Colors:\r\n     #0B1120 + #3B82F6 + #8B5CF6\r\n\r\n     Fully Responsive\r\n     Fast Loading\r\n     \r\n     USER AUTO-REPLY:\r\n     FormSubmit -> User's Email\r\n========================================================= -->\r\n\r\n<section id=\"contact\" class=\"vp-contact\">\r\n\r\n    <!-- BACKGROUND ANIMATION -->\r\n    <div class=\"vp-contact-bg\" aria-hidden=\"true\">\r\n        <span class=\"vp-orb vp-orb-1\"><\/span>\r\n        <span class=\"vp-orb vp-orb-2\"><\/span>\r\n        <span class=\"vp-grid\"><\/span>\r\n        <span class=\"vp-dot vp-dot-1\"><\/span>\r\n        <span class=\"vp-dot vp-dot-2\"><\/span>\r\n        <span class=\"vp-dot vp-dot-3\"><\/span>\r\n        <span class=\"vp-dot vp-dot-4\"><\/span>\r\n    <\/div>\r\n\r\n\r\n    <div class=\"vp-contact-container\">\r\n\r\n        <!-- SECTION HEADER -->\r\n        <div class=\"vp-contact-header\">\r\n\r\n            <span class=\"vp-contact-badge\">\r\n                <span class=\"vp-live-dot\"><\/span>\r\n                AVAILABLE FOR PROJECTS\r\n            <\/span>\r\n\r\n            <h2>\r\n                Let's Build Something\r\n                <span>Great Together.<\/span>\r\n            <\/h2>\r\n\r\n            <p>\r\n                Have a project, website idea or business requirement?\r\n                Let's discuss how I can help you create a modern,\r\n                responsive and high-performing digital experience.\r\n            <\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- MAIN CONTACT AREA -->\r\n        <div class=\"vp-contact-grid\">\r\n\r\n\r\n            <!-- =========================================\r\n                 LEFT SIDE\r\n            ========================================== -->\r\n\r\n            <div class=\"vp-contact-left\">\r\n\r\n                <div class=\"vp-contact-card\">\r\n\r\n                    <div class=\"vp-card-top\">\r\n\r\n                        <span class=\"vp-card-icon\">\u2726<\/span>\r\n\r\n                        <div>\r\n                            <span class=\"vp-mini-label\">CONTACT<\/span>\r\n                            <h3>Get In Touch<\/h3>\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <!-- EMAIL -->\r\n                    <a href=\"mailto:vpvishal8934@gmail.com\"\r\n                       class=\"vp-contact-item\">\r\n\r\n                        <span class=\"vp-item-icon\">\u2709<\/span>\r\n\r\n                        <span class=\"vp-item-content\">\r\n                            <small>Email<\/small>\r\n                            <strong>vpvishal8934@gmail.com<\/strong>\r\n                        <\/span>\r\n\r\n                        <span class=\"vp-arrow\">\u2197<\/span>\r\n\r\n                    <\/a>\r\n\r\n\r\n                    <!-- PHONE -->\r\n                    <a href=\"tel:+918934094921\"\r\n                       class=\"vp-contact-item\">\r\n\r\n                        <span class=\"vp-item-icon\">\u260e<\/span>\r\n\r\n                        <span class=\"vp-item-content\">\r\n                            <small>Phone<\/small>\r\n                            <strong>+91 89340 94921<\/strong>\r\n                        <\/span>\r\n\r\n                        <span class=\"vp-arrow\">\u2197<\/span>\r\n\r\n                    <\/a>\r\n\r\n\r\n                    <!-- WHATSAPP -->\r\n                    <a\r\n                        href=\"https:\/\/wa.me\/918934094921?text=Hello%20Vishal%2C%20I%20want%20to%20connect%20with%20you%20regarding%20a%20website%20%2F%20project.%20Please%20let%20me%20know%20how%20we%20can%20discuss%20it.\"\r\n                        target=\"_blank\"\r\n                        rel=\"noopener noreferrer\"\r\n                        class=\"vp-contact-item vp-whatsapp-item\"\r\n                        aria-label=\"Chat with Vishal on WhatsApp\"\r\n                    >\r\n\r\n                        <span class=\"vp-item-icon vp-whatsapp-icon\">\r\n\r\n                            <svg\r\n                                viewBox=\"0 0 24 24\"\r\n                                width=\"20\"\r\n                                height=\"20\"\r\n                                aria-hidden=\"true\"\r\n                            >\r\n\r\n                                <path\r\n                                    fill=\"currentColor\"\r\n                                    d=\"M20.52 3.48A11.82 11.82 0 0 0 12.06 0C5.52 0 .2 5.31.2 11.85c0 2.09.55 4.13 1.59 5.93L.1 24l6.37-1.67a11.84 11.84 0 0 0 5.59 1.42h.01c6.54 0 11.85-5.32 11.85-11.86 0-3.17-1.24-6.14-3.4-8.41ZM12.07 21.8h-.01a9.86 9.86 0 0 1-5.03-1.38l-.36-.21-3.78.99 1.01-3.68-.23-.38a9.82 9.82 0 0 1-1.51-5.28c0-5.44 4.43-9.87 9.88-9.87 2.64 0 5.12 1.03 6.99 2.9a9.82 9.82 0 0 1 2.89 7c0 5.44-4.43 9.87-9.85 9.87Zm5.42-7.4c-.3-.15-1.77-.87-2.04-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.27-.47-2.42-1.5-.9-.8-1.51-1.79-1.69-2.09-.17-.3-.02-.46.13-.61.14-.14.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.61-.92-2.2-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.49s1.07 2.89 1.22 3.09c.15.2 2.1 3.2 5.09 4.49.71.31 1.26.49 1.69.63.71.23 1.36.2 1.87.12.57-.08 1.77-.72 2.02-1.42.25-.7.25-1.3.17-1.42-.07-.12-.27-.2-.57-.35Z\"\r\n                                \/>\r\n\r\n                            <\/svg>\r\n\r\n                        <\/span>\r\n\r\n                        <span class=\"vp-item-content\">\r\n                            <small>WhatsApp<\/small>\r\n                            <strong>Chat on WhatsApp<\/strong>\r\n                        <\/span>\r\n\r\n                        <span class=\"vp-arrow\">\u2197<\/span>\r\n\r\n                    <\/a>\r\n\r\n\r\n                    <!-- LOCATION -->\r\n                    <div class=\"vp-contact-item\">\r\n\r\n                        <span class=\"vp-item-icon\">\u2316<\/span>\r\n\r\n                        <span class=\"vp-item-content\">\r\n                            <small>Location<\/small>\r\n                            <strong>India<\/strong>\r\n                        <\/span>\r\n\r\n                        <span class=\"vp-arrow\">\u2022<\/span>\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <!-- AVAILABILITY -->\r\n                    <div class=\"vp-availability\">\r\n\r\n                        <span class=\"vp-status-icon\">\r\n                            <span><\/span>\r\n                        <\/span>\r\n\r\n                        <div>\r\n\r\n                            <strong>\r\n                                Available for Freelance\r\n                            <\/strong>\r\n\r\n                            <small>\r\n                                Website Development \u00b7 WordPress \u00b7 SEO\r\n                            <\/small>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <!-- TECH STACK -->\r\n                <div class=\"vp-stack-card\">\r\n\r\n                    <div class=\"vp-stack-heading\">\r\n\r\n                        <span>&lt;\/&gt;<\/span>\r\n\r\n                        <div>\r\n\r\n                            <small>TECH STACK<\/small>\r\n\r\n                            <strong>\r\n                                What I Work With\r\n                            <\/strong>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <div class=\"vp-tech-list\">\r\n\r\n                        <span>HTML5<\/span>\r\n                        <span>CSS3<\/span>\r\n                        <span>JavaScript<\/span>\r\n                        <span>React.js<\/span>\r\n                        <span>Bootstrap<\/span>\r\n                        <span>PHP<\/span>\r\n                        <span>MySQL<\/span>\r\n                        <span>WordPress<\/span>\r\n                        <span>REST API<\/span>\r\n                        <span>Git<\/span>\r\n                        <span>GitHub<\/span>\r\n                        <span>SEO<\/span>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- =========================================\r\n                 RIGHT SIDE - CONTACT FORM\r\n            ========================================== -->\r\n\r\n            <div class=\"vp-form-wrapper\">\r\n\r\n\r\n                <!-- CODE STYLE HEADER -->\r\n                <div class=\"vp-form-codebar\">\r\n\r\n                    <div class=\"vp-window-dots\">\r\n                        <i><\/i>\r\n                        <i><\/i>\r\n                        <i><\/i>\r\n                    <\/div>\r\n\r\n                    <span>contact-form.html<\/span>\r\n\r\n                    <b>&lt;\/&gt;<\/b>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"vp-form-inner\">\r\n\r\n\r\n                    <div class=\"vp-form-intro\">\r\n\r\n                        <span>01<\/span>\r\n\r\n                        <div>\r\n\r\n                            <small>\r\n                                START A PROJECT\r\n                            <\/small>\r\n\r\n                            <h3>\r\n                                Tell Me About Your Idea\r\n                            <\/h3>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n\r\n                    <!-- =====================================\r\n                         FORM\r\n                         \r\n                         ADMIN EMAIL:\r\n                         vpvishal8934@gmail.com\r\n\r\n                         USER AUTO-REPLY:\r\n                         Goes to the email entered by user\r\n                    ====================================== -->\r\n\r\n                    <form\r\n                        action=\"https:\/\/formsubmit.co\/vpvishal8934@gmail.com\"\r\n                        method=\"POST\"\r\n                    >\r\n\r\n                        <!-- FORM SETTINGS -->\r\n\r\n                        <input\r\n                            type=\"hidden\"\r\n                            name=\"_subject\"\r\n                            value=\"New Portfolio Contact Form Submission\"\r\n                        >\r\n\r\n                        <input\r\n                            type=\"hidden\"\r\n                            name=\"_template\"\r\n                            value=\"table\"\r\n                        >\r\n\r\n                        <!-- FIXED:\r\n                             CAPTCHA MUST BE ENABLED\r\n                             FOR FORMSubmit AUTO-RESPONSE\r\n                        -->\r\n                        <input\r\n                            type=\"hidden\"\r\n                            name=\"_captcha\"\r\n                            value=\"true\"\r\n                        >\r\n\r\n                        <input\r\n                            type=\"hidden\"\r\n                            name=\"_next\"\r\n                            value=\"https:\/\/vishal.yenexa.com\/index.php\/thank-you\/\"\r\n                        >\r\n\r\n                        <!-- USER THANK YOU AUTO-REPLY -->\r\n\r\n                        <input\r\n                            type=\"hidden\"\r\n                            name=\"_autoresponse\"\r\n                            value=\"Thank you for contacting Vishal. Your form has been submitted successfully. I have received your message and will get back to you soon.\"\r\n                        >\r\n\r\n\r\n                        <!-- NAME -->\r\n\r\n                        <div class=\"vp-form-row\">\r\n\r\n                            <div class=\"vp-input-group\">\r\n\r\n                                <label for=\"vp-name\">\r\n                                    Your Name\r\n                                <\/label>\r\n\r\n                                <div class=\"vp-input-box\">\r\n\r\n                                    <span>\ud83d\udc64<\/span>\r\n\r\n                                    <input\r\n                                        id=\"vp-name\"\r\n                                        type=\"text\"\r\n                                        name=\"name\"\r\n                                        placeholder=\"Enter your name\"\r\n                                        autocomplete=\"name\"\r\n                                        required\r\n                                    >\r\n\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n\r\n                            <!-- EMAIL -->\r\n\r\n                            <div class=\"vp-input-group\">\r\n\r\n                                <label for=\"vp-email\">\r\n                                    Email Address\r\n                                <\/label>\r\n\r\n                                <div class=\"vp-input-box\">\r\n\r\n                                    <span>\u2709<\/span>\r\n\r\n                                    <input\r\n                                        id=\"vp-email\"\r\n                                        type=\"email\"\r\n                                        name=\"email\"\r\n                                        placeholder=\"you@example.com\"\r\n                                        autocomplete=\"email\"\r\n                                        required\r\n                                    >\r\n\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n\r\n                        <!-- SUBJECT -->\r\n\r\n                        <div class=\"vp-input-group\">\r\n\r\n                            <label for=\"vp-subject\">\r\n                                Project \/ Subject\r\n                            <\/label>\r\n\r\n                            <div class=\"vp-input-box\">\r\n\r\n                                <span>\u2301<\/span>\r\n\r\n                                <input\r\n                                    id=\"vp-subject\"\r\n                                    type=\"text\"\r\n                                    name=\"subject\"\r\n                                    placeholder=\"What would you like to build?\"\r\n                                >\r\n\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n\r\n                        <!-- MESSAGE -->\r\n\r\n                        <div class=\"vp-input-group\">\r\n\r\n                            <label for=\"vp-message\">\r\n                                Message\r\n                            <\/label>\r\n\r\n                            <div class=\"vp-input-box vp-textarea-box\">\r\n\r\n                                <span>\u270e<\/span>\r\n\r\n                                <textarea\r\n                                    id=\"vp-message\"\r\n                                    name=\"message\"\r\n                                    rows=\"5\"\r\n                                    placeholder=\"Tell me a little about your project...\"\r\n                                    required\r\n                                ><\/textarea>\r\n\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n\r\n                        <!-- =================================\r\n                             BUTTON AREA\r\n                        ================================== -->\r\n\r\n                        <div class=\"vp-action-area\">\r\n\r\n\r\n                            <!-- SEND EMAIL -->\r\n\r\n                            <button\r\n                                type=\"submit\"\r\n                                class=\"vp-submit-btn\"\r\n                            >\r\n\r\n                                <span>\r\n                                    Send Message\r\n                                <\/span>\r\n\r\n                                <span class=\"vp-submit-arrow\">\r\n                                    \u2192\r\n                                <\/span>\r\n\r\n                                <span class=\"vp-btn-glow\"><\/span>\r\n\r\n                            <\/button>\r\n\r\n\r\n                            <!-- WHATSAPP BUTTON -->\r\n\r\n                            <a\r\n                                href=\"https:\/\/wa.me\/918934094921?text=Hello%20Vishal%2C%20I%20want%20to%20connect%20with%20you%20regarding%20a%20website%20%2F%20project.%20I%20would%20like%20to%20discuss%20my%20requirements%20with%20you.\"\r\n                                target=\"_blank\"\r\n                                rel=\"noopener noreferrer\"\r\n                                class=\"vp-whatsapp-btn\"\r\n                            >\r\n\r\n                                <span class=\"vp-whatsapp-btn-icon\">\r\n\r\n                                    <svg\r\n                                        viewBox=\"0 0 24 24\"\r\n                                        width=\"19\"\r\n                                        height=\"19\"\r\n                                        aria-hidden=\"true\"\r\n                                    >\r\n\r\n                                        <path\r\n                                            fill=\"currentColor\"\r\n                                            d=\"M20.52 3.48A11.82 11.82 0 0 0 12.06 0C5.52 0 .2 5.31.2 11.85c0 2.09.55 4.13 1.59 5.93L.1 24l6.37-1.67a11.84 11.84 0 0 0 5.59 1.42h.01c6.54 0 11.85-5.32 11.85-11.86 0-3.17-1.24-6.14-3.4-8.41ZM12.07 21.8h-.01a9.86 9.86 0 0 1-5.03-1.38l-.36-.21-3.78.99 1.01-3.68-.23-.38a9.82 9.82 0 0 1-1.51-5.28c0-5.44 4.43-9.87 9.88-9.87 2.64 0 5.12 1.03 6.99 2.9a9.82 9.82 0 0 1 2.89 7c0 5.44-4.43 9.87-9.85 9.87Zm5.42-7.4c-.3-.15-1.77-.87-2.04-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.27-.47-2.42-1.5-.9-.8-1.51-1.79-1.69-2.09-.17-.3-.02-.46.13-.61.14-.14.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.61-.92-2.2-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.49s1.07 2.89 1.22 3.09c.15.2 2.1 3.2 5.09 4.49.71.31 1.26.49 1.69.63.71.23 1.36.2 1.87.12.57-.08 1.77-.72 2.02-1.42.25-.7.25-1.3.17-1.42-.07-.12-.27-.2-.57-.35Z\"\r\n                                        \/>\r\n\r\n                                    <\/svg>\r\n\r\n                                <\/span>\r\n\r\n                                <span>\r\n                                    Chat on WhatsApp\r\n                                <\/span>\r\n\r\n                                <span class=\"vp-wa-arrow\">\r\n                                    \u2197\r\n                                <\/span>\r\n\r\n                            <\/a>\r\n\r\n                        <\/div>\r\n\r\n\r\n                    <\/form>\r\n\r\n\r\n                    <div class=\"vp-form-footer\">\r\n\r\n                        <span>\r\n                            <b>\u25cf<\/b>\r\n                            Usually replies within 24 hours\r\n                        <\/span>\r\n\r\n                        <span>\r\n                            Secure &amp; Professional\r\n                        <\/span>\r\n\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- BOTTOM DEVELOPER STRIP -->\r\n\r\n        <div class=\"vp-developer-strip\">\r\n\r\n            <div class=\"vp-dev-code\">\r\n\r\n                <span class=\"vp-code-blue\">\r\n                    &lt;developer\r\n                <\/span>\r\n\r\n                <span class=\"vp-code-purple\">\r\n                    name\r\n                <\/span>\r\n\r\n                <span class=\"vp-code-white\">\r\n                    =\r\n                <\/span>\r\n\r\n                <span class=\"vp-code-green\">\r\n                    \"Vishal\"\r\n                <\/span>\r\n\r\n                <span class=\"vp-code-blue\">\r\n                    \/&gt;\r\n                <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"vp-dev-skills\">\r\n\r\n                <span>Frontend<\/span>\r\n                <span>Backend<\/span>\r\n                <span>Database<\/span>\r\n                <span>WordPress<\/span>\r\n                <span>SEO<\/span>\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   ROOT\r\n========================================================= *\/\r\n\r\n#contact.vp-contact {\r\n\r\n    --vp-dark: #0B1120;\r\n    --vp-blue: #3B82F6;\r\n    --vp-purple: #8B5CF6;\r\n\r\n    --vp-white: #F8FAFC;\r\n    --vp-text: #CBD5E1;\r\n    --vp-muted: #94A3B8;\r\n\r\n    --vp-border: rgba(148,163,184,.14);\r\n\r\n    position: relative;\r\n\r\n    width: 100%;\r\n    min-height: 100vh;\r\n\r\n    overflow: hidden;\r\n\r\n    background:\r\n\r\n        radial-gradient(\r\n            circle at 10% 20%,\r\n            rgba(59,130,246,.12),\r\n            transparent 32%\r\n        ),\r\n\r\n        radial-gradient(\r\n            circle at 90% 80%,\r\n            rgba(139,92,246,.13),\r\n            transparent 32%\r\n        ),\r\n\r\n        var(--vp-dark);\r\n\r\n    color: var(--vp-white);\r\n\r\n    font-family:\r\n        Arial,\r\n        Helvetica,\r\n        sans-serif;\r\n\r\n    box-sizing: border-box;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RESET\r\n========================================================= *\/\r\n\r\n#contact.vp-contact *,\r\n#contact.vp-contact *::before,\r\n#contact.vp-contact *::after {\r\n\r\n    box-sizing: border-box;\r\n\r\n}\r\n\r\n\r\n#contact.vp-contact a {\r\n\r\n    text-decoration: none;\r\n\r\n    color: inherit;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BACKGROUND\r\n========================================================= *\/\r\n\r\n.vp-contact-bg {\r\n\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    pointer-events: none;\r\n\r\n    overflow: hidden;\r\n\r\n}\r\n\r\n\r\n.vp-orb {\r\n\r\n    position: absolute;\r\n\r\n    width: 420px;\r\n    height: 420px;\r\n\r\n    border-radius: 50%;\r\n\r\n    filter: blur(80px);\r\n\r\n    opacity: .18;\r\n\r\n    animation:\r\n        vpOrbMove 12s ease-in-out infinite alternate;\r\n\r\n}\r\n\r\n\r\n.vp-orb-1 {\r\n\r\n    top: -180px;\r\n    left: -140px;\r\n\r\n    background: var(--vp-blue);\r\n\r\n}\r\n\r\n\r\n.vp-orb-2 {\r\n\r\n    right: -180px;\r\n    bottom: -200px;\r\n\r\n    background: var(--vp-purple);\r\n\r\n    animation-delay: -5s;\r\n\r\n}\r\n\r\n\r\n.vp-grid {\r\n\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    opacity: .045;\r\n\r\n    background-image:\r\n\r\n        linear-gradient(\r\n            rgba(255,255,255,.5) 1px,\r\n            transparent 1px\r\n        ),\r\n\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(255,255,255,.5) 1px,\r\n            transparent 1px\r\n        );\r\n\r\n    background-size: 50px 50px;\r\n\r\n    mask-image:\r\n        linear-gradient(\r\n            to bottom,\r\n            transparent,\r\n            black 25%,\r\n            black 75%,\r\n            transparent\r\n        );\r\n\r\n}\r\n\r\n\r\n.vp-dot {\r\n\r\n    position: absolute;\r\n\r\n    width: 4px;\r\n    height: 4px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: var(--vp-blue);\r\n\r\n    box-shadow:\r\n        0 0 15px var(--vp-blue);\r\n\r\n    animation:\r\n        vpFloat 7s ease-in-out infinite;\r\n\r\n}\r\n\r\n\r\n.vp-dot-1 {\r\n\r\n    top: 22%;\r\n    left: 8%;\r\n\r\n}\r\n\r\n\r\n.vp-dot-2 {\r\n\r\n    top: 15%;\r\n    right: 12%;\r\n\r\n    background: var(--vp-purple);\r\n\r\n    box-shadow:\r\n        0 0 15px var(--vp-purple);\r\n\r\n    animation-delay: -2s;\r\n\r\n}\r\n\r\n\r\n.vp-dot-3 {\r\n\r\n    bottom: 20%;\r\n    left: 16%;\r\n\r\n    animation-delay: -4s;\r\n\r\n}\r\n\r\n\r\n.vp-dot-4 {\r\n\r\n    bottom: 14%;\r\n    right: 8%;\r\n\r\n    background: var(--vp-purple);\r\n\r\n    box-shadow:\r\n        0 0 15px var(--vp-purple);\r\n\r\n    animation-delay: -1s;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTAINER\r\n========================================================= *\/\r\n\r\n.vp-contact-container {\r\n\r\n    position: relative;\r\n\r\n    z-index: 2;\r\n\r\n    width: min(1200px, 92%);\r\n\r\n    margin: 0 auto;\r\n\r\n    padding: 100px 0 45px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================= *\/\r\n\r\n.vp-contact-header {\r\n\r\n    max-width: 800px;\r\n\r\n    margin:\r\n        0 auto 60px;\r\n\r\n    text-align: center;\r\n\r\n}\r\n\r\n\r\n.vp-contact-badge {\r\n\r\n    display: inline-flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 9px;\r\n\r\n    padding: 8px 15px;\r\n\r\n    border:\r\n        1px solid rgba(59,130,246,.25);\r\n\r\n    border-radius: 50px;\r\n\r\n    background:\r\n        rgba(59,130,246,.07);\r\n\r\n    color: #93C5FD;\r\n\r\n    font-size: 11px;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 1.5px;\r\n\r\n}\r\n\r\n\r\n.vp-live-dot {\r\n\r\n    width: 7px;\r\n    height: 7px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: #22C55E;\r\n\r\n    box-shadow:\r\n        0 0 10px #22C55E;\r\n\r\n    animation:\r\n        vpPulse 1.7s infinite;\r\n\r\n}\r\n\r\n\r\n.vp-contact-header h2 {\r\n\r\n    margin:\r\n        22px 0 16px;\r\n\r\n    font-size:\r\n        clamp(36px, 5vw, 64px);\r\n\r\n    line-height: 1.08;\r\n\r\n    letter-spacing: -2px;\r\n\r\n    font-weight: 800;\r\n    color: white;\r\n\r\n}\r\n\r\n\r\n.vp-contact-header h2 span {\r\n\r\n    display: block;\r\n\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            var(--vp-blue),\r\n            var(--vp-purple)\r\n        );\r\n\r\n    -webkit-background-clip: text;\r\n\r\n    background-clip: text;\r\n\r\n    color: transparent;\r\n\r\n}\r\n\r\n\r\n.vp-contact-header p {\r\n\r\n    max-width: 680px;\r\n\r\n    margin: auto;\r\n\r\n    color: var(--vp-muted);\r\n\r\n    font-size: 15px;\r\n\r\n    line-height: 1.8;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MAIN GRID\r\n========================================================= *\/\r\n\r\n.vp-contact-grid {\r\n\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n        .82fr 1.18fr;\r\n\r\n    gap: 28px;\r\n\r\n    align-items: stretch;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LEFT\r\n========================================================= *\/\r\n\r\n.vp-contact-left {\r\n\r\n    display: flex;\r\n\r\n    flex-direction: column;\r\n\r\n    gap: 20px;\r\n\r\n}\r\n\r\n\r\n.vp-contact-card,\r\n.vp-stack-card,\r\n.vp-form-wrapper {\r\n\r\n    border:\r\n        1px solid var(--vp-border);\r\n\r\n    background:\r\n        rgba(15,23,42,.72);\r\n\r\n    box-shadow:\r\n\r\n        0 25px 70px rgba(0,0,0,.28),\r\n\r\n        inset\r\n        0 1px 0\r\n        rgba(255,255,255,.035);\r\n\r\n    backdrop-filter:\r\n        blur(12px);\r\n\r\n    -webkit-backdrop-filter:\r\n        blur(12px);\r\n\r\n}\r\n\r\n\r\n.vp-contact-card {\r\n\r\n    padding: 30px;\r\n\r\n    border-radius: 22px;\r\n\r\n}\r\n\r\n\r\n.vp-card-top {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 15px;\r\n\r\n    margin-bottom: 25px;\r\n\r\n}\r\n\r\n\r\n.vp-card-icon {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    width: 45px;\r\n    height: 45px;\r\n\r\n    border-radius: 13px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            var(--vp-blue),\r\n            var(--vp-purple)\r\n        );\r\n\r\n    box-shadow:\r\n        0 10px 30px\r\n        rgba(59,130,246,.22);\r\n\r\n    font-size: 20px;\r\n\r\n}\r\n\r\n\r\n.vp-mini-label,\r\n.vp-stack-heading small,\r\n.vp-form-intro small {\r\n\r\n    display: block;\r\n\r\n    color: var(--vp-muted);\r\n\r\n    font-size: 10px;\r\n\r\n    letter-spacing: 1.5px;\r\n\r\n    font-weight: 700;\r\n\r\n}\r\n\r\n\r\n.vp-card-top h3 {\r\n\r\n    margin: 3px 0 0;\r\n\r\n    font-size: 23px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTACT ITEMS\r\n========================================================= *\/\r\n\r\n.vp-contact-item {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 14px;\r\n\r\n    padding: 15px 0;\r\n\r\n    border-bottom:\r\n        1px solid\r\n        rgba(148,163,184,.09);\r\n\r\n    transition:\r\n        transform .25s ease,\r\n        border-color .25s ease;\r\n\r\n}\r\n\r\n\r\n.vp-contact-item:hover {\r\n\r\n    transform:\r\n        translateX(5px);\r\n\r\n    border-color:\r\n        rgba(59,130,246,.3);\r\n\r\n}\r\n\r\n\r\n.vp-item-icon {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    flex:\r\n        0 0 39px;\r\n\r\n    width: 39px;\r\n    height: 39px;\r\n\r\n    border-radius: 11px;\r\n\r\n    background:\r\n        rgba(59,130,246,.09);\r\n\r\n    border:\r\n        1px solid\r\n        rgba(59,130,246,.13);\r\n\r\n    color: #93C5FD;\r\n\r\n}\r\n\r\n\r\n.vp-item-content {\r\n\r\n    min-width: 0;\r\n\r\n    flex: 1;\r\n\r\n}\r\n\r\n\r\n.vp-item-content small {\r\n\r\n    display: block;\r\n\r\n    margin-bottom: 4px;\r\n\r\n    color: var(--vp-muted);\r\n\r\n    font-size: 10px;\r\n\r\n}\r\n\r\n\r\n.vp-item-content strong {\r\n\r\n    display: block;\r\n\r\n    color: #E2E8F0;\r\n\r\n    font-size: 13px;\r\n\r\n    font-weight: 600;\r\n\r\n    overflow-wrap: anywhere;\r\n\r\n}\r\n\r\n\r\n.vp-arrow {\r\n\r\n    color: #64748B;\r\n\r\n    transition: .25s ease;\r\n\r\n}\r\n\r\n\r\n.vp-contact-item:hover .vp-arrow {\r\n\r\n    color: #60A5FA;\r\n\r\n    transform:\r\n        translate(2px,-2px);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   WHATSAPP CONTACT ITEM\r\n========================================================= *\/\r\n\r\n.vp-whatsapp-item {\r\n\r\n    cursor: pointer;\r\n\r\n}\r\n\r\n\r\n.vp-whatsapp-icon {\r\n\r\n    color: #4ADE80;\r\n\r\n    border-color:\r\n        rgba(34,197,94,.18);\r\n\r\n    background:\r\n        rgba(34,197,94,.08);\r\n\r\n}\r\n\r\n\r\n.vp-whatsapp-item:hover\r\n.vp-whatsapp-icon {\r\n\r\n    color: #86EFAC;\r\n\r\n    background:\r\n        rgba(34,197,94,.14);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   AVAILABILITY\r\n========================================================= *\/\r\n\r\n.vp-availability {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 13px;\r\n\r\n    margin-top: 22px;\r\n\r\n    padding: 14px;\r\n\r\n    border-radius: 13px;\r\n\r\n    background:\r\n\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(34,197,94,.07),\r\n            rgba(59,130,246,.04)\r\n        );\r\n\r\n    border:\r\n        1px solid\r\n        rgba(34,197,94,.12);\r\n\r\n}\r\n\r\n\r\n.vp-status-icon {\r\n\r\n    position: relative;\r\n\r\n    width: 11px;\r\n    height: 11px;\r\n\r\n    flex:\r\n        0 0 11px;\r\n\r\n}\r\n\r\n\r\n.vp-status-icon span {\r\n\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: #22C55E;\r\n\r\n    box-shadow:\r\n        0 0 12px #22C55E;\r\n\r\n    animation:\r\n        vpPulse 1.8s infinite;\r\n\r\n}\r\n\r\n\r\n.vp-availability strong {\r\n\r\n    display: block;\r\n\r\n    margin-bottom: 3px;\r\n\r\n    color: #DCFCE7;\r\n\r\n    font-size: 12px;\r\n\r\n}\r\n\r\n\r\n.vp-availability small {\r\n\r\n    color: var(--vp-muted);\r\n\r\n    font-size: 10px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TECH STACK\r\n========================================================= *\/\r\n\r\n.vp-stack-card {\r\n\r\n    padding: 25px;\r\n\r\n    border-radius: 20px;\r\n\r\n}\r\n\r\n\r\n.vp-stack-heading {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 13px;\r\n\r\n    margin-bottom: 19px;\r\n\r\n}\r\n\r\n\r\n.vp-stack-heading > span {\r\n\r\n    color: var(--vp-blue);\r\n\r\n    font-size: 23px;\r\n\r\n    font-weight: 800;\r\n\r\n}\r\n\r\n\r\n.vp-stack-heading strong {\r\n\r\n    display: block;\r\n\r\n    margin-top: 3px;\r\n\r\n    color: #E2E8F0;\r\n\r\n    font-size: 15px;\r\n\r\n}\r\n\r\n\r\n.vp-tech-list {\r\n\r\n    display: flex;\r\n\r\n    flex-wrap: wrap;\r\n\r\n    gap: 8px;\r\n\r\n}\r\n\r\n\r\n.vp-tech-list span {\r\n\r\n    padding: 7px 10px;\r\n\r\n    border-radius: 7px;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(148,163,184,.12);\r\n\r\n    background:\r\n        rgba(255,255,255,.025);\r\n\r\n    color: #AFC2D9;\r\n\r\n    font-size: 10px;\r\n\r\n    font-weight: 600;\r\n\r\n    transition:\r\n        transform .25s ease,\r\n        border-color .25s ease,\r\n        color .25s ease,\r\n        background .25s ease;\r\n\r\n}\r\n\r\n\r\n.vp-tech-list span:hover {\r\n\r\n    transform:\r\n        translateY(-3px);\r\n\r\n    color: #E0E7FF;\r\n\r\n    border-color:\r\n        rgba(139,92,246,.4);\r\n\r\n    background:\r\n        rgba(139,92,246,.08);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FORM\r\n========================================================= *\/\r\n\r\n.vp-form-wrapper {\r\n\r\n    overflow: hidden;\r\n\r\n    border-radius: 22px;\r\n\r\n    transition:\r\n        transform .3s ease,\r\n        border-color .3s ease;\r\n\r\n}\r\n\r\n\r\n.vp-form-wrapper:hover {\r\n\r\n    border-color:\r\n        rgba(59,130,246,.24);\r\n\r\n}\r\n\r\n\r\n\/* CODE BAR *\/\r\n\r\n.vp-form-codebar {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    height: 47px;\r\n\r\n    padding: 0 18px;\r\n\r\n    border-bottom:\r\n        1px solid\r\n        rgba(148,163,184,.1);\r\n\r\n    background:\r\n        rgba(2,6,23,.55);\r\n\r\n}\r\n\r\n\r\n.vp-window-dots {\r\n\r\n    display: flex;\r\n\r\n    gap: 6px;\r\n\r\n    margin-right: 14px;\r\n\r\n}\r\n\r\n\r\n.vp-window-dots i {\r\n\r\n    display: block;\r\n\r\n    width: 7px;\r\n    height: 7px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: #475569;\r\n\r\n}\r\n\r\n\r\n.vp-form-codebar > span {\r\n\r\n    color: #64748B;\r\n\r\n    font-family: monospace;\r\n\r\n    font-size: 10px;\r\n\r\n    flex: 1;\r\n\r\n}\r\n\r\n\r\n.vp-form-codebar b {\r\n\r\n    color: var(--vp-blue);\r\n\r\n    font-family: monospace;\r\n\r\n    font-size: 13px;\r\n\r\n}\r\n\r\n\r\n\/* FORM INNER *\/\r\n\r\n.vp-form-inner {\r\n\r\n    padding: 30px;\r\n\r\n}\r\n\r\n\r\n.vp-form-intro {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 13px;\r\n\r\n    margin-bottom: 27px;\r\n\r\n}\r\n\r\n\r\n.vp-form-intro > span {\r\n\r\n    color: var(--vp-blue);\r\n\r\n    font-family: monospace;\r\n\r\n    font-size: 13px;\r\n\r\n    font-weight: 700;\r\n\r\n}\r\n\r\n\r\n.vp-form-intro h3 {\r\n\r\n    margin: 4px 0 0;\r\n\r\n    color: #F1F5F9;\r\n\r\n    font-size: 22px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   INPUT\r\n========================================================= *\/\r\n\r\n.vp-form-row {\r\n\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n        1fr 1fr;\r\n\r\n    gap: 15px;\r\n\r\n}\r\n\r\n\r\n.vp-input-group {\r\n\r\n    margin-bottom: 17px;\r\n\r\n}\r\n\r\n\r\n.vp-input-group label {\r\n\r\n    display: block;\r\n\r\n    margin-bottom: 8px;\r\n\r\n    color: #94A3B8;\r\n\r\n    font-size: 11px;\r\n\r\n    font-weight: 600;\r\n\r\n}\r\n\r\n\r\n.vp-input-box {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 9px;\r\n\r\n    min-height: 49px;\r\n\r\n    padding: 0 13px;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(148,163,184,.14);\r\n\r\n    border-radius: 10px;\r\n\r\n    background:\r\n        rgba(2,6,23,.45);\r\n\r\n    transition:\r\n        border-color .25s ease,\r\n        box-shadow .25s ease,\r\n        background .25s ease;\r\n\r\n}\r\n\r\n\r\n.vp-input-box > span {\r\n\r\n    color: #64748B;\r\n\r\n    font-size: 13px;\r\n\r\n}\r\n\r\n\r\n.vp-input-box:focus-within {\r\n\r\n    border-color:\r\n        rgba(59,130,246,.65);\r\n\r\n    background:\r\n        rgba(59,130,246,.035);\r\n\r\n    box-shadow:\r\n\r\n        0 0 0 3px\r\n        rgba(59,130,246,.07),\r\n\r\n        0 0 25px\r\n        rgba(59,130,246,.06);\r\n\r\n}\r\n\r\n\r\n.vp-input-box input,\r\n.vp-input-box textarea {\r\n\r\n    width: 100%;\r\n\r\n    border: 0;\r\n\r\n    outline: 0;\r\n\r\n    background: transparent;\r\n\r\n    color: #E2E8F0;\r\n\r\n    font-family: inherit;\r\n\r\n    font-size: 12px;\r\n\r\n}\r\n\r\n\r\n.vp-input-box input {\r\n\r\n    height: 47px;\r\n\r\n}\r\n\r\n\r\n.vp-input-box textarea {\r\n\r\n    resize: vertical;\r\n\r\n    min-height: 115px;\r\n\r\n    padding: 14px 0;\r\n\r\n    line-height: 1.6;\r\n\r\n}\r\n\r\n\r\n.vp-input-box input::placeholder,\r\n.vp-input-box textarea::placeholder {\r\n\r\n    color: #475569;\r\n\r\n}\r\n\r\n\r\n.vp-textarea-box {\r\n\r\n    align-items: flex-start;\r\n\r\n    padding-top: 3px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ACTION AREA\r\n========================================================= *\/\r\n\r\n.vp-action-area {\r\n\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n        1fr 1fr;\r\n\r\n    gap: 12px;\r\n\r\n    margin-top: 3px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SUBMIT BUTTON\r\n========================================================= *\/\r\n\r\n.vp-submit-btn {\r\n\r\n    position: relative;\r\n\r\n    overflow: hidden;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    gap: 14px;\r\n\r\n    width: 100%;\r\n\r\n    min-height: 53px;\r\n\r\n    border: 0;\r\n\r\n    border-radius: 11px;\r\n\r\n    cursor: pointer;\r\n\r\n    background:\r\n\r\n        linear-gradient(\r\n            100deg,\r\n            var(--vp-blue),\r\n            var(--vp-purple)\r\n        );\r\n\r\n    color: white;\r\n\r\n    font-size: 13px;\r\n\r\n    font-weight: 700;\r\n\r\n    box-shadow:\r\n        0 12px 30px\r\n        rgba(59,130,246,.18);\r\n\r\n    transition:\r\n        transform .25s ease,\r\n        box-shadow .25s ease;\r\n\r\n}\r\n\r\n\r\n.vp-submit-btn:hover {\r\n\r\n    transform:\r\n        translateY(-2px);\r\n\r\n    box-shadow:\r\n        0 18px 40px\r\n        rgba(59,130,246,.27);\r\n\r\n}\r\n\r\n\r\n.vp-submit-btn:active {\r\n\r\n    transform:\r\n        translateY(0);\r\n\r\n}\r\n\r\n\r\n.vp-submit-arrow {\r\n\r\n    font-size: 19px;\r\n\r\n    transition:\r\n        transform .25s ease;\r\n\r\n}\r\n\r\n\r\n.vp-submit-btn:hover\r\n.vp-submit-arrow {\r\n\r\n    transform:\r\n        translateX(5px);\r\n\r\n}\r\n\r\n\r\n.vp-btn-glow {\r\n\r\n    position: absolute;\r\n\r\n    width: 70px;\r\n    height: 150px;\r\n\r\n    background:\r\n        rgba(255,255,255,.15);\r\n\r\n    transform:\r\n        rotate(25deg)\r\n        translateX(-150px);\r\n\r\n    animation:\r\n        vpButtonShine 4s\r\n        ease-in-out infinite;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   WHATSAPP BUTTON\r\n========================================================= *\/\r\n\r\n.vp-whatsapp-btn {\r\n\r\n    position: relative;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    gap: 9px;\r\n\r\n    width: 100%;\r\n\r\n    min-height: 53px;\r\n\r\n    padding: 0 14px;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(34,197,94,.28);\r\n\r\n    border-radius: 11px;\r\n\r\n    background:\r\n        rgba(34,197,94,.07);\r\n\r\n    color: #86EFAC !important;\r\n\r\n    font-size: 12px;\r\n\r\n    font-weight: 700;\r\n\r\n    transition:\r\n        transform .25s ease,\r\n        border-color .25s ease,\r\n        background .25s ease,\r\n        box-shadow .25s ease;\r\n\r\n}\r\n\r\n\r\n.vp-whatsapp-btn:hover {\r\n\r\n    transform:\r\n        translateY(-2px);\r\n\r\n    border-color:\r\n        rgba(34,197,94,.55);\r\n\r\n    background:\r\n        rgba(34,197,94,.12);\r\n\r\n    box-shadow:\r\n        0 12px 30px\r\n        rgba(34,197,94,.10);\r\n\r\n}\r\n\r\n\r\n.vp-whatsapp-btn-icon {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n}\r\n\r\n\r\n.vp-wa-arrow {\r\n\r\n    font-size: 16px;\r\n\r\n    transition:\r\n        transform .25s ease;\r\n\r\n}\r\n\r\n\r\n.vp-whatsapp-btn:hover\r\n.vp-wa-arrow {\r\n\r\n    transform:\r\n        translate(2px,-2px);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FORM FOOTER\r\n========================================================= *\/\r\n\r\n.vp-form-footer {\r\n\r\n    display: flex;\r\n\r\n    justify-content: space-between;\r\n\r\n    gap: 15px;\r\n\r\n    margin-top: 18px;\r\n\r\n    color: #64748B;\r\n\r\n    font-size: 9px;\r\n\r\n}\r\n\r\n\r\n.vp-form-footer b {\r\n\r\n    color: #22C55E;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DEVELOPER STRIP\r\n========================================================= *\/\r\n\r\n.vp-developer-strip {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: space-between;\r\n\r\n    gap: 20px;\r\n\r\n    margin-top: 28px;\r\n\r\n    padding: 15px 20px;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(148,163,184,.1);\r\n\r\n    border-radius: 13px;\r\n\r\n    background:\r\n        rgba(2,6,23,.38);\r\n\r\n    font-family: monospace;\r\n\r\n}\r\n\r\n\r\n.vp-dev-code {\r\n\r\n    font-size: 11px;\r\n\r\n    white-space: nowrap;\r\n\r\n}\r\n\r\n\r\n.vp-code-blue {\r\n\r\n    color: #60A5FA;\r\n\r\n}\r\n\r\n\r\n.vp-code-purple {\r\n\r\n    color: #A78BFA;\r\n\r\n}\r\n\r\n\r\n.vp-code-white {\r\n\r\n    color: #CBD5E1;\r\n\r\n}\r\n\r\n\r\n.vp-code-green {\r\n\r\n    color: #86EFAC;\r\n\r\n}\r\n\r\n\r\n.vp-dev-skills {\r\n\r\n    display: flex;\r\n\r\n    flex-wrap: wrap;\r\n\r\n    justify-content: flex-end;\r\n\r\n    gap: 7px;\r\n\r\n}\r\n\r\n\r\n.vp-dev-skills span {\r\n\r\n    padding: 5px 8px;\r\n\r\n    border-radius: 5px;\r\n\r\n    background:\r\n        rgba(59,130,246,.07);\r\n\r\n    color: #64748B;\r\n\r\n    font-size: 9px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ANIMATIONS\r\n========================================================= *\/\r\n\r\n@keyframes vpPulse {\r\n\r\n    0%,100% {\r\n\r\n        transform: scale(1);\r\n\r\n        opacity: 1;\r\n\r\n    }\r\n\r\n    50% {\r\n\r\n        transform: scale(1.35);\r\n\r\n        opacity: .55;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes vpFloat {\r\n\r\n    0%,100% {\r\n\r\n        transform:\r\n            translateY(0);\r\n\r\n        opacity: .4;\r\n\r\n    }\r\n\r\n    50% {\r\n\r\n        transform:\r\n            translateY(-25px);\r\n\r\n        opacity: 1;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes vpOrbMove {\r\n\r\n    0% {\r\n\r\n        transform:\r\n            translate(0,0)\r\n            scale(1);\r\n\r\n    }\r\n\r\n    100% {\r\n\r\n        transform:\r\n            translate(50px,35px)\r\n            scale(1.12);\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n@keyframes vpButtonShine {\r\n\r\n    0%,55% {\r\n\r\n        transform:\r\n            rotate(25deg)\r\n            translateX(-160px);\r\n\r\n    }\r\n\r\n    75%,100% {\r\n\r\n        transform:\r\n            rotate(25deg)\r\n            translateX(480px);\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 900px) {\r\n\r\n    .vp-contact-container {\r\n\r\n        padding:\r\n            80px 0 35px;\r\n\r\n    }\r\n\r\n\r\n    .vp-contact-grid {\r\n\r\n        grid-template-columns: 1fr;\r\n\r\n    }\r\n\r\n\r\n    .vp-contact-left {\r\n\r\n        display: grid;\r\n\r\n        grid-template-columns:\r\n            1fr 1fr;\r\n\r\n        align-items: stretch;\r\n\r\n    }\r\n\r\n\r\n    .vp-contact-card,\r\n    .vp-stack-card {\r\n\r\n        height: 100%;\r\n\r\n    }\r\n\r\n\r\n    .vp-contact-header {\r\n\r\n        margin-bottom: 45px;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 600px) {\r\n\r\n    #contact.vp-contact {\r\n\r\n        min-height: auto;\r\n\r\n    }\r\n\r\n\r\n    .vp-contact-container {\r\n\r\n        width: 92%;\r\n\r\n        padding:\r\n            65px 0 30px;\r\n\r\n    }\r\n\r\n\r\n    .vp-contact-header {\r\n\r\n        margin-bottom: 35px;\r\n\r\n    }\r\n\r\n\r\n    .vp-contact-badge {\r\n\r\n        padding:\r\n            7px 11px;\r\n\r\n        font-size: 9px;\r\n\r\n        letter-spacing: 1.1px;\r\n\r\n    }\r\n\r\n\r\n    .vp-contact-header h2 {\r\n\r\n        margin-top: 18px;\r\n\r\n        font-size: 35px;\r\n\r\n        line-height: 1.12;\r\n\r\n        letter-spacing: -1.2px;\r\n\r\n    }\r\n\r\n\r\n    .vp-contact-header p {\r\n\r\n        font-size: 13px;\r\n\r\n        line-height: 1.7;\r\n\r\n    }\r\n\r\n\r\n    .vp-contact-grid {\r\n\r\n        gap: 18px;\r\n\r\n    }\r\n\r\n\r\n    .vp-contact-left {\r\n\r\n        display: flex;\r\n\r\n        gap: 18px;\r\n\r\n    }\r\n\r\n\r\n    .vp-contact-card {\r\n\r\n        padding: 22px;\r\n\r\n        border-radius: 18px;\r\n\r\n    }\r\n\r\n\r\n    .vp-stack-card {\r\n\r\n        padding: 21px;\r\n\r\n        border-radius: 18px;\r\n\r\n    }\r\n\r\n\r\n    .vp-form-wrapper {\r\n\r\n        border-radius: 18px;\r\n\r\n    }\r\n\r\n\r\n    .vp-form-inner {\r\n\r\n        padding: 22px;\r\n\r\n    }\r\n\r\n\r\n    .vp-form-row {\r\n\r\n        grid-template-columns: 1fr;\r\n\r\n        gap: 0;\r\n\r\n    }\r\n\r\n\r\n    .vp-form-intro h3 {\r\n\r\n        font-size: 19px;\r\n\r\n    }\r\n\r\n\r\n    \/* MOBILE BUTTONS *\/\r\n\r\n    .vp-action-area {\r\n\r\n        grid-template-columns: 1fr;\r\n\r\n        gap: 10px;\r\n\r\n    }\r\n\r\n\r\n    .vp-submit-btn,\r\n    .vp-whatsapp-btn {\r\n\r\n        min-height: 51px;\r\n\r\n    }\r\n\r\n\r\n    .vp-form-footer {\r\n\r\n        flex-direction: column;\r\n\r\n        gap: 7px;\r\n\r\n    }\r\n\r\n\r\n    .vp-developer-strip {\r\n\r\n        flex-direction: column;\r\n\r\n        align-items: flex-start;\r\n\r\n        padding: 14px 16px;\r\n\r\n    }\r\n\r\n\r\n    .vp-dev-skills {\r\n\r\n        justify-content: flex-start;\r\n\r\n    }\r\n\r\n\r\n    .vp-orb {\r\n\r\n        width: 260px;\r\n\r\n        height: 260px;\r\n\r\n        filter: blur(65px);\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SMALL MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 380px) {\r\n\r\n    .vp-contact-container {\r\n\r\n        width: 94%;\r\n\r\n    }\r\n\r\n\r\n    .vp-contact-header h2 {\r\n\r\n        font-size: 31px;\r\n\r\n    }\r\n\r\n\r\n    .vp-form-inner,\r\n    .vp-contact-card {\r\n\r\n        padding: 18px;\r\n\r\n    }\r\n\r\n\r\n    .vp-item-content strong {\r\n\r\n        font-size: 11px;\r\n\r\n    }\r\n\r\n\r\n    .vp-tech-list span {\r\n\r\n        font-size: 9px;\r\n\r\n        padding:\r\n            6px 8px;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCE MOTION\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n    .vp-orb,\r\n    .vp-dot,\r\n    .vp-live-dot,\r\n    .vp-status-icon span,\r\n    .vp-btn-glow {\r\n\r\n        animation: none !important;\r\n\r\n    }\r\n\r\n\r\n    .vp-contact-item,\r\n    .vp-tech-list span,\r\n    .vp-submit-btn,\r\n    .vp-whatsapp-btn {\r\n\r\n        transition: none !important;\r\n\r\n    }\r\n\r\n}\r\n\r\n<\/style>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Available for Work Hello, I&#8217;m Vishal Pandey I&#8217;m a | 3+ Years Experience WP WordPress Developer \u2197 SEO Optimization I [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vishal.yenexa.com\/index.php\/wp-json\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vishal.yenexa.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vishal.yenexa.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vishal.yenexa.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vishal.yenexa.com\/index.php\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":85,"href":"https:\/\/vishal.yenexa.com\/index.php\/wp-json\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":137,"href":"https:\/\/vishal.yenexa.com\/index.php\/wp-json\/wp\/v2\/pages\/11\/revisions\/137"}],"wp:attachment":[{"href":"https:\/\/vishal.yenexa.com\/index.php\/wp-json\/wp\/v2\/media?parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}