{"id":7,"date":"2026-10-03T20:11:43","date_gmt":"2026-10-03T20:11:43","guid":{"rendered":"https:\/\/amilanilantha.xyz\/?page_id=7"},"modified":"2026-10-03T20:47:22","modified_gmt":"2026-10-03T20:47:22","slug":"home","status":"publish","type":"page","link":"https:\/\/amilanilantha.xyz\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"7\" class=\"elementor elementor-7\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f830ed4 e-con e-atomic-element e-flexbox-base e-default-div e-9654c35 \" data-id=\"f830ed4\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"f830ed4\">\n    \t\t<div class=\"elementor-element elementor-element-f32b141 elementor-widget elementor-widget-html\" data-id=\"f32b141\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600&family=Poppins:wght@400;500;600;700;800&display=swap');\r\n    @import url('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css');\r\n\r\n    :root {\r\n        --primary: #7C3AED;      \r\n        --secondary: #3B82F6;    \r\n        --gradient-btn: linear-gradient(135deg, #7C3AED 0%, #3B82F6 100%);\r\n        --bg-body: #FAF9F6;\r\n        --bg-light: #F2F0EB;\r\n        --bg-card: #FFFFFF;\r\n        --text-dark: #110F1A;\r\n        --text-light: #52525B;\r\n        --border-color: #E5E7EB;\r\n        --font-heading: 'Poppins', sans-serif;\r\n        --font-body: 'Inter', sans-serif;\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --bg-body: #0B0914;\r\n        --bg-light: #131022;\r\n        --bg-card: #1C1731;\r\n        --text-dark: #FFFFFF;\r\n        --text-light: #9CA3AF;\r\n        --border-color: #2D264B;\r\n    }\r\n\r\n    body, html { background-color: var(--bg-body) !important; margin: 0 !important; padding: 0 !important; transition: background-color 0.3s ease; cursor: default; overflow-x: hidden; }\r\n    \r\n    \/* CONSTRUCTION MODAL NOTIFICATION *\/\r\n    .construction-overlay {\r\n        position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n        background: rgba(11, 9, 20, 0.85); backdrop-filter: blur(12px);\r\n        z-index: 9999999; display: flex; justify-content: center; align-items: center;\r\n        opacity: 1; transition: opacity 0.5s ease, visibility 0.5s ease;\r\n    }\r\n    .construction-box {\r\n        background: var(--bg-card); padding: 50px 40px; border-radius: 24px;\r\n        text-align: center; border: 1px solid var(--primary);\r\n        box-shadow: 0 0 40px rgba(124, 58, 237, 0.4), inset 0 0 20px rgba(124, 58, 237, 0.1);\r\n        transform: translateY(0); animation: modalPop 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n        max-width: 450px; width: 90%;\r\n    }\r\n    .construction-box h2 { color: var(--text-dark); margin-bottom: 15px; font-size: 32px; font-family: var(--font-heading); }\r\n    .construction-box p { color: var(--text-light); margin-bottom: 30px; font-size: 18px; font-style: italic; line-height: 1.5; }\r\n    .construction-box i { font-size: 48px; color: var(--primary); margin-bottom: 20px; animation: pulseOrb 2s infinite alternate; }\r\n    @keyframes modalPop { from { transform: scale(0.8) translateY(30px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }\r\n\r\n    \/* CUSTOM BLINKING PURPLE CURSOR (Hidden on Mobile) *\/\r\n    .custom-cursor {\r\n        position: fixed; top: 0; left: 0; width: 12px; height: 12px;\r\n        background-color: var(--primary); border-radius: 50%;\r\n        pointer-events: none; z-index: 999998; transform: translate(-50%, -50%);\r\n        animation: cursorBlink 1.5s infinite; transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease;\r\n    }\r\n    @keyframes cursorBlink {\r\n        0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.5); }\r\n        70% { box-shadow: 0 0 0 15px rgba(124, 58, 237, 0); }\r\n        100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }\r\n    }\r\n    .custom-cursor.hover-active {\r\n        width: 20px; height: 20px; background-color: var(--secondary);\r\n        animation: none; box-shadow: 0 0 15px rgba(59, 130, 246, 0.6);\r\n    }\r\n\r\n    html { scroll-behavior: smooth; }\r\n    .amila-advanced-wrapper { font-family: var(--font-body); color: var(--text-light); line-height: 1.6; background-color: var(--bg-body); overflow-x: clip; width: 100%; position: relative; transition: background-color 0.3s ease, color 0.3s ease; }\r\n    .amila-advanced-wrapper h1, .amila-advanced-wrapper h2, .amila-advanced-wrapper h3, .amila-advanced-wrapper h4 { font-family: var(--font-heading); color: var(--text-dark); margin-bottom: 1rem; margin-top: 0; transition: color 0.3s ease;}\r\n    .amila-advanced-wrapper a { text-decoration: none; color: inherit; transition: all 0.3s ease; }\r\n\r\n    .amila-section { padding: 90px 0; width: 100%; position: relative; transition: background-color 0.3s ease; }\r\n    .amila-section.bg-gray { background-color: var(--bg-light); }\r\n    .amila-container { max-width: 1140px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; }\r\n    .section-title { text-align: center; font-size: 38px; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.5px; text-shadow: 0 0 20px rgba(124, 58, 237, 0.1); }\r\n    .section-subtitle { text-align: center; font-size: 16px; margin-bottom: 50px; color: var(--text-light); font-weight: 400; }\r\n\r\n    .hidden-left { opacity: 0; transform: translateX(-60px); transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; }\r\n    .hidden-right { opacity: 0; transform: translateX(60px); transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; }\r\n    .hidden-up { opacity: 0; transform: translateY(50px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; }\r\n    .show { opacity: 1 !important; transform: translate(0) !important; }\r\n\r\n    \/* Buttons *\/\r\n    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 50px; font-weight: 500; cursor: pointer; transition: all 0.4s ease; text-decoration: none; white-space: nowrap; }\r\n    .btn-primary { background: var(--gradient-btn); color: #ffffff !important; border: none; box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3); position: relative; overflow: hidden;}\r\n    .btn-primary::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: rgba(255,255,255,0.2); transform: rotate(45deg) translateY(-100%); transition: all 0.6s ease; }\r\n    .btn-primary:hover::after { transform: rotate(45deg) translateY(100%); }\r\n    .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(124, 58, 237, 0.6); filter: brightness(1.1); }\r\n    .btn-outline { border: 1px solid var(--border-color); color: var(--text-dark); background: transparent; }\r\n    .btn-outline:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-3px); box-shadow: 0 5px 20px rgba(124, 58, 237, 0.2); }\r\n\r\n    \/* HERO SECTION *\/\r\n    .hero { padding: 180px 0 100px; overflow: hidden; position: relative; z-index: 1; }\r\n    .hero::before { content: ''; position: absolute; top: 10%; left: 0%; width: 400px; height: 400px; background: rgba(124, 58, 237, 0.15); filter: blur(100px); z-index: 0; border-radius: 50%; animation: pulseOrb 8s infinite alternate; }\r\n    .hero::after { content: ''; position: absolute; bottom: 0%; right: 5%; width: 350px; height: 350px; background: rgba(59, 130, 246, 0.15); filter: blur(90px); z-index: 0; border-radius: 50%; animation: pulseOrb 10s infinite alternate-reverse; }\r\n    @keyframes pulseOrb { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.2); opacity: 1; } }\r\n\r\n    .hero-container { display: flex; align-items: center; justify-content: space-between; gap: 40px; }\r\n    .hero-content { flex: 1; max-width: 620px; }\r\n    .hero-tag { display: inline-block; padding: 6px 18px; background: rgba(124, 58, 237, 0.1); color: var(--primary); border-radius: 50px; font-size: 13px; font-weight: 600; margin-bottom: 20px; border: 1px solid rgba(124, 58, 237, 0.2); animation: float3D 6s ease-in-out infinite; box-shadow: 0 0 15px rgba(124, 58, 237, 0.2); }\r\n    .hero-name { font-size: 60px; font-weight: 700; color: var(--text-dark); line-height: 1.1; margin-bottom: 10px; letter-spacing: -1px; animation: textGlow 3s ease-in-out infinite alternate; }\r\n    @keyframes textGlow { from { text-shadow: 0 0 10px rgba(124,58,237,0.1); } to { text-shadow: 0 0 25px rgba(124,58,237,0.4); } }\r\n    .text-gradient { background: var(--gradient-btn); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }\r\n    .hero-titles { font-size: 22px; font-weight: 600; margin-bottom: 20px; color: var(--text-dark); }\r\n    .hero-bio { font-size: 16px; margin-bottom: 40px; color: var(--text-light); line-height: 1.7; text-align: justify; }\r\n    \r\n    .hero-buttons { display: flex; gap: 10px; margin-bottom: 40px; flex-wrap: nowrap; align-items: center; }\r\n    .hero-buttons .btn { padding: 12px 20px; font-size: 14px; }\r\n    \r\n    .hero-socials { display: flex; gap: 20px; align-items: center; }\r\n    .hero-social-item { display: flex; align-items: center; justify-content: center; color: var(--text-light); font-size: 20px; font-weight: 700; font-family: var(--font-heading); transition: all 0.3s ease; text-decoration: none; }\r\n    .hero-social-item:hover { color: var(--primary); transform: translateY(-3px) scale(1.1); text-shadow: 0 5px 15px rgba(124,58,237,0.4); }\r\n\r\n    \/* 3D HERO IMAGE *\/\r\n    .hero-image-col { flex: 1; display: flex; justify-content: flex-end; position: relative; perspective: 1200px; }\r\n    .hero-image-wrapper { position: relative; width: 100%; max-width: 380px; aspect-ratio: 4\/5; z-index: 2; flex-shrink: 0; transform-style: preserve-3d; transform: rotateY(-15deg) rotateX(5deg); animation: float3D 8s ease-in-out infinite; }\r\n    @keyframes float3D { 0% { transform: rotateY(-15deg) rotateX(5deg) translateY(0px); } 50% { transform: rotateY(-8deg) rotateX(8deg) translateY(-20px); } 100% { transform: rotateY(-15deg) rotateX(5deg) translateY(0px); } }\r\n    \r\n    .hero-image-backdrop { position: absolute; top: 0; left: 0; width: 88%; height: 92%; border-radius: 30px; background: linear-gradient(135deg, rgba(124, 58, 237, 0.15) 0%, transparent 100%); border: 2px solid rgba(124, 58, 237, 0.2); border-top-color: rgba(124, 58, 237, 0.8); border-left-color: rgba(124, 58, 237, 0.8); box-shadow: inset 0 0 20px rgba(124, 58, 237, 0.1), 0 0 40px rgba(124, 58, 237, 0.2); transform: translateZ(-30px); }\r\n    .hero-image-inner { position: absolute; bottom: 0; right: 0; width: 88%; height: 92%; border-radius: 30px; overflow: hidden; background: var(--gradient-btn); box-shadow: -15px -15px 40px rgba(0,0,0,0.25); border: 1px solid var(--border-color); transform: translateZ(30px); }\r\n    .hero-image-inner img { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.05) saturate(1.1); transition: transform 0.5s ease;}\r\n    .hero-image-wrapper:hover .hero-image-inner img { transform: scale(1.05); }\r\n    \r\n    .floating-badge { position: absolute; z-index: 10; box-shadow: 0 15px 35px rgba(0,0,0,0.3); }\r\n    .badge-left { bottom: 20px; left: -20px; padding: 15px 20px; text-align: left; background: rgba(28, 23, 49, 0.8); border: 1px solid rgba(255,255,255,0.1); color: #fff; border-radius: 16px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transform: translateZ(70px); box-shadow: 0 0 20px rgba(124, 58, 237, 0.3); }\r\n    .badge-left h4 { margin: 0; font-size: 24px; color: inherit; line-height: 1; margin-bottom: 5px;}\r\n    .badge-left p { margin: 0; font-size: 13px; color: rgba(255,255,255,0.7); }\r\n    .badge-right { bottom: 60px; right: -25px; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; background: var(--gradient-btn); border-radius: 16px; border: 1px solid rgba(255,255,255,0.2); transform: translateZ(50px); animation: spinSlow 15s linear infinite; box-shadow: 0 0 25px rgba(124, 58, 237, 0.5); }\r\n    @keyframes spinSlow { 100% { transform: translateZ(50px) rotate(360deg); } }\r\n\r\n    \/* ABOUT SECTION *\/\r\n    .about { padding: 100px 0; background-color: var(--bg-body); overflow: hidden; position: relative; }\r\n    .about-container { display: flex; align-items: center; gap: 70px; }\r\n    .about-image { flex: 1; position: relative; display: flex; justify-content: center; padding: 40px; cursor: crosshair; }\r\n    \r\n    .shape-wrapper { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1\/1; flex-shrink: 0; }\r\n    .shape-border { position: absolute; width: 100%; height: 100%; border: 4px solid var(--primary); border-radius: 35px; transform: rotate(45deg); z-index: 1; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }\r\n    .shape-border-dark { position: absolute; width: 100%; height: 100%; border: 4px solid var(--secondary); border-radius: 35px; transform: rotate(35deg); z-index: 0; opacity: 0.3; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }\r\n    .shape-image { position: absolute; top: 8%; left: 8%; width: 84%; height: 84%; background: var(--border-color); border-radius: 50%; z-index: 2; overflow: hidden; border: 6px solid var(--bg-body); box-shadow: 0 20px 40px rgba(0,0,0,0.15); transition: all 0.5s ease; }\r\n    .shape-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; display: block; }\r\n    \r\n    .about-image:hover .shape-border { transform: rotate(90deg) scale(1.1); border-color: var(--secondary); box-shadow: 0 0 30px rgba(59, 130, 246, 0.5), inset 0 0 15px rgba(59, 130, 246, 0.3); }\r\n    .about-image:hover .shape-border-dark { transform: rotate(0deg) scale(1.15); border-color: var(--primary); opacity: 0.8; box-shadow: 0 0 30px rgba(124, 58, 237, 0.5); }\r\n    .about-image:hover .shape-image { transform: scale(1.02); border-color: var(--primary); box-shadow: 0 0 20px rgba(124, 58, 237, 0.3); }\r\n    .about-image:hover .shape-image img { transform: scale(1.08); }\r\n    \r\n    .floating-card { position: absolute; background: var(--bg-card); padding: 18px 25px; border-radius: 16px; box-shadow: 0 15px 35px rgba(0,0,0,0.08); z-index: 10; text-align: center; width: 180px; border: 1px solid var(--border-color); backdrop-filter: blur(5px); transition: transform 0.1s linear, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }\r\n    .floating-card:hover { border-color: var(--primary); box-shadow: 0 15px 35px rgba(124, 58, 237, 0.2); }\r\n    .floating-card.top { top: 10px; right: -40px; }\r\n    .floating-card.bottom { bottom: 30px; right: -60px; }\r\n    .floating-card h4 { font-size: 15px; margin-bottom: 5px; }\r\n    .floating-card p { font-size: 12px; color: var(--text-light); margin-bottom: 12px; }\r\n    .floating-btn { display: inline-block; background: var(--bg-light); color: var(--primary); font-size: 12px; padding: 8px 16px; border-radius: 20px; font-weight: 600; transition: all 0.3s ease; }\r\n    .floating-btn:hover { background: var(--primary); color: #fff; box-shadow: 0 5px 15px rgba(124, 58, 237, 0.4); }\r\n    \r\n    .about-content { flex: 1; }\r\n    .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 30px; }\r\n    .stat-item { background: var(--bg-light); padding: 20px 15px; border-radius: 16px; text-align: center; transition: all 0.4s ease; border: 1px solid transparent; }\r\n    .stat-item:hover { transform: translateY(-8px) scale(1.03); background: var(--bg-card); border-color: var(--primary); box-shadow: 0 10px 25px rgba(124,58,237,0.2); }\r\n    .stat-value { font-size: 32px; font-weight: 700; color: var(--primary); font-family: var(--font-heading); line-height: 1; margin-bottom: 5px; text-shadow: 0 0 10px rgba(124, 58, 237, 0.2); }\r\n    .stat-label { font-size: 13px; font-weight: 500; color: var(--text-dark); }\r\n\r\n    \/* GENERAL CARDS (SKILLS & SERVICES) *\/\r\n    .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; }\r\n    .card { background: var(--bg-card); padding: 35px 30px; border-radius: 20px; border: 1px solid var(--border-color); transition: all 0.5s ease; display: flex; flex-direction: column; position: relative; overflow: hidden; }\r\n    .card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--gradient-btn); transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease; }\r\n    .card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(124, 58, 237, 0.15), 0 0 20px rgba(124, 58, 237, 0.05); border-color: rgba(124, 58, 237, 0.3); }\r\n    .card:hover::before { transform: scaleX(1); }\r\n    \r\n    .card-icon { display: flex; justify-content: center; align-items: center; width: 75px; height: 75px; background: var(--bg-light); border-radius: 20px; margin: 0 auto 20px auto; transition: all 0.4s ease; box-shadow: 0 0 15px rgba(124, 58, 237, 0.05); }\r\n    .card-icon i { font-size: 28px; color: var(--primary); line-height: 1; display: block; transition: transform 0.4s ease; }\r\n    .card:hover .card-icon { background: var(--gradient-btn); transform: scale(1.05); box-shadow: 0 0 25px rgba(124, 58, 237, 0.4); }\r\n    .card:hover .card-icon i { color: #ffffff; transform: scale(1.1); text-shadow: 0 0 10px rgba(255,255,255,0.5); }\r\n    .card h3 { font-size: 20px; margin-bottom: 12px; text-align: center;}\r\n    .card p { text-align: center; }\r\n    \r\n    .skill-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }\r\n    .skill-tags span { font-size: 13px; background: var(--bg-light); color: var(--text-dark); padding: 8px 16px; border-radius: 50px; font-weight: 500; border: 1px solid transparent; transition: all 0.3s ease; }\r\n    .card:hover .skill-tags span { background: var(--bg-body); border-color: var(--border-color); }\r\n    .skill-tags span:hover { background: var(--primary) !important; color: #ffffff !important; border-color: var(--primary) !important; transform: translateY(-3px) scale(1.05); box-shadow: 0 5px 15px rgba(124, 58, 237, 0.4); }\r\n\r\n    \/* SLIDERS (PROJECTS & TESTIMONIALS) *\/\r\n    .project-filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }\r\n    .filter-btn { padding: 8px 22px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-dark); border-radius: 50px; font-weight: 600; cursor: pointer; transition: all 0.4s ease; font-size: 14px;}\r\n    .filter-btn.active, .filter-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 5px 15px rgba(124, 58, 237, 0.3); }\r\n    \r\n    .slider-wrapper { position: relative; width: 100%; display: flex; align-items: center; }\r\n    .slider-track { display: flex; gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; width: 100%; padding: 15px 5px 35px 5px; -ms-overflow-style: none; scrollbar-width: none; align-items: stretch; }\r\n    .slider-track::-webkit-scrollbar { display: none; }\r\n    .slider-item { scroll-snap-align: start; flex-shrink: 0; animation: scaleUp 0.6s ease forwards; height: auto; }\r\n    .project-card.slider-item { flex-basis: calc(33.333% - 20px); min-width: 300px; padding: 0; border: none; }\r\n\r\n    .testimonial-card.slider-item { flex-basis: calc(50% - 15px); min-width: 400px; display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 25px !important; padding: 35px 30px !important; text-align: left !important; }\r\n    \r\n    .slider-nav { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-dark); width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; position: absolute; z-index: 10; top: 45%; transform: translateY(-50%); transition: all 0.3s ease; font-size: 16px; }\r\n    .slider-nav:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-50%) scale(1.1); box-shadow: 0 0 20px rgba(124, 58, 237, 0.4); }\r\n    .slider-nav.prev { left: -24px; }\r\n    .slider-nav.next { right: -24px; }\r\n\r\n    @keyframes scaleUp { from { opacity: 0; transform: scale(0.92) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }\r\n    \r\n    .project-img { height: 220px; display: flex; align-items: center; justify-content: center; background: var(--bg-light); overflow: hidden; position: relative; border-bottom: 1px solid var(--border-color); }\r\n    .project-img img, .project-img i { transition: transform 0.6s ease; display: block; }\r\n    .project-img i { font-size: 50px; color: var(--text-light); }\r\n    .project-card:hover .project-img img, .project-card:hover .project-img i { transform: scale(1.08); }\r\n    .project-card:hover .project-img i { color: var(--primary); text-shadow: 0 0 15px rgba(124, 58, 237, 0.3); }\r\n    .project-content { padding: 25px; background: var(--bg-card); height: 100%; display: flex; flex-direction: column;}\r\n    .project-category { font-size: 11px; color: var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; display: block; }\r\n    .project-content h4 { font-size: 18px; margin: 0; color: var(--text-dark); transition: color 0.3s ease; }\r\n    .project-card:hover .project-content h4 { color: var(--primary); text-shadow: 0 0 10px rgba(124, 58, 237, 0.1); }\r\n\r\n    \/* CONTACT SECTION *\/\r\n    .contact-title-wrapper { text-align: center; margin-bottom: 60px; }\r\n    .contact-new-title { display: inline-block; font-family: var(--font-heading); font-size: 38px; font-weight: 400; color: var(--text-dark); position: relative; padding-left: 20px; margin-bottom: 15px; text-align: left; }\r\n    .contact-new-title::before { content: ''; position: absolute; left: 0; top: 10%; height: 80%; width: 4px; background: var(--gradient-btn); border-radius: 2px; box-shadow: 0 0 10px rgba(124, 58, 237, 0.4); }\r\n    .contact-new-title strong { font-weight: 700; text-shadow: 0 0 15px rgba(124, 58, 237, 0.15); }\r\n\r\n    .contact-new-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }\r\n    .contact-form-card { background: var(--bg-card); padding: 40px; border-radius: 16px; border: 1px solid var(--border-color); transition: all 0.3s ease; }\r\n    .contact-form-card:hover { border-color: rgba(124, 58, 237, 0.3); box-shadow: 0 15px 35px rgba(124, 58, 237, 0.1); }\r\n    .contact-form-card h3 { font-size: 22px; margin-bottom: 30px; }\r\n    .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }\r\n    .new-input { width: 100%; box-sizing: border-box; padding: 16px 20px; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 10px; color: var(--text-dark); font-family: var(--font-body); font-size: 14px; outline: none; transition: all 0.3s ease; }\r\n    .new-input.full-width { margin-bottom: 15px; }\r\n    .new-input:focus { border-color: var(--primary); background: var(--bg-card); box-shadow: 0 0 15px rgba(124, 58, 237, 0.25); }\r\n\r\n    .contact-info-wrapper { display: flex; flex-direction: column; gap: 35px; }\r\n    .info-block { display: flex; align-items: flex-start; gap: 20px; cursor: pointer; }\r\n    .info-icon { width: 50px; height: 50px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--text-dark); transition: all 0.3s ease; }\r\n    .info-block:hover .info-icon { background: var(--primary); color: #fff; border-color: var(--primary); transform: scale(1.1); box-shadow: 0 0 20px rgba(124, 58, 237, 0.4); }\r\n    .info-text h4 { font-size: 18px; margin: 0 0 5px 0; color: var(--text-dark); transition: color 0.3s ease; }\r\n    .info-block:hover .info-text h4 { color: var(--primary); }\r\n    .info-text p { font-size: 14px; margin: 0; color: var(--text-light); line-height: 1.5; }\r\n    .contact-action-link { display: inline-flex; align-items: center; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--primary); text-decoration: none; transition: all 0.3s ease; }\r\n    .contact-action-link:hover { color: var(--secondary); transform: translateX(5px); text-shadow: 0 0 8px rgba(59, 130, 246, 0.3); }\r\n\r\n    \/* ========================================= *\/\r\n    \/* MOBILE CSS (TOUCH OPTIMIZATIONS)          *\/\r\n    \/* ========================================= *\/\r\n    \r\n    @media (max-width: 992px) {\r\n        .custom-cursor { display: none !important; }\r\n        .hero-container, .about-container { flex-direction: column; text-align: center; }\r\n        .hero-image-col, .about-image { width: 100%; justify-content: center; padding: 20px 0; perspective: none; }\r\n        .hero-image-wrapper { transform: none !important; animation: mobileFloat 6s ease-in-out infinite !important; }\r\n        .hero-image-backdrop, .hero-image-inner, .badge-left, .badge-right { transform: none !important; }\r\n        .contact-new-grid { grid-template-columns: 1fr; gap: 40px; }\r\n        .project-card.slider-item { flex-basis: calc(50% - 15px); }\r\n        .testimonial-card.slider-item { flex-basis: 100%; flex-direction: column !important; align-items: center !important; text-align: center !important; }\r\n    }\r\n    @keyframes mobileFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }\r\n\r\n    @media (max-width: 768px) {\r\n        .amila-section { padding: 60px 0; }\r\n        .hero { padding: 120px 0 60px; }\r\n        .hero-name { font-size: 42px; }\r\n        .hero-buttons { flex-direction: column; width: 100%; }\r\n        .hero-buttons .btn { width: 100%; padding: 16px;}\r\n        .form-row-2 { grid-template-columns: 1fr; gap: 15px; }\r\n        .project-card.slider-item { flex-basis: 100%; min-width: unset; }\r\n        .slider-nav { display: none !important; } \r\n    }\r\n<\/style>\r\n\r\n<!-- Construction Notification Overlay -->\r\n<div id=\"construction-notification\" class=\"construction-overlay\">\r\n    <div class=\"construction-box\">\r\n        <i class=\"fa-solid fa-person-digging\"><\/i>\r\n        <h2>Under Construction<\/h2>\r\n        <p>I am working silent for a revolution.<\/p>\r\n        <button class=\"btn btn-primary\" onclick=\"closeNotification()\" style=\"width: 100%; padding: 14px; font-size: 16px;\">Got It<\/button>\r\n    <\/div>\r\n<\/div>\r\n\r\n<div class=\"custom-cursor\" id=\"custom-cursor\"><\/div>\r\n\r\n<div class=\"amila-advanced-wrapper\">\r\n\r\n    <section id=\"hero\" class=\"hero bg-gray\">\r\n        <div class=\"amila-container hero-container\">\r\n            \r\n            <div class=\"hero-content hidden-left\">\r\n                <span class=\"hero-tag\">IT Infrastructure Specialist<\/span>\r\n                <h1 class=\"hero-name\">Amila <span class=\"text-gradient\">Nilantha<\/span><\/h1>\r\n                <h3 class=\"hero-titles\">IT Infrastructure Specialist & Digital Strategist<\/h3>\r\n                <p class=\"hero-bio\">Detail-oriented IT Infrastructure Specialist with 6+ years of experience managing enterprise environments (15,000+ users), securing networks, and building high-converting digital solutions across Sri Lanka.<\/p>\r\n                \r\n                <div class=\"hero-buttons\">\r\n                    <a href=\"https:\/\/drive.google.com\/file\/d\/1QJZEflB6XC-AFrkpiY_NSqWVh4ET-REM\/view?usp=drive_link\" target=\"_blank\" class=\"btn btn-primary\">Download Portfolio<\/a>\r\n                    <a href=\"https:\/\/drive.google.com\/file\/d\/1Vcmk74Z-4F_6NAYJvbIg0HhLBfTNYAZ0\/view?usp=drive_link\" target=\"_blank\" class=\"btn btn-primary\">Download CV<\/a>\r\n                    <a href=\"#contact\" class=\"btn btn-outline\">Contact Me<\/a>\r\n                <\/div>\r\n\r\n                <div class=\"hero-socials\">\r\n                    <a href=\"https:\/\/linkedin.com\/in\/amila-kingston\" target=\"_blank\" class=\"hero-social-item\"><i class=\"fa-brands fa-linkedin-in\"><\/i><\/a>\r\n                    <a href=\"#\" target=\"_blank\" class=\"hero-social-item\">Up<\/a>\r\n                    <a href=\"#\" target=\"_blank\" class=\"hero-social-item\">Fi<\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"hero-image-col hidden-right\">\r\n                <div class=\"hero-image-wrapper\">\r\n                    <div class=\"hero-image-backdrop\"><\/div>\r\n                    <div class=\"hero-image-inner\">\r\n                        <!-- Updated 2026 Image link -->\r\n                        <img decoding=\"async\" src=\"http:\/\/amilanilantha.xyz\/wp-content\/uploads\/2026\/10\/Amilanilantha.webp\" alt=\"Amila Nilantha\">\r\n                    <\/div>\r\n                    <div class=\"floating-badge badge-left\">\r\n                        <h4>6+<\/h4>\r\n                        <p>Years Experience<\/p>\r\n                    <\/div>\r\n                    <div class=\"floating-badge badge-right\">\r\n                        <i class=\"fa-solid fa-code\"><\/i>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n        <\/div>\r\n    <\/section>\r\n\r\n    <section id=\"about\" class=\"about\">\r\n        <div class=\"amila-container about-container\">\r\n            <div class=\"about-image hidden-left\" id=\"about-zone\">\r\n                <div class=\"shape-wrapper about-shape\">\r\n                    <div class=\"shape-border\"><\/div>\r\n                    <div class=\"shape-border-dark\"><\/div>\r\n                    <div class=\"shape-image\">\r\n                        <!-- Updated 2026 Image link -->\r\n                        <img decoding=\"async\" src=\"http:\/\/amilanilantha.xyz\/wp-content\/uploads\/2026\/10\/Yellow-and-Black-Simple-Professional-LinkedIn-Profile-Picture-2.jpg\" alt=\"About Amila\">\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"floating-card top js-parallax-card\">\r\n                    <h4>Enterprise IT<\/h4>\r\n                    <p>M365 & SLA Mgmt<\/p>\r\n                    <a href=\"#skills\" class=\"floating-btn\">View Skills<\/a>\r\n                <\/div>\r\n                <div class=\"floating-card bottom js-parallax-card\">\r\n                    <h4>Web Dev<\/h4>\r\n                    <p>High-converting UX<\/p>\r\n                    <a href=\"#projects\" class=\"floating-btn\">View Projects<\/a>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"about-content hidden-right counter-trigger\">\r\n                <h2 class=\"section-title\">About Me<\/h2>\r\n                <h4 style=\"color: var(--text-light); margin-bottom: 20px;\">Get to know who I am<\/h4>\r\n                <p>I am an IT professional based in Sri Lanka with over 6 years of hands-on experience spanning enterprise IT support, network security, hardware operations, and web development. Currently serving as a Technical Analyst at MAS Technology Services, I manage L1 support for 15,000+ users while also running <a href=\"https:\/\/www.techtimesols.com\" target=\"_blank\" class=\"about-link\" style=\"color: var(--primary); font-weight: 600;\">Techtimesols<\/a> \u2013 a digital agency delivering premium web, POS, and social media solutions.<\/p>\r\n                \r\n                <div class=\"stats-grid\">\r\n                    <div class=\"stat-item\"><div class=\"stat-value\"><span class=\"counter\" data-target=\"6\">0<\/span>+<\/div><div class=\"stat-label\">Years Experience<\/div><\/div>\r\n                    <div class=\"stat-item\"><div class=\"stat-value\"><span class=\"counter\" data-target=\"15\">0<\/span>K+<\/div><div class=\"stat-label\">Users Supported<\/div><\/div>\r\n                    <div class=\"stat-item\"><div class=\"stat-value\"><span class=\"counter\" data-target=\"50\">0<\/span>+<\/div><div class=\"stat-label\">Clients Served<\/div><\/div>\r\n                    <div class=\"stat-item\"><div class=\"stat-value\"><span class=\"counter\" data-target=\"3\">0<\/span>+<\/div><div class=\"stat-label\">Companies Led IT<\/div><\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <section id=\"skills\" class=\"amila-section bg-gray\">\r\n        <div class=\"amila-container hidden-up\">\r\n            <h2 class=\"section-title\">My Skills<\/h2>\r\n            <p class=\"section-subtitle\">Technical expertise and core competencies<\/p>\r\n            \r\n            <div class=\"grid-3\">\r\n                <div class=\"card skill-card\"><div class=\"card-icon\"><i class=\"fa-solid fa-cloud\"><\/i><\/div><h3>Enterprise IT<\/h3><div class=\"skill-tags\"><span>Azure AD<\/span><span>Microsoft 365<\/span><span>Windows Server<\/span><\/div><\/div>\r\n                <div class=\"card skill-card\"><div class=\"card-icon\"><i class=\"fa-solid fa-shield-halved\"><\/i><\/div><h3>Security<\/h3><div class=\"skill-tags\"><span>Fortinet<\/span><span>CrowdStrike<\/span><span>Disaster Recovery<\/span><\/div><\/div>\r\n                <div class=\"card skill-card\"><div class=\"card-icon\"><i class=\"fa-solid fa-server\"><\/i><\/div><h3>Hardware<\/h3><div class=\"skill-tags\"><span>L1 Support<\/span><span>POS Systems<\/span><span>Zebra Printers<\/span><\/div><\/div>\r\n                <div class=\"card skill-card\"><div class=\"card-icon\"><i class=\"fa-brands fa-html5\"><\/i><\/div><h3>Web Dev<\/h3><div class=\"skill-tags\"><span>WordPress<\/span><span>Elementor<\/span><span>HTML\/CSS<\/span><\/div><\/div>\r\n                <div class=\"card skill-card\"><div class=\"card-icon\"><i class=\"fa-solid fa-network-wired\"><\/i><\/div><h3>Sys Admin<\/h3><div class=\"skill-tags\"><span>ERP Migration<\/span><span>Network Routing<\/span><\/div><\/div>\r\n                <div class=\"card skill-card\"><div class=\"card-icon\"><i class=\"fa-solid fa-bullhorn\"><\/i><\/div><h3>Digital Marketing<\/h3><div class=\"skill-tags\"><span>Content Creator<\/span><span>Video Editing<\/span><span>Creative Design<\/span><span>Social Media Mgmt<\/span><span>Ad Campaigns<\/span><\/div><\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <section id=\"services\" class=\"amila-section\">\r\n        <div class=\"amila-container hidden-up\">\r\n            <h2 class=\"section-title\">Services<\/h2>\r\n            <p class=\"section-subtitle\">What I offer for businesses & individuals<\/p>\r\n            \r\n            <div class=\"grid-3\">\r\n                <div class=\"card service-card\"><div class=\"card-icon\"><i class=\"fa-solid fa-desktop\"><\/i><\/div><h3>IT Support<\/h3><p>End-to-end IT support including Azure AD, Microsoft 365 administration, and SLA troubleshooting.<\/p><\/div>\r\n                <div class=\"card service-card\"><div class=\"card-icon\"><i class=\"fa-brands fa-wordpress\"><\/i><\/div><h3>Web Development<\/h3><p>Custom WordPress websites, SEO-ready structure, and hosting setup.<\/p><\/div>\r\n                <div class=\"card service-card\"><div class=\"card-icon\"><i class=\"fa-solid fa-briefcase\"><\/i><\/div><h3>Consultation<\/h3><p>Strategic IT consultation for small and medium businesses covering digital transformation.<\/p><\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <section id=\"projects\" class=\"amila-section bg-gray\">\r\n        <div class=\"amila-container hidden-up\">\r\n            <h2 class=\"section-title\">My Projects<\/h2>\r\n            <p class=\"section-subtitle\">Real-world solutions I've built and delivered<\/p>\r\n                <div class=\"project-filters\">\r\n        <button class=\"filter-btn active\" data-filter=\"all\">All<\/button>\r\n            <\/div>\r\n\r\n    <!-- NEW SLIDER WRAPPER FOR PROJECTS -->\r\n    <div class=\"slider-wrapper\">\r\n        <button class=\"slider-nav prev\" data-target=\"project-gallery\"><i class=\"fa-solid fa-chevron-left\"><\/i><\/button>\r\n        \r\n        <div id=\"project-gallery\" class=\"slider-track\">\r\n            <p style=\"text-align:center; width:100%; color:var(--text-light);\">No projects found.<\/p>        <\/div>\r\n        \r\n        <button class=\"slider-nav next\" data-target=\"project-gallery\"><i class=\"fa-solid fa-chevron-right\"><\/i><\/button>\r\n    <\/div>\r\n    \r\n        <\/div>\r\n    <\/section>\r\n\r\n    <section id=\"testimonials\" class=\"amila-section\">\r\n        <div class=\"amila-container hidden-up\">\r\n            <h2 class=\"section-title\">Testimonials<\/h2>\r\n            <p class=\"section-subtitle\">What colleagues and clients say<\/p>\r\n                \r\n    <!-- NEW SLIDER WRAPPER FOR TESTIMONIALS -->\r\n    <div class=\"slider-wrapper\">\r\n        <button class=\"slider-nav prev\" data-target=\"testimonial-gallery\"><i class=\"fa-solid fa-chevron-left\"><\/i><\/button>\r\n        \r\n        <div id=\"testimonial-gallery\" class=\"slider-track\">\r\n            <p style=\"text-align:center; width:100%; color:var(--text-light);\">No testimonials found.<\/p>        <\/div>\r\n        \r\n        <button class=\"slider-nav next\" data-target=\"testimonial-gallery\"><i class=\"fa-solid fa-chevron-right\"><\/i><\/button>\r\n    <\/div>\r\n    \r\n        <\/div>\r\n    <\/section>\r\n\r\n    <section id=\"contact\" class=\"amila-section bg-gray\" style=\"margin-bottom: 0;\">\r\n        <div class=\"amila-container hidden-up\">\r\n            <div class=\"contact-title-wrapper\">\r\n                <h2 class=\"contact-new-title\">Get In Touch <strong>With Amila<\/strong><\/h2>\r\n                <p class=\"section-subtitle\" style=\"margin-bottom:0;\">Open to freelance, consultation, and full-time opportunities.<\/p>\r\n            <\/div>\r\n            \r\n            <div class=\"contact-new-grid\">\r\n                <div class=\"contact-form-card\">\r\n                    <h3>Send Us Message<\/h3>\r\n                    <form action=\"https:\/\/api.web3forms.com\/submit\" method=\"POST\">\r\n                        <input type=\"hidden\" name=\"access_key\" value=\"5e835680-aa0e-465f-9596-2e74f63800af\">\r\n                        <input type=\"checkbox\" name=\"botcheck\" class=\"hidden\" style=\"display: none;\">\r\n\r\n                        <div class=\"form-row-2\">\r\n                            <input type=\"text\" name=\"name\" placeholder=\"Your full name\" class=\"new-input\" required>\r\n                            <input type=\"email\" name=\"email\" placeholder=\"Your email address\" class=\"new-input\" required>\r\n                        <\/div>\r\n                        <div class=\"form-row-2\">\r\n                            <input type=\"tel\" name=\"phone\" placeholder=\"Your mobile number\" class=\"new-input\">\r\n                            <input type=\"text\" name=\"subject\" placeholder=\"Subject\" class=\"new-input\" required>\r\n                        <\/div>\r\n                        <textarea name=\"message\" placeholder=\"Write your question here...\" class=\"new-input full-width\" rows=\"5\" required><\/textarea>\r\n                        \r\n                        <button type=\"submit\" class=\"btn btn-primary\" style=\"width: 100%; padding: 16px;\">Send Message<\/button>\r\n                    <\/form>\r\n                <\/div>\r\n\r\n                <div class=\"contact-info-wrapper\">\r\n                    <div class=\"info-block\">\r\n                        <div class=\"info-icon\"><i class=\"fa-solid fa-location-dot\"><\/i><\/div>\r\n                        <div class=\"info-text\">\r\n                            <h4>Let's Meet Us<\/h4>\r\n                            <p>Mirigama, Western Province, Sri Lanka<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"info-block\">\r\n                        <div class=\"info-icon\"><i class=\"fa-brands fa-whatsapp\"><\/i><\/div>\r\n                        <div class=\"info-text\">\r\n                            <h4>Chat with me<\/h4>\r\n                            <p>I'm available to chat.<\/p>\r\n                            <a href=\"https:\/\/wa.me\/94777258820\" target=\"_blank\" class=\"contact-action-link\">Open WhatsApp &rarr;<\/a>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"info-block\">\r\n                        <div class=\"info-icon\"><i class=\"fa-solid fa-phone-volume\"><\/i><\/div>\r\n                        <div class=\"info-text\">\r\n                            <h4>Give me a call<\/h4>\r\n                            <p>Call me directly.<\/p>\r\n                            <a href=\"tel:+94777258820\" class=\"contact-action-link\">Call Now &rarr;<\/a>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"info-block\">\r\n                        <div class=\"info-icon\"><i class=\"fa-regular fa-envelope\"><\/i><\/div>\r\n                        <div class=\"info-text\">\r\n                            <h4>Email Me<\/h4>\r\n                            <p>I'll reply within 24 hours.<\/p>\r\n                            <a href=\"mailto:amilakingston@gmail.com\" class=\"contact-action-link\">Send Email &rarr;<\/a>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n<\/div>\r\n\r\n<script>\r\n    \/\/ Close Notification Logic\r\n    function closeNotification() {\r\n        const notif = document.getElementById('construction-notification');\r\n        notif.style.opacity = '0';\r\n        notif.style.visibility = 'hidden';\r\n        setTimeout(() => { notif.style.display = 'none'; }, 500);\r\n    }\r\n\r\n    document.addEventListener(\"DOMContentLoaded\", function() {\r\n        \r\n        \/\/ CUSTOM CURSOR\r\n        const cursor = document.getElementById('custom-cursor');\r\n        if (cursor && window.innerWidth > 992) {\r\n            document.addEventListener('mousemove', function(e) {\r\n                cursor.style.left = e.clientX + 'px';\r\n                cursor.style.top = e.clientY + 'px';\r\n            });\r\n            const interactables = document.querySelectorAll('a, button, input, textarea, .filter-btn, .slider-nav, .theme-switch');\r\n            interactables.forEach(el => {\r\n                el.addEventListener('mouseenter', () => cursor.classList.add('hover-active'));\r\n                el.addEventListener('mouseleave', () => cursor.classList.remove('hover-active'));\r\n            });\r\n        }\r\n\r\n        \/\/ PARALLAX EFFECT FOR ABOUT FLOATING CARDS\r\n        const aboutZone = document.getElementById('about-zone');\r\n        const pCards = document.querySelectorAll('.js-parallax-card');\r\n        \r\n        if(aboutZone && pCards.length > 0 && window.innerWidth > 992) {\r\n            document.addEventListener('mousemove', function(e) {\r\n                const rect = aboutZone.getBoundingClientRect();\r\n                if(rect.top < window.innerHeight && rect.bottom > 0) {\r\n                    const centerX = rect.left + rect.width \/ 2;\r\n                    const centerY = rect.top + rect.height \/ 2;\r\n                    const moveXCards = (e.clientX - centerX) \/ 12; \r\n                    const moveYCards = (e.clientY - centerY) \/ 12;\r\n                    \r\n                    pCards[0].style.transform = `translate(${moveXCards}px, ${moveYCards}px)`;\r\n                    if(pCards[1]) pCards[1].style.transform = `translate(${-moveXCards}px, ${-moveYCards}px)`;\r\n                }\r\n            });\r\n            aboutZone.addEventListener('mouseleave', function() {\r\n                if(pCards.length > 0) {\r\n                    pCards.forEach(card => card.style.transform = `translate(0px, 0px)`);\r\n                }\r\n            });\r\n        }\r\n        \r\n        \/\/ PROJECT FILTERS\r\n        document.body.addEventListener('click', function(e) {\r\n            if (e.target.classList.contains('filter-btn')) {\r\n                const filterBtns = document.querySelectorAll('.filter-btn');\r\n                const projectCards = document.querySelectorAll('.project-card');\r\n                const projectTrack = document.getElementById('project-gallery');\r\n                \r\n                filterBtns.forEach(b => b.classList.remove('active'));\r\n                e.target.classList.add('active');\r\n\r\n                const filterValue = e.target.getAttribute('data-filter');\r\n                projectCards.forEach(card => {\r\n                    if (filterValue === 'all' || card.getAttribute('data-category') === filterValue) {\r\n                        card.style.display = 'flex'; \r\n                    } else {\r\n                        card.style.display = 'none';\r\n                    }\r\n                });\r\n                if(projectTrack) { projectTrack.scrollTo({ left: 0, behavior: 'smooth' }); }\r\n            }\r\n        });\r\n\r\n        \/\/ SLIDER ARROWS\r\n        document.querySelectorAll('.slider-nav').forEach(btn => {\r\n            btn.addEventListener('click', function() {\r\n                const targetId = this.getAttribute('data-target');\r\n                const track = document.getElementById(targetId);\r\n                if (track) {\r\n                    const item = track.querySelector('.slider-item');\r\n                    if(item) {\r\n                        const scrollAmount = item.offsetWidth + 30;\r\n                        if (this.classList.contains('prev')) {\r\n                            track.scrollBy({ left: -scrollAmount, behavior: 'smooth' });\r\n                        } else {\r\n                            track.scrollBy({ left: scrollAmount, behavior: 'smooth' });\r\n                        }\r\n                    }\r\n                }\r\n            });\r\n        });\r\n\r\n        \/\/ SCROLL ANIMATIONS AND NUMBER COUNTING\r\n        if ('IntersectionObserver' in window) {\r\n            const observer = new IntersectionObserver((entries) => {\r\n                entries.forEach(entry => {\r\n                    if (entry.isIntersecting) {\r\n                        entry.target.classList.add('show');\r\n                        if (entry.target.classList.contains('counter-trigger') && !window.amilaCounted) {\r\n                            window.amilaCounted = true;\r\n                            document.querySelectorAll('.counter').forEach(c => {\r\n                                const target = +c.getAttribute('data-target') || 0;\r\n                                let count = 0; \r\n                                const speed = target \/ 60;\r\n                                const updateCount = setInterval(() => {\r\n                                    count += speed;\r\n                                    if (count >= target) { c.innerText = target; clearInterval(updateCount); } \r\n                                    else { c.innerText = Math.ceil(count); }\r\n                                }, 40);\r\n                            });\r\n                        }\r\n                    }\r\n                });\r\n            }, { threshold: 0.15 });\r\n            document.querySelectorAll('.hidden-left, .hidden-right, .hidden-up').forEach(el => observer.observe(el));\r\n        } else {\r\n            document.querySelectorAll('.hidden-left, .hidden-right, .hidden-up').forEach(el => el.classList.add('show'));\r\n            document.querySelectorAll('.counter').forEach(c => c.innerText = c.getAttribute('data-target'));\r\n        }\r\n\r\n    });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Under Construction I am working silent for a revolution. Got It IT Infrastructure Specialist Amila Nilantha IT Infrastructure Specialist &#038; Digital Strategist Detail-oriented IT Infrastructure Specialist with 6+ years of experience managing enterprise environments (15,000+ users), securing networks, and building high-converting digital solutions across Sri Lanka. Download Portfolio Download CV Contact Me Up Fi 6+ [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/amilanilantha.xyz\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/amilanilantha.xyz\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/amilanilantha.xyz\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/amilanilantha.xyz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/amilanilantha.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":8,"href":"https:\/\/amilanilantha.xyz\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":38,"href":"https:\/\/amilanilantha.xyz\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/38"}],"wp:attachment":[{"href":"https:\/\/amilanilantha.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}